/* ============================================================
   DJC SPATIAL — "The Studio, On View"
   Shared foundation consumed by every page.
   Palette: lamplit atelier (cream-on-charcoal read as raked
   lamplight). Motion: the visitor moves, the room holds still.
   Finished, lit state is the default; motion is additive and
   fully gated behind body.js-motion + prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Substrate */
  --black:#070706; --ink:#0e0d0b; --charcoal:#15130f; --charcoal-2:#1d1a15;
  --cream:#f4efe6; --white:#fffaf1; --muted:#b9b0a4; --dim:#948a7d;

  /* Accent gels */
  --tan:#d8bd8a; --gold:#f2d99d; --blue:#88c7ff; --green:#98d6a7;
  --rose:#ef9b91; --violet:#c9a8ff;
  --clay:#cf6f4d;               /* RESERVED: live / in-progress mark only */

  /* Structure */
  --line:rgba(216,189,138,.24);
  --line-soft:rgba(216,189,138,.11);
  --panel:rgba(15,14,12,.78);
  --panel-solid:#11100d;
  --shadow:0 36px 110px rgba(0,0,0,.56);
  --ease:cubic-bezier(.22,.8,.26,1);
  --max:1180px;

  /* Per-room accent (default = entrance hall) */
  --accent:var(--tan);

  /* Studio lighting (the pacing curve lives here) */
  --spot:.28;        /* spotlight / wash opacity */
  --wash:26rem;      /* lamp pool radius */
  --rim:.24;         /* exhibit frame rim-light strength */

  /* Derived light colours (never hardcode a hue) */
  --wash-fill:color-mix(in srgb, var(--accent) 16%, transparent);
  --rim-line:color-mix(in srgb, var(--accent) calc(var(--rim) * 100%), transparent);
  --spark:var(--clay);

  /* Motion spine */
  --p:0;             /* scroll progress 0..1, written per active room */
  --reveal-dur:620ms;
  --reveal-shift:18px;
  --stagger:90ms;
  --parallax-cap:24px;
  --thresh-dur:520ms;
}

/* Pacing curve = three lighting tokens change per room, no new hues */
body.page-home      { --accent:var(--tan);    --spot:.18; --wash:30rem; --rim:.20; }
body.page-services  { --accent:var(--blue);   --spot:.24; --wash:38rem; --rim:.22; }
body.page-method    { --accent:var(--gold);   --spot:.34; --wash:36rem; --rim:.30; }
body.page-playbook  { --accent:var(--green);  --spot:.30; --wash:22rem; --rim:.26; }
body.page-enablement{ --accent:var(--blue);   --spot:.26; --wash:26rem; --rim:.24; }
body.page-thinking  { --accent:var(--violet); --spot:.50; --wash:24rem; --rim:.34; }
body.page-about     { --accent:var(--rose);   --spot:.30; --wash:34rem; --rim:.22; }
body.page-contact   { --accent:var(--tan);    --spot:.16; --wash:20rem; --rim:.18; }

/* ---------- 2. RESET / BASE ---------- */
* { box-sizing:border-box; }

html {
  min-height:100%;
  background:var(--black);
  color-scheme:dark;
  scroll-behavior:smooth;
}

body {
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:
    linear-gradient(180deg, rgba(7,7,6,.92), rgba(10,9,8,.98)),
    radial-gradient(circle at 17% 15%, rgba(136,199,255,.07), transparent 24rem),
    radial-gradient(circle at 78% 11%, rgba(216,189,138,.10), transparent 28rem),
    radial-gradient(circle at 65% 78%, rgba(152,214,167,.05), transparent 26rem);
  color:var(--white);
  font-family:"Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Raked-light drafting grain (upper hall) */
body::before {
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background-image:
    linear-gradient(rgba(216,189,138,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,189,138,.03) 1px, transparent 1px);
  background-size:68px 68px;
  mask-image:linear-gradient(180deg, black 0%, transparent 82%);
}

/* Studio-floor vignette + lamp pool from below */
body::after {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,7,6,.06), rgba(7,7,6,.86)),
    radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 58%);
}

img, svg { max-width:100%; }
a { color:inherit; }
button, input, textarea, select { font:inherit; }
button { color:inherit; }
::selection { background:color-mix(in srgb, var(--accent) 30%, transparent); color:var(--white); }

.skip-link {
  position:fixed; left:1rem; top:-5rem; z-index:1000;
  padding:.7rem 1rem; background:var(--cream); color:var(--black); text-decoration:none;
}
.skip-link:focus { top:1rem; }

.site-shell { min-height:100vh; position:relative; isolation:isolate; }

/* Faint architectural ruled lines behind the whole building */
.site-shell::before {
  content:""; position:fixed; inset:72px 0 0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(112deg, transparent 0 56%, rgba(216,189,138,.04) 56% 56.35%, transparent 56.35%),
    linear-gradient(68deg, transparent 0 62%, rgba(136,199,255,.035) 62% 62.25%, transparent 62.25%);
  opacity:.7;
}

