/* ============================================================
   SKYLANCE AI — regional microsite (2nd pass)
   Distinct AI-division identity: Inter Display + Azeret Mono,
   tight tracking, warm->cool SPECTRUM palette, light editorial
   base + full-dark WebGL set-pieces. No serif.
   Scoped under .ai-page; components prefixed .ai-
   ============================================================ */

.ai-page {
  /* type system — overrides skylance.css tokens for this page only */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "Azeret Mono", ui-monospace, "SFMono-Regular", monospace;

  /* gunmetal dark-blue -> gold. distinct, contrast-safe on white */
  --gun: #20304f;       /* gunmetal dark blue */
  --gun-2: #2c4068;     /* lighter gunmetal */
  --steel: #3a5187;     /* steel blue */
  --gold: #b9942e;      /* gold, deep enough for white-bg contrast */
  --gold-lt: #d8b047;   /* brighter gold (dark bands) */
  /* legacy accent slots remapped onto the new palette */
  --sp1: var(--gold); --sp2: var(--gold-lt); --sp3: var(--steel);
  --sp4: var(--gun); --sp5: var(--steel); --sp6: var(--gold);
  --ai-grad: linear-gradient(100deg, var(--gun) 0%, var(--steel) 46%, #6e5d39 72%, var(--gold) 100%);

  --ai-pad: clamp(82px, 11vw, 172px);
  --ai-inst: #eef2f8;   /* institutional off-white — cool blue-tint for dark-band sections */

  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-optical-sizing: auto; /* large headings pick up Inter's display optical size */
  letter-spacing: -0.011em;
  overflow-x: clip;
}
html:has(.ai-page) { scroll-padding-top: 86px; overflow-x: clip; }

.ai-wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- shared bits ---------- */
.ai-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
}
.ai-eyebrow--inv { color: rgba(255, 255, 255, 0.62); }
.ai-center { text-align: center; }
.ai-center.ai-eyebrow, .ai-center .ai-eyebrow { display: block; }

/* spectrum text — the signature accent (replaces home's serif-italic blue) */
.ai-grad-txt {
  background: var(--ai-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* vertical editorial section tags pinned in the left margin */
.ai-sidetag {
  position: absolute;
  left: clamp(14px, 2.2vw, 30px);
  top: clamp(64px, 8vw, 110px);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: center;
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 1180px) { .ai-sidetag { display: none; } }

.ai-sec {
  position: relative;
  padding: var(--ai-pad) 0;
  border-top: 1px solid var(--line);
}

/* tighter tracking on display headings (Inter Display feel) */
.ai-hero-h, .ai-statement, .ai-giant, .ai-std-giant, .ai-meth-h,
.ai-fp-h, .ai-band-title, .ai-prob-head h2, .ai-contact h2, .ai-ext-lines {
  letter-spacing: -0.05em;
}

/* ---------- brand lockup (distinct "Skylance AI") ---------- */
.ai-brand { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.ai-brand img { height: 30px; width: auto; display: block; }
.ai-brand-wm {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 18px; font-weight: 700; letter-spacing: -0.04em; color: var(--ink);
}
.ai-brand-ai {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  padding: 2px 5px 1px; border-radius: 3px;
  position: relative; top: -1px;
}

/* ---------- buttons ---------- */
.ai-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans);
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
  color: #fff; background: var(--ink);
  padding: 13px 24px; border-radius: 5px; border: 1px solid var(--ink);
  position: relative; overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), color 0.35s var(--ease);
}
.ai-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ai-grad);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.ai-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(10, 12, 22, 0.22); border-color: transparent; }
.ai-btn:hover::before { opacity: 1; }
.ai-btn--ghost { color: var(--ink); background: transparent; border-color: var(--line-strong); }
.ai-btn--ghost::before { opacity: 0; }
.ai-btn--ghost:hover { color: #fff; border-color: transparent; }
.ai-btn--ghost:hover::before { opacity: 1; }
.ai-btn--sm { padding: 9px 16px; font-size: 13px; border-radius: 4px; }
.ai-btn--lg { padding: 16px 32px; font-size: 16px; }

/* ---------- header ---------- */
.ai-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.ai-head-inner {
  position: relative;
  max-width: var(--max); margin: 0 auto;
  padding: 13px var(--gutter);
  display: flex; align-items: center; gap: clamp(18px, 3vw, 40px);
}
/* Austin / Bangkok live clocks — centered in the bar like the homepage nav */
.ai-nav-clock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ai-nav { display: flex; gap: clamp(16px, 2.2vw, 30px); margin-right: auto; margin-left: clamp(18px, 3vw, 40px); }
.ai-nav a {
  font-family: var(--mono);
  font-size: 12.5px; letter-spacing: -0.01em; color: var(--dim);
  transition: color 0.25s var(--ease);
}
.ai-nav a:hover { color: var(--ink); }
.ai-head-right { display: flex; align-items: center; gap: 14px; }
.ai-locale {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--faint);
}
.ai-locale i { color: var(--ghost); font-style: normal; }
.ai-locale b { color: var(--dim); font-weight: 600; }

.ai-menu-btn { display: none; width: 34px; height: 34px; position: relative; }
.ai-menu-btn span { position: absolute; left: 7px; right: 7px; height: 1.6px; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.ai-menu-btn span:nth-child(1) { top: 13px; }
.ai-menu-btn span:nth-child(2) { bottom: 13px; }
.ai-page.is-menu .ai-menu-btn span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.ai-page.is-menu .ai-menu-btn span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- mobile overlay menu ---------- */
.ai-menu {
  position: fixed; inset: 0; z-index: 45; background: #fff;
  padding: clamp(96px, 16vw, 140px) var(--gutter) 48px;
  display: flex; flex-direction: column; gap: 26px;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
}
.ai-page.is-menu .ai-menu { opacity: 1; visibility: visible; transform: none; }
.ai-menu nav { display: flex; flex-direction: column; gap: 2px; }
.ai-menu nav a {
  font-size: clamp(28px, 8vw, 40px); font-weight: 650; letter-spacing: -0.04em;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.ai-menu .ai-btn { align-self: flex-start; margin-top: 8px; }

/* ============================================================
   01 · HERO
   ============================================================ */
.ai-hero {
  position: relative; overflow: hidden;
  padding: clamp(72px, 12vw, 156px) 0 clamp(48px, 7vw, 96px);
  background:
    radial-gradient(120% 80% at 80% 4%, rgba(39, 69, 255, 0.05), transparent 58%),
    radial-gradient(90% 70% at 6% 102%, rgba(255, 122, 60, 0.05), transparent 60%);
}
.ai-stream, .ai-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.ai-hero-grid { position: relative; z-index: 1; text-align: center; }
.ai-hero-kicker {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim); margin-bottom: clamp(24px, 4vw, 48px);
}
.ai-hero-kicker span { color: var(--ghost); margin: 0 8px; }
.ai-hero-h {
  font-size: clamp(34px, 6.7vw, 102px); font-weight: 400; line-height: 0.9; letter-spacing: -0.048em;
  margin: 0 auto; max-width: none;
}
.ai-hw { display: inline-block; will-change: filter, opacity; }
@media (min-width: 880px) { .ai-hero-h { white-space: nowrap; } }
.ai-hero-sec {
  font-size: clamp(25px, 4.6vw, 66px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.04;
  margin: clamp(8px, 1.3vw, 16px) auto clamp(34px, 5vw, 62px); max-width: 18ch;
}
.ai-hero-copy { max-width: 600px; margin: 0 auto; }
.ai-hero-lead { font-size: clamp(19px, 1.9vw, 25px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.26; margin-bottom: 16px; }
.ai-hero-sub { font-family: var(--mono); font-size: clamp(13px, 1.05vw, 15px); line-height: 1.62; color: var(--dim); margin: 0 auto 28px; max-width: 60ch; }
.ai-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ============================================================
   DARK set-piece base (full-bleed dark bands w/ WebGL)
   ============================================================ */
.ai-dark { position: relative; background: var(--ai-inst); color: var(--ink); overflow: hidden; }
.ai-dark .ai-eyebrow { color: var(--dim); }

/* ============================================================
   02 · SURFACES (dark, WebGL agent-mesh backdrop)
   ============================================================ */
.ai-surfaces { padding: clamp(78px, 10vw, 150px) 0; }
.ai-surf-stage { position: relative; z-index: 1; }
.ai-band-head { max-width: 920px; margin-bottom: clamp(30px, 4vw, 56px); }
.ai-band-title { color: var(--ink); font-weight: 600; font-size: clamp(34px, 6.4vw, 96px); line-height: 0.98; letter-spacing: -0.05em; }
.ai-band-sub { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: clamp(15px, 1.5vw, 21px); font-weight: 500; letter-spacing: -0.02em; color: var(--dim); }
.ai-band-bul { width: 13px; height: 13px; flex: none; background: linear-gradient(135deg, var(--gold-lt), var(--gold)); }

/* sui "innovation engineered" timeline: long-form parallax, dotted rail, expanding boxes */
.ai-surf-rail { position: relative; }
.ai-surf-line { position: absolute; left: 50%; top: clamp(40px, 6vw, 80px); bottom: clamp(40px, 6vw, 80px); width: 0; border-left: 2px dotted rgba(32, 48, 79, 0.3); pointer-events: none; }
.ai-surf-mark { position: absolute; left: -6px; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(185, 148, 46, 0.16), 0 0 14px rgba(185, 148, 46, 0.4); transform: translateY(-50%); }
.ai-surf-steps { position: relative; margin: 0; padding: clamp(48px, 7vw, 96px) 0; list-style: none; display: flex; flex-direction: column; gap: clamp(52px, 8vw, 108px); }
.ai-surf-step {
  display: grid; grid-template-columns: 1fr clamp(72px, 9vw, 120px) 1fr; align-items: start;
  opacity: 0; transform: translateY(28px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.ai-surf-step.is-active { opacity: 1; transform: none; }
/* odd steps: box on the right third */
.ai-surf-step:nth-child(odd) .ai-surf-box { grid-column: 3; }
/* even steps: box on the left third */
.ai-surf-step:nth-child(even) .ai-surf-box { grid-column: 1; }

.ai-surf-box {
  width: 100%; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 28, 52, 0.05), 0 26px 50px -34px rgba(16, 28, 52, 0.28);
}
.ai-surf-box-head { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.ai-surf-num {
  display: grid; place-items: center; flex: none; width: clamp(46px, 4vw, 60px);
  border-right: 1px solid var(--line); background: var(--ai-inst);
  font-family: var(--mono); font-size: clamp(15px, 1.4vw, 19px); font-weight: 600; color: var(--gold);
}
.ai-surf-name {
  display: flex; align-items: center; padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.6vw, 24px);
  font-family: var(--mono); font-size: clamp(12px, 1.2vw, 16px); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.ai-surf-box-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease); }
.ai-surf-step.is-active .ai-surf-box-body { grid-template-rows: 1fr; }
.ai-surf-box-inner { overflow: hidden; min-height: 0; padding: 0 clamp(16px, 1.6vw, 24px); }
.ai-surf-step.is-active .ai-surf-box-inner { padding: clamp(18px, 2vw, 26px) clamp(16px, 1.6vw, 24px); }
.ai-surf-copy { font-family: var(--mono); font-size: clamp(12.5px, 1.05vw, 14.5px); line-height: 1.6; color: var(--dim); margin: clamp(16px, 1.8vw, 22px) 0 0; max-width: 46ch; }
.ai-surf-chip {
  display: inline-flex; align-items: center; gap: 9px; margin-top: clamp(16px, 1.8vw, 22px);
  padding: 7px 12px 7px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--ai-inst);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--dim);
}
.ai-surf-chip-ic {
  display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold));
}
.ai-surf-chip-ic::before {
  content: ""; width: 13px; height: 13px;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
  background: #0a0c16;
}

.ai-surf-art {
  position: relative; height: clamp(150px, 20vh, 210px); border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, rgba(58, 81, 135, 0.32), transparent 70%), var(--dark);
  border: 1px solid rgba(10, 12, 22, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: grid; place-items: center;
}
.ai-surf-art--apps span { position: absolute; left: 18%; right: 18%; height: 15px; border-radius: 4px; background: linear-gradient(90deg, var(--sp5), var(--sp4)); box-shadow: 0 0 18px rgba(39, 69, 255, 0.45); }
.ai-surf-art--apps span:nth-child(1) { top: 30%; opacity: 0.5; }
.ai-surf-art--apps span:nth-child(2) { top: 44%; opacity: 0.7; }
.ai-surf-art--apps span:nth-child(3) { top: 58%; opacity: 0.88; }
.ai-surf-art--apps span:nth-child(4) { top: 72%; opacity: 1; background: linear-gradient(90deg, var(--sp2), var(--sp1)); }
.ai-surf-art--agents i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--sp5); box-shadow: 0 0 14px rgba(10, 203, 255, 0.8); }
.ai-surf-art--agents i:nth-child(1) { left: 50%; top: 24%; transform: translateX(-50%); width: 16px; height: 16px; background: #fff; }
.ai-surf-art--agents i:nth-child(2) { left: 26%; top: 44%; }
.ai-surf-art--agents i:nth-child(3) { left: 74%; top: 44%; background: var(--sp2); }
.ai-surf-art--agents i:nth-child(4) { left: 32%; top: 72%; }
.ai-surf-art--agents i:nth-child(5) { left: 68%; top: 72%; background: var(--sp1); }
.ai-surf-art--agents i:nth-child(6) { left: 50%; top: 60%; transform: translateX(-50%); background: var(--sp4); }
.ai-surf-art--agents i:nth-child(7) { left: 50%; top: 88%; transform: translateX(-50%); opacity: 0.6; }
.ai-surf-art--agents::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom right, transparent 49.6%, rgba(122, 140, 255, 0.3) 49.8%, transparent 50%), linear-gradient(to bottom left, transparent 49.6%, rgba(122, 140, 255, 0.3) 49.8%, transparent 50%);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 60%, transparent 75%);
  mask: radial-gradient(circle at 50% 50%, #000 60%, transparent 75%);
  opacity: 0.5;
}
.ai-surf-art--secure span {
  width: 84px; height: 84px; border-radius: 16px;
  border: 2px solid rgba(122, 140, 255, 0.9);
  box-shadow: 0 0 22px rgba(39, 69, 255, 0.4), inset 0 0 18px rgba(39, 69, 255, 0.25); position: relative;
}
.ai-surf-art--secure span::before { content: ""; position: absolute; inset: 25px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 0 12px rgba(255, 255, 255, 0.4); }
.ai-surf-art--secure span::after { content: ""; position: absolute; inset: 0; border-radius: 16px; box-shadow: 0 0 0 9px rgba(122, 140, 255, 0.09); }

/* ============================================================
   03 · WHAT WE DO
   ============================================================ */
.ai-split { display: grid; grid-template-columns: 0.42fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: start; margin-bottom: clamp(48px, 6vw, 90px); }
.ai-statement { font-size: clamp(24px, 3.3vw, 48px); font-weight: 640; line-height: 1.18; max-width: 22ch; }
/* custom-span highlight geometry is defined once, authoritatively, in PASS 16
   (search "PASS 16"). Earlier conflicting blocks were removed 2026-06 to kill
   cascade ambiguity; only shimmer/animation rules for .ai-cspan-ic live elsewhere. */
