/* ============================================================
   NAWF — charcoal / minimal / lime · premium
   ============================================================ */
:root{
  --bg:#18191C;            /* near-black charcoal */
  --ink:#E2E2DE;           /* soft warm white */
  --mut:#72747A;           /* muted mid-grey */
  --line:#2E3035;          /* subtle hairlines */
  --panel:#22252A;         /* raised card surface */
  /* Accent system: a single lime everywhere. No blue —
     deliberately, brand-wide. Anything cool-cast reads as the old palette. */
  --accent:#C1FF72;        /* the only lime: electric lime */
  --accent-deep:#A9EE4C;   /* pressed / hover state */
  --accent-2:#9FC131;      /* secondary: sage-lime, for card/badge background variation only — never for heading text */
  --accent-3:#FFD75E;      /* tertiary: warm amber, third in any rotation (not lime) */
  /* Lime is a light colour: anything sitting ON it must use --on-accent,
     never white, or the contrast collapses. */
  --on-accent:#14160F;
  /* Boot card that fills the screen at 100% and opens onto the page —
     matches the site's primary lime accent. */
  --intro-bg:#C1FF72;
  /* Two faces, one pairing, site-wide: Bricolage Grotesque carries every
     word of body copy, UI and numerals; Boldonse carries titles only.
     --font-body is the ONLY body token. Paragraphs, sub-copy, eyebrow
     labels, numerals, form fields and buttons all resolve to it, so the
     running text never changes face mid-page. */
  --font-body:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Boldonse — expressive display face used for section headings only.
     Single weight (400); never request bold from it, the browser fakes it. */
  --font-head:'Boldonse','Bricolage Grotesque',system-ui,sans-serif;
  /* One canonical metric for every Boldonse heading. Boldonse's ascenders
     and descenders overflow a 1.0 line box, so anything tighter than this
     collides between lines or gets sheared by a clip/mask ancestor. */
  --head-lh:1.25;
  --head-ls:-0.005em;
  --pad:clamp(20px,5vw,72px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  /* Bricolage sets wider than Geist did; it only needs a hair of tracking */
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--on-accent)}
a{color:inherit;text-decoration:none}
em{font-style:italic}
.label{
  font-family:var(--font-body);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);font-weight:400;
}
/* section eyebrow that carries real weight rather than fine print */
.label-lead{
  font-size:clamp(14px,1.45vw,21px);
  letter-spacing:.2em;
  color:#9a9c95;
}
.label-lead .lime{color:var(--accent)}
.display{
  font-family:var(--font-head);
  font-weight:400;
  font-size:clamp(26px,4vw,54px);
  line-height:1.18;
  letter-spacing:-0.01em;
}
/* upright colored accents: blue primary, yellow on alternate sections */
.display em,.hero-title em,.infra-card h3 em{font-style:normal;color:var(--accent)}
.wycd .display em,.aithat .display em,.roi .display em,.ideas .display em,.connect .display em{color:var(--accent)}
/* The xl headings are two-liners set very large, where 1.18 is not enough
   leading: the comma of "Influence," lands on the cap-height of
   "reimagined." underneath. Leading is proportional, so this has to be
   looser than the base .display size, not the same. */
.display.xl{font-size:clamp(38px,7vw,100px);line-height:1.34}
/* Use the same Bricolage Grotesque weight as “Production without production.”
   Only the page's primary section headings are affected. */
.page .hero-title,.page .display{font-family:var(--font-head);font-weight:400}
.btn{
  display:inline-block;
  padding:14px 28px;
  border-radius:999px;
  font-weight:400;font-size:14px;
  transition:background .3s,color .3s;
  will-change:transform;
}
.btn-accent{background:var(--accent);color:var(--on-accent);font-weight:500}
.btn-accent:hover{background:var(--accent-deep)}
.btn-dark{background:var(--ink);color:var(--bg)}
.btn.big{padding:20px 44px;font-size:16px}

/* ============ INTRO / BOOT ============ */
.intro{
  position:fixed;inset:0;z-index:100;
  background:var(--bg);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.intro-frame.cover{background:var(--intro-bg)}
.intro-head{
  position:absolute;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px var(--pad);
}
.intro-logo{
  font-family:var(--font-body);font-weight:400;
  font-size:22px;letter-spacing:.04em;
}
.intro-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.intro-frame{
  width:min(30vh,300px);
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--line);
  will-change:width,height;
  transition:background .25s;
}
.intro-img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.intro-foot{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:22px var(--pad);
}
.intro-counter{
  font-family:var(--font-body);
  font-size:clamp(40px,7vw,84px);
  font-weight:300;line-height:1;
  font-variant-numeric:tabular-nums;
}
.intro-scroll{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transition:opacity .6s;
  animation:none;
}
.intro-scroll.on{opacity:.85;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ============ SCROLL LINE (home only) ============ */
.scroll-line{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);
  width:1px;height:38vh;z-index:60;
  background:rgba(255,255,255,.10);
  opacity:0;transition:opacity .6s;
  pointer-events:none;
}
.scroll-line.on{opacity:1}
.scroll-line i{
  display:block;width:100%;height:100%;
  background:rgba(255,255,255,.55);
  transform:scaleY(0);transform-origin:top;
  will-change:transform;
}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  opacity:0;pointer-events:none;
  transition:opacity .5s,transform .45s cubic-bezier(.22,1,.36,1);
}
.nav.on{opacity:1;pointer-events:auto;border-bottom-color:var(--line)}
/* tucked away over a full-screen artboard hero until the page is scrolled */
.nav.nav--tucked{transform:translateY(-105%);opacity:0;pointer-events:none}
.nav-logo{font-family:var(--font-body);font-weight:400;font-size:20px}
.nav-links{
  position:relative;
  display:flex;gap:6px;font-size:15px;font-weight:400;
}
.nav-links a{
  position:relative;z-index:2;
  color:var(--mut);transition:color .3s,background .3s;
  padding:9px 17px;border-radius:999px;
  /* gentle bob — each link drifts on its own phase, like floating on water */
  animation:navFloat 4.6s ease-in-out infinite;
  will-change:transform;
}
/* staggered, non-matching phases so they never bob in unison */
.nav-links a:nth-child(1){animation-delay:-.2s;animation-duration:4.6s}
.nav-links a:nth-child(2){animation-delay:-1.5s;animation-duration:5.3s}
.nav-links a:nth-child(3){animation-delay:-2.9s;animation-duration:4.1s}
.nav-links a:nth-child(4){animation-delay:-.9s;animation-duration:5.8s}
.nav-links a:nth-child(5){animation-delay:-3.6s;animation-duration:4.9s}
@keyframes navFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  30%{transform:translateY(-3px) rotate(-.5deg)}
  65%{transform:translateY(2px) rotate(.4deg)}
}
.nav-links a:hover{color:var(--bg);background:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-pill{
  position:absolute;top:0;left:0;z-index:1;
  height:100%;width:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.06);
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  will-change:transform,width;
}
.nav-cta{
  font-size:15px;font-weight:400;
  padding:10px 22px;border-radius:999px;
  border:1px solid var(--ink);
  transition:background .3s,color .3s;
}
.nav-cta:hover{background:var(--ink);color:var(--bg)}

/* ============ PAGE / SECTIONS ============ */
.page{position:relative;z-index:1;background:transparent}
section{padding:clamp(80px,12vh,160px) var(--pad)}

/* ============ 360 CYLINDER LANDING ============ */
.cyl{height:100vh;padding:0;position:relative;overflow:hidden}
.cyl-stage{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  perspective:1900px;
}
.cyl-tilt{
  transform-style:preserve-3d;
  will-change:transform;
}
.cyl-ring{
  position:relative;width:0;height:0;
  transform-style:preserve-3d;
  will-change:transform;
}
.cyl-panel{
  position:absolute;
  width:calc(clamp(160px,18vw,300px) * var(--s,1));
  aspect-ratio:3/4;
  transform:
    translate(-50%,calc(-50% + var(--y,0vh)))
    rotateY(calc(var(--i) * 45deg))
    translateZ(min(46vw,620px))
    rotateY(180deg)
    rotate(var(--t,0deg));
  overflow:hidden;border-radius:4px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  background:var(--panel);
}
.cyl-panel.framed{
  border:clamp(8px,0.8vw,14px) solid #f2f0ec;
  background:#f2f0ec;
}
.cyl-panel img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.cyl-center{
  position:absolute;left:0;right:0;bottom:11vh;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;pointer-events:none;
}
.cyl-title{
  font-family:var(--font-head);font-weight:400;
  font-size:clamp(42px,7vw,108px);line-height:1.1;letter-spacing:0;
}
.cyl-sub{
  font-family:var(--font-body);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);font-weight:400;
}
.cyl-hint{
  margin-top:26px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);
  animation:bob 1.8s ease-in-out infinite;
}
@media (max-width:700px){
  .cyl-panel{width:calc(38vw * var(--s,1));transform:
    translate(-50%,calc(-50% + var(--y,0vh)))
    rotateY(calc(var(--i) * 45deg))
    translateZ(82vw)
    rotateY(180deg)
    rotate(var(--t,0deg));}
}

/* hero - ambient drifting glow */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:28px;padding-top:120px;position:relative;overflow:hidden}
/* soft falloff comes from the gradient itself — a 90px blur on elements
   this large is extremely expensive to paint and caused scroll jank */
