@charset "UTF-8";
/* ==========================================================================
   Eagles Enterprise — Design System
   Palette derived from the brandmark: azure #1870b0 / deep navy #002048
   ========================================================================== */

@import url("../fonts/fonts.css");

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Ground */
  --void:      #04070f;
  --ink:       #070c18;
  --surface:   #0b1425;
  --surface-2: #101c33;
  --surface-3: #16243d;

  /* Brand */
  --azure:      #1870b0;
  --azure-lit:  #2e91d8;
  --azure-glow: #64bdf5;
  --azure-deep: #002048;
  --sand:       #e7d3a4;

  /* Type */
  --paper: #eef4fb;
  --text:  #becfe3;
  --muted: #7d92ae;
  --faint: #6a80a6;   /* 5.0:1 on --void; #4f6484 measured 3.35:1, under AA */

  /* Lines */
  --line:   rgba(140, 180, 230, .12);
  --line-2: rgba(140, 180, 230, .22);
  --line-3: rgba(140, 180, 230, .34);

  /* Families */
  --f-display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Rhythm */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --shell: 1440px;
  --sec: clamp(5.5rem, 12vw, 11rem);
  --r: 4px;

  /* Motion */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io:  cubic-bezier(.65, .05, .2, 1);

  --nav-h: 78px;
  color-scheme: dark;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--azure) var(--ink);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-synthesis-weight: none;
}
body.is-locked { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; border: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--azure); color: #fff; }

:focus-visible {
  outline: 2px solid var(--azure-glow);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 999;
  padding: .7rem 1.2rem; background: var(--azure); color: #fff;
  font: 500 .8rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  transform: translateY(-160%); transition: transform .3s var(--e-out);
}
.skip-link:focus { transform: none; }

.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Layout ---------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.shell-narrow { max-width: 940px; }
section { position: relative; }
.sec { padding-block: var(--sec); }
.sec-t { padding-top: var(--sec); }
.sec-b { padding-bottom: var(--sec); }

.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- 4. Typography ------------------------------------------------ */
.d1, .d2, .d3, .d4 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--paper);
}
.d1 { font-size: clamp(3.4rem, 11.5vw, 10.5rem); line-height: .89; letter-spacing: -.035em; }
.d2 { font-size: clamp(2.6rem, 7.4vw, 6.2rem);  line-height: .95; letter-spacing: -.028em; }
.d3 { font-size: clamp(2rem, 4.6vw, 3.6rem);    line-height: 1.02; }
.d4 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.14; }
.it { font-style: italic; }
.azure { color: var(--azure-lit); }
.sand  { color: var(--sand); }
.dim   { color: var(--muted); }

.h-sans {
  font-family: var(--f-sans); font-weight: 600;
  letter-spacing: -.02em; color: var(--paper);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.25;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font: 500 clamp(.63rem, .78vw, .72rem)/1 var(--f-mono);
  letter-spacing: .22em; text-transform: uppercase; color: var(--azure-lit);
}
.eyebrow::before {
  content: ""; width: clamp(20px, 3vw, 46px); height: 1px;
  background: currentColor; opacity: .6; flex: none;
}
.eyebrow.no-rule::before { display: none; }
.eyebrow.muted { color: var(--faint); }

.lead {
  font-size: clamp(1.02rem, 1.45vw, 1.25rem);
  line-height: 1.62; color: var(--text); max-width: 62ch;
}
.body-lg { font-size: clamp(.98rem, 1.15vw, 1.08rem); line-height: 1.68; color: var(--muted); }
.small { font-size: .875rem; line-height: 1.6; color: var(--muted); }
.mono {
  font: 500 .7rem/1.4 var(--f-mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.idx {
  font: 400 clamp(.72rem, .9vw, .82rem)/1 var(--f-mono);
  letter-spacing: .1em; color: var(--azure); font-variant-numeric: tabular-nums;
}

.sec-head { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); max-width: 60ch; }
.sec-head.wide { max-width: 78ch; }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  --bg: var(--azure); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; gap: .8rem;
  padding: 1.05rem 1.9rem;
  font: 500 .78rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg); background: var(--bg);
  border-radius: var(--r); overflow: hidden; isolation: isolate;
  transition: color .4s var(--e-out), border-color .4s var(--e-out);
  will-change: transform;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--paper);
  transform: translateY(101%); transition: transform .55s var(--e-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--void); }
.btn .ar { transition: transform .45s var(--e-out); flex: none; }
.btn:hover .ar { transform: translate(4px, -4px); }

.btn-ghost {
  --bg: transparent; --fg: var(--paper);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: transparent; }

.btn-sm { padding: .85rem 1.4rem; font-size: .7rem; }

/* Underline link */
.ulink {
  display: inline-flex; align-items: center; gap: .55rem;
  font: 500 .76rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper); padding-bottom: .5rem;
  background-image: linear-gradient(var(--azure-lit), var(--azure-lit));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .5s var(--e-out), color .35s;
}
.ulink:hover, .ulink:focus-visible { background-size: 100% 1px; color: var(--azure-glow); }
.ulink .ar { transition: transform .45s var(--e-out); }
.ulink:hover .ar { transform: translate(4px, -4px); }

/* ---------- 6. Preloader ------------------------------------------------- */
.pre { display: none; }
.js .pre {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--void);
}
.pre__mark {
  width: clamp(90px, 13vw, 150px); aspect-ratio: 1000 / 747.75;
  background: var(--azure);
  -webkit-mask: url("../brand/eagle.svg") center/contain no-repeat;
  mask: url("../brand/eagle.svg") center/contain no-repeat;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.15s var(--e-out);
}
.pre.go .pre__mark { clip-path: inset(0 0 0 0); }
.pre__bar {
  position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(2rem, 5vw, 3.4rem);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.pre__label { font: 500 .68rem/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--faint); }
