/* =====================================================================
   SHE'S A BALLER — brand design system
   Palette : Aquamarine #00FDDC · Deep Navy #020132 · Blaze Orange #FF5400
   Type    : Crake (display) · Plakkete Serial (feature) ·
             Spaceland Nine (labels) · Poppins (body) — all self-hosted
   ===================================================================== */

/* Crake — display / headlines. TrueType-flavoured woff2 (CFF was rejected by Chrome). */





/* Crake lacks some punctuation (apostrophe, & + / — : % ( ) · dashes) —
   borrow just those codepoints from Plakkete so headings never show tofu. */

/* Plakkete Serial — feature / pull-quotes */
@font-face{font-family:"Plakkete Serial";src:url("/assets/fonts/plakkete-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plakkete Serial";src:url("/assets/fonts/plakkete-bold.woff2") format("woff2");font-weight:700;font-display:swap}
/* Spaceland Nine — labels / sub-headers */
@font-face{font-family:"Spaceland Nine";src:url("/assets/fonts/spaceland-nine.woff2") format("woff2");font-weight:400 700;font-display:swap}
/* Poppins — body */
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-medium.woff2") format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --aqua:#00FDDC;
  --aqua-soft:#7FFEED;
  --aqua-tint:#EAFEFB;
  --navy:#020132;
  --navy-2:#0A0A45;
  --navy-soft:rgba(2,1,50,.60);
  /* #FF5400 is only 3.22:1 on paper — this darker cut hits 4.6:1 for small text.
     Keep --orange for fills, rules and underlines where contrast rules do not apply. */
  --orange-ink:#D14500;
  --orange:#FF5400;
  --paper:#FFFFFF;
  --paper-2:#F4FBFA;
  --line:rgba(2,1,50,.14);
  --line-soft:rgba(2,1,50,.08);
  --line-on-dark:rgba(255,255,255,.16);

  --display:"Crake","Plakkete Serial",Georgia,serif;
  --feature:"Plakkete Serial","Crake",Georgia,serif;
  --sub:"Spaceland Nine",system-ui,sans-serif;
  --body:"Poppins",system-ui,-apple-system,sans-serif;

  --gut:clamp(18px,4.5vw,64px);
  --maxw:1440px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--navy);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}

