/* ============================================================
   PHAROS LUMEN - retrofit design system (2026 rebuild)
   "Daylight" token set (Gabriel's pick, 2026-07-17): light
   blue-tinted canvas, azure primary + sky secondary, white
   surfaces, deep harbor navy reserved for rhythm sections
   (method, explorer, footer) and the calculator result card.
   No dark page grounds (Gabriel: avoid dark; loves blue+white).
   Motion tokens mirror the Terminal teardown
   (back-office/docs/terminal-retrofit/terminal-teardown.md).
   Loaded by the rebuilt index.html only; about/privacy still
   run on pharos.css until their restyle (M4).
============================================================ */

/* ---------- self-hosted fonts (latin subsets, variable) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/geist-mono-var.woff2') format('woff2');
}
@font-face {
  /* brand wordmark face (Gabriel's pick, 2026-07-17) */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/manrope-var.woff2') format('woff2');
}
@font-face {
  /* eyebrow face, copied from the old site per Gabriel (2026-07-17):
     the one serif voice allowed back into the Daylight system */
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/cinzel-var.woff2') format('woff2');
}

/* ---------- tokens ---------- */
:root {
  /* light grounds */
  --canvas: #f4f8fc;
  --surface: #ffffff;
  --tint: #eaf2f9;

  /* ink on light */
  --ink: #142433;
  --ink-2: #43607a;
  --ink-3: #566f85;

  /* hairlines on light */
  --line: rgba(20, 36, 51, 0.12);
  --line-2: rgba(20, 36, 51, 0.22);

  /* the blues */
  --azure: #2278bd;        /* primary: buttons, links, key numerals */
  --azure-deep: #1b629c;   /* hover/pressed */
  --sky: #4a9ad2;          /* secondary: alternating numerals, washes, graphics */
  --sky-ink: #33739e;      /* text-safe secondary: eyebrows, labels */
  --azure-soft: rgba(34, 120, 189, 0.10);

  /* deep harbor navy (rhythm sections only, never the page ground) */
  --deep: #10334d;
  --deep-2: #16405e;
  --deep-text: #e9f3fb;
  --deep-text-2: rgba(233, 243, 251, 0.74);
  --deep-text-3: rgba(233, 243, 251, 0.56);
  --deep-line: rgba(233, 243, 251, 0.15);
  --sky-deep: #8ec8ee;     /* accent on deep ground */

  /* hero sunlight washes */
  --wash1: rgba(93, 178, 230, 0.22);
  --wash2: rgba(150, 214, 255, 0.20);
  --wash3: rgba(34, 120, 189, 0.10);

  /* semantic (forms only) */
  --ok: #22c55e;
  --err: #e05252;

  /* type: all-Manrope display per Gabriel (Fraunces fully retired 2026-07-17) */
  --f-display: 'Manrope', system-ui, sans-serif;
  --f-brand: 'Manrope', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* motion */
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --t-micro: 0.2s;
  --t-hover: 0.3s;
  --t-section: 0.9s;

  /* structure */
  --radius: 8px;
  --radius-card: 14px;
  --content: 1200px;
  --content-narrow: 760px;
  --pad-x: clamp(20px, 5vw, 48px);
  --pad-section: clamp(72px, 10vw, 140px);
}

/* ---------- reset-adjacent base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--azure); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--azure); color: #ffffff; }

/* ---------- section scaffolding ---------- */
.sec { padding: var(--pad-section) var(--pad-x); }
.sec-inner { max-width: var(--content); margin: 0 auto; }
.on-aurora {
  /* Aurora Light (Gabriel's pick): the hero's sunlight wash carried
     through the rhythm sections so the page shares one atmosphere */
  background: #fdfeff;
  position: relative;
  overflow: hidden;
}
.on-aurora::before {
  content: '';
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(45% 60% at 15% 20%, rgba(93, 178, 230, 0.16), transparent 70%),
    radial-gradient(50% 55% at 85% 30%, rgba(150, 214, 255, 0.18), transparent 72%),
    radial-gradient(60% 50% at 50% 100%, rgba(34, 120, 189, 0.08), transparent 75%);
  animation: sun-drift 18s ease-in-out infinite alternate;
}
.on-aurora > * { position: relative; z-index: 1; }

/* eyebrow + headings. The shape is copied verbatim from the old
   pharoslumen.com eyebrow (Gabriel, 2026-07-17: "not even inspiration,
   copy it") - Cinzel caps over a full-width fade-gradient hairline -
   resized to double and recolored from amber to the Daylight blues. */
.eyebrow {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sky-ink);
  display: inline-block;
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 22px;
}
.eyebrow::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 120, 189, 0.5), transparent);
}
/* hero variant, also copied from the old site: flanking gradient lines
   either side instead of the underline */
.hero .eyebrow {
  font-size: clamp(13px, 1.9vw, 20px);
  letter-spacing: 0.32em;
  padding: 0 28px 0;
  margin-bottom: 26px;
}
.hero .eyebrow::before,
.hero .eyebrow::after {
  content: '';
  position: absolute;
  top: 50%;
  bottom: auto;
  width: 52px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 120, 189, 0.5), transparent);
}
.hero .eyebrow::before { right: 100%; left: auto; }
.hero .eyebrow::after  { left: 100%; right: auto; }
@media (max-width: 600px) {
  .hero .eyebrow::before, .hero .eyebrow::after { display: none; }
  .hero .eyebrow { padding: 0; }
}