.ai-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 52px); border-top: 1px solid var(--line); padding-top: clamp(26px, 3vw, 40px); }
.ai-pillar-k { display: block; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.ai-pillar-k::before { content: ""; display: inline-block; width: 18px; height: 2px; background: var(--ai-grad); margin-right: 9px; vertical-align: middle; }
.ai-pillars p { font-family: var(--mono); font-size: clamp(13px, 1vw, 14.5px); line-height: 1.6; color: var(--dim); margin: 0; }

/* ============================================================
   04 · BIG QUOTE
   ============================================================ */
.ai-quote { background: var(--bg-2); }
.ai-bigquote {
  margin: clamp(30px, 4vw, 56px) auto 0; max-width: 100%; text-align: left;
  font-family: var(--mono); font-weight: 500; text-transform: uppercase;
  font-size: clamp(15px, 2.35vw, 33px); line-height: 1.46; letter-spacing: -0.005em;
  color: var(--ink); min-height: 1.46em;
}
.ai-bq-caret {
  display: inline-block; width: 0.46em; height: 1.05em; margin-left: 0.04em;
  background: var(--gold); vertical-align: -0.17em;
  animation: ai-bq-blink 1.05s steps(1, end) infinite;
}
.ai-bigquote.is-done .ai-bq-caret { animation-duration: 1.4s; opacity: 0.55; }
@keyframes ai-bq-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ============================================================
   05 · PROBLEM
   ============================================================ */
.ai-prob-head { max-width: 760px; margin: 0 auto clamp(48px, 6vw, 84px); }
.ai-prob-head h2 { font-weight: 700; }
.ai-prob-sub { font-family: var(--mono); font-size: clamp(13px, 1.05vw, 15px); letter-spacing: 0; line-height: 1.6; color: var(--dim); text-transform: uppercase; margin-top: 22px; }
.ai-prob-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 48px); }
.ai-prob-steps li { border-top: 2px solid var(--ink); padding-top: 20px; }
.ai-prob-n { display: block; font-family: var(--mono); font-size: 12px; color: var(--faint); margin-bottom: 14px; }
.ai-prob-steps p { font-size: clamp(16px, 1.5vw, 22px); font-weight: 560; line-height: 1.28; letter-spacing: -0.025em; margin: 0; }
.ai-prob-steps li:last-child { border-top-color: var(--sp1); }
.ai-prob-steps li:last-child p { color: var(--sp1); }

/* ============================================================
   06 · GO / NO-GO
   ============================================================ */
.ai-compare { overflow: hidden; }
.ai-giant { font-size: min(20vw, 300px); text-align: center; margin: clamp(14px, 2vw, 30px) 0 clamp(44px, 5vw, 80px); line-height: 0.9; font-weight: 800; }
.ai-cmp-grid { display: grid; grid-template-columns: 1fr 1fr; max-width: 1000px; margin: 0 auto; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ai-cmp-col { padding: clamp(26px, 3vw, 44px); }
.ai-cmp-col--go { background: #fff; border-right: 1px solid var(--line); }
.ai-cmp-col--no { background: var(--bg-2); }
.ai-cmp-k { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 24px; }
.ai-cmp-col--go .ai-cmp-k { color: var(--ink); }
.ai-cmp-col--no .ai-cmp-k { color: var(--faint); }
.ai-cmp-col ul { display: grid; gap: 14px; }
.ai-cmp-col li { position: relative; padding-left: 28px; font-size: clamp(14.5px, 1.15vw, 17px); line-height: 1.45; letter-spacing: -0.01em; }
.ai-cmp-col--go li { color: var(--ink); font-weight: 500; }
.ai-cmp-col--no li { color: var(--faint); }
.ai-cmp-col li::before { position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 14px; }
.ai-cmp-col--go li::before { content: "✓"; color: var(--sp6); }
.ai-cmp-col--no li::before { content: "✕"; color: var(--ghost); }

/* ============================================================
   07 · COMPLIANCE flash-sequence (pinned terminal review)
   ============================================================ */
.ai-comp { position: relative; min-height: 100vh; background: var(--bg-2); overflow: hidden; display: flex; flex-direction: column; }
.ai-comp-hud { position: absolute; top: clamp(74px, 10vh, 96px); left: var(--gutter); z-index: 4; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.ai-comp-spin { color: var(--gold); font-size: 15px; line-height: 1; width: 1em; text-align: center; }
.ai-comp-count { color: var(--faint); letter-spacing: 0.08em; }
.ai-comp-count b { color: var(--ink); font-weight: 600; }
.ai-comp-foot { position: absolute; bottom: clamp(20px, 4vh, 40px); left: var(--gutter); right: var(--gutter); z-index: 4; font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; color: var(--faint); }

.ai-comp-stage { position: relative; flex: 1; width: 100%; max-width: var(--max); margin: 0 auto; }
.ai-comp-beat { position: absolute; inset: 0; padding: 0 var(--gutter); display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease); }
.ai-comp-beat.is-active { opacity: 1; visibility: visible; }
.ai-comp-eyebrow { color: var(--dim); margin-bottom: clamp(16px, 3vw, 32px); }
.ai-comp-name { font-size: clamp(58px, 15vw, 232px); font-weight: 760; letter-spacing: -0.05em; line-height: 0.86; color: var(--ink); margin: 0; min-height: 0.86em; }
.ai-comp-name--wide { font-size: clamp(38px, 8.4vw, 130px); letter-spacing: -0.045em; }
.ai-comp-cur::after { content: "\258C"; color: var(--gold); margin-left: 0.04em; animation: aiCaret 1.05s steps(1, end) infinite; }
@keyframes aiCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.ai-comp-desc { font-size: clamp(18px, 2vw, 30px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin: clamp(20px, 2.4vw, 34px) 0 0; max-width: 30ch; }
.ai-comp-desc b { font-weight: 700; }
.ai-comp-q { font-family: var(--mono); font-size: clamp(13px, 1.15vw, 16px); text-transform: uppercase; letter-spacing: 0; line-height: 1.5; color: var(--faint); margin-top: clamp(22px, 3vw, 40px); max-width: 58ch; }

/* grid beats (centred name, six cells) */
.ai-comp-beat--grid { display: grid; grid-template-rows: auto 1fr auto; gap: clamp(18px, 4vh, 44px); padding-top: clamp(78px, 13vh, 140px); padding-bottom: clamp(78px, 13vh, 140px); justify-content: stretch; }
.ai-comp-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 56px); align-content: start; }
.ai-comp-cells--bot { align-items: end; }
.ai-comp-cells li { font-size: clamp(14px, 1.4vw, 21px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.24; color: var(--ink); max-width: 24ch; }
.ai-comp-gridmid { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ai-comp-gridmid .ai-comp-name { line-height: 0.92; }
.ai-comp-sub { font-family: var(--mono); font-size: clamp(13px, 1.2vw, 16px); text-transform: uppercase; letter-spacing: 0; color: var(--dim); margin-top: clamp(14px, 1.8vw, 22px); max-width: 60ch; }

/* trade-secrets HUD wireframe */
.ai-comp-wire { position: absolute; inset: clamp(16px, 3vh, 32px); z-index: 2; opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; }
.ai-comp.is-wire .ai-comp-wire { opacity: 1; }
.ai-comp-wire i { position: absolute; width: 32px; height: 32px; border: 2px solid var(--gun); }
.ai-comp-wire i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.ai-comp-wire i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.ai-comp-wire i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.ai-comp-wire i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.ai-comp-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.ai-comp.is-wire .ai-comp-scan { animation: aiScan 2.6s linear infinite; }
@keyframes aiScan { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* static fallback (reduced motion / mobile): vertical list, no pin/typing */
.ai-comp--static { min-height: 0; display: block; padding: var(--ai-pad) 0; }
.ai-comp--static .ai-comp-hud, .ai-comp--static .ai-comp-foot, .ai-comp--static .ai-comp-wire { position: static; }
.ai-comp--static .ai-comp-hud { padding: 0 var(--gutter); margin-bottom: 18px; }
.ai-comp--static .ai-comp-foot { padding: 28px var(--gutter) 0; }
.ai-comp--static .ai-comp-wire { display: none; }
.ai-comp--static .ai-comp-stage { min-height: 0; }
.ai-comp--static .ai-comp-beat { position: static; opacity: 1; visibility: visible; justify-content: flex-start; padding: clamp(40px, 8vw, 80px) var(--gutter); border-top: 1px solid var(--line); }
.ai-comp--static .ai-comp-name { font-size: clamp(48px, 17vw, 104px); }
.ai-comp--static .ai-comp-beat--grid { display: block; }
.ai-comp--static .ai-comp-cells { grid-template-columns: 1fr 1fr; margin: 16px 0; }
.ai-comp--static .ai-comp-gridmid { align-items: flex-start; text-align: left; margin: 16px 0; }
.ai-comp--static .ai-comp-cur::after { content: ""; }

/* ============================================================
   08 · METHOD
   ============================================================ */
.ai-meth-h { font-weight: 720; max-width: 16ch; margin: 18px 0 clamp(44px, 5vw, 76px); }
.ai-meth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 56px); }
.ai-meth-col { border-top: 2px solid var(--ink); padding-top: 22px; }
.ai-meth-k { display: block; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin-bottom: 26px; }
.ai-meth-col ul { display: grid; gap: 22px; }
.ai-meth-col li { font-size: clamp(14.5px, 1.15vw, 17px); line-height: 1.48; letter-spacing: -0.01em; color: var(--dim); padding-left: 18px; position: relative; }
.ai-meth-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; background: var(--ai-grad); border-radius: 1px; }

/* ============================================================
   08b · DEPLOYMENT / DATA CUSTODY (dark, WebGL secure boundary)
   ============================================================ */
.ai-deploy { padding: clamp(84px, 11vw, 168px) 0; }
.ai-deploy-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(36px, 5vw, 84px); align-items: center; }
.ai-deploy-h { font-size: clamp(30px, 4.4vw, 64px); font-weight: 720; letter-spacing: -0.05em; line-height: 1.02; color: var(--ink); margin: 16px 0 24px; }
.ai-deploy-lead { font-family: var(--mono); font-size: clamp(13px, 1.1vw, 15.5px); line-height: 1.62; color: var(--dim); max-width: 44ch; margin-bottom: 30px; }
.ai-deploy-modes { display: grid; gap: 14px; }
.ai-deploy-modes li { display: flex; align-items: baseline; gap: 14px; font-size: clamp(15px, 1.3vw, 18px); font-weight: 560; letter-spacing: -0.02em; color: var(--ink); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ai-deploy-modes b { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--sp3); flex: none; width: 26px; }
.ai-deploy-modes i { font-style: normal; font-family: var(--mono); font-weight: 400; font-size: 12.5px; color: var(--faint); margin-left: auto; text-align: right; }
.ai-deploy-art { position: relative; align-self: stretch; min-height: 380px; }
.ai-deploy-art .ai-gl { position: absolute; }

/* ============================================================
   09 · EXTENDED (global / local)
   ============================================================ */
.ai-extended { background: var(--bg-2); }
.ai-ext-lines { display: block; max-width: 30ch; margin: 0 auto; font-family: var(--mono); text-transform: uppercase; font-weight: 400; letter-spacing: -0.01em; }
.ai-ext-lines > span { display: block; }
.ai-ext-lines > span:first-child { font-size: clamp(20px, 2.6vw, 34px); line-height: 1.3; color: var(--ink); margin-bottom: 36px; }
.ai-ext-body { font-size: clamp(13.5px, 1.15vw, 16px); line-height: 1.6; color: var(--dim); margin: 0 auto 20px; max-width: 56ch; text-transform: none; }
.ai-ext-punch { font-size: clamp(15px, 1.4vw, 19px); color: var(--ink); margin-top: 12px; }
.ai-access { margin-top: clamp(56px, 7vw, 96px); }
.ai-access-lead { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 26px; }
.ai-access ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 36px); }
.ai-access li { text-align: center; }
.ai-access b { display: block; font-family: var(--mono); font-size: clamp(16px, 1.6vw, 22px); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.ai-access i { font-style: normal; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--dim); }

/* ============================================================
   10 · FIRST PRINCIPLES / DX AUDIT
   ============================================================ */
