/* ============================================================
   MachAI marketing site — v4 · DARK CINEMATIC / creative-agency
   Media-forward, high-contrast, jet-red signature. Built on the
   MachAI type system (Space Grotesk + JetBrains Mono) from tokens.css.
   ============================================================ */

:root {
  /* dark cinematic palette */
  --bg:        #FFFFFF;   /* locked: white hero/page (was the BG tester default) */
  --bg-2:      #0E1013;
  --bg-3:      #14171C;
  --ink:       #3A414C;   /* headings — soft steel-grey (subtle, not pure black) */
  --fg:        #C4CAD3;   /* body */
  --fg-dim:    #8A94A2;   /* secondary */
  --fg-faint:  #5A6472;   /* labels, tertiary */
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);
  --line-3:    rgba(255,255,255,.28);
  --red:       #FF5A2C;      /* brand jet-red — the single signature orange used everywhere */
  --red-2:     #E63900;      /* darker step for pressed/active states */
  --red-soft:  #FF8A6A;
  --wipe:      var(--red);   /* full-screen "screens" (Mission + How-we-work) share the one brand orange */
  --blue:      #4D7CFF;
  --ok:        #37C871;
  --amber:     #E0A100;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur: .55s;

  --pad: 48px;             /* horizontal gutter */
  --maxw: 1360px;
}

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-sans, 'Space Grotesk', system-ui, sans-serif);
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 1px solid var(--red); outline-offset: 3px; }

/* film-grain overlay — subtle, cinematic (whole page) */
.grain {
  position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: .05;
  mix-blend-mode: overlay;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Layout ─────────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding: 120px 0; border-top: 1px solid var(--line); position: relative; }
.section.flush { border-top: 0; }

.eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--red-soft); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--red); box-shadow: 0 0 12px 1px var(--red); animation: pulse 2.2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* section name just above the section content, aligned to it, in the section's copy colour;
   small label leading with a blinking dot (dot = same colour as the text) */
.section-index { display: flex; align-items: center; gap: 9px; margin: 0 0 26px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: inherit; }
.section-index::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; animation: pulse 1.6s ease-in-out infinite; }
.section-index .no { color: var(--red); }
.section-index .rule { display: none; }

/* ── Type ───────────────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: -.03em; line-height: .98; }
.display { font-size: clamp(48px, 9vw, 132px); font-weight: 700; letter-spacing: -.04em; line-height: .92; }
.h2 { font-size: clamp(36px, 5.4vw, 68px); letter-spacing: -.03em; line-height: .98; }
.h3 { font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--fg-dim); }
.mono { font-family: var(--font-mono); }

/* ── Buttons ────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1; padding: 15px 24px; border: 1px solid transparent; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .2s var(--ease); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
/* Transparent everywhere so the clouds/background show through; text + border adapt to the section
   (dark on light, white on dark). Fills brand-red on hover. */
.btn.accent { background: transparent; color: var(--ink); border-color: currentColor; }
.btn.accent:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn.accent:active { background: var(--red-2); color: #fff; border-color: var(--red-2); }
.finale-copy .btn.accent { color: #fff; }   /* white text/border on the dark finale */
.hero-ctas .btn.accent, .finale-copy .btn.accent { padding: 18px 32px; font-size: 15px; }   /* larger primary CTA */
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--line-3); background: rgba(255,255,255,.03); }

/* ── Nav ────────────────────────────────────────────────── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--pad); transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease); border-bottom: 1px solid transparent; }
/* Once scrolled, the bar goes SOLID and matches the section behind it, so content passes cleanly UNDER
   the header instead of colliding with the logo/CTA when it re-appears on scroll-up (worst on small
   screens). Colour matches each section → seamless, no wash, no visible bar. */
.nav.scrolled { background: #FAFAF7; backdrop-filter: none; border-bottom-color: transparent; }        /* light sections (hero #fff is imperceptibly close) */
.nav.scrolled.on-dark { background: var(--wipe); }                                                     /* orange screens (Mission, How-we-work) */
.nav.scrolled.on-black { background: #0A0B0D; }                                                        /* dark sections (Agents, Contact) */
.nav.nav-hidden { transform: translateY(-105%); }
.nav .lock { display: flex; align-items: center; gap: 14px; }
.nav .serial { font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-faint); padding-left: 14px; border-left: 1px solid var(--line-2); }
.nav .links { display: flex; gap: 30px; }
.nav .links a { font-size: 13px; font-weight: 500; color: var(--fg-dim); position: relative; padding: 4px 0; transition: color .2s var(--ease); }
.nav .links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--red); transition: right .3s var(--ease); }
.nav .links a:hover { color: var(--ink); }
.nav .links a:hover::after, .nav .links a.active::after { right: 0; }
.nav .links a.active { color: var(--ink); }
.nav .actions { display: flex; align-items: center; gap: 14px; }
.wordmark { color: var(--ink); }
.wordmark .prompt, .wordmark .caret { background: none; color: var(--red); }
.wordmark .caret { background: var(--red); }
.wordmark .plane { fill: var(--red); }   /* jet-brand-red plane glyph (wordmark text stays black) */
/* Header over a dark section (orange mission screen / footer) behind the transparent bar:
   white logo copy with black prompt/caret/plane, and a ghost CTA that fills white on hover. */