main { position:relative; z-index:1; }

/* ---------- 3. THRESHOLD WASH (room load-in) ---------- */
.threshold-wash {
  position:fixed; inset:0; z-index:200; pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 70%),
             rgba(7,7,6,.5);
  opacity:0; visibility:hidden;
  transition:opacity var(--thresh-dur) var(--ease), visibility 0s linear var(--thresh-dur);
}
body.entering .threshold-wash { opacity:.55; visibility:visible; transition:none; }

/* ---------- 4. NAVIGATION SHELL (canonical, one method hierarchy) ---------- */
.site-nav {
  position:sticky; top:0; z-index:120;
  display:flex; align-items:center; gap:1rem;
  min-height:76px;
  padding:.7rem clamp(1rem,4vw,2.6rem);
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(7,7,6,.97), rgba(7,7,6,.72));
  backdrop-filter:blur(18px);
  transition:box-shadow .3s ease;
}
.site-nav.is-scrolled { box-shadow:0 18px 70px rgba(0,0,0,.42); }

.brand {
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--white); text-decoration:none;
  font-weight:800; font-size:1.02rem; letter-spacing:0; white-space:nowrap;
}
.brand::before {
  content:""; width:9px; height:9px; margin-right:.7rem;
  border:1px solid rgba(216,189,138,.64);
  background:rgba(216,189,138,.2);
  box-shadow:0 0 24px rgba(216,189,138,.4);
}

.nav-toggle {
  display:none;
  margin-left:auto;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  border:1px solid var(--line-soft); background:rgba(216,189,138,.04);
  cursor:pointer;
}
.nav-toggle-bars { position:relative; width:20px; height:2px; background:var(--cream); display:block; transition:background .2s ease; }
.nav-toggle-bars::before, .nav-toggle-bars::after {
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--cream);
  transition:transform .28s var(--ease), top .28s var(--ease);
}
.nav-toggle-bars::before { top:-6px; }
.nav-toggle-bars::after { top:6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top:0; transform:rotate(-45deg); }

.nav-menu { margin-left:auto; }
.nav-list {
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:.35rem;
}
.nav-list > li { position:relative; display:flex; align-items:center; }

.nav-item {
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:44px; padding:.56rem .7rem;
  color:#c3b9ab; text-decoration:none;
  font-size:.84rem; font-weight:700; letter-spacing:0;
  transition:color .2s ease;
}
.nav-item:hover,
.nav-item:focus-visible,
.nav-item[aria-current="page"] { color:var(--white); }
.nav-parent[aria-current] { color:var(--white); }

.nav-caret {
  display:inline-grid; place-items:center;
  width:30px; min-height:44px; margin-left:-.45rem;
  border:0; background:transparent; cursor:pointer; color:#c3b9ab;
}
.nav-caret::after {
  content:""; width:7px; height:7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .26s var(--ease), color .2s ease;
}
.nav-has-panel:hover .nav-caret::after,
.nav-caret[aria-expanded="true"]::after { transform:translateY(0) rotate(225deg); color:var(--white); }

