/* ═══════════════════════════════════════════════════════════
   TRY NEW AI — light system, modelled on the reference sites
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:   #FFFFFF;
  --paper-2: #F2F3F4;
  --paper-3: #E9EBEC;
  --ink:     #0A0B0C;
  --ink-2:   #5F656A;
  --ink-3:   #A9AEB2;      /* the muted half of a two-tone headline */
  --line:    rgba(10,11,12,.09);
  --line-2:  rgba(10,11,12,.16);
  --green:   #00A34A;
  --green-2: #17C25E;

  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell: 1360px;
  --pad:   clamp(18px, 4vw, 64px);
  --ease:  cubic-bezier(.22,1,.36,1);
  --nav-h: 56px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.lock{ overflow:hidden; }

body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.loading{ overflow:hidden; height:100vh; }
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; color:inherit; background:none; border:none; }
button{ cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--green); color:#fff; }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:6px; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
.mono{ font-family:var(--mono); font-weight:400; font-size:10.5px;
       letter-spacing:.11em; text-transform:uppercase; }
.grey{ color:var(--ink-3); font-style:normal; }
.dim{ color:var(--ink-3); }
.tag{ color:var(--ink-3); margin-bottom:18px; }

.skip-link{ position:fixed; top:-100px; left:16px; z-index:9999; background:var(--ink);
            color:#fff; padding:10px 16px; border-radius:999px; }
.skip-link:focus{ top:16px; }

/* section heads */
.head{ margin-bottom:clamp(40px,5.5vw,80px); }
.h2{ font-size:clamp(32px,5.2vw,72px); font-weight:400; line-height:1.02;
     letter-spacing:-.045em; }

/* ═══════════ PRELOADER ═══════════ */
.pre{
  position:fixed; inset:0; z-index:9998; background:var(--paper);
  display:grid; place-content:center; gap:18px; justify-items:center;
  transition:opacity .6s ease, visibility .6s;
}
.pre__orb{
  position:absolute; left:50%; top:50%; width:min(560px,80vw); aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; filter:blur(46px); opacity:.85;
  background:
    radial-gradient(45% 45% at 34% 30%, rgba(255,255,255,.98), transparent 70%),
    radial-gradient(40% 40% at 70% 34%, rgba(0,163,74,.30), transparent 70%),
    radial-gradient(45% 45% at 62% 74%, rgba(150,190,255,.28), transparent 70%),
    radial-gradient(50% 50% at 30% 70%, rgba(255,205,170,.22), transparent 70%),
    #fff;
  animation:orbSpin 16s linear infinite;
}
.pre__inner{ position:relative; display:flex; align-items:baseline; gap:16px; }
.pre__word{ font-size:clamp(26px,4.4vw,46px); font-weight:400; letter-spacing:-.04em;
            overflow:hidden; display:block; margin-bottom:-.16em; }
.pre__word i{ display:block; font-style:normal; padding-bottom:.16em;
              transform:translateY(102%);
              transition:transform 1s var(--ease) .1s; }
.pre.in .pre__word i{ transform:none; }
.pre__pct{ color:var(--green); font-variant-numeric:tabular-nums; }
.pre__bar{ position:relative; width:min(340px,60vw); height:1px; background:var(--line-2); }
.pre__bar i{ position:absolute; inset:0; width:0%; background:var(--ink); }
.pre.done{ opacity:0; visibility:hidden; }

/* ═══════════ CURSOR ═══════════ */
.cursor{ position:fixed; top:0; left:0; z-index:9990; pointer-events:none; }
.cursor__ring{
  position:absolute; width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(10,11,12,.35); transform:translate(-50%,-50%);
  transition:width .3s var(--ease), height .3s var(--ease), opacity .3s;
}
.cursor__pill{
  position:absolute; transform:translate(-50%,-50%) scale(.4); opacity:0;
  background:var(--ink); color:#fff; border-radius:999px; padding:11px 20px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap; transition:transform .4s var(--ease), opacity .3s;
}
.cursor.hover .cursor__ring{ width:46px; height:46px; }
.cursor.view .cursor__ring{ opacity:0; }
.cursor.view .cursor__pill{ transform:translate(-50%,-50%) scale(1); opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ═══════════ PILLS ═══════════ */
.pill{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  height:42px; padding:0 18px; border-radius:999px;
  font-size:13px; font-weight:400; white-space:nowrap;
  transition:background .35s var(--ease), color .35s var(--ease),
             transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pill--lg{ height:50px; padding:0 24px; font-size:14px; }
.pill--block{ width:100%; justify-content:center; height:54px; }
.pill--dark{ background:var(--ink); color:#fff; }
.pill--dark:hover{ background:#22262A; }
.pill--light{ background:var(--paper-2); color:var(--ink); }
.pill--light:hover{ background:var(--paper-3); }
.pill__dot{ width:16px; height:16px; border-radius:50%; background:#fff; flex-shrink:0;
            transition:transform .45s var(--ease); }
#menuBtn[aria-expanded="true"] .pill__dot{ transform:translateX(2px) scale(.8); }
.pill--seg{ background:var(--paper-2); padding:0 6px; gap:0; }
.pill--seg a{ padding:0 14px; height:32px; display:inline-flex; align-items:center;
              border-radius:999px; font-size:13px; color:var(--ink-2);
              transition:background .35s var(--ease), color .35s var(--ease); }
.pill--seg a:hover{ background:#fff; color:var(--ink); }
.pill--circle{ width:42px; height:42px; padding:0; justify-content:center;
               background:var(--ink); color:#fff; }
.pill--circle svg{ width:20px; height:20px; }
.pill--circle:hover svg{ animation:spin 3s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* iridescent glow under the dark CTA — straight from the Reboot reference */
.glow::after{
  content:''; position:absolute; left:8%; right:8%; bottom:-5px; height:22px;
  border-radius:999px; z-index:-1; filter:blur(11px); opacity:.85;
  background:linear-gradient(90deg,#00A34A,#7FD8FF,#C9A6FF,#FFC48A,#00A34A);
  background-size:300% 100%; animation:glowShift 6s linear infinite;
}
.glow{ isolation:auto; }
@keyframes glowShift{ to{ background-position:300% 0; } }

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:900;
  width:calc(100% - var(--pad)); max-width:calc(var(--shell) - 24px);
  display:flex; align-items:center; gap:10px;
  transition:transform .5s var(--ease), opacity .4s;
}
.nav.hide{ transform:translateX(-50%) translateY(-160%); opacity:0; }
.nav__brand{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:500;
             letter-spacing:-.02em; padding-right:10px; }
.nav__mark{ width:26px; height:26px; }
.nav__end{ margin-left:auto; display:flex; align-items:center; gap:10px; }

/* ═══════════ MENU ═══════════ */
.menu{
  position:fixed; inset:0; z-index:890; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center; padding:100px var(--pad) 48px;
  clip-path:inset(0 0 100% 0); transition:clip-path .85s var(--ease); pointer-events:none;
}
.menu.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.menu__links{ display:flex; flex-direction:column; }
.menu__links a{
  display:flex; align-items:baseline; gap:18px; padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:clamp(28px,6vw,50px); font-weight:300; letter-spacing:-.04em;
  opacity:0; transform:translateY(26px);
  transition:opacity .6s var(--ease), transform .7s var(--ease), color .3s;
}
.menu__links a em{ color:var(--green); font-size:11px; font-style:normal; }
.menu.open .menu__links a{ opacity:1; transform:none; }
.menu__links a:hover{ color:var(--green); }
.menu__links a.is-here{ color:var(--ink-3); }
.menu__links a.is-here::after{ content:'—'; margin-left:auto; font-size:.4em;
                               color:var(--green); }
.pill--seg a.is-here{ background:#fff; color:var(--ink); }
.menu__foot{ display:flex; justify-content:space-between; margin-top:34px; color:var(--ink-3); }

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 40px) 0 34px;
  background:linear-gradient(180deg,#F6F7F8 0%, #FFFFFF 42%);
}

/* pearlescent orb */
.orb{
  position:absolute; left:50%; top:47%; transform:translate(-50%,-50%);
  width:min(680px,84vw); aspect-ratio:1; pointer-events:none;
}
.orb__body{
  position:absolute; inset:0; border-radius:50%; filter:blur(30px);
  background:
    radial-gradient(42% 42% at 36% 28%, rgba(255,255,255,1), transparent 72%),
    radial-gradient(38% 38% at 72% 32%, rgba(0,163,74,.34), transparent 70%),
    radial-gradient(42% 42% at 66% 72%, rgba(140,185,255,.30), transparent 72%),
    radial-gradient(46% 46% at 28% 68%, rgba(255,200,160,.26), transparent 72%),
    radial-gradient(closest-side, #ffffff, #f4f6f7);
  animation:orbSpin 22s linear infinite;
}
.orb__sheen{
  position:absolute; inset:6%; border-radius:50%; filter:blur(16px); mix-blend-mode:screen;
  background:conic-gradient(from 0deg,
    rgba(0,163,74,.30), rgba(120,200,255,.26), rgba(210,170,255,.22),
    rgba(255,205,150,.24), rgba(0,163,74,.30));
  animation:orbSpin 30s linear infinite reverse;
}
@keyframes orbSpin{ to{ transform:rotate(360deg); } }

/* converging hands */
.halftone{ position:absolute; inset:0; width:100%; height:100%; z-index:2;
           pointer-events:none; }

.hero__center{ position:relative; z-index:3; text-align:center; padding-inline:var(--pad); }
.hero__title{
  font-size:clamp(32px,5.9vw,86px); font-weight:400; line-height:1.06;
  letter-spacing:-.048em;
}
/* Descender rescue: `overflow:hidden` powers the line-mask reveal, but at these
   tight line-heights it slices the tails off g/y/p. Pad the clip box, then pull
   the extra space back with a negative margin so line spacing is unchanged.
   translateY is a % of the inner's own (now taller) box, so the mask still
   hides it completely. */
.hero__title .line{ display:block; overflow:hidden; margin-bottom:-.18em; }
.hero__title .line i{ display:block; font-style:normal; padding-bottom:.18em;
                      transform:translateY(105%); }
.hero.in .hero__title .line i{ transform:none; transition:transform 1.1s var(--ease); }
.hero.in .line:nth-child(2) i{ transition-delay:.1s; }

.hero__foot{
  position:relative; z-index:3; margin-top:auto; padding-top:clamp(40px,7vw,90px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.hero__blurb{ max-width:34ch; font-size:15px; color:var(--ink-2); }
.hero__foot-r{ display:flex; gap:10px; flex-wrap:wrap; }

/* ═══════════ INNER-PAGE HERO ═══════════ */
.phero{
  position:relative; overflow:hidden;
  padding:calc(var(--nav-h) + clamp(70px,10vw,150px)) 0 clamp(48px,6vw,86px);
  background:linear-gradient(180deg,#F6F7F8 0%, #FFFFFF 72%);
  border-bottom:1px solid var(--line);
}
.phero__orb{
  position:absolute; right:-6%; top:-42%; width:min(620px,68vw); aspect-ratio:1;
  border-radius:50%; filter:blur(46px); pointer-events:none; opacity:.85;
  background:
    radial-gradient(42% 42% at 38% 30%, rgba(255,255,255,1), transparent 72%),
    radial-gradient(38% 38% at 70% 34%, rgba(0,163,74,.30), transparent 70%),
    radial-gradient(42% 42% at 64% 70%, rgba(140,185,255,.26), transparent 72%),
    radial-gradient(46% 46% at 30% 68%, rgba(255,200,160,.22), transparent 72%);
  animation:orbSpin 24s linear infinite;
}
.phero .shell{ position:relative; z-index:2; }
.phero__h{
  font-size:clamp(36px,6.4vw,88px); font-weight:400; line-height:1.02;
  letter-spacing:-.048em; max-width:16ch;
  padding-bottom:.08em;              /* descender room */
}
.phero__lede{ margin-top:22px; max-width:56ch; font-size:clamp(15px,1.35vw,18px);
              color:var(--ink-2); }

/* ═══════════ CTA BAND ═══════════ */
.cta{ padding:clamp(70px,9vw,130px) 0; text-align:center;
      border-top:1px solid var(--line); }
.cta__h{ font-size:clamp(32px,5.6vw,76px); font-weight:400; letter-spacing:-.048em;
         line-height:1.03; margin:14px auto clamp(28px,3.4vw,44px); max-width:18ch;
         padding-bottom:.08em; }

/* ═══════════ LOGO STRIP ═══════════ */
.strip{ border-block:1px solid var(--line); overflow:hidden; padding:22px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.strip__row{ display:flex; width:max-content; animation:marquee 40s linear infinite; }
.strip:hover .strip__row{ animation-play-state:paused; }
.strip__grp{ display:flex; align-items:center; gap:30px; padding-right:30px; }
.strip__grp span{ font-size:clamp(16px,1.7vw,24px); font-weight:300; letter-spacing:-.03em;
                  color:var(--ink-3); transition:color .3s; }
.strip__grp span:hover{ color:var(--ink); }
.strip__grp b{ color:var(--green); font-size:8px; font-weight:400; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ═══════════ STAT TRACKS ═══════════ */
.stats{ padding:clamp(50px,7vw,90px) 0; }
.stat{
  display:grid; grid-template-columns:minmax(190px,1fr) auto minmax(0,2.2fr);
  align-items:center; gap:clamp(16px,3vw,44px);
  padding:clamp(22px,3vw,34px) 0; border-bottom:1px solid var(--line);
}
.stat:first-child{ border-top:1px solid var(--line); }
.stat__num{ display:block; font-size:clamp(34px,5vw,68px); font-weight:400;
            letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; }
.stat__cap{ display:block; margin-top:8px; font-size:12px; color:var(--ink-3); }
.stat__chip{ width:30px; height:30px; border-radius:50%; background:var(--paper-2);
             display:grid; place-items:center; }
.stat__chip i{ width:5px; height:5px; border-radius:50%; background:var(--ink-3); }

.stat__track{
  position:relative; height:clamp(56px,6vw,84px); border-radius:999px;
  background:var(--paper-2); overflow:hidden;
}
.stat__fill{
  position:absolute; inset:0; width:0%; border-radius:999px;
  background:linear-gradient(90deg,
    rgba(0,163,74,.16), rgba(130,195,255,.20), rgba(215,180,255,.18), rgba(255,205,160,.16));
  transition:width 1.6s var(--ease);
}
.stat__knob{
  position:absolute; top:50%; left:0; transform:translate(6px,-50%);
  width:clamp(46px,4.6vw,68px); aspect-ratio:1; border-radius:50%; background:#fff;
  box-shadow:0 4px 18px rgba(10,11,12,.10);
  transition:left 1.6s var(--ease);
}

/* ═══════════ DARK INTERLUDE ═══════════ */
.reel{
  position:relative; min-height:88svh; background:#05070A; overflow:hidden;
  display:grid; place-items:center; isolation:isolate;
}
.reel__canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }
.reel__word{ position:relative; z-index:2; display:grid; }
.reel__word span{
  grid-area:1/1; color:#fff; font-size:clamp(20px,3.1vw,44px); font-weight:300;
  letter-spacing:.42em; text-indent:.42em; white-space:nowrap;
  opacity:0; transform:translateY(14px); filter:blur(6px);
  transition:opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease);
}
.reel__word span.on{ opacity:1; transform:none; filter:blur(0); }
.reel__copy{
  position:absolute; right:var(--pad); bottom:clamp(30px,5vw,60px); z-index:2;
  max-width:36ch; color:rgba(255,255,255,.82); font-size:14px; line-height:1.65;
}

/* ═══════════ CAPABILITIES ═══════════ */
.caps{ padding:clamp(70px,9vw,130px) 0; }
.caps__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
             background:var(--line); border:1px solid var(--line); border-radius:20px;
             overflow:hidden; }
.cap{ background:var(--paper); padding:clamp(24px,2.6vw,40px);
      display:flex; flex-direction:column; gap:12px; transition:background .5s var(--ease); }
.cap:hover{ background:var(--paper-2); }
.cap__n{ color:var(--green); }
.cap h3{ font-size:clamp(18px,1.75vw,23px); font-weight:400; letter-spacing:-.03em;
         line-height:1.2; }
.cap p{ font-size:14.5px; color:var(--ink-2); }
.cap__stack{ color:var(--green) !important; font-family:var(--mono); font-size:9.5px !important;
             letter-spacing:.08em; text-transform:uppercase; line-height:1.8; margin-top:auto;
             padding-top:8px; }

/* "see everything" button under a teaser grid */
.more{ display:flex; justify-content:center; margin-top:clamp(28px,3.4vw,44px); }

/* mission / vision pair */
.mv{ padding:clamp(60px,8vw,110px) 0; }
.mv__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
           gap:clamp(28px,4vw,64px); padding-bottom:clamp(30px,4vw,56px);
           border-bottom:1px solid var(--line); }
.mv__p{ font-size:clamp(18px,2vw,26px); font-weight:300; line-height:1.35;
        letter-spacing:-.028em; max-width:34ch; padding-bottom:.06em; }

/* why-us band reuses the capability card grid */
.edge{ padding:clamp(60px,8vw,110px) 0; background:var(--paper-2); }
.edge .caps__grid{ background:var(--line); }
.edge .cap{ background:var(--paper); }

/* ═══════════ FAN GALLERY ═══════════ */
.fan{ padding:clamp(70px,9vw,120px) 0 clamp(50px,6vw,80px); overflow:hidden; text-align:center; }
.fan__title{ margin-bottom:clamp(30px,4vw,54px); padding-inline:var(--pad); }
.fan__deck{
  --fan-ang:7deg; --fan-rise:22px;
  position:relative; display:flex; justify-content:center; align-items:flex-end;
  gap:clamp(5px,1.2vw,18px); height:clamp(260px,38vw,470px);
  padding-inline:var(--pad);
}
.fcard{
  position:relative; width:clamp(62px,12vw,168px); flex-shrink:0;
  transform:rotate(0deg) translateY(60px); opacity:0;
  transition:transform 1.1s var(--ease), opacity .8s var(--ease);
  transition-delay:calc(abs(var(--i)) * 70ms);
}
.fan.in .fcard{
  opacity:1;
  transform:rotate(calc(var(--i) * var(--fan-ang)))
            translateY(calc(abs(var(--i)) * var(--fan-rise)));
}
.fcard__art{
  width:100%; aspect-ratio:9/16; border-radius:16px; overflow:hidden;
  box-shadow:0 18px 46px -18px rgba(10,11,12,.42);
  background:#111417;
}
.fcard__art--a{ background:
  radial-gradient(70% 50% at 30% 20%, rgba(0,163,74,.55), transparent 70%),
  repeating-linear-gradient(115deg,#15191D 0 9px,#1D2226 9px 18px); }
.fcard__art--b{ background:
  radial-gradient(60% 40% at 70% 30%, rgba(130,195,255,.5), transparent 70%),
  repeating-linear-gradient(0deg,#12161A 0 7px,#1B2025 7px 14px); }
.fcard__art--c{ background:
  radial-gradient(75% 55% at 50% 75%, rgba(255,255,255,.55), transparent 70%),
  linear-gradient(160deg,#0D1013,#2A3138); }
.fcard__art--d{ background:
  radial-gradient(65% 45% at 25% 70%, rgba(255,200,150,.5), transparent 70%),
  repeating-linear-gradient(60deg,#141A1E 0 11px,#1C242A 11px 22px); }
.fcard__art--e{ background:
  radial-gradient(70% 50% at 60% 25%, rgba(0,163,74,.42), transparent 70%),
  linear-gradient(200deg,#101418,#242C33); }

.fan__logos{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,4vw,56px);
  margin-top:clamp(34px,4vw,56px); padding-inline:var(--pad);
}
.fan__logos span{ font-size:clamp(13px,1.4vw,18px); color:var(--ink-3); font-weight:300;
                  letter-spacing:-.02em; transition:color .3s; }
.fan__logos span:hover{ color:var(--ink); }

/* ═══════════ WORK ═══════════ */
.work{ padding:clamp(70px,9vw,130px) 0; background:var(--paper-2); }
.proj{ margin-bottom:clamp(40px,5vw,76px); cursor:pointer; }
.proj:last-child{ margin-bottom:0; }
.proj__art{
  width:100%; aspect-ratio:16/7.4; border-radius:20px; overflow:hidden;
  transition:transform .8s var(--ease); background:#12161A;
}
.proj:hover .proj__art{ transform:scale(.985); }
.proj__art--gov{ background:
  radial-gradient(60% 80% at 20% 30%, rgba(0,163,74,.45), transparent 65%),
  repeating-linear-gradient(100deg,#14181C 0 14px,#1C2126 14px 28px); }
.proj__art--net{ background:
  radial-gradient(55% 75% at 78% 40%, rgba(130,195,255,.42), transparent 65%),
  repeating-linear-gradient(0deg,#12161A 0 10px,#1A1F24 10px 20px); }
.proj__art--pha{ background:
  radial-gradient(60% 80% at 45% 75%, rgba(255,205,160,.40), transparent 65%),
  linear-gradient(140deg,#0E1215,#262E35); }
.proj__art--chain{ background:
  radial-gradient(55% 70% at 65% 30%, rgba(0,163,74,.36), transparent 65%),
  repeating-linear-gradient(45deg,#131A1E 0 16px,#1B242A 16px 32px); }

.proj__meta{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-top:20px;
}
.proj__meta h3{ font-size:clamp(18px,2vw,27px); font-weight:400; letter-spacing:-.035em; }
.proj__meta p{ color:var(--ink-3); margin-top:6px; }
.tags{ display:flex; flex-wrap:wrap; gap:7px; }
.tags li{ padding:7px 13px; border-radius:999px; background:var(--paper);
          border:1px solid var(--line); color:var(--ink-2);
          font-family:var(--mono); font-size:9.5px; letter-spacing:.08em;
          text-transform:uppercase; }
.proj__note{ margin-top:12px; max-width:62ch; color:var(--ink-2); font-size:15px; }
.proj__note b{ font-weight:500; color:var(--ink); }

/* ═══════════ INDUSTRIES ═══════════ */
.inds{ padding:clamp(70px,9vw,130px) 0; }
.inds__list li{
  position:relative; display:grid;
  grid-template-columns:48px minmax(0,1fr) minmax(0,1.2fr) 30px;
  gap:clamp(14px,3vw,44px); align-items:baseline;
  padding:clamp(20px,2.6vw,32px) 0; border-top:1px solid var(--line);
  transition:padding-left .6s var(--ease);
}
.inds__list li:last-child{ border-bottom:1px solid var(--line); }
.inds__list li:hover{ padding-left:clamp(6px,1.2vw,20px); }
.inds__list span{ color:var(--ink-3); font-family:var(--mono); font-size:10.5px;
                  letter-spacing:.11em; }
.inds__list h3{ font-size:clamp(18px,2.2vw,30px); font-weight:400; letter-spacing:-.035em;
                line-height:1.15; }
.inds__list p{ color:var(--ink-2); font-size:14.5px; }
.inds__list i{ justify-self:end; font-style:normal; color:var(--ink-3); font-size:17px;
               transition:transform .5s var(--ease), color .4s; }
.inds__list li:hover i{ transform:translate(4px,-4px); color:var(--green); }

/* ═══════════ APPROACH ═══════════ */
.steps{ padding:clamp(70px,9vw,130px) 0; background:var(--paper-2); }
.steps__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
              background:var(--line); border:1px solid var(--line);
              border-radius:20px; overflow:hidden; }
.step{ background:var(--paper); padding:clamp(24px,2.4vw,36px);
       display:flex; flex-direction:column; gap:11px; }
.step span{ color:var(--green); }
.step h3{ font-size:clamp(20px,2vw,26px); font-weight:400; letter-spacing:-.035em; }
.step p{ font-size:14px; color:var(--ink-2); }

/* ═══════════ TEAM ═══════════ */
.team{ padding:clamp(70px,9vw,130px) 0; }
.team__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
             gap:clamp(20px,2.6vw,36px); }
.person{ display:flex; flex-direction:column; gap:10px; }
.person__art{
  aspect-ratio:4/3.1; border-radius:18px; display:grid; place-items:center;
  margin-bottom:8px; overflow:hidden;
  background:
    radial-gradient(60% 60% at 30% 26%, rgba(0,163,74,.40), transparent 70%),
    radial-gradient(55% 55% at 74% 72%, rgba(140,190,255,.34), transparent 70%),
    linear-gradient(150deg,#EDEFF0,#DCE0E2);
  transition:transform .8s var(--ease);
}
.person:hover .person__art{ transform:scale(1.015); }
.person__art--b{ background:
  radial-gradient(58% 58% at 72% 28%, rgba(0,163,74,.34), transparent 70%),
  radial-gradient(50% 50% at 24% 74%, rgba(255,200,160,.34), transparent 70%),
  linear-gradient(200deg,#EFF0F1,#DDE1E3); }
.person__art--c{ background:
  radial-gradient(62% 62% at 50% 78%, rgba(0,163,74,.30), transparent 68%),
  radial-gradient(46% 46% at 30% 22%, rgba(190,170,255,.32), transparent 70%),
  linear-gradient(120deg,#EEEFF0,#DBDFE1); }
.person__art span{ font-size:clamp(34px,3.6vw,52px); font-weight:300; letter-spacing:-.05em;
                   color:rgba(10,11,12,.5); }
.person > p.mono{ color:var(--green); }
.person h3{ font-size:clamp(19px,1.9vw,25px); font-weight:400; letter-spacing:-.035em; }
.person__bio{ font-size:14px; color:var(--ink-2); flex:1; }
.person__links{ display:flex; flex-wrap:wrap; gap:7px; margin-top:4px; }
.chip{ padding:8px 13px; border-radius:999px; background:var(--paper-2);
       color:var(--ink-2); font-size:9.5px; transition:background .35s, color .35s; }
.chip:hover{ background:var(--ink); color:#fff; }

/* ═══════════ CONTACT ═══════════ */
.contact{ padding:clamp(70px,9vw,130px) 0; text-align:center; }
.avail{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-3);
        margin-bottom:16px; }
.avail i{ width:7px; height:7px; border-radius:50%; background:var(--green);
          box-shadow:0 0 0 0 rgba(0,163,74,.45); animation:pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(0,163,74,0); }
                  100%{ box-shadow:0 0 0 0 rgba(0,163,74,0); } }
.contact__h{ font-size:clamp(38px,7vw,96px); font-weight:400; letter-spacing:-.05em;
             line-height:1; margin-bottom:clamp(34px,4.5vw,58px); }
.form{ max-width:600px; margin-inline:auto; display:flex; flex-direction:column; gap:10px;
       text-align:left; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.field input,.field textarea{
  width:100%; padding:17px 18px; background:var(--paper-2); border-radius:12px;
  font-size:14.5px; resize:vertical; border:1px solid transparent;
  transition:background .35s, border-color .35s;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3); }
.field input:focus,.field textarea:focus{ background:#fff; border-color:var(--ink); }
.field.bad input,.field.bad textarea{ border-color:#C6483C; }
.form__note{ color:var(--green); min-height:16px; text-align:center; }
.form__note.bad{ color:#C6483C; }
.contact__details{ display:flex; flex-wrap:wrap; justify-content:center;
                   gap:12px clamp(20px,3vw,40px); margin-top:clamp(30px,4vw,48px);
                   color:var(--ink-3); }

/* ═══════════ FOOTER ═══════════ */
.foot{ padding:clamp(50px,6vw,80px) 0 24px; border-top:1px solid var(--line); }
.foot__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
             gap:clamp(20px,3vw,40px); padding-bottom:clamp(40px,6vw,72px); }
.foot__cols > div{ display:flex; flex-direction:column; gap:8px; }
.foot__cols p.mono{ color:var(--ink-3); margin-bottom:5px; }
.foot__cols a,.foot__cols span:not(.mono){ font-size:14px; color:var(--ink-2);
        width:fit-content; transition:color .3s, transform .4s var(--ease); }
.foot__cols a:hover{ color:var(--ink); transform:translateX(4px); }
.clock{ color:var(--green) !important; font-size:14px !important; letter-spacing:.05em !important;
        font-variant-numeric:tabular-nums; }
.foot__mark{ overflow:hidden; border-top:1px solid var(--line); padding-top:20px; }
.foot__mark span{
  display:block; text-align:center; font-size:clamp(44px,13.4vw,208px); font-weight:300;
  /* line-height under 1 puts the glyph's descender outside the line box, and the
     clip box above then slices the y-tail off — pad it back in */
  line-height:1; padding-bottom:.2em; letter-spacing:-.055em; color:var(--paper-3);
  transform:translateY(26%); transition:transform 1.3s var(--ease);
}
.foot__mark.in span{ transform:none; }
.foot__base{ display:flex; justify-content:space-between; align-items:baseline;
             gap:10px 26px; flex-wrap:wrap; padding-top:6px; color:var(--ink-3); }
.foot__credit a{ color:var(--ink-2); transition:color .3s; }
.foot__credit a:hover{ color:var(--green); }
.foot__credit i{ font-style:normal; display:inline-block;
                 transition:transform .4s var(--ease); }
.foot__credit a:hover i{ transform:translate(2px,-2px); }

/* ═══════════ REVEALS ═══════════ */
.rv{ opacity:0; transform:translateY(24px); }
.rv.in{ opacity:1; transform:none;
        transition:opacity .9s var(--ease), transform 1s var(--ease);
        transition-delay:calc(var(--d,0) * 80ms); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1080px){
  .caps__grid{ grid-template-columns:repeat(2,1fr); }
  .steps__grid{ grid-template-columns:repeat(2,1fr); }
  .pill--seg{ display:none; }
}
@media (max-width:820px){
  .hand{ width:58vw; opacity:.5; }
  .stat{ grid-template-columns:1fr auto; row-gap:16px; }
  .stat__track{ grid-column:1 / -1; }
  .reel__copy{ left:var(--pad); right:var(--pad); max-width:none; }
  .inds__list li{ grid-template-columns:34px minmax(0,1fr); }
  .inds__list i{ display:none; }
  .inds__list p{ grid-column:2; margin-top:6px; }
}
@media (max-width:640px){
  .caps__grid,.steps__grid{ grid-template-columns:1fr; }
  .f2{ grid-template-columns:1fr; }
  .nav__brand span{ display:none; }
  .hero__foot{ flex-direction:column; align-items:flex-start; }
  .foot__base{ flex-direction:column; gap:6px; }
  .menu__foot{ flex-direction:column; gap:5px; }
  /* keep the whole fan inside the viewport — rotation widens the outer cards */
  .fan__deck{ --fan-ang:5deg; --fan-rise:14px; gap:4px; }
  .fcard{ width:min(15.5vw,168px); }
}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
                        transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1 !important; transform:none !important; }
  .hero__title .line i,.pre__word i{ transform:none !important; }
  .fan .fcard{ opacity:1; transform:rotate(calc(var(--i) * 7deg)); }
  .foot__mark span{ transform:none; }
  .cursor,.pre,.reel__canvas{ display:none; }
  .reel__word span{ opacity:0; } .reel__word span.on{ opacity:1; transform:none; filter:none; }
}