.h-stmt {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6.4vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  margin: 0 0 26px;
  text-wrap: balance;
}
.h-stmt em { font-style: normal; color: var(--azure); }
.h-sec {
  font-family: var(--f-display);
  font-weight: 680;
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.sec-sub {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0;
}
.sec-head { max-width: var(--content-narrow); margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.centered .sec-sub { margin-left: auto; margin-right: auto; }

/* mono meta text */
.meta {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: 15px 26px;
  min-height: 48px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  background: var(--azure);
  color: #ffffff;
  transition: transform var(--t-micro) var(--ease-sine), box-shadow var(--t-hover) var(--ease-sine), background var(--t-micro);
}
.btn:hover { transform: translateY(-1px); background: var(--azure-deep); box-shadow: 0 10px 28px rgba(34, 120, 189, 0.30); }
.btn:active { transform: translateY(0); }

.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(20, 36, 51, 0.05);
}
.btn-ghost:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--azure), 0 8px 22px rgba(20, 36, 51, 0.10); }

.link-quiet {
  color: var(--azure);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  border-bottom: 1px solid rgba(34, 120, 189, 0.4);
  padding: 10px 0 2px;
  margin: -10px 0 0;
  transition: border-color var(--t-micro) var(--ease-sine);
}
.link-quiet:hover { border-color: var(--azure); }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 68px;
  padding: 0 var(--pad-x);
  background: rgba(244, 248, 252, 0);
  border-bottom: 1px solid transparent;
  transition: background var(--t-hover) var(--ease-sine), border-color var(--t-hover) var(--ease-sine), height var(--t-hover) var(--ease-sine);
}
.nav.scrolled {
  background: rgba(244, 248, 252, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  height: 60px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--f-brand);
  font-weight: 660;
  font-size: 1.06rem;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav-link {
  font-size: 0.9rem;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--t-micro) var(--ease-sine);
}
.nav-link:hover { color: var(--ink); }
.nav-cta {
  font-size: 0.86rem;
  padding: 10px 18px;
  min-height: 40px;
}
.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 14px 12px;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--t-micro) var(--ease-sine), opacity var(--t-micro);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 140px var(--pad-x) 90px;
  overflow: hidden;
}
.hero::before {
  /* daylight wash: drifting sunlight in azure and sky */
  content: '';
  position: absolute;
  inset: -25% -15%;
  pointer-events: none;
  background:
    radial-gradient(42% 55% at 22% 18%, var(--wash1), transparent 70%),
    radial-gradient(48% 60% at 80% 12%, var(--wash2), transparent 72%),
    radial-gradient(55% 50% at 55% 95%, var(--wash3), transparent 75%);
  animation: sun-drift 14s ease-in-out infinite alternate;
}
@keyframes sun-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--content);
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.hero .h-stmt { max-width: 17ch; margin-left: auto; margin-right: auto; }
.hero-sub {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 66ch;
  margin: 0 auto 38px;
}
.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.hero-meta {
  margin-top: 54px;
  display: flex;
  justify-content: center;
  gap: 14px 34px;
  flex-wrap: wrap;
}
.hero-meta .meta { display: inline-flex; align-items: center; gap: 9px; }
.hero-meta .meta::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--azure);
}

/* ---------- capability band (marquee) ---------- */
.band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--tint);
  padding: 16px 0;
  overflow: hidden;
  position: relative;
}
.band::before, .band::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 10%;
  z-index: 2; pointer-events: none;
}
.band::before { left: 0; background: linear-gradient(90deg, var(--tint), transparent); }
.band::after { right: 0; background: linear-gradient(270deg, var(--tint), transparent); }
.band-track {
  display: flex;
  width: max-content;
  animation: band-scroll 46s linear infinite;
}
.band:hover .band-track { animation-play-state: paused; }
.band-item {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  white-space: nowrap;
  padding: 0 26px;
}
.band-item::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sky);
  margin-left: 26px;
}
@keyframes band-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- proof strip ---------- */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
/* Wide screens leave ~300px unused either side of the 1200px column, so the
   strip reaches past it to give the longest stat ("AI, end to end", 14 chars)
   a single line at full size. 1500px is the floor where 1400 + page padding
   always fits, so no viewport math and no scrollbar overflow risk. */
@media (min-width: 1500px) {
  .proof-grid {
    width: 1400px;
    margin-left: calc((1400px - 100%) / -2);
  }
}
.proof-cell {
  background: var(--surface);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  container-type: inline-size;
}
.proof-num {
  font-family: var(--f-mono);
  /* sized off the cell, not the viewport: the stat then fits its own cell at
     every width instead of wrapping to two lines in the middle range.
     10.4cqi fits the longest stat ("AI, end to end", 14 chars) in the
     fixed 4-col cells; raise it only if every stat shortens again. */
  font-size: clamp(1.5rem, 10.4cqi, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}
/* the widened 1400px strip's cells can carry near-full-size type again */
@media (min-width: 1500px) {
  .proof-num { font-size: clamp(1.5rem, 12cqi, 2.4rem); }
}
.proof-cell:nth-child(odd) .proof-num { color: var(--azure); }
.proof-cell:nth-child(even) .proof-num { color: var(--sky); }
.proof-label { font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; }
.proof-foot {
  margin-top: 22px;
  font-size: 0.9rem;
  color: var(--ink-3);
  text-align: center;
}
.proof-foot a { color: var(--ink-2); }

/* ---------- service cards ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
}
.svc-grid.ai-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--t-hover) var(--ease-expo), box-shadow var(--t-hover) var(--ease-sine), border-color var(--t-hover) var(--ease-sine);
}
.svc-card:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 120, 189, 0.45);
  box-shadow: 0 16px 40px rgba(20, 36, 51, 0.10);
}
.svc-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky-ink);
}
.svc-title {
  font-family: var(--f-display);
  font-weight: 660;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.svc-body { font-size: 0.94rem; line-height: 1.7; color: var(--ink-2); flex: 1; }
.svc-foot {
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--azure-soft);
  color: var(--azure);
}
.svc-fallback { text-align: center; margin: 34px auto 0; font-size: 0.95rem; color: var(--ink-2); }

/* trigger-button styled as inline link (contact widget hooks onto .contact-trigger) */
.trigger-link {
  background: none;
  border: none;
  padding: 12px 0;
  margin: -12px 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  color: var(--azure);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 120, 189, 0.35);
}
.trigger-link:hover { border-bottom-color: var(--azure); }

