@import url("fonts.css");

/* =========================================================================
   TRIAXON — cinematic dark-industrial system
   Theme lock: dark. Accent: signal red #C21F2C, used rarely.
   Fonts self-hosted (OFL): Saira Condensed (display), IBM Plex Mono (data),
   IBM Plex Sans (body). No em-dashes anywhere. No third-party requests.
   ========================================================================= */

:root{
  /* palette */
  --onyx:      #0B0E14;
  --onyx-0:    #070A0F;   /* deepest */
  --onyx-1:    #0E121A;   /* panel */
  --onyx-2:    #141922;   /* raised */
  --line:      rgba(185,190,198,.14);
  --line-soft: rgba(185,190,198,.08);
  --line-hot:  rgba(194,31,44,.55);
  --titanium:  #B9BEC6;
  --titanium-d:#7B828C;   /* dim label */
  --titanium-x:#7C838D;   /* faintest, AA on onyx */
  --bone:      #F3F1EA;
  --steel:     #3C4650;
  --red:       #C21F2C;
  --red-lit:   #E33342;
  --red-text:  #ED4E59;   /* AA-passing red for small labels */

  /* type */
  --display: "Saira Condensed", "Saira SemiCondensed", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* rhythm */
  --wrap: 1280px;
  --gut: clamp(20px, 5vw, 64px);
  --sect: clamp(5rem, 11vh, 9rem);

  /* motion */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);

  --nav-h: 68px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:#0B0E14; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  background:var(--onyx);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(15px,.5vw + 14px,17px);
  line-height:1.6;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100dvh;
}
img,svg,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; padding:0; }
::selection{ background:var(--red); color:var(--bone); }
:focus-visible{ outline:2px solid var(--red-lit); outline-offset:3px; }

/* ---------- ambient overlays (fixed, cheap, pointer-none) ----------
   No mix-blend-mode: on iOS Safari a fixed blended layer can black out the
   content beneath it. Plain low-opacity layers get the same texture safely. */
.fx-grain,.fx-scan,.fx-vig{ position:fixed; inset:0; pointer-events:none; z-index:2; }
.fx-vig{ background:radial-gradient(120% 90% at 50% 12%, transparent 40%, rgba(0,0,0,.45) 100%); }
.fx-scan{
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.13) 2px 3px);
  opacity:.5;
}
.fx-grain{
  opacity:.045; z-index:3;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* phones: drop the texture layers entirely (perf + zero risk of iOS quirks) */
@media (max-width:760px){ .fx-scan,.fx-grain{ display:none; } }
@media (prefers-reduced-motion: reduce){ .fx-scan{ display:none; } }

/* =========================================================================
   TYPOGRAPHY
   ========================================================================= */
.display{ font-family:var(--display); font-weight:600; line-height:.92; letter-spacing:-.01em; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:.96; letter-spacing:-.01em; }
h1{ font-size:clamp(2.6rem,6.5vw,5.4rem); text-transform:uppercase; }
h2{ font-size:clamp(2rem,4.6vw,3.5rem); text-transform:uppercase; }
h3{ font-size:clamp(1.3rem,2.2vw,1.7rem); }
h4{ font-size:1rem; }
p{ max-width:66ch; }
b,strong{ font-weight:600; color:var(--bone); }

.kicker{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--titanium-d);
  display:inline-flex; align-items:center; gap:.7em;
}
.kicker::before{ content:""; width:26px; height:1px; background:var(--red); opacity:.9; }
.lede{ font-size:clamp(1.05rem,1.5vw,1.32rem); color:var(--titanium); line-height:1.55; font-weight:300; max-width:60ch; }
.muted{ color:var(--titanium-d); }
.hot{ color:var(--red-text); }

/* =========================================================================
   LAYOUT
   ========================================================================= */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sect); position:relative; }
.rule{ height:1px; background:var(--line); border:0; }

/* blueprint coordinate frame, faint */
.grid-lines{ position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(120% 100% at 50% 0,#000,transparent 78%);
}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:40; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--gut);
  background:linear-gradient(to bottom, rgba(7,10,15,.86), rgba(7,10,15,0));
  transition:background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{ background:rgba(8,11,16,.9); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--line); }
