/* ==========================================================================
   ForegoneAI — HANA
   Design system
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Parkinsans";
  src: url("../fonts/Parkinsans-Variable.woff") format("woff-variations"),
       url("../fonts/Parkinsans-Variable.woff") format("woff");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("../fonts/Onest-Variable.woff") format("woff-variations"),
       url("../fonts/Onest-Variable.woff") format("woff");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Darker Grotesque";
  src: url("../fonts/DarkerGrotesque-Variable.woff") format("woff-variations"),
       url("../fonts/DarkerGrotesque-Variable.woff") format("woff");
  font-weight: 300 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* surfaces */
  --bg:          #060607;
  --bg-1:        #0A0A0C;
  --bg-2:        #0E0E11;
  --bg-raise:    #141417;
  --line:        rgba(255, 255, 255, 0.085);
  --line-soft:   rgba(255, 255, 255, 0.045);
  --glass:       rgba(255, 255, 255, 0.025);

  /* ink — a pure neutral ramp; the reference has no hue anywhere in it */
  --ink:         #F4F5F6;
  --ink-2:       #A9ACB2;
  --ink-3:       #71757C;
  --ink-4:       #45484E;

  /* accents pulled from the HANA renders */
  --amber:       #E6E6E6;
  --amber-hot:   #FFFFFF;
  --amber-soft:  #F5F5F5;
  --amber-deep:  #4D4D4D;
  --dusk-teal:   #A6A6A6;
  --dusk-rose:   #C4C4C4;
  --concrete:    #8C8C8C;

  --amber-glow:  0 0 0 1px rgba(255,255,255,.28), 0 8px 40px -8px rgba(255,255,255,.35);

  /* signature glow accent — used sparingly: live states, data, geometry */
  /* the accent is light itself — one white source, used sparingly */
  --glow:        #FFFFFF;
  --glow-soft:   #E8EDF3;
  --glow-deep:   #5A6068;
  --glow-rgb:    236, 241, 247;

  /* type */
  --f-display: "Parkinsans", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Onest", "Helvetica Neue", Arial, sans-serif;
  --f-alt:     "Darker Grotesque", "Onest", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* rhythm */
  --gutter: clamp(22px, 6.8vw, 96px);
  --maxw: 1400px;
  --nav-h: 74px;      /* 16px pad + 58px bar — the line the hero hangs from */
  --sec-y: clamp(76px, 8.6vw, 136px);

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

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(15px, 1.02vw, 17px);
  line-height: 1.62;
  font-weight: 350;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--glow); color: #0A0806; }

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

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: #241F1B;
  border: 3px solid var(--bg);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--amber-deep); }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 940px; }
/* keep anchor targets clear of the fixed nav */
[id] { scroll-margin-top: clamp(92px, 12vh, 132px); }
.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(56px, 7vw, 104px); }
.section--flush-t { padding-top: 0; }
.section--flush-b { padding-bottom: 0; }
.hr {
  height: 1px;
  background: var(--line-soft);
  border: 0;
}