.hero::before,.hero::after{
  content:"";position:absolute;z-index:-1;border-radius:50%;
  pointer-events:none;will-change:transform;
}
.hero::before{
  width:52vw;height:52vw;top:-14vw;right:-12vw;
  background:radial-gradient(circle,rgba(193,255,114,.055),rgba(193,255,114,.02) 40%,transparent 68%);
  animation:drift1 16s ease-in-out infinite alternate;
}
.hero::after{
  width:38vw;height:38vw;bottom:-10vw;left:-8vw;
  background:radial-gradient(circle,rgba(255,215,94,.035),rgba(255,215,94,.01) 40%,transparent 68%);
  animation:drift2 20s ease-in-out infinite alternate;
}
@keyframes drift1{to{transform:translate(-9vw,7vw) scale(1.15)}}
@keyframes drift2{to{transform:translate(7vw,-6vw) scale(1.1)}}
/* warning-tape marquee strip */
.tag-strip{
  margin-inline:calc(var(--pad) * -1);
  background:var(--accent);
  border-top:3px solid #0A0A0C;
  border-bottom:3px solid #0A0A0C;
  overflow:hidden;
  padding:12px 0;
}
.tag-track{
  display:inline-flex;align-items:center;gap:26px;
  white-space:nowrap;
  font-family:var(--font-body);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:#0A0A0C;
  padding-right:26px;
  animation:tagscroll 22s linear infinite;
  will-change:transform;
}
.tag-track i{font-style:normal;font-size:9px}
@keyframes tagscroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
/* Set in caps in the markup, not with text-transform, so the line breaks
   are authored: THE INFRASTRUCTURE BEHIND / NEXT-GEN MARKETING.
   Boldonse is a wide face and line one is 25 characters, so the size is
   capped by what fits that line in the copy column — not by how big the
   headline could be. Push the size up and line one wraps, which is the
   thing these breaks exist to prevent.
   text-wrap:balance is the safety net at widths where it stops fitting. */
.hero-title{
  font-family:var(--font-head);font-weight:400;
  font-size:clamp(22px,2.9vw,48px);
  line-height:1.3;letter-spacing:-0.015em;
  padding-top:.1em;
  text-wrap:balance;
}
.hero-title em{color:var(--accent)}
/* The positioning statement — the one line that says what NAWF is not.
   It sits directly under the headline, so it is deliberately louder than
   ordinary sub-copy: the two negations break onto their own line in full
   ink, the payoff runs beneath them in muted grey, and a lime rule down
   the left ties the whole block to the accent system. */
.hero-sub{
  max-width:600px;color:var(--mut);
  font-size:clamp(17px,1.25vw,20px);line-height:1.55;
  padding-left:clamp(16px,1.4vw,22px);
  border-left:2px solid var(--accent);
}
.hero-sub strong{
  display:block;margin-bottom:.35em;
  font-weight:600;color:var(--ink);
  font-size:clamp(19px,1.5vw,24px);line-height:1.35;
  letter-spacing:-0.01em;
}
.hero-sub em{font-style:normal;color:var(--ink)}
.hero-actions{display:flex;align-items:center;gap:28px}

/* wycd / infra */
.infra-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px}
.infra-card{
  --acc:var(--accent);
  border:1px solid var(--line);border-radius:20px;
  padding:40px;display:flex;flex-direction:column;gap:14px;
  background:var(--panel);position:relative;overflow:hidden;
  transition:border-color .3s,transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s;
}
.infra-card:nth-child(2){--acc:var(--accent-2)}
.infra-card .card-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center 20%;
  opacity:0;transform:scale(1.08);
  transition:opacity .55s ease,transform 1.1s cubic-bezier(.22,1,.36,1);
}
.infra-card::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(10,10,12,.9) 20%,rgba(10,10,12,.35));
  opacity:0;transition:opacity .55s ease;
}
.infra-card>.label,.infra-card>h3,.infra-card>.infra-arrow{position:relative;z-index:2}
.infra-card:hover{border-color:var(--acc);transform:translateY(-8px) scale(1.012);box-shadow:0 30px 70px -30px color-mix(in srgb,var(--acc) 45%,transparent)}
.infra-card:hover .card-bg{opacity:.55;transform:scale(1)}
.infra-card:hover::after{opacity:1}
.infra-card:hover h3 em{color:var(--acc)}
.infra-card h3{font-family:var(--font-head);font-size:clamp(19px,2.1vw,29px);font-weight:400;line-height:1.2}
.infra-card h3 em{color:var(--accent)}
.infra-arrow{position:absolute;top:34px;right:36px;font-size:22px;color:var(--acc);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.infra-card:hover .infra-arrow{transform:translate(4px,-4px)}

/* reality — pinned orb-merge scene */
.reality{
  position:relative;
  text-align:center;
  height:100vh;
  display:flex;flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:6vh var(--pad) 5vh;
  gap:0;
  overflow:hidden;
}
.reality > .display{position:relative;z-index:3;font-size:clamp(13px,1.85vw,26px);letter-spacing:-0.01em;line-height:1.3;white-space:nowrap}
.merge-stage{
  position:relative;
  z-index:2;              /* orbs + logo sit ABOVE the giant tagline */
  width:100%;
  height:38vh;margin:3vh 0 4vh;
  flex-shrink:0;
}
.orb{
  position:absolute;top:50%;left:50%;
  width:clamp(170px,23vw,320px);aspect-ratio:1;
  margin:calc(clamp(170px,23vw,320px) / -2) 0 0 calc(clamp(170px,23vw,320px) / -2);
  border-radius:50%;
  mix-blend-mode:screen;
  display:flex;align-items:center;justify-content:center;
  will-change:transform;
  z-index:1;
}
.orb-l{background:radial-gradient(circle,rgba(230,230,226,.30) 0%,rgba(230,230,226,.10) 45%,transparent 70%)}
.orb-r{background:radial-gradient(circle,rgba(193,255,114,.34) 0%,rgba(193,255,114,.12) 45%,transparent 70%)}
.orb-label{
  font-family:var(--font-body);
  font-size:clamp(14px,1.3vw,17px);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);font-weight:400;
}
.merge-burst{
  position:absolute;top:50%;left:50%;
  width:clamp(280px,38vw,540px);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(0);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,215,94,.30) 0%,rgba(193,255,114,.18) 40%,transparent 70%);
  mix-blend-mode:screen;
  opacity:0;
  will-change:transform,opacity;
}
.merge-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  pointer-events:none;
}
/* ── OVERLAP word — vertical stacked letters at intersection ── */
.overlap-word{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;
  gap:0;
  z-index:3;
  pointer-events:none;
  opacity:0;
  will-change:opacity;
  /* pill border wrapping the letters, like the reference */
  border:1px solid rgba(255,255,255,0.18);
  border-radius:999px;
  padding:12px 10px;
}
.overlap-word span{
  display:block;
  font-family:var(--font-body);
  font-size:clamp(9px,1vw,13px);
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.75);
  line-height:1.55;
}
.merge-nawf{
  font-family:var(--font-head);font-weight:400;
  font-size:clamp(34px,5.6vw,86px);line-height:1.08;letter-spacing:0;
  color:#fff;
  text-shadow:0 0 40px rgba(193,255,114,.5),0 0 90px rgba(255,215,94,.25);
  opacity:0;
  will-change:transform,opacity;
}
.merge-sub{
  /* anchored to the section, not the logo — sits under the whole
     tagline block, clear of "not plastic." */
  position:absolute;
  top:91vh;left:50%;
  transform:translateX(-50%);
  z-index:4;
  white-space:nowrap;
  font-family:var(--font-body);
  font-size:clamp(14px,1.3vw,18px);letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent-2);
  opacity:0;
}
.reality-note{
  font-size:clamp(13px,1vw,15px);line-height:1.6;
  color:var(--mut);opacity:0;
  will-change:opacity;
  margin:0;
}

/* ── "We make AI emotional / not plastic." — post-merge tagline ── */
.emotion-tagline{
  /* full-screen layer sitting BEHIND the merge circle */
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;align-items:center;justify-content:center;
  margin:0;
  /* dropped just far enough that the star's base kisses the top of line
     one — any higher and the star covers "AI" */
  padding:47vh 2vw 0;
  pointer-events:none;

  font-family:var(--font-head);
  font-weight:400;
  /* huge — line one spans nearly the full viewport width */
  font-size:clamp(29px,5.9vw,144px);
  /* tight — "not plastic." reads as the next line of the same sentence */
  line-height:1.12;
  letter-spacing:-0.015em;
  text-align:center;
  white-space:nowrap;

  /* transparent bold grey — reads through/behind the glow */
  color:rgba(158,161,158,0.26);

  opacity:0;
  filter:blur(24px);
  will-change:opacity,filter;
}