.nav__id{ display:inline-flex; align-items:center; gap:.62rem; letter-spacing:.02em; }
.nav__word{ font-family:var(--display); font-weight:600; font-size:1.32rem; text-transform:uppercase; letter-spacing:.06em; }
.nav__links{ display:flex; align-items:center; gap:2.1rem; }
.nav__links a{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--titanium); position:relative; padding-block:.6rem; transition:color .3s var(--ease);
}
.nav__links a::after{ content:""; position:absolute; left:0; bottom:.35rem; width:0; height:1px; background:var(--red); transition:width .35s var(--ease); }
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{ width:100%; }
.nav__links a[aria-current="page"]{ color:var(--bone); }
.nav__cta{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone); border:1px solid var(--line); padding:.62rem 1.05rem; border-radius:2px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav__cta:hover{ border-color:var(--red); background:rgba(194,31,44,.08); }
.nav__burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; }
.nav__burger span{ display:block; width:22px; height:1.5px; background:var(--bone); position:relative; transition:.3s var(--ease); }
.nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; width:22px; height:1.5px; background:var(--bone); transition:.3s var(--ease); }
.nav__burger span::before{ top:-7px; } .nav__burger span::after{ top:7px; }
body.menu-open .nav__burger span{ background:transparent; }
body.menu-open .nav__burger span::before{ top:0; transform:rotate(45deg); }
body.menu-open .nav__burger span::after{ top:0; transform:rotate(-45deg); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:35; background:var(--onyx-0);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--gut); gap:.4rem; transform:translateY(-100%); transition:transform .5s var(--ease-io);
  visibility:hidden;
}
body.menu-open .drawer{ transform:translateY(0); visibility:visible; }
.drawer a{ font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:clamp(2rem,9vw,3rem); line-height:1.15; color:var(--titanium); display:flex; align-items:baseline; gap:1rem; }
.drawer a b{ font-family:var(--mono); font-size:.7rem; font-weight:500; color:var(--titanium-x); letter-spacing:.2em; }
.drawer a:active{ color:var(--bone); }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{ position:relative; min-height:100dvh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.hero__canvas{ position:absolute; inset:0; z-index:0; width:100%; height:100%; }
.hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(7,10,15,.92) 4%, rgba(7,10,15,.35) 34%, transparent 62%),
             radial-gradient(80% 60% at 78% 34%, rgba(194,31,44,.05), transparent 60%);
}
.hero__inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(3rem,7vh,5.5rem); }
.hero__meta{ display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center; margin-bottom:1.5rem; }
.hero h1{ font-size:clamp(3.2rem,12vw,9.5rem); line-height:.86; margin:.2rem 0 .1rem; }
.hero h1 .ax{ color:var(--titanium); }
.hero__tag{ font-family:var(--display); font-weight:500; text-transform:uppercase; font-size:clamp(1.1rem,2.4vw,1.7rem); letter-spacing:.04em; color:var(--titanium); }
.hero__tag b{ color:var(--red); font-weight:600; }
.hero__lede{ margin-top:1.4rem; max-width:52ch; }
.hero__foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-top:2.4rem; flex-wrap:wrap; }

/* domain rail (four axes) */
.axes{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:3px; overflow:hidden; width:100%; max-width:760px; }
.axis{ background:var(--onyx-1); padding:1.05rem 1.1rem 1.15rem; position:relative;
  display:flex; flex-direction:column; gap:.5rem; transition:background .4s var(--ease); overflow:hidden; }
.axis::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.axis:hover{ background:var(--onyx-2); } .axis:hover::after{ transform:scaleX(1); }
.axis__k{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; color:var(--titanium-x); text-transform:uppercase; }
.axis__n{ font-family:var(--display); font-weight:600; font-size:1.35rem; text-transform:uppercase; letter-spacing:.02em; }
.axis__d{ font-family:var(--mono); font-size:.68rem; line-height:1.5; color:var(--titanium-d); letter-spacing:.02em; }
.axis .mark{ position:absolute; top:.9rem; right:.9rem; opacity:.5; }