/* ---------- Typography ---------- */
.display,
h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.d1 { font-size: clamp(2.9rem, 7.4vw, 6.4rem); font-weight: 600; }
.d2 { font-size: clamp(2.1rem, 4.6vw, 3.85rem); }
.d3 { font-size: clamp(1.55rem, 2.6vw, 2.25rem); letter-spacing: -0.028em; line-height: 1.06; }
.d4 {
  font-family: var(--f-body);
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.lede {
  font-size: clamp(1.06rem, 1.5vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 340;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
.body-lg { font-size: clamp(1rem, 1.15vw, 1.09rem); color: var(--ink-2); }
p { color: var(--ink-2); text-wrap: pretty; }
p + p { margin-top: 1.05em; }
.ink   { color: var(--ink); }
.muted { color: var(--ink-3); }
strong, b { color: var(--ink); font-weight: 600; }

/* statement type — Darker Grotesque, very large */
.statement {
  font-family: var(--f-alt);
  font-weight: 500;
  font-size: clamp(2.4rem, 6.2vw, 5.4rem);
  line-height: 0.92;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}
.statement em {
  font-style: normal;
  color: var(--amber);
}

/* eyebrow / section index */
/* Section label — an editorial kicker, not a chip. A hairline rule that
   fades out, then wide-tracked small caps. Labels shouldn't look clickable. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-family: var(--f-mono);
  font-size: 0.655rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 26px;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: rgba(237, 232, 225, .4);
  flex: none;
}
/* accent variant — the rule carries the signature colour instead of a lamp */
.eyebrow--dot {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-2);
}
.eyebrow--dot::before {
  width: 7px; height: 7px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: var(--glow);
  box-shadow: 0 0 14px rgba(var(--glow-rgb), .5);
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .45; transform: scale(.8); }
}

.sec-head { max-width: 78ch; }
.sec-head .d2 + .lede { margin-top: 22px; }

/* ---------- Buttons ---------- */
.btn {
  --pad: 15px 26px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: var(--pad);
  border-radius: 100px;
  border: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--e-out), border-color .45s var(--e-out), transform .45s var(--e-out);
  white-space: nowrap;
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, var(--amber-hot), var(--amber) 55%, var(--amber-soft));
  transform: translateY(101%);
  transition: transform .55s var(--e-out);
}
.btn:hover { color: #14100C; border-color: transparent; }
.btn:hover::after { transform: translateY(0); }
.btn:active { transform: scale(.975); }
.btn .arw { transition: transform .45s var(--e-out); }
.btn:hover .arw { transform: translateX(4px); }

.btn--primary {
  color: #14100C;
  border-color: transparent;
  background: linear-gradient(105deg, var(--amber-hot), var(--amber) 55%, var(--amber-soft));
  box-shadow: 0 10px 44px -14px rgba(255,255,255,.75), 0 0 0 1px rgba(var(--glow-rgb), .18);
}
.btn--primary::after {
  background: var(--ink);
  transform: translateY(101%);
}
.btn--primary:hover { color: #0A0806; }
.btn--lg { --pad: 18px 32px; font-size: 0.93rem; }
.btn--sm { --pad: 10px 18px; font-size: 0.8rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}

/* text link with underline sweep */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--amber);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--amber), var(--amber));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .5s var(--e-out);
}
.tlink:hover { background-size: 100% 1px; }
.tlink .arw { transition: transform .4s var(--e-out); }
.tlink:hover .arw { transform: translateX(4px); }

/* ---------- Sitewide technical grid backdrop ---------- */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(135% 105% at 50% 0%, #000 22%, rgba(0,0,0,.45) 62%, transparent 100%);
  mask-image: radial-gradient(135% 105% at 50% 0%, #000 22%, rgba(0,0,0,.45) 62%, transparent 100%);
}

/* ---------- Grain + vignette overlays ---------- */
.grain {
  position: fixed;
  inset: -120%;
  z-index: 9998;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 7s steps(6) infinite;
  will-change: transform;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0,0); }
}

/* ---------- Progress bar ---------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--glow-deep), var(--glow), var(--glow-soft));
  box-shadow: 0 0 10px rgba(var(--glow-rgb), .6);
  z-index: 900;
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 800;
  padding-top: 16px;
}
.nav__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  height: 58px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.03rem;
  letter-spacing: -0.03em;
  flex: none;
  justify-self: start;
}
.brand__mark {
  width: 28px; height: 28px;
  flex: none;
  color: var(--ink);
  transition: color .45s var(--e-out), transform .6s var(--e-out);
}
.brand:hover .brand__mark { color: var(--glow); transform: scale(1.06); }
.brand em { font-style: normal; color: var(--glow); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  justify-self: center;
}
.nav__links a {
  position: relative;
  display: block;
  padding: 9px 17px;
  font-size: .82rem;
  font-weight: 400;
  color: var(--ink-2);
  border-radius: 100px;
  border: 1px solid var(--line);
  background: rgba(10, 9, 12, .55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: color .35s var(--e-out), background .35s var(--e-out), border-color .35s var(--e-out);
}
.nav__links a:hover { color: var(--ink); border-color: var(--glow); }
.nav__links a.is-active {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}
.nav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  justify-self: end;
}
.nav__cta .btn {
  border: 1px solid var(--line);
  background: rgba(10, 9, 12, .55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 12px; right: 12px;
  height: 1.2px;
  background: var(--ink);
  transition: transform .45s var(--e-out), opacity .3s;
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 23px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 790;
  background: var(--bg);
  padding: 100px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--e-out);
  overflow-y: auto;
}
body.menu-open .drawer { clip-path: inset(0 0 0 0); }
body.menu-open { overflow: hidden; }
.drawer__links { list-style: none; }
.drawer__links li { overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.drawer__links a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0;
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 8vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  transform: translateY(110%);
  transition: transform .7s var(--e-out), color .3s;
}
.drawer__links a:hover { color: var(--amber); }
.drawer__links a i {
  font-style: normal;
  font-family: var(--f-body);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--ink-4);
}
body.menu-open .drawer__links a { transform: translateY(0); }
body.menu-open .drawer__links li:nth-child(1) a { transition-delay: .08s; }
body.menu-open .drawer__links li:nth-child(2) a { transition-delay: .14s; }
body.menu-open .drawer__links li:nth-child(3) a { transition-delay: .20s; }
body.menu-open .drawer__links li:nth-child(4) a { transition-delay: .26s; }
body.menu-open .drawer__links li:nth-child(5) a { transition-delay: .32s; }
body.menu-open .drawer__links li:nth-child(6) a { transition-delay: .38s; }
body.menu-open .drawer__links li:nth-child(7) a { transition-delay: .44s; }
.drawer__foot {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: center;
  font-size: .78rem; color: var(--ink-3);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(48px, 7vw, 96px);
  padding-top: 130px;
  overflow: hidden;
  isolation: isolate;
}
/* every hero runs the same height, so the copy lands on the same line on every
   page — a shorter sub-page hero leaves its copy floating with dead space under
   it and reads as a different layout */
