@font-face { font-family: Geist; src: url("/assets/fonts/geist-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #1c2124;
  --ink-2: #4a5157;
  --stone: #d9d2c5;
  --plaque: #f6f6f3;
  --plaque-edge: #c9bfae;
  --bronze: #7a5a3a;
  --work: #e85d26;
  --work-ink: #b8431a;
  --sky: #cfd8dc;
  --hud: rgba(28, 33, 36, 0.86);
  /* Cards follow the window: narrower and a touch smaller type on small screens, never wider than they read well. */
  --pw: clamp(400px, 34vw, 470px);
  --pw-wide: clamp(500px, 46vw, 660px);
  --radius: 5px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--sky); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.55 Geist, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--sky); }
img { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--work); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--radius); }
.skip-link:focus { top: 12px; }

/* ---------- The world ---------- */
.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.world-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s ease; }
.world-ready .world-canvas { opacity: 1; }
.backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.no-webgl .world-canvas { display: none; }
.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; display: none; }
.posters .poster { display: block; }
.posters .poster.is-front { opacity: 1; }
.poster-mode .hud, .poster-mode .rail, .poster-mode .stepper, .poster-mode .plaques, .poster-mode .track, .poster-mode .reader { display: none !important; }
.poster-mode .stage { height: 100% !important; }
.poster-mode .world-canvas { transition: none; }
.poster-mode .backdrop { display: none; }