/* ---------- drag calculator ---------- */
.calc {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.calc-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.calc-field label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.calc-field .calc-hint { font-weight: 400; color: var(--ink-3); font-size: 0.84rem; }
.calc-row { display: flex; align-items: center; gap: 16px; }
.calc-row input[type="range"] {
  flex: 1;
  accent-color: var(--azure);
  min-height: 44px;
}
.calc-val {
  font-family: var(--f-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  /* holds the widest readout ("500 people") so the slider does not resize
     underneath the thumb while it is being dragged */
  min-width: 106px;
  text-align: right;
}
.calc-result {
  position: sticky;
  top: 84px;
  overflow: hidden;
  background: #fdfeff;
  color: var(--ink);
  border: 1px solid rgba(34, 120, 189, 0.30);
  border-radius: var(--radius-card);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 14px 40px rgba(34, 120, 189, 0.12);
}
.calc-result::before {
  content: '';
  position: absolute;
  /* vertical bleed only: side bleed was always clipped by the card's
     overflow:hidden, but Chromium's phone viewport algorithm still
     counted it and stretched the layout to ~480px (hamburger pushed
     off-screen). Design review 2026-07-17, error #353. */
  inset: -30% 0;
  pointer-events: none;
  background:
    radial-gradient(50% 60% at 18% 15%, rgba(93, 178, 230, 0.20), transparent 70%),
    radial-gradient(55% 60% at 85% 25%, rgba(150, 214, 255, 0.22), transparent 72%),
    radial-gradient(60% 55% at 50% 105%, rgba(34, 120, 189, 0.10), transparent 75%);
  animation: sun-drift 16s ease-in-out infinite alternate;
}
.calc-result > * { position: relative; z-index: 1; }
.calc-result .eyebrow { color: var(--sky-ink); margin-bottom: 8px; }
.calc-total {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  letter-spacing: -0.02em;
  color: var(--azure);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.calc-total-label { font-size: 0.95rem; color: var(--ink-2); }
.calc-break {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.65;
}
.calc-break strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-disclaimer {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--ink-3);
  line-height: 1.6;
}
.calc-result .btn {
  margin-top: 20px;
  align-self: flex-start;
}

/* ---------- lumen method (numbered steps, aurora rhythm section) ----------
   Glass treatment (Gabriel's gloss ask, 2026-07-17): frosted step cards
   over the crisp canvas weave, with a light sheen sweeping behind them. */
.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(14px, 2vw, 22px);
  max-width: var(--content);
  margin: 0 auto;
}
.method-step {
  padding: 34px 28px 38px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 12px 34px rgba(16, 36, 51, 0.07);
}
/* the sheen: a soft band of light crossing behind the frosted cards */
.method-glass::after {
  content: '';
  position: absolute;
  top: -15%;
  bottom: -15%;
  left: 0;
  width: 28%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-130%) skewX(-14deg);
  animation: method-sheen 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes method-sheen {
  0%, 45% { transform: translateX(-130%) skewX(-14deg); }
  80%, 100% { transform: translateX(520%) skewX(-14deg); }
}
.method-num {
  font-family: var(--f-mono);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--sky-ink);
  font-variant-numeric: tabular-nums;
}
.method-title {
  font-family: var(--f-display);
  font-weight: 660;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
}
.method-body { font-size: 0.93rem; line-height: 1.7; color: var(--ink-2); }

/* ---------- drag explorer (tabs, deep rhythm section) ---------- */
.explorer { max-width: 980px; margin: 0 auto; }
.explorer-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
  overflow-x: auto;
  scrollbar-width: none;
}
.explorer-tabs::-webkit-scrollbar { display: none; }
.explorer-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  padding: 14px 18px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--t-micro) var(--ease-sine), border-color var(--t-micro) var(--ease-sine);
}
.explorer-tab:hover { color: var(--ink-2); }
.explorer-tab.active { color: var(--azure); border-bottom-color: var(--azure); }
.explorer-panel { display: none; }
.explorer-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 44px); align-items: start; }
.explorer-panel h3 {
  font-family: var(--f-display);
  font-weight: 660;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}
.explorer-panel .explorer-copy { font-size: 0.97rem; line-height: 1.75; color: var(--ink-2); }
.explorer-copy p { margin: 0 0 14px; }
.explorer-copy .meta { display: block; margin-top: 18px; }

