/* ============================================================================
   AETHERWORK — Institutional Systems  ·  A BioStack HQ Technology Venture
   ----------------------------------------------------------------------------
   Mineral forge palette. Light "Mineral Canvas" is the dominant surface;
   "Oiled Graphite" is reserved for hero, command surface, focused system view,
   selected venture moments and footer. Aether Bronze is the primary signal;
   Burnished Gold marks hover / selected / live highlights; Deep Moss appears
   sparingly in system data visualisation. All tokens are CSS custom properties.
   Core content never depends on JavaScript — JS only enhances interaction.
   ========================================================================== */

/* ---- 1. Design tokens --------------------------------------------------- */
:root {
  /* AetherWork mineral forge palette (canonical names per brand spec) */
  --mineral-canvas: #E8E3D8;
  --oiled-graphite: #18201E;
  --aether-bronze:  #A96B32;
  --burnished-gold: #D7A85C;
  --deep-moss:      #355C50;
  --iron-ink:       #111614;
  --ash-grey:       #6C736E;
  --line-light:     rgba(17, 22, 20, 0.14);
  --line-dark:      rgba(232, 227, 216, 0.18);

  /* Working aliases (single-sourced from the canonical tokens above) */
  --canvas:       var(--mineral-canvas);
  --canvas-raise: #F0ECE3;  /* raised light cards   */
  --canvas-sink:  #DED8CB;  /* recessed light fills */
  --graphite:     var(--oiled-graphite);
  --graphite-raise:#212C29;
  --bronze:       var(--aether-bronze);
  --bronze-deep:  #8B5626;
  --gold:         var(--burnished-gold);
  --moss:         var(--deep-moss);
  --ink:          var(--iron-ink);
  --ash:          var(--ash-grey);
  --line:         var(--line-light);
  --line-soft:    rgba(17,22,20,0.08);
  --line-dark-soft:rgba(232,227,216,0.09);

  --font-display: "Space Grotesk", "IBM Plex Sans Condensed", system-ui, sans-serif;
  --font-body:    "Inter", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", "Space Mono", ui-monospace, monospace;

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --sect-y: clamp(68px, 10vh, 140px);
  --radius: 3px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.5s;

  color-scheme: light;
}

/* ---- 2. Reset / base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
::selection { background: rgba(169,107,50,0.24); }

/* Ambient warm mineral texture — very faint engineered grid. Decorative. */
body::before {
  content:""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 640px at 82% -10%, rgba(169,107,50,0.07), transparent 60%),
    radial-gradient(820px 560px at 4% 110%, rgba(53,92,80,0.06), transparent 60%),
    linear-gradient(transparent 0, transparent calc(100% - 1px), var(--line-soft) 100%),
    linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), var(--line-soft) 100%);
  background-size: 100% 100%, 100% 100%, 100% 80px, 80px 100%;
}

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 200;
  background: var(--graphite); color: var(--canvas); padding: 10px 16px;
  border-radius: var(--radius); transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---- 3. Layout helpers -------------------------------------------------- */
.aw-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.aw-section { position: relative; z-index: 1; padding-block: var(--sect-y); }
.aw-section--tight { padding-block: clamp(40px, 6vh, 88px); }
.aw-divider { border: 0; height: 1px; background: var(--line); margin: 0; }
.measure { max-width: 66ch; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 820px){ .split { grid-template-columns: 1fr; } }

/* ---- 4. Typography ------------------------------------------------------ */
.h-display {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 0.98;
  letter-spacing: -0.028em; margin: 0.4rem 0 0;
}
.h-1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.04;
  letter-spacing: -0.022em; margin: 0;
}
.h-3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem,2.2vw,1.7rem); letter-spacing: -0.015em; margin: 0; line-height: 1.12; }
.eyebrow {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze); margin: 0;
}
.lede { font-size: clamp(1.02rem, 1.5vw, 1.22rem); line-height: 1.55; color: var(--ink); margin: 0.9rem 0 0; }
.text-steel { color: var(--ash); }
.mono-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash); margin: 0; }
.sig { color: var(--bronze); }

/* ---- 5. Buttons / links ------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.06em;
  padding: 0.85em 1.35em; border-radius: var(--radius);
  border: 1px solid transparent; transition: all .25s var(--ease); white-space: nowrap;
}
.btn--primary { background: var(--bronze); color: #FBF7EF; border-color: var(--bronze); }
.btn--primary:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--bronze); color: var(--bronze); }
.btn--sm { padding: 0.55em 0.9em; font-size: 0.74rem; }
.btn .arw, .link-arrow .arw { transition: transform .25s var(--ease); }
.btn:hover .arw, .link-arrow:hover .arw { transform: translateX(3px); }
.link-arrow { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.05em; color: var(--bronze); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.link-arrow:hover { border-color: var(--bronze); }

/* On dark surfaces */
.on-dark .btn--ghost, .hero .btn--ghost, .finalcta .btn--ghost { color: var(--canvas); border-color: var(--line-dark); }
.on-dark .btn--ghost:hover, .hero .btn--ghost:hover, .finalcta .btn--ghost:hover { color: var(--gold); border-color: var(--gold); }

:where(a,button,input,select,textarea):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* ---- 6. Header ---------------------------------------------------------- */
.aw-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .3s var(--ease), border-color .3s var(--ease); border-bottom: 1px solid transparent; }
.aw-header.is-scrolled { background: rgba(232,227,216,0.82); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-bottom-color: var(--line); }
.aw-header__inner { max-width: var(--maxw); margin-inline: auto; padding: 0.75rem var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand__mark { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.12em; font-size: 1.02rem; color: var(--ink); }
.brand__sub { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); margin-top: 4px; }
.aw-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav-link { font-size: 0.9rem; color: var(--ink); position: relative; padding: 4px 0; transition: color .2s var(--ease); }
.nav-link:hover { color: var(--bronze); }
.nav-link[aria-current="page"] { color: var(--bronze); }
.nav-link[aria-current="page"]::after { content:""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--bronze); }
.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); color: var(--ink); border: 1px solid var(--line); transition: all .2s var(--ease); }
.icon-btn:hover { color: var(--bronze); border-color: var(--bronze); }
.nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); }
.aw-nav .btn-convo { display: inline-flex; }
.header-actions .btn-convo { display: none; }

@media (max-width: 940px){
  .nav-toggle { display: inline-flex; }
  .aw-nav {
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 360px);
    flex-direction: column; align-items: flex-start; gap: 1.25rem;
    background: var(--graphite); padding: 6rem var(--gut) 2rem;
    transform: translateX(100%); transition: transform .35s var(--ease);
    border-left: 1px solid var(--line-dark);
  }
  .aw-nav.is-open { transform: translateX(0); }
  .aw-nav .nav-link { color: var(--canvas); font-size: 1.05rem; }
  .aw-nav .nav-link:hover { color: var(--gold); }
  .aw-nav .btn-convo { margin-top: 0.5rem; }
}