.ai-fp-grid { display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.ai-fp-h { font-weight: 740; margin: 18px 0 0; }
.ai-fp-cols { display: flex; gap: clamp(18px, 3vw, 44px); margin: 22px 0 clamp(28px, 3vw, 40px); padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.ai-fp-cols span { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.ai-fp-cols span::before { content: "/ "; color: var(--sp4); }
.ai-fp-body { display: grid; gap: 18px; }
.ai-fp-body p { font-family: var(--mono); font-size: clamp(13px, 1.05vw, 15px); line-height: 1.62; color: var(--dim); margin: 0; }
.ai-fp-body p:first-child { color: var(--ink); }
.ai-fp-art { position: relative; align-self: stretch; min-height: 320px; display: grid; place-items: center; }
.ai-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr; gap: 3px; width: 100%; aspect-ratio: 1 / 1; max-width: 460px; }
.ai-mosaic span { border-radius: 2px; aspect-ratio: 1 / 1; }

/* ============================================================
   11 · CONTACT
   ============================================================ */
.ai-contact { text-align: center; }
.ai-contact h2 { font-weight: 720; }
.ai-contact-stmt { font-family: var(--mono); text-transform: uppercase; font-size: clamp(14px, 1.5vw, 19px); line-height: 1.5; letter-spacing: 0; color: var(--dim); max-width: 40ch; margin: clamp(24px, 3vw, 40px) auto clamp(36px, 4vw, 56px); text-wrap: balance; }
.ai-contact-ctas { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ai-contact-mail { font-family: var(--mono); font-size: 14px; color: var(--dim); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: color 0.25s var(--ease); }
.ai-contact-mail:hover { color: var(--sp4); }
.ai-contact-thai { margin-top: clamp(40px, 5vw, 64px); font-family: var(--mono); font-size: 12.5px; color: var(--faint); max-width: 54ch; margin-left: auto; margin-right: auto; }

/* ============================================================
   FOOTER
   ============================================================ */
.ai-foot { background: var(--dark); color: #fff; padding: clamp(56px, 7vw, 96px) 0 36px; }
.ai-foot-grid { display: grid; grid-template-columns: 1.5fr 0.8fr 0.8fr 1.2fr; gap: clamp(28px, 3vw, 56px); padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--wline); }
.ai-brand--foot { margin-bottom: 22px; }
.ai-brand--foot img { filter: brightness(0) invert(1); opacity: 0.95; }
.ai-brand--foot .ai-brand-wm { color: #fff; }
.ai-brand--foot .ai-brand-ai { background: #fff; color: var(--dark); }
.ai-foot-brand p { font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: var(--wdim); max-width: 42ch; }
.ai-foot-h { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wfaint); margin-bottom: 18px; }
.ai-foot-nav { display: flex; flex-direction: column; gap: 12px; }
.ai-foot-nav a { font-size: 14.5px; color: var(--wdim); transition: color 0.25s var(--ease); }
.ai-foot-nav a:hover { color: #fff; }
.ai-foot-form { display: flex; align-items: center; border: 1px solid var(--wline-strong); border-radius: 8px; overflow: hidden; margin-bottom: 18px; }
.ai-foot-form input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 13px 16px; font: inherit; font-family: var(--mono); font-size: 13px; color: #fff; }
.ai-foot-form input::placeholder { color: var(--wfaint); }
.ai-foot-form input:focus { outline: none; }
.ai-foot-form button { padding: 0 18px; align-self: stretch; color: #fff; font-size: 18px; transition: background 0.25s var(--ease); }
.ai-foot-form button:hover { background: rgba(255, 255, 255, 0.08); }
.ai-foot-top { font-family: var(--mono); font-size: 12.5px; color: var(--wdim); }
.ai-foot-top:hover { color: #fff; }
.ai-foot-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 28px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: var(--wfaint); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* surfaces collapses to single-col stack on small screens */
@media (max-width: 900px) {
  .ai-surf-line { display: none; }
  .ai-surf-steps { gap: 22px; }
  .ai-surf-step { grid-template-columns: 1fr; opacity: 1; transform: none; }
  .ai-surf-step:nth-child(odd) .ai-surf-box,
  .ai-surf-step:nth-child(even) .ai-surf-box { grid-column: 1; }
  .ai-surf-box-body { grid-template-rows: 1fr; }
  .ai-surf-box-inner { padding: clamp(18px, 2vw, 26px) clamp(16px, 1.6vw, 24px); }
}
@media (max-width: 1000px) {
  .ai-pillars, .ai-prob-steps, .ai-meth-grid, .ai-std-grid, .ai-access ul { grid-template-columns: 1fr 1fr; }
  .ai-split { grid-template-columns: 1fr; gap: 18px; }
  .ai-fp-grid, .ai-deploy-grid { grid-template-columns: 1fr; }
  .ai-fp-art { min-height: 0; order: -1; }
  .ai-deploy-art { min-height: 320px; order: -1; }
  .ai-mosaic { max-width: 320px; }
  .ai-foot-grid { grid-template-columns: 1fr 1fr; }
  .ai-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .ai-nav { display: none; }
  .ai-head-right .ai-btn--sm, .ai-head-right .ai-locale { display: none; }
  .ai-menu-btn { display: block; }
  .ai-hero-foot { justify-content: flex-start; }
  .ai-hero-h { max-width: none; }
  .ai-pillars, .ai-prob-steps, .ai-meth-grid, .ai-std-grid, .ai-cmp-grid, .ai-access ul { grid-template-columns: 1fr; }
  .ai-cmp-grid { max-width: 480px; }
  .ai-cmp-col--go { border-right: 0; border-bottom: 1px solid var(--line); }
  .ai-giant { font-size: 25vw; }
  .ai-foot-grid { grid-template-columns: 1fr; }
  .ai-foot-base { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .ai-head { backdrop-filter: none; } }

/* ============================================================
   STITCH-BLUEPRINT ADAPTATION (2026-06 restructure)
   Hero augmentation · Standards Matrix · Technical Layers · Strategic Infra
   ============================================================ */

/* ---------- eyebrow with leading square dot ---------- */
.ai-eyebrow--dot { display: inline-flex; align-items: center; gap: 10px; }
.ai-eyebrow--dot::before { content: ""; width: 6px; height: 6px; flex: none; background: #6e5d39; }

/* ---------- HERO (Stitch institutional layout) ---------- */
.ai-hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(96px, 13vh, 156px) 0 clamp(70px, 10vh, 116px); }
.ai-hero-rules { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ai-hero-rules span { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(10, 12, 22, 0.05); }
.ai-hero-rules span:nth-child(1) { left: var(--gutter); }
.ai-hero-rules span:nth-child(2) { left: 50%; }
.ai-hero-rules span:nth-child(3) { right: var(--gutter); }
.ai-hero-inner { position: relative; z-index: 1; width: 100%; text-align: left; }

.ai-hero-meta { display: flex; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: clamp(40px, 6vw, 78px); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.ai-hero-meta-loc { display: flex; gap: 18px; flex-wrap: wrap; color: #6e5d39; }
.ai-hero-meta-loc i { color: var(--faint); font-style: normal; }
.ai-hero-meta-ver { color: var(--faint); }

.ai-hero-kicker { display: flex; align-items: center; gap: 16px; justify-content: flex-start;
  margin: 0 0 clamp(20px, 3vw, 38px); color: var(--gun); letter-spacing: 0.22em; }
.ai-kicker-rule { width: 48px; height: 1px; background: var(--gun); flex: none; }

.ai-hero-h { font-size: clamp(44px, 9.2vw, 132px); font-weight: 600; line-height: 0.86;
  letter-spacing: -0.05em; text-align: left; margin: 0; max-width: none; white-space: normal; }

.ai-hero-sec-row { display: flex; align-items: flex-end; gap: 24px; margin: clamp(10px, 1.5vw, 20px) 0 0; }
.ai-hero-sec { font-size: clamp(22px, 4.6vw, 62px); font-weight: 500; letter-spacing: -0.03em;
  line-height: 1; margin: 0; max-width: none; }
.ai-hero-sec-rule { flex: 1; height: 1px; background: var(--line); margin-bottom: 0.55em; }

.ai-hero-copy { max-width: 560px; margin: clamp(44px, 6vw, 84px) 0 0 auto; width: 100%;
  border-left: 3px solid var(--gun); padding-left: clamp(22px, 2.4vw, 40px); }
.ai-hero-lead { font-size: clamp(19px, 1.9vw, 25px); font-weight: 600; letter-spacing: -0.025em;
  line-height: 1.26; margin: 0 0 16px; }
.ai-hero-sub { font-family: var(--mono); font-size: clamp(13px, 1.05vw, 15px); line-height: 1.62;
  color: var(--dim); margin: 0 0 28px; max-width: 52ch; }
.ai-hero-ctas { display: flex; flex-wrap: wrap; gap: 0; justify-content: flex-start;
  border: 1px solid var(--ink); width: fit-content; max-width: 100%; }
.ai-hero-ctas .ai-btn { border-radius: 0; border: 0; }
.ai-hero-ctas .ai-btn--ghost { border-left: 1px solid var(--ink); }

.ai-hero-cue { position: absolute; left: 50%; bottom: clamp(18px, 3vh, 32px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0.4;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; }
.ai-hero-cue i { width: 1px; height: 46px; background: linear-gradient(to bottom, var(--ink), transparent); }

/* ---------- What-we-do: gold icon square + pillar icons ---------- */
.ai-cspan-box { display: block; width: 56px; height: 56px; margin-top: 22px; border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold)); }
.ai-cspan-box::before { content: ""; display: block; width: 100%; height: 100%;
  -webkit-mask: var(--ic) center / 26px no-repeat; mask: var(--ic) center / 26px no-repeat; background: #fff; }
.ai-pillar-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 7px;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold)); margin-bottom: 16px; }
.ai-pillar-ic::before { content: ""; width: 16px; height: 16px;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; background: #fff; }
.ai-pillar-k::before { display: none; }

/* ---------- 05 · STANDARDS MATRIX (alignment language) ---------- */
.ai-standards { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(28px, 4vw, 46px) 0; }
.ai-std-row { display: flex; align-items: center; justify-content: space-between; gap: clamp(22px, 4vw, 56px); flex-wrap: wrap; }
.ai-std-tag { flex: none; border: 1px solid var(--line); padding: 8px 14px; color: var(--faint); letter-spacing: 0.2em; }
.ai-std-list { display: flex; align-items: center; gap: clamp(26px, 4vw, 64px); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.ai-std-list li { display: flex; flex-direction: column; gap: 5px; }
.ai-std-name { font-family: var(--sans); font-size: clamp(16px, 1.5vw, 21px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.ai-std-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.ai-std-note { flex: none; max-width: 20ch; text-align: right; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.5; color: #6e5d39; }

/* ---------- 06 · TECHNICAL LAYERS (split panel + WebGL viewport) ---------- */
.ai-layers { background: var(--bg-2); }
.ai-lay-head { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px); }
.ai-lay-h { font-family: var(--sans); font-size: clamp(34px, 5.2vw, 80px); font-weight: 600; line-height: 0.92;
  letter-spacing: -0.05em; color: var(--ink); margin: 18px 0 0; }
.ai-dim2 { color: var(--faint); }
.ai-lay-head-r { font-family: var(--mono); font-size: clamp(12px, 1vw, 14px); line-height: 1.6; color: var(--dim);
  border-left: 1px solid var(--line); padding-left: 24px; }

.ai-lay-panel { display: grid; grid-template-columns: 1.7fr 1fr; border: 1px solid var(--line); background: #fff; }
.ai-lay-view { position: relative; min-height: clamp(360px, 46vw, 600px); background: var(--dark);
  border-right: 1px solid var(--line); overflow: hidden; }
.ai-lay-view::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(7, 8, 12, 0.92), rgba(7, 8, 12, 0.12) 56%, transparent); }
.ai-lay-badge { position: absolute; top: 24px; left: 24px; z-index: 2; display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(6px);
  color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; padding: 8px 12px; }
.ai-lay-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-lt); box-shadow: 0 0 8px var(--gold-lt); }
.ai-lay-cap { position: absolute; left: clamp(24px, 3vw, 48px); right: clamp(24px, 3vw, 48px); bottom: clamp(24px, 3vw, 48px); z-index: 2; }
.ai-lay-cap-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-lt); }
.ai-lay-cap-h { font-family: var(--sans); font-size: clamp(24px, 2.6vw, 38px); font-weight: 600; letter-spacing: -0.03em; color: #fff; margin: 10px 0 8px; }
.ai-lay-cap p { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); max-width: 46ch; margin: 0; }

.ai-lay-side { display: flex; flex-direction: column; }
.ai-lay-tele { flex-grow: 1; padding: clamp(28px, 3vw, 40px); background: var(--ai-inst); border-bottom: 1px solid var(--line); }
.ai-lay-tele-k { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--faint); margin-bottom: clamp(24px, 3vw, 38px); }
.ai-lay-tele-row { margin-bottom: 24px; }
.ai-lay-tele-row:last-child { margin-bottom: 0; }
.ai-lay-tele-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.ai-lay-tele-top b { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.ai-lay-tele-ic { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; }
.ai-lay-tele-ic::before { content: ""; width: 16px; height: 16px;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; background: var(--gun); }
.ai-lay-tele-row p { font-family: var(--mono); font-size: 11px; line-height: 1.55; color: var(--dim); margin: 0; }
.ai-lay-adv { padding: clamp(28px, 3vw, 40px); background: #fff; }
.ai-lay-adv h4 { font-family: var(--sans); font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 14px; }
.ai-lay-adv p { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--dim); margin: 0 0 22px; }
.ai-btn--block { display: flex; width: 100%; }

/* ---------- 07 · STRATEGIC INFRASTRUCTURE (statement) ---------- */
.ai-strat { background: #fff; }
.ai-strat-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(24px, 4vw, 48px); }
.ai-strat-tag { grid-column: 1 / -1; color: var(--ink); letter-spacing: 0.22em; }
.ai-strat-h { grid-column: 1 / -1; font-family: var(--sans); font-size: clamp(38px, 6.6vw, 96px); font-weight: 600;
  line-height: 0.98; letter-spacing: -0.05em; color: var(--ink); max-width: 16ch; margin: clamp(16px, 2vw, 28px) 0 clamp(28px, 4vw, 52px); }
.ai-strat-body { grid-column: 7 / -1; }
.ai-strat-lead { font-family: var(--sans); font-size: clamp(18px, 2vw, 24px); font-weight: 540; line-height: 1.5;
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 22px; }
.ai-strat-sub { font-family: var(--mono); font-size: clamp(12px, 1vw, 14px); line-height: 1.65; color: var(--dim); margin: 0; }

/* ---------- responsive (blueprint sections) ---------- */
@media (max-width: 980px) {
  .ai-hero-copy { max-width: none; margin-left: 0; }
  .ai-hero-sec-rule { display: none; }
  .ai-lay-head { grid-template-columns: 1fr; align-items: start; gap: 20px; }
  .ai-lay-head-r { border-left: 0; padding-left: 0; }
  .ai-lay-panel { grid-template-columns: 1fr; }
  .ai-lay-view { border-right: 0; border-bottom: 1px solid var(--line); }
  .ai-strat-body { grid-column: 1 / -1; }
  .ai-std-row { justify-content: flex-start; }
  .ai-std-note { text-align: left; }
}
@media (max-width: 760px) {
  .ai-hero { min-height: 0; }
  .ai-hero-ctas { flex-direction: column; width: 100%; }
  .ai-hero-ctas .ai-btn--ghost { border-left: 0; border-top: 1px solid var(--ink); }
  .ai-hero-cue { display: none; }
}

/* ============================================================
   REFINEMENT PASS (2026-06): radiant/hyperbolic cues · flags ·
   squared corners · premium cards · gentle reveals
   ============================================================ */

/* 1 · squared corners on every box / button / chip / field / viewport */
.ai-btn, .ai-btn--sm, .ai-btn--lg, .ai-btn--block,
.ai-surf-box, .ai-surf-art, .ai-surf-chip, .ai-surf-chip-ic, .ai-cspan-ic,
.ai-pillar-ic, .ai-cspan-box, .ai-lay-panel, .ai-lay-view, .ai-lay-badge,
.ai-lay-tele-ic, .ai-std-tag, .ai-eyebrow, .ai-cmp-grid, .ai-cmp-grid,
.ai-foot-form input, .ai-foot-form button, .ai-locale, .ai-locale img,
.ai-comp-flag, .ai-cell-flag, .ai-surf-num { border-radius: 0; }

/* 2 · eyebrow labels — 0.04em tracking + highlighted square chip */
.ai-eyebrow { letter-spacing: 0.04em; color: var(--ink); background: var(--ai-inst); padding: 5px 9px; }
.ai-center.ai-eyebrow, .ai-center .ai-eyebrow { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
.ai-eyebrow--inv { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.82); }
.ai-comp-eyebrow { color: var(--ink); }
.ai-hero-kick { margin: 0 0 clamp(20px, 3vw, 36px); }

/* 3 · header locale flags */
.ai-locale { gap: 8px; }
.ai-locale img { width: 22px; height: 16px; object-fit: cover; display: block; border: 1px solid var(--line); }
.ai-locale i { color: var(--ghost); }

/* 4 · what-we-do statement — full width, larger, lighter (not bold) */
.ai-what-head { margin-bottom: clamp(22px, 3vw, 40px); }
.ai-statement { font-size: clamp(28px, 4.7vw, 66px); font-weight: 430; line-height: 1.00; letter-spacing: -0.035em; max-width: none; }
/* (gap/font-weight overrides removed — see PASS 16 for authoritative cspan rules) */

/* 5 · premium execution-layer cards + dark art viewports */
.ai-surf-box { border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(16, 28, 52, 0.04), 0 30px 60px -40px rgba(16, 28, 52, 0.42); }
.ai-surf-box-head { align-items: center; }
.ai-surf-num { background: var(--ink); color: #fff; font-weight: 500; border-right: 0; }
.ai-surf-name { letter-spacing: 0.12em; }
.ai-surf-tag { margin-left: auto; padding-right: clamp(14px, 1.4vw, 22px); font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--faint); }
.ai-surf-art {
  background:
    radial-gradient(120% 90% at 50% 6%, rgba(216, 176, 71, 0.16), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 22px),
    var(--dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ai-surf-art-tag { position: absolute; left: 14px; bottom: 12px; z-index: 3; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: rgba(216, 176, 71, 0.62); }
.ai-surf-art--apps span { background: linear-gradient(90deg, var(--steel), var(--gold-lt)); box-shadow: 0 0 18px rgba(216, 176, 71, 0.34); }
.ai-surf-art--apps span:nth-child(4) { background: linear-gradient(90deg, var(--gold), var(--gold-lt)); }
.ai-surf-art--agents i { background: var(--gold-lt); box-shadow: 0 0 14px rgba(216, 176, 71, 0.7); }
.ai-surf-art--agents i:nth-child(1) { background: #fff; }
.ai-surf-art--agents i:nth-child(3) { background: var(--steel); }
.ai-surf-art--agents::before { background:
  linear-gradient(to bottom right, transparent 49.6%, rgba(216, 176, 71, 0.3) 49.8%, transparent 50%),
  linear-gradient(to bottom left, transparent 49.6%, rgba(216, 176, 71, 0.3) 49.8%, transparent 50%); }
.ai-surf-art--secure span { border-color: rgba(216, 176, 71, 0.85); box-shadow: 0 0 22px rgba(216, 176, 71, 0.34), inset 0 0 18px rgba(216, 176, 71, 0.22); }
.ai-surf-art--secure span::before { border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 0 12px rgba(255, 255, 255, 0.4); }
.ai-surf-art--secure span::after { box-shadow: 0 0 0 9px rgba(216, 176, 71, 0.1); }

/* 6 · compliance — 400-weight names, nation flags, cell typing */
.ai-comp-name { font-weight: 400; }
.ai-comp-flag { width: clamp(34px, 3.6vw, 52px); aspect-ratio: 4 / 3; object-fit: cover; display: block;
  margin-bottom: clamp(18px, 2.2vw, 28px); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(16, 28, 52, 0.14); }
.ai-comp-gridmid .ai-comp-flag { margin: 0 auto clamp(14px, 1.6vw, 20px); }
.ai-comp-cells li { display: flex; align-items: flex-start; gap: 11px; }
.ai-cell-flag { width: 26px; height: 19.5px; flex: none; margin-top: 2px; object-fit: cover; border: 1px solid var(--line); }
.ai-cell-typed::after { content: "\258C"; color: var(--gold); margin-left: 0.06em; }
.ai-cell-typed.is-done::after { content: ""; }

/* 7 · radiant plus-grid corner markers */
.ai-plusframe { position: relative; }
.ai-plus { position: absolute; width: 16px; height: 16px; color: var(--gold); z-index: 4; pointer-events: none; }
.ai-plus::before, .ai-plus::after { content: ""; position: absolute; background: currentColor; }
.ai-plus::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.ai-plus::after { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-50%); }
.ai-plus--tl { left: calc(var(--gutter) - 8px); top: -8px; }
.ai-plus--tr { right: calc(var(--gutter) - 8px); top: -8px; }
.ai-plus--bl { left: calc(var(--gutter) - 8px); bottom: -8px; }
.ai-plus--br { right: calc(var(--gutter) - 8px); bottom: -8px; }

/* 8 · square bullet utility (radiant) */
.ai-sqbul { list-style: none; margin: 0; padding: 0; }
.ai-sqbul li { position: relative; padding-left: 22px; }
.ai-sqbul li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--gold); }

/* 9 · gentle reveal — softer rise + blur clear (radiant cue) */
html.js [data-reveal] { opacity: 0; transform: translateY(16px); filter: blur(7px); }

@media (max-width: 760px) {
  .ai-comp-cells li { gap: 8px; }
  .ai-cell-flag { width: 22px; height: 16.5px; }
}

/* eyebrow chips must hug their text even inside flex/grid parents */
.ai-eyebrow { width: fit-content; max-width: 100%; }
.ai-comp-eyebrow { align-self: flex-start; }

/* ============================================================
   PASS 3 (2026-06): icon shimmer · tighter eyebrows · offerings outro
   ============================================================ */

/* eyebrow chips hug the text more tightly */
.ai-eyebrow { padding: 3px 6px; }

/* icon "blinking shimmer" — a sheen gleam sweeps the gold-square icons
   periodically (Rive-style idle), staggered so they don't pulse in unison */
.ai-pillar-ic, .ai-cspan-ic, .ai-surf-chip-ic { position: relative; overflow: hidden; }
.ai-pillar-ic::after, .ai-cspan-ic::after, .ai-surf-chip-ic::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.72) 50%, transparent 60%);
  background-size: 250% 100%; background-position: 160% 0;
  animation: ai-ic-shimmer 4.4s ease-in-out infinite;
}
@keyframes ai-ic-shimmer { 0% { background-position: 160% 0; } 38%, 100% { background-position: -160% 0; } }
/* stagger */
.ai-pillars li:nth-child(2) .ai-pillar-ic::after { animation-delay: 1.5s; }
.ai-pillars li:nth-child(3) .ai-pillar-ic::after { animation-delay: 3s; }
.ai-cspan:nth-of-type(2) .ai-cspan-ic::after { animation-delay: 1.5s; }
.ai-cspan:nth-of-type(3) .ai-cspan-ic::after { animation-delay: 3s; }
.ai-surf-step:nth-child(2) .ai-surf-chip-ic::after { animation-delay: 1.5s; }
.ai-surf-step:nth-child(3) .ai-surf-chip-ic::after { animation-delay: 3s; }
/* line-icon glyphs (telemetry) get a gentle idle glow instead of a sheen */
.ai-lay-tele-ic::before { animation: ai-ic-glow 4.4s ease-in-out infinite; }
.ai-lay-tele-row:nth-child(3) .ai-lay-tele-ic::before { animation-delay: 1.5s; }
.ai-lay-tele-row:nth-child(4) .ai-lay-tele-ic::before { animation-delay: 3s; }
@keyframes ai-ic-glow { 0%, 42%, 100% { opacity: 0.82; } 20% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ai-pillar-ic::after, .ai-cspan-ic::after, .ai-surf-chip-ic::after, .ai-lay-tele-ic::before { animation: none; }
}

/* offerings outro line */
.ai-surf-outro { max-width: 64ch; margin: clamp(48px, 6vw, 86px) 0 0; font-family: var(--mono);
  font-size: clamp(13px, 1.2vw, 16px); line-height: 1.62; color: var(--dim); }
.ai-surf-outro em { font-style: normal; color: var(--ink); box-shadow: inset 0 -0.4em 0 rgba(185, 148, 46, 0.28); }

/* ============================================================
   PASS 4 (2026-06): positioning manifesto · live security-review terminal
   ============================================================ */

/* --- positioning manifesto (after hero) --- */
.ai-manifesto { background: #fff; }
.ai-man-h { font-family: var(--sans); font-size: clamp(36px, 6.2vw, 92px); font-weight: 600; line-height: 0.98;
  letter-spacing: -0.05em; color: var(--ink); max-width: 17ch; margin: clamp(16px, 2vw, 28px) 0 clamp(34px, 5vw, 60px); }
.ai-man-lead { font-family: var(--sans); font-size: clamp(20px, 2.5vw, 33px); font-weight: 460; line-height: 1.3;
  letter-spacing: -0.025em; color: var(--ink); max-width: 32ch; margin: 0 0 clamp(28px, 4vw, 48px); }
.ai-man-lead strong { font-weight: 640; box-shadow: inset 0 -0.42em 0 rgba(185, 148, 46, 0.26); }
.ai-man-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); max-width: 1040px; }
.ai-man-cols p { font-family: var(--mono); font-size: clamp(13px, 1.05vw, 15px); line-height: 1.66; color: var(--dim); margin: 0; }
@media (max-width: 820px) { .ai-man-cols { grid-template-columns: 1fr; gap: 22px; } }

/* --- live security-review terminal --- */
/* boot intro frame */
.ai-comp-boot { font-family: var(--mono); font-size: clamp(20px, 3.2vw, 48px); font-weight: 400; letter-spacing: -0.01em;
  color: var(--ink); margin: clamp(16px, 2vw, 28px) 0 0; text-transform: none; }
.ai-comp-bootsub { font-family: var(--mono); font-size: clamp(13px, 1.2vw, 16px); color: var(--dim);
  margin-top: clamp(16px, 2vw, 24px); max-width: 54ch; text-transform: none; letter-spacing: 0; }
/* done frame */
.ai-comp-beat--done .ai-comp-name { color: var(--gun); }
.ai-comp-beat--done .ai-comp-desc b { color: var(--gold); }
/* run-readout meter (replaces the old foot) */
.ai-comp-run { position: absolute; bottom: clamp(20px, 4vh, 40px); left: var(--gutter); right: var(--gutter); z-index: 4;
  display: flex; align-items: center; gap: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.ai-comp-run-k { color: var(--dim); min-width: 12ch; }
.ai-comp-run-k.is-ok { color: var(--gold); }
.ai-comp-meter { flex: 1; max-width: 440px; height: 2px; background: rgba(10, 12, 22, 0.1); position: relative; overflow: hidden; }
.ai-comp-meter-bar { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gold); }
.ai-comp-run-pct { color: var(--ink); min-width: 4ch; text-align: right; }
/* persistent scan sweep over the pinned stage */
.ai-comp-scanbar { position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(185, 148, 46, 0.05) 55%, rgba(185, 148, 46, 0.13));
  mix-blend-mode: multiply; opacity: 0.75; animation: ai-comp-scanbar 5.5s linear infinite; will-change: transform; }
@keyframes ai-comp-scanbar { 0% { transform: translateY(-170px); } 100% { transform: translateY(100vh); } }
.ai-comp--static .ai-comp-run, .ai-comp--static .ai-comp-scanbar { display: none; }
@media (prefers-reduced-motion: reduce) { .ai-comp-scanbar { display: none; } }

/* ============================================================
   PASS 5 (2026-06): plus-grid alignment · manifesto sub
   ============================================================ */

/* plus-frame draws its own column-edge grid rules so the + crosses sit on the grid */
.ai-plusframe::before, .ai-plusframe::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(10, 12, 22, 0.08); pointer-events: none; z-index: 1;
}
.ai-plusframe::before { left: calc(var(--gutter) - 0.5px); }
.ai-plusframe::after { right: calc(var(--gutter) - 0.5px); }
/* the crosses already centre on the column corners; keep them above the rules */
.ai-plus { z-index: 3; }
/* hero grid-lines retired in favour of the plus-frame column rules */
.ai-hero-rules { display: none; }

/* manifesto supporting line (tighter copy) */
.ai-man-sub { font-family: var(--sans); font-size: clamp(18px, 2.1vw, 27px); font-weight: 460; line-height: 1.4;
  letter-spacing: -0.02em; color: var(--dim); max-width: 46ch; margin: 0; }

/* ============================================================
   PASS 6 (2026-06): GPU hero · 3-column build section · footer
   ============================================================ */

/* hero GPU photo (parallax, lower-right, mask-faded so it never fights the text) */
.ai-hero-photo {
  position: absolute; right: -1%; bottom: -8%; width: min(58%, 840px); height: 96%;
  background: url(/assets/gpu-hero.jpg) no-repeat right bottom; background-size: contain;
  z-index: 0; pointer-events: none; opacity: 0.92; will-change: transform;
  -webkit-mask: linear-gradient(290deg, #000 38%, rgba(0,0,0,0.6) 60%, transparent 86%);
  mask: linear-gradient(290deg, #000 38%, rgba(0,0,0,0.6) 60%, transparent 86%);
}
@media (max-width: 860px) { .ai-hero-photo { width: 86%; opacity: 0.5; } }

/* 3-column "what we build" (Radiant-style: near full-width, grid lines, + markers) */
.ai-cols3 { background: #fff; }
.ai-cols3-head { max-width: 1100px; margin-bottom: clamp(38px, 5vw, 68px); }
.ai-cols3-h { font-family: var(--sans); font-size: clamp(32px, 4.6vw, 64px); font-weight: 600; line-height: 1.0;
  letter-spacing: -0.045em; color: var(--ink); margin: clamp(16px, 2vw, 26px) 0 0; max-width: 22ch; }
.ai-cols3-grid { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.ai-cols3-col { padding: clamp(30px, 3.2vw, 52px) clamp(22px, 2.6vw, 44px); }
.ai-cols3-col + .ai-cols3-col { border-left: 1px solid var(--line); }
.ai-cols3-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: clamp(22px, 2.6vw, 34px); }
.ai-cols3-ic::before { content: ""; width: 32px; height: 32px;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
  background: var(--gold); animation: ai-ic-glow 4.4s ease-in-out infinite; }
.ai-cols3-col:nth-child(3) .ai-cols3-ic::before { animation-delay: 1.5s; }
.ai-cols3-col:nth-child(4) .ai-cols3-ic::before { animation-delay: 3s; }
.ai-cols3-n { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--faint); margin-bottom: 10px; }
.ai-cols3-t { font-family: var(--sans); font-size: clamp(22px, 2vw, 30px); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 14px; }
.ai-cols3-p { font-family: var(--mono); font-size: clamp(12.5px, 1vw, 14.5px); line-height: 1.65; color: var(--dim); margin: 0; }
.ai-cols3-outro { margin: clamp(40px, 5vw, 72px) 0 0; max-width: 72ch; font-family: var(--sans); font-size: clamp(18px, 2vw, 27px);
  font-weight: 480; line-height: 1.4; letter-spacing: -0.02em; color: var(--ink); }
.ai-cols3-outro em { font-style: normal; box-shadow: inset 0 -0.42em 0 rgba(185, 148, 46, 0.26); }
/* plus-frame markers/rules align to the GRID's own edges (it is not a .ai-wrap) */
.ai-cols3-grid .ai-plus--tl, .ai-cols3-grid .ai-plus--bl { left: -8px; }
.ai-cols3-grid .ai-plus--tr, .ai-cols3-grid .ai-plus--br { right: -8px; }
.ai-cols3-grid.ai-plusframe::before { left: -0.5px; }
.ai-cols3-grid.ai-plusframe::after { right: -0.5px; }
@media (max-width: 860px) {
  .ai-cols3-grid { grid-template-columns: 1fr; }
  .ai-cols3-col + .ai-cols3-col { border-left: 0; border-top: 1px solid var(--line); }
}

/* retired scan-line elements (now removed from markup) */
.ai-comp-scanbar, .ai-comp-wire { display: none !important; }

/* ============================================================
   PASS 7 (2026-06): hero weight/gap · hamburger nav · non-bg pillar
   icons + TX flag · icon glitch-in · light footer (AI page only)
   ============================================================ */

/* hero: lighter H1/H2, less gap under the nav */
.ai-hero { justify-content: flex-start; min-height: 88vh; padding-top: clamp(44px, 6.5vh, 84px); }
.ai-hero-h { font-weight: 400; }
.ai-hero-sec { font-weight: 400; }

/* nav compressed to a hamburger on all sizes (like the main site) */
.ai-nav { display: none !important; }
.ai-menu-btn { display: block; }

/* pillar icons: non-bg line glyphs; Texas origins = state flag */
.ai-pillar-ic { background: none; border-radius: 0; width: 36px; height: 36px; overflow: visible; }
.ai-pillar-ic::before { width: 36px; height: 36px; background: var(--gold); }
.ai-pillar-ic--star::before { width: 32px; height: 32px; }

/* nav cluster floats right now that the inline links are hidden */
.ai-head-right { margin-left: auto; }

/* more breathing room between the 3 columns */
.ai-cols3-col { padding: clamp(34px, 4vw, 60px) clamp(30px, 3.4vw, 58px); }

/* trim the over-large void under the What-we-do pillars */
.ai-what { padding-bottom: clamp(40px, 5vw, 76px); }

/* icons flicker indefinitely + obviously (incl. statement glyphs), staggered so they never sync */
.ai-pillar-ic::after, .ai-surf-chip-ic::after { content: none !important; animation: none !important; }
@keyframes ai-ic-flicker {
  0%, 60%, 100% { opacity: 1; }
  62% { opacity: 0.18; } 64% { opacity: 1; } 67% { opacity: 0.5; } 69% { opacity: 1; }
  80% { opacity: 0.25; } 82% { opacity: 1; } 85% { opacity: 0.62; } 87% { opacity: 1; }
}
.ai-pillar-ic::before, .ai-cols3-ic::before, .ai-lay-tele-ic::before, .ai-cspan-ic::before { animation: ai-ic-flicker 4.2s linear infinite; }
.ai-pillars li:nth-child(2) .ai-pillar-ic::before { animation-delay: 1.3s; animation-duration: 4.8s; }
.ai-pillars li:nth-child(3) .ai-pillar-ic::before { animation-delay: 2.7s; animation-duration: 3.9s; }
.ai-cols3-grid article:nth-of-type(1) .ai-cols3-ic::before { animation-delay: 0.7s; animation-duration: 4.6s; }
.ai-cols3-grid article:nth-of-type(2) .ai-cols3-ic::before { animation-delay: 2.1s; }
.ai-cols3-grid article:nth-of-type(3) .ai-cols3-ic::before { animation-delay: 3.4s; animation-duration: 3.8s; }
.ai-lay-tele-row:nth-child(3) .ai-lay-tele-ic::before { animation-delay: 1.1s; animation-duration: 4.9s; }
.ai-lay-tele-row:nth-child(4) .ai-lay-tele-ic::before { animation-delay: 2.5s; }
.ai-statement .ai-cspan:nth-of-type(2) .ai-cspan-ic::before { animation-delay: 1.6s; animation-duration: 4.7s; }
.ai-statement .ai-cspan:nth-of-type(3) .ai-cspan-ic::before { animation-delay: 3s; animation-duration: 3.7s; }
.ai-statement .ai-cspan:nth-of-type(4) .ai-cspan-ic::before { animation-delay: 0.9s; animation-duration: 4.4s; }
@media (prefers-reduced-motion: reduce) { .ai-pillar-ic::before, .ai-cols3-ic::before, .ai-lay-tele-ic::before, .ai-cspan-ic::before { animation: none !important; } }

/* footer: use the default (dark) Skylance homepage footer — no AI-page override */

/* ============================================================
   PASS 8 (2026-06): hero — intentional GPU split
   ============================================================ */
.ai-hero-split { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(28px, 4vw, 72px);
  align-items: center; margin-top: clamp(26px, 3.6vw, 52px); }
.ai-hero-text { min-width: 0; }
.ai-hero-split .ai-hero-h { font-size: clamp(38px, 5.4vw, 84px); }
.ai-hero-split .ai-hero-sec { font-size: clamp(20px, 2.9vw, 40px); }
.ai-hero-split .ai-hero-sec-row { margin-top: clamp(8px, 1.2vw, 16px); }
.ai-hero-split .ai-hero-copy { max-width: 520px; margin: clamp(24px, 3.2vw, 42px) 0 0;
  border-left: 3px solid var(--gun); padding-left: clamp(20px, 2.2vw, 34px); }
.ai-hero-visual { position: relative; min-width: 0; }
.ai-hero-visual-inner { position: relative; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #ffffff 0%, #eef2f8 100%);
  box-shadow: 0 1px 0 rgba(16, 28, 52, 0.04), 0 40px 80px -52px rgba(16, 28, 52, 0.5); }
.ai-hero-visual-inner img { width: 110%; height: 110%; object-fit: cover; object-position: 24% center; display: block; will-change: transform; }
.ai-hero-visual-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(10, 12, 22, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 12, 22, 0.045) 1px, transparent 1px);
  background-size: 40px 40px; }
.ai-hero-visual-cap { display: flex; align-items: center; gap: 9px; margin-top: 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.ai-hero-visual-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); flex: none; }
.ai-hero-photo { display: none; }
@media (max-width: 900px) {
  .ai-hero-split { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 38px); }
  .ai-hero-visual-inner { aspect-ratio: 16 / 10; }
}