/* aithat */
.aithat{
  text-align:center;
  /* tall enough that the whole scene is on screen when it auto-plays, but
     no longer a full viewport: with the closing CTA gone it is a headline
     and one row of cards, and 100vh left a dead band under them. */
  min-height:clamp(520px,76vh,880px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  overflow:hidden;          /* cards start off-screen — don't widen the page */
}
.aithat > *{width:100%}
.aithat-list{
  list-style:none;
  /* no gap: the hairline lives inside each step's own padding */
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  /* nothing follows the row now, so the trailing margin would only push the
     centred block off true — the section's own padding is the bottom space */
  margin:56px auto 0;max-width:1320px;
}
/* No containers. The steps are separated by a single hairline in the gutter,
   drawn as a gradient so it fades out at both ends instead of stopping dead,
   with a soft bloom either side of it. Nothing is boxed, nothing is filled:
   the numeral and the white space do the grouping. */
.ai-card{
  position:relative;
  display:flex;flex-direction:column;gap:clamp(28px,4vh,58px);
  padding:clamp(10px,1.4vw,20px) clamp(16px,1.9vw,32px);
  min-height:clamp(190px,20vw,270px);
  text-align:left;
  background:none;border:0;border-radius:0;box-shadow:none;
  will-change:transform,opacity;
  /* NO transform transition here. GSAP flies these in from up to 620px below
     and 520px to the side; a CSS transition on transform interpolates toward
     every frame GSAP writes, so the card chases a moving target and is left
     stranded outside .aithat's overflow:hidden. The hover lift therefore
     lives on the children, which GSAP never touches. */
}
/* the hairline sits in the gutter before every step except the first */
.ai-card + .ai-card::before{
  content:"";
  position:absolute;left:0;top:6%;bottom:6%;
  width:1px;
  background:linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb,var(--accent) 26%,transparent) 22%,
    color-mix(in srgb,var(--accent) 26%,transparent) 78%,
    transparent 100%);
  box-shadow:0 0 10px 0 color-mix(in srgb,var(--accent) 22%,transparent);
  transition:background .45s ease,box-shadow .45s ease;
}
.ai-card:hover + .ai-card::before,
.ai-card:hover::before{
  background:linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb,var(--accent) 60%,transparent) 18%,
    color-mix(in srgb,var(--accent) 60%,transparent) 82%,
    transparent 100%);
  box-shadow:0 0 16px 0 color-mix(in srgb,var(--accent) 42%,transparent);
}
.ai-num{
  font-family:var(--font-head);font-weight:400;
  font-size:clamp(30px,3.1vw,50px);line-height:.9;
  letter-spacing:-.03em;
  padding-top:.1em;                      /* Boldonse paints above its line box */
  color:color-mix(in srgb,var(--accent) 52%,transparent);
  transition:color .4s ease;
}
.ai-card:hover .ai-num{color:var(--accent)}
.ai-copy{display:flex;flex-direction:column;gap:.55em;margin-top:auto}
.ai-card > .ai-copy > b{
  font-weight:300;text-transform:uppercase;
  font-size:clamp(14px,1.16vw,18px);
  letter-spacing:.05em;line-height:1.34;
  color:var(--ink);
}
.ai-copy p{font-size:clamp(12px,.92vw,14px);line-height:1.5;color:var(--mut)}
.ai-num,.ai-copy{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.ai-card:hover .ai-num,
.ai-card:hover .ai-copy{transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){
  .ai-num,.ai-copy{transition:none}
  .ai-card:hover .ai-num,
  .ai-card:hover .ai-copy{transform:none}
}
@media (max-width:900px){
  .aithat-list{grid-template-columns:repeat(2,1fr)}
  /* two columns: the vertical rule only works between row neighbours, so
     the third and fifth steps start a new row and drop theirs */
  .ai-card{min-height:0}
  .ai-card:nth-child(odd)::before{display:none}
  .aithat-list li:last-child{grid-column:1/-1;aspect-ratio:16/6}
}

/* steps — a pinned deck: three near-fullscreen cards shuffle in one at a time */
.steps{
  min-height:100vh;
  display:flex;flex-direction:column;
  padding-top:clamp(110px,15vh,160px);
  padding-bottom:clamp(26px,5vh,60px);
  overflow:hidden;              /* cards start below the fold */
}
/* room above the stack for the pushed-back cards to peek into */
.steps-intro{margin-bottom:clamp(28px,5vh,58px);flex:none;white-space:nowrap;font-size:clamp(16px,4vw,54px)}
.step-stack{
  position:relative;
  flex:1 1 auto;min-height:0;
}
.step{
  --acc:var(--accent);
  position:absolute;inset:0;
  border-radius:clamp(16px,1.9vw,28px);
  background:var(--acc);
  color:var(--bg);
  padding:clamp(24px,3.8vw,64px);
  display:flex;flex-direction:column;
  overflow:hidden;
  will-change:transform;
  box-shadow:0 44px 92px -46px rgba(0,0,0,.85);
}
.step:nth-of-type(2){--acc:var(--accent-2)}
.step:nth-of-type(3){--acc:var(--accent-3)}
/* the mark fills the card's empty half as a tonal watermark */
.step-mark{
  position:absolute;right:-4%;bottom:-12%;
  width:clamp(210px,33vw,520px);height:auto;
  opacity:.13;filter:brightness(0);
  pointer-events:none;user-select:none;
}
.step-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;
}
.step-title{
  font-family:var(--font-head);font-weight:400;
  font-size:clamp(26px,3.4vw,52px);
  color:var(--bg);
}
/* small ordinal so the card reads as a step without a heavy label */
.step-index{
  font-family:var(--font-body);
  font-size:clamp(11px,.95vw,14px);letter-spacing:.16em;
  color:rgba(24,25,28,.42);
}
/* the service lines are the point of the card — they get the display size,
   one per row, separated by hairlines that run the full card width */
.step-lines{
  list-style:none;
  margin-top:clamp(14px,2.4vh,30px);
  border-top:1px solid rgba(24,25,28,.22);
}
.step-lines li{
  color:var(--bg);font-weight:400;
  font-size:clamp(21px,3.1vw,46px);
  line-height:1.2;letter-spacing:-0.018em;
  padding:clamp(12px,1.9vh,24px) 0;
  border-bottom:1px solid rgba(24,25,28,.22);
  max-width:22ch;
}
.step-desc{
  color:rgba(24,25,28,.7);
  font-size:clamp(14px,1.2vw,18px);max-width:46ch;
  margin-top:auto;padding-top:clamp(16px,2.6vh,32px);
}
@media (max-width:900px){
  .step{padding:24px 20px}
  .step-lines li{max-width:none;font-size:clamp(20px,5.4vw,30px)}
  .step-desc{max-width:none}
  .step-mark{width:clamp(160px,52vw,300px);opacity:.11}
}

/* influence */
.influence{
  text-align:center;
  /* full-height so the pinned fill scene fills the screen */
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
}
.influence > *{width:100%}

/* ── "reimagined." fills with lime like water rising in a bottle ── */
.display em.fillword{
  position:relative;display:inline-block;
  color:var(--ink);          /* starts identical to "Influence," */
  font-style:normal;
  /* Boldonse overflows its line box; .fw-fill clips to this element, so pad
     the box out to the real glyph extent and cancel the layout cost. */
  padding-block:.20em .30em;
  margin-block:-.20em -.30em;
}
.fw-fill,
.stats-fill{
  position:absolute;left:0;bottom:0;
  width:100%;height:0;       /* GSAP drives this 0% → 100% on scroll */
  overflow:hidden;
  pointer-events:none;
  /* two mask layers: a rippling wave crest on top, solid body beneath —
     gives the fill a moving waterline instead of a flat cut */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath d='M0,12 C15,2 25,22 40,12 C55,2 65,22 80,12 C95,2 105,22 120,12 L120,24 L0,24 Z' fill='%23000'/%3E%3C/svg%3E"),linear-gradient(#000 0 0);
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath d='M0,12 C15,2 25,22 40,12 C55,2 65,22 80,12 C95,2 105,22 120,12 L120,24 L0,24 Z' fill='%23000'/%3E%3C/svg%3E"),linear-gradient(#000 0 0);
  -webkit-mask-size:240px 18px,100% calc(100% - 17px);
  mask-size:240px 18px,100% calc(100% - 17px);
  -webkit-mask-repeat:repeat-x,no-repeat;
  mask-repeat:repeat-x,no-repeat;
  -webkit-mask-position:0 0,0 100%;
  mask-position:0 0,0 100%;
  animation:fwRipple 6s linear infinite;
  animation-play-state:paused;   /* resumed by ScrollTrigger when in view */
}
.fw-fill > span{
  position:absolute;left:0;bottom:.30em;   /* matches .fillword padding-bottom */
  display:block;white-space:nowrap;
  color:var(--accent);           /* electric lime, matching the marker circle */
}
.fw-fill.live,
.stats-fill.live{animation-play-state:running}
@keyframes statsRipple{
  from{-webkit-mask-position:0 0,0 100%;mask-position:0 0,0 100%}
  to{-webkit-mask-position:520px 0,0 100%;mask-position:520px 0,0 100%}
}
@keyframes fwRipple{
  from{-webkit-mask-position:0 0,0 100%;mask-position:0 0,0 100%}
  to{-webkit-mask-position:240px 0,0 100%;mask-position:240px 0,0 100%}
}

/* hand-drawn red pen strike */
/* production tagline — this is the section's headline, so it carries weight */
.aithat-head{
  font-weight:400;
  font-size:clamp(13px,3.4vw,50px);
  letter-spacing:-.005em;
  text-transform:uppercase;
  white-space:nowrap;
  /* Boldonse overflows a 1.0 line box; the reveal mask is sized to this
     element's box, so anything outside it gets sheared flat. Keep it roomy. */
  line-height:1.28;
  padding-block:.06em;
  color:var(--ink);
}
.aithat-head em{font-weight:400}
.aithat .aithat-head em{color:var(--accent)}

/* hand-drawn marker circle */
.circled{position:relative;display:inline-block;padding:0 .34em}
.circled svg{
  position:absolute;
  /* Boldonse is wider and taller in its box than the face this was drawn
     for, so the ellipse needs noticeably more clearance to stay off the caps. */
  left:-0.48em;top:-0.40em;
  width:calc(100% + 0.96em);height:calc(100% + 0.80em);
  overflow:visible;pointer-events:none;
}
.circled svg path{
  fill:none;
  stroke:#8B5CF6;
  stroke-width:5.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:.9;
}
/* the banner's circle rides on dark footage, so it takes the lime rather
   than the violet the light sections use */
.circled--lime svg path{stroke:var(--accent);opacity:1}
/* the parenthetical in the influence tagline, carried over from the banner */
.influence-body p span{color:var(--accent)}

.influence-body{margin-top:56px;display:flex;flex-direction:column;gap:14px;align-items:center}
.influence-body h3{font-family:var(--font-head);font-size:clamp(21px,2.6vw,35px);font-weight:400;line-height:1.2}
.influence-body p{max-width:480px;color:var(--mut)}

/* stats */
.stats{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:48px;justify-content:space-between;
}
.stats > *:not(.stats-fill){position:relative;z-index:2}
/* lime water rising inside the band — translucent so the copy stays legible
   at every fill level (a solid wash would swallow the numbers) */