.btn{ display:inline-flex; align-items:center; gap:.7rem; font-family:var(--mono); font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone); border:1px solid var(--line);
  padding:.9rem 1.4rem; border-radius:2px; transition:.3s var(--ease); white-space:nowrap; }
.btn:hover{ border-color:var(--red); background:rgba(194,31,44,.09); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--solid{ background:var(--bone); color:var(--onyx-0); border-color:var(--bone); font-weight:600; }
.btn--solid:hover{ background:var(--red); border-color:var(--red); color:var(--bone); }
.btn i{ font-style:normal; transition:transform .3s var(--ease); }
.btn:hover i{ transform:translateX(3px); }

/* scroll ticker (rare, data readout not a "scroll cue") */
.readout{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--titanium-x); text-transform:uppercase; display:flex; gap:1.4rem; flex-wrap:wrap; }
.readout span{ display:inline-flex; gap:.5em; align-items:center; }
.readout span::before{ content:""; width:5px; height:5px; background:var(--titanium-x); }
.readout .live::before{ background:var(--red); box-shadow:0 0 8px var(--red); }

/* =========================================================================
   MARK (triaxial glyph)
   ========================================================================= */
.mark .blade{ fill:var(--titanium); }
.mark .node{ fill:var(--bone); }
.mark .tip{ fill:var(--red); }
.mark .live{ fill:var(--red); }
.mark.dim .blade{ fill:var(--titanium-d); }
.mark.dim .node{ fill:var(--titanium-d); }

/* =========================================================================
   SECTION HEADERS + reveal
   ========================================================================= */
.sec-head{ display:flex; flex-direction:column; gap:1rem; max-width:60ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.sec-head h2 + p{ color:var(--titanium); font-weight:300; }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* =========================================================================
   PLATE (treated documentary photo, "declassified" framing)
   ========================================================================= */
.plate{ position:relative; border:1px solid var(--line); background:var(--onyx-0); overflow:hidden; }
.plate img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.02); }
.plate::before{ /* scanline wash */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.16) 3px 4px);
  opacity:.4;
}
.plate__tick{ position:absolute; z-index:3; width:12px; height:12px; pointer-events:none; opacity:.7; }
.plate__tick::before,.plate__tick::after{ content:""; position:absolute; background:var(--titanium); }
.plate__tick::before{ width:100%; height:1px; top:0; } .plate__tick::after{ width:1px; height:100%; left:0; }
.plate__tick.tl{ top:9px; left:9px; } .plate__tick.tr{ top:9px; right:9px; transform:scaleX(-1); }
.plate__tick.bl{ bottom:9px; left:9px; transform:scaleY(-1); } .plate__tick.br{ bottom:9px; right:9px; transform:scale(-1); }
.plate__cap{ position:absolute; z-index:3; left:0; bottom:0; right:0; display:flex; justify-content:space-between; gap:1rem;
  padding:.7rem .85rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--titanium); background:linear-gradient(to top, rgba(7,10,15,.85), transparent); }
.plate__cap .id{ color:var(--red-text); }
.plate__glyph{ position:absolute; z-index:3; top:.85rem; right:.9rem; opacity:.85; }

/* =========================================================================
   SCHEMATIC (one command layer)
   ========================================================================= */
.schematic{ border:1px solid var(--line); border-radius:4px; background:var(--onyx-1); overflow:hidden; }
.schematic__domains{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.dnode{ background:var(--onyx-1); padding:1.4rem 1.3rem; display:flex; flex-direction:column; gap:.4rem; align-items:flex-start; transition:background .35s var(--ease); }
.dnode:hover{ background:var(--onyx-2); }
.dnode b{ font-family:var(--display); font-weight:600; font-size:1.5rem; text-transform:uppercase; margin-top:.4rem; }
.dnode span{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--titanium-d); }
.schematic__bus{ display:grid; grid-template-columns:repeat(3,1fr); height:34px; position:relative; background:var(--onyx-0); border-block:1px solid var(--line); }
.schematic__bus span{ position:relative; }
.schematic__bus span::before{ content:""; position:absolute; left:50%; top:0; width:1px; height:100%; background:linear-gradient(var(--red),transparent); opacity:.6; }
.schematic__core{ display:grid; grid-template-columns:auto 1fr auto; gap:1.2rem; align-items:center; padding:1.5rem 1.4rem;
  background:radial-gradient(120% 200% at 50% -40%, rgba(194,31,44,.10), transparent 60%), var(--onyx-2); transition:background .35s var(--ease); }