/* ---- 7. Hero (dark) ----------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; background: var(--graphite); color: var(--canvas); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video, .hero__media .poster-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content:""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,32,30,0.62) 0%, rgba(24,32,30,0.48) 40%, rgba(24,32,30,0.9) 100%); }
.hero__grid { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0.55; mix-blend-mode: screen; }
.hero__inner { position: relative; z-index: 2; padding-block: clamp(90px, 16vh, 200px) clamp(56px, 9vh, 120px); }
.hero .eyebrow { color: var(--gold); }
.hero__support { max-width: 62ch; font-size: clamp(1.02rem, 1.5vw, 1.24rem); color: rgba(232,227,216,0.86); margin: 1.5rem 0 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem; }
.hero__micro { margin-top: 1.4rem; color: rgba(232,227,216,0.6); }
.hero__scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.5; animation: scan 7s var(--ease) infinite; }
@keyframes scan { 0%{ transform: translateY(0); opacity:0 } 8%{opacity:.6} 92%{opacity:.6} 100%{ transform: translateY(100svh); opacity:0 } }

/* Poster fallback visibility */
.poster-fallback { display: none; }
.no-video .hero__media video, .no-video .thesis-media video, .no-video .finalcta__media video, .no-video .venture__media video { display: none; }
.no-video .poster-fallback { display: block; }
@media (prefers-reduced-motion: reduce){ .hero__scan { display: none; } }

/* ---- 8. Section 2 — fractures ------------------------------------------- */
.frac-split { align-items: start; }
.frac-list { display: flex; flex-direction: column; gap: 2px; margin-top: 1.8rem; border-top: 1px solid var(--line); }
.frac-btn {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  text-align: left; padding: 1.05rem 0.4rem; border-bottom: 1px solid var(--line);
  color: var(--ink); transition: all .2s var(--ease);
}
.frac-btn .idx { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ash); }
.frac-btn .chev { color: var(--bronze); opacity: 0; transform: translateX(-4px); transition: all .2s var(--ease); font-family: var(--font-mono); }
.frac-btn:hover { padding-left: 0.9rem; color: var(--bronze); }
.frac-btn:hover .chev { opacity: 1; transform: translateX(0); }
.frac-btn[aria-selected="true"] { color: var(--bronze); }
.frac-btn[aria-selected="true"] .idx { color: var(--bronze); }
.frac-btn[aria-selected="true"] .chev { opacity: 1; transform: translateX(0); }
.frac-reveal { position: sticky; top: 96px; background: var(--graphite); color: var(--canvas); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.4rem); }
.frac-reveal .sig { color: var(--gold); }
.frac-reveal .text-steel { color: rgba(232,227,216,0.72); }
.frac-reveal .h-3 { color: var(--canvas); }
.reveal-swap { animation: fade .4s var(--ease); }
@keyframes fade { from{ opacity:0; transform: translateY(6px) } to{ opacity:1; transform:none } }
@media (max-width: 820px){ .frac-reveal { position: static; } }

/* ---- 9. Thesis media + sequence ---------------------------------------- */
.thesis-media { position: relative; margin: clamp(2rem,5vw,3.5rem) 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 21/7; background: var(--graphite); }
.thesis-media video, .thesis-media .poster-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thesis-media::after { content:""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24,32,30,0.5), rgba(24,32,30,0.15) 50%, rgba(24,32,30,0.5)); }
@media (max-width: 720px){ .thesis-media { aspect-ratio: 16/9; } }

.seq { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin-top: 2rem; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seq__step { background: var(--canvas); padding: 1.4rem 1.1rem 1.6rem; transition: background .25s var(--ease); }
.seq__step:hover { background: var(--canvas-raise); }
.seq__num { font-family: var(--font-mono); font-size: 0.72rem; color: var(--bronze); letter-spacing: 0.1em; }
.seq__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin: 0.7rem 0 0.4rem; }
.seq__desc { font-size: 0.86rem; color: var(--ash); margin: 0; line-height: 1.45; }
@media (max-width: 900px){ .seq { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px){ .seq { grid-template-columns: 1fr; } }

/* ---- 10. Authority band ------------------------------------------------- */
.authority-band { margin-top: clamp(2rem,5vw,3rem); padding: clamp(1.6rem,4vw,2.6rem); border-left: 3px solid var(--bronze); background: var(--canvas-raise); border-radius: var(--radius); }
.authority-band p { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem,2.2vw,1.6rem); line-height: 1.24; letter-spacing: -0.01em; margin: 0; }
.authority-band .muted { color: var(--ash); margin-top: 0.5rem; }

/* ---- 11. Command surface (dark) — signature ---------------------------- */
.command {
  background: var(--graphite); color: var(--canvas);
  border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden;
  display: grid; grid-template-columns: 240px 1fr; min-height: 560px;
}
/* Institutional-brief header sits above the surface */
.brief-build { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.brief-build__label { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.brief-build__count { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }
.brief-build__count b { color: var(--bronze); font-weight: 500; }

.command__rail { background: rgba(17,22,20,0.35); border-right: 1px solid var(--line-dark); padding: 1.1rem 0.8rem; display: flex; flex-direction: column; gap: 2px; }
.command__railhdr { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(232,227,216,0.5); padding: 0.4rem 0.8rem 0.8rem; }
.sys-tab { display: flex; align-items: center; gap: 0.7rem; padding: 0.72rem 0.85rem; border-radius: var(--radius); text-align: left; color: rgba(232,227,216,0.8); transition: all .2s var(--ease); border: 1px solid transparent; }
.sys-tab .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); flex: none; transition: all .2s var(--ease); }
.sys-tab[data-accent="moss"] .dot { background: var(--moss); }
.sys-tab .nm { font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0.03em; }
.sys-tab:hover { background: rgba(232,227,216,0.06); color: var(--canvas); }
.sys-tab[aria-selected="true"] { background: rgba(215,168,92,0.14); color: var(--canvas); border-color: rgba(215,168,92,0.4); }
.sys-tab[aria-selected="true"] .dot { background: var(--gold); box-shadow: 0 0 10px rgba(215,168,92,0.7); }

.command__stage { position: relative; display: grid; grid-template-rows: auto 1fr; }
.cmd-back { position: absolute; top: 1rem; left: 1rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.05em; color: rgba(232,227,216,0.72); padding: 0.4em 0.7em; border: 1px solid var(--line-dark); border-radius: var(--radius); background: rgba(17,22,20,0.5); transition: all .2s var(--ease); }
.cmd-back:hover { color: var(--gold); border-color: var(--gold); }

.command__viz { position: relative; min-height: 220px; background: radial-gradient(120% 100% at 20% 0%, rgba(53,92,80,0.16), transparent 60%), var(--graphite); border-bottom: 1px solid var(--line-dark); overflow: hidden;
  /* viz palette hooks used by the SVG generator */
  --viz-bg: var(--graphite); --viz-fg: var(--canvas); --viz-dim: rgba(232,227,216,0.42);
  --viz-line: var(--line-dark-soft); --viz-edge: var(--line-dark);
}
.command__viz > .viz-bg-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.16; filter: grayscale(0.3) contrast(1.05); }
.command__viz svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
.viz-status { position: absolute; top: 1rem; right: 1rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(232,227,216,0.6); }
.viz-status .live { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion: reduce){ .viz-status .live { animation: none; } }
.viz-scanlabel { position: absolute; bottom: 0.85rem; left: 1rem; z-index: 2; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(232,227,216,0.45); }