.stats-fill{
  z-index:1;
  /* wider, taller crest + slower drift: on a full-width band a small fast
     wave reads as sideways travel rather than a rising waterline */
  -webkit-mask-size:520px 30px,100% calc(100% - 28px);
  mask-size:520px 30px,100% calc(100% - 28px);
  animation:statsRipple 9s linear infinite;   /* tile width must match the shift */
  animation-play-state:paused;
  background:linear-gradient(to top,
    rgba(159,193,49,.34) 0%,
    rgba(159,193,49,.20) 55%,
    rgba(159,193,49,.10) 100%);
}
.stats-note{
  max-width:520px;
  font-size:clamp(19px,2vw,27px);line-height:1.5;
  color:var(--ink);font-weight:400;
}
.stats-row{display:flex;gap:clamp(48px,7vw,104px)}
.stat-num{
  font-family:var(--font-head);font-weight:400;
  font-size:clamp(40px,5.4vw,74px);line-height:1.08;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.stat:nth-child(1) .stat-num{color:var(--accent)}
.stat:nth-child(2) .stat-num{color:var(--ink)}
.stat-label{display:block;margin-top:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#b9bcb2}

/* services — pinned horizontal slide deck */
/* This section pins with its top flush to the viewport, so its top padding is
   the ONLY thing between the headline and the screen edge — and it has to
   clear the fixed nav too. 10vh was not enough at laptop heights and the caps
   ran into the edge. */
.services{padding-top:clamp(104px,17vh,200px);padding-bottom:6vh}
/* The 760px cap and the nowrap fought each other: the line was forbidden to
   wrap, so once it outgrew the gutters it ran off the page and body's
   overflow-x:hidden clipped the tail silently — no scrollbar, just a cut
   word. Let it wrap instead; text-wrap:balance keeps the two lines even
   when it does, and a wide screen still holds it on one. */
.services>.display{
  max-width:min(1100px,100%);text-wrap:balance;
  /* headroom for Boldonse's ascenders, which sit above the line box */
  padding-top:.12em;
}
.slide-viewport{
  width:min(100%,1440px);
  margin:clamp(52px,7.5vh,104px) auto 0;   /* sits lower, clear of the headline */
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:#111114;
  box-shadow:0 32px 90px -48px rgba(0,0,0,.9);
}
.slide-track{
  display:flex;
  width:400%;
  will-change:transform;
}
.slide{
  --acc:var(--accent);
  position:relative;
  flex:0 0 25%;
  min-height:clamp(430px,56vh,680px);
  display:flex;align-items:flex-end;
  padding:clamp(26px,3vw,48px);
  overflow:hidden;
  isolation:isolate;
  border-right:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(135deg,rgba(255,255,255,.06),transparent 34%),
    var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.slide:nth-child(2){--acc:var(--accent-2)}
.slide:nth-child(3){--acc:var(--accent-3)}
.slide:nth-child(4){--acc:var(--accent-2)}
.slide{background:var(--panel)}
.slide-net{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  opacity:.7;
}
.slide::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,10,12,.12) 0%,rgba(10,10,12,.08) 34%,rgba(10,10,12,.92) 100%);
}
.slide::after{
  content:"";position:absolute;z-index:1;
  width:clamp(220px,32vw,520px);height:clamp(220px,32vw,520px);
  right:-14%;top:-20%;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 28%,transparent),transparent 68%);
  filter:blur(12px);
  opacity:.8;
  pointer-events:none;
}
.slide-body{
  position:relative;z-index:2;
  width:100%;
  display:grid;grid-template-columns:1.15fr 1fr;
  gap:clamp(28px,4vw,64px);
  align-items:end;
}
.slide-left{display:flex;flex-direction:column;gap:14px}
.slide-right{
  display:flex;flex-direction:column;gap:18px;
  border-left:1px solid color-mix(in srgb,var(--acc) 70%,rgba(255,255,255,.2));
  padding-left:clamp(24px,3vw,48px);
  padding-bottom:6px;
}
@media (max-width:800px){
  .slide-body{grid-template-columns:1fr;align-items:start}
  .slide-right{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.18);padding-top:18px}
}
.slide-body .label{color:var(--acc);font-size:14px;letter-spacing:.18em}
.slide-body h3{
  font-family:var(--font-head);font-weight:400;
  max-width:620px;
  font-size:clamp(27px,3.3vw,47px);line-height:1.3;
  letter-spacing:-.005em;
  color:#fff;
}
.slide-body p{
  color:#E4E4E6;
  font-size:clamp(18px,1.6vw,24px);line-height:1.5;
  max-width:520px;
}
.slide-body a{
  align-self:flex-start;
  color:var(--acc);font-weight:400;font-size:16px;
  border-bottom:1px solid color-mix(in srgb,var(--acc) 65%,transparent);
  padding-bottom:4px;
  transition:border-color .3s,color .3s;
}
.slide-body a:hover{color:#fff;border-bottom-color:#fff}
.slide-num{
  position:absolute;top:clamp(24px,3vw,44px);right:clamp(24px,3vw,44px);z-index:2;
  font-family:var(--font-body);
  font-size:13px;letter-spacing:.16em;color:rgba(255,255,255,.78);
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(10,10,12,.28);
  backdrop-filter:blur(8px);
}

/* math — flip-tile columns with computing figures */
.math-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin-top:64px;
  perspective:1200px;
}
.math-card{
  --acc:var(--accent);
  border:1px solid var(--line);border-radius:20px;
  background:var(--panel);
  padding:38px 28px;
  display:flex;flex-direction:column;gap:14px;
  transform-style:preserve-3d;
  will-change:transform,opacity;
  transition:border-color .3s,box-shadow .5s;
}
.math-card:nth-child(2){--acc:var(--accent-2)}
.math-card:nth-child(3){--acc:var(--accent-3)}
.math-card:nth-child(4){--acc:var(--accent-2)}
.math-card:hover{
  border-color:var(--acc);
  box-shadow:0 24px 56px -28px color-mix(in srgb,var(--acc) 45%,transparent);
}
.math-fig{
  font-family:var(--font-head);font-weight:400;
  font-size:clamp(24px,2.6vw,42px);line-height:1.1;
  color:var(--acc);
  font-variant-numeric:tabular-nums;
  min-height:1em;
}
.math-label{
  font-size:15px;color:var(--mut);font-weight:400;
}
@media (max-width:900px){
  .math-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  /* One-line headlines that had no escape hatch. body{overflow-x:hidden}
     means an overflowing line is silently sheared off, with no scrollbar to
     hint at it, so both are released to wrap on small screens. */
  .reality > .display{white-space:normal;text-wrap:balance}
  .emotion-tagline{white-space:normal}
  .math-grid{grid-template-columns:1fr}
}

/* roi — full-screen, scroll-driven */
.roi{
  min-height:100vh;
  display:grid;grid-template-columns:.95fr 1.4fr;
  gap:clamp(32px,5vw,80px);
  align-items:center;
}
.roi-left{display:flex;flex-direction:column;gap:clamp(24px,3.4vh,38px)}
.roi-right{display:flex;flex-direction:column;justify-content:center;width:100%}
.roi-note{max-width:46ch;color:var(--mut);margin:0;font-size:clamp(15px,1.1vw,17px);line-height:1.6}
.roi-graph{margin:0;display:flex;flex-direction:column;gap:clamp(42px,7.4vh,86px);width:100%}
/* velocity formula — fraction, operator, term, then the result it defines */
.roi-formula{display:flex;flex-direction:column;gap:clamp(14px,2vh,22px);margin-top:clamp(18px,3vh,34px)}
.rf-eq{
  display:flex;align-items:center;gap:clamp(20px,2.6vw,38px);
  font-family:var(--font-head);
}
.rf-frac{display:flex;flex-direction:column;align-items:center;gap:12px}
.rf-frac b{
  font-size:clamp(15px,1.35vw,21px);
  color:var(--ink);
}
.rf-frac i{display:block;width:100%;height:2px;background:var(--ink);border-radius:2px}
.rf-op{
  font-size:clamp(20px,2.1vw,30px);font-weight:400;
  color:var(--ink);
}
.rf-term{
  font-size:clamp(15px,1.35vw,21px);
  color:var(--ink);
}
.rf-label{
  font-family:var(--font-body);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-2);
}
/* scale beneath the bars */
.roi-axis{
  display:flex;justify-content:space-between;
  /* offset to sit under the bar track, matching the grid above */
  margin-left:calc(clamp(128px,12vw,190px) + clamp(14px,1.6vw,26px));
  margin-right:calc(clamp(52px,5vw,84px) + clamp(14px,1.6vw,26px));
  margin-top:clamp(22px,3.4vh,38px);
  padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--font-body);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);
}

.roi-bar{
  display:grid;grid-template-columns:clamp(128px,12vw,190px) 1fr clamp(52px,5vw,84px);
  align-items:center;gap:clamp(14px,1.6vw,26px);
  --p:0;
}
.roi-name{font-size:clamp(14px,1.1vw,17px);color:var(--mut);font-weight:400;line-height:1.3}
.roi-bar i{
  display:block;height:clamp(24px,3.6vh,42px);border-radius:999px;background:var(--line);
  position:relative;overflow:hidden;
}
.roi-bar i::after{
  content:"";position:absolute;inset:0;
  width:calc(var(--w) * var(--p));
  background:var(--mut);border-radius:999px;
}
.roi-nawf i::after{background:var(--accent)}
.roi-bar b{
  font-family:var(--font-head);font-weight:400;
  font-size:clamp(18px,1.9vw,30px);line-height:1.1;
  font-variant-numeric:tabular-nums;text-align:right;
}
.roi-nawf b{color:var(--accent)}

/* usecases */
/* the divider hands over a full viewport of clearance already, so the
   grid's own top padding on top of it read as a gap, not as rhythm */
