/* ==========================================================================
   VISTORA ESTATES
   Light editorial system. Warm paper, ink, gold linework.
   Structure comes from hairlines and tone shifts — never from shadow or fill.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Ground */
  --paper:        #FAF8F4;
  --raised:       #F1EDE5;
  --deep:         #14130F;

  /* Ink */
  --ink:          #1A1815;
  --muted:        #6E6A62;

  /* Gold — see the contrast rule before using these */
  --gold:         #C9973F;   /* graphic only: rules, borders, fills, big numerals */
  --gold-deep:    #8A6224;   /* the ONLY gold permitted for text (5.2:1 on paper) */
  --gold-hi:      #E8C87A;   /* dark grounds only */

  /* Lines */
  --hairline:     rgba(26, 24, 21, 0.12);
  --hairline-soft:rgba(26, 24, 21, 0.07);
  --hairline-gold:rgba(201, 151, 63, 0.40);

  /* Space — 8 / 16 / 24 / 32 / 40 / 56 / 64 / 88. The top two rungs came down
     in iteration 12 (were 80 / 128): they drove every large grid gap and the
     stat/footer margins, and the page had more air in it than copy. */
  --s1: 0.5rem;  --s2: 1rem;   --s3: 1.5rem; --s4: 2rem;
  --s5: 2.5rem;  --s6: 3.5rem; --s7: 4rem;   --s8: 5.5rem;

  /* Compacted in iteration 12. Was clamp(5rem, 9vw, 8rem) = 128px top AND
     bottom on eleven sections, ~2,800px of the page in padding alone. */
  --section-y:  clamp(3.25rem, 5.6vw, 5.25rem);
  --gutter:     clamp(1.25rem, 4vw, 4rem);
  --shell:      92rem;
  /* Height of the fixed nav band. The hero reserves this so its centred copy
     can never slide up underneath the brand. */
  --nav-h:      6rem;

  /* Type */
  --display: "Fraunces", "Times New Roman", serif;
  --sans:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Sized so the three authored <br> lines render as three lines, not six */
  --t-hero:    clamp(2.5rem, 5.6vw, 5.5rem);
  --t-h2:      clamp(2.25rem, 5.4vw, 5rem);
  --t-lede-xl: clamp(1.5rem, 3vw, 2.6rem);
  --t-h3:      clamp(1.35rem, 1.9vw, 1.75rem);
  --t-lede:    clamp(1.0625rem, 1.35vw, 1.25rem);
  --t-body:    clamp(1rem, 1.1vw, 1.0625rem);
  --t-eyebrow: 0.7rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  /* Native smooth scrolling, for when Lenis is disabled or fails to load. */
  scroll-behavior: smooth;
}

/* Lenis stamps .lenis on <html> once it takes over. Native smooth scrolling
   MUST be off then: Lenis writes a new scroll position every frame, and the
   browser would ease to each of those targets in turn — two easing curves
   stacked, which is what made scrolling feel delayed (780ms to settle instead
   of 355ms) even after the Lenis config itself was fixed. */
html.lenis { scroll-behavior: auto; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--s2);
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s2) var(--s3);
  text-decoration: none;
}
.skip-link:focus { left: var(--s2); }

/* --------------------------------------------------------------------------
   PRIMITIVES
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
  border-top: 1px solid var(--hairline);
}
.section--raised { background: var(--raised); }

/* Display type — Fraunces at max optical size for high stroke contrast.
   Chosen over a condensed grotesque because the logo wordmark is a wide-tracked
   serif; a grotesque would fight it. */