.command__panel { --acc: var(--bronze); padding: clamp(1.6rem, 3vw, 2.6rem); display: flex; }
.command__panel[data-accent="moss"] { --acc: var(--moss); }
.command__panel .sys-sig { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0 0 1rem; }
.command__panel h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 1rem; color: var(--canvas); }
.command__panel .problem { color: rgba(232,227,216,0.78); margin: 0 0 1.4rem; }
.signals { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
.signal-chip { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; padding: 0.4em 0.8em; border: 1px solid var(--line-dark); border-radius: 999px; color: var(--canvas); background: rgba(232,227,216,0.04); }
.signal-chip::before { content:"› "; color: var(--acc); }
.outcome { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; line-height: 1.3; color: var(--canvas); padding-left: 0.9rem; border-left: 2px solid var(--acc); margin: 0 0 1.6rem; }
.status-tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(232,227,216,0.6); }
.command__foot { margin-top: auto; display: flex; flex-direction: column; gap: 1rem; }
.command__foot .foot-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.command__foot .cta-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.command__foot .btn--primary { background: var(--acc); border-color: var(--acc); color: #FBF7EF; }
.command__foot .btn--primary:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.cmd-convo { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: rgba(232,227,216,0.8); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.cmd-convo:hover { color: var(--gold); border-color: var(--gold); }

/* Add-to-brief toggle */
.brief-add { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.04em; padding: 0.6em 1em; border: 1px solid var(--line-dark); border-radius: var(--radius); color: var(--canvas); transition: all .2s var(--ease); }
.brief-add .tick { display: none; }
.brief-add:hover { border-color: var(--gold); color: var(--gold); }
.brief-add[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: rgba(215,168,92,0.1); }
.brief-add[aria-pressed="true"] .tick { display: inline; }
.brief-add[aria-pressed="true"] .add-label { display: none; }

@media (max-width: 760px){
  .command { grid-template-columns: 1fr; }
  .command__rail { flex-direction: row; overflow-x: auto; gap: 0.5rem; border-right: 0; border-bottom: 1px solid var(--line-dark); scrollbar-width: thin; }
  .command__railhdr { display: none; }
  .sys-tab { flex: none; }
  /* Focused-view behaviour: rail collapses when a system is focused */
  .command.is-focused .command__rail { display: none; }
  .command:not(.is-focused) .command__stage { display: none; }
}

/* Persistent Institutional Brief tray */
.brief-tray { position: fixed; z-index: 90; right: clamp(12px, 3vw, 28px); bottom: clamp(12px, 3vw, 28px); width: min(92vw, 340px);
  background: var(--graphite); color: var(--canvas); border: 1px solid var(--line-dark); border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(17,22,20,0.35); padding: 1.1rem 1.2rem; transform: translateY(140%); opacity: 0; transition: transform .4s var(--ease), opacity .3s var(--ease); }
.brief-tray.is-shown { transform: translateY(0); opacity: 1; }
.brief-tray__hd { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.brief-tray__hd h4 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0; }
.brief-tray__clear { font-family: var(--font-mono); font-size: 0.66rem; color: rgba(232,227,216,0.55); }
.brief-tray__clear:hover { color: var(--gold); }
.brief-tray__names { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; margin: 0.6rem 0 0.2rem; line-height: 1.3; }
.brief-tray__count { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(232,227,216,0.6); }
.brief-tray__continue { margin-top: 0.9rem; width: 100%; justify-content: center; background: var(--bronze); border-color: var(--bronze); color: #FBF7EF; }
.brief-tray__continue:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* ---- 12. Principles ----------------------------------------------------- */
.principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 2.2rem; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.principle { background: var(--canvas); padding: clamp(1.4rem,3vw,2rem); }
.principle .k { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); }
.principle h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin: 0.8rem 0 0.5rem; }
.principle p { margin: 0; color: var(--ash); font-size: 0.92rem; }
@media (max-width: 820px){ .principles { grid-template-columns: 1fr; } }

/* ---- 13. The Forge ------------------------------------------------------ */
.ventures { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(14px,2vw,22px); margin-top: 2.4rem; }
.venture { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--graphite); color: var(--canvas); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.venture:hover { transform: translateY(-4px); border-color: var(--bronze); box-shadow: 0 20px 44px rgba(17,22,20,0.22); }
.venture__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--graphite); }
.venture__media video, .venture__media .poster-fallback, .venture__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.venture__media::after { content:""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,32,30,0.15), rgba(24,32,30,0.86)); }
.venture__body { position: relative; z-index: 1; margin-top: -42%; padding: clamp(1.1rem,2vw,1.5rem); }
.venture__domain { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.5rem; }
.venture__name { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin: 0 0 0.5rem; }
.venture__mission { font-size: 0.88rem; color: rgba(232,227,216,0.82); margin: 0 0 1rem; line-height: 1.45; }
.venture__foot { display: flex; }
.venture__status { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--canvas); border: 1px solid var(--line-dark); border-radius: 999px; padding: 0.35em 0.8em; }
@media (max-width: 980px){ .ventures { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .ventures { grid-template-columns: 1fr; } .venture__media{ aspect-ratio: 16/10; } .venture__body{ margin-top: -34%; } }

/* ---- 14. Engagement ----------------------------------------------------- */
.engage { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 2.2rem; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.engage__step { background: var(--canvas); padding: clamp(1.3rem,2.5vw,1.9rem); }
.engage__num { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--bronze); }
.engage__step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; margin: 0.7rem 0 0.5rem; }
.engage__step p { margin: 0; color: var(--ash); font-size: 0.9rem; line-height: 1.5; }
@media (max-width: 820px){ .engage { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .engage { grid-template-columns: 1fr; } }

/* ---- 15. Briefings cards (shared) -------------------------------------- */
.brief-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,2vw,20px); margin-top: 2.2rem; }
.brief-card { display: flex; flex-direction: column; gap: 0.7rem; padding: clamp(1.3rem,2.4vw,1.8rem); background: var(--canvas-raise); border: 1px solid var(--line); border-radius: var(--radius); transition: all .25s var(--ease); }
.brief-card:hover { border-color: var(--bronze); transform: translateY(-3px); }
.brief-card__type { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); }
.brief-card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.14rem; line-height: 1.16; letter-spacing: -0.01em; color: var(--ink); }
.brief-card__abs { font-size: 0.9rem; color: var(--ash); line-height: 1.5; }
.brief-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.6rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--ash); border-top: 1px solid var(--line); }
.brief-card__read { color: var(--bronze); }
@media (max-width: 900px){ .brief-grid { grid-template-columns: 1fr; } }