.plaques { position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.journey { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; transform-style: preserve-3d; transform-origin: 0 0; pointer-events: none; }
.chapter { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.plaque {
  position: absolute; left: 0; top: 0; width: var(--pw); display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; backface-visibility: hidden; transform-origin: 0 0;
  background: var(--plaque); border: 1px solid var(--plaque-edge); border-radius: var(--radius);
  box-shadow: 0 1px 0 #fff inset, 0 24px 60px -18px rgba(38, 30, 22, .45);
  padding: 28px 30px 26px; border-left: 4px solid var(--work);
}
/* The scroller has to be a child, not the plaque: Chrome does not hit-test a scroll container that
   carries a 3D transform, which left every control inside a plaque dead to the pointer. */
.plaque-body { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
/* The stop's name, large and floating above its card on the hall itself. A light halo keeps the orange
   readable over stone, beams and hedges. Outside .plaque-body so the scroller cannot clip it. */
.plaque-title {
  position: absolute; left: -4px; bottom: calc(100% + 12px); margin: 0; width: max-content; max-width: calc(100vw - 120px);
  font-size: clamp(26px, 2.3vw, 36px); line-height: 1.05; font-weight: 720; letter-spacing: -0.022em; color: var(--work-ink);
  text-shadow: 0 0 2px #f6f6f3, 0 0 8px rgba(246, 246, 243, .95), 0 0 20px rgba(246, 246, 243, .85);
}
.plaque.is-live { pointer-events: auto; }
.plaque-wide { width: var(--pw-wide); }
/* The scroll height of the journey and nothing else. It carried CSS scroll-snap markers a viewport
   apart until 2026-10-02: Chrome's proximity range is about half the snapport, so every ordinary
   wheel or trackpad nudge was animated back to the stop it started from and the hall never moved.
   The dwell comes from the easing in onScroll instead, which holds each stop over 36% of its step. */
.track { width: 1px; }

/* ---------- Plaque typography (content comes verbatim from the production pages) ---------- */
.plaque h1, .reader h1 { font-size: clamp(30px, 2.7vw, 42px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 640; margin: 10px 0 14px; text-wrap: balance; }
.plaque h2, .reader h2 { font-size: clamp(23px, 1.9vw, 29px); line-height: 1.15; letter-spacing: -0.018em; font-weight: 620; margin: 4px 0 10px; text-wrap: balance; }
.plaque h3, .reader h3 { font-size: 16px; line-height: 1.3; font-weight: 640; margin: 0 0 4px; }
.plaque p, .reader p { margin: 0 0 12px; }
.plaque ul, .plaque ol { padding-left: 1.1em; margin: 0 0 12px; }
.accent { color: var(--work-ink); }
.eyebrow { color: var(--work-ink); font-weight: 600; font-size: 13.5px; letter-spacing: .01em; }
.hero-kicker { display: flex; gap: 8px; align-items: center; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.kicker-dot, .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--work); flex: none; }
.lede { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.plaque .lede { font-size: 16px; }
.section-head p { color: var(--ink-2); }
.muted { color: var(--ink-2); }
.actions, .pricing-actions, .inline-actions, .plaque-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; align-items: center; }
.plaque-links { gap: 6px 18px; margin-top: 12px; }
.button, .hud-book {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 999px;
  background: var(--work); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; border: 1px solid var(--work); cursor: pointer;
}
.button:hover, .hud-book:hover { background: var(--work-ink); border-color: var(--work-ink); }
.button-secondary { background: transparent; color: var(--ink); border-color: #9c9284; }
.button-secondary:hover { background: #ece9e3; border-color: var(--ink); color: var(--ink); }
.text-link { color: var(--work-ink); font-weight: 600; text-underline-offset: 3px; }
.pricing-trigger { font: inherit; font-size: 14px; font-weight: 600; background: none; border: 0; padding: 6px 0; color: var(--work-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.plaque-paths { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 14px 0 4px; font-size: 13.5px; }
.plaque-paths span { flex-basis: 100%; color: var(--ink-2); font-weight: 600; font-size: 12.5px; letter-spacing: .02em; }
.plaque-paths a { display: inline-flex; align-items: center; min-height: 36px; padding: 5px 12px; border: 1px solid #cfc6b8; border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font-weight: 600; }
.plaque-paths a:hover { border-color: var(--work-ink); color: var(--work-ink); }
.hero-proof { list-style: none; padding: 0 !important; display: grid; gap: 6px; margin: 14px 0; }
.hero-proof li { padding-left: 18px; position: relative; font-weight: 500; }
.hero-proof li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 3px; background: var(--work); }
.hero-note, .pricing-fine, .pricing-note, .client-result-note, .arc-note, .corbel-definition, .contact-line { font-size: 14px; color: var(--ink-2); }
.plaque-person { display: flex; gap: 16px; align-items: center; margin: 0 0 12px; }
.plaque-person img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.plaque-person h2 { margin: 0; }
.plaque-person span { color: var(--ink-2); font-size: 14px; }
.client-story { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 6px; }
.client-story div { border-top: 2px solid var(--ink); padding-top: 6px; }
.client-story dt { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--work-ink); }
.client-story dd { margin: 3px 0 0; font-size: 13.5px; line-height: 1.42; }
.about-brand { display: flex; gap: 16px; align-items: center; margin-bottom: 6px; }
.about-mark { width: 56px; height: 56px; flex: none; }
.about-brand h2 { margin: 0; }
.achievement-wall { display: grid; grid-template-columns: 1fr 1.25fr; gap: 18px; margin: 12px 0; }
.achievement-group h3 { font-size: 13.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--work-ink); margin-bottom: 8px; }
.achievement-group p { font-size: 13.5px; color: var(--ink-2); margin: 8px 0 0; }
.client-chips { list-style: none; padding: 0 !important; margin: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; }
.client-chips li { background: #fff; border: 1px solid #ddd6ca; border-radius: 999px; padding: 4px 10px; font-size: 13.5px; font-weight: 600; }
.app-list { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: 7px; }
.app-list li { display: grid; font-size: 13px; line-height: 1.38; color: var(--ink-2); }
.app-list strong { color: var(--ink); font-size: 14px; }
.about-host h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.2; margin: 4px 0 10px; }
.about-host .about-profile img { width: 64px; height: 64px; }
.call-agenda { list-style: none; padding: 0 !important; counter-reset: agenda; display: grid; gap: 8px; margin: 12px 0 !important; }
.call-agenda li { counter-increment: agenda; position: relative; padding-left: 34px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.call-agenda li::before { content: counter(agenda); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--work); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.call-agenda strong { color: var(--ink); }
.plaque-end { border-top: 1px solid #d9d2c6; padding-top: 10px; margin-top: 12px; font-size: 14px; color: var(--ink-2); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* The host's speech card. view.js seats it above the figure; it is not a scroller, so a wheel over it
   still drives the camera. The still only shows where the figure cannot: no WebGL, no JavaScript. */
.host-card { width: clamp(330px, 100vw - 690px, 390px); padding: 14px 18px 12px; border-left-width: 1px; border-top: 4px solid var(--work); }
.host-card::after { content: ""; position: absolute; left: var(--tail, 50%); bottom: -9px; width: 16px; height: 16px; background: var(--plaque); border: solid var(--plaque-edge); border-width: 0 1px 1px 0; transform: translateX(-50%) rotate(45deg); }
.host-card .eyebrow { margin: 0 0 2px; }
.host-card h2 { font-size: 19px; margin: 0 0 6px; }
.host-card p { font-size: 14px; color: var(--ink-2); margin: 0 0 6px; }
.host-tour { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; font-size: 13.5px; padding-left: 1.3em !important; margin: 0 0 6px !important; }
.host-tour li::marker { color: var(--work-ink); font-weight: 700; }
.host-tour a { display: inline-flex; align-items: center; min-height: 28px; color: var(--ink); font-weight: 600; text-decoration: none; }
.host-tour a:hover { color: var(--work-ink); text-decoration: underline; text-underline-offset: 3px; }
.host-card .host-cue { color: var(--work-ink); font-weight: 600; margin: 0; }
.host-still { display: none; float: left; width: 64px; height: auto; margin: 0 12px 4px 0; transform: scaleX(-1); }
.no-webgl .host-still, .no-js .host-still { display: block; }
.no-webgl .host-card::after, .no-js .host-card::after { display: none; }

.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.proof-cell { border-top: 2px solid var(--ink); padding-top: 8px; }
.proof-number { font-size: 30px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.proof-number sup { font-size: 12px; color: var(--ink-2); }
.proof-label { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.proof-sources { font-size: 12px; color: var(--ink-2); }
.proof-sources ol { padding-left: 1.2em; margin: 8px 0 0; }

.calc-card { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; }
.calc-field { margin-bottom: 12px; }
.calc-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 500; }
.calc-row output { font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-field input[type="range"] { width: 100%; accent-color: var(--work); height: 28px; }
.calc-results { background: #ebe8e1; border-radius: var(--radius); padding: 14px 16px; }
.calc-result { display: grid; margin-bottom: 10px; }
.calc-k { font-size: 13px; color: var(--ink-2); }
.calc-result strong { font-size: 28px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.calc-sub, .calc-note { font-size: 12.5px; color: var(--ink-2); }

.tools-title span { color: var(--ink-2); font-weight: 500; }
.tool-lists h3 { font-size: 13.5px; color: var(--ink-2); font-weight: 600; margin: 14px 0 6px; }
.marquee-group { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.marquee-group li { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #ddd6ca; border-radius: 999px; padding: 4px 10px 4px 6px; font-size: 13.5px; font-weight: 500; }
.marquee-group img { width: 18px; height: 18px; }

.qa details { border-top: 1px solid #d9d2c6; }
.qa details:last-child { border-bottom: 1px solid #d9d2c6; }
.qa summary { cursor: pointer; padding: 11px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; min-height: 44px; align-items: center; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--work-ink); font-weight: 500; font-size: 20px; line-height: 1; }
.qa details[open] summary::after { content: "\2212"; }
.qa-body { padding: 0 0 12px; color: var(--ink-2); font-size: 15px; }

.loop-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; counter-reset: loop; }
.loop-step { border-top: 3px solid var(--work); padding-top: 8px; font-size: 13px; line-height: 1.42; counter-increment: loop; }
.loop-step h3::before { content: counter(loop) " "; color: var(--work-ink); }
.loop-step p { margin-bottom: 6px; color: var(--ink-2); }
.loop-tag { font-size: 12px; font-weight: 600; }
.arc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.arc-phase { font-size: 13px; line-height: 1.42; border-top: 3px solid var(--ink); padding-top: 8px; }
.arc-phase p { color: var(--ink-2); }
.arc-days { font-size: 12px; font-weight: 700; color: var(--work-ink); font-variant-numeric: tabular-nums; }

.client-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.client-result { display: grid; border-top: 3px solid var(--work); padding-top: 8px; }
.client-result-num { font-size: 32px; font-weight: 680; letter-spacing: -0.025em; }
.client-result-label { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.plaque-quote { margin: 0; }
.plaque-quote blockquote { margin: 0 0 14px; font-size: 19px; line-height: 1.5; letter-spacing: -0.005em; }
.plaque-quote mark { background: linear-gradient(transparent 58%, rgba(232, 93, 38, .28) 58%); color: inherit; }
.plaque-quote figcaption { display: flex; gap: 12px; align-items: center; }
.client-quote-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.client-quote-who { display: grid; font-size: 14px; }
.client-quote-who span { color: var(--ink-2); }

.pricing-item { border-top: 3px solid var(--ink); padding-top: 10px; }
.pricing-item.featured { border-top-color: var(--work); }
.pricing-label { font-size: 13px; font-weight: 700; color: var(--work-ink); }
.pricing-value { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.pricing-value span:first-child { font-size: 13px; color: var(--ink-2); }
.pricing-value span:last-child { font-size: 25px; font-weight: 680; letter-spacing: -0.02em; }
.founding-badge { display: inline-block; font-size: 12px; font-weight: 700; background: #fde6db; color: var(--work-ink); border-radius: 999px; padding: 3px 9px; margin: 4px 0; }
.folio-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.folio-pair p { font-size: 14.5px; }

.live-feature-card { display: grid; gap: 14px; }
.live-feature-copy h2 { margin-top: 8px; }
.live-ticket { background: var(--ink); color: #f1ede6; border-radius: var(--radius); padding: 14px 16px; }
.live-ticket-top { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; }
.live-ticket-date { font-size: 22px; font-weight: 650; margin-top: 4px; }
.live-ticket-spot { font-size: 13.5px; opacity: .8; }
.live-ticket-facts { display: flex; gap: 20px; margin: 10px 0 0; }
.live-ticket-facts div { display: grid; }
.live-ticket-facts dt { font-size: 12px; opacity: .7; }
.live-ticket-facts dd { margin: 0; font-weight: 600; }
.plaque .live-ticket { margin-top: 2px; }

.fit-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 10px; }
.fit-col h3 { display: flex; gap: 8px; align-items: center; }
.fit-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--work); }
.fit-col.not .fit-dot { background: #8b8378; }
.fit-col ul { font-size: 14.5px; padding-left: 1.1em; }
.fit-col li { margin-bottom: 6px; }

.about-profile-column { display: flex; flex-direction: column; gap: 8px; }
.about-profile { display: flex; gap: 14px; align-items: center; margin: 4px 0 8px; }
.about-profile img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.about-profile figcaption { display: grid; font-size: 14px; }
.about-profile figcaption span { color: var(--ink-2); }
.about-copy p { font-size: 15px; }
.about-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.about-facts div { border-top: 2px solid var(--ink); padding-top: 6px; }
.about-facts dt { font-size: 24px; font-weight: 680; }
.about-facts dd { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.cert-row { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; }
.cert-row li { display: inline-flex; gap: 6px; align-items: center; background: #fff; border: 1px solid #ddd6ca; border-radius: 999px; padding: 4px 10px; font-size: 13.5px; font-weight: 600; }
.cert-row li span { color: var(--ink-2); font-weight: 500; }

.plaque-final .container h2 { font-size: clamp(28px, 2.5vw, 38px); }
.plaque-directory { margin: 18px 0 12px; border-top: 1px solid #d9d2c6; padding-top: 12px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); padding-top: 10px; border-top: 1px solid #d9d2c6; }

/* Directory (map dialog, final plaque, 404) */
.directory { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dir-room h3 { font-size: 15px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 0 0 4px; }
.dir-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--work); color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.dir-place { font-weight: 500; color: var(--ink-2); font-size: 13px; }
.dir-stops, .dir-pages { list-style: none; padding: 0 0 0 30px !important; margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 14px; }
.dir-stops a { color: var(--ink-2); }
.dir-pages a { font-weight: 600; color: var(--work-ink); }
.plaque-directory .directory { grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.plaque-directory .dir-stops { display: none; }

/* ---------- Reading surface for every other route ---------- */
.reader { position: relative; z-index: 3; display: none; }
body[data-mode="reader"] .reader { display: block; }
body[data-mode="reader"] .track { display: none; }
body[data-mode="reader"] .plaques { visibility: hidden; }
.reader-surface {
  width: min(760px, 54vw); margin: 92px 0 110px max(24px, 4.5vw); background: var(--plaque);
  border: 1px solid var(--plaque-edge); border-left: 4px solid var(--work); border-radius: var(--radius);
  box-shadow: 0 30px 80px -24px rgba(38, 30, 22, .5); padding: 30px clamp(20px, 3vw, 44px) 28px;
}
.reader-short { width: min(680px, 54vw); }
.reader-room { font-size: 13px; color: var(--ink-2); margin: 0 0 6px !important; }
.reader-room span { font-weight: 700; color: var(--work-ink); margin-right: 4px; }
.reader .container { max-width: none; padding: 0; }
.reader .section, .reader section { padding: 18px 0; border-top: 1px solid #ddd6ca; }
.reader .page-hero { padding: 0 0 8px; }
.reader .crumbs { display: flex; gap: 6px; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.reader ul, .reader ol { padding-left: 1.2em; }
.reader li { margin-bottom: 5px; }
.reader dl dt { font-weight: 650; }
.reader dl dd { margin: 0 0 10px; color: var(--ink-2); }
.reader .section-head { margin-bottom: 12px; }
.reader [class$="-grid"], .reader .process, .reader .principles, .reader .offer-cards, .reader .two-ways, .reader .embed-phase-list, .reader .live-cards, .reader .surface-list, .reader .charter-list, .reader .legal-facts, .reader .yours-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin: 10px 0;
}
.reader [class$="-card"], .reader .principle, .reader .process-step, .reader .embed-phase, .reader .offer, .reader .way, .reader .problem, .reader .surface-row, .reader .outcome, .reader .stage-item, .reader .legal-fact, .reader .partner, .reader .safety {
  border-top: 3px solid var(--ink); padding: 10px 0 0; font-size: 14.5px;
}
.reader .featured, .reader .embed-terms .big { border-top-color: var(--work); }
.reader .embed-terms .big { display: block; font-size: 24px; letter-spacing: -0.02em; }
.reader .band-dark, .reader .on-dark, .reader .dark { color: inherit; }
.reader table { width: 100%; border-collapse: collapse; font-size: 14px; }
.reader td, .reader th { border-top: 1px solid #ddd6ca; padding: 8px 6px; text-align: left; vertical-align: top; }
.reader form { display: grid; gap: 12px; }
.reader select, .reader input:not([type="range"]):not([type="radio"]):not([type="checkbox"]), .reader textarea { font: inherit; padding: 9px 10px; border: 1px solid #b9b0a2; border-radius: 4px; background: #fff; max-width: 100%; }
.reader fieldset { border: 1px solid #ddd6ca; border-radius: var(--radius); padding: 12px; }
.reader .cta-band { border-top: 3px solid var(--work); margin-top: 14px; }
.reader-foot { display: grid; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #ddd6ca; }
.reader .live-ticket { margin: 10px 0; }

/* ---------- HUD, rail, stepper ---------- */
.hud { position: fixed; left: 0; right: 0; top: 0; z-index: 10; display: flex; align-items: center; gap: 18px; padding: 14px max(16px, 2vw); pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-brand { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; font-weight: 700; letter-spacing: .06em; font-size: 14px; background: var(--hud); color: #fff; padding: 9px 14px; border-radius: 999px; }
.hud-brand svg { width: 18px; height: 18px; fill: var(--work); }
.hud-place { margin: 0; background: rgba(246, 246, 243, .9); border: 1px solid var(--plaque-edge); border-radius: 999px; padding: 8px 14px; font-size: 13.5px; display: flex; gap: 6px; flex-wrap: wrap; }
.hud-place [data-place-chapter] { color: var(--work-ink); font-weight: 700; }
.hud-actions { margin-left: auto; display: flex; gap: 8px; }
.hud-prices { display: inline-flex; align-items: center; font-weight: 600; font-size: 15px; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: rgba(246, 246, 243, .9); border: 1px solid var(--plaque-edge); color: var(--ink); text-decoration: none; }
.hud-prices:hover { background: #fff; }
.hud-map { font: inherit; font-weight: 600; font-size: 15px; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: var(--hud); color: #fff; border: 0; cursor: pointer; }

.rail { position: fixed; right: max(16px, 1.6vw); top: 50%; transform: translateY(-50%); height: 56vh; z-index: 9; width: 30px; }
.rail-line { position: absolute; left: 14px; top: 0; bottom: 0; width: 3px; background: rgba(28, 33, 36, .28); border-radius: 3px; }
.rail-fill { position: absolute; inset: 0; background: var(--work); transform-origin: top; transform: scaleY(0); border-radius: 3px; }
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail li { position: absolute; top: calc(var(--at) * 100%); left: 0; transform: translateY(-50%); }
.rail a { display: flex; align-items: center; justify-content: flex-end; flex-direction: row-reverse; gap: 10px; min-height: 30px; text-decoration: none; }
.rail-dot { width: 13px; height: 13px; border-radius: 50%; background: #f6f6f3; border: 3px solid var(--ink); margin-left: 9px; flex: none; }
.rail a[aria-current] .rail-dot { background: var(--work); border-color: var(--work); box-shadow: 0 0 0 4px rgba(232, 93, 38, .25); }
.rail-label { position: absolute; right: 36px; white-space: nowrap; font-size: 13px; font-weight: 600; background: var(--hud); color: #fff; padding: 4px 10px; border-radius: 999px; opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; pointer-events: none; }
.rail a:hover .rail-label, .rail a:focus-visible .rail-label, .rail a[aria-current] .rail-label { opacity: 1; transform: none; }

.stepper { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 10; display: flex; gap: 8px; }
.step { display: inline-flex; gap: 8px; align-items: center; min-height: 46px; padding: 8px 16px; border-radius: 999px; text-decoration: none; background: var(--hud); color: #fff; font-size: 14px; max-width: 46vw; }
.step[hidden] { display: none; }
.step-book { display: none; }
.step-dir { font-weight: 700; color: #ffb28f; }
.step-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-next { background: var(--work); }
.step-next .step-dir { color: #fff; }
.step-prev .step-dir::before { content: "\2190  "; }
.step-next .step-dir::after { content: "  \2192"; }

/* ---------- Dialogs ---------- */
dialog { border: 0; padding: 0; background: transparent; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); color: var(--ink); }
dialog::backdrop { background: rgba(20, 22, 24, .55); }
.map-shell, .booking-shell, .pricing-modal-shell, .report-modal-shell { background: var(--plaque); border-left: 4px solid var(--work); border-radius: var(--radius); padding: 22px 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.map-shell { width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.map-head, .booking-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.map-head h2, .booking-head h2 { margin: 0; font-size: 22px; flex: 1; }
.map-close, .pricing-modal-close, .report-modal-close { font: inherit; font-weight: 600; min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid #b9b0a2; background: #fff; cursor: pointer; }
.booking-shell { width: min(980px, calc(100vw - 24px)); height: min(760px, calc(100dvh - 24px)); display: flex; flex-direction: column; }
.booking-direct { font-size: 14px; font-weight: 600; color: var(--work-ink); }
.booking-cal { flex: 1; overflow: auto; min-height: 0; }
.booking-wait { color: var(--ink-2); font-size: 14px; }
.booking-cal:has(iframe) .booking-wait { display: none; }
.pricing-modal-shell { width: min(560px, calc(100vw - 24px)); position: relative; }
.pricing-modal-close { position: absolute; right: 14px; top: 14px; }
.pricing-modal h2 { margin: 6px 50px 10px 0; font-size: 22px; }
.pricing-modal-content li { margin-bottom: 8px; }
.report-modal-shell { width: min(1000px, calc(100vw - 24px)); height: calc(100dvh - 24px); display: flex; flex-direction: column; gap: 12px; }
.report-modal-header { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; }
.report-modal-header span { font-size: 12.5px; color: var(--ink-2); }
.report-modal-header h2 { margin: 4px 0; font-size: 20px; }
.report-modal-summary { font-size: 14px; color: var(--ink-2); margin: 0; }
.report-modal-viewport { flex: 1; min-height: 0; }
.report-modal-viewport iframe { width: 100%; height: 100%; border: 1px solid #ddd6ca; border-radius: 4px; background: #fff; }
.report-modal-footer { display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; font-size: 14px; }
.report-modal-proof { display: grid; }

/* ---------- Phones: the hall is a live band at the top; the plaques are ordinary scrolling content ---------- */
@media (max-width: 759px), (max-aspect-ratio: 4/5) {
  .plaque-title { position: static; width: auto; max-width: none; margin: 0 0 8px; font-size: 24px; text-shadow: none; }
  .client-story, .achievement-wall { grid-template-columns: 1fr; }
  :root { --band: 36svh; --pw: auto; --pw-wide: auto; }
  body { font-size: 15.5px; }
  .stage { bottom: auto; height: var(--band); z-index: 5; box-shadow: 0 12px 30px -16px rgba(28, 33, 36, .55); }
  .plaques { position: relative; inset: auto; overflow: visible; pointer-events: auto; padding: calc(var(--band) + 10px) 0 120px; }
  .journey, .chapter { position: static; width: auto; height: auto; transform: none !important; pointer-events: auto; }
  .chapter::before { content: attr(aria-label); display: block; margin: 12px 18px 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--work-ink); }
  .plaque, .plaque-wide { position: relative; width: auto; margin: 0 16px 14px; opacity: 1; pointer-events: auto; transform: none !important; max-height: none !important; padding: 20px 18px 18px; border-left-width: 3px; scroll-margin-top: calc(var(--band) + 10px); }
  .plaque-body { overflow: visible; }
  .plaque h1 { font-size: 27px; }
  .plaque h2 { font-size: 22px; }
  .track { display: none; }
  body[data-mode="reader"] .plaques { display: none; }
  .hud { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .hud-brand { padding: 9px 11px; }
  .hud-brand span { display: none; }
  .hud-place { order: 3; flex-basis: 100%; font-size: 12.5px; padding: 6px 12px; border-radius: 14px; }
  .hud-map { padding: 8px 14px; }
  .hud-book, .hud-prices { display: none; }
  .rail { top: calc(var(--band) - 16px); bottom: auto; left: 16px; right: 16px; width: auto; height: 20px; transform: none; }
  .rail-line { left: 0; right: 0; top: 9px; bottom: auto; width: auto; height: 3px; background: rgba(246, 246, 243, .6); }
  .rail-fill { transform-origin: left; transform: scaleX(var(--p, 0)) !important; }
  .rail li { top: 0; left: calc(var(--at) * 100%); transform: translateX(-50%); }
  .rail a { min-height: 20px; min-width: 24px; justify-content: center; }
  .rail-dot { margin: 0; width: 12px; height: 12px; }
  .rail-label { display: none; }
  .stepper { left: 0; right: 0; bottom: 0; transform: none; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(246, 246, 243, .94); backdrop-filter: blur(10px); border-top: 1px solid var(--plaque-edge); }
  .step { max-width: none; min-width: 0; padding: 8px 12px; white-space: nowrap; }
  .step-book { display: inline-flex; flex: 1 1 0; justify-content: center; background: var(--work); font-weight: 600; }
  .step-next { flex: 1.15 1 0; justify-content: center; background: var(--hud); }
  .step-next .step-dir { color: #ffb28f; }
  .step-prev { flex: 0 0 auto; width: 46px; padding: 0; justify-content: center; }
  .step-prev .step-name { display: none; }
  .step-prev .step-dir { font-size: 0; }
  .step-prev .step-dir::before { content: "\2190"; font-size: 18px; }
  .loop-grid, .arc-grid { grid-template-columns: 1fr 1fr; }
  .calc-card, .fit-columns, .folio-pair { grid-template-columns: 1fr; }
  .plaque-directory .directory { grid-template-columns: 1fr; }
  .reader-surface, .reader-short { width: auto; margin: calc(var(--band) + 12px) 12px 110px; padding: 22px 18px; }
  .client-result-num { font-size: 25px; }
}

/* Short or narrow desktop windows: tighter cards, so each fits its frame without an inner scroll. */
@media (min-width: 760px) and (min-aspect-ratio: 4/5) and ((max-height: 860px) or (max-width: 1300px)) {
  .plaque { padding: 20px 22px 18px; font-size: 14.5px; line-height: 1.48; }
  /* Five app entries need a wider About folio to keep every description in view. */
  .plaque#about { width: max(var(--pw-wide), 650px); }
  .plaque h1 { font-size: clamp(26px, 2.5vw, 34px); }
  .plaque h2 { font-size: clamp(20px, 1.7vw, 25px); }
  .plaque .lede, .lede { font-size: 15px; }
  .plaque p { margin-bottom: 9px; }
  .actions, .pricing-actions, .inline-actions { margin: 10px 0 4px; }
  .button { min-height: 40px; padding: 8px 16px; font-size: 14.5px; }
}

@media (min-width: 760px) and (min-aspect-ratio: 4/5) and (max-height: 800px) {
  .plaque { padding: 16px 18px 14px; font-size: 13.5px; line-height: 1.42; }
  .plaque h2 { font-size: 20px; margin-bottom: 6px; }
  .plaque p { margin-bottom: 7px; }
  .proof-number { font-size: 24px; }
  .proof-grid { margin: 8px 0; gap: 8px; }
  .loop-step, .arc-phase { font-size: 12px; line-height: 1.36; }
  .arc-grid, .loop-grid { margin: 8px 0; }
  .client-story dd, .app-list li { font-size: 12.5px; }
  .client-result-num { font-size: 26px; }
  .about-facts dt { font-size: 20px; }
  .plaque-title { font-size: 26px; }
}

/* ---------- Without JavaScript: the same plaques as a readable column over the drawn hall ---------- */
.no-js .plaques, .no-js .journey, .no-js .chapter { position: static; width: auto; height: auto; overflow: visible; pointer-events: auto; }
.no-js .plaques { position: relative; z-index: 2; padding: 90px 16px 40px; }
.no-js .plaque-title { position: static; width: auto; margin: 0 0 8px; text-shadow: none; }
.no-js .plaque { position: relative; opacity: 1; pointer-events: auto; margin: 0 auto 28px; max-height: none; transform: none; }
.no-js .stepper, .no-js .rail, .no-js .hud-map, .no-js .track { display: none; }
.no-js .reader { display: block; }
.no-js .stage { position: fixed; }
.no-js dialog:not([open]) { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .stage, .hud, .rail, .stepper, .plaques, .track, .skip-link { display: none !important; }
  body, html { background: #fff; }
  .reader { display: block !important; }
  .reader-surface { margin: 0; width: auto; border: 0; box-shadow: none; padding: 0; }
  .reader-room, .reader-foot { display: none; }
}

/* Reading surfaces keep the stepper beside the text, not over it. */
@media (min-width: 760px) and (min-aspect-ratio: 4/5) {
  body[data-mode="reader"] .stepper { left: auto; right: max(64px, 5vw); transform: none; }
}
.plaque-legal { display: flex; align-items: center; gap: 12px; border-top: 1px solid #d9d2c6; padding-top: 10px; }
.plaque-legal .footer-legal { border: 0; padding: 0; flex: 1; }
.footer-social-link { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--ink-2); }
.footer-social-link svg { width: 22px; height: 22px; fill: currentColor; }

/* The work is recognizable first; the estimate is an optional modal. */
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.work-grid article{border-top:3px solid var(--work);padding-top:8px}.work-grid article p{font-size:14px;line-height:1.42;color:var(--ink-2);margin:0}
.calc-open-actions{gap:10px;margin-top:16px}.calc-open-actions .button{font-size:14px}
.calc-modal{border:0;border-radius:var(--radius);padding:22px;background:var(--plaque);color:var(--ink);width:min(900px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}
.calc-modal::backdrop{background:rgba(18,24,28,.66)}.calc-modal-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}.calc-modal-head h2{flex:1;margin:0;font-size:24px}.calc-modal .calc-card{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.loop-step{display:flex;flex-direction:column}.loop-step p{flex:1}.loop-tag{margin-top:auto;padding-top:8px}
.time-value-example{margin-top:12px;border-top:1px solid #d5cec1;padding-top:10px}.time-value-example>span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}.time-value-example>strong{display:block;font-size:30px;font-weight:700;color:var(--work-ink);letter-spacing:-.02em;margin:2px 0}.time-value-example p{font-size:11.5px;line-height:1.38;margin:0}
.app-list li{grid-template-columns:28px minmax(0,1fr);column-gap:8px}.app-mark{grid-column:1;grid-row:1/3;width:28px;height:28px;border-radius:7px}.app-list strong,.app-list li>span{grid-column:2}.app-intro{font-size:12px!important;margin:0 0 8px!important}
.host-bio-list{padding-left:18px!important;display:grid;gap:7px;font-size:14px;line-height:1.44;color:var(--ink-2)}.operator-expectation{font-size:12px;font-weight:700;color:var(--work-ink);margin-top:10px}
.reader-top{display:flex;align-items:flex-start;gap:12px;justify-content:space-between;margin-bottom:12px}.reader-close{flex:none;font-size:14px;font-weight:600;color:var(--work-ink);text-decoration:none;padding:4px 8px;border:1px solid #cfc6b8;border-radius:999px}.reader-close:focus-visible{outline:2px solid var(--work-ink);outline-offset:3px}
.rail{height:68vh}.rail a{min-height:min(24px,3vh)}.rail-stop .rail-dot{width:8px;height:8px;border-width:2px;margin-left:11.5px}.rail-stop .rail-label{font-size:12px}
@media(min-width:760px) and (min-aspect-ratio:4/5) and ((max-height:860px) or (max-width:1300px)){.plaque#about{width:max(var(--pw-wide),650px)}.achievement-wall{grid-template-columns:1fr 1.6fr;gap:14px}.app-list li{font-size:12px;line-height:1.34}.app-intro{font-size:11.5px!important}.achievement-group p{font-size:12px}.host-bio-list{font-size:13px;gap:6px}}
@media(max-width:759px),(max-aspect-ratio:4/5){.calc-modal .calc-card{grid-template-columns:1fr}.work-grid{grid-template-columns:1fr}.reader-top{display:block}.reader-close{display:none}}

/* October 4: editorial display type, immediate entry routes and a useful library. */
@font-face{font-family:Fraunces;src:url('/assets/fonts/fraunces-variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
.plaque h1,.plaque h2,.reader h1,.reader h2,.plaque-title{font-family:Fraunces,Georgia,serif;font-variation-settings:'SOFT' 0,'WONK' 0;letter-spacing:-.025em;font-weight:600}
.plaque-hero{width:min(560px,52vw)}
.hero-live{border-top:1px solid #d6cbbb;margin-top:16px;padding-top:14px}
.hero-live h2{font-size:21px;line-height:1.15;margin-bottom:7px}
.hero-live p{font-size:13px;line-height:1.4;margin-bottom:9px;color:var(--ink-2)}
.hero-live .button{min-height:38px;font-size:13px;padding:7px 13px}.hero-live .text-link{font-size:12px;margin-left:10px}
.proof-grid{grid-template-columns:1fr 1fr}.proof-sources summary{cursor:pointer;color:var(--work-ink);margin-top:10px}
.achievement-wall{grid-template-columns:1fr!important;gap:14px}
.achievement-group{border-top:1px solid #d6cbbb;padding-top:10px}
.achievement-group:first-child{border-top:0;padding-top:0}
.app-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.app-list li{font-size:12px;line-height:1.32}.app-list strong{font-size:13px}
.achievement-group p{font-size:12px}.client-chips{gap:5px}.client-chips li{font-size:12px}
.library-note{margin-top:12px;padding-top:10px;border-top:1px solid #d6cbbb;font-size:13px}.library-note p{font-size:12px;line-height:1.4;margin:5px 0}
.about-facts dt{font-size:21px}.about-facts dd{font-size:12px}
.hud-start{color:var(--ink);font-weight:600;font-size:13px;text-underline-offset:3px;align-self:center;margin-right:4px}
.reader-start{font-size:13px;white-space:nowrap;color:var(--work-ink);align-self:center}.reader-room{flex:1}.reader-close{white-space:nowrap}
.pricing-actions{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}.pricing-book{font-size:14px;min-height:40px;margin-bottom:5px}
.calc-investment{display:grid;gap:5px;font-size:13px;margin-top:15px}.calc-investment input{font:inherit;padding:8px;border:1px solid #b9b0a2;border-radius:6px;background:white;width:100%}.calc-investment small{font-size:11px;color:var(--ink-2)}
.roi-results{display:grid;gap:7px;margin:12px 0}.roi-results>div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #d6cbbb;padding-top:6px;font-size:12px}.roi-results dt{color:var(--ink-2)}.roi-results dd{margin:0;font-weight:700;color:var(--work-ink)}
@media(min-width:760px) and ((max-height:860px) or (max-width:1300px)){.plaque-hero{width:min(520px,52vw)}.hero-live{margin-top:10px;padding-top:10px}.hero-live h2{font-size:19px}.app-list{gap:7px 12px}.library-note{margin-top:8px;padding-top:8px}.host-bio-list{gap:5px}}
@media(max-width:759px),(max-aspect-ratio:4/5){.plaque-hero{width:auto}.hud-start{display:none}.app-list{grid-template-columns:1fr}}
.hero-result{font-size:12px;line-height:1.4;color:var(--ink-2);margin-top:12px!important}.hero-result strong{color:var(--work-ink);display:block}