.usecases{padding-top:clamp(28px,5vh,64px)}
.usecase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:56px}
.usecase-grid article{
  --acc:var(--accent);
  position:relative;overflow:hidden;
  background:var(--bg);padding:32px 28px;min-height:230px;
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,background .3s;
}
.usecase-grid article:nth-child(3n+2){--acc:var(--accent-2)}
.usecase-grid article:nth-child(3n){--acc:var(--accent-3)}
.usecase-grid .uc-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center 15%;
  opacity:0;transform:scale(1.1);
  transition:opacity .5s ease,transform 1.1s cubic-bezier(.22,1,.36,1);
}
.uc-vid{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity .5s ease,transform 1.1s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.usecase-grid article:hover .uc-vid.on{opacity:.75;transform:scale(1)}
.usecase-grid article::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(10,10,12,.92) 30%,rgba(10,10,12,.45));
  opacity:0;transition:opacity .5s ease;
}
.usecase-grid h3,.usecase-grid p,.usecase-grid .uc-arrow{position:relative;z-index:2}
.usecase-grid article:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 26px 60px -24px color-mix(in srgb,var(--acc) 40%,transparent);
  z-index:3;
}
.usecase-grid article:hover .uc-bg{opacity:.6;transform:scale(1.02)}
.usecase-grid article:hover::before{opacity:1}
.usecase-grid article:hover h3{color:var(--acc)}
.usecase-grid h3{font-family:var(--font-head);font-size:17px;font-weight:400;line-height:1.25;margin-bottom:10px;transition:color .35s}
.usecase-grid p{font-size:13.5px;color:var(--mut);transition:color .35s}
.usecase-grid article:hover p{color:#c9c9ce}
.uc-arrow{
  position:absolute;top:24px;right:24px;
  font-size:18px;color:var(--acc);
  opacity:0;transform:translate(-6px,6px);
  transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1);
}
.usecase-grid article:hover .uc-arrow{opacity:1;transform:translate(0,0)}

/* ============ TECH GRID BACKDROP — canvas driven ============ */
.tail-wrap{position:relative}
.tail-wrap > section{position:relative;z-index:1}
.tech-grid{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.tech-grid canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}

/* trusted / ideas / connect */
.trusted{text-align:center;border-top:1px solid var(--line)}
.ideas{
  min-height:100vh;
  display:flex;align-items:center;
  overflow:hidden;              /* entrances start off-screen */
}
.ideas-grid{
  width:100%;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.4vw,40px);   /* halves sit closer together */
  align-items:center;
}
.ideas-copy{text-align:left}
.ideas-copy .display{margin:0}
/* right-hand media card — same video + tint treatment as the other cards */
.ideas-media{
  position:relative;overflow:hidden;
  aspect-ratio:4/3.4;
  border:1px solid var(--line);border-radius:22px;
  background:#07070a;
  display:flex;align-items:flex-end;
  will-change:transform;
}
.ideas-vid{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  opacity:.42;transform:scale(1.05);
  transition:opacity .6s,transform 1.1s cubic-bezier(.22,1,.36,1);
}
.ideas-tint{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(6,6,9,.42) 0%,
    rgba(6,6,9,.70) 48%,
    rgba(6,6,9,.93) 100%);
}
.ideas-media:hover .ideas-vid{opacity:.66;transform:scale(1)}
/* copy sits over the footage */
.ideas-note{
  position:relative;z-index:2;
  padding:clamp(24px,3vw,44px);
  display:flex;flex-direction:column;
  gap:clamp(10px,1.4vh,16px);
  text-align:left;
}
.ideas-lead{
  font-size:clamp(18px,1.8vw,27px);
  line-height:1.34;letter-spacing:-.015em;
  color:var(--ink);
  text-wrap:balance;
}
.ideas-sub{
  font-size:clamp(14px,1.05vw,17px);
  line-height:1.6;color:#a7a9a2;
  text-wrap:pretty;
}
/* "ideas" stays white — only "real." carries the lime */
.ideas .display em{color:var(--ink)}
@media (max-width:900px){
  .ideas{min-height:auto}
  .ideas-grid{grid-template-columns:1fr;gap:34px}
  .ideas-copy{text-align:center}
  .ideas-media{aspect-ratio:4/3}
}
/* "real." lands like a slot-machine reel, then breathes */
.real-wrap{
  position:relative;display:inline-block;
  /* the reel is heading text, so it takes the primary lime like every other
     accented word on the page — accent-2 is background-only by contract */
  color:var(--accent);
  /* clip-path, not overflow:hidden — overflow would move the inline-block's
     baseline to its bottom edge and drop the word off the headline's line */
  clip-path:inset(0);
  will-change:transform;
}
/* invisible copy holds the width, height and baseline while the reel spins */
.real-ghost{visibility:hidden}
.real-reel{
  position:absolute;top:0;left:0;width:100%;
  will-change:transform;
}
.real-reel span{display:block}
/* breathing only starts once the reel has settled */
.real-wrap.spun{animation:word-breathe 2.4s ease-in-out infinite}
@keyframes word-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.07)}
}
.connect{
  text-align:center;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding-top:14vh;padding-bottom:0;
}
.connect-note{
  font-family:var(--font-body);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-2);margin-top:22px;
}
.connect .btn{margin-top:26px}
.connect-strip{
  margin-top:auto;
  width:calc(100% + var(--pad) * 2);
  margin-inline:calc(var(--pad) * -1);
  display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(12px,2vw,28px);
  padding-top:8vh;
}
.cn-img{
  position:relative;overflow:hidden;
  width:clamp(140px,20vw,320px);
  height:var(--h,40vh);
  border-radius:8px 8px 0 0;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.cn-img img{
  width:100%;height:100%;object-fit:cover;object-position:center top;display:block;
  filter:grayscale(1) contrast(1.2) brightness(.92);
  transition:filter .6s ease;
}
/* halftone dots + fade into the page background */
.cn-img::before{
  content:"";position:absolute;inset:0;z-index:1;
  background-image:radial-gradient(rgba(0,0,0,.4) 1px,transparent 1.4px);
  background-size:4px 4px;
  pointer-events:none;
}
.cn-img::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,transparent 55%,var(--bg));
  pointer-events:none;
}
.cn-img:hover{transform:translateY(-10px)}
.cn-img:hover img{filter:grayscale(0) contrast(1.05) brightness(1)}
@media (max-width:700px){
  .connect-strip{flex-wrap:nowrap}
  .cn-img{width:24vw;height:calc(var(--h,40vh) * .6)}
}

/* footer */
.footer{
  border-top:1px solid var(--line);
  padding:clamp(56px,9vh,110px) var(--pad) 0;
  overflow:hidden;                 /* the wordmark is cropped by this */
}
.footer-top{
  display:grid;grid-template-columns:1.1fr 1.9fr;
  gap:clamp(36px,6vw,90px);
}
.footer-brand{display:flex;flex-direction:column;gap:22px;max-width:380px}
/* same mark + wordmark lockup as the navbar.
   align-self matters: .footer-brand is a column flex container, so its
   cross axis is horizontal and items stretch to full width by default —
   that was flattening the square mark into a 380px-wide smear. */
.footer-brand .footer-logo{
  display:flex;align-items:center;gap:12px;
  align-self:flex-start;
}
.footer-brand .logo-mark{height:34px;width:auto;display:block}
.footer-brand .logo-word{height:18px;width:auto;display:block}
.footer-brand p{color:var(--mut);font-size:15px;line-height:1.6}
.footer-cols{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,4vw,56px);
}
.footer-cols ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:13px}
.footer-cols a{
  font-size:15px;color:var(--ink);
  transition:color .25s;
}
.footer-cols a:hover{color:var(--accent-2)}
.footer-legal{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;
  margin-top:clamp(48px,7vh,90px);
  padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--font-body);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);
}
.footer-legal-links{display:flex;gap:22px}
.footer-legal a{transition:color .25s}
.footer-legal a:hover{color:var(--accent-2)}
/* oversized wordmark bled off the bottom edge — only the top half shows.
   3604x1237 art; the ratio below crops it just past the midline. */
.footer-word{
  margin-top:clamp(34px,6vh,72px);
  aspect-ratio:3604 / 760;
  overflow:hidden;
  line-height:0;
}
.footer-word img{
  /* cover + top anchoring crops from the bottom while guaranteeing the
     wordmark keeps its aspect ratio — height:auto was letting it squash */
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center top;
  opacity:.92;
}
.contact-footer{
  width:100vw;
  margin-left:calc((100% - 100vw) / 2);
}
@media (max-width:900px){
  .footer-top{grid-template-columns:1fr;gap:44px}
  .footer-cols{grid-template-columns:repeat(2,1fr);gap:32px}
  .footer-word{aspect-ratio:3604 / 760}
}

/* ============ MEN / WOMEN GATE (62management-style split) ============ */
.gate-section{
  display:block;                 /* one full-width panel, no split */
  min-height:82vh;padding:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.gate{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  padding:80px var(--pad);
}
.gate.solo{min-height:82vh;text-align:center;color:inherit}
.gate-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center top;
  opacity:0;transform:scale(1.06);
  transition:opacity .6s ease,transform 1.2s cubic-bezier(.22,1,.36,1);
}
.gate::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,12,.82),rgba(10,10,12,.25));
  opacity:0;transition:opacity .6s ease;
}
.gate-vid{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);
  transition:opacity .6s ease,transform 1.2s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.gate:hover .gate-vid.on{opacity:1;transform:scale(1)}
.gate:hover .gate-bg{opacity:1;transform:scale(1)}
.gate:hover::after{opacity:1}

/* ── ambient gate: the banner film runs behind the panel at rest, not on
   hover. It only fades up once frames are actually playing (.on), so the
   still underneath covers the gap instead of a black rectangle. The scrim
   is always on here — white type over moving footage needs it — and it
   deepens on hover so the CTA still has somewhere to land. */