h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;line-height:.98;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
em{font-style:normal}
::selection{background:var(--aqua);color:var(--navy)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
@media(min-width:1800px){:root{--maxw:1600px}}

/* sub-header / kicker labels (Spaceland Nine) */
.meta{font-family:var(--sub);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-soft)}
.anno{font-family:var(--sub);font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.anno em{font-style:normal;color:var(--orange-ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--sub);font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:14px 26px;background:var(--navy);color:#fff;border:0;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.btn:hover{background:var(--aqua);color:var(--navy);transform:translateY(-2px)}
.btn--aqua{background:var(--aqua);color:var(--navy)}
.btn--aqua:hover{background:var(--navy);color:#fff}
/* U+2192 is absent from Poppins and Plakkete — only Spaceland has it */
.arw,.cbtn__arw,.case__cta-arw,.btn .arw{transition:transform .25s}
.btn:hover .arw{transform:translateX(4px)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* emphasis by context */
h1 em,h2 em,.pull em{background:linear-gradient(transparent 62%,var(--aqua) 62%);padding:0 .04em}

/* ---------------- NAV ---------------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;background:transparent;border-bottom:1px solid transparent;transition:background .35s ease,border-color .35s ease}
.nav.scrolled{background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
/* keyboard users otherwise tab through 9 nav stops on every page */
.skip{position:absolute;left:12px;top:-60px;z-index:3000;background:var(--navy);color:#fff;font-family:var(--sub);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:12px 18px;border-radius:0 0 12px 12px;transition:top .18s ease}
.skip:focus{top:0}
#main:focus{outline:none}
.nav__prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--aqua);transform:scaleX(0);transform-origin:0 50%;z-index:3;pointer-events:none}
.nav__in{display:flex;align-items:center;height:72px;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);gap:20px}
.brand{display:flex;align-items:center;line-height:0}
.brand img{height:42px;width:auto;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.brand:hover img{transform:scale(1.05)}
.brand__white{display:none}
.social{display:flex;align-items:center;gap:6px;margin-left:8px}
.social__btn{width:28px;height:28px;border-radius:50%;background:var(--aqua);color:var(--navy);display:grid;place-items:center;transition:background .2s,color .2s,transform .2s}
.social__btn:hover{background:var(--navy);color:var(--aqua);transform:translateY(-2px)}
.social__btn svg{display:block;transform:scale(.8)}
@media(max-width:1180px){.social{display:none}}
.nav__tagline{font-family:var(--sub);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);white-space:nowrap;margin-left:4px}
.nav__tagline em{font-style:normal;color:var(--orange)}
@media(max-width:1180px){.nav__tagline{display:none}}
.nav__links{display:flex;gap:14px;margin-left:auto;align-items:center}
.nav__pill{display:flex;align-items:center;gap:2px;padding:5px;border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.55);transition:border-color .3s,background .3s;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.nlink{display:inline-flex;align-items:baseline;gap:5px;padding:9px 16px;border-radius:100px;font-family:var(--sub);font-size:20px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);line-height:1;transition:background .2s,color .2s;white-space:nowrap}
.nlink span{display:inline}
.nlink .idx{display:none;font-size:11px;font-weight:500;color:var(--navy-soft);transition:color .2s}
.nlink:hover{background:var(--aqua);color:var(--navy)}
.nlink:hover .idx{color:var(--navy)}
.nlink.is-active{background:var(--navy);color:#fff}
.nlink.is-active .idx{color:rgba(255,255,255,.6)}
.nav .btn{font-size:15px;padding:14px 26px;border-radius:100px}
.burger{display:none;margin-left:auto;background:none;border:0;font-family:var(--sub);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--navy)}

/* over-image pages: light nav until scrolled */
.nav--over-image:not(.scrolled) .brand__navy{display:none}
.nav--over-image:not(.scrolled) .brand__white{display:block}
.nav--over-image:not(.scrolled) .nlink{color:#fff}
.nav--over-image:not(.scrolled) .nlink .idx{color:rgba(255,255,255,.7)}
.nav--over-image:not(.scrolled) .burger{color:#fff}
.nav--over-image:not(.scrolled) .nav__pill{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1)}
.nav--over-image:not(.scrolled) .nlink:hover{background:rgba(0,253,220,.28);color:#fff}
.nav--over-image:not(.scrolled) .nlink.is-active{background:#fff;color:var(--navy)}
.nav--over-image:not(.scrolled) .nlink.is-active .idx{color:var(--navy-soft)}
.nav--over-image:not(.scrolled) .nav .btn{background:var(--aqua);color:var(--navy)}
.nav--over-image:not(.scrolled) .nav__tagline{color:#fff}
.nav--over-image:not(.scrolled) .nav__tagline em{color:var(--aqua)}

@media(max-width:900px){
  /* padding and border still rendered at max-height:0, leaving a 29px strip
     under the nav on every page — collapse them too, and only show the border
     once the drawer is actually open */
  .nav__links{position:fixed;inset:72px 0 auto;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:0 solid var(--line);padding:0 var(--gut);max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease}
  .nav__links.open{max-height:80vh;padding:8px var(--gut) 20px;border-bottom-width:1px}
  .nav__pill{flex-direction:column;align-items:stretch;gap:0;border:0;border-radius:0;background:none;padding:0}
  .nlink{justify-content:space-between;padding:16px 4px;border-radius:0;border-bottom:1px solid var(--line-soft);font-size:15px}
  .nlink:hover,.nlink.is-active{background:none;color:var(--orange)}
  .nlink.is-active .idx,.nlink:hover .idx{color:var(--orange)}
  .nav__links .btn{margin-top:16px;justify-content:center}
  .burger{display:block}
  /* mobile dropdown is solid white — keep links navy even over image */
  .nav--over-image:not(.scrolled) .nav__links{background:var(--paper)}
  .nav--over-image:not(.scrolled) .nav__links .nlink{color:var(--navy)}
  .nav--over-image:not(.scrolled) .nav__links .nlink:hover,.nav--over-image:not(.scrolled) .nav__links .nlink.is-active{color:var(--orange);background:none}
  .nav--over-image:not(.scrolled) .nav__links .btn{background:var(--navy);color:#fff}
}

/* ---------------- HERO (aquamarine signature) ---------------- */
.hero{padding:130px 0 96px;position:relative;background:radial-gradient(120% 120% at 78% 8%,var(--aqua-soft) 0%,var(--aqua) 46%,#00E7C8 100%);color:var(--navy);overflow:hidden}
.hero::after{content:"";position:absolute;top:-30%;right:-8%;width:60%;height:150%;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);transform:rotate(18deg);pointer-events:none}
.hero__top{display:flex;justify-content:flex-end;align-items:flex-end;gap:20px;padding-bottom:20px;position:relative;z-index:1}
.hero h1{font-size:clamp(48px,9vw,150px);letter-spacing:-.02em;font-weight:600;position:relative;z-index:1}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln > span{display:block;transform:translateY(105%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.hero.ready h1 .ln > span{transform:translateY(0)}
.hero h1 em{background:none;padding:0;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:.07em;text-underline-offset:.08em}
.hero__sub{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-top:34px;padding-top:26px;border-top:1px solid rgba(2,1,50,.2);position:relative;z-index:1}
.hero__sub p{max-width:48ch;font-size:clamp(16px,1.6vw,20px);color:var(--navy);margin:0;font-weight:500}
.hero__media{margin-top:44px;aspect-ratio:16/7;overflow:hidden;background:rgba(2,1,50,.06);position:relative;border:1px solid rgba(2,1,50,.16);z-index:1}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px}
@media(max-width:900px){.hero{padding:104px 0 64px}.hero__media{aspect-ratio:4/5}.hero__sub{grid-template-columns:1fr}}

/* ---------------- STATS ---------------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--navy);border-bottom:2px solid var(--navy)}
.stat{padding:32px 0 36px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(46px,7vw,104px);line-height:.86;letter-spacing:-.02em}
.stat .meta{margin-top:12px}
@media(max-width:640px){.stats{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid var(--line);padding:22px 0}.stat:last-child{border-bottom:0}}

/* ---------------- SECTION SCAFFOLD ---------------- */
.sec{padding:112px 0;position:relative}
/* section padding lifted out of inline styles so mobile can scale it;
   desktop values are byte-identical to what was inline before */
.p-128-104{padding-top:128px;padding-bottom:104px}
.p-128-0{padding-top:128px;padding-bottom:0}
.p-56-x{padding-top:56px}
.p-128-48{padding-top:128px;padding-bottom:48px}
.p-88-72{padding-top:88px;padding-bottom:72px}
.p-84-84{padding-top:84px;padding-bottom:84px}
.p-84-78{padding-top:84px;padding-bottom:78px}
.p-78-92{padding-top:78px;padding-bottom:92px}
.p-76-76{padding-top:76px;padding-bottom:76px}
.p-72-72{padding-top:72px;padding-bottom:72px}
.p-64-60{padding-top:64px;padding-bottom:60px}
.p-44-52{padding-top:44px;padding-bottom:52px}
@media(max-width:640px){
  .p-128-104{padding-top:79px;padding-bottom:64px}
  .p-128-0{padding-top:70px;padding-bottom:0}
  .p-56-x{padding-top:36px}
  .p-128-48{padding-top:79px;padding-bottom:34px}
  .p-88-72{padding-top:55px;padding-bottom:45px}
  .p-84-84{padding-top:52px;padding-bottom:52px}
  .p-84-78{padding-top:52px;padding-bottom:48px}
  .p-78-92{padding-top:48px;padding-bottom:57px}
  .p-76-76{padding-top:47px;padding-bottom:47px}
  .p-72-72{padding-top:45px;padding-bottom:45px}
  .p-64-60{padding-top:40px;padding-bottom:37px}
  .p-44-52{padding-top:34px;padding-bottom:34px}
}
.sec--tint{background:var(--paper-2)}
.sec--ink{background:var(--navy);color:#fff}
.sec--ink .meta{color:rgba(255,255,255,.6)}
.sec--ink .anno{color:#fff}
.sec--ink .anno em{color:var(--aqua)}
.sec--ink .btn{background:var(--aqua);color:var(--navy)}
.sec--ink .btn:hover{background:#fff}
.sec--ink h2 em,.sec--ink .pull em{background:none;color:var(--aqua)}
.sec--aqua{background:var(--aqua);color:var(--navy)}
.sec--aqua .meta{color:rgba(2,1,50,.6)}
.sec--aqua .anno em{color:var(--navy)}
.sec--aqua h2 em,.sec--aqua .pull em{background:none;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:.06em;text-underline-offset:.08em}
/* unused since section labels were removed — kept for easy reinstatement */
.sec__label{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:22px;margin-bottom:46px;border-top:2px solid currentColor}
.sec__head{font-size:clamp(34px,5.2vw,80px);max-width:17ch;letter-spacing:-.01em;font-weight:600;margin-bottom:26px}
.sec__intro{max-width:54ch;font-size:clamp(16px,1.5vw,19px);color:var(--navy-soft)}
.sec--ink .sec__intro{color:rgba(255,255,255,.72)}
@media(max-width:900px){.sec{padding:76px 0}}

/* ---------------- CAPABILITIES ---------------- */
.caps{border-top:1px solid var(--line)}
.cap{display:grid;grid-template-columns:64px 1fr 1.4fr;gap:26px;padding:34px 0;border-bottom:1px solid var(--line);align-items:start;transition:transform .45s cubic-bezier(.16,1,.3,1)}
/* .rv.in{transform:none} ties on specificity and sits later — needs the extra class */
.caps .cap:hover{transform:translateX(8px)}
.cap h3{transition:color .28s ease}
.sec--ink .cap:hover h3{color:var(--aqua)}
.cap:hover .cap__no{color:var(--orange)}
.cap__no{font-family:var(--sub);font-size:15px;font-weight:600;color:var(--orange)}
/* condensed capability row — home links through to the full version on Partnerships */
.caplist{list-style:none;margin:34px 0 0;padding:28px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);border-top:1px solid var(--line)}
.caplist__no{display:block;font-family:var(--sub);font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--orange-ink);margin-bottom:10px}
.caplist__name{display:block;font-family:var(--display);font-weight:600;font-size:clamp(19px,1.6vw,23px);line-height:1.05;margin-bottom:8px}
.caplist__line{display:block;font-size:14px;line-height:1.5;color:var(--navy-soft)}
a.caplist__name{transition:color .18s}
a.caplist__name:hover{color:var(--orange)}
.caplist + .btn{margin-top:34px}
@media(max-width:820px){.caplist{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.caplist{grid-template-columns:1fr;gap:26px}}
.cap h3{font-size:clamp(24px,3vw,40px);font-weight:600;letter-spacing:-.01em}
.cap p{margin:0;color:var(--navy-soft);font-size:15.5px;max-width:44ch}
.sec--ink .caps{border-top-color:var(--line-on-dark)}
.sec--ink .cap{border-color:var(--line-on-dark)}
.sec--ink .cap p{color:rgba(255,255,255,.72)}
.sec--ink .cap__no{color:var(--aqua)}
@media(max-width:820px){.cap{grid-template-columns:1fr;gap:12px;padding:26px 0}.cap__no{margin-bottom:4px}}

/* .tag is all that survives here — the IG/work tile grid it sat among was
   removed with the Instagram section */
.tag{font-family:var(--sub);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border:1px solid var(--aqua);color:var(--aqua);border-radius:100px}

/* ---------------- MARQUEE ---------------- */
.belt{background:var(--aqua);color:var(--navy);padding:10px 0;overflow:hidden;white-space:nowrap}
.belt__t{display:inline-flex;gap:40px;align-items:center;animation:belt 32s linear infinite}
.belt__t span{font-family:var(--sub);font-weight:600;font-size:clamp(24px,3.2vw,42px);line-height:1.2;text-transform:uppercase;letter-spacing:.02em}
.belt__t .dot{color:var(--navy)}
@keyframes belt{to{transform:translateX(-50%)}}

/* ---------------- PULLQUOTE ---------------- */
.pull{font-family:var(--display);font-weight:500;font-size:clamp(27px,4.2vw,63px);line-height:1.06;letter-spacing:0;text-transform:uppercase;max-width:none}

/* ---------------- INSIGHTS / REPORT ---------------- */
.report{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,4vw,56px);align-items:start}
.report__cover{aspect-ratio:16/9;background:linear-gradient(150deg,var(--aqua-soft),var(--aqua));border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 36px 74px -38px rgba(2,1,50,.55);position:sticky;top:104px}
.report__cover img{width:100%;height:100%;object-fit:cover}
.report__cover .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--navy)}
/* the report card is the primary conversion surface on Insights — given the same
   weight as the contact page's orange card rather than a bordered light box */
.rcard{background:var(--navy);color:#fff;border:0;border-radius:22px;padding:clamp(20px,2.2vw,28px);box-shadow:0 30px 60px -34px rgba(2,1,50,.5)}
.rcard .sec__intro{color:rgba(255,255,255,.74)}
.rcard .cfield input{color:#fff;border-bottom-color:rgba(255,255,255,.3)}
.rcard .cfield input:focus{border-bottom-color:var(--aqua)}
.rcard .cfield input:focus-visible{outline-color:var(--aqua)}
.rcard .cfield label{color:rgba(255,255,255,.72)}
.rcard .cfield input:focus + label,.rcard .cfield input:not(:placeholder-shown) + label{color:var(--aqua)}
.rcard .ichk{color:rgba(255,255,255,.78)}
.rcard .ichk input{accent-color:var(--aqua)}
.rcard .ismall{color:rgba(255,255,255,.55)}
/* base .cbtn is navy on navy — would vanish, same trap as .cbtn--aqua hit before */
.rcard .cbtn{background:var(--aqua);color:var(--navy)}
.rcard .cbtn .cbtn__arw{background:var(--navy);color:var(--aqua)}
.rcard .cbtn:hover{background:#fff;color:var(--navy)}
.rcard .msg{color:rgba(255,255,255,.8)}
.rcard .sec__head{font-size:clamp(22px,2.1vw,29px);line-height:.98;margin-bottom:8px;max-width:24ch}
.rcard .sec__intro{font-size:13.5px;line-height:1.45;margin-bottom:.5em;max-width:64ch}
.rform{display:flex;flex-direction:column;gap:8px;margin-top:12px}
/* report form runs tighter than the contact form so the block fits one screen */
.rform .cfield input{padding:8px 0 4px;font-size:15px}
.rform .cfield label{top:8px;font-size:15px}
.rform .cbtn{font-size:14px;padding:8px 12px 8px 24px}
.rform .cbtn__arw{width:28px;height:28px;font-size:14px}
.ichk{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--navy-soft);cursor:pointer;line-height:1.5}
.ichk input{margin-top:2px;accent-color:var(--orange);width:16px;height:16px;flex:none}
.ismall{font-size:12px;color:var(--navy-soft)}
.nl{display:grid;grid-template-columns:.85fr 1.15fr;column-gap:clamp(28px,3.6vw,56px);row-gap:12px;align-items:start}
/* button sits under the title on desktop; on mobile the copy comes first so the
   CTA doesn't land before the thing it's asking you to subscribe to */
.nl__head{grid-column:1;grid-row:1}
.nl__head h2{margin-bottom:0}
.nl__copy{grid-column:2;grid-row:1/span 2}
.nl__cta{grid-column:1;grid-row:2}
@media(max-width:860px){.nl{grid-template-columns:1fr;row-gap:22px}
  .nl__head{grid-row:1}.nl__copy{grid-column:1;grid-row:2}.nl__cta{grid-column:1;grid-row:3}}
@media(max-width:940px){.report{grid-template-columns:1fr;gap:28px}.report__cover{position:static;max-width:none}}

/* newsletter feed */
.letters{border-top:1px solid var(--line);margin-top:clamp(20px,2vw,30px);padding-top:14px}
.letters .anno{margin:0}
.letters__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.7vw,22px);margin-top:12px}
@media(max-width:900px){.letters__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.letters__grid{grid-template-columns:1fr 1fr;gap:14px}}
@media(max-width:400px){.letters__grid{grid-template-columns:1fr}}
.letter{display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);transition:padding .22s}
.letter:hover{padding-left:12px;color:var(--orange)}
.letter h4{margin:0;font-family:var(--body);font-weight:600;font-size:16px}
.letter time{font-family:var(--sub);font-size:13px;color:var(--navy-soft);white-space:nowrap}
/* newsletter issue cards with square cover image */
.issue{display:flex;flex-direction:column;gap:0;text-decoration:none;color:inherit}
.issue:hover .issue__title{color:var(--orange-ink)}
.issue__img{width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--aqua-tint);display:block}
.issue__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.issue:hover .issue__img img{transform:scale(1.05)}
.issue__body{display:flex;flex-direction:column;gap:5px;min-width:0;padding:12px 2px 0}
.issue__title{font-family:var(--body);font-weight:600;font-size:clamp(17px,1.35vw,19px);line-height:1.28;color:var(--navy);transition:color .2s}
.issue__date{font-family:var(--sub);font-size:12px;letter-spacing:.04em;color:var(--navy-soft)}
/* single-column cards keep the wide crop; no square fallback needed now */

/* ---------------- INSTAGRAM ---------------- */
@media(max-width:900px){}

/* ---------------- TEAM ---------------- */
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.member{background:var(--paper)}
.mast{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,4vw,64px);align-items:end;padding-bottom:28px;margin-bottom:clamp(26px,3vw,44px);border-bottom:1px solid var(--line)}
.mast__title{font-family:var(--display);font-weight:400;font-size:clamp(36px,5.6vw,80px);line-height:.95;letter-spacing:-.005em;color:var(--navy);max-width:18ch;text-transform:uppercase}
/* the orange rule sits on the em when unsplit (reduced-motion) and on the inner
   word once the mask splits it — text-decoration does not reach into inline-blocks */
.mast__title em,.mast__title em .w > i{background:none;font-style:normal;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:.06em;text-underline-offset:.08em}
.sec--ink .mast{border-bottom-color:var(--line-on-dark)}
.sec--ink .mast__title{color:#fff}
.sec--ink .mast__title em,.sec--ink .mast__title em .w > i{color:#fff}
.sec--ink .mast--note{border-top:0;padding-top:0;margin-top:0}
.sec--ink .mast--note a{color:#fff;border-bottom-color:var(--aqua)}
.sec--ink .mast--note a:hover{color:var(--aqua)}
.sec--ink .mast--note strong{color:#fff}
.sec--ink .mast__lede{color:rgba(255,255,255,.72)}
/* inline link inside a navy section — aqua reads as a link here and measures
   15.27:1, where the surrounding body copy sits at 10.28:1 */
.sec--ink a.inkline{color:var(--aqua);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;transition:opacity .2s}
.sec--ink a.inkline:hover{opacity:.75}
.mast__lede{max-width:44ch;margin:0 0 4px;font-size:clamp(15px,1.3vw,17px);line-height:1.55;color:var(--navy-soft)}
@media(max-width:900px){.mast{grid-template-columns:1fr;align-items:start;gap:20px}}
.member__ph{aspect-ratio:4/5;background:var(--aqua-tint);position:relative;overflow:hidden;filter:none;transition:filter .45s ease}
.member:hover .member__ph{filter:grayscale(1) contrast(1.02)}
.member__ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.member:hover .member__ph img{transform:scale(1.05)}
.mast--note{padding-top:32px;margin-top:clamp(30px,3.5vw,52px);border-top:1px solid var(--line);padding-bottom:0;margin-bottom:0;border-bottom:0}
.mast__title--sm{font-size:clamp(30px,4.4vw,62px)}
.mast--note a{color:var(--navy);border-bottom:1px solid var(--orange);transition:color .2s}
.mast--note a:hover{color:var(--orange)}
.mast--note strong{font-weight:600;color:var(--navy)}

.member__ph .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--navy-soft);font-family:var(--sub);font-size:12px;letter-spacing:.08em}
.member__meta{padding:14px 15px 19px}
.member__meta h3{font-size:21px;font-weight:600;letter-spacing:-.01em}
.member__meta .role{font-family:var(--sub);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink);margin-top:6px;display:block}
@media(max-width:1280px){.team{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1024px){.team{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.team{grid-template-columns:1fr 1fr}}
/* 2-up rather than 1-up on phones — a single column made the page 8 screens long */
@media(max-width:520px){.team{grid-template-columns:1fr 1fr}}
@media(max-width:360px){.team{grid-template-columns:1fr}}

/* ---------------- FORMS ---------------- */
.form{display:grid;gap:13px;max-width:640px}
.form__two{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form input,.form select,.form textarea{width:100%;padding:15px 16px;background:var(--paper-2);border:1px solid var(--line);color:var(--navy);font-family:var(--body);font-size:15px;border-radius:0}
.form textarea{min-height:130px;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:var(--navy-soft)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--navy);background:#fff}
.form select{appearance:none;color:var(--navy-soft)}
.form label.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--navy-soft)}
.form label.chk input{width:auto;margin-top:3px;accent-color:var(--navy)}
.form small{font-family:var(--sub);font-size:12px;font-weight:400;letter-spacing:.02em;color:var(--navy-soft);line-height:1.7;text-transform:none}
.hp{position:absolute;left:-9999px}
.msg{font-family:var(--sub);font-size:14px;padding:10px 0;letter-spacing:.04em}
.msg.ok{color:var(--navy)}
.msg.bad{color:var(--orange)}
@media(max-width:560px){.form__two{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:64px}
/* was an inline style, which meant mobile could never collapse it — three 100px
   columns on a phone put one word per line */
.split--three{margin-top:60px;grid-template-columns:repeat(3,1fr);gap:40px}
@media(max-width:760px){.split--three{grid-template-columns:1fr;gap:30px;margin-top:38px}}
/* gives the three mission columns an entry point — 684px of body copy had no
   hierarchy or scan-ability of any kind */
.storycol{border-top:1px solid var(--line);padding-top:16px}
.storycol__lab{display:block;font-family:var(--sub);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:14px}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:40px}}
address{font-style:normal;line-height:2;color:var(--navy-soft)}
address b{color:var(--navy)}

/* ---------------- FOOTER ---------------- */
.foot{background:var(--navy);color:#fff;padding:56px 0 32px;position:relative;overflow:hidden;isolation:isolate}
.foot > .wrap{position:relative;z-index:1}
/* drifting brand blooms — radial gradients rather than a blur filter, so nothing
   re-rasterises per frame, and transform keeps it on the compositor */
.foot__glow{position:absolute;inset:-30% -12%;z-index:0;pointer-events:none}
.foot__glow i{position:absolute;display:block;border-radius:50%;will-change:transform}
.foot__glow i:nth-child(1){width:62%;aspect-ratio:1;left:-6%;top:-24%;background:radial-gradient(circle,rgba(0,253,220,.30),rgba(0,253,220,0) 68%);animation:glowA 31s ease-in-out infinite alternate}
.foot__glow i:nth-child(2){width:54%;aspect-ratio:1;right:-4%;top:-16%;background:radial-gradient(circle,rgba(255,84,0,.26),rgba(255,84,0,0) 66%);animation:glowB 24s ease-in-out infinite alternate}
.foot__glow i:nth-child(3){width:70%;aspect-ratio:1;left:26%;bottom:-40%;background:radial-gradient(circle,rgba(0,253,220,.20),rgba(0,253,220,0) 70%);animation:glowC 38s ease-in-out infinite alternate}
@keyframes glowA{from{transform:translate3d(0,0,0)}to{transform:translate3d(22%,16%,0)}}
@keyframes glowB{from{transform:translate3d(0,0,0)}to{transform:translate3d(-26%,22%,0)}}
@keyframes glowC{from{transform:translate3d(0,0,0)}to{transform:translate3d(-18%,-14%,0)}}
.foot__cols{display:grid;grid-template-columns:1.85fr 1fr .82fr 1fr;gap:clamp(24px,3vw,44px)}
.foot__socials{display:flex;gap:7px;margin-bottom:14px}
.foot .social__btn{width:30px;height:30px}
.foot h5{font-family:var(--sub);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 12px;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a{font-size:14px;color:#fff;transition:color .16s}
.foot a:hover{color:var(--aqua)}
.foot__brand{display:inline-flex;align-items:center;gap:13px;margin-bottom:8px}
.foot__brand img{height:30px;width:auto;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.foot__brand:hover img{transform:scale(1.05)}
/* .foot a sets colour and font-size, so this needs the extra specificity to win —
   same trap the .cbtn modifiers hit */
.foot a.foot__sub{display:inline-flex;align-items:center;gap:7px;margin-top:0;padding:7px 14px;border:1px solid var(--aqua);border-radius:100px;font-family:var(--sub);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--aqua);white-space:nowrap;transition:background .2s,color .2s}
.foot a.foot__sub:hover{background:var(--aqua);color:var(--navy)}
/* award logos: supplied as reversed (white) marks, so they sit on the navy
   without any treatment. Heights are matched optically rather than by box,
   because the three lockups have very different ratios (2.5 / 7.0 / 3.4). */
.foot__awards{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:7px}
.foot__awards-lab{font-family:var(--sub);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap}
.foot__awards-row{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.foot__awards-row img{width:auto;opacity:1}
.foot__awards-row img:nth-child(1){height:35px}
.foot__awards-row img:nth-child(2){height:22px}
.foot__awards-row img:nth-child(3){height:29px}
@media(max-width:1180px){
  /* narrow columns can't hold the three lockups side by side at full size */
  .foot__awards{display:block;margin-top:10px}
  .foot__awards-lab{display:block;margin-bottom:6px}
  .foot__awards-row{gap:11px}
  .foot__awards-row img:nth-child(1){height:24px}
  .foot__awards-row img:nth-child(2){height:16px}
  .foot__awards-row img:nth-child(3){height:20px}
}

/* 600 is the heaviest Crake weight shipped — the bold cut was removed earlier
   as unused. Restore crake-v2-bold.woff2 if a true bold is wanted. */
.foot__wordmark{font-family:var(--display);font-weight:600;font-size:25px;line-height:1;letter-spacing:.005em;text-transform:uppercase;color:#fff;white-space:nowrap}
.foot__cookies-reset{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
.foot__base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:37px;padding-top:15px;border-top:1px solid var(--line-on-dark);font-family:var(--sub);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
@media(max-width:820px){.foot__cols{grid-template-columns:1fr 1fr}}
/* stays 2-up on phones; a single column made the footer 820px tall */
@media(max-width:480px){.foot__cols{grid-template-columns:1fr 1fr;gap:26px 20px}
  .foot__wordmark{font-size:clamp(12px,3.9vw,19px)}
  .foot__brand{gap:7px;flex-wrap:wrap}
  /* brand column keeps its half-width slot; the award row is sized to fit it */
  .foot h5{font-size:11px;margin-bottom:9px}
  .foot ul{gap:5px}
  .foot a{font-size:13.5px}}

/* ---------------- REVEAL ---------------- */
/* Reveals are opt-IN: content is visible by default and only hidden once JS has
   confirmed it can run and set .js-rv on <html>. Previously .rv was hidden by
   default, so any script error left Partnerships and Team blank. */
.rv{transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js-rv .rv{opacity:0;transform:translateY(24px)}
.js-rv .rv.in,.rv.in{opacity:1;transform:none}
/* variant: media settles out of a slight zoom instead of sliding (no clip-path —
   it would crop the drop-shadows on the cover and case cards) */
.rv[data-rv="zoom"]{transform:none;scale:1.05;transition:opacity 1s cubic-bezier(.16,1,.3,1),scale 1.25s cubic-bezier(.16,1,.3,1)}
.rv[data-rv="zoom"].in{scale:1}
/* variant: opacity only */
.rv[data-rv="fade"]{transform:none}
/* masked display type — same gesture as the hero, applied per line */
.msk .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.20em .18em .34em;margin:-.20em -.18em -.34em}
.msk .w > i{display:inline-block;font-style:inherit;transition:transform .95s cubic-bezier(.16,1,.3,1)}
.js-rv .msk .w > i{transform:translateY(118%)}
.js-rv .msk.in .w > i,.msk.in .w > i{transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .rv[data-rv="zoom"]{scale:1}
  .hero h1 .ln > span{transform:none}
  .msk .w > i{transform:none}
  .brand:hover img,.foot__brand:hover img{transform:none}
  .feats{scroll-behavior:auto}
  .foot__glow i{animation:none!important}
  .feat:hover .feat__media,.feat:hover .feat__media img,.feat:hover .feat__play svg{transform:none!important}
  .case:hover .case__media,.case:hover .case__media img,.caps .cap:hover,.member:hover .member__ph img{transform:none!important}
  .skel::after{animation:none}
  .hero__bg{scale:1;translate:none}

}

/* ---------------- PARTNER TICKER ---------------- */
.ticker{background:var(--aqua);padding:10px 0}
.ticker__lead{text-align:center;margin:0 auto 14px;font-family:var(--display);font-weight:700;font-size:clamp(13px,1.4vw,18px);letter-spacing:0;text-transform:uppercase;line-height:1;color:var(--navy);white-space:nowrap}
.ticker__lead em{color:var(--orange);font-style:normal}
.ticker__lead em{color:var(--orange);font-style:normal}
.ticker__mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker__row{display:inline-flex;gap:8px;white-space:nowrap;animation:belt 19s linear infinite;will-change:transform}
.ticker:hover .ticker__row{animation-play-state:paused}
.ticker__card{display:inline-flex;align-items:center;justify-content:center;min-width:115px;height:50px;padding:0 24px;border-radius:100px;background:#fff;box-shadow:0 7px 17px -8px rgba(2,1,50,.28)}
.ticker__card img{max-height:24px;max-width:90px;object-fit:contain}
.ticker__card span{font-family:var(--sub);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--navy)}
.ticker__card:has(img) span{display:none}
@media(max-width:640px){.ticker{padding:8px 0}.ticker__lead{white-space:normal;max-width:26ch;line-height:1.5}.ticker__card{min-width:84px;height:36px;padding:0 17px}}

/* Big statements in Crake Regular — the high-contrast display cut reads best at 400 */
.hero h1,.pull{font-weight:400}

/* anchor targets clear the fixed nav */
section[id]{scroll-margin-top:88px}

/* ---------------- CASE CARDS (CC-style work grid, 3-up) ---------------- */
.cases{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.case{display:flex;flex-direction:column}
.case__media{position:relative;display:block;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);text-decoration:none;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}
.case__media img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;transition:transform .75s cubic-bezier(.16,1,.3,1)}
.case__hover{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(2,1,50,.25),rgba(2,1,50,.94));color:#fff;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;opacity:0;transition:opacity .35s ease}
.case:hover .case__hover,.case__media:focus-visible .case__hover{opacity:1}
.case:hover .case__media{transform:scale(1.02);box-shadow:0 24px 46px -26px rgba(2,1,50,.42)}
.case:hover .case__media img{transform:scale(1.06)}
.case:hover .case__brand{transition:color .28s ease;color:var(--orange-ink)}
.case:hover .case__meta .tag{border-color:var(--navy)}
.case__hover-desc{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.92)}
.case__figs{display:flex;gap:22px;font-family:var(--sub);font-size:12px}
.case__figs b{display:block;font-size:20px;color:var(--aqua);font-weight:600;line-height:1}
.case__figs i{font-style:normal;color:rgba(255,255,255,.6);letter-spacing:.08em;text-transform:uppercase;font-size:10px}
.case__cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--sub);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--aqua)}
.case__meta .tag{transition:border-color .28s ease}
.case__meta{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 2px 0}
.case__brand{transition:color .28s ease;font-family:var(--display);font-weight:400;font-size:clamp(22px,1.9vw,32px);line-height:.95;letter-spacing:-.01em;text-transform:uppercase;color:var(--navy)}
.case__line{margin:9px 0 0;font-family:var(--sub);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--navy-soft);max-width:32ch}
.tag--light{border-color:rgba(2,1,50,.28);color:var(--navy);flex:none}
/* loading shimmer — transform-based so it stays on the compositor */
.skel{position:relative;overflow:hidden;background:var(--paper-2)}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(2,1,50,.08),transparent);transform:translateX(-100%);animation:sheen 1.5s ease-in-out infinite}
@keyframes sheen{to{transform:translateX(100%)}}
/* ---- FEATURES (YouTube facades) ---- */
.feats__head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}
.feats__nav{display:flex;gap:8px;flex:none}
.feats__arw{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--navy);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s,border-color .2s,color .2s,opacity .2s}
.feats__arw svg{width:18px;height:18px}
.feats__arw:hover:not(:disabled){background:var(--navy);border-color:var(--navy);color:#fff}
.feats__arw:disabled{opacity:.28;cursor:default}
/* horizontal gallery — card width holds the old 3-up size so nothing shrinks */
.feats{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:2px}
.feats::-webkit-scrollbar{display:none}
.feats__track{position:relative;height:2px;margin-top:14px;border-radius:2px;background:var(--line);overflow:hidden}
.feats__track span{position:absolute;left:0;top:0;height:100%;border-radius:2px;background:var(--navy);transition:transform .18s ease}
.feats:focus-visible{outline:2px solid var(--orange);outline-offset:6px}
.feat{display:flex;flex-direction:column;flex:0 0 calc((100% - 36px)/3);scroll-snap-align:start}
/* the last card snaps to the right edge — snapping it to start would put its
   snap point past max scroll, so the rail could never reach the true end */
.feat:last-child{scroll-snap-align:end}
.feat__media{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}
.feat__media img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;transition:transform .75s cubic-bezier(.16,1,.3,1)}
.feat__media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.feat__ph{position:absolute;inset:0;z-index:0;display:grid;place-items:center;text-align:center;padding:18px;color:var(--navy-soft);font-family:var(--sub);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.feat__play{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:grid;place-items:center;padding:0;border:0;cursor:pointer;background:linear-gradient(180deg,rgba(2,1,50,.08),rgba(2,1,50,.5));transition:background .3s}
.feat:hover .feat__play,.feat__play:focus-visible{background:linear-gradient(180deg,rgba(2,1,50,.2),rgba(2,1,50,.7))}
.feat__play svg{width:clamp(48px,4.4vw,62px);height:auto;transition:transform .28s ease;filter:drop-shadow(0 8px 22px rgba(2,1,50,.4))}
.feat:hover .feat__play svg,.feat__play:focus-visible svg{transform:scale(1.08)}
.feat:hover .feat__media{transform:scale(1.02);box-shadow:0 24px 46px -26px rgba(2,1,50,.42)}
.feat:hover .feat__media img{transform:scale(1.06)}
.feat:hover .feat__title{color:var(--orange-ink)}
.feat:hover .feat__meta .tag{border-color:var(--navy)}
.feat__meta{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 2px 0}
.feat__meta .tag{transition:border-color .28s ease}
.feat__title{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.5vw,25px);line-height:1.04;letter-spacing:-.01em;color:var(--navy);transition:color .28s ease}
@media(max-width:900px){.feat{flex:0 0 calc((100% - 18px)/2)}}
@media(max-width:600px){.feat{flex:0 0 calc(100% - 46px)}.feats__arw{width:40px;height:40px}}
.case__media--cta{background:var(--aqua);display:grid;place-items:center;padding:24px;border-color:var(--aqua)}
.case__cta-inner{text-align:center;color:var(--navy)}
.case__cta-eyebrow{font-family:var(--sub);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.case__cta-title{display:block;font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,46px);line-height:.98;margin:12px 0 20px}
.case__cta-arw{display:inline-grid;place-items:center;width:46px;height:46px;border:1px solid var(--navy);border-radius:100px;font-size:18px;transition:background .25s,color .25s}
.case__media--cta:hover .case__cta-arw{background:var(--navy);color:var(--aqua)}
/* minmax(0,1fr) not 1fr: grid items default to min-width:auto, and .case__meta
   is a flex row holding an unbreakable display-font brand name plus a flex:none
   tag. Its min-content width exceeded the column below 430px, stretching the
   column and pushing the whole grid off-screen. */
@media(max-width:1180px){.cases{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}.case__hover{opacity:1;background:linear-gradient(180deg,rgba(2,1,50,0) 34%,rgba(2,1,50,.94))}
  /* brand and tag side by side no longer fit in a half-width column */
  .case__meta{flex-direction:column;align-items:flex-start;gap:7px}}

/* ---------------- IMAGE HERO (full-bleed photo + overlaid title) ---------------- */
.hero--image{padding:0;background:var(--navy);color:#fff;height:100vh;overflow:hidden}
.hero--image::after{display:none}
.hero__bg{position:absolute;top:-3%;left:0;width:100%;height:106%;object-fit:cover;object-position:50% 0%;z-index:0;scale:1.02;transition:scale 9s ease-out;will-change:translate}

.hero--image.ready .hero__bg{scale:1}
.hero__scrim::after{content:"";position:absolute;inset:0;background:var(--navy);opacity:var(--deep,0);pointer-events:none}
.hero__scroll{transition:transform .25s,background .2s,opacity .3s}
/* third layer is a soft pool behind the headline only — it lifts type off a busy
   montage without dimming the photography in the rest of the frame */
.hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(2,1,50,.5),rgba(2,1,50,0) 24%),linear-gradient(0deg,rgba(2,1,50,.95),rgba(2,1,50,.05) 60%),radial-gradient(80% 55% at 22% 88%,rgba(2,1,50,.5),transparent 70%)}
.hero__inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding-top:112px;padding-bottom:clamp(48px,7vh,84px)}
.hero--image .hero__top{display:flex;justify-content:flex-end;align-items:flex-start;gap:20px}
.hero--image .hero__top .anno{color:#fff}
.hero--image .hero__top .anno em{color:var(--aqua)}
.hero--image .hero__top .meta{color:rgba(255,255,255,.72)}
.hero__bottom{max-width:64ch;opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.hero--image.ready .hero__bottom{opacity:1;transform:none}
.hero--image h1{font-family:var(--display);font-size:clamp(36px,5.6vw,82px);line-height:.98;color:#fff;font-weight:400;letter-spacing:-.01em;text-transform:uppercase;max-width:none}
@media(max-width:600px){.hero--image h1 br{display:none}}
.hero--image h1 em{background:none;padding:0;color:var(--aqua)}
.hero__lede{max-width:54ch;margin:22px 0 0;font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:#fff;font-weight:500;text-shadow:0 1px 2px rgba(2,1,50,.5),0 2px 14px rgba(2,1,50,.55)}
.hero--image h1{text-shadow:0 2px 6px rgba(2,1,50,.5),0 2px 24px rgba(2,1,50,.6)}
.hero--image .btn{margin-top:30px}
@media(max-width:900px){.hero--image{height:100svh;min-height:600px}.hero__inner{padding-top:100px;padding-bottom:52px}}

/* ---------------- CONTACT (elevated) ---------------- */
.contact{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:start}
.contact__title{font-family:var(--display);font-weight:400;font-size:clamp(40px,5vw,76px);line-height:.98;letter-spacing:-.01em;text-transform:uppercase;color:var(--navy)}
.contact__lede{margin:24px 0 40px;max-width:46ch;font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:var(--navy-soft)}
.contact__direct{padding-top:26px;border-top:1px solid var(--line);margin-bottom:30px}
.contact__direct .anno{color:var(--navy-soft);margin-bottom:8px}
.contact__email{font-family:var(--sub);font-weight:600;font-size:clamp(18px,2vw,26px);letter-spacing:.01em;color:var(--orange)}
.contact__email:hover{text-decoration:underline}
.contact__studios{display:flex;gap:48px;flex-wrap:wrap;margin-bottom:28px}
.contact__studios .anno{margin-bottom:6px}
.contact__studios address{font-style:normal;color:var(--navy-soft);line-height:1.6;font-size:14.5px}
.contact__follow .anno{margin-bottom:6px}
.contact__follow a{color:var(--navy);font-size:14px;font-family:var(--sub);letter-spacing:.04em;text-transform:uppercase}
.contact__follow a:hover{color:var(--orange)}

.cform{display:flex;flex-direction:column;gap:15px;background:var(--orange);color:var(--navy);padding:44px 40px 40px;border-radius:22px}
.cform__title{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.7vw,36px);line-height:1;letter-spacing:-.01em;text-transform:uppercase;color:var(--navy);margin-bottom:0}
.cfield{position:relative}
.cfield input,.cfield textarea{width:100%;background:transparent;border:0;border-bottom:2px solid rgba(2,1,50,.3);border-radius:0;padding:12px 0 6px;font-family:var(--body);font-size:16px;color:var(--navy);transition:border-color .2s}
.cfield textarea{min-height:42px;resize:vertical}
.cfield input:focus,.cfield textarea:focus{border-bottom-color:var(--navy)}
/* the global :focus-visible ring is orange, which vanishes on the orange contact card */
.cform .cfield input:focus-visible,.cform .cfield textarea:focus-visible,.cform .cbtn:focus-visible{outline-color:var(--navy)}
.cfield label{position:absolute;left:0;top:10px;color:var(--navy);font-size:16px;pointer-events:none;transition:top .2s,font-size .2s,letter-spacing .2s}
.cfield input:focus + label,.cfield input:not(:placeholder-shown) + label,
.cfield textarea:focus + label,.cfield textarea:not(:placeholder-shown) + label{top:-5px;font-size:11px;font-family:var(--sub);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(2,1,50,.72)}

.ctopics{display:flex;flex-direction:column;gap:9px}
.ctopics__label{font-family:var(--body);font-weight:400;font-size:16px;letter-spacing:normal;text-transform:none;color:var(--navy)}
.cpills{display:flex;flex-wrap:wrap;gap:8px}
.cpill{position:relative;font-family:var(--body);font-size:14px;font-weight:500;letter-spacing:normal;text-transform:none;padding:7px 15px;border:1px solid rgba(2,1,50,.32);border-radius:100px;cursor:pointer;transition:background .2s,border-color .2s,color .2s;color:var(--navy)}
.cpill input{position:absolute;opacity:0;width:0;height:0}
.cpill:hover{border-color:var(--navy)}
.cpill:has(input:checked){background:var(--aqua);border-color:var(--aqua);color:var(--navy)}
.cpill:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:2px}

/* left-column direct-contact pills */
.contact__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.clink{font-family:var(--body);font-size:14px;font-weight:500;padding:9px 20px;border:1px solid var(--line);border-radius:100px;color:var(--navy);transition:background .2s,color .2s,border-color .2s}
.clink:hover{background:var(--navy);border-color:var(--navy);color:#fff}

.cbtn{align-self:flex-start;display:inline-flex;align-items:center;gap:13px;font-family:var(--sub);font-size:18px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--navy);color:#fff;border:0;padding:11px 15px 11px 30px;border-radius:100px;cursor:pointer;transition:background .2s,color .2s;margin-top:2px}
.cbtn__arw{display:grid;place-items:center;width:38px;height:38px;background:var(--aqua);color:var(--navy);border-radius:50%;font-size:17px;transition:transform .2s,background .2s,color .2s}
.cbtn:hover{background:#fff;color:var(--navy)}
.cbtn:hover .cbtn__arw{background:var(--navy);color:var(--aqua);transform:translateX(3px)}
/* filled variants must come after .cbtn — the base rule sets background/colour at
   the same specificity, so an earlier modifier silently loses */
.cbtn--orange{background:var(--orange);color:var(--navy)}
.cbtn--orange .cbtn__arw{background:var(--navy);color:var(--aqua)}
.cbtn--orange:hover{background:#fff;color:var(--navy)}
.cbtn--aqua{background:var(--aqua);color:var(--navy)}
.cbtn--aqua .cbtn__arw{background:var(--navy);color:var(--aqua)}
.cbtn--aqua:hover{background:#fff;color:var(--navy)}
.cform .msg.ok{color:var(--navy)}
.cform .msg.bad{color:#fff}
@media(max-width:860px){.contact{grid-template-columns:1fr;gap:44px}.cform{padding:30px}}

/* ---------------- PRIVACY MODAL ---------------- */
.foot__legal{display:flex;gap:22px;flex-wrap:wrap}
.foot__privacy,.foot__cookie{font-family:var(--sub);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);background:none;border:0;cursor:pointer;padding:0;transition:color .2s}
.foot__privacy:hover,.foot__cookie:hover{color:var(--aqua)}
.pmodal{position:fixed;inset:0;z-index:2000;display:none;align-items:flex-start;justify-content:center;padding:6vh 20px;background:rgba(2,1,50,.86);backdrop-filter:blur(6px);overflow-y:auto}
.pmodal.open{display:flex}
.pmodal__box{position:relative;background:var(--navy);color:#fff;max-width:660px;width:100%;padding:48px clamp(24px,4vw,46px) 54px;border-radius:16px;border:1px solid rgba(255,255,255,.12)}
.pmodal__close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;cursor:pointer;font-size:15px;display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s}
.pmodal__close:hover{background:var(--aqua);color:var(--navy);border-color:var(--aqua)}
.pmodal__box h3{font-family:var(--display);font-weight:400;font-size:clamp(30px,4vw,44px);text-transform:uppercase;letter-spacing:-.01em;line-height:1;margin:0 0 24px}
.pmodal__box h4{font-family:var(--sub);font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--aqua);margin:26px 0 10px}
.pmodal__box p{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.82);margin:0 0 12px}
.pmodal__box p strong{color:#fff}
.pmodal__box a{color:var(--aqua);text-decoration:underline}

.noscript{background:var(--orange);color:var(--navy);padding:14px 20px;text-align:center;position:relative;z-index:200}
.noscript p{margin:0 auto;max-width:70ch;font-size:14px;line-height:1.5}
.noscript a{color:var(--navy);text-decoration:underline}

/* ---------------- COOKIE CONSENT ---------------- */
.consent{position:fixed;left:20px;right:20px;bottom:20px;z-index:1900;max-width:640px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between;background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:18px 20px;box-shadow:0 30px 60px -30px rgba(2,1,50,.7);transform:translateY(140%);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.consent.is-up{transform:none}
.consent__txt{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82);flex:1 1 280px}
.consent__more{background:none;border:0;padding:0;font:inherit;color:var(--aqua);text-decoration:underline;cursor:pointer}
.consent__acts{display:flex;gap:8px;flex:none}
.consent__btn{font-family:var(--sub);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:9px 18px;border-radius:100px;border:1px solid var(--aqua);background:var(--aqua);color:var(--navy);cursor:pointer;transition:background .2s,color .2s}
.consent__btn:hover{background:#fff;border-color:#fff}
.consent__btn--ghost{background:none;color:var(--aqua)}
.consent__btn--ghost:hover{background:var(--aqua);color:var(--navy)}
@media(prefers-reduced-motion:reduce){.consent{transition:none}}
@media(max-width:560px){.consent{left:12px;right:12px;bottom:12px;padding:16px}.consent__acts{width:100%}.consent__btn{flex:1}}

/* ---------------- CASE STUDY MODAL ---------------- */
.cmodal__box{max-width:780px;padding:0;overflow:hidden;max-height:88vh;overflow-y:auto;scrollbar-width:thin}
.cmodal__box::-webkit-scrollbar{width:6px}
.cmodal__box::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:6px}
.cmodal .pmodal__close{position:fixed;z-index:2;background:rgba(2,1,50,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cmodal__media{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--navy)}
.cmodal__media img{width:100%;height:100%;object-fit:cover;display:block}
.cmodal__body{padding:clamp(26px,3.2vw,40px) clamp(24px,3.4vw,44px) clamp(30px,3.4vw,44px)}
.cmodal__tag{display:inline-block;border-color:rgba(255,255,255,.34);color:rgba(255,255,255,.8);margin-bottom:16px}
.cmodal__box h3{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.6vw,56px);text-transform:none;letter-spacing:-.015em;line-height:.98;margin:0 0 6px}
.cmodal__box h4{margin:26px 0 8px}
.cmodal__box p{font-size:15px;line-height:1.62}
/* client quote — the one place Crake appears at body scale, so it reads as a
   pulled statement rather than another paragraph */
.cmodal__quote{margin:30px 0 0;padding:24px 0 0;border-top:1px solid rgba(255,255,255,.16)}
.cmodal__quote[hidden]{display:none}
.cmodal__quote--anon .cmodal__attrib{display:none}
.cmodal__quote blockquote{margin:0}
.cmodal__quote blockquote p{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.9vw,25px);line-height:1.3;letter-spacing:-.01em;color:#fff;margin:0}
.cmodal__quote blockquote p::before{content:"\201C"}
.cmodal__quote blockquote p::after{content:"\201D"}
.cmodal__quote figcaption{display:flex;flex-direction:column;gap:2px;margin-top:16px;font-family:var(--sub);font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.cmodal__attrib{color:var(--aqua);font-weight:600}
.cmodal__role{color:rgba(255,255,255,.5)}
.cmodal__nav{display:flex;justify-content:space-between;gap:12px;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.cmodal__step{display:inline-flex;align-items:center;gap:9px;background:none;border:0;padding:6px 2px;cursor:pointer;font-family:var(--sub);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.62);transition:color .2s;max-width:48%}
.cmodal__step:hover{color:var(--aqua)}
.cmodal__step-lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmodal__step-arw{font-size:14px;flex:none}
.ticker__card--link{text-decoration:none;color:inherit;cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.ticker__card--link:hover{transform:translateY(-3px);box-shadow:0 14px 26px -12px rgba(2,1,50,.45)}
.clink__copy{margin-left:6px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(2,1,50,.28);background:none;color:var(--navy);cursor:pointer;font-size:14px;line-height:1;transition:background .2s,color .2s,border-color .2s}
.clink__copy:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.clink__copy.is-done{background:var(--aqua);border-color:var(--aqua);color:var(--navy)}
.clink__copy.is-done .clink__copy-ico::before{content:"\2713"}
.clink__copy.is-done .clink__copy-ico{font-size:0}
.clink__copy.is-done .clink__copy-ico::before{font-size:15px}
@media(max-width:560px){.cmodal__media{aspect-ratio:4/3}}

/* hero scroll-down cue */
.hero__scroll{position:absolute;right:clamp(18px,4.5vw,64px);bottom:clamp(28px,4vw,52px);z-index:4;width:clamp(52px,5vw,64px);height:clamp(52px,5vw,64px);border-radius:50%;display:grid;place-items:center;background:var(--aqua);color:var(--navy);border:0;cursor:pointer;box-shadow:0 12px 30px -12px rgba(2,1,50,.5);transition:transform .25s,background .2s;animation:heroBob 1.9s ease-in-out infinite}
.hero__scroll:hover{background:#fff}
.hero__scroll svg{display:block}
@keyframes heroBob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){.hero__scroll{animation:none}}

/* parent-brand endorsement */
/* the team note is the one section explicitly about the parent brand */
@media(max-width:560px){}

/* ---------------- bespoke cursor ---------------- */
@media(pointer:fine){
  html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor label, html.has-cursor .nlink{cursor:none}
  html.has-cursor input:not([type=checkbox]):not([type=radio]), html.has-cursor textarea, html.has-cursor select{cursor:auto}
}
.cursor{position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--aqua);pointer-events:none;z-index:99999;opacity:0;transition:opacity .3s ease,width .28s cubic-bezier(.22,1,.36,1),height .28s cubic-bezier(.22,1,.36,1),background-color .3s ease;box-shadow:0 0 18px -2px rgba(0,253,220,.55)}
.cursor.is-on{opacity:1}
.cursor--dark{background:var(--navy);box-shadow:0 0 16px -4px rgba(2,1,50,.5)}
.cursor--hover{width:42px;height:42px;background:rgba(0,253,220,.26);box-shadow:none}
.cursor--hover.cursor--dark{background:rgba(2,1,50,.2)}
/* label sits inside the dot — the dot's own transform is rewritten every frame
   by the trail loop, so it can't carry layout of its own */
.cursor__lab{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--sub);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);white-space:nowrap;opacity:0;transition:opacity .18s ease}
.cursor--lab{width:74px;height:74px;background:var(--aqua);box-shadow:0 0 26px -6px rgba(0,253,220,.5)}
.cursor--lab .cursor__lab{opacity:1}
.cursor--lab.cursor--dark{background:var(--navy)}
.cursor--lab.cursor--dark .cursor__lab{color:var(--aqua)}

.cursor--down{transform-origin:center}
.cursor.cursor--down{width:11px;height:11px}
@media(pointer:coarse),(prefers-reduced-motion:reduce){.cursor{display:none}}