/* Authority Read shared site styles. Ivory and gold palette from the 2026-09-16 concept board; type per D-034. */
:root {
  --ivory: #f4ecdc;
  --ivory-lift: #fbf6ea;
  --ink: #141210;
  --charcoal: #0e100f;
  --gold: #b8863b;
  --gold-deep: #9b6f2e;
  --gold-ink: #80592a; /* gold for text under 18px: 5.3:1 on ivory, where gold-deep is 3.8:1 */
  --gold-soft: #d9b26a;
  --muted: #3a352d;
  --soft: #5f584c;
  --line: rgba(155, 111, 46, 0.32);
  --line-strong: rgba(155, 111, 46, 0.6);
  --dark-ink: #f4ecdc;
  --dark-muted: rgba(244, 236, 220, 0.72);
  --dark-soft: rgba(244, 236, 220, 0.5);
  --dark-line: rgba(217, 178, 106, 0.22);
  --dark-line-strong: rgba(217, 178, 106, 0.5);
  --display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --body: "Public Sans", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --eyebrow: "Cinzel", Georgia, serif;
  --curtain: #0e100f;
  --curtain-ease: cubic-bezier(0.76, 0, 0.24, 1);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --gutter: clamp(20px, 5vw, 72px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.02;
  margin: 0;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(44px, 4.6vw, 66px); }
h2 { font-size: clamp(36px, 3.6vw, 52px); }
h3 { font-size: clamp(24px, 2.1vw, 30px); }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
/* One ring site-wide. --gold-deep clears 3:1 on ivory and on charcoal alike. */
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

.wrap { padding-inline: var(--gutter); max-width: 1440px; margin-inline: auto; }
.band { padding-block: clamp(64px, 9vw, 128px); }

.eyebrow {
  font-family: var(--eyebrow);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 22px;
}

.skip {
  position: absolute; left: -999px; top: 8px;
  background: var(--gold-deep); color: var(--ivory); padding: 8px 12px; z-index: 50;
}
.skip:focus { left: 8px; }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 24px;
  border: 1px solid var(--gold-deep);
  border-radius: 3px;
  font-weight: 600; font-size: 15px;
  text-decoration: none;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--gold-deep); color: var(--ivory); }
.btn--primary:hover { background: var(--gold); }
.btn--ghost { background: rgba(244, 236, 220, 0.6); color: var(--ink); }

.link {
  font-weight: 600; text-decoration: none; color: var(--gold-ink);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.link::after { content: " →"; }

/* Header: brand left, Book a call and the MENU toggle right. Ink on ivory; ivory over the open drawer. */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 1200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px var(--gutter);
  color: var(--ink);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease), color 0.3s ease;
}
.top.is-scrolled { background: rgba(244, 236, 220, 0.97); backdrop-filter: blur(10px); padding-block: 14px; }
body.is-page-loading .top { background: transparent; backdrop-filter: none; color: var(--dark-ink); }
body.menu-open .top { background: transparent; backdrop-filter: none; }
.top__brand { display: block; }
/* The old header's scale (a 164 to 246px lockup); it eases down once the scrolled bar takes its ivory ground. */
.top__logo { height: clamp(36px, 4.27vw, 62px); width: auto; transition: height 0.4s var(--ease); }
.top.is-scrolled .top__logo { height: clamp(34px, 3.6vw, 52px); }
.top__logo--gold { display: none; }
body.is-page-loading .top__logo--ink { display: none; }
body.is-page-loading .top__logo--gold { display: block; }
.top__right { display: flex; align-items: center; gap: 30px; }
.top__cta { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--gold-ink); border-bottom: 1px solid var(--gold-ink); }
body.is-page-loading .top__cta { color: var(--gold-soft); border-color: var(--gold-soft); }
body.is-page-loading .top { z-index: 2650; }
body.is-page-loading:not(.is-page-entered) .top__right { opacity: 0; transform: translateY(-28px); }
.top__right { transition: opacity 0.52s ease, transform 0.72s cubic-bezier(0.16, 1, 0.3, 1); }
body.is-page-entered .top__right { transition-delay: 0.21s; }

/* Side tagline: one vertical line in the left gutter on wide screens, carried over from the old site. Difference blending
   keeps it readable over the ivory and the charcoal bands alike. The homepage holds it back until the hero has gone. */
.side-tagline {
  position: fixed; left: clamp(14px, 2.2vw, 30px); top: 50%; z-index: 800; margin: 0;
  writing-mode: vertical-rl; white-space: nowrap; pointer-events: none; mix-blend-mode: difference;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244, 236, 220, 0.86);
  opacity: 0; transform: translateY(-50%) rotate(180deg) translateX(18px);
  transition: opacity 0.6s ease, transform 0.7s var(--ease);
}
body.past-hero .side-tagline, body:not(:has(.story)) .side-tagline { opacity: 1; transform: translateY(-50%) rotate(180deg); }
body.menu-open .side-tagline, body.is-page-loading .side-tagline { opacity: 0; }
@media (max-width: 960px), (max-height: 700px) { .side-tagline { display: none; } }

