/* ============================================================
   HIDAY — ambient background layer (bg.css)
   Injected by bg.js as #bg: scroll-driven bronze light sweep,
   plus the surface, motion, and interaction systems.
   ============================================================ */

#bg {
  position: fixed;
  inset: 0;
  z-index: -1;              /* above body grid, below all content */
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

/* Agent view is flat by design — no ambient layer */
:root.is-agent #bg { display: none; }

/* Belt-and-braces: JS never injects under reduced motion, but if the
   preference flips mid-session the layer dies here instantly too */
@media (prefers-reduced-motion: reduce) {
  #bg { display: none !important; }
}

/* ── VARIANT: sweep ── */
[data-variant="sweep"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  opacity: 0.10;
}
:root[data-theme="dark"] [data-variant="sweep"]::before { opacity: 0.14; }

/* Sweep v3 — scroll-driven light passes: the two bands' positions are
   pure functions of scroll progress (--bgp 0..1), so the shade only
   moves when the reader does. The lerped driver supplies the trailing
   glide; at rest the light holds still. */
[data-variant="sweep"] { --wash: rgba(184, 135, 90, 0.20); }
:root[data-theme="dark"] [data-variant="sweep"] { --wash: rgba(184, 135, 90, 0.28); }

.bg-bandwrap {
  position: absolute;
  inset: 0;
  transform: translate3d(0, calc(var(--bgy, 0px) * -0.07), 0);
  will-change: transform;
}
.bg-band, .bg-band-2 {
  position: absolute;
  top: -60vmax; left: -60vw;
  width: 240vmax; height: 56vmax;
  background: linear-gradient(90deg, transparent 40%, var(--wash) 50%, transparent 60%);
  will-change: transform;
}
.bg-band {
  transform: translate3d(calc(-46vw + var(--bgp, 0) * 128vw), calc(-12vh + var(--bgp, 0) * 40vh), 0) rotate(18deg);
}
.bg-band-2 {
  height: 40vmax;
  opacity: 0.6;
  transform: translate3d(calc(70vw - var(--bgp, 0) * 148vw), calc(-20vh + var(--bgp, 0) * 44vh), 0) rotate(18deg);
}
/* ── /VARIANT: sweep ── */


/* ── SURFACE SYSTEM (opaque panels — no grid bleed) ──
   Cards, rows, and key sections read as solid surfaces that sit ON
   the paper rather than letting the grid texture show through.
   Solid designed tints replace the old rgba washes. */
:root {
  --surface:      #fffdf9;   /* card lift — a breath lighter than the cream page */
  --surface-tint: #f4eee4;   /* bronze-tinted solid — hovers, featured, accents */
  --surface-band: #f4f1ea;   /* section band — a breath deeper than the page */
}
:root[data-theme="dark"] {
  --surface:      #181611;
  --surface-tint: #241d11;
  --surface-band: #12100c;
}

/* Clickable rows + cards: solid, with solid hover states */
.stack-row { background: var(--surface); border: 1px solid var(--border-2); }
.stack-row:not(.is-ai):hover { background: var(--surface-tint); }
.stack-row.is-accent { background: var(--surface-tint); }
.card { background: var(--surface); }
.card:hover { background: var(--surface-tint); border-color: var(--accent); }
.card-featured { background: var(--surface-tint); }
.card-featured:hover { background: var(--surface-tint); }

/* Framework layer details + misc panels */
.layer-detail { background: var(--surface); border: 1px solid var(--border-2); border-radius: 4px; }
.bridge { background: var(--surface-tint); }
.json-block { background: var(--surface); }

/* Contact form fields */
.field input, .field select, .field textarea { background: var(--surface); }

/* Banded sections: solid slightly-contrasting full-bleed bands.
   The grid stays visible only in open paper zones (hero, gaps). */
.section-band { background: var(--surface-band); }
/* ── /SURFACE SYSTEM ── */

/* ── SPACING REPAIR (padding/balance audit 2026-07-28) ── */
.mt-md { margin-top: var(--space-md); }
.layer-detail:first-of-type { border-top: 1px solid var(--border-2); padding-top: 32px; }
.layer-detail + .layer-detail { margin-top: 14px; }
.layers-flow > .layer-detail + .layer-detail { margin-top: 0; }
.agent-only .eyebrow { display: inline-block; margin-bottom: 14px; }
.prose { max-width: 640px; }
.prose h2 { line-height: 1.15; }
.prose code { font-family: var(--font-mono); font-size: 0.85em; }