/* ---- 16. Final CTA (dark) ---------------------------------------------- */
.finalcta { position: relative; background: var(--graphite); color: var(--canvas); overflow: hidden; }
.finalcta__media { position: absolute; inset: 0; z-index: 0; }
.finalcta__media video, .finalcta__media .poster-fallback { width: 100%; height: 100%; object-fit: cover; }
.finalcta__media::after { content:""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,32,30,0.82), rgba(24,32,30,0.92)); }
.finalcta__inner { position: relative; z-index: 1; text-align: center; max-width: 780px; }
.finalcta__inner .h-1 { color: var(--canvas); }
.finalcta__inner .lede { color: rgba(232,227,216,0.82); margin-inline: auto; }
.finalcta__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin: 2rem 0 1.3rem; }
.finalcta .mono-label { color: rgba(232,227,216,0.6); }

/* ---- 17. Footer (dark) -------------------------------------------------- */
.aw-footer { background: var(--graphite); color: var(--canvas); border-top: 1px solid var(--line-dark); position: relative; z-index: 1; }
.aw-footer .aw-wrap { padding-block: clamp(3rem,6vw,4.5rem); }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); }
.footer-brand .brand__mark { color: var(--canvas); font-size: 1.2rem; }
.footer-brand p { color: rgba(232,227,216,0.66); max-width: 42ch; margin: 1rem 0 0; font-size: 0.92rem; }
.footer-col h4 { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0 0 1rem; }
.footer-col a { display: block; color: rgba(232,227,216,0.78); padding: 0.35rem 0; font-size: 0.92rem; transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--gold); }
.footer-col a[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: clamp(2rem,4vw,3rem); padding-top: 1.4rem; border-top: 1px solid var(--line-dark); }
.footer-status { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(232,227,216,0.5); }
.footer-legal { display: flex; gap: 1.2rem; font-family: var(--font-mono); font-size: 0.72rem; color: rgba(232,227,216,0.6); }
.footer-legal a:hover { color: var(--gold); }
@media (max-width: 720px){ .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ---- 18. Search overlay (shared) --------------------------------------- */
.search-overlay { position: fixed; inset: 0; z-index: 150; display: none; background: rgba(17,22,20,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: clamp(1rem,8vh,6rem) var(--gut); }
.search-overlay.is-open { display: block; }
.search-panel { max-width: 640px; margin-inline: auto; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 30px 80px rgba(17,22,20,0.4); overflow: hidden; }
.search-box { display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); color: var(--ash); }
.search-box input { flex: 1; border: 0; background: none; font-size: 1.05rem; color: var(--ink); outline: none; }
.search-hint { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1.2rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); border-bottom: 1px solid var(--line-soft); }
.search-results { max-height: 52vh; overflow-y: auto; }
.search-result { display: flex; align-items: baseline; gap: 1rem; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--line-soft); transition: background .15s var(--ease); }
.search-result:hover { background: var(--canvas-sink); }
.r-kind { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze); flex: none; width: 96px; }
.r-title { display: block; font-weight: 600; color: var(--ink); }
.r-desc { display: block; font-size: 0.86rem; color: var(--ash); }
.search-empty { padding: 1.5rem 1.2rem; color: var(--ash); font-size: 0.92rem; }
.search-note { margin: 0; padding: 0.7rem 1.2rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); background: var(--canvas-sink); }

/* ---- 19. Page hero (briefings / contact) ------------------------------- */
.page-hero { padding-block: clamp(120px, 20vh, 220px) clamp(30px, 5vh, 60px); border-bottom: 1px solid var(--line); }

/* ---- 20. Briefings page ------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.6rem; }
.filter-chip { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; padding: 0.5em 1em; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); transition: all .2s var(--ease); }
.filter-chip:hover { border-color: var(--bronze); color: var(--bronze); }
.filter-chip[aria-pressed="true"] { background: var(--bronze); border-color: var(--bronze); color: #FBF7EF; }
.briefings-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.results-count { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); }
.inline-search { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ash); min-width: 240px; }
.inline-search input { flex: 1; border: 0; background: none; outline: none; color: var(--ink); font-size: 0.92rem; }
.brief-page-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,2vw,20px); }
.brief-page-grid .brief-card { cursor: pointer; }
.brief-card.is-hidden { display: none; }
.brief-body { display: none; }
.no-results { display: none; padding: 3rem 0; text-align: center; color: var(--ash); }
.no-results.is-shown { display: block; }
@media (max-width: 900px){ .brief-page-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .brief-page-grid { grid-template-columns: 1fr; } }

/* ---- 21. Reader pane ---------------------------------------------------- */
.reader { position: fixed; inset: 0; z-index: 160; display: none; }
.reader.is-open { display: block; }
.reader__scrim { position: absolute; inset: 0; background: rgba(17,22,20,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.reader__pane { position: absolute; top: 0; right: 0; height: 100%; width: min(92vw, 640px); background: var(--canvas); border-left: 1px solid var(--line); padding: clamp(1.6rem,4vw,3rem); overflow-y: auto; animation: slidein .4s var(--ease); }
@keyframes slidein { from{ transform: translateX(30px); opacity: 0 } to{ transform:none; opacity:1 } }
.reader__close { position: absolute; top: 1.2rem; right: 1.2rem; border: 1px solid var(--line); }
.reader__close:hover { border-color: var(--bronze); color: var(--bronze); }
.reader__type { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); margin: 0 0 0.8rem; }
.reader__pane h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem,3vw,2.1rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 0.8rem; }
.reader__meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--ash); margin: 0 0 1.6rem; }
.reader__body p { margin: 0 0 1rem; color: var(--ink); }
@media (prefers-reduced-motion: reduce){ .reader__pane { animation: none; } }

/* ---- 22. Contact -------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
.contact-aside { position: sticky; top: 110px; }
.contact-facts { display: flex; flex-direction: column; gap: 1.4rem; }
.contact-fact .k { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); }
.contact-fact .v { margin: 0.4rem 0 0; color: var(--ash); font-size: 0.94rem; }
.jabusco-marker { margin-top: 2rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); border-top: 1px solid var(--line); padding-top: 1rem; }
/* Selected-systems display (from institutional brief) */
.brief-selected { margin-bottom: 1.8rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-left: 3px solid var(--bronze); border-radius: var(--radius); background: var(--canvas-raise); }
.brief-selected.is-empty { display: none; }
.brief-selected .k { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); }
.brief-selected .names { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; margin: 0.5rem 0 0; }
.brief-selected .count { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); margin-top: 0.3rem; }