.schematic__core:hover{ background:radial-gradient(120% 200% at 50% -40%, rgba(194,31,44,.16), transparent 60%), var(--onyx-2); }
.schematic__core b{ font-family:var(--display); font-weight:600; font-size:1.5rem; text-transform:uppercase; display:block; }
.schematic__core span{ font-family:var(--mono); font-size:.74rem; color:var(--titanium-d); letter-spacing:.02em; }
.schematic__core em{ font-family:var(--mono); font-style:normal; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--red-text); flex:none; }
.schematic__shared{ display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border-top:1px solid var(--line); }
.schematic__shared span{ flex:1 1 auto; background:var(--onyx-1); padding:.75rem 1.1rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--titanium-d); text-align:center; }

/* =========================================================================
   DOMAIN SCROLL STORY (sticky media + flowing steps)
   ========================================================================= */
.story{ position:relative; }
.story__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.story__media{ position:sticky; top:0; height:100dvh; border-inline:1px solid var(--line); overflow:hidden; isolation:isolate; }
.story__media .layer{ position:absolute; inset:0; opacity:0; transition:opacity .8s var(--ease); }
.story__media .layer.on{ opacity:1; }
.story__media .layer img{ width:100%; height:100%; object-fit:cover; }
.story__media .layer::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(7,10,15,.55), transparent 45%, rgba(7,10,15,.35)); }
.story__media .plate__tick{ z-index:4; opacity:.6; }
.story__hud{ position:absolute; z-index:4; left:1rem; top:1rem; width:40px; height:40px; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0 88%, rgba(227,51,66,.7) 92% 100%); border-radius:50%; opacity:.5;
  animation:hudspin 6s linear infinite; }
@keyframes hudspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .story__hud{ animation:none; } }
.story__steps{ position:relative; }
.story__step{ min-height:100dvh; display:flex; flex-direction:column; justify-content:center; gap:1.1rem; padding-block:14vh; }
.story__step .no{ font-family:var(--mono); font-size:.72rem; letter-spacing:.28em; color:var(--red-text); text-transform:uppercase; }
.story__step h3{ font-size:clamp(1.9rem,3.4vw,3rem); text-transform:uppercase; max-width:18ch; }
.story__step p{ color:var(--titanium); font-weight:300; max-width:44ch; }
.story__step .spec{ display:flex; gap:1.8rem; flex-wrap:wrap; margin-top:.8rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.story__step .spec b{ font-family:var(--display); font-size:1.9rem; display:block; line-height:1; }
.story__step .spec span{ font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--titanium-d); }

/* =========================================================================
   PROOF (portfolio scale) + CTA
   ========================================================================= */
.proof__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.proof__cell{ background:var(--onyx-1); padding:clamp(1.6rem,3vw,2.4rem) 1.4rem; }
.proof__cell b{ font-family:var(--display); font-weight:600; font-size:clamp(2.6rem,5vw,3.8rem); line-height:.9; display:block; }
.proof__cell span{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--titanium-d); display:block; margin-top:.8rem; }
.cta__in{ display:grid; grid-template-columns:1.4fr auto; gap:clamp(1.6rem,4vw,3.5rem); align-items:end; }
.cta__in h2{ margin:1rem 0 1.2rem; max-width:16ch; }
.cta__acts{ display:flex; flex-direction:column; gap:.8rem; }

.skip:focus{ position:fixed !important; left:1rem; top:1rem; z-index:60; background:var(--bone); color:var(--onyx-0); padding:.6rem 1rem; border-radius:2px; }