/* Method mega-panel: one operating system, three nested components */
.nav-panel {
  position:absolute; top:calc(100% + .5rem); right:0;
  width:min(30rem, 82vw);
  padding:1.15rem;
  border:1px solid var(--line-soft);
  background:linear-gradient(155deg, rgba(29,26,21,.98), rgba(11,10,8,.98));
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .24s var(--ease), transform .24s var(--ease), visibility 0s linear .24s;
  z-index:130;
}
.nav-has-panel:hover > .nav-panel,
.nav-has-panel:focus-within > .nav-panel,
.nav-panel.is-open {
  opacity:1; visibility:visible; transform:none;
  transition:opacity .26s var(--ease), transform .26s var(--ease);
}
.nav-panel-lead {
  margin:0 0 .9rem; padding-bottom:.8rem;
  border-bottom:1px solid var(--line-soft);
  color:var(--muted);
  font-family:"Space Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size:.72rem; line-height:1.5;
}
.nav-component {
  display:grid; grid-template-columns:2.2rem 1fr; align-items:baseline; gap:.7rem;
  padding:.7rem .55rem;
  color:#c9c0b4; text-decoration:none;
  border:1px solid transparent;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.nav-component + .nav-component { margin-top:.15rem; }
.nav-component:hover,
.nav-component:focus-visible,
.nav-component[aria-current="page"] {
  color:var(--white);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border-color:color-mix(in srgb, var(--accent) 34%, transparent);
}
.nav-num {
  font-family:"Space Mono", monospace; font-size:.72rem; font-weight:700;
  color:var(--accent);
}
.nav-component strong { display:block; font-size:.94rem; font-weight:800; }
.nav-component span { display:block; margin-top:.15rem; color:var(--dim); font-size:.78rem; line-height:1.4; }

.nav-cta {
  color:var(--gold);
  border:1px solid rgba(216,189,138,.4);
  background:rgba(216,189,138,.055);
  padding:.72rem .95rem;
}
.nav-cta:hover, .nav-cta:focus-visible {
  color:var(--white);
  border-color:rgba(216,189,138,.72);
  background:rgba(216,189,138,.13);
}

/* Living floor-plan marker (the single clay live mark) */
.nav-marker {
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:var(--spark);
  box-shadow:0 0 12px color-mix(in srgb, var(--spark) 70%, transparent);
  transform:translateX(0);
  transition:transform .42s var(--ease), width .42s var(--ease), opacity .3s ease;
  opacity:0; pointer-events:none;
}
.nav-marker.is-placed { opacity:1; }

/* ---------- 5. TYPOGRAPHY ---------- */
h1, h2, h3, p { margin-top:0; }

h1, .display-xl {
  margin-bottom:1.25rem; max-width:12ch;
  font-size:clamp(3.4rem, 7.2vw, 6.4rem); line-height:.91; letter-spacing:0;
}
h2, .display-l {
  margin-bottom:1rem; max-width:14ch;
  font-size:clamp(2.4rem, 5vw, 4.2rem); line-height:.98; letter-spacing:0;
}
h3, .display-m {
  margin-bottom:.75rem;
  font-size:clamp(1.28rem, 2.4vw, 1.72rem); line-height:1.06; letter-spacing:0;
}
.display-s { font-size:1.14rem; line-height:1.2; font-weight:700; }

.eyebrow, .kicker, .coordinate, .card-index, .trail-label, .room-label {
  color:var(--accent);
  font-family:"Space Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size:.68rem; font-weight:700; letter-spacing:0; text-transform:uppercase;
}
.eyebrow { margin-bottom:1rem; }

/* Setup line — the spoken host one-liner (only mono run in sentence case) */
.setup-line {
  position:relative;
  max-width:52ch; margin:0 0 1.5rem; padding-left:2.5rem;
  color:var(--muted);
  font-family:"Space Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size:clamp(.82rem, 1.1vw, .95rem); font-weight:400; line-height:1.5;
  text-transform:none;
}
.setup-line::before {
  content:""; position:absolute; left:0; top:.62em;
  width:1.7rem; height:2px; background:var(--spark); transform-origin:left;
  box-shadow:0 0 10px color-mix(in srgb, var(--spark) 60%, transparent);
}

.lede {
  max-width:65ch; color:#cbc3b7;
  font-size:clamp(1.06rem, 1.5vw, 1.18rem); line-height:1.68;
}
.body-copy { color:#b8afa4; line-height:1.72; font-size:1rem; }
.muted { color:var(--muted); }
.tiny { color:var(--dim); font-size:.82rem; line-height:1.52; }

/* ---------- 6. LAYOUT ---------- */
.section { position:relative; padding:7rem clamp(1.15rem,4vw,4rem); }
.section.tight { padding-block:4.6rem; }
.section-inner { width:min(var(--max),100%); margin:0 auto; position:relative; }

.room-hero {
  min-height:calc(100vh - 76px);
  display:grid; align-items:center;
  padding:6rem clamp(1.15rem,4vw,4rem);
  position:relative; overflow:hidden;
}
.room-hero.compact { min-height:74vh; }
.room-hero::before, .room-hero::after { content:""; position:absolute; pointer-events:none; }

/* Studio floor receding into the dim hall */
.room-hero::before {
  left:4%; right:4%; bottom:-18%; height:46%;
  transform:perspective(720px) rotateX(64deg); transform-origin:bottom;
  background:
    linear-gradient(rgba(216,189,138,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,189,138,.1) 1px, transparent 1px);
  background-size:56px 56px; opacity:.24;
  mask-image:linear-gradient(180deg, black, transparent 84%);
}

/* The one warm pool of light — follows pointer, dimmed by --spot */
.room-hero::after {
  inset:0;
  background:
    radial-gradient(ellipse at 18% 24%, rgba(255,250,241,.07), transparent 24rem),
    radial-gradient(circle at var(--mx,78%) var(--my,20%),
      color-mix(in srgb, var(--accent) 45%, transparent), transparent var(--wash));
  opacity:calc(.4 + var(--spot));
}

.hero-grid, .hero-single {
  width:min(var(--max),100%); margin:0 auto; position:relative; z-index:1;
}
.hero-grid {
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(330px,.9fr);
  gap:4.2rem; align-items:center;
}
.hero-single { width:min(1000px,100%); }
.hero-single h1 { max-width:14ch; }

/* Reusable lamp layer a page can drop into any positioned room */
.lamp {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,32%),
    color-mix(in srgb, var(--accent) 42%, transparent), transparent var(--wash));
  opacity:var(--spot); mix-blend-mode:screen;
}