.pre__num {
  font: 400 clamp(1.6rem, 4vw, 2.6rem)/1 var(--f-mono);
  color: var(--paper); font-variant-numeric: tabular-nums;
}
.pre__track { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.pre__fill { height: 100%; width: 0; background: var(--azure-lit); }
.pre.done { pointer-events: none; }

/* ---------- 7. Curtain (page transitions) -------------------------------- */
.curtain {
  position: fixed; inset: 0; z-index: 290; pointer-events: none;
  background: var(--void);
  transform: translateY(100%);
}
.curtain__mark {
  position: absolute; inset: 0; margin: auto;
  width: clamp(72px, 9vw, 104px); aspect-ratio: 1000 / 747.75;
  background: var(--azure); opacity: 0;
  -webkit-mask: url("../brand/eagle.svg") center/contain no-repeat;
  mask: url("../brand/eagle.svg") center/contain no-repeat;
}

/* ---------- 8. Grain + ambience ------------------------------------------ */
/* Viewport-sized box (an oversized one adds phantom scroll width on narrow
   screens); the drift comes from the tiled background, not a transform. */
.grain {
  position: fixed; inset: 0; z-index: 250; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%,100% { background-position:   0px    0px }
  10%     { background-position:  -7px  -14px }
  20%     { background-position: -21px    7px }
  30%     { background-position:  10px  -35px }
  40%     { background-position:  -7px   35px }
  50%     { background-position: -21px   14px }
  60%     { background-position:  21px    0px }
  70%     { background-position:   0px   21px }
  80%     { background-position:   4px   49px }
  90%     { background-position: -14px   14px }
}

/* ---------- 9. Cursor ---------------------------------------------------- */
.cur, .cur-dot {
  position: fixed; top: 0; left: 0; z-index: 280; pointer-events: none;
  border-radius: 50%; will-change: transform; opacity: 0;
}
.cur {
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1px solid var(--line-3);
  transition: width .4s var(--e-out), height .4s var(--e-out),
              margin .4s var(--e-out), background-color .4s var(--e-out),
              border-color .4s var(--e-out), opacity .3s;
  display: grid; place-items: center;
}
.cur__label {
  font: 500 .55rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--void); opacity: 0; transition: opacity .25s; white-space: nowrap;
}
.cur-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--azure-glow); transition: opacity .3s; }
body.cur-on .cur, body.cur-on .cur-dot { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .cur, .cur-dot, .preview { display: none !important; }
}
body.cur-hot .cur { width: 62px; height: 62px; margin: -31px 0 0 -31px; border-color: var(--azure-lit); background: rgba(46,145,216,.1); }
body.cur-view .cur {
  width: 92px; height: 92px; margin: -46px 0 0 -46px;
  background: var(--azure-lit); border-color: var(--azure-lit);
}
body.cur-view .cur__label { opacity: 1; }
body.cur-view .cur-dot { opacity: 0; }

/* ---------- 10. Header --------------------------------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: transform .55s var(--e-out), background-color .45s, backdrop-filter .45s, border-color .45s;
  border-bottom: 1px solid transparent;
}
.hdr.stuck {
  background: rgba(4, 7, 15, .72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
}
.hdr.hide { transform: translateY(-100%); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; }

.brand { display: inline-flex; align-items: center; gap: .78rem; flex: none; }
.brand__mark {
  width: 40px; aspect-ratio: 1000 / 747.75; flex: none;
  background: var(--azure-lit);
  -webkit-mask: url("../brand/eagle.svg") center/contain no-repeat;
  mask: url("../brand/eagle.svg") center/contain no-repeat;
  transition: background-color .4s, transform .6s var(--e-out);
}
.brand:hover .brand__mark { background: var(--azure-glow); transform: translateY(-2px); }
.brand__txt { display: grid; gap: .22rem; }
.brand__n {
  font: 600 .78rem/1 var(--f-sans); letter-spacing: .2em;
  text-transform: uppercase; color: var(--paper);
}
.brand__s { font: 400 .55rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }

.nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.6rem); }
.nav a {
  position: relative; font: 500 .74rem/1 var(--f-mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  padding-block: .5rem; transition: color .35s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--azure-lit); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .5s var(--e-out);
}
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { color: var(--paper); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav a[aria-current="page"] { color: var(--azure-lit); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.hdr__cta { display: flex; align-items: center; gap: 1rem; }

/* Burger */
.burger {
  display: none; width: 46px; height: 46px; position: relative;
  border: 1px solid var(--line-2); border-radius: var(--r); flex: none;
}
.burger span {
  position: absolute; left: 13px; width: 20px; height: 1.5px; background: var(--paper);
  transition: transform .45s var(--e-out), opacity .25s;
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 26px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 195;
  background: var(--ink);
  display: grid; grid-template-rows: var(--nav-h) 1fr auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--e-io);
  visibility: hidden;
}
body.menu-open .drawer { clip-path: inset(0 0 0 0); visibility: visible; }
.drawer__nav {
  display: grid; align-content: center; gap: clamp(.2rem, 1.4vw, .6rem);
  padding-inline: var(--gut);
}
.drawer__nav a {
  font-family: var(--f-display); font-size: clamp(2.4rem, 11vw, 4.2rem);
  line-height: 1.16; color: var(--paper); display: flex; align-items: baseline; gap: 1rem;
  opacity: 0; transform: translateY(28px);
  transition: opacity .6s var(--e-out), transform .6s var(--e-out), color .3s;
}
body.menu-open .drawer__nav a { opacity: 1; transform: none; }
.drawer__nav a:nth-child(1) { transition-delay: .16s }
.drawer__nav a:nth-child(2) { transition-delay: .22s }
.drawer__nav a:nth-child(3) { transition-delay: .28s }
.drawer__nav a:nth-child(4) { transition-delay: .34s }
.drawer__nav a:nth-child(5) { transition-delay: .40s }
.drawer__nav a:hover, .drawer__nav a[aria-current="page"] { color: var(--azure-lit); }
.drawer__nav .n { font: 400 .68rem/1 var(--f-mono); color: var(--azure); letter-spacing: .1em; }
.drawer__foot {
  padding: 0 var(--gut) clamp(2rem, 6vw, 3rem);
  display: grid; gap: 1.1rem; border-top: 1px solid var(--line); padding-top: 1.6rem;
}

/* ---------- 11. Hero ----------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
}
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 78% at 50% 108%, rgba(4,7,15,.94) 0%, rgba(4,7,15,.5) 46%, transparent 74%),
    linear-gradient(to bottom, rgba(4,7,15,.86) 0%, rgba(4,7,15,.18) 26%, transparent 50%);
}
.hero__mark {
  position: absolute; z-index: 1; pointer-events: none;
  left: 50%; top: 40%; translate: -50% -50%;
  width: min(78vw, 820px); aspect-ratio: 1000 / 747.75;
  background: var(--azure);
  -webkit-mask: url("../brand/eagle.svg") center/contain no-repeat;
  mask: url("../brand/eagle.svg") center/contain no-repeat;
  opacity: .075;
}
.hero__in {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(7rem, 14vh, 10rem) clamp(2.6rem, 6vh, 4.2rem);
}
.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.4rem); }
.hero__title { max-width: 15ch; }
.hero__foot {
  display: grid; gap: clamp(1.6rem, 3vw, 2.6rem);
  grid-template-columns: 1fr;
  align-items: end;
  border-top: 1px solid var(--line); padding-top: clamp(1.4rem, 2.6vw, 2.2rem);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

.scroll-cue {
  position: absolute; z-index: 2; left: 50%; translate: -50% 0; bottom: 0;
  display: grid; justify-items: center; gap: .55rem;
  transition: opacity .5s var(--e-out);
}
.scroll-cue.gone { opacity: 0; }
.scroll-cue .mono { display: none; }
.scroll-cue__line { width: 1px; height: 56px; background: linear-gradient(transparent, rgba(46,145,216,.5)); }
.scroll-cue__line::after {
  content: ""; display: block; width: 1px; height: 14px; background: var(--azure-glow);
  animation: cue 2.4s var(--e-io) infinite;
}
@keyframes cue { 0% { transform: translateY(-18px); opacity: 0 } 40% { opacity: 1 } 100% { transform: translateY(56px); opacity: 0 } }

/* Split-line reveal — lines are authored explicitly, never measured */
/* padding+negative margin lets descenders (y, p, g) escape the clip box
   without changing the line rhythm. .18em clears the display faces at the
   tight line-heights used by .d1/.d2. */