/* ============================================================
   PASS 9 (2026-06): "The cost" — sui-style 2-column risk table
   ============================================================ */
.ai-table-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 76px);
  row-gap: clamp(12px, 1.2vw, 16px); position: relative; margin-top: clamp(22px, 3vw, 40px); }
.ai-table-grid::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%);
  border-left: 1px dashed rgba(10, 12, 22, 0.2); pointer-events: none; }
.ai-table-col-h { font-family: var(--sans); font-size: clamp(28px, 3.6vw, 54px); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1.02; color: var(--ink); padding-bottom: clamp(18px, 2.4vw, 34px); }
.ai-table-cell { position: relative; background: var(--bg-2); font-family: var(--sans);
  font-size: clamp(14px, 1.15vw, 17px); line-height: 1.42; letter-spacing: -0.012em;
  padding: clamp(15px, 1.5vw, 21px) clamp(18px, 1.8vw, 26px) clamp(15px, 1.5vw, 21px) clamp(34px, 3vw, 46px); }
.ai-table-cell::before { content: ""; position: absolute; left: clamp(16px, 1.6vw, 24px); top: 1.5em; width: 9px; height: 9px; background: var(--gold); }
.ai-table-cell--a { color: var(--ink); font-weight: 500; }
.ai-table-cell--b { color: var(--dim); }
.ai-table-cell--b::before { background: var(--gun); }
@media (max-width: 760px) {
  .ai-table-grid { grid-template-columns: 1fr; column-gap: 0; }
  .ai-table-grid::before { display: none; }
  .ai-table-col-h { font-size: clamp(24px, 7vw, 36px); padding-bottom: 10px; }
  .ai-table-cell--b { border-left: 2px solid rgba(185, 148, 46, 0.4); margin-bottom: 6px; }
}