/* ---------- case cards ---------- */
/* Every card is one size, set by the tallest, so the grid reads as a set
   rather than a ragged stack. Once a card is expanded that uniformity is
   dropped: otherwise the opened card's height would be forced onto all
   five siblings and leave them mostly empty. */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(16px, 2.5vw, 24px);
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.cases-grid:has(.case-card.open) {
  align-items: start;
  grid-auto-rows: auto;
}
/* one column: a shared height is just dead space under the short cards */
@media (max-width: 700px) {
  .cases-grid { align-items: start; grid-auto-rows: auto; }
  .case-card { min-height: 0; }
}
.case-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* set by lumen-app.js from the tallest collapsed card; absent until then */
  min-height: var(--case-min, auto);
  transition: border-color var(--t-hover) var(--ease-sine), box-shadow var(--t-hover) var(--ease-sine);
}
.case-card:hover { border-color: rgba(34, 120, 189, 0.45); box-shadow: 0 12px 32px rgba(20, 36, 51, 0.08); }
.case-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky-ink);
}
.case-origin { font-size: 0.8rem; color: var(--ink-3); }
.case-title {
  font-family: var(--f-display);
  font-weight: 660;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}
.case-sec {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}
.case-body { font-size: 0.9rem; line-height: 1.65; color: var(--ink-2); }
.case-toggle {
  align-self: flex-start;
  margin-top: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 13px 8px 13px 0;
  min-height: 44px;
  font-family: var(--f-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--azure);
  text-decoration: none;
}
.case-toggle::after { content: ' +'; }
.case-card.open .case-toggle::after { content: ' ‘2'; }
.case-toggle:hover { color: var(--azure-deep); }
.case-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease-expo);
}
.case-card.open .case-collapse { grid-template-rows: 1fr; }
.case-collapse-inner { overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.case-takeaway {
  margin-top: 8px;
  padding: 13px 15px;
  border-left: 2px solid var(--azure);
  background: var(--azure-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.case-toggle .lbl-open, .case-card.open .case-toggle .lbl-closed { display: none; }
.case-card.open .case-toggle .lbl-open { display: inline; }

/* ---------- trust ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.trust-cell {
  background: var(--surface);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.trust-cell svg { width: 28px; height: 28px; color: var(--azure); }
.trust-title { font-family: var(--f-display); font-weight: 660; font-size: 1.2rem; letter-spacing: -0.01em; }
.trust-body { font-size: 0.9rem; line-height: 1.65; color: var(--ink-2); }
.trust-foot {
  max-width: 700px;
  margin: clamp(36px, 5vw, 52px) auto 0;
  text-align: center;
  font-size: 1rem;
  color: var(--ink-2);
  line-height: 1.75;
}
.trust-foot strong { color: var(--ink); }

/* ---------- compare table ---------- */
.compare { max-width: 1040px; margin: 48px auto 0; }
.compare-legend, .compare-row {
  display: grid;
  grid-template-columns: 1.05fr 1.35fr 1.35fr;
  gap: 12px;
}
.compare-legend { margin-bottom: 12px; padding: 0 18px; }
.compare-col {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.compare-col-us { color: var(--azure); }
.compare-col-them { color: var(--ink-3); }
.compare-row { margin-bottom: 12px; align-items: stretch; }
.compare-label { display: flex; align-items: center; padding: 15px 18px; font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.compare-cell {
  padding: 15px 18px;
  border-radius: var(--radius);
  font-size: 0.89rem;
  line-height: 1.55;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.compare-cell svg { flex: 0 0 auto; margin-top: 3px; }
.compare-us { background: var(--surface); border: 1px solid rgba(34, 120, 189, 0.35); color: var(--ink); }
.compare-us svg { color: var(--azure); }
.compare-them { background: transparent; border: 1px dashed var(--line-2); color: var(--ink-3); }
.compare-them svg { color: var(--ink-3); }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq-groups {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.faq-group-tab {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  padding: 12px 17px;
  transition: color var(--t-micro), border-color var(--t-micro), background var(--t-micro);
}
.faq-group-tab:hover { color: var(--ink); border-color: var(--line-2); }
.faq-group-tab.active { color: #ffffff; background: var(--azure); border-color: var(--azure); }
.faq-group { display: none; }
.faq-group.active { display: block; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  text-align: left;
  padding: 20px 4px;
  font-family: var(--f-body);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}
.faq-q .faq-x {
  flex: 0 0 auto;
  font-family: var(--f-mono);
  font-size: 1.1rem;
  color: var(--azure);
  transition: transform var(--t-hover) var(--ease-expo);
}
.faq-item.open .faq-x { transform: rotate(45deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease-expo);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p { margin: 0 0 20px; padding: 0 4px; font-size: 0.95rem; line-height: 1.75; color: var(--ink-2); }

/* ---------- contact ---------- */
.contact-inner { max-width: var(--content-narrow); margin: 0 auto; text-align: center; }
.contact-note { font-size: 0.92rem; color: var(--ink-3); margin: 14px 0 30px; }
.contact-list {
  max-width: 560px;
  margin: 44px auto 0;
  text-align: left;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.contact-list .meta { display: block; margin-bottom: 14px; }
.contact-list ol { margin: 0; padding-left: 22px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.8; }

/* ---------- footer (aurora) ---------- */
.footer {
  position: relative;
  overflow: hidden;
  background: #fdfeff;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding: clamp(48px, 6vw, 72px) var(--pad-x) 36px;
}
.footer::before {
  content: '';
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(45% 60% at 15% 20%, rgba(93, 178, 230, 0.14), transparent 70%),
    radial-gradient(50% 55% at 85% 30%, rgba(150, 214, 255, 0.15), transparent 72%),
    radial-gradient(60% 50% at 50% 100%, rgba(34, 120, 189, 0.07), transparent 75%);
}
.footer > * { position: relative; z-index: 1; }
.footer-grid {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(24px, 4vw, 48px);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--f-brand);
  font-weight: 660;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.footer-tag { margin-top: 14px; font-size: 0.9rem; color: var(--ink-3); line-height: 1.65; max-width: 34ch; }
.footer-col-title {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 0.92rem;
  color: var(--ink-2);
  text-decoration: none;
  padding: 9px 0;
  transition: color var(--t-micro);
}
.footer-col a:hover { color: var(--ink); }
.footer-cta-note { font-size: 0.88rem; color: var(--ink-3); line-height: 1.65; margin-top: 14px; }
.footer-meta {
  max-width: var(--content);
  margin: 44px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--ink-3);
}
.footer-meta a { color: inherit; display: inline-block; padding: 11px 0; margin: -11px 0; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(244, 248, 252, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: 10px var(--pad-x) 20px;
  }
  .nav-links.open .nav-link { padding: 14px 2px; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav-links.open .nav-cta { margin-top: 14px; }
  .nav-toggle { display: flex; }
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero { min-height: auto; padding: 130px var(--pad-x) 70px; }
  .svc-grid, .svc-grid.ai-grid { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; }
  .calc-result { position: static; }
  .explorer-panel.active { grid-template-columns: 1fr; }
  .compare-legend { display: none; }
  .compare-row { grid-template-columns: 1fr; gap: 8px; margin-bottom: 22px; }
  .compare-label { padding: 0 2px 6px; font-size: 1.02rem; }
  .compare-cell::before {
    content: attr(data-col);
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.65;
    width: 100%;
    display: block;
  }
  .compare-cell { flex-wrap: wrap; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* The three four-item rows (stats, standards, method steps) auto-fit, which
   lands on three across plus one orphan on the second row anywhere from about
   820px to 1150px. Pair them off instead: four across, then two by two, then
   one. Verified at 2560 / 1920 / 1500 / 1280 / 1024 / 900 / 768 / 430 / 320. */
@media (max-width: 1199px) {
  .proof-grid, .trust-grid, .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .proof-grid, .trust-grid, .method-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- opening curtain (shown only when html.intro-pending) ---------- */
.intro { display: none; }
.intro-pending body { overflow: hidden; }
.intro-pending .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow: hidden;
}
.intro-half {
  position: absolute;
  left: 0; right: 0;
  height: 50.5%;
  background: var(--canvas);
  overflow: hidden;
}
.intro-half-top { top: 0; }
.intro-half-bot { bottom: 0; }
.intro-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.intro-half-top .intro-lines { bottom: 0; }
.intro-path {
  fill: none;
  stroke: rgba(34, 120, 189, 0.5);
  stroke-width: 1.5;
}
.intro-brand {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  max-width: 94vw;
  text-align: center;
}
.intro-word {
  font-family: var(--f-brand);
  font-weight: 640;
  font-size: clamp(1.3rem, 6vw, 2.9rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.intro-slit {
  position: absolute;
  top: 50%; left: 6%; right: 6%;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, transparent, var(--azure), var(--sky), transparent);
  transform: scaleX(0);
  z-index: 1;
}
/* the unveiling: each curtain half carries a traveling line of light on
   its opening edge, so the reveal itself is visible (canvas-on-canvas
   would otherwise read as a blink) */
.intro-half::after {
  content: '';
  position: absolute;
  left: 6%; right: 6%;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, var(--azure), var(--sky), transparent);
  box-shadow: 0 0 18px rgba(34, 120, 189, 0.35);
  opacity: 0;
}
.intro-half-top::after { bottom: 0; }
.intro-half-bot::after { top: 0; }
.intro.unveil .intro-half::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  .intro-pending body { overflow: auto; }
}

/* ---------- motion-layer helpers (spans injected by js/lumen-motion.js) ---------- */
.h-stmt .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.09em;
  margin-bottom: -0.09em;
}
.h-stmt .wi {
  display: inline-block;
  transform: translateY(112%);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- hero ambient canvas (js/lumen-ambient.js) ---------- */
.hero-ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-inner { z-index: 2; }

/* ---------- explorer story scenes ----------
   Each tab's visual is a polished product vignette that acts out its
   headline (Gabriel: visuals must tell the story AND feel alive, in
   tune with the site - no wireframe energy). Depth from soft SVG
   shadows and gradients, life from float/glow/traveling-light motion.
   Base pose stays fully legible so the reduced-motion freeze reads. */
.story {
  margin-top: 24px;
  max-width: 520px;
  border-radius: 16px;
  border: 1px solid rgba(34, 120, 189, 0.16);
  padding: 6px;
  background:
    radial-gradient(60% 70% at 18% 12%, rgba(93, 178, 230, 0.14), transparent 70%),
    radial-gradient(55% 60% at 85% 90%, rgba(150, 214, 255, 0.16), transparent 72%),
    linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: 0 18px 44px rgba(16, 36, 51, 0.09);
}
.story svg { display: block; width: 100%; height: auto; }

/* shared scene typography and small parts */
.story .s-title { font-family: var(--f-body); font-size: 10px; font-weight: 600; fill: var(--ink-2); }
.story .s-title-dim { fill: var(--ink-3); }
.story .s-skel { fill: rgba(34, 120, 189, 0.10); }
.story .s-chip-lit {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: #ffffff;
}
.story .s-chip-gray { fill: rgba(20, 36, 51, 0.06); stroke: rgba(20, 36, 51, 0.16); }
.story .s-chip-gray-text {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--ink-3);
}
.story .s-pill { fill: #ffffff; stroke: rgba(34, 120, 189, 0.28); }
.story .s-pill-text {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--sky-ink);
}
.story .s-pill-warn { fill: rgba(34, 120, 189, 0.10); stroke: rgba(34, 120, 189, 0.4); }
.story .s-pill-warn-text {
  font-family: var(--f-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  fill: var(--azure-deep);
}
.story .s-note {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  fill: var(--ink-3);
}
.story .s-av { font-family: var(--f-body); font-size: 12px; font-weight: 700; fill: #ffffff; }
.story .s-card-head {
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--ink-2);
}
.story .s-dim { fill: var(--ink-3); }
.story .s-bub { fill: #ffffff; stroke: var(--azure); stroke-width: 1.4; }
.story .s-bub-q { font-family: var(--f-mono); font-size: 12px; font-weight: 700; fill: var(--azure); }
.story .s-q { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; fill: var(--azure-deep); }
.story .s-ans {
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: #ffffff;
}
.story .s-rail { stroke: rgba(20, 36, 51, 0.14); stroke-width: 2; }
.story .s-rail-dash { stroke: rgba(34, 120, 189, 0.45); stroke-width: 2; stroke-dasharray: 6 8; }
.story .s-dash-strong { stroke: var(--sky); stroke-width: 2; stroke-dasharray: 6 7; }

/* gentle float for layered cards (the proof artifacts' loved pattern) */
.story .st-float-a { animation: st-float-a 6.5s ease-in-out infinite alternate; }
.story .st-float-b { animation: st-float-b 7.5s ease-in-out infinite alternate; }
@keyframes st-float-a { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes st-float-b { from { transform: translateY(0); } to { transform: translateY(5px); } }
.story .st-pill-top { animation: st-float-a 8s ease-in-out infinite alternate; }

/* tools: the shared job lights up in A then B; C dozes but keeps billing */
.story .st-lit-a { animation: st-lit-a 4.4s ease-in-out infinite; }
.story .st-lit-b { animation: st-lit-b 4.4s ease-in-out infinite; }
@keyframes st-lit-a {
  0%, 45%, 100% { opacity: 1; }
  55%, 90% { opacity: 0.42; }
}
@keyframes st-lit-b {
  0%, 45%, 100% { opacity: 0.42; }
  55%, 90% { opacity: 1; }
}
.story .st-doze { animation: st-doze 5.5s ease-in-out infinite; }
@keyframes st-doze {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 0.42; }
}
.story .st-leak { animation: st-leak 4s ease-in-out infinite; }
@keyframes st-leak {
  0%, 12% { transform: translateY(6px); opacity: 0; }
  30%, 66% { transform: translateY(0); opacity: 1; }
  88%, 100% { transform: translateY(-10px); opacity: 0; }
}

/* handoffs: the task stalls over B; a waiting ring sweeps; B and C ask */
.story .st-task { animation: st-task 8s ease-in-out infinite; }
@keyframes st-task {
  0%   { transform: translate(200px, 178px); opacity: 1; }
  38%  { transform: translate(200px, 178px); opacity: 1; }
  52%  { transform: translate(330px, 178px); opacity: 1; }
  60%  { transform: translate(330px, 178px); opacity: 0; }
  62%  { transform: translate(70px, 178px); opacity: 0; }
  74%  { transform: translate(70px, 178px); opacity: 1; }
  92%  { transform: translate(200px, 178px); opacity: 1; }
  100% { transform: translate(200px, 178px); opacity: 1; }
}
.story .st-ring {
  fill: none;
  stroke: rgba(34, 120, 189, 0.55);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 182;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
  animation: st-ring 8s linear infinite;
}
@keyframes st-ring {
  0% { stroke-dashoffset: 182; opacity: 1; }
  36% { stroke-dashoffset: 24; opacity: 1; }
  44% { stroke-dashoffset: 24; opacity: 0; }
  95% { stroke-dashoffset: 182; opacity: 0; }
  100% { stroke-dashoffset: 182; opacity: 1; }
}
.story .st-ask-b, .story .st-ask-c {
  transform-box: fill-box;
  transform-origin: center;
}
.story .st-ask-b { animation: st-pop 3s ease-in-out infinite; }
.story .st-ask-c { animation: st-pop 3s ease-in-out infinite 1.5s; }
@keyframes st-pop {
  0%, 100% { opacity: 0.5; transform: scale(0.92); }
  40% { opacity: 1; transform: scale(1.06); }
  55% { opacity: 1; transform: scale(1); }
}
.story .st-rail-march { animation: st-march 1.4s linear infinite; }
@keyframes st-march {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -14; }
}

/* data: a probe of light travels the line and dies at the lock */
.story .st-probe {
  fill: var(--azure);
  filter: drop-shadow(0 0 4px rgba(34, 120, 189, 0.7));
  animation: st-probe 3.2s ease-in infinite;
}
@keyframes st-probe {
  0% { transform: translateX(94px); opacity: 0; }
  12% { opacity: 1; }
  62% { transform: translateX(244px); opacity: 1; }
  70% { transform: translateX(238px); opacity: 0; }
  100% { transform: translateX(238px); opacity: 0; }
}
.story .st-lock {
  transform-box: fill-box;
  transform-origin: center;
  animation: st-shake 3.2s ease-in-out infinite;
}
@keyframes st-shake {
  0%, 60%, 76%, 100% { transform: translateX(0); }
  64% { transform: translateX(-2.5px); }
  68% { transform: translateX(2.5px); }
  72% { transform: translateX(-1.5px); }
}
.story .st-bubble { animation: st-float-a 7s ease-in-out infinite alternate; }
.story .st-answer { animation: st-answer 3.2s ease-in-out infinite; }
@keyframes st-answer {
  0%, 55%, 100% { opacity: 0.75; }
  68% { opacity: 1; }
}

/* time: the report is hand-carried in a slow arc; the beam zips below */
.story .st-carry2 { animation: st-carry2 6.5s ease-in-out infinite; }
@keyframes st-carry2 {
  0%   { transform: translate(86px, 106px) rotate(-5deg); opacity: 1; }
  10%  { transform: translate(86px, 106px) rotate(-5deg); opacity: 1; }
  45%  { transform: translate(200px, 74px) rotate(0deg); opacity: 1; }
  76%  { transform: translate(324px, 106px) rotate(5deg); opacity: 1; }
  80%  { transform: translate(324px, 110px) rotate(5deg); opacity: 1; }
  88%  { transform: translate(324px, 110px) rotate(5deg); opacity: 0; }
  90%  { transform: translate(86px, 106px) rotate(-5deg); opacity: 0; }
  100% { transform: translate(86px, 106px) rotate(-5deg); opacity: 1; }
}
.story .st-comet { animation: st-comet 2.6s ease-in infinite; }
@keyframes st-comet {
  0%, 55% { transform: translateX(30px); opacity: 0; }
  60% { opacity: 1; }
  78% { transform: translateX(370px); opacity: 1; }
  80%, 100% { transform: translateX(370px); opacity: 0; }
}

/* ---------- proof section: floating sample-report artifacts ---------- */
.proof-top {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.proof-top .sec-head { margin-bottom: 0; }
.artifact-stack {
  position: relative;
  min-height: 400px;
}
.artifact-card {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 55px rgba(16, 36, 51, 0.14);
  padding: 24px 24px 20px;
}
.artifact-main {
  width: min(340px, 88%);
  left: 4%;
  top: 4%;
  z-index: 2;
  transform: rotate(-2deg);
  animation: artifact-float-a 7s ease-in-out infinite alternate;
}
.artifact-back {
  width: min(290px, 76%);
  right: 0;
  bottom: 2%;
  z-index: 1;
  transform: rotate(2.5deg);
  animation: artifact-float-b 8.5s ease-in-out infinite alternate;
}
@keyframes artifact-float-a {
  from { transform: rotate(-2deg) translateY(0); }
  to { transform: rotate(-2deg) translateY(-9px); }
}
@keyframes artifact-float-b {
  from { transform: rotate(2.5deg) translateY(0); }
  to { transform: rotate(2.5deg) translateY(10px); }
}
.artifact-eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-ink);
  margin-bottom: 10px;
}
.artifact-title {
  font-family: var(--f-display);
  font-weight: 680;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 14px;
}
.artifact-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-2);
}
.artifact-row .num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.artifact-row.total {
  border-top: 2px solid rgba(34, 120, 189, 0.35);
  font-weight: 600;
  color: var(--ink);
}
.artifact-row.total .num { color: var(--azure); font-weight: 600; }
.artifact-caption {
  margin-top: 12px;
  font-size: 0.7rem;
  color: var(--ink-3);
  line-height: 1.5;
}
.artifact-bar {
  height: 7px;
  border-radius: 4px;
  background: rgba(34, 120, 189, 0.18);
  margin: 10px 0 4px;
  overflow: hidden;
}
.artifact-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--azure), var(--sky));
}
.artifact-back .artifact-eyebrow { margin-bottom: 6px; }

@media (max-width: 900px) {
  .proof-top { grid-template-columns: 1fr; }
  .artifact-stack { min-height: 360px; margin-top: 8px; }
  .artifact-main { left: 0; }
}

/* ---------- side TOC + back-to-top ----------
   Page chrome copied from the old site, recolored to Daylight:
   sticky right-rail section index (1240px+) and a circular
   back-to-top button that appears past the fold. */
.side-toc {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 24px;
  z-index: 90;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  opacity: 0;
  animation: toc-fade-in 0.6s var(--ease-expo) 0.6s forwards;
}
@keyframes toc-fade-in { to { opacity: 1; } }
/* mid-width screens: the full rail would overlap content, so it
   collapses to numbers only (name on hover via title) */
@media (max-width: 1649px) {
  .side-toc { width: auto; right: 14px; }
  .side-toc-label, .side-toc-name { display: none; }
  .side-toc-item { padding: 6px 8px 6px 10px; }
  .side-toc-item:hover { padding-left: 10px; }
}
@media (max-width: 1240px) { .side-toc { display: none; } }
.side-toc-label {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 14px 8px 20px;
  border-bottom: 1px solid var(--line);
  margin: 0 8px 8px 0;
}
.side-toc-item {
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--ink-3);
  text-decoration: none;
  padding: 7px 14px 7px 20px;
  border-left: 2px solid transparent;
  transition: color 0.25s var(--ease-expo),
              border-left-color 0.25s var(--ease-expo),
              padding-left 0.25s var(--ease-expo);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}
.side-toc-num {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-3);
  opacity: 0.6;
  transition: color 0.25s, opacity 0.25s;
}
.side-toc-item:hover {
  color: var(--ink-2);
  padding-left: 24px;
}
.side-toc-item.active {
  color: var(--azure);
  border-left-color: var(--azure);
  font-weight: 500;
}
.side-toc-item.active .side-toc-num {
  color: var(--azure);
  opacity: 1;
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 200px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.32s var(--ease-expo),
              transform 0.32s var(--ease-expo),
              background 0.25s, color 0.25s, border-color 0.25s;
  z-index: 8400;
  box-shadow: 0 4px 16px rgba(16, 36, 51, 0.12);
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--azure);
  color: #ffffff;
  border-color: var(--azure);
}
.back-to-top svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
  .back-to-top { right: 12px; bottom: 78px; }
}

/* ---------- persistent pills: public contact floater + Gabriel-only admin dock ---------- */
.contact-floater {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 8500;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-body);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 13px 22px;
  border: none;
  border-radius: 999px;
  background: var(--azure);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(34, 120, 189, 0.35);
  transition: transform var(--t-micro) var(--ease-sine), box-shadow var(--t-hover) var(--ease-sine), background var(--t-micro), opacity 0.3s var(--ease-sine);
}
.contact-floater::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ffffff;
  animation: floater-pulse 2s ease-in-out infinite;
}
.contact-floater:hover { transform: translateY(-2px); background: var(--azure-deep); box-shadow: 0 12px 32px rgba(34, 120, 189, 0.45); }
.contact-floater.suppressed { opacity: 0; pointer-events: none; transform: translateY(12px); }
@keyframes floater-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.6; }
}