.rv-line { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.rv-in { display: block; will-change: transform; }
/* Only opacity here: GSAP owns .rv-in transforms entirely. Setting transform
   in CSS as well makes GSAP treat it as the base and double-shifts the line. */
.js [data-lines] { opacity: 0; }
.js [data-stagger] { opacity: 0; }
.rv-ready [data-lines], .rv-ready [data-stagger] { opacity: 1; }

/* ---------- 12. Marquee -------------------------------------------------- */
.marq { overflow: hidden; display: flex; gap: 0; user-select: none; -webkit-user-select: none; }
.marq__track {
  display: flex; align-items: center; gap: clamp(1.6rem, 3.4vw, 3.2rem);
  padding-right: clamp(1.6rem, 3.4vw, 3.2rem); flex: none;
  animation: marq 46s linear infinite;
}
.marq:hover .marq__track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-100%) } }
.marq__item {
  display: inline-flex; align-items: center; gap: clamp(1.6rem, 3.4vw, 3.2rem);
  font: 500 clamp(.72rem, 1vw, .82rem)/1 var(--f-mono);
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.marq__item::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--azure); flex: none; }
.marq-lg .marq__item { font-family: var(--f-display); font-size: clamp(1.6rem, 4vw, 3.2rem); letter-spacing: -.01em; text-transform: none; color: var(--faint); }
.marq-lg .marq__item::after { width: 8px; height: 8px; }

/* ---------- 13. Ticker bar ----------------------------------------------- */
.factbar {
  display: grid; gap: 1px; background: var(--line);
  border-block: 1px solid var(--line);
  grid-template-columns: repeat(2, 1fr);
}
.factbar__i { background: var(--void); padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.1rem, 2vw, 1.8rem); display: grid; gap: .5rem; }
.factbar__n {
  font-family: var(--f-display); font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1; color: var(--paper); font-variant-numeric: tabular-nums;
}
.factbar__l { font: 500 .63rem/1.5 var(--f-mono); letter-spacing: .17em; text-transform: uppercase; color: var(--faint); }

/* ---------- 14. Sticky service cards ------------------------------------- */
.stack { display: grid; gap: 0; }
.stack__card {
  position: sticky; top: calc(var(--nav-h) + 22px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(1.6rem, 3.6vw, 3.4rem);
  overflow: hidden;
  will-change: transform;
}
.stack__card + .stack__card { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.stack__card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 130% at 88% -10%, rgba(24,112,176,.2), transparent 62%);
}
.stack__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; }
.stack__body { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.stack__title { max-width: 18ch; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font: 500 .66rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-2); border-radius: 100px;
  padding: .55rem .85rem; transition: border-color .35s, color .35s;
}
.chip:hover { border-color: var(--azure); color: var(--paper); }
.deliver { display: grid; gap: .1rem; }
.deliver li {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
  padding-block: .78rem; border-top: 1px solid var(--line);
  font-size: .93rem; color: var(--text);
}
.deliver li:last-child { border-bottom: 1px solid var(--line); }
.deliver .k { font: 400 .68rem/1.7 var(--f-mono); color: var(--azure); }

/* ---------- 15. Project index -------------------------------------------- */
.pindex { border-top: 1px solid var(--line); }
.prow {
  position: relative; display: block;
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.4rem, 3vw, 2.3rem);
  transition: padding-left .6s var(--e-out);
}
/* The hover wash bleeds into the shell gutter — matching --gut exactly means
   it reaches the viewport edge without ever pushing past it. */
.prow::before {
  content: ""; position: absolute; inset: 0 calc(-1 * var(--gut)); z-index: -1;
  background: linear-gradient(90deg, rgba(24,112,176,.16), transparent 70%);
  opacity: 0; transition: opacity .5s var(--e-out);
}
@media (hover: hover) {
  .prow:hover { padding-left: clamp(.6rem, 1.6vw, 1.4rem); }
  .prow:hover::before { opacity: 1; }
}
.prow__in {
  display: grid; gap: .55rem 1.4rem; align-items: baseline;
  grid-template-columns: auto 1fr;
}
.prow__n { font: 400 .72rem/1.8 var(--f-mono); color: var(--azure); font-variant-numeric: tabular-nums; }
.prow__name {
  font-family: var(--f-display); font-size: clamp(1.7rem, 4.4vw, 3.3rem);
  line-height: 1.04; color: var(--paper); transition: color .4s;
}
.prow:hover .prow__name { color: var(--azure-glow); }
/* grid-column belongs to the project-index row only. Unscoped it forced a
   second implicit column on any grid reusing .prow__meta — which broke the
   case-study body on mobile. */
.prow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; }
.prow__in > .prow__meta { grid-column: 2; }
.prow__tag { font: 500 .63rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.prow__tag.hl { color: var(--sand); }
.prow__thumb { display: none; }

.preview {
  position: fixed; top: 0; left: 0; z-index: 6; pointer-events: none;
  width: clamp(240px, 24vw, 380px); aspect-ratio: 3 / 2;
  margin: calc(-1 * clamp(240px, 24vw, 380px) / 3) 0 0 calc(-1 * clamp(240px, 24vw, 380px) / 2);
  border-radius: 4px; overflow: hidden; opacity: 0;
  will-change: transform; background: var(--surface);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.75);
}
.preview img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.preview img.on { opacity: 1; }