.hero-title, .sec-title, .lede-xl,
.scene h3, .aud h3, .step h3, .work-meta h3, .price-num, .stat-num {
  font-family: var(--display);
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.sec-title,
.hero-title {
  font-size: var(--t-h2);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.hero-title { font-size: var(--t-hero); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow-rule {
  width: clamp(1.5rem, 4vw, 3.5rem);
  height: 1px;
  background: var(--gold);
  flex: none;
  transform-origin: left center;   /* GSAP draws these in from zero width */
}

.sec-head {
  max-width: 44rem;
  margin-bottom: var(--s6);
  display: grid;
  gap: var(--s3);
}
.sec-head--wide { max-width: 56rem; }

.lede-xl {
  font-size: var(--t-lede-xl);
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.fig-note {
  margin-top: var(--s3);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Placeholder marker — deliberately visible so nothing ships by accident */
.ph-mark {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border: 1px solid var(--hairline-gold);
  padding: 0.25rem 0.5rem;
}
.ph-mark--float {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
  z-index: 2;
  background: var(--paper);
}

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  padding: 0.875rem 1.5rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
/* Gold fill takes INK text — white on gold fails contrast */
/* The fill wipes up from the base rather than cross-fading — same idea as the
   media reveal, so buttons and imagery share one motion language. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  /* -1 inside the isolated context: behind the label (a bare text node, so it
     cannot be lifted with z-index) but still above the button's own fill. */
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .55s var(--ease);
}
.btn:hover::after { transform: scaleY(1); }

.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold::after { background: var(--gold-deep); }
.btn-gold:hover { color: var(--paper); }
.btn-line::after { background: var(--ink); }
.btn-line:hover { color: var(--paper); border-color: var(--ink); }

.btn-line { background: transparent; color: var(--ink); border-color: var(--hairline); }

.btn-full { width: 100%; }

/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(250, 248, 244, 0.88);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--hairline);
}

.nav-inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--s3) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s4);
}
/* Deliberately NOT transitioned. This toggles as the hero video begins decoding
   scrub frames, and easing padding would run layout every frame of that 500ms.
   The condense snaps; the background/blur on .nav fades over it, which reads as
   one smooth move. */
.nav.is-scrolled .nav-inner { padding-block: 0.75rem; }

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  margin-right: auto;
}
/* logo-mark.png is RGBA with real transparency, so the mark sits straight on
   paper — no dark chip, no scale() crop hack. Slightly oversized versus the old
   chip because the linework is fine and thins out at small sizes. */
.brand-mark {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  object-fit: contain;
}