/* MENU toggle: the label flips on hover, the three bars become an X when open. */
.menu-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  min-height: 44px; padding: 8px 0 8px 18px; border: 0; background: transparent;
  color: inherit; cursor: pointer; text-transform: uppercase; font-family: var(--body);
}
.menu-toggle__label { position: relative; display: block; width: 52px; height: 1.08em; overflow: hidden; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.1; }
.menu-toggle__label span { display: block; transition: opacity 0.24s ease, transform 0.34s var(--ease); }
.menu-toggle__label::after { position: absolute; inset: 0; content: attr(data-hover-label); opacity: 0; transform: translateY(92%) scaleY(0.55); transform-origin: center bottom; transition: opacity 0.24s ease, transform 0.34s var(--ease); }
body:not(.menu-open) .menu-toggle:is(:hover, :focus-visible) .menu-toggle__closed { opacity: 0; transform: translateY(-42%) scaleY(0.3); }
body:not(.menu-open) .menu-toggle:is(:hover, :focus-visible) .menu-toggle__label::after { opacity: 1; transform: translateY(0) scaleY(1); }
.menu-toggle__icon { position: relative; display: block; width: 26px; height: 14px; }
.menu-toggle__icon span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transform-origin: center; transition: top 0.28s var(--ease), transform 0.28s var(--ease), opacity 0.2s ease; }
.menu-toggle__icon span:nth-child(1) { top: 0; }
.menu-toggle__icon span:nth-child(2) { top: 6px; }
.menu-toggle__icon span:nth-child(3) { top: 12px; }
body.menu-open .menu-toggle__icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
body.menu-open .menu-toggle__icon span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
body.menu-open .menu-toggle__icon span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Drawer: ivory, slides down, links rise in one by one, a card swings in beside the hovered link. */
body.menu-open { overflow: hidden; }
.site-menu {
  position: fixed; inset: 0; z-index: 1000; overflow: hidden auto;
  background:
    radial-gradient(circle at 78% 22%, rgba(184, 134, 59, 0.16), transparent 26%),
    radial-gradient(circle at 24% 82%, rgba(217, 178, 106, 0.14), transparent 24%),
    var(--ivory);
  color: var(--ink);
  opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(-100%);
  transition: transform 0.52s var(--ease), opacity 0.24s ease, visibility 0s linear 0.52s;
}
.site-menu.is-open { opacity: 1; pointer-events: auto; visibility: visible; transform: translateY(0); transition: transform 0.52s var(--ease), opacity 0.24s ease, visibility 0s; }
.site-menu__inner {
  position: relative; display: grid; min-height: 100%;
  grid-template-columns: minmax(220px, 0.82fr) minmax(420px, 1fr);
  column-gap: clamp(48px, 8vw, 150px); row-gap: 28px; align-content: center;
  padding: clamp(110px, 15vh, 160px) clamp(28px, 7vw, 110px) clamp(38px, 7vh, 78px);
}
.site-menu__meta { position: relative; z-index: 2; max-width: 390px; align-self: end; }
.site-menu__meta span { display: block; margin-bottom: 18px; font-family: var(--eyebrow); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-ink); }
.site-menu__meta p { color: var(--muted); font-size: 16px; line-height: 1.55; }
.site-menu__nav { position: relative; z-index: 2; display: grid; width: min(100%, 560px); justify-self: start; align-self: center; }
.site-menu__group { position: relative; display: grid; gap: 2px; }
.site-menu__group + .site-menu__group { margin-top: clamp(18px, 2.4vw, 30px); padding-top: clamp(18px, 2.4vw, 30px); border-top: 1px solid var(--line); }
.site-menu__group-label { position: absolute; top: 50%; right: 0; transform: translateY(-50%); writing-mode: vertical-rl; font-family: var(--mono); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-ink); pointer-events: none; }
.site-menu__link {
  display: inline-flex; align-items: center; width: fit-content; max-width: 100%; overflow: hidden;
  color: rgba(20, 18, 16, 0.32); font-family: var(--display); font-size: clamp(30px, 3vw, 44px); font-weight: 500; line-height: 1.22;
  text-decoration: none; outline-offset: 8px; transition: color 0.24s ease;
}
.site-menu__link::before { flex: none; width: 0; height: 1px; margin-right: 0; background: var(--gold-deep); content: ""; transition: width 0.3s var(--ease), margin 0.3s var(--ease); }
.site-menu__link.is-current::before { width: 34px; margin-right: 18px; }
.site-menu__link.is-current, .site-menu__link:is(:hover, :focus-visible) { color: var(--ink); }
.site-menu__link span { display: inline-block; opacity: 0; transform: translateY(105%); transition: opacity 0.52s var(--ease), transform 0.52s var(--ease); transition-delay: calc(130ms + var(--i, 0) * 44ms); }
.site-menu.is-open .site-menu__link span { opacity: 1; transform: translateY(0); }
.menu-card-stack { position: absolute; left: clamp(150px, 34vw, 560px); top: 50%; z-index: 1; width: min(26vw, 360px); aspect-ratio: 4 / 5; transform: translate(-50%, -50%); pointer-events: none; }
.menu-hover-card {
  position: absolute; inset: 0; overflow: hidden;
  border: 1px solid rgba(155, 111, 46, 0.45); background: var(--ivory-lift);
  box-shadow: 0 28px 70px rgba(20, 18, 16, 0.18), 0 0 0 6px rgba(251, 246, 234, 0.6);
  opacity: 0; transform: translate3d(-16%, 14%, 0) rotate(-8deg) scale(0.82);
  transition: opacity 0.42s ease, transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.menu-hover-card img, .menu-hover-card video { display: block; width: 100%; height: 100%; object-fit: cover; }
.menu-hover-card:nth-child(even) { transform: translate3d(14%, 12%, 0) rotate(8deg) scale(0.82); }
.menu-hover-card.is-active { opacity: 1; transform: translate3d(0, 0, 0) rotate(-5deg) scale(1); }
.menu-hover-card:nth-child(even).is-active { transform: translate3d(0, 0, 0) rotate(5deg) scale(1); }

/* Curtains: the arrival loader lifts up once the hero's first frame is decoded; the route curtain rises on a click. */
.page-loader {
  position: fixed; inset: 0; z-index: 2600; display: grid; place-items: center; overflow: hidden;
  background: var(--curtain); pointer-events: none; visibility: visible; transform: translateY(0);
  transition: transform 0.68s var(--curtain-ease), visibility 0s linear 0.68s; will-change: transform;
}
body.is-page-loaded .page-loader { transform: translateY(-100%); visibility: hidden; }
.page-loader__title, .route-transition__title {
  display: block; max-width: min(82vw, 980px); color: var(--dark-ink); font-family: var(--display); font-weight: 500;
  font-size: clamp(28px, 4.8vw, 72px); line-height: 0.98; text-align: center; text-wrap: balance;
}
body.is-route-transitioning { overflow: hidden; }
.route-transition {
  position: fixed; inset: 0; z-index: 2700; display: grid; place-items: center; overflow: hidden;
  background: var(--curtain); color: var(--dark-ink); pointer-events: none; visibility: hidden; transform: translateY(100%);
  transition: transform 0.62s var(--curtain-ease), visibility 0s linear 0.62s; will-change: transform;
}
.route-transition.is-active { pointer-events: auto; visibility: visible; transform: translateY(0); transition: transform 0.62s var(--curtain-ease), visibility 0s; }
.route-transition.is-leaving { transform: translateY(-100%); visibility: hidden; transition: transform 0.7s var(--curtain-ease), visibility 0s linear 0.7s; }
.route-transition__title { opacity: 0; transform: translateY(28px); transition: opacity 0.46s ease, transform 0.62s var(--curtain-ease); }
.route-transition.is-active .route-transition__title { opacity: 1; transform: translateY(0); }

/* Custom cursor: a dot on the pointer and a ring that follows; magnetic links enlarge the ring. Fine pointers only. */
.cursor { position: fixed; left: 0; top: 0; z-index: 2100; width: 0; height: 0; pointer-events: none; user-select: none; display: none; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }
.cursor__dot, .cursor__follower, .cursor__label { position: fixed; left: 0; top: 0; pointer-events: none; transform: translate(-50%, -50%); }
.cursor__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(20, 18, 16, 0.9); }
.cursor__follower { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(155, 111, 46, 0.4); opacity: 0.82; transform: translate(-50%, -50%) scale(0.56); transition: border-color 0.22s ease, background 0.22s ease, opacity 0.22s ease, transform 0.26s var(--ease); }
.cursor__label { opacity: 0; color: var(--ivory); font-size: 11px; font-weight: 600; text-transform: uppercase; transition: opacity 0.18s ease; }
.cursor.is-active .cursor__follower { border-color: rgba(155, 111, 46, 0.7); background: rgba(184, 134, 59, 0.1); opacity: 1; transform: translate(-50%, -50%) scale(1.22); }
body.is-route-transitioning .cursor__dot { background: rgba(244, 236, 220, 0.94); }
body.is-page-loading .cursor, body.is-route-transitioning .cursor, .cursor:not(.is-tracking) { opacity: 0; }

/* Word reveal: every word rises in with a stagger; the curtains replay the words in view on arrival. */
.word-reveal, .word-reveal-parent { min-width: 0; }
.word-reveal .word { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  html.word-reveal-ready .word-reveal .word { opacity: 0; transform: translateY(0.52em); transition: opacity 0.62s ease, transform 0.72s var(--ease); transition-delay: calc(var(--word-index, 0) * var(--word-stagger, 20ms)); will-change: opacity, transform; }
  html.word-reveal-ready .word-reveal.is-visible .word { opacity: 1; transform: translateY(0); }
  html.word-reveal-snap .word-reveal .word { transition: none; }
  html.word-reveal-page-replay .word-reveal .word { transition: opacity 0.86s ease, transform 0.98s var(--ease); transition-delay: calc(var(--word-index, 0) * 42ms); }
  html.word-reveal-page-replay .story__lede.word-reveal .word, html.word-reveal-page-replay .read p.word-reveal .word { transition-delay: calc((var(--word-index, 0) * 22ms) + 260ms); }
}