/* ---------- 16. Case study cards (projects page) ------------------------- */
.case { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; }
.case__media {
  position: relative; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
}
.case__media img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  filter: saturate(.72) contrast(1.04) brightness(.92);
  transition: filter .8s var(--e-out), transform 1.1s var(--e-out);
  will-change: transform;
}
.case__media:hover img { filter: none; transform: scale(1.035); }
.case__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(24,112,176,.22), transparent 55%);
  mix-blend-mode: screen; transition: opacity .8s;
}
.case__media:hover::after { opacity: .3; }
.case__body { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
/* Always an even 2x2 so a four-item list never leaves a hole */
.case__kv {
  display: grid; grid-template-columns: 1fr;
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
@media (min-width: 460px) { .case__kv { grid-template-columns: repeat(2, 1fr); } }
.case__kv > div { background: var(--void); padding: 1rem 1.1rem; display: grid; gap: .35rem; }
.case__kv dt { font: 500 .6rem/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.case__kv dd { margin: 0; font-size: .88rem; color: var(--text); }

.metric {
  display: flex; align-items: baseline; gap: .9rem;
  border-left: 2px solid var(--azure); padding-left: 1.1rem;
}
.metric__n { font-family: var(--f-display); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: .9; color: var(--paper); }
.metric__l { font-size: .88rem; color: var(--muted); max-width: 26ch; }

.quote {
  display: grid; gap: 1rem;
  border-left: 1px solid var(--line-2); padding-left: clamp(1.1rem, 2.4vw, 1.8rem);
}
.quote__t {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(1.2rem, 2.1vw, 1.65rem); line-height: 1.32; color: var(--paper);
}
.quote__a { font: 500 .68rem/1.6 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--azure-lit); }

/* ---------- 17. Cards / grids -------------------------------------------- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.g-2 { grid-template-columns: 1fr; }
.g-3 { grid-template-columns: 1fr; }
.g-4 { grid-template-columns: 1fr; }
.g-2x { grid-template-columns: 1fr; }

.card {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: 6px;
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  display: grid; gap: .9rem; align-content: start;
  overflow: hidden; transition: border-color .5s, background-color .5s, transform .5s var(--e-out);
}
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(70% 100% at 50% 0%, rgba(24,112,176,.22), transparent 65%);
  transition: opacity .55s;
}
.card:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateY(-3px); }
.card:hover::before { opacity: 1; }
.card__n { font: 400 .68rem/1 var(--f-mono); color: var(--azure); letter-spacing: .1em; }
.card__t { font-family: var(--f-sans); font-weight: 600; font-size: 1.06rem; letter-spacing: -.01em; color: var(--paper); line-height: 1.3; }
.card__p { font-size: .91rem; line-height: 1.62; color: var(--muted); }
.card--flat { background: transparent; }
.card--flat:hover { background: var(--surface); }

.icard {
  display: grid; gap: .9rem; padding-block: clamp(1.3rem, 2.4vw, 1.9rem);
  border-top: 1px solid var(--line); align-content: start;
}

/* Numbered steps */
.steps { counter-reset: s; display: grid; gap: 0; }
.step {
  counter-increment: s; display: grid; gap: .7rem 1.6rem;
  grid-template-columns: auto 1fr; align-items: start;
  padding-block: clamp(1.4rem, 3vw, 2.2rem); border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: "0" counter(s);
  font: 400 .72rem/1.9 var(--f-mono); color: var(--azure); letter-spacing: .1em;
}
.step__b { display: grid; gap: .55rem; }

/* Stat block */
.stats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; grid-template-columns: repeat(2, 1fr); }
.stat { background: var(--void); padding: clamp(1.4rem, 2.8vw, 2.2rem); display: grid; gap: .6rem; align-content: start; }
.stat__n { font-family: var(--f-display); font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: .95; color: var(--sand); font-variant-numeric: tabular-nums; }
.stat__l { font-size: .86rem; line-height: 1.55; color: var(--muted); }
.stat__src { font: 400 .6rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

/* Sticky section heading inside a two-column split */
@media (min-width: 860px) {
  .stick-head { position: sticky; top: calc(var(--nav-h) + clamp(2rem, 5vw, 4rem)); align-self: start; }
}

/* ---------- 18. Media frames --------------------------------------------- */
.frame { position: relative; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--duo img { filter: saturate(.55) contrast(1.08) brightness(.88); transition: filter .9s var(--e-out); }
.frame--duo:hover img { filter: saturate(1) contrast(1) brightness(1); }
.frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,32,72,.34), rgba(4,7,15,.16));
  mix-blend-mode: multiply;
}
.frame--plain::after { display: none; }
.par { will-change: transform; }

/* ---------- 19. Accordion ------------------------------------------------ */
.acc { border-top: 1px solid var(--line); }
.acc__i { border-bottom: 1px solid var(--line); }
.acc__q {
  width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto;
  gap: 1.4rem; align-items: center; padding-block: clamp(1.15rem, 2.4vw, 1.6rem);
  font-family: var(--f-sans); font-weight: 500; font-size: clamp(1rem, 1.5vw, 1.14rem);
  letter-spacing: -.01em; color: var(--paper); line-height: 1.35;
  transition: color .35s;
}
.acc__q:hover { color: var(--azure-lit); }
.acc__ic { position: relative; width: 16px; height: 16px; flex: none; }
.acc__ic::before, .acc__ic::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--azure-lit);
  transition: transform .5s var(--e-out), opacity .35s;
}
.acc__ic::after { transform: rotate(90deg); }
.acc__i.open .acc__ic::after { transform: rotate(0deg); opacity: 0; }
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--e-io); }
.acc__i.open .acc__a { grid-template-rows: 1fr; }
.acc__a > div { overflow: hidden; }
.acc__a p { padding-bottom: clamp(1.15rem, 2.4vw, 1.6rem); max-width: 74ch; color: var(--muted); font-size: .95rem; line-height: 1.68; }

/* ---------- 20. Testimonials --------------------------------------------- */
.tgrid { display: grid; gap: clamp(1rem, 2vw, 1.4rem); grid-template-columns: 1fr; }
.tcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: clamp(1.5rem, 3vw, 2.2rem); display: grid; gap: 1.2rem; align-content: space-between;
  transition: border-color .5s, transform .5s var(--e-out);
}
.tcard:hover { border-color: var(--line-2); transform: translateY(-3px); }
.tcard__q { font-size: .96rem; line-height: 1.66; color: var(--text); }
.tcard__q::before { content: "“"; font-family: var(--f-display); font-size: 2.6rem; line-height: 0; color: var(--azure); vertical-align: -.32em; margin-right: .18rem; }
.tcard__by { display: grid; gap: .28rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.tcard__n { font-weight: 600; font-size: .9rem; color: var(--paper); }
.tcard__r { font: 400 .64rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }

/* ---------- 21. Founder -------------------------------------------------- */
.founder { display: grid; gap: clamp(1.8rem, 4vw, 3.6rem); align-items: center; }
.founder__img { position: relative; border-radius: 6px; overflow: hidden; }
.founder__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.62) contrast(1.05); }
.founder__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(24,112,176,.3), transparent 46%, rgba(4,7,15,.5));
}
.founder__list { display: grid; gap: 0; }
.founder__list li {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem;
  padding-block: .8rem; border-top: 1px solid var(--line); font-size: .93rem; color: var(--text);
}
.founder__list li:last-child { border-bottom: 1px solid var(--line); }
.founder__list .k { color: var(--azure); font: 400 .68rem/1.7 var(--f-mono); }