.brand-word {
  font-family: var(--display);
  font-variation-settings: "opsz" 144;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.brand-word em { font-style: normal; color: var(--gold-deep); }

.nav-links { display: flex; gap: var(--s4); }
.nav-links a {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding-block: 0.25rem;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }

.nav-cta { padding: 0.6875rem 1.125rem; }

.nav-toggle {
  display: none;
  width: 2.5rem; height: 2.5rem;
  background: none;
  border: 1px solid var(--hairline);
  cursor: pointer;
  padding: 0;
  place-items: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 16px; height: 1px;
  background: var(--ink);
  transition: transform .4s var(--ease), opacity .3s;
}
.nav-toggle.is-active span:first-child { transform: translateY(3px) rotate(45deg); }
.nav-toggle.is-active span:last-child  { transform: translateY(-3px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero { height: 300vh; position: relative; }

/* Set by main.js when the scrub is not worth the download (narrow viewport or
   a metered/slow connection). Collapses the track so there is no empty scroll. */
.hero.is-static { height: 100vh; }
.hero.is-static .hero-stage { position: relative; }

.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--paper);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Was a paper wash that whited out the left two-thirds of the film. The
   headline is white now, so the scrim's whole job is the opposite: darken just
   enough to hold white type, and let the walkthrough actually be seen. main.js
   fades its OPACITY as the headline leaves (compositor-only). */
.hero-scrim {
  position: absolute;
  inset: 0;
  opacity: 1;
  will-change: opacity;
  background:
    linear-gradient(to bottom, rgba(20, 19, 15, 0.55) 0%, rgba(20, 19, 15, 0) 22%),
    linear-gradient(
      100deg,
      rgba(20, 19, 15, 0.74) 0%,
      rgba(20, 19, 15, 0.62) 34%,
      rgba(20, 19, 15, 0.38) 58%,
      rgba(20, 19, 15, 0.16) 82%
    );
}
.hero-copy {
  position: relative;
  z-index: 3;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Reserve the nav band. Centred content taller than its container overflows
     equally in both directions, which used to slide the eyebrow up underneath
     the fixed nav and jumble it into the wordmark. Padding shrinks the centring
     box instead of guessing an offset. */
  padding-block: var(--nav-h) var(--s5);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s3);
}
/* The headline is authored as three <br> lines; 34rem forced it to wrap to six
   and the block outgrew the viewport. Wide enough for the intended breaks. */
.hero-copy > * { max-width: 52rem; }
.hero-copy .hero-lede { max-width: 32rem; }
.hero-copy .eyebrow { margin-bottom: var(--s1); }

.hero-lede {
  font-size: var(--t-lede);
  color: var(--muted);
  max-width: 30rem;
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }

/* --------------------------------------------------------------------------
   HERO TYPE — the film is the ground now, so everything on it is white.
   The headline leaves the Fraunces system on purpose: a wide grotesque at
   near-viewport width is the whole point of the reference, and it only appears
   here. Every other title on the site stays serif.
   -------------------------------------------------------------------------- */
.hero-title {
  font-family: var(--sans);
  font-variation-settings: normal;
  font-weight: 600;
  /* Min is sized so the longest authored line still fits a 320px screen. It
     may re-wrap below that; the mask clips and clears either way. */
  font-size: clamp(2.1rem, 8.4vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: #fff;
}
/* Let the headline run wide; 52rem is for the prose, not for this. */
.hero-copy > .hero-title { max-width: none; }

/* Ragged indents, as in the reference. .line-mask only exists once main.js has
   wrapped the lines, so with JS off the headline just sits flush — no layout
   depends on it. */
.hero-title .line-mask:nth-child(2) { padding-left: 4%; }
.hero-title .line-mask:nth-child(3) { padding-left: 11%; }

.hero-copy .eyebrow { color: rgba(255, 255, 255, 0.86); }
.hero-copy .eyebrow-rule { background: rgba(255, 255, 255, 0.5); }
.hero-copy .hero-lede { color: rgba(255, 255, 255, 0.82); }
/* The outline button reads ink-on-paper everywhere else; on film it needs to
   be the light one. */
.hero-copy .btn-line { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.hero-copy .btn-line::after { background: #fff; }
.hero-copy .btn-line:hover { color: var(--ink); border-color: #fff; }

/* The nav sits on the film only on the home page, and only before it condenses.
   Scoping with :has keeps the sub-pages — which strip .is-scrolled at scroll 0
   — on ink. */
body:has(.hero) .nav:not(.is-scrolled) .brand-word,
body:has(.hero) .nav:not(.is-scrolled) .nav-links a { color: #fff; }
body:has(.hero) .nav:not(.is-scrolled) .brand-word em { color: var(--gold-hi); }
body:has(.hero) .nav:not(.is-scrolled) .nav-toggle span { background: #fff; }
body:has(.hero) .nav:not(.is-scrolled) .nav-toggle { border-color: rgba(255, 255, 255, 0.4); }

/* --------------------------------------------------------------------------
   GUIDED SCROLL — a progress rail and an active nav link. Between them the
   page always answers "how far in am I, and where am I?" without a word of copy.
   -------------------------------------------------------------------------- */
.scroll-rail {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 101;
  height: 2px;
  width: 0;
  background: var(--gold);
  will-change: width;
}

/* Reuses the hover underline rather than inventing a second active style. */
.nav-links a.is-current::after { transform: scaleX(1); }
.nav-links a.is-current { color: var(--gold-deep); }
body:has(.hero) .nav:not(.is-scrolled) .nav-links a.is-current { color: var(--gold-hi); }

.hero-cue {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s5);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  transition: opacity .4s var(--ease);
}
.hero-cue-track {
  display: block;
  width: 4.5rem; height: 1px;
  background: rgba(255, 255, 255, 0.3);
  position: relative;
}
.hero-cue-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--gold);
}

/* --------------------------------------------------------------------------
   TICKER
   -------------------------------------------------------------------------- */
.ticker {
  overflow: hidden;
  border-block: 1px solid var(--hairline);
  padding-block: var(--s3);
  background: var(--paper);
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: var(--s5);
  width: max-content;
  animation: ticker 44s linear infinite;
}
.ticker-track span {
  font-family: var(--display);
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ticker-track i { color: var(--gold-deep); font-style: normal; font-size: 0.5rem; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   STATEMENT
   -------------------------------------------------------------------------- */
.section--statement { border-top: none; }
.statement { max-width: 56rem; }
.statement-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform-origin: left center;   /* drawn in from zero, same as .eyebrow-rule */
  margin-bottom: var(--s6);
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   BEFORE / AFTER
   -------------------------------------------------------------------------- */
.compare {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--hairline);
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  background: var(--paper);
}
.compare-panel { position: absolute; inset: 0; }
.compare-panel img { width: 100%; height: 100%; object-fit: cover; }

.compare-before {
  /* clipped from the right edge by --split */
  clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
  background: var(--raised);
}
.compare-placeholder {
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s2);
  text-align: center;
  padding: var(--s4);
  background:
    repeating-linear-gradient(45deg,
      transparent 0 12px,
      var(--hairline-soft) 12px 13px);
}
.compare-placeholder p { color: var(--muted); font-size: 0.875rem; }

.compare-tag {
  position: absolute;
  bottom: var(--s3);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.375rem 0.625rem;
  background: var(--paper);
  color: var(--ink);
}
.compare-tag--before { left: var(--s3); }
.compare-tag--after  { right: var(--s3); }

.compare-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 3rem;
  transform: translateX(-50%);
  background: none;
  border: 0;
  padding: 0;
  cursor: ew-resize;
  display: grid;
  place-items: center;
  z-index: 3;
}
.compare-handle-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--gold);
}
.compare-handle-grip {
  position: relative;
  width: 2.75rem; height: 2.75rem;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-deep);
}
.compare-handle-grip svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   PHOTO ENHANCEMENT
   -------------------------------------------------------------------------- */