/* 1. Scroll story: the frame sequence from assets/hero-orbits-frames-v1 on a canvas. lean.js sets the track height. */
.story { min-height: 325svh; position: relative; background: var(--ivory); }
.story__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--ivory); }
.story__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.story__copy {
  position: absolute; left: var(--gutter); top: 50%; transform: translateY(-54%);
  width: min(560px, 40vw); z-index: 2;
}
.story__copy .eyebrow { margin-bottom: 26px; }
.story__lede { font-size: 19px; line-height: 1.5; color: var(--muted); margin: 24px 0 32px; max-width: 500px; }
.story__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.story__note { font-size: 13px; color: var(--soft); max-width: 440px; }
/* The audience and the price floor read first in the lede (the ten-second test). */
.story__fact { color: var(--ink); font-weight: 500; }

.spine {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 34px; z-index: 2;
  list-style: none; margin: 0; padding: 14px 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  border-top: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft);
}
.spine__step { transition: color 0.3s; }
.spine__step b { color: var(--gold-ink); font-weight: 500; margin-right: 10px; }
.spine__step.is-active { color: var(--ink); }

/* 2. Which one are you? (the old Two Reads band): rises over the ivory the zoom lands on, and its top fade wipes the last of the rim. */
.reads {
  position: relative; z-index: 3; margin-top: -16vh; overflow-x: clip;
  padding: 10vh 0 clamp(64px, 9vw, 128px);
  background: linear-gradient(to bottom, rgba(244, 236, 220, 0), var(--ivory) 12vh);
}
.reads h2 { max-width: 12em; font-size: clamp(40px, 4.4vw, 64px); }
.reads__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5.8vw; margin-top: 8px; }
/* The object renders share one pixel scale, so both get the same width; each bleeds 40px past its column. */
.read__object { position: relative; width: calc(100% + 80px); max-width: none; margin: 0 0 4px -40px; --lit: 0; }
.read--out .read__object { margin-left: 0; }
.read__object img { display: block; width: 100%; height: auto; }
/* Scroll device: the lit render fades in over the switched-off base as the section rises; lean.js drives --lit. */
.read__object .read__lit { position: absolute; inset: 0; opacity: var(--lit); }
.read .read__tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 14px; }
.read h3 { font-size: clamp(28px, 2.6vw, 40px); margin-bottom: 18px; max-width: 16em; }
.read p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--muted); }
.read em { font-style: italic; }
.read p.read__proof { margin: 24px 0 30px; padding-left: 20px; border-left: 1px solid var(--gold-deep); font-size: 16px; color: var(--ink); }
.read .link { font-size: 19px; }

/* Scrollcraft device: columns slide in from opposite sides once, then everything is still. */
.read--in, .read--out { opacity: 0; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.read--in { transform: translateX(-40px); }
.read--out { transform: translateX(40px); }
.reads.is-in .read { opacity: 1; transform: none; }

/* 5. Selected work: the page's one dark band, so the screenshots glow. */
.work { min-height: 100svh; position: relative; background: var(--charcoal); color: var(--dark-ink); }
.work__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-block: 80px 40px; }
.work .eyebrow { color: var(--gold-soft); }
.work__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; width: 100%; }
.work__controls { display: flex; align-items: center; gap: 10px; }
.work__counter { font-family: var(--mono); font-size: 13px; color: var(--dark-soft); margin-right: 10px; }
.work__arrow {
  width: 44px; height: 44px; border: 1px solid var(--dark-line-strong); background: transparent; color: var(--dark-ink);
  border-radius: 50%; font-size: 18px; cursor: pointer; transition: background 0.3s, color 0.3s;
}
.work__arrow:hover { background: var(--gold-soft); color: var(--charcoal); }
.work__all { margin: 0; font-size: 14px; color: var(--dark-soft); }
.work .link { color: var(--gold-soft); }

.track {
  list-style: none; margin: 0; padding: 0 var(--gutter);
  display: flex; gap: 32px;
  will-change: transform;
  transition: transform 0.08s linear;
}
.case {
  flex: 0 0 min(76vw, 1120px);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 36px;
  border: 1px solid var(--dark-line); background: #151715; padding: 28px;
  opacity: 0.45; transform: scale(0.96);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.case.is-current { opacity: 1; transform: none; }
.case__media { display: block; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--dark-line); background: #000; }
.case__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.8s var(--ease); }
.case__media:hover img { transform: scale(1.03); }
.case__body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.case__kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 12px; }
.case h3 { margin-bottom: 12px; }
.case__body > p { color: var(--dark-muted); font-size: 15px; }
.case__body > .case__status { margin: -4px 0 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--gold-soft); }
.case__status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--gold-soft); vertical-align: 1px; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0 14px; border-top: 1px solid var(--dark-line); padding-top: 16px; }
.stats dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark-soft); margin-bottom: 6px; }
.stats dd { margin: 0; font-family: var(--display); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.12; overflow-wrap: break-word; }
.stats dd small { display: block; font-family: var(--body); font-size: 12px; color: var(--dark-soft); margin-top: 2px; }

.case__more { margin-bottom: 16px; font-size: 14px; color: var(--dark-muted); }
.case__more summary { cursor: pointer; font-weight: 600; color: var(--dark-ink); list-style: none; padding-block: 11px; margin-block: -11px; }
.case__more summary::before { content: "+ "; color: var(--gold-soft); }
.case__more[open] summary::before { content: "- "; }
.case__more p { margin-top: 10px; }

/* 3. How it works: still, except the gold dot that walks with your scroll, and the table by day: hover a phase and the
   ivory table render fades in behind the row under an ivory scrim, with a gold viewfinder around the phase. */