/* =========================================================================
   MADE IN FLORIDA band
   ========================================================================= */
.made{ position:relative; border-block:1px solid var(--line); background:
   radial-gradient(90% 120% at 84% 0%, rgba(194,31,44,.06), transparent 55%), var(--onyx-1); overflow:hidden; }
.made__in{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,4vw,3.4rem); align-items:center; padding-block:clamp(3rem,7vw,5rem); }
.made__in h2{ font-size:clamp(1.7rem,3.2vw,2.7rem); max-width:22ch; }
.made__in p{ color:var(--titanium); font-weight:300; margin-top:1rem; max-width:64ch; }
.made__stamp{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.6rem; }
.made__stamp span{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--titanium-d); border:1px solid var(--line); padding:.5rem .8rem; border-radius:2px; }
.made__stamp span.hot{ color:var(--red-text); border-color:var(--line-hot); }
.made__mark{ opacity:.9; }

/* =========================================================================
   PAGE HEADER (interior pages) — cinematic sensor-field header
   ========================================================================= */
.pagehead{ padding-top:calc(var(--nav-h) + clamp(3.5rem,10vh,7rem)); padding-bottom:clamp(2.5rem,6vw,4.5rem); position:relative; }
.pagehead h1{ margin:1.1rem 0 1.4rem; max-width:16ch; }
.pagehead .lede{ max-width:56ch; }

.pagehero{ position:relative; min-height:clamp(440px,66vh,680px); display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.pagehero__canvas{ position:absolute; inset:0; z-index:0; width:100%; height:100%; }
.pagehero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, var(--onyx) 5%, rgba(11,14,20,.32) 42%, transparent 70%),
             radial-gradient(66% 60% at 82% 40%, rgba(194,31,44,.05), transparent 60%); }
.pagehero__in{ position:relative; z-index:2; width:100%; padding-top:calc(var(--nav-h) + 2.4rem); padding-bottom:clamp(2.5rem,6vh,4rem); }
.pagehero h1{ margin:1.1rem 0 1.3rem; max-width:16ch; }
.pagehero .lede{ max-width:56ch; }
.pagehero .readout{ margin-top:1.7rem; }

/* kinetic mask-rise title */
.rise .ln{ display:block; overflow:hidden; padding-bottom:.04em; }
.rise .ln > span{ display:block; }
@media (prefers-reduced-motion: no-preference){
  .rise .ln > span{ transform:translateY(112%); animation:rise 1s var(--ease-io) forwards; }
  .rise .ln:nth-child(2) > span{ animation-delay:.09s; }
  .rise .ln:nth-child(3) > span{ animation-delay:.18s; }
}
@keyframes rise{ to{ transform:translateY(0); } }

/* =========================================================================
   PRODUCTS
   ========================================================================= */
.line{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center; padding-block:clamp(2.5rem,6vw,4.5rem); border-top:1px solid var(--line); }
.line:nth-child(even){ direction:rtl; } .line:nth-child(even) > *{ direction:ltr; }
.line__fig{ aspect-ratio:16/10; }
.line__hd{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:.8rem; }
.line__hd h2{ font-size:clamp(2.2rem,4.5vw,3.6rem); }
.line__dom{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red-text); }
.line__say{ color:var(--titanium); font-weight:300; max-width:52ch; margin-bottom:1.6rem; }
.sys{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.sys li{ background:var(--onyx-1); display:grid; grid-template-columns:auto 1fr; gap:1rem; padding:.9rem 1.05rem; align-items:start; transition:background .3s var(--ease); }
.sys li:hover{ background:var(--onyx-2); }
.sys code{ font-family:var(--mono); font-size:.72rem; color:var(--red-text); letter-spacing:.06em; padding-top:.15rem; white-space:nowrap; }
.sys b{ font-weight:600; font-size:.98rem; }
.sys b span{ display:block; font-weight:400; font-size:.78rem; color:var(--titanium-d); font-family:var(--mono); letter-spacing:.02em; line-height:1.6; margin-top:.25rem; }
.line__more{ font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--titanium-d); margin-top:1rem; padding-left:.2rem; }