/* ============================================================
   PASS 10 (2026-06): spacing fixes (What-we-do, 3-col, table)
   ============================================================ */
/* statement breathes inside its plus-frame; clear separation from the pillars */
.ai-what .ai-plusframe { padding-top: clamp(14px, 1.8vw, 26px); padding-bottom: clamp(22px, 2.6vw, 40px); }
.ai-pillars { margin-top: clamp(34px, 4.6vw, 62px); }
/* tighten the over-large transition into the next section */
.ai-what { padding-bottom: clamp(30px, 3.8vw, 58px); }
.ai-cols3 { padding-top: clamp(54px, 6.8vw, 100px); }

/* risk table: more air under the big headers + between rows; less void below */
.ai-table-col-h { padding-bottom: clamp(28px, 3.2vw, 50px); }
.ai-table-grid { row-gap: clamp(16px, 1.7vw, 22px); }
.ai-table { padding-bottom: clamp(46px, 6vw, 88px); }

/* ============================================================
   PASS 11 (2026-06): nav auto-hide · H2 leading · mono kerning ·
   statement logo/flag · pillar h3 · table red-X · The Mission · tree
   ============================================================ */

/* 1 · navbar auto-hides on scroll-down, returns on scroll-up */
.ai-head { transition: transform 0.4s var(--ease); }
.ai-head.is-hidden { transform: translateY(-100%); }

/* 2 · tighter H2 / display leading (desktop + mobile) */
.ai-hero-sec, .ai-cols3-h, .ai-table-col-h, .ai-tree-h, .ai-band-title { line-height: 0.95; }
.ai-mission-lead { line-height: 1.26; }

/* 3 · reduce mono-label kerning across the page */
.ai-eyebrow { letter-spacing: 0.015em; }
.ai-sidetag { letter-spacing: 0.12em; }
.ai-cols3-n, .ai-tree-node-n, .ai-hero-meta, .ai-hero-meta-loc { letter-spacing: 0.08em; }
.ai-std-sub, .ai-surf-tag, .ai-hero-visual-cap { letter-spacing: 0.08em; }

/* 4 · statement: inline Skylance logomark + blinking US flag */
.ai-stmt-logo { height: 0.84em; width: auto; vertical-align: -0.12em; margin-right: 0.16em; display: inline-block; }
/* .ai-cspan-flag geometry → PASS 16 (square, flush). Only the shimmer kept here: */
.ai-cspan-flag img { width: 100%; height: 100%; object-fit: cover; animation: ai-ic-flicker 4.2s linear infinite; }

/* 5 · pillars become icon + h3 title only (no body copy) */
.ai-pillars--titles li { display: flex; flex-direction: column; gap: 0; }
.ai-pillars--titles .ai-pillar-k { font-family: var(--sans); font-size: clamp(20px, 2vw, 30px); font-weight: 600;
  letter-spacing: -0.03em; text-transform: none; color: var(--ink); margin: 4px 0 0; }
.ai-pillars--titles .ai-pillar-k::before { display: none; }

/* 6 · risk table: red X on consequences + clearer mobile pairing */
.ai-table-cell--b::before { content: "\2715"; background: none; width: auto; height: auto; top: 1.4em;
  color: #c8102e; font-size: 0.82em; font-weight: 700; line-height: 1; }
@media (max-width: 760px) {
  .ai-table-cell--a { font-weight: 600; }
  .ai-table-cell--b { margin: 0 0 16px 20px; border-left: 2px solid rgba(200, 16, 46, 0.45); background: #fbf6f6; }
  .ai-table-cell--b::before { color: #c8102e; }
}

/* 7 · The Mission — clean statement + inline flag/seal */
.ai-mission { background: #fff; }
.ai-mission-body { margin-top: clamp(20px, 3vw, 38px); }
.ai-mission-lead { font-family: var(--sans); font-size: clamp(28px, 4vw, 58px); font-weight: 460; letter-spacing: -0.04em;
  color: var(--ink); margin: 0 0 clamp(26px, 3.4vw, 50px); max-width: 20ch; }
.ai-mission-p { font-family: var(--sans); font-size: clamp(19px, 2.2vw, 31px); font-weight: 420; line-height: 1.28;
  letter-spacing: -0.022em; color: var(--ink); margin: 0 0 clamp(20px, 2.4vw, 36px); max-width: 38ch; }
.ai-mission-p:last-child { margin-bottom: 0; }
.ai-mission-p strong { font-weight: 680; }
.ai-inline-ic { display: inline-block; }
.ai-inline-flag { width: 0.94em; height: 0.72em; object-fit: cover; border: 1px solid var(--line); display: inline-block; vertical-align: -0.07em; }
.ai-inline-seal { width: 0.98em; height: 0.98em; object-fit: contain; display: inline-block; vertical-align: -0.16em;
  filter: grayscale(1) brightness(0.32) contrast(1.18); }

/* 8 · COMPLIANCE — scroll-drawn review tree */
.ai-tree-sec { background: #fff; }
.ai-tree-head { margin-bottom: clamp(34px, 4.6vw, 60px); }
.ai-tree-h { font-family: var(--sans); font-size: clamp(30px, 4.4vw, 60px); font-weight: 600; letter-spacing: -0.04em; color: var(--ink); margin: clamp(14px, 1.8vw, 24px) 0 0; }
.ai-tree { position: relative; }
.ai-tree-root { display: flex; justify-content: center; }
.ai-tree-root-node { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--ai-inst);
  padding: 10px 18px; font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.ai-tree-root-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); flex: none; }
.ai-tree-trunk { display: block; width: 1px; height: clamp(26px, 3.4vw, 46px); background: var(--line-strong); margin: 0 auto; transform-origin: top; }
.ai-tree-branches { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 34px); padding-top: clamp(22px, 2.6vw, 38px); }
.ai-tree-bus { position: absolute; top: 0; left: 12.5%; right: 12.5%; height: 1px; background: var(--line-strong); transform-origin: center; }
.ai-tree-branch { position: relative; }
.ai-tree-drop { position: absolute; top: calc(-1 * clamp(22px, 2.6vw, 38px)); left: 50%; width: 1px; height: clamp(22px, 2.6vw, 38px); background: var(--line-strong); transform: translateX(-50%); transform-origin: top; }
.ai-tree-node { display: flex; flex-direction: column; gap: 5px; padding-bottom: clamp(14px, 1.6vw, 22px); border-bottom: 1px solid var(--line); }
.ai-tree-node-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--gold); }
.ai-tree-node-t { font-family: var(--sans); font-size: clamp(16px, 1.5vw, 21px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.ai-tree-leaves { list-style: none; margin: clamp(14px, 1.6vw, 20px) 0 0; padding: 0; display: flex; flex-direction: column; gap: clamp(9px, 1vw, 13px); }
.ai-tree-leaf { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); line-height: 1.34; color: var(--dim); }
.ai-tree-leaf::before { content: ""; width: 6px; height: 6px; background: var(--gun); flex: none; }
.ai-tree-leaf--bad::before { content: "\2715"; background: none; width: auto; height: auto; color: #c8102e; font-size: 11px; font-weight: 700; line-height: 1; }
.ai-tree-flag { width: 18px; height: 13.5px; object-fit: cover; border: 1px solid var(--line); flex: none; }
.ai-tree-foot { margin-top: clamp(32px, 4vw, 56px); font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); letter-spacing: 0.03em; color: var(--faint); }
/* draw-in: hidden initial states (only under .js; safety-net reveals if libs fail) */
html.js .ai-tree-trunk, html.js .ai-tree-drop { transform: scaleY(0); }
html.js .ai-tree-trunk { transform: scaleY(0); }
html.js .ai-tree-drop { transform: translateX(-50%) scaleY(0); }
html.js .ai-tree-bus { transform: scaleX(0); }
html.js .ai-tree-leaf { opacity: 0; transform: translateY(6px); }
.ai-tree-trunk { transition: transform 0.5s var(--ease); }
.ai-tree-bus { transition: transform 0.6s var(--ease) 0.28s; }
.ai-tree-drop { transition: transform 0.4s var(--ease) 0.5s; }
.ai-tree-leaf { transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.ai-tree.is-drawn .ai-tree-trunk { transform: scaleY(1); }
.ai-tree.is-drawn .ai-tree-bus { transform: scaleX(1); }
.ai-tree.is-drawn .ai-tree-drop { transform: translateX(-50%) scaleY(1); }
.ai-tree.is-drawn .ai-tree-leaf { opacity: 1; transform: none; }
.ai-tree.is-drawn .ai-tree-leaf:nth-child(2) { transition-delay: 0.72s; }
.ai-tree.is-drawn .ai-tree-leaf:nth-child(3) { transition-delay: 0.78s; }
.ai-tree.is-drawn .ai-tree-leaf:nth-child(4) { transition-delay: 0.84s; }
.ai-tree.is-drawn .ai-tree-leaf:nth-child(5) { transition-delay: 0.9s; }
.ai-tree.is-drawn .ai-tree-leaf:nth-child(6) { transition-delay: 0.96s; }
.ai-tree.is-drawn .ai-tree-leaf:nth-child(7) { transition-delay: 1.02s; }
@media (max-width: 820px) {
  .ai-tree-branches { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 40px); padding-top: 0; padding-left: 22px; }
  .ai-tree-bus, .ai-tree-drop { display: none; }
  .ai-tree-branches::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--line-strong); }
  .ai-tree-branch::before { content: ""; position: absolute; left: -22px; top: 16px; width: 18px; height: 1px; background: var(--line-strong); }
  .ai-tree-trunk { height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .ai-tree-trunk, html.js .ai-tree-bus, html.js .ai-tree-drop { transform: none !important; }
  html.js .ai-tree-leaf { opacity: 1 !important; transform: none !important; }
  .ai-cspan-flag img, .ai-mission-p { animation: none; }
}