.method { position: relative; padding-block: clamp(64px, 9vw, 128px); overflow: hidden; isolation: isolate; }
.method__media { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.36s linear; pointer-events: none; }
.method__media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.method__media::after {
  position: absolute; inset: 0; content: "";
  background:
    linear-gradient(90deg, rgba(244, 236, 220, 0.96), rgba(244, 236, 220, 0.72) 42%, rgba(244, 236, 220, 0.3)),
    linear-gradient(0deg, rgba(244, 236, 220, 0.5), rgba(244, 236, 220, 0.1));
}
.method.is-media-active .method__media { opacity: 1; }
.method .wrap { position: relative; z-index: 1; }
.phases__rail { position: relative; height: 1px; background: var(--line-strong); margin-top: 48px; }
.phases__dot {
  position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--ivory);
}
.phases {
  list-style: none; margin: 0 0 32px; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.phases li { position: relative; padding: 24px 24px 24px 18px; font-size: 15px; line-height: 1.5; border-left: 1px solid var(--line); color: var(--muted); }
.phases li:first-child { border-left: 0; padding-left: 0; }
.phases li::before {
  position: absolute; inset: 8px -8px 0 -8px; content: ""; opacity: 0; pointer-events: none;
  box-shadow: inset 0 0 0 4px var(--gold); transition: opacity 0.68s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.phases li:first-child::before { left: -16px; }
.phases li.is-media-active::before { opacity: 1; transition: none; }
.phases li span { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--gold-ink); margin-bottom: 10px; }
.phases li strong { display: block; font-family: var(--display); font-weight: 500; font-size: 24px; margin-bottom: 6px; color: var(--ink); }
.method__plan { max-width: 640px; margin-bottom: 20px; font-size: clamp(17px, 1.3vw, 19px); color: var(--muted); }
.method__link { font-size: 15px; }

/* 4. Pricing, concept A (Eric, 2026-09-30): three cards step up left to right on one baseline, a gold rule along their
   tops carries the $750 into the builds, and the prices sit level at the foot. Still: no motion. */
.pricing { background: var(--ivory-lift); border-block: 1px solid var(--line); }
/* The split pages' offer shares .pricing and keeps its lifted panel; only the homepage band goes to ivory. */
#pricing { --step: clamp(28px, 4.2vw, 64px); --tier-gap: 14px; background: var(--ivory); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tier-gap); margin: 56px 0 0; padding: 0; list-style: none; }
.tier {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(28px, 2.8vw, 44px) clamp(24px, 2.6vw, 40px) clamp(24px, 2.6vw, 40px);
  border-top: 2px solid var(--gold); background: var(--ivory-lift);
  box-shadow: 0 18px 44px rgba(20, 18, 16, 0.07);
}
.tier:nth-child(1) { margin-top: calc(var(--step) * 2); }
.tier:nth-child(2) { margin-top: var(--step); }
.tier::after {
  content: ""; position: absolute; top: -1px; left: 50%;
  width: 12px; height: 12px; border-radius: 50%; background: var(--gold); transform: translate(-50%, -50%);
}
/* The riser: the rule leaves the card before at its height, crosses the gap, and climbs to this card's rule. */
.tier + .tier::before {
  content: ""; position: absolute; top: -2px; left: calc(-1 * var(--tier-gap)); /* -2px: from the outer edge of the rule */
  width: var(--tier-gap); height: calc(var(--step) + 2px);
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); box-sizing: border-box;
}
.tier__tag { margin-bottom: 18px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--gold-ink); }
.tier h3 { margin-bottom: 12px; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.1; }
.tier__desc { max-width: 34ch; margin-bottom: 32px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; color: var(--muted); }
.tier__price { margin: auto 0 10px; font-family: var(--display); font-size: clamp(28px, 3.3vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); }
.tier__terms { font-family: var(--mono); font-size: 14px; color: var(--muted); }
.pricing__cta { margin-top: 48px; text-align: center; }
/* Ink, as in the approved mock: ivory on the gold primary is 3.8:1, under AA for 15px text. */
.pricing__cta .btn--primary { border-color: var(--ink); background: var(--ink); color: var(--ivory); }
.pricing__cta .btn--primary:hover { background: #2a2520; }

/* The old ruled rows stay for the split pages' offer. */
.prices { margin: 48px 0 0; border-top: 1px solid var(--line-strong); }
.prices > div { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px 48px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--line); }
.prices dt { font-size: clamp(16px, 1.3vw, 19px); color: var(--muted); }
.prices dt strong { display: block; margin-bottom: 6px; font-family: var(--display); font-size: clamp(24px, 2vw, 30px); font-weight: 500; line-height: 1.1; color: var(--ink); }
.prices dd { margin: 0; font-family: var(--mono); font-size: clamp(16px, 1.3vw, 20px); color: var(--ink); }

/* 6. About: the waving portrait beside the short paragraph. */
.about__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.about__portrait { width: 100%; height: auto; border: 1px solid var(--line-strong); box-shadow: 0 0 0 6px var(--ivory-lift); }
.about__copy > p:not(.eyebrow) { max-width: 36em; margin: 22px 0 28px; font-size: clamp(17px, 1.4vw, 20px); color: var(--muted); }
.about .link { font-size: 17px; }

/* Close band, shared by every page: charcoal, the table darkened behind the copy with the live site's two scrims
   (a clear window where the lens sits, a dark left column for the copy); the clip plays only while in view. */
.start { position: relative; display: grid; min-height: 82svh; align-items: center; overflow: hidden; isolation: isolate; padding: clamp(86px, 12vw, 164px) var(--gutter); background: #080a0a; color: var(--dark-ink); }
.start__media { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.start__media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; filter: brightness(0.42) saturate(1.06); transform: scale(1.02); }
.start::after {
  position: absolute; inset: 0; z-index: 1; content: "";
  background:
    radial-gradient(circle at 70% 45%, transparent 0 24%, rgba(8, 10, 10, 0.2) 46%, rgba(8, 10, 10, 0.78) 100%),
    linear-gradient(90deg, rgba(8, 10, 10, 0.92), rgba(8, 10, 10, 0.38) 56%, rgba(8, 10, 10, 0.78));
}
.start__content { position: relative; z-index: 2; width: min(920px, 100%); }
.start .eyebrow { color: var(--gold-soft); }
.start h2 { font-size: clamp(40px, 4.6vw, 66px); max-width: 14ch; }
.start__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
.start__actions .btn--primary { background: var(--gold-soft); color: var(--charcoal); border-color: var(--gold-soft); }
.start__actions .btn--primary:hover { background: var(--gold); border-color: var(--gold); }
.start__email { color: var(--dark-ink); font-size: 17px; text-decoration: none; border-bottom: 1px solid var(--dark-line-strong); padding-bottom: 2px; }
.start__email:hover { border-bottom-color: var(--gold-soft); }
.start__floor { max-width: 660px; margin: 24px 0 40px; color: var(--dark-muted); font-size: clamp(17px, 1.3vw, 20px); }

.form { display: grid; gap: 20px; width: min(760px, 100%); border: 1px solid var(--dark-line-strong); padding: 32px; background: rgba(8, 10, 10, 0.55); backdrop-filter: blur(10px); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.form__field { display: grid; gap: 8px; }
.form__field--full { grid-column: 1 / -1; }
.form label { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.form__opt { font-weight: 400; color: var(--dark-soft); }
.form input, .form textarea, .form select {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--dark-line-strong);
  color: var(--dark-ink); font: inherit; padding: 10px 0; border-radius: 0;
}
.form select option { background: var(--charcoal); color: var(--dark-ink); }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-bottom-color: var(--gold-soft); }
.form input::placeholder, .form textarea::placeholder { color: var(--dark-soft); }
.form__honeypot { position: absolute; left: -9999px; }
.form__submit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form .btn--primary { background: var(--gold-soft); color: var(--charcoal); border-color: var(--gold-soft); }
.form .btn--primary:hover { background: var(--gold); border-color: var(--gold); }
.form__note { font-size: 13px; color: var(--dark-soft); }
.form__status { font-size: 14px; color: var(--gold-soft); min-height: 1.2em; }

/* Footer */
.foot { background: var(--charcoal); border-top: 1px solid var(--dark-line); padding-block: 32px; font-size: 13px; color: var(--dark-soft); }
.foot__row { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot nav { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.foot a { color: var(--dark-muted); text-decoration: none; }

/* Cookie consent (assets/consent.js builds the banner). Ivory card, gold rule; Decline and Accept carry equal weight.
   Bottom left on wide screens; on phones it sits under the header so it never covers the hero's buttons, and scrolls away.
   Above page content, below the drawer (1000) and header (1200). */
.consent {
  position: fixed; left: clamp(16px, 2.2vw, 30px); bottom: clamp(16px, 2.2vw, 30px); z-index: 900;
  width: min(calc(100vw - 32px), 430px); padding: 20px 22px;
  border: 1px solid var(--line-strong); border-top: 2px solid var(--gold);
  background: var(--ivory-lift); color: var(--muted); font-family: var(--body);
  box-shadow: 0 24px 60px rgba(20, 18, 16, 0.18);
}
.consent__copy { margin: 0 0 16px; font-size: 13px; line-height: 1.6; }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.consent__button {
  min-height: 40px; padding: 9px 20px; border: 1px solid var(--gold-deep); border-radius: 3px;
  background: transparent; color: var(--ink); cursor: pointer;
  font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease;
}
.consent__button:hover, .consent__button:focus-visible { background: var(--gold-deep); color: var(--ivory); }
.consent__link { margin-left: auto; color: var(--gold-ink); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.consent__link:hover, .consent__link:focus-visible { color: var(--ink); }

/* Case pages (docs/project-page-system.md spine, ivory): hero, viewer, story, results on charcoal, build, honesty, next,
   then the shared close band. */
.project-hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; padding-block: clamp(132px, 15vw, 196px) clamp(48px, 6vw, 80px); }
.project-back { display: inline-block; margin-bottom: 34px; font-size: 14px; font-weight: 600; color: var(--gold-ink); text-decoration: none; }
.project-back::before { content: "← "; }
.project-hero h1 { max-width: 16em; }
.project-hero__lede { max-width: 40em; margin: 26px 0 32px; font-size: clamp(17px, 1.4vw, 20px); color: var(--muted); }
.project-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.project-meta dl { margin: 0; border-top: 1px solid var(--line-strong); }
.project-meta dl > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.project-meta dt { margin-bottom: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
.project-meta dd { margin: 0; font-size: 15px; color: var(--ink); }

.project-viewer { padding-bottom: clamp(64px, 9vw, 128px); }
.project-viewer h2 { max-width: 18em; }
.project-viewer__hint { max-width: 62ch; margin: 22px 0 32px; font-size: 16px; color: var(--muted); }

.project-story { background: var(--ivory-lift); border-block: 1px solid var(--line); }
.project-story__intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.project-story__intro h2 { max-width: 15em; }
.project-story__intro > p { font-size: clamp(17px, 1.4vw, 20px); color: var(--muted); }
.project-chapters { list-style: none; margin: 56px 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.project-chapter { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 2fr); gap: 12px clamp(24px, 4vw, 56px); align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); }
.project-chapter span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--gold-ink); }
.project-chapter p { font-size: 16px; color: var(--muted); max-width: 44em; }

.project-results { background: var(--charcoal); color: var(--dark-ink); }
.project-results .eyebrow { color: var(--gold-soft); }
.project-results__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; border-top: 1px solid var(--dark-line); }
.project-results__stat { padding-top: 28px; }
.project-results__stat strong { display: block; margin-bottom: 14px; font-family: var(--display); font-size: clamp(48px, 5vw, 76px); font-weight: 500; line-height: 1; color: var(--gold-soft); }
.project-results__stat strong small { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--dark-soft); }
.project-results__stat p { max-width: 30em; font-size: 15px; color: var(--dark-muted); }
.project-results__stat .project-results__label { margin-bottom: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-soft); }