.enhance-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--s7);
  align-items: start;
  border-top: 1px solid var(--hairline);
  padding-top: var(--s5);
}
.enhance-copy { display: grid; gap: var(--s3); align-content: start; }
.enhance-lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  max-width: 34ch;
  text-wrap: pretty;
}
.enhance-note {
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 36ch;
  padding-top: var(--s2);
  border-top: 1px solid var(--hairline-gold);
}
.enhance-figure { margin: 0; display: grid; gap: 0; }
.enhance-figure .compare { aspect-ratio: 3 / 2; }
.enhance-figure .fig-note { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Stands in for a genuine flat-daylight original until a real pair exists. */
.compare-before img.is-flat {
  filter: saturate(0.5) contrast(0.82) brightness(1.1) sepia(0.05);
}

/* --------------------------------------------------------------------------
   3D INTERACTIVE MODEL
   -------------------------------------------------------------------------- */
.model-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--s7);
  align-items: start;
  border-top: 1px solid var(--hairline);
  padding-top: var(--s5);
}
.model-copy { display: grid; gap: var(--s3); align-content: start; }
.model-lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  max-width: 36ch;
  text-wrap: pretty;
}
.model-note {
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 38ch;
  padding-top: var(--s2);
  border-top: 1px solid var(--hairline-gold);
}
.model-figure { display: grid; gap: var(--s3); }
.model-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--raised);
}
.model-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Small HUD chip so the panel reads as an interactive surface, not a photo */
.model-hud {
  position: absolute;
  left: var(--s2);
  bottom: var(--s2);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: rgba(250, 248, 244, 0.92);
  border: 1px solid var(--hairline);
}
.model-hud-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
.model-hud-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Click-to-load affordance over the splat poster */
.model-launch {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s2);
  background: rgba(26, 24, 21, 0.32);
  border: 0;
  cursor: pointer;
  color: var(--paper);
  transition: background .4s var(--ease);
}
.model-launch:hover { background: rgba(26, 24, 21, 0.16); }
.model-launch-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(250, 248, 244, 0.94);
  color: var(--gold-deep);
  transition: transform .5s var(--ease);
}
.model-launch-icon svg { width: 24px; height: 24px; }
.model-launch:hover .model-launch-icon { transform: scale(1.06); }
.model-launch-text {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.375rem 0.75rem;
  background: var(--ink);
  color: var(--paper);
}
.model-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* once live, the poster and HUD are decoration behind a real viewer */
.model-frame.is-live img,
.model-frame.is-live .model-hud,
.model-frame.is-live .ph-mark { display: none; }

/* --------------------------------------------------------------------------
   SCENES (what you get)
   -------------------------------------------------------------------------- */
.scenes { display: grid; gap: var(--s7); }

.scene {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--s7);
  align-items: center;
  position: relative;
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline);
}
.scene--flip .scene-body  { order: 2; }
.scene--flip .scene-visual { order: 1; }

/* Outlined rather than filled — it reads as linework like the logo, and as
   pure decoration it carries no contrast burden. Marked aria-hidden. */
.scene-num {
  position: absolute;
  top: var(--s5);
  right: 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 144;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
.scene--flip .scene-num { right: auto; left: 0; }

.scene-body { display: grid; gap: var(--s3); align-content: start; }
.scene-body h3 { font-size: var(--t-h3); text-transform: uppercase; letter-spacing: 0.02em; }
.scene-body p { color: var(--muted); max-width: 34ch; }

.spec { display: grid; gap: 0; margin-top: var(--s1); max-width: 22rem; }
.spec li {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  padding-block: 0.625rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.spec li span:first-child { color: var(--muted); text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.14em; }

.scene-visual {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--raised);
}
.scene-visual--tall { aspect-ratio: 4 / 5; max-width: 24rem; margin-inline: auto; }
.scene-visual video,
.scene-visual img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   AUDIENCE
   -------------------------------------------------------------------------- */
.audience {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
}
.aud {
  padding: var(--s5) var(--s4) var(--s5) 0;
  border-right: 1px solid var(--hairline);
  display: grid;
  gap: var(--s2);
  align-content: start;
}
.aud:first-child { padding-left: 0; }
.aud:not(:first-child) { padding-left: var(--s4); }
.aud:last-child { border-right: none; padding-right: 0; }
.aud h3 { font-size: var(--t-h3); text-transform: uppercase; letter-spacing: 0.02em; }
.aud p { color: var(--muted); font-size: 0.9375rem; }

/* The whole card is the link target, not a small "read more" */
a.aud {
  text-decoration: none;
  color: inherit;
  transition: background .5s var(--ease);
}
a.aud:hover { background: rgba(201, 151, 63, 0.05); }
.aud-go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--s1);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.aud-go i { font-style: normal; transition: transform .5s var(--ease); }
a.aud:hover .aud-go i { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   AUDIENCE SUB-PAGES
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: calc(var(--nav-h) + var(--s7)) var(--section-y);
  border-bottom: 1px solid var(--hairline);
}
.page-hero .sec-title { max-width: 20ch; }
.page-lede {
  font-size: var(--t-lede-xl);
  line-height: 1.28;
  letter-spacing: -0.015em;
  max-width: 30ch;
  margin-top: var(--s4);
  text-wrap: pretty;
}
.page-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--s4);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
  min-height: 1.75rem;
}
.page-back:hover { color: var(--ink); }