.actions { display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:48px; padding:.88rem 1.14rem;
  border:1px solid var(--line); color:var(--white); text-decoration:none;
  font-size:.9rem; font-weight:800;
  background:rgba(255,255,255,.02);
  transition:transform .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
}
.btn:hover, .btn:focus-visible {
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--accent) 60%, transparent);
  background:color-mix(in srgb, var(--accent) 9%, transparent);
}
.btn.primary {
  color:var(--black); border-color:var(--accent);
  background:linear-gradient(135deg, var(--gold), var(--accent));
  box-shadow:0 22px 72px color-mix(in srgb, var(--accent) 18%, transparent);
}
.btn.primary:hover, .btn.primary:focus-visible { background:var(--cream); }
.btn.quiet { color:#c9c0b3; }

/* ---------- 7. EXHIBIT FRAMES (panels under the lamp) ---------- */
.panel, .spatial-card, .proof-card, .path-card, .trust-card, .media-frame,
.capability-console, .method-lab, .room-object, .book, .exhibit, .contact-grid {
  position:relative; overflow:hidden;
  border:1px solid var(--line-soft);
  background:
    linear-gradient(145deg, rgba(255,250,241,.045), rgba(255,250,241,.006) 42%),
    rgba(13,12,10,.76);
  box-shadow:var(--shadow);
}
/* Rim light + pointer-follow lamp on every frame */
.panel::before, .spatial-card::before, .proof-card::before, .path-card::before,
.trust-card::before, .media-frame::before, .capability-console::before,
.method-lab::before, .room-object::before, .book::before, .exhibit::before,
.contact-grid::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) calc(var(--rim)*40%), transparent), transparent 36%),
    radial-gradient(circle at var(--mx,78%) var(--my,12%),
      color-mix(in srgb, var(--accent) 18%, transparent), transparent 13rem);
  opacity:.72;
}
.panel > *, .spatial-card > *, .proof-card > *, .path-card > *, .trust-card > *,
.media-frame > *, .capability-console > *, .method-lab > *, .room-object > *,
.book > *, .exhibit > *, .contact-grid > * { position:relative; z-index:1; }

.panel { padding:2.2rem; }
.spatial-card { padding:2rem; }

/* ---------- 8. HOME: FOUR Cs BENCH ---------- */
.capability-console {
  min-height:560px; display:grid; align-content:end; padding:1.4rem;
  transform-style:preserve-3d;
}
.capability-console::after {
  content:""; position:absolute; left:11%; right:11%; top:8%; height:54%;
  border:1px solid rgba(216,189,138,.2);
  background:
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--accent) 19%, transparent), transparent 32%),
    linear-gradient(rgba(216,189,138,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,189,138,.05) 1px, transparent 1px);
  background-size:auto, 26px 26px, 26px 26px;
  transform:perspective(560px) rotateX(58deg) rotateZ(-4deg);
  box-shadow:0 40px 110px rgba(0,0,0,.46);
}
.console-title { max-width:30rem; margin-top:auto; }
.console-steps, .model-stage {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:1.6rem;
  border:1px solid var(--line-soft); background:var(--line-soft);
}
.capability-console .console-steps { grid-template-columns:repeat(2,1fr); }

.stage {
  min-height:185px; padding:1.1rem;
  background:rgba(9,9,8,.88); position:relative; overflow:hidden;
}
/* Cumulative pass: each C's bar grows taller than the last (line->light) */
.stage::after {
  content:""; position:absolute; left:1rem; bottom:.9rem;
  width:clamp(2rem,36%,4rem); height:var(--lift,20%);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 12%, transparent),
    color-mix(in srgb, var(--accent) 34%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-bottom:0; opacity:.46; z-index:0;
  transform:scaleY(1); transform-origin:bottom;
}
.capability-console .stage::after { height:calc(var(--lift,20%) * .56); max-height:4.1rem; }
/* When armed, bars rise as the bench reveals */
body.js-motion .capability-console .stage::after { transform:scaleY(.12); transition:transform var(--reveal-dur) var(--ease); transition-delay:calc(var(--i,0) * var(--stagger)); }
body.js-motion .capability-console.is-visible .stage::after,
body.js-motion .capability-console .stage.is-visible::after { transform:scaleY(1); }