.project-build__head, .project-gallery__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.project-build__head h2, .project-gallery__head h2 { max-width: 15em; }
.project-build__head > p, .project-gallery__head > p { font-size: clamp(17px, 1.4vw, 19px); color: var(--muted); }
.project-gallery { padding-top: 0; }
.project-gallery .project-shot-grid { margin-top: 48px; }
.project-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.project-proof { padding: 28px; border: 1px solid var(--line); border-top: 2px solid var(--gold); background: var(--ivory-lift); }
.project-proof span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
.project-proof h3 { margin: 12px 0; }
.project-proof p { font-size: 15px; color: var(--muted); }

/* Authority Graph: the prototype's categories mapped to the five pillars (plan 4.7). */
.project-mapping { width: 100%; margin-top: 56px; border-collapse: collapse; font-size: 15px; }
.project-mapping caption { margin-bottom: 18px; text-align: left; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
.project-mapping :is(th, td) { padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.project-mapping thead th { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); border-bottom-color: var(--line-strong); }
.project-mapping tbody th { font-family: var(--display); font-size: 19px; font-weight: 500; color: var(--ink); }
.project-mapping td { color: var(--muted); }
.project-mapping__note { max-width: 62ch; margin-top: 18px; font-size: 15px; color: var(--muted); }

.project-honesty { padding-top: 0; }
.project-honesty__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 40px 0 0; padding: 28px 0 0; border-top: 1px solid var(--line-strong); }
.project-honesty__list li { font-size: 15px; color: var(--muted); }
.project-honesty__list strong { display: block; margin-bottom: 8px; font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--ink); }

.project-next { padding-top: 0; }
.project-next__links { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.project-next__card { display: grid; gap: 8px; padding: 28px; border: 1px solid var(--line-strong); text-decoration: none; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); }
.project-next__card:hover { border-color: var(--gold-deep); background: var(--ivory-lift); }
.project-next__card:last-child { text-align: right; }
.project-next__card span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
.project-next__card strong { font-family: var(--display); font-size: clamp(26px, 2.4vw, 36px); font-weight: 500; }

/* Viewers. .browser-preview carries the device toggle, per-device captures and the scroll capture stage for any
   variant; .browser-preview--ba adds the before and after slider (variant A), --scroll-capture alone is variant B and
   --interactive-graph is variant D. The frame, bar, buttons, tags and notice are ivory; the captures and clips inside
   the stage are unchanged. Variant C, the shot grid, follows the slider. */
.browser-preview { --browser-viewport-width: 100%; --browser-ratio: 16 / 10; position: relative; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--ivory-lift); box-shadow: 0 28px 70px rgba(20, 18, 16, 0.14); }
.browser-preview[data-device="tablet"] { --browser-viewport-width: min(768px, 100%); --browser-ratio: 3 / 4; }
.browser-preview[data-device="mobile"] { --browser-viewport-width: min(393px, 100%); --browser-ratio: 390 / 844; }
.browser-preview__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 50px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.browser-preview__lights { display: flex; gap: 7px; }
.browser-preview__lights span { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line-strong); }
.browser-preview__url { justify-self: center; max-width: min(360px, 100%); overflow: hidden; padding: 5px 14px; border: 1px solid var(--line); border-radius: 3px; background: var(--ivory); font-family: var(--mono); font-size: 12px; color: var(--soft); text-overflow: ellipsis; white-space: nowrap; }
.browser-preview__tools { display: flex; gap: 6px; }
.browser-preview__tools button {
  min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.browser-preview__tools button:hover { border-color: var(--gold-deep); color: var(--ink); }
.browser-preview__tools button[aria-pressed="true"] { border-color: var(--gold-deep); background: var(--gold-deep); color: var(--ivory); }
.browser-preview__stage {
  position: relative; width: var(--browser-viewport-width); max-width: 100%; max-height: 78svh; margin: 0 auto; overflow: hidden;
  aspect-ratio: var(--browser-ratio); background: var(--ivory); box-shadow: -1px 0 0 var(--line), 1px 0 0 var(--line);
  transition: aspect-ratio 480ms var(--ease), width 480ms var(--ease);
}
.browser-preview--scroll-capture .browser-preview__stage { overflow-y: auto; }
.browser-preview__notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); }
.browser-preview__notice span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.browser-preview__notice a { font-size: 14px; font-weight: 600; color: var(--gold-ink); text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; }
.browser-preview__notice a::after { content: " ↗"; }
/* B: the capture fills the frame's width at its own proportions (its width and height attributes are the desktop file's)
   and scrolls inside it. D: a fixed-height stage (the map needs room even on a phone; the device buttons narrow it) where
   the sample covers its screenshot, and site.js shows it only once its page has loaded, so a blocked or failed load
   leaves the screenshot in view. */
.browser-preview__fallback { width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.browser-preview--interactive-graph .browser-preview__stage { aspect-ratio: auto; height: clamp(560px, 72vh, 860px); }
.browser-preview--interactive-graph .browser-preview__stage > :is(.browser-preview__fallback, iframe) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; object-position: center top; }
.browser-preview--interactive-graph iframe:not(.is-loaded) { visibility: hidden; }