.block-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start; }
.block { display: grid; gap: var(--s3); align-content: start; }
.block h2 {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--hairline-gold);
}
.block ul { display: grid; }
.block li {
  display: flex;
  gap: var(--s2);
  padding-block: 0.8125rem;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.9375rem;
  text-wrap: pretty;
}
.block li::before {
  content: "";
  width: 6px; height: 6px;
  margin-top: 0.55em;
  flex: none;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.block-lede { font-size: var(--t-lede); line-height: 1.5; text-wrap: pretty; }

.page-cta {
  display: grid;
  gap: var(--s4);
  justify-items: start;
  max-width: 44rem;
}

/* --------------------------------------------------------------------------
   STEPS + STATS
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
}
.step {
  display: grid;
  gap: var(--s2);
  align-content: start;
  padding-top: var(--s4);
  border-top: 1px solid var(--ink);
}
.step-num {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
}
.step h3 { font-size: var(--t-h3); text-transform: uppercase; letter-spacing: 0.02em; }
.step p { color: var(--muted); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline-gold);
}
.stat { display: grid; gap: var(--s1); }
/* Meaningful figures, so gold-deep (5.2:1) rather than the graphic gold */
.stat-num {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  color: var(--gold-deep);
}
.stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   WORK
   -------------------------------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}
/* Four walkthroughs. The vertical is a genuinely different deliverable, so it
   gets a portrait frame rather than being cropped into a landscape box. */
.work-grid--four {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6) var(--s4);
  align-items: start;
}
.work-card--tall { grid-column: 1 / -1; max-width: 22rem; }
.work-media--portrait { aspect-ratio: 9 / 16; }
.wd-plus { font-size: 0.6em; vertical-align: super; margin-left: 1px; color: var(--gold-deep); }
.work-card { border-top: 1px solid var(--ink); padding-top: var(--s3); }

.work-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--hairline);
}
.work-media video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.work-card { transition: transform .6s var(--ease); }
.work-card:hover { transform: translateY(-4px); }
.work-card .work-type { transition: color .4s var(--ease); }
.work-card:hover .work-type { color: var(--ink); }