/* ---------- 22. CTA ------------------------------------------------------ */
.cta { position: relative; overflow: hidden; text-align: center; }
.cta__mark {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(90vw, 900px); aspect-ratio: 1000 / 747.75;
  background: var(--azure);
  -webkit-mask: url("../brand/eagle.svg") center/contain no-repeat;
  mask: url("../brand/eagle.svg") center/contain no-repeat;
  opacity: .05; pointer-events: none;
}
.cta__in { position: relative; z-index: 1; display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); justify-items: center; }
.cta__glow {
  position: absolute; inset: auto 0 -40% 0; height: 70%; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%, rgba(24,112,176,.34), transparent 70%);
}

/* ---------- 23. Footer --------------------------------------------------- */
.ftr { border-top: 1px solid var(--line); padding-top: clamp(3rem, 6vw, 5rem); }
.ftr__top { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.ftr__brand { display: grid; gap: 1.2rem; align-content: start; }
.ftr__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.ftr h2 { font: 500 .64rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin-bottom: 1.1rem; }
.ftr__cols a, .ftr address a {
  font-size: .9rem; color: var(--muted); transition: color .3s;
  display: inline-block; padding-block: .3rem;
}
.ftr__cols a:hover, .ftr address a:hover { color: var(--azure-lit); }
.ftr address { font-style: normal; font-size: .9rem; line-height: 1.75; color: var(--muted); }
.ftr__bot {
  margin-top: clamp(2.4rem, 5vw, 4rem); border-top: 1px solid var(--line);
  padding-block: 1.6rem clamp(1.6rem, 3vw, 2.2rem);
  display: grid; gap: .8rem;
  font: 400 .68rem/1.7 var(--f-mono); letter-spacing: .08em; color: var(--faint);
}

/* ---------- 24. Forms ---------------------------------------------------- */
.form { display: grid; gap: 1.2rem; }
.f-row { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
.f-field { display: grid; gap: .5rem; }
.f-label { font: 500 .64rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.f-label .req { color: var(--azure-lit); }
.f-input {
  width: 100%; background: var(--surface); border: 1px solid var(--line-2); border-radius: 4px;
  padding: .95rem 1.05rem; font-size: .95rem; color: var(--paper);
  transition: border-color .35s, background-color .35s;
}
.f-input::placeholder { color: var(--faint); }
.f-input:hover { border-color: var(--line-3); }
.f-input:focus { outline: none; border-color: var(--azure-lit); background: var(--surface-2); }
textarea.f-input { min-height: 148px; resize: vertical; line-height: 1.6; }
.f-input[aria-invalid="true"] { border-color: #e4685f; }
.f-err { font: 400 .72rem/1.4 var(--f-sans); color: #f0938c; min-height: 0; }
.f-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .8rem; }
.f-legend { font: 500 .64rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 0; }
.f-hint { font-size: .78rem; color: var(--faint); }
input[type="date"].f-input, input[type="time"].f-input { min-height: 51px; }
::-webkit-calendar-picker-indicator { filter: invert(.7) sepia(1) saturate(3) hue-rotate(175deg); cursor: pointer; }

.f-note {
  display: grid; gap: .5rem; padding: 1rem 1.1rem; border-radius: 4px;
  border: 1px solid var(--line-2); font-size: .9rem;
}
.f-note[hidden] { display: none; }
.f-note.ok { border-color: rgba(46,145,216,.5); background: rgba(24,112,176,.12); color: var(--paper); }
.f-note.bad { border-color: rgba(228,104,95,.5); background: rgba(228,104,95,.1); color: #f4b4ae; }
.btn[aria-busy="true"] { opacity: .65; pointer-events: none; }

/* ---------- 25. Legal / prose -------------------------------------------- */
.prose { max-width: 74ch; display: grid; gap: 1.15rem; }
.prose h2 {
  font-family: var(--f-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--paper); margin-top: clamp(1.6rem, 3vw, 2.6rem);
}
.prose h3 { font-family: var(--f-sans); font-weight: 600; font-size: 1.05rem; color: var(--paper); margin-top: 1rem; letter-spacing: -.01em; }
.prose p, .prose li { font-size: .95rem; line-height: 1.75; color: var(--muted); }
.prose a { color: var(--azure-lit); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--azure-glow); }
.prose ul { display: grid; gap: .6rem; padding-left: 1.1rem; list-style: disc; }
.prose ul li::marker { color: var(--azure); }
.prose strong { color: var(--text); font-weight: 600; }
.prose .meta { font: 400 .7rem/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

/* ---------- 26. Page hero (inner pages) ---------------------------------- */
.phero { position: relative; padding-top: calc(var(--nav-h) + clamp(4.5rem, 11vw, 8.5rem)); overflow: hidden; }
.phero__glow {
  position: absolute; inset: -30% -10% auto; height: 130%; pointer-events: none;
  background: radial-gradient(46% 52% at 52% 22%, rgba(24,112,176,.24), transparent 70%);
}
.phero__in { position: relative; z-index: 1; display: grid; gap: clamp(1.2rem, 2.6vw, 2rem); }

/* Section sub-nav */
.subnav { position: sticky; top: var(--nav-h); z-index: 90; background: rgba(4,7,15,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-block: 1px solid var(--line); }
.subnav__in { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); overflow-x: auto; scrollbar-width: none; padding-block: .95rem; }
.subnav__in::-webkit-scrollbar { display: none; }
.subnav a {
  font: 500 .68rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap; transition: color .3s; padding-block: .25rem;
}
.subnav a:hover, .subnav a.on { color: var(--azure-lit); }

/* ---------- 27. Reveal --------------------------------------------------- */
.js [data-rv] { opacity: 0; }
[data-rv].in { opacity: 1; }

/* ---------- 27b. Cookie notice ------------------------------------------- */
/* Slim bottom bar — never covers a call to action. */
.cookie {
  position: fixed; z-index: 210; inset: auto 0 0 0;
  background: rgba(7, 12, 24, .93);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line-2);
  padding: .95rem var(--gut) max(.95rem, env(safe-area-inset-bottom));
  display: grid; gap: .8rem; align-items: center;
  transform: translateY(110%); opacity: 0;
  transition: transform .75s var(--e-out), opacity .5s;
}
.cookie.in { transform: none; opacity: 1; }
.cookie[hidden] { display: none; }
.cookie p { font-size: .82rem; line-height: 1.55; color: var(--muted); max-width: 78ch; }
.cookie a { color: var(--azure-lit); text-decoration: underline; text-underline-offset: 3px; }
.cookie__btns { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (min-width: 720px) {
  .cookie { grid-template-columns: 1fr auto; gap: 1.6rem; }
}

/* ---------- 28. Progress rail -------------------------------------------- */
.rail { position: fixed; left: 0; top: 0; z-index: 180; width: 2px; height: 100vh; pointer-events: none; }
.rail__fill { width: 100%; height: 100%; background: linear-gradient(var(--azure-glow), var(--azure)); transform: scaleY(0); transform-origin: 0 0; }

/* ---------- 29. Responsive ----------------------------------------------- */
@media (min-width: 560px) {
  .f-row.two { grid-template-columns: 1fr 1fr; }
  .factbar { grid-template-columns: repeat(4, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px) {
  .g-2 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(3, 1fr); }
  .stack__body { grid-template-columns: 1.05fr 1fr; align-items: start; }
  .founder { grid-template-columns: .82fr 1.18fr; }
  .case { grid-template-columns: 1.1fr 1fr; }
  .case.flip .case__media { order: 2; }
  .tgrid { grid-template-columns: repeat(3, 1fr); }
  .prow__in { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .prow__in > .prow__meta { grid-column: auto; justify-content: flex-end; }
  .hero__foot { grid-template-columns: 1.15fr .85fr; }
  .ftr__top { grid-template-columns: 1.2fr 1.6fr; }
  .ftr__cols { grid-template-columns: repeat(3, 1fr); }
  .ftr__bot { grid-template-columns: 1fr auto; align-items: center; }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  .split.top { align-items: start; }
  .split-40 { display: grid; grid-template-columns: 42% 1fr; gap: clamp(2rem, 5vw, 5rem); }
  .hero__title { font-size: clamp(4rem, 10.6vw, 10.5rem); }
}

@media (min-width: 1100px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stats.s-3 { grid-template-columns: repeat(3, 1fr); }
  .g-2x { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1180px) {
  .g-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1023px) {
  .nav, .hdr__cta .btn { display: none; }
  .burger { display: block; }
}
@media (min-width: 1024px) {
  .drawer { display: none !important; }
}

@media (max-width: 859px) {
  .prow__thumb {
    display: block; margin-top: 1rem; border-radius: 4px; overflow: hidden;
    border: 1px solid var(--line);
  }
  .prow__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(.7) brightness(.9); }
  .stack__card { position: static; }
  .stack__card + .stack__card { margin-top: 1rem; }
}

/* ---------- 30. Motion preferences --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .grain, .scroll-cue, .cur, .cur-dot, .preview { display: none; }
  [data-rv] { opacity: 1 !important; transform: none !important; }
  .marq__track { animation: none; }
  .pre { display: none; }
}

/* ---------- 31. Print ---------------------------------------------------- */
@media print {
  .hdr, .drawer, .pre, .curtain, .grain, .cur, .cur-dot, .rail, .scroll-cue, .preview, .marq { display: none !important; }
  body { background: #fff; color: #111; }
  .d1, .d2, .d3, .d4, .card__t, .prow__name { color: #000; }
  [data-rv] { opacity: 1 !important; }
}

/* ==========================================================================
   32. Film CTA — scroll-scrubbed frame sequence
   Layer order: canvas (0) -> darkening veil (1) -> content (2)
   ========================================================================== */
.film {
  --film-h: 220vh;
  position: relative;
  height: var(--film-h);
  background: var(--void);
}
.film__stage {
  position: sticky; top: 0;
  height: 100svh; min-height: 560px;
  overflow: hidden;
  display: grid; place-items: center;
  isolation: isolate;
}

/* Poster shows instantly and sits under the canvas, so the section is never
   empty while frames decode. */
.film__stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../film/poster.webp") center/cover no-repeat, var(--void);
}

.film__canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity .6s var(--e-out);
}
.film__canvas.on { opacity: 1; }

/* The darkening filter — precisely over the animation, under all content */
.film__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* content scrim — holds type legible through the lightning burst,
       without darkening the frame edges where the footage does the work */
    radial-gradient(ellipse 60% 42% at 50% 45%,
      rgba(4, 7, 15, .58) 0%, rgba(4, 7, 15, .45) 48%, rgba(4, 7, 15, 0) 78%),
    /* overall grade */
    radial-gradient(115% 85% at 50% 52%,
      rgba(4, 7, 15, .26) 0%, rgba(4, 7, 15, .52) 52%, rgba(4, 7, 15, .80) 100%),
    linear-gradient(to bottom,
      rgba(4, 7, 15, .92) 0%, rgba(4, 7, 15, .30) 16%,
      rgba(4, 7, 15, .26) 62%, rgba(4, 7, 15, .95) 100%),
    linear-gradient(to bottom, rgba(0, 32, 72, .30), transparent 45%);
}

.film__in {
  position: relative; z-index: 2;
  display: grid; gap: clamp(1.3rem, 2.8vw, 2.1rem);
  justify-items: center; text-align: center;
  padding-block: clamp(2rem, 6vh, 4rem);
}
/* On photographic ground the body copy runs at paper white, not --text:
   16px at --text measured 4.4:1 against the brightest frames, under AA. */
.film__in .lead {
  max-width: 54ch; color: var(--paper);
  text-shadow: 0 1px 18px rgba(4, 7, 15, .78);
}
.film__title { text-shadow: 0 2px 40px rgba(4, 7, 15, .6); }
.film__in .mono { color: var(--muted); text-shadow: 0 1px 14px rgba(4, 7, 15, .8); }
.film__meta { text-shadow: 0 1px 14px rgba(4, 7, 15, .8); }

.film__meta {
  display: flex; align-items: center; gap: .7rem;
  font: 500 .63rem/1 var(--f-mono); letter-spacing: .22em;
  text-transform: uppercase; color: #bfe4ff;
}
.film__meta::before,
.film__meta::after {
  content: ""; width: clamp(18px, 4vw, 44px); height: 1px;
  background: currentColor; opacity: .5;
}

/* Progress hairline across the bottom of the stage */
.film__prog {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line);
}
.film__prog i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--azure), var(--azure-glow));
  transform: scaleX(0); transform-origin: 0 50%;
}

@media (max-width: 859px) {
  .film { --film-h: 190vh; }
}

@media (prefers-reduced-motion: reduce) {
  /* No scrubbing: the poster frame stands in for the sequence */
  .film { --film-h: auto; }
  .film__stage { position: static; height: auto; min-height: 0; padding-block: var(--sec); }
  .film__canvas, .film__prog { display: none; }
}

/* ==========================================================================
   33. Contact hero — "the solve"
   A lattice that probes, finds a route, then keeps it. Every solved path
   reinforces the segments it shares with earlier ones, so the structure gets
   denser and brighter exactly where it has carried load before.
   Deliberately the opposite of the home hero: architecture, not weather.
   ========================================================================== */
.solve {
  position: relative;
  min-height: min(88svh, 940px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.solve__canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
.solve__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(4, 7, 15, .95) 0%, rgba(4, 7, 15, .86) 26%,
      rgba(4, 7, 15, .48) 58%, rgba(4, 7, 15, .34) 100%),
    linear-gradient(to bottom,
      rgba(4, 7, 15, .88) 0%, rgba(4, 7, 15, .30) 22%,
      rgba(4, 7, 15, .34) 68%, rgba(4, 7, 15, .96) 100%);
}
.solve__in {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(7rem, 15vh, 10.5rem) clamp(2.4rem, 6vh, 4rem);
}
.solve__grid { display: grid; gap: clamp(1.6rem, 3.4vw, 2.6rem); }
.solve__title { max-width: 13ch; }
.solve__foot {
  display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: end;
  border-top: 1px solid var(--line); padding-top: clamp(1.3rem, 2.6vw, 2rem);
}
.solve__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Small engineering readout, bottom-right of the stage */
.solve__legend {
  position: absolute; z-index: 2; right: var(--gut);
  top: calc(var(--nav-h) + clamp(1.4rem, 4vh, 2.6rem));
  display: none; align-items: center; gap: .7rem;
  max-width: 40%; text-align: right;
  font: 500 .6rem/1 var(--f-mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint);
}
.solve__legend::before {
  content: ""; width: 6px; height: 6px; flex: none;
  background: var(--azure-lit);
  box-shadow: 0 0 0 3px rgba(46, 145, 216, .18);
}
.solve__actions .btn { white-space: nowrap; }

@media (min-width: 900px) {
  .solve__legend { display: flex; }
}
@media (min-width: 1024px) {
  .solve__foot { grid-template-columns: 1.05fr auto; }
}

@media (prefers-reduced-motion: reduce) {
  .solve { min-height: 0; }
  .solve__in { padding-block: calc(var(--nav-h) + clamp(4rem, 10vw, 7rem)) clamp(3rem, 7vw, 5rem); }
}

/* Anchor targets must clear the fixed header on native scrolls too */
#contact-form { scroll-margin-top: calc(var(--nav-h) + 1.4rem); }

/* ==========================================================================
   34. Solutions hero — "ignition"
   A neural field at rest hums with low-level chatter. Every few seconds one
   node fires hard enough to cascade, and the charge sweeps outward through
   everything it is wired to — the moment an idea lands and reaches the whole
   system. Organic where the home hero is atmospheric and Contact is orthogonal.
   ========================================================================== */
.spark {
  position: relative;
  min-height: min(88svh, 940px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.spark__canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
.spark__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(76% 92% at 10% 62%,
      rgba(4, 7, 15, .93) 0%, rgba(4, 7, 15, .62) 40%, rgba(4, 7, 15, .10) 100%),
    linear-gradient(to bottom,
      rgba(4, 7, 15, .90) 0%, rgba(4, 7, 15, .26) 20%,
      rgba(4, 7, 15, .30) 66%, rgba(4, 7, 15, .96) 100%);
}
.spark__in {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(7rem, 15vh, 10.5rem) clamp(2.4rem, 6vh, 4rem);
}
.spark__grid { display: grid; gap: clamp(1.6rem, 3.4vw, 2.6rem); }
.spark__title { max-width: 12ch; }
.spark__foot {
  display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: end;
  border-top: 1px solid var(--line); padding-top: clamp(1.3rem, 2.6vw, 2rem);
}
.spark__actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.spark__actions .btn { white-space: nowrap; }

.spark__legend {
  position: absolute; z-index: 2; right: var(--gut);
  top: calc(var(--nav-h) + clamp(1.4rem, 4vh, 2.6rem));
  display: none; align-items: center; gap: .7rem;
  max-width: 44%; text-align: right;
  font: 500 .6rem/1.5 var(--f-mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint);
}
.spark__legend::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--azure-glow);
  box-shadow: 0 0 0 3px rgba(100, 189, 245, .16);
}

@media (min-width: 900px) { .spark__legend { display: flex; } }
@media (min-width: 1024px) { .spark__foot { grid-template-columns: 1.05fr auto; } }

@media (prefers-reduced-motion: reduce) {
  .spark { min-height: 0; }
  .spark__in { padding-block: calc(var(--nav-h) + clamp(4rem, 10vw, 7rem)) clamp(3rem, 7vw, 5rem); }
}

/* ==========================================================================
   35. About hero — "the weave"
   Sits between the home hero (free-flowing weather) and the solutions hero
   (a connected, firing network): strands that still flow like the first, but
   find each other, braid, and stay braided. Once two are woven they are never
   unwoven — the cable only ever thickens. Knots are the visitor's own.
   ========================================================================== */
.weave {
  position: relative;
  min-height: min(88svh, 940px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.weave__canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
.weave__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(96deg,
      rgba(4, 7, 15, .96) 0%, rgba(4, 7, 15, .90) 34%,
      rgba(4, 7, 15, .34) 66%, rgba(4, 7, 15, .08) 100%),
    linear-gradient(to bottom,
      rgba(4, 7, 15, .88) 0%, rgba(4, 7, 15, .24) 22%,
      rgba(4, 7, 15, .28) 66%, rgba(4, 7, 15, .96) 100%);
}
.weave__in {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(7rem, 15vh, 10.5rem) clamp(2.4rem, 6vh, 4rem);
}
.weave__grid { display: grid; gap: clamp(1.6rem, 3.4vw, 2.6rem); }
.weave__title { max-width: 14ch; }
.weave__foot {
  display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: end;
  border-top: 1px solid var(--line); padding-top: clamp(1.3rem, 2.6vw, 2rem);
}
.weave__actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.weave__actions .btn { white-space: nowrap; }

.weave__legend {
  position: absolute; z-index: 2; right: var(--gut);
  top: calc(var(--nav-h) + clamp(1.4rem, 4vh, 2.6rem));
  display: none; align-items: center; gap: .7rem;
  max-width: 44%; text-align: right;
  font: 500 .6rem/1.5 var(--f-mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint);
}
.weave__legend::before {
  content: ""; width: 10px; height: 2px; flex: none;
  background: var(--sand); opacity: .8;
}

@media (min-width: 900px) { .weave__legend { display: flex; } }
@media (min-width: 1024px) { .weave__foot { grid-template-columns: 1.05fr auto; } }

@media (prefers-reduced-motion: reduce) {
  .weave { min-height: 0; }
  .weave__in { padding-block: calc(var(--nav-h) + clamp(4rem, 10vw, 7rem)) clamp(3rem, 7vw, 5rem); }
}

/* ==========================================================================
   36. Projects hero — "in step"
   Seven live traces, one per case study, each running its own rate. Between
   the solutions hero (a biological signal) and the contact hero (drawn on an
   engineering grid), an ECG is precisely both. Bring the pointer between two
   lanes and they progressively pull into the same rhythm — and stay there.
   ========================================================================== */
.pulse {
  position: relative;
  min-height: min(88svh, 940px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.pulse__canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
.pulse__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(98deg,
      rgba(4, 7, 15, .96) 0%, rgba(4, 7, 15, .90) 34%,
      rgba(4, 7, 15, .38) 66%, rgba(4, 7, 15, .12) 100%),
    linear-gradient(to bottom,
      rgba(4, 7, 15, .90) 0%, rgba(4, 7, 15, .26) 20%,
      rgba(4, 7, 15, .28) 68%, rgba(4, 7, 15, .96) 100%);
}
.pulse__in {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(7rem, 15vh, 10.5rem) clamp(2.4rem, 6vh, 4rem);
}
.pulse__grid { display: grid; gap: clamp(1.6rem, 3.4vw, 2.6rem); }
.pulse__title { max-width: 12ch; }
.pulse__foot {
  display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: end;
  border-top: 1px solid var(--line); padding-top: clamp(1.3rem, 2.6vw, 2rem);
}
.pulse__actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.pulse__actions .btn { white-space: nowrap; }

.pulse__legend {
  position: absolute; z-index: 2; right: var(--gut);
  top: calc(var(--nav-h) + clamp(1.4rem, 4vh, 2.6rem));
  display: none; align-items: center; gap: .7rem;
  max-width: 46%; text-align: right;
  font: 500 .6rem/1.5 var(--f-mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint);
}
.pulse__legend::before {
  content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--azure-glow); opacity: .85;
}

@media (min-width: 900px) { .pulse__legend { display: flex; } }
@media (min-width: 1024px) { .pulse__foot { grid-template-columns: 1.05fr auto; } }

@media (prefers-reduced-motion: reduce) {
  .pulse { min-height: 0; }
  .pulse__in { padding-block: calc(var(--nav-h) + clamp(4rem, 10vw, 7rem)) clamp(3rem, 7vw, 5rem); }
}

/* ==========================================================================
   37. Deck — a floating 3D carousel
   Native horizontal scrolling with snap does the mechanics (touch momentum,
   trackpad, keyboard, accessibility all come free); the 3D presentation is
   layered on top from the scroll position. Cards recede and rotate away from
   the centre, so it reads as depth rather than a row that happens to clip.
   ========================================================================== */
/* The slide is an oversized placeholder; the card floats inside it. The spare
   room is what makes the card visibly shift on the slightest input, which is
   the cue that the row scrolls sideways. */
.deck {
  position: relative;
  /* On a phone the card is WIDER than its slide, so neighbours overlap by
     geometry alone. Doing the tuck with a big translateX instead made the
     live card travel slower than the finger, which reads as friction. */
  --deck-w: 63vw;      /* snap unit */
  --deck-card: 80vw;   /* the card itself, deliberately wider */
}
@media (min-width: 760px) {
  .deck { --deck-w: 384px; --deck-card: 352px; }
}

.deck__stage {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  perspective: 1150px;
  perspective-origin: 50% 50%;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-block: clamp(1rem, 2.6vw, 2rem);
  /* soft edges so it is obvious the row continues */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  cursor: grab;
}
.deck__stage::-webkit-scrollbar { display: none; }
.deck__stage.dragging { cursor: grabbing; scroll-snap-type: none; }
.deck__stage:focus-visible { outline: 2px solid var(--azure-glow); outline-offset: 6px; border-radius: 8px; }

/* The leading/trailing space that lets the first and last card sit centred is
   made of real flex items, NOT padding: a flex scroll container does not add
   its trailing padding to the scrollable extent, so with padding the last card
   can never reach the middle and snap yanks it back. */
.deck__track {
  display: flex; align-items: stretch;
  gap: 0;
  transform-style: preserve-3d;
  margin: 0; padding: 0; list-style: none;
}
.deck__track::before,
.deck__track::after {
  content: ""; flex: 0 0 var(--deck-pad, 1rem); align-self: stretch;
}
.deck__slide {
  flex: 0 0 var(--deck-w);
  /* without this the slide is stretched by its own card (flex items default to
     min-width:auto), the snap unit grows to the card width and the overlap
     that creates the spread-deck look never happens */
  min-width: 0;
  scroll-snap-align: center;
  display: flex; justify-content: center; align-items: stretch;
  transform-style: preserve-3d;
}
.deck__slide:not(.is-live) { cursor: pointer; }
/* Any card type may ride in a deck (.card, .tcard, …), so the slide styles its
   child generically. A receding card is dim by design and needs a defined edge
   or its peek disappears into the page ground. */
.deck__slide > * {
  flex: none; width: var(--deck-card);
  border-color: var(--line-2);
  box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .9);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.deck__slide.is-live > * { border-color: var(--line-2); background: var(--surface-2); }
.deck__slide.is-live > .card::before { opacity: 1; }

/* ---- controls ---- */
.deck__ui {
  display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.3rem);
  margin-top: clamp(1rem, 2.4vw, 1.6rem);
}
.deck__btn {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line-2); border-radius: 50%;
  display: grid; place-items: center; color: var(--paper);
  transition: border-color .35s, background-color .35s, color .35s, opacity .3s;
}
.deck__btn:hover:not(:disabled) { border-color: var(--azure-lit); background: rgba(46, 145, 216, .12); }
.deck__btn:disabled { opacity: .3; cursor: default; }
.deck__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.deck__rail { flex: 1; height: 1px; background: var(--line); position: relative; }
.deck__rail i {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  background: linear-gradient(90deg, var(--azure), var(--azure-glow));
  transform-origin: 0 50%; transform: scaleX(.25);
  transition: transform .35s var(--e-out);
}
.deck__idx {
  font: 500 .68rem/1 var(--f-mono); letter-spacing: .14em;
  color: var(--faint); flex: none; font-variant-numeric: tabular-nums;
}
.deck__idx b { color: var(--paper); font-weight: 500; }

.deck__hint {
  position: absolute; z-index: 3; right: 0; top: 0;
  display: inline-flex; align-items: center; gap: .5rem;
  font: 500 .6rem/1 var(--f-mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint);
  pointer-events: none; transition: opacity .5s;
}
.deck__hint.gone { opacity: 0; }
.deck__hint span { animation: deckNudge 2.2s var(--e-io) infinite; }
@keyframes deckNudge { 0%,100% { transform: translateX(0) } 50% { transform: translateX(5px) } }

@media (prefers-reduced-motion: reduce) {
  .deck__slide > * { transform: none !important; opacity: 1 !important; }
  .deck__hint span { animation: none; }
  .deck__stage { scroll-behavior: auto; }
}

/* Over a live canvas the standard --azure-lit eyebrow can fall under 4.5:1 at
   the brightest moments of the animation. On those three heroes it runs a
   lighter tint, the same call as the film section's body copy. */
.weave__in .eyebrow,
.spark__in .eyebrow,
.solve__in .eyebrow,
.pulse__in .eyebrow { color: #9fd4ff; text-shadow: 0 1px 14px rgba(4, 7, 15, .8); }