/* ============================================================
   PASS 12 (2026-06): Mission full-width + highlights · simplified seal ·
   pillar spacing · isometric stack · paired risk cards
   ============================================================ */

/* simplified seal is already monochrome — drop the heavy filter */
.ai-inline-seal { filter: none; }

/* The Mission: full width (like the what-we-do statement) */
.ai-mission-lead { max-width: none; }
.ai-mission-p { max-width: none; }

/* pillars: even spacing + match icon sizing so Texas Origins lines up */
.ai-pillars { align-items: start; }
.ai-pillar-ic--star::before { width: 34px; height: 34px; }

/* THE FULL STACK — isometric slab stack */
.ai-stack-sec { background: var(--bg-2); }
.ai-stack-head { max-width: 1000px; margin-bottom: clamp(38px, 4.8vw, 68px); }
.ai-stack-h { font-family: var(--sans); font-size: clamp(24px, 3vw, 42px); font-weight: 480; line-height: 1.18; letter-spacing: -0.03em; color: var(--ink); margin: clamp(14px, 1.8vw, 24px) 0 0; max-width: 26ch; }
.ai-stack-h .ai-dim2 { color: var(--gold); }
.ai-stack { display: flex; flex-direction: column; align-items: center; gap: clamp(11px, 1.3vw, 18px); padding: clamp(20px, 2.6vw, 44px) 0 clamp(6px, 1vw, 14px); perspective: 1800px; }
.ai-stack-layer { width: min(780px, 100%); background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold);
  box-shadow: -11px 11px 0 -2px rgba(16, 28, 52, 0.05), 0 26px 44px -36px rgba(16, 28, 52, 0.45);
  transform: skewX(-13deg); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); will-change: transform; }
.ai-stack-face { transform: skewX(13deg); display: flex; align-items: center; gap: clamp(18px, 2.2vw, 36px); padding: clamp(17px, 1.9vw, 27px) clamp(24px, 2.8vw, 44px); }
.ai-stack-layer:hover { transform: skewX(-13deg) translate(10px, -7px); box-shadow: -11px 11px 0 -2px rgba(185, 148, 46, 0.22), 0 44px 64px -36px rgba(16, 28, 52, 0.5); border-left-color: var(--gold-lt); position: relative; z-index: 2; }
.ai-stack-n { font-family: var(--mono); font-size: clamp(22px, 2.6vw, 38px); font-weight: 400; color: var(--gold); flex: none; line-height: 1; }
.ai-stack-txt { min-width: 0; }
.ai-stack-t { font-family: var(--sans); font-size: clamp(17px, 1.7vw, 25px); font-weight: 600; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 5px; }
.ai-stack-p { font-family: var(--mono); font-size: clamp(12px, 1vw, 14px); line-height: 1.5; color: var(--dim); margin: 0; }
@media (max-width: 680px) {
  .ai-stack-layer { transform: skewX(-8deg); box-shadow: -7px 7px 0 -2px rgba(16, 28, 52, 0.05), 0 20px 34px -30px rgba(16, 28, 52, 0.4); }
  .ai-stack-face { transform: skewX(8deg); flex-direction: column; align-items: flex-start; gap: 8px; }
  .ai-stack-layer:hover { transform: skewX(-8deg) translate(4px, -4px); }
}

/* THE COST — paired cards (practice -> consequence) */
.ai-pcards-head { margin-bottom: clamp(30px, 4vw, 54px); }
.ai-pcards-h { font-family: var(--sans); font-size: clamp(26px, 3.4vw, 50px); font-weight: 600; line-height: 0.98; letter-spacing: -0.04em; color: var(--ink); margin: clamp(12px, 1.6vw, 22px) 0 0; max-width: 18ch; }
.ai-pcards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 1.8vw, 26px); }
.ai-pcard { border: 1px solid var(--line); background: #fff; padding: clamp(20px, 2.2vw, 30px); display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(16, 28, 52, 0.03), 0 24px 44px -40px rgba(16, 28, 52, 0.4); }
.ai-pcard-practice { position: relative; padding-left: 20px; font-family: var(--sans); font-size: clamp(15px, 1.4vw, 19px); font-weight: 600; line-height: 1.32; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.ai-pcard-practice::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 9px; height: 9px; background: var(--gold); }
.ai-pcard-arrow { display: block; width: 1px; height: clamp(16px, 2vw, 26px); background: var(--line-strong); margin: clamp(12px, 1.4vw, 18px) 0 clamp(12px, 1.4vw, 18px) 4px; position: relative; }
.ai-pcard-arrow::after { content: ""; position: absolute; left: -3px; bottom: -1px; width: 7px; height: 7px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); transform: rotate(45deg); }
.ai-pcard-result { position: relative; padding-left: 20px; font-family: var(--mono); font-size: clamp(12.5px, 1.1vw, 14.5px); line-height: 1.5; color: var(--dim); margin: 0; }
.ai-pcard-x { position: absolute; left: 0; top: 0; color: #c8102e; font-weight: 700; font-size: 0.95em; line-height: 1.5; }
.ai-pcard-x::before { content: "\2715"; }
@media (max-width: 720px) { .ai-pcards-grid { grid-template-columns: 1fr; } }

/* trim isometric-skew overhang so the stack never overflows on small screens */
@media (max-width: 680px) {
  .ai-stack { overflow: hidden; }
  .ai-stack-layer { width: min(100%, 332px); transform: skewX(-6deg); box-shadow: -5px 6px 0 -2px rgba(16, 28, 52, 0.05), 0 18px 30px -28px rgba(16, 28, 52, 0.4); }
  .ai-stack-face { transform: skewX(6deg); }
  .ai-stack-layer:hover { transform: skewX(-6deg) translate(3px, -3px); }
}

/* ============================================================
   PASS 13 (2026-06): continuous shine sweep · mission seal cspan ·
   paired-card icons · bridge statement · CTA fine print
   ============================================================ */

/* SHINE: make the icon sheen a continuous linear loop — shines through,
   never eases-to-a-stop / settles on an edge (was holding 38%->100%) */
@keyframes ai-ic-shimmer { from { background-position: 220% 0; } to { background-position: -220% 0; } }
.ai-pillar-ic::after, .ai-cspan-ic::after, .ai-surf-chip-ic::after {
  animation-timing-function: linear !important; animation-duration: 3.5s !important; background-position: 220% 0;
}

/* MISSION seal logomark — mirrors the flag cspan; Rive-style flash loop */
/* .ai-cspan-seal geometry → PASS 16 (square, flush, no margin gap). Only the shimmer kept here: */
.ai-cspan-seal img { width: 100%; height: 100%; object-fit: contain; animation: ai-ic-flicker 4.2s linear infinite; }

/* PAIRED-CARD unique icons — gold square, masked glyph, continuous sheen */
.ai-pcard-ic { position: relative; overflow: hidden; display: inline-flex; width: 30px; height: 30px;
  border-radius: 4px; margin-bottom: clamp(13px, 1.4vw, 18px);
  background: linear-gradient(135deg, var(--gold-lt), var(--gold)); }
.ai-pcard-ic::before { content: ""; position: absolute; inset: 0; background: #fff;
  -webkit-mask: var(--ic) center / 56% no-repeat; mask: var(--ic) center / 56% no-repeat; }
.ai-pcard-ic::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.72) 50%, transparent 60%);
  background-size: 250% 100%; background-position: 220% 0; animation: ai-ic-shimmer 3.5s linear infinite; }
.ai-pcard:nth-of-type(2n) .ai-pcard-ic::after { animation-delay: -1.2s; }
.ai-pcard:nth-of-type(3n) .ai-pcard-ic::after { animation-delay: -2.4s; }
.ai-pcard-practice { padding-left: 0 !important; }
.ai-pcard-practice::before { display: none !important; }
@media (prefers-reduced-motion: reduce) { .ai-pcard-ic::after, .ai-cspan-seal img { animation: none !important; } }

/* BRIDGE — centered statement before the full stack */
.ai-bridge { text-align: center; }
.ai-bridge .ai-center { display: flex; flex-direction: column; align-items: center; }
.ai-bridge-flag { display: block; width: clamp(48px, 5.2vw, 74px); margin: 0 auto clamp(20px, 2.6vw, 34px); }
.ai-bridge-flag img { width: 100%; height: auto; display: block; filter: grayscale(1) contrast(0.92) brightness(1.05) opacity(0.5); }
.ai-bridge-h { font-family: var(--sans); font-size: clamp(27px, 4vw, 58px); font-weight: 560; letter-spacing: -0.04em; line-height: 1.05; color: var(--ink); margin: 0; max-width: 20ch; }
.ai-bridge-x { color: var(--gold); font-weight: 400; margin: 0 0.1em; }

/* CONTACT fine print */
.ai-contact-fine { font-family: var(--mono); font-size: clamp(11px, 0.9vw, 12.5px); line-height: 1.55; color: var(--faint); max-width: 58ch; margin: clamp(20px, 2.4vw, 30px) auto 0; }

/* ============================================================
   PASS 14 (2026-06): THE FULL STACK — pinned full-page sequence
   (tresmares-style takeover; gunmetal shapes form per scene)
   ============================================================ */
.ai-fstack { position: relative; background: #fff; }
.ai-fstack-intro { padding-top: var(--ai-pad); padding-bottom: clamp(34px, 5vw, 70px); }
.ai-fstack-pin { position: relative; }
.ai-fstack-stage { position: relative; height: 100vh; min-height: 600px; overflow: hidden; background: var(--ai-inst); }
.ai-fstack-scenes { position: absolute; inset: 0; }
.ai-fstack-scene { position: absolute; inset: 0; display: grid; align-content: center; padding: 0 var(--ai-pad); opacity: 0; visibility: hidden; }
.ai-fstack-scene.is-active { opacity: 1; visibility: visible; }

/* gunmetal shapes — form (scale + rotate + fade) as the scene becomes active */
.ai-fstack-shapes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ai-fshape { position: absolute; left: var(--x); top: var(--y); width: clamp(170px, 24vw, 400px); aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.18) rotate(calc(var(--r) - 28deg)); opacity: 0;
  mix-blend-mode: multiply; will-change: transform, opacity; }
.ai-fstack-scene.is-active .ai-fshape {
  transform: translate(-50%, -50%) scale(var(--s)) rotate(var(--r)); opacity: 0.3;
  transition: transform 1.05s cubic-bezier(.22,.61,.36,1), opacity 1s ease; transition-delay: var(--d); }

/* content */
.ai-fstack-content { position: relative; z-index: 3; padding-left: clamp(40px, 6vw, 96px); max-width: 72%; }
.ai-fstack-num { display: block; font-family: var(--mono); font-size: clamp(13px, 1.1vw, 16px); letter-spacing: 0.18em; color: var(--gold); }
.ai-fstack-t { font-family: var(--sans); font-size: clamp(40px, 8.2vw, 132px); font-weight: 300; letter-spacing: -0.035em; line-height: 0.92; color: var(--ink); margin: clamp(10px, 1.2vw, 18px) 0 0; }
.ai-fstack-p { font-family: var(--sans); font-size: clamp(14px, 1.15vw, 18px); line-height: 1.5; color: var(--dim); max-width: 46ch; margin: clamp(22px, 2.4vw, 34px) 0 0; }
.ai-fstack-num, .ai-fstack-t, .ai-fstack-p { opacity: 0; transform: translateY(30px); }
.ai-fstack-scene.is-active .ai-fstack-num,
.ai-fstack-scene.is-active .ai-fstack-t,
.ai-fstack-scene.is-active .ai-fstack-p { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.ai-fstack-scene.is-active .ai-fstack-t { transition-delay: .06s; }
.ai-fstack-scene.is-active .ai-fstack-p { transition-delay: .12s; }

/* meta column */
.ai-fstack-meta { position: absolute; right: var(--ai-pad); bottom: clamp(40px, 6vw, 80px); z-index: 3; margin: 0;
  display: grid; grid-template-columns: auto auto; column-gap: clamp(14px, 2vw, 28px); row-gap: 9px; align-items: baseline;
  opacity: 0; transition: opacity .6s var(--ease) .2s; }
.ai-fstack-scene.is-active .ai-fstack-meta { opacity: 1; }
.ai-fstack-meta dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.ai-fstack-meta dd { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--ink); text-align: right; }

/* rail index */
.ai-fstack-rail { position: absolute; left: var(--ai-pad); top: 50%; transform: translateY(-50%); z-index: 4; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ai-fstack-rail li { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--line-strong); transition: color .4s var(--ease), transform .4s var(--ease); }
.ai-fstack-rail li.is-on { color: var(--gold); transform: translateX(6px); }

@media (max-width: 760px) {
  .ai-fstack-rail { display: none; }
  .ai-fstack-content { padding-left: 0; max-width: 100%; }
  .ai-fstack-t { font-size: clamp(38px, 12vw, 66px); line-height: 0.94; }
  .ai-fstack-meta { right: var(--gutter); bottom: clamp(28px, 8vw, 48px); }
}

/* static fallback — no pin / reduced motion: scenes stack vertically */
.ai-fstack--static .ai-fstack-stage { height: auto; }
.ai-fstack--static .ai-fstack-scenes { position: static; }
.ai-fstack--static .ai-fstack-scene { position: relative; inset: auto; min-height: 86vh; }
.ai-fstack--static .ai-fshape { transform: translate(-50%, -50%) scale(var(--s)) rotate(var(--r)); opacity: 0.16; transition: none; }
.ai-fstack--static .ai-fstack-num, .ai-fstack--static .ai-fstack-t, .ai-fstack--static .ai-fstack-p, .ai-fstack--static .ai-fstack-meta { opacity: 1; transform: none; transition: none; }