.work-meta { padding-top: var(--s3); display: grid; gap: var(--s2); }
.work-type {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.work-meta h3 { font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.02em; }

.work-data {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s2);
  margin-top: var(--s1);
}
.work-data li { display: grid; gap: 2px; }
.wd-num {
  font-family: var(--display);
  font-variation-settings: "opsz" 144;
  font-size: 1.5rem;
  line-height: 1;
}
.wd-label {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   LAWS
   -------------------------------------------------------------------------- */
.laws { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--s7); }
.law {
  padding-block: var(--s4);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: var(--s1);
}
.law-a {
  font-family: var(--display);
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.125rem, 1.7vw, 1.4375rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.law-b { font-size: 0.9375rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   PRICING
   -------------------------------------------------------------------------- */
/* Three services side by side, then the bundle as a full-width anchor beneath.
   Deliberately not a feature-comparison table — these are alternatives, not
   tiers, so there is nothing to compare row by row. */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
  border-top: 1px solid var(--hairline-gold);
  padding-top: var(--s6);
}
.price-card {
  display: grid;
  gap: var(--s3);
  align-content: start;
}
.price-kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
/* 3D model card — two ways to buy the same thing */
.price-card--dual { gap: var(--s2); }
.price-option {
  display: grid;
  gap: 0.25rem;
  padding-block: var(--s2);
  border-top: 1px solid var(--hairline);
}
.price-option-label {
  font-size: 0.875rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.price-rec {
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 0.1875rem 0.4375rem;
}
.price-option--rec { border-top-color: var(--gold); }
.price-rec-why {
  font-size: 0.8125rem;
  color: var(--muted);
  padding-top: var(--s2);
  border-top: 1px solid var(--hairline);
  text-wrap: pretty;
}

/* Bundle — the anchor offer. Distinct ground, but no shouting. */
.price-bundle {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s6);
  align-items: center;
  margin-top: var(--s6);
  padding: var(--s5);
  background: var(--raised);
  border: 1px solid var(--hairline-gold);
}
.price-bundle-copy { display: grid; gap: var(--s2); }
.price-bundle-copy h3 {
  font-family: var(--display);
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.price-bundle-copy p { color: var(--muted); font-size: 0.9375rem; max-width: 46ch; }
.price-bundle-figure { display: grid; justify-items: end; gap: 0.25rem; text-align: right; }
.price-was {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: line-through;
}

.price-foot {
  display: grid;
  gap: var(--s4);
  justify-items: start;
  max-width: 46rem;
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
}

.price-figure {
  display: grid;
  grid-template-columns: auto auto;
  align-items: start;
  justify-content: start; /* pack $ against the numeral — auto columns otherwise
                             spread across the full width of the card */
  gap: 0 0.25rem;
}
.price-currency {
  font-family: var(--display);
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.1;
  color: var(--gold-deep);
}
/* Sized for three cards across rather than one hero number */
.price-num {
  font-size: clamp(2.75rem, 4.6vw, 4rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--gold-deep);
}
/* Visible placeholder until the enhancement price is confirmed */
.price-num--tbc { letter-spacing: 0.02em; opacity: 0.55; }
.price-unit {
  grid-column: 1 / -1;
  margin-top: var(--s3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.price-list { display: grid; }
.price-list li {
  display: flex;
  gap: var(--s2);
  padding-block: 0.8125rem;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.9375rem;
}
.price-list li::before {
  content: "";
  width: 6px; height: 6px;
  margin-top: 0.55em;
  flex: none;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.price-note { color: var(--muted); font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s8);
  align-items: start;
}
.contact-copy { display: grid; gap: var(--s3); }
.contact-lede { color: var(--muted); font-size: var(--t-lede); max-width: 28rem; }

.contact-info { margin-top: var(--s3); display: grid; }
.contact-info > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: var(--s2);
  border-top: 1px solid var(--hairline);
}
.contact-info dt {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-info dd { margin: 0; font-size: 0.9375rem; }
.contact-info a {
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-gold);
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
}
.contact-info a:hover { border-bottom-color: var(--gold-deep); }

.form { display: grid; gap: var(--s3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.field { display: grid; gap: 0.5rem; }
.field label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 0.625rem 0;
  font-size: 1rem;
  border-radius: 0;
  transition: border-color .3s var(--ease);
}
.field select { appearance: none; cursor: pointer; }
.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--gold); }
.field :is(input, select, textarea):user-invalid { border-bottom-color: #A33; }

.form-status {
  font-size: 0.875rem;
  color: var(--gold-deep);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.form-status.is-visible { opacity: 1; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--paper); border-top: 1px solid var(--hairline); padding-top: var(--s7); }
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--s6);
  padding-bottom: var(--s7);
}
.footer-brand { display: grid; gap: var(--s3); align-content: start; }
.footer-brand p { color: var(--muted); font-size: 0.875rem; max-width: 26rem; }

.footer-nav, .footer-contact { display: grid; gap: 0.625rem; align-content: start; }
.footer-head {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--s1);
}
/* min-height keeps these at the 24px target minimum on touch */
.footer-nav a, .footer-contact a {
  text-decoration: none;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
}
.footer-nav a:hover, .footer-contact a:hover { color: var(--gold-deep); }
.footer-contact span { font-size: 0.875rem; color: var(--muted); }