.footer { margin-top: 0; }
.layer-detail { padding: 32px 28px; }
@media (min-width: 721px) { .layer-detail { grid-template-columns: 120px 1fr; } }
.page-head { padding-bottom: var(--space-xl); }
.bridge .eyebrow { display: inline-block; margin-bottom: 14px; }
@media (min-width: 1100px) { .cards-6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 880px) and (max-width: 1175px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) { .section-head { gap: 20px; } }
@media (max-width: 720px) {
  .section, .manifesto { padding: 72px 0; }
  .section-head { margin-bottom: var(--space-lg); }
  .bridge { padding: 48px 28px; margin-top: 48px; }
  .json-block { white-space: pre; font-size: 11.5px; }
}

.card { padding: 36px 28px; }
.layer-detail .why-list li { max-width: 60ch; }
@media (max-width: 520px) { .footer-brand { grid-column: 1 / -1; } }

/* Mobile repairs (audit 2026-07-28) */
@media (max-width: 980px) {
  /* hero grid track must be allowed to shrink below min-content */
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-inner > * { min-width: 0; }
}
@media (max-width: 880px) {
  /* 16px floor stops iOS Safari auto-zoom on focus */
  .field input, .field select, .field textarea { font-size: 16px; }
}
/* Dynamic diagrams ship two layouts: landscape (default) and portrait
   re-flows for phones — no horizontal scrolling, labels at near-1:1 scale */
.enh-fig .harness-m, .enh-fig .flow-m { display: none; }
@media (max-width: 600px) {
  .enh-fig .harness-d, .enh-fig .flow-d { display: none; }
  .enh-fig .harness-m, .enh-fig .flow-m { display: block; }
}
/* ── /SPACING REPAIR ── */




/* ── MANIFESTO BAND (bronze, locked 2026-07-28) ──
   One text color; emphasis via upright roman against the italic base,
   never via a second color. */
.manifesto .manifesto-line { color: inherit; max-width: 44ch; }  /* beat the bare p base rule; measure fits the principle */
.manifesto .manifesto-line strong {
  color: inherit;                 /* one color; emphasis is typographic */
  font-weight: 400;
  font-style: normal;             /* upright roman against the italic base —
                                     Instrument Serif has no true bold, so
                                     weight-based emphasis renders faux */
}

/* Bronze band is the shipped design (A/B decided 2026-07-28).
   Text is white on bronze in both themes (owner call 2026-07-28). */
