@font-face {
  font-family: Satoshi;
  src: url('../fonts/Satoshi-Light.woff') format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Clash Display;
  src: url('../fonts/ClashDisplay-Medium.woff') format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: white;
  --black: black;

  /* ── Brand color tokens ──────────────────────────────────────────────────
     Single source of truth for recurring brand colors. Change here once
     instead of find-and-replacing across the stylesheet. ──────────────────── */
  --color-bg: #090909;          /* near-black page background */
  --color-accent: #ff7e26;      /* orange — ticker bars, nav underline accent */
  --color-accent-cta: #FF5500;  /* orange — contact form / CTA controls */

  /* ── Motion ───────────────────────────────────────────────────────────────
     Strong ease-out per Emil Kowalski — built-in easings lack punch. Entering
     elements start fast for instant feedback. ─────────────────────────────── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

.w-commerce-commercecartwrapper {
  display: inline-block;
  position: relative;
}

.w-commerce-commercecartopenlink {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}

.w-commerce-commercecartopenlinkcount {
  color: #3898ec;
  text-align: center;
  background-color: #fff;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  display: inline-block;
}

.w-commerce-commercecartcontainerwrapper {
  z-index: 1001;
  background-color: #000c;
  position: fixed;
  inset: 0;
}

.w-commerce-commercecartcontainerwrapper--cartType-modal {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.w-commerce-commercecartcontainerwrapper--cartType-leftSidebar {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}

.w-commerce-commercecartcontainerwrapper--cartType-rightSidebar {
  flex-direction: row;
  justify-content: flex-end;
  align-items: stretch;
  display: flex;
}

.w-commerce-commercecartcontainerwrapper--cartType-leftDropdown {
  background-color: #0000;
  position: absolute;
  inset: 100% auto auto 0;
}

.w-commerce-commercecartcontainerwrapper--cartType-rightDropdown {
  background-color: #0000;
  position: absolute;
  inset: 100% 0 auto auto;
}

.w-commerce-commercecartcontainer {
  background-color: #fff;
  flex-direction: column;
  width: 100%;
  min-width: 320px;
  max-width: 480px;
  display: flex;
  overflow: auto;
  box-shadow: 0 5px 25px #00000040;
}

.w-commerce-commercecartheader {
  border-bottom: 1px solid #e6e6e6;
  flex: none;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  display: flex;
  position: relative;
}

.w-commerce-commercecartheading {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

.w-commerce-commercecartcloselink {
  width: 16px;
  height: 16px;
}

.w-commerce-commercecartformwrapper {
  flex-direction: column;
  flex: 1;
  display: flex;
}

.w-commerce-commercecartform {
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  display: flex;
}

.w-commerce-commercecartlist {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 12px 24px;
  overflow: auto;
}

.w-commerce-commercecartitem {
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
}

.w-commerce-commercecartitemimage {
  width: 60px;
  height: 0%;
}

.w-commerce-commercecartiteminfo {
  flex-direction: column;
  flex: 1;
  margin-left: 16px;
  margin-right: 16px;
  display: flex;
}

.w-commerce-commercecartproductname {
  font-weight: 700;
}

.w-commerce-commercecartoptionlist {
  margin-bottom: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}

.w-commerce-commercecartquantity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 60px;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 6px 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecartquantity::placeholder {
  color: #999;
}

.w-commerce-commercecartquantity:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecartfooter {
  border-top: 1px solid #e6e6e6;
  flex-direction: column;
  flex: none;
  padding: 16px 24px 24px;
  display: flex;
}

.w-commerce-commercecartlineitem {
  flex: none;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  display: flex;
}

.w-commerce-commercecartordervalue {
  font-weight: 700;
}

.w-commerce-commercecartapplepaybutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #000;
  border-width: 0;
  border-radius: 2px;
  align-items: center;
  height: 38px;
  min-height: 30px;
  margin-bottom: 8px;
  padding: 0;
  text-decoration: none;
  display: flex;
}

.w-commerce-commercecartapplepayicon {
  width: 100%;
  height: 50%;
  min-height: 20px;
}

.w-commerce-commercecartquickcheckoutbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #000;
  border-width: 0;
  border-radius: 2px;
  justify-content: center;
  align-items: center;
  height: 38px;
  margin-bottom: 8px;
  padding: 0 15px;
  text-decoration: none;
  display: flex;
}

.w-commerce-commercequickcheckoutgoogleicon, .w-commerce-commercequickcheckoutmicrosofticon {
  margin-right: 8px;
  display: block;
}

.w-commerce-commercecartcheckoutbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 2px;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}

.w-commerce-commercecartemptystate {
  flex: 1;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}

.w-commerce-commercecarterrorstate {
  background-color: #ffdede;
  flex: none;
  margin: 0 24px 24px;
  padding: 10px;
}

.w-commerce-commercecheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}

.w-commerce-commercelayoutmain {
  flex: 0 800px;
  margin-right: 20px;
}

.w-commerce-commercecheckoutcustomerinfowrapper {
  margin-bottom: 20px;
}

.w-commerce-commercecheckoutblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}

.w-commerce-commercecheckoutblockcontent {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 20px;
}

.w-commerce-commercecheckoutlabel {
  margin-bottom: 8px;
}

.w-commerce-commercecheckoutemailinput {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutemailinput::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutemailinput:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutshippingaddresswrapper {
  margin-bottom: 20px;
}

.w-commerce-commercecheckoutshippingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutshippingfullname::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutshippingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutshippingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutshippingstreetaddress::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutshippingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutshippingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutshippingstreetaddressoptional::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutshippingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutrow {
  margin-left: -8px;
  margin-right: -8px;
  display: flex;
}

.w-commerce-commercecheckoutcolumn {
  flex: 1;
  padding-left: 8px;
  padding-right: 8px;
}

.w-commerce-commercecheckoutshippingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutshippingcity::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutshippingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutshippingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutshippingstateprovince::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutshippingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutshippingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutshippingzippostalcode::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutshippingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutshippingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutshippingcountryselector::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutshippingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutshippingmethodswrapper {
  margin-bottom: 20px;
}

.w-commerce-commercecheckoutshippingmethodslist {
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}

.w-commerce-commercecheckoutshippingmethoditem {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 0;
  padding: 16px;
  font-weight: 400;
  display: flex;
}

.w-commerce-commercecheckoutshippingmethoddescriptionblock {
  flex-direction: column;
  flex-grow: 1;
  margin-left: 12px;
  margin-right: 12px;
  display: flex;
}

.w-commerce-commerceboldtextblock {
  font-weight: 700;
}

.w-commerce-commercecheckoutshippingmethodsemptystate {
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 64px 16px;
}

.w-commerce-commercecheckoutpaymentinfowrapper {
  margin-bottom: 20px;
}

.w-commerce-commercecheckoutcardnumber {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutcardnumber::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutcardnumber:focus, .w-commerce-commercecheckoutcardnumber.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutcardexpirationdate {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutcardexpirationdate::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutcardexpirationdate:focus, .w-commerce-commercecheckoutcardexpirationdate.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutcardsecuritycode {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutcardsecuritycode::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutcardsecuritycode:focus, .w-commerce-commercecheckoutcardsecuritycode.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutbillingaddresstogglewrapper {
  flex-direction: row;
  display: flex;
}

.w-commerce-commercecheckoutbillingaddresstogglecheckbox {
  margin-top: 4px;
}

.w-commerce-commercecheckoutbillingaddresstogglelabel {
  margin-left: 8px;
  font-weight: 400;
}

.w-commerce-commercecheckoutbillingaddresswrapper {
  margin-top: 16px;
  margin-bottom: 20px;
}

.w-commerce-commercecheckoutbillingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutbillingfullname::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutbillingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutbillingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutbillingstreetaddress::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutbillingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutbillingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutbillingstreetaddressoptional::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutbillingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutbillingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutbillingcity::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutbillingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutbillingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutbillingstateprovince::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutbillingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutbillingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutbillingzippostalcode::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutbillingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutbillingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commercecheckoutbillingcountryselector::placeholder {
  color: #999;
}

.w-commerce-commercecheckoutbillingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commercecheckoutorderitemswrapper {
  margin-bottom: 20px;
}

.w-commerce-commercecheckoutsummaryblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}

.w-commerce-commercecheckoutorderitemslist {
  margin-bottom: -20px;
}

.w-commerce-commercecheckoutorderitem {
  margin-bottom: 20px;
  display: flex;
}

.w-commerce-commercecheckoutorderitemdescriptionwrapper {
  flex-grow: 1;
  margin-left: 16px;
  margin-right: 16px;
}

.w-commerce-commercecheckoutorderitemquantitywrapper {
  white-space: pre-wrap;
  display: flex;
}

.w-commerce-commercecheckoutorderitemoptionlist {
  margin-bottom: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}

.w-commerce-commercelayoutsidebar {
  flex: 0 0 320px;
  position: sticky;
  top: 20px;
}

.w-commerce-commercecheckoutordersummarywrapper {
  margin-bottom: 20px;
}

.w-commerce-commercecheckoutsummarylineitem, .w-commerce-commercecheckoutordersummaryextraitemslistitem {
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 8px;
  display: flex;
}

.w-commerce-commercecheckoutsummarytotal {
  font-weight: 700;
}

.w-commerce-commercecheckoutplaceorderbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 3px;
  align-items: center;
  margin-bottom: 20px;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}

.w-commerce-commercecheckouterrorstate {
  background-color: #ffdede;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-commerce-commerceaddtocartform {
  margin: 0 0 15px;
}

.w-commerce-commerceaddtocartquantityinput {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 60px;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 6px 8px 12px;
  line-height: 20px;
  display: block;
}

.w-commerce-commerceaddtocartquantityinput::placeholder {
  color: #999;
}

.w-commerce-commerceaddtocartquantityinput:focus {
  border-color: #3898ec;
  outline-style: none;
}

.w-commerce-commerceaddtocartoptionpillgroup {
  margin-bottom: 10px;
  display: flex;
}

.w-commerce-commerceaddtocartoptionpill {
  color: #000;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #000;
  margin-right: 10px;
  padding: 8px 15px;
}

.w-commerce-commerceaddtocartoptionpill.w--ecommerce-pill-selected {
  color: #fff;
  background-color: #000;
}

.w-commerce-commerceaddtocartoptionpill.w--ecommerce-pill-disabled {
  color: #666;
  cursor: not-allowed;
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  outline-style: none;
}

.w-commerce-commercebuynowbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  margin-top: 10px;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}

.w-commerce-commercebuynowbutton.w--ecommerce-buy-now-disabled {
  color: #666;
  cursor: not-allowed;
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  outline-style: none;
}

.w-commerce-commerceaddtocartbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}

.w-commerce-commerceaddtocartbutton.w--ecommerce-add-to-cart-disabled {
  color: #666;
  cursor: not-allowed;
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  outline-style: none;
}

.w-commerce-commerceaddtocartoutofstock {
  background-color: #ddd;
  margin-top: 10px;
  padding: 10px;
}

.w-commerce-commerceaddtocarterror {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
}

.w-commerce-commerceorderconfirmationcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}

.w-commerce-commercecheckoutcustomerinfosummarywrapper {
  margin-bottom: 20px;
}

.w-commerce-commercecheckoutsummaryitem, .w-commerce-commercecheckoutsummarylabel {
  margin-bottom: 8px;
}

.w-commerce-commercecheckoutsummaryflexboxdiv {
  flex-direction: row;
  justify-content: flex-start;
  display: flex;
}

.w-commerce-commercecheckoutsummarytextspacingondiv {
  margin-right: .33em;
}

.w-commerce-commercecheckoutshippingsummarywrapper, .w-commerce-commercecheckoutpaymentsummarywrapper {
  margin-bottom: 20px;
}

.w-commerce-commercepaypalcheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}

.w-commerce-commercepaypalcheckouterrorstate {
  background-color: #ffdede;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-checkbox {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-checkbox:before {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox:after {
  content: " ";
  clear: both;
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox-input {
  float: left;
  margin: 4px 0 0 -20px;
  line-height: normal;
}

.w-checkbox-input--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 12px;
  height: 12px;
}

.w-checkbox-input--inputType-custom.w--redirected-checked {
  background-color: #3898ec;
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/custom-checkbox-checkmark.589d534424.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: #3898ec;
}

.w-checkbox-input--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom.w--redirected-checked {
  border-width: 4px;
  border-color: #3898ec;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-commerce-commercelayoutmain {
    flex-basis: auto;
    margin-right: 0;
  }

  .w-commerce-commercelayoutsidebar {
    flex-basis: auto;
  }

  .w-layout-blockcontainer {
    max-width: none;
  }
}

@media screen and (max-width: 479px) {
  .w-commerce-commercecartcontainerwrapper--cartType-modal {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }

  .w-commerce-commercecartcontainerwrapper--cartType-leftDropdown, .w-commerce-commercecartcontainerwrapper--cartType-rightDropdown {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .w-commerce-commercecartquantity, .w-commerce-commercecheckoutemailinput, .w-commerce-commercecheckoutshippingfullname, .w-commerce-commercecheckoutshippingstreetaddress, .w-commerce-commercecheckoutshippingstreetaddressoptional {
    font-size: 16px;
  }

  .w-commerce-commercecheckoutrow {
    flex-direction: column;
  }

  .w-commerce-commercecheckoutshippingcity, .w-commerce-commercecheckoutshippingstateprovince, .w-commerce-commercecheckoutshippingzippostalcode, .w-commerce-commercecheckoutshippingcountryselector, .w-commerce-commercecheckoutcardnumber, .w-commerce-commercecheckoutcardexpirationdate, .w-commerce-commercecheckoutcardsecuritycode, .w-commerce-commercecheckoutbillingfullname, .w-commerce-commercecheckoutbillingstreetaddress, .w-commerce-commercecheckoutbillingstreetaddressoptional, .w-commerce-commercecheckoutbillingcity, .w-commerce-commercecheckoutbillingstateprovince, .w-commerce-commercecheckoutbillingzippostalcode, .w-commerce-commercecheckoutbillingcountryselector, .w-commerce-commerceaddtocartquantityinput {
    font-size: 16px;
  }
}

body {
  color: #333;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1 {
  letter-spacing: 2px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Clash Display, sans-serif;
  font-size: 4rem;
  font-weight: 500;
  line-height: 120%;
}

h2 {
  letter-spacing: 1px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Clash Display, sans-serif;
  font-size: 3rem;
  font-weight: 500;
  line-height: 120%;
}

h3 {
  letter-spacing: 1px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Clash Display, sans-serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 120%;
}

h4 {
  letter-spacing: 1px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Clash Display, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 140%;
}

h5 {
  letter-spacing: 1px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Clash Display, sans-serif;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 130%;
}

h6 {
  letter-spacing: 1px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Clash Display, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 130%;
}

p {
  margin-bottom: 0;
}

a {
  color: #ffffffb3;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1.25rem;
}

li {
  margin-bottom: .5rem;
  padding-left: .5rem;
}

img {
  max-width: 100%;
  display: inline-block;
}

label {
  margin-bottom: .25rem;
  font-weight: 500;
}

strong {
  font-weight: bold;
}

figure {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

figcaption {
  text-align: center;
  margin-top: .25rem;
}

.form-message-success {
  background-color: #0000;
  border: 1px solid #ffffff1f;
  padding: 1.25rem;
}

.z2 {
  z-index: 2;
  position: relative;
}

.text-color-default {
  color: #fff;
}

.styleguide-3-col {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.max-width-full {
  width: 100%;
  max-width: none;
}

.layer {
  justify-content: center;
  align-items: center;
  position: absolute;
  inset: 0%;
}

.show {
  display: block;
}

.overflow-hidden {
  overflow: hidden;
}

.icon-1x1-small {
  width: 20px;
  height: 20px;
  line-height: 100%;
}

.heading-medium {
  letter-spacing: 3px;
  font-family: Clash Display, sans-serif;
  font-size: 6.5vw;
  font-weight: 500;
  line-height: 100%;
}

.heading-large {
  letter-spacing: 4px;
  font-family: Clash Display, sans-serif;
  font-size: 8vw;
  font-weight: 500;
  line-height: 100%;
}

.heading-large.text-uppercase {
  align-self: center;
  line-height: 90%;
}

.heading-large.text-uppercase.text-outline {
  text-align: center;
  align-self: center;
}

.text-size-large {
  font-size: 1.375rem;
  line-height: 180%;
}

.text-size-regular {
  font-size: 1rem;
  line-height: 160%;
}

.text-align-center {
  text-align: center;
}

.z1 {
  z-index: 1;
  position: relative;
}

.show-mobile-portrait {
  display: none;
}

.text-style-italic {
  font-style: italic;
}

.form-radio-label {
  font-size: 1rem;
  font-weight: 300;
}

.hide {
  display: none;
}

.text-size-medium {
  font-size: 1.25rem;
}

.text-align-left {
  text-align: left;
}

.text-style-link {
  text-decoration: underline;
}

.text-style-link:hover {
  color: #fff;
}

.form-wrapper {
  margin-bottom: 0;
}

.text-size-small {
  font-size: .875rem;
  line-height: 180%;
}

.text-rich-text h1 {
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  font-size: 3.25rem;
}

.text-rich-text h3 {
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

.text-rich-text h5 {
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 1.25rem;
  margin-bottom: .75rem;
}

.text-rich-text h6 {
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 1.25rem;
  margin-bottom: .5rem;
}

.text-rich-text ul {
  margin-bottom: .75rem;
}

.text-rich-text h2 {
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  font-size: 2.75rem;
}

.text-rich-text h4 {
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.text-rich-text p {
  color: #ffffffb3;
  margin-bottom: 1rem;
}

.text-rich-text blockquote {
  letter-spacing: 1px;
  background-image: url('../images/icon-quote.svg');
  background-position: 0 56px;
  background-repeat: no-repeat;
  background-size: 40px;
  border-left: 0 #000;
  margin-top: 0;
  margin-bottom: 0;
  padding: 3rem 0 3rem 4.5rem;
  font-family: Clash Display, sans-serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 140%;
}

.text-rich-text strong {
  font-weight: 600;
}

.text-rich-text a, .text-rich-text a:hover {
  text-decoration: underline;
}

.text-rich-text figcaption {
  color: #ffffffb3;
  font-size: .875rem;
}

.max-width-xlarge {
  width: 100%;
  max-width: 50rem;
}

.max-width-medium {
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 32rem;
  display: flex;
}

.max-width-medium.mobile {
  text-align: center;
  justify-content: flex-start;
  align-items: center;
}

.form-radio {
  flex-direction: row;
  align-items: center;
  margin-bottom: .5rem;
  padding-left: 0;
  display: flex;
}

.heading-xlarge {
  letter-spacing: 5px;
  font-family: Clash Display, sans-serif;
  font-size: 10vw;
  font-weight: 500;
  line-height: 90%;
}

.heading-xlarge.text-uppercase {
  line-height: 90%;
}

.max-width-xsmall {
  width: 100%;
  max-width: 16rem;
}

.form-input {
  color: #fff;
  letter-spacing: .5px;
  background-color: #ffffff08;
  border: 1px solid #ffffff1f;
  border-radius: 0;
  min-height: 4rem;
  margin-bottom: 0;
  padding: 1rem 1.25rem;
  font-family: Satoshi, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 150%;
  transition: background-color .2s, border .2s;
}

.form-input:active, .form-input:focus, .form-input.-wfp-focus {
  border-color: #ffffff80;
}

.form-input::placeholder {
  color: #ffffffb3;
}

.form-input.is-select-input {
  color: #fff;
}

.form-input.is-text-area {
  color: #fff;
  min-height: 10rem;
  transition: background-color .2s, border .2s;
}

.form-input.checkout {
  background-color: #ffffff05;
}

.form-input.is-product-quantity {
  width: 100%;
}

.form-checkbox-label {
  margin-left: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 140%;
}

.max-width-xxsmall {
  width: 100%;
  max-width: 12rem;
}

.form-label {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-family: Clash Display, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 160%;
}

.text-size-tiny {
  font-size: .75rem;
  line-height: 160%;
}

.form-checkbox-icon {
  border-color: #191919;
  border-radius: 0;
  width: 20px;
  height: 20px;
  margin: 0 .5rem 0 0;
}

.form-checkbox-icon.w--redirected-checked {
  background-color: #5c43d2;
  background-size: 70%;
  border-color: #5c43d2;
  border-radius: 0;
  width: 20px;
  height: 20px;
  margin: 0 .5rem 0 0;
}

.form-checkbox-icon.w--redirected-focus {
  box-shadow: none;
  margin-top: 0;
  margin-left: 0;
  margin-right: .5rem;
}

.container-large {
  width: 100%;
  max-width: 87.5rem;
  margin-left: auto;
  margin-right: auto;
}

.max-width-xxlarge {
  width: 100%;
  max-width: 62.5rem;
}

.styleguide-classes {
  display: none;
}

.align-center {
  margin-left: auto;
  margin-right: auto;
}

.styleguide-right {
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
}

.styleguide-right.gap-medium {
  grid-row-gap: 2.5rem;
}

.spacing-clean {
  margin: 0;
  padding: 0;
}

.page-padding {
  padding: 60px 2.5rem 0;
}

.page-padding.credits {
  padding-top: 40px;
}

.text-align-right {
  text-align: right;
}

.show-tablet {
  display: none;
}

.max-width-large {
  width: 100%;
  max-width: 40rem;
}

.text-color-muted {
  color: #ffffffb3;
}

.form-radio-icon {
  background-color: #ffffff08;
  border: 1px solid #ffffff1f;
  width: 20px;
  height: 20px;
  margin-top: 0;
  margin-left: 0;
  margin-right: .5rem;
}

.form-radio-icon.w--redirected-checked {
  border-width: .3rem;
  border-color: #5c43d2;
  width: 20px;
  height: 20px;
}

.form-radio-icon.w--redirected-focus {
  width: .875rem;
  height: .875rem;
  box-shadow: 0 0 .25rem 0 #3898ec;
}

.show-mobile-landscape {
  display: none;
}

.max-width-small {
  width: 100%;
  max-width: 22rem;
}

.form-field-wrapper {
  margin-bottom: 2rem;
}

.form-checkbox {
  flex-direction: row;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}

.form-message-error {
  background-color: #0000;
  border: 1px solid #ffffff1f;
  margin-top: 1.5rem;
  padding: .75rem 1rem;
}

.utility-component {
  border: 1px solid #191919;
  justify-content: center;
  align-items: center;
  height: 100vh;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.utility-form-block {
  text-align: center;
  flex-direction: column;
  align-items: center;
  width: 350px;
  display: flex;
}

.utility-form {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  display: flex;
}

.main-wrapper {
  z-index: 1;
}

.container-medium {
  width: 100%;
  max-width: 62.5rem;
  margin-left: auto;
  margin-right: auto;
}

.container-small {
  width: 100%;
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
}

.button-text-old {
  color: #191919;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-family: Roboto Mono;
  font-size: 1rem;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
  display: inline-block;
}

.button-text-old.arrow-right {
  align-content: stretch;
}

.margin-tiny {
  margin: .125rem;
}

.margin-xxsmall {
  margin: .25rem;
}

.margin-xsmall {
  margin: .5rem;
}

.margin-small {
  margin: 1rem;
}

.margin-medium {
  margin: 2rem;
}

.margin-large {
  margin: 3rem;
}

.margin-xlarge {
  margin: 4rem;
}

.margin-xxlarge {
  margin: 5rem;
}

.margin-huge {
  margin: 6rem;
}

.margin-xhuge {
  margin: 8rem;
}

.margin-xxhuge {
  margin: 12rem;
}

.padding-tiny {
  padding: .125rem;
}

.padding-xxsmall {
  padding: .25rem;
}

.padding-xsmall {
  padding: .5rem;
}

.padding-small {
  padding: 1rem;
}

.padding-medium {
  padding: 2rem;
}

.padding-large {
  padding: 2.5rem;
}

.padding-xlarge {
  padding: 4rem;
}

.padding-xxlarge {
  padding: 5rem;
}

.padding-huge {
  padding: 6rem;
}

.padding-xhuge {
  padding: 8rem;
}

.padding-xxhuge {
  padding: 12rem;
}

.margin-top {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

.margin-bottom {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.margin-bottom.margin-medium {
  text-align: center;
  margin-bottom: 2rem;
  display: block;
}

.margin-bottom.margin-tiny {
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0;
}

.margin-bottom.margin-huge.about-me {
  margin-bottom: 2rem;
}

.margin-bottom.margin-tiny {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.margin-left {
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
}

.margin-right {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
}

.margin-vertical {
  margin-left: 0;
  margin-right: 0;
}

.margin-horizontal {
  margin-top: 0;
  margin-bottom: 0;
}

.padding-top {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

.padding-top.padding-huge {
  padding-top: 0;
}

.padding-top.padding-xlarge {
  padding-bottom: 1.1rem;
}

.padding-top.padding-xhuge {
  padding-top: 3.1rem;
  padding-bottom: 3.4rem;
}

.padding-top.padding-large {
  padding-top: 0;
}

.padding-bottom {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.padding-left {
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
}

.padding-right {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.padding-vertical {
  padding-left: 0;
  padding-right: 0;
}

.padding-vertical.padding-xxhuge {
  padding-top: 0;
  padding-bottom: 5.1rem;
}

.padding-vertical.padding-huge {
  padding-top: 0;
  padding-bottom: 3rem;
}

.padding-vertical.padding-xlarge {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.padding-vertical.padding-xhuge {
  padding-top: 0;
}

.padding-horizontal {
  padding-top: 0;
  padding-bottom: 0;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-auto {
  overflow: auto;
}

.body {
  color: #fff;
  background-color: var(--color-bg);
  background-image: url('../images/noise.png');
  background-position: 0 0;
  background-size: 110px 110px;
  font-family: Satoshi, sans-serif;
  font-weight: 300;
  line-height: 180%;
}

.navbar-inner {
  z-index: 2;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: grid;
}

.line {
  perspective-origin: 50%;
  transform-origin: 50%;
  background-color: #ffffff1f;
  width: 100%;
  height: 1px;
}

.heading-h3 {
  letter-spacing: 1px;
  font-family: Clash Display, sans-serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 120%;
}

.heading-h3.text-uppercase {
  letter-spacing: 2px;
}

.text-size-medium {
  font-size: 1.125rem;
  line-height: 180%;
}

.heading-h2 {
  letter-spacing: 2px;
  font-family: Clash Display, sans-serif;
  font-size: 3rem;
  font-weight: 500;
  line-height: 120%;
}

.heading-h2.text-uppercase {
  letter-spacing: 3px;
}

.text-uppercase {
  text-transform: uppercase;
}

.heading-h4 {
  text-align: left;
  letter-spacing: 1px;
  font-family: Clash Display, sans-serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 120%;
}

.heading-h4.text-uppercase {
  text-align: left;
  letter-spacing: 2px;
  justify-content: center;
  align-self: center;
  align-items: center;
  font-size: 1.5rem;
  display: flex;
}

.heading-h4.text-uppercase.extra-credits {
  clear: left;
  text-align: right;
  white-space: pre;
  justify-content: center;
  align-items: center;
  font-size: .8rem;
  line-height: 200%;
  overflow: visible;
}

.heading-h1 {
  letter-spacing: 2px;
  font-family: Clash Display, sans-serif;
  font-size: 4rem;
  font-weight: 500;
  line-height: 120%;
}

.heading-h1.text-uppercase {
  letter-spacing: 3px;
}

.heading-h5 {
  letter-spacing: 2px;
  font-family: Clash Display, sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 130%;
}

.heading-h5.text-uppercase {
  letter-spacing: 2px;
}

.navbar-right {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1px auto 1px auto;
  grid-auto-columns: 1fr;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.navbar {
  z-index: 1000;
}

.button-old {
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-color: #191919;
  border-radius: 500px;
  padding: 1.25rem 2rem;
  font-family: Satoshi, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}

.button-old:hover {
  border-color: #1a191e;
}

.heading-h6 {
  letter-spacing: 1px;
  font-family: Clash Display, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 130%;
  text-decoration: none;
}

.heading-h6:hover {
  text-decoration: none;
}

.heading-h6.text-uppercase {
  text-align: center;
  letter-spacing: 2px;
}

.section-404 {
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: translate(0);
}

.label-old {
  color: #191919;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid #191919;
  border-radius: 6px;
  align-items: center;
  padding: .5rem .6rem;
  font-family: Roboto Mono;
  font-size: 13px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.styleguide-color-palette {
  height: 5rem;
}

.button-2 {
  z-index: 10;
  color: #000;
  text-align: center;
  background-color: #e2ebf0;
  border: 1px #d1dfe4;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  min-width: 8rem;
  padding: .875rem 1.875rem;
  font-size: .875rem;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.navbar-wrapper {
  z-index: 9999;
}

.header {
  z-index: 100;
}

.icon-1x1-default {
  width: 24px;
  height: 24px;
  line-height: 100%;
}

.icon-1x1-medium {
  width: 28px;
  height: 28px;
  line-height: 100%;
}

.icon-1x1-large {
  width: 32px;
  height: 32px;
  line-height: 100%;
}

.styleguide-flex {
  grid-column-gap: 1rem;
  align-items: center;
  display: flex;
}

.icon-1x1-xsmall {
  width: 18px;
  height: 18px;
  line-height: 100%;
}

.text-size-xlarge {
  font-size: 1.5rem;
  line-height: 150%;
}

.container-default {
  width: 100%;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}

.container-xlarge {
  width: 100%;
  max-width: 100rem;
  margin-left: auto;
  margin-right: auto;
}

.container-xsmall {
  width: 100%;
  max-width: 37.5rem;
  margin-left: auto;
  margin-right: auto;
}

.accordion-title-wapper {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
}

.post-preview-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.footer {
  z-index: 0;
  margin-top: -1px;
  position: relative;
}

.footer-bottom {
  text-align: center;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.footer-grid {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: .5fr .5fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.licensing-item-right {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}

.licensing-inner-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 200px 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.licensing-inner-right {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-direction: column;
  display: flex;
}

.licensing-item {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: .5fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: flex;
}

.changelog-grid-item {
  grid-column-gap: 4rem;
  grid-row-gap: 2.5rem;
  grid-template-rows: auto;
  grid-template-columns: .5fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}

.changelog-right {
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
}

.block-quote {
  letter-spacing: 1px;
  background-image: url('../images/icon-quote.svg');
  background-position: 0 59px;
  background-repeat: no-repeat;
  background-size: 40px;
  border-left: 1px #000;
  margin-bottom: 0;
  padding: 3rem 0 3rem 4.5rem;
  font-family: Clash Display, sans-serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 140%;
}

.heading-small {
  letter-spacing: 3px;
  font-family: Clash Display, sans-serif;
  font-size: 5vw;
  font-weight: 500;
  line-height: 110%;
}

.heading-small.text-uppercase {
  letter-spacing: 3px;
  align-self: auto;
}

.heading-small.text-uppercase.text-outline, .heading-small.text-uppercase.home {
  text-align: left;
  align-self: flex-start;
}

.button-old-2 {
  color: #121416;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-color: #0000;
  border: 1px solid #191919;
  border-radius: 6px;
  margin: 0;
  padding: .6rem 1rem;
  font-family: Roboto Mono;
  font-size: 15px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
  transition: border .3s;
  position: relative;
  overflow: hidden;
}

.button-old-2:hover {
  border-color: #121416;
}

.button-inner {
  z-index: 6;
  flex-direction: column;
  height: 14px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.button-inner-text, .button-inner-text-hover {
  justify-content: center;
  align-items: center;
}

.text-meta {
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: Clash Display, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 160%;
}

.text-meta.text-color-muted {
  text-align: left;
  flex-flow: row;
  justify-content: flex-start;
  align-self: auto;
  align-items: stretch;
  padding-bottom: 0;
  display: block;
}

.text-meta.text-color-muted.extra-credits {
  font-size: .8rem;
}

.text-meta.text-color-muted.footer.middle.home {
  text-align: left;
}

.text-meta.text-color-muted.middle {
  text-align: center;
}

.text-meta.text-color-muted {
  justify-content: flex-start;
  align-items: center;
  font-size: 1rem;
}

.navbar-menu {
  z-index: 9999;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  align-items: center;
  display: flex;
}

.about-gallery {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  border-radius: 6rem;
  align-items: center;
  height: 800px;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: translate(0);
}

.accordion {
  border: 1px solid #ffffff1f;
  padding: 2rem;
}

.accordion-title-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr auto;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}

.accordion-title {
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: Clash Display, sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 140%;
}

.accordion-icon {
  background-color: var(--color-accent);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: flex;
}

.accordion-content-wrapper {
  overflow: hidden;
}

.accordion-content {
  padding-top: 1rem;
}

.blog-post-image {
  object-fit: cover;
  width: 100%;
  position: absolute;
}

.label-2 {
  color: #000;
  text-transform: lowercase;
  white-space: nowrap;
  border: 1px solid #000;
  border-radius: 500px;
  align-items: center;
  padding: .5rem .75rem;
  font-size: 13px;
  line-height: 120%;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.cart-checkout-actions {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-direction: column;
  display: flex;
}

.web-payments {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.cart-item-quantity {
  background-color: #0000;
  border-style: solid;
  border-color: #242424;
  border-radius: 0;
  height: 40px;
  margin-bottom: 0;
  font-size: 16px;
}

.button-5 {
  color: #fff;
  text-align: center;
  letter-spacing: .5px;
  text-transform: uppercase;
  border: 1px solid #ffffff1a;
  border-radius: 500px;
  justify-content: center;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .3s;
  position: relative;
  overflow: hidden;
}

.button-5:hover {
  border-color: #1a191e;
}

.cart-footer {
  border-top-color: #ffffff1f;
  padding: 1.5rem;
}

.cart-item-option {
  margin-bottom: 0;
  padding-left: 0;
  font-size: 1rem;
}

.cart-item-content {
  margin-left: 1rem;
  margin-right: 1rem;
}

.cart-item-remove-text {
  letter-spacing: 1px;
  font-family: Clash Display, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 150%;
}

.cart-wrapper {
  z-index: 9999;
  background-color: #090909cc;
}

.cart-close-button {
  width: auto;
  height: auto;
  font-size: .875rem;
  text-decoration: underline;
}

.cart-item-price {
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: Clash Display, sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.cart-list {
  padding: 2rem;
}

.cart-item-image {
  object-fit: cover;
  border-right: 1px solid #242424;
  border-radius: .25rem;
  width: 60px;
  height: auto;
}

.cart-item-price-wrapper {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  align-items: center;
  display: flex;
}

.cart-item-remove {
  text-decoration: underline;
}

.cart-header {
  border-bottom: 1px solid #ffffff1f;
  margin-bottom: 0;
  padding: 1.25rem 1.5rem;
}

.cart-item {
  border-bottom: 1px solid #242424;
  align-items: flex-start;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.cart-item:first-child {
  padding-top: 0;
}

.cart-item:last-child {
  border-bottom-style: none;
  padding-bottom: 0;
}

.cart-item-price-compare {
  font-family: Roboto Mono;
  font-size: 13px;
  font-weight: 400;
  text-decoration: line-through;
}

.cart-container {
  background-color: var(--color-bg);
  background-image: url('../images/noise.png');
  background-position: 0 0;
  background-size: 110px 110px;
  border-left: 1px solid #ffffff1f;
}

.section-home-hero {
  position: relative;
}

.italic {
  font-family: Zodiak;
  font-weight: 400;
}

.project-gallery-image {
  width: 100%;
}

.footer-column {
  padding-top: 32px;
}

.checkout-form {
  background-color: #0000;
  min-height: 0;
  padding: 0;
}

.checkout-shipping-method {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: #0000;
  border-bottom-color: #191919;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding: 0 0 1.5rem;
}

.checkout-shipping-method:last-child {
  border-bottom-width: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.footer-small {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  text-align: center;
  grid-template-rows: auto;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: start;
  margin-top: 4rem;
  padding-bottom: 4rem;
  display: block;
}

.checkout-shipping-method-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: row;
  align-items: baseline;
  width: 100%;
  display: flex;
}

.checkout-block-content {
  background-color: #0000;
  border: 0 solid #000;
  padding: 1.5rem 2rem 2rem;
}

.checkout-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 400px;
  grid-auto-columns: 1fr;
  display: grid;
}

.checkout-summary-inner {
  margin-bottom: 0;
}

.checkout-shipping-method-content {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.checkout-block {
  border: 1px solid #ffffff1f;
  margin-top: 0;
  margin-bottom: 0;
}

.checkout-grid-left {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  margin-right: 0;
  display: flex;
}

.checkout-block-header {
  background-color: #0000;
  border-width: 0;
  padding: 2rem 2rem 0;
}

.checkout-grid-right {
  position: static;
}

.checkout-shipping-method-list {
  border-left-width: 0;
  border-right-width: 0;
}

.checkout-summary {
  background-color: #ffffff08;
  border: 1px solid #ffffff1f;
  padding: 2rem 2rem 1.5rem;
  position: sticky;
  top: 2rem;
}

.checkout-summary-block-content {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: #0000;
  border: 0 solid #000;
  flex-direction: column;
  padding: 1rem 0;
  display: flex;
}

.checkout-summary-block-header {
  background-color: #0000;
  border-width: 0;
  padding: 0 0 0;
}

.checkout-order-item {
  border-top: 1px solid #191919;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
}

.checkout-order-item:first-child {
  border-top-style: none;
  border-top-width: 0;
  margin-top: 0;
  padding-top: 0;
}

.navbar-dropdown-wrapper {
  position: static;
}

.navbar-menu-item-link {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  color: #fff;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background-color: #0000;
  align-items: center;
  padding: 0;
  font-family: Clash Display, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 120%;
  text-decoration: none;
  transition: background-color .3s;
  display: flex;
}

.button-text-4 {
  color: #5bb5a2;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 120%;
  text-decoration: none;
  display: inline-block;
}

.navbar-dropdown-grid {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: .4fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.navbar-dropdown-inner {
  background-color: var(--color-bg);
  background-image: url('../images/noise.png');
  background-position: 0 0;
  background-size: 110px 110px;
  border-top: 1px solid #ffffff1f;
  border-bottom: 1px solid #ffffff1f;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.navbar-dropdown {
  z-index: 9999;
  background-color: #0000;
  justify-content: center;
  width: 100%;
  min-width: 0;
  margin-top: -6px;
  padding-top: 3rem;
  position: absolute;
  left: 0;
  right: 0;
}

.about-team-item-video {
  width: 100%;
  height: 100%;
}

.checkout-summary-buttons {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-direction: column;
  display: flex;
}

.text-meta-small {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: Clash Display, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 130%;
}

.text-meta-small.text-color-muted.extra-credits {
  text-align: left;
  white-space: pre;
  font-size: .8rem;
  line-height: 200%;
}

.text-meta-small.text-color-muted.right {
  align-self: flex-end;
}

.text-meta-small.text-color-muted {
  text-align: right;
  align-self: flex-start;
}

.footer-grid-left {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.footer-grid-right-inner {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  grid-template: ". Area"
  / 1fr;
  display: grid;
}

.text-meta-link {
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: Clash Display, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 130%;
}

.text-meta-link:hover {
  text-decoration: underline;
}

.image-wrapper {
  aspect-ratio: auto;
  border-radius: .5rem;
  position: relative;
  overflow: clip;
  transform: translate(0);
}

.home-clients-grid {
  grid-column-gap: 8rem;
  grid-row-gap: 8rem;
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.home-clients-logos-grid {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  place-items: center;
  display: flex;
}

.home-services-grid {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start stretch;
  display: grid;
}

.home-services-item {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.home-services-grid-right {
  grid-column-gap: 6rem;
  grid-row-gap: 6rem;
  flex-direction: column;
  display: flex;
}

.container-xxlarge {
  width: 100%;
  max-width: 112.5rem;
  margin-left: auto;
  margin-right: auto;
}

.section-cta-contact {
  position: relative;
}

.section-contact {
  z-index: 1;
}

.navbar-dropdown-grid-right-inner-grid {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.navbar-menu-cart-quantity {
  color: #fff;
  background-color: #0000;
  min-width: 0;
  height: auto;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  font-family: Clash Display, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 120%;
}

.navbar-menu-cart-quantity-wrapper {
  display: flex;
}

.mobile-menu-toggle {
  display: none;
}

.mobile-menu-toggle-line._02 {
  margin-top: -1px;
}

.mobile-menu-toggle-line._03 {
  bottom: 0;
}

.navbar-right-button {
  display: flex;
}

.mobile-menu {
  z-index: 100;
  display: none;
}

.mobile-menu-nav {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex-direction: column;
  display: flex;
}

.mobile-menu-nav-link {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  font-family: Clash Display, sans-serif;
  font-size: 13px;
  font-weight: 500;
  display: flex;
}

.form-row-1-3 {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  margin-left: 0;
  margin-right: 0;
}

.form-column {
  padding-left: 0;
  padding-right: 0;
}

.form-row-1-2 {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  margin-left: 0;
  margin-right: 0;
}

.checkout-order-item-grid {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.image-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.navbar-dropdown-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.subnav-item {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  color: #fff9;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  flex-direction: column;
  margin-bottom: 0;
  padding-left: 0;
  font-family: Clash Display, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 150%;
  transition: color .3s;
  display: flex;
}

.subnav-item:hover {
  color: #fff;
}

.subnav-item.w--current {
  text-decoration: underline;
}

.button-text {
  color: #fff;
  text-align: center;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-family: Clash Display, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 120%;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
  transform: translate(0);
}

.styleguide-menu-toggle {
  display: none;
}

.button {
  color: #fff;
  text-align: center;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid #ffffff1f;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: .75rem 1rem;
  font-family: Clash Display, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 110%;
  text-decoration: none;
  transition: background-color .3s, border .3s;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.button:hover {
  border-color: #fff3;
}

.button.primary {
  background-color: var(--color-accent);
  border-color: #0000;
  transition: background-color .3s, border .3s;
}

.button.primary:hover {
  background-color: var(--color-accent);
}

.button.muted {
  background-color: #ffffff12;
  border-color: #0000;
}

.button.muted:hover {
  background-color: #ffffff1a;
}

.button.large {
  padding: 1rem 1.25rem;
}

.label-link {
  color: #fff;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid #ffffff1f;
  border-radius: 4px;
  align-items: center;
  padding: .4rem .5rem;
  font-family: Clash Display, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 110%;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.label-link:hover {
  border-color: #fff3;
}

.label-link.muted {
  background-color: #ffffff12;
  border-color: #0000;
}

.label-link.muted:hover {
  background-color: #ffffff1a;
}

.label-link.primary {
  background-color: #5c43d2;
  border-color: #0000;
}

.label-link.primary:hover {
  background-color: #452eb4;
}

.styleguide-navbar-overlay {
  z-index: 10;
  opacity: .8;
  background-color: var(--color-bg);
  display: none;
  position: fixed;
  inset: 0%;
}

.nav-item {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  color: #fff9;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0;
  padding-left: 0;
  font-family: Clash Display, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 150%;
  transition: color .3s;
  display: flex;
}

.nav-item:hover {
  color: #fff;
}

.styleguide-navbar {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  display: none;
}

.styleguide-menu-toggle-line._02 {
  margin-top: -1px;
}

.styleguide-menu-toggle-line._03 {
  bottom: 0;
}

.styleguide-nav-wrapper {
  z-index: 100;
  background-color: var(--color-bg);
  background-image: url('../images/noise.png');
  background-position: 0 0;
  background-size: 110px 110px;
  border-right: 1px solid #ffffff1f;
  width: 300px;
  padding: 2.5rem;
  position: fixed;
  inset: 0% auto 0% 0%;
  overflow: scroll;
}

.styleguide-nav {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 0;
  list-style-type: none;
  display: flex;
}

.styleguide-nav-item {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  flex-direction: column;
  font-family: Clash Display, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 150%;
}

.styleguide-nav-item:hover, .styleguide-nav-item.w--current {
  text-decoration: underline;
}

.styleguide-elements {
  margin-left: 300px;
}

.section-styleguide {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: .5fr 1fr;
  grid-auto-columns: 1fr;
  align-items: stretch;
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: flex;
}

.section-styleguide.first {
  padding-top: 0;
}

.section-styleguide.last {
  padding-bottom: 0;
}

.styleguide-4-col {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.button-text-line {
  background-color: #fff;
  width: 100%;
  height: 1px;
  margin-top: 2px;
}

.button-text-text {
  white-space: nowrap;
}

.label {
  color: #fff;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid #ffffff1f;
  border-radius: 4px;
  align-items: center;
  padding: .4rem .5rem;
  font-family: Clash Display, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 110%;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.label.muted {
  background-color: #ffffff12;
  border-color: #0000;
}

.label.primary {
  background-color: #5c43d2;
  border-color: #0000;
}

.badge-link {
  text-align: center;
  border: 1px solid #ffffff1f;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  line-height: 100%;
  transition: background-color .2s, border .2s;
  display: flex;
}

.badge-link:hover {
  border-color: #ffffff80;
}

.badge-link.primary {
  color: #fff;
  background-color: #5c43d2;
  border-color: #0000;
}

.badge-link.primary:hover {
  background-color: #452eb4;
}

.badge-link.muted {
  background-color: #ffffff12;
  border-color: #0000;
}

.badge-link.muted:hover {
  background-color: #ffffff1a;
}

.badge-link.large {
  width: 42px;
  height: 42px;
}

.badge {
  text-align: center;
  border: 1px solid #ffffff1f;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  line-height: 100%;
  transition: background-color .2s, border .2s;
  display: flex;
}

.badge.muted {
  background-color: #ffffff12;
  border-color: #0000;
}

.badge.large {
  width: 42px;
  height: 42px;
}

.badge.primary {
  background-color: #5c43d2;
  border-color: #0000;
}

.badge.small {
  width: 26px;
  height: 26px;
}

.card-padding {
  padding: 3rem;
}

.card-padding.small {
  padding: 1.5rem 2rem;
}

.card-padding.xlarge {
  padding: 5rem;
}

.card-padding.large {
  padding: 4rem;
}

.styleguide-2-col {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.card {
  border: 1px solid #ffffff1f;
}

.card.primary {
  color: #fff;
  background-color: #5c43d2;
  border-color: #0000;
}

.card.muted {
  background-color: #ffffff0d;
  border-color: #0000;
}

.nav {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0;
  list-style-type: none;
  display: flex;
}

.nav-item-text {
  align-self: center;
}

.nav-item-line, .subnav-item-line {
  background-color: #fff;
  width: 0%;
  height: 1px;
}

.subnav {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
  padding-left: 0;
  list-style-type: none;
  display: flex;
}

.subnav.small {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
}

.subnav.xsmall {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
}

.background-color-muted {
  background-color: #ffffff0d;
}

.background-color-primary {
  background-color: #5c43d2;
}

.text-meta-large {
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: Clash Display, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 140%;
}

.text-color-primary {
  color: #694fe5;
}

.home-services-grid-left {
  position: sticky;
  top: 2rem;
}

.section-marquee {
  overflow: hidden;
  transform: translate(0);
}

.marquee-inner {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  justify-content: center;
  align-items: center;
  display: flex;
}

.marquee-heading {
  letter-spacing: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: Clash Display, sans-serif;
  font-size: 6vw;
  font-weight: 500;
  line-height: 100%;
}

.section-marquee-secondary {
  background-color: var(--color-accent);
  overflow: hidden;
}

.marquee-secondary-inner {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  padding-top: .5rem;
  padding-bottom: .5rem;
  display: flex;
}

.marquee-secondary-text {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: Clash Display, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 140%;
}

.icon-1x1-xxsmall {
  width: 16px;
  height: 16px;
  line-height: 100%;
}

.section-home-about {
  z-index: 1;
  margin-top: -15vw;
  position: relative;
}

.section-home-testimonials {
  z-index: 1;
}

.home-testimonials-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}

.home-testimonials-item-inner {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 50px 1fr;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  display: flex;
}

.home-project-content {
  z-index: 5;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: absolute;
  inset: auto 3rem 3rem;
}

.navbar-menu-item-line {
  background-color: #fff;
  height: 1px;
  position: absolute;
  inset: auto auto -3px 0%;
}

.navbar-menu-item-inner {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex-direction: column;
  position: relative;
}

.navbar-dropdown-grid-right-inner {
  padding-bottom: 3rem;
}

.navbar-dropdown-grid-right-bottom {
  text-align: center;
  justify-content: space-between;
  display: flex;
}

.image-cover-link {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.home-clients-logo-image {
  opacity: 1;
  border-radius: 0;
  font-size: 1rem;
}

.image-cover-parallax {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.home-clients-logos {
  overflow: hidden;
}

.home-clients-logos-inner {
  flex: none;
  justify-content: space-between;
  align-items: center;
  width: 1200px;
  display: flex;
}

.projects-categories-list {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: center;
  align-items: center;
  display: flex;
}

.projects-categories-item {
  transition: background-color .3s;
  display: flex;
}

.projects-work-grid {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.form-button-wrapper {
  flex-direction: column;
  display: flex;
}

.contact-form-wrapper {
  width: 500px;
  margin-bottom: 0;
}

.section-licensing {
  z-index: 1;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1px 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
}

.changelog-grid {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  flex-direction: column;
  display: flex;
}

.footer-grid-right {
  text-align: center;
}

.list {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  padding-left: 0;
  list-style-type: none;
  display: flex;
}

.list-item {
  margin-bottom: 0;
  padding-left: 0;
  line-height: 140%;
}

.checkout-summary-button {
  flex-direction: column;
  display: flex;
}

.label-inner {
  height: 13px;
  overflow: hidden;
}

.button-6 {
  color: #222;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-color: #0000;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  justify-content: center;
  margin: 0;
  padding: 1rem 1.5rem;
  font-size: 14px;
  font-weight: 500;
  line-height: 110%;
  text-decoration: none;
  transition: border .3s;
  position: relative;
  overflow: hidden;
}

.button-6:hover {
  background-color: #f8f8f8;
}

.home-hero {
  z-index: 1;
  justify-content: center;
  align-items: center;
  height: 60vw;
  min-height: 960px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.home-hero-column {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.home-hero-video-wrapper {
  border-radius: .5rem;
  position: relative;
  overflow: hidden;
  transform: translate(0);
}

.home-hero-grid {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  width: 120%;
  transform-style: preserve-3d;
  flex: none;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  transform: perspective(700px)rotateX(20deg)rotateY(0)rotateZ(0)perspective(900px);
}

.home-hero-video {
  object-fit: cover;
  width: 100%;
  height: 20vw;
}

.gradient-top {
  z-index: 5;
  background-image: linear-gradient(var(--color-bg), #09090900);
  height: 65%;
  position: absolute;
  inset: 0% 0% auto;
}

.gradient-bottom {
  z-index: 5;
  background-image: linear-gradient(#09090900, var(--color-bg));
  height: 80%;
  position: absolute;
  inset: auto 0% 0%;
}

.home-about-lynn-grid {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
  grid-auto-columns: 1fr;
  place-items: center stretch;
  display: grid;
}

.border-radius {
  border-radius: .5rem;
}

.text-outline {
  color: #0000;
}

.home-hero-inner {
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.home-project-image-wrapper {
  border-radius: .5rem;
  display: block;
  position: relative;
  overflow: hidden;
  transform: translate(0);
}

.overlay {
  z-index: 1;
  opacity: 1;
  filter: blur(14px);
  mix-blend-mode: normal;
  background-color: #00000026;
  border: 1px #000;
  border-radius: 0;
  position: absolute;
  inset: 0%;
}

.home-project-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.home-project-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.home-awards-grid {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}

.home-awards-grid-right {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  flex-direction: column;
  display: flex;
}

.home-awards-item {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.home-awards-item-inner {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr auto;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.home-testimonials-grid-column {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  display: flex;
}

.footer-left-grid {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
  grid-auto-columns: 1fr;
  place-items: center stretch;
  display: grid;
}

.home-hero-heading {
  float: none;
  clear: none;
  opacity: 1;
  border-radius: 0;
  font-family: Clash Display, sans-serif;
  font-size: 130px;
  font-weight: 500;
  line-height: 90%;
  display: block;
}

.home-hero-heading.text-outline {
  font-size: 130px;
}

.home-hero-heading-grid-inner {
  grid-column-gap: .5vw;
  grid-row-gap: .5vw;
  justify-content: flex-start;
  align-items: center;
  font-size: 1rem;
  display: flex;
}

.home-hero-heading-grid {
  grid-column-gap: 3vw;
  grid-row-gap: 3vw;
  border: 1px #000;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: auto;
  display: flex;
  overflow: visible;
}

.clip {
  flex-direction: column;
  justify-content: flex-start;
  align-self: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.clip.project-cover {
  align-self: center;
}

.clip.mobile {
  text-align: center;
  align-self: center;
}

.clip.home-page {
  align-self: flex-start;
}

.home-hero-heading-wrapper {
  z-index: 5;
  position: absolute;
  inset: 0% 0% auto;
}

.blur-button {
  z-index: 10;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  -webkit-backdrop-filter: blur(2rem);
  backdrop-filter: blur(2rem);
  background-color: #ffffff12;
  border: 1px solid #ffffff1a;
  border-radius: 50%;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: 75px;
  height: 75px;
  margin-bottom: 90px;
  transition: transform .1s linear;
  display: flex;
}

.blur-button.home-page {
  margin-bottom: 0;
}

.blur-button-text {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: Clash Display, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 140%;
}

.text-size-huge {
  letter-spacing: 3px;
  font-family: Clash Display, sans-serif;
  font-size: 5.5vw;
  font-weight: 500;
  line-height: 110%;
}

.home-project-button-wrapper {
  z-index: 10;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.projects-work-content {
  z-index: 10;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.projects-work-image-wrapper {
  border-radius: .5rem;
  display: block;
  position: relative;
  overflow: hidden;
  transform: translate(0);
}

.projects-work-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.projects-work-content-inner {
  text-align: center;
  position: relative;
}

.projects-work-button-wrapper {
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translate(-50%);
}

.projects-work-heading {
  letter-spacing: 4px;
  text-transform: uppercase;
  font-family: Clash Display, sans-serif;
  font-size: 2.3rem;
  font-weight: 500;
  line-height: 100%;
}

.projects-work-heading.text-outline {
  text-align: center;
  align-self: auto;
}

.projects-work-heading.text-outline.project-cover {
  align-self: center;
  font-size: 1.5rem;
}

.projects-work-heading.project-cover {
  font-size: 1.5rem;
}

.project-hero-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.project-hero-content {
  z-index: 10;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.project-hero-content-inner {
  grid-column-gap: 1vw;
  grid-row-gap: 1vw;
  text-align: center;
  display: flex;
}

.project-hero-heading {
  letter-spacing: 4px;
  text-transform: uppercase;
  font-family: Clash Display, sans-serif;
  font-size: 6vw;
  font-weight: 500;
  line-height: 100%;
}

.project-hero-button-wrapper {
  position: absolute;
  bottom: 6rem;
  left: 50%;
  transform: translate(-50%);
}

.section-project-client {
  z-index: 10;
}

.project-about-client-grid {
  grid-column-gap: 0rem;
  grid-row-gap: 1.2rem;
  text-align: center;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  place-items: center stretch;
  display: grid;
}

.project-about-client-grid._4x5 {
  grid-column-gap: 0rem;
  grid-row-gap: 0px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: center stretch;
  display: flex;
}

.project-hero-image-wrapper {
  border-radius: .5rem;
  display: block;
  position: relative;
  overflow: hidden;
  transform: translate(0);
}

.project-about-grid-left {
  position: sticky;
  top: 2rem;
}

.project-about-grid-right {
  grid-column-gap: 6rem;
  grid-row-gap: 6rem;
  flex-direction: column;
  display: flex;
}

.project-about-item {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.project-meta-grid {
  grid-column-gap: 6rem;
  grid-row-gap: 6rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1px .45fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  display: flex;
}

.project-meta-item {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.project-services-list {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  display: flex;
}

.project-services-item {
  display: flex;
}

.project-image-gallery {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-direction: column;
  display: flex;
}

.blog-posts-list {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.blog-posts-post:first-child {
  border-left-style: none;
  border-left-width: 0;
}

.post-preview-image-wrapper {
  border-radius: .5rem;
  display: block;
  position: relative;
  overflow: hidden;
  transform: translate(0);
}

.post-preview-content {
  z-index: 5;
  position: absolute;
  inset: auto 3rem 2.5rem;
}

.post-preview-content-heading {
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: Clash Display, sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 130%;
}

.post-meta-grid {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  text-align: center;
  grid-template-rows: auto;
  grid-template-columns: 1fr .33fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: start;
  display: flex;
}

.post-author-image {
  object-fit: cover;
  border-radius: .5rem;
  width: 60px;
  height: 60px;
}

.post-content-grid-left {
  text-align: center;
  position: sticky;
  top: 2rem;
}

.post-content-grid {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: start;
  display: grid;
}

.post-author-grid {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.post-share-icons {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-direction: column;
  display: flex;
}

.label-link-2 {
  color: #222;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  align-items: center;
  padding: .4rem .5rem;
  font-size: 13px;
  font-weight: 500;
  line-height: 110%;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.post-image-wrapper {
  border-radius: .5rem;
  position: relative;
  overflow: hidden;
  transform: translate(0);
}

.post-categories-item {
  display: flex;
}

.post-categories-list {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: center;
  display: flex;
}

.contact-grid {
  grid-column-gap: 1.8rem;
  grid-row-gap: 1.8rem;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  place-items: start stretch;
  padding-top: 98px;
  display: grid;
}

.about-hero-image-content {
  z-index: 5;
  position: absolute;
  inset: auto 4rem 4rem;
}

.about-experience-grid {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}

.about-experience-item-inner {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr auto;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.about-experience-grid-right {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  flex-direction: column;
  display: flex;
}

.about-awards-grid {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}

.about-awards-grid-right {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  flex-direction: column;
  display: flex;
}

.about-awards-item {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.about-awards-item-inner {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr auto;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.services-grid {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: .4fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.button-7 {
  color: #121416;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-color: #0000;
  border: 1px solid #191919;
  border-radius: 6px;
  margin: 0;
  padding: .6rem 1rem;
  font-size: 15px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
  transition: border .3s;
  position: relative;
  overflow: hidden;
}

.button-7:hover {
  border-color: #121416;
}

.services-image-wrapper {
  border-radius: .5rem;
  height: 30vw;
  max-height: 600px;
  position: relative;
  overflow: hidden;
  transform: translate(0);
}

.services-grid-left-inner {
  position: sticky;
  top: 3rem;
}

.services-videos-video-wrapper {
  border-radius: .5rem;
  width: 20vw;
  height: 12vw;
  position: relative;
  overflow: hidden;
  transform: translate(0);
}

.section-services-videos {
  justify-content: center;
  width: 100%;
  display: flex;
  overflow: hidden;
}

.services-videos-inner {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.licensing-grid {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  flex-direction: column;
  display: flex;
}

.pricing-prices-list {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: end;
  display: grid;
}

.section-faq-grid {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.faq-grid-right {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  display: flex;
}

.pricing-prices-item-price {
  text-align: center;
  letter-spacing: 2px;
  font-family: Clash Display, sans-serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 120%;
}

.banner-text {
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: Clash Display, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 140%;
  overflow: hidden;
}

.pricing-prices-item-features {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  display: flex;
}

.banner {
  text-align: center;
  background-color: var(--color-accent);
  justify-content: center;
  align-items: center;
  max-width: 100%;
  padding: .75rem 1rem;
  display: flex;
  overflow: hidden;
}

.banner.top {
  background-color: var(--color-accent);
}

.pricing-prices-item-compare-price {
  letter-spacing: 2px;
  font-family: Clash Display, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 120%;
  text-decoration: line-through;
}

.pricing-prices-item-button {
  flex-direction: column;
  display: flex;
}

.product-compare-price {
  letter-spacing: 2px;
  font-family: Clash Display, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 120%;
  text-decoration: line-through;
}

.product-hero-grid {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}

.product-add-options-wrrapper {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 0;
  display: flex;
}

.product-add-buttons {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}

.product-add-options {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: .5fr 1fr;
  grid-auto-columns: 1fr;
  align-items: stretch;
  display: flex;
}

.product-hero-grid-left {
  grid-column-gap: 6rem;
  grid-row-gap: 6rem;
  flex-direction: column;
  display: flex;
}

.product-feature-list {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  display: flex;
}

.product-price {
  text-align: center;
  letter-spacing: 2px;
  font-family: Clash Display, sans-serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 120%;
}

.project-pagination {
  z-index: 100;
  background-color: var(--color-accent);
  position: fixed;
  inset: auto 0% 0%;
}

.project-pagination-center {
  align-items: center;
  display: flex;
}

.project-pagination-next-link, .project-pagination-previous-link {
  display: flex;
}

.project-pagination-next-image {
  object-fit: cover;
  width: 60px;
  height: 60px;
}

.project-pagination-previous {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  padding: .5rem;
  display: grid;
}

.project-pagination-grid {
  z-index: 100;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr auto 1fr;
  grid-auto-columns: 1fr;
  place-items: center;
  display: grid;
}

.project-pagination-next-image-wrapper, .project-pagination-previous-image-wrapper {
  border-radius: 4px;
  display: block;
  overflow: hidden;
}

.project-pagination-next {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  text-align: right;
  grid-template-rows: auto;
  grid-template-columns: 1fr auto;
  grid-auto-columns: 1fr;
  align-items: center;
  padding: .5rem;
  display: grid;
}

.project-pagination-previous-image {
  object-fit: cover;
  width: 60px;
  height: 60px;
}

.blur-button-wrapper {
  z-index: 10;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.background-blur {
  z-index: -1;
  opacity: .55;
  filter: blur(120px);
  background-color: var(--color-accent);
  border-radius: 100%;
  width: 300px;
  height: 300px;
  margin-top: -150px;
  margin-left: -150px;
  transition: transform .2s;
  position: absolute;
  top: 50%;
  left: 50%;
}

.cursor-wrapper {
  z-index: -1;
  transition: transform .2s;
  position: fixed;
  inset: 0% auto auto 0%;
}

.cursor-blur {
  z-index: -1;
  opacity: .4;
  filter: blur(100px);
  background-color: #5a3116;   /* muted ember — brand orange, deep + understated */
  border-radius: 100%;
  width: 300px;
  height: 300px;
  margin-top: -150px;
  margin-left: -150px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.home-about-gradient-top {
  z-index: 5;
  background-image: linear-gradient(var(--color-bg), #09090900);
  height: 65%;
  margin-top: 15vw;
  position: absolute;
  inset: 0% 0% auto;
}

.div-block {
  z-index: 5;
  position: relative;
}

.home-header-wrapper {
  background-color: var(--color-bg);
}

.buy-badge {
  z-index: 9999;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  background-color: #fff;
  border-radius: 3px;
  padding: 6px 8px;
  display: flex;
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  box-shadow: 0 1px 3px #0000001a, 0 0 0 1px #0000001a;
}

.home-hero-heading-2 {
  font-family: Clash Display, sans-serif;
  font-size: 9.5vw;
  font-weight: 500;
  line-height: 90%;
}

.home-hero-heading-grid-inner-2 {
  grid-column-gap: .5vw;
  grid-row-gap: .5vw;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.home-hero-heading-grid-2 {
  grid-column-gap: 3vw;
  grid-row-gap: 3vw;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  display: flex;
}

.grid {
  grid-template-columns: 1fr;
}

.line-divider {
  background-color: #bab9b9;
  min-height: 3px;
  margin: 50px 0;
  padding-left: 0;
  padding-right: 0;
  display: block;
}

.background-video {
  aspect-ratio: auto;
  object-fit: fill;
  object-position: 50% 50%;
  width: auto;
  max-height: none;
}

.column {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-direction: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  display: flex;
}

.heading-h4-2 {
  letter-spacing: 1px;
  font-family: Clash Display, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 120%;
}

.heading-h4-2.text-uppercase {
  letter-spacing: 2px;
  align-self: flex-start;
  font-size: 1.5rem;
}

.home-about-lynn-grid-2 {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.page-padding-2 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.text-align-center-2 {
  text-align: center;
}

.div-block-2, .div-block-3 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.flex-block {
  justify-content: center;
  align-items: flex-start;
}

.image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.image-frame {
  width: 100%;
  padding-top: 75%;
  position: relative;
}

.container.image-container {
  width: 100%;
}

.grid-2 {
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr;
}

.container-2 {
  max-width: 80%;
}

.grid-3 {
  grid-column-gap: 56px;
  grid-row-gap: 56px;
  grid-template-rows: auto;
  width: auto;
  height: auto;
}

.div-block-4 {
  padding-top: 15px;
  padding-bottom: 0;
}

.about-me {
  text-align: center;
}

.about-me-text {
  padding-bottom: 23px;
}

.heading {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.text-block-2 {
  text-align: center;
}

.column-2 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.project-video-wrapper {
  aspect-ratio: 2 / 3;
  width: 100%;
  min-width: 900px;
  height: 80vh;
}

@media screen and (min-width: 1440px) {
  .heading-medium {
    font-size: 6.5rem;
  }

  .heading-large {
    font-size: 8rem;
  }

  .heading-xlarge {
    font-size: 10rem;
  }

  .heading-small {
    font-size: 5rem;
  }

  .home-hero-heading {
    font-size: 12.9vw;
  }

  .home-hero-heading.text-outline {
    font-size: 12.8vw;
  }

  .text-size-huge {
    font-size: 5rem;
  }

  .projects-work-button-wrapper {
    bottom: -96px;
  }

  .home-hero-heading-2, .home-hero-heading-2.text-outline {
    font-size: 9.5vw;
  }

  .image {
    display: block;
  }

  .container-3 {
    text-align: center;
  }
}

@media screen and (min-width: 1920px) {
  .heading-h4.text-uppercase {
    font-size: 3vw;
  }

  .text-meta.text-color-muted {
    font-size: 1.5vw;
  }

  .accordion-icon {
    background-color: var(--color-accent);
  }

  .section-home-hero {
    background-color: var(--color-bg);
  }

  .border-radius {
    width: 9rem;
  }

  .home-hero-heading, .home-hero-heading.text-outline {
    font-size: 15.5rem;
  }

  .projects-work-heading {
    font-size: 7rem;
  }

  .project-hero-heading {
    font-size: 8rem;
  }

  .home-hero-heading-2, .home-hero-heading-2.text-outline {
    font-size: 15.5rem;
  }

  .heading-h4-2.text-uppercase {
    font-size: 3.5rem;
  }
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  .hide-tablet {
    display: none;
  }

  .heading-medium {
    font-size: 4rem;
  }

  .heading-large {
    font-size: 4.5rem;
  }

  .text-rich-text blockquote {
    background-position: 0 59px;
    background-size: 40px;
    font-size: 2rem;
    line-height: 140%;
  }

  .heading-xlarge {
    font-size: 5.5rem;
  }

  .page-padding {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .show-tablet {
    display: block;
  }

  .main-wrapper {
    border-radius: 4rem;
    min-height: 0;
  }

  .max-width-full-tablet {
    width: 100%;
    max-width: none;
  }

  .margin-medium {
    margin: 1.5rem;
  }

  .margin-large {
    margin: 2.5rem;
  }

  .margin-xlarge {
    margin: 3rem;
  }

  .margin-xxlarge {
    margin: 4rem;
  }

  .margin-huge {
    margin: 5rem;
  }

  .margin-xhuge {
    margin: 6rem;
  }

  .margin-xxhuge {
    margin: 8rem;
  }

  .padding-medium {
    padding: 1.5rem;
  }

  .padding-xlarge {
    padding: 3rem;
  }

  .padding-xxlarge {
    padding: 4rem;
  }

  .padding-huge {
    padding: 5rem;
  }

  .padding-xhuge {
    padding: 6rem;
  }

  .padding-xxhuge {
    padding: 8rem;
  }

  .margin-top {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .margin-left {
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
  }

  .margin-right {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
  }

  .margin-vertical {
    margin-left: 0;
    margin-right: 0;
  }

  .margin-horizontal {
    margin-top: 0;
    margin-bottom: 0;
  }

  .padding-top {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .padding-bottom {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .padding-left {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
  }

  .padding-right {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
  }

  .padding-vertical {
    padding-left: 0;
    padding-right: 0;
  }

  .padding-horizontal {
    padding-top: 0;
    padding-bottom: 0;
  }

  .body {
    font-size: 16px;
  }

  .navbar-inner {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .heading-h2 {
    font-size: 2.5rem;
  }

  .heading-h1 {
    font-size: 3rem;
  }

  .navbar-right {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    grid-template-columns: auto 1px auto 1px 1fr;
  }

  .section-404 {
    padding: 4rem;
  }

  .text-size-xlarge {
    font-size: 1.5rem;
  }

  .footer-bottom {
    flex-direction: column-reverse;
  }

  .footer-grid {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    grid-template-columns: 1fr;
  }

  .licensing-item {
    grid-template-columns: 1fr;
  }

  .block-quote {
    background-position: 0 57px;
    background-size: 40px;
  }

  .heading-small {
    font-size: 3.5rem;
  }

  .text-meta.text-color-muted {
    font-size: 1rem;
  }

  .navbar-menu {
    display: none;
  }

  .about-gallery {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    border-radius: 4rem;
    height: 50vw;
  }

  .footer-small {
    margin-top: 6rem;
  }

  .checkout-shipping-method-grid {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-direction: column;
  }

  .checkout-block-content {
    padding: 1.5rem;
  }

  .checkout-grid {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    grid-template-columns: 1fr 300px;
  }

  .checkout-grid-left {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }

  .checkout-block-header {
    padding-top: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .checkout-summary {
    padding: 1.5rem;
  }

  .checkout-order-item {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    align-items: flex-start;
  }

  .navbar-dropdown-grid {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .navbar-dropdown-inner {
    border-radius: 2rem;
    padding: 2rem;
  }

  .navbar-dropdown {
    width: 660px;
    left: auto;
    right: 0;
    transform: translate(0%);
  }

  .footer-grid-right-inner {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .home-clients-grid {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    text-align: center;
    grid-template-columns: 1fr;
  }

  .home-clients-logos-grid {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
  }

  .home-services-grid {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
  }

  .home-services-item {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr;
  }

  .home-services-grid-right {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
  }

  .mobile-menu-toggle {
    cursor: pointer;
    width: 30px;
    height: 20px;
    display: block;
    position: relative;
  }

  .mobile-menu-toggle-line {
    transform-origin: 100%;
    background-color: #fff;
    width: 30px;
    height: 1px;
    padding-bottom: 0;
    padding-right: 0;
    position: absolute;
    right: 0;
  }

  .mobile-menu-toggle-line._01 {
    top: 0;
  }

  .mobile-menu-toggle-line._02 {
    top: 50%;
  }

  .mobile-menu {
    position: absolute;
    left: 0%;
    right: 0%;
  }

  .mobile-menu-wrapper {
    background-color: var(--color-bg);
    background-image: url('../images/noise.png');
    background-position: 0 0;
    background-size: 110px 110px;
    border-bottom: 1px solid #242424;
    padding: 1rem 2.5rem 2rem;
  }

  .form-row-1-3, .form-row-1-2, .checkout-order-item-grid {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-direction: column;
  }

  .checkout-order-item-content {
    margin-left: 0;
    margin-right: 0;
  }

  .styleguide-menu-toggle {
    cursor: pointer;
    width: 30px;
    height: 20px;
    display: block;
    position: relative;
  }

  .styleguide-navbar-inner {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .styleguide-navbar {
    z-index: 100;
    background-color: var(--color-bg);
    background-image: url('../images/noise.png');
    background-position: 0 0;
    background-size: 110px 110px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    display: block;
    position: fixed;
    inset: 0% 0% auto;
  }

  .styleguide-menu-toggle-line {
    transform-origin: 100%;
    background-color: #fff;
    width: 30px;
    height: 1.5px;
    padding-bottom: 0;
    padding-right: 0;
    position: absolute;
    right: 0;
  }

  .styleguide-menu-toggle-line._01 {
    top: 0;
  }

  .styleguide-menu-toggle-line._02 {
    top: 50%;
  }

  .styleguide-nav-wrapper {
    border-left: 1px solid #ffffff1f;
    border-right-style: none;
    border-right-width: 0;
    left: auto;
    right: 0;
    transform: translate(100%);
  }

  .styleguide-elements {
    margin-left: 0;
    padding-top: 3rem;
  }

  .section-styleguide {
    grid-column-gap: 2.5rem;
    grid-template-columns: 1fr;
  }

  .badge-link, .badge {
    flex: none;
  }

  .card-padding, .card-padding.large {
    padding: 2.5rem;
  }

  .marquee-heading {
    letter-spacing: 2px;
    font-size: 4rem;
  }

  .home-testimonials-grid {
    grid-template-columns: 1fr 1fr;
  }

  .home-project-content {
    bottom: 1.75rem;
    left: 2rem;
    right: 2rem;
  }

  .contact-form-wrapper {
    width: 100%;
  }

  .section-licensing {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .home-hero {
    height: 90vw;
    min-height: auto;
  }

  .home-hero-column {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .home-hero-grid {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    width: 120%;
  }

  .home-hero-video {
    height: 23vw;
  }

  .home-project-grid {
    grid-template-columns: 1fr;
  }

  .home-awards-grid {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
  }

  .home-awards-grid-right {
    grid-column-gap: 2.5rem;
    grid-row-gap: 2.5rem;
  }

  .home-awards-item {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: 1fr;
  }

  .home-awards-item-inner {
    align-items: start;
  }

  .home-testimonials-grid-column.last {
    display: none;
  }

  .home-hero-heading, .home-hero-heading.text-outline {
    font-size: 65px;
  }

  .home-hero-heading-grid-inner {
    grid-column-gap: .75vw;
    grid-row-gap: .75vw;
  }

  .home-hero-heading-grid {
    grid-column-gap: 4vw;
    grid-row-gap: 4vw;
    justify-content: flex-start;
    margin-bottom: .5rem;
  }

  .blur-button {
    display: none;
  }

  .text-size-huge {
    font-size: 3rem;
    line-height: 120%;
  }

  .projects-work-heading {
    font-size: 4rem;
  }

  .project-about-grid-right {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
  }

  .project-about-item {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr;
  }

  .project-meta-grid {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    grid-template-columns: 1fr 1px .5fr;
    justify-content: space-between;
  }

  .blog-posts-list {
    grid-template-columns: 1fr;
  }

  .post-preview-content {
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
  }

  .post-preview-content-heading {
    margin-top: 2px;
  }

  .post-meta-grid, .post-content-grid, .contact-grid {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
  }

  .about-hero-image-content {
    bottom: 3rem;
    left: 3rem;
    right: 3rem;
  }

  .about-experience-grid {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    grid-template-columns: .3fr 1fr;
  }

  .about-experience-item-inner {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: 1fr;
  }

  .about-experience-grid-right {
    grid-column-gap: 2.5rem;
    grid-row-gap: 2.5rem;
  }

  .about-awards-grid {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    grid-template-columns: .3fr 1fr;
  }

  .about-awards-grid-right {
    grid-column-gap: 2.5rem;
    grid-row-gap: 2.5rem;
  }

  .about-awards-item {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: 1fr;
  }

  .about-awards-item-inner {
    align-items: start;
  }

  .services-grid {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
  }

  .services-image-wrapper {
    height: 25vw;
  }

  .services-videos-video-wrapper {
    width: 26vw;
    height: 15vw;
  }

  .services-videos-inner {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .pricing-prices-list {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr;
  }

  .section-faq-grid {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .product-hero-grid-right {
    padding-top: 0;
  }

  .product-hero-grid {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
  }

  .product-add-buttons {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
  }

  .project-pagination-center {
    display: none;
  }

  .project-pagination-grid {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: 1fr 1fr;
  }

  .background-blur {
    width: 40vw;
    height: 40vw;
    margin-top: -20vw;
    margin-left: -20vw;
  }

  .cursor-wrapper {
    display: none;
  }

  .home-hero-heading-2 {
    font-size: 8.2vw;
  }

  .home-hero-heading-grid-inner-2 {
    grid-column-gap: .75vw;
    grid-row-gap: .75vw;
  }

  .home-hero-heading-grid-2 {
    grid-column-gap: 4vw;
    grid-row-gap: 4vw;
    justify-content: flex-start;
    margin-bottom: .5rem;
  }

  .background-video {
    aspect-ratio: auto;
  }

  .page-padding-2 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 2.75rem;
  }

  h2 {
    font-size: 2.25rem;
  }

  h3 {
    font-size: 1.75rem;
  }

  .styleguide-3-col {
    grid-template-columns: 1fr 1fr;
  }

  .heading-medium {
    font-size: 3.25rem;
  }

  .heading-large {
    font-size: 4rem;
  }

  .text-size-large {
    font-size: 1.25rem;
  }

  .text-rich-text blockquote {
    background-position: 0 38px;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-size: 1.5rem;
  }

  .heading-xlarge {
    font-size: 5rem;
  }

  .hide-mobile-landscape {
    display: none;
  }

  .page-padding {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .show-mobile-landscape {
    display: block;
  }

  .form-field-wrapper {
    margin-bottom: 1.5rem;
  }

  .main-wrapper {
    border-radius: 3rem;
  }

  .max-width-full-mobile-landscape {
    width: 100%;
    max-width: none;
  }

  .margin-medium {
    margin: 1.25rem;
  }

  .margin-large {
    margin: 1.5rem;
  }

  .margin-xlarge {
    margin: 2rem;
  }

  .margin-xxlarge {
    margin: 3rem;
  }

  .margin-huge {
    margin: 3.5rem;
  }

  .margin-xhuge {
    margin: 4rem;
  }

  .margin-xxhuge {
    margin: 4.5rem;
  }

  .padding-medium {
    padding: 1.25rem;
  }

  .padding-large {
    padding: 1.5rem;
  }

  .padding-xlarge {
    padding: 2rem;
  }

  .padding-xxlarge {
    padding: 3rem;
  }

  .padding-huge {
    padding: 3.5rem;
  }

  .padding-xhuge {
    padding: 4rem;
  }

  .padding-xxhuge {
    padding: 4.5rem;
  }

  .margin-top {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .margin-left {
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
  }

  .margin-right {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
  }

  .margin-vertical {
    margin-left: 0;
    margin-right: 0;
  }

  .margin-horizontal {
    margin-top: 0;
    margin-bottom: 0;
  }

  .padding-top {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .padding-bottom {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .padding-left {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
  }

  .padding-right {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
  }

  .padding-vertical {
    padding-left: 0;
    padding-right: 0;
  }

  .padding-horizontal {
    padding-top: 0;
    padding-bottom: 0;
  }

  .heading-h3 {
    font-size: 1.75rem;
  }

  .heading-h2 {
    font-size: 2.25rem;
  }

  .heading-h4 {
    font-size: 1.5rem;
  }

  .heading-h1 {
    font-size: 2.75rem;
  }

  .navbar {
    z-index: 10;
    position: relative;
  }

  .section-404 {
    padding: 3rem;
  }

  .navbar-wrapper {
    z-index: 9999;
  }

  .text-size-xlarge {
    font-size: 1.4rem;
  }

  .footer-grid {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .changelog-grid-item {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: 1fr;
  }

  .block-quote {
    background-position: 0 38px;
    background-size: 30px;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 3rem;
    font-size: 1.5rem;
  }

  .heading-small {
    font-size: 3rem;
  }

  .about-gallery {
    border-radius: 3rem;
  }

  .accordion {
    padding: 1.75rem;
  }

  .cart-list {
    padding: 1.5rem;
  }

  .footer-small {
    margin-top: 4rem;
    padding-bottom: 6rem;
  }

  .checkout-shipping-method-grid {
    flex-direction: row;
  }

  .checkout-grid {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    grid-template-columns: 1fr;
  }

  .checkout-grid-left {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }

  .navbar-menu-item-link {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .navbar-dropdown-grid {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr 1fr;
  }

  .navbar-dropdown {
    width: 390px;
    padding-top: 1rem;
  }

  .footer-grid-right-inner {
    grid-template-columns: 1fr 1fr;
  }

  .home-clients-grid {
    grid-template-columns: 1fr;
  }

  .home-clients-logos-grid {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
  }

  .home-services-grid {
    grid-template-columns: 1fr;
  }

  .home-services-item {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }

  .home-services-grid-right {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
  }

  .navbar-right-button {
    display: none;
  }

  .mobile-menu-wrapper {
    padding-bottom: 1.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .styleguide-menu-toggle {
    cursor: pointer;
    width: 30px;
    height: 20px;
    display: block;
    position: relative;
  }

  .section-styleguide {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .styleguide-4-col {
    grid-template-columns: 1fr 1fr;
  }

  .card-padding {
    padding: 2rem;
  }

  .card-padding.small {
    padding: 1.5rem;
  }

  .card-padding.xlarge {
    padding: 2.5rem;
  }

  .card-padding.large {
    padding: 2rem;
  }

  .styleguide-2-col {
    grid-template-columns: 1fr 1fr;
  }

  .home-services-grid-left {
    position: static;
  }

  .marquee-inner {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }

  .marquee-heading {
    font-size: 3rem;
  }

  .home-testimonials-grid {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    grid-template-columns: 1fr;
  }

  .navbar-dropdown-grid-right-bottom {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .home-clients-logos-inner {
    width: 800px;
  }

  .projects-work-grid {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    grid-template-columns: 1fr;
  }

  .home-hero {
    height: 120vw;
  }

  .home-hero-column {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
  }

  .home-hero-grid {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
    width: 150%;
  }

  .home-hero-video {
    height: 29vw;
  }

  .home-project-image-wrapper {
    height: 55vw;
  }

  .home-project-grid {
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
  }

  .home-awards-grid {
    grid-template-columns: 1fr;
  }

  .home-awards-grid-right {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .home-awards-item-inner {
    align-items: center;
  }

  .home-testimonials-grid-column {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }

  .home-testimonials-grid-column.last {
    display: block;
  }

  .home-hero-heading, .home-hero-heading.text-outline {
    font-size: 46px;
  }

  .text-size-huge {
    font-size: 2.5rem;
  }

  .projects-work-image-wrapper {
    height: 55vw;
  }

  .projects-work-heading {
    font-size: 3rem;
  }

  .project-hero-image-wrapper {
    height: 55vw;
  }

  .project-about-grid-left {
    position: static;
  }

  .project-about-grid-right {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
  }

  .project-about-item {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }

  .project-meta-grid {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    flex-direction: column;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-items: center;
    display: grid;
  }

  .project-meta-item {
    text-align: left;
  }

  .project-image-gallery, .blog-posts-list {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }

  .post-preview-image-wrapper {
    height: 55vw;
  }

  .post-preview-content {
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
  }

  .post-preview-content-heading {
    font-size: 1.125rem;
  }

  .post-meta-grid {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    grid-template-columns: 1fr;
  }

  .post-content-grid {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .post-image-wrapper {
    height: 55vw;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .about-hero-image-content {
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
  }

  .about-experience-grid {
    grid-template-columns: 1fr;
  }

  .about-experience-grid-right {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .about-awards-grid {
    grid-template-columns: 1fr;
  }

  .about-awards-grid-right {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .about-awards-item-inner {
    align-items: center;
  }

  .services-grid {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr;
  }

  .services-image-wrapper {
    height: 55vw;
  }

  .services-grid-left-inner {
    position: static;
  }

  .services-videos-video-wrapper {
    width: auto;
    height: 19vw;
  }

  .section-services-videos {
    display: block;
  }

  .services-videos-inner {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    padding-left: 2rem;
    padding-right: 2rem;
    display: grid;
  }

  .pricing-prices-list {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }

  .section-faq-grid {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr;
  }

  .pricing-prices-item-price, .pricing-prices-item-compare-price, .product-compare-price {
    font-size: 1.75rem;
  }

  .product-hero-grid {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    flex-direction: column-reverse;
    grid-template-columns: 1fr;
    display: flex;
  }

  .product-add-buttons {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
  }

  .product-add-options {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
  }

  .product-price {
    font-size: 1.75rem;
  }

  .home-hero-heading-2 {
    font-size: 8.1vw;
  }

  .heading-h4-2 {
    font-size: 1.5rem;
  }

  .page-padding-2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media screen and (max-width: 479px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  .heading-medium, .heading-large {
    font-size: 3rem;
  }

  .heading-large.text-uppercase {
    font-size: 2.5rem;
  }

  .text-size-large {
    font-size: 1.175rem;
  }

  .text-align-center {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .show-mobile-portrait {
    display: block;
  }

  .hide-mobile-portrait {
    display: none;
  }

  .text-rich-text blockquote {
    background-position: 0 20px;
    padding-top: 4rem;
    padding-left: 0;
    font-size: 1.75rem;
  }

  .max-width-medium {
    justify-content: flex-start;
    align-items: center;
  }

  .heading-xlarge {
    font-size: 3.75rem;
  }

  .container-large {
    padding-top: 0;
  }

  .page-padding {
    padding: 1.5rem 1.5rem 0;
  }

  .form-field-wrapper {
    margin-bottom: 1rem;
  }

  .utility-form-block {
    width: 80%;
  }

  .main-wrapper {
    border-radius: 2rem;
  }

  .margin-top {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .margin-bottom.margin-medium {
    text-align: center;
  }

  .margin-bottom.margin-large {
    margin-top: 1.5rem;
  }

  .margin-bottom.margin-tiny {
    text-align: right;
    justify-content: flex-start;
    align-items: flex-end;
  }

  .margin-left {
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
  }

  .margin-right {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
  }

  .margin-vertical {
    margin-left: 0;
    margin-right: 0;
  }

  .margin-horizontal {
    margin-top: 0;
    margin-bottom: 0;
  }

  .padding-top {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .padding-top.padding-huge {
    padding-top: 0;
  }

  .padding-top.padding-xhuge {
    padding-top: 2.3rem;
    padding-bottom: 1rem;
  }

  .padding-bottom {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .padding-left {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
  }

  .padding-right {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
  }

  .padding-vertical {
    padding-left: 0;
    padding-right: 0;
  }

  .padding-vertical.padding-xxhuge {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .padding-vertical.padding-huge {
    padding-top: 0;
    padding-bottom: 2rem;
  }

  .padding-vertical.padding-xlarge {
    padding-top: 0;
    padding-bottom: 0;
  }

  .padding-vertical.padding-xhuge {
    padding-top: 2rem;
  }

  .padding-horizontal {
    padding-top: 0;
    padding-bottom: 0;
  }

  .max-width-full-mobile-portrait {
    width: 100%;
    max-width: none;
  }

  .navbar-inner {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .heading-h2 {
    font-size: 2rem;
  }

  .heading-h4 {
    font-size: 1.1rem;
  }

  .heading-h4.text-uppercase {
    font-size: 1.2rem;
  }

  .heading-h4.text-uppercase.extra-credits {
    font-size: .6rem;
  }

  .heading-h4.text-uppercase.mobile {
    text-align: center;
  }

  .heading-h1 {
    font-size: 2.5rem;
  }

  .navbar-right {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: auto 1px auto;
  }

  .section-404 {
    padding: 2.5rem;
  }

  .label-old.w--current {
    display: none;
  }

  .footer {
    margin-top: 0;
  }

  .footer-bottom {
    text-align: center;
  }

  .licensing-inner-grid {
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  .block-quote {
    background-position: 0 20px;
    background-size: 30px;
    padding-top: 4rem;
    padding-left: 0;
  }

  .heading-small {
    font-size: 2.75rem;
  }

  .text-meta {
    text-align: center;
    order: 0;
    align-self: center;
  }

  .text-meta.text-color-muted {
    align-self: auto;
    font-size: 10px;
  }

  .text-meta.text-color-muted.extra-credits {
    font-size: .6rem;
  }

  .text-meta.text-color-muted.footer.middle.home.mobile {
    text-align: center;
  }

  .text-meta.text-color-muted.home-page {
    text-align: left;
  }

  .text-meta.right {
    text-align: right;
  }

  .text-meta.left {
    text-align: left;
  }

  .navbar-menu {
    display: none;
  }

  .about-gallery {
    border-radius: 1.5rem;
  }

  .accordion {
    padding: 1.5rem;
  }

  .accordion-title-grid {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .accordion-title {
    font-size: .875rem;
  }

  .label-2.w--current {
    display: none;
  }

  .cart-item-quantity {
    width: 50px;
    margin-right: .5rem;
  }

  .cart-footer, .cart-header {
    padding: 1rem 1.25rem;
  }

  .cart-container {
    min-width: 0;
    max-width: 360px;
  }

  .footer-small {
    margin-top: 3rem;
  }

  .checkout-shipping-method-grid {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .checkout-block-content {
    padding: 1.5rem;
  }

  .checkout-block-header {
    padding-top: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .navbar-dropdown-inner {
    border-radius: 1.5rem;
  }

  .text-meta-small.text-color-muted {
    align-self: flex-end;
  }

  .text-meta-small.text-color-muted.extra-credits {
    font-size: .6rem;
  }

  .text-meta-small.text-color-muted.left {
    align-self: flex-start;
  }

  .footer-grid-left {
    align-items: center;
  }

  .footer-grid-right-inner {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    grid-template-columns: 1fr;
  }

  .image-wrapper {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
    flex-flow: row;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: center;
    align-items: flex-start;
    line-height: 180px;
    display: flex;
  }

  .home-clients-grid {
    grid-column-gap: 1.3rem;
    grid-row-gap: 1.3rem;
  }

  .home-clients-logos-grid {
    grid-template-columns: 1fr 1fr;
  }

  .home-services-grid-right {
    grid-column-gap: 2.5rem;
    grid-row-gap: 2.5rem;
  }

  .navbar-logo-image {
    display: inline-block;
  }

  .mobile-menu-wrapper {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .styleguide-navbar {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .section-styleguide {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .styleguide-4-col {
    grid-template-columns: 1fr;
  }

  .label.w--current {
    display: none;
  }

  .card-padding {
    padding: 1.5rem;
  }

  .card-padding.small {
    padding: 1rem 1.25rem;
  }

  .card-padding.xlarge {
    padding: 2rem 2.25rem;
  }

  .card-padding.large {
    padding: 1.75rem 2rem;
  }

  .styleguide-2-col {
    grid-template-columns: 1fr;
  }

  .subnav {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
  }

  .marquee-inner {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .marquee-heading {
    font-size: 2.5rem;
  }

  .home-testimonials-item-inner {
    grid-template-columns: 1fr;
  }

  .home-project-content {
    bottom: 1.25rem;
    left: 1.5rem;
    right: 1.5rem;
  }

  .navbar-dropdown-grid-right-bottom {
    text-align: center;
  }

  .projects-categories-list {
    display: none;
  }

  .projects-categories-item:first-child {
    border-left-style: none;
  }

  .projects-work-grid {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .gradient-top {
    opacity: 1;
    transform-origin: 50%;
  }

  .gradient-bottom {
    height: 90%;
  }

  .home-awards-item-inner {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: 1fr;
  }

  .footer-left-grid {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    text-align: center;
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .home-hero-heading {
    font-size: 25px;
  }

  .home-hero-heading.text-outline {
    aspect-ratio: auto;
    font-size: 25px;
  }

  .home-hero-heading-grid-inner {
    opacity: 1;
    border-radius: 0;
  }

  .home-hero-heading-grid {
    border-radius: 0;
    font-style: normal;
  }

  .clip {
    justify-content: center;
    align-self: center;
    align-items: center;
    display: flex;
  }

  .clip.home-page {
    align-self: flex-start;
  }

  .blur-button {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: flex;
  }

  .text-size-huge {
    margin-top: 1.7rem;
    font-size: 1.2rem;
  }

  .projects-work-button-wrapper {
    display: none;
  }

  .projects-work-heading {
    font-size: 1.2rem;
  }

  .projects-work-heading.text-outline.project-cover, .projects-work-heading.project-cover {
    font-size: 1rem;
  }

  .project-about-client-grid._4x5 {
    padding-top: 2rem;
  }

  .project-about-grid-right {
    grid-column-gap: 2.5rem;
    grid-row-gap: 2.5rem;
  }

  .project-meta-grid {
    grid-template-columns: 1fr 1fr;
  }

  .project-meta-item {
    justify-content: flex-start;
    align-items: center;
  }

  .project-image-gallery {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .section-projects-heading {
    padding-top: 1rem;
  }

  .blog-posts-list {
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .blog-posts-post {
    border-left-style: none;
    padding-left: 0;
  }

  .blog-posts-post:last-child {
    display: block;
  }

  .post-preview-content {
    bottom: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
  }

  .post-preview-content-heading {
    font-size: 1rem;
  }

  .post-content-grid {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    grid-template-columns: 1fr;
  }

  .post-share-icons {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-direction: row;
  }

  .contact-grid {
    grid-column-gap: 1.2rem;
    grid-row-gap: 1.2rem;
    padding-top: 119px;
  }

  .contact-grid.subpage {
    padding-top: 1rem;
  }

  .about-awards-item-inner {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: 1fr;
  }

  .services-videos-video-wrapper {
    height: 24vw;
  }

  .services-videos-inner {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
    grid-template-columns: 1fr 1fr;
  }

  .pricing-prices-item-price {
    text-align: center;
  }

  .pricing-prices-item-image {
    text-align: left;
  }

  .banner {
    padding: .75rem;
  }

  .product-compare-price {
    font-size: 1.5rem;
  }

  .product-add-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .product-price {
    font-size: 1.5rem;
  }

  .project-pagination-previous {
    grid-template-columns: 1fr;
  }

  .project-pagination-next-image-wrapper, .project-pagination-previous-image-wrapper {
    display: none;
  }

  .project-pagination-next {
    grid-template-columns: 1fr;
  }

  .cursor-blur {
    width: 300px;
    height: 300px;
  }

  .buy-badge {
    bottom: 1rem;
    right: 1rem;
  }

  .home-hero-heading-2 {
    font-size: 7.5vw;
  }

  .home-hero-heading-grid-2 {
    grid-column-gap: 4vw;
    grid-row-gap: 4vw;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: none;
  }

  .heading-h4-2.text-uppercase {
    text-align: left;
  }

  .page-padding-2 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .div-block-3 {
    padding: 9px 1.5rem 0;
  }

  .grid-3 {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    width: auto;
  }

  .div-block-5 {
    text-align: center;
  }

  .div-block-5.see-all-projects {
    padding-bottom: 24px;
  }

  .image-2 {
    display: block;
  }

  .heading {
    display: flex;
  }

  .text-block {
    white-space: normal;
    line-height: 180%;
    display: block;
  }

  .columns {
    align-self: auto;
  }

  .text-block-2 {
    text-align: center;
    padding-top: 1rem;
    font-size: 12px;
    line-height: 120%;
  }

  .text-block-3 {
    padding-top: 1rem;
    font-size: 12px;
    line-height: 120%;
  }
}

#w-node-_29233870-fcd0-d95f-b64e-b71134891da5-6ed62158, #w-node-_29233870-fcd0-d95f-b64e-b71134891da6-6ed62158, #w-node-_29233870-fcd0-d95f-b64e-b71134891da8-6ed62158, #w-node-_29233870-fcd0-d95f-b64e-b71134891db0-6ed62158, #w-node-_29233870-fcd0-d95f-b64e-b71134891db8-6ed62158, #w-node-_010eb94e-e537-e275-f514-c9f83fd6c0e6-3fd6c0e0 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-c35cdd37-f86c-075b-5122-1da3e62177e6-3fd6c0e0 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: center;
}

#w-node-_010eb94e-e537-e275-f514-c9f83fd6c0e8-3fd6c0e0 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-cf665aa7-612c-9713-0917-12f535c66615-35c6660f {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: center start;
}

#w-node-cf665aa7-612c-9713-0917-12f535c66629-35c6660f {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: center end;
}

#w-node-d24bde80-361e-c6e4-d579-3a33c2e346fa-35c6660f, #w-node-_8fae9e49-7035-fa2b-2431-96caefc9f1b5-35c6660f, #w-node-_8fae9e49-7035-fa2b-2431-96caefc9f1b6-35c6660f, #w-node-_8fae9e49-7035-fa2b-2431-96caefc9f1c9-35c6660f, #w-node-_8fae9e49-7035-fa2b-2431-96caefc9f1e0-35c6660f {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_2b4034e9-f151-8b0d-9ca1-32395965180e-35c6660f {
  align-self: center;
}

#w-node-_5dcd865c-f64f-f210-554b-29d1a947f185-35c6660f, #w-node-ffb0e011-77eb-dbb9-92f8-9f9e22ddf70e-6ed6215c, #w-node-ffb0e011-77eb-dbb9-92f8-9f9e22ddf70f-6ed6215c, #w-node-b34ca3d6-9833-94e4-4f7b-debcac1fdb17-6ed6215c, #w-node-abef36bf-e2e2-a409-76b4-41742222b3df-6ed6215c, #w-node-_7ce69bb3-754d-d241-2227-8b004600128c-6ed6215c, #w-node-_9bdda068-a58d-c097-6afb-7ae3d5f26959-6ed6215c, #w-node-_9bdda068-a58d-c097-6afb-7ae3d5f2695a-6ed6215c, #w-node-_1f98a023-dc66-294f-5287-a38c4ee0df51-6ed62164 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_18a6a4d3-b415-548f-8090-374b883e7cd7-6ed62166 {
  place-self: auto center;
}

#w-node-_9b86eb6a-d441-64a7-0899-353f3bba90ff-6ed62166 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: center;
}

#w-node-_022a4a18-ddae-1555-e0dd-3c1845c9035a-45c90355, #w-node-_022a4a18-ddae-1555-e0dd-3c1845c90362-45c90355 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-a309a248-4a74-f6b8-3c1e-fdb60e99bf8b-6ed62169 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: center;
}

#w-node-a309a248-4a74-f6b8-3c1e-fdb60e99bf96-6ed62169, #w-node-a309a248-4a74-f6b8-3c1e-fdb60e99bfb9-6ed62169, #w-node-a309a248-4a74-f6b8-3c1e-fdb60e99bfba-6ed62169, #w-node-c7bdd687-533a-4e7b-e38c-d8c323a3eb12-6ed6216a {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-f8129576-23ef-af7c-2175-727c06a7ed09-6ed6216b {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: stretch start;
}

#w-node-f8129576-23ef-af7c-2175-727c06a7ed0a-6ed6216b {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-f8129576-23ef-af7c-2175-727c06a7ed17-6ed6216b {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: stretch end;
}

#w-node-f8129576-23ef-af7c-2175-727c06a7ed1f-6ed6216b, #w-node-b6faab81-f107-3f05-2407-b13f9f4fd4bf-6ed62170, #w-node-b6faab81-f107-3f05-2407-b13f9f4fd4d1-6ed62170, #w-node-b6faab81-f107-3f05-2407-b13f9f4fd4d7-6ed62170, #w-node-cccc5b5e-8561-87bc-754e-0a4d7d60a263-6ed62170, #w-node-c767764d-8a51-355f-65af-5f0a60dd85ef-6ed62173, #w-node-_882f1525-a995-0b9e-e373-c1a0b30f8f82-6ed62174, #w-node-_1debbaab-fb18-1e41-dc18-6f5de341e933-6ed62179, #w-node-_4ca6261f-c76d-d663-8231-a43e12849e77-6ed62179, #w-node-ad1159ea-cc68-8048-d7f2-605c4d3d2b3f-6ed62179, #w-node-ffe43818-a47f-3586-f1e2-94542c107d7c-6ed6217a, #w-node-_0a14a6af-31c6-9779-1dd2-25e9fa5d459d-6ed6217a, #w-node-ffe43818-a47f-3586-f1e2-94542c107d7e-6ed6217a, #w-node-_10f7edc3-5ab3-3832-0370-9a48a8432303-6ed6217a, #w-node-_00cb8e2b-699f-308f-c57e-a80b9126f607-6ed6217a, #w-node-e3813b83-7f4b-1d5e-183f-a4a98e3cbe99-6ed6217a {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_18a6a4d3-b415-548f-8090-374b883e7cd7-67a577de {
  justify-self: center;
}

#w-node-_9b86eb6a-d441-64a7-0899-353f3bba90ff-67a577de {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: center;
}

#w-node-_18a6a4d3-b415-548f-8090-374b883e7cd7-418c72bf {
  justify-self: center;
}

#w-node-_9b86eb6a-d441-64a7-0899-353f3bba90ff-418c72bf {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: center;
}

@media screen and (max-width: 991px) {
  #w-node-_9f610c21-b7d9-9af4-fb08-b3c3860d4005-35c6660f {
    align-self: center;
  }

  #w-node-_9b86eb6a-d441-64a7-0899-353f3bba90ff-6ed62166, #w-node-_9b86eb6a-d441-64a7-0899-353f3bba90ff-67a577de, #w-node-_9b86eb6a-d441-64a7-0899-353f3bba90ff-418c72bf {
    justify-self: stretch;
  }
}

@media screen and (max-width: 767px) {
  #w-node-_8b052465-7793-c16b-6c10-5e669b9d75ff-9b9d75fc {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

@media screen and (max-width: 479px) {
  #w-node-a309a248-4a74-f6b8-3c1e-fdb60e99bf8b-6ed62169 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-_26add1a1-5192-caed-9a87-4ff0126e6ae1-6ed62177 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}


@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* ============================================================
   SITE.JS REPLACEMENTS (replaces Webflow IX2 + jQuery)
   ============================================================ */

/* Marquee infinite scroll */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-inner {
  animation: marquee-scroll 20s linear infinite;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.marquee-secondary-inner {
  animation: marquee-scroll 12s linear infinite;
}

/* Mobile menu open state */
.mobile-menu.is-open {
  display: block;
}

/* Hamburger lines → X when menu is open */
.mobile-menu-toggle-line {
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.mobile-menu-toggle.is-open .mobile-menu-toggle-line._01 {
  transform: translateY(9px) rotate(-45deg);
  transform-origin: center;
}
.mobile-menu-toggle.is-open .mobile-menu-toggle-line._02 {
  opacity: 0;
}
.mobile-menu-toggle.is-open .mobile-menu-toggle-line._03 {
  transform: translateY(-9px) rotate(45deg);
  transform-origin: center;
}

/* Ensure video elements fill their containers (removes need for
   webflow.js object-fit polyfill via data-object-fit attribute) */
video[data-object-fit="cover"] {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* ============================================================
   PROJECTS PAGE — filter buttons, card hover, filtering
   ============================================================ */

/* Filter buttons are <button> elements reusing .label-link style */
.filter-btn {
  cursor: pointer;
  background: none;
  font-family: inherit;
}
.filter-btn.active {
  background-color: #ffffff1a;
  border-color: rgba(255,255,255,0.5);
}
.filter-btn:hover:not(.active) {
  border-color: #ffffff33;
}

/* Hidden cards (set by projects.js) */
.projects-card--hidden {
  display: none;
}

/* Card hover: slide the "View" button up from below */
.projects-work-button-wrapper {
  transition: bottom 0.3s ease;
}
.projects-work-image-wrapper:hover .projects-work-button-wrapper {
  bottom: 30%;
}

/* Consistent card image height */
.projects-card .projects-work-image-wrapper {
  aspect-ratio: 16 / 9;
}

/* Mobile: single column */
@media (max-width: 767px) {
  .projects-work-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Card: client name + role chips ──────────────────────────────────────── */
.projects-work-client {
  font-family: "Clash Display", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 0.3rem;
}

.projects-work-roles {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.6rem;
}

.projects-work-role {
  font-family: "Clash Display", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 2px;
  padding: 2px 7px;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
}

/* ─── Project detail page ─────────────────────────────────────────────────── */
.section-project-detail {
  padding-bottom: 4rem;
}

.project-detail-back {
  margin-bottom: 2rem;
}

.project-detail-back-link {
  font-family: "Clash Display", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color 0.2s ease;
}

.project-detail-back-link:hover {
  color: rgba(255,255,255,0.9);
}

.project-detail-back-arrow {
  margin-right: 0.4rem;
}

/* Video embed — aspect-ratio-aware, no letterboxing */
.project-detail-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.project-detail-video--vertical {
  aspect-ratio: 9 / 16;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.project-detail-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Non-embeddable URL fallback (no image, just a link) */
.project-detail-video-link {
  display: flex;
  justify-content: center;
  padding: 3rem 0;
}

/* Small centered metadata below the video */
.project-detail-meta {
  text-align: center;
  padding: 1.75rem 0 1rem;
}

.project-detail-title {
  font-family: "Clash Display", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  margin: 0 0 0.75rem;
}

/* Each metadata row (Client / Roles) */
.project-detail-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.4rem 0;
  font-family: "Clash Display", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Dim "Client" / "Roles" labels */
.project-detail-label {
  color: rgba(255,255,255,0.25);
  font-size: 0.62rem;
  letter-spacing: 2px;
}

/* Card thumbnails — always fill their 16:9 container */
.projects-work-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .project-detail-video--vertical {
    max-width: 100%;
  }

  .project-detail-meta {
    padding: 1.25rem 0;
  }

  /* Projects grid already stacks to 1 col via earlier rule */
}

/* ═══════════════════════════════════════════════════════════════════════════
   CUSTOM OVERRIDES — projects, cards, detail pages, global font weights
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Global font weight boost ──────────────────────────────────────────── */
body { font-weight: 400; }

.heading-large { font-weight: 700; }

/* Outlined headings (e.g. the "LET'S" in the CTA) read as heavy because 700 is
   synthesized faux-bold over the only-loaded Medium face. Drop the outlined
   variant to real Medium + a fine stroke so it's an elegant thin outline.
   The solid sibling ("Work!") stays bold for contrast. */
.heading-large.text-outline {
  font-weight: 500;
  -webkit-text-stroke: 0.5px #fff;
          text-stroke: 0.5px #fff;
}

.text-meta,
.label-link,
.filter-btn,
.button-inner-text,
.button-inner-text-hover,
.nav-item-text,
.navbar-menu-item-inner > div,
.mobile-menu-nav-text,
.footer-link { font-weight: 600; }

/* ─── Card: image container (16:9, overflow for scale clip) ─────────────── */
.projects-card .projects-work-image-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: block;
}

/* ─── Card: image scale on hover ────────────────────────────────────────── */
.projects-work-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.projects-card:hover .projects-work-image {
  transform: scale(1.04);
}

/* ─── Card: text hierarchy — Client (big) › Project (small) ─────────────── */
.card-client-name {
  font-family: "Clash Display", sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 0.3rem;
}

.card-project-name {
  font-family: "Clash Display", sans-serif;
  font-size: clamp(0.62rem, 0.85vw, 0.78rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,0.55);
}

/* cursor circle removed */
.card-cursor { display: none; }

/* ─── Project detail: bigger & bolder metadata ──────────────────────────── */
.project-detail-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 3px;
}

.project-detail-row {
  font-size: 0.82rem;
  font-weight: 600;
  gap: 0.8rem;
}

.project-detail-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 2.5px;
}

/* Role chips on detail pages get same bold treatment */
.project-detail-row .projects-work-role {
  font-weight: 600;
}

/* ─── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Hide cursor circle on touch — no hover events anyway */
  .card-cursor { display: none; }

  /* Detail video fills full width on mobile */
  .project-detail-video--vertical {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UPDATE 3 — card hover text, heading animation, navbar orange underline
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── PROJECTS page heading (CSS animation, no JS dependency) ────────────── */
@keyframes heading-slide-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: none; }
}

.projects-page-heading {
  animation: heading-slide-up 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 0.1s;
}

/* ─── Card: text hidden by default, fade+slide in on hover ──────────────── */
.card-client-name {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.card-project-name {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.32s ease 0.06s, transform 0.32s ease 0.06s;
}

.projects-card:hover .card-client-name {
  opacity: 1;
  transform: translateY(0);
}

.projects-card:hover .card-project-name {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Card: subtle scale on hover (image only, clipped by wrapper) ──────── */
.projects-card:hover .projects-work-image {
  transform: scale(1.02);
}

/* ─── Navbar: reduce weight, orange underline slide from left ────────────── */

/* Undo the font-weight:600 applied to nav divs in the previous override */
.navbar-menu-item-inner > div {
  font-weight: 400;
}

.navbar-menu-item-link {
  font-weight: 400;
  transition: color 0.2s ease;
}

/* Orange underline: start scaleX(0), slide in from left on hover / active */
.navbar-menu-item-line {
  background-color: var(--color-accent);
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: absolute;
  inset: auto auto -3px 0;
}

.navbar-menu-item-link:hover .navbar-menu-item-line,
.navbar-menu-item-link.w--current .navbar-menu-item-line {
  transform: scaleX(1);
}

/* Subtle orange color shift on hover and active */
.navbar-menu-item-link:hover,
.navbar-menu-item-link.w--current {
  color: var(--color-accent);
}

/* ─── Mobile: mobile nav not affected by these desktop overrides ──────────── */
@media (max-width: 991px) {
  .navbar-menu-item-line { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGO MARQUEE — seamless infinite scroll
   ═══════════════════════════════════════════════════════════════════════════

   How the seamless loop works:
   • The track holds 2 identical sets of logos (Set A + Set B).
   • width: max-content keeps them all in one unwrapped flex row.
   • The animation moves from translateX(0) → translateX(-50%).
   • At -50% the track has scrolled exactly one full set width, and Set B
     is now in the same visual position Set A started at → perfect loop.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.logo-marquee-wrapper {
  position: relative;          /* anchor the edge-fade overlays */
  overflow: hidden;
  width: 100%;
  padding: 2.5rem 0 3rem;
}
/* Edge fades via overlay gradients instead of a mask. A mask-image on the
   animated/transformed track makes mobile browsers intermittently drop or
   flicker the whole row; plain gradient overlays don't. */
.logo-marquee-wrapper::before,
.logo-marquee-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12%;
  z-index: 2;
  pointer-events: none;
}
.logo-marquee-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}
.logo-marquee-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
}

.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 0;                  /* spacing is per-logo margin-right (see below) so the
                              two sets are identical and -50% loops seamlessly */
  width: max-content;      /* never wrap — one long row */
  animation: logo-marquee-scroll 32s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

/* All logos: uniform height, preserve aspect ratio, white monochrome.
   filter: brightness(0) invert(1) converts any logo to pure white.
   If a logo is already pure white, this is a no-op visually. */
.logo-marquee-img {
  height: 72px;
  width: auto;
  max-width: 200px;        /* bounding box: a very wide wordmark can't blow out */
  margin-right: 4rem;      /* per-logo spacing → identical sets → seamless loop */
  object-fit: contain;     /* if capped by max-width, scale to fit, no distortion */
  flex-shrink: 0;          /* never compress — keep natural width */
  display: block;
  filter: brightness(0) invert(1);   /* ANY source colour → uniform white */
  opacity: 0.65;
  transition: opacity 0.2s ease;
  pointer-events: none;    /* prevent dragging during scroll */
}

/* Hover: full brightness on individual logo */
.logo-marquee-wrapper:not(:hover) .logo-marquee-img:hover,
.logo-marquee-wrapper:hover .logo-marquee-img:hover {
  opacity: 1;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 0 2rem;
    gap: 2.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAME LETTER ANIMATION — staggered slide-up reveal
   Each letter starts below its .clip container (which hides overflow),
   then slides up and fades in. Stagger is controlled by nth-child delays.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes letter-slide-up {
  from {
    opacity: 0;
    transform: translateY(105%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* All letters share the same animation — delays below create the stagger */
.home-hero-heading-2 {
  opacity: 0;
  animation: letter-slide-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── JAMISON (first row, indices 0–6) ─── */
.home-hero-heading-grid-inner-2:nth-child(1) .clip:nth-child(1) .home-hero-heading-2 { animation-delay: 0.10s; }
.home-hero-heading-grid-inner-2:nth-child(1) .clip:nth-child(2) .home-hero-heading-2 { animation-delay: 0.17s; }
.home-hero-heading-grid-inner-2:nth-child(1) .clip:nth-child(3) .home-hero-heading-2 { animation-delay: 0.24s; }
.home-hero-heading-grid-inner-2:nth-child(1) .clip:nth-child(4) .home-hero-heading-2 { animation-delay: 0.31s; }
.home-hero-heading-grid-inner-2:nth-child(1) .clip:nth-child(5) .home-hero-heading-2 { animation-delay: 0.38s; }
.home-hero-heading-grid-inner-2:nth-child(1) .clip:nth-child(6) .home-hero-heading-2 { animation-delay: 0.45s; }
.home-hero-heading-grid-inner-2:nth-child(1) .clip:nth-child(7) .home-hero-heading-2 { animation-delay: 0.52s; }

/* ── McDIVITT (second row, indices 7–14, gap of ~0.1s after first word) ─── */
.home-hero-heading-grid-inner-2:nth-child(2) .clip:nth-child(1) .home-hero-heading-2 { animation-delay: 0.62s; }
.home-hero-heading-grid-inner-2:nth-child(2) .clip:nth-child(2) .home-hero-heading-2 { animation-delay: 0.69s; }
.home-hero-heading-grid-inner-2:nth-child(2) .clip:nth-child(3) .home-hero-heading-2 { animation-delay: 0.76s; }
.home-hero-heading-grid-inner-2:nth-child(2) .clip:nth-child(4) .home-hero-heading-2 { animation-delay: 0.83s; }
.home-hero-heading-grid-inner-2:nth-child(2) .clip:nth-child(5) .home-hero-heading-2 { animation-delay: 0.90s; }
.home-hero-heading-grid-inner-2:nth-child(2) .clip:nth-child(6) .home-hero-heading-2 { animation-delay: 0.97s; }
.home-hero-heading-grid-inner-2:nth-child(2) .clip:nth-child(7) .home-hero-heading-2 { animation-delay: 1.04s; }
.home-hero-heading-grid-inner-2:nth-child(2) .clip:nth-child(8) .home-hero-heading-2 { animation-delay: 1.11s; }

/* Prevent site.js IntersectionObserver from clobbering these elements.
   Once the animation fires, the letter is visible — the JS reveal targeting
   data-w-id + opacity:0 cannot interfere because we removed data-w-id
   from all letter divs in the HTML. */

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE HOMEPAGE LAYOUT
   On mobile: hide the full-screen hero (big name + video grid).
   The profile/bio section becomes the first visible content.
   On desktop, the about section's margin-top:-15vw creates the intended
   overlap with the video grid — zero-out that negative margin on mobile.
   ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 767px) {
  /* Hide the entire hero (big JAMISON McDIVITT letters + video grid) */
  .section-home-hero {
    display: none;
  }

  /* Remove the overlap margin so bio sits cleanly under the nav */
  .section-home-about {
    margin-top: 0;
  }

  /* Give the bio section a top padding so it clears the fixed nav */
  .section-home-about > .page-padding {
    padding-top: 2rem;
  }

  /* Scale up the bio text on mobile — 5.5vw gets tiny on small screens */
  .text-size-huge {
    font-size: clamp(1.25rem, 5vw, 2rem);
    letter-spacing: 1px;
  }

  /* Make profile photo slightly larger on mobile for impact */
  .home-about-lynn-grid-2 img.border-radius {
    width: 72px;
    height: 72px;
    object-fit: cover;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT SECTION — subtitle size override (desktop + mobile)
   text-meta is 13px by default; pin it to 11px so it reads clearly smaller
   than the 1.5rem name headline above it.
   ═══════════════════════════════════════════════════════════════════════════ */

.home-about-role {
  font-size: 11px;
  letter-spacing: 2.5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE HERO OVERLAY — profile card at bottom of video grid
   Overrides the previous session's rules that hid the entire hero.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Always hidden on desktop */
.hero-bio-mobile {
  display: none;
}

@media screen and (max-width: 767px) {

  /* ── Restore the hero — we want videos visible on mobile ── */
  .section-home-hero {
    display: block !important;   /* override the previous display:none rule */
    position: relative;
  }

  /* Hide only the giant JAMISON McDIVITT letter block */
  .home-hero-heading-wrapper {
    display: none;
  }

  /* Make the hero fill the viewport height on mobile */
  .home-hero {
    min-height: 100svh;
    min-height: 100vh; /* fallback */
  }

  /* ── Mobile profile card overlay ── */
  .hero-bio-mobile {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 3rem 1.25rem 2rem;
    /* gradient fades from opaque black at bottom to transparent at top */
    background: linear-gradient(
      to top,
      rgba(9, 9, 9, 0.95) 0%,
      rgba(9, 9, 9, 0.65) 50%,
      transparent 100%
    );
  }

  .hero-bio-mobile-identity {
    display: flex;
    align-items: center;
    gap: 0.65rem;
  }

  .hero-bio-mobile-photo {
    width: 44px;
    height: 44px;
    object-fit: cover;
    flex-shrink: 0;
  }

  .hero-bio-mobile-name {
    font-family: 'Clash Display', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;
    line-height: 1.2;
  }

  .hero-bio-mobile-role {
    font-family: 'Clash Display', sans-serif;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 3px;
  }

  .hero-bio-mobile-bio {
    font-family: 'Clash Display', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.5px;
    color: #fff;
    margin: 0;
  }

  /* ── Hide the separate about section — info lives in the hero overlay ── */
  .section-home-about {
    display: none !important;    /* override previous session's margin rules */
  }

  /* ── Bio text size on desktop about section (override previous clamp) ── */
  /* (irrelevant now the section is hidden on mobile, but keeps cascade clean) */
  .text-size-huge {
    font-size: 5.5vw; /* restore to original — mobile doesn't see it */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO BIO OVERLAY — desktop + mobile
   The profile card and statement text sit at the bottom of the hero,
   overlaid on the video grid. Applies universally; no breakpoint split.

   Supersedes all previous .hero-bio-mobile and .section-home-about rules.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero container ──────────────────────────────────────────────────────── */

.section-home-hero {
  position: relative !important;
  display: block !important;      /* override any previous display:none rules */
}

/* The video grid must fill the viewport so the overlay sits at the bottom */
.home-hero {
  min-height: 100vh;
  min-height: 100svh;
}

/* Suppress the built-in gradient-bottom — the overlay carries its own */
.home-hero .gradient-bottom {
  display: none;
}

/* ── Overlay card ────────────────────────────────────────────────────────── */

.hero-bio-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.5vw, 1.4rem);
  /* Generous top padding so the gradient has room to breathe above the text */
  padding: clamp(6rem, 20vw, 14rem) clamp(1.25rem, 3vw, 3rem) clamp(2.5rem, 4vw, 4rem);
  /* Dark-to-transparent gradient — reads dark at bottom, videos show through above */
  background: linear-gradient(
    to top,
    rgba(9, 9, 9, 0.97) 0%,
    rgba(9, 9, 9, 0.88) 25%,
    rgba(9, 9, 9, 0.55) 55%,
    transparent 100%
  );
  /* Prevent interaction bleed-through */
  pointer-events: none;
}

/* ── Identity row: photo + name + title ─────────────────────────────────── */

.hero-bio-overlay-identity {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1vw, 1rem);
  pointer-events: auto;
}

.hero-bio-overlay-photo {
  width: clamp(40px, 3.5vw, 60px);
  height: clamp(40px, 3.5vw, 60px);
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}

.hero-bio-overlay-name {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  line-height: 1.2;
}

.hero-bio-overlay-role {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(9px, 0.65vw, 11px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 3px;
}

/* ── Statement bio text ──────────────────────────────────────────────────── */

.hero-bio-overlay-bio {
  font-family: 'Clash Display', sans-serif;
  /* Large on desktop, readable on mobile — no hard breakpoints needed */
  font-size: clamp(1.6rem, 4vw, 5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  pointer-events: auto;
}

/* ── Desktop: keep big JAMISON letter animation visible ──────────────────── */

/* .home-hero-heading-wrapper stays visible on desktop (handled by existing CSS) */

/* ── Mobile overrides ────────────────────────────────────────────────────── */

@media screen and (max-width: 767px) {
  /* Hide the big JAMISON letter animation — overlay handles identity */
  .home-hero-heading-wrapper {
    display: none;
  }

  /* Hide the separate about section — overlay is the only profile info on mobile */
  .section-home-about {
    display: none !important;
  }

  /* Scale up bio text on small screens so it fills the width */
  .hero-bio-overlay-bio {
    font-size: clamp(1.5rem, 6.5vw, 2.25rem);
  }

  /* Tighten the overlay gap on small screens */
  .hero-bio-overlay {
    gap: 0.75rem;
  }

  /* Pull the video grid up to the nav — it's vertically centered in the 100vh
     hero by default, which leaves a big black band under the navbar on phones.
     Top-align it instead. ▶ TUNE the small breathing gap with padding-top. */
  .home-hero-inner {
    align-items: flex-start;
    padding-top: 12px;
  }
}

/* ── Always hide the now-redundant about section on desktop too ──────────── */
/* The overlay replaced it; keeping it would duplicate content. */
.section-home-about {
  display: none;
}

/* ── Old .hero-bio-mobile class is unused — clear any lingering rules ────── */
.hero-bio-mobile {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRADIENT, SPACING & SECTION FLOW — v2 fixes
   Supersedes conflicting rules above; cascade order is intentional.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Video grid gradient-bottom: restore and extend ───────────────────── */
/* Previously suppressed; we need it for a smooth multi-hundred-px fade.     */
.home-hero .gradient-bottom {
  display: block !important;
  height: 60%;            /* covers bottom 60% of the video grid with fade  */
  min-height: 320px;      /* never less than 320px of gradient               */
  background-image: linear-gradient(to top, var(--color-bg) 0%, transparent 100%);
  z-index: 6;             /* above videos (z-index ~1), below overlay (z-index 20) */
}

/* ── 2. Hero overlay: wider side padding, stronger gradient, cleaner gap ─── */
.hero-bio-overlay {
  padding-top: clamp(10rem, 28vw, 20rem);  /* tall gradient breathing room    */
  padding-left: clamp(1.5rem, 5.5vw, 5rem);
  padding-right: clamp(1.5rem, 5.5vw, 5rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
  gap: 22px;

  /* Richer gradient: solid black at bottom, gradual over the full height */
  background: linear-gradient(
    to top,
    var(--color-bg) 0%,
    var(--color-bg) 8%,
    rgba(9, 9, 9, 0.94) 22%,
    rgba(9, 9, 9, 0.78) 40%,
    rgba(9, 9, 9, 0.50) 60%,
    rgba(9, 9, 9, 0.18) 80%,
    transparent 100%
  );
}

/* ── 3. Identity row: explicit vertical centering on one line ────────────── */
.hero-bio-overlay-identity {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(0.65rem, 1vw, 1rem);
}

/* ── 4. Logo marquee section: breathing room and seamless background ─────── */
/* No explicit background needed — inherits var(--color-bg) from body.               */
.section-home-clients {
  padding-top: 4rem;
  padding-bottom: 2rem;
}

/* "Trusted By" label: small, centered, spaced below the section start       */
.section-home-clients .padding-top.padding-large {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Logo marquee: more bottom breathing room before CTA section               */
.logo-marquee-wrapper {
  padding-top: 1.5rem;
  padding-bottom: 5.5rem;
}

/* ── 5. CTA section: spacious vertical rhythm ────────────────────────────── */
/* The padding-vertical.padding-xxhuge inside CTA content has padding-top:0  */
.section-cta-contact .padding-vertical.padding-xxhuge {
  padding-top: 4.5rem;
  padding-bottom: 5.5rem;
}

/* ── 6. Mobile overlay refinements ──────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .hero-bio-overlay {
    padding-top: clamp(8rem, 55vw, 14rem);   /* shorter top padding on mobile */
    padding-left: clamp(1.25rem, 5vw, 2rem);
    padding-right: clamp(1.25rem, 5vw, 2rem);
    padding-bottom: 2.5rem;
    gap: 16px;
  }

  /* Logo section: less top padding on mobile */
  .section-home-clients {
    padding-top: 2.5rem;
  }

  .logo-marquee-wrapper {
    padding-bottom: 3.5rem;
  }

  .section-cta-contact .padding-vertical.padding-xxhuge {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIZING PASS — match original Webflow site scale
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Bio statement text: 48-56px desktop ──────────────────────────────── */
.hero-bio-overlay-bio {
  font-size: clamp(2.5rem, 4vw, 3.75rem);   /* 40px → 57.6px → 60px           */
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
/* Mobile keeps a readable but noticeably large size */
@media screen and (max-width: 767px) {
  .hero-bio-overlay-bio {
    font-size: clamp(1.75rem, 7vw, 2.5rem);  /* ~28-40px on phone              */
    line-height: 1.12;
  }
}

/* ── 2. Logo height: 90px ────────────────────────────────────────────────── */
.logo-marquee-img {
  height: 90px;
}
@media screen and (max-width: 767px) {
  .logo-marquee-img {
    height: 60px;   /* still prominent on mobile without overflow             */
  }
}

/* ── 3. Gradient: longer, smoother, starts 40% from bottom of video grid ── */

/* The gradient-bottom inside .home-hero: cover the bottom 65% of the grid.
   At 100vh that's ~650px of fade on a 1000px screen — well over 300-400px. */
.home-hero .gradient-bottom {
  display: block !important;
  height: 65%;
  min-height: 420px;
  background-image: linear-gradient(
    to top,
    var(--color-bg) 0%,       /* solid black */
    var(--color-bg) 5%,       /* hold solid briefly */
    rgba(9,9,9,0.96) 15%,
    rgba(9,9,9,0.85) 30%,
    rgba(9,9,9,0.60) 55%,
    rgba(9,9,9,0.25) 78%,
    transparent 100%
  );
  z-index: 6;
}

/* The overlay carries its own gradient on top for the text legibility zone */
.hero-bio-overlay {
  background: linear-gradient(
    to top,
    var(--color-bg) 0%,
    var(--color-bg) 12%,
    rgba(9,9,9,0.97) 28%,
    rgba(9,9,9,0.82) 50%,
    rgba(9,9,9,0.40) 72%,
    transparent 100%
  );
  /* Pull the overlay up further so gradient starts higher on the video grid */
  padding-top: clamp(12rem, 32vw, 24rem);
}

/* ── 4. "Trusted By" label: larger, more prominent, big top gap ─────────── */
.home-trusted-by-label {
  font-family: 'Clash Display', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}

/* Section-level top padding — at least 80px above Trusted By */
.section-home-clients {
  padding-top: 6rem;   /* 96px — overrides previous 4rem                     */
}

.section-home-clients .padding-top.padding-large {
  padding-top: 0.5rem;
  padding-bottom: 2rem;
}

/* ── 5. Explore arrow link ───────────────────────────────────────────────── */
.hero-bio-overlay-explore {
  display: inline-flex;
  align-items: center;
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(0.75rem, 0.9vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
  pointer-events: auto;
  margin-top: 0.25rem;  /* small extra gap below bio text */
}
.hero-bio-overlay-explore:hover {
  color: #fff;
}
@media screen and (max-width: 767px) {
  .hero-bio-overlay-explore {
    font-size: 0.7rem;
  }
  .section-home-clients {
    padding-top: 3.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESTORE ORIGINAL WEBFLOW VALUES — authoritative final pass
   All values pulled directly from the original Webflow-exported CSS.
   This block intentionally overrides every prior custom rule in this file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bio statement text: exact original text-size-huge values ───────────── */
.hero-bio-overlay-bio {
  font-family: Clash Display, sans-serif;
  font-size: 5.5vw;          /* original text-size-huge base */
  font-weight: 500;
  letter-spacing: 3px;
  line-height: 110%;
  color: #fff;
  margin: 0;
  pointer-events: auto;
}

/* Explore ↓ link: text-outline treatment matching original span */
.hero-bio-overlay-explore {
  /* Inherits font-size/weight from parent .hero-bio-overlay-bio */
  color: transparent;             /* original: color:#0000 */
  -webkit-text-stroke: 0.5px #fff; /* original global style  */
  text-stroke: 0.5px #fff;
  text-decoration: none;
  pointer-events: auto;
  transition: opacity 0.2s ease;
}
.hero-bio-overlay-explore:hover {
  opacity: 0.7;
}

/* ── Breakpoints: match original text-size-huge responsive chain ─────────── */
@media screen and (min-width: 1440px) {
  .hero-bio-overlay-bio { font-size: 5rem; }  /* original: 5rem at ≥1440px */
}
@media screen and (max-width: 991px) {
  .hero-bio-overlay-bio { font-size: 3rem; line-height: 120%; }
}
@media screen and (max-width: 767px) {
  .hero-bio-overlay-bio { font-size: 2.5rem; }
}
@media screen and (max-width: 479px) {
  .hero-bio-overlay-bio { font-size: 1.2rem; margin-top: 1.7rem; }
}

/* ── Name: exact heading-h4-2.text-uppercase values ─────────────────────── */
.hero-bio-overlay-name {
  font-family: Clash Display, sans-serif;
  font-size: 1.5rem;          /* original heading-h4-2 */
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 100%;          /* tighter — name + title sit closer */
  text-transform: none;       /* literal casing so the "c" in McDivitt stays lowercase */
  color: #fff;
}

/* ── Role: original text-meta values ────────────────────────────────────── */
.hero-bio-overlay-role {
  font-family: Clash Display, sans-serif;
  font-size: 11px;            /* smaller than the name */
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0;              /* sits right under the name */
}

/* ── Video grid gradient: exact original gradient-bottom values ──────────── */
.home-hero .gradient-bottom {
  display: block !important;
  height: 80%;                /* original: height: 80% */
  min-height: unset;          /* remove our custom min-height override */
  background-image: linear-gradient(#09090900, var(--color-bg)); /* original 2-stop */
  z-index: 6;
}

/* ── Logo marquee: split the original 80–110px range at 90px ────────────── */
/* Original logos had inline heights 80–110px; 90px gives a representative  */
/* uniform height for the CSS-animated marquee.                              */
.logo-marquee-img {
  height: 90px;
}
@media screen and (max-width: 767px) {
  .logo-marquee-img { height: 58px; }
}

/* ── Photo: B&W headshot, square with softly beveled corners (not a circle) ─ */
.hero-bio-overlay-photo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;   /* beveled square */
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECT DETAIL PAGE — minimal redesign
   Layout: nav → back link → video → metadata → (space) → Let's Work → footer
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Back link ───────────────────────────────────────────────────────────── */

.pd-back-wrap {
  padding: 2rem 5vw 1.5rem;
}

.pd-back-link {
  font-family: Clash Display, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition: color 0.2s ease;
}

.pd-back-link:hover {
  color: #fff;
}

/* ── Video wrapper ───────────────────────────────────────────────────────── */

.pd-media-wrap {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* Outer container: sets width and centering only. */
.pd-video {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

/* Portrait ratios (9:16, 2:3): narrower outer container. */
.pd-video--vertical {
  max-width: 500px;
}

/* Inner sizer: height:0 + padding-bottom (set inline per-video) is the
   only reliable way to give an iframe an intrinsic aspect-ratio box.
   Without height:0 the wrapper is taller than the iframe content. */
.pd-video-sizer {
  position: relative;
  height: 0;
  /* padding-bottom applied inline: 56.25%=16:9, 75%=4:3, 100%=1:1,
                                    177.78%=9:16, 150%=2:3             */
}

.pd-video-sizer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── Metadata below the video — editorial caption + role badges + turnaround ──
   The inner box matches the video's width so caption edges line up with the
   video edges; vertical videos get the narrower track. */

.pd-meta {
  padding: 3.5rem 5vw 9rem;  /* tall bottom padding pushes CTA far below */
}

.pd-meta-inner {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}
.pd-meta--vertical .pd-meta-inner {
  max-width: 500px;
}

/* Caption — CLIENT (bold, left) ——— hairline ——— Project (italic, right).
   Mirrors the project-grid card caption exactly. */
.pd-caption {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.pd-caption-client {
  flex: 0 0 auto;
  font-family: "Clash Display", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(0.9rem, 1.5vw, 1.15rem);
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
}
.pd-caption-rule {
  flex: 1 1 auto;
  min-width: 2rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  align-self: center;
  transform: translateY(-0.06em);  /* nudge to optical baseline */
}
.pd-caption-title {
  flex: 0 1 auto;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.62);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* No-client fallback: the title stands alone on the left, in the bold style. */
.pd-caption--solo .pd-caption-rule { display: none; }
.pd-caption--solo .pd-caption-title {
  font-family: "Clash Display", sans-serif;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  text-align: left;
}

/* Role badges — thin hairline rectangles, one per role. Centered on desktop;
   left-aligned on mobile (where the caption stacks left). */
.pd-roles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
}
.pd-role {
  font-family: "Clash Display", sans-serif;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  padding: 0.5em 0.85em;
  line-height: 1;
  white-space: nowrap;
}

/* ── Turnaround — a video-editor's timeline that scrubs Shot → Delivered ─────
   The accent playhead races the ruler on reveal (faster for quicker jobs) while
   the value counts up to the real turnaround. Echoes the NLE timeline. */
.pd-timeline {
  margin-top: 2.75rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pd-timeline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.05rem;
}
.pd-timeline-label {
  font-family: "Clash Display", sans-serif;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.pd-timeline-value {
  font-family: "Clash Display", sans-serif;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.pd-timeline-track {
  position: relative;
  height: 30px;
}
.pd-timeline-rail {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  /* NLE ruler tick marks */
  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0.16) 1px,
    transparent 1px, transparent 38px
  );
}
.pd-timeline-fill {
  position: absolute;
  left: 0; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  width: var(--scrub, 0%);
  background: var(--color-accent);
}
.pd-timeline-playhead {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--scrub, 0%);
  width: 2px;
  margin-left: -1px;
  background: var(--color-accent);
  box-shadow: 0 0 14px rgba(255, 126, 38, 0.55);
}
.pd-timeline-playhead::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--color-accent);
}
.pd-timeline-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 0.7rem;
  font-family: "Clash Display", sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  /* No scrub animation — show the rail filled and the final value. */
  .pd-timeline-fill, .pd-timeline-playhead { --scrub: 100%; }
}

/* ── CTA section: extra top breathing room on detail pages ──────────────── */

.pd-cta {
  margin-top: 2rem;  /* additional breathing room; pd-meta bottom already large */
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media screen and (max-width: 767px) {
  .pd-media-wrap {
    padding: 0 4vw;
    gap: 8vw;
  }
  /* Video fills the 4vw-padded wrap for every aspect ratio, so its left/right
     edges line up exactly with the caption, badges, and turnaround (also 4vw). */
  .pd-video,
  .pd-video--vertical {
    width: 100%;
    max-width: none;
  }

  .pd-back-wrap {
    padding: 1.5rem 4vw 1rem;
  }

  .pd-meta {
    padding: 2.5rem 4vw 7rem;
  }
  /* Video is full-width on mobile, so the caption box is too. */
  .pd-meta-inner,
  .pd-meta--vertical .pd-meta-inner {
    width: 100%;
    max-width: none;
  }
  /* Stack the caption so the full project title is readable (no ellipsis):
     CLIENT / full-width hairline / title (wraps). */
  .pd-caption {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }
  .pd-caption-client { font-size: 0.9rem; }
  .pd-caption-rule {
    width: 100%;
    min-width: 0;
    transform: none;
  }
  .pd-caption-title {
    font-size: 0.95rem;
    text-align: left;
    white-space: normal;
    overflow: visible;
  }
  /* Caption stacks left on mobile, so the badges follow it left. */
  .pd-roles {
    justify-content: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT FORMS
   ═══════════════════════════════════════════════════════════════════════════ */

:root { --cf-orange: var(--color-accent); }  /* match the site accent #ff7e26 */

.cf-section {
  padding: 0 0 8rem;
}

.cf-container {
  max-width: 780px;
  margin: 0 auto;
  padding: 5rem 0 0;
}

/* ── Heading ─────────────────────────────────────────────────────────────── */

.cf-heading {
  margin-bottom: 3.5rem;
}

.cf-subline {
  font-family: Clash Display, sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.4);
  margin: 1.5rem 0 0;
  line-height: 1.7;
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */

.cf-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cf-tab {
  font-family: Clash Display, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.75rem 1.5rem 0.75rem 0;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.cf-tab:hover {
  color: rgba(255, 255, 255, 0.7);
}

.cf-tab--active {
  color: var(--cf-orange);
  border-bottom-color: var(--cf-orange);
}

/* ── Forms ───────────────────────────────────────────────────────────────── */

.cf-form {
  display: none;
  flex-direction: column;
  gap: 1.5rem;
}

.cf-form--active {
  display: flex;
}

/* ── Field rows ──────────────────────────────────────────────────────────── */

.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.cf-row--single {
  grid-template-columns: 1fr;
}

.cf-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── Labels ──────────────────────────────────────────────────────────────── */

.cf-label {
  font-family: Clash Display, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* ── Inputs, selects, textareas ──────────────────────────────────────────── */

.cf-input,
.cf-select,
.cf-textarea {
  font-family: Clash Display, sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
}

.cf-input::placeholder,
.cf-textarea::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus {
  border-color: var(--cf-orange);
  background: rgba(255, 255, 255, 0.07);
}

.cf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.cf-select option {
  background: #141414;
  color: #fff;
}

.cf-textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}

/* ── Footer / submit ─────────────────────────────────────────────────────── */

.cf-footer {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-top: 0.5rem;
  flex-wrap: wrap;
}

.cf-submit {
  font-family: Clash Display, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  background: var(--cf-orange);
  border: none;
  border-radius: 4px;
  padding: 0.9rem 2.5rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.cf-submit:hover { opacity: 0.85; }
.cf-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.cf-success {
  font-family: Clash Display, sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
  display: none;
  margin: 0;
}

.cf-success--visible { display: block; }
.cf-success--error   { color: #ff4444; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media screen and (max-width: 767px) {
  .cf-container {
    padding-top: 3rem;
  }

  .cf-row {
    grid-template-columns: 1fr;
  }
}

/* ── ABOUT PAGE initials signature — handwriting draw-in ─────────────────────
   The SVG is a single FILLED path (font outline), so a true stroke-dasharray
   draw would trace the letter OUTLINES, not write them. Instead the filled
   signature is revealed left→right (writing direction) with a feathered mask,
   triggered once when it scrolls into view (~1.7s ease-out, in js/about.js).
   No-JS / reduced-motion: shown fully, no draw. */
.ab-signoff {
  display: flex;
  justify-content: flex-start;      /* desktop: signed-letter style, under the bio */
  margin-top: 2rem;
}

.ab-sign {
  display: block;
  width: min(240px, 60vw);          /* ~200–260px — natural letter-signing scale */
  height: auto;
  color: #fff;                      /* inline SVG paths use fill: currentColor */
  opacity: 0.9;                     /* muted white against the dark background */
}

/* Armed only by JS (so no-JS leaves it fully visible). Mask starts fully wiped
   from the left; .is-drawn slides it open over ~1.7s = the write-on. The 250%
   mask + soft feather clears the element cleanly at both ends. */
.ab-sign.is-arming {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 42%, transparent 58%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 42%, transparent 58%, transparent 100%);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-size: 250% 100%;    mask-size: 250% 100%;
  -webkit-mask-position: 100% 0;   mask-position: 100% 0;   /* fully hidden */
}
.ab-sign.is-arming.is-drawn {
  -webkit-mask-position: 0% 0;     mask-position: 0% 0;     /* fully written */
  -webkit-transition: -webkit-mask-position 1.7s var(--ease-out);
          transition: mask-position 1.7s var(--ease-out);
}

/* (3) Mobile: centre the signature under the bio text */
@media (max-width: 767px) {
  .ab-signoff { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — reduced motion + keyboard focus
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reduced motion ────────────────────────────────────────────────────────
   Pause the continuously-scrolling marquees (header tickers + footer marquee)
   and disable the one-shot entrance animations (hero name letters, projects
   heading) for users who request reduced motion. The logo marquee already
   has its own guard above; this covers everything else.
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Continuous horizontal tickers — freeze in place */
  .marquee-inner,
  .marquee-secondary-inner {
    animation: none;
  }

  /* One-shot entrance reveals — show final state immediately, no movement */
  .home-hero-heading-2 {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .projects-page-heading {
    animation: none;
  }
}

/* ── Keyboard focus ────────────────────────────────────────────────────────
   The Webflow reset strips default focus outlines and provides no replacement,
   leaving keyboard users with no visible focus indicator. Restore one scoped
   to the dark palette. :focus-visible keeps it keyboard-only (no ring on
   mouse click).
   ────────────────────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.w-inline-block:focus-visible,
.mobile-menu-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
  border-radius: 2px;
}

/* On the orange ticker bars, a white ring can be low-contrast — use a dark ring */
.section-marquee-secondary a:focus-visible {
  outline-color: rgba(0, 0, 0, 0.8);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECTS GRID — editorial cards (caption below thumbnail, always visible)
   Reference layout: title bold-uppercase left · thin rule · italic subtitle right
   Grid columns (3 desktop / 1 mobile) are inherited from .projects-work-grid;
   this block only restyles the individual card and tunes row spacing.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tight, even rows; modest column gutter. align-items:start keeps each card its
   natural height (top-aligned) so a taller caption in one card doesn't leave dead
   space under its row neighbours. */
.projects-work-grid {
  grid-column-gap: 1.5rem;
  grid-row-gap: clamp(1.5rem, 2.5vw, 2.25rem);
  align-items: start;
}

/* Whole card is one link: thumbnail + caption stacked */
.project-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Thumbnail — fixed 16:9, clips the subtle hover scale */
.project-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.project-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.92);
  will-change: transform;
  /* leave (mouse-out): ease back, slightly softer */
  transition: transform 280ms ease, filter 280ms ease;
}

/* Subtle hover only — gentle brightness lift + barely-there scale.
   ease-out on enter so it accelerates in then settles into place. */
.project-card:hover .project-card-img {
  filter: brightness(1.04);
  transform: scale(1.03);
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
              filter   240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Caption row: TITLE ————————— subtitle, on one baseline, always visible */
.project-card-meta {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-top: 0.7rem;   /* caption sits close under the thumbnail */
}

.project-card-title {
  flex: 0 0 auto;
  font-family: "Clash Display", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(0.78rem, 0.95vw, 0.95rem);
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
}

/* Thin horizontal rule fills the gap between title and subtitle */
.project-card-rule {
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  align-self: center;
  transform: translateY(-0.08em);  /* nudge to optical baseline */
}

.project-card-subtitle {
  flex: 0 1 auto;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(0.78rem, 0.95vw, 0.92rem);
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile project labels — exact maxgilberg style: CLIENT (left) · long hairline ·
   subtitle italic (right), both small + same size. Desktop is untouched. */
@media (max-width: 767px) {
  /* (5) equal, tight margins matching the thumbnail edges → one clean column */
  .section-projects .page-padding {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  /* (6) uniform vertical spacing between projects */
  .projects-work-grid {
    grid-row-gap: 1.75rem;
  }
  /* (6) label row close under the thumbnail, everything vertically centered */
  .project-card-meta {
    gap: 0.6rem;
    margin-top: 0.5rem;
    align-items: center;
  }
  /* (1)(2) client: small (~13px), SAME size as subtitle, uppercase, medium weight, left */
  .project-card-title {
    font-size: 13px;
    font-weight: 500;            /* normal/medium, not bold */
    letter-spacing: 0.04em;
  }
  /* (1)(3) subtitle: same small size, italic, right */
  .project-card-subtitle {
    font-size: 13px;
  }
  /* (4) long thin hairline, ~1px, centered with the text, spanning the gap */
  .project-card-rule {
    height: 1px;
    min-width: 2rem;
    background: rgba(255, 255, 255, 0.2);
    transform: none;            /* drop the desktop baseline nudge — center exactly */
  }
}

/* ── Scroll reveal — cards settle in as they enter the viewport ──────────────
   Emil Kowalski philosophy: short travel (16px, not 40), ease-out so the card
   decelerates into place (reads as "arriving"), under 300ms per card. The
   per-card stagger is applied via transition-delay in js/projects.js and is
   capped per row so later cards never feel sluggish. Cards animate only
   opacity + transform (compositor-friendly, no layout work).
   ────────────────────────────────────────────────────────────────────────── */
.projects-card {
  /* Let the grid track shrink below the image's intrinsic width; without this
     the 1fr column blows out to the image size and the page scrolls sideways. */
  min-width: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 260ms ease-out,
              transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.projects-card.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Respect reduced-motion: no reveal travel, no hover transform/zoom ─────── */
@media (prefers-reduced-motion: reduce) {
  .projects-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .project-card-img,
  .project-card:hover .project-card-img {
    transition: none;
    transform: none;
    filter: brightness(0.96);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VFX WALL — tight Pinterest-style masonry of silent looping clips
   CSS columns pack each column independently → no internal holes, no gaps.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Keep .vfx-main transparent (like the homepage's .main-wrapper) so the CTA's
   orange .background-blur — painted at the root's negative-z layer — isn't
   covered. The body already provides the black; the masonry area gets its own. */
.vfx-main {
  background: transparent;
}

.section-vfx {
  padding: 0;
  background: var(--color-bg);   /* black behind the masonry only, not the CTA */
}

/* Masonry via CSS columns — 5 cols desktop, stepping down responsively.
   column-gap:0 + line-height:0 on items = edge-to-edge, gapless wall. */
.vfx-masonry {
  column-count: 6;
  column-gap: 0;
  background: var(--color-bg);
}
@media (max-width: 1023px) { .vfx-masonry { column-count: 4; } }  /* tablet        */
@media (max-width: 767px)  { .vfx-masonry { column-count: 3; } }  /* small tablet  */
@media (max-width: 479px)  { .vfx-masonry { column-count: 2; } }  /* mobile        */

.vfx-item {
  break-inside: avoid;
  position: relative;
  display: block;
  line-height: 0;       /* kill inline whitespace gaps between stacked clips */
  overflow: hidden;     /* clip the subtle hover scale so neighbours don't overlap */
}

.vfx-video {
  display: block;
  width: 100%;
  height: auto;         /* fallback: natural sizing when no aspect-ratio is set */
  background: #111;      /* placeholder tone before the frame paints */
  /* Subtle hover (Emil): snappy, explicit props, strong ease-out */
  transition: transform 240ms var(--ease-out), filter 240ms ease;
  will-change: transform;
}
/* When the build reserves the clip's box (inline aspect-ratio), fill it exactly.
   The item ratio == the clip ratio, so object-fit:cover doesn't actually crop —
   it just keeps the masonry stable before any video has loaded. */
.vfx-item[style*="aspect-ratio"] .vfx-video {
  height: 100%;
  object-fit: cover;
}

.vfx-item:hover .vfx-video {
  transform: scale(1.04);
  filter: brightness(1.06);
}

/* Entrance — armed by js/vfx.js (so no-JS / reduced-motion stays visible).
   Positions are fixed (colour-sorted); js/vfx.js randomizes the per-clip
   transition-delay so the wall fills in scattered. Each clip fades + scales in.
   Emil: ease-out, ~300ms per clip. (Transform on the item is visual only, so
   masonry positions don't shift.) */
.vfx-item.vfx-reveal {
  opacity: 0;
  transform: scale(0.9);
}
.vfx-item.vfx-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}

.vfx-empty {
  color: rgba(255, 255, 255, 0.5);
  font-family: "Clash Display", sans-serif;
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-align: center;
  padding: 7rem 1.5rem;
  line-height: 1.7;
}
.vfx-empty code {
  color: rgba(255, 255, 255, 0.8);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85em;
}

@media (prefers-reduced-motion: reduce) {
  .vfx-item.vfx-reveal { opacity: 1; transform: none; }
  .vfx-video,
  .vfx-item:hover .vfx-video { transition: none; transform: none; filter: none; }
}

/* ── VFX loading screen ─────────────────────────────────────────────────────
   Covers the wall until the first screenful of clips can play, so the populate
   animation isn't competing with video decode. Black + orange, pulsing JM logo
   with a thin progress bar that fills as the first batch becomes ready. */
html.vfx-loading,
html.vfx-loading body { overflow: hidden; }

.vfx-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  opacity: 1;
  transition: opacity 450ms ease;
  /* No-JS safety net: never trap the visitor behind the loader. Fires well after
     the JS path (3s cap + fade) would have removed it, so they never collide. */
  animation: vfx-loader-failsafe 500ms ease 4500ms forwards;
}
.vfx-loader.is-hidden { opacity: 0; pointer-events: none; }
@keyframes vfx-loader-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.vfx-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.vfx-loader-logo {
  width: 50px;
  height: auto;
  display: block;
  animation: vfx-loader-pulse 1.4s ease-in-out infinite;
}
@keyframes vfx-loader-pulse {
  0%, 100% { opacity: 0.4;  transform: scale(0.95); }
  50%      { opacity: 1;    transform: scale(1); }
}
.vfx-loader-bar {
  width: 120px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.vfx-loader-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--color-accent);   /* #ff7e26 */
  transition: width 220ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .vfx-loader-logo { animation: none; opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE INTRO / LOADING SCREEN
   Two stacked logo layers: white JAMISON (with film grain) + orange McDivitt
   signature that wipes on left→right like ink. Sequenced by js/intro.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Lock scroll while the intro plays */
html.intro-lock,
html.intro-lock body { overflow: hidden; }

/* Full-screen overlay — covers from first paint (CSS is in <head>) */
.intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);           /* #090909 — matches the site, not harsh pure black */
  opacity: 1;
  transition: opacity 500ms ease;        /* stage 5: fade up and out */
  /* No-JS safety net: if intro.js never runs, don't trap the visitor behind a
     black screen — fade the overlay away after the sequence would have ended.
     With JS, the element is removed well before this fires. */
  animation: intro-failsafe 600ms ease 3600ms forwards;
}
.intro.is-out { opacity: 0; }
@keyframes intro-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Centered logo stack — both PNGs are 1920×1080 and overlay exactly */
.intro-logo {
  position: relative;
  width: min(620px, 76vw);
  aspect-ratio: 16 / 9;                   /* reserve space before images decode */
}
.intro-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* ── Stage 2: JAMISON fades + subtly scales in (≈400ms, ease-out) ─────────── */
.intro-jamison {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.intro.is-in .intro-jamison {
  opacity: 1;
  transform: none;
}

/* ── Film grain over JAMISON — masked to the text shape, multiply, low opacity ── */
.intro-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  /* Clip the grain to the JAMISON letterforms via the PNG's alpha */
  -webkit-mask-image: url("../images/Logo_Jamison_2026.png");
          mask-image: url("../images/Logo_Jamison_2026.png");
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  mix-blend-mode: multiply;        /* dark speckles darken the white text → grainy */
  opacity: 0.22;
}

/* ── Stage 3: McDivitt ink wipe, left→right, feathered edge (≈1.3s, ease-out) ── */
.intro-mcdivitt {
  /* Soft-edged mask: opaque (revealed) on the left, feathering to transparent.
     The mask is 2× wide and slid from right (hidden) to left (shown). */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 44%, transparent 60%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 44%, transparent 60%, transparent 100%);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-size: 200% 100%;    mask-size: 200% 100%;
  -webkit-mask-position: 100% 0;   mask-position: 100% 0;   /* start fully hidden */
  transition: -webkit-mask-position 1.3s var(--ease-out),
                      mask-position 1.3s var(--ease-out);
}
.intro.is-writing .intro-mcdivitt {
  -webkit-mask-position: 0% 0;
          mask-position: 0% 0;     /* end fully revealed */
}

/* ── Reduced motion: fade the whole logo in/out, no scale, no wipe ────────── */
@media (prefers-reduced-motion: reduce) {
  .intro-jamison {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .intro-mcdivitt {
    -webkit-mask-image: none;
            mask-image: none;
    transition: none;
  }
  .intro-logo {
    opacity: 0;
    transition: opacity 400ms ease;
  }
  .intro.is-in .intro-logo { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAV LOGO + "GET IN TOUCH" BUTTON HOVER  (Emil Kowalski: snappy, ease-out,
   < 250ms, not bouncy)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Logo: now the home link — signal it's clickable on hover ─────────────── */
.navbar-logo a {
  display: inline-block;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  will-change: transform;
}
.navbar-logo a:hover {
  opacity: 0.72;
  transform: scale(1.06);
}
.navbar-logo a:active {
  transform: scale(1.02);
}

/* ── Orange "Get in Touch" primary button: subtle lift + warm glow ────────── */
.button.primary {
  /* Override the original 0.3s bg-only transition with a tighter, multi-prop one */
  transition: transform 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out),
              background-color 200ms var(--ease-out);
  will-change: transform;
}
.button.primary:hover {
  transform: scale(1.025);
  background-color: #ff8c3d;                       /* --color-accent, a touch brighter */
  box-shadow: 0 4px 22px rgba(255, 126, 38, 0.38); /* soft orange glow */
}
.button.primary:active {
  transform: scale(0.99);                          /* slight press-down feedback */
}

/* ── Respect reduced motion: keep the colour/opacity cues, drop the movement ── */
@media (prefers-reduced-motion: reduce) {
  .navbar-logo a {
    transition: opacity 200ms ease;
  }
  .navbar-logo a:hover,
  .navbar-logo a:active {
    transform: none;
  }
  .button.primary {
    transition: background-color 200ms ease;
  }
  .button.primary:hover {
    transform: none;
    box-shadow: none;
  }
  .button.primary:active {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE — editorial redesign
   Headline (solid + outlined) · orange accent line · photo (stacked frame) +
   bio · signature sign-off · Work With Me button. Reveals driven by js/about.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Headline block ───────────────────────────────────────────────────────── */
.ab-head {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* Thin orange accent line, grows from the left edge */
.ab-accent-line {
  width: clamp(48px, 9vw, 110px);
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.ab-head.is-in .ab-accent-line {
  transform: scaleX(1);
  transition: transform 300ms var(--ease-out);
}

.ab-title {
  font-family: "Clash Display", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 8.5vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin: 0;
  color: #fff;
}
.ab-title-solid,
.ab-title-outline {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
}
.ab-title-solid { color: #fff; }              /* MEET — solid fill */
.ab-title-outline {                            /* JAMISON — fine, elegant outline */
  color: transparent;
  font-weight: 500;                            /* real Medium, not synthesized faux-bold */
  -webkit-text-stroke: 1px #fff;
          text-stroke: 1px #fff;
}
.ab-head.is-in .ab-title-solid {
  opacity: 1; transform: none;
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.ab-head.is-in .ab-title-outline {             /* draws in slightly after the solid word */
  opacity: 1; transform: none;
  transition: opacity 300ms var(--ease-out) 150ms, transform 300ms var(--ease-out) 150ms;
}

.ab-subhead {
  font-family: "Clash Display", sans-serif;
  font-size: clamp(0.7rem, 1.1vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  opacity: 0;
  transform: translateY(8px);
}
.ab-head.is-in .ab-subhead {
  opacity: 1; transform: none;
  transition: opacity 280ms var(--ease-out) 220ms, transform 280ms var(--ease-out) 220ms;
}

/* ── Two-column grid: photo left, bio right ───────────────────────────────── */
.ab-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 767px) {
  .ab-grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* Photo with offset orange "stacked frame" behind it */
.ab-photo-wrap {
  position: relative;
  opacity: 0;
  transform: translateY(24px) scale(0.97);
}
.ab-photo-wrap.is-in {
  opacity: 1; transform: none;
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.ab-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
.ab-photo-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 2px solid var(--color-accent);
  transform: translate(18px, 18px);   /* peeks out bottom-right like a stacked frame */
  pointer-events: none;
}
@media (max-width: 479px) {
  .ab-photo-frame { transform: translate(12px, 12px); }
}

/* ── Bio column ───────────────────────────────────────────────────────────── */
.ab-bio {
  max-width: 38rem;
}
.ab-bio-p {
  font-family: "Clash Display", sans-serif;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 1.4rem;
  opacity: 0;
  transform: translateY(18px);
}
.ab-bio.is-in .ab-bio-p {
  opacity: 1; transform: none;
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.ab-bio.is-in .ab-bio-p:nth-of-type(2) { transition-delay: 90ms; }
.ab-bio.is-in .ab-bio-p:nth-of-type(3) { transition-delay: 180ms; }

/* Signature sign-off — desaturated to muted white so it doesn't fight the
   orange CTA right below it */
.ab-signature {
  display: block;
  width: clamp(180px, 24vw, 210px);
  height: auto;
  margin: 2.25rem 0 0;
  filter: brightness(0) invert(1);     /* orange cursive → clean white */
  opacity: 0;
  transform: translateY(18px);
}
.ab-bio.is-in .ab-signature {
  opacity: 0.65;                       /* muted, quiet sign-off */
  transform: none;
  transition: opacity 300ms var(--ease-out) 320ms, transform 300ms var(--ease-out) 320ms;
}

.ab-cta-wrap {
  margin-top: 2rem;
  opacity: 0;
  transform: translateY(18px);
}
.ab-bio.is-in .ab-cta-wrap {
  opacity: 1; transform: none;
  transition: opacity 280ms var(--ease-out) 410ms, transform 280ms var(--ease-out) 410ms;
}
/* The .ab-cta button itself inherits the shared .button.primary hover (scale + glow) */

/* ── Reduced motion: show everything, no movement ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ab-accent-line { transform: none; }
  .ab-title-solid,
  .ab-title-outline,
  .ab-subhead,
  .ab-photo-wrap,
  .ab-bio-p,
  .ab-cta-wrap {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ab-signature { opacity: 0.65; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MINIMAL FOOTER (site-wide) — logo + social icons only
   ═══════════════════════════════════════════════════════════════════════════ */
.footer--minimal { background-color: var(--color-bg); }

.footer-minimal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-minimal-logo-link {
  display: inline-block;
  transition: opacity 0.2s ease;
}
.footer-minimal-logo-link:hover { opacity: 0.7; }
.footer-minimal-logo {
  height: 34px;
  width: auto;
  display: block;
}
.footer-minimal-socials {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease;
}
.footer-social:hover { color: #fff; }

@media screen and (max-width: 479px) {
  .footer-minimal { justify-content: center; }
  .footer-minimal-logo { height: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — continuous black from the hero/visuals down through the logos to
   the CTA ribbon (kill the hard section seam; pull the logos up closer).
   NOTE: .section-cta-contact is intentionally NOT forced black here — it stays
   transparent so its .background-blur (warm orange glow) shows through below the
   "Let's work together" ribbon. The ribbon is the divider: black above, orange
   gradient below.
   ═══════════════════════════════════════════════════════════════════════════ */
.section-home-hero,
.section-home-clients {
  background-color: var(--color-bg);   /* one uninterrupted black above the ribbon */
}

/* Pull the "Trusted By" logos up toward the hero — no big dead gap */
.section-home-clients {
  padding-top: 1.25rem;
}
.section-home-clients .padding-top.padding-large {
  padding-top: 0;
  padding-bottom: 1rem;
}
.logo-marquee-wrapper {
  padding-top: 0.75rem;
  padding-bottom: 2.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FULLSCREEN MOBILE MENU (mobile only — opened by the hamburger)
   Orange-glow-on-black backdrop matching the homepage contact section.
   ═══════════════════════════════════════════════════════════════════════════ */
html.menu-open,
html.menu-open body { overflow: hidden; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* black → warm orange radial glow (same brand glow as the CTA section) */
  background:
    radial-gradient(118% 82% at 50% 84%, rgba(255, 126, 38, 0.42) 0%, rgba(255, 126, 38, 0.12) 34%, transparent 64%),
    var(--color-bg);
  transition: opacity 320ms var(--ease-out), visibility 0s linear 320ms;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 320ms var(--ease-out);
}

.mobile-menu-wrapper {
  position: relative;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vh, 3.5rem);
  padding: 6rem 1.5rem 3.25rem;
}

/* Close (X) button — top right */
.mobile-menu-close {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s var(--ease-out);
}
.mobile-menu-close:hover { color: #fff; }
.mobile-menu-close:active { transform: scale(0.9); }

/* Stacked, centered, large links */
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.1rem, 3.4vh, 1.9rem);
}
.mobile-menu-nav-link { text-decoration: none; }
.mobile-menu-nav-text {
  font-family: "Clash Display", sans-serif;
  font-size: clamp(2.25rem, 12vw, 3.4rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
  color: #fff;
  transition: color 0.2s ease;
}
.mobile-menu-nav-link:active .mobile-menu-nav-text { color: var(--color-accent); }

/* Prominent GET IN TOUCH button at the bottom */
.mobile-menu-cta {
  margin-top: 0.5rem;
  font-size: 1rem;
  letter-spacing: 2px;
  padding: 1.15rem 2.75rem;
}

/* Entrance stagger (Emil): close, links, then CTA rise + fade in on open */
.mobile-menu-close,
.mobile-menu-nav-link,
.mobile-menu-cta {
  opacity: 0;
  transform: translateY(14px);
}
.mobile-menu.is-open .mobile-menu-close,
.mobile-menu.is-open .mobile-menu-nav-link,
.mobile-menu.is-open .mobile-menu-cta {
  opacity: 1;
  transform: none;
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.mobile-menu.is-open .mobile-menu-close            { transition-delay: 40ms; }
.mobile-menu.is-open .mobile-menu-nav-link:nth-child(1) { transition-delay: 90ms; }
.mobile-menu.is-open .mobile-menu-nav-link:nth-child(2) { transition-delay: 140ms; }
.mobile-menu.is-open .mobile-menu-nav-link:nth-child(3) { transition-delay: 190ms; }
.mobile-menu.is-open .mobile-menu-nav-link:nth-child(4) { transition-delay: 240ms; }
.mobile-menu.is-open .mobile-menu-cta              { transition-delay: 310ms; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: opacity 0s, visibility 0s; }
  .mobile-menu-close,
  .mobile-menu-nav-link,
  .mobile-menu-cta { opacity: 1; transform: none; transition: none; }
}

/* (2a) Phones only: drop the GET IN TOUCH button from the fullscreen menu.
   Tablet (768–991px) keeps its menu button; desktop uses the navbar button. */
@media (max-width: 767px) {
  .mobile-menu-cta { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   (3) HOMEPAGE HERO — desktop/tablet only (≥768px). Drop the bio/gradient zone
   lower so much more of the video grid shows above it, and lighten the overlay
   so the footage reads brighter behind the text. The mobile hero (≤767px) is
   deliberately NOT touched.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* Add height to the BOTTOM of the hero. The bio cluster (profile chip + bio +
     Explore + its own dark gradient) is position:absolute; bottom:0 on this
     section, so it rides down to the new bottom as one unit — pushed WAY below
     the video grid, which is left fully uncovered and bright up top. The big
     JAMISON McDIVITT headline (in normal flow at the top) and the grid don't
     move; the extra height simply shifts every section below the hero down,
     without touching any of their own margins/padding. Mobile (≤767px) is
     untouched. */
  .section-home-hero {
    padding-bottom: clamp(40rem, 58vh, 64rem);
  }

  .hero-bio-overlay {
    /* Vertical offset of the chip + tagline + Explore, INDEPENDENT of the
       gradient below. Larger = higher. Fine-tune this one value live. */
    /* ▶▶ KNOB 1 — BIO TEXT VERTICAL POSITION (gradient stays put) ◀◀
       Moves ONLY the profile chip + tagline + Explore link. The dark gradient
       behind them does NOT move. Larger = text higher, smaller = text lower. */
    --hero-cluster-rise: 11rem;
    /* ▶ COVERAGE: taller overlay = the dark backing reaches further up the
       video grid behind the intro text. Increase to cover more, reduce for less. */
    padding-top: clamp(13rem, 30vw, 22rem);
    /* Dark backing behind the chip + tagline: solid at the bottom, holding dark
       well up the grid, then fading to transparent near the top. */
    background: linear-gradient(
      to top,
      var(--color-bg) 0%,
      var(--color-bg) 14%,
      rgba(9, 9, 9, 0.93) 42%,
      rgba(9, 9, 9, 0.68) 66%,
      rgba(9, 9, 9, 0.32) 86%,
      transparent 100%
    );
  }
  /* The big video-grid fade used to cover the bottom ~58% of the grid — i.e.
     where the cluster USED to sit. With the cluster pushed way down, that dark
     band was darkening footage for no reason. Shrink it to a soft blend at the
     very bottom edge of the grid so the upper grid stays bright and uncovered;
     the dark readable backing now lives with the cluster (overlay, above). */
  .home-hero .gradient-bottom {
    height: 32%;
  }

  /* ▶▶ KNOB 2 — "TRUSTED BY" + EVERYTHING BELOW IT ◀◀
     Pulls the Trusted By section, the "Let's work together" CTA ribbon, and the
     footer up toward the hero as one block (they move together in lockstep).
     Larger = the whole bottom block sits higher / tighter under the bio.
     Value is a PLAIN NUMBER of pixels — no units. 0 = current position,
     120 = up 120px, etc. (Desktop only; mobile keeps its own spacing.) */
  .section-home-clients {
    --trusted-rise: 0;
    padding-top: 0;
    margin-top: calc(var(--trusted-rise) * -1px);
    /* Sit above the hero's bio-overlay gradient (z-index 20) so that when this
       block is pulled up it renders IN FRONT of the gradient, not behind it. */
    position: relative;
    z-index: 30;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO BIO CLUSTER — subtle one-time scroll-in reveal (chip + tagline/Explore)
   The profile chip and the tagline fade + rise gently as they enter the
   viewport, staggered. JS adds `reveal-js` to <html> (so the hidden initial
   state only applies when JS is available — no-JS keeps everything visible)
   and toggles `.reveal-in` on the overlay once, on first entry.
   Timing/easing per emil-design-eng: entrance → strong ease-out (--ease-out),
   short travel, ~0.6s to read as understated rather than flashy.
   ═══════════════════════════════════════════════════════════════════════════ */
html.reveal-js .hero-bio-overlay-identity,
html.reveal-js .hero-bio-overlay-bio {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
/* Stagger: the tagline follows the chip in slightly after */
html.reveal-js .hero-bio-overlay-bio {
  transition-delay: 90ms;
}
html.reveal-js .hero-bio-overlay.reveal-in .hero-bio-overlay-identity,
html.reveal-js .hero-bio-overlay.reveal-in .hero-bio-overlay-bio {
  opacity: 1;
  transform: none;
}
/* Reduced motion: gentle fade only, no movement, no stagger */
@media (prefers-reduced-motion: reduce) {
  html.reveal-js .hero-bio-overlay-identity,
  html.reveal-js .hero-bio-overlay-bio {
    transform: none;
    transition: opacity 300ms ease;
    transition-delay: 0ms;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO BIO CLUSTER — SCROLL-SCRUBBED cinematic reveal (desktop · all browsers)
   js/site.js sets --p (0 → 1) on the chip and tagline from the cluster's
   position in the viewport. As you scroll the cluster into frame, the text
   RISES from off the page and racks from blurred → razor-sharp (a focus pull).
   Because --p tracks scroll position, the reveal arrives gradually as you
   scroll instead of snapping in. Mobile / reduced-motion / no-JS fall back to
   the one-shot .reveal-in fade below.

   ▶ TUNE: travel distance (130px), blur amount (16px) here; the scroll WINDOW
     and stagger live in js/site.js (search "bio-scrub"). */
html.bio-scrub .hero-bio-overlay-identity,
html.bio-scrub .hero-bio-overlay-bio {
  --rise: 130px;
  --blur: 16px;
  opacity: var(--p, 1);
  transform: translateY(calc((1 - var(--p, 1)) * var(--rise)))
             scale(calc(0.98 + 0.02 * var(--p, 1)));
  filter: blur(calc((1 - var(--p, 1)) * var(--blur)));
  transition: none;            /* JS provides the smoothness, frame by frame */
  will-change: opacity, transform, filter;
}
/* Mobile: gentler travel + lighter blur so the glide stays smooth on phones. */
@media (max-width: 767px) {
  html.bio-scrub .hero-bio-overlay-identity,
  html.bio-scrub .hero-bio-overlay-bio {
    --rise: 46px;
    --blur: 5px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO BIO CLUSTER — vertical position decoupled from the gradient
   The dark gradient lives on .hero-bio-overlay and stays exactly where it is.
   This wrapper holds the chip + tagline + Explore and is shifted with a
   transform, so moving it never moves the gradient. The transform also composes
   cleanly with the scroll-reveal (those transforms are on the inner
   chip/tagline), so the reveal animation is left completely untouched.

   ▶ TUNE THE VERTICAL POSITION HERE: --hero-cluster-rise (larger = higher).
     Current desktop value: 8rem (set in the desktop media query below).
     Defaults to 0px elsewhere (mobile unaffected).
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-bio-overlay-cluster {
  display: flex;
  flex-direction: column;
  gap: inherit;          /* preserve the original chip ↔ tagline spacing */
  transform: translateY(calc(-1 * var(--hero-cluster-rise, 0px)));
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME HERO — scale up the tagline, give "Explore" its own large outlined line,
   and enlarge the Trusted-By logos to match the reference. Desktop only; mobile
   keeps its existing sizes.
   ═══════════════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 768px) {
  .hero-bio-overlay-bio {
    font-size: clamp(2.5rem, 5.2vw, 5.75rem);
    line-height: 1.05;
  }
  /* "Explore ↓" — inline at the end of the tagline (same line as "…noise.") */
  .hero-bio-overlay-explore {
    display: inline;
    font-size: inherit;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.9);
            text-stroke: 1px rgba(255, 255, 255, 0.9);
  }
  /* Trusted-By logos a touch larger to balance the bigger tagline */
  .logo-marquee-img {
    height: 108px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME SHOWREEL — large embedded reel between the tagline and "Trusted By".
   Continuous black so it reads as one surface with the hero above and the
   logos below; the 16:9 frame uses the padding-bottom intrinsic-ratio trick.
   ═══════════════════════════════════════════════════════════════════════════ */
.section-home-reel {
  background-color: var(--color-bg);
  padding: clamp(2.5rem, 6vw, 6rem) 0 clamp(1.5rem, 3vw, 3rem);
  /* Layer the reel ABOVE the hero bio-overlay gradient (z 20) and the Trusted-By
     section (z 30) so those black backgrounds never crop/cover the video. */
  position: relative;
  z-index: 40;
}
.home-reel-wrap {
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
  /* ▶▶ KNOB — REEL VERTICAL POSITION ◀◀
     Nudge the reel up or down within its space. Negative = up (toward the
     tagline), positive = down (toward "Trusted By"). 0px = current. */
  --reel-shift: 0px;
  transform: translateY(var(--reel-shift));
}
.home-reel-frame {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%;             /* 2:1 — matches the 3840x1920 reel, no bars */
  overflow: hidden;
  background: #000;
  border-radius: 6px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}
.home-reel-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Reel scroll-SCRUB — js/site.js sets --reel-p (0 → 1) from the reel's position
   so the video glides into place as you scroll, rather than snapping in.
   Scoped to html.reveal-js so it stays visible with no JS. */
html.reveal-js .home-reel-frame {
  opacity: var(--reel-p, 1);
  transform: translateY(calc((1 - var(--reel-p, 1)) * 40px));
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  html.reveal-js .home-reel-frame { opacity: 1; transform: none; }
}
@media screen and (max-width: 767px) {
  .home-reel-wrap { width: 92%; }
  .home-reel-frame { border-radius: 4px; }
}

/* Desktop: tuck the reel up tight under the description (~30px gap) with a small
   matching gap below to "Trusted By". The negative margin pulls the whole block
   (reel + Trusted By) up into the hero's empty bottom space; the reel sits above
   the hero gradient (z-index 40) so nothing is covered.
   ▶ TUNE: more-negative margin-top = closer to the description. */
@media screen and (min-width: 768px) {
  .section-home-reel {
    margin-top: -100px;
    padding-top: 0;
    padding-bottom: 100px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   "thumb-stopping" — underline draws in on scroll (all formats). js/site.js
   adds .is-drawn when it enters view; the underline scales from left to right.
   ═══════════════════════════════════════════════════════════════════════════ */
.hl-underline {
  /* Underline as a background gradient (works across line wraps, no orphans).
     Its width tracks --ul, which js/site.js scrubs from scroll position so the
     underline draws gradually as you move down the page. */
  background-image: linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: var(--ul, 0%) 0.07em;
  padding-bottom: 0.05em;
}

/* Bio tagline: ALWAYS 3 lines. Capping the line length in ch (scales with the
   font) forces 3 lines at every width; 'pretty' keeps the last line from going
   orphan. ▶ TUNE: max-width ch (smaller = more lines). */
.hero-bio-overlay-bio {
  text-wrap: pretty;
  max-width: 24ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — tighten the chip → bio gap, lift the whole content group up, and
   raise the background video grid.
   ▶ TUNE: --home-hero-h (shorter = everything sits higher); the reel margin
     and the grid padding-top below.
   ═══════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) {
  .hero-bio-overlay { gap: 0.5rem; }            /* chip ↔ tagline closer */
  .hero-bio-overlay-bio { margin-top: 0.3rem; } /* was 1.7rem — kill the big margin */

  /* Shorten the hero so the profile chip + bio + reel + Trusted By all sit higher. */
  .home-hero {
    min-height: 82vh;
    min-height: 82svh;
  }
  /* Raise the background video grid toward the nav. */
  .home-hero-inner { padding-top: 4px; }

  /* Lift the reel + everything below a touch more. */
  .section-home-reel { margin-top: -28px; }
}