.stage strong { display:block; margin-bottom:.7rem; font-size:1rem; overflow-wrap:anywhere; }
.stage p { color:#aaa29a; line-height:1.52; font-size:.92rem; }
.stage > * { position:relative; z-index:1; }

/* ---------- 9. OBSERVATION / SURVEY ---------- */
.space-map, .split-room {
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:3.6rem; align-items:center;
}
.observation-deck {
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:1px;
  border:1px solid var(--line-soft); background:var(--line-soft);
}
.observation-copy, .observation-wall { min-height:430px; padding:2rem; background:rgba(10,10,9,.9); }
.observation-wall {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:
    linear-gradient(rgba(216,189,138,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,189,138,.07) 1px, transparent 1px),
    rgba(10,10,9,.86);
  background-size:44px 44px;
}
.wall-note {
  align-self:end; min-height:230px; padding:1rem;
  background:rgba(15,14,12,.82); border:1px solid rgba(216,189,138,.16);
}
.wall-note:nth-child(2) { transform:translateY(-2.1rem); border-color:rgba(136,199,255,.22); }
.wall-note:nth-child(3) { transform:translateY(-4.2rem); border-color:rgba(152,214,167,.22); }

.proof-grid, .path-grid, .trust-grid, .entry-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
.entry-grid { grid-template-columns:repeat(2,1fr); }
.proof-card, .path-card, .trust-card {
  min-height:255px; padding:1.55rem; color:inherit; text-decoration:none;
  background-color:rgba(10,10,9,.9);
}
.path-card { transition:transform .28s var(--ease), background .28s ease, border-color .28s ease; }
.path-card:hover, .path-card:focus-visible {
  transform:translateY(-5px);
  background-color:rgba(25,22,17,.96);
  border-color:color-mix(in srgb, var(--accent) 38%, transparent);
}
.card-index { display:block; margin-bottom:2rem; }
.card-foot { margin-top:1.15rem; color:var(--dim); font-size:.84rem; line-height:1.5; }

/* Survey commission that turns to reveal outcome (front) vs mechanism (back) */
.commission { position:relative; min-height:300px; perspective:1200px; }
.commission-inner {
  position:relative; width:100%; height:100%; min-height:300px;
  transition:transform .6s var(--ease); transform-style:preserve-3d;
}
.commission:hover .commission-inner,
.commission:focus-within .commission-inner { transform:rotateY(180deg); }
.commission-face {
  position:absolute; inset:0; padding:1.55rem;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid var(--line-soft); background:rgba(10,10,9,.92);
}
.commission-back { transform:rotateY(180deg); background:rgba(18,16,13,.95); }

/* ---------- 10. METHOD ATRIUM + PINNED ASSEMBLY ---------- */
.method-preview {
  display:grid; grid-template-columns:.7fr repeat(3,1fr); gap:1px;
  border:1px solid var(--line-soft); background:var(--line-soft);
}
.method-preview > * { min-height:235px; padding:1.45rem; background:rgba(10,10,9,.88); }
.method-preview .method-core {
  display:grid; align-content:center;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 46%),
    rgba(10,10,9,.92);
}