.ba-compare__scroll { position: relative; width: 100%; }
.ba-compare__img { display: block; width: 100%; height: auto; filter: saturate(0.97); user-select: none; -webkit-user-drag: none; }
.ba-compare__img--after { position: relative; z-index: 1; }
.ba-compare__img--before { position: absolute; top: 0; left: 0; z-index: 2; clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0); }
/* The after side's live hero clips. The slab covers the 1280 capture's hero (1280x990) on desktop; the portrait clip
   covers only the field band between the CTA and the book on tablet and mobile, so the captured text stays crisp. */
.ba-compare__video { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: auto; aspect-ratio: 1280 / 990; object-fit: cover; clip-path: inset(0 0 0 var(--ba-pos, 50%)); pointer-events: none; user-select: none; }
.ba-compare__video--portrait { display: none; aspect-ratio: auto; }
/* The Healing Journey: the trees clip fills only the scenic panel on the right of the rebuilt hero, under the before
   capture, so the divider reveals it without covering the captured text. Its top 2% is cropped because the clip starts
   at y 96 while the captured header button ends at y 112. */
.ba-compare__video--thj-trees {
  top: 1.249%; right: 0; left: auto; z-index: 1; width: 56.315%; height: 10.41%; aspect-ratio: auto; object-fit: fill; object-position: top right;
  clip-path: inset(2% 0 0 0);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.55) 30%, #000 42%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.55) 30%, #000 42%);
}
.browser-preview--ba:not([data-device="desktop"]) :is(.ba-compare__video--slab, .ba-compare__video--thj-trees, .ba-compare__hero-fg) { display: none; }
.browser-preview--ba:not([data-device="desktop"]) .ba-compare__video--portrait { display: block; }
.browser-preview--ba[data-device="mobile"] .ba-compare__video--portrait { top: 0.1%; height: 6.94%; clip-path: inset(37% 0 49.8% var(--ba-pos, 50%)); }
.browser-preview--ba[data-device="tablet"] .ba-compare__video--portrait { top: 0; height: 9.79%; clip-path: inset(37.4% 0 49.1% var(--ba-pos, 50%)); }

/* DecideNorth's own hero text over the slab clip, in its own colours, sized in cqw so it scales with the hero box. */
.ba-compare__hero-fg { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; aspect-ratio: 1280 / 990; container-type: inline-size; clip-path: inset(0 0 0 var(--ba-pos, 50%)); pointer-events: none; user-select: none; font-family: var(--body); color: #153244; }
.dnfg-nav { position: absolute; top: 3.1%; left: 3.6%; right: 3.6%; display: flex; align-items: center; justify-content: space-between; }
.dnfg-logo { font-size: 1.5cqw; font-weight: 600; letter-spacing: -0.01em; }
.dnfg-links { display: flex; align-items: center; gap: 1.45cqw; font-size: 1.17cqw; font-weight: 600; }
.dnfg-navbtn { padding: 0.62cqw 1.15cqw; border-radius: 0.47cqw; background: #153244; color: #fff; }
.dnfg-copy { position: absolute; left: 7%; top: 13.2%; width: 46%; }
.dnfg-eyebrow { margin: 0 0 1.9cqw; font-size: 0.94cqw; font-weight: 600; letter-spacing: 0.18em; line-height: 1.45; text-transform: uppercase; color: #8a6732; }
.dnfg-head { margin: 0; font-size: 4.69cqw; font-weight: 500; line-height: 1.03; letter-spacing: -0.005em; }
.dnfg-head em { font-style: italic; font-weight: 400; color: #4a6272; }
.dnfg-sub { width: 29.3cqw; margin: 2.5cqw 0 0; font-size: 1.29cqw; line-height: 1.52; }
.dnfg-cta { display: flex; align-items: center; gap: 2cqw; margin-top: 2.7cqw; }
.dnfg-btn { padding: 1.1cqw 2.2cqw; border-radius: 0.47cqw; background: #153244; color: #fff; font-size: 1.17cqw; font-weight: 500; }
.dnfg-link { font-size: 1.17cqw; font-weight: 500; color: #8a6732; }
.dnfg-trust { position: absolute; left: 9.2%; bottom: 9%; display: flex; gap: 3.1cqw; font-size: 1.02cqw; font-weight: 500; }
.dnfg-trust span { display: flex; align-items: center; gap: 0.6cqw; max-width: 13cqw; }
.dnfg-trust i { flex: none; width: 0.85cqw; height: 0.85cqw; border-radius: 50%; background: #8a6732; }

/* Tags ride the top of the visible stage; site.js fades each out once its side is swiped away. */
.ba-compare__tags { position: sticky; top: 0; z-index: 3; height: 0; pointer-events: none; }
.ba-compare__tag {
  position: absolute; top: 14px; padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgba(251, 246, 234, 0.92); color: var(--ink); box-shadow: 0 10px 26px rgba(20, 18, 16, 0.16);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; transition: opacity 180ms ease;
}
.ba-compare__tag--before { left: 14px; }
.ba-compare__tag--after { right: 14px; }
.ba-compare__divider { position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%); z-index: 4; width: 2px; transform: translateX(-50%); background: var(--ivory-lift); box-shadow: 0 0 0 1px rgba(20, 18, 16, 0.18); pointer-events: none; }
/* touch-action pan-y keeps a vertical swipe on the grip scrolling the capture; a sideways drag moves the divider. */
.ba-compare__handle { position: absolute; top: 50%; left: clamp(23px, var(--ba-pos, 50%), calc(100% - 23px)); z-index: 5; display: grid; place-items: center; width: 46px; height: 46px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; transform: translate(-50%, -50%); cursor: ew-resize; touch-action: pan-y; }
.ba-compare__grip { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--gold-deep); color: var(--ivory); box-shadow: 0 12px 28px rgba(20, 18, 16, 0.3); transition: transform 160ms ease, background 160ms ease; }
.ba-compare__handle:is(:hover, :focus-visible) .ba-compare__grip { background: var(--gold); transform: scale(1.06); }

/* Variant C: still step-by-step captures, each with its caption. No motion. */
.project-shot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); }
.project-shot { display: grid; align-content: start; gap: 14px; min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--ivory-lift); }
.project-shot--wide { grid-column: span 2; }
.project-shot-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; background: var(--ivory); box-shadow: 0 0 0 1px var(--line); }
.project-shot figcaption { display: grid; gap: 6px; padding: 0 4px 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.project-shot strong { font-family: var(--display); font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; line-height: 1.1; color: var(--ink); }

/* Work: the editorial staggered wall (D-025) in ivory. The right column sits lower so the eye zigzags down the page;
   each card is the carousel's case body, recoloured for ivory. --wall-stagger also pads the foot of the wall so the
   last shifted card never crowds the close band. The split pages reuse the card, flat, for their proof. */
.wall { --wall-stagger: clamp(80px, 9vw, 150px); list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(64px, 7vw, 112px) clamp(28px, 5vw, 86px); align-items: start; margin: 64px 0 0; padding: 0 0 var(--wall-stagger); }
.wall > :nth-child(even) { transform: translateY(var(--wall-stagger)); }
.wall--flat, .wall:has(> :last-child:nth-child(odd)) { padding-bottom: 0; }
.wall--flat > :nth-child(even) { transform: none; }
.wall__card { min-width: 0; }
.wall__media { display: block; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line-strong); background: var(--ivory-lift); box-shadow: 0 0 0 6px var(--ivory-lift); }
.wall__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.8s var(--ease); }
a.wall__media:hover img { transform: scale(1.03); }
.wall__card .case__body { padding-top: 30px; }
.wall__card h3 { margin-bottom: 12px; font-size: clamp(32px, 3vw, 44px); }
.wall__card .case__body > p { max-width: 620px; font-size: 16px; color: var(--muted); }
.wall__card .case__body > :is(.case__kicker, .case__status) { font-size: 12px; color: var(--gold-ink); }
.wall__card .case__body > .wall__note { font-size: 14px; color: var(--soft); }
.wall__card .case__status::before { background: var(--gold); }
.wall__card .stats { border-top-color: var(--line); }
.wall__card .stats :is(dt, dd small) { color: var(--soft); }
.wall__card .case__more { color: var(--muted); }
.wall__card .case__more summary { color: var(--ink); }
.wall__card .case__more summary::before { color: var(--gold-deep); }
.wall__card .link { align-self: flex-start; font-size: 16px; }
.wall__card--wide { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: 48px; }
.wall__card--wide .case__body { padding-top: 0; }