.manifesto {
  background: var(--accent);
  color: #fff;
  border-top-color: var(--accent);
}
.manifesto .eyebrow { color: rgba(255, 255, 255, 0.85); }
:root[data-theme="dark"] .manifesto { color: #fff; }
:root[data-theme="dark"] .manifesto .eyebrow { color: rgba(255, 255, 255, 0.85); }
/* ── /BAND A/B ── */

/* ── ENHANCE: motion + illustration system ──
   Word blur-fade on display type, cascade staggers, counter roll-ups,
   scroll-driven brand illustrations (stroke draw-in), framework rail.
   All decorative; static-complete without JS or under reduced motion. */

/* Word blur-fade: JS wraps words in spans and sets --i */
.enh-w { display: inline-block; white-space: pre; }
.enh-split .enh-w {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(0.3em);
  transition: opacity 0.55s var(--ease), filter 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.enh-split.enh-in .enh-w { opacity: 1; filter: blur(0); transform: none; }

/* Cascade: children of a marked grid stagger in as one orchestrated group */
.enh-kids > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.enh-kids.enh-in > * { opacity: 1; transform: none; }

/* Illustration figures */
.enh-fig { margin: 0; }
.enh-fig svg { display: block; width: 100%; height: auto; }
.enh-fig text {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  fill: var(--fg-soft);
}
.enh-fig .enh-t-num  { font-size: 11px; fill: var(--fg-muted); }
.enh-fig .enh-t-chip { font-size: 10px; fill: var(--accent); letter-spacing: 0.18em; }
.enh-fig .enh-t-lab  { font-size: 10.5px; fill: var(--fg-soft); letter-spacing: 0.16em; }
.enh-fig .enh-t-name { font-size: 10.5px; fill: var(--fg); opacity: 0.82; }
.enh-fig .enh-t-inv  { font-size: 10.5px; fill: #fff; letter-spacing: 0.16em; }  /* white on bronze, both themes */
.enh-fig .enh-t-card    { font-size: 11.5px; font-weight: 500; fill: var(--fg); letter-spacing: 0.15em; }
.enh-fig .enh-t-chipnum { font-size: 10px; font-weight: 500; fill: #fff; letter-spacing: 0.06em; }
.enh-stack-fig { max-width: 400px; }
.enh-dock-fig  { max-width: 380px; }

/* Stroke draw-in: undrawn until JS reveals; complete by default (no-JS safe) */
.enh-draw [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.enh-draw.enh-undrawn [pathLength] { stroke-dashoffset: 1; transition: none; }
.enh-draw .enh-fill {
  transition: opacity 0.6s var(--ease), fill 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 120ms + 250ms);
}
.enh-draw.enh-undrawn .enh-fill { opacity: 0; transition: none; }

/* Index positioning: list + assembling stack figure side by side */
.why-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.enh-stack-fig { max-width: 360px; margin: 0 auto; }
@media (max-width: 880px) {
  .why-grid { grid-template-columns: 1fr; gap: 40px; }
  .enh-stack-fig { max-width: 300px; }
}

/* Agentic: Layer 07 docking figure */
.enh-dock-fig { max-width: 340px; margin: 40px auto 0; }
.enh-dock-l7 {
  transition: transform 0.9s var(--ease), opacity 0.9s var(--ease);
  transition-delay: 620ms;
}
.enh-undrawn .enh-dock-l7 { transform: translateY(-26px); opacity: 0; transition: none; }

/* Framework: four-pillar flow figure */
.enh-flow-fig { max-width: 720px; margin: 8px auto 44px; }

/* Services: per-service layer micro-sigil */
.enh-sigil { display: block; width: 34px; height: 30px; margin-top: 12px; }
.enh-sigil rect { fill: var(--border); transition: fill 0.5s var(--ease); transition-delay: calc(var(--i, 0) * 80ms + 200ms); }
.enh-undrawn.enh-sigil rect,
.enh-undrawn .enh-sigil rect { transition: none; }
.enh-sigil rect.on { fill: var(--accent); }
.enh-undrawn .enh-sigil rect.on { fill: var(--border); }

/* Framework: sticky layer rail (desktop only, injected by JS) */
.enh-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.enh-rail a {
  display: block;
  width: 22px;
  height: 4px;
  background: var(--border);
  border-radius: 1px;
  transition: background var(--dur-1) var(--ease), width var(--dur-1) var(--ease);
}
.enh-rail a:hover { background: var(--fg-muted); }
.enh-rail a.on { background: var(--accent); width: 30px; }
@media (max-width: 1280px) { .enh-rail { display: none; } }
:root.is-agent .enh-rail { display: none; }

@media (prefers-reduced-motion: reduce) {
  .enh-split .enh-w, .enh-kids > *, .enh-draw [pathLength], .enh-draw .enh-fill,
  .enh-dock-l7, .enh-sigil rect {
    opacity: 1 !important; filter: none !important; transform: none !important;
    stroke-dashoffset: 0 !important; transition: none !important;
  }
  .enh-rail { display: none; }
}
/* ── /ENHANCE ── */


/* ── INTERACT: cursor, reactive grid, liquid-glass hovers ──
   Desktop fine-pointer only; inherits the reduced-motion/Save-Data gates
   (bg.js never boots them otherwise). Rest states stay SOLID; glass is
   a hover language. */

/* 4 · grid spotlight: a brighter grid patch that follows the cursor */
.bg-spot {
  position: absolute;
  width: 500px; height: 500px;
  top: 0; left: 0;
  background-image:
    linear-gradient(to right, var(--spot-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--spot-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle 230px at center, rgba(0,0,0,0.9), transparent 72%);
  mask-image: radial-gradient(circle 230px at center, rgba(0,0,0,0.9), transparent 72%);
  will-change: transform;
  --spot-line: rgba(13, 13, 13, 0.13);
}
/* faint warm breath under the brightened grid patch */
.bg-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 230px at center, rgba(184, 135, 90, 0.06), transparent 68%);
}
:root[data-theme="dark"] .bg-spot { --spot-line: rgba(184, 135, 90, 0.20); }
:root[data-theme="dark"] .bg-spot::after {
  background: radial-gradient(circle 230px at center, rgba(184, 135, 90, 0.09), transparent 68%);
}

/* 5 · circle cursor */
@media (pointer: fine) {
  :root.has-cursor,
  :root.has-cursor body,
  :root.has-cursor a,
  :root.has-cursor button { cursor: none; }
  :root.has-cursor input,
  :root.has-cursor textarea,
  :root.has-cursor select { cursor: auto; }
}
.cur-dot {
  position: fixed;
  top: 0; left: 0;
  z-index: 90;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--accent);
}
.cur-hidden .cur-dot { opacity: 0; }

/* 6 · liquid-glass hover language (rest = solid, hover = frost).
   The ambient sweep passing beneath a frosted surface supplies the
   liquid depth; sheen tracks the pointer inside the element. */
.card, .stack-row, .btn, .layer-detail, .bridge { position: relative; }
.card::before, .stack-row::before, .bridge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 40%),
              rgba(255, 255, 255, 0.35), transparent 62%);
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
:root[data-theme="dark"] .card::before,
:root[data-theme="dark"] .stack-row::before,
:root[data-theme="dark"] .bridge::before {
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 40%),
              rgba(184, 135, 90, 0.16), transparent 62%);
}
@media (pointer: fine) {
  .card:hover, .stack-row:not(.is-ai):hover {
    background: var(--glass, rgba(255, 253, 249, 0.6));
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
    box-shadow: 0 14px 34px rgba(13, 13, 13, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
  }
  :root[data-theme="dark"] .card:hover,
  :root[data-theme="dark"] .stack-row:not(.is-ai):hover {
    --glass: rgba(24, 22, 17, 0.55);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(184, 135, 90, 0.22);
  }
  .card:hover::before, .stack-row:not(.is-ai):hover::before, .bridge:hover::before { opacity: 1; }
  .stack-row.is-ai:hover { filter: brightness(1.16); }
  :root[data-theme="dark"] .stack-row.is-ai:hover { filter: brightness(1.08); }
  .btn-primary:hover {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px rgba(13, 13, 13, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
}

/* 7 · chrome controls join the glass language (hover frost) */
@media (pointer: fine) {
  .view-btn:not(.is-active):hover,
  .theme-toggle:hover {
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cur-dot, .bg-spot { display: none !important; }
  .nav-overlay[data-open="true"] { animation: none; }
  :root.has-cursor, :root.has-cursor body,
  :root.has-cursor a, :root.has-cursor button { cursor: auto; }
}
/* ── /INTERACT ── */


/* ── FRAMEWORK LAYERS SCROLLER (sticky live panel + flowing details) ── */
.layers-scroller {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 64px;
  align-items: start;
}
.layers-flow { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.layer-live {
  position: sticky;
  top: 118px;
  padding: 8px 0 24px;
}
.ll-num {
  font-family: var(--font-serif);
  font-size: clamp(72px, 8vw, 118px);
  line-height: 0.95;
  color: var(--accent);
  transition: opacity 0.3s var(--ease);
}
.ll-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fg);
  margin-top: 18px;
  min-height: 2.4em;
}
.ll-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: 6px;
}
.ll-map { display: flex; flex-direction: column-reverse; gap: 6px; margin-top: 28px; width: 96px; }
.ll-map span {
  display: block;
  height: 5px;
  border-radius: 1.5px;
  background: var(--border);
  transition: background 0.25s var(--ease), width 0.25s var(--ease);
  width: 100%;
}
.ll-map span.on { background: var(--accent); }
.ll-fade { opacity: 0; transform: translateY(6px); }
.ll-num, .ll-name, .ll-role { transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); }
@media (max-width: 1100px) {
  .layers-scroller { display: block; }
  .layer-live { display: none; }
}
/* ── /FRAMEWORK LAYERS SCROLLER ── */


/* ── BOLD LAYER: deep glass nav, band depth, CTA physics, scrub, veil ── */

/* Nav: real glass. Tint thins as content passes beneath. */
.nav { background: rgba(250, 249, 246, 0.84); background: color-mix(in srgb, var(--bg) 84%, transparent); }
:root[data-theme="dark"] .nav { background: rgba(14, 13, 11, 0.84); background: color-mix(in srgb, var(--bg) 84%, transparent); }
.nav.scrolled {
  background: rgba(250, 249, 246, 0.62);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(20px);
          backdrop-filter: saturate(1.6) blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 0 rgba(13, 13, 13, 0.05);
}
:root[data-theme="dark"] .nav.scrolled {
  background: rgba(14, 13, 11, 0.62);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  box-shadow: inset 0 1px 0 rgba(184, 135, 90, 0.18), 0 1px 0 rgba(0, 0, 0, 0.4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav, .nav.scrolled { background: var(--bg); }
}

/* Mobile nav overlay: frosted sheet with a soft entrance */
.nav-overlay {
  background: rgba(250, 249, 246, 0.72);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
          backdrop-filter: blur(26px) saturate(1.3);
}
.nav-overlay[data-open="true"] { animation: overlay-in 0.34s var(--ease); }
@keyframes overlay-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-overlay { background: var(--bg); }
}

/* Manifesto band: depth vignette + travelling specular sheen + parallax */
.manifesto { position: relative; overflow: hidden; }
.manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255, 252, 245, 0.22), transparent 58%),
    radial-gradient(150% 130% at 50% 115%, rgba(60, 40, 16, 0.25), transparent 55%);
  pointer-events: none;
}
.manifesto::after {
  content: "";
  position: absolute;
  width: 72vmax; height: 72vmax;
  top: 50%; left: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 252, 245, 0.18), rgba(255, 252, 245, 0.06) 42%, transparent 62%);
  animation: band-fluid 28s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes band-fluid {
  0%   { transform: translate(-88%, -42%) scale(0.9);  opacity: 0.65; }
  30%  { transform: translate(-38%, -62%) scale(1.18); opacity: 1; }
  55%  { transform: translate(-16%, -44%) scale(1.02); opacity: 0.8; }
  78%  { transform: translate(-58%, -34%) scale(1.12); opacity: 0.95; }
  100% { transform: translate(-88%, -42%) scale(0.9);  opacity: 0.65; }
}
.manifesto .container {
  position: relative;
  z-index: 1;
  transform: translate3d(0, var(--plx, 0px), 0);
  will-change: transform;
}