.form { display: flex; flex-direction: column; gap: 1.2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 620px){ .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
.field .req { color: var(--bronze); }
.field input, .field select, .field textarea { width: 100%; padding: 0.8rem 0.9rem; background: var(--canvas-raise); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-family: var(--font-body); font-size: 0.96rem; transition: border-color .2s var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--bronze); outline: none; }
.field textarea { min-height: 140px; resize: vertical; }
.consent { display: flex; align-items: flex-start; gap: 0.7rem; }
.consent input { margin-top: 0.25rem; accent-color: var(--bronze); width: 16px; height: 16px; flex: none; }
.consent label { font-size: 0.9rem; color: var(--ash); }
.form-status { display: none; padding: 1.1rem 1.2rem; border-radius: var(--radius); font-size: 0.94rem; }
.form-status.is-shown { display: block; }
.form-status .st-head { display: block; font-family: var(--font-display); font-weight: 600; margin-bottom: 0.3rem; }
.form-status.ok { background: rgba(53,92,80,0.12); border: 1px solid var(--moss); color: var(--ink); }
.form-status.ok .st-head { color: var(--moss); }
.form-status.err { background: rgba(169,107,50,0.1); border: 1px solid var(--bronze); color: var(--ink); }
.form-status.err .st-head { color: var(--bronze-deep); }
.form-status code { font-family: var(--font-mono); font-size: 0.85em; background: var(--canvas-sink); padding: 0.1em 0.4em; border-radius: 3px; }
@media (max-width: 860px){ .contact-grid { grid-template-columns: 1fr; } .contact-aside { position: static; } }

/* ---- 23. Reveal on scroll ---------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- 24. Command viz layers (video background + live SVG) --------------- */
.command__viz > .viz-bg-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.18; filter: grayscale(0.25) contrast(1.05); z-index: 0; }
.viz-svg { position: absolute; inset: 0; z-index: 1; }
.viz-svg svg { width: 100%; height: 100%; display: block; }

/* ---- 25. Contact — contextual nav -------------------------------------- */
.explore-back { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--bronze); margin-bottom: 0.7rem; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.explore-back:hover { border-color: var(--bronze); }
.crumb { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); margin-bottom: 1.4rem; }
.crumb a:hover { color: var(--bronze); }
.crumb span[aria-current] { color: var(--ink); }

/* ---- 26. Contact — editable Institutional Brief ------------------------- */
.brief-editor { margin-bottom: 1.8rem; padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-left: 3px solid var(--bronze); border-radius: var(--radius); background: var(--canvas-raise); }
.brief-editor__hd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brief-editor__hd .k { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); }
.brief-editor__edit { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4em 0.8em; transition: all .2s var(--ease); }
.brief-editor__edit:hover { border-color: var(--bronze); color: var(--bronze); }
.brief-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0.7rem; }
.brief-chip { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: 0.78rem; padding: 0.45em 0.55em 0.45em 0.85em; border: 1px solid var(--line); border-radius: 999px; background: var(--canvas); color: var(--ink); }
.chip-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 0.9rem; line-height: 1; color: var(--ash); transition: all .15s var(--ease); }
.chip-x:hover { background: var(--bronze); color: #FBF7EF; }
.brief-chip--add { cursor: pointer; padding: 0.45em 0.85em; border-style: dashed; color: var(--bronze); background: transparent; }
.brief-chip--add:hover { border-color: var(--bronze); background: rgba(169,107,50,0.06); }
.brief-editor__count { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); margin: 0; }
.brief-editor.is-empty .brief-editor__count { color: var(--ash); }

/* ---- 27. Contact — what happens next ----------------------------------- */
.whatnext { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas-sink); }
.whatnext .k { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); }
.whatnext p { margin: 0.5rem 0 0; color: var(--ink); font-size: 0.94rem; }
.consent label a { color: var(--bronze); border-bottom: 1px solid transparent; }
.consent label a:hover { border-color: var(--bronze); }

/* ---- 28. Systems Explorer drawer --------------------------------------- */
.drawer { position: fixed; inset: 0; z-index: 170; display: none; }
.drawer.is-open { display: block; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(17,22,20,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.drawer__pane { position: absolute; top: 0; right: 0; height: 100%; width: min(94vw, 560px); background: var(--canvas); border-left: 1px solid var(--line); display: flex; flex-direction: column; animation: slidein .4s var(--ease); }
@media (prefers-reduced-motion: reduce){ .drawer__pane { animation: none; } }
.drawer__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: clamp(1.3rem,3vw,1.8rem); border-bottom: 1px solid var(--line); }
.drawer__hd .btn { border: 1px solid var(--line); }
.drawer__hd .btn:hover { border-color: var(--bronze); color: var(--bronze); }
.drawer__list { flex: 1; overflow-y: auto; padding: clamp(1rem,2vw,1.4rem); display: flex; flex-direction: column; gap: 0.7rem; }
.dsys { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--canvas-raise); transition: border-color .2s var(--ease); }
.dsys:hover { border-color: rgba(169,107,50,0.4); }
.dsys__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dsys__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin: 0; }
.dsys__role { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); margin: 0.25rem 0 0; }
.dsys__toggle { flex: none; color: var(--ink); border-color: var(--line); }
.dsys__toggle:hover { border-color: var(--bronze); color: var(--bronze); }
.dsys__toggle[aria-pressed="true"] { border-color: var(--moss); color: var(--moss); background: rgba(53,92,80,0.08); }
.dsys__toggle[aria-pressed="true"] .tick { display: inline; }
.dsys__toggle .tick { display: none; }
.dsys__toggle[aria-pressed="true"] .brief-add-text::after { content: ""; }
.dsys__problem { color: var(--ink); font-size: 0.92rem; margin: 0.8rem 0 0; }
.dsys__more { margin-top: 0.6rem; }
.dsys__more summary { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--bronze); cursor: pointer; list-style: none; }
.dsys__more summary::-webkit-details-marker { display: none; }
.dsys__more summary::before { content: "＋ "; }
.dsys__more[open] summary::before { content: "－ "; }
.dsys__taster { font-size: 0.88rem; color: var(--ash); margin: 0.7rem 0 0; }
.dsys__signals { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.7rem 0 0; }
.dsys__signals .signal-chip { color: var(--ink); border-color: var(--line); background: var(--canvas); }
.dsys__signals .signal-chip::before { content:"› "; color: var(--bronze); }
.dsys__outcome { font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; color: var(--ink); border-left: 2px solid var(--bronze); padding-left: 0.8rem; margin: 0.8rem 0 0; }
.drawer__foot { border-top: 1px solid var(--line); padding: clamp(1rem,2vw,1.4rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.drawer__count { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }
.drawer__count b { color: var(--bronze); }
.drawer__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.drawer__full { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--bronze); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.drawer__full:hover { border-color: var(--bronze); }

/* ============================================================================
   ADAPTIVE HEADER (supersedes §6) — two intentional states, refined icons,
   mobile drawer with backdrop. State is toggled by IntersectionObserver
   (.is-dark over the hero; light-mineral otherwise).
   ========================================================================== */
.aw-header {
  /* Light-mineral state (default; Contact + Briefings load in this state) */
  --header-bg: rgba(232, 227, 216, 0.88);
  --header-fg: #111614;
  --header-muted: #6C736E;
  --header-line: rgba(17, 22, 20, 0.14);
  --header-cta: #A96B32;
  --header-cta-hover: #8B5626;
  --nav-underline: var(--header-cta);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-line);
  box-shadow: 0 1px 0 rgba(17,22,20,0.04);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.aw-header.is-scrolled { box-shadow: 0 6px 24px rgba(17,22,20,0.08); } /* legacy no-op safety */
.aw-header.is-dark {
  /* Dark-hero state */
  --header-bg: rgba(24, 32, 30, 0.38);
  --header-fg: #F7F0E4;
  --header-muted: rgba(247, 240, 228, 0.66);
  --header-line: rgba(247, 240, 228, 0.16);
  --header-cta: #A96B32;
  --header-cta-hover: #D7A85C;
  --nav-underline: var(--header-cta-hover);
  box-shadow: none;
}
/* Legibility scrim behind the header on dark video, independent of any frame */
.aw-header.is-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(24,32,30,0.55), rgba(24,32,30,0));
}
.aw-header__inner { padding-block: 0.62rem; }