/* About: the waving portrait opens the page; the work history is one ruled, dated list. */
.about--page { padding-block: clamp(132px, 13vw, 180px) clamp(64px, 9vw, 128px); }
.history { background: var(--ivory-lift); border-block: 1px solid var(--line); }
.history h2 { max-width: 15em; }
.history__list { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.history__item { display: grid; grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.2fr) minmax(0, 1.6fr); gap: 10px clamp(24px, 4vw, 56px); align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--line); }
.history__dates { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); }
.history__role h3 { margin-bottom: 6px; }
.history__role p { font-size: 15px; font-weight: 500; color: var(--ink); }
.history__detail { font-size: 16px; color: var(--muted); }
.history__detail a, .history-facts__list a { color: var(--gold-ink); }
.history-facts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); }
.history-facts__title { font-size: clamp(28px, 2.4vw, 36px); }
.history-facts__list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.history-facts__list li { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.history-facts__list strong { display: block; margin-bottom: 2px; font-weight: 600; color: var(--ink); }

/* Method: the homepage's How it works block over five phases, then the written plan with the five pillars. */
.phases--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.phases--five li strong { font-size: 21px; }
.pillars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.pillars dt { margin-bottom: 8px; font-family: var(--display); font-size: 21px; color: var(--ink); }
.pillars dd { margin: 0; font-size: 15px; color: var(--muted); }
.pricing .project-proof { background: var(--ivory); }
.plan-price { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; color: var(--ink); }
.plan-tool { margin-top: 36px; font-size: 16px; }

/* Legal pages: one readable column under the page hero. */
.legal { padding-top: 0; }
.legal__body { max-width: 72ch; }
.legal__body p, .legal__body li { font-size: 17px; color: var(--muted); }
.legal__body > p + p { margin-top: 16px; }
.legal__body h2 { margin: 56px 0 16px; font-size: clamp(26px, 2.2vw, 32px); }
.legal__body ul { display: grid; gap: 12px; margin: 16px 0 0; padding-left: 20px; }
.legal__body li::marker { color: var(--gold-deep); }
.legal__body strong { font-weight: 600; color: var(--ink); }
.legal__body a { color: var(--gold-ink); }
.legal__body button[data-consent-reset] { padding: 0; border: 0; background: none; color: var(--gold-ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding-block: 10px; margin-block: -10px; }
.legal-updated { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }

/* Split-test pages (plan 4.11): no drawer, so the header keeps its one button on phones; the close is the button again. */
.project-hero__actions + .story__note { margin-top: 18px; }
.split-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; margin: 48px 0 0; padding: 0; }
.split-list li { padding-top: 20px; border-top: 2px solid var(--gold); font-size: 15px; color: var(--muted); }
.split-list strong { display: block; margin-bottom: 6px; font-family: var(--display); font-size: 21px; font-weight: 500; color: var(--ink); }
.split-proof__title { max-width: 18em; }
.split-close { background: var(--ivory-lift); border-top: 1px solid var(--line); }
.split-close h2 { margin-bottom: 32px; font-size: clamp(40px, 4.6vw, 66px); }
.split-close__floor { margin-top: 20px; font-size: clamp(17px, 1.3vw, 20px); color: var(--muted); }

/* Responsive. Phone art direction is a later pass (astra-mobile-refinement); this keeps the page usable there. */
@media (max-width: 1100px) {
  /* Three cards will not hold their prices and terms on even lines across; the tiers stack in order, each keeping its
     rule and dot, without the steps. */
  .tiers { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .tier:nth-child(n) { margin-top: 0; }
  .tier + .tier::before { display: none; }
  .phases--five { grid-template-columns: 1fr; }
  .phases--five li { border-left: 0; padding-left: 0; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .reads__grid { grid-template-columns: 1fr; }
  .reads__grid { gap: 48px; }
  .read__object, .read--out .read__object { width: 100%; margin: 0 0 4px; }
  .case { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .phases { grid-template-columns: 1fr; }
  .phases li { border-left: 0; padding-left: 0; }
  .form { padding: 22px; }
  .form__grid { grid-template-columns: 1fr; }
  .project-hero, .project-story__intro, .project-build__head, .project-gallery__head { grid-template-columns: 1fr; align-items: start; }
  .project-chapter { grid-template-columns: 48px minmax(0, 1fr); }
  .project-chapter p { grid-column: 2; }
  .project-results__grid, .project-proof-grid, .project-honesty__list { grid-template-columns: 1fr; }
  .project-shot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall { --wall-stagger: 56px; }
  .wall__card--wide { grid-template-columns: 1fr; align-items: start; }
  .history__item { grid-template-columns: minmax(130px, 0.6fr) minmax(0, 1fr); }
  .history__detail { grid-column: 2; }
  .site-menu__inner { grid-template-columns: 1fr; }
  .site-menu__meta, .menu-card-stack { display: none; }
  /* A frame that scrolls or drags inside itself leaves room to scroll the page past it. */
  .browser-preview__stage { max-height: 60svh; }
  .browser-preview--interactive-graph .browser-preview__stage { height: 60svh; }
  .browser-preview__tools button { min-height: 44px; }
}

@media (max-width: 760px) {
  .top { padding: 18px var(--gutter); }
  /* The brand lettering stays near 10px on a phone and keeps that size once the header settles (Eric, 2026-10-02: it read
     small and pixelated; the pixelation was Safari drawing the old lockup's gradient letters at low resolution, fixed in
     the header-* lockups). The MENU word gives up its room; the icon and its label stay. */
  .top__logo, .top.is-scrolled .top__logo { height: min(46px, 11.8vw); transition: none; }
  .menu-toggle__label { display: none; }
  /* Book a call stays in the phone header; the gaps tighten to make room. */
  .top__right { gap: 12px; }
  .menu-toggle { padding-left: 8px; }
  .site-menu__inner { padding-top: 110px; }
  .site-menu__link { font-size: 30px; }
  h1 { font-size: 38px; }
  .story__copy { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: 90px; transform: none; }
  .story__copy .eyebrow { margin-bottom: 14px; }
  .story__lede { font-size: 16px; margin: 16px 0 20px; }
  .spine { gap: 8px; bottom: 22px; }
  .spine { grid-template-columns: 1fr; }
  .spine__step:not(.is-active) { display: none; }
  /* Selected work moves as on desktop (Eric, 2026-10-02). One card has to fit between the header and the Read Desk
     launcher, so the phone card keeps the screenshot, the name, the status, the result and the link; the label, the
     stats and the build notes stay on the case page, the counter replaces the arrows, and the screenshot takes the
     height that is left. */
  .work__stage { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; padding-block: 88px 80px; gap: 16px; }
  /* All work rides on the eyebrow line, so it stays in view while the band holds still. */
  .work__head, .work__all { grid-area: 1 / 1; }
  .work__all { align-self: start; text-align: right; }
  .track { grid-area: 2 / 1; }
  .work__arrow { display: none; }
  /* A phone too short or narrow for a whole card (site.js measures it) gets the swipe rail instead (Codex review). */
  .work.is-rail { min-height: 0; }
  .is-rail .work__stage { position: static; height: auto; padding-block: 64px 40px; }
  .is-rail .track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; transition: none; scrollbar-width: none; }
  .is-rail .track::-webkit-scrollbar { display: none; }
  .is-rail .case { scroll-snap-align: center; opacity: 1; transform: none; }
  .case { flex-basis: 86vw; padding: 14px; gap: 14px; }
  .case__kicker, .case .stats, .case__more { display: none; }
  /* ponytail: a phone shorter than about 600px visible (an SE with its bars up) still runs the card under the launcher;
     a per-height layout would fix it if those visits matter. */
  .case__media { aspect-ratio: auto; height: clamp(96px, calc(100svh - 520px), 240px); }
  .prices > div { grid-template-columns: 1fr; }
  .about__grid { grid-template-columns: 1fr; }
  .about__portrait { max-width: 320px; }
  .foot__row { flex-direction: column; }
  .start { min-height: 76svh; padding: 76px var(--gutter); }
  /* Homepage: the banner sits over the hero object under the header, clear of the headline and buttons, and scrolls
     away. Every other page: it sits in the page flow above the opening, so it covers nothing, and the opening gives up
     its top padding while the banner is there. */
  .consent { position: absolute; top: 76px; bottom: auto; left: 16px; padding: 14px 16px; }
  /* While it is up, the hero copy drops its note and the spine and sits lower, so the banner clears the headline. */
  body:has(> .consent) :is(.story__note, .spine) { display: none; }
  body:has(> .consent) .story__copy { bottom: 28px; }
  body:not(:has([data-story])) { display: flex; flex-direction: column; }
  body:not(:has([data-story])) > .consent { position: static; order: -1; width: auto; margin: 84px 16px 0; }
  body:has(> .consent) :is(.project-hero, .about--page) { padding-top: 28px; }
  .consent__copy { margin-bottom: 12px; font-size: 12px; line-height: 1.5; }
  /* Narrower buttons keep the privacy link on their row down to 320 wide, which keeps the banner short. */
  .consent__button { padding: 9px 12px; }
  .project-next__links { grid-template-columns: 1fr; }
  .project-next__card:last-child { text-align: left; }
  .browser-preview__bar { grid-template-columns: 1fr; gap: 10px; }
  .browser-preview__lights { display: none; }
  .browser-preview__url { justify-self: stretch; max-width: 100%; text-align: center; }
  .browser-preview__tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ba-compare__tag { top: 10px; padding: 4px 8px; letter-spacing: 0.02em; }
  .ba-compare__tag--before { left: 8px; }
  .ba-compare__tag--after { right: 8px; }
  .project-shot-grid { grid-template-columns: 1fr; }
  .project-shot--wide { grid-column: auto; }
  /* The mapping table becomes one block per category, each cell under its own small label. */
  .project-mapping, .project-mapping :is(caption, tbody, tr, th, td) { display: block; }
  .project-mapping thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .project-mapping tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .project-mapping tbody tr:first-child { border-top: 1px solid var(--line-strong); }
  .project-mapping :is(th, td) { padding: 0; border: 0; }
  .project-mapping td { margin-top: 10px; }
  .project-mapping td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
  .wall { grid-template-columns: 1fr; padding-bottom: 0; }
  .wall > :nth-child(even) { transform: none; }
  .about--page { padding-top: 112px; }
  .history__item { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .history__detail { grid-column: auto; }
  .history-facts__grid, .pillars { grid-template-columns: 1fr; }
}

/* Phone hero fit. site.js puts one of two classes on <html> from the height the page loaded at, once per width:
   a media query on height would re-lay out the hero when the browser bars slide away mid-scroll.
   hero-short (a 390x844 phone shows about 664 with the bars up): the copy tightens so the headline clears the header
   and the banner, and leaves a band for the object. */
.hero-short .story__copy h1, .hero-flow .story__copy h1 { font-size: 32px; }
.hero-short .story__copy { bottom: 24px; }
.hero-short .story__copy .eyebrow { margin-bottom: 10px; }
.hero-short .story__lede { font-size: 15px; margin: 12px 0 16px; }
.hero-short :is(.story__note, .spine) { display: none; }
.hero-short body:has(> .consent) .story__copy .eyebrow { visibility: hidden; }

/* hero-flow (small phones, and a phone held sideways): no room for the pinned scroll story, so the hero is plain copy
   in the page flow, site.js loads no frames, and the banner sits above it like on every other page. */
.hero-flow .story { min-height: 0 !important; }
.hero-flow .story__stage { position: static; height: auto; padding: 96px var(--gutter) 40px; }
/* Upright, the hero object is a still above the copy: the first frame, which the page already preloads, placed as
   the canvas places it on a phone (1.3 widths, the object centred). */
@media (orientation: portrait) {
  .hero-flow .story__stage { padding-top: 64px; }
  .hero-flow .story__stage::before {
    content: ""; display: block; height: 58vw; margin: 0 calc(-1 * var(--gutter)) 4px;
    background: url("./assets/hero-orbits-frames-v1/f-0001.webp") -39.4vw 50% / 130vw auto no-repeat;
  }
}
.hero-flow :is(.story__canvas, .spine) { display: none; }
.hero-flow .story__copy { position: static; }
.hero-flow .reads { margin-top: 0; }
.hero-flow body { display: flex; flex-direction: column; }
.hero-flow body > .consent { position: static; order: -1; width: auto; margin: 84px 16px 0; }
.hero-flow body:has(> .consent) .story__stage { padding-top: 28px; }
.hero-flow body:has(> .consent) .story__note { display: block; }

/* Short windows at desktop width (a 1366x768 laptop leaves about 640): the hero type scales with the height so the
   eyebrow clears the header, and the banner moves to the right, over the object, off the hero's buttons. */
@media (min-width: 761px) and (max-height: 760px) {
  .story__copy { top: calc(50% + 24px); }
  .story__copy h1 { font-size: clamp(34px, 7.4vh, 56px); text-wrap: balance; }
  .story__copy .eyebrow { margin-bottom: 16px; }
  .story__lede { font-size: 17px; margin: 18px 0 24px; }
  .consent { left: auto; right: clamp(16px, 2.2vw, 30px); }
}

/* A phone held sideways: only the headline, the offer line and the buttons fit beside the object. */
@media (min-width: 761px) and (max-height: 520px) {
  .story__copy { top: calc(50% + 36px); width: min(560px, 42vw); }
  .story__copy .eyebrow, .story__note, .spine { display: none; }
  .story__lede { font-size: 15px; margin: 12px 0 16px; }
  .story__actions { margin-bottom: 0; }
  .story__actions .btn { padding: 12px 14px; font-size: 14px; }
  .consent { width: 380px; }
}


@media (max-width: 374px) {
  .menu-toggle__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .page-loader, .route-transition, .cursor, .method__media { display: none !important; }
  .site-menu, .site-menu__link span, .menu-hover-card, .menu-toggle__icon span, .menu-toggle__label span, .menu-toggle__label::after { transition: none; }
  .site-menu__link span { opacity: 1; transform: none; }
  .story { min-height: 100svh !important; }
  .reads { margin-top: 0; }
  .read--in, .read--out { opacity: 1; transform: none; transition: none; }
  .read__object { --lit: 1 !important; }
  .spine__step { color: var(--ink); }
  .work { min-height: 0; }
  .work__stage { position: static; height: auto; }
  .track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; }
  .case { opacity: 1; transform: none; scroll-snap-align: center; }
  .btn, .case, .case__media img, .wall__media img, .consent__button, .browser-preview__stage, .ba-compare__tag { transition: none; }
}