/* ============================================================
   PASS 15 (2026-06): THE FULL STACK — single flubber-morphed shape,
   scrubbed; content crossfades. Replaces the discrete per-scene blobs.
   ============================================================ */
.ai-fstack-shapes { display: none; }                 /* old per-scene blobs removed */

/* JS drives scene opacity + content translate during the scrubbed morph,
   so neutralise the binary is-active entrance from PASS 14 */
.ai-fstack-scene { visibility: visible; opacity: 0; transition: none; }
.ai-fstack-num, .ai-fstack-t, .ai-fstack-p { opacity: 1; transform: none; transition: none; }
.ai-fstack-meta { opacity: 1; transition: none; }

/* morph artwork sits behind the headline, offset right (per the figma) */
.ai-fstack-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.ai-fstack-morph { position: absolute; top: 50%; right: clamp(-40px, 1vw, 60px); transform: translateY(-50%);
  width: clamp(360px, 50vw, 780px); height: clamp(360px, 50vw, 780px); }
.ai-fstack-path { fill: url(#ai-fs-grad); opacity: 0.5; }
/* subtle diagonal "data stream" wash */
.ai-fstack-stream { position: absolute; top: 50%; left: 52%; width: 200%; height: 30%;
  transform: translate(-50%, -50%) rotate(-31deg); pointer-events: none; opacity: 0.55;
  background: linear-gradient(90deg, transparent 8%, rgba(58,81,135,0.12) 34%, rgba(200,16,46,0.10) 50%, rgba(185,148,46,0.14) 64%, transparent 92%);
  filter: blur(38px); }

@media (max-width: 760px) {
  .ai-fstack-morph { width: 118vw; height: 118vw; right: -22vw; top: 42%; }
  .ai-fstack-path { opacity: 0.07; }
}
.ai-fstack--static .ai-fstack-scene { opacity: 1; }
.ai-fstack--static .ai-fstack-morph { position: absolute; top: 50%; }

/* ============================================================
   PASS 17 (2026-06): highlight units — sui.io style, BASELINE-CORRECT.
   The unit is an inline-flex bar whose baseline is taken from the TEXT
   (.ai-cspan-w is inline-block + align-self:baseline), so highlighted
   words sit on the SAME baseline as surrounding copy (verified: 0px drift
   at both 66px and 31px). The text box is full line-height (1em) for
   baseline stability; the VISIBLE ink bar is inset --bar-pad top/bottom so
   it hugs the glyphs, and the icon square matches that visible height and
   is centered — giving a flush icon|bar with no gap. Punctuation stays
   outside the box. One geometry across gold / flag / seal.
   --ic-h MUST equal 1em - 2*--bar-pad so icon height == visible bar height.
   ============================================================ */
.ai-cspan {
  position: relative; display: inline-flex; align-items: center; gap: 0;
  white-space: nowrap; vertical-align: baseline; line-height: 1;
  --bar-pad: 0.1em; --ic-h: 0.8em;
}
/* every icon box: square, centered on the unit, sized to the visible ink bar */
.ai-cspan-ic, .ai-cspan-flag, .ai-cspan-seal {
  flex: none; align-self: center; width: var(--ic-h); height: var(--ic-h);
  display: grid; place-items: center; overflow: hidden; border-radius: 0;
  margin: 0; transform: none; opacity: 1;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold));
}
.ai-cspan-ic::before {
  content: ""; width: 56%; height: 56%; background: #fff; border-radius: 0;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.ai-cspan-flag img, .ai-cspan-seal img { width: 100%; height: 100%; object-fit: cover; }
.ai-cspan-seal img { object-fit: contain; padding: 14%; }
/* text box: inline-block so its real text baseline drives the unit baseline.
   Full 1em line-height (no centering) keeps the baseline natural; the ink
   bar lives in ::after, inset top/bottom so it hugs the text. Word starts
   BLACK (readable); white-on-ink wipes in L->R on reveal (--rev 0->1). */
.ai-cspan-w {
  position: relative; display: inline-block; align-self: baseline;
  line-height: 1; padding: 0 0.2em;
  background: transparent; color: var(--ink); font-weight: 400;
}
.ai-cspan-w::after {
  content: attr(data-text);
  position: absolute; left: 0; right: 0; top: var(--bar-pad); bottom: var(--bar-pad);
  display: flex; align-items: center; padding: 0 0.2em;
  white-space: nowrap; color: #fff; background: var(--ink);
  clip-path: inset(0 calc((1 - var(--rev, 1)) * 100%) 0 0);
}

/* ============================================================
   PASS 12 (2026-06): HERO rebuilt on a UnicornStudio WebGL strand
   (parallax bg) · dithered black overlay menu · brand w/o AI chip
   ============================================================ */

/* --- hero stage --- */
.ai-hero {
  position: relative; overflow: clip;
  min-height: 100vh; display: flex; align-items: stretch;
  padding: 0; background: #eeeeee;            /* matches the scene's base color */
}
/* CSS strand fallback (reduced-motion / no-WebGL): never a flat page */
.ai-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 72% at 88% 4%, rgba(216, 176, 71, 0.16), transparent 56%),
    radial-gradient(96% 74% at 6% 106%, rgba(58, 81, 135, 0.14), transparent 60%);
}
.ai-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* video host: a DEFINITE box (top/bottom overscan, not height-%) so it sizes
   correctly before metadata loads — the old height:112% on a <video> collapsed
   to the intrinsic height and left a gray gap. ~9% overscan each side gives the
   dedicated JS parallax room to travel without ever revealing an edge. */
/* explicit width/height: a <video>/<img> is a *replaced* element, so it ignores
   the right/bottom insets and falls back to its intrinsic pixel size — which left
   the strand boxed into a corner on wide screens. A definite size + object-fit:cover
   makes it fill the hero on every viewport. */
.ai-hero-bg-canvas { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; transform: translateZ(0); }
.ai-hero-bg-canvas canvas { display: block; }
/* sizing comes from the .ai-hero-bg-canvas inset box above (both classes are on
   the same <video>); here we only set how the frame fills it. */
.ai-hero-video { object-fit: cover; object-position: center; display: block; }

/* --- hero content --- */
.ai-hero-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(104px, 16vh, 188px); padding-bottom: clamp(48px, 9vh, 110px);
}
.ai-hero-lead-row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 2vw, 30px); width: 100%; text-align: center;
}
/* gradient-filled emblem (shapes.gallery Shape 41) via mask — same technique as .ai-cspan-ic */
.ai-hero-mark {
  flex: none; display: block; width: clamp(44px, 5.4vw, 84px); aspect-ratio: 1 / 1;
  background: var(--ai-grad);
  -webkit-mask: url("/assets/shapes-gallery/Shape%2041.svg") center / contain no-repeat;
          mask: url("/assets/shapes-gallery/Shape%2041.svg") center / contain no-repeat;
}
.ai-hero-h {
  margin: 0; max-width: 18ch; color: var(--ink); text-align: center;
  font-weight: 400; line-height: 0.92; letter-spacing: -0.05em; white-space: normal;
  font-size: clamp(40px, 8vw, 110px);
}
/* hidden until the typewriter takes over (JS sets it visible); avoids a flash of
   the full title. If JS/anim is unavailable the safety net drops .js → visible. */
html.js .ai-hero-h[data-hero-type] { opacity: 0; }
@media (max-width: 760px) {
  .ai-hero-inner { padding-top: clamp(84px, 14vh, 124px); padding-bottom: clamp(40px, 8vh, 72px); }
  .ai-hero-lead-row { flex-direction: column; gap: clamp(12px, 3vw, 22px); }
  .ai-hero-h { font-size: clamp(34px, 11vw, 60px); }
}