.brand__mark { color: var(--header-fg); font-size: 1.04rem; transition: color .35s var(--ease); }
.brand__sub {
  color: var(--header-muted); font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  margin-top: 5px; transition: color .35s var(--ease);
}

/* Desktop header is a single, deliberate line.  The brand remains a two-tier
   mark, but its descriptor and every navigation label must not wrap. */
@media (min-width: 941px) {
  .aw-header__inner { gap: clamp(0.85rem, 1.4vw, 1.5rem); }
  .brand { flex: 0 0 auto; min-width: max-content; }
  .brand__sub, .aw-nav .nav-link { white-space: nowrap; }
  .aw-nav {
    flex: 1 1 auto; min-width: 0; justify-content: center; flex-wrap: nowrap;
    gap: clamp(0.85rem, 1.35vw, 1.5rem);
  }
  .header-actions { flex: 0 0 auto; }
}

/* Keep the labels intact through compact desktop widths rather than permitting
   a mid-word line break before the existing mobile drawer breakpoint. */
@media (min-width: 941px) and (max-width: 1200px) {
  .aw-nav { gap: 0.8rem; }
  .aw-nav .nav-link { font-size: 0.84rem; }
  .aw-header .btn { font-size: 0.76rem; padding-inline: 1rem; }
}

.nav-link { color: var(--header-fg); position: relative; padding: 6px 2px; transition: color .2s var(--ease); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--nav-underline); transform: scaleX(0); transform-origin: left;
  transition: transform .24s var(--ease);
}
.nav-link:hover, .nav-link:focus-visible { color: var(--nav-underline); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--nav-underline); }
.nav-link--ext { color: var(--header-muted); }
.nav-link--ext:hover { color: var(--nav-underline); }

/* CTA follows the active state's tokens */
.aw-header .btn--primary { background: var(--header-cta); border-color: var(--header-cta); color: #FBF7EF; }
.aw-header .btn--primary:hover { background: var(--header-cta-hover); border-color: var(--header-cta-hover); color: var(--ink); transform: translateY(-1px); }
.header-actions .btn-convo { display: none; } /* nav carries the desktop CTA */

/* Borderless, refined icon controls with a 44px touch target */
.icon-btn, .nav-toggle {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--header-fg); border-radius: 0;
  transition: color .2s var(--ease);
}
.icon-btn:focus-visible, .nav-toggle:focus-visible { outline: 2px solid var(--nav-underline); outline-offset: 2px; }

/* Search Orbit */
.orbit { overflow: visible; }
.orbit__ring, .orbit__stem { transition: stroke .22s var(--ease); }
.orbit__signal { fill: var(--gold); transform-box: fill-box; transform-origin: center; transition: transform .28s var(--ease), fill .22s var(--ease); }
.icon-search:hover .orbit__ring, .icon-search:hover .orbit__stem { stroke: var(--header-cta); }
.icon-search:hover .orbit__signal { transform: translate(1.6px, -1.4px); }

/* Signal Menu → clean close mark */
.signal-menu { overflow: visible; }
.sm-line { transform-box: fill-box; transform-origin: center; transition: transform .28s var(--ease); }
.sm-node { fill: var(--gold); transform-box: fill-box; transform-origin: center; transition: opacity .2s var(--ease), fill .2s var(--ease); }
.nav-toggle:hover .sm-node { fill: var(--header-cta-hover); }
.nav-toggle:hover .sm-line { stroke: var(--header-cta-hover); }
.nav-toggle.is-active .sm-line--top { transform: translateY(3px) rotate(45deg); }
.nav-toggle.is-active .sm-line--bot { transform: translateY(-3px) rotate(-45deg); }
.nav-toggle.is-active .sm-node { opacity: 0; }

/* Desktop shows the full nav; toggle hidden */
.nav-toggle { display: none; }
.aw-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }

/* Full-screen backdrop behind the mobile drawer */
.nav-scrim {
  position: fixed; inset: 0; z-index: 95; background: rgba(17,22,20,0.5);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .28s var(--ease);
}
.nav-scrim.is-shown { opacity: 1; }
.nav-scrim[hidden] { display: none; }

@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; }
  .aw-nav {
    position: fixed; inset: 0 0 0 auto; width: min(86vw, 380px); z-index: 96;
    flex-direction: column; align-items: flex-start; gap: 1.25rem;
    background: var(--graphite); color: var(--canvas);
    padding: 5.5rem var(--gut) 2rem;
    transform: translateX(100%); transition: transform .28s var(--ease);
    border-left: 1px solid var(--line-dark); overflow-y: auto;
  }
  .aw-nav.is-open { transform: translateX(0); }
  /* Mobile nav has its own dark surface — legibility never depends on the video */
  .aw-nav .nav-link { color: var(--canvas); font-size: 1.06rem; }
  .aw-nav .nav-link::after { background: var(--gold); }
  .aw-nav .nav-link:hover, .aw-nav .nav-link--ext:hover { color: var(--gold); }
  .aw-nav .btn-convo--nav { display: inline-flex; margin-top: 0.6rem; background: var(--bronze); border-color: var(--bronze); color: #FBF7EF; }
  .aw-nav .btn-convo--nav:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
}

/* Legal & Terms is intentionally a drawer destination, not an additional
   desktop-header item. It appears with the navigation only on tablet/mobile. */
.nav-link--drawer-only { display: none; }
@media (max-width: 940px) { .aw-nav .nav-link--drawer-only { display: block; } }