.admin-dock {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 8400;
  display: none; /* JS flips to flex when the admin key is present */
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.admin-floater {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(34, 120, 189, 0.40);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(16, 36, 51, 0.16);
  transition: transform var(--t-micro) var(--ease-sine), box-shadow var(--t-hover) var(--ease-sine), border-color var(--t-micro);
}
.admin-floater:hover { transform: translateY(-2px); border-color: var(--azure); box-shadow: 0 10px 26px rgba(34, 120, 189, 0.25); }
.admin-floater .admin-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--azure);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
.admin-floater .admin-count:empty { display: none; }

/* ============================================================
   DEPTH LAYER (build #746): hero scroll cue, scroll-cinema
   statement, calculator odometer + ghost-drag demo, edge-light
   card sweeps, sliding tab ink, magnetic CTAs, JS marquee.
   Behavior lives in js/lumen-depth.js.
============================================================ */

/* hero scroll cue (hand-hold pattern: tell the visitor what to do next) */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  pointer-events: none;
}
.hero-scroll-cue svg {
  width: 15px;
  height: 15px;
  color: var(--azure);
  animation: cue-bob 2.1s ease-in-out infinite;
}
/* the fade-out on scroll is a GSAP tween in js/lumen-depth.js */
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  55% { transform: translateY(6px); opacity: 0.45; }
}