.footer-base {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  padding-block: var(--s3);
  border-top: 1px solid var(--hairline);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   MOTION — line masks and reveals
   -------------------------------------------------------------------------- */
.line-mask { display: block; overflow: hidden; }
.line-inner { display: block; }
/* Words animate individually inside the line mask */
.word-inner { display: inline-block; will-change: transform; }

/* Parallax needs headroom inside the frame or the drift exposes an edge */
[data-parallax] { overflow: hidden; }
[data-parallax] > video,
[data-parallax] > img { height: 114%; top: -7%; position: relative; }

[data-reveal] { opacity: 0; transform: translateY(20px); }
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .audience { grid-template-columns: repeat(2, 1fr); }
  .aud { padding-inline: var(--s4); }
  .aud:nth-child(odd) { padding-left: 0; }
  .aud:nth-child(even) { border-right: none; padding-right: 0; }
  .aud:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid--four { grid-template-columns: repeat(2, 1fr); }
  .work-card--tall { grid-column: auto; max-width: none; }
  .price-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
  .price-card--dual { grid-column: 1 / -1; }
  .enhance-grid,
  .model-grid { grid-template-columns: 1fr; gap: var(--s5); }
}

@media (max-width: 860px) {
  .nav-links {
    position: fixed;
    inset: 0 0 auto;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    padding: 5rem var(--gutter) var(--s4);
    transform: translateY(-100%);
    transition: transform .6s var(--ease);
    z-index: -1;
  }
  .nav-links.is-open { transform: none; }
  .nav-links a { padding-block: var(--s2); border-top: 1px solid var(--hairline); font-size: 1rem; }
  .nav-toggle { display: grid; }
  .nav-cta { display: none; }

  .hero { height: 260vh; }
  /* Narrow: the copy stacks, so the scrim runs top-to-bottom instead of across.
     Dark, like the desktop one — the headline is white at every width. */
  .hero-scrim {
    background: linear-gradient(
      175deg,
      rgba(20, 19, 15, 0.78) 0%,
      rgba(20, 19, 15, 0.62) 38%,
      rgba(20, 19, 15, 0.28) 72%
    );
  }
  .hero-cue { display: none; }

  .scene { grid-template-columns: 1fr; gap: var(--s4); }
  .scene--flip .scene-body { order: 1; }
  .scene--flip .scene-visual { order: 2; }
  .scene-num { font-size: 3rem; }
  .scenes { gap: var(--s7); }

  .steps { grid-template-columns: 1fr; gap: var(--s4); }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s4); margin-top: var(--s7); }

  .work-grid, .work-grid--four { grid-template-columns: 1fr; }
  .work-card--tall { max-width: none; }
  .laws { grid-template-columns: 1fr; gap: 0; }
  .price-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .price-card--dual { grid-column: auto; }
  .price-card { padding-bottom: var(--s4); border-bottom: 1px solid var(--hairline); }
  .price-card:last-child { border-bottom: none; padding-bottom: 0; }
  .price-bundle { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s4); }
  .price-bundle-figure { justify-items: start; text-align: left; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .block-pair { grid-template-columns: 1fr; gap: var(--s6); }
  .footer-inner { grid-template-columns: 1fr; gap: var(--s5); }
}

@media (max-width: 560px) {
  .audience { grid-template-columns: 1fr; }
  .aud { padding-inline: 0 !important; border-right: none; border-bottom: 1px solid var(--hairline); }
  .aud:last-child { border-bottom: none; }
  .form-row { grid-template-columns: 1fr; }
  .compare { aspect-ratio: 4 / 5; }
  .scene-visual { aspect-ratio: 4 / 3; }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   LEGAL PROSE — privacy and terms only. Narrow measure, hairline headings,
   same ink and gold as everywhere else. No new palette.
   -------------------------------------------------------------------------- */
.legal { max-width: 46rem; }
.legal-meta {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--hairline);
}
.legal h2 {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin-top: var(--s6);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--hairline-gold);
}
.legal h3 {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: var(--s4);
}
.legal p,
.legal li {
  font-size: var(--t-body);
  line-height: 1.65;
  text-wrap: pretty;
}
.legal p { margin-top: var(--s3); }
.legal ul { margin-top: var(--s3); display: grid; }
/* Marker is positioned, not a flex sibling. These items mix <strong> with
   running text, and under flex each of those becomes its own non-shrinking
   item on one nowrap line — which pushed the page past 320px. */
.legal li {
  position: relative;
  padding-block: 0.6875rem;
  padding-left: calc(var(--s2) + 6px);
  border-bottom: 1px solid var(--hairline-soft);
}
.legal li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.3em;
  width: 6px; height: 6px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.legal a { color: var(--gold-deep); text-underline-offset: 0.2em; }