/* ---- 29. Legal & Terms register ---------------------------------------- */
.legal-hero { padding: clamp(132px, 22vh, 220px) 0 clamp(48px, 8vh, 88px); border-bottom: 1px solid var(--line); }
.legal-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: clamp(2rem, 7vw, 7rem); align-items: end; }
.legal-hero .h-1 { margin-top: 1rem; }
.legal-control { margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.legal-control div { display: grid; grid-template-columns: minmax(115px, .8fr) 1.2fr; gap: 1rem; padding: .72rem 0; border-bottom: 1px solid var(--line-soft); }
.legal-control div:last-child { border-bottom: 0; }
.legal-control dt, .legal-entry__id, .legal-entry__status { font-family: var(--font-mono); font-size: .68rem; line-height: 1.35; letter-spacing: .11em; text-transform: uppercase; }
.legal-control dt, .legal-entry__id { color: var(--bronze); }
.legal-control dd { margin: 0; color: var(--ash); font-size: .86rem; }
.legal-nav { position: sticky; top: 57px; z-index: 20; background: rgba(232,227,216,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.legal-nav__inner { display: flex; gap: clamp(1rem, 3vw, 2.4rem); overflow-x: auto; scrollbar-width: thin; }
.legal-nav a { flex: 0 0 auto; padding: .9rem 0 .8rem; font-family: var(--font-mono); font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ash); border-bottom: 2px solid transparent; }
.legal-nav a:hover { color: var(--bronze); border-bottom-color: var(--bronze); }
.legal-section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr); gap: 2rem; align-items: end; margin-bottom: 1.8rem; }
.legal-section-head .h-2 { margin-top: .75rem; }
.legal-section-head > p { margin: 0; color: var(--ash); line-height: 1.55; font-size: .95rem; }
.legal-band { background: var(--canvas-raise); border-block: 1px solid var(--line); }
.legal-register { border-top: 1px solid var(--line); }
.legal-entry { display: grid; grid-template-columns: minmax(108px, .45fr) minmax(0, 1.45fr) minmax(130px, .55fr); gap: 1.4rem; align-items: start; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.legal-entry h3 { margin: 0; font-family: var(--font-display); font-size: 1.07rem; line-height: 1.2; }
.legal-entry p { margin: .45rem 0 0; color: var(--ash); font-size: .9rem; line-height: 1.5; }
.legal-entry .link-arrow { justify-self: start; margin-top: .1rem; }
.legal-entry__status { color: var(--ash); padding-top: .15rem; }
.legal-principles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.legal-principles li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.legal-principles li > span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--bronze); padding-top: .2rem; }
.legal-principles h3 { margin: 0; font-family: var(--font-display); font-size: 1.08rem; }
.legal-principles p { margin: .35rem 0 0; color: var(--ash); font-size: .93rem; line-height: 1.5; }
.legal-contact { margin-top: clamp(2rem, 5vw, 4rem); padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--graphite); color: var(--canvas); display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; border: 1px solid var(--line-dark); }
.legal-contact .eyebrow { color: var(--gold); }
.legal-contact p:last-child { max-width: 56ch; margin: .65rem 0 0; color: rgba(232,227,216,.76); line-height: 1.5; }
.legal-doc-hero { padding: clamp(128px, 20vh, 200px) 0 clamp(44px, 7vh, 80px); border-bottom: 1px solid var(--line); }
.legal-doc-hero .explore-back { margin-bottom: clamp(2rem, 5vh, 4rem); }
.legal-doc-hero .eyebrow { margin-top: 1.2rem; }
.legal-doc-hero .h-1 { margin-top: .8rem; max-width: 17ch; }
.legal-doc-hero .lede { max-width: 62ch; }
.legal-control--document { max-width: 760px; margin-top: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
.legal-document-body { max-width: 860px; }
.legal-clause { padding: clamp(1.5rem, 4vw, 2.8rem) 0; border-top: 1px solid var(--line); }
.legal-clause .h-2 { margin: .7rem 0; }
.legal-clause > p:last-child { max-width: 66ch; margin: 0; color: var(--ash); font-size: 1.02rem; line-height: 1.7; }
@media (max-width: 760px) { .legal-control--document { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .legal-hero__grid, .legal-section-head { grid-template-columns: 1fr; } .legal-nav { top: 58px; } .legal-entry { grid-template-columns: 1fr; gap: .6rem; } .legal-entry__status { padding-top: 0; } .legal-contact { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) {
  .sm-line, .orbit__signal, .aw-nav, .nav-scrim { transition: none; }
}

/* ============================================================================
   HEADER STACKING FIX — the fixed mobile drawer must resolve against the
   viewport, not the header. backdrop-filter (like filter/transform) makes an
   element the containing block for fixed descendants, which clipped the drawer.
   Move the blur onto ::before so no drawer ancestor filters/transforms.
   ========================================================================== */
.aw-header {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 0; box-shadow: none;
}
/* Translucent blurred surface lives on the pseudo-element (both states) */
.aw-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-line);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.aw-header.is-scrolled::before { box-shadow: 0 6px 24px rgba(17,22,20,0.08); }
/* Dark-hero state: legibility scrim layered over the translucent surface */
.aw-header.is-dark { box-shadow: none; }
.aw-header.is-dark::before {
  background: linear-gradient(180deg, rgba(24,32,30,0.55), rgba(24,32,30,0)), var(--header-bg);
  border-bottom-color: transparent;
}
/* Keep the toggle above the open drawer so the signal-menu icon can close it */
.header-actions { position: relative; z-index: 30; }

/* Backdrop sits beneath the drawer, above the page */
.nav-scrim { position: fixed; inset: 0; z-index: 110; }

@media (max-width: 940px) {
  /* Actual viewport drawer — full height, scrollable, above the backdrop */
  .aw-nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(88vw, 420px); height: 100dvh; z-index: 20;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 1rem var(--gut) 2rem;
  }
  /* The persistent header controls close/open the drawer. Keep both icons
     unmistakable over the dark hero and drawer without duplicating Close. */
  .header-actions .icon-btn, .header-actions .nav-toggle { color: var(--gold); }
  .aw-nav > .nav-link:first-of-type { margin-top: 0.5rem; }
}

/* Neutralize any legacy header blur that could re-trap the fixed drawer */
.aw-header.is-scrolled { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ============================================================================
   AI INFRASTRUCTURE section (#infrastructure) — parallel capability beside the
   systems. Reuses the mineral/bronze grammar; real, visible video with poster
   fallbacks and restrained overlays/grid lines.
   ========================================================================== */
.infra-lead { align-items: center; gap: clamp(28px, 5vw, 64px); }
.infra-proof {
  margin-top: 1.4rem; padding-left: 0.95rem; border-left: 2px solid var(--bronze);
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.02em;
  line-height: 1.55; color: var(--ash); text-transform: none;
}
/* Media figures — stable visible height, cover, overlay + grid, visible pre-JS */
.infra-media { position: relative; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--graphite); }
.infra-media--primary { aspect-ratio: 4 / 3; min-height: 260px; }
.infra-media--secondary { aspect-ratio: 16 / 10; min-height: 200px; }
.infra-media video, .infra-media .poster-fallback, .infra-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.infra-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(24,32,30,0.10) 0%, rgba(24,32,30,0.16) 55%, rgba(24,32,30,0.72) 100%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(231,237,245,0.05) 46px 47px),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(231,237,245,0.05) 46px 47px);
}
.infra-media__tag {
  position: absolute; left: 0.9rem; bottom: 0.8rem; z-index: 1;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
}
.infra-media__tag::before { content: "\25C6  "; opacity: 0.8; }

/* Video is the visible default; poster is fallback-only (it comes later in the
   HTML and is absolutely positioned, so it must be explicitly hidden in motion). */
.infra-media .poster-fallback { display: none; }
.no-video .infra-media video { display: none; }
.no-video .infra-media .poster-fallback { display: block; }