/* Travelling shade across the bronze band: scroll-driven — the shade
   crosses the band exactly once as the band transits the viewport
   (--sweep 0..1 set by the scroll driver). Injected by bg.js so no-JS
   visitors keep a clean band. Layers with the fluid wander above. */
.band-sheen {
  position: absolute;
  top: -20%; bottom: -20%;
  left: -70%;
  width: 65%;
  background: linear-gradient(105deg, transparent 12%, rgba(255, 252, 245, 0.09) 38%, rgba(255, 252, 245, 0.18) 50%, rgba(255, 252, 245, 0.09) 62%, transparent 88%);
  transform: translateX(calc(var(--sweep, 0) * 290%)) skewX(-10deg);
  filter: blur(14px);
  pointer-events: none;
  will-change: transform;
}

/* CTA physics: sheen sweep on all buttons; ghost frosts; primary deepens.
   Magnetic pull is JS-driven (desktop only) via .is-mag. */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: "";
  position: absolute;
  top: -30%; bottom: -30%;
  width: 58%; left: -80%;
  background: linear-gradient(100deg, transparent 8%, rgba(255, 255, 255, 0.14) 34%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.14) 66%, transparent 92%);
  transform: skewX(-14deg);
  filter: blur(5px);
  transition: left 1.6s var(--ease);
  pointer-events: none;
}
.btn:hover::before { left: 132%; }
.btn-primary:hover {
  box-shadow: 0 12px 30px rgba(13, 13, 13, 0.22),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
@media (pointer: fine) {
  .btn-ghost:hover {
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-color: var(--accent);
  }
}
.btn.is-mag { transition: none; }
.btn:not(.is-mag) { transition: transform 0.4s var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }

/* Layers scroller panels join the glass hover language */
@media (pointer: fine) {
  .layers-flow .layer-detail:hover {
    background: rgba(255, 253, 249, 0.6);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
            backdrop-filter: blur(14px) saturate(1.15);
    box-shadow: 0 14px 34px rgba(13, 13, 13, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
  }
  :root[data-theme="dark"] .layers-flow .layer-detail:hover {
    background: rgba(24, 22, 17, 0.55);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(184, 135, 90, 0.22);
  }
}
.layer-detail::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 40%),
              rgba(255, 255, 255, 0.35), transparent 62%);
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
:root[data-theme="dark"] .layer-detail::before {
  background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 40%),
              rgba(184, 135, 90, 0.16), transparent 62%);
}
@media (pointer: fine) { .layers-flow .layer-detail:hover::before { opacity: 1; } }