.hero--sub { min-height: 100svh; }
/* every hero anchors its copy to the bottom-left, so the form has the whole
   upper frame to itself and the two read as one diagonal instead of two blocks
   at the same eye level */
.hero { padding-bottom: clamp(40px, 5.4vw, 74px); }
/* index.html hero visual stack (no video) — grid, 3D geometry, scanline */
/* soft light bloom behind the geometry — gives the object atmosphere and
   depth instead of flat wire-on-black */
.hero__aura {
  position: absolute;
  top: 54%; left: 50%;
  width: min(1180px, 94vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: -7;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(var(--glow-rgb), .2),
    rgba(var(--glow-rgb), .07) 36%,
    transparent 68%);
  filter: blur(30px);
  animation: aura 12s var(--e-io) infinite;
}
@keyframes aura {
  0%,100% { transform: translate(-50%,-50%) scale(1);    opacity: 1; }
  50%     { transform: translate(-50%,-50%) scale(1.07); opacity: .8; }
}
.hero__grid-bg {
  position: absolute;
  inset: 0;
  z-index: -8;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(115% 85% at 50% 28%, #000 42%, transparent 88%);
  mask-image: radial-gradient(115% 85% at 50% 28%, #000 42%, transparent 88%);
}
.hero__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -6;
  pointer-events: none;
}
.hero__scan {
  position: absolute;
  inset: 0;
  z-index: -5;
  overflow: hidden;
  pointer-events: none;
  opacity: .6;
}
.hero__scan::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -160px;
  height: 160px;
  background: linear-gradient(180deg, transparent, rgba(var(--glow-rgb), .12), transparent);
  animation: scan 9s linear infinite;
}
@keyframes scan {
  0%   { transform: translateY(0); }
  100% { transform: translateY(160vh); }
}

/* sub-pages still use a video-backed hero (unchanged) */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}
.hero__media video,
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  will-change: transform;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(6,6,7,.86) 0%, rgba(6,6,7,.32) 34%, rgba(6,6,7,.72) 72%, var(--bg) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(6,6,7,.86), transparent 62%);
}
/* index.html hero — directional scrim: heavy on the left so the copy sits on
   calm darkness, clearing to the right so the geometry reads at full presence */
.hero__scrim--thin {
  background:
    linear-gradient(90deg,
      rgba(6,6,7,.94) 0%,
      rgba(6,6,7,.88) 20%,
      rgba(6,6,7,.66) 36%,
      rgba(6,6,7,.38) 52%,
      rgba(6,6,7,.16) 68%,
      rgba(6,6,7,.05) 82%,
      transparent 92%),
    linear-gradient(180deg, rgba(6,6,7,.72) 0%, transparent 24%, transparent 60%, var(--bg) 100%);
}
/* ----------------------------------------------------------------------
   The stage — copy on the left, the object on the right.

   The two were sharing the same ground before, and a form lit this hard will
   always win that fight: its rim is the brightest thing on the page. Giving
   each a half removes the argument entirely, and the copy gets to sit on flat
   black where small type belongs.
   ---------------------------------------------------------------------- */