.gate--ambient .gate-vid.on{opacity:1;transform:scale(1)}
.gate--ambient::after{
  opacity:1;
  background:linear-gradient(to top,rgba(10,10,12,.86),rgba(10,10,12,.5));
}
.gate--ambient:hover::after{
  background:linear-gradient(to top,rgba(10,10,12,.92),rgba(10,10,12,.62));
}
.gate--ambient .gate-main h2{color:#fff}
.gate--ambient .gate-tag{color:#d9d9de}
.gate--ambient .gate-cta{color:#fff;border-color:rgba(255,255,255,.42)}
.gate--ambient:hover .gate-cta{color:var(--bg);background:#fff;border-color:#fff}
/* The banner carries only its button, and it rides the bottom of the frame
   rather than the middle: centred over the footage it covers the subject's
   face, and the scrim is at its darkest along the bottom edge, which is
   where an outlined white pill reads cleanest. Horizontal centring still
   comes from the parent's align-items. */
.gate--ambient{justify-content:flex-end}
.gate--ambient .gate-cta{margin-top:0;margin-bottom:clamp(8px,3vh,40px)}
.gate-main,.gate-links,.gate-cta{position:relative;z-index:2}
.gate-main h2{
  font-family:var(--font-head);font-weight:400;
  font-size:clamp(20px,4.6vw,90px);line-height:1.2;letter-spacing:0;
  white-space:nowrap;
  transition:color .4s;
}
/* full-width tagline under the headline */
.gate-tag{
  margin-top:clamp(16px,2.4vw,28px);
  font-size:clamp(14px,1.5vw,24px);font-weight:400;
  letter-spacing:.01em;color:var(--mut);
  transition:color .4s;
}
.gate-tag span{color:var(--accent-2)}
.gate:hover .gate-tag{color:#d9d9de}
.gate-cta{
  margin-top:clamp(26px,3.4vw,44px);
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);
  padding:11px 24px;border-radius:999px;
  border:1px solid var(--line);
  transition:color .35s,border-color .35s,background .35s;
}
.gate-cta i{font-style:normal;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.gate:hover .gate-cta{color:var(--bg);background:var(--ink);border-color:var(--ink)}
.gate:hover .gate-cta i{transform:translateX(4px)}
.gate:hover .gate-main h2{color:#fff}
.gate-links{list-style:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.gate-links a{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;
  color:var(--mut);transition:color .3s;
}
.gate:hover .gate-links a{color:#d9d9de}
.gate-links a:hover{color:var(--accent)}
@media (max-width:900px){
  .gate,.gate.solo{min-height:62vh}
  .gate-tag{max-width:34ch;margin-left:auto;margin-right:auto}
}

/* ============ SUBPAGES (models listing + detail) ============ */
.subpage{
  min-height:100vh;
  padding:140px var(--pad) 100px;
  background:transparent;
  position:relative;z-index:1;
}
.models-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:24px;
  border-bottom:1px solid var(--line);
  padding-bottom:32px;margin-bottom:48px;
}
/* both filter rows ride the right edge, stacked */
.models-tools{
  margin-left:auto;
  display:flex;flex-direction:column;align-items:flex-end;
  gap:10px;
}
.models-tools .models-filters{justify-content:flex-end}
.models-title{
  font-family:var(--font-head);font-weight:400;
  font-size:clamp(24px,3.5vw,50px);line-height:1.14;letter-spacing:0;
  white-space:nowrap;
}
/* "GEN AI" carries the lime so the qualifier reads first */
.models-title .title-accent{color:var(--accent-2)}
.models-filters{display:flex;gap:10px;flex-wrap:wrap}
.models-filters button{
  font-family:var(--font-body);font-size:13px;font-weight:400;
  padding:9px 20px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--mut);
  transition:border-color .25s,color .25s,background .25s;
}
.models-filters button:hover{border-color:var(--accent);color:var(--ink)}
.models-filters button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* gender is a two-state switch, not a filter list — the segments sit flush
   inside one track so it reads as a toggle rather than another button row */
.gender-switch[hidden]{display:none}
.gender-switch{
  display:inline-flex;
  padding:3px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);
}
.gender-switch button{
  font-family:var(--font-body);font-size:13px;font-weight:400;
  padding:7px 20px;border-radius:999px;cursor:pointer;
  border:0;background:transparent;color:var(--mut);
  transition:color .25s,background .25s;
}
.gender-switch button:hover{color:var(--ink)}
.gender-switch button.on{background:var(--accent-2);color:var(--bg)}
.models-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.model-card{display:flex;flex-direction:column;gap:12px;group:card}
.model-card .mc-img{
  position:relative;
  aspect-ratio:3/4;overflow:hidden;border-radius:14px;background:var(--line);
}
/* creator-type badge — ribbon seal: a ring with a banner struck across it,
   the banner ends notched into swallowtails. `currentColor` on the wrapper
   drives ring, rule and text together, so a variant is one declaration. */
.mc-badge{
  position:absolute;top:9px;right:9px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  height:30px;
  font-style:normal;
  pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.mcb-ring{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:28px;height:28px;border-radius:50%;
  border:1.5px solid currentColor;
  background:rgba(10,10,12,.72);
}
.mcb-band{
  position:relative;z-index:2;
  padding:4px 11px;
  background:rgba(10,10,12,.94);
  border-top:1px solid currentColor;
  border-bottom:1px solid currentColor;
  font-family:var(--font-body);font-weight:400;
  font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  line-height:1;white-space:nowrap;
  /* swallowtail notch at each end */
  clip-path:polygon(0 0,100% 0,calc(100% - 6px) 50%,100% 100%,0 100%,6px 50%);
}
.mc-badge--gen{color:var(--accent-2)}
.mc-badge--real{color:#e2e2de}
.model-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.model-card:hover img{transform:scale(1.05)}
.model-card > span{
  font-family:var(--font-body);font-weight:500;font-size:18px;
  letter-spacing:.02em;text-transform:uppercase;
}
.models-empty{color:var(--mut);padding:48px 0}

.detail-crumb{margin-bottom:32px;font-size:13px;color:var(--mut)}
.detail-crumb a{color:var(--accent);font-weight:600}
.detail-hero{margin-bottom:32px;border-radius:24px;overflow:hidden;background:#f2f2f2;border:1px solid var(--line)}
.detail-hero-frame{position:relative;display:grid;place-items:center;min-height:72vh;max-height:88vh;background:#f2f2f2;overflow:hidden}
.detail-hero-name{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;z-index:1;line-height:.78;letter-spacing:-0.04em}
.detail-hero-name span{display:block;width:100%;color:rgba(38,38,38,.33);font-family:var(--font-head);font-size:clamp(8rem,18vw,31rem);font-weight:900;text-transform:uppercase;transform:translateY(0.05em)}
.detail-hero-name span:last-child{margin-top:-0.1em;transform:translateX(.12em)}
.detail-hero-media{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:min(92%,1200px);height:min(78vh,860px);margin-inline:auto}
.detail-hero-media img{display:block;width:100%;height:100%;object-fit:contain;filter:contrast(1.05) saturate(1.08)}

/* ---- artboard hero: finished composition, opens on its own full screen ---- */
/* :not([hidden]) — a class-level display would otherwise beat the UA hidden rule */
.model-page--art:not([hidden]){display:flex;flex-direction:column;padding-top:0}
.model-page--art .detail-crumb{order:2;margin-top:44px}
.model-page--art .detail-body{order:3}
.detail-hero--art{
  order:1;position:relative;display:grid;place-items:center;
  /* breaks out of the subpage gutter without touching 100vw (scrollbar-safe) */
  margin:0 calc(-1 * var(--pad));
  border:0;border-radius:0;background:#fff;overflow:hidden;
}
.detail-hero--art .detail-hero-art{
  display:block;width:100%;height:100vh;height:100svh;
  object-fit:contain;object-position:center;
}
.detail-hero-scroll{
  position:absolute;left:50%;bottom:clamp(16px,4vh,44px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:none;border:0;padding:6px 12px;cursor:pointer;color:var(--ink);
  font-family:var(--font-body);font-size:10px;letter-spacing:.22em;
  opacity:.5;transition:opacity .3s;
}
.detail-hero-scroll:hover{opacity:1}
.detail-hero-scroll i{
  width:1px;height:38px;background:currentColor;transform-origin:top;
  animation:heroScrollLine 1.9s ease-in-out infinite;
}
@keyframes heroScrollLine{
  0%,100%{transform:scaleY(.18);opacity:.25}
  50%{transform:scaleY(1);opacity:1}
}
/* portrait screens: a 16:9 artboard held at full height is mostly white bands,
   so it sits under the nav at its own ratio instead */
@media (max-width:900px){
  .model-page--art{padding-top:96px}
  .model-page--art .detail-crumb{margin-top:28px}
  .detail-hero--art .detail-hero-art{height:auto;aspect-ratio:2752/1536}
}
.detail-body{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:start}
/* masonry: two columns, images keep their own varied heights */
.detail-gallery{columns:2;column-gap:16px}
.detail-gallery .g-item{
  margin-bottom:16px;border-radius:14px;overflow:hidden;
  background:var(--line);break-inside:avoid;
}
.detail-gallery img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
/* breathing zoom while hovering — one slow 4s cycle, repeats while held */
.detail-gallery .g-item:hover img{
  animation:breathe 4s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.07)}
}
.detail-side{
  position:sticky;top:120px;
  /* clips the spec rows while they're parked off-panel, so they read as
     emerging from behind the gallery instead of floating in */
  overflow:hidden;
}
.detail-name{
  font-family:var(--font-head);font-weight:400;
  font-size:clamp(31px,3.9vw,56px);line-height:1.1;text-transform:uppercase;
}
.detail-tabs{display:flex;gap:20px;margin:24px 0}
.detail-tabs button{
  font-family:var(--font-body);font-size:12px;letter-spacing:.14em;font-weight:400;
  color:var(--mut);background:none;border:0;padding:0 0 4px;cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .25s,border-color .25s;
}
.detail-tabs button:hover{color:var(--ink)}
.detail-tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
.detail-stats{
  display:grid;grid-template-columns:auto 1fr;gap:10px 24px;
  border-top:1px solid var(--line);padding-top:24px;
  font-size:13px;
}
.detail-stats dt{color:var(--mut);letter-spacing:.1em;font-weight:400}
.detail-stats dd{font-weight:400}
.detail-actions{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.detail-actions a{
  border:1px solid var(--line);border-radius:999px;
  padding:12px 24px;text-align:center;font-size:13px;font-weight:400;
  transition:border-color .25s,background .25s,color .25s;
}
.detail-actions a:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

@media (max-width:900px){
  .models-grid{grid-template-columns:1fr 1fr}
  .detail-body{grid-template-columns:1fr}
  .detail-side{position:static}
}

/* text-roll hover (label rolls out, duplicate rolls in from below) */
.roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
.roll span{display:block;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.roll .roll-b{position:absolute;left:0;top:100%;width:100%}
.has-roll:hover .roll-a{transform:translateY(-100%)}
.has-roll:hover .roll-b{transform:translateY(-100%)}

/* split-text headline reveal */
/* Each word is its own mask so it can slide up out of nothing — but the mask
   clips, and Boldonse paints well above its line box, so a .08em pad on the
   bottom alone sheared the caps and ascenders flat across the top. The box is
   now padded on BOTH edges out to the real glyph extent, with matching
   negative margins so the headline still sits exactly where it did. */
.split .w{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding:.24em 0 .10em;
  margin:-.24em 0 -.10em;
}
.split .wi{display:inline-block;transform:translateY(115%)}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(28px)}

/* responsive */
@media (max-width:900px){
  .infra-cards,.service-list{grid-template-columns:1fr}
  .usecase-grid{grid-template-columns:1fr 1fr}
  .stats{flex-direction:column;align-items:flex-start}
  .roi{grid-template-columns:1fr;gap:40px;align-items:start}
  .roi-note{margin-left:0}
  .roi-bar{grid-template-columns:110px 1fr 64px}
  .nav{padding:12px 14px;gap:8px}
  .nav-links{
    gap:2px;font-size:13px;
    overflow-x:auto;scrollbar-width:none;
    max-width:60vw;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{padding:7px 10px;white-space:nowrap}
  .nav-cta{padding:7px 13px;font-size:13px;white-space:nowrap}
  .merge-stage{height:36vh}
  .emotion-tagline{font-size:clamp(22px,6.7vw,56px);letter-spacing:-0.01em;line-height:1.18;padding-top:44vh;color:rgba(158,161,158,0.32)}
  .scroll-line{right:12px;height:30vh}
}
@media (max-width:560px){
  .usecase-grid{grid-template-columns:1fr}
  .roi-bar{grid-template-columns:88px 1fr 56px;gap:10px}
  .roi-bar b{font-size:19px}
  .models-head{flex-direction:column;align-items:flex-start}
  .models-tools{margin-left:0;align-items:flex-start}
  .models-tools .models-filters{justify-content:flex-start}
  .models-title{white-space:normal}
  .detail-gallery{columns:1}
  .tag-track{font-size:11px;gap:18px}
  .steps-intro{white-space:normal}
  .services>.display{white-space:normal}
  .gate-main h2{white-space:normal}
}

/* touch devices: no hover exists, so imagery and video show on their own */
@media (hover:none){
  .gate-bg{opacity:.5;transform:scale(1)}
  .gate::after{opacity:1}
  .gate .gate-main h2{color:#fff}
  .gate .gate-links a{color:#d9d9de}
  .usecase-grid .uc-bg{opacity:.3;transform:scale(1)}
  .usecase-grid article::before{opacity:1}
  .infra-card .card-bg{opacity:.35;transform:scale(1)}
  .infra-card::after{opacity:1}
  .uc-vid.on{opacity:.6;transform:scale(1)}
  .gate-vid.on{opacity:.85;transform:scale(1)}
  .cn-img img{filter:grayscale(1) contrast(1.2) brightness(.92)}
}

/* ============ CUSTOM CURSOR — dot + trailing ring ============ */
body.has-cursor, body.has-cursor * { cursor: none !important; }

.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none;
  will-change: transform;
}
.cursor-dot i {
  display: block; width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(193,255,114,.65);
  transition: transform .25s ease, background .25s ease;
}
.cursor-ring i {
  display: block; width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1.5px solid rgba(230,230,226,.35);
  transition: transform .3s cubic-bezier(.25,1,.4,1),
              border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
/* over links / buttons: ring grows + tints blue, dot shrinks */
body.cursor-hover .cursor-ring i {
  transform: scale(1.55);
  border-color: rgba(193,255,114,.85);
  background: rgba(193,255,114,.07);
  box-shadow: 0 0 18px rgba(193,255,114,.25);
}
body.cursor-hover .cursor-dot i { transform: scale(.55); }
/* pressed */
body.cursor-down .cursor-ring i { transform: scale(.8); }
body.cursor-hover.cursor-down .cursor-ring i { transform: scale(1.25); }
/* off-window */
body.cursor-off .cursor-dot i,
body.cursor-off .cursor-ring i { transform: scale(0); }

/* ============ LOGO IMAGE (replaces NAWF wordmark text) ============ */
.intro-logo img{height:20px;width:auto;display:block}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo .logo-mark{height:28px;width:auto;display:block}
.nav-logo .logo-word{height:15px;width:auto;display:block}
.cyl-title img{height:clamp(46px,7.2vw,112px);width:auto;display:block}
.merge-nawf img{
  height:clamp(36px,5.5vw,86px);width:auto;display:block;
  filter:drop-shadow(0 0 24px rgba(193,255,114,.5)) drop-shadow(0 0 55px rgba(255,215,94,.25));
}

/* ============ CONTACT PAGE ============ */
/* ── WORK (placeholder) ─────────────────────────────────────
   Same shell as the contact page: centred column, footer bleeding off the
   bottom edge the way it does on the home page. */
.work-page{
  --ct:var(--accent-2);
  max-width:1320px;margin:0 auto;
  padding-bottom:0;
}
.work-body{
  min-height:56vh;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:clamp(18px,2.4vw,30px);
}
.work-head{
  font-family:var(--font-head);font-weight:400;
  /* Boldonse paints well outside its line box, so at this size a 1.05
     line-height let the 'g' descender fall straight through the gap and onto
     the paragraph. Loosen the leading and pad the box out to the real glyph
     extent — the flex gap then measures from the ink, not the em box. */
  font-size:clamp(38px,8vw,120px);line-height:1.12;letter-spacing:-.02em;
  padding-block:.12em .18em;
  color:var(--ink);
}
.work-head em{font-style:normal;color:var(--accent)}
.work-sub{max-width:44ch;color:var(--mut);font-size:clamp(14px,1.3vw,18px);line-height:1.6}

.contact-page{
  /* page accent tracks the site palette — the sage-lime used everywhere else,
     not a page-local green. */
  --ct:var(--accent-2);
  max-width:1320px;margin:0 auto;
  /* the footer wordmark bleeds off the bottom edge exactly like the home
     page, so the subpage's 100px bottom padding has to go */
  padding-bottom:0;
}
.ct-head{
  font-family:var(--font-head);
  font-weight:400;text-transform:none;
  font-size:clamp(24px,4.2vw,60px);
  line-height:1.24;letter-spacing:-.008em;
  color:var(--ink);
  max-width:20ch;
}
.ct-head em{font-style:normal;color:var(--ct);display:block;margin-top:.18em}
.ct-tag{
  display:block;margin-top:clamp(20px,3.4vw,44px);
  font-family:var(--font-head);font-weight:400;text-transform:uppercase;
  font-size:clamp(17px,2.3vw,33px);letter-spacing:0;
  color:var(--ct);
}

.ct-form{
  margin-top:clamp(48px,8vh,110px);
  margin-bottom:clamp(40px,7vh,90px);
  display:flex;flex-direction:column;
  gap:clamp(34px,5.5vh,60px);
}
.ct-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,72px);
}
.ct-field{display:flex;flex-direction:column;gap:14px}
.ct-label{
  font-family:var(--font-body);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mut);
}
.ct-label i{font-style:normal;color:var(--ct)}
/* underline inputs — big uppercase display type, like the reference */
.ct-field input,
.ct-field textarea,
.ct-select select{
  width:100%;
  font-family:var(--font-body);font-weight:400;text-transform:uppercase;
  font-size:clamp(17px,1.7vw,25px);letter-spacing:-.01em;
  color:var(--ink);
  background:transparent;
  border:0;border-bottom:1px solid var(--line);
  border-radius:0;
  padding:0 0 14px;
  transition:border-color .3s,color .3s;
}
.ct-field textarea{resize:vertical;min-height:96px;line-height:1.35;text-transform:none}
.ct-field input::placeholder,
.ct-field textarea::placeholder{color:#5c5e64}
.ct-field input:focus,
.ct-field textarea:focus,
.ct-select select:focus{outline:none;border-bottom-color:var(--ct)}
/* select keeps the same underline treatment plus its own chevron */
.ct-select{position:relative}
.ct-select select{
  appearance:none;-webkit-appearance:none;
  cursor:pointer;padding-right:38px;
}
.ct-select select option{
  background:#111214;color:var(--ink);
  font-family:var(--font-body);font-size:15px;text-transform:none;font-weight:400;
}
.ct-select svg{
  position:absolute;right:2px;top:6px;
  width:22px;height:22px;color:var(--mut);
  pointer-events:none;transition:color .3s;
}
.ct-select:hover svg{color:var(--ct)}

.ct-foot{display:flex;align-items:center;gap:24px;flex-wrap:wrap;line-height:1}
.ct-submit{
  /* inline-flex + line-height:1 so the label sits optically centred in the
     pill — the mono font's default leading was pushing it low */
  display:inline-flex;align-items:center;justify-content:center;
  line-height:1;
  font-family:var(--font-body);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bg);background:var(--ct);
  border:1px solid var(--ct);border-radius:999px;
  padding:17px 34px 17px 36px;   /* extra left pad balances the tracking */
  cursor:pointer;
  transition:background .3s,color .3s;
}
.ct-submit:hover{background:transparent;color:var(--ct)}
.ct-status{
  font-family:var(--font-body);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);
}
.ct-status.ok{color:var(--ct)}
.ct-status.err{color:#E5484D}
@media (max-width:760px){
  .ct-row{grid-template-columns:1fr}
  .ct-head{max-width:none}
}

/* registering --s as a number lets it interpolate smoothly instead of
   being treated as an opaque string */
@property --s{syntax:'<number>';inherits:false;initial-value:0}
/* scratch-card reveal — the headline is masked by a cluster of soft blobs
   that grow in sequence as the section scrolls, so it uncovers in irregular
   patches rather than wiping cleanly. GSAP drives --s from 0 to 1. */
.aithat-head{
  --s:0;
  -webkit-mask-image:radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%);
  -webkit-mask-size:calc(max(0, var(--s) * 1.75 - 0.0) * 150%) calc(max(0, var(--s) * 1.75 - 0.0) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.055) * 150%) calc(max(0, var(--s) * 1.75 - 0.055) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.11) * 150%) calc(max(0, var(--s) * 1.75 - 0.11) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.165) * 150%) calc(max(0, var(--s) * 1.75 - 0.165) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.22) * 150%) calc(max(0, var(--s) * 1.75 - 0.22) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.275) * 150%) calc(max(0, var(--s) * 1.75 - 0.275) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.33) * 150%) calc(max(0, var(--s) * 1.75 - 0.33) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.385) * 150%) calc(max(0, var(--s) * 1.75 - 0.385) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.44) * 150%) calc(max(0, var(--s) * 1.75 - 0.44) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.495) * 150%) calc(max(0, var(--s) * 1.75 - 0.495) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.55) * 150%) calc(max(0, var(--s) * 1.75 - 0.55) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.605) * 150%) calc(max(0, var(--s) * 1.75 - 0.605) * 210%);
  -webkit-mask-position:8% 42%,21% 66%,33% 31%,45% 72%,56% 38%,67% 64%,78% 33%,88% 68%,50% 50%,15% 30%,72% 50%,94% 44%;
  -webkit-mask-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  mask-image:radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%),
    radial-gradient(closest-side, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%);
  mask-size:calc(max(0, var(--s) * 1.75 - 0.0) * 150%) calc(max(0, var(--s) * 1.75 - 0.0) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.055) * 150%) calc(max(0, var(--s) * 1.75 - 0.055) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.11) * 150%) calc(max(0, var(--s) * 1.75 - 0.11) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.165) * 150%) calc(max(0, var(--s) * 1.75 - 0.165) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.22) * 150%) calc(max(0, var(--s) * 1.75 - 0.22) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.275) * 150%) calc(max(0, var(--s) * 1.75 - 0.275) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.33) * 150%) calc(max(0, var(--s) * 1.75 - 0.33) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.385) * 150%) calc(max(0, var(--s) * 1.75 - 0.385) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.44) * 150%) calc(max(0, var(--s) * 1.75 - 0.44) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.495) * 150%) calc(max(0, var(--s) * 1.75 - 0.495) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.55) * 150%) calc(max(0, var(--s) * 1.75 - 0.55) * 210%),
    calc(max(0, var(--s) * 1.75 - 0.605) * 150%) calc(max(0, var(--s) * 1.75 - 0.605) * 210%);
  mask-position:8% 42%,21% 66%,33% 31%,45% 72%,56% 38%,67% 64%,78% 33%,88% 68%,50% 50%,15% 30%,72% 50%,94% 44%;
  mask-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
}