/* Scroll-scrubbed figure drawing: --draw 0..1 set by the scroll driver.
   Defaults to 1 (fully drawn) without JS / under reduced motion / settle. */
.enh-scrub [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--draw, 1) - var(--d0, 0)) * 4.2, 1));
  transition: none;
}
.enh-scrub .enh-fill {
  opacity: clamp(0, (var(--draw, 1) - var(--d0, 0) - 0.12) * 4.2, 1);
  transition: none;
}

/* Human/Agent view switch: paper veil dissolves while the incoming
   view settles up into place — a crossfade, not a cut. */
.view-veil {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bg);
  pointer-events: none;
  animation: veil-out 0.55s var(--ease) forwards;
}
@keyframes veil-out { from { opacity: 1; } to { opacity: 0; } }
.view-anim { animation: view-in 0.55s var(--ease); }
@keyframes view-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .manifesto::after, .btn::before, .band-sheen { animation: none; display: none; }
  .view-veil { display: none; }
  .view-anim { animation: none; }
  .enh-scrub [pathLength] { stroke-dashoffset: 0 !important; }
  .enh-scrub .enh-fill { opacity: 1 !important; }
}

/* Diagram life: marching ants + breathing halos */
.ba-ants { animation: ants-march 1.5s linear infinite; }
@keyframes ants-march { to { stroke-dashoffset: -18; } }
.ba-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: halo-breathe 4.5s ease-in-out infinite;
}
@keyframes halo-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.75; }
  50%      { transform: scale(1.35); opacity: 1; }
}
.enh-harness-fig { max-width: 760px; margin: 8px auto 48px; }
@media (prefers-reduced-motion: reduce) {
  .ba-ants, .ba-halo { animation: none !important; }
}