.hero--stage { align-items: center; padding-top: calc(var(--nav-h) + 4px); }
.hero--stage .hero__in { width: 100%; }

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
}
.stage__copy { max-width: 470px; }
.stage__copy .eyebrow { margin-bottom: 20px; }
.stage__copy .d1 {
  font-size: clamp(2.1rem, 3.9vw, 3.3rem);
  letter-spacing: -0.038em;
  line-height: 1.04;
  margin-bottom: 0;
}
.stage__copy .lede {
  margin-top: clamp(14px, 2vh, 22px);
  max-width: 40ch;
  font-size: clamp(.88rem, 1vw, 1rem);
  color: var(--ink-2);
}
.stage__copy .btn-row { margin-top: clamp(20px, 3vh, 32px); }

/* the short index, under the copy in the same column */
.stage__index {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(26px, 4vh, 44px);
  padding-top: clamp(16px, 2.2vh, 22px);
  border-top: 1px solid var(--line-soft);
}
.stage__index a { display: grid; gap: 4px; color: inherit; }
.stage__k {
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.stage__v { font-size: .82rem; color: var(--ink-2); line-height: 1.35; }
.stage__index a:hover .stage__v { color: var(--ink); }

/* the room: a low floor bloom under the object, and a bed under the copy */
.hero--stage .hero__scrim {
  background:
    radial-gradient(46% 40% at 74% 72%, rgba(255,255,255,.05), transparent 70%),
    linear-gradient(90deg, rgba(6,6,7,.72) 0%, rgba(6,6,7,.34) 34%, transparent 52%),
    linear-gradient(180deg, rgba(6,6,7,.80) 0%, rgba(6,6,7,.22) 20%, transparent 42%),
    linear-gradient(180deg, transparent 66%, rgba(6,6,7,.68) 88%, var(--bg) 100%);
}

@media (max-width: 860px) {
  /* stack: copy first, the object gets the lower half of the frame */
  .stage { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .stage__copy { max-width: none; }
  .stage__index { grid-auto-flow: row; gap: 12px; }
  .stage__index a { grid-template-columns: 4.4rem 1fr; align-items: baseline; gap: 12px; }
}

.hero__net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .5;
  pointer-events: none;
}
.hero__frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero__frame i {
  position: absolute;
  width: 22px; height: 22px;
  border-color: rgba(var(--glow-rgb), .55);
}
.hero__frame i:nth-child(1) { top: 22px; left: var(--gutter); border-top: 1.5px solid; border-left: 1.5px solid; }
.hero__frame i:nth-child(2) { top: 22px; right: var(--gutter); border-top: 1.5px solid; border-right: 1.5px solid; }
.hero__frame i:nth-child(3) { bottom: 22px; left: var(--gutter); border-bottom: 1.5px solid; border-left: 1.5px solid; }
.hero__frame i:nth-child(4) { bottom: 22px; right: var(--gutter); border-bottom: 1.5px solid; border-right: 1.5px solid; }

.hero__in { width: 100%; position: relative; z-index: 1; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
}
/* index.html hero — text confined to one narrow column so the visual
   carries most of the screen, matching the reference layouts */
.hero__grid--solo { grid-template-columns: minmax(0, 1fr); }

/* Hero type sits a step below the page's display scale on purpose. The form is
   the subject of this frame; sizing the headline to match it makes the two
   compete, and the shape stops reading as the thing you look at first. */
/* A fixed measure for the hero copy. The layout centres the copy and the form
   as a pair, and it sizes that pair from this column rather than from however
   long a given page's headline happens to run — otherwise every page resolves
   to slightly different margins.

   The reserved height does the same job vertically. The block is anchored from
   its bottom, so without it a page carrying less copy — no button row, a
   one-line headline — starts further down, and the eyebrow that opens each page
   lands on a different line every time you navigate. Reserving the tallest
   block's height puts that first mark on one line across the site. */
.hero__copy {
  max-width: 430px;
  min-height: clamp(252px, 21vw, 272px);
}
/* buttons are not prose — they size to their labels rather than to the text
   measure, so a long pair doesn't stack and push the whole block taller than
   its neighbours' */
.hero__copy .btn-row {
  width: max-content;
  max-width: min(560px, calc(100vw - 2 * var(--gutter)));
}
.hero__copy .d1 {
  font-size: clamp(1.7rem, 2.9vw, 2.5rem);
  letter-spacing: -0.034em;
  line-height: 1.05;
  margin-bottom: 15px;
}
/* single-word lead headline gets to run larger than a stacked one */
.hero__copy .d1--lead {
  font-size: clamp(2.05rem, 4.2vw, 3.55rem);
  letter-spacing: -0.039em;
}
/* acronym lockup — the name at full scale, its expansion set quietly beneath
   it, rather than run on as one line that has to break mid-phrase */
.hl-expand {
  font-size: clamp(.85rem, 1.35vw, 1.25rem);
  font-weight: 400;
  letter-spacing: -0.006em;
  color: var(--ink-2);
}
.rv-line--sub { margin-top: clamp(12px, 1.3vw, 22px); }

/* dimmed first line — the light/bold headline pairing from the references */
.hl-soft { color: var(--ink-2); font-weight: 300; opacity: .85; }
.hero__copy .lede {
  font-size: clamp(.82rem, .92vw, .9rem);
  max-width: 36ch;
  line-height: 1.64;
}
.hero .d1 { margin-bottom: 18px; }
.hero .lede { max-width: 40ch; }
.hero .eyebrow { font-size: .6rem; margin-bottom: 18px; }
.hero__side {
  padding-bottom: 8px;
  border-left: 1px solid var(--line);
  padding-left: 26px;
}
.hero__side p { font-size: .96rem; }

/* headline char/word reveal.
   The overflow box needs room below the baseline or descenders (g, y, p, j)
   get sliced off — pad the box, then pull the space back with a negative margin
   so the visual line spacing is unchanged. */
.rv-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.rv-line > span {
  display: block;
  transform: translateY(125%);
  transition: transform 1.05s var(--e-out);
}
.rv-ready .rv-line > span { transform: translateY(0); }
.rv-line:nth-child(2) > span { transition-delay: .09s; }
.rv-line:nth-child(3) > span { transition-delay: .18s; }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
[data-rv] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s var(--e-out), transform .95s var(--e-out);
  will-change: opacity, transform;
}
[data-rv].in { opacity: 1; transform: none; }
[data-rv="fade"] { transform: none; }
[data-rv="left"]  { transform: translateX(-28px); }
[data-rv="right"] { transform: translateX(28px); }
[data-rv="scale"] { transform: scale(.96); }
[data-rv="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.15s var(--e-out);
}
[data-rv="clip"].in { clip-path: inset(0 0 0 0); }

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee {
  --dur: 46s;
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line-soft);
  padding-block: 20px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.028), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: slide var(--dur) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track > div {
  display: flex;
  align-items: center;
  gap: 44px;
  padding-right: 44px;
}
.marquee span {
  font-family: var(--f-body);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.marquee i {
  font-style: normal;
  color: var(--glow);
  font-size: .6rem;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ==========================================================================
   Cards / grids
   ========================================================================== */
.grid { display: grid; gap: 1px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid--gap { gap: clamp(16px, 2vw, 26px); }

/* hairline grid: cells separated by 1px lines */
.grid--hair {
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  overflow: hidden;
}
.grid--hair > * { background: var(--bg); }

.card {
  position: relative;
  padding: clamp(24px, 2.6vw, 38px);
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
  transition: background .55s var(--e-out);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.09), transparent 62%);
  opacity: 0;
  transition: opacity .5s var(--e-out);
}
.card:hover::before { opacity: 1; }
.card__idx {
  font-family: var(--f-body);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--ink-4);
  margin-bottom: 20px;
  display: block;
}
.card h3 { margin-bottom: 12px; }
.card p { font-size: .945rem; }
/* label-only card — no body copy, taller, title sits at the bottom */
.card--label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(150px, 15vw, 200px);
}
.card--label .card__idx { margin-bottom: 0; }
.card--label h3 {
  margin-bottom: 0;
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.05;
  text-wrap: balance;
}
.card__ico {
  width: 34px; height: 34px;
  margin-bottom: 22px;
  color: var(--amber);
}