.method-lab {
  min-height:620px; padding:2rem;
  display:grid; grid-template-columns:.78fr 1.22fr; gap:2rem; align-items:center;
}
.os-map {
  position:relative; min-height:480px;
  border:1px solid rgba(216,189,138,.14);
  background:
    linear-gradient(rgba(216,189,138,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,189,138,.045) 1px, transparent 1px),
    rgba(7,7,6,.54);
  background-size:42px 42px;
}
.os-core, .os-node {
  position:absolute; display:grid; place-items:center;
  color:var(--white); text-align:center; text-decoration:none;
}
.os-core {
  left:50%; top:50%; width:164px; aspect-ratio:1; transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb, var(--accent) 54%, transparent);
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), rgba(7,7,6,.94) 70%);
  box-shadow:0 0 88px color-mix(in srgb, var(--accent) 16%, transparent);
  font-weight:800;
}
.os-node {
  width:150px; min-height:118px; padding:.9rem;
  border:1px solid rgba(216,189,138,.22); background:rgba(13,12,10,.9);
  font-weight:800;
  transition:transform .25s var(--ease), border-color .25s ease;
}
.os-node span { display:block; margin-top:.35rem; color:var(--dim); font-size:.78rem; font-weight:500; }
.os-node:hover, .os-node:focus-visible {
  transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Settled state: the three components rest side by side on ONE shared bench,
   the same horizontal rail below the core they lock into. */
.os-node.playbook   { left:6%;  top:64%; }
.os-node.enablement { left:calc(50% - 75px); top:64%; }
.os-node.thinking   { right:6%; top:64%; }

/* Leader lines: a stretched-coordinate SVG overlay whose endpoints genuinely
   originate at each bench node and terminate at the core, so the pieces visibly
   lock together instead of being decorated with floating diagonals. */
.os-leaders { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.os-leader {
  fill:none; stroke:color-mix(in srgb, var(--accent) 60%, transparent);
  stroke-width:1; vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:0;   /* pathLength=1; rests fully drawn */
}

/* Pinned assembly: a tall track with a sticky stage; nodes lower onto one bench.
   Node/line motion is driven purely by the room's --p (set by the engine). */
.pin-track { position:relative; }
.pin-stage { position:sticky; top:76px; min-height:calc(100vh - 76px); display:grid; align-items:center; }
body.js-motion .os-node[data-assemble] { will-change:transform, opacity; }
/* Two-axis convergence: each piece flies in from its own direction and settles
   onto the shared bench as its --p window completes. */
body.js-motion .os-node[data-assemble="1"] {
  transform:translate3d(
    calc((1 - clamp(0, calc(var(--p) * 3), 1)) * -220px),
    calc((1 - clamp(0, calc(var(--p) * 3), 1)) * -180px), 0);
  opacity:clamp(0, calc(var(--p) * 3), 1);
}
body.js-motion .os-node[data-assemble="2"] {
  transform:translate3d(
    calc((1 - clamp(0, calc((var(--p) - .33) * 3), 1)) * 240px),
    calc((1 - clamp(0, calc((var(--p) - .33) * 3), 1)) * -150px), 0);
  opacity:clamp(0, calc((var(--p) - .33) * 3), 1);
}
body.js-motion .os-node[data-assemble="3"] {
  transform:translate3d(0,
    calc((1 - clamp(0, calc((var(--p) - .66) * 3), 1)) * 200px), 0);
  opacity:clamp(0, calc((var(--p) - .66) * 3), 1);
}
/* Keyboard focus must always reveal the node the user has landed on,
   even if scroll --p has not yet lit it (sticky pin-stage). */
body.js-motion .os-node[data-assemble]:focus,
body.js-motion .os-node[data-assemble]:focus-within {
  transform:translate3d(0, 0, 0) !important;
  opacity:1 !important;
}
/* Each leader draws in exactly as its matching node lands on the bench. */
body.js-motion .os-leader[data-leader="1"] { stroke-dashoffset:calc(1 - clamp(0, calc(var(--p) * 3), 1)); }
body.js-motion .os-leader[data-leader="2"] { stroke-dashoffset:calc(1 - clamp(0, calc((var(--p) - .33) * 3), 1)); }
body.js-motion .os-leader[data-leader="3"] { stroke-dashoffset:calc(1 - clamp(0, calc((var(--p) - .66) * 3), 1)); }

/* Component 0X-of-3 indicator (replaces the old method-trail) */
.component-index {
  display:inline-flex; align-items:center; gap:.6rem;
  margin-bottom:1rem;
  color:var(--muted);
  font-family:"Space Mono", monospace; font-size:.7rem; text-transform:uppercase;
}
.component-index b { color:var(--accent); font-weight:700; }
.component-index .dots { display:inline-flex; gap:.3rem; }
.component-index .dots i {
  width:6px; height:6px; border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  display:inline-block;
}
.component-index .dots i.on { background:var(--accent); }

/* ---------- 11. SHAPES / RUNWAY / MEDIA ---------- */
.line-circle-sphere { display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem; align-items:stretch; }
.shape-panel { min-height:380px; display:grid; align-content:end; }
.shape { width:180px; aspect-ratio:1; margin:0 auto 2rem; position:relative; display:grid; place-items:center; }
.shape.line::before { content:""; width:88%; height:2px; background:linear-gradient(90deg, transparent, var(--dim), var(--accent), transparent); }
.shape.circle {
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius:50%;
  box-shadow:inset 0 0 32px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 36px color-mix(in srgb, var(--accent) 8%, transparent);
}
.shape.sphere {
  border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,.2), transparent 12%),
    radial-gradient(circle at 40% 36%, color-mix(in srgb, var(--accent) 28%, transparent), rgba(15,14,12,.98) 52%, #060606 78%);
  box-shadow:inset -26px -28px 50px rgba(0,0,0,.7), 0 35px 110px rgba(0,0,0,.45), 0 0 60px color-mix(in srgb, var(--accent) 14%, transparent);
}

.service-runway {
  display:grid; grid-template-columns:repeat(5,1fr); min-height:270px;
  border:1px solid var(--line-soft); background:var(--line-soft); perspective:900px;
}
.runway-step { position:relative; padding:1.15rem; background:rgba(10,10,9,.88); overflow:hidden; }
.runway-step::after {
  content:""; position:absolute; left:12%; right:12%; bottom:0; height:62%;
  transform:perspective(420px) rotateX(58deg); transform-origin:bottom;
  border:1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background:color-mix(in srgb, var(--accent) 9%, transparent);
}

.media-frame { min-height:420px; padding:.75rem; margin:0; }
.media-frame img { display:block; width:100%; height:100%; min-height:390px; object-fit:cover; filter:saturate(.88) contrast(1.05); }
.media-caption {
  position:absolute; left:1.25rem; right:1.25rem; bottom:1.25rem; padding:.9rem;
  background:rgba(7,7,6,.75); border:1px solid rgba(216,189,138,.18); color:var(--cream);
}

/* ---------- 12. PLAYBOOK BOOK ---------- */
.book-stage { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:3.5rem; align-items:center; }
.book {
  min-height:480px; display:grid; grid-template-columns:.82fr 1.18fr;
  border-color:color-mix(in srgb, var(--accent) 26%, transparent);
  background:
    linear-gradient(90deg, rgba(0,0,0,.34), transparent 47%, rgba(0,0,0,.46) 50%, transparent),
    rgba(14,13,11,.9);
}
.book-page { display:grid; align-content:center; padding:2rem; border-right:1px solid rgba(216,189,138,.12); }
.book-page:last-child { border-right:0; }
.symbol {
  width:154px; aspect-ratio:1; margin:2rem auto; display:grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--accent) 44%, transparent); border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 64%);
  color:var(--accent); font-family:"Space Mono", monospace; font-size:2rem;
}
.book-tabs, .studio-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.book-tabs button, .studio-tabs button {
  border:1px solid var(--line-soft); background:rgba(216,189,138,.035); color:#c6bfb4;
  padding:.65rem .8rem; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.book-tabs button[aria-selected="true"], .book-tabs button:hover, .book-tabs button:focus-visible,
.studio-tabs button[aria-selected="true"], .studio-tabs button:hover, .studio-tabs button:focus-visible {
  border-color:color-mix(in srgb, var(--accent) 58%, transparent);
  background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--white);
}