/* Four-part capability sequence */
.infra-seq { list-style: none; margin: clamp(2rem,5vw,3.2rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.infra-step { background: var(--canvas); padding: clamp(1.3rem,2.4vw,1.8rem); }
.infra-step__num { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--bronze); }
.infra-step__name { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.14; margin: 0.7rem 0 0.5rem; }
.infra-step p { margin: 0; color: var(--ash); font-size: 0.9rem; line-height: 1.5; }
@media (max-width: 900px){ .infra-seq { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .infra-seq { grid-template-columns: 1fr; } }

/* Closing block + CTAs */
.infra-close { align-items: center; gap: clamp(28px, 5vw, 64px); margin-top: clamp(2rem,5vw,3.2rem); }
.infra-close__line { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem,2.2vw,1.55rem); line-height: 1.24; letter-spacing: -0.01em; margin: 0 0 1.6rem; }
.infra-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }
@media (max-width: 820px){
  .infra-lead, .infra-close { grid-template-columns: 1fr; }
  .infra-close .infra-media--secondary { order: 2; }
}

/* ============================================================================
   RESPONSIVE UX CORRECTION (mobile 320–767, tablet 768–1024).
   Desktop ≥1025px is intentionally untouched. Global-safe rules first.
   ========================================================================== */

/* --- 1. Kill page-level horizontal overflow (preserve vertical overscroll) - */
html { overflow-x: clip; }
body { overflow-x: clip; }
img, video, svg, canvas { max-width: 100%; }
.aw-wrap > *, .split > *, .infra-seq, .seq, .principles, .engage, .ventures,
.brief-grid, .brief-page-grid, .command, .filters, .signals { min-width: 0; }

/* --- Fixed-header anchor offset (no layout change) ------------------------ */
:root { --header-h: 62px; }
[id] { scroll-margin-top: calc(var(--header-h) + 10px); }

/* --- 2. Adaptive fixed header: restrained colour transition -------------- */
.aw-header, .aw-header .brand__mark, .aw-header .brand__sub, .aw-header .nav-link,
.aw-header .icon-btn, .aw-header .nav-toggle, .aw-header::before {
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .aw-header, .aw-header *, .aw-header::before { transition: none !important; }
}
/* Solid-colour fallback where backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .aw-header::before { background: var(--canvas); }
  .aw-header.is-dark::before { background: var(--graphite); }
}
.brand__sub { white-space: nowrap; }

/* ==========================================================================
   TABLET + MOBILE  (≤1024px)
   ========================================================================== */
@media (max-width: 1024px) {

  /* --- Header: near-opaque AetherWork surface (contrast independent of hero) */
  .aw-header { --header-bg: rgba(232, 227, 216, 0.96); }
  .aw-header.is-dark { --header-bg: rgba(20, 27, 25, 0.94); }
  .aw-header::before { backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05); }
  .brand__sub { font-size: 0.58rem; letter-spacing: 0.14em; }

  /* --- 3. Hero sits edge-to-edge; no perimeter frame --------------------- */
  .hero { max-width: 100%; border: 0; }

  /* --- 5. Systems Explorer: full selector visible, compact rail --------- */
  .brief-build { align-items: flex-start; }
  .brief-build__label { font-size: 1.35rem; line-height: 1.1; }
  .brief-build__count { font-size: 0.8rem; }
  .command { grid-template-columns: 1fr; min-height: 0; }
  /* rail is a horizontal, touch-friendly chip bar that never overflows the page */
  .command__rail {
    flex-direction: row; align-items: center; gap: 0.5rem;
    border-right: 0; border-bottom: 1px solid var(--line-dark);
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; padding: 0.7rem 0.8rem;
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent);
            mask-image: linear-gradient(to right, #000 90%, transparent);
  }
  .command__railhdr { display: none; }
  .sys-tab { flex: 0 0 auto; scroll-snap-align: center; }
  /* Always show both rail and detail panel — never the empty focused console */
  .command.is-focused .command__rail { display: flex; }
  .command:not(.is-focused) .command__stage { display: grid; }
  .cmd-back { display: none; }               /* rail is always present; no forced return */
  .command__viz { aspect-ratio: 16 / 10; min-height: 168px; }
  .command__panel { padding: 1.3rem 1.15rem 1.5rem; }

  /* --- 6. Institutional-problem list → inline accordion ------------------ */
  .frac-reveal { display: none; }            /* remote panel hidden on mobile/tablet */
  .frac-acc {
    display: block; overflow: hidden; max-height: 0; opacity: 0;
    transition: max-height .3s var(--ease), opacity .3s var(--ease);
    border-left: 2px solid var(--bronze); margin: 0 0 0 0; padding: 0 0 0 0.9rem;
  }
  .frac-acc.is-open { max-height: 520px; opacity: 1; padding-top: 0.4rem; padding-bottom: 1.2rem; }
  .frac-acc .sig { color: var(--bronze); }
  .frac-acc .h-3 { margin: 0.5rem 0 0.6rem; }

  /* --- 7. Briefings reader: full-width sheet, own scroll ----------------- */
  .reader__pane {
    width: 100%; max-width: 100%; height: 100dvh; height: 100svh;
    border-left: 0; padding: calc(env(safe-area-inset-top) + 3.2rem) 1.25rem calc(env(safe-area-inset-bottom) + 2rem);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .reader__scrim { display: none; }          /* no narrow blurred side strip */
  .reader__close {
    position: fixed; top: calc(env(safe-area-inset-top) + 0.8rem); right: 1rem; z-index: 2;
    background: var(--graphite); color: var(--gold); border-color: var(--gold);
    min-height: 44px; min-width: 44px;
  }
  .reader__pane h2 { font-size: clamp(1.5rem, 5vw, 2rem); }

  /* --- Buttons: fit viewport, wrap labels, ≥44px ------------------------- */
  .btn { white-space: normal; min-height: 44px; }
  .hero__cta, .infra-cta, .finalcta__cta { width: 100%; }
  .hero__cta .btn, .infra-cta .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
}

/* ==========================================================================
   TABLET typography (768–1024)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .h-display { font-size: clamp(3.5rem, 7vw, 4.25rem); }   /* ~56–68px */
}

/* ==========================================================================
   MOBILE typography + spacing (≤767)
   ========================================================================== */
@media (max-width: 767px) {
  :root { --sect-y: clamp(46px, 7vh, 76px); --gut: clamp(18px, 5vw, 28px); }
  .h-display { font-size: clamp(2.75rem, 11vw, 3.25rem); line-height: 1.02; }  /* ~44–52px */
  .h-1 { font-size: clamp(2.15rem, 8vw, 2.75rem); line-height: 1.06; }         /* ~36–44px */
  .lede { font-size: clamp(1.12rem, 4.6vw, 1.25rem); line-height: 1.58; }      /* ~18–20px */
  .hero__support { font-size: clamp(1.08rem, 4.4vw, 1.2rem); line-height: 1.55; }
  /* trim excessive vertical gaps while keeping sectional separation */
  .authority-band { margin-top: 1.6rem; }
  .seq, .principles, .infra-seq, .engage { margin-top: 1.4rem; }
  .brief-build { margin-bottom: 0.9rem; }
}