/* bordered/rounded variant */
.panel {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--glass), transparent 60%);
  padding: clamp(24px, 3vw, 42px);
}
.panel--amber {
  border-color: rgba(255,255,255,.24);
  background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.01) 55%);
}

/* ---------- Split (text + media) ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.split--top { align-items: start; }
.split--wide-l { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
.split--wide-r { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); }
.split__media {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.split__media img, .split__media video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.3s var(--e-out);
}
.split__media:hover img, .split__media:hover video { transform: scale(1.09); }
.split__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(190deg, transparent 45%, rgba(6,6,7,.55));
  pointer-events: none;
}
.media-cap {
  position: absolute;
  left: 18px; bottom: 16px;
  z-index: 2;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---------- Feature list w/ amber tick ---------- */
.ticks { list-style: none; display: grid; gap: 2px; }
.ticks li {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: .95rem;
  color: var(--ink-2);
  transition: color .4s var(--e-out), padding-left .4s var(--e-out);
}
.ticks li:hover { color: var(--ink); padding-left: 6px; }
.ticks li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--amber);
  opacity: .55;
  transition: opacity .4s, box-shadow .4s;
}
.ticks li:hover::before { opacity: 1; box-shadow: 0 0 10px var(--amber); }
.ticks--2 { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 40px; }