/* =========================================================================
   INDUSTRIES tabs + cards
   ========================================================================= */
.tabs{ display:inline-flex; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden; margin-bottom:2.6rem; }
.tab{ font-family:var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--titanium-d);
  padding:.85rem 1.3rem; background:var(--onyx-1); transition:.3s var(--ease); position:relative; }
.tab[aria-selected="true"]{ color:var(--bone); background:var(--onyx-2); }
.tab[aria-selected="true"]::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--red); }
.tab:hover{ color:var(--bone); }
.panel[hidden]{ display:none; }
.panel__lede{ color:var(--titanium); font-weight:300; max-width:64ch; margin-bottom:2.4rem; font-size:1.1rem; }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(275px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.card{ background:var(--onyx-1); padding:1.5rem 1.4rem; transition:background .35s var(--ease); position:relative; }
.card:hover{ background:var(--onyx-2); }
.card h3{ font-size:1.18rem; text-transform:uppercase; margin-bottom:1rem; padding-bottom:.9rem; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:.6rem; }
.card h3::before{ content:""; width:6px; height:6px; background:var(--red); flex:none; }
.card li{ font-family:var(--mono); font-size:.76rem; color:var(--titanium-d); line-height:1.5; padding:.32rem 0 .32rem 1rem; position:relative; }
.card li::before{ content:""; position:absolute; left:0; top:.85em; width:5px; height:1px; background:var(--titanium-x); }
.buyers{ font-family:var(--mono); font-size:.82rem; line-height:1.9; color:var(--titanium-d); letter-spacing:.02em; margin-top:2.4rem; padding-top:1.8rem; border-top:1px solid var(--line); max-width:none; }
.buyers b{ display:block; font-family:var(--display); font-size:1.1rem; letter-spacing:.02em; text-transform:uppercase; color:var(--bone); margin-bottom:.6rem; }

/* =========================================================================
   ABOUT
   ========================================================================= */
.about__top{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; margin-bottom:clamp(3.5rem,8vw,6rem); }
.about__top p{ color:var(--titanium); font-weight:300; }
.facts{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.fact{ background:var(--onyx-1); padding:1.3rem 1.2rem; }
.fact dt{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--titanium-d); }
.fact dd{ font-family:var(--display); font-size:clamp(2.2rem,4vw,3rem); font-weight:600; line-height:1; margin-top:.55rem; }
.fact small{ display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.03em; text-transform:none; color:var(--titanium-x); margin-top:.6rem; line-height:1.5; }
.people{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2rem); }
.person__img{ position:relative; aspect-ratio:1; margin-bottom:1.2rem; overflow:hidden; }
.person__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.person__img .p-color{ filter:none; z-index:0; }
.person__img .p-duo{ z-index:1; opacity:1; }
/* reveal the real colour photo on hover (pointer devices only) */
@media (hover:hover){
  .person__img .p-color,.person__img .p-duo{ transition:opacity .55s var(--ease), transform .6s var(--ease); }
  .person__img:hover .p-duo{ opacity:0; transform:scale(1.04); }
  .person__img:hover .p-color{ transform:scale(1.04); }
}
.person h3{ font-size:1.35rem; text-transform:uppercase; }
.person__role{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--red-text); margin:.4rem 0 1rem; }
.person__bio{ font-size:.88rem; color:var(--titanium-d); line-height:1.7; }
.person__meta{ font-family:var(--mono); font-size:.68rem; letter-spacing:.03em; color:var(--titanium-x); margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line); line-height:1.6; }

/* =========================================================================
   CAREERS
   ========================================================================= */