/* scroll-cinema statement (the ownership promise) */
.cinema-inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.cinema-inner .eyebrow { margin-bottom: 26px; }
.cinema-stmt {
  font-family: var(--f-display);
  font-weight: 680;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.22;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
.cinema-stmt em { font-style: normal; color: var(--azure); }
/* js/lumen-depth.js adds is-pinned only when it will actually pin */
.cinema.is-pinned {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* "keep scrolling" pulse: exists only in pin mode, where the page
   deliberately holds still and a visitor might think it is stuck */
.cinema-cue {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--azure);
  pointer-events: none;
  z-index: 1;
}
.cinema.is-pinned .cinema-cue { display: block; }
.cinema-cue span { display: inline-block; animation: cinema-cue-pulse 1.8s ease-in-out infinite; }
@keyframes cinema-cue-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.95; }
}

/* calculator ghost-drag demo (injected by JS, never in markup) */
.calc-row { position: relative; }
.calc-ghost {
  position: absolute;
  left: 0;
  top: 12px;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
  will-change: transform;
}
.calc-ghost svg {
  width: 15px;
  height: 20px;
  display: block;
  filter: drop-shadow(0 2px 5px rgba(16, 36, 51, 0.35));
}
.calc-ghost-ring {
  position: absolute;
  left: -8px;
  top: -6px;
  width: 28px;
  height: 28px;
  border: 2px solid var(--azure);
  border-radius: 50%;
}
.calc-ghost-tip {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--azure-deep);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(34, 120, 189, 0.35);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(16, 36, 51, 0.12);
  margin-top: 16px;
}