/* ---------- 13. THINKING: AFTER-DARK CHAMBERS ---------- */
.studio { position:relative; overflow:hidden; }
.chamber {
  position:relative; min-height:100vh;
  display:grid; align-items:center;
  padding:6rem clamp(1.15rem,4vw,4rem);
  overflow:hidden;
}
.chamber-inner { width:min(var(--max),100%); margin:0 auto; position:relative; z-index:2; }
/* Moving coloured lamp — translates with --p, follows pointer, dims behind */
.chamber-lamp {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,42%),
    color-mix(in srgb, var(--accent) 55%, transparent), transparent var(--wash));
  opacity:var(--spot); mix-blend-mode:screen;
}
body.js-motion .chamber-lamp { transform:translate3d(0, calc(var(--p) * -60px), 0); }
/* Line-drawing completes to full light on enter (line -> light, the scarce reward) */
.chamber-line {
  height:2px; transform-origin:left center;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 78%, transparent), transparent);
  box-shadow:0 0 16px color-mix(in srgb, var(--accent) 40%, transparent);
}
body.js-motion .chamber-line { transform:scaleX(clamp(.04, calc(var(--p) * 1.6), 1)); }
/* Chamber dims once you pass its centre */
body.js-motion [data-chamber] { --local-spot:var(--spot); }

.studio-tabs.chamber-nav {
  position:sticky; top:76px; z-index:5;
  display:flex; gap:.5rem; flex-wrap:wrap;
  padding:.6rem clamp(1.15rem,4vw,4rem);
  background:linear-gradient(180deg, rgba(7,7,6,.9), rgba(7,7,6,.4));
  backdrop-filter:blur(10px);
}

.exhibit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem; }
.exhibit { min-height:250px; padding:1.15rem; border-color:color-mix(in srgb, var(--accent) 14%, transparent); background:rgba(10,10,9,.76); }
.exhibit .tag, .tag {
  display:inline-flex; margin-bottom:1rem; color:var(--accent);
  font-family:"Space Mono", monospace; font-size:.62rem; letter-spacing:0; text-transform:uppercase;
}