/* ============================================================
   Boldonse heading normalisation
   Single source of truth for heading weight, leading and tracking.
   Boldonse ships one weight (400) — asking for 700 makes the browser
   synthesise it, which smears the outlines. Size stays per-selector.
   ============================================================ */
.display,.page .display,
.hero-title,.page .hero-title,
.cyl-title,.merge-nawf,.emotion-tagline,
.aithat-head,.step-title,.stat-num,
.slide-body h3,.math-fig,.roi-bar b,.rf-eq,.rf-op,
.gate-main h2,.models-title,.detail-name,
.ct-head,.ct-tag,
.rf-frac b,.rf-term,
.infra-card h3,.influence-body h3,.usecase-grid h3{
  font-weight:400;
  line-height:var(--head-lh);
  letter-spacing:var(--head-ls);
}

/* connect headline is the only two-line display on the page — the shared
   1.25 leading packs the lime line right under the white one. A small bump,
   scoped here so no other heading moves. Declared after the Boldonse
   normalisation block because the specificity ties. */
.connect .display,
.page .connect .display{line-height:1.6}
/* contact headline wraps to 3 lines at most widths — same Boldonse
   overlap as the connect headline, same fix: more leading. */
.ct-head{line-height:1.5}


/* ============================================================
   SECTION DIVIDER — "signal sweep" (ROI → use cases)
   A standalone pinned scene. Everything starts collapsed and is
   driven by the scrollbar from js/main.js, so the CSS only owns
   the resting geometry and colour; nothing animates on its own.
   ============================================================ */
