/* ANASTASIA — site styles
   Desktop geometry is expressed in reference units (--r = 1px of the 1447px approved reference),
   so the approved composition holds from ~1100px up to 1920px. Below that the layout adapts. */

:root {
  color-scheme: dark;
  /* palette */
  --ink: #080706;
  --obsidian: #110d0b;
  --charcoal: #1a1512;
  --ivory: #f3ece2;
  --ivory-soft: rgba(243, 236, 226, .80);
  --ivory-mute: rgba(243, 236, 226, .62);
  --champagne: #d2ad76;          /* muted from the spec's #D9B071 per lighting direction */
  --gold: #b88b4f;
  --gold-line: rgba(210, 173, 118, .42);
  --gold-hair: rgba(210, 173, 118, .18);
  --magenta: #e3198a;
  --magenta-soft: rgba(227, 25, 138, .38);
  --plum: #8e174e;
  --glass: rgba(18, 14, 12, .30);

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "GFS Baskerville", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r: calc(min(100vw, 1920px) / 1447);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --scene-w: 100vw;
  --nav-h: max(calc(70 * var(--r)), 60px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  background: var(--ink);
  color: var(--ivory);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 1.5px solid var(--champagne); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 8px 14px; background: var(--obsidian); border: 1px solid var(--gold-line); border-radius: 999px; font-size: 14px; }
.skip:focus { top: 12px; }

/* ---------- shared atoms ---------- */
.eyebrow {
  font: 500 max(calc(11 * var(--r)), 10.5px)/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--champagne);
}
.rule { display: block; width: calc(57 * var(--r)); min-width: 44px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--magenta), rgba(227, 25, 138, .55));
  box-shadow: 0 0 8px rgba(227, 25, 138, .35); }
.rule--sm { width: calc(38 * var(--r)); min-width: 30px; margin-top: calc(14 * var(--r)); }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .8em;
  border-radius: 999px;
  font: 500 max(calc(14 * var(--r)), 13px)/1 var(--sans);
  color: var(--ivory);
  border: 1.5px solid rgba(227, 25, 138, .78);
  background: linear-gradient(90deg, rgba(122, 18, 68, .42), rgba(60, 10, 36, .30));
  box-shadow: 0 0 14px rgba(227, 25, 138, .16), inset 0 0 12px rgba(227, 25, 138, .10);
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.pill svg { width: 1.2em; height: .75em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.pill:hover { border-color: var(--magenta); box-shadow: 0 0 20px rgba(227, 25, 138, .26), inset 0 0 14px rgba(227, 25, 138, .14); }
.pill:hover svg { transform: translateX(3px); }

/* ---------- header ---------- */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  height: var(--nav-h);
  background: linear-gradient(180deg, rgba(6, 5, 4, .9), rgba(6, 5, 4, .74));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gold-hair);
}
.nav__inner {
  height: 100%; max-width: 1920px; margin: 0 auto;
  padding-inline: calc(77 * var(--r)) calc(50 * var(--r));
  display: flex; align-items: center;
}
.brand { display: flex; align-items: center; gap: calc(18 * var(--r)); }
.brand__mark { width: calc(48 * var(--r)); min-width: 38px; height: auto; }   /* approved mark is transparent: shown as supplied, no blend */
.brand__word {
  font: 500 max(calc(25 * var(--r)), 19px)/1 var(--serif);
  letter-spacing: .36em; margin-right: -.36em;
  color: var(--ivory);
}
.nav__links { display: flex; gap: calc(41 * var(--r)); margin-left: calc(122 * var(--r)); }
.nav__links a {
  position: relative; padding-block: 8px;
  font: 400 max(calc(14 * var(--r)), 13px)/1 var(--sans);
  color: var(--ivory-soft); transition: color .3s;
}
.nav__links a:hover, .nav__links a[aria-current] { color: var(--ivory); }
.nav__links a[aria-current] { color: #f6d9b0; }
.nav__links a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px;
  background: var(--magenta); box-shadow: 0 0 8px rgba(227, 25, 138, .45);
}
.nav__rule { width: 1px; height: calc(20 * var(--r)); background: var(--gold-line); margin-left: auto; margin-right: calc(37 * var(--r)); }
.pill--nav { height: calc(41 * var(--r)); min-height: 36px; padding-inline: calc(24 * var(--r)) calc(22 * var(--r)); }
.nav__menu { display: none; }

/* ---------- scene (depth layers) ---------- */
.scene {
  position: absolute; z-index: 0; left: 0; top: calc(-1 * var(--nav-h));
  width: 100%; height: calc(var(--scene-w) * (941 / 1672) + var(--scene-w) * (291 / 1672));
  overflow: hidden; pointer-events: none;
  contain: strict;
}
.layer { position: absolute; top: 0; left: var(--scene-x, 0px); width: var(--scene-w); will-change: transform; }
.layer img { width: 100%; height: auto; }
.layer--far { transform: scale(1.06); transform-origin: 50% 35%; }
.layer--mid { transform: scale(1.03); transform-origin: 50% 45%; }
.layer--mid .ext { margin-top: -1px; }
.scene__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 7, 6, .74) 0%, rgba(8, 7, 6, .52) 24%, rgba(8, 7, 6, .12) 44%, rgba(8, 7, 6, 0) 58%),
    linear-gradient(180deg, rgba(8, 7, 6, .35) 0%, rgba(8, 7, 6, 0) 16%),
    linear-gradient(0deg, var(--ink) 0%, rgba(8, 7, 6, 0) 22%);
}

/* ---------- hero ---------- */
main { position: relative; z-index: 1; }
.hero {
  position: relative; z-index: 2;
  max-width: 1920px; margin: 0 auto;
  min-height: calc(515 * var(--r));
  padding: calc(70 * var(--r)) calc(77 * var(--r)) 0;
}
.hero__copy { max-width: calc(620 * var(--r)); }
.hero__title {
  margin-top: calc(27 * var(--r));
  font: 500 calc(89 * var(--r))/.9 var(--serif);
  letter-spacing: .075em; margin-right: -.075em;
  background: linear-gradient(180deg, #efdcbc 0%, #d8b683 42%, #b48652 78%, #8f6a42 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35));
}
.hero__tagline {
  margin-top: calc(6 * var(--r));
  font: 400 calc(53 * var(--r))/1.02 var(--serif);
  color: var(--ivory);
  letter-spacing: -.005em;
}
.hero .rule { margin-top: calc(20 * var(--r)); }
.hero__body {
  margin-top: calc(22 * var(--r));
  max-width: calc(430 * var(--r));
  font: 400 max(calc(17 * var(--r)), 15px)/1.34 var(--sans);
  color: var(--ivory-soft);
  text-wrap: pretty;
}
.hero__ctas { display: flex; align-items: center; gap: calc(18 * var(--r)); margin-top: calc(33 * var(--r)); flex-wrap: wrap; }
.pill--primary { height: calc(44 * var(--r)); min-height: 42px; padding-inline: calc(28 * var(--r)) calc(26 * var(--r)); font-size: max(calc(15 * var(--r)), 14px); }
.journey-link { display: inline-flex; align-items: center; gap: calc(13 * var(--r)); font: 400 max(calc(15 * var(--r)), 14px)/1 var(--sans); color: var(--ivory); }
.journey-link__ring {
  display: grid; place-items: center;
  width: calc(44 * var(--r)); height: calc(44 * var(--r)); min-width: 40px; min-height: 40px; border-radius: 50%;
  border: 1.5px solid rgba(210, 173, 118, .72);
  background: rgba(8, 7, 6, .35);
  box-shadow: 0 0 12px rgba(210, 173, 118, .12);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.journey-link__ring svg { width: 40%; fill: none; stroke: var(--ivory); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.journey-link:hover .journey-link__ring { border-color: var(--champagne); box-shadow: 0 0 18px rgba(210, 173, 118, .22); }
.journey-link:hover svg { transform: translateY(2px); }

.hero__words {
  position: absolute; left: calc(1255 * var(--r)); top: calc(150 * var(--r));
  font: 500 max(calc(11.5 * var(--r)), 10px)/1.78 var(--sans);
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(243, 236, 226, .86);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
  will-change: transform;
}

/* ---------- projected glass panels ---------- */
.panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 236, 205, .045), rgba(255, 236, 205, 0) 38%),
    var(--glass);
  -webkit-backdrop-filter: blur(9px) saturate(112%) brightness(.92);
  backdrop-filter: blur(9px) saturate(112%) brightness(.92);
  border: 1px solid var(--gold-line);
  border-radius: calc(12 * var(--r));
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 190, .14),
    inset 0 0 22px rgba(255, 196, 120, .03),
    0 0 14px rgba(210, 160, 95, .07),
    0 28px 50px -26px rgba(0, 0, 0, .75);
}
/* projector edge light: a thin brighter lip along the top edge that fades to the corners */
.panel::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 205, 150, .75), transparent);
  pointer-events: none;
}

.caps {
  position: relative; z-index: 2;
  max-width: 1920px; margin: 0 auto;
  padding-inline: calc(20 * var(--r));
}
.caps__field {
  display: grid; grid-template-columns: 343fr 324fr 327fr 340fr; gap: calc(18 * var(--r));
  padding: calc(7 * var(--r)) calc(9 * var(--r));
  border-radius: calc(14 * var(--r));
  border: 1px solid var(--gold-hair);
  background: linear-gradient(180deg, rgba(210, 173, 118, .03), rgba(8, 7, 6, 0));
  perspective: 1100px;
}
.cap {
  display: flex; align-items: center; gap: calc(28 * var(--r));
  min-height: calc(121 * var(--r));
  padding: calc(16 * var(--r)) calc(18 * var(--r)) calc(16 * var(--r)) calc(34 * var(--r));
  transform-style: preserve-3d;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.cap:first-child { padding-left: calc(40 * var(--r)); }
@media (min-width: 1181px) { .cap__title { white-space: nowrap; } }
/* the gold tick between panels */
.cap:not(:last-child)::after {
  content: ""; position: absolute; top: 32%; bottom: 32%; right: calc(-9.5 * var(--r));
  width: 1.5px; background: linear-gradient(180deg, transparent, rgba(210, 173, 118, .8), transparent);
}
/* specular spot that follows the pointer */
@property --spec { syntax: "<number>"; inherits: false; initial-value: 0; }
.cap {
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 232, 196, calc(var(--spec) * .075)), transparent 62%),
    linear-gradient(180deg, rgba(255, 236, 205, .045), rgba(255, 236, 205, 0) 38%),
    var(--glass);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease), --spec .5s var(--ease);
}
.cap:hover { --spec: 1; }
.cap:hover {
  border-color: rgba(210, 173, 118, .5);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 190, .2),
    inset 0 0 26px rgba(255, 196, 120, .045),
    0 0 20px rgba(210, 160, 95, .1),
    0 40px 60px -28px rgba(0, 0, 0, .85);
}
.cap--accent { border-color: rgba(200, 120, 150, .38); }
.cap--accent::after { background: linear-gradient(180deg, transparent, rgba(210, 173, 118, .8), transparent); }
.cap:last-child { box-shadow:
    inset 0 1px 0 rgba(255, 230, 190, .14), inset -14px 0 30px -18px rgba(227, 25, 138, .28),
    0 0 14px rgba(210, 160, 95, .07), 0 28px 50px -26px rgba(0, 0, 0, .75); }