/* ---------- 14. CONTACT: NULL-MOTION DESK ---------- */
.contact-screen {
  min-height:calc(100vh - 76px); display:grid; place-items:center;
  padding:2rem clamp(1.15rem,4vw,4rem);
  transition:opacity .5s ease;
}
.contact-grid {
  width:min(1080px,100%); display:grid; grid-template-columns:.82fr 1.18fr; gap:1px;
  background:var(--line-soft);
}
.contact-intro, .contact-form { padding:2.4rem; background:rgba(10,10,9,.9); }
form { display:grid; gap:1rem; }
label { display:grid; gap:.42rem; color:#c7c1b7; font-size:.86rem; font-weight:700; }
input, textarea, select {
  width:100%; border:1px solid rgba(216,189,138,.2);
  background:rgba(255,255,255,.035); color:var(--white); padding:.88rem .95rem; outline:none;
  caret-color:var(--spark);   /* the blinking clay caret */
}
textarea { min-height:128px; resize:vertical; }
input:focus, textarea:focus, select:focus {
  border-color:color-mix(in srgb, var(--accent) 62%, transparent);
  box-shadow:0 0 0 2px var(--charcoal), 0 0 0 4px color-mix(in srgb, var(--accent) 70%, transparent);
  outline:2px solid transparent; outline-offset:2px;
}
.form-status { min-height:1.3rem; color:var(--tan); font-size:.86rem; }
.form-status.error { color:#ffb4a8; }

/* Submission dims the room to a single confirmed line */
body.confirmed .contact-intro > *:not(.confirm-line),
body.confirmed .contact-form form { opacity:.12; transition:opacity .6s ease; }
body.confirmed { --spot:.08; }
.confirm-line { display:none; }
body.confirmed .confirm-line { display:block; }

/* ---------- 15. FOOTER ---------- */
.footer {
  border-top:1px solid var(--line-soft);
  padding:2.4rem clamp(1.2rem,4vw,4rem);
  color:var(--dim); position:relative;
}
.footer-inner {
  width:min(var(--max),100%); margin:0 auto;
  display:flex; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; align-items:center;
}
.footer-brand { display:flex; flex-direction:column; gap:.35rem; }
.footer-brand strong { color:var(--cream); font-size:.98rem; }
.footer-sign {
  font-family:"Space Mono", monospace; font-size:.68rem; text-transform:uppercase; color:var(--dim);
}
.footer-nav { display:flex; flex-wrap:wrap; gap:1.2rem; }
.footer a { color:#aaa399; text-decoration:none; }
.footer a:hover, .footer a:focus-visible { color:var(--white); }

/* ---------- 16. REVEAL CONTRACT (gated) ---------- */
/* Base (no js-motion): finished, lit, fully visible. */
.reveal { opacity:1; transform:none; }
/* Armed hidden state only when motion + IntersectionObserver are safe. */
body.js-motion .reveal {
  opacity:0; transform:translateY(var(--reveal-shift));
  transition:opacity var(--reveal-dur) ease, transform var(--reveal-dur) var(--ease);
  transition-delay:calc(var(--i,0) * var(--stagger));
  will-change:opacity, transform;
}
body.js-motion .reveal.is-visible { opacity:1; transform:none; will-change:auto; }

/* Setup-line pencil stroke draws with its reveal */
body.js-motion .setup-line.reveal::before { transform:scaleX(0); transition:transform var(--thresh-dur) var(--ease) 120ms; }
body.js-motion .setup-line.reveal.is-visible::before { transform:scaleX(1); }

/* Parallax planes: transform-only, driven by --p */
body.js-motion [data-layer] { transform:translate3d(0, calc(var(--p) * var(--shift,0px)), 0); }
[data-layer="back"] { --shift:-18px; }
[data-layer="mid"]  { --shift:-40px; }
[data-layer="fore"] { --shift:26px; }
body.js-motion [data-room].in-view [data-layer] { will-change:transform; }

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width:1080px) {
  .hero-grid, .space-map, .split-room, .observation-deck, .book-stage,
  .method-lab, .contact-grid { grid-template-columns:1fr; }
  .proof-grid, .path-grid, .trust-grid, .entry-grid, .line-circle-sphere,
  .exhibit-grid, .method-preview, .service-runway { grid-template-columns:1fr 1fr; }
}

@media (max-width:880px) {
  .nav-toggle { display:inline-flex; }
  .nav-menu {
    position:absolute; top:100%; left:0; right:0;
    display:none; margin:0;
    padding:1rem clamp(1rem,4vw,2.6rem) 1.4rem;
    background:linear-gradient(180deg, rgba(11,10,8,.99), rgba(11,10,8,.97));
    border-bottom:1px solid var(--line-soft);
    box-shadow:var(--shadow);
  }
  .site-nav.is-open .nav-menu { display:block; }
  .nav-list { flex-direction:column; align-items:stretch; gap:.15rem; }
  .nav-list > li { display:block; }
  .nav-item { width:100%; }
  .nav-caret { position:absolute; right:.2rem; top:.2rem; }
  .nav-panel {
    position:static; width:auto;
    opacity:1; visibility:visible; transform:none;
    box-shadow:none; background:rgba(216,189,138,.03); margin:.2rem 0 .6rem;
    max-height:0; padding-block:0; overflow:hidden; border-color:transparent;
    transition:max-height .3s var(--ease), padding .3s var(--ease);
  }
  .nav-has-panel:hover > .nav-panel { max-height:0; }  /* hover disabled on touch */
  .nav-caret[aria-expanded="true"] ~ .nav-panel,
  .nav-panel.is-open { max-height:30rem; padding:1.1rem; border-color:var(--line-soft); }
  .nav-marker { display:none; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
}

@media (max-width:720px) {
  .room-hero { min-height:auto; padding-top:4.2rem; }
  .room-hero.compact { min-height:auto; }
  .proof-grid, .path-grid, .trust-grid, .entry-grid, .line-circle-sphere,
  .exhibit-grid, .model-stage, .console-steps, .method-preview,
  .service-runway { grid-template-columns:1fr; }
  .observation-wall { grid-template-columns:1fr; }
  .wall-note:nth-child(2), .wall-note:nth-child(3) { transform:none; }
  .capability-console { min-height:460px; }
  .book { grid-template-columns:1fr; }
  .book-page { border-right:0; border-bottom:1px solid rgba(216,189,138,.12); }
  .book-page:last-child { border-bottom:0; }
  .actions .btn { width:100%; }
  /* Degrade heavy parallax to two planes on small screens */
  [data-layer="fore"] { --shift:0px; }
}

/* ---------- 18. REDUCED MOTION = FINISHED LIT STATE ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
  /* Rooms rest fully lit; every exhibit present. */
  :root { --spot:.30; }
  body.page-home, body.page-contact { --spot:.22; }
  .reveal, body.js-motion .reveal { opacity:1 !important; transform:none !important; }
  .setup-line::before, body.js-motion .setup-line.reveal::before { transform:scaleX(1) !important; }
  [data-layer] { transform:none !important; }
  .os-node[data-assemble], body.js-motion .os-node[data-assemble] { transform:none !important; opacity:1 !important; }
  .os-leader, body.js-motion .os-leader { stroke-dashoffset:0 !important; }
  .chamber-line, body.js-motion .chamber-line { transform:scaleX(1) !important; }
  .chamber-lamp, body.js-motion .chamber-lamp { transform:none !important; }
  .capability-console .stage::after,
  body.js-motion .capability-console .stage::after { transform:scaleY(1) !important; }
  .pin-stage { position:static; }
}