.legal-table {
  width: 100%;
  margin-top: var(--s3);
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.legal-table th {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
/* Tables must scroll inside themselves, never widen the page */
.legal-table-wrap { overflow-x: auto; }

/* Deliberately loud. These are placeholders that must not reach production. */
.legal-todo {
  background: #FFF3D6;
  border-bottom: 2px solid var(--gold);
  padding: 0.1em 0.35em;
}
.legal-note {
  margin-top: var(--s6);
  padding: var(--s3);
  border: 1px solid var(--hairline-gold);
  background: var(--raised);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   LOADING STATES — a hairline shimmer while media arrives, a spinner on the
   submit button. Both resolve to nothing when the work is done.
   -------------------------------------------------------------------------- */
@keyframes v-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.work-media.is-loading::after,
.model-frame.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(241, 237, 229, 0) 20%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(241, 237, 229, 0) 80%);
  background-size: 200% 100%;
  animation: v-shimmer 1.6s linear infinite;
}
.work-media.is-loading { background: var(--raised); }

@keyframes v-spin { to { transform: rotate(360deg); } }
.btn[aria-busy="true"] { pointer-events: none; opacity: 0.72; }
.btn[aria-busy="true"]::before {
  content: "";
  display: inline-block;
  width: 0.85em; height: 0.85em;
  margin-right: 0.6em;
  vertical-align: -0.08em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: v-spin 0.7s linear infinite;
}

/* --------------------------------------------------------------------------
   FORM ERROR STATES — the message sits under the field it belongs to and is
   announced. Colour is never the only signal: the rule thickens too.
   -------------------------------------------------------------------------- */
.field-error {
  display: none;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #9B2C1E;
}
.field-error::before { content: "↑ "; }
.field.has-error .field-error { display: block; }
.field.has-error :is(input, select, textarea) {
  border-bottom-width: 2px;
  border-bottom-color: #9B2C1E;
}
.form-status[data-state="error"] { color: #9B2C1E; }

/* --------------------------------------------------------------------------
   STICKY MOBILE CTA — one thumb-reach action under 860px. Hidden on desktop,
   and suppressed while the contact form is on screen so it never sits on top
   of the submit button.
   -------------------------------------------------------------------------- */
.sticky-cta {
  display: none;
  position: fixed;
  z-index: 60;
  inset: auto 0 0 0;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(250, 248, 244, 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--hairline);
  transform: translateY(110%);
  transition: transform 0.4s var(--ease);
}
.sticky-cta .btn { width: 100%; }
.sticky-cta.is-visible { transform: none; }

@media (max-width: 860px) {
  .sticky-cta { display: block; }
  /* Clear the bar so the last line of the footer is always reachable */
  .footer-base { padding-bottom: 4.5rem; }
}

/* --------------------------------------------------------------------------
   COOKIE BANNER — asks once, remembers the answer, blocks nothing.
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  z-index: 70;
  inset: auto var(--gutter) var(--gutter) auto;
  width: min(30rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--s3);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
  box-shadow: 0 18px 50px rgba(26, 24, 21, 0.14);
  transform: translateY(calc(100% + var(--gutter)));
  transition: transform 0.5s var(--ease);
}
.cookie-banner.is-visible { transform: none; }
.cookie-banner h2 {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.cookie-banner p {
  margin-top: var(--s2);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.cookie-banner a { color: var(--gold-deep); }
.cookie-actions {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s3);
}
.cookie-actions .btn { flex: 1 1 auto; text-align: center; justify-content: center; }

@media (max-width: 860px) {
  /* Sit above the sticky CTA, never on top of it */
  .cookie-banner { inset: auto var(--gutter) 4.75rem var(--gutter); width: auto; }
}

/* Postal address — one line per part, same muted tone as the blurb above it */
.footer-address {
  display: grid;
  gap: 0.2rem;
  margin-top: var(--s3);
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}
.footer-address a { color: var(--muted); }
.footer-address a:hover { color: var(--ink); }

/* Footer legal row */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  align-items: center;
}
.footer-legal a,
.footer-legal button {
  font-size: 0.8125rem;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.footer-legal a:hover,
.footer-legal button:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   REDUCED MOTION — everything resolves to its final state
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .ticker-track { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .line-inner,
  .word-inner { transform: none !important; }
  /* clip-path reveals and parallax must resolve to their finished state */
  .scene-visual, .work-media, .model-frame, .enhance-figure .compare {
    clip-path: none !important;
  }
  [data-parallax] > video,
  [data-parallax] > img { height: 100% !important; top: 0 !important; }
  /* Scroll-driven layer (iteration 12) resolves to its finished state */
  .sec-head, .work-grid > *, .audience > *, .price-card { transform: none !important; }
  .scene-visual, .work-media, .model-frame { transform: none !important; }
  .eyebrow-rule, .statement-rule { transform: scaleX(1) !important; }
  .btn::after { display: none; }
  .hero { height: 100vh; }
  .hero-stage { position: relative; }
}