.careers__in{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.careers__fig{ position:sticky; top:calc(var(--nav-h) + 2rem); }
.careers__fig figcaption{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--titanium-d); margin-top:.9rem; }
.roles{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.role{ background:var(--onyx-1); display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.15rem 1.3rem; transition:background .3s var(--ease); }
.role:hover{ background:var(--onyx-2); }
.role b{ font-size:1.02rem; }
.role span{ display:block; font-family:var(--mono); font-size:.74rem; color:var(--titanium-d); margin-top:.3rem; line-height:1.5; }
.role em{ font-family:var(--mono); font-style:normal; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--red-text); flex:none; }
.note{ font-family:var(--mono); font-size:.8rem; line-height:1.8; color:var(--titanium-d); margin-top:1.6rem; padding-left:1.2rem; border-left:2px solid var(--red); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot{ padding-block:clamp(3rem,6vw,4.5rem); }
.foot__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid var(--line); }
.foot__id{ display:inline-flex; align-items:center; gap:.6rem; }
.foot__id span{ font-family:var(--display); font-weight:600; font-size:1.3rem; text-transform:uppercase; letter-spacing:.05em; }
.foot h4{ font-family:var(--mono); font-weight:500; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--titanium-x); margin-bottom:1.1rem; }
.foot li{ margin-bottom:.6rem; }
.foot li a{ font-size:.88rem; color:var(--titanium-d); transition:color .25s var(--ease); }
.foot li a:hover{ color:var(--bone); }
.foot__tag{ font-size:.88rem; color:var(--titanium-d); max-width:30ch; margin-top:.9rem; }
.foot__legal{ display:flex; flex-wrap:wrap; gap:.6rem 2rem; padding-top:1.8rem; }
.foot__legal span{ font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--titanium-x); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1000px){
  .story__inner{ grid-template-columns:1fr; }
  .story__media{ display:none; }
  .story__step{ min-height:auto; padding-block:8vh; }
  .cta__in{ grid-template-columns:1fr; align-items:start; }
  .about__top,.careers__in{ grid-template-columns:1fr; }
  .careers__fig{ position:static; }
  .people{ grid-template-columns:1fr 1fr; }
  .foot__top{ grid-template-columns:1fr 1fr; gap:2rem 1.5rem; }
}
@media (max-width:760px){
  :root{ --nav-h:60px; }
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .hero{ align-items:flex-start; min-height:100dvh; padding-top:calc(var(--nav-h) + 1.5rem); }
  .hero__inner{ padding-bottom:3rem; }
  .pagehero{ min-height:auto; }
  .pagehero__in{ padding-top:calc(var(--nav-h) + 1.6rem); padding-bottom:2.5rem; }
  .hero h1{ font-size:clamp(3rem,15vw,4.6rem); }
  .hero__foot{ margin-top:2rem; }
  .axes{ grid-template-columns:1fr 1fr; max-width:none; }
  .line{ grid-template-columns:1fr; direction:ltr !important; }
  .line:nth-child(even){ direction:ltr; }
  .line__fig{ aspect-ratio:16/10; }
  .facts{ grid-template-columns:1fr 1fr; }
  .people{ grid-template-columns:1fr; }
  .person__img{ max-width:320px; }
  .made__in{ grid-template-columns:1fr; }
  .made__mark{ display:none; }
  .role{ flex-direction:column; align-items:flex-start; gap:.6rem; }
  .foot__top{ grid-template-columns:1fr 1fr; }
  h1{ letter-spacing:-.005em; }
  .schematic__domains{ grid-template-columns:1fr; }
  .schematic__bus{ display:none; }
  .schematic__core{ grid-template-columns:auto 1fr; }
  .schematic__core em{ grid-column:1 / -1; }
  .proof__grid{ grid-template-columns:1fr 1fr; }
  .schematic__shared span{ flex-basis:50%; }
}
@media (max-width:400px){
  .facts{ grid-template-columns:1fr; }
  .foot__top{ grid-template-columns:1fr; }
  .proof__grid{ grid-template-columns:1fr; }
}
@media (max-width:340px){
  .axes{ grid-template-columns:1fr; }
}

/* =========================================================================
   iOS SAFARI SAFETY: aspect-ratio fallback so image plates never collapse
   ========================================================================= */
@supports not (aspect-ratio: 1 / 1){
  .line__fig, .plate, .person__img{ height:auto; }
  .line__fig img, .plate img{ height:auto; }
  .person__img .p-color{ position:static; height:auto; }
  .person__img .p-duo{ display:none; }
}