/* ---------- Numbered principle rows ---------- */
.rows { border-top: 1px solid var(--line-soft); }
.row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
  padding-block: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  transition: background .5s var(--e-out);
}
.row::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px; width: 0;
  background: var(--amber);
  transition: width .8s var(--e-out);
}
.row:hover::after { width: 100%; }
.row__n {
  font-family: var(--f-body);
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--ink-4);
  padding-top: 6px;
}
.row h3 { font-size: clamp(1.1rem, 1.55vw, 1.35rem); letter-spacing: -0.025em; }
.row p { font-size: .95rem; }

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}
.stats > div { background: var(--bg); padding: clamp(22px, 2.6vw, 34px); }
.stat__v {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 10px;
}
.stat__v em { font-style: normal; color: var(--glow); text-shadow: 0 0 18px rgba(var(--glow-rgb), .45); }
.stat__k {
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ==========================================================================
   System cards (H9N / H1S / H5B)
   ========================================================================== */
.sys {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  padding-block: clamp(40px, 5vw, 76px);
  border-top: 1px solid var(--line-soft);
}
.sys__code {
  font-family: var(--f-display);
  font-size: clamp(3rem, 7vw, 5.6rem);
  font-weight: 700;
  line-height: .85;
  letter-spacing: -0.05em;
  background: linear-gradient(160deg, var(--ink) 8%, var(--amber) 58%, var(--amber-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}
.sys__tag {
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sys__status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 7px 0;
  border: 0;
  border-radius: 0;
  font-family: var(--f-mono);
  font-size: .63rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sys__status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: var(--glow);
  box-shadow: 0 0 12px rgba(var(--glow-rgb), .5);
  flex: none;
}
.sys__body > p + .ticks,
.sys__body > p + h4 { margin-top: 26px; }
.sys__body h4 {
  font-family: var(--f-body);
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 8px;
}

/* ==========================================================================
   Constellations — information mapped onto a rotating 3D form.
   The <ul> is the source of truth and the no-JS / no-WebGL fallback; JS adds
   .is-3d, which lifts the items onto the shape's projected vertices.
   ========================================================================== */
.cstl {
  position: relative;
  margin-top: clamp(26px, 4vw, 48px);
}
.cstl__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- fallback: a plain, readable list --- */
.cstl__nodes { list-style: none; }
.cstl__nodes > li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cstl__node {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.cstl__node-b { font-size: .94rem; color: var(--ink-3); margin-top: 6px; }
.cstl__hint, .cstl__panel { display: none; }

/* --- 3D mode --- */
/* ----------------------------------------------------------------------
   The interactive index — callouts riding a rotating armature.

   No object in the middle: the vertices and the lines between them are the
   whole form. Anything sitting at the centre competed with the labels for the
   one part of the frame every one of them has to cross.
   ---------------------------------------------------------------------- */
.cstl.is-3d { height: clamp(430px, 62vh, 620px); }
.cstl.is-3d .cstl__nodes { position: absolute; inset: 0; margin: 0; }
.cstl.is-3d .cstl__nodes > li {
  position: absolute;
  left: 0; top: 0;
  padding: 0;
  border: 0;
  will-change: transform;
}
.cstl.is-3d .cstl__node-b { display: none; }

/* a measured callout: squared plate, precision tick on the leading edge */
.cstl.is-3d .cstl__node {
  position: relative;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-2);
  border-radius: 4px;
  background: rgba(6, 6, 7, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: color .3s var(--e-out), border-color .3s var(--e-out),
              background .3s var(--e-out), letter-spacing .3s var(--e-out);
}
/* label sits left of its vertex — move the tick to the facing edge */
.cstl.is-3d li.is-left .cstl__node {
  border-left: 1px solid var(--line);
  border-right: 3px solid var(--ink-2);
}
.cstl.is-3d .cstl__node:hover,
.cstl.is-3d .cstl__node:focus-visible,
.cstl.is-3d li.is-on .cstl__node {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
  letter-spacing: .2em;
}

.cstl.is-3d .cstl__hint {
  display: block;
  position: absolute;
  left: 0; bottom: 0;
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* --- the readout --- */
.cstl.is-3d .cstl__panel {
  display: block;
  position: absolute;
  left: 0; top: 0;
  width: min(330px, 76%);
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(6, 6, 7, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--e-out);
  z-index: 200;
}
.cstl.is-3d .cstl__panel.is-on { opacity: 1; }
.cstl__panel .k {
  display: block;
  margin-bottom: 9px;
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.cstl__panel h4 {
  font-family: var(--f-body);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.25;
  color: var(--ink);
}
.cstl__panel p {
  margin-top: 7px;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink-3);
}

@media (max-width: 700px) {
  .cstl.is-3d .cstl__node { font-size: .58rem; padding: 6px 10px; letter-spacing: .12em; }
  .cstl.is-3d .cstl__panel { width: min(290px, 84vw); padding: 15px 17px; }
}

@media (max-width: 700px) {
  .cstl.is-3d .cstl__node { font-size: .6rem; padding: 6px 11px 6px 22px; }
  .cstl.is-3d .cstl__panel { width: min(300px, 84vw); padding: 16px 18px; }
}

/* ==========================================================================
   Insights index — filter bar + entry cards
   ========================================================================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(26px, 3.2vw, 42px);
}
.filter {
  padding: 9px 17px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(10, 9, 12, .55);
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .35s var(--e-out), border-color .35s var(--e-out), background .35s var(--e-out);
}
.filter:hover { color: var(--ink); border-color: var(--glow); }
.filter.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.posts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  overflow: hidden;
}
.post {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: clamp(24px, 2.6vw, 36px);
  background: var(--bg);
  isolation: isolate;
  overflow: hidden;
  transition: background .5s var(--e-out);
}
.post::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--glow-rgb), .07), transparent 62%);
  opacity: 0;
  transition: opacity .5s var(--e-out);
}
.post:hover::before { opacity: 1; }
.post.is-hidden { display: none; }

.post__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.post__cat  { color: var(--glow); }
.post__date { color: var(--ink-4); }
.post__tag {
  margin-left: auto;
  padding: 3px 9px;
  border: 1px dashed var(--line);
  border-radius: 2px;
  color: var(--ink-4);
  font-size: .58rem;
  letter-spacing: .18em;
}
.post h3 {
  font-family: var(--f-display);
  font-size: clamp(1.12rem, 1.7vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.post p { font-size: .93rem; }
.post__more {
  margin-top: auto;
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color .35s var(--e-out);
}
.post:hover .post__more { color: var(--ink); }
.post:hover .post__more .arw { transform: translateX(4px); }
.post__more .arw { transition: transform .4s var(--e-out); }

/* unpublished template entry — visibly provisional, never mistakable for live work */
.post--draft h3, .post--draft p { color: var(--ink-3); }
.post--draft .post__more { opacity: .5; }

.post__empty {
  margin-top: 26px;
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: 3px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ==========================================================================
   Callout / quote band
   ========================================================================== */
.band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.band__bg img, .band__bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.band__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(6,6,7,.94) 8%, rgba(6,6,7,.6) 52%, rgba(6,6,7,.85)),
    linear-gradient(180deg, var(--bg), transparent 22%, transparent 78%, var(--bg));
}

.lines {
  display: grid;
  gap: 4px;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--ink-2);
  font-weight: 340;
}
.lines b { color: var(--ink); font-weight: 500; }

/* ==========================================================================
   Contact form
   ========================================================================== */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: .95rem;
  transition: border-color .35s var(--e-out), background .35s var(--e-out);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--glow);
  background: rgba(var(--glow-rgb), .06);
}
.field select { appearance: none; cursor: pointer; }
.field--sel { position: relative; }
.field--sel::after {
  content: "";
  position: absolute;
  right: 17px; bottom: 21px;
  width: 7px; height: 7px;
  border-right: 1.4px solid var(--ink-3);
  border-bottom: 1.4px solid var(--ink-3);
  transform: rotate(45deg);
  pointer-events: none;
}
.field select option { background: var(--bg-raise); color: var(--ink); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.form__note { font-size: .78rem; color: var(--ink-4); }
.form__ok {
  display: none;
  padding: 16px 18px;
  border: 1px solid rgba(var(--glow-rgb), .35);
  background: rgba(var(--glow-rgb), .08);
  border-radius: 3px;
  font-size: .9rem;
  color: var(--glow-soft);
}
.form__ok.show { display: block; }

/* contact detail list */
.deets { list-style: none; display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
.deets li { background: var(--bg); padding: 20px 0; display: grid; gap: 5px; }
.deets dt, .deets .k {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4);
}
.deets .v { font-size: .98rem; color: var(--ink); }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta {
  position: relative;
  text-align: center;
  padding-block: clamp(90px, 12vw, 180px);
  overflow: hidden;
  isolation: isolate;
}
.cta__glow {
  position: absolute;
  left: 50%; bottom: -46%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  z-index: -1;
  background: radial-gradient(circle, rgba(255,255,255,.20), rgba(255,255,255,.06) 42%, transparent 66%);
  filter: blur(14px);
  animation: breathe 9s var(--e-io) infinite;
}
@keyframes breathe {
  0%,100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50%     { transform: translateX(-50%) scale(1.08); opacity: .78; }
}
.cta__field {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 78%;
  z-index: -1;
  opacity: .5;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 100%, #000, transparent 72%);
  mask-image: radial-gradient(70% 90% at 50% 100%, #000, transparent 72%);
}
.cta .btn-row { justify-content: center; }
.cta .lede { margin-inline: auto; max-width: 60ch; }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot {
  border-top: 1px solid var(--line-soft);
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: 34px;
  position: relative;
  overflow: hidden;
}
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(44px, 5vw, 72px);
}
.foot h4 {
  font-family: var(--f-body);
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
  margin-bottom: 16px;
}
.foot ul { list-style: none; display: grid; gap: 9px; }
.foot ul a {
  font-size: .9rem;
  color: var(--ink-2);
  transition: color .3s var(--e-out);
}
.foot ul a:hover { color: var(--amber); }
.foot__tag {
  font-family: var(--f-alt);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 22px;
  color: var(--ink);
}
.foot__tag em { font-style: normal; color: var(--amber); }
.foot__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  font-size: .76rem;
  color: var(--ink-4);
}
.foot__bar a:hover { color: var(--ink-2); }

/* giant wordmark at the very bottom */
/* scales to the container width, so the whole word always fits — the old
   fixed vw sizing overflowed and .foot's overflow:hidden ate the "AI" */
.foot__word {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 40px;
  user-select: none;
}
.foot__word text {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 140px;
  fill: url(#footWordFade);
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.mt-s  { margin-top: 16px; }
.mt-m  { margin-top: 28px; }
.mt-l  { margin-top: clamp(36px, 5vw, 64px); }
.mb-l  { margin-bottom: clamp(36px, 5vw, 64px); }
.center { text-align: center; }
.hide { display: none; }
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; top: -60px; left: var(--gutter);
  z-index: 1000; padding: 10px 18px;
  background: var(--amber); color: #0A0806;
  border-radius: 0 0 4px 4px;
  transition: top .3s;
}
.skip:focus { top: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .foot__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__cta .btn { display: none; }
  .burger { display: block; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__side {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 22px;
  }
  .posts { grid-template-columns: 1fr; }
  .split, .split--wide-l, .split--wide-r { grid-template-columns: 1fr; }
  .split--rev .split__media { order: -1; }
  .g3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sys { grid-template-columns: 1fr; gap: 24px; }
  .row { grid-template-columns: 44px 1fr; }
  .row > p { grid-column: 2; }
}

@media (max-width: 900px) {
  /* copy stacks under the object on narrow screens — darken downward instead */
  .hero__scrim--thin {
    background: linear-gradient(180deg,
      rgba(6,6,7,.55) 0%, transparent 24%,
      rgba(6,6,7,.78) 58%, rgba(6,6,7,.94) 78%, var(--bg) 100%);
  }
  .hero__aura { left: 50%; top: 38%; }
}

@media (max-width: 640px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .ticks--2 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .hero { padding-top: 110px; }
  .hero__frame { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-rv] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .rv-line > span { transform: none !important; }
  .grain { animation: none; }
}