/* calculator total: per-digit odometer reels. Every child (reel or
   static $ and , glyph) shares the same 1.08em line box, so centering
   the flex row keeps all baselines identical. */
.calc-total { display: inline-flex; align-items: center; }
.calc-total > span { line-height: 1.08; }
.od-reel {
  display: inline-block;
  overflow: hidden;
  height: 1.08em;
}
.od-strip { display: block; }
.od-strip span { display: block; height: 1.08em; line-height: 1.08; }

/* edge-light sweep on service and case cards (light, not shadow) */
.svc-card, .case-card { position: relative; overflow: hidden; }
.svc-card::after, .case-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 44%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(34, 120, 189, 0.9), rgba(150, 214, 255, 0.95), transparent);
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-sine);
}
.svc-card:hover::after, .case-card:hover::after {
  opacity: 1;
  transform: translateX(360%);
  transition: transform 0.85s var(--ease-expo), opacity 0.2s var(--ease-sine);
}

/* explorer tabs: sliding active underline */
.explorer-tabs { position: relative; }
.tab-ink {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--azure);
  pointer-events: none;
}
.explorer-tabs.has-ink .explorer-tab.active { border-bottom-color: transparent; }

/* magnetic CTAs: GSAP owns transform, CSS keeps the rest */
.btn.magnetized { transition-property: box-shadow, background; }

/* marquee under JS control (velocity-reactive) */
.band-track.js-marquee { animation: none; }

/* imagery slots (Gabriel's pick 2026-07-17: T2b Weave). The band's
   raster is replaced by the live canvas in js/lumen-band.js when
   motion is allowed. */
.img-band {
  position: relative;
  overflow: hidden;
  height: clamp(260px, 46vh, 560px);
}
.img-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.img-band::after {
  /* melt the band into the canvas above and below */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--canvas), transparent 16%, transparent 84%, var(--canvas));
  pointer-events: none;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .band-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
  .band::before, .band::after { display: none; }
  .band-item[aria-hidden] { display: none; }
  .contact-floater::before { animation: none; }
}