/* Services row: five across on wide viewports — wider than the container
   on large screens, shorter cards, and layer chips reserve two lines so
   every headline sits on the same baseline across the row. Below 1100px
   the row is pinned to two columns so the orphan-centering rule holds. */
@media (min-width: 700px) and (max-width: 1099px) {
  .cards-row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 581px) and (max-width: 699px) {
  .card-orphan { grid-column: 1 / -1; max-width: calc((100% - 14px) / 2); justify-self: center; }
}
@media (min-width: 1100px) {
  .cards-row { grid-template-columns: repeat(5, 1fr); }
  .cards-row .card { padding: 24px 20px 22px; }
  .cards-row .card-layer { min-height: 3.4em; }
  .cards-row .card-orphan { grid-column: auto; max-width: none; margin: 0; }
}
@media (min-width: 1360px) {
  .cards-row { margin-inline: -60px; }
  .cards-row .card { padding: 26px 24px 24px; }
}
@media (min-width: 1600px) {
  .cards-row { margin-inline: -104px; }
}

/* Pattern + harness card grids: same chip treatment as the services row.
   Chips reserve two lines so headings sit on one baseline; the pattern
   grid joins the wide breakout so long chips fit on a single line. */
@media (min-width: 700px) {
  .cards-4 .card-layer, .cards-6 .card-layer { min-height: 3.4em; }
}
@media (min-width: 1360px) {
  .cards-4 { margin-inline: -60px; }
}
@media (min-width: 1600px) {
  .cards-4 { margin-inline: -104px; }
}
/* ── /BOLD LAYER ── */