.cap__icon { flex: none; width: calc(50 * var(--r)); min-width: 40px; height: auto; overflow: visible; transform: translateZ(18px); }
.cap__icon path { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cap__icon .g { stroke: var(--champagne); }
.cap__icon .m { stroke: var(--magenta); filter: drop-shadow(0 0 3px rgba(227, 25, 138, .45)); }
.cap > div { transform: translateZ(10px); }
.cap__title {
  font: 600 max(calc(12 * var(--r)), 11px)/1.2 var(--sans);
  letter-spacing: .2em; text-transform: uppercase; color: var(--ivory);
}
.cap__body {
  margin-top: calc(10 * var(--r));
  font: 400 max(calc(14.5 * var(--r)), 14px)/1.4 var(--sans);
  color: var(--ivory-soft); max-width: 17em;
}

/* ---------- journey ---------- */
.journey {
  z-index: 2;
  max-width: calc(1920px - 40 * var(--r));
  margin: calc(23 * var(--r)) calc(20 * var(--r)) 0;
  display: grid; grid-template-columns: calc(372 * var(--r)) 1fr;
  gap: calc(38 * var(--r));
  padding: calc(38 * var(--r)) calc(26 * var(--r)) calc(32 * var(--r)) calc(44 * var(--r));
  border-radius: calc(14 * var(--r));
}
@media (min-width: 1960px) { .journey { margin-inline: auto; } }
.journey__intro { padding-right: calc(18 * var(--r)); border-right: 1px solid var(--gold-hair); }
.journey__title {
  margin-top: calc(17 * var(--r));
  font: 400 max(calc(34 * var(--r)), 28px)/.98 var(--serif);
  color: var(--ivory); text-wrap: balance;
}
.journey__title span { display: block; color: #ecd2a8; }
.journey .rule { margin-top: calc(14 * var(--r)); width: calc(54 * var(--r)); }
.journey__body { margin-top: calc(22 * var(--r)); font: 400 max(calc(16.5 * var(--r)), 15px)/1.4 var(--sans); color: var(--ivory-soft); max-width: 20em; }

.milestones {
  position: relative;
  display: grid; grid-template-columns: repeat(8, 1fr);
  padding-top: calc(28 * var(--r));
}
/* the continuous line through the dots */
.milestones::before {
  content: ""; position: absolute; left: 0; right: calc(-6 * var(--r)); top: calc(62 * var(--r)); height: 1.5px;
  background: linear-gradient(90deg, rgba(210, 173, 118, .9), rgba(236, 210, 168, .95) 50%, rgba(210, 173, 118, .7) 92%, transparent);
  box-shadow: 0 0 6px rgba(210, 160, 95, .3);
  transform-origin: left; animation: draw 1.6s var(--ease) .6s both;
}
.ms { position: relative; display: flex; flex-direction: column; padding-right: calc(8 * var(--r)); }
.ms__num { font: 500 max(calc(12.5 * var(--r)), 12px)/1 var(--sans); color: var(--champagne); letter-spacing: .04em; }
.ms__dot {
  position: relative; z-index: 1;
  width: calc(12 * var(--r)); height: calc(12 * var(--r)); min-width: 10px; min-height: 10px; border-radius: 50%;
  margin: calc(15 * var(--r)) 0 calc(24 * var(--r)) 0;
  background: radial-gradient(circle at 40% 38%, #ff6fbf, var(--magenta) 60%);
  box-shadow: 0 0 0 3px rgba(227, 25, 138, .14), 0 0 12px rgba(227, 25, 138, .55);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
  animation: pop .7s var(--ease) both;
}
.ms:nth-child(1) .ms__dot { animation-delay: .8s; }
.ms:nth-child(2) .ms__dot { animation-delay: 1.0s; }
.ms:nth-child(3) .ms__dot { animation-delay: 1.2s; }
.ms:nth-child(4) .ms__dot { animation-delay: 1.4s; }
.ms:nth-child(5) .ms__dot { animation-delay: 1.6s; }
.ms:nth-child(6) .ms__dot { animation-delay: 1.8s; }
.ms:nth-child(7) .ms__dot { animation-delay: 2.0s; }
.ms:nth-child(8) .ms__dot { animation-delay: 2.2s; }
.ms__tag { margin-top: calc(9 * var(--r)); font: 500 max(calc(10.5 * var(--r)), 10px)/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #ff6fbf; }
.ms:hover .ms__dot { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(227, 25, 138, .18), 0 0 18px rgba(227, 25, 138, .7); }
.ms__title { font: 500 max(calc(18.5 * var(--r)), 17px)/1.15 var(--serif); color: var(--ivory); }
.ms__desc { margin-top: calc(9 * var(--r)); font: 400 max(calc(13.5 * var(--r)), 13px)/1.35 var(--sans); color: var(--ivory-soft); }
.ms__date { margin-top: auto; padding-top: calc(20 * var(--r)); font: 500 max(calc(11 * var(--r)), 10.5px)/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--ivory-mute); }

/* ---------- footer ---------- */
.foot {
  position: relative; z-index: 1;
  margin-top: calc(31 * var(--r));
  border-top: 1px solid var(--gold-hair);
  background: linear-gradient(180deg, rgba(8, 7, 6, .78), var(--ink));
}
.foot::before { /* faint warm light on the top edge, like the reference */
  content: ""; position: absolute; left: 10%; right: 10%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210, 173, 118, .5), transparent);
}
.foot__inner {
  max-width: 1920px; margin: 0 auto;
  min-height: calc(78 * var(--r));
  padding: calc(14 * var(--r)) calc(50 * var(--r)) max(calc(14 * var(--r)), env(safe-area-inset-bottom, 0px)) calc(62 * var(--r));
  display: flex; align-items: center; gap: calc(40 * var(--r));
  font: 400 max(calc(12.5 * var(--r)), 12.5px)/1 var(--sans);
  color: var(--ivory-soft);
}
.foot__brand { display: flex; align-items: center; gap: calc(20 * var(--r)); }
.foot__brand .brand__mark { width: calc(46 * var(--r)); }
.foot__brand .brand__word { display: block; font-size: max(calc(24 * var(--r)), 18px); }
.foot__tag { display: block; margin-top: calc(9 * var(--r)); font: 500 max(calc(9 * var(--r)), 8.5px)/1 var(--sans); letter-spacing: .42em; text-transform: uppercase; color: var(--ivory-mute); text-align: center; }
.foot__links { display: flex; align-items: center; margin-left: calc(18 * var(--r)); }
.foot__links a { padding-inline: calc(20 * var(--r)); line-height: 2; transition: color .3s; }
.foot__links a:first-child { padding-left: 0; }
.foot__links a + a { border-left: 1px solid var(--gold-line); }
.foot__links a:hover, .foot__social a:hover { color: var(--ivory); }
.foot__social { display: flex; align-items: center; gap: calc(30 * var(--r)); padding-inline: calc(42 * var(--r)); border-inline: 1px solid var(--gold-line); line-height: 2.2; }
.foot__social a { display: inline-flex; align-items: center; gap: 8px; font-size: max(calc(11.5 * var(--r)), 12px); transition: color .3s; }
.foot__social svg { width: 18px; height: 18px; fill: var(--ivory); }
.foot__social svg.stroke { fill: none; stroke: var(--ivory); stroke-width: 1.6; }
.foot__copy { margin-left: auto; white-space: nowrap; font-size: max(calc(12 * var(--r)), 12px); }

/* ---------- motion ---------- */
.reveal { animation: rise 1s var(--ease) backwards; animation-delay: calc(var(--d, 0) * 90ms + 120ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.cap.reveal { animation-name: project; }
@keyframes project { from { opacity: 0; transform: translateY(18px) rotateX(8deg); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.cap.reveal { animation-fill-mode: backwards; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .ms__dot, .milestones::before { animation: none !important; }
  .cap { transition: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 1180px) {
  :root { --r: calc(1180px / 1447); }
  .scene { height: calc(var(--scene-w) * (1232 / 1672)); }
  :root { --scene-w: max(100vw, 1180px); --scene-x: 0px; }
  .hero { padding-inline: 32px; }
  .nav__inner { padding-inline: 24px; }
  .nav__links { margin-left: 40px; gap: 26px; }
  .hero__words { display: none; }
  .caps { padding-inline: 16px; }
  .caps__field { grid-template-columns: 1fr 1fr; gap: 14px; padding: 8px; }
  .cap:not(:last-child)::after { display: none; }
  .cap, .cap:first-child { padding: 22px 24px; gap: 22px; }
  .journey { margin-inline: 16px; grid-template-columns: 1fr; gap: 28px; padding: 32px 28px; }
  .journey__intro { border-right: 0; padding-right: 0; }
  .foot__inner { flex-wrap: wrap; row-gap: 18px; padding-inline: 24px; }
  .foot__copy { margin-left: 0; width: 100%; }
}

@media (max-width: 960px) {
  .nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0; padding: 8px 24px 16px;
    background: rgba(8, 7, 6, .96); border-bottom: 1px solid var(--gold-hair);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding-block: 14px; font-size: 15px; border-bottom: 1px solid rgba(210, 173, 118, .08); }
  .nav__links a[aria-current]::after { right: auto; width: 28px; bottom: 8px; }
  .nav__rule { display: none; }
  .pill--nav { margin-left: auto; }
  .nav__menu {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 40px; height: 40px; margin-left: 12px; padding: 0 10px;
    background: none; border: 1px solid var(--gold-line); border-radius: 50%; cursor: pointer;
  }
  .nav__menu span:not(.sr) { display: block; height: 1.5px; background: var(--ivory); border-radius: 2px; transition: transform .3s; }
  .nav__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
  .nav__menu[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

  /* timeline becomes vertical */
  .milestones { grid-template-columns: 1fr; padding-top: 4px; padding-left: 34px; gap: 26px; }
  .milestones::before { left: 5px; right: auto; top: 10px; bottom: 10px; width: 1.5px; height: auto; transform-origin: top;
    background: linear-gradient(180deg, rgba(210, 173, 118, .9), rgba(236, 210, 168, .9) 60%, rgba(210, 173, 118, .2)); animation-name: drawv; }
  @keyframes drawv { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .ms { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding-right: 0; }
  .ms__num { grid-column: 1; margin-bottom: 6px; }
  .ms__dot { position: absolute; left: -34px; top: 1px; margin: 0; width: 12px; height: 12px; }
  .ms__title { grid-column: 1; }
  .ms__desc { grid-column: 1; margin-top: 6px; }
  .ms__date { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 0; padding: 0; }
}

/* ---------- phone ---------- */
@media (max-width: 720px) {
  :root { --r: calc(760px / 1447); --scene-w: 900px; --scene-x: calc(50vw - 900px * .59); }
  .scene { height: 820px; top: 330px; }
  .scene__scrim {
    background:
      linear-gradient(180deg, var(--ink) 0%, rgba(8, 7, 6, .7) 12%, rgba(8, 7, 6, 0) 22%, rgba(8, 7, 6, 0) 60%, var(--ink) 92%);
  }
  .brand__mark { min-width: 34px; }
  .brand__word { font-size: 17px; letter-spacing: .3em; }
  .brand { gap: 10px; }
  .pill--nav { display: none; }
  .nav__menu { margin-left: auto; }
  .hero { padding: 40px 20px 0; min-height: 0; }
  .hero__copy { max-width: none; }
  .eyebrow { font-size: 10.5px; letter-spacing: .2em; }
  .hero__title { margin-top: 18px; font-size: clamp(44px, 13.4vw, 64px); letter-spacing: .06em; }
  .hero__tagline { font-size: clamp(32px, 9.4vw, 42px); }
  .hero .rule { margin-top: 18px; }
  .hero__body { margin-top: 18px; font-size: 16px; max-width: 26em; }
  .hero__ctas { margin-top: 26px; gap: 14px 20px; }
  .caps { margin-top: 250px; }
  .caps__field { grid-template-columns: 1fr; border: 0; padding: 0; background: none; }
  .cap, .cap:first-child { min-height: 0; padding: 20px 22px; }
  .journey { margin-top: 18px; padding: 28px 22px; }
  .journey__title { font-size: 30px; }
  .foot__inner { flex-direction: column; align-items: flex-start; gap: 22px; padding: 28px 20px max(28px, env(safe-area-inset-bottom, 0px)); }
  .foot__links { margin-left: 0; flex-wrap: wrap; }
  .foot__social { border: 0; padding: 0; flex-wrap: wrap; gap: 18px 26px; }
  .foot__copy { white-space: normal; }
}
.cap:hover { transform: translate3d(var(--px, 0px), calc(var(--py, 0px) - 4px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }


/* =====================================================================
   SPATIAL NAVIGATION — doors, travel states, rooms
   ===================================================================== */

/* a capability card that leads somewhere */
.cap--door { cursor: pointer; }
.cap__enter {
  position: absolute; right: calc(18 * var(--r)); bottom: calc(12 * var(--r));
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 10.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--champagne); opacity: 0; translate: -4px 0;
  transition: opacity .4s var(--ease), translate .4s var(--ease);
}
.cap__enter svg { width: 14px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cap--door:hover .cap__enter, .cap--door:focus-visible .cap__enter { opacity: .9; translate: 0 0; }
@media (hover: none) { .cap__enter { opacity: .7; translate: 0 0; } }

/* the card that was chosen: the projection intensifies before the camera moves */
.cap.is-active {
  border-color: rgba(240, 212, 170, .85);
  --spec: 1;
  transform: translate3d(0, -6px, 30px) scale(1.025);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 200, .35),
    inset 0 0 40px rgba(255, 210, 150, .08),
    0 0 0 1px rgba(227, 25, 138, .25),
    0 0 36px rgba(236, 196, 140, .22),
    0 40px 70px -30px rgba(0, 0, 0, .9);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.cap.is-active .cap__enter { opacity: 1; translate: 0 0; }

/* everything else steps back while we travel */
.hero__copy, .hero__words, .journey, .foot, .cap { transition: opacity .45s var(--ease), filter .45s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease), --spec .5s var(--ease); }
body.is-away .hero__copy { opacity: 0; transform: translateX(-24px); filter: blur(4px); }
body.is-away .hero__words, body.is-away .journey, body.is-away .foot { opacity: 0; filter: blur(4px); }
body.is-away .cap:not(.is-active) { opacity: .12; filter: blur(3px); }
body.is-away .caps__field { border-color: transparent; }
body.is-traveling { pointer-events: none; }
body.in-room { overflow: hidden; }

/* ---------- room: shared shell ---------- */
.room { position: fixed; inset: 0; z-index: 15; background: #070605; overflow: hidden; }
.room[hidden] { display: none; }
.room.is-opening [data-assemble] { opacity: 0; }
.room__world { position: absolute; inset: 0; perspective: 1000px; perspective-origin: 50% 40%; overflow: hidden; }
.room__rig, .room__cam { position: absolute; left: 50%; top: 40%; width: 0; height: 0; transform-style: preserve-3d; }
.room__cam { left: 0; top: 0; }
.room__rig { will-change: transform; }

/* a plane in the room: centred on its own translate3d point */
.s { position: absolute; left: 0; top: 0; width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); }
.s i { position: absolute; display: block; }

/* ---------- the strategy room ---------- */
.room--strategy .s--back { --w: 3000px; --h: 1200px; transform: translate3d(0, 40px, -2600px); overflow: hidden; background: #050403; }
.s--back img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; max-width: none; filter: brightness(.85) saturate(.9);
  -webkit-mask: linear-gradient(90deg, transparent, #000 14% 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14% 86%, transparent); }
.s--back .mullions { inset: 0; background:
  linear-gradient(180deg, #0a0806 0, rgba(8, 6, 5, .6) 9%, transparent 16% 91%, #080605 91%),
  repeating-linear-gradient(90deg, #080605 0 34px, transparent 34px 20%); }
.s--back .glass { inset: 0; background:
  linear-gradient(115deg, transparent 20%, rgba(255, 240, 220, .035) 32%, transparent 44%),
  linear-gradient(0deg, rgba(6, 5, 4, .8), rgba(6, 5, 4, 0) 38%),
  linear-gradient(90deg, rgba(6, 5, 4, .9), transparent 18% 82%, rgba(6, 5, 4, .9)); }

.room--strategy .s--left, .room--strategy .s--right { --w: 3300px; --h: 1200px; overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55)),
    linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .6)),
    url("assets/scene/grain.webp"),
    repeating-linear-gradient(90deg, #1a120c 0 56px, #221810 56px 58px, #120c08 58px 116px, #2b1e14 116px 118px); }
.room--strategy .s--left { transform: translate3d(-1500px, 40px, -950px) rotateY(90deg); }
.room--strategy .s--right { transform: translate3d(1500px, 40px, -950px) rotateY(-90deg);
  background:
    linear-gradient(270deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55)),
    linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .6)),
    url("assets/scene/grain.webp"),
    repeating-linear-gradient(90deg, #1a120c 0 56px, #221810 56px 58px, #120c08 58px 116px, #2b1e14 116px 118px); }
.sconce { top: 22%; left: calc(17% + var(--z) * .83); width: 150px; height: 520px; margin-left: -75px;
  background: radial-gradient(ellipse 50% 50% at 50% 34%, rgba(255, 214, 160, .34), rgba(230, 168, 100, .10) 45%, transparent 72%);
  opacity: 0; transition: opacity 1.2s var(--ease); }
.sconce::before { content: ""; position: absolute; left: 50%; top: 26%; width: 10px; height: 74px; margin-left: -5px; border-radius: 3px;
  background: linear-gradient(180deg, #f6dcb0, #c99a5e 40%, #6b4a2a); box-shadow: 0 0 18px 4px rgba(255, 205, 140, .45); }
.s--right .sconce { left: calc(83% - var(--z) * .83); }

.room--strategy .s--floor { --w: 3000px; --h: 3300px; transform: translate3d(0, 640px, -950px) rotateX(90deg);
  background:
    linear-gradient(180deg, rgba(4, 3, 2, .35), rgba(4, 3, 2, .82) 70%),
    radial-gradient(ellipse 22% 30% at 50% 18%, rgba(255, 220, 170, .12), transparent 70%),
    url("assets/scene/room-marble-dark.webp") 50% 0 / 1650px 100% repeat-x; }
.room--strategy .s--ceil { --w: 3000px; --h: 3300px; transform: translate3d(0, -560px, -950px) rotateX(-90deg);
  background: linear-gradient(0deg, #0a0806, #060504 40%); }
.trough { top: 0; bottom: 0; left: var(--x); width: 22px; margin-left: -11px;
  background: linear-gradient(90deg, transparent, rgba(255, 222, 176, .75), transparent);
  box-shadow: 0 0 60px 18px rgba(255, 200, 140, .10); opacity: 0; transition: opacity 1s var(--ease); }

/* table: top at desk height, near end at z −900, far end at z −2300 */
.room--strategy .s--table { --w: 1000px; --h: 1400px; transform: translate3d(0, 355px, -1600px) rotateX(90deg);
  background: url("assets/scene/room-marble.webp") center / cover; filter: brightness(.82) saturate(.85); border-radius: 6px; }
.s--table .pool { inset: 0; background: radial-gradient(ellipse 48% 34% at 50% 40%, rgba(255, 214, 160, .30), transparent 72%); opacity: 0; transition: opacity 1.4s var(--ease); }
.s--table .emitter { left: 50%; bottom: 26%; width: 280px; height: 280px; margin-left: -140px; border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 170, 214, .95) 0 5px, rgba(227, 25, 138, .35) 7px, transparent 12px),
    repeating-radial-gradient(circle, transparent 0 34px, rgba(222, 186, 132, .35) 34px 36px, transparent 36px 56px);
  -webkit-mask: radial-gradient(circle, #000 55%, transparent 72%); mask: radial-gradient(circle, #000 55%, transparent 72%); }
.s--table .spill { left: 0; right: 0; bottom: 12%; height: 55%; background: radial-gradient(ellipse 60% 55% at 50% 72%, rgba(240, 206, 160, .16), rgba(227, 25, 138, .05) 50%, transparent 75%); }
.room--strategy .s--table-front { --w: 1000px; --h: 34px; transform: translate3d(0, 372px, -900px);
  background: linear-gradient(180deg, #8a6a44 0 1.5px, #1b130d 1.5px, #0a0706); }
.s--table-side { display: none; }
.room--strategy .s--pendant { --w: 820px; --h: 12px; transform: translate3d(0, -300px, -1900px); border-radius: 6px;
  background: linear-gradient(180deg, #3a2a1b, #1a120c 60%, #f3d3a0 60% 100%);
  box-shadow: 0 16px 50px 6px rgba(255, 205, 140, 0); transition: box-shadow 1.4s var(--ease); }
.room--strategy .s--pendant-cord { --w: 720px; --h: 260px; transform: translate3d(0, -430px, -1900px);
  background: linear-gradient(90deg, transparent 0 calc(50% - 361px), rgba(160, 130, 90, .5) calc(50% - 361px) calc(50% - 359px), transparent calc(50% - 359px) calc(50% + 359px), rgba(160, 130, 90, .5) calc(50% + 359px) calc(50% + 361px), transparent calc(50% + 361px)); }
.chair { --w: 240px; --h: 470px; transform: translate3d(var(--x), 405px, var(--z)) rotateY(90deg); filter: blur(.6px); }
.chair--r { transform: translate3d(var(--x), 405px, var(--z)) rotateY(-90deg); }
.chair::before { /* backrest, channel-stitched like the office chair */
  content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 60%; border-radius: 26px 26px 12px 12px;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 52px, rgba(0, 0, 0, .55) 52px 55px, rgba(255, 220, 180, .06) 55px 57px),
    linear-gradient(180deg, #3a2a20, #1c140f 55%, #0e0a08);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .25), inset 2px 0 0 rgba(255, 210, 160, .08); }
.chair::after { content: ""; position: absolute; left: 0; right: 0; top: 58%; height: 11%; border-radius: 10px;
  background: linear-gradient(180deg, #2d2119, #120d0a); box-shadow: inset 0 1px 0 rgba(255, 220, 170, .18); }
.room--strategy .s--beam { display: none; --w: 560px; --h: 300px; transform: translate3d(0, 215px, -1150px);
  background: linear-gradient(0deg, rgba(245, 214, 170, .20), rgba(245, 214, 170, .05) 55%, transparent);
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0); filter: blur(10px); opacity: 0; transition: opacity 1s var(--ease) .3s; }

/* lights come up as you arrive */
.room.is-lit .sconce { opacity: 1; }
.room.is-lit .s--right .sconce { transition-delay: .15s; }
.room.is-lit .trough { opacity: 1; transition-delay: .25s; }
.room.is-lit .pool { opacity: 1; transition-delay: .1s; }
.room.is-lit .s--pendant { box-shadow: 0 18px 70px 14px rgba(255, 205, 140, .26); }
.room.is-lit .s--beam { opacity: 1; }

/* projections, suspended over the table (desktop: in the 3D room) */
.room__panels { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.room--strategy .rp {
  position: absolute; left: 0; top: 0; width: 700px; margin: -300px 0 0 -350px;
  padding: 50px 56px 46px; border-radius: 24px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background:
    linear-gradient(180deg, rgba(255, 236, 205, .07), rgba(255, 236, 205, 0) 30%),
    rgba(18, 13, 10, .40);
  border: 1.5px solid rgba(222, 186, 132, .40);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .7);
  box-shadow: inset 0 1px 0 rgba(255, 230, 190, .22), 0 0 40px rgba(236, 196, 140, .08);
}
.room--strategy .rp::before { left: 10%; right: 10%; height: 1.5px; }
.room--strategy .rp--left { transform: translate3d(-720px, -10px, -1060px) rotateY(24deg); }
.room--strategy .rp--center { transform: translate3d(0, -20px, -1450px); }
.room--strategy .rp--right { transform: translate3d(720px, -10px, -1060px) rotateY(-24deg); }
.rp__num { font: 500 12px/1 var(--sans); color: var(--champagne); letter-spacing: .06em; }
.rp__title { margin-top: 14px; font: 500 28px/1 var(--serif); color: var(--ivory); }
.rp__sub { margin-top: 8px; font: 500 10.5px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ivory-mute); }
.rp__rows, .rp__goals, .rp__traits { margin-top: 20px; display: grid; }
.rp__rows li, .rp__goals li, .rp__traits li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-top: 1px solid rgba(210, 173, 118, .14);
  font: 400 14px/1.35 var(--sans); color: var(--ivory); }
.rp__meta { flex: none; font: 500 11px/1.3 var(--sans); letter-spacing: .08em; color: var(--ivory-mute); }
.rp__meta--hot { color: #f17bbd; }
.rp__meta--hot::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 8px rgba(227, 25, 138, .8); vertical-align: 1px; }
.rp__goals li { display: grid; grid-template-columns: 1fr auto; row-gap: 9px; }
.rp__goals .rp__meta { grid-column: 2; grid-row: 1; }
.rp__track { grid-column: 1 / -1; height: 2px; border-radius: 2px; background: rgba(210, 173, 118, .16); overflow: hidden; }
.rp__track i { display: block; height: 100%; width: calc(var(--v) * 100%); background: linear-gradient(90deg, var(--gold), #ecd2a8); box-shadow: 0 0 8px rgba(236, 200, 150, .4); transform-origin: left; }
.room.is-resolved .rp__track i { animation: draw 1.1s var(--ease) .25s backwards; }
.rp__traits li { justify-content: flex-start; gap: 12px; }
.rp__traits li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 7px; align-self: flex-start; rotate: 45deg; border: 1px solid var(--champagne); }
/* in the 3D room everything is set at ~1.9× so it lands at reading size after perspective */
.room--strategy .room__panels .rp__num { font-size: 27px; }
.room--strategy .room__panels .rp__title { margin-top: 22px; font-size: 64px; }
.room--strategy .room__panels .rp__sub { margin-top: 14px; font-size: 22px; }
.room--strategy .room__panels .rp__rows, .room--strategy .room__panels .rp__goals, .room--strategy .room__panels .rp__traits { margin-top: 28px; }
.room--strategy .room__panels li { padding: 22px 0; font-size: 31px; gap: 26px; border-top-width: 2px; }
.room--strategy .room__panels .rp__meta { font-size: 23px; }
.room--strategy .room__panels .rp__meta--hot::before { width: 10px; height: 10px; margin-right: 11px; }
.room--strategy .room__panels .rp__track { height: 3px; }
.room--strategy .room__panels .rp__goals li { row-gap: 16px; }
.room--strategy .room__panels .rp__traits li::before { width: 9px; height: 9px; margin-top: 11px; }

/* atmosphere: haze, vignette, grain (2D, over the 3D room) */
.room__atmo { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, transparent 45%, rgba(5, 4, 3, .6) 100%),
    linear-gradient(180deg, rgba(5, 4, 3, .72) 0%, rgba(5, 4, 3, .2) 22%, transparent 36%),
    radial-gradient(ellipse 40% 30% at 50% 44%, rgba(255, 226, 190, .05), transparent 70%); }
.room__atmo::after { content: ""; position: absolute; inset: 0; background: url("assets/scene/grain.webp"); opacity: .35; mix-blend-mode: overlay; }

/* HUD: what you need to read, fixed to the glass of your view */
.room__hud { position: absolute; inset: 0; overflow: hidden auto; overscroll-behavior: contain; pointer-events: none;
  display: flex; flex-direction: column; padding: calc(var(--nav-h) + 26px) 48px 40px; }
.room__hud > * { pointer-events: auto; }
.room__head { display: contents; }
.room__head > :not(.room__back) { max-width: 560px; }
.room__head .eyebrow { margin-top: auto; }
.room__back {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  background: rgba(8, 7, 6, .45); border: 1px solid var(--gold-line); color: var(--ivory-soft);
  font: 500 13px/1 var(--sans); cursor: pointer; transition: color .3s, border-color .3s; }
.room__back svg { width: 16px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.room__back:hover { color: var(--ivory); border-color: var(--champagne); }
.room__title { margin-top: 12px; font: 400 clamp(28px, 2.5vw, 38px)/1.08 var(--serif); color: var(--ivory); text-wrap: balance; }
.room__title:focus { outline: none; }
.room__lead { margin-top: 12px; font: 400 14.5px/1.5 var(--sans); color: var(--ivory-soft); max-width: 34em; }
.room__stack { display: none; }
.room__note { margin-top: 14px; max-width: 560px; font: 400 12px/1.5 var(--sans); color: var(--ivory-mute); }

/* narrow screens: the room stays in 3D behind you; the projections come to hand as a readable stack */
@media (max-width: 960px) {
  .room__world { perspective-origin: 50% 30%; }
  .room__rig { top: 30%; }
  .room__hud { padding: calc(var(--nav-h) + 22px) 20px 26px; }
  .room__head .eyebrow { margin-top: 38vh; }
  .room__stack { display: grid; gap: 14px; margin-top: 26px; }
  .room__stack .rp { position: relative; width: auto; margin: 0; transform: none; padding: 22px 22px 18px; border-radius: 14px;
    -webkit-box-reflect: unset; background: linear-gradient(180deg, rgba(255, 236, 205, .06), rgba(255, 236, 205, 0) 30%), rgba(16, 12, 10, .62);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .room__note { margin-top: 22px; }
}


/* =====================================================================
   EXPERIMENT 1 — photographic room plate (only the room changes)
   The plate covers the view with 20% overscan (room for the arrival and head movement) and its top edge at
   the top of the screen, so the ceiling light cove stays in view. main.js projects the checkpoint camera's
   motion onto it as if it were a far wall 6000 units away.
   ===================================================================== */
.room--plate .s { display: none; }
.room__plate {
  --pw: max(120vw, calc(120vh * 1449 / 1086));
  --ph: calc(var(--pw) * 1086 / 1449);
  position: absolute; left: 50%; top: -8px; width: var(--pw); height: var(--ph); margin-left: calc(var(--pw) / -2);
  transform-origin: 0 0; will-change: transform;
}
.room__plate img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block;
  filter: brightness(.6) saturate(.78); transition: filter 1.3s var(--ease); }
/* the arrival's "lights come up" beat, now on the photograph itself */
.room--plate.is-lit .room__plate img { filter: saturate(.84); }  /* room warmth pulled back slightly (checkpoint 3 → exp 3) */
/* only what legibility needs: a little shade under the header and behind the heading; no haze, no grain */
.room--plate .room__atmo { background:
  linear-gradient(180deg, rgba(5, 4, 3, .6) 0%, transparent 14%),
  linear-gradient(20deg, rgba(5, 4, 3, .78) 0%, rgba(5, 4, 3, .4) 30%, transparent 52%); }
.room--plate .room__atmo::after { display: none; }
@media (max-width: 960px) {
  /* narrow screens: the heading sits over the skyline, so the shade rises from the bottom instead */
  .room--plate .room__atmo { background:
    linear-gradient(180deg, rgba(5, 4, 3, .6) 0%, transparent 14%),
    linear-gradient(0deg, rgba(5, 4, 3, .92) 0%, rgba(5, 4, 3, .72) 42%, rgba(5, 4, 3, .2) 58%, transparent 66%); }
}

/* =====================================================================
   EXPERIMENT 2 — projected-panel readability over the photographic room (panels only)
   Denser smoked glass concentrated behind the text, fading toward the edges so the panels still read as
   projected light rather than solid cards. Gold accents on the panels pulled darker and quieter.
   ===================================================================== */
.room--strategy .rp {
  background:
    radial-gradient(ellipse 80% 74% at 50% 50%, rgba(7, 6, 5, .46), rgba(7, 6, 5, .12) 70%, rgba(7, 6, 5, 0) 90%),
    linear-gradient(180deg, rgba(235, 222, 200, .035), rgba(235, 222, 200, 0) 28%),
    rgba(10, 9, 8, .56);
  border-color: rgba(188, 160, 122, .28);
  box-shadow: inset 0 1px 0 rgba(235, 218, 190, .14), 0 0 36px rgba(200, 172, 132, .035);
}
.room--strategy .rp::before { background: linear-gradient(90deg, transparent, rgba(210, 186, 150, .45), transparent); }
.room--strategy .rp__num { color: #b59a74; }
.room--strategy .rp__track i { background: linear-gradient(90deg, #86694a, #c6ae8a); box-shadow: 0 0 6px rgba(200, 176, 140, .22); }
.room--strategy .rp__traits li::before { border-color: rgba(188, 160, 122, .85); }
.room--strategy .rp__rows li, .room--strategy .rp__goals li, .room--strategy .rp__traits li { border-top-color: rgba(188, 160, 122, .13); }
@media (max-width: 960px) {
  .room__stack .rp {
    background:
      radial-gradient(ellipse 80% 75% at 50% 45%, rgba(7, 6, 5, .3), rgba(7, 6, 5, 0) 80%),
      linear-gradient(180deg, rgba(235, 222, 200, .03), rgba(235, 222, 200, 0) 28%),
      rgba(12, 10, 9, .66);
  }
}


/* =====================================================================
   EXPERIMENT 3b — projected panels as real glass objects (panels only)
   Each panel is a slab: the front face carries the text; a darker back face sits 30 units behind it and four
   edge faces join them, so perspective and head movement reveal real thickness. Light comes from the room's
   ceiling: top edge catches it, bottom edge falls into shade. A soft specular band slides across the face as
   the viewer moves. Colors stay within the checkpoint-3 palette; nothing is brighter.
   ===================================================================== */
.room--strategy .room__panels .rp { border-radius: 14px; transform-style: preserve-3d; isolation: auto;
  /* the front pane is a little lighter than checkpoint 3 because the back pane now adds density */
  background:
    radial-gradient(ellipse 80% 74% at 50% 50%, rgba(7, 6, 5, .40), rgba(7, 6, 5, .10) 70%, rgba(7, 6, 5, 0) 90%),
    linear-gradient(180deg, rgba(235, 222, 200, .04), rgba(235, 222, 200, 0) 26%),
    rgba(10, 9, 8, .44);
  border: 1px solid rgba(200, 178, 146, .30);
  box-shadow:
    inset 0 1px 0 rgba(240, 226, 204, .20),      /* bevel catching the ceiling light */
    inset 1px 0 0 rgba(240, 226, 204, .07),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 0 0 1px rgba(0, 0, 0, .25),                /* outer shadow line separates glass from the room */
    0 50px 90px -40px rgba(0, 0, 0, .75);        /* it floats: soft shadow falls away beneath */
}
.rp__glass { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none;
  opacity: 0; transition: opacity .7s var(--ease); }
.room.is-resolved .rp__glass { opacity: 1; transition-delay: 1.25s; }   /* appears once the panel has assembled */
.rp__glass i { position: absolute; display: block; }
.rp__glass .g-back { inset: 0; border-radius: 14px; transform: translateZ(-30px);
  background: rgba(6, 5, 4, .24); border: 1px solid rgba(190, 168, 136, .14); }
.rp__glass .g-t, .rp__glass .g-b { left: 14px; right: 14px; height: 30px; }
.rp__glass .g-l, .rp__glass .g-r { top: 14px; bottom: 14px; width: 30px; }
.rp__glass .g-t { top: 0; transform-origin: 50% 0; transform: rotateX(-90deg);
  background: linear-gradient(0deg, rgba(236, 222, 198, .46), rgba(236, 222, 198, .16)); }
.rp__glass .g-b { bottom: 0; transform-origin: 50% 100%; transform: rotateX(90deg);
  background: linear-gradient(180deg, rgba(20, 17, 14, .75), rgba(40, 34, 28, .55)); }
.rp__glass .g-l { left: 0; transform-origin: 0 50%; transform: rotateY(90deg);
  background: linear-gradient(90deg, rgba(214, 200, 176, .30), rgba(120, 108, 92, .14)); }
.rp__glass .g-r { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg);
  background: linear-gradient(270deg, rgba(214, 200, 176, .26), rgba(120, 108, 92, .12)); }
/* refraction: a soft specular band inside the glass that slides with the viewer's head */
.rp__glass .g-sheen { inset: 0; border-radius: 14px; overflow: hidden; transform: translateZ(-15px);
  background: linear-gradient(112deg,
    transparent calc(30% + var(--lx, 0) * 22%),
    rgba(235, 225, 208, .045) calc(38% + var(--lx, 0) * 22%),
    rgba(235, 225, 208, .10) calc(41% + var(--lx, 0) * 22%),
    rgba(235, 225, 208, .03) calc(46% + var(--lx, 0) * 22%),
    transparent calc(54% + var(--lx, 0) * 22%)); }
/* the thin light line along the top edge (checkpoint lip), kept but narrower and quieter */
.room--strategy .room__panels .rp::before { left: 14px; right: 14px; background: linear-gradient(90deg, transparent, rgba(226, 208, 180, .42), transparent); }
/* narrow screens: the stack is flat, so the glass is expressed with bevels only */
.room__stack .rp__glass { display: none; }
@media (max-width: 960px) {
  .room__stack .rp { box-shadow: inset 0 1px 0 rgba(240, 226, 204, .18), inset 0 -1px 0 rgba(0, 0, 0, .4), 0 24px 50px -30px rgba(0, 0, 0, .8); }
}

/* =====================================================================
   EXPERIMENT 3c — stronger glass-object cues (panels only; positions unchanged)
   thicker slab · rim brighter than centre (Fresnel) · back pane edge visible through the front (internal
   reflection) · stronger sliding reflection · soft edge glow · slight backward lean so the lit top edge shows ·
   a whisper of iridescence on the side edges · deeper float shadow. No colour is brighter than checkpoint 3.
   ===================================================================== */
.room--strategy .rp--left { transform: translate3d(-720px, -10px, -1060px) rotateY(24deg) rotateX(3deg); }
.room--strategy .rp--center { transform: translate3d(0, -20px, -1450px) rotateX(3deg); }
.room--strategy .rp--right { transform: translate3d(720px, -10px, -1060px) rotateY(-24deg) rotateX(3deg); }
.room--strategy .room__panels .rp {
  border-color: rgba(206, 186, 156, .34);
  box-shadow:
    inset 0 1px 0 rgba(242, 230, 210, .26),
    inset 1px 0 0 rgba(242, 230, 210, .09),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset 0 0 26px rgba(226, 212, 188, .075),     /* Fresnel: the rim of the glass reads lighter than its centre */
    0 0 0 1px rgba(0, 0, 0, .28),
    0 0 26px rgba(214, 196, 168, .07),            /* soft edge glow */
    0 60px 100px -40px rgba(0, 0, 0, .85);
}
.rp__glass .g-back { transform: translateZ(-44px); background: rgba(6, 5, 4, .22); border-color: rgba(214, 196, 168, .26);
  box-shadow: inset 0 0 18px rgba(226, 212, 188, .05); }
.rp__glass .g-t, .rp__glass .g-b { height: 44px; }
.rp__glass .g-l, .rp__glass .g-r { width: 44px; }
.rp__glass .g-t { background: linear-gradient(0deg, rgba(240, 228, 206, .52), rgba(240, 228, 206, .18) 55%, rgba(240, 228, 206, .30)); }
.rp__glass .g-l { background:
  linear-gradient(90deg, rgba(218, 204, 180, .32), rgba(150, 136, 150, .16) 50%, rgba(120, 108, 92, .20)),
  linear-gradient(180deg, rgba(227, 25, 138, .05), transparent 40%, rgba(160, 190, 210, .04)); }
.rp__glass .g-r { background:
  linear-gradient(270deg, rgba(218, 204, 180, .28), rgba(150, 136, 150, .14) 50%, rgba(120, 108, 92, .18)),
  linear-gradient(0deg, rgba(227, 25, 138, .05), transparent 40%, rgba(160, 190, 210, .04)); }
/* internal reflection: a second, fainter band mirrored across the pane, both sliding with the viewer */
.rp__glass .g-sheen { transform: translateZ(-22px); background:
  linear-gradient(112deg,
    transparent calc(26% + var(--lx, 0) * 24%),
    rgba(238, 228, 212, .06) calc(34% + var(--lx, 0) * 24%),
    rgba(238, 228, 212, .15) calc(38% + var(--lx, 0) * 24%),
    rgba(238, 228, 212, .045) calc(43% + var(--lx, 0) * 24%),
    transparent calc(50% + var(--lx, 0) * 24%),
    transparent calc(62% + var(--lx, 0) * 24%),
    rgba(238, 228, 212, .05) calc(66% + var(--lx, 0) * 24%),
    transparent calc(71% + var(--lx, 0) * 24%)); }
.room--strategy .room__panels .rp::before { background: linear-gradient(90deg, transparent, rgba(236, 220, 194, .55), transparent); }


/* =====================================================================
   EXPERIMENT 3d — depth cues visible at normal page scale (panels only; same colours and transparency)
   ===================================================================== */
/* stronger perspective separation: side panels a little nearer and more turned, centre a little further back
   (x/y compensated so the on-screen layout stays where it was) */
.room--strategy .rp--left { transform: translate3d(-690px, -10px, -980px) rotateY(30deg) rotateX(3deg); }
.room--strategy .rp--right { transform: translate3d(690px, -10px, -980px) rotateY(-30deg) rotateX(3deg); }
.room--strategy .rp--center { transform: translate3d(0, -20px, -1520px) rotateX(3deg); }
/* pointer parallax per panel: nearer panels travel further than the far one */
.room--strategy .room__panels .rp { transition: translate .25s linear; }
.room--strategy .rp--left, .room--strategy .rp--right { translate: calc(var(--hx, 0) * -70px) calc(var(--hy, 0) * -26px); }
.room--strategy .rp--center { translate: calc(var(--hx, 0) * -22px) calc(var(--hy, 0) * -8px); }
/* thicker slab: side edges clearly visible on the angled panels */
.rp__glass .g-back { transform: translateZ(-90px); -webkit-backdrop-filter: blur(3px) saturate(1.05); backdrop-filter: blur(3px) saturate(1.05); }
.rp__glass .g-t, .rp__glass .g-b { height: 90px; }
.rp__glass .g-l, .rp__glass .g-r { width: 90px; }
.rp__glass .g-sheen { transform: translateZ(-45px); }
/* depth shadow: a soft shadow falling on the room well behind the glass, so it separates as you move */
.rp__glass .g-shadow { left: 6%; right: 6%; top: 18%; bottom: -10%; border-radius: 40px;
  transform: translate3d(0, 70px, -320px);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0) 72%); filter: blur(22px); }


/* =====================================================================
   EXPERIMENT 4 — premium glass/acrylic card objects (cards only; room untouched)
   Card treatment benchmark: owner's card references (rim-lit acrylic slabs, gold + magenta).
   Each card has a rim colour; light enters at the rim and glows inward, the slab edges carry that colour,
   an inner edge line sits a few px inside, a slow light travels round the rim, the card casts a soft
   pool of its light onto the table below and floats very gently.
   ===================================================================== */
@property --rimA { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --bob { syntax: "<length>"; inherits: false; initial-value: 0px; }
.room--strategy .rp { --rim: 212, 172, 112; }
.room--strategy .rp--center { --rim: 222, 44, 146; }
.room--strategy .room__panels .rp {
  border: 1.5px solid rgba(var(--rim), .9);
  background:
    radial-gradient(ellipse 80% 74% at 50% 50%, rgba(7, 6, 5, .42), rgba(7, 6, 5, .10) 70%, rgba(7, 6, 5, 0) 90%),
    linear-gradient(180deg, rgba(var(--rim), .07), rgba(var(--rim), 0) 22%, rgba(var(--rim), 0) 80%, rgba(var(--rim), .06)),
    rgba(10, 9, 8, .46);
  box-shadow:
    inset 0 1px 0 rgba(250, 238, 218, .32),
    inset 0 0 38px rgba(var(--rim), .24),            /* light entering at the rim, glowing inward */
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 0 0 1px rgba(0, 0, 0, .3),
    0 0 10px rgba(var(--rim), .55),                  /* soft edge glow */
    0 0 40px rgba(var(--rim), .20),
    0 60px 100px -40px rgba(0, 0, 0, .85);
  translate: calc(var(--hx, 0) * var(--px-k, -70px)) calc(var(--hy, 0) * var(--py-k, -26px) + var(--bob));
  animation: bob 7s ease-in-out infinite alternate;
}
.room--strategy .rp--center { --px-k: -22px; --py-k: -8px; animation-duration: 8.5s; animation-delay: -3s; }
.room--strategy .rp--right { animation-duration: 7.6s; animation-delay: -5s; }
@keyframes bob { from { --bob: -4px; } to { --bob: 5px; } }
/* the light that slowly travels round the rim */
.room--strategy .room__panels .rp::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--rimA), transparent 0 70%, rgba(255, 240, 220, .0) 72%, rgba(255, 244, 228, .85) 80%, rgba(var(--rim), .0) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: rimrun 11s linear infinite; }
.room--strategy .rp--center::after { animation-duration: 13s; animation-delay: -6s; }
.room--strategy .rp--right::after { animation-delay: -3s; }
@keyframes rimrun { to { --rimA: 360deg; } }
.room--strategy .room__panels .rp::before { background: linear-gradient(90deg, transparent, rgba(255, 244, 226, .75), transparent); }
/* acrylic slab: edges carry the rim colour */
.rp__glass .g-t { background: linear-gradient(0deg, rgba(var(--rim), .62), rgba(var(--rim), .22) 55%, rgba(250, 238, 218, .40)); }
.rp__glass .g-b { background: linear-gradient(180deg, rgba(var(--rim), .30), rgba(20, 17, 14, .70)); }
.rp__glass .g-l { background: linear-gradient(90deg, rgba(var(--rim), .48), rgba(var(--rim), .16) 50%, rgba(var(--rim), .30)); }
.rp__glass .g-r { background: linear-gradient(270deg, rgba(var(--rim), .44), rgba(var(--rim), .14) 50%, rgba(var(--rim), .28)); }
.rp__glass .g-back { border-color: rgba(var(--rim), .36); box-shadow: inset 0 0 22px rgba(var(--rim), .10), 0 0 14px rgba(var(--rim), .12); }
/* inner edge line, a few px inside the rim */
.rp__glass .g-inner { inset: 12px; border-radius: 8px; border: 1.5px solid rgba(var(--rim), .34); transform: translateZ(-3px); }
/* the card's light falling on the table below it, and a faint reflection of its rim */
.rp__glass .g-pool { left: -10%; right: -10%; top: 100%; height: 520px; transform-origin: 50% 0; transform: translate3d(0, 200px, 0) rotateX(78deg);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--rim), .38), rgba(var(--rim), .10) 40%, transparent 68%); }
.rp__glass .g-refl { display: none; left: 0; right: 0; top: calc(100% + 40px); height: 55%; border-radius: 0 0 14px 14px;
  border: 2px solid rgba(var(--rim), .42); border-top: 0;
  background: linear-gradient(180deg, rgba(var(--rim), .10), transparent 70%);
  -webkit-mask: linear-gradient(180deg, #000, transparent 85%); mask: linear-gradient(180deg, #000, transparent 85%); filter: blur(1.2px); }
/* accents: slightly more gold and magenta on the cards themselves */
.room--strategy .rp__num { color: rgb(var(--rim)); }
.room--strategy .rp__title { text-shadow: 0 0 18px rgba(var(--rim), .18); }
.room--strategy .rp--center .rp__track i { background: linear-gradient(90deg, #8e174e, #e3198a); box-shadow: 0 0 8px rgba(227, 25, 138, .45); }
.room--strategy .rp__track i { background: linear-gradient(90deg, #8a6a44, #d6b88a); }
.room--strategy .rp__traits li::before { border-color: rgba(var(--rim), .95); }
@media (prefers-reduced-motion: reduce) { .room--strategy .room__panels .rp, .room--strategy .room__panels .rp::after { animation: none; } }
/* phone stack: flat, but same rim treatment */
@media (max-width: 960px) {
  .room__stack .rp { border: 1.5px solid rgba(var(--rim), .6);
    box-shadow: inset 0 1px 0 rgba(250, 238, 218, .28), inset 0 0 28px rgba(var(--rim), .14), 0 0 14px rgba(var(--rim), .25), 0 24px 50px -30px rgba(0, 0, 0, .8); }
}
/* phone stack: cards are flat and in normal flow (fixes 3D positions leaking into the stack since exp 3c) */
@media (max-width: 960px) {
  .room--strategy .room__stack .rp { transform: none; translate: none; animation: none; }
}

/* =====================================================================
   EXPERIMENT 4b — slab geometry read (geometry only; colours, glow, motion unchanged)
   The front face is the foremost surface; thickness extends backward from it.
   · Edge faces render only from outside (backface hidden, normals pointing outward), so we no longer look
     "down a tunnel" at all four inner edges — that was the recessed-frame read.
   · Edge faces are brightest where they meet the front face and fade toward the back.
   · The double edge is now front rim + back rim (the back face's outline), not an inset inner line.
   · The inward rim glow is moved off the front face onto the back face (light travelling inside the glass).
   · A faint gloss on the front face marks it as the nearest surface.
   ===================================================================== */
.rp__glass .g-inner { display: none; }
.rp__glass .g-t, .rp__glass .g-b, .rp__glass .g-l, .rp__glass .g-r { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rp__glass .g-t { transform: rotateX(-90deg) rotateY(180deg);
  background: linear-gradient(0deg, rgba(var(--rim), .70), rgba(var(--rim), .26) 45%, rgba(var(--rim), .05)); }
.rp__glass .g-b { transform: rotateX(90deg) rotateY(180deg);
  background: linear-gradient(180deg, rgba(var(--rim), .40), rgba(var(--rim), .10) 45%, rgba(20, 17, 14, .2)); }
.rp__glass .g-l { transform: rotateY(90deg) rotateX(180deg);
  background: linear-gradient(90deg, rgba(var(--rim), .60), rgba(var(--rim), .20) 45%, rgba(var(--rim), .04)); }
.rp__glass .g-r { transform: rotateY(-90deg) rotateX(180deg);
  background: linear-gradient(270deg, rgba(var(--rim), .56), rgba(var(--rim), .18) 45%, rgba(var(--rim), .04)); }
.rp__glass .g-back { border-color: rgba(var(--rim), .26); box-shadow: inset 0 0 38px rgba(var(--rim), .16); }
.room--strategy .room__panels .rp {
  background:
    linear-gradient(125deg, rgba(255, 246, 230, .07), rgba(255, 246, 230, 0) 38%),      /* front-surface gloss */
    radial-gradient(ellipse 80% 74% at 50% 50%, rgba(7, 6, 5, .42), rgba(7, 6, 5, .10) 70%, rgba(7, 6, 5, 0) 90%),
    linear-gradient(180deg, rgba(var(--rim), .05), rgba(var(--rim), 0) 22%, rgba(var(--rim), 0) 80%, rgba(var(--rim), .04)),
    rgba(10, 9, 8, .46);
  box-shadow:
    inset 0 1px 0 rgba(250, 238, 218, .32),
    inset 0 0 12px rgba(var(--rim), .10),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 0 0 1px rgba(0, 0, 0, .3),
    0 0 10px rgba(var(--rim), .55),
    0 0 40px rgba(var(--rim), .20),
    0 60px 100px -40px rgba(0, 0, 0, .85);
}

/* 4b (continued) — the slab body: an extrusion behind the front face, going back and outward (away from the
   room's centre) as in the owner's card reference. Built from stacked offset layers that only show outside the
   front outline, so it can never read as an inner frame. Accumulated layers make it brightest where it meets the
   front face, fading back; it ends in a fine back rim (the second edge of the double edge). */
.rp__glass .g-t, .rp__glass .g-b, .rp__glass .g-l, .rp__glass .g-r { display: none; }
.rp__glass .g-back { border-color: transparent; }
.rp__glass .g-inner { display: block; inset: 0; border: 0; border-radius: 14px; transform: translateZ(-1px);
  --ex: -2.1px; --ey: -1.1px;
  box-shadow:
    calc(var(--ex) * 16) calc(var(--ey) * 16) 0 rgba(12, 10, 9, .55),
    calc(var(--ex) * 17.6) calc(var(--ey) * 17.6) 0 rgba(var(--rim), .42),
    calc(var(--ex) * 15) calc(var(--ey) * 15) 0 rgba(var(--rim), .055),
    calc(var(--ex) * 14) calc(var(--ey) * 14) 0 rgba(var(--rim), .055),
    calc(var(--ex) * 13) calc(var(--ey) * 13) 0 rgba(var(--rim), .055),
    calc(var(--ex) * 12) calc(var(--ey) * 12) 0 rgba(var(--rim), .055),
    calc(var(--ex) * 11) calc(var(--ey) * 11) 0 rgba(var(--rim), .055),
    calc(var(--ex) * 10) calc(var(--ey) * 10) 0 rgba(var(--rim), .055),
    calc(var(--ex) * 9) calc(var(--ey) * 9) 0 rgba(var(--rim), .055),
    calc(var(--ex) * 8) calc(var(--ey) * 8) 0 rgba(var(--rim), .055),
    calc(var(--ex) * 7) calc(var(--ey) * 7) 0 rgba(var(--rim), .055),
    calc(var(--ex) * 6) calc(var(--ey) * 6) 0 rgba(var(--rim), .055),
    calc(var(--ex) * 5) calc(var(--ey) * 5) 0 rgba(var(--rim), .055),
    calc(var(--ex) * 4) calc(var(--ey) * 4) 0 rgba(var(--rim), .055),
    calc(var(--ex) * 3) calc(var(--ey) * 3) 0 rgba(var(--rim), .055),
    calc(var(--ex) * 2) calc(var(--ey) * 2) 0 rgba(var(--rim), .055),
    calc(var(--ex) * 1) calc(var(--ey) * 1) 0 rgba(var(--rim), .055); }
.rp--center .rp__glass .g-inner { --ex: -1.5px; --ey: -1.2px; }
.rp--right .rp__glass .g-inner { --ex: 2.1px; }


/* =====================================================================
   OPERATIONS ROOM (Specialized Agents) — layout only; card and plate treatment inherited from checkpoint 4
   Positions derived from the approved placement preview: four panels at 20/40/60/80% of the plate,
   outer pair slightly lower, all at one depth with a gentle inward turn for the 3D read.
   ===================================================================== */
.room--agents .room__plate { --pw: max(120vw, calc(120vh * 16 / 9)); --ph: calc(var(--pw) * 9 / 16); }
.room--agents .room__plate img { object-position: 50% 0; }
.room--agents .rp { --px-k: -40px; --py-k: -15px; min-height: 560px; }
.room--agents .rp--a1 { transform: translate3d(-1504px, -16px, -1900px) rotateY(16deg) rotateX(3deg); }
.room--agents .rp--a2 { transform: translate3d(-503px, -129px, -1900px) rotateY(5deg) rotateX(3deg); animation-delay: -2s; }
.room--agents .rp--a3 { transform: translate3d(503px, -129px, -1900px) rotateY(-5deg) rotateX(3deg); --rim: 222, 44, 146; animation-duration: 8.5s; animation-delay: -4s; }
.room--agents .rp--a4 { transform: translate3d(1504px, -16px, -1900px) rotateY(-16deg) rotateX(3deg); animation-duration: 7.6s; animation-delay: -6s; }
.room--agents .rp--a3::after { animation-duration: 13s; animation-delay: -6s; }
.room--agents .rp--a4::after { animation-delay: -3s; }
.room--agents .rp--a1 .rp__glass .g-inner, .room--agents .rp--a2 .rp__glass .g-inner { --ex: -2.1px; --ey: -1.1px; }
.room--agents .rp--a3 .rp__glass .g-inner, .room--agents .rp--a4 .rp__glass .g-inner { --ex: 2.1px; --ey: -1.1px; }
/* Create card: its magenta light cast on the room reduced ~25% (card and rim unchanged) */
.room--agents .rp--a3 .rp__glass .g-pool { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--rim), .285), rgba(var(--rim), .075) 40%, transparent 68%); }

/* =====================================================================
   REMAINING DESTINATIONS (generated) — layout only; plates, card system and transition from checkpoint 5
   ===================================================================== */
.room--p169 .room__plate { --pw: max(120vw, calc(120vh * 16 / 9)); --ph: calc(var(--pw) * 9 / 16); }
.room--p169 .room__plate img { object-position: 50% 0; }
.room--strategy .rp.rp--m { --rim: 222, 44, 146; }
.room--strategy .rp.rp--m .rp__glass .g-pool { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--rim), .285), rgba(var(--rim), .075) 40%, transparent 68%); }
.room--strategy .rp.rp--m .rp__track i { background: linear-gradient(90deg, #8e174e, #e3198a); box-shadow: 0 0 8px rgba(227, 25, 138, .45); }
.room--p169 .rp { --px-k: -40px; --py-k: -15px; }
.room--p169 .rp .rp__glass .g-inner { --ex: -2.1px; --ey: -1.1px; }
.room--p169 .rp.rp--r .rp__glass .g-inner { --ex: 2.1px; --ey: -1.1px; }
.room--cap .room__panels .rp { min-height: 540px; }
.room--tl .room__panels .rp { min-height: 470px; }
.room--progress .rp--progress1 { transform: translate3d(-840px, -108px, -1700px) rotateY(10deg) rotateX(3deg); }
.room--progress .rp--progress2 { transform: translate3d(0px, -160px, -1700px) rotateY(0deg) rotateX(3deg); }
.room--progress .rp--progress3 { transform: translate3d(840px, -108px, -1700px) rotateY(-10deg) rotateX(3deg); }
.room--privacy .rp--privacy1 { transform: translate3d(-886px, -108px, -1700px) rotateY(10deg) rotateX(3deg); }
.room--privacy .rp--privacy2 { transform: translate3d(-47px, -160px, -1700px) rotateY(0deg) rotateX(3deg); }
.room--privacy .rp--privacy3 { transform: translate3d(793px, -108px, -1700px) rotateY(-10deg) rotateX(3deg); }
.room--concept .rp--concept1 { transform: translate3d(-746px, -117px, -1400px) rotateY(9deg) rotateX(3deg); }
.room--concept .rp--concept2 { transform: translate3d(498px, -117px, -1400px) rotateY(-9deg) rotateX(3deg); }
.room--prototype .rp--prototype1 { transform: translate3d(-622px, -117px, -1400px) rotateY(9deg) rotateX(3deg); }
.room--prototype .rp--prototype2 { transform: translate3d(622px, -117px, -1400px) rotateY(-9deg) rotateX(3deg); }
.room--validation .rp--validation1 { transform: translate3d(0px, -163px, -1400px) rotateY(0deg) rotateX(3deg); }
.room--validation .rp--validation2 { transform: translate3d(995px, -163px, -1400px) rotateY(-9deg) rotateX(3deg); }
.room--expanding .rp--expanding1 { transform: translate3d(-829px, -163px, -1400px) rotateY(9deg) rotateX(3deg); }
.room--expanding .rp--expanding2 { transform: translate3d(912px, -163px, -1400px) rotateY(-9deg) rotateX(3deg); }
.room--future .rp--future1 { transform: translate3d(-539px, -117px, -1400px) rotateY(9deg) rotateX(3deg); }
.room--future .rp--future2 { transform: translate3d(829px, -117px, -1400px) rotateY(-9deg) rotateX(3deg); }
.room__hops { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; max-width: 560px; }
.room__hop { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px;
  background: rgba(8, 7, 6, .45); border: 1px solid var(--gold-line); color: var(--ivory-soft);
  font: 500 12px/1.2 var(--sans); transition: color .3s, border-color .3s; }
.room__hop span { display: flex; flex-direction: column; }
.room__hop b { font: 400 15px/1.2 var(--serif); color: var(--ivory); }
.room__hop--next { text-align: right; margin-left: auto; }
.room__hop svg { width: 16px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.room__hop:hover { color: var(--ivory); border-color: var(--champagne); }
/* milestone doors on the home timeline */
.ms[data-room] { cursor: pointer; }
.ms[data-room]:focus-visible { outline: 1.5px solid var(--champagne); outline-offset: 6px; border-radius: 6px; }
.ms.is-active .ms__dot { transform: scale(1.35); box-shadow: 0 0 0 5px rgba(227, 25, 138, .2), 0 0 22px rgba(227, 25, 138, .85); }
.ms.is-active .ms__title { color: #f6d9b0; }
body.is-away .journey:has(.ms.is-active) { opacity: 1; filter: none; }
body.is-away .journey:has(.ms.is-active) :is(.journey__intro, .ms:not(.is-active)) { opacity: .1; filter: blur(3px); transition: opacity .45s var(--ease), filter .45s var(--ease); }

/* =====================================================================
   CONTACT destination (general inquiries). Plate + HUD only; glass follows the checkpoint card look.
   ===================================================================== */
.room--contact .room__plate { --pw: max(120vw, calc(120vh * 1672 / 941)); --ph: calc(var(--pw) * 941 / 1672); }
.room--contact .room__atmo { background:
  linear-gradient(180deg, rgba(5, 4, 3, .6) 0%, transparent 14%),
  linear-gradient(20deg, rgba(5, 4, 3, .8) 0%, rgba(5, 4, 3, .42) 32%, transparent 55%); }
.room--contact .room__back { align-self: flex-start; }
.ct { flex: 1; display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 440px); justify-content: space-between; align-items: end; gap: 40px; margin-top: 16px; }
.ct__intro .room__lead { max-width: 30em; }
.ct__label { font: 500 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--champagne); }
.ct__email { margin-top: 26px; }
.ct__addr { margin-top: 10px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font: 400 20px/1.2 var(--serif); color: var(--ivory); user-select: all; }
.ct__addr span { user-select: all; }
.ct__copy { user-select: none; padding: 5px 12px; border-radius: 999px; background: rgba(8, 7, 6, .45); border: 1px solid var(--gold-line);
  color: var(--ivory-soft); font: 500 11px/1 var(--sans); letter-spacing: .08em; cursor: pointer; transition: color .3s, border-color .3s; }
.ct__copy:hover { color: var(--ivory); border-color: var(--champagne); }
.ct__follow { margin-top: 24px; }
.ct__social { margin-top: 12px; padding: 0; border: 0; gap: 22px; color: var(--ivory-soft); font-size: 12.5px; }
/* the form: a glass slab in the checkpoint language (gold rim, soft inner light, depth shadow) */
.ct__form { align-self: center; display: grid; gap: 14px; padding: 30px 30px 24px; border-radius: 14px;
  background: linear-gradient(125deg, rgba(255, 246, 230, .05), rgba(255, 246, 230, 0) 38%), rgba(10, 9, 8, .62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1.5px solid rgba(212, 172, 112, .8);
  box-shadow: inset 0 1px 0 rgba(250, 238, 218, .3), inset 0 0 24px rgba(212, 172, 112, .1), 0 0 10px rgba(212, 172, 112, .35),
    0 0 36px rgba(212, 172, 112, .12), 0 50px 90px -40px rgba(0, 0, 0, .85); }
.ct__formtitle { font: 500 26px/1.1 var(--serif); color: var(--ivory); margin-bottom: 4px; }
.ct__field { display: grid; gap: 7px; }
.ct__field span { font: 500 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ivory-mute); }
.ct__field input, .ct__field textarea { width: 100%; padding: 11px 13px; border-radius: 8px; resize: vertical;
  background: rgba(5, 4, 3, .55); border: 1px solid rgba(212, 172, 112, .28); color: var(--ivory);
  font: 400 15px/1.4 var(--sans); transition: border-color .3s, box-shadow .3s; }
.ct__field input:focus, .ct__field textarea:focus { outline: none; border-color: rgba(212, 172, 112, .85); box-shadow: 0 0 0 3px rgba(212, 172, 112, .14); }
.ct__field [aria-invalid="true"] { border-color: rgba(227, 25, 138, .8); }
.ct__send { justify-self: start; margin-top: 4px; cursor: pointer; }
.ct__send[disabled] { opacity: .6; cursor: progress; }
.ct__status { min-height: 1.2em; font: 400 13px/1.45 var(--sans); color: var(--ivory-soft); }
.ct__status.is-ok { color: #ecd2a8; }
.ct__status.is-err { color: #f17bbd; }
.ct__note { font: 400 12px/1.5 var(--sans); color: var(--ivory-mute); }
.ct__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 960px) {
  .ct { grid-template-columns: 1fr; align-items: start; gap: 28px; margin-top: 30vh; }
  .ct__form { align-self: stretch; padding: 24px 20px 20px; }
  .room--contact .room__atmo { background: linear-gradient(180deg, rgba(5, 4, 3, .6) 0%, transparent 14%),
    linear-gradient(0deg, rgba(5, 4, 3, .92) 0%, rgba(5, 4, 3, .72) 42%, rgba(5, 4, 3, .2) 58%, transparent 66%); }
}

/* =====================================================================
   APPROVED NAV CLEANUP
   ===================================================================== */
/* phones/tablets: no Home-only menu; Request Early Access stays in the header */
@media (max-width: 960px) {
  .nav__links { display: none !important; }
  .pill--nav { display: inline-flex !important; margin-left: auto; }
  /* section jumps land below the sticky header */
  #capabilities, #journey { scroll-margin-top: calc(var(--nav-h) + 12px); }
}
@media (max-width: 720px) {
  .pill--nav { min-height: 34px; height: 34px; padding-inline: 14px; font-size: 12px; gap: .5em; }
  .pill--nav svg { display: none; }
}
@media (max-width: 420px) {
  .brand { gap: 8px; }
  .brand__mark { min-width: 30px; width: 30px; }
  .brand__word { font-size: 15px; letter-spacing: .22em; margin-right: -.22em; }
}
/* Contact plate shown exactly as supplied (no room-wide warmth reduction) */
.room--contact.is-lit .room__plate img { filter: none; }

/* =====================================================================
   OFFICE WORLD — the travel canvas (world.js) and the Refined B fallback stage (fallback.js).
   Both sit exactly over the room's plate, under its cards, atmosphere and HUD, and only while travelling.
   ===================================================================== */
.room__gl, .room__b { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.room__b { overflow: hidden; contain: strict; background: #050403; }
.room__b .L { position: absolute; background-size: 100% 100%; will-change: transform, opacity; backface-visibility: hidden; }
.room__b .grp { position: absolute; inset: 0; }
/* Refined B partition: smoked glass with an open walnut doorway, bronze frame (1em = door width) */
.room__b .rb-door { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform, opacity; }
.room__b .rb-door > * { position: absolute; }
.room__b .pane { overflow: hidden; background: linear-gradient(180deg, rgba(14, 11, 9, .58), rgba(8, 7, 6, .68)); }
.room__b .pane i { position: absolute; top: -20%; bottom: -20%; width: 60%; left: 0; will-change: transform;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 244, 228, .10) 44%, rgba(255, 244, 228, .18) 48%, rgba(255, 244, 228, .05) 54%, transparent 70%); }
.room__b .jamb { background: url("assets/world/walnut.webp") center / auto 100% repeat-x; }
.room__b .jamb::before { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset .008em 0 0 #c9a06a, inset -.008em 0 0 #c9a06a; background: linear-gradient(180deg, rgba(236, 204, 158, .22), rgba(236, 204, 158, 0) 38%); }
.room__b .jamb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.1) 40%, rgba(0,0,0,.1) 60%, rgba(0,0,0,.55)); }
.room__b .reveal { background: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,0)); }
.room__b .sill { background: linear-gradient(180deg, #d8b27a 0 12%, #151110 12% 100%); }
.room__b .mul { background: linear-gradient(90deg, #0c0a09, #2a2119 45%, #0c0a09); box-shadow: 0 0 0 .003em rgba(185, 146, 96, .55); }
.room__b .cove { background: #fbe3bf; box-shadow: 0 0 .06em .02em rgba(255, 214, 160, .55), 0 .25em .5em rgba(255, 200, 140, .12); }
.room__b .soffit { background: linear-gradient(180deg, #0d0a08, #1a1410); }
.room__b .floorlight { background: linear-gradient(180deg, rgba(236, 204, 158, .28), rgba(236, 204, 158, 0)); }
.room__b .shadow { background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.room__b .dim { background: #070605; }

/* =====================================================================
   JOURNEY, 8 MILESTONES (handoff 2026-09-29): the three added rooms use the supplied frozen daylight plates
   (1672 × 941), shown uncropped in the plate frame and uncorrected (no saturation pull), like Contact.
   ===================================================================== */
.room--day .room__plate { --pw: max(120vw, calc(120vh * 1672 / 941)); --ph: calc(var(--pw) * 941 / 1672); }
.room--day.is-lit .room__plate img { filter: none; }
.room--day .room__atmo { background:
  linear-gradient(180deg, rgba(5, 4, 3, .6) 0%, transparent 14%),
  linear-gradient(20deg, rgba(5, 4, 3, .8) 0%, rgba(5, 4, 3, .42) 32%, transparent 55%); }
.room--one-system .rp--one-system1 { transform: translate3d(-829px, -117px, -1400px) rotateY(9deg) rotateX(3deg); }
.room--one-system .rp--one-system2 { transform: translate3d(829px, -117px, -1400px) rotateY(-9deg) rotateX(3deg); }
.room--memory .rp--memory1 { transform: translate3d(-870px, -163px, -1400px) rotateY(9deg) rotateX(3deg); }
.room--memory .rp--memory2 { transform: translate3d(870px, -163px, -1400px) rotateY(-9deg) rotateX(3deg); }
.room--real-memory .rp--real-memory1 { transform: translate3d(-870px, -163px, -1400px) rotateY(9deg) rotateX(3deg); }
.room--real-memory .rp--real-memory2 { transform: translate3d(870px, -163px, -1400px) rotateY(-9deg) rotateX(3deg); }
/* phone timeline: the longer 8-milestone dates wrap in their own column instead of squeezing the titles */
@media (max-width: 960px) { .ms__date { max-width: 10.5em; text-align: right; line-height: 1.5; } .ms__tag { margin-top: 8px; } }
/* phone: the daylight plates need the Contact-style shade under the stacked heading to stay legible */
@media (max-width: 960px) {
  .room--day .room__atmo { background: linear-gradient(180deg, rgba(5, 4, 3, .6) 0%, transparent 14%),
    linear-gradient(0deg, rgba(5, 4, 3, .9) 0%, rgba(5, 4, 3, .82) 44%, rgba(5, 4, 3, .55) 56%, transparent 70%); }
}

/* V1 cleanup: Contact privacy notice (beneath the form, inside its card) */
.ct__privacy { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--gold-hair); }
.ct__privacy p:last-child { margin-top: 7px; font: 400 11.5px/1.5 var(--sans); color: var(--ivory-mute); }