.nav.on-dark .wordmark, .nav.on-black .wordmark { color: #fff; }   /* "mach"/"ai" white on both */
/* orange screen: black prompt/caret/plane */
.nav.on-dark .wordmark .prompt { color: #0A0A09; }
.nav.on-dark .wordmark .caret { background: #0A0A09; }
.nav.on-dark .wordmark .plane { fill: #0A0A09; }
/* black backgrounds: jet-red prompt/caret/plane (the default accents), white copy */
.nav.on-black .wordmark .prompt { color: var(--red); }
.nav.on-black .wordmark .caret { background: var(--red); }
.nav.on-black .wordmark .plane { fill: var(--red); }
.nav.on-dark .btn.accent, .nav.on-black .btn.accent { background: transparent; color: #fff; border-color: #fff; }
.nav.on-dark .btn.accent:hover, .nav.on-black .btn.accent:hover { background: #fff; color: var(--red); border-color: #fff; }

/* scroll progress */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.scroll-progress > i { display: block; height: 100%; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; box-shadow: 0 0 10px var(--red); }

/* ── HERO ───────────────────────────────────────────────── */
/* Variant B — cinematic full-bleed */
/* Hero is a PINNED backdrop — it stays put while the content curtain pulls up over it */
.hero { position: relative; z-index: 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 132px 0 84px; -webkit-user-select: none; user-select: none; }   /* natural scroll: hero scrolls up and away, Mission rises in below it. user-select:none so click-and-hold to accelerate the plane can't drag-highlight the headline */
/* stacked curtain layers: each rides above the panel before it and slides up over it */
.reveal-layer { position: relative; z-index: 1; background: var(--bg); }
.reveal-layer-2 { position: relative; z-index: 1; background: #FAFAF7; color: #3A3A34;
  --fg: #3A3A34; --fg-dim: #5D5D54; --fg-faint: #8A8A7E; --ink: #0A0A09;
  --line: rgba(10,10,9,.10); --line-2: rgba(10,10,9,.16); --line-3: rgba(10,10,9,.30); }   /* screen 3 = light theme, legible on white */
.dwell-hold { height: 100vh; }   /* scroll length so a screen holds/locks before the next slides up */
/* What-we-do — a normal full-height section: the copy fades in (shared .reveal) as it enters, then the
   whole section scrolls naturally up into Agents. No pin, no curtain — the tall pinned read-length was
   only needed for the old scroll-scrubbed typewriter, so it's gone (no more dead scroll). */
.whatwedo-screen { position: relative; z-index: 0; background: #FAFAF7; }
.panel-whatwedo { position: relative; z-index: 0; min-height: 100vh; background: #FAFAF7; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.panel-whatwedo .marquee { display: none; }   /* ribbon hidden for now — no good home for it yet */
.panel-whatwedo .section { padding: 40px 0; position: relative; z-index: 1; }   /* above the wireframe canvas; label still anchors to the panel */
/* The turbofan fills the panel as a faint, steady backdrop behind a light scrim (both static);
   the copy fades in with the site-wide .reveal treatment (see below). Full-bleed = never "isolated". */
.wwd-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .24; pointer-events: none; }   /* animated wireframe backdrop — turbine darkness dial (Reed: darker) */
.wwd-scrim { position: absolute; inset: 0; z-index: 1; background: #FAFAF7; opacity: .5; pointer-events: none; }        /* light wash so the copy stays crisp over the render */
.panel-whatwedo #company .wrap {
  --wwd-rail: 108px;                 /* instrument-rail clearance on the right */
  padding-right: max(var(--pad), var(--wwd-rail));
}
.wwd-veil { position: relative; z-index: 2; }   /* copy layer; entrance handled by the shared .reveal class */
.panel-whatwedo #company .agents-intro { max-width: 54ch; margin: 0; }
.panel-whatwedo #company .section-index { margin: 0 0 26px; }
@media (max-width: 720px) {
  .panel-whatwedo #company .wrap { padding-right: var(--pad); }
}
@media (prefers-reduced-motion: reduce) {
  .wwd-veil { opacity: 1 !important; }
  .wwd-scrim { opacity: .6; }         /* static: copy on, render ghosted behind */
}
.reveal-layer-3 { position: relative; z-index: 1; background: #FAFAF7; }
.reveal-layer-4 { position: relative; z-index: 1; background: #FAFAF7; }   /* slides up over the pinned dark Agents panel */
/* How-we-work pins as the backdrop; the dark finale curtains up over it, then PINS (sticky) so its
   content holds still natively while the copy fades in over the extra scroll (no JS-position jitter). */
#workwithus { position: sticky; top: 0; z-index: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  background: var(--wipe); color: #fff;
  --ink: #fff; --fg: rgba(255,255,255,.82); --fg-dim: rgba(255,255,255,.72); --fg-faint: rgba(255,255,255,.6); --line: rgba(255,255,255,.22); }   /* red screen, white copy (matches Mission) */
/* cards → frosted panels on the red instead of solid white blocks */
#workwithus .hww-card { background: rgba(255,255,255,.06); box-shadow: none; }
#workwithus .hww-card .n { color: rgba(255,255,255,.8); }
.reveal-layer-5 { position: relative; z-index: 2; min-height: 130vh; }   /* track: ~100vh curtain rise (copy fades in during it) + ~30vh end-hold */
/* final panel — Contact CTA + footer merged on the dark cloud screen; sticky so it stays put while pinned.
   #contact specificity needed to beat `.foot { position: relative }` (element is class="finale foot"). */
.finale { overflow: hidden; background: #0A0B0D; color: rgba(255,255,255,.72); padding: clamp(88px, 12vh, 140px) var(--pad) 34px; display: flex; flex-direction: column;
  --ink: #fff; --fg: rgba(255,255,255,.78); --fg-dim: rgba(255,255,255,.6); }
#contact.finale { position: sticky; top: 0; height: 100vh; }
/* Contact copy lives in a FIXED viewport overlay so it holds perfectly still while the dark curtain
   rises behind it (native fixed = zero scroll-linked movement or jitter); JS drives opacity only.
   Container is click-through; only its links become clickable once the panel is in play (.active). */
.finale-copy { position: fixed; inset: 0; z-index: 3; display: flex; flex-direction: column; padding: 46px var(--pad) 30px; pointer-events: none; }
.finale-copy .finale-cta { flex: 1 1 auto; }
/* Each block's visibility is toggled (0/1) by JS once the rising dark panel clears its top; this
   transition does the actual smooth fade (so it never depends on how much curtain-travel a block has). */
.finale-copy .finale-cta, .finale-copy .foot-mark, .finale-copy .foot-bottom { transition: opacity .6s var(--ease); }
.finale-copy.active .btn, .finale-copy.active a { pointer-events: auto; }
/* Contact eyebrow → white (dot + text) on the dark panel */
.finale-cta .eyebrow { color: #fff; }
.finale-cta .eyebrow .dot { background: #fff; box-shadow: 0 0 12px 1px rgba(255,255,255,.5); }
.finale .clouds {
  z-index: 0;
  inset: auto;
  top: -12%;
  left: -18%;
  width: 136%;
  height: 124%;
  overflow: visible;
}   /* oversized animation stage; #contact remains the single visible clip boundary */
.finale-cta { position: relative; z-index: 2; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width: 100%; max-width: var(--maxw); margin: 0 auto; }
.finale-cta .eyebrow { justify-content: center; margin-bottom: 24px; }
.finale-cta .display { color: #fff; margin: 0 auto 22px; max-width: 18ch; font-size: clamp(38px, 6vw, 84px); }   /* smaller than the hero display */
.finale-cta .sub { color: rgba(255,255,255,.6); max-width: 52ch; margin: 0 auto 38px; font-size: 18px; line-height: 1.5; }
.finale-cta .row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; align-items: center; }
.finale-cta .email { font-family: var(--font-mono); font-size: 13px; color: rgba(255,255,255,.55); }
.finale-cta .email a { color: var(--red-soft); border-bottom: 1px solid currentColor; transition: color .2s var(--ease); }
.finale-cta .email a:hover { color: #fff; }   /* highlight to white on hover only */
@media (max-width: 760px) {
  .nav .actions .btn.accent { padding: 10px 15px; font-size: 13px; }  /* compact so the CTA clears the wordmark down to ~320px */
  /* Hide nav Get Started while hero is in view — beats .js .nav .actions .btn.accent.in */
  .js .nav.cta-suppressed .actions .btn.accent,
  .js .nav.cta-suppressed .actions .btn.accent.in {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .dwell-hold { height: 0; }                                         /* curtains are off on phones — kill the empty scroll spacers (was a blank 100vh screen above Contact) */
  #mission { min-height: 200vh; }                                    /* shorter Mission read-along pin than desktop's 300vh (id beats the later base .orange-screen rule) */
  #workwithus { position: static; min-height: 0; display: block; }   /* no pin/curtain on phones — natural stack */
  .reveal-layer-5 { min-height: 125vh; min-height: 125dvh; }          /* compact rise + pinned hold; no separate dwell screen */
  /* Contact curtain on phones: fixed copy, sticky dark panel, dynamic viewport-safe sizing */
  #contact.finale { position: sticky; top: 0; height: 100svh; height: 100dvh; min-height: 0; padding: 0; }
  .finale-copy {
    position: fixed;
    inset: 0;
    pointer-events: none;
    padding: calc(24px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .finale-cta .sub { font-size: 15px; max-width: 30ch; margin: 0 auto 28px; }
  .finale-cta .row { flex-direction: column; align-items: stretch; width: 100%; max-width: 22rem; margin: 0 auto; gap: 10px; }
  .finale-cta .row .btn.accent { width: 100%; justify-content: center; min-height: 48px; box-sizing: border-box; }
  /* block + text-align keeps the space before the mailto link (flex collapses it) */
  .finale-cta .email { display: block; text-align: center; width: 100%; min-height: 44px; padding: 12px 0; box-sizing: border-box; }
  .finale .foot-mark { font-size: clamp(36px, 12vw, 72px); margin: 28px 0 14px; -webkit-text-stroke-width: 1px; }
}
/* How we work — headline, three cards, footer line (brand-light, red accents) */
#workwithus .wrap { padding-right: max(var(--pad), 100px); }   /* keep the label / cards / footer line clear of the instrument rail */
.hww-top { display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap; margin: 6px 0 clamp(40px, 6vh, 72px); }
.hww-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 24px); }
.hww-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: clamp(22px, 2.2vw, 30px); box-shadow: 0 1px 2px rgba(10,10,9,.04), 0 14px 34px -20px rgba(10,10,9,.14); }
.hww-card .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.hww-card h3 { font-family: var(--font-sans); font-size: clamp(19px, 1.7vw, 23px); font-weight: 650; letter-spacing: -.01em; color: var(--ink); margin: 16px 0 10px; }
.hww-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-dim); }
.hww-foot { margin-top: clamp(28px, 4vh, 44px); padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--fg-faint); }
@media (max-width: 760px) {
  .hww-top { flex-direction: column; align-items: flex-start; }
  .hww-cards { grid-template-columns: 1fr; }
}

/* ── See it in action = concrete before → after scenarios (light theme; mirrors the .hww-card system) ── */
.scene-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 24px); }
.scene-card { display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 22px); background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: clamp(22px, 2.2vw, 30px); box-shadow: 0 1px 2px rgba(10,10,9,.04), 0 14px 34px -20px rgba(10,10,9,.14); }
.scene-row--after { padding-top: clamp(16px, 1.8vw, 22px); border-top: 1px solid var(--line); }
.scene-k { display: inline-block; margin-bottom: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 10px; }
.scene-k--go { color: var(--red); border-color: var(--line-3); }
.scene-when { margin: 0; font-family: var(--font-sans); font-size: clamp(18px, 1.6vw, 22px); font-weight: 650; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.scene-does { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-dim); }
@media (max-width: 760px) {
  .scene-cards { grid-template-columns: 1fr; }
}

/* ── Who we help = industries strip: honest-scale lede + industry pills (aviation subtly marked, still one of many) ── */
#who-we-help .wrap { padding-right: max(var(--pad), 100px); }   /* clear the instrument rail, matching the sections around it */
.wwh-top { display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap; margin: 6px 0 clamp(32px, 5vh, 56px); }
.wwh-lede { max-width: 46ch; margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: var(--fg-dim); }
.industry-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(10px, .9vw, 14px); }
.industry-chips .chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); transition: border-color var(--dur) var(--ease), transform .2s var(--ease); }
.industry-chips .chip:hover { border-color: var(--line-3); transform: translateY(-1px); }
.industry-chips .chip-origin { border-color: rgba(255,90,44,.42); }   /* Aviation — where MachAI started; a subtle marker, not the headline */
.industry-chips .chip-origin .chip-mark { width: 6px; height: 6px; border-radius: 999px; background: var(--red); box-shadow: 0 0 10px 1px rgba(255,90,44,.5); flex: 0 0 auto; }
@media (max-width: 760px) {
  .wwh-top { flex-direction: column; align-items: flex-start; }
}

/* FAQ — native <details> accordion; a light panel that rises over the pinned How-we-work, just before Contact.
   z:1 lifts it above the sticky red #workwithus (z:0); opaque bg so it reads as a clean curtain on the way up. */
.faq { position: relative; z-index: 1; background: #FAFAF7; }
.faq .wrap { padding-right: max(var(--pad), 100px); }   /* clear the instrument rail, like How-we-work */
.faq-list { max-width: 60rem; border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-item > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(20px, 2.4vh, 28px) 0;
  font-family: var(--font-sans); font-size: clamp(19px, 1.9vw, 24px); font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
.faq-item > summary::-webkit-details-marker { display: none; }   /* kill the native disclosure triangle */
.faq-item > summary::after {
  content: ""; flex: 0 0 auto; width: 15px; height: 15px; position: relative;
  background:
    linear-gradient(var(--red), var(--red)) center/100% 2px no-repeat,
    linear-gradient(var(--red), var(--red)) center/2px 100% no-repeat;
  transition: transform .3s var(--ease);
}
.faq-item[open] > summary::after { transform: rotate(90deg); }   /* + → × on open (the vertical bar rotates onto the horizontal) */
.faq-item > summary:hover { color: var(--red); }
.faq-item > p {
  margin: 0; padding: 0 0 clamp(22px, 2.6vh, 30px); max-width: 60ch;
  font-size: clamp(15px, 1.05vw, 17px); line-height: 1.6; color: var(--fg-dim);
}
@media (max-width: 760px) {
  .faq .wrap { padding-right: var(--pad); }
}

/* ── Agents = dark locking panel: big rounded rotating reel (px-push scale) + feature copy ── */
.agents-panel { position: relative; z-index: 0; min-height: 100vh; color: rgba(255,255,255,.72); display: flex; flex-direction: column; justify-content: flex-start; padding: 11vh 0 4vh; overflow: hidden;
  background: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px) 0 0/22px 22px, #0A0B0D; }   /* dotted-grid field across the whole section; natural scroll (no pin/curtain) */
.agents-panel > .wrap { width: 100%; padding-left: calc(var(--pad) + 12px); padding-right: max(var(--pad), 100px); }   /* +12px left-aligns label/intro with the list ITEM text; right pad clears the instrument rail */
.agents-intro { max-width: 58ch; margin: 22px 0 4.5vh; font-family: var(--font-sans); font-size: clamp(18px, 2vw, 26px); line-height: 1.5; letter-spacing: -.015em; color: inherit; }   /* freeform intro copy, brand font; colour follows the section */
.agents-panel .agents-intro { max-width: 40ch; margin: 20px 0 5vh; line-height: 1.55; }   /* Agents section only: short 3-line intro sized to sit above the agent list column */
/* ── Agents showcase — the crew floats casually; highlight one (hover/click) to pull its copy alongside (js/agents-stage.js) ── */
/* the whole crew reads as one terminal window — only the TOP edge is drawn (no sides/bottom) */
.agent-crew { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 max(var(--pad), 100px) 0 var(--pad); }   /* extra right pad clears the instrument rail */
.crew-winbar { display: flex; align-items: center; gap: 12px; padding: 15px 0 20px; border-top: 1px solid rgba(255,255,255,.22); }   /* the crew's top line lives here so the right padding shortens it clear of the rail */
.cw-dots { display: inline-flex; gap: 7px; }
.cw-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--d); display: inline-block; }
.cw-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.crew-body { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }   /* tighter — diagram sits closer to the agent tabs */

/* LEFT — quiet, colour-coded index; the active row drives the preview (js/agents-stage.js).
   Each agent carries its own accent (--rc): it tints the number and a short bar marks the active row.
   Lighter than the old solid-white block so the terminal on the right stays the focal point. */
.crew-list { flex: 0 0 clamp(190px, 28%, 300px); border-top: 1px solid rgba(255,255,255,.10); }
.crew-row { position: relative; display: flex; align-items: center; gap: clamp(12px, 1.2vw, 18px); width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.10); padding: clamp(13px, 1.5vw, 18px) 10px clamp(13px, 1.5vw, 18px) 20px; cursor: pointer; color: rgba(255,255,255,.55); transition: color .3s var(--ease); }
.crew-row::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: var(--rc); transform: translateY(-50%); transition: height .3s var(--ease); }
.crew-row:hover::before, .crew-row:focus-visible::before, .crew-row.is-active::before { height: 56%; }
.cr-no { flex: 0 0 auto; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--rc); opacity: .6; transition: opacity .3s var(--ease); }
.cr-name { flex: 1; font-family: var(--font-sans); font-weight: 700; font-size: clamp(20px, 1.9vw, 27px); letter-spacing: -.02em; line-height: 1; color: rgba(255,255,255,.55); transition: color .3s var(--ease); }
/* active/hover = brighten in place + the accent bar + full-strength number (no heavy white block) */
.crew-row:hover, .crew-row:focus-visible, .crew-row.is-active { color: #fff; outline: none; }
.crew-row:hover .cr-no, .crew-row:focus-visible .cr-no, .crew-row.is-active .cr-no { opacity: 1; }
.crew-row:hover .cr-name, .crew-row:focus-visible .cr-name, .crew-row.is-active .cr-name { color: #fff; }

/* RIGHT — an animated node-flow diagram per agent, on a dotted-grid canvas (built by js/agents-stage.js) */
.crew-preview { position: relative; flex: 1 1 62%; min-height: 340px; background: transparent; }   /* the section's dotted field shows through — diagram sits on it, no card box */
.crew-preview .ag-flow { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .5s var(--ease), transform .55s var(--ease); }
.crew-preview .ag-flow.is-active { opacity: 1; transform: none; pointer-events: auto; }
.ag-mobile-head, .ag-mobile-foot, .hold-label { display: none; }

/* flow graph — icon-tile nodes joined by right-angle connectors that energise in sequence */
.canvas { position: absolute; inset: 34px clamp(30px, 4vw, 60px); }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.w-base { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 1.4; }
.w-line { fill: none; stroke: var(--rc); stroke-width: 1.6; transition: stroke-dashoffset .45s var(--ease); filter: drop-shadow(0 0 3px var(--rc)); }
.ag-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 9px; width: 78px; }
.ntile { width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; display: grid; place-items: center; background: rgba(12,14,18,.9); transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), transform .35s var(--ease); }
.ntile .ic { width: 23px; height: 23px; stroke: rgba(255,255,255,.55); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s var(--ease); }
.nlabel { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); text-align: center; line-height: 1.3; white-space: nowrap; transition: color .35s var(--ease); }
.ag-node.on .ntile { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, #0C0E12); box-shadow: 0 0 0 1px var(--rc), 0 0 22px -3px var(--rc); transform: translateY(-3px); }
.ag-node.on .ic { stroke: var(--rc); }
.ag-node.on .nlabel { color: rgba(255,255,255,.92); }
.ag-node.human .ntile { border-style: dashed; }
@media (prefers-reduced-motion: reduce) { .w-line { transition: none; } }
.ag-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid; }
.ag-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ag-badge.live { color: #37C871; border-color: color-mix(in srgb, #37C871 45%, transparent); }
.ag-badge.live::before { box-shadow: 0 0 8px 1px #37C871; animation: pulse 2s ease-in-out infinite; }
.ag-badge.dev { color: #E0A100; border-color: color-mix(in srgb, #E0A100 45%, transparent); }
.ag-badge.plan { color: #E5484D; border-color: color-mix(in srgb, #E5484D 45%, transparent); }
.ag-code { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.ag-name { font-family: var(--font-sans); font-size: clamp(40px, 6vw, 76px); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: #F5F6F2; margin: 0; }
.ag-desc { max-width: 46ch; margin: 0; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; color: rgba(255,255,255,.7); }
.ag-meta { display: flex; gap: 56px; margin: 34px 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.ag-meta > div { display: flex; flex-direction: column; gap: 4px; }
.ag-meta dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); margin: 0; }
.ag-meta dd { font-family: var(--font-sans); font-size: 18px; font-weight: 600; color: #EDEEEA; margin: 0; }

/* ≥1600px — big-monitor tier: restore the oversized, full-bleed terminal you loved */
@media (min-width: 1600px) {
  .cr-name { font-size: clamp(24px, 1.8vw, 32px); }
  .crew-preview { min-height: 420px; }
}

/* 761–1599px keeps the two-column layout at calmer sizes (the base rules above). */

/* ≤760px — phones/small tablets: stack; agents become tabs; flow becomes a vertical timeline (js/agents-stage.js) */
@media (max-width: 760px) {
  .agents-panel { padding-top: 72px; min-height: auto; overflow: visible; }
  .crew-winbar { display: none; }   /* flight-plan card owns its own instrument header */
  .crew-body { flex-direction: column; align-items: stretch; gap: 14px; }
  .crew-list { flex: none; display: flex; flex-direction: row; gap: 8px; border-top: 0; }
  .crew-row { flex: 1 1 0; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 6px; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; }
  .crew-row::before { display: none; }   /* horizontal tabs use the border for the active state, not the side bar */
  .cr-no { font-size: 10px; }
  .cr-name { flex: 0 0 auto; font-size: clamp(14px, 3.4vw, 17px); }
  .crew-row.is-active { border-color: rgba(250,250,247,.55); border-top: 2px solid var(--rc); background: rgba(255,255,255,.06); color: #fff; }
  .crew-row.is-active .cr-no { opacity: 1; }
  .crew-row.is-active .cr-name { color: #fff; }
  .crew-preview {
    flex: none;
    min-height: 0;
    height: auto;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background:
      radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.25px) 0 0/18px 18px,
      rgba(12,14,18,.96);
    box-shadow: inset 0 1px rgba(255,255,255,.03), 0 22px 48px -36px rgba(0,0,0,.9);
  }
  .crew-preview .ag-flow { position: absolute; inset: 0; min-width: 0; }
  .crew-preview .ag-flow.is-active { position: relative; inset: auto; height: auto; }
  .crew-preview .canvas { position: relative; inset: auto; width: 100%; height: auto; min-height: 360px; }   /* JS sets exact compact route height */
  .ag-mobile-head {
    min-height: 44px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.025);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  .ag-route-title { color: rgba(255,255,255,.58); }
  .ag-mobile-live { color: #37C871; display: inline-flex; align-items: center; gap: 6px; }
  .ag-mobile-live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
  .ag-mobile-foot {
    min-height: 38px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.018);
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
  }
  .ag-mobile-foot span:last-child { color: var(--rc); }
  .hold-label {
    position: absolute;
    top: -27px;
    left: 50%;
    z-index: 2;
    width: min(230px, 68vw);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 7px;
    line-height: 1;
    letter-spacing: .15em;
    white-space: nowrap;
    color: color-mix(in srgb, var(--rc) 78%, white);
  }
  .hold-label b {
    flex: 0 0 auto;
    padding: 0 4px;
    background: rgba(12,14,18,.96);
    font: inherit;
  }
  .hold-label::before, .hold-label::after {
    content: "";
    flex: 1;
    border-top: 1px dashed var(--rc);
    opacity: .62;
  }
  .crew-preview .ag-node { gap: 7px; }
  .crew-preview .ntile { width: 46px; height: 46px; border-radius: 11px; }
  .crew-preview .ntile .ic { width: 20px; height: 20px; }
  .crew-preview .nlabel {
    position: relative;
    z-index: 2;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(12,14,18,.88);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 0 2px rgba(12,14,18,.5);
    font-size: 9px;
    letter-spacing: .13em;
  }
}

/* (scroll wipe removed — each screen is a solid panel that slides over the one before it) */

/* Orange destination screen — pins as a backdrop while screen 3 curtains up over it */
/* Tall section: the statement PINS (inner .os-stage sticky) and brightens as you scroll through it,
   then releases into a natural scroll to What-we-do — no curtain. Section height = pinned read length. */
.orange-screen { position: relative; z-index: 0; min-height: 300vh; background: var(--wipe); color: #fff; }
.os-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: 132px 0; overflow: hidden; }
.orange-screen .wrap { width: 100%; }   /* fill width so content left-aligns to the content margin (matches the sections below), not shrink-wrapped/centred */
.orange-screen .os-eyebrow { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 30px; }
.orange-screen .os-eyebrow::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-right: 9px; vertical-align: middle; animation: pulse 1.6s ease-in-out infinite; }   /* blinking white dot, matches the section labels */
.orange-screen .os-statement { font-size: clamp(28px, 4.4vw, 58px); line-height: 1.12; letter-spacing: -.02em; color: #fff; max-width: 20ch; margin: 0; }
@media (max-width: 760px) {
  .orange-screen .os-statement {
    font-size: clamp(36px, 9.2vw, 46px);
    line-height: 1.1;
    max-width: 14ch;   /* shorter measure so the larger type still wraps cleanly */
  }
}
.orange-screen .os-statement .os-caret { display: inline-block; width: .06em; height: .92em; background: #fff; margin-left: .04em; transform: translateY(.14em); animation: os-blink 1.05s steps(2, end) infinite; }
.orange-screen .os-statement .cw { transition: opacity .08s linear; }   /* per-char brighten as you scroll (js in index.html) */
@keyframes os-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--bg); }   /* flat — no glow/grid/scrim layers */
.hero-bg .grid { display: none; }
/* real photo / showreel — drop assets/media/hero-bg.jpg (or wire showreel.mp4) */
.hero-media-el { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
#hero-canvas { position: absolute; top: -12%; left: auto; right: 6%; width: 82%; height: 124%; z-index: 1; display: block; pointer-events: none; }
.hero-scrim { display: none; }   /* removed — no overlay layer on the hero */
.hero .wrap { position: relative; z-index: 3; width: 100%; max-width: none; }
.hero .kick { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--red-soft); margin-bottom: 22px; }
.hero .kick::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--red); box-shadow: 0 0 12px 1px var(--red); animation: pulse 2.2s infinite; }
.hero h1.display { margin: 0; font-size: clamp(42px, 8.8vw, 116px); max-width: 9ch; line-height: 0.95; }
.hero h1 .em { color: var(--wipe); }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 36px; flex-wrap: wrap; }
.hero .lead {
  max-width: 60%;                 /* wraps to a paragraph about halfway across the page */
  margin: 30px 0 0;
  font-family: var(--font-sans);  /* same size + style as the header */
  font-size: clamp(30px, 4.6vw, 64px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #E7EBF1;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero-reel { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); cursor: pointer; background: none; border: 0; padding: 0; }
.hero-reel .pl { width: 54px; height: 54px; border: 1px solid var(--line-2); border-radius: 999px; display: grid; place-items: center; transition: border-color .3s var(--ease), background .3s var(--ease); }
.hero-reel .pl svg { width: 16px; height: 16px; fill: var(--ink); margin-left: 2px; }
.hero-reel:hover .pl { border-color: var(--red); background: rgba(255,90,44,.18); }

/* ── Floating ghost clouds (hero + footer) ── */
.clouds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.cloud { position: absolute; pointer-events: none; transform-origin: center; will-change: transform, opacity; }
.cloud svg { width: 100%; height: auto; display: block; color: rgb(120,129,143); fill: url(#cloudGrad); }   /* volumetric gradient (currentColor = tint); softness comes from the SVG #cloudFx filter */

/* HERO — clouds are FLOWN-THROUGH (pseudo-3D, driven in js/aircraft-hero.js).
   Base widths give a size assortment; the depth engine scales each further.
   top/left are only the pre-frame anchors — the JS repositions by depth. */
.hero .cloud.c1 { width: 340px; top: 12%; left: 4%;  opacity: .5;  }
.hero .cloud.c2 { width: 175px; top: 30%; left: 22%; opacity: .4;  }
.hero .cloud.c3 { width: 260px; top: 58%; left: 30%; opacity: .46; }
.hero .cloud.c4 { width: 300px; top: 20%; left: 56%; opacity: .42; }
.hero .cloud.c5 { width: 410px; top: 66%; left: 74%; opacity: .48; }
.hero .cloud.c6 { width: 150px; top: 40%; left: 84%; opacity: .38; }
.hero .cloud.c7 { width: 230px; top: 10%; left: 68%; opacity: .44; }
.hero .cloud.c8  { width: 130px; top: 48%; left: 12%; opacity: .36; }
.hero .cloud.c9  { width: 460px; top: 74%; left: 42%; opacity: .5;  }
.hero .cloud.c10 { width: 200px; top: 6%;  left: 40%; opacity: .4;  }

/* FOOTER — calm, slow horizontal drift (no plane to steer here) */
.foot { position: relative; overflow: hidden; }
/* footer clouds: same pseudo-3D fly-through as the hero (mouse-controlled, no plane) — driven in js/footer-clouds.js */
.foot .clouds { z-index: 0; }
.foot .cloud { opacity: .5; }   /* keep them subtle on the dark panel (they carry no per-cloud opacity of their own) */
.foot .cloud svg { color: rgb(206,217,233); fill: url(#cloudGradLight); }   /* light tint + bright-crown gradient so clouds read on the dark footer */
.foot .cloud.c1 { width: 300px; top: 14%; left: 6%;  }
.foot .cloud.c2 { width: 170px; top: 46%; left: 30%; }
.foot .cloud.c3 { width: 380px; top: 24%; left: 58%; }
.foot .cloud.c4 { width: 220px; top: 62%; left: 78%; }
.foot .cloud.c5 { width: 140px; top: 34%; left: 44%; }
.foot .cloud.c6 { width: 300px; top: 70%; left: 16%; }

/* Finale clouds — four-cloud mobile field on an overscanned stage. The largest survivor is
   intentionally cropped by #contact so the atmosphere feels larger than the viewport. */
@media (max-width: 760px) {
  .finale .cloud.c1,
  .finale .cloud.c6 { display: none; }   /* retain four shapes; the 380px c3 supplies the intentional edge crop */
  .finale .cloud.c2 { width: 132px; top: 12%; left: 8%;  opacity: .22; }
  .finale .cloud.c3 { display: block; width: clamp(280px, 88vw, 380px); top: 18%; left: 52%; opacity: .2; }
  .finale .cloud.c4 { width: 164px; top: 72%; left: 68%; opacity: .2; }
  .finale .cloud.c5 { width: 104px; top: 40%; left: 42%; opacity: .18; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none; transform: none; }
  .reveal-layer-5 { min-height: 0; }
  #contact.finale {
    position: relative;
    top: auto;
    height: auto;
    min-height: 100svh;
    min-height: 100dvh;
  }
  .finale-copy {
    position: relative;
    inset: auto;
    min-height: inherit;
    pointer-events: auto;
    padding: calc(24px + env(safe-area-inset-top, 0px)) var(--pad) calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Instrument-cluster nav (right rail) ── */
.instrument-rail { position: fixed; top: 50%; right: 18px; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 15px; align-items: center; }
.gauge { position: relative; width: 56px; height: 56px; display: block; cursor: pointer; opacity: .32; transform: translateX(calc(100% + 40px)); transition: transform .6s var(--ease), opacity .3s var(--ease); transition-delay: 0s, 0s; }
.instrument-rail.in .gauge { transform: translateX(0); transition-delay: var(--gauge-stagger, 0ms), var(--gauge-stagger, 0ms); }
.gauge:hover, .gauge.active { opacity: 1; }   /* dim until hovered / active — except hero spotlight below */
.instrument-rail.hero-lit .gauge { opacity: 1; }   /* entrance on hero: full/dark so they pop; labels still hover-only */
.instrument-rail.in .gauge:hover { transform: translateX(0) scale(1.09); }
.gauge svg { width: 100%; height: 100%; display: block; overflow: visible; }
.gauge .bezel { fill: transparent; stroke: #0A0A09; stroke-width: 2; }   /* transparent face — shows the section behind; outline/ticks invert on dark bg (.on-dark) */
.gauge .tick { stroke: rgba(10,10,9,.45); stroke-width: 1.2; }
.gauge .tick.maj { stroke: rgba(10,10,9,.85); stroke-width: 1.8; }
.gauge .glyph { fill: none; stroke: var(--gauge-needle, rgba(255,255,255,.6)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gauge .glyph-fill { fill: var(--gauge-needle, rgba(255,255,255,.62)); }
.gauge .code { font-family: var(--font-mono); font-size: 12px; fill: rgba(10,10,9,.5); text-anchor: middle; letter-spacing: .08em; }
.gauge .needle, .gauge .needle-plane, .gauge .horizon-g { transform-box: view-box; transform-origin: 50px 50px; } /* no CSS transition — idle rAF drives motion */
.gauge .needle { stroke: var(--gauge-needle, rgba(255,255,255,.92)); stroke-width: 2.6; stroke-linecap: round; }
.gauge .hub { fill: #0A0A09; }
.gauge .g-label { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); white-space: nowrap; opacity: 0; transition: opacity .2s var(--ease); pointer-events: none; }
.gauge:hover .g-label, .gauge.active .g-label { opacity: 1; }   /* label shows on hover AND on the active/scrolled-to section */
.gauge.active .g-label { font-weight: 700; }
.gauge.active .code { fill: #0A0A09; }
/* Transparent faces adapt to the section scrolling behind the rail — invert outline/ticks/labels to light on dark backgrounds so they stay legible. */
.gauge.on-dark .bezel { stroke: rgba(255,255,255,.92); }
.gauge.on-dark .tick { stroke: rgba(255,255,255,.45); }
.gauge.on-dark .tick.maj { stroke: rgba(255,255,255,.8); }
.gauge.on-dark .code { fill: rgba(255,255,255,.6); }
.gauge.on-dark.active .code { fill: #fff; }
.gauge.on-dark .hub { fill: #fff; }
.gauge.on-dark .g-label { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .gauge { transform: none; transition: opacity .3s var(--ease); }
  .instrument-rail.in .gauge, .instrument-rail.in .gauge:hover { transform: none; }
  .instrument-rail.in .gauge:hover { transform: scale(1.09); }
}
@media (max-width: 900px) {   /* rail hidden → drop the rail-clearance right padding so content isn't lopsided */
  .instrument-rail { display: none; }
  .agents-panel > .wrap, #workwithus .wrap { padding-right: var(--pad); }
  .agent-crew { padding-right: var(--pad); }
}

/* ── Background tester (temporary, front-end) ── */
.fe-tester { position: fixed; left: 14px; z-index: 9999; display: none; align-items: center; gap: 7px; background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.16); padding: 8px 10px; backdrop-filter: blur(6px); }
html.tune .fe-tester { display: flex; }   /* Font / Plane testers hidden by default — add ?tune to the URL to reveal */
#bg-test { bottom: 14px; }
#plane-test { bottom: 58px; }
#font-test { bottom: 102px; }
.fe-tester .bt-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #8A94A2; min-width: 40px; }
.fe-tester .bt-sw { width: 20px; height: 20px; border: 1px solid rgba(255,255,255,.22); cursor: pointer; padding: 0; }
.fe-tester .bt-sw.on { box-shadow: 0 0 0 2px #0A0B0D, 0 0 0 3px var(--red); }
.fe-tester .bt-custom { width: 24px; height: 22px; border: 1px solid rgba(255,255,255,.22); background: none; cursor: pointer; padding: 0; }

/* ── Light-hero test: black copy on a flat background, inverted ribbon ── */
.hero h1 .em { color: var(--wipe); -webkit-text-fill-color: var(--wipe); }   /* jet-red accent word */
.hero .btn.ghost { color: var(--ink); border-color: var(--ink); }
.hero .btn.ghost:hover { background: rgba(0,0,0,.06); }
.nav .wordmark { color: #0A0A09; }   /* fixed brand black — not affected by the Font tester */
/* ribbon → black band, white copy */
.marquee { background: transparent; }   /* transparent ribbon — shows the white panel through */
.marquee .marquee-track span { color: #0A0A09; }   /* black copy (higher specificity beats the base rule) */

/* ── Cursor pixel-trail (brand orange) ── */
#cursor-trail { position: fixed; inset: 0; z-index: 9998; pointer-events: none; }
.trail-px { position: absolute; background: var(--wipe); box-shadow: 0 0 7px rgba(255,90,44,.6); animation: trail-fade .6s ease-out forwards; }
@keyframes trail-fade { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(.4); } }
@media (prefers-reduced-motion: reduce) { #cursor-trail { display: none; } }

/* ── Custom dot cursor (replaces the arrow; blends to stay visible on any bg) ── */
#cursor-dot { position: fixed; top: 0; left: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: transparent; border: 2px solid #111318; pointer-events: none; z-index: 10000; opacity: 0; transition: opacity .2s var(--ease), border-color .2s var(--ease), width .18s var(--ease), height .18s var(--ease), margin .18s var(--ease); will-change: transform; }   /* hollow donut ring; colour set per-background in JS */
#cursor-dot.link { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-width: 1.5px; }   /* grows over clickable elements */
html.has-dot-cursor, html.has-dot-cursor * { cursor: none; }   /* hide the arrow everywhere — the dot is the cursor */

/* ── Hero intro — copy types in letter-by-letter (terminal caret), then CTAs drop in ── */
.js .hero-anim { opacity: 0; }                    /* hide until the intro sets up (prevents a flash) */
.hero.intro .c, .orange-screen .c { display: none; }   /* each character, shown as it "types" */
.hero .type-caret { display: inline-block; width: .07em; height: .9em; background: var(--red); margin-left: .04em; transform: translateY(.12em); box-shadow: 0 0 8px var(--red); animation: wm-blink 1.05s steps(2, end) infinite; }
.hero.intro .hero-ctas { opacity: 0; transition: opacity .55s var(--ease); }
.hero.intro .hero-ctas.in { opacity: 1; }
/* nav CTA (top-right) fades in together with the hero CTA once the hero copy finishes typing */
.js .nav .actions .btn.accent { opacity: 0; transition: opacity .55s var(--ease); }
.js .nav .actions .btn.accent.in { opacity: 1; }

/* ── MEDIA component (premium placeholder for real photo/video) ── */
.media { position: relative; overflow: hidden; background: #0c0e12; border: 1px solid var(--line); }
/* generated fallback visual (grid + glow) — sits behind real media */
.media::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px), radial-gradient(circle at 50% 42%, rgba(255,90,44,.16), transparent 58%); background-size: 34px 34px, 34px 34px, 100% 100%; transition: transform .8s var(--ease); }
.media > .m-arc { position: absolute; inset: 0; margin: auto; width: 78%; z-index: 0; opacity: .5; }
/* real image / video — drop a file in and it covers the frame (see assets/media/MEDIA.md) */
.media > .m-img, .media > .m-vid { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(120% 120% at 50% 35%, transparent 45%, rgba(0,0,0,.62)); } /* cinematic vignette + legibility scrim */
.media .m-label { position: absolute; top: 16px; left: 16px; z-index: 3; font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim); display: inline-flex; align-items: center; gap: 8px; }
.media .m-label::before { content: "◆"; color: var(--red); font-size: 8px; }
.media .m-meta { position: absolute; bottom: 16px; left: 16px; right: 16px; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); }
.media .m-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; z-index: 3; border: 1px solid var(--line-2); border-radius: 999px; display: grid; place-items: center; background: rgba(10,11,13,.4); backdrop-filter: blur(4px); transition: border-color .3s var(--ease), background .3s var(--ease); }
.media .m-play svg { width: 18px; height: 18px; fill: var(--ink); margin-left: 3px; }
.media:hover::before, .media:hover > .m-img { transform: scale(1.06); }
.media:hover .m-play { border-color: var(--red); background: rgba(255,90,44,.18); }

/* ── STATEMENT (who we are) ─────────────────────────────── */
.statement { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: start; }
.statement .body { }
.statement .h2 { margin-bottom: 28px; }
.statement .lead + .lead { margin-top: 20px; }
.statement .side { position: sticky; top: 110px; }
.statement .side .media { aspect-ratio: 4 / 5; }
.principles { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.principle { background: var(--bg); padding: 30px 26px; }
.principle .n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--red); }
.principle h3 { font-size: 19px; font-weight: 600; margin: 14px 0 10px; letter-spacing: -.01em; }
.principle p { margin: 0; font-size: 14px; color: var(--fg-dim); line-height: 1.5; }

/* ── WORK — agent case-study tiles ──────────────────────── */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
/* Cards stay dark tiles on the light page (radar media reads best on dark). Re-scope the
   dark palette here so text/labels read light again — the light theme above flips these to
   dark, which would put dark text on the dark card. Heading brightened for punch on #0E1013. */
.work-tile {
  --ink: #F2F3EF; --fg: #C4CAD3; --fg-dim: #9AA3B0; --fg-faint: #6B7482;
  --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.16); --line-3: rgba(255,255,255,.30);
}
.work-tile { position: relative; display: block; border: 1px solid var(--line); background: var(--bg-2); overflow: hidden; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.work-tile:hover { border-color: var(--line-3); }
.work-tile .media { aspect-ratio: 16 / 10; border: 0; border-bottom: 1px solid var(--line); }
.work-tile .t-body { padding: 26px 28px 30px; }
.work-tile .t-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.work-tile .cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint); }
.work-tile h3 { font-size: clamp(26px, 3vw, 40px); font-weight: 650; letter-spacing: -.03em; }
.work-tile p { margin: 12px 0 0; font-size: 15px; color: var(--fg-dim); line-height: 1.5; max-width: 42ch; }
.work-tile .go { margin-top: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.work-tile .go .arrow { transition: transform .25s var(--ease); }
.work-tile:hover .go .arrow { transform: translateX(5px); }
.work-tile.more { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px; background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); }
.work-tile.more .plus { font-size: 56px; font-weight: 300; color: var(--red); line-height: 1; }
.work-tile.more h3 { font-size: 26px; margin-top: 10px; }
.work-tile.more p { color: var(--fg-dim); }

/* status pill */
.pill { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-2); color: var(--fg-dim); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.pill.live { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.pill.live::before { box-shadow: 0 0 8px 1px var(--ok); animation: pulse 2.2s infinite; }
.pill.dev { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }

/* ── EXPERTISE — bold hover list ────────────────────────── */
.exp-list { border-top: 1px solid var(--line); }
.exp-row { display: grid; grid-template-columns: 60px 1fr auto; gap: 24px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); transition: padding .35s var(--ease), background .35s var(--ease); }
.exp-row .idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--fg-faint); }
.exp-row h3 { font-size: clamp(24px, 3.4vw, 44px); font-weight: 640; letter-spacing: -.03em; color: var(--fg-dim); transition: color .35s var(--ease); }
.exp-row p { font-size: 14px; color: var(--fg-faint); margin: 0; max-width: 34ch; text-align: right; opacity: 0; transition: opacity .35s var(--ease); }
.exp-row:hover { padding-left: 20px; background: linear-gradient(90deg, rgba(255,90,44,.06), transparent 40%); }
.exp-row:hover h3 { color: var(--ink); }
.exp-row:hover p { opacity: 1; }

/* ── MARQUEE ────────────────────────────────────────────── */
.marquee { overflow: hidden; border-top: 1px solid #0A0A09; border-bottom: 1px solid #0A0A09; padding: 0; }   /* thin black top/bottom rules */
.marquee-track { display: inline-flex; align-items: center; white-space: nowrap; animation: marquee 38s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; padding: 30px 0; font-family: var(--font-mono); font-size: 16px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-dim); }
.marquee-track span::before { content: "•"; color: var(--red); font-size: 20px; line-height: 0; margin: 0 34px; }   /* bigger orange dot separators */
@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ── PROOF / logo wall (dark framed) ────────────────────── */
.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.logo-cell { background: var(--bg); aspect-ratio: 5 / 2; display: grid; place-items: center; transition: background .35s var(--ease); }
.logo-cell:hover { background: var(--bg-2); }
.logo-cell .ph { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint); }
.proof-note { margin-top: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--fg-faint); display: flex; align-items: center; gap: 10px; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 30px 0; display: flex; justify-content: space-between; gap: 24px; align-items: center; font-size: clamp(18px, 2vw, 26px); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mk { color: var(--red); font-family: var(--font-mono); font-weight: 400; font-size: 26px; flex: none; transition: transform .35s var(--ease); }
.faq details[open] summary .mk { transform: rotate(45deg); }
.faq .a { padding: 0 64px 30px 0; font-size: 16px; color: var(--fg-dim); line-height: 1.6; max-width: 72ch; }

/* ── CONTACT (cinematic closer) ─────────────────────────── */
.contact { position: relative; text-align: center; padding: 160px 0; overflow: hidden; border-top: 1px solid var(--line); }
.contact-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(70% 90% at 50% 120%, rgba(255,90,44,.28), transparent 60%), radial-gradient(60% 60% at 50% -10%, rgba(77,124,255,.08), transparent 60%); }
.contact-bg .grid { display: none;   /* grid overlay removed per request (kept for easy revert) */
  position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 80% at 50% 100%, #000, transparent 70%); mask-image: radial-gradient(70% 80% at 50% 100%, #000, transparent 70%); opacity: .5; }
.contact .wrap { position: relative; z-index: 1; }
.contact .eyebrow { justify-content: center; margin-bottom: 26px; }
.contact h2 { margin: 0 auto 22px; max-width: 16ch; }
.contact .sub { color: var(--fg-dim); max-width: 52ch; margin: 0 auto 40px; font-size: 18px; }
.contact .row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; align-items: center; }
.contact .email { font-family: var(--font-mono); font-size: 13px; color: var(--fg-dim); }
.contact .email a { color: var(--red-soft); border-bottom: 1px solid currentColor; }

/* ── FOOTER — dark closing band, giant outlined wordmark (cloudstudio-style) ── */
.foot { background: #0A0B0D; color: rgba(255,255,255,.7); padding: 46px var(--pad) 30px; }
.foot-top, .foot-bottom { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.foot-brand { display: flex; flex-direction: column; gap: 5px; }
.foot-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.foot-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.foot-links { display: flex; gap: 24px; }
.foot-links a { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); transition: color .2s var(--ease); }
.foot-links a:hover { color: #fff; }
.foot-mark { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .04em; margin: 34px 0 20px; font-family: var(--font-sans); font-weight: 700; font-size: clamp(40px, 14vw, 220px); line-height: .78; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.4px rgba(255,255,255,.42); user-select: none; }   /* smaller so the full "mach ai" wordmark fits with margins on narrow screens (~55% of viewport) */
.foot-mark .fm-plane { width: .6em; height: .6em; fill: var(--red); transform: translateY(-.03em); }   /* jet-brand-red plane */
.foot-bottom { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-top: 10px; justify-content: center; text-align: center; }
.foot-bottom a { color: rgba(255,255,255,.5); } .foot-bottom a:hover { color: #fff; }

/* ── Reveals & line-mask headings ───────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-lines .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.reveal-lines .ln-i { display: block; transform: translateY(118%); transition: transform .95s var(--ease); }
.reveal-lines.in .ln-i { transform: none; }
.reveal-lines .ln:nth-child(2) .ln-i { transition-delay: .09s; }
.reveal-lines .ln:nth-child(3) .ln-i { transition-delay: .18s; }
.reveal-lines .ln:nth-child(4) .ln-i { transition-delay: .27s; }
.hero .lead.reveal { transition-delay: .15s; }
.hero-ctas.reveal { transition-delay: .25s; }
.hero-readout.reveal { transition-delay: .32s; }
.hero-media.reveal { transition-delay: .2s; }
/* staggered grids */
.work-grid .reveal:nth-child(2) { transition-delay: .08s; }
.work-grid .reveal:nth-child(3) { transition-delay: .16s; }
.work-grid .reveal:nth-child(4) { transition-delay: .24s; }
.principles .reveal:nth-child(2) { transition-delay: .08s; }
.principles .reveal:nth-child(3) { transition-delay: .16s; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1180px) { .nav .serial { display: none; } }
@media (max-width: 1000px) {
  :root { --pad: 28px; }
  .hero { min-height: 100vh; padding: 96px 0 56px; }
  #hero-canvas { top: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: .55; }
  .hero .lead { max-width: 92%; }
  .hero-row { gap: 28px; }
  .statement { grid-template-columns: 1fr; gap: 40px; }
  .statement .side { position: static; }
  .statement .side .media { aspect-ratio: 16 / 9; max-width: 560px; }
  .work-grid { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .exp-row p { display: none; }
  .exp-row { grid-template-columns: 44px 1fr; }
}
/* Hero mobile — oversized nose-forward canvas; copy overlaps its lower field */
@media (max-width: 760px) {
  .hero {
    height: clamp(640px, 88svh, 720px);
    min-height: 0;
    display: block;
    padding: 0;
  }
  .hero > .wrap {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    width: 100%;
  }
  #hero-canvas {
    /* Deliberately crop the scene: the aircraft should leave the frame, not shrink to fit it. */
    top: 70px; left: -12%; right: auto; bottom: auto;
    width: 145%; height: 68%;
    opacity: .46;
  }
  .hero-scrim {
    display: block;
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    /* Contrast only: transparent enough that copy still visibly overlaps the render. */
    background: linear-gradient(to top, rgba(250,250,247,.97) 0%, rgba(250,250,247,.86) 23%, rgba(250,250,247,0) 51%);
  }
  .hero h1.display {
    max-width: none;
    font-size: clamp(36px, 11vw, 48px);
    line-height: 1.02;
  }
  .hero-ctas { width: 100%; margin-top: 22px; }
  .hero-ctas .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }
  /* hide the largest clouds; shrink/dim the rest so the field fits the hero stage */
  .hero .cloud.c1,
  .hero .cloud.c4,
  .hero .cloud.c5,
  .hero .cloud.c9 { display: none; }
  .hero .cloud.c2 { width: 110px; opacity: .28; }
  .hero .cloud.c3 { width: 150px; opacity: .3; }
  .hero .cloud.c6 { width: 96px;  opacity: .26; }
  .hero .cloud.c7 { width: 130px; opacity: .3; }
  .hero .cloud.c8 { width: 88px;  opacity: .24; }
  .hero .cloud.c10 { width: 120px; opacity: .28; }
  .js .hero-anim { transition: opacity .18s var(--ease); }
}
@media (max-width: 640px) {
  .section { padding: 84px 0; }
  #hero-canvas {
    top: 66px; left: -18%; right: auto;
    width: 155%; height: 68%;
    opacity: .44;
  }
  .hero .lead { max-width: 96%; }
  .principles { grid-template-columns: 1fr; }
  .logos { grid-template-columns: 1fr 1fr; }
  .foot-top { gap: 16px; }
  .hero-readout { gap: 24px; }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .reveal-lines .ln-i { transform: none !important; }
  .scroll-progress, .grain { display: none; }
  .nav.nav-hidden { transform: none !important; }
  .hero h1 .em { -webkit-text-fill-color: var(--wipe); color: var(--wipe); }
}

/* ══ Contact modal — opens from any "Get started" CTA. Light/white, square corners (matches the CTAs). ══ */
.cmodal { max-width: min(560px, 92vw); width: 100%; max-height: 92vh; margin: auto; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.cmodal::backdrop { background: rgba(6,7,9,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.cmodal[open] { animation: cmodal-in .3s var(--ease); }
.cmodal[open]::backdrop { animation: cmodal-bg .3s ease; }
@keyframes cmodal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes cmodal-bg { from { opacity: 0; } to { opacity: 1; } }
.cmodal-card { position: relative; max-height: 92vh; overflow-y: auto; background: #fff; border: 2px solid var(--red); padding: clamp(24px, 4vw, 36px); box-shadow: 0 40px 100px -32px rgba(0,0,0,.5); }   /* brand-orange stroke */
.cmodal-x { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; display: grid; place-items: center; background: none; border: 0; color: rgba(10,10,9,.45); font-size: 22px; line-height: 1; cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease); }
.cmodal-x:hover { color: var(--ink); background: rgba(10,10,9,.05); }
.cmodal-title { font-family: var(--font-sans); font-size: clamp(22px, 3vw, 27px); font-weight: 650; letter-spacing: -.02em; color: var(--ink); margin: 0 0 8px; }
.cmodal-sub { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: rgba(10,10,9,.6); margin: 0 0 26px; max-width: 46ch; }
.cmodal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.cfield { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cfield-full { grid-column: 1 / -1; }
.cfield > span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(10,10,9,.5); }
.cfield input, .cfield select, .cfield textarea { width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--ink); background: #FAFAF7; border: 1px solid rgba(10,10,9,.16); border-radius: 0; padding: 12px 14px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
.cfield textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.cfield input::placeholder, .cfield textarea::placeholder { color: rgba(10,10,9,.38); }
.cfield select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2314141299' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.cfield input:focus, .cfield select:focus, .cfield textarea:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); background: #fff; }
.cmodal-send { margin-top: 24px; width: 100%; justify-content: center; font-size: 15px; padding: 16px 24px; }   /* full-width; visual = the shared .btn.accent CTA (transparent, ink outline, fills orange on hover) */
/* while the modal is open: show a plain donut cursor (the JS dot + pixel trail sit below the dialog's
   top layer, so they can't render here) and no trail. .modal-open is toggled on <html> by the modal JS. */
html.modal-open, html.modal-open * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='9' fill='none' stroke='%23111318' stroke-width='2'/%3E%3C/svg%3E") 11 11, auto; }
html.modal-open input, html.modal-open textarea { cursor: text; }
html.modal-open .cmodal-send { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='13' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") 16 16, auto; }   /* bigger WHITE ring over the orange CTA */
@media (max-width: 560px) { .cmodal-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cmodal[open], .cmodal[open]::backdrop { animation: none; } }