.xfade{
  position:relative;
  height:100vh;
  /* the scene fills the viewport on its own — the global section padding
     was squeezing the band and adding a screen of dead space on exit */
  padding:0;
  display:flex;align-items:center;
  overflow:hidden;
  /* a faint lime bloom behind the band so the strip separates from
     the flat charcoal above and below it */
  background:radial-gradient(120% 46% at 50% 50%,rgba(193,255,114,.055),transparent 70%);
}
.xfade-stage{
  position:relative;
  width:100%;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,2vw,26px);
}

/* ── slat stacks: thin bars that rake in from alternating edges ── */
.xfade-slats{
  width:100%;
  display:flex;flex-direction:column;
  gap:clamp(5px,.7vw,9px);
}
.xfade-slats i{
  display:block;
  width:var(--w,60%);
  height:2px;
  background:var(--line);
  border-radius:2px;
  will-change:transform;
}
.xfade-slats i.is-lime{background:var(--accent);opacity:.55}
/* the stacks fan away from the centre line */
.xfade-slats--top{margin-bottom:clamp(6px,1vw,14px)}
.xfade-slats--bot{margin-top:clamp(6px,1vw,14px)}

/* ── core: two hairlines sandwiching the counter-running marquees ── */
.xfade-core{
  position:relative;
  width:100%;
  display:flex;flex-direction:column;
  gap:clamp(8px,1.2vw,16px);
}
.xfade-rule{
  display:block;height:1px;width:100%;
  background:linear-gradient(90deg,transparent,var(--accent) 12%,var(--accent) 88%,transparent);
  opacity:.5;
  will-change:transform;
}
.xfade-rows{
  display:flex;flex-direction:column;
  gap:clamp(2px,.4vw,8px);
  will-change:opacity,filter;
}
.xfade-row{overflow:hidden;width:100%}
.xfade-track{
  display:inline-flex;align-items:center;
  gap:clamp(14px,2vw,34px);
  white-space:nowrap;
  font-family:var(--font-head);
  font-weight:400;
  font-size:clamp(34px,7.4vw,104px);
  line-height:var(--head-lh);
  letter-spacing:var(--head-ls);
  will-change:transform;
}
.xfade-track b{
  font-family:var(--font-body);
  font-size:.28em;
  color:var(--accent);
  transform:translateY(-.18em);
}
/* top row reads solid, bottom row is the outline echo of it */
.xfade-row--a .xfade-track{color:var(--ink)}
.xfade-row--b .xfade-track{
  color:transparent;
  -webkit-text-stroke:1px var(--mut);
  opacity:.75;
}
.xfade-row--b .xfade-track b{color:var(--accent);-webkit-text-stroke:0}
/* the brand name is the only lime word in the strip, so it reads as the
   signature rather than as one more item in the list */
.xfade-track .is-brand{
  color:var(--accent);
  letter-spacing:.02em;
}
.xfade-row--b .xfade-track .is-brand{
  color:transparent;
  -webkit-text-stroke-color:var(--accent);
  opacity:.9;
}

/* ── vertical scan line that crosses the band mid-hold ── */
.xfade-scan{
  position:absolute;top:-4%;bottom:-4%;left:0;
  width:1px;
  background:linear-gradient(180deg,transparent,var(--accent),transparent);
  opacity:0;
  box-shadow:0 0 22px 3px rgba(193,255,114,.35);
  pointer-events:none;
}

/* ── phones ──
   The scene stays a full viewport tall: a pinned block shorter than the
   screen would leave the ROI panel and the grid peeking in above and below
   it, which reads as a layout bug rather than a transition. Everything
   inside shrinks instead. */
@media (max-width:700px){
  .xfade-stage{gap:clamp(10px,3vw,16px)}
  .xfade-slats{gap:5px}
  .xfade-slats i{height:1.5px}
  .xfade-core{gap:8px}
  .xfade-track{
    font-size:clamp(30px,10vw,54px);
    gap:16px;
  }
  .xfade-row--b .xfade-track{-webkit-text-stroke-width:.75px}
  .xfade-scan{box-shadow:0 0 14px 2px rgba(193,255,114,.3)}
}
/* very narrow phones */
@media (max-width:380px){
  .xfade-track{font-size:clamp(26px,11vw,40px)}
}
/* short landscape phones — pull the type down so the band still fits
   inside a ~380px-tall viewport */
@media (max-height:480px){
  .xfade-track{font-size:clamp(22px,5vh,38px)}
  .xfade-slats{gap:4px}
}
@media (prefers-reduced-motion:reduce){
  .xfade{height:auto;padding:clamp(60px,10vw,120px) 0}
}