/* --- overlay menu: white type on a black dithered field --- */
.ai-menu {
  background-color: #06070b;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.16) 0.6px, transparent 0.8px),
    radial-gradient(rgba(255, 255, 255, 0.07) 0.6px, transparent 0.8px);
  background-size: 4px 4px, 4px 4px;
  background-position: 0 0, 2px 2px;
}
.ai-menu nav a { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.14); }
.ai-menu nav a:hover { color: var(--gold-lt); }
.ai-menu .ai-btn { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.55); }
.ai-menu .ai-btn:hover { color: #fff; border-color: transparent; }

/* header recedes while the menu is open so the dither reads full-bleed */
.ai-page.is-menu .ai-head { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ai-page.is-menu .ai-brand-wm { color: #fff; }
.ai-page.is-menu .ai-menu-btn span { background: #fff; }
.ai-page.is-menu .ai-head-right .ai-locale,
.ai-page.is-menu .ai-nav-clock,
.ai-page.is-menu .ai-head-right .ai-btn--sm { opacity: 0; visibility: hidden; }

/* ============================================================
   PASS 13 (2026-06): hero re-center + real logomark · pillar
   alignment · bridge = full-screen blackhole video · centered
   tree head/foot · full-stack split + horizontal dark cards
   ============================================================ */

/* --- hero: real Skylance logomark (revert gradient shape) + true vertical center --- */
.ai-hero-mark { -webkit-mask: none; mask: none; background: none; aspect-ratio: auto; width: clamp(44px, 5.4vw, 84px); }
.ai-hero-mark img { width: 100%; height: auto; display: block; }
.ai-hero-inner { min-height: 100vh; justify-content: center;
  padding-top: clamp(88px, 12vh, 140px); padding-bottom: clamp(72px, 12vh, 140px); }

/* --- pillars: equalize the three columns (icon box + baseline) --- */
.ai-pillars--titles { align-items: start; }
.ai-pillars--titles li { align-items: flex-start; }
.ai-pillars--titles .ai-pillar-ic { width: 34px; height: 34px; margin-bottom: clamp(14px, 1.6vw, 20px); place-items: center; }
/* every glyph (incl. the Texas star) fills the same 34px box, top/left aligned —
   so all three columns share one identical icon baseline. */
.ai-pillars--titles .ai-pillar-ic::before,
.ai-pillars--titles .ai-pillar-ic--star::before { width: 100%; height: 100%; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: left center; mask-position: left center; }

/* --- BRIDGE: full-screen statement over the blackhole video, white type --- */
.ai-bridge { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 0; padding: clamp(80px, 12vh, 140px) 0; background: #04060a; color: #fff; text-align: center; }
.ai-bridge-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ai-bridge-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* segue: white melts into the dark video on the way in, and back out on the way down */
.ai-bridge-fade { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; height: clamp(120px, 24vh, 280px); }
.ai-bridge-fade--top { top: 0; background: linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0) 100%); }
.ai-bridge-fade--bot { bottom: 0; background: linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0) 100%); }
.ai-bridge .ai-wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.ai-bridge-flag { display: block; width: clamp(48px, 5.2vw, 74px); margin: 0 auto clamp(20px, 2.6vw, 34px); }
.ai-bridge-flag img { width: 100%; height: auto; display: block; filter: none; opacity: 0.95; }
.ai-bridge-h { color: #fff; max-width: 22ch; }
.ai-bridge-x { color: var(--gold-lt); }

/* --- compliance tree: centered head + foot --- */
.ai-tree-head { text-align: center; }
.ai-tree-head .ai-eyebrow { margin-left: auto; margin-right: auto; }
.ai-tree-foot { text-align: center; }
/* leaves: uniform reveal after the connectors draw — the old staggered delays on
   rows 2–5 only made the MIDDLE leaves lag (read as a reveal 'cut off' mid-list). */
.ai-tree.is-drawn .ai-tree-leaf,
.ai-tree.is-drawn .ai-tree-leaf:nth-child(2),
.ai-tree.is-drawn .ai-tree-leaf:nth-child(3),
.ai-tree.is-drawn .ai-tree-leaf:nth-child(4),
.ai-tree.is-drawn .ai-tree-leaf:nth-child(5) { transition-delay: 0.34s; }

/* ============================================================
   FULL STACK — sticky intro (left) + horizontal dark card track (right)
   ============================================================ */
.ai-fstack { background: #fff; position: relative; }
.ai-fstack-pin { position: relative; }
.ai-fstack-split { display: grid; grid-template-columns: minmax(280px, 0.8fr) 1.2fr; gap: clamp(28px, 4vw, 72px);
  align-items: center; min-height: 100vh; padding: clamp(92px, 12vh, 140px) 0 clamp(60px, 9vh, 110px); }
.ai-fstack-intro-col { align-self: center; max-width: 46ch; }
.ai-fstack-intro-col .ai-stack-h { text-align: left; }
.ai-fstack-count { display: flex; align-items: baseline; gap: 9px; margin: clamp(24px, 3vw, 44px) 0 0;
  font-family: var(--mono); font-size: clamp(12px, 1vw, 14px); letter-spacing: 0.1em; color: var(--faint); }
.ai-fstack-count b { font-family: var(--sans); font-size: clamp(32px, 4vw, 54px); font-weight: 600; letter-spacing: -0.03em; color: var(--gold); }

.ai-fstack-viewport { position: relative; overflow: hidden; }
.ai-fstack-track { display: flex; gap: clamp(16px, 1.5vw, 24px); width: max-content; list-style: none; margin: 0; padding: 6px; }
.ai-fcard { flex: none; width: clamp(270px, 29vw, 372px); min-height: clamp(348px, 46vh, 444px);
  display: flex; flex-direction: column; padding: clamp(22px, 2.1vw, 34px); color: #fff;
  background: linear-gradient(165deg, #1b2845 0%, #0c1424 100%);
  border: 1px solid rgba(255, 255, 255, 0.09); border-top: 3px solid var(--gold);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-top-color .5s var(--ease); }
.ai-fcard.is-active { transform: translateY(-8px); box-shadow: 0 40px 72px -42px rgba(4, 6, 10, 0.8); border-top-color: var(--gold-lt); }
.ai-fcard-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ai-fcard-n { font-family: var(--sans); font-size: clamp(38px, 3.8vw, 60px); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--gold); }
.ai-fcard-layer { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.ai-fcard-t { font-family: var(--sans); font-size: clamp(21px, 1.85vw, 29px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; color: #fff; margin: clamp(22px, 2.4vw, 38px) 0 0; }
.ai-fcard-p { font-family: var(--sans); font-size: clamp(13.5px, 1vw, 15px); line-height: 1.55; color: rgba(255, 255, 255, 0.72); margin: 13px 0 0; }
.ai-fcard-role { margin-top: auto; padding-top: 20px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-lt); }

/* native fallback (mobile / reduced motion): side-scroll, no pin */
.ai-fstack-pin--native .ai-fstack-split { display: block; min-height: 0; }
.ai-fstack-pin--native .ai-fstack-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: clamp(26px, 5vw, 44px); }
.ai-fstack-pin--native .ai-fstack-track { padding-bottom: 14px; }
@media (max-width: 820px) {
  .ai-fstack-split { grid-template-columns: 1fr; }
  .ai-fcard { width: 80vw; max-width: 360px; min-height: 320px; }
}

/* ============================================================
   PASS 14 (2026-06): hero true-viewport center · bridge polish
   (no top fade, B&W flag, white ×, softer bottom fade) · full-stack
   intro sized as supporting copy (was a 42px headline)
   ============================================================ */

/* hero: pull up under the translucent sticky header so 100vh centering lands
   on the real viewport center (header height measured into --ai-head-h by JS). */
.ai-hero { margin-top: calc(-1 * var(--ai-head-h, 64px)); }

/* bridge: flag subdued B&W · multiplication sign white · longer, gentler exit fade */
.ai-bridge-flag img { filter: grayscale(1) brightness(1.15) contrast(0.9); opacity: 0.62; }
.ai-bridge-x { color: #fff; }
.ai-bridge-fade--top { display: none; }
.ai-bridge-fade--bot {
  height: clamp(240px, 46vh, 560px);
  background: linear-gradient(to top,
    #ffffff 0%, rgba(255,255,255,0.92) 12%, rgba(255,255,255,0.58) 36%,
    rgba(255,255,255,0.22) 64%, rgba(255,255,255,0) 100%);
}

/* full-stack: the intro is a lead-in, not a hero — size it as supporting copy
   so it balances the cards instead of dominating the frame. */
.ai-fstack-intro-col .ai-stack-h {
  font-size: clamp(19px, 1.75vw, 27px); font-weight: 500; line-height: 1.34;
  letter-spacing: -0.02em; max-width: 30ch; margin-top: clamp(12px, 1.4vw, 18px);
}

/* ============================================================
   PASS 15 (2026-06): hero mono subline + scroll cue · bridge fade
   trimmed to reveal the nova horizon · tree connectors fully joined
   · tree typing as a scrubbed (forward/back) reveal · full-stack
   uses the homepage sliding-card stack (premium blue, no gold)
   ============================================================ */

/* hero: subdued uppercase mono subline + animated scroll indicator */
.ai-hero-tagline {
  margin: clamp(18px, 2.4vw, 30px) 0 0; text-align: center;
  font-family: var(--mono); font-size: clamp(10.5px, 0.95vw, 13px);
  letter-spacing: 0.24em; text-transform: uppercase;
  /* prism-rainbow text fill — echoes the eyebrow labels' accent */
  background: linear-gradient(90deg, #ff3d57, #ff9500, #e0b400, #28b463, #0acbff, #2745ff, #8a30e8, #ec12b4);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ai-hero-scroll {
  position: absolute; left: 50%; bottom: clamp(20px, 4vh, 40px); transform: translateX(-50%);
  z-index: 3; display: inline-flex; flex-direction: column; align-items: center; gap: 9px;
  text-decoration: none; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--faint);
}
.ai-hero-scroll i { position: relative; width: 1px; height: 40px; background: rgba(10, 12, 22, 0.16); overflow: hidden; }
.ai-hero-scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 45%; background: var(--ink); animation: ai-scrolldn 1.9s var(--ease) infinite; }
@keyframes ai-scrolldn { 0% { transform: translateY(-120%); } 70%, 100% { transform: translateY(260%); } }
@media (prefers-reduced-motion: reduce) { .ai-hero-scroll i::after { animation: none; } }

/* bridge: trim the exit fade so the bottom of the nova horizon stays visible
   (the horizon is bright, so it blends into the white section below anyway) */
.ai-bridge-fade--bot {
  height: clamp(70px, 9vh, 130px);
  background: linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0.62) 38%, rgba(255,255,255,0) 100%);
}

/* tree: bus must reach the OUTER column centers (drops sit at each cell center).
   cell-center offset from the edge = (100% - 3·gap) / 8 for a 4-up grid. */
.ai-tree-branches { --tree-gap: clamp(16px, 2vw, 34px); gap: var(--tree-gap); }
.ai-tree-bus { left: calc((100% - 3 * var(--tree-gap, 28px)) / 8); right: calc((100% - 3 * var(--tree-gap, 28px)) / 8); }

/* tree typing reveal: keep leaves visible (bullets/flags) while text scrubs in */
/* JS owns leaf opacity during the scramble — kill the staggered is-drawn delays
   so the fade tracks scroll instead of lagging behind it (the reveal conflict). */
.ai-tree--type .ai-tree-leaf { transform: none !important; transition: opacity 0.18s linear !important; }

/* full-stack: drop the gold accent in the intro for the premium blue accent */
.ai-fstack { padding-top: var(--ai-pad); }
.ai-fstack .ai-dim2 { color: var(--blue); }
.ai-fstack .sit-intro { margin-bottom: clamp(34px, 4.6vw, 64px); }

/* ============================================================
   PASS 16 (2026-06): bridge vertically balanced · full-stack =
   fixed intro LEFT + sliding card stack RIGHT · icon marks in a
   dark gunmetal→gold gradient
   ============================================================ */

/* bridge: bias the statement up off the bright horizon so it reads centered */
.ai-bridge { padding-top: clamp(56px, 8vh, 110px); padding-bottom: clamp(120px, 18vh, 240px); }

/* full-stack: intro fixed on the left, cards slide/stack in the space to its right */
.ai-fstack .sit-pin { --sit-cw: clamp(300px, 30vw, 460px); }
/* the full-stack copy runs longer than the original labels; the densest card
   (security) is the binding case, worst on short-height viewports where the
   fixed card height (vh-based) shrinks under the content. Give ai cards a touch
   more height and a smaller content anchor so nothing spills past the bottom
   edge. Scoped to ai-fstack — the homepage stack is unaffected. */
.ai-fstack .sit-pin--live .sit-card { height: min(88vh, 780px); }
.ai-fstack .sit-pin--live .sit-content { margin-top: clamp(80px, 13vh, 180px); }
.ai-fstack-aside { position: relative; max-width: 460px; padding-bottom: clamp(20px, 4vw, 30px); z-index: 6; }
.sit-pin--live .ai-fstack-aside {
  position: absolute; top: 50%; transform: translateY(-50%); margin: 0; padding: 0;
  left: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter)));
  width: clamp(280px, 30vw, 420px);
}
.ai-fstack-aside .ai-stack-h {
  font-size: clamp(20px, 1.9vw, 30px); line-height: 1.28; letter-spacing: -0.025em;
  margin-top: clamp(12px, 1.4vw, 18px); max-width: none;
}
.ai-fstack .ai-dim2 { color: #9a7320; }                 /* tie the highlight to the marks */

/* icon marks: dark gunmetal → gold gradient (background-image only, so the base
   210% size + flow animation stay; the purple glint is dropped) */
.ai-fstack .sit-icon {
  background-image: linear-gradient(135deg, #20304f 0%, #6e5d39 52%, #b9942e 100%);
  animation: glyphFlow var(--flow-dur, 9s) linear infinite;
}
.ai-fstack .sit-num { color: var(--gun); }

/* ============================================================
   PASS 17 (2026-06): eyebrow light-rainbow chip · dark nav like
   the homepage + contrasted CTA · stronger hero parallax overscan
   · contact = two-column (copy + form) like the contact page
   ============================================================ */

/* eyebrow chips: light rainbow gradient wash (homepage flavor) */
.ai-eyebrow {
  background: linear-gradient(90deg,
    rgba(255, 61, 87, 0.32), rgba(255, 149, 0, 0.30), rgba(224, 180, 0, 0.28),
    rgba(40, 180, 99, 0.28), rgba(10, 203, 255, 0.34), rgba(39, 69, 255, 0.32),
    rgba(138, 48, 232, 0.32), rgba(236, 18, 180, 0.32));
}

/* dark navbar (matches the main homepage), white wordmark, contrasted CTA */
.ai-head {
  background: rgba(8, 10, 16, 0.82);
  backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ai-brand-wm { color: #fff; }
.ai-locale i { color: rgba(255, 255, 255, 0.4); }
.ai-menu-btn span { background: #fff; }
.ai-head .ai-btn--sm { background: #fff; color: var(--ink); border-color: #fff; }
.ai-head .ai-btn--sm:hover { color: #fff; border-color: transparent; }

/* stronger hero parallax: widen the overscan so the bigger travel never reveals an edge */
.ai-hero-bg-canvas { top: -16%; height: 132%; width: 100%; }

/* contact: two-column copy + form */
.ai-contact.contact-sec { background: #fff; text-align: left; }
.ai-contact-head { margin-bottom: clamp(28px, 3.4vw, 52px); text-align: left; }
.ai-contact .contact-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 5vw, 84px); align-items: start; }
.ai-contact .contact-copy .h-md { margin: 0 0 18px; }
@media (max-width: 900px) { .ai-contact .contact-wrap { grid-template-columns: 1fr; gap: 40px; } }

/* ============================================================
   PASS 18 (2026-06): header weights · technical bordered grid
   ============================================================ */

/* every content heading H2 and below renders at weight 400 (the H1 hero
   keeps its own weight). Scoped to <main> so the shared footer is untouched. */
.ai-page main :is(h2, h3, h4, h5, h6) { font-weight: 400 !important; }

/* ------------------------------------------------------------
   TECHNICAL BORDERED GRID — reusable "rb" (rounded-border) shapes
   Thin hairline borders + a single small radius turn plain divs into
   precise, engineered cards. Restrained by design: structure, not
   decoration. Two pieces:
     .rb-grid + .rb-cell  → a ruled grid (shared single hairlines)
     .rb-card             → a standalone bordered shape
   Stronger variant: add --tech for an accent top-line + firmer border.
   ------------------------------------------------------------ */

/* RULED GRID: 1px gap over a line-coloured backplate paints one shared
   hairline between every cell — no doubled borders. The outer frame is
   rounded and clips the cells, so the whole block reads as one instrument. */
.rb-grid {
  display: grid;
  grid-template-columns: repeat(var(--rb-cols, 4), minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.rb-cell {
  background: #fff;
  padding: clamp(20px, 2.2vw, 32px);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(26px, 3.5vw, 48px);
}
/* a short spec value (vs the big .rb-stat figure) */
.rb-spec { margin: 0; font-size: clamp(16px, 1.5vw, 20px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
@media (max-width: 1000px) { .rb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .rb-grid { grid-template-columns: 1fr; } }

/* STANDALONE CARD: same border language for a single shape. */
.rb-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: clamp(20px, 2.2vw, 30px);
}

/* tiny mono registration label (top-corner spec text) + big stat figure,
   to match the engineered stat-card look without extra ornament. */
.rb-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint);
}
.rb-stat { font-size: clamp(40px, 4.4vw, 68px); font-weight: 400; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }

/* STRONGER TECH VARIANT: firmer border + a 2px gradient accent line pinned
   to the top edge (reads as an "active"/instrumented panel). Keep it to one
   card or one row — used everywhere it stops feeling precise. */
.rb-card--tech, .rb-cell--tech { position: relative; border-color: var(--line-strong); }
.rb-card--tech::before, .rb-cell--tech::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  background: var(--ai-grad);
}
.rb-card--tech { border-radius: 12px; overflow: hidden; }

/* optional corner registration ticks — restrained accent for a hero card */
.rb-ticks { position: relative; }
.rb-ticks::before, .rb-ticks::after {
  content: ""; position: absolute; width: 7px; height: 7px; pointer-events: none;
  border: 1px solid var(--line-strong);
}
.rb-ticks::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.rb-ticks::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

/* ------------------------------------------------------------
   TRIAD — 3-up numbered process grid: a top rule with number
   badges straddling it, dashed vertical dividers, mono titles,
   plain-language body. Engineered and restrained.
   ------------------------------------------------------------ */
.ai-triad {
  list-style: none; margin: clamp(40px, 5vw, 74px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}
.ai-triad-col {
  position: relative;
  padding: clamp(40px, 4.4vw, 64px) clamp(22px, 2.4vw, 40px) clamp(6px, 1vw, 12px);
  border-left: 1px dashed var(--line-strong);
}
.ai-triad-col:first-child { border-left: 0; padding-left: 0; }
/* number badge sits centered on the top rule; its white field masks the line */
.ai-triad-n {
  position: absolute; top: 0; left: clamp(22px, 2.4vw, 40px); transform: translateY(-50%);
  background: #fff; padding: 3px 12px 3px 0;
  font-family: var(--mono); font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; color: var(--ink);
}
.ai-triad-col:first-child .ai-triad-n { left: 0; }
.ai-triad-n i { font-style: normal; color: var(--gold); }
.ai-triad-k {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  font-family: var(--mono); font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.ai-triad-p { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.52; color: var(--dim); max-width: 38ch; }
@media (max-width: 860px) {
  .ai-triad { grid-template-columns: 1fr; border-top: 0; gap: 0; }
  .ai-triad-col {
    border-left: 0; padding: clamp(40px, 9vw, 56px) 0 clamp(8px, 2vw, 14px);
    border-top: 1px dashed var(--line-strong);
  }
  .ai-triad-col .ai-triad-n { left: 0; }
}

/* ============================================================
   PASS 19 (2026-06): hero-grade Talk CTA · homepage curtain menu
   re-skinned dark + dithered · prism eyebrows/tagline
   ============================================================ */

/* header CTA = the homepage hero button (.btn--light), sized for the bar */
.ai-head .btn { padding: 11px 20px; font-size: 11px; gap: 11px; }
.ai-head .btn svg, .ai-head .btn .btn-ico { width: 13px; height: 13px; }
/* on phones the bar collapses to the hamburger only (matches the homepage) */
@media (max-width: 760px) { .ai-head .btn { display: none; } }

/* header recedes while the curtain is open (covered by it anyway) */
.ai-head { transition: transform 0.4s var(--ease), opacity 0.4s var(--ease); }
body.curtain-open .ai-head { opacity: 0; pointer-events: none; }

/* curtain re-skin: keep the homepage structure + reveal timeline, but a dark
   dithered field (the microsite's thatched bg) with light type. */
.ai-page .curtain { color: #fff; }
.ai-page .curtain-cols i {
  background-color: #06070b;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.16) 0.6px, transparent 0.8px),
    radial-gradient(rgba(255, 255, 255, 0.07) 0.6px, transparent 0.8px);
  background-size: 4px 4px, 4px 4px;
  background-position: 0 0, 2px 2px;
  border-right-color: rgba(255, 255, 255, 0.05);
}
.ai-page .curtain-tag { color: rgba(255, 255, 255, 0.5); }
.ai-page .curtain-close { color: #fff; }
.ai-page .curtain-close:hover { color: var(--gold-lt); }
.ai-page .curtain-link { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.12); }
.ai-page .curtain-link .ci { color: rgba(255, 255, 255, 0.4); }
.ai-page .curtain-link:hover .ct { color: var(--gold-lt); }
.ai-page .curtain-feature { border-color: rgba(255, 255, 255, 0.14); color: #fff; }
.ai-page .curtain-feature-eyebrow { color: var(--gold-lt); }
.ai-page .curtain-meta { color: rgba(255, 255, 255, 0.7); }
.ai-page .curtain-mail { color: #fff; background-image: linear-gradient(var(--gold-lt), var(--gold-lt)); }
.ai-page .curtain-mail:hover { color: var(--gold-lt); }
.ai-page .curtain-loc { color: rgba(255, 255, 255, 0.5); }
.ai-page .curtain-social a { color: rgba(255, 255, 255, 0.7); }
.ai-page .curtain-social a:hover { color: var(--gold-lt); }