/* ==========================================================================
   Dukes — fresh UI candidate v2
   A compact original design system. Nothing here is inherited from the current
   Dukes site, from either earlier direction study, or from the Apex reference.

   Visual idea: a prepared property file. Warm bone paper, bottle-green ink,
   copper rules. Every section is opened by a numbered chapter rule; every image
   sits in a labelled mount; every claim carries a status plate.
   ========================================================================== */

/* --- Self-hosted text face. No font is requested from another domain. ------ */
@font-face {
  font-family: "Manrope";
  /* format("woff2") — NOT format("woff2-variations").
     The latter is a legacy alias only Chromium ever accepted. WebKit treats it
     as an unsupported format, so Safari was silently never loading Manrope at
     all: every Apple device fell back to system sans, and document.fonts.ready
     never settled, which is what left the homepage's load event hanging for
     30-50s and made the WebKit half of the test suite time out.
     The file is a variable woff2 either way; the axis range is declared by
     font-weight below, which is what actually enables the variation. */
  src: url("/assets/fonts/manrope-latin-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces */
  --bone: #f1eadc;
  --bone-raised: #faf6ed;
  --bone-sunk: #e4d7c1;
  --bottle: #12362b;
  --bottle-deep: #0b231c;

  /* Foregrounds */
  --ink: #111a16;
  --ink-soft: #4a554e;
  --on-deep: #f6f4ef;
  --on-deep-soft: #c9d2cb;

  /* Accents. Copper is a working colour on light surfaces (5.8:1 on bone);
     sand is its counterpart on the bottle surface (5.2:1). Crown gold from the
     logo is never used for text. */
  --copper: #8f5024;
  --copper-deep: #6f3d1b;
  --sand: #efc29a;

  /* The hero's depth is layered from the two greens the brand already owns —
     no third hue competes with them. Crest red is the red in the Dukes lion,
     allowed only as a 3px rule on an active route. */
  --forest-shade: #071a14;
  --crest: #7b1e2b;

  /* Lines */
  --rule: rgba(17, 26, 22, 0.16);
  --rule-strong: rgba(17, 26, 22, 0.42);
  --rule-on-deep: rgba(246, 244, 239, 0.24);

  /* Semantic roles, switched per surface by .on-deep */
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --accent: var(--copper);
  --line: var(--rule);
  --focus-ring: var(--ink);
  --focus-halo: rgba(143, 80, 36, 0.28);

  /* Space */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;
  --s10: 8rem;

  /* Structure */
  --inset: clamp(1.25rem, 4vw, 4.5rem);
  --measure: 68ch;
  --max: 1320px;
  --radius-structural: 0;
  --radius-control: 2px;
  --radius-mount: 4px;

  /* Type */
  --font-display: "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style",
    "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-text: "Manrope", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --t-hero: clamp(2.7rem, 1.5rem + 4.3vw, 5rem);
  --t-display: clamp(2.5rem, 1.5rem + 3.7vw, 4.6rem);
  --t-display-sm: clamp(2rem, 1.35rem + 2.6vw, 3.3rem);
  --t-section: clamp(1.5rem, 1.15rem + 1.5vw, 2.35rem);
  --t-group: clamp(1.125rem, 1rem + 0.5vw, 1.4rem);
  --t-body: 1.0625rem;
  --t-small: 0.9rem;
  --t-label: 0.75rem;

  /* Motion */
  --quick: 140ms;
  --standard: 220ms;
  --compose: 480ms;
  --slow: 700ms;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

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

/* Component display rules are more specific than the UA rule for [hidden], so
   state this once rather than fighting it per component. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* Anchors land below the sticky header rather than under it. */
  --head-h: 61px;
  scroll-padding-top: calc(var(--head-h) + 1rem);
}
@media (min-width: 64em) {
  html { --head-h: 84px; }
}

/* A fallback for engines that ignore scroll-padding on a given navigation. */
:where(#dukes-receptionist, #enquiry, #compare, #how, #scope, #fees, #consider, [id^="gr-"], [id^="epc-"]) {
  scroll-margin-top: calc(var(--head-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

/* ------------------------------- Typography ------------------------------- */

h1, h2, h3, h4 {
  margin: 0 0 var(--s4);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

p { margin: 0 0 var(--s4); max-width: var(--measure); }

.h-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -0.018em;
}
.h-display span { display: block; }
.h-display--sm { font-size: var(--t-display-sm); }

.h-hero {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-hero);
  line-height: 0.98;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.h-hero span { display: block; }

.h-section {
  font-family: var(--font-display);
  font-size: var(--t-section);
  line-height: 1.1;
}

.h-group {
  font-family: var(--font-text);
  font-size: var(--t-group);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.eyebrow {
  margin: 0 0 var(--s3);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper);
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--fg-soft);
  max-width: 58ch;
}

.note {
  font-size: var(--t-small);
  color: var(--fg-soft);
  max-width: 62ch;
  border-left: 2px solid var(--line);
  padding-left: var(--s4);
}

.reviewed {
  font-size: var(--t-small);
  color: var(--fg-soft);
  font-style: italic;
}

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------- Focus ---------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-halo);
  border-radius: var(--radius-control);
}

.skip {
  position: absolute;
  left: var(--s4);
  top: -4rem;
  z-index: 100;
  background: var(--bottle);
  color: var(--on-deep);
  padding: var(--s3) var(--s5);
  text-decoration: none;
  transition: top var(--quick) var(--ease-in-out);
}
.skip:focus { top: var(--s4); }

/* --------------------------------- Links ---------------------------------- */

a { color: inherit; }

.link {
  color: var(--copper-deep);
  text-decoration: none;
  font-weight: 600;
  position: relative;
  display: inline-block;
  padding: 2px 0;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: center;
  transition: transform var(--standard) var(--ease-in-out);
}
.link:hover::after { transform: scaleX(0.35); }
.link--arrow::before {
  content: "→";
  display: inline-block;
  margin-right: 0.5em;
  transition: transform var(--standard) var(--ease-in-out);
}
.link--arrow:hover::before { transform: translateX(3px); }

/* -------------------------------- Buttons --------------------------------- */

.btn {
  --btn-fill: var(--bottle);
  --btn-fg: var(--on-deep);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s3) var(--s6);
  border: 1px solid var(--btn-fill);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--btn-fg);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--quick) var(--ease-in-out), transform var(--quick) var(--ease-in-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  transform: scaleY(1);
  transform-origin: center;
  transition: transform var(--standard) var(--ease-in-out);
}
/* A restrained edge light on hover and focus. No pulse, no bloom. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(143, 80, 36, 0);
  transition: box-shadow var(--standard) var(--ease-in-out);
  pointer-events: none;
}
.btn:hover::after { box-shadow: 0 0 0 4px rgba(143, 80, 36, 0.16), 0 6px 18px -12px rgba(17, 26, 22, 0.55); }
.btn--primary:hover::before { transform: scaleY(0.9); }
.btn--primary:hover { color: var(--btn-fg); }
.btn:active { transform: scale(0.985); }

.btn--quiet {
  --btn-fill: transparent;
  --btn-fg: var(--ink);
  border-color: var(--rule-strong);
}
.btn--quiet:hover { border-color: var(--copper); color: var(--copper-deep); }

.btn--ghost {
  --btn-fill: transparent;
  --btn-fg: var(--ink);
  border-color: var(--rule-strong);
  min-height: 44px;
  padding: var(--s2) var(--s5);
}
.btn--ghost:hover { border-color: var(--bottle); }

/* On dark surfaces the primary action is warm sand, and the secondary is a
   hairline outline that lights at its edge. */
.btn--gold {
  --btn-fill: var(--sand);
  --btn-fg: #0b231c;
  border-color: var(--sand);
  color: var(--btn-fg);
}
.btn--gold:hover::before { transform: scaleY(0.9); }
.btn--gold:hover::after { box-shadow: 0 0 0 4px rgba(239, 194, 154, 0.24), 0 8px 22px -14px rgba(0, 0, 0, 0.8); }

.btn--outline {
  --btn-fill: transparent;
  --btn-fg: var(--on-deep);
  border-color: rgba(246, 244, 239, 0.42);
}
.btn--outline:hover { border-color: var(--sand); color: var(--sand); }
.btn--outline:hover::after { box-shadow: 0 0 0 4px rgba(239, 194, 154, 0.18); }

/* -------------------------------- Header ---------------------------------- */

.site-head {
  /* Sticky, not a scripted hide/reveal: the browser's own compositor keeps it
     flush with the top, so it cannot lag the page or expose a strip. */
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  isolation: isolate;
  /* Warm beige into cream, opaque enough that moving film cannot bleed through. */
  background:
    radial-gradient(circle at 50% -70%, rgb(250 244 233 / 60%), transparent 52%),
    linear-gradient(100deg, #ddceb6 0%, #ece1cf 48%, #ded0b8 100%);
  border-bottom: 1px solid rgb(143 80 36 / 38%);
  box-shadow: 0 8px 24px -22px rgb(11 35 28 / 72%);
}
.site-head__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s2) var(--inset);
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: 60px;
}
.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--s2);
  text-decoration: none;
  flex: 0 0 auto;
  /* The logo mark alone can run a couple of px under this at some
     breakpoints; the link's own tap target must not shrink with it. */
  min-height: 44px;
}
.brand__mark {
  display: block;
  width: auto;
  height: 42px;
  /* Genuine artwork: stationary, unchanged proportions, never recoloured. */
}
.brand__ring {
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  transition: border-color var(--standard) var(--ease-in-out), inset var(--standard) var(--ease-in-out);
}
.brand:hover .brand__ring,
.brand:focus-visible .brand__ring { border-color: var(--copper); inset: -2px; }

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--s5);
  flex-wrap: wrap;
}
.nav__item { display: flex; align-items: baseline; gap: var(--s2); }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-small);
  letter-spacing: 0.01em;
  border-bottom: 2px solid transparent;
  transition: border-color var(--standard) var(--ease-in-out), color var(--standard) var(--ease-in-out);
}
.nav__link:hover { border-color: var(--copper); }
.nav__link[aria-current="page"] { border-color: var(--bottle); }
.nav__flag {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper);
  white-space: nowrap;
}
.nav--wide { display: none; margin-inline: auto; }
.site-head__cta { display: none; }

.menu { margin-left: auto; }
.menu__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  min-width: 44px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-control);
  font-weight: 700;
  font-size: var(--t-small);
  cursor: pointer;
  list-style: none;
}
.menu__button::-webkit-details-marker { display: none; }
.menu__glyph {
  width: 16px; height: 2px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.menu[open] .menu__glyph { box-shadow: 0 0 0 currentColor; transform: rotate(45deg); }
.menu__panel {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  max-height: calc(100svh - var(--head-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bone-raised);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s5) var(--inset) var(--s6);
}
.menu__panel .nav__list { flex-direction: column; gap: 0; }
.menu__panel .nav__item { border-bottom: 1px solid var(--line); }
.menu__panel .nav__link { min-height: 48px; font-size: 1rem; width: 100%; }
.menu__cta { margin-top: var(--s4); width: 100%; }

/* The prototype notice is a hairline strip, not a banner. */
.site-head__band {
  margin: 0;
  max-width: none;
  padding: 5px var(--inset);
  background: var(--bottle-deep);
  color: rgba(246, 244, 239, 0.62);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

/* --------------------------------- Layout --------------------------------- */

.main { display: block; }
.main:focus { outline: none; }

.band,
.hero,
.page-open,
.closing,
.steps,
.reception__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 8rem) var(--inset);
}

.band { border-top: 0; }

/* Surface rhythm. Chapters alternate between the warm page, a raised panel and
   a full-bleed dark field so a long page never collapses into one beige column. */
.band--raised {
  max-width: none;
  background: var(--bone-sunk);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.band--raised > * { max-width: var(--max); margin-inline: auto; }

.band--dark {
  max-width: none;
  background:
    radial-gradient(70% 60% at 88% 10%, rgba(143, 80, 36, 0.28), transparent 62%),
    linear-gradient(180deg, #0b231c 0%, #12362b 100%);
  color: var(--on-deep);
  --fg: var(--on-deep);
  --fg-soft: var(--on-deep-soft);
  --focus-ring: var(--on-deep);
  --focus-halo: rgba(239, 194, 154, 0.4);
  --line: var(--rule-on-deep);
  --rule: var(--rule-on-deep);
  --rule-strong: rgba(246, 244, 239, 0.4);
}
.band--dark > * { max-width: var(--max); margin-inline: auto; }
.band--dark .chapter__index,
.band--dark .eyebrow { color: var(--sand); }
.band--dark .chapter__label { color: var(--on-deep-soft); }
.band--dark .evidence__record { background: rgba(246, 244, 239, 0.05); border-color: var(--rule-on-deep); }
.band--dark .plate { background: rgba(246, 244, 239, 0.06); }
.band--dark .plate--public .plate__tag { color: var(--sand); }
.band--dark .link { color: var(--sand); }

.band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
  margin-top: var(--s6);
  max-width: none;
}
.band__aside { font-size: var(--t-small); color: var(--fg-soft); }

.band__head { margin-bottom: var(--s6); }

.band__split {
  display: grid;
  gap: var(--s6);
  align-items: start;
}
.band__minor { min-width: 0; }
.band__major { min-width: 0; }

.split-two {
  display: grid;
  gap: var(--s5);
}

/* ---------------------------- Chapter rule -------------------------------- */

.chapter {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s6);
}
.chapter__index {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--copper);
  letter-spacing: 0.04em;
}
.chapter__label {
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-soft);
  white-space: nowrap;
}
.chapter__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule-strong);
  transform-origin: left center;
}

/* ---------------------------------- Hero ---------------------------------- */

.hero {
  padding-top: var(--s7);
  padding-bottom: var(--s8);
  display: grid;
  gap: var(--s6);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  margin: var(--s6) 0 0;
  max-width: none;
}

/* ---------------------- Home: the cinematic stage ------------------------- *
   Three panels. Two warm photographic side panels frame a centred film, and
   every word sits centred inside that film. The panels are atmosphere: they
   frame the work, they do not evidence it — the sourced reviews and the
   verified records below the hero do that.

   The film is contained at the aspect it was shot at, never cropped to fit and
   never enlarged past the resolution delivered.                              */

.hero--stage {
  /* 3456 × 2160: the master's true picture area, which is 16:10 rather than the
     16:9 its container implies. */
  --film-ar: 1.6;
  --stage-h: clamp(34rem, calc(78svh - 2.5rem), 48rem);
  --curtain-travel: 250%;

  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 0;
  max-width: none;
  padding: 0;
  overflow: hidden;
  background: var(--bottle-deep);
  color: var(--on-deep);
  --fg: var(--on-deep);
  --fg-soft: var(--on-deep-soft);
  --focus-ring: var(--on-deep);
  --focus-halo: rgba(239, 194, 154, 0.45);
  --line: var(--rule-on-deep);
}

/* The wrapper exists to carry the decorative role. Its three children take part
   in the hero's own grid so the copy can sit in the centre column. */
.stage { display: contents; }

/* ---- Side panels ---- */
/* The inner edge feathers away so the three panels read as one photograph
   rather than three tiles pushed together. */
.stage__curtain-media,
/* Deliberate focal points: the lit doorway on the left, the keys and folder on
   the right. Neither is cropped away at any column width. */

/* One grade shared by all three panels: bottle-green shadow, amber dusk
   highlight, and a soft inner edge so the photographs meet the film rather
   than butting against it. */


/* ---- The centre ---- */


/* The frame fills the centre column and the film is contained inside it, so the
   picture is shown whole at every width — never cropped, never stretched, and
   never scaled beyond the resolution that was encoded. The space it does not
   fill is the forest atmosphere behind it. */
.stage__poster,
.stage__poster img,
.stage__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Cover, with a deliberate focal point: the horizon and the sun stay in
     frame and the useful aerial detail is not cropped away. */
  object-fit: cover;
  object-position: 50% 44%;
}
.stage__video {
  opacity: 0;
  transition: opacity var(--slow) var(--ease-in-out);
}
.stage__video.is-playing { opacity: 1; }


/* The only green over the film: a restrained pool behind the centred copy. */

/* ---- The words ---- */
.hero__panel {
  position: relative;
  z-index: 4;
  width: min(760px, calc(100vw - var(--inset) * 2));
  margin: auto auto 0;
  padding: 0 0 clamp(2rem, 5vh, 3.25rem);
  gap: var(--s4);
  text-align: center;
  display: grid;
  gap: var(--s5);
  justify-items: center;
}
.hero__title,
.hero__copy { width: 100%; max-width: 40rem; margin: 0 auto; }
.hero__title { margin-bottom: var(--s5); }

.hero__eyebrow {
  display: inline-block;
  margin: 0 0 var(--s4);
  padding: 6px 14px;
  max-width: none;
  border: 1px solid rgba(239, 194, 154, 0.45);
  border-radius: var(--radius-control);
  background: rgba(11, 35, 28, 0.62);
  color: var(--sand);
  font-size: 0.875rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero--stage .h-hero {
  font-size: clamp(2.25rem, 1.1rem + 3.6vw, 4.25rem);
  text-shadow: 0 2px 26px rgba(6, 18, 14, 0.6);
}
.hero--stage .hero__lede {
  color: var(--on-deep);
  max-width: 42ch;
  margin-inline: auto;
  text-shadow: 0 1px 18px rgba(6, 18, 14, 0.6);
}
.hero--stage .hero__actions {
  margin-top: var(--s5);
  max-width: none;
  justify-content: center;
}
.hero__proof { margin: var(--s5) 0 0; font-size: var(--t-small); }
.hero--stage .link { color: var(--sand); }

/* ------------------------------ Route dock -------------------------------- *
   Four ruled zones on the lower edge of the film. Every row is one real link.  */

.dock {
  position: relative;
  z-index: 2;
  grid-row: 3;
  grid-column: 1;
  width: 100%;
  border-top: 1px solid rgba(239, 194, 154, 0.22);
  background: linear-gradient(180deg, rgba(11, 35, 28, 0.86) 0%, rgba(7, 26, 20, 0.96) 100%);
}
/* The photography drops down into the green rather than stopping at a hard
   edge: the dock rides up over the foot of all three panels. */
.dock::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(11, 20, 16, 0.34) 55%, rgba(11, 28, 22, 0.78) 100%);
}
.dock__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--max);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dock__item { border-top: 1px solid rgba(246, 244, 239, 0.14); }
.dock__item:nth-child(-n + 2) { border-top: 0; }
.dock__item:nth-child(2n) { border-left: 1px solid rgba(246, 244, 239, 0.14); }

.dock__link {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  /* Rows pack from the top so the audience label and the action sit on the same
     line across all four zones, whether or not a route carries a pending flag. */
  align-content: start;
  gap: 2px var(--s3);
  min-height: 76px;
  height: 100%;
  padding: var(--s3) var(--s4);
  text-decoration: none;
  color: var(--on-deep);
  transition: background-color 90ms var(--ease-in-out);
}
/* The one restrained crest-red note: an active rule, never a wash. */
.dock__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--crest);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--ease-in-out);
}
.dock__link:hover,
.dock__link:focus-visible { background: rgba(246, 244, 239, 0.07); }
.dock__link:hover::after,
.dock__link:focus-visible::after { transform: scaleX(1); }

.dock__label {
  grid-column: 1;
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: 2px;
}
.dock__index {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  color: var(--sand);
  letter-spacing: 0.06em;
}
.dock__audience {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sand);
}
.dock__action {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 0.55vw, 1.6rem);
  line-height: 1.15;
  color: var(--on-deep);
}
.dock__flag {
  grid-column: 1;
  justify-self: start;
  margin-top: var(--s2);
  padding: 2px 7px;
  border: 1px solid rgba(246, 244, 239, 0.34);
  border-radius: var(--radius-control);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--on-deep-soft);
}
.dock__cue {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  color: var(--sand);
  font-size: 1.15rem;
  transition: transform 220ms var(--ease-in-out);
}
.dock__link:hover .dock__cue,
.dock__link:focus-visible .dock__cue { transform: translateX(4px); }

.hero__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2rem, 3.4vw, 3.25rem) var(--inset) 0;
  display: grid;
  gap: var(--s6);
  align-items: center;
}
.hero__copy { min-width: 0; }
.hero__lede {
  font-size: clamp(1.0625rem, 0.98rem + 0.55vw, 1.35rem);
  color: var(--on-deep-soft);
  max-width: 44ch;
  margin-top: var(--s4);
}
.hero__media { min-width: 0; }
.eyebrow--light { color: var(--sand); }

/* Landlords: a light hero whose decision module is the main event. */
.hero--service { display: block; max-width: none; padding: 0; background: var(--bone); }
.hero--service .hero__inner { padding-bottom: var(--s7); }

.chooser {
  list-style: none;
  margin: var(--s6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
  border-top: 1px solid var(--rule-strong);
}
.chooser__item { border-bottom: 1px solid var(--rule); }
.chooser__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s3) var(--s4);
  min-height: 60px;
  padding: var(--s3) var(--s3) var(--s3) 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--standard) var(--ease-in-out), background-color var(--standard) var(--ease-in-out);
}
.chooser__link:hover,
.chooser__link:focus-visible { padding-left: var(--s3); background: var(--bone-sunk); }
.chooser__name { font-weight: 700; font-size: 1.0625rem; }
.chooser__for { grid-column: 1 / -1; font-size: var(--t-small); color: var(--fg-soft); max-width: 48ch; }
.chooser__cue { color: var(--copper); transition: transform var(--standard) var(--ease-in-out); }
.chooser__link:hover .chooser__cue,
.chooser__link:focus-visible .chooser__cue { transform: translateX(4px); }

/* Properties: the search sits inside the hero scene rather than on a white slab. */
.hero--search {
  position: relative;
  display: block;
  max-width: none;
  padding: 0;
  background: #0b231c;
  color: var(--on-deep);
  --fg: var(--on-deep);
  --fg-soft: var(--on-deep-soft);
  --focus-ring: var(--on-deep);
  --focus-halo: rgba(239, 194, 154, 0.4);
  overflow: hidden;
}
/* The search hero used to mount a media placeholder as its scene, which is why
   the page opened on a mushroom-grey slab wearing a "21:9" badge and a "mobile
   crop" guide. Those rules went with the mount; the replacement wash is in the
   search-hero block at the end of this sheet. */
.hero__inner--search { position: relative; display: block; padding-bottom: var(--s7); }
.hero--search .h-display,
.hero--search .h-display--sm { color: var(--on-deep); }

/* Scoped to the hero so these win over the standalone .search rules defined
   further down the sheet. */
.hero--search .search--hero {
  margin-top: var(--s5);
  background: rgba(11, 35, 28, 0.86);
  border-top: 3px solid var(--sand);
  color: var(--on-deep);
  --fg: var(--on-deep);
  --fg-soft: var(--on-deep-soft);
}
.hero--search .form__label,
.hero--search .search__legend { color: var(--on-deep); }
.hero--search .form__control {
  background: rgba(246, 244, 239, 0.08);
  border-color: rgba(246, 244, 239, 0.34);
  color: var(--on-deep);
}
.hero--search .form__control:hover { border-color: var(--sand); }
.hero--search .form__control option { color: var(--ink); background: var(--bone-raised); }
.hero--search .btn--primary { --btn-fill: var(--sand); --btn-fg: #0b231c; border-color: var(--sand); color: #0b231c; }
.hero--search .btn--quiet { --btn-fg: var(--on-deep); border-color: rgba(246, 244, 239, 0.42); }
.hero--search .btn--quiet:hover { border-color: var(--sand); color: var(--sand); }
.hero--search .search__note,
.hero--search .search__toggle { color: var(--on-deep-soft); }
.hero--search .search__flag { color: var(--sand); }
.hero--search .plate { background: rgba(246, 244, 239, 0.08); border-left-color: var(--sand); }
.hero--search .plate__tag { color: var(--sand); }
.hero--search .plate__detail { color: var(--on-deep-soft); }

.page-open {
  display: grid;
  gap: var(--s6);
  padding-top: var(--s7);
}
.page-open--tight { padding-bottom: var(--s6); }

.anchors { list-style: none; margin: var(--s5) 0; padding: 0; display: grid; gap: var(--s2); }
.anchors--row {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--inset) var(--s5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
}

.whatnext {
  margin: var(--s5) 0;
  padding-left: 1.2em;
  color: var(--fg-soft);
  max-width: 46ch;
}

/* ------------------------- Designed media mount --------------------------- */

/* The mount holds the space a photograph or film will occupy. The default state
   is an art-directed storyboard surface with crop guides; the written brief sits
   behind a closed inspector so the page reads as a website, not a worksheet. */
.mount {
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-mount);
  background: var(--bone-raised);
  overflow: hidden;
  container-type: inline-size;
}

.mount__scene {
  position: relative;
  aspect-ratio: var(--mount-ar-mobile, 1.5);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--sand);
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(239, 194, 154, 0.16), transparent 60%),
    radial-gradient(100% 80% at 88% 88%, rgba(143, 80, 36, 0.28), transparent 62%),
    linear-gradient(158deg, #0b231c 0%, #12362b 52%, #1d3a2c 78%, #2a3a2c 100%);
}

.mount--asset .mount__scene {
  display: block;
  overflow: hidden;
  background: var(--surface-mushroom);
}

.mount__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--mount-position, 50% 50%);
}
.mount__art {
  width: min(58%, 15rem);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.32;
}

/* Crop guides: corner marks, a thirds grid and the mobile crop band. */
.mount__guide {
  position: absolute;
  width: 22px; height: 22px;
  border: 0 solid rgba(239, 194, 154, 0.5);
}
.mount__guide--tl { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; }
.mount__guide--tr { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.mount__guide--bl { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.mount__guide--br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }
.mount__thirds {
  position: absolute;
  inset: 14px;
  background:
    linear-gradient(90deg, transparent calc(33.33% - 0.5px), rgba(246, 244, 239, 0.09) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px)),
    linear-gradient(90deg, transparent calc(66.66% - 0.5px), rgba(246, 244, 239, 0.09) calc(66.66% - 0.5px) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
    linear-gradient(180deg, transparent calc(33.33% - 0.5px), rgba(246, 244, 239, 0.09) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px)),
    linear-gradient(180deg, transparent calc(66.66% - 0.5px), rgba(246, 244, 239, 0.09) calc(66.66% - 0.5px) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
}
.mount__crop {
  position: absolute;
  top: 14px; bottom: 14px;
  left: 50%;
  width: min(34%, 9rem);
  transform: translateX(-50%);
  border-left: 1px dashed rgba(239, 194, 154, 0.42);
  border-right: 1px dashed rgba(239, 194, 154, 0.42);
  display: none;
}
.mount__crop-label {
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(239, 194, 154, 0.75);
  white-space: nowrap;
}
.mount__ratio {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 244, 239, 0.55);
}

/* The plate is always a bone surface, so it resets the surface tokens rather
   than inheriting the dark-band foregrounds it may be sitting inside. */
.mount__plate {
  padding: var(--s4) var(--s5) var(--s5);
  display: grid;
  gap: var(--s2);
  background: var(--bone-raised);
  border-top: 1px solid rgba(17, 26, 22, 0.16);
  color: var(--ink);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --rule: rgba(17, 26, 22, 0.16);
  --rule-strong: rgba(17, 26, 22, 0.42);
  --line: rgba(17, 26, 22, 0.16);
  --focus-ring: var(--ink);
  --focus-halo: rgba(143, 80, 36, 0.28);
}
.mount__banner {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  max-width: none;
}
.mount__flag {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--copper-deep);
}
.mount__id {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  color: var(--fg-soft);
}
.mount__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--ink);
  max-width: 34ch;
}
.mount__meta,
.mount__replace {
  margin: 0;
  font-size: var(--t-small);
  color: var(--fg-soft);
  max-width: 46ch;
}
.mount__replace { color: var(--copper-deep); }

.mount__inspect { margin-top: var(--s2); }
.mount__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--fg-soft);
  cursor: pointer;
  list-style: none;
}
.mount__summary::-webkit-details-marker { display: none; }
.mount__summary::after { content: "+"; color: var(--copper); font-size: 1.1rem; }
.mount__inspect[open] .mount__summary::after { content: "–"; }
.mount__spec {
  margin: 0 0 var(--s2);
  display: grid;
  gap: 2px;
  font-size: 0.8125rem;
  color: var(--fg-soft);
}
.mount__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: var(--s2) 0;
  border-top: 1px solid var(--rule);
}
.mount__row dt {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
}
.mount__row dd { margin: 0; }

/* A card cover slot is a quiet frame, not a feature. */
.mount--card .mount__plate,
.mount--gallery .mount__plate { padding: var(--s3) var(--s4) var(--s4); }
.mount--card .mount__title,
.mount--gallery .mount__title { font-size: 1rem; }

/* --------------------------- Route selector ------------------------------- */

.routes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.routes__item { border-bottom: 1px solid var(--line); }
.routes__link {
  display: grid;
  grid-template-columns: 2.5rem 1fr 1.5rem;
  align-items: center;
  gap: var(--s4);
  min-height: 72px;
  padding: var(--s4) 0;
  text-decoration: none;
  color: inherit;
}
.routes__index {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--copper);
  transition: transform var(--standard) var(--ease-in-out);
}
.routes__body { display: grid; gap: 2px; }
.routes__label { font-weight: 700; font-size: 1.0625rem; }
.routes__outcome { font-size: var(--t-small); color: var(--fg-soft); }
.routes__cue {
  justify-self: end;
  width: 1.25rem;
  height: 1px;
  background: var(--rule-strong);
  transition: width var(--standard) var(--ease-in-out), background-color var(--standard) var(--ease-in-out);
}
.routes__link:hover .routes__index,
.routes__link:focus-visible .routes__index { transform: translateX(4px); }
.routes__link:hover .routes__cue,
.routes__link:focus-visible .routes__cue { width: 2rem; background: var(--copper); }
.routes__note {
  margin: 0 0 var(--s3);
  padding-left: 3.4rem;
  font-size: var(--t-small);
  color: var(--fg-soft);
}

/* ------------------------------- Hero stage ------------------------------- *
   One uninterrupted film across the full width. No side photographs, no seams,
   no coloured glow anywhere. The only things over the film are a localised
   readability veil and two painted shutters that open once and then belong to
   the scroll position.                                                        */

.hero--stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: none;
  padding: 0;
  gap: 0;
  min-height: clamp(540px, calc(74svh - 40px), 760px);
  overflow: hidden;
  background: #0c0f0d;
  color: var(--on-deep);
  --fg: var(--on-deep);
  --fg-soft: var(--on-deep-soft);
  --focus-ring: var(--on-deep);
  --focus-halo: rgba(239, 194, 154, 0.45);
}

.stage { position: absolute; inset: 0; display: block; background: #0b0e0c; }
.stage__film {
  max-width: 2304px;
  margin-inline: auto;
  inset: 0;
}
.stage__film { position: absolute; inset: 0; overflow: hidden; }
.stage__poster,
.stage__film img,
.stage__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.stage__video { opacity: 0; transition: opacity var(--slow) var(--ease-in-out); }
.stage[data-film-state="playing"] .stage__video { opacity: 1; }

/* Readability where the copy sits, not a filter over the whole picture. */
.stage__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 52% at 50% 46%, rgba(8, 11, 9, 0.82) 0%, rgba(8, 11, 9, 0.62) 46%, rgba(8, 11, 9, 0.18) 78%, transparent 100%),
    linear-gradient(180deg, rgba(8, 11, 9, 0.42) 0%, transparent 26%, transparent 62%, rgba(8, 11, 9, 0.5) 100%);
}

/* Painted shutters. Cream board, a fine paper tooth, one brass keyline on the
   inner edge. No photograph, no glow, nothing left visible when open. */
.shutter {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  z-index: 3;
  pointer-events: none;
  background-color: #efe7d8;
  background-image:
    linear-gradient(180deg, rgba(255, 253, 247, 0.9) 0%, rgba(226, 214, 195, 0.9) 100%),
    repeating-linear-gradient(92deg, rgba(143, 80, 36, 0.035) 0 2px, transparent 2px 5px);
  transform: translate3d(-101%, 0, 0);
}
.shutter--left { left: 0; border-right: 1px solid rgba(168, 124, 62, 0.55); }
.shutter--right { right: 0; border-left: 1px solid rgba(168, 124, 62, 0.55); transform: translate3d(101%, 0, 0); }
/* A neutral contact shadow, only while they are actually moving. */
[data-curtains="opening"] .shutter,
[data-curtains="scroll"] .shutter { box-shadow: 0 0 40px -12px rgba(18, 16, 13, 0.55); }

@media (min-width: 48em) {
  .page--home .shutter--left { animation: shutter-open-left 940ms cubic-bezier(0.4, 0, 0.2, 1) 120ms both; }
  .page--home .shutter--right { animation: shutter-open-right 940ms cubic-bezier(0.4, 0, 0.2, 1) 120ms both; }
}
@keyframes shutter-open-left {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-101%, 0, 0); }
}
@keyframes shutter-open-right {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(101%, 0, 0); }
}
/* Once the scroll controller owns them, the entry animation must not fight it. */
[data-curtains="scroll"] .shutter { animation: none !important; }
/* No shutters on a phone or under reduced motion: just the film. */
@media (max-width: 47.99em) {
  .shutter { display: none; }
}
[data-motion="static"] .shutter { display: none !important; }

/* ----------------------------- Scroll stage ------------------------------- *
   The section below the hero tilts up into place as it is scrolled to. One
   progress value, one transform, no layout properties.                       */
.stagewrap {
  perspective: 1400px;
  perspective-origin: 50% 0%;
  /* clip, not hidden: hidden would create a scroll container and break the
     sticky header above it. */
  overflow-x: clip;
}
[data-enhanced][data-motion="full"] .stagewrap__inner {
  transform-origin: 50% 0%;
  transform:
    rotateX(calc((1 - var(--stage-progress, 1)) * 14deg))
    scale(calc(0.94 + var(--stage-progress, 1) * 0.06))
    translateY(calc((1 - var(--stage-progress, 1)) * 48px));
  opacity: calc(0.45 + var(--stage-progress, 1) * 0.55);
  will-change: transform;
}
[data-motion="static"] .stagewrap__inner {
  transform: none !important;
  opacity: 1 !important;
}

/* ---------------------------- Journey gallery ----------------------------- *
   A service gateway, not a mood board: four landscape routes visible together,
   each one card, one link, one decision. The photograph carries the
   recognition; a localised scrim at the foot carries the words.             */

.band--journeys .band__head,
.gallery,
.gallery__aside,
.gallery__note {
  width: min(1480px, calc(100vw - var(--inset) * 2 - 1rem));
  margin-inline: auto;
}
.band--journeys .h-section { font-size: clamp(2.75rem, 4vw, 4.75rem); line-height: 1.02; }
.band--journeys .chapter__index { font-size: 1.35rem; }
.band--journeys .chapter__label { font-size: 0.875rem; letter-spacing: 0.2em; }
.band--journeys .lede { font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.4rem); max-width: 46ch; }

.gallery {
  list-style: none;
  margin: var(--s7) auto 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
.gcard { min-width: 0; }

.gcard__link {
  position: relative;
  display: block;
  height: clamp(9.5rem, 42vw, 11.25rem);
  overflow: hidden;
  border: 1px solid rgba(143, 80, 36, 0.34);
  border-radius: var(--radius-mount);
  background: var(--bottle-deep);
  text-decoration: none;
  color: var(--on-deep);
  transition:
    transform var(--standard) var(--ease-in-out),
    border-color var(--standard) var(--ease-in-out);
}

.gcard__media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}
.gcard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* One slow editorial move toward the focal point, nothing more. */
  transition: transform 560ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Only the text zone is protected; the photograph itself is never washed. */
.gcard__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Localised to the text zone only: the top half of every photograph is left
     completely alone, but the copy holds against a bright interior. */
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 26%,
    rgba(11, 35, 28, 0.44) 50%,
    rgba(11, 35, 28, 0.84) 76%,
    rgba(11, 35, 28, 0.94) 100%
  );
  transition: opacity var(--standard) var(--ease-in-out);
}
.gcard__link:hover .gcard__scrim,
.gcard__link:focus-visible .gcard__scrim { opacity: 1; }

.gcard__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 2px;
  padding: var(--s4) var(--s5) var(--s4);
}
.gcard__audience {
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--sand);
}
.gcard__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 3.25rem);
  line-height: 1.1;
  color: var(--on-deep);
}
.gcard__line {
  font-size: clamp(1rem, 0.94rem + 0.2vw, 1.125rem);
  line-height: 1.5;
  color: rgba(246, 244, 239, 0.86);
  max-width: 40ch;
}
/* Composed, not a warning chip. */
.gcard__status {
  justify-self: start;
  margin-top: var(--s2);
  padding-left: var(--s3);
  border-left: 2px solid var(--sand);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--sand);
}
.gcard__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--on-deep);
}
.gcard__cta-label { border-bottom: 1px solid rgba(239, 194, 154, 0.6); padding-bottom: 2px; }
.gcard__arrow { color: var(--sand); font-size: 1.2em; transition: transform 210ms var(--ease-in-out); }

.gcard__link:hover,
.gcard__link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--sand);
  box-shadow: 0 12px 30px -24px rgba(6, 18, 14, 0.9);
  cursor: pointer;
}
/* The action underline resolves from a hairline into a copper rule, so the
   card visibly answers the pointer rather than only moving. */
.gcard__cta-label {
  background-image: linear-gradient(var(--sand), var(--sand));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 260ms var(--ease-in-out);
}
.gcard__link:hover .gcard__cta-label,
.gcard__link:focus-visible .gcard__cta-label { background-size: 100% 2px; }
.gcard__link:hover .gcard__media img,
.gcard__link:focus-visible .gcard__media img { transform: scale(1.035) translate3d(-6px, -4px, 0); }
.gcard__link:hover .gcard__arrow,
.gcard__link:focus-visible .gcard__arrow { transform: translateX(6px); }

/* A planned route keeps the same quality; only its language differs. */
.gcard--planned .gcard__link { border-style: dashed; }

.gallery__aside {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
}
.gaside {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 72px;
  padding: var(--s4) var(--s6);
  font-size: 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-mount);
  background: var(--bone-raised);
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  transition: border-color var(--standard) var(--ease-in-out);
}
.gaside:hover,
.gaside:focus-visible {
  border-color: var(--copper);
  background: var(--bone-sunk);
  box-shadow: inset 3px 0 0 var(--copper);
  cursor: pointer;
}
.gaside__arrow { color: var(--copper); transition: transform 210ms var(--ease-in-out); }
.gaside:hover .gaside__arrow,
.gaside:focus-visible .gaside__arrow { transform: translateX(6px); }

.gallery__note {
  margin: var(--s5) auto 0;
  font-size: 1rem;
  color: var(--fg-soft);
  max-width: 68ch;
}


/* The gateway: all four routes visible together from tablet upward, so the
   choice is a comparison rather than a scroll. */
@media (min-width: 48em) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .gcard__link { height: clamp(16.25rem, 30vw, 20rem); }
  .gcard__body { padding: var(--s6) var(--s6) var(--s5); }
  .gallery__aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .gcard__link { height: clamp(24rem, 29vw, 26.875rem); }
  .gcard__body { padding: 32px; }
}
@media (max-width: 47.99em) {
  .gcard__link { height: clamp(9.375rem, 44vw, 11.25rem); }
  .gcard__body { padding: var(--s4); }
  .gcard__line { display: none; }
}

/* ------------------------------ Welcome ----------------------------------- */

.welcome__photo,
.welcome__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 60%;
}
.welcome__photo { aspect-ratio: 4 / 5; border-radius: var(--radius-mount); overflow: hidden; }
.welcome__principles {
  list-style: none;
  margin: var(--s5) 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
  border-top: 1px solid var(--rule);
}
.welcome__principles li {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}
/* .welcome__record is gone: the Companies House line it styled was removed from
   the Why Dukes section at the client's request. The legal identity now lives
   only in the page footer, which has its own styles. */

.welcome__grid { display: grid; gap: var(--s6); align-items: center; }
.welcome__media { min-width: 0; }
.welcome__media .mount { border-radius: var(--radius-mount); }
.welcome__copy { min-width: 0; }
.welcome__copy .h-section { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.welcome__copy p { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.65; }
.welcome__facts {
  margin: var(--s5) 0;
  padding: var(--s4) var(--s5);
  border-left: 3px solid var(--copper);
  background: var(--bone-raised);
  display: grid;
  gap: var(--s2);
  font-size: var(--t-small);
}
.welcome__facts dt { font-weight: 700; }
.welcome__facts dd { margin: 0; color: var(--fg-soft); }
.welcome__facts > div { display: grid; grid-template-columns: 12rem 1fr; gap: var(--s3); }
.welcome__actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s5); }

@media (min-width: 64em) {
  .welcome__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s8); }
}
@media (max-width: 47.99em) {
  .welcome__facts > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------------------------- Service spectrum ---------------------------- */

.spectrum { position: relative; margin: var(--s6) 0 0; }
.spectrum__scale { position: relative; height: 1px; margin-bottom: var(--s3); }
.spectrum__line {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--rule) 0%, var(--copper) 100%);
  transform-origin: left center;
}
.spectrum__ends {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  margin: 0 0 var(--s5);
  max-width: none;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-soft);
}
.spectrum__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.spectrum__step {
  position: relative;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.spectrum__dot {
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 1px solid var(--copper);
  background: var(--bone);
  border-radius: 50%;
}
.spectrum__index {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--copper);
  margin-bottom: 2px;
}
.spectrum__name { margin: 0 0 var(--s1); font-size: 1.0625rem; font-weight: 700; }
.spectrum__state { margin: 0; font-size: var(--t-small); color: var(--copper-deep); }
.spectrum__aside {
  margin-top: var(--s7);
  padding: var(--s5);
  border-left: 3px solid var(--copper);
  background: var(--bone-raised);
}
.spectrum__aside p { font-size: var(--t-small); color: var(--fg-soft); }

/* --------------------------- Editorial panels ----------------------------- */

.editorials { display: grid; gap: var(--s6); }
.editorial {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
}
.editorial__media { min-width: 0; background: var(--bottle-deep); }
.editorial__media .mount { border: 0; border-radius: 0; height: 100%; }
.editorial__body {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: var(--s3);
  padding: var(--s6) var(--s5);
}
.editorial--light { background: var(--bone-raised); }
.editorial--deep {
  background: linear-gradient(160deg, #12362b 0%, #0b231c 100%);
  border-color: var(--rule-on-deep);
  color: var(--on-deep);
  --fg: var(--on-deep);
  --fg-soft: var(--on-deep-soft);
  --line: var(--rule-on-deep);
  --focus-ring: var(--on-deep);
  --focus-halo: rgba(239, 194, 154, 0.4);
}
.editorial--deep .editorial__eyebrow { color: var(--sand); }
.editorial--deep .link { color: var(--sand); }
.editorial--deep .plate { background: rgba(246, 244, 239, 0.07); border-left-color: var(--sand); }
.editorial--deep .plate__tag { color: var(--sand); }
.editorial--deep .plate__detail { color: var(--on-deep-soft); }
.editorial__eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-deep);
}
.editorial__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.12;
}
.editorial__lede { margin: 0; color: var(--fg-soft); }

/* ------------------------------ Credentials ------------------------------- */

.creds { position: relative; display: grid; gap: var(--s7); padding-top: var(--s5); }
/* Drawn once, and only to connect the groups: it carries no meaning on its own. */
.creds__line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--sand) 18%, var(--sand) 82%, transparent 100%);
  opacity: 0.5;
  transform-origin: left center;
}
.creds__group { min-width: 0; }
.creds__title {
  margin: 0 0 var(--s2);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--sand);
}
.creds__meaning { font-size: var(--t-small); color: var(--fg-soft); max-width: 52ch; }
.creds__list { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s4); }
.creds__record {
  padding: var(--s4);
  border: 1px solid var(--rule-on-deep);
  background: rgba(246, 244, 239, 0.05);
}
.creds__record--pending { border-style: dashed; background: transparent; }
.creds__org { margin: 0 0 var(--s1); font-size: 1rem; font-weight: 700; }
.creds__what { margin: 0 0 var(--s3); font-size: var(--t-small); color: var(--fg-soft); }
.creds__pending { margin: 0; font-size: var(--t-small); color: var(--sand); }

/* ---------------------------- Action panels ------------------------------- */

.actions-pair { display: grid; gap: var(--s5); }
.action-panel {
  position: relative;
  padding: var(--s6) var(--s5) var(--s5);
  background: var(--bone-raised);
  border-top: 3px solid var(--rule-strong);
  transition: border-color var(--standard) var(--ease-in-out);
}
.action-panel--lead { border-top-color: var(--bottle); }
.action-panel:hover { border-top-color: var(--copper); }
/* .btn--outline is authored for dark surfaces: cream label, cream hairline. This
   panel is a light bone surface, so without this reset the button renders cream
   on cream — measured at 1.06:1, which is invisible rather than merely low. It
   takes the ink treatment here, the same way .rcard resets its own foregrounds. */
.action-panel .btn--outline {
  --btn-fg: var(--ink);
  border-color: rgba(17, 26, 22, 0.32);
}
.action-panel .btn--outline:hover {
  border-color: var(--copper-deep);
  color: var(--copper-deep);
}
.action-panel__index {
  position: absolute;
  top: var(--s3);
  right: var(--s4);
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--copper);
}
.action-panel__title { margin: 0 0 var(--s3); font-family: var(--font-display); font-size: 1.5rem; }
.action-panel__body { color: var(--fg-soft); }
.action-panel__cta { margin: var(--s5) 0 0; max-width: none; }

/* ------------------------------- Ledger ----------------------------------- */

.ledger { list-style: none; margin: var(--s5) 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.ledger__row { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.ledger__name { margin: 0 0 var(--s1); font-size: 1.0625rem; font-weight: 700; }
.ledger__for { margin: 0 0 var(--s2); color: var(--fg-soft); }
.ledger__state {
  margin: 0;
  font-size: var(--t-small);
  color: var(--copper-deep);
}
.ledger__row--withheld .ledger__name { color: var(--fg-soft); text-decoration: line-through; }
.ledger__tag {
  margin: var(--s2) 0 0;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-deep);
}
.ledger--services .ledger__row {
  display: grid;
  gap: var(--s1);
  padding: var(--s4) 0;
  transition: padding-left var(--standard) var(--ease-in-out);
}
.ledger--services .ledger__row:hover { padding-left: var(--s3); }

/* Numbered tiles: a distinct silhouette from cards and panels. */
.tile {
  position: relative;
  padding: var(--s6) var(--s5) var(--s5);
  background: var(--bone-raised);
  border-top: 3px solid var(--bottle);
}
.tile__index {
  position: absolute;
  top: var(--s3); right: var(--s4);
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  /* Decorative, but it still has to pass contrast rather than lean on opacity. */
  color: var(--copper);
}

.facts { margin: var(--s5) 0; display: grid; gap: 0; border-top: 1px solid var(--rule-strong); }
.facts__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.facts__row dt { font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-soft); font-weight: 700; }
.facts__row dd { margin: 0; }
.facts__pending { color: var(--copper-deep); font-weight: 600; }

.themes { margin: var(--s5) 0; padding-left: 1.1em; color: var(--fg-soft); max-width: 56ch; }
.themes li { margin-bottom: var(--s2); }

.linklist { margin: var(--s4) 0; padding-left: 1.1em; max-width: var(--measure); }
.linklist li { margin-bottom: var(--s2); }

.prose { max-width: 72ch; }

/* ------------------------------ Status plate ------------------------------ */

.plate {
  display: grid;
  gap: var(--s1);
  margin: var(--s4) 0;
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--copper);
  background: var(--bone-raised);
  max-width: 62ch;
}
.plate__tag {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--copper-deep);
}
.plate__detail { font-size: var(--t-small); color: var(--fg-soft); }
.plate--public { border-left-color: var(--bottle); }
.plate--public .plate__tag { color: var(--bottle); }
.plate--demo { border-left-color: var(--ink); }

/* --------------------------------- Cards ---------------------------------- */

.card {
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius-structural);
  background: var(--bone-raised);
}
.card--action {
  transition: border-color var(--standard) var(--ease-in-out);
}
.card--action:hover { border-color: var(--rule-strong); }

.panel {
  padding: var(--s5);
  border-top: 3px solid var(--bottle);
  background: var(--bone-raised);
}
.panel--check { border-top-color: var(--copper); }
.panel__list { margin: 0; padding-left: 1.1em; }
.panel__list li { margin-bottom: var(--s3); }

.pending {
  margin: var(--s6) 0;
  padding: var(--s5);
  border: 1px dashed var(--copper);
  background: var(--bone-raised);
}
.pending__list { margin: var(--s4) 0 0; padding-left: 1.1em; }
.pending__list li { margin-bottom: var(--s2); }

/* Sales: a restrained curtain. Deliberately quiet, deliberately not a service. */
.curtain {
  max-width: none;
  margin: 0;
  padding: clamp(3.5rem, 8vw, 7rem) var(--inset);
  background:
    radial-gradient(80% 70% at 12% 0%, rgba(143, 80, 36, 0.24), transparent 60%),
    linear-gradient(180deg, #0b231c 0%, #12362b 100%);
  color: var(--on-deep);
  --fg: var(--on-deep);
  --fg-soft: var(--on-deep-soft);
  --focus-ring: var(--on-deep);
  --focus-halo: rgba(239, 194, 154, 0.4);
}
.curtain__inner { max-width: var(--max); margin: 0 auto; }
.curtain__tag {
  margin: 0 0 var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid rgba(239, 194, 154, 0.35);
  display: inline-block;
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--sand);
}
.curtain__title { color: var(--on-deep); max-width: 18ch; }
.curtain__body { color: var(--on-deep-soft); max-width: 54ch; font-size: 1.15rem; }
.curtain__foot {
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-on-deep);
  font-size: var(--t-small);
  color: rgba(246, 244, 239, 0.55);
  max-width: 58ch;
}

/* About: portrait-led composition. */
.hero--person { display: block; max-width: none; padding: 0; background: var(--bone); }
.hero__inner--person { padding-bottom: var(--s7); align-items: center; }
.hero__portrait { min-width: 0; }
.hero__story { min-width: 0; }
/* Labelled synthesis, deliberately not styled as a quotation. */
.hero__pull {
  margin: var(--s5) 0;
  padding-left: var(--s5);
  border-left: 3px solid var(--copper);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 42ch;
}
.hero__pull-label {
  display: block;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--copper-deep);
  margin-bottom: var(--s1);
}

/* -------------------------------- Matrix ---------------------------------- */

.groups { display: grid; gap: var(--s7); }
.group { min-width: 0; }
.group__intro { color: var(--fg-soft); font-size: var(--t-small); }
.group__pending { font-size: var(--t-small); color: var(--fg-soft); max-width: 62ch; margin-top: var(--s3); }
.group[hidden] { display: none; }
.group--dim { opacity: 0.55; transition: opacity var(--standard) var(--ease-in-out); }

.matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  margin: var(--s4) 0;
}
.matrix th,
.matrix td {
  text-align: left;
  padding: var(--s3);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.matrix thead th {
  border-bottom: 1px solid var(--rule-strong);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.matrix tbody th { font-weight: 600; }
.matrix td { color: var(--copper-deep); }
.matrix--fees td { color: var(--fg-soft); }
.matrix--fees tbody th { color: var(--ink); }

.package-grid { display: grid; gap: var(--s5); }
.package {
  padding: var(--s5);
  border-top: 3px solid var(--bottle);
  background: var(--bone-raised);
}
.package__name { margin: 0 0 var(--s2); font-family: var(--font-display); font-size: 1.4rem; }
.package__for { color: var(--fg-soft); font-size: var(--t-small); }
.package__fields { margin: var(--s4) 0; display: grid; gap: 0; }
.package__fields > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
}
.package__fields dt { font-weight: 700; }
.package__fields dd { margin: 0; color: var(--copper-deep); text-align: right; }

.scope { margin: var(--s5) 0; border-top: 1px solid var(--rule-strong); }
.scope__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.scope__topic { font-weight: 600; }
.scope__state { margin: 0; color: var(--copper-deep); font-size: var(--t-small); text-align: right; }

/* -------------------------------- Process --------------------------------- */

.process { position: relative; margin: var(--s6) 0; }
.process__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.process__step { padding-left: var(--s6); position: relative; }
.process__step::before {
  content: "";
  position: absolute;
  left: 7px; top: 12px;
  width: 9px; height: 9px;
  border: 1px solid var(--copper);
  background: var(--bone);
  border-radius: 50%;
}
.process__index {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--copper);
  margin-bottom: 2px;
}
.process__title { margin: 0 0 var(--s1); font-size: 1.0625rem; font-weight: 700; }
.process__detail { margin: 0; color: var(--fg-soft); font-size: var(--t-small); }
.process__line {
  position: absolute;
  left: 11px; top: 12px; bottom: 12px;
  width: 1px;
  background: var(--rule-strong);
  transform: scaleY(1);
  transform-origin: top center;
}

.reviewlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.reviewlist__card {
  margin: 0;
  padding: var(--s5);
  border-left: 3px solid var(--copper);
  background: var(--bone-raised);
  display: grid;
  gap: var(--s3);
}
.reviewlist__initials { font-family: var(--font-display); color: var(--copper); font-size: 1.15rem; }
.reviewlist__quote { margin: 0; }
.reviewlist__quote p { margin: 0; }
.reviewlist__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  font-size: var(--t-small);
  color: var(--fg-soft);
}
.reviewlist__meta cite { font-style: normal; font-weight: 700; color: var(--ink); }

/* ------------------------------ Review wall ------------------------------- *
   A full-bleed deep bottle-green chapter: a calm rating anchor beside a slowly
   moving wall of the reviewers' own words. The boldness of this chapter is the
   wall; everything around it stays quiet.

   The layout is the same whether the wall moves or not. Only the window height,
   the mask and the animation are added on top, so no JavaScript, reduced motion
   and Save-Data all resolve to the same complete, readable collection.        */

.band--reviews {
  max-width: none;
  background:
    radial-gradient(80% 70% at 88% 4%, rgba(143, 80, 36, 0.2), transparent 62%),
    linear-gradient(180deg, #0b231c 0%, #12362b 58%, #0b231c 100%);
  color: var(--on-deep);
  --fg: var(--on-deep);
  --fg-soft: var(--on-deep-soft);
  --focus-ring: var(--on-deep);
  --focus-halo: rgba(239, 194, 154, 0.4);
  --line: var(--rule-on-deep);
  --rule: var(--rule-on-deep);
  --rule-strong: rgba(246, 244, 239, 0.4);
}
.band--reviews > * { max-width: var(--max); margin-inline: auto; }
.band--reviews .chapter__index { color: var(--sand); }
.band--reviews .chapter__label { color: var(--on-deep-soft); }

.rwall__inner { display: grid; gap: var(--s7); align-items: start; }

.rwall__eyebrow {
  margin: 0 0 var(--s3);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--sand);
}
.rwall__title {
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  line-height: 1.05;
  color: var(--on-deep);
}
.rwall__lede { margin: 0; color: var(--on-deep-soft); max-width: 34ch; font-size: 1.125rem; }
.rwall__provenance {
  margin: var(--s4) 0 0;
  padding-left: var(--s4);
  border-left: 2px solid var(--sand);
  font-size: var(--t-small);
  color: rgba(246, 244, 239, 0.9);
  max-width: 40ch;
}

/* The card foot carries the destination host itself: the proof that these are
   Google entries is that you can see, and check, where each one goes. */
.rcard__link {
  display: grid;
  gap: 2px;
  align-content: center;
}
.rcard__go { display: block; }
.rcard__host {
  font-family: var(--font-text);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-bottom: 0;
}

/* The aggregate anchor. Large, calm, and clearly a profile total rather than a
   count of the excerpts beside it. */
.score {
  margin-top: var(--s6);
  padding: var(--s5);
  border: 1px solid var(--rule-on-deep);
  border-left: 3px solid var(--sand);
  background: rgba(246, 244, 239, 0.05);
}
.score__source {
  display: grid;
  gap: 1px;
  margin: 0 0 var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule-on-deep);
}
.score__source-label {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--on-deep-soft);
}
.score__source-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--on-deep);
}
.score__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
  line-height: 0.95;
  color: var(--on-deep);
}
.score__stars { margin: var(--s2) 0 0; font-size: 1.05rem; letter-spacing: 0.22em; color: var(--sand); }
/* The aggregate reads as a citation rather than a badge: label on the left,
   value on the right, hairline between each fact. Two columns collapse to one
   only when the label and value can no longer share a line. */
.score__ledger {
  margin: var(--s4) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--rule-on-deep);
  display: grid;
  gap: 0;
}
.score__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule-on-deep);
}
.score__row:last-child { border-bottom: 0; }
.score__row dt {
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-deep-soft);
}
.score__row dd {
  margin: 0;
  text-align: right;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--on-deep);
}
.score__row dd strong { color: var(--sand); }
.score__count,
.score__captured { margin: 0; }
.score__open { margin: var(--s4) 0 0; }
.score .link { color: var(--sand); }
.score__note {
  margin: var(--s4) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--rule-on-deep);
  font-size: var(--t-small);
  color: var(--on-deep-soft);
}
.score__note strong { color: var(--on-deep); }

/* ---- The wall ---- */
.rwall__window {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  align-items: start;
}
.rwall__col { min-width: 0; }
.rwall__col--2,
.rwall__col--3 { display: none; }

.rwall__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s5);
}

/* ---- A card ---- */
.rcard {
  position: relative;
  display: grid;
  gap: var(--s3);
  padding: var(--s5);
  border: 1px solid rgba(17, 26, 22, 0.14);
  border-radius: 12px;
  background: var(--bone-raised);
  color: var(--ink);
  /* The card is a warm bone surface inside a dark chapter, so it resets the
     surface tokens rather than inheriting the field's foregrounds. */
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --focus-ring: var(--ink);
  --focus-halo: rgba(143, 80, 36, 0.28);
  transition:
    transform var(--standard) var(--ease-in-out),
    border-color var(--standard) var(--ease-in-out),
    box-shadow var(--standard) var(--ease-in-out);
}
.rcard__head { display: flex; align-items: center; gap: var(--s3); }
.rcard__initials {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--copper);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--copper-deep);
}
.rcard__who { min-width: 0; }
/* Source stamped on every card, using the same flag idiom as the route dock so
   it reads as part of this system rather than a pasted-in third-party widget. */
.rcard__src {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid rgba(17, 26, 22, 0.22);
  border-radius: var(--radius-control);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}
.rcard__name { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); }
.rcard__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); font-size: var(--t-small); }
.rcard__stars { color: var(--copper); letter-spacing: 0.14em; }
.rcard__when { color: var(--ink-soft); }
.rcard__quote { margin: 0; }
.rcard__quote p {
  margin: 0;
  /* Moving text has to stay comfortably readable. */
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: none;
}
.rcard__link {
  justify-self: start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--copper-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(111, 61, 27, 0.4);
}
/* One real anchor, and the whole card opens it. */
.rcard__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.rcard:hover,
.rcard:focus-within {
  transform: translateY(-3px);
  border-color: rgba(143, 80, 36, 0.55);
  box-shadow: 0 10px 26px -18px rgba(6, 18, 14, 0.75);
}
/* The crown red appears once, as a hairline endpoint on the active card. */
.rcard:hover::before,
.rcard:focus-within::before {
  content: "";
  position: absolute;
  left: var(--s5);
  right: var(--s5);
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--copper) 0%, var(--crest) 100%);
  border-radius: 2px;
}

.rwall__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s5);
  margin-top: var(--s5);
}
.rwall__toggle { min-height: 44px; border-color: var(--rule-on-deep); color: var(--on-deep); }
.rwall__toggle:hover { border-color: var(--sand); color: var(--sand); }
.rwall__controls .link { color: var(--sand); }
/* The verification claim closes the chapter, set quietly under a hairline so it
   reads as a footnote to the wall rather than another piece of marketing. */
/* Nothing to pause when nothing moves. */
[data-wall-state="static"] .rwall__toggle { display: none; }

/* ---- The moving state ---- *
   Added only when the enhancement layer is present and motion is wanted, so the
   static composition above is what everyone else keeps. */
[data-enhanced][data-motion="full"] .rwall__window {
  height: clamp(34rem, 60vw, 44rem);
  overflow: hidden;
  /* Cards appear to continue beyond the window rather than being cut off. */
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
[data-enhanced][data-motion="full"] .rwall__col { height: 100%; overflow: hidden; }
[data-enhanced][data-motion="full"] .rwall__track {
  padding-bottom: var(--s5);
  will-change: transform;
  animation: wall-travel var(--wall-duration, 36s) linear infinite;
  animation-play-state: paused;
}
/* The middle column travels the other way. */
[data-enhanced][data-motion="full"] .rwall__col--2 .rwall__track { animation-direction: reverse; }
/* Column two starts part-way down so the rows never line up into a grid. */
[data-enhanced][data-motion="full"] .rwall__col--2 { padding-top: var(--s7); }
[data-enhanced][data-motion="full"] .rwall__col--3 { padding-top: var(--s5); }

[data-wall-running="true"] .rwall__track { animation-play-state: running !important; }

@keyframes wall-travel {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -50%, 0); }
}

/* -------------------------------- Evidence -------------------------------- */

.evidence { display: grid; gap: var(--s7); }
.evidence__meaning { color: var(--fg-soft); font-size: var(--t-small); }
.evidence__list { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s5); }
.evidence__record {
  padding: var(--s5);
  border: 1px solid var(--line);
  background: var(--bone-raised);
}
.evidence__org { margin: 0 0 var(--s2); font-size: 1.0625rem; font-weight: 700; }
.evidence__what { color: var(--fg-soft); font-size: var(--t-small); }
.evidence__fields { margin: var(--s4) 0; display: grid; gap: 0; }
.evidence__fields > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
}
.evidence__fields dt { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-soft); font-weight: 700; }
.evidence__fields dd { margin: 0; overflow-wrap: anywhere; }
.evidence__caution,
.evidence__noaction { font-size: var(--t-small); color: var(--fg-soft); }

/* ------------------------------- Trust rail ------------------------------- */

.rail {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bone-sunk);
  padding: var(--s6) var(--inset);
}
.rail__title {
  max-width: var(--max);
  margin: 0 auto var(--s2);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--fg-soft);
}
.rail__intro {
  max-width: var(--max);
  margin: 0 auto var(--s4);
  font-size: var(--t-small);
  color: var(--fg-soft);
}
.rail__viewport { max-width: var(--max); margin: 0 auto; overflow: hidden; }
.rail__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.rail__link {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--rule);
  background: var(--bone-raised);
  text-decoration: none;
  transition: border-color var(--standard) var(--ease-in-out);
}
.rail__link:hover { border-color: var(--copper); }
.rail__category { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-soft); }
.rail__org { font-weight: 700; font-size: var(--t-small); }
.rail__toggle { max-width: var(--max); margin: var(--s4) auto 0; display: block; }

/* -------------------------------- Next steps ------------------------------ */

.steps { padding-top: var(--s7); padding-bottom: var(--s7); border-top: 1px solid var(--line); }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.steps__link {
  display: grid;
  gap: var(--s2);
  padding: var(--s5);
  border: 1px solid var(--line);
  background: var(--bone-raised);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--standard) var(--ease-in-out), transform var(--standard) var(--ease-in-out);
}
.steps__link:hover { border-color: var(--rule-strong); transform: translateY(-2px); }
.steps__label { font-weight: 700; font-size: 1.0625rem; }
.steps__blurb { color: var(--fg-soft); font-size: var(--t-small); }
.steps__action { color: var(--copper-deep); font-weight: 700; font-size: var(--t-small); }
.steps__arrow { display: inline-block; margin-left: 0.4em; transition: transform var(--standard) var(--ease-in-out); }
.steps__link:hover .steps__arrow { transform: translateX(3px); }
.steps__item--lead .steps__link { border-top: 3px solid var(--bottle); }

/* ---------------------------------- Forms --------------------------------- */

.closing { border-top: 1px solid var(--line); }
.closing__grid { display: grid; gap: var(--s7); }
.closing__alt { font-size: var(--t-small); color: var(--fg-soft); margin-top: var(--s4); }

.contact__intro { font-size: var(--t-small); color: var(--fg-soft); }
.contact__list { margin: var(--s4) 0 0; border-top: 1px solid var(--rule-strong); }
.contact__row { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.contact__row dt { font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-soft); font-weight: 700; margin-bottom: 2px; }
.contact__row dd { margin: 0; display: grid; gap: 2px; }
.contact__pending { color: var(--copper-deep); font-weight: 600; }
.contact__value { font-weight: 600; }
.contact__note { font-size: var(--t-small); color: var(--fg-soft); }

.form {
  padding: var(--s5);
  border-top: 3px solid var(--bottle);
  background: var(--bone-raised);
}
.form__intro { font-size: var(--t-small); color: var(--fg-soft); }
.form__preset {
  display: grid;
  gap: 2px;
  margin: var(--s4) 0;
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--copper);
  background: var(--bone-sunk);
  max-width: none;
}
.form__preset-label { font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-soft); font-weight: 700; }
.form__preset-value { font-weight: 700; }
.form__preset-note { font-size: var(--t-small); color: var(--fg-soft); }

.form__grid { display: grid; gap: var(--s4); }
.form__field { margin: 0; display: grid; gap: var(--s2); max-width: none; }
.form__label { font-weight: 700; font-size: var(--t-small); }
.form__opt { font-weight: 400; color: var(--fg-soft); }
.form__control {
  width: 100%;
  min-height: 48px;
  padding: var(--s3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-control);
  background: var(--bone-raised);
  color: var(--ink);
  font: inherit;
  transition: border-color var(--quick) var(--ease-in-out);
}
textarea.form__control { min-height: 7rem; resize: vertical; }
.form__control:hover { border-color: var(--copper); }
.form__hint { font-size: var(--t-small); color: var(--fg-soft); }

.form__consent { margin: var(--s5) 0; display: grid; gap: var(--s4); }
.form__privacy { font-size: var(--t-small); color: var(--fg-soft); margin: 0; }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3);
  align-items: start;
  min-height: 44px;
  padding: var(--s2) 0;
  cursor: pointer;
}
.check__input { position: absolute; opacity: 0; width: 24px; height: 24px; }
.check__box {
  width: 24px; height: 24px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-control);
  background: var(--bone-raised);
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.check__input:checked + .check__box::after {
  content: "";
  width: 12px; height: 7px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg) translate(1px, -2px);
}
.check__input:focus-visible + .check__box {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-halo);
}
.check__label { font-size: var(--t-small); color: var(--fg-soft); }

.form__notconnected {
  margin: var(--s5) 0 var(--s4);
  padding: var(--s3) var(--s4);
  border: 1px dashed var(--copper);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--copper-deep);
  max-width: none;
}
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.form__status { margin: 0; font-size: var(--t-small); color: var(--copper-deep); font-weight: 600; }

/* -------------------------------- Needs / stages -------------------------- */

.needs { margin: var(--s5) 0 var(--s6); }
.needs__set { border: 0; margin: 0; padding: 0; }
.needs__legend { font-weight: 700; font-size: var(--t-small); padding: 0; margin-bottom: var(--s3); }
.needs__options { display: grid; gap: var(--s2); }
.needs__option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  background: var(--bone-raised);
  cursor: pointer;
}
.needs__input { position: absolute; opacity: 0; width: 22px; height: 22px; }
.needs__box {
  width: 22px; height: 22px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-control);
  display: grid; place-items: center;
}
.needs__input:checked + .needs__box::after {
  content: "";
  width: 11px; height: 6px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg) translate(1px, -2px);
}
.needs__input:focus-visible + .needs__box {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-halo);
}
.needs__text { font-size: var(--t-small); font-weight: 600; }
.needs__status { margin: var(--s3) 0 0; font-size: var(--t-small); color: var(--fg-soft); }

.stages { display: grid; gap: var(--s6); }
.stages__progress { margin: 0; font-size: var(--t-small); font-weight: 700; color: var(--copper-deep); }
.stage {
  border: 0;
  border-top: 1px solid var(--rule-strong);
  margin: 0;
  padding: var(--s5) 0 0;
}
.stage[hidden] { display: none; }
.stage__legend { padding: 0; display: grid; gap: 2px; margin-bottom: var(--s4); }
.stage__step { font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-soft); font-weight: 700; }
.stage__title { font-family: var(--font-display); font-size: 1.35rem; }
.stages__nav { display: flex; gap: var(--s4); flex-wrap: wrap; }

.summary {
  margin: var(--s5) 0;
  padding: var(--s5);
  border-left: 3px solid var(--copper);
  background: var(--bone-sunk);
}
.summary__note { font-size: var(--t-small); color: var(--fg-soft); }
.summary__list { margin: var(--s4) 0 0; border-top: 1px solid var(--rule); }
.summary__row {
  display: grid;
  gap: 2px;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
.summary__row dt {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 700;
}
.summary__row dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.summary__edit {
  min-height: 44px;
  padding: var(--s1) var(--s3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--copper-deep);
  font: inherit;
  font-size: var(--t-small);
  font-weight: 700;
  cursor: pointer;
}
.summary__edit:hover { border-color: var(--copper); }

.cards { border: 0; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s3); }
.cards__legend { font-weight: 700; font-size: var(--t-small); padding: 0; margin-bottom: var(--s3); }
.cards__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
  padding: var(--s5);
  border: 1px solid var(--rule-strong);
  background: var(--bone-raised);
  cursor: pointer;
  transition: border-color var(--standard) var(--ease-in-out), background-color var(--standard) var(--ease-in-out);
}
.cards__input { position: absolute; opacity: 0; }
.cards__name { font-weight: 700; display: block; }
.cards__name::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: var(--s3);
  border: 2px solid var(--ink);
  border-radius: 50%;
  vertical-align: baseline;
}
.cards__detail { display: block; font-size: var(--t-small); color: var(--fg-soft); }
.cards__card:has(.cards__input:checked) { border-color: var(--bottle); background: var(--bone-sunk); }
.cards__card:has(.cards__input:checked) .cards__name::before { background: var(--bottle); box-shadow: inset 0 0 0 2px var(--bone-raised); }
.cards__card:has(.cards__input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-halo);
}
.cards__card--conditional { border-style: dashed; }

/* --------------------------------- Search --------------------------------- */

.search {
  padding: var(--s5);
  border-top: 3px solid var(--bottle);
  background: var(--bone-raised);
  display: grid;
  gap: var(--s5);
}
.search__mode { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
.search__legend { font-weight: 700; font-size: var(--t-small); padding: 0; width: 100%; margin-bottom: var(--s3); }
.search__radio { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: var(--t-small); }
.search__flag { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--copper); }
.search__grid { display: grid; gap: var(--s4); }
.search__field { margin: 0; display: grid; gap: var(--s2); max-width: none; }
.search__actions { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: start; }
.search__toggle { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; font-size: var(--t-small); }
.search__maplink { margin: 0; display: grid; justify-items: start; gap: var(--s2); flex: 0 1 22rem; }
.search__note { font-size: var(--t-small); color: var(--fg-soft); }

/* Native controls, sized so the box itself is reachable rather than relying on
   the label row alone. */
.search__toggle input[type="checkbox"],
.search__radio input[type="radio"] {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--copper);
  flex: 0 0 auto;
}

.results { margin-top: var(--s6); }
.results__summary { font-weight: 700; }
.results__grid { display: grid; gap: var(--s5); margin-top: var(--s5); }
.results__empty { padding: var(--s5); border: 1px dashed var(--copper); }
.results__empty .btn { margin-right: var(--s4); }

.chips { margin: var(--s4) 0; }
.chips__title {
  margin: 0 0 var(--s2);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--fg-soft);
}
.chips__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-control);
  background: var(--bone-raised);
  color: inherit;
  font: inherit;
  font-size: var(--t-small);
  cursor: pointer;
  transition: border-color var(--quick) var(--ease-in-out);
}
.chip:hover { border-color: var(--copper); }
.chip__x { color: var(--copper); font-size: 1.1rem; line-height: 1; }

.prop {
  border: 1px solid var(--line);
  background: var(--bone-raised);
  display: grid;
}
.prop[hidden] { display: none; }
.prop__media { padding: var(--s3) var(--s3) 0; }
.prop__body { padding: var(--s4); display: grid; gap: var(--s2); }
/* Removed 8 August 2026 with the markup they styled: .prop__flag (the
   demonstration badge), .results__map and .results__mapnote (the fake map
   placeholder) and .results__nojs. */
.prop__title { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.prop__link { text-decoration: none; border-bottom: 1px solid var(--copper); }
.prop__area { margin: 0; font-size: var(--t-small); color: var(--fg-soft); }
.prop__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s4); font-size: var(--t-small); }
.prop__rent { margin: 0; font-weight: 700; color: var(--copper-deep); }
.prop__rent--lead { font-size: 1.15rem; }
.prop__status { margin: 0; font-size: var(--t-small); color: var(--fg-soft); }

.demo-banner {
  background: var(--bottle-deep);
  color: var(--on-deep);
  padding: var(--s4) var(--inset);
}
.demo-banner p { margin: 0 auto; max-width: var(--max); font-size: var(--t-small); }

/* ---------------------------------- EPC ----------------------------------- */

.epc { list-style: none; margin: var(--s5) 0; padding: 0; display: grid; gap: 4px; max-width: 44rem; }
.epc__band {
  display: grid;
  grid-template-columns: 3rem 5rem 1fr;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: var(--s2) var(--s4);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
}
.epc__letter { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.epc__range { font-size: var(--t-small); font-weight: 700; }
.epc__meaning { font-size: var(--t-small); }

/* The minimum-standard band. The rule and the written marker below carry the
   meaning; the band colour is the same standard EPC colour as every other
   band, so nothing here depends on being able to see it. */
.epc__band--min {
  grid-template-rows: auto auto;
  border-color: var(--bottle);
  border-left-width: 4px;
}

.epc__mark {
  grid-column: 1 / -1;
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid color-mix(in srgb, var(--bottle) 35%, transparent);
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.45;
  color: var(--bottle-deep);
}

/* 320px: the three columns still fit, but only once the fixed pair narrows. */
@media (max-width: 26em) {
  .epc__band { grid-template-columns: 2.25rem 4.25rem minmax(0, 1fr); gap: var(--s2); padding: var(--s2) var(--s3); }
  .epc__letter { font-size: 1.25rem; }
}

.epc__band--a { background: #cfe4d2; }
.epc__band--b { background: #d9e7cd; }
.epc__band--c { background: #e6ecc8; }
.epc__band--d { background: #f2eec6; }
.epc__band--e { background: #f4e3c4; }
.epc__band--f { background: #f2d6c2; }
.epc__band--g { background: #eec8c2; }

/* ------------------------------ Breadcrumbs ------------------------------- */

.crumbs {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s4) var(--inset) 0;
}
.crumbs__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  font-size: var(--t-small);
}
.crumbs__item + .crumbs__item::before { content: "/"; margin-right: var(--s3); color: var(--fg-soft); }
.crumbs__link { text-decoration: none; border-bottom: 1px solid var(--rule); }
.crumbs__current { color: var(--fg-soft); }

/* --------------------------------- FAQs ----------------------------------- */

.faq { display: grid; border-top: 1px solid var(--rule-strong); max-width: 72ch; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 56px;
  padding: var(--s3) 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; font-size: 1.3rem; color: var(--copper); }
.faq__item[open] .faq__q::after { content: "–"; }
.faq__a { padding-bottom: var(--s4); color: var(--fg-soft); }
.faq__a p { margin: 0; }

/* ------------------------------ Receptionist ------------------------------ */

.reception {
  background: var(--bottle);
  color: var(--on-deep);
  --fg: var(--on-deep);
  --fg-soft: var(--on-deep-soft);
  --focus-ring: var(--on-deep);
  --focus-halo: rgba(239, 194, 154, 0.35);
  --line: var(--rule-on-deep);
}
.reception__eyebrow {
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--sand);
}
.reception .h-section { color: var(--on-deep); }
.reception__notice { color: var(--on-deep-soft); max-width: 62ch; }
.reception__inner { display: grid; gap: var(--s6); align-items: start; }
.reception__intro { min-width: 0; }
.reception__routes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-on-deep); min-width: 0; }
.reception__route { border-bottom: 1px solid var(--rule-on-deep); }
.reception__summary {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: center;
  gap: var(--s4);
  min-height: 60px;
  padding: var(--s3) 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
.reception__summary::-webkit-details-marker { display: none; }
.reception__index { font-family: var(--font-display); color: var(--sand); }
.reception__body { padding: 0 0 var(--s5) 3.4rem; display: grid; gap: var(--s3); }
.reception__outcome { margin: 0; color: var(--on-deep-soft); }
.reception__safety {
  margin: 0;
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--sand);
  color: var(--sand);
  font-size: var(--t-small);
}
.reception__flag { margin: 0; font-size: var(--t-small); color: var(--sand); }
.reception__asks { margin: 0; font-size: var(--t-small); color: var(--on-deep-soft); }
.reception__questions { margin: 0; padding-left: 1.1em; color: var(--on-deep); font-size: var(--t-small); }
.reception__questions li { margin-bottom: var(--s1); }
.reception__end { margin: var(--s2) 0 0; font-size: var(--t-small); color: var(--on-deep-soft); }

/* --------------------------------- Launcher ------------------------------- */

/* Without the enhancement layer the launcher is an ordinary link at the end of
   the document, so it can never sit on top of anything. */
.launcher {
  position: relative;
  display: grid;
  gap: 2px;
  min-height: 56px;
  padding: var(--s3) var(--s5);
  margin: 0;
  background: var(--bottle-deep);
  color: var(--on-deep);
  text-decoration: none;
  border: 1px solid var(--bottle-deep);
  border-radius: var(--radius-control);
  overflow: hidden;
}
[data-enhanced] .launcher {
  position: fixed;
  right: max(var(--s4), env(safe-area-inset-right));
  bottom: max(var(--s4), env(safe-area-inset-bottom));
  z-index: 40;
  max-width: calc(100vw - 2 * var(--s4));
  transition: opacity var(--standard) var(--ease-in-out), transform var(--standard) var(--ease-in-out);
}
/* Stowed whenever it would otherwise cover an action, a control or a consent row. */
[data-enhanced] .launcher.is-stowed {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}
.launcher__glint {
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(239, 194, 154, 0.28), transparent);
  transform: translateX(-100%);
}
.launcher[data-glint="on"] .launcher__glint { animation: glint 450ms var(--ease-in-out) 1; }
@keyframes glint {
  from { transform: translateX(-100%); }
  to { transform: translateX(520%); }
}
.launcher__glyph { display: none; }
.launcher__glyph svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.launcher__label { display: grid; gap: 2px; }
.launcher__text { font-weight: 700; font-size: var(--t-small); }
.launcher__sub { font-size: 0.6875rem; color: var(--on-deep-soft); letter-spacing: 0.06em; }
.launcher:focus-visible { outline-color: var(--on-deep); }

/* ------------------------- Receptionist sheet ----------------------------- */

.sheet {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(80vh, 40rem);
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-mount) var(--radius-mount) 0 0;
  background: var(--bottle);
  color: var(--on-deep);
  --fg: var(--on-deep);
  --fg-soft: var(--on-deep-soft);
  --focus-ring: var(--on-deep);
  --focus-halo: rgba(239, 194, 154, 0.4);
  overflow: auto;
  overscroll-behavior: contain;
}
.sheet::backdrop { background: rgba(11, 35, 28, 0.62); }
.sheet__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5) var(--s5) var(--s3);
  background: var(--bottle);
  border-bottom: 1px solid var(--rule-on-deep);
}
.sheet__title { margin: 0; font-family: var(--font-display); font-size: 1.5rem; color: var(--on-deep); }
.sheet__close {
  min-width: 44px; min-height: 44px;
  border: 1px solid var(--rule-on-deep);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--on-deep);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.sheet__close:hover { border-color: var(--sand); color: var(--sand); }
.sheet__notice { margin: var(--s4) var(--s5) 0; font-size: var(--t-small); color: var(--on-deep-soft); }
.sheet__routes { list-style: none; margin: var(--s4) 0 0; padding: 0 var(--s5); display: grid; gap: var(--s2); }
.sheet__route {
  width: 100%;
  min-height: 60px;
  padding: var(--s3) var(--s4);
  display: grid;
  gap: 2px;
  text-align: left;
  border: 1px solid var(--rule-on-deep);
  border-radius: var(--radius-control);
  background: rgba(246, 244, 239, 0.05);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--quick) var(--ease-in-out), background-color var(--quick) var(--ease-in-out);
}
.sheet__route:hover { border-color: var(--sand); background: rgba(246, 244, 239, 0.1); }
.sheet__route-name { font-weight: 700; }
.sheet__route-detail { font-size: var(--t-small); color: var(--on-deep-soft); }
.sheet__demo {
  margin: var(--s5);
  padding: var(--s3) var(--s4);
  border: 1px dashed var(--sand);
  color: var(--sand);
  font-size: var(--t-small);
}

/* ---------------------------------- Footer -------------------------------- */

.site-foot {
  background: var(--bottle-deep);
  color: var(--on-deep);
  --fg: var(--on-deep);
  --fg-soft: var(--on-deep-soft);
  --focus-ring: var(--on-deep);
  --focus-halo: rgba(239, 194, 154, 0.35);
  /* Extra room at the foot so the fixed launcher never sits over the last links. */
  padding: var(--s8) var(--inset) calc(var(--s6) + 5rem);
  margin-top: var(--s8);
}
@media (min-width: 64em) {
  .site-foot { padding-bottom: var(--s6); }
}
.site-foot__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: var(--s7);
}
.site-foot__mark { height: 62px; width: auto; display: block; }
.site-foot__position { margin-top: var(--s4); color: var(--on-deep-soft); font-size: var(--t-small); max-width: 34ch; }
.site-foot__nav { display: grid; gap: var(--s6); }
.site-foot__heading {
  margin: 0 0 var(--s3);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--sand);
}
.site-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.site-foot__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-size: var(--t-small);
  border-bottom: 1px solid transparent;
}
.site-foot__link:hover { border-color: var(--sand); }
.site-foot__legal p { font-size: var(--t-small); margin-bottom: var(--s2); max-width: 46ch; }
.site-foot__caution { color: var(--on-deep-soft); }
.site-foot__legal .link { color: var(--sand); }
.site-foot__stamp {
  max-width: var(--max);
  margin: var(--s7) auto 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-on-deep);
  font-size: var(--t-small);
  color: var(--on-deep-soft);
}

/* ================================ Responsive ============================== */

@container (min-width: 26rem) {
  .mount__row { grid-template-columns: 9rem 1fr; gap: var(--s3); }
  .mount__crop { display: block; }
  .mount__title { font-size: 1.3rem; }
}

/* From tablet upward the composition becomes three panels: warm image, film,
   warm image — with the copy centred inside the film. */
@media (min-width: 48em) {
  .hero--stage {
    grid-template-columns: 14% 72% 14%;
    grid-template-rows: 1fr auto;
    min-height: var(--stage-h);
  }
  .hero__panel { grid-column: 2; padding: var(--s7) var(--s5); }
  .dock { grid-column: 1 / -1; grid-row: 2; }

  .mount__scene { aspect-ratio: var(--mount-ar, 1.5); }
  .split-two { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .results__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .needs__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__field--wide { grid-column: 1 / -1; }
  .search__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts__row { grid-template-columns: 14rem 1fr; gap: var(--s4); }
  .site-foot__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .evidence__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process__list { gap: var(--s6); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .nav--wide { display: block; }
  .menu { display: none; }
  .site-head__cta { display: inline-flex; margin-left: auto; }
  .site-head__inner { padding-block: var(--s2); min-height: 76px; }
  .brand__mark { height: 52px; }

  .hero { grid-template-columns: 1.05fr 1fr; align-items: center; gap: var(--s8); }

  /* Film hero: the copy holds the dark left, the status plate moves out of the
     reading path, and the dock becomes four equal ruled zones. */
  /* `.hero` turns into a two-column grid with a gap at this width for the other
     heroes. The stage is a single column that owns its own spacing, so it has
     to say so after that rule rather than before it. */
  .hero--stage {
    grid-template-columns: 19% 62% 19%;
    grid-template-rows: 1fr auto;
    align-items: stretch;
    gap: 0;
  }
  .hero__panel { padding: var(--s7) var(--s6); }

  .dock__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dock__item { border-top: 0; border-left: 1px solid rgba(246, 244, 239, 0.14); }
  .dock__item:first-child { border-left: 0; }
  .dock__link { min-height: 104px; padding: var(--s4) var(--s5); }

  .hero--service .hero__inner { grid-template-columns: 1.15fr 0.85fr; align-items: start; gap: clamp(2.5rem, 4vw, 4.5rem); }
  .chooser { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); }
  .hero__inner--search { max-width: var(--max); }
  .hero__inner--person { grid-template-columns: 0.8fr 1.2fr; gap: clamp(2.5rem, 4vw, 4.5rem); }
  .search--hero .search__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .page-open { grid-template-columns: 1.1fr 0.9fr; align-items: start; gap: var(--s8); }
  .page-open--search { grid-template-columns: 1fr 1.2fr; }
  .band__split { grid-template-columns: 1.25fr 0.75fr; gap: var(--s8); }
  .band__split--reverse .band__minor { order: -1; }
  .band__split--reverse { grid-template-columns: 0.75fr 1.25fr; }
  .closing__grid { grid-template-columns: 0.85fr 1.15fr; }
  .results__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .search__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .package-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .evidence__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps__item--lead { grid-row: span 1; }
  .reception__inner { grid-template-columns: 0.85fr 1.15fr; gap: var(--s8); }
  .site-foot__inner { grid-template-columns: 0.8fr 1.6fr 1fr; }
  .site-foot__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .process__line { left: 11px; right: 11px; top: 12px; bottom: auto; height: 1px; width: auto; transform-origin: left center; }
  .process__step::before { top: 8px; }
  .process__step { padding-left: var(--s5); padding-top: var(--s5); }
  .process__step::before { top: 4px; left: 0; }
}


/* Wider than 2:1 — ultra-wide desktops and short wide laptops. The frame stops
   growing with the viewport and contains the film at its own ratio; the space
   either side becomes the composed atmosphere rather than black bars. */
@media (min-aspect-ratio: 2/1) and (min-width: 48em) {
  .dock__list {
    max-width: none;
    padding-inline: clamp(2rem, 5vw, 7rem);
  }

  /* The copy sits over the atmosphere at these proportions, so the veil no
     longer needs to fight the film for the left third. */
  .stage__veil {
    background:
      linear-gradient(
        96deg,
        rgba(7, 26, 20, 0.9) 0%,
        rgba(11, 35, 28, 0.7) 22%,
        rgba(15, 44, 34, 0.36) 42%,
        rgba(11, 35, 28, 0.12) 62%,
        rgba(11, 35, 28, 0) 82%
      ),
      linear-gradient(180deg, rgba(6, 18, 14, 0.42) 0%, rgba(6, 18, 14, 0) 42%, rgba(6, 18, 14, 0.72) 100%);
  }
}

/* Very large displays: let the stage grow so the contained film keeps presence
   without ever being asked for more pixels than were encoded. */
@media (min-width: 120em) {
  .hero--stage { --stage-h: clamp(37rem, calc(72svh - 2.5rem), 51rem); }
}

/* Short laptop screens. The hero still opens the page, but it gives way rather
   than pushing its own route dock off the bottom of the viewport. */
@media (min-width: 48em) and (max-height: 50rem) {
  .hero--stage { --stage-h: auto; min-height: 0; }
  .hero--stage .h-hero { font-size: clamp(2.2rem, 1rem + 3.4vh, 3.4rem); }
  .hero__panel { padding-block: var(--s5); }
  .hero--stage .hero__actions { margin-top: var(--s4); }
  .hero__title { margin-bottom: var(--s4); }
  .hero__proof { margin-top: var(--s4); }
  .dock__link { min-height: 84px; padding-block: var(--s3); }
}

/* Below the desktop breakpoint the curtains come off entirely and the dedicated
   portrait crop carries the hero, with the copy centred beneath it. */
@media (max-width: 47.99em) {
  .hero--stage { --film-ar: 0.8; }
  /* The copy sits beneath the film here, so the film keeps its own light: only
     a soft foot to carry it into the panel below. */
  .hero__panel { grid-row: 2; padding: var(--s6) var(--inset) var(--s7); }
  .hero--stage .h-hero { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 2.8rem); }
  .hero--stage .hero__lede { font-size: 1.0625rem; }
  .hero--stage .hero__actions { gap: var(--s3); }
  .hero--stage .hero__actions .btn { flex: 1 1 100%; }
  .hero__eyebrow { font-size: 0.8125rem; padding: 5px 10px; letter-spacing: 0.08em; }
  .dock { grid-row: 3; }
  .dock__action { font-size: 1.0625rem; }
  .dock__link { min-height: 72px; padding: var(--s3); }
}


/* Review wall responsive: three columns, two, then one. */
@media (min-width: 48em) {
  .rwall__window { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rwall__col--2 { display: block; }
}
@media (min-width: 64em) {
  .rwall__inner { grid-template-columns: minmax(0, 30fr) minmax(0, 66fr); gap: var(--s8); }
  /* Large screens only, and only within its own chapter. */
  .rwall__anchor { position: sticky; top: var(--s6); }
}
/* The third column waits until there is room for it to stay readable, so 1024
   keeps two generous columns rather than three cramped ones. */
@media (min-width: 75em) {
  .rwall__window { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rwall__col--3 { display: block; }
}
@media (max-width: 47.99em) {
  [data-enhanced][data-motion="full"] .rwall__window { height: clamp(30rem, 84vw, 34rem); }
  .score { padding: var(--s4); }
  .score__source {
  display: grid;
  gap: 1px;
  margin: 0 0 var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule-on-deep);
}
.score__source-label {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--on-deep-soft);
}
.score__source-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--on-deep);
}
.score__value { font-size: 2.75rem; }
  /* A compact horizontal score panel above the wall. */
  .score__stars { display: inline-block; margin-left: var(--s3); }
  .rcard { padding: var(--s4); }
}

/* Narrow screens: tables stack into labelled records. */
@media (max-width: 47.99em) {
  .matrix,
  .matrix thead,
  .matrix tbody,
  .matrix tr,
  .matrix th,
  .matrix td { display: block; width: 100%; }
  .matrix thead { display: none; }
  .matrix tbody tr {
    border-top: 1px solid var(--rule-strong);
    padding: var(--s3) 0;
  }
  .matrix tbody th { padding: 0 0 var(--s2); }
  .matrix tbody td { padding: 2px 0; border: 0; }
  .matrix tbody td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: var(--ink);
  }
  .scope__row,
  .package__fields > div { grid-template-columns: 1fr; }
  .scope__state,
  .package__fields dd { text-align: left; }
}

/* 200% zoom and very narrow viewports keep everything in one column. */
@media (max-width: 22.5em) {
  :root { --inset: 1rem; }
  .brand__mark { height: 38px; }
  .routes__link { grid-template-columns: 2rem 1fr; }
  .routes__cue { display: none; }
}

/* Below the desktop breakpoint the launcher becomes a 56px control so it takes
   as little of a small viewport as possible, and it stows over any text. */
@media (max-width: 63.99em) {
  [data-enhanced] .launcher {
    width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 0;
    place-items: center;
    border-radius: 50%;
    border-color: var(--sand);
  }
  [data-enhanced] .launcher .launcher__glyph { display: grid; place-items: center; color: var(--sand); }
  [data-enhanced] .launcher .launcher__label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* =============================== Motion modes ============================= */

/* One-time entrances only run once the enhancement layer marks the document. */
[data-enhanced] [data-reveal="headline"] span {
  display: block;
  opacity: 0;
  transform: translateY(0.4em);
}
[data-enhanced] [data-reveal="headline"].is-in span {
  opacity: 1;
  transform: none;
  transition: opacity var(--compose) var(--ease-arrive), transform var(--compose) var(--ease-arrive);
}
[data-enhanced] [data-reveal="headline"].is-in span:nth-child(2) { transition-delay: 60ms; }

/* The hero settles as one composed group — eyebrow, headline, lede, actions,
   proof link — and the dock follows it once. Everything resolves inside the
   first second, with no overshoot and nothing that replays. */
[data-enhanced] [data-reveal="hero"] > *,
[data-enhanced] [data-reveal="hero-copy"] > * {
  opacity: 0;
  transform: translateY(10px);
}
/* The stage hero opens with its own CSS sequence below, so the JavaScript
   reveal must not hold its contents hidden as well. */
[data-enhanced] .hero--stage [data-reveal="hero"] > *,
[data-enhanced] .hero--stage [data-reveal="hero-copy"] > *,
[data-enhanced] .hero--stage [data-reveal="headline"] span,
[data-enhanced] .hero--stage [data-reveal="dock"] {
  opacity: 1;
  transform: none;
}
[data-enhanced] [data-reveal="hero"].is-in > *,
[data-enhanced] [data-reveal="hero-copy"].is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--ease-arrive), transform 420ms var(--ease-arrive);
}
[data-enhanced] [data-reveal="hero"].is-in > *:nth-child(2) { transition-delay: 70ms; }
[data-enhanced] [data-reveal="hero-copy"].is-in > *:nth-child(1) { transition-delay: 140ms; }
[data-enhanced] [data-reveal="hero-copy"].is-in > *:nth-child(2) { transition-delay: 200ms; }
[data-enhanced] [data-reveal="hero-copy"].is-in > *:nth-child(3) { transition-delay: 250ms; }

/* Journey cards and editorial panels: one reveal each, never repeated. */
[data-enhanced] .gallery .gcard { opacity: 0; transform: translateY(14px); }
[data-enhanced] .gallery.is-in .gcard {
  opacity: 1;
  transform: none;
  transition: opacity 300ms var(--ease-arrive), transform 300ms var(--ease-arrive);
}
[data-enhanced] .gallery.is-in .gcard:nth-child(2) { transition-delay: 50ms; }
[data-enhanced] .gallery.is-in .gcard:nth-child(3) { transition-delay: 100ms; }
[data-enhanced] .gallery.is-in .gcard:nth-child(4) { transition-delay: 100ms; }

[data-enhanced] [data-reveal="card"] {
  opacity: 0;
  transform: translateY(12px);
}
[data-enhanced] [data-reveal="card"].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--compose) var(--ease-arrive), transform var(--compose) var(--ease-arrive);
}

/* Sales page: decision cards and journey stages. A tighter 260ms entrance
   than [data-reveal="card"]'s 480ms — small elements settling in a row read
   as sluggish at the larger duration — with a short per-item stagger driven
   by the --stage-index custom property set inline on each journey stage. */
[data-enhanced] [data-reveal="stage"] {
  opacity: 0;
  transform: translateY(10px);
}
[data-enhanced] [data-reveal="stage"].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 240ms var(--ease-arrive), transform 240ms var(--ease-arrive);
  transition-delay: calc(var(--stage-index, 0) * 45ms);
}

/* A single connecting rule that draws itself once. */
[data-enhanced] [data-reveal="draw"] { transform: scaleX(0); }
[data-enhanced] [data-reveal="draw"].is-in {
  transform: scaleX(1);
  transition: transform var(--slow) var(--ease-arrive);
}

[data-enhanced] [data-reveal="dock"] {
  opacity: 0;
  transform: translateY(14px);
}
[data-enhanced] [data-reveal="dock"].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--ease-arrive) 300ms, transform 420ms var(--ease-arrive) 300ms;
}

[data-enhanced] .chapter__rule { transform: scaleX(0); }
[data-enhanced] .chapter.is-in .chapter__rule {
  transform: scaleX(1);
  transition: transform var(--compose) var(--ease-arrive);
}

[data-enhanced] [data-reveal="mount"] { clip-path: inset(0 0 12% 0); opacity: 0.001; }
[data-enhanced] [data-reveal="mount"].is-in {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition: clip-path var(--slow) var(--ease-arrive), opacity var(--compose) var(--ease-arrive);
}

[data-enhanced] .process__line { transform: scaleY(0); }
[data-enhanced] .process.is-in .process__line {
  transform: scaleY(1);
  transition: transform var(--compose) var(--ease-arrive);
}
@media (min-width: 64em) {
  [data-enhanced] .process__line { transform: scaleX(0); }
  [data-enhanced] .process.is-in .process__line { transform: scaleX(1); }
}

/* Scoped to [data-epc], which the EPC guidance page sets again as of the
   10 August 2026 premium pass. The scoping matters: an unscoped opacity: 0
   here once meant the whole A-G scale was invisible unless an intersection
   observer happened to fire, so the entrance only ever runs where the
   attribute is deliberately present, and reveal.mjs resolves anything
   already on screen at first paint immediately. */
[data-enhanced] .epc[data-epc] .epc__band { opacity: 0; transform: translateX(-6px); }
[data-enhanced] .epc[data-epc].is-in .epc__band {
  opacity: 1;
  transform: none;
  transition: opacity var(--standard) var(--ease-arrive), transform var(--standard) var(--ease-arrive);
  transition-delay: calc(var(--epc-index) * 45ms);
}

/* Reduced motion and Save-Data: every final state renders immediately. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-enhanced] [data-reveal="headline"] span,
  [data-enhanced] [data-reveal="hero"] > *,
  [data-enhanced] [data-reveal="hero-copy"] > *,
  [data-enhanced] [data-reveal="card"],
  [data-enhanced] [data-reveal="stage"],
  [data-enhanced] [data-reveal="dock"],
  [data-enhanced] .epc__band { opacity: 1; transform: none; }
  [data-enhanced] .chapter__rule,
  [data-enhanced] [data-reveal="draw"],
  [data-enhanced] .process__line { transform: none; }
  [data-enhanced] [data-reveal="mount"] { clip-path: none; opacity: 1; }
}

/* Save-Data parity. The JavaScript layer reads navigator.connection.saveData,
   which is not available in every engine, so the media query carries the same
   rule for engines that expose the preference instead. */
@media (prefers-reduced-data: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-enhanced] [data-reveal="headline"] span,
  [data-enhanced] [data-reveal="hero"] > *,
  [data-enhanced] [data-reveal="hero-copy"] > *,
  [data-enhanced] [data-reveal="card"],
  [data-enhanced] [data-reveal="stage"],
  [data-enhanced] [data-reveal="dock"],
  [data-enhanced] .epc__band { opacity: 1; transform: none; }
  [data-enhanced] .chapter__rule,
  [data-enhanced] [data-reveal="draw"],
  [data-enhanced] .process__line { transform: none; }
  [data-enhanced] [data-reveal="mount"] { clip-path: none; opacity: 1; }
}

[data-motion="static"] .gallery .gcard { opacity: 1 !important; transform: none !important; }
[data-motion="static"] .gcard__link:hover,
[data-motion="static"] .gcard__link:focus-visible { transform: none !important; }
[data-motion="static"] .gcard__link:hover .gcard__cta-label,
[data-motion="static"] .gcard__link:focus-visible .gcard__cta-label { background-size: 100% 2px; }
[data-motion="static"] .gcard__link:hover .gcard__media img,
[data-motion="static"] .gcard__link:focus-visible .gcard__media img { transform: none !important; }
[data-motion="static"] .gcard__link:hover .gcard__arrow,
[data-motion="static"] .gcard__link:focus-visible .gcard__arrow { transform: none !important; }

[data-motion="static"] [data-reveal="headline"] span,
[data-motion="static"] [data-reveal="hero"] > *,
[data-motion="static"] [data-reveal="hero-copy"] > *,
[data-motion="static"] [data-reveal="card"],
[data-motion="static"] [data-reveal="stage"],
[data-motion="static"] [data-reveal="dock"],
[data-motion="static"] .epc__band { opacity: 1 !important; transform: none !important; }
[data-motion="static"] .chapter__rule,
[data-motion="static"] [data-reveal="draw"],
[data-motion="static"] .process__line { transform: none !important; }
[data-motion="static"] [data-reveal="mount"] { clip-path: none !important; opacity: 1 !important; }


/* ======================= The homepage opening ============================= *
   One sequence, once, entirely in CSS — so a visitor who prefers reduced
   motion, or whose JavaScript never runs, is handed the finished composition
   instead of a hidden one. Transforms, clipping and opacity only; no width
   animation, no blur animation, no overshoot, and nothing repeats.

   Header 0–420ms · curtains 180–880ms · film 520–1020ms · headline 760–1280ms
   · copy 980–1400ms · dock 1120–1540ms.                                     */

@media (prefers-reduced-motion: no-preference) {
  .page--home .hero__title {
    animation: mask-up 520ms var(--ease-arrive) 760ms both;
  }
  .page--home .hero__copy {
    animation: settle 420ms var(--ease-arrive) 980ms both;
  }
  .page--home .dock {
    animation: dock-rise 540ms var(--ease-arrive) 1180ms both;
  }
}

@keyframes __dead_curtain_left {
  from { transform: translate3d(var(--curtain-travel), -10px, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes __dead_curtain_right {
  from { transform: translate3d(calc(var(--curtain-travel) * -1), -10px, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes stage-open {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mask-up {
  from { clip-path: inset(0 0 100% 0); opacity: 0; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes settle {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes dock-rise {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: none; }
}

/* Save-Data gets the finished composition too. */
@media (prefers-reduced-data: reduce) {
  .page--home .stage__curtain--left,
  .page--home .stage__curtain--right,
  .page--home .stage__centre,
  .page--home .hero__title,
  .page--home .hero__copy,
  .page--home .dock { animation: none !important; }
}
/* And so does anyone the enhancement layer has put into static mode. */
[data-curtains="scroll"] .stage__curtain--left,

/* Velocity-linked edge softness, driven by a single custom property that the
   controller sets. Zero at rest, and never applied to anything but the
   photographs themselves. */
@media (hover: none), (prefers-reduced-motion: reduce) {
}

[data-motion="static"] .stage__curtain--left,
[data-motion="static"] .stage__curtain--right,
[data-motion="static"] .stage__centre,
[data-motion="static"] .hero__title,
[data-motion="static"] .hero__copy,
[data-motion="static"] .dock { animation: none !important; }

/* ================================== Print ================================= */

.printmark { display: none; }

@media print {
  .site-head__band,
  .launcher,
  .rail,
  .reception,
  .steps,
  .closing,
  .form__actions,
  .needs,
  .chips,
  .mount,
  .stage__atmos,
  .stage__veil,
  .stage__grade,
  .menu { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }

  /* On paper the hero is its words and its four routes, not a film. */
  .hero--stage {
    min-height: 0 !important;
    background: #fff !important;
    color: #000 !important;
  }
  .__unused,
  .hero--stage .hero__lede,
  .dock__action { color: #000 !important; text-shadow: none !important; }
  .hero__eyebrow {
    background: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
  }
  .dock__audience,
  .dock__cue { color: #000 !important; }
  .dock { background: #fff !important; border-top: 1px solid #000; }
  .dock__link { color: #000 !important; min-height: 0 !important; }
  .dock__flag { color: #000 !important; border-color: #000 !important; }
  .site-foot { background: #fff; color: #000; }
  .faq__item > .faq__a { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  /* The schedule keeps its table shape on paper and repeats its headers, whatever
     the paper width would do to the screen breakpoints. */
  .matrix,
  .matrix thead,
  .matrix tbody,
  .matrix tr,
  .matrix th,
  .matrix td { display: revert !important; width: auto !important; }
  .matrix { width: 100% !important; border-collapse: collapse; }
  .matrix thead { display: table-header-group !important; }
  .matrix tr { page-break-inside: avoid; }
  .matrix tbody td[data-label]::before { content: none !important; }

  .group--dim { opacity: 1 !important; }
  .package, .panel, .pending, .plate { break-inside: avoid; }

  /* Identity, version and review date travel with any printed page. */
  .printmark {
    display: block !important;
    margin-top: 1.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #000;
    font-size: 9pt;
  }
  .printmark p { margin: 0 0 2px; max-width: none; }
}

/* ============================ Forced colours ============================== */

@media (forced-colors: active) {
  .btn,
  .form__control,
  .check__box,
  .needs__box { border: 1px solid ButtonText; }
  .chapter__rule,
  .process__line { background: CanvasText; }
  .launcher__glint { display: none; }
  /* The film cannot be relied on for contrast in a forced palette, so the dock
     states its own boundaries instead. */
  .dock__item { border-color: CanvasText; }
  .dock__link:hover,
  .dock__link:focus-visible { outline: 2px solid Highlight; }
  .stage__veil,

}


/* Hero typography at the corrected, more cinematic scale. */
.hero--stage .h-hero {
  font-size: clamp(2.6rem, 4.6vw, 5.25rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero--stage .hero__lede {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  line-height: 1.55;
  color: rgba(250, 248, 244, 0.96);
  max-width: 52ch;
  margin-inline: auto;
}
.hero--stage .hero__actions { justify-content: center; }
.hero--stage .link { color: var(--sand); }

/* The dock overlaps the film and is separated by a copper hairline, not a glow. */
.hero--stage .dock {
  position: relative;
  z-index: 4;
  margin-top: -36px;
  border-top: 1px solid rgba(168, 124, 62, 0.6);
  box-shadow: none;
}
.hero--stage .dock::before { display: none; }


/* Hero action group — one baseline, one weight, premium restraint. */
.hero--stage .hero__actions {
  gap: var(--s3);
  margin-top: var(--s5);
  align-items: stretch;
}
.hero--stage .hero__actions .btn {
  min-height: 54px;
  padding-inline: var(--s6);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  border-radius: 2px;
}
.hero--stage .btn--gold {
  --btn-fill: var(--sand);
  --btn-fg: #14261d;
  border-color: var(--sand);
  font-weight: 700;
}
.hero--stage .btn--gold:hover::after { box-shadow: none; }
.hero--stage .btn--gold:hover::before { transform: none; }
.hero--stage .btn--gold:hover { background: rgba(244, 210, 178, 0.12); }
.hero--stage .btn--outline {
  --btn-fg: #fbf9f5;
  border-color: rgba(251, 249, 245, 0.62);
  background: rgba(10, 14, 11, 0.34);
  font-weight: 600;
}
.hero--stage .btn--outline:hover,
.hero--stage .btn--outline:focus-visible {
  border-color: var(--sand);
  background: rgba(10, 14, 11, 0.52);
  color: var(--sand);
}
.hero--stage .btn--outline:hover::after { box-shadow: none; }
.hero__proof { margin-top: var(--s4); font-size: 0.875rem; }
.hero--stage .hero__proof .link { color: rgba(246, 244, 239, 0.82); }
.hero--stage .hero__proof .link:hover { color: var(--sand); }

/* 6) The dock stops being a heavy green slab: a translucent deep panel that
   lets the film through, with one copper hairline and no glow. */
.hero--stage .dock {
  margin-top: -30px;
  background: linear-gradient(180deg, rgba(9, 24, 19, 0.62) 0%, rgba(7, 20, 16, 0.86) 100%);
  border-top: 1px solid rgba(196, 148, 88, 0.5);
  backdrop-filter: saturate(115%) blur(2px);
}
.hero--stage .dock__link { min-height: 88px; padding-block: var(--s3); }
.hero--stage .dock__action { font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.35rem); }
.hero--stage .dock__audience { font-size: 0.6875rem; letter-spacing: 0.18em; }
.hero--stage .dock__item { border-color: rgba(246, 244, 239, 0.1); }


/* --------------------- Hero side columns: real voices --------------------- *
   The space beside the film is filled with sourced customer language instead of
   black. Decorative duplicates only — the accessible records are in the review
   chapter, so nothing here is tabbable or announced twice.                    */
.heroaside { display: none; }

@media (min-width: 75em) {
  .heroaside {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    width: 18.5%;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(180deg, #0e1a15 0%, #0a1511 100%);
    /* Fades at both ends so the column reads as continuous, not clipped. */
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
  .heroaside--left { left: 0; }
  .heroaside--right { right: 0; }

  .heroaside__track {
    display: grid;
    gap: var(--s4);
    padding: var(--s5) var(--s5) 0;
    animation: wall-travel 62s linear infinite;
  }
  .heroaside__track--reverse { animation-direction: reverse; }

  .heroaside__card {
    display: grid;
    gap: 6px;
    padding: var(--s4);
    border: 1px solid rgba(239, 194, 154, 0.16);
    border-left: 2px solid rgba(196, 148, 88, 0.6);
    background: rgba(246, 244, 239, 0.05);
  }
  .heroaside__stars { color: var(--sand); font-size: 0.75rem; letter-spacing: 0.18em; }
  .heroaside__quote {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(246, 244, 239, 0.86);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .heroaside__name {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(239, 194, 154, 0.8);
  }
}
[data-motion="static"] .heroaside__track { animation: none !important; }

/* The descender on "clearly." was being clipped by a 1.0 line box. */
.hero--stage .h-hero {
  line-height: 1.08;
  padding-bottom: 0.12em;
}
.hero--stage .h-hero span { display: block; overflow: visible; }

/* Less black, less glow: the veil only does the work it has to. */
.stage__veil {
  background:
    radial-gradient(36% 44% at 50% 46%, rgba(8, 11, 9, 0.7) 0%, rgba(8, 11, 9, 0.44) 52%, transparent 100%),
    linear-gradient(180deg, rgba(8, 11, 9, 0.3) 0%, transparent 24%, transparent 66%, rgba(8, 11, 9, 0.42) 100%);
}


/* More air between the rule, the heading and the content it introduces. */
.chapter { margin-bottom: clamp(2rem, 3.4vw, 3.25rem); }
.band__head { margin-bottom: clamp(2.25rem, 3.6vw, 3.5rem); }
.band__head .lede { margin-top: var(--s4); }

.welcome__grid { gap: clamp(2.5rem, 5vw, 5.5rem); align-items: center; }
.welcome__copy .h-section { margin-bottom: var(--s5); }
.welcome__copy p { margin-bottom: var(--s5); }
.welcome__principles { margin-block: var(--s6); }
.welcome__principles li { padding: var(--s4) 0; }
.welcome__actions { margin-top: var(--s6); gap: var(--s4); }

.gallery { margin-top: clamp(2rem, 3vw, 3rem); }
.gallery__aside { margin-top: clamp(1.5rem, 2.4vw, 2.25rem); }

/* The hero copy stack breathes instead of stacking tight against the film. */
.hero--stage .hero__panel { gap: var(--s5); }
.hero--stage .hero__lede { margin-top: var(--s5); }
.hero--stage .hero__actions { margin-top: var(--s6); }
.hero--stage .hero__proof { margin-top: var(--s5); }


/* ---------------- Hero side columns meet the film cleanly ----------------- *
   No black void between the picture and the voices beside it: the film fills
   the space between the two panels exactly, and a single brass keyline does the
   separating — the same joinery detail used elsewhere in the system.         */
@media (min-width: 75em) {
  .stage__film {
    left: 18.5%;
    right: 18.5%;
    max-width: none;
    margin-inline: 0;
  }
  .heroaside--left { border-right: 1px solid rgba(196, 148, 88, 0.62); }
  .heroaside--right { border-left: 1px solid rgba(196, 148, 88, 0.62); }
  /* A soft inner shadow so the panel reads as set back from the film rather
     than butted against it. */
  .heroaside--left::after,
  .heroaside--right::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 26px;
    pointer-events: none;
  }
  .heroaside--left::after { right: 0; background: linear-gradient(90deg, transparent, rgba(4, 8, 6, 0.55)); }
  .heroaside--right::after { left: 0; background: linear-gradient(270deg, transparent, rgba(4, 8, 6, 0.55)); }
}

/* -------------------------- Route dock, corrected ------------------------- *
   Centred on the same grid as the rest of the page, bigger, and unmistakably
   three separate choices rather than one continuous strip.                   */
.hero--stage .dock__list {
  max-width: var(--max);
  margin-inline: auto;
  gap: 1px;
  background: rgba(196, 148, 88, 0.22);
  padding: 0;
}
.hero--stage .dock__item {
  border: 0;
  background: linear-gradient(180deg, rgba(9, 24, 19, 0.82) 0%, rgba(7, 20, 16, 0.94) 100%);
}
.hero--stage .dock__link {
  min-height: 104px;
  padding: var(--s4) var(--s5);
  align-content: center;
  justify-items: start;
  text-align: left;
}
.hero--stage .dock__label { margin-bottom: var(--s2); }
.hero--stage .dock__audience { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--sand); }
.hero--stage .dock__index { font-size: 0.9rem; }
.hero--stage .dock__action { font-size: clamp(1.2rem, 1rem + 0.5vw, 1.55rem); line-height: 1.15; }
.hero--stage .dock__cue { font-size: 1.3rem; }
/* Each choice answers on its own, so it is obvious which one is being chosen. */
.hero--stage .dock__link:hover,
.hero--stage .dock__link:focus-visible { background: rgba(246, 244, 239, 0.09); }
.hero--stage .dock__link::after { height: 2px; background: var(--sand); }

@media (min-width: 48em) {
  .hero--stage .dock__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* --------------------- The dock joins the cream frame -------------------- *
   A deep-green slab under the film, immediately followed by a bright page, was
   the jarring part: two unrelated surfaces meeting at a hard edge. The dock is
   now the same warm parchment as the header, so the film sits inside one
   continuous cream frame — and dark ink on parchment is far easier to read than
   cream text on translucent green over moving video.                        */
.hero--stage .dock {
  margin-top: 0;
  background:
    radial-gradient(circle at 50% -120%, rgb(250 244 233 / 55%), transparent 46%),
    linear-gradient(180deg, #ece1cf 0%, #e2d5bd 100%);
  border-top: 1px solid rgb(143 80 36 / 34%);
  backdrop-filter: none;
  box-shadow: none;
}
.hero--stage .dock__list {
  background: rgb(143 80 36 / 22%);
}
.hero--stage .dock__item {
  background: linear-gradient(180deg, #ece1cf 0%, #e2d5bd 100%);
}
.hero--stage .dock__link { color: var(--ink); }
.hero--stage .dock__audience { color: var(--copper-deep); }
.hero--stage .dock__index { color: var(--copper); }
.hero--stage .dock__action { color: var(--bottle); }
.hero--stage .dock__cue { color: var(--copper); }
.hero--stage .dock__link:hover,
.hero--stage .dock__link:focus-visible { background: rgb(255 252 245 / 62%); }
.hero--stage .dock__link::after { background: var(--copper); }
.hero--stage .dock__link:focus-visible { outline-color: var(--ink); }

/* The film no longer needs a dark lead-in to a dark dock. */
.hero--stage .dock::before { display: none; }

/* The side review panels keep the deep green, so the composition still has a
   dark anchor either side of the film rather than losing it entirely. */


/* ------------------- Hero actions: weight, not decoration ----------------- */
.hero--stage .hero__actions { gap: var(--s4); margin-top: var(--s6); }
.hero--stage .hero__actions .btn {
  min-height: 62px;
  padding-inline: clamp(1.75rem, 2.6vw, 2.75rem);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 1px;
  border-width: 1px;
}
/* Solid sand with a darker edge, so it has an object quality rather than
   reading as a flat coloured rectangle. */
.hero--stage .btn--gold {
  --btn-fill: #f0c9a2;
  --btn-fg: #16281f;
  border-color: #d8a877;
  box-shadow: inset 0 -2px 0 rgba(143, 80, 36, 0.28);
}
.hero--stage .btn--gold:hover,
.hero--stage .btn--gold:focus-visible {
  --btn-fill: #f6d7b6;
  border-color: #c99560;
}
/* The secondary sits on a real surface instead of floating transparent over
   moving footage, so its label stays crisp on every frame. */
.hero--stage .btn--outline {
  --btn-fg: #fdfbf7;
  border-color: rgba(253, 251, 247, 0.72);
  background: rgba(9, 16, 12, 0.46);
  box-shadow: inset 0 -2px 0 rgba(253, 251, 247, 0.18);
}
.hero--stage .btn--outline:hover,
.hero--stage .btn--outline:focus-visible {
  border-color: #f0c9a2;
  color: #f6d7b6;
  background: rgba(9, 16, 12, 0.62);
}

/* The supporting line reads as composed editorial copy, not a caption. */
.hero--stage .hero__lede {
  font-size: clamp(1.15rem, 1rem + 0.55vw, 1.4rem);
  line-height: 1.62;
  letter-spacing: 0.004em;
  color: #f7f3ec;
  max-width: 44ch;
  text-shadow: 0 1px 20px rgba(6, 12, 9, 0.55);
}

/* Dock numerals: larger and legible on parchment rather than pale gold. */
.hero--stage .dock__index {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--copper-deep);
  letter-spacing: 0.02em;
}
.hero--stage .dock__audience {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--copper-deep);
}
.hero--stage .dock__label { gap: var(--s3); align-items: baseline; }


/* ------------------- Reviews: three spacious cards ----------------------- *
   One horizontal rail on a warm surface. Score panel left, readable cards
   right — not three vertical columns of clamped text, and not pure white.   */
.band--reviews {
  background: linear-gradient(180deg, var(--bone-sunk) 0%, var(--bone) 100%);
  color: var(--ink);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --focus-ring: var(--ink);
  --focus-halo: rgba(143, 80, 36, 0.28);
  --line: var(--rule);
  --rule-strong: rgba(17, 26, 22, 0.42);
}
.band--reviews .chapter__index { color: var(--copper); }
.band--reviews .chapter__label { color: var(--ink-soft); }

.rwall__inner { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.rwall__title { color: var(--ink); font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); }
.rwall__eyebrow { color: var(--copper-deep); }
.rwall__lede, .rwall__provenance { display: none; }

.score {
  margin-top: var(--s5);
  padding: var(--s5);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--copper);
  background: var(--bone-raised);
}
.score__source { display: none; }
.score__value { color: var(--ink); font-size: clamp(3rem, 2rem + 2.4vw, 4rem); }
.score__stars { color: var(--copper); }
.score__count { color: var(--ink); }
.score__captured { color: var(--ink-soft); }
.score__note { display: none; }
.rwall__links { margin: var(--s4) 0 0; font-size: var(--t-small); }
.rwall__toggle {
  margin-top: var(--s5);
  border-color: var(--rule-strong);
  color: var(--ink);
}
.rwall__toggle:hover { border-color: var(--copper); color: var(--copper-deep); }

.rwall__window { overflow: hidden; }
.rwall__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--s5);
  width: max-content;
}


.rcard {
  background: var(--bone-raised);
  border: 1px solid rgba(17, 26, 22, 0.14);
  border-radius: 4px;
  padding: var(--s6);
  gap: var(--s4);
  min-height: 19rem;
  align-content: start;
}
.rcard__quote p { font-size: 1.0625rem; line-height: 1.6; }

@media (min-width: 64em) {
  .rwall__inner { grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr); }
}

/* Horizontal travel for the rail, replacing the vertical column motion. */
/* Symmetrical: fading only the right edge left the LEFT edge as a razor cut
   that sawed words in half beside the score panel. */
[data-enhanced][data-motion="full"] .rwall__window { height: auto; mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 88%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 88%, transparent 100%); }
[data-enhanced][data-motion="full"] .rwall__col { height: auto; }
[data-enhanced][data-motion="full"] .rwall__track {
  animation-name: rail-travel;
  padding-bottom: 0;
}
@keyframes rail-travel {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
[data-wall-state="static"] .rwall__track { flex-wrap: wrap; width: auto; }


/* The rail must never widen its own column. */
.rwall__wall, .rwall__window { min-width: 0; max-width: 100%; overflow: hidden; }
.rwall__track > .rcard { flex: 0 0 auto; }

/* Exactly three cards in view on desktop, two at tablet, one on mobile. */
@media (min-width: 64em) {
  .rwall__track > .rcard { width: clamp(15rem, 20vw, 19rem); }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .rwall__track > .rcard { width: clamp(15rem, 34vw, 19rem); }
}
@media (max-width: 47.99em) {
  .rwall__track > .rcard { width: min(20rem, calc(100vw - var(--inset) * 2 - 1rem)); }
  .rcard { min-height: 0; padding: var(--s5); }
}


/* ===================== Hero: cinematic centre, proof wings ================ */

.hero--stage {
  min-height: clamp(640px, calc(100svh - var(--head-h)), 920px);
}
@media (min-width: 64em) and (min-height: 46rem) {
  .hero--stage { min-height: clamp(700px, calc(100svh - var(--head-h)), 920px); }
}
/* The short-laptop reset used to collapse the opening; the clamp above already
   protects short viewports, so it is no longer wanted. */
@media (min-width: 48em) and (max-height: 50rem) {
  .hero--stage { --stage-h: auto; min-height: clamp(640px, calc(100svh - var(--head-h)), 920px); }
}

.wing { display: none; }
.stage__film { left: 0; right: 0; }

@media (min-width: 75em) {
  .stage__film { left: 16%; right: 16%; }
  .wing {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 16%;
    padding: var(--s6) clamp(1rem, 1.6vw, 2rem);
    background: linear-gradient(180deg, #0d2019 0%, #0a1a14 100%);
    pointer-events: none;
    overflow: hidden;
  }
  .wing--left { left: 0; border-right: 1px solid rgba(196, 148, 88, 0.4); }
  .wing--right { right: 0; border-left: 1px solid rgba(196, 148, 88, 0.4); }
}
@media (min-width: 90em) {
  .stage__film { left: 20%; right: 20%; }
  .wing { width: 20%; }
}

/* One quotation at a time, printed on the green — no card, no outline. */
.wing__inner { position: relative; width: 100%; display: grid; }
.wing__quote {
  grid-area: 1 / 1;
  margin: 0;
  display: grid;
  gap: var(--s3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 550ms cubic-bezier(0.4, 0, 0.2, 1), transform 550ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.wing__quote[data-active] { opacity: 1; transform: none; }
.wing__index {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: rgba(246, 244, 239, 0.5);
}
.wing__stars { margin: 0; font-size: 0.8125rem; letter-spacing: 0.24em; color: var(--sand); }
.wing__text { margin: 0; padding-top: var(--s3); border-top: 1px solid rgba(196, 148, 88, 0.42); }
.wing__text p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.2rem);
  line-height: 1.5;
  color: rgba(250, 246, 237, 0.94);
}
.wing__by { display: grid; gap: 2px; }
.wing__name { font-size: 0.8125rem; font-weight: 700; color: rgba(250, 246, 237, 0.92); }
.wing__source { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(239, 194, 154, 0.78); }
[data-motion="static"] .wing__quote { opacity: 0; transform: none; transition: none; }
[data-motion="static"] .wing__quote[data-active] { opacity: 1; }

/* ------------------------- Dock: back to deep green ---------------------- */
.hero--stage .dock {
  background: linear-gradient(180deg, #12362b 0%, #0b231c 100%);
  border-top: 1px solid rgba(196, 148, 88, 0.5);
}
.hero--stage .dock__list { background: rgba(196, 148, 88, 0.24); }
.hero--stage .dock__item { background: linear-gradient(180deg, #12362b 0%, #0b231c 100%); }
.hero--stage .dock__link { color: var(--on-deep); }
.hero--stage .dock__index,
.hero--stage .dock__audience { color: var(--sand); }
.hero--stage .dock__action { color: #faf6ed; }
.hero--stage .dock__cue { color: var(--sand); }
.hero--stage .dock__link:hover,
.hero--stage .dock__link:focus-visible { background: rgba(250, 246, 237, 0.08); }
.hero--stage .dock__link::after { background: var(--sand); }
.hero--stage .dock__link:focus-visible { outline-color: var(--on-deep); }

/* -------------------- The property dossier rises over it ------------------ */
.hero--stage { padding-bottom: 42px; }
/* Full-bleed warm lip rising over the foot of the film, with one copper
   hairline and a barely-there paper grain. The dock sits clear above it. */
.hero--stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  z-index: 5;
  pointer-events: none;
  border-top: 1px solid rgba(143, 80, 36, 0.34);
  background:
    repeating-linear-gradient(102deg, rgba(143, 80, 36, 0.018) 0 2px, transparent 2px 6px),
    var(--bone);
}
.hero--stage + .band,
.hero--stage + .stagewrap { padding-top: clamp(2rem, 4vw, 4rem); }

/* Tablet and below: no wings, a compact sourced score under the actions. */
.hero__score { display: flex; }
@media (min-width: 75em) { .hero__score { display: none; }
}
.hero__score {
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  margin-top: var(--s5);
  font-size: 0.875rem;
  color: rgba(250, 246, 237, 0.9);
}
.hero__score strong { font-size: 1.15rem; color: #faf6ed; }
.hero__score span { color: var(--sand); letter-spacing: 0.16em; }


/* ================= Hero centre: a film title sequence ==================== */

/* Eyebrow: small caps between two hairlines. No badge, no plate. */
.hero--stage .hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s4);
  justify-content: center;
  margin: 0 0 var(--s5);
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8c8a3;
}
.hero--stage .hero__eyebrow::before,
.hero--stage .hero__eyebrow::after {
  content: "";
  height: 1px;
  width: clamp(1.5rem, 4vw, 3.5rem);
  background: rgba(196, 148, 88, 0.62);
}

/* Two lines, warm ivory, held to a title-card measure. */
.hero--stage .h-hero {
  font-size: clamp(4rem, 4.6vw, 5.25rem);
  line-height: 0.99;
  letter-spacing: -0.022em;
  color: #f6f0e4;
  max-width: 760px;
  margin-inline: auto;
  text-shadow: 0 1px 24px rgba(6, 16, 12, 0.42);
  padding-bottom: 0.1em;
}
.hero--stage .h-hero span { display: block; }

.hero--stage .hero__lede {
  max-width: 560px;
  margin: var(--s5) auto 0;
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.5;
  color: rgba(246, 240, 228, 0.9);
  text-shadow: 0 1px 18px rgba(6, 16, 12, 0.4);
}

/* One primary action; the second becomes a quiet directional link. */
.hero--stage .hero__actions { gap: var(--s5); align-items: center; }
.hero--stage .btn--gold {
  --btn-fill: #f0e3cd;
  --btn-fg: #12362b;
  border-color: rgba(143, 80, 36, 0.55);
  box-shadow: none;
  min-height: 56px;
}
.hero--stage .btn--gold:hover,
.hero--stage .btn--gold:focus-visible { --btn-fill: #f7eeddff; border-color: var(--copper); }
.hero__second {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f6f0e4;
  text-decoration: none;
  border-bottom: 1px solid rgba(246, 240, 228, 0.42);
  padding-bottom: 2px;
}
.hero__second span { transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); display: inline-block; }
.hero__second:hover,
.hero__second:focus-visible { color: #f0c9a2; border-color: #f0c9a2; }
.hero__second:hover span,
.hero__second:focus-visible span { transform: translateX(2px); }

/* Localised vignette only — the film keeps its own contrast everywhere else. */
.stage__veil {
  background:
    radial-gradient(
      ellipse 42% 46% at 50% 46%,
      rgba(7, 26, 20, 0.68) 0%,
      rgba(7, 26, 20, 0.4) 48%,
      rgba(7, 26, 20, 0.08) 74%,
      transparent 100%
    ),
    linear-gradient(180deg, rgba(7, 26, 20, 0.26) 0%, transparent 22%, transparent 74%, rgba(7, 26, 20, 0.34) 100%);
}

/* Joinery, not glow: one warm-bronze line where film meets proof wing. */
@media (min-width: 75em) {
  .wing--left { border-right: 1px solid rgba(176, 132, 78, 0.72); box-shadow: none; }
  .wing--right { border-left: 1px solid rgba(176, 132, 78, 0.72); box-shadow: none; }
  .wing--left::after, .wing--right::after { display: none; }
}

/* Entrance: rules and eyebrow, then the title, then copy and actions. */
[data-enhanced][data-motion="full"] .hero--stage .hero__eyebrow { opacity: 0; animation: hero-in 640ms cubic-bezier(0.4, 0, 0.2, 1) 80ms forwards; }
[data-enhanced][data-motion="full"] .hero--stage .h-hero { opacity: 0; animation: hero-rise 720ms cubic-bezier(0.4, 0, 0.2, 1) 220ms forwards; }
[data-enhanced][data-motion="full"] .hero--stage .hero__copy { opacity: 0; animation: hero-in 680ms cubic-bezier(0.4, 0, 0.2, 1) 420ms forwards; }
@keyframes hero-in { to { opacity: 1; } }
@keyframes hero-rise { from { transform: translateY(16px); } to { opacity: 1; transform: none; } }
[data-motion="static"] .hero--stage .hero__eyebrow,
[data-motion="static"] .hero--stage .h-hero,
[data-motion="static"] .hero--stage .hero__copy { opacity: 1 !important; animation: none !important; transform: none !important; }

@media (max-width: 63.99em) { .hero--stage .h-hero { font-size: clamp(2.9rem, 7vw, 4rem); }
}
@media (max-width: 47.99em) { .hero--stage .h-hero { font-size: clamp(2.6rem, 9vw, 3.25rem); max-width: 100%; }
}


/* At the largest sizes the 760px measure forces a third line; the title keeps
   its two-line composition instead. */
@media (min-width: 90em) {
  .hero--stage .h-hero { max-width: 940px; font-size: clamp(4rem, 4.2vw, 5rem); }
}


/* ---------------- Hero: smaller, and legible over every frame ------------ */

.hero--stage { min-height: clamp(580px, calc(88svh - var(--head-h)), 800px); }
@media (min-width: 64em) and (min-height: 46rem) {
  .hero--stage { min-height: clamp(600px, calc(86svh - var(--head-h)), 800px); }
}
@media (min-width: 48em) and (max-height: 50rem) {
  .hero--stage { min-height: clamp(560px, calc(90svh - var(--head-h)), 800px); }
}

/* A touch smaller, so the film carries more of the frame. */
.hero--stage .h-hero { font-size: clamp(3.4rem, 3.9vw, 4.5rem); }
@media (min-width: 90em) { .hero--stage .h-hero { font-size: clamp(3.6rem, 3.6vw, 4.4rem); max-width: 880px; }
}
@media (max-width: 63.99em) { .hero--stage .h-hero { font-size: clamp(2.7rem, 6.2vw, 3.5rem); }
}
@media (max-width: 47.99em) { .hero--stage .h-hero { font-size: clamp(2.4rem, 8.4vw, 3rem); }
}

/* The scrim reached only the title. It now covers the whole copy column,
   including the actions, which is where the film was brightest. */
.stage__veil {
  background:
    radial-gradient(
      ellipse 48% 62% at 50% 52%,
      rgba(7, 26, 20, 0.8) 0%,
      rgba(7, 26, 20, 0.58) 42%,
      rgba(7, 26, 20, 0.26) 68%,
      rgba(7, 26, 20, 0.05) 86%,
      transparent 100%
    ),
    linear-gradient(180deg, rgba(7, 26, 20, 0.3) 0%, transparent 20%, transparent 60%, rgba(7, 26, 20, 0.46) 100%);
}

.hero--stage .hero__lede {
  color: #f2ecdf;
  text-shadow: 0 1px 16px rgba(5, 14, 10, 0.72);
}
.hero--stage .h-hero { text-shadow: 0 2px 28px rgba(5, 14, 10, 0.6); }

/* The secondary link was disappearing into bright rooftops. */
.hero__second {
  padding: 10px 14px;
  border: 1px solid rgba(246, 240, 228, 0.34);
  border-bottom-color: rgba(246, 240, 228, 0.34);
  background: rgba(7, 20, 15, 0.42);
  text-shadow: 0 1px 12px rgba(5, 14, 10, 0.6);
}
.hero__second:hover,
.hero__second:focus-visible { background: rgba(7, 20, 15, 0.6); border-color: #f0c9a2; }

/* The primary reads as parchment, not a plain white slab. */
.hero--stage .btn--gold { --btn-fill: #efe0c6; border-color: rgba(143, 80, 36, 0.6); }


/* The copy block sat low against the dock; it lifts into the upper-middle of
   the film, with the scrim following it so the protection stays aligned. */
.hero--stage .hero__panel {
  margin: auto auto 0;
  padding-bottom: clamp(4.5rem, 11vh, 8.5rem);
}
.stage__veil {
  background:
    radial-gradient(
      ellipse 48% 60% at 50% 45%,
      rgba(7, 26, 20, 0.8) 0%,
      rgba(7, 26, 20, 0.58) 42%,
      rgba(7, 26, 20, 0.26) 68%,
      rgba(7, 26, 20, 0.05) 86%,
      transparent 100%
    ),
    linear-gradient(180deg, rgba(7, 26, 20, 0.3) 0%, transparent 20%, transparent 60%, rgba(7, 26, 20, 0.46) 100%);
}


/* ======================= Header: wider navigation ======================== */
@media (min-width: 64em) {
  .site-head__inner {
    max-width: 1840px;
    padding-inline: clamp(32px, 4.5vw, 88px);
    display: grid;
    grid-template-columns: 180px minmax(620px, 860px) 190px;
    justify-content: space-between;
    align-items: center;
    min-height: 86px;
    gap: var(--s5);
    transition: min-height 350ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav--wide { display: block; margin: 0; justify-self: center; width: 100%; }
  .nav--wide .nav__list {
    width: clamp(580px, 46vw, 840px);
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    gap: var(--s4);
    flex-wrap: nowrap;
  }
  .nav__link {
    font-size: 0.9688rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    border-bottom: 0;
    position: relative;
    white-space: nowrap;
  }
  /* Underline grows from the left rather than switching on. */
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 10px;
    height: 2px;
    width: 32px;
    max-width: 100%;
    background: var(--copper);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav__link:hover::after,
  .nav__link:focus-visible::after { transform: scaleX(1); }
  .nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--bottle); }
  .site-head__cta { justify-self: end; margin: 0; }
  .brand { justify-self: start; }
  /* Compressed state on scroll. */
  [data-scrolled="true"] .site-head__inner { min-height: 74px; }
  [data-scrolled="true"] .brand__mark { height: 48px; transition: height 350ms cubic-bezier(0.4, 0, 0.2, 1); }
  .brand__mark { transition: height 350ms cubic-bezier(0.4, 0, 0.2, 1); }
}
@media (min-width: 64em) and (max-width: 68.75em) {
  .site-head__inner { grid-template-columns: 150px minmax(0, 1fr) 170px; padding-inline: clamp(20px, 3vw, 40px); }
  .nav--wide .nav__list { width: 100%; gap: var(--s3); }
  .nav__link { font-size: 0.9rem; }
}

/* ==================== Route dock: quieter wayfinding ===================== */
.hero--stage .dock__link {
  min-height: 112px;
  padding: 22px clamp(30px, 2.4vw, 38px);
}
.hero--stage .dock__index { font-size: 0.8125rem; font-weight: 700; }
.hero--stage .dock__audience { font-size: 0.78rem; letter-spacing: 0.11em; }
.hero--stage .dock__action {
  font-size: clamp(1.5rem, 1.3rem + 0.35vw, 1.85rem);
  line-height: 1.1;
  color: #f6f0e4;
}
.hero--stage .dock__cue { font-size: 1.15rem; }
.hero--stage .dock__link:hover .dock__cue,
.hero--stage .dock__link:focus-visible .dock__cue { transform: translateX(5px); }
.hero--stage .dock__link {
  transition: background-color 275ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero--stage .dock__link:hover,
.hero--stage .dock__link:focus-visible { background: rgba(246, 240, 228, 0.07); }
.hero--stage .dock__link:focus-visible { outline: 2px solid var(--sand); outline-offset: -4px; }

/* ================== Why Dukes: the dossier opening ====================== */
/* The band itself no longer carries an arrival of its own: it is the scroll
   stage now, and its opacity and transform are driven by scroll progress at the
   end of this file. Two systems on one element would fight, and the one tied to
   the reader's own scrolling is the one worth keeping. Its contents — rule,
   photograph, copy — still arrive on the observer. */

[data-enhanced][data-motion="full"] .band--dossier .chapter__rule { transform: scaleX(0); transform-origin: left center; }
[data-enhanced][data-motion="full"] .band--dossier.is-in .chapter__rule {
  transform: scaleX(1);
  transition: transform 550ms cubic-bezier(0.4, 0, 0.2, 1) 120ms;
}

[data-enhanced][data-motion="full"] .band--dossier .welcome__photo {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.015);
}
[data-enhanced][data-motion="full"] .band--dossier.is-in .welcome__photo {
  clip-path: inset(0 0 0 0);
  transform: none;
  transition: clip-path 800ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, transform 800ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
}

/* The copy lifts; it does not also fade. The band around it is the scroll stage
   now and already carries opacity 0.75 → 1, so fading each line from zero on
   top of that multiplied out to roughly a third — the heading read as washed
   out for half a second at exactly the moment it is meant to land. One fade,
   on the chapter, and a quiet stagger of lifts inside it. */
[data-enhanced][data-motion="full"] .band--dossier .welcome__copy > * {
  transform: translateY(14px);
}
/* The larger offset belongs to the starting state. It used to sit on the
   settled rule, which left the second line permanently 18px low. */
[data-enhanced][data-motion="full"] .band--dossier .welcome__copy > *:nth-child(2) {
  transform: translateY(18px);
}
[data-enhanced][data-motion="full"] .band--dossier.is-in .welcome__copy > *,
[data-enhanced][data-motion="full"] .band--dossier.is-in .welcome__copy > *:nth-child(2) {
  transform: none;
  transition: transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-enhanced][data-motion="full"] .band--dossier.is-in .welcome__copy > *:nth-child(1) { transition-delay: 180ms; }
[data-enhanced][data-motion="full"] .band--dossier.is-in .welcome__copy > *:nth-child(2) { transition-delay: 250ms; }
[data-enhanced][data-motion="full"] .band--dossier.is-in .welcome__copy > *:nth-child(n+3) { transition-delay: 330ms; }
[data-enhanced][data-motion="full"] .band--dossier.is-in .welcome__copy > *:nth-child(n+5) { transition-delay: 400ms; }

[data-motion="static"] .band--dossier,
[data-motion="static"] .band--dossier .welcome__copy > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
[data-motion="static"] .band--dossier .welcome__photo { clip-path: none !important; transform: none !important; }
[data-motion="static"] .band--dossier .chapter__rule { transform: none !important; }


/* ================= Hero materials: contrast, not more green ============== */
:root {
  --smoked-ink: #161b18;
  --smoked-ink-raised: #1d2420;
  --champagne: #e8dcc4;
  --parchment: #f3ebdd;
  --warm-ivory: #f6f0e4;
}

body { background: var(--parchment); }
.hero--stage::after { background: var(--parchment); }

/* Review wings become smoked editorial folios rather than green slabs. */
@media (min-width: 75em) {
  .wing {
    background: linear-gradient(180deg, var(--smoked-ink) 0%, #121715 100%);
    padding: var(--s7) clamp(1.25rem, 2vw, 2.25rem);
  }
  .wing--left { border-right: 1px solid rgba(143, 80, 36, 0.55); }
  .wing--right { border-left: 1px solid rgba(143, 80, 36, 0.55); }
}
.wing__inner { position: relative; }
.wing__inner::before {
  content: "\201C";
  position: absolute;
  top: -0.5em;
  left: -0.05em;
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  color: rgba(239, 194, 154, 0.13);
  pointer-events: none;
}
.wing__text { border-top: 1px solid rgba(143, 80, 36, 0.55); padding-top: var(--s4); }
.wing__text p {
  font-size: clamp(1.05rem, 0.85rem + 0.55vw, 1.45rem);
  line-height: 1.5;
  color: var(--warm-ivory);
}
.wing__name { font-size: 0.8125rem; font-weight: 500; color: rgba(246, 240, 228, 0.92); }
.wing__source { font-size: 0.6563rem; letter-spacing: 0.16em; color: rgba(246, 240, 228, 0.62); }
.wing__index { font-size: 0.6563rem; color: rgba(246, 240, 228, 0.45); letter-spacing: 0.16em; }
.wing__stars { color: var(--sand); font-size: 0.75rem; }
.wing__quote { transition: opacity 550ms cubic-bezier(0.4, 0, 0.2, 1), transform 550ms cubic-bezier(0.4, 0, 0.2, 1); }
.wing__quote:not([data-active]) { transform: translateY(-8px); }
.wing__quote[data-active] { transform: translateY(0); }
.wing__quote[data-active] .wing__by { transition-delay: 70ms; }

/* Neutral smoked vignette; the film keeps its own colour. */
.stage__veil {
  background:
    radial-gradient(
      ellipse 46% 58% at 50% 45%,
      rgba(12, 15, 14, 0.72) 0%,
      rgba(12, 15, 14, 0.38) 50%,
      rgba(12, 15, 14, 0.08) 74%,
      transparent 100%
    ),
    linear-gradient(180deg, rgba(12, 15, 14, 0.26) 0%, transparent 20%, transparent 64%, rgba(12, 15, 14, 0.34) 100%);
}
.stage__video, .stage__poster img { filter: saturate(0.94) contrast(0.97) brightness(1.03); }

/* Eyebrow as a film credit. */
.hero--stage .hero__eyebrow {
  max-width: 520px;
  margin-inline: auto;
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  color: #e5c49c;
}
.hero--stage .hero__eyebrow::before,
.hero--stage .hero__eyebrow::after { width: clamp(1.5rem, 3vw, 2.75rem); }
.hero--stage .hero__eyebrow::before { background: linear-gradient(90deg, transparent, rgba(196, 148, 88, 0.75)); }
.hero--stage .hero__eyebrow::after { background: linear-gradient(270deg, transparent, rgba(196, 148, 88, 0.75)); }

/* Headline: one masked two-line reveal. */
.hero--stage .h-hero { color: var(--warm-ivory); font-size: clamp(3.4rem, 3.9vw, 4.6rem); line-height: 0.98; }
[data-enhanced][data-motion="full"] .hero--stage .h-hero {
  animation: none;
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transform: translateY(18px);
  transition: clip-path 800ms cubic-bezier(0.4, 0, 0.2, 1) 260ms, transform 800ms cubic-bezier(0.4, 0, 0.2, 1) 260ms;
}
[data-enhanced][data-motion="full"] .hero--stage.is-lit .h-hero { clip-path: inset(0 0 0 0); transform: none; }

.hero--stage .hero__lede {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  max-width: 590px;
  line-height: 1.5;
  color: rgba(246, 240, 228, 0.86);
}

/* CTAs: one champagne control, one refined text link. */
.hero--stage .btn--gold {
  --btn-fill: var(--champagne);
  --btn-fg: var(--bottle-deep);
  border: 1px solid rgba(143, 80, 36, 0.5);
  min-height: 50px;
  padding-inline: 27px;
  font-size: 0.9688rem;
  font-weight: 500;
  box-shadow: none;
  transition: background-color 220ms cubic-bezier(0.4, 0, 0.2, 1), border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero--stage .btn--gold:hover,
.hero--stage .btn--gold:focus-visible { --btn-fill: #efe4cf; border-color: var(--copper); }
.hero__second {
  border: 0;
  background: none;
  padding: 12px 2px;
  min-height: 44px;
  color: var(--warm-ivory);
  font-weight: 500;
  position: relative;
  text-shadow: 0 1px 14px rgba(8, 12, 10, 0.75);
}
.hero__second::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 1px;
  background: rgba(239, 194, 154, 0.85);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__second:hover::after, .hero__second:focus-visible::after { transform: scaleX(1); }
.hero__second:hover, .hero__second:focus-visible { color: var(--sand); background: none; }

/* Route rail: champagne wayfinding, not an extension of the green. */
.hero--stage .dock,
.hero--stage .dock__item { background: var(--champagne); }
.hero--stage .dock { border-top: 1px solid rgba(143, 80, 36, 0.42); }
.hero--stage .dock__list { background: rgba(18, 54, 43, 0.18); }
.hero--stage .dock__link {
  min-height: 92px;
  padding: 16px 29px;
  color: var(--ink);
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero--stage .dock__index,
.hero--stage .dock__audience { font-size: 0.6875rem; letter-spacing: 0.11em; color: var(--copper-deep); font-weight: 700; }
.hero--stage .dock__action { font-size: clamp(1.375rem, 1.2rem + 0.35vw, 1.625rem); line-height: 1.1; color: var(--ink); }
.hero--stage .dock__cue { font-size: 1.05rem; color: var(--copper); }
.hero--stage .dock__link:hover,
.hero--stage .dock__link:focus-visible { background: #ded0b7; }
.hero--stage .dock__link::after { background: var(--bottle); height: 2px; }
.hero--stage .dock__link:focus-visible { outline: 2px solid var(--bottle); outline-offset: -4px; }

[data-motion="static"] .hero--stage .h-hero { clip-path: none !important; transform: none !important; }

/* A small lift when the pointer rests on a review. The transform sits on the
   container, not the quote, so it cannot fight the crossfade already animating
   the quote's own transform. The wings hold no links or focusable content, so
   accepting pointer events here still cannot steal a click or a focus. */
@media (min-width: 75em) and (hover: hover) and (pointer: fine) {
  .wing { pointer-events: auto; }
  .wing__inner { transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
  .wing:hover .wing__inner { transform: translateY(-4px); }
}
[data-motion="static"] .wing:hover .wing__inner { transform: none !important; }


/* ========================= Header navigation ============================= */
.site-head__actions { display: none; }

@media (min-width: 64em) {
  .site-head__inner {
    grid-template-columns: 170px minmax(0, 1fr) auto;
    gap: clamp(1rem, 2.4vw, 2.5rem);
  }
  .site-head__cta { display: none; }
  .site-head__actions { display: flex; align-items: center; gap: var(--s3); justify-self: end; }

  .nav--wide .nav__list { width: auto; justify-content: center; gap: clamp(0.75rem, 2vw, 2.25rem); }
  .nav__item { position: static; }
  .nav__link,
  .nav__link--trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 2px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.9688rem;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
  }
  .nav__caret {
    width: 6px; height: 6px;
    border-right: 1.5px solid var(--copper);
    border-bottom: 1.5px solid var(--copper);
    transform: rotate(45deg) translateY(-1px);
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  [aria-expanded="true"] .nav__caret { transform: rotate(-135deg) translateY(-2px); }

  .mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    background: var(--parchment);
    border-top: 1px solid rgba(143, 80, 36, 0.5);
    border-bottom: 1px solid rgba(17, 26, 22, 0.12);
    box-shadow: 0 18px 34px -30px rgba(17, 26, 22, 0.6);
  }
  .mega[data-open] { animation: mega-in 240ms cubic-bezier(0.4, 0, 0.2, 1) both; }
  @keyframes mega-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

  .mega__inner {
    max-width: 1840px;
    margin-inline: auto;
    padding: clamp(1.75rem, 3vw, 2.75rem) clamp(32px, 4.5vw, 88px);
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) auto;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
  }
  .mega__intro {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.4;
    color: var(--bottle);
    max-width: 26ch;
  }
  .mega__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
  .mega__link {
    display: grid;
    gap: 2px;
    min-height: 44px;
    align-content: center;
    padding: var(--s2) var(--s3);
    margin-left: calc(var(--s3) * -1);
    text-decoration: none;
    color: var(--ink);
    transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .mega__link:hover, .mega__link:focus-visible { background: rgba(232, 220, 196, 0.6); }
  .mega__label { font-weight: 600; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px; }
  .mega__arrow { color: var(--copper); transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }
  .mega__link:hover .mega__arrow, .mega__link:focus-visible .mega__arrow { transform: translateX(4px); }
  .mega__note { font-size: var(--t-small); color: var(--ink-soft); }
  .mega__cta { margin: 0; justify-self: end; }

  .headact {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--s5);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 220ms cubic-bezier(0.4, 0, 0.2, 1), border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .headact--utility { color: var(--bottle); border: 1px solid rgba(18, 54, 43, 0.28); background: rgba(250, 246, 237, 0.7); }
  .headact--utility:hover { border-color: var(--bottle); background: #faf6ed; }
  .headact--primary { color: var(--bottle-deep); background: var(--champagne); border: 1px solid rgba(143, 80, 36, 0.5); }
  .headact--primary:hover { background: #efe4cf; border-color: var(--copper); }
}

@media (prefers-reduced-motion: reduce) {
  .mega[data-open] { animation: none; }
}

/* -------------------------- Mobile accordions ---------------------------- */
.mnav { list-style: none; margin: 0; padding: 0; }
.mnav__item { border-bottom: 1px solid var(--rule); }
.mnav__summary,
.mnav__link--top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  text-decoration: none;
}
.mnav__summary::-webkit-details-marker { display: none; }
.mnav__caret {
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--copper);
  border-bottom: 1.5px solid var(--copper);
  transform: rotate(45deg);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mnav__group[open] .mnav__caret { transform: rotate(-135deg); }
.mnav__sub { list-style: none; margin: 0 0 var(--s3); padding: 0 0 0 var(--s4); display: grid; }
.mnav__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.mnav__link:hover { color: var(--copper-deep); }


/* ===================== Dukes navy: the missing colour ==================== */
:root {
  --dukes-navy: #0b223b;
  --dukes-navy-deep: #07182a;
  --brand-brass: #b6873e;
  --brand-parchment: #e9dcc4;
  --brand-ivory: #f7f1e6;
}

body { background: var(--brand-ivory); }
.hero--stage::after { background: var(--brand-ivory); }

/* ---- Review wings: navy editorial panels ---- */
@media (min-width: 75em) {
  .wing {
    background: linear-gradient(180deg, var(--dukes-navy) 0%, var(--dukes-navy-deep) 100%);
    padding: var(--s7) clamp(1.5rem, 2.2vw, 2.5rem);
  }
  .wing--left { border-right: 1px solid rgba(182, 135, 62, 0.5); }
  .wing--right { border-left: 1px solid rgba(182, 135, 62, 0.5); }
}
/* The oversized quotation mark goes: it competed with the film. */
.wing__inner::before { content: none; }
.wing__text { border-top: 1px solid rgba(182, 135, 62, 0.45); padding-top: var(--s4); }
.wing__text p { color: var(--brand-ivory); line-height: 1.55; }
.wing__stars { color: var(--brand-brass); }
.wing__name { color: rgba(247, 241, 230, 0.94); }
.wing__source, .wing__index { color: rgba(182, 135, 62, 0.85); }

/* ---- Eyebrow: a readable navy label, not faint tracking ---- */
.hero--stage .hero__eyebrow {
  display: inline-flex;
  padding: 7px 15px;
  background: rgba(11, 34, 59, 0.82);
  border: 1px solid rgba(182, 135, 62, 0.5);
  color: #f0d9b4;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  max-width: none;
}
.hero--stage .hero__eyebrow::before,
.hero--stage .hero__eyebrow::after { content: none; }

/* ---- Headline: descender never clipped ---- */
.hero--stage .h-hero {
  font-size: clamp(3.2rem, 3.7vw, 4.35rem);
  line-height: 1.04;
  max-width: 900px;
  overflow: visible;
  padding-bottom: 0.14em;
  color: var(--brand-ivory);
}
[data-enhanced][data-motion="full"] .hero--stage .h-hero {
  clip-path: none;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1) 260ms, transform 800ms cubic-bezier(0.4, 0, 0.2, 1) 260ms;
}
[data-enhanced][data-motion="full"] .hero--stage.is-lit .h-hero { opacity: 1; transform: none; }
.hero--stage .hero__lede { max-width: 56ch; line-height: 1.58; color: rgba(247, 241, 230, 0.9); }

/* ---- Primary CTA: navy rises behind the label ---- */
.hero--stage .btn--gold {
  position: relative;
  overflow: hidden;
  --btn-fill: var(--brand-parchment);
  --btn-fg: var(--dukes-navy);
  border: 1px solid rgba(182, 135, 62, 0.65);
  border-radius: 2px;
  transition: color 240ms cubic-bezier(0.4, 0, 0.2, 1), transform 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero--stage .btn--gold::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--dukes-navy);
  transform: translateY(101%);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none;
}
.hero--stage .btn--gold:hover,
.hero--stage .btn--gold:focus-visible { color: var(--brand-ivory); }
.hero--stage .btn--gold:hover::after,
.hero--stage .btn--gold:focus-visible::after { transform: translateY(0); }
.hero--stage .btn--gold:active { transform: translateY(1px); }

/* ---- Secondary: a real outlined control ---- */
.hero__second {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid rgba(247, 241, 230, 0.58);
  border-radius: 2px;
  background: rgba(11, 34, 59, 0.3);
  color: var(--brand-ivory);
  transition: background-color 240ms cubic-bezier(0.4, 0, 0.2, 1), border-color 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__second::after { content: none; }
.hero__second span { transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1); }
.hero__second:hover, .hero__second:focus-visible {
  background: rgba(11, 34, 59, 0.62);
  border-color: var(--brand-ivory);
  color: var(--brand-ivory);
}
.hero__second:hover span, .hero__second:focus-visible span { transform: translateX(4px); }

/* ---- Journey dock: navy, brass-ruled, no numerals ---- */
.hero--stage .dock,
.hero--stage .dock__item {
  background: linear-gradient(180deg, var(--dukes-navy) 0%, var(--dukes-navy-deep) 100%);
}
.hero--stage .dock { border-top: 1px solid var(--brand-brass); box-shadow: none; }
.hero--stage .dock__list { background: rgba(247, 241, 230, 0.12); max-width: var(--max); }
.hero--stage .dock__link {
  min-height: 88px;
  padding: 14px 28px;
  color: var(--brand-ivory);
  transition: background-color 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero--stage .dock__audience {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  color: rgba(214, 174, 116, 0.95);
  font-weight: 700;
}
.hero--stage .dock__action { font-size: clamp(1.3rem, 1.15rem + 0.3vw, 1.5rem); color: var(--brand-ivory); }
.hero--stage .dock__cue { color: var(--brand-brass); }
.hero--stage .dock__link:hover,
.hero--stage .dock__link:focus-visible { background: rgba(247, 241, 230, 0.06); }
.hero--stage .dock__link::after { background: var(--brand-brass); height: 1px; }
.hero--stage .dock__link:hover::after,
.hero--stage .dock__link:focus-visible::after { height: 2px; transform: scaleX(1); }
.hero--stage .dock__link:focus-visible { outline: 2px solid var(--brand-brass); outline-offset: -4px; }


/* ============ The scroll transition: hero lets go, chapter lands ========== *
   One event in two halves, both driven by the same scroll range from
   scroll-stage.mjs. Nothing here is a keyframe or a timeline; every value is a
   function of a progress custom property, so scrolling back up reverses it
   exactly and stopping half way holds a real intermediate state.

   Deliberately NOT here: the route dock. It is wayfinding sitting on the seam
   between the film and the page, and wayfinding that drifts while you are
   reaching for it is worse than wayfinding that stays still.                 */

/* --- Half one: the hero lets go ---------------------------------------- */

/* Declared, not just defaulted in each var(): the hero reads as un-departed
   before a single frame of script has run. */
.hero--stage { --hero-exit: 0; }

/* The cream shutters close over the FILM, not over the whole hero. They were
   built when the hero was one full-bleed film and nothing else, so they ran
   from the viewport edges; once navy review panels arrived either side of the
   film, that meant cream slabs travelling across those panels and guillotining
   the quotations mid-word half way through the scroll. They now live inside
   `.stage__film`, whose `overflow: hidden` gives them exactly the right extent
   for free — so their own geometry goes back to the simple full-width pair,
   measured against the film rather than the viewport. */

/* The film recedes by 1.5%. Its own surround shows for a few pixels at the
   edges as it does, so that surround has to belong to the palette rather than
   being the black it was inheriting from the video element. */
/* Scoped to the hero. `.stage` is also the valuation form's fieldset class,
   and an unscoped rule here painted that form navy. */
[data-hero-stage] { background: var(--dukes-navy-deep); }

[data-enhanced][data-motion="full"] .hero--stage .stage__film {
  transform: scale(calc(1 - var(--hero-exit, 0) * 0.015));
  /* Anchored at the top edge so no gap can open under the sticky header; the
     bottom edge travels up behind the opaque dock, where it is never seen. */
  transform-origin: 50% 0%;
}

/* The copy leaves first and furthest — it is what the reader has finished
   with. 18px, inside the 16–20px the brief allows. */
[data-enhanced][data-motion="full"] .hero--stage .hero__panel {
  transform: translate3d(0, calc(var(--hero-exit, 0) * -18px), 0);
}

/* The proof wings part outward and dim to 0.82. The drift is on the printed
   contents, not on the panels: the panels are butted against the film edge, and
   moving those would open a seam where the joinery keyline is. `overflow:
   hidden` on the panel clips the drift cleanly. */
@property --wing-lift {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
[data-enhanced][data-motion="full"] .wing__inner {
  opacity: calc(1 - var(--hero-exit, 0) * 0.18);
}
[data-enhanced][data-motion="full"] .wing--left .wing__inner {
  transform: translate3d(calc(var(--hero-exit, 0) * -12px), var(--wing-lift, 0px), 0);
}
[data-enhanced][data-motion="full"] .wing--right .wing__inner {
  transform: translate3d(calc(var(--hero-exit, 0) * 12px), var(--wing-lift, 0px), 0);
}

/* The hover lift becomes a transitioned custom property rather than a second
   transform, so the pointer response and the scroll drift compose instead of
   overwriting each other. A transition on `transform` would also have dragged
   the scroll-linked drift 320ms behind the reader's own scrolling. */
@media (min-width: 75em) and (hover: hover) and (pointer: fine) {
  .wing__inner {
    transition: --wing-lift 320ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: auto;
  }
  /* The two rules above are more specific than this one, so the lift arrives
     purely as a change to the property they both already read. */
  .wing:hover .wing__inner { --wing-lift: -4px; }
}

/* The dock is the one thing in the hero that must not move: it is wayfinding
   sitting on the seam between the film and the page, and wayfinding that drifts
   while you are reaching for it is worse than wayfinding that stays still. */
[data-enhanced][data-motion="full"] .hero--stage .dock { transform: none; }

/* --- Half two: the chapter lands --------------------------------------- */

/* 32px, 0.975→1, 3°, 0.75→1. The earlier 14° and 0.94 read as a slide deck
   flying in; at 3° the page simply arrives level, which is the difference
   between a premium settle and a transition effect.

   Order matters: translate, then scale, then rotate. The rotation is applied
   last so the 32px is travelled in screen space rather than along an axis that
   is itself tilting. */
[data-enhanced][data-motion="full"] .stagewrap__inner {
  transform-origin: 50% 0%;
  transform:
    translate3d(0, calc((1 - var(--stage-progress, 1)) * 32px), 0)
    scale(calc(0.975 + var(--stage-progress, 1) * 0.025))
    rotateX(calc((1 - var(--stage-progress, 1)) * 3deg));
  /* Floor raised from the brief's 0.75 to 0.88 on accessibility grounds. At
     0.75 the chapter's own small text composites down to 4.44:1 against paper
     and axe fails it — and that is the state the page rests in before anyone
     scrolls, not a transient frame. 0.88 keeps the arrival clearly visible
     while holding the numbered plate at 5.4:1 at its faintest. */
  opacity: calc(0.88 + var(--stage-progress, 1) * 0.12);
  /* Left to the module, which drops the layer once the settle has finished.
     Declaring it here permanently would have made that release a no-op. */
  will-change: auto;
}

/* --- Reduced motion: the settled state, instantly ----------------------- *
   Asserted twice on purpose. The data attribute is what the modules set, and
   the media query catches the case where the stylesheet has loaded but
   enhance.mjs has not run or has failed.                                    */
[data-motion="static"] .hero--stage .stage__film,
[data-motion="static"] .hero--stage .hero__panel,
[data-motion="static"] .wing__inner,
[data-motion="static"] .wing:hover .wing__inner,
[data-motion="static"] .stagewrap__inner {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .hero--stage .stage__film,
  .hero--stage .hero__panel,
  .wing__inner,
  .wing:hover .wing__inner,
  .stagewrap__inner {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}


/* ========================================================================== *
 *  COLOUR SYSTEM — homepage approval pass
 *
 *  The problem this replaces: three generations of palette were stacked in
 *  :root (bone/bottle/copper, then smoked-ink/champagne, then dukes-navy/
 *  brand-brass), and the newest generation had taken the logo's navy and
 *  spread it across both review wings, the whole route dock, the eyebrow and
 *  the secondary button. Sampling a colour off the logo and repeating it at
 *  full size everywhere is what makes the logo stop feeling like the asset.
 *
 *  The rule here is that the logo is a signature, not a palette generator.
 *  Navy appears in the genuine mark and almost nowhere else; the interface
 *  around it is warm architectural neutral, and it is restraint that makes
 *  the mark read as valuable.
 *
 *  Primitives are declared globally because the shell (header, footer, legal
 *  strip) is shared and the logo-safe rule has to hold on every page. The
 *  page-body surface assignments are scoped to [data-page="home"], because
 *  the homepage is the approval prototype and the other pages must not move
 *  until Aarav has signed this off.
 * ========================================================================== */

:root {
  /* ---- Primitives: warm architectural neutrals ---- */
  --surface-paper: #f3eee5;
  --surface-ivory: #faf7f0;
  --surface-parchment: #e8decc;
  --surface-limestone: #d5c8b4;
  --surface-mushroom: #b9ad9d;

  --surface-charcoal: #292722;
  --surface-olive-charcoal: #1d241f;

  --text-ink: #1c211f;
  /* Darkened twice. #69665f measured 4.3:1 on parchment; #5f5c55 then cleared
     paper and parchment but only reached 4.04:1 on limestone, which is the
     darkest of the light surfaces and the one the route dock, the journey
     gateway and the comparison tables all sit on. Measured against limestone
     rather than against the lightest surface it happens to appear on. */
  --text-muted: #56534a;
  --text-on-dark-warm: #f4eee3;

  /* Two brasses, and the difference between them is load-bearing.
     --accent-brass is the decorative one: rules, arrows, hairlines, marks
     that carry no reading burden. It does not reach 4.5:1 on a light
     surface, so it is never used for small text there.
     --accent-brass-deep is the one that carries small labels on parchment
     and limestone, measured at 5:1 rather than assumed. */
  --accent-brass: #a97842;
  --accent-brass-deep: #6b4620;
  --accent-champagne: #c5a66a;
  --accent-bottle-green: #315345;

  /* The protected signature. Outside the genuine mark this appears only as
     fine detail: an active-navigation rule, a focus ring, a legal link. */
  --brand-navy: #0b223b;

  /* ---- Semantic tokens: what components are allowed to consume ---- */
  --surface-page: var(--surface-paper);
  --surface-raised: var(--surface-ivory);
  --surface-muted: var(--surface-limestone);
  --surface-dark: var(--surface-olive-charcoal);
  --surface-nav: var(--surface-parchment);

  --text-primary: var(--text-ink);
  --text-secondary: var(--text-muted);
  --text-on-dark: var(--text-on-dark-warm);
  --text-on-dark-soft: rgba(244, 238, 227, 0.78);

  --border-subtle: rgba(28, 33, 31, 0.14);
  --border-strong: rgba(28, 33, 31, 0.28);
  --border-on-dark: rgba(244, 238, 227, 0.18);
  --border-brass: rgba(169, 120, 66, 0.55);

  --action-primary-fill: var(--surface-parchment);
  --action-primary-fg: var(--text-ink);
  --action-secondary-fg: var(--text-on-dark-warm);
}

/* ================================ SHELL ================================== *
   Header, footer and legal strip are shared, so they take the new system on
   every page. The logo-safe rule is not a homepage preference.              */

/* ---- 1. Sticky header: a calm light surface, and nothing else ---- */
.site-head {
  background: var(--surface-nav);
  border-bottom: 1px solid var(--border-subtle);
}
/* The mark sits on an uninterrupted light field with real clear space, and
   carries no ring, plate, box or outline of its own. */
.brand__ring { display: none; }
/* Padding zeroed on both axes: the block padding was making the brand cell
   66px tall, which floated the whole header above its 78-84px band. */
.brand { padding: 0; background: none; border: 0; }

@media (min-width: 64em) {
  /* 78–84px, closed and open alike. The dropdown is absolutely positioned,
     so it cannot contribute to this. */
  .site-head__inner { min-height: 82px; padding-block: 10px; }
  [data-scrolled="true"] .site-head__inner { min-height: 78px; }
  [data-scrolled="true"] .brand__mark { height: 47px; }
  .brand__mark { height: 50px; }
}

/* ---- Navigation triggers: transparent, no form-control boxes ---- */
@media (min-width: 64em) {
  .nav__item { position: relative; }

  .nav__link,
  .nav__link--trigger {
    position: relative;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--text-primary);
    padding: 0 2px;
  }
  /* Hover and open read as a brass underline drawing in, not as a filled
     pill and not as a white box. */
  .nav__link::after,
  .nav__link--trigger::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 1.5px;
    background: var(--accent-brass);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav__link:hover::after,
  .nav__link:focus-visible::after,
  .nav__link--trigger:hover::after,
  .nav__link--trigger:focus-visible::after,
  .nav__link--trigger[aria-expanded="true"]::after { transform: scaleX(1); }
  .nav__link--trigger[aria-expanded="true"] { color: var(--accent-brass-deep); }
  .nav__caret { border-color: var(--accent-brass-deep); }
  /* The one navy detail in the navigation: the page you are on. */
  .nav__link[aria-current="page"] { color: var(--brand-navy); }
  .nav__link[aria-current="page"]::after { background: var(--brand-navy); transform: scaleX(1); }
}

/* ---- Compact anchored dropdown ---- */
.navdrop {
  position: absolute;
  top: calc(100% + 6px);
  left: -14px;
  z-index: 60;
  min-width: 16rem;
  max-width: min(22rem, 90vw);
  /* Opaque, because it overlays a moving film. Parchment rather than navy:
     a navy panel this size competes with the mark in the same eyeline. */
  background: var(--surface-parchment);
  border: 1px solid var(--border-brass);
  border-radius: 0;
  box-shadow: 0 14px 28px -22px rgba(28, 33, 31, 0.55);
}
.navdrop[hidden] { display: none; }
.navdrop__list { list-style: none; margin: 0; padding: 6px; display: grid; }
.navdrop__link {
  display: grid;
  gap: 1px;
  min-height: 44px;
  align-content: center;
  padding: 9px 14px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.navdrop__link:hover,
.navdrop__link:focus-visible { background: rgba(169, 120, 66, 0.14); }
.navdrop__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
}
.navdrop__arrow {
  color: var(--accent-brass-deep);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.navdrop__link:hover .navdrop__arrow,
.navdrop__link:focus-visible .navdrop__arrow { transform: translateX(3px); }
.navdrop__note { font-size: 0.8125rem; line-height: 1.45; color: var(--text-secondary); }

/* Opacity and a short lift. No scale, no bounce, no glow, and it is display
   toggled by [hidden] so nothing invisible is left intercepting clicks. */
.navdrop[data-open] { animation: navdrop-in 200ms cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes navdrop-in {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .navdrop[data-open] { animation: none; }
  .navdrop__link .navdrop__arrow { transition: none; }
  .nav__link::after,
  .nav__link--trigger::after { transition: none; }
}

/* ---- Header actions: deliberate blocks, not underlined text ---- */
@media (min-width: 64em) {
  .headact { border-radius: 999px; }
  .headact--utility {
    color: var(--text-ink);
    background: transparent;
    border: 1px solid var(--border-strong);
  }
  .headact--utility:hover,
  .headact--utility:focus-visible { border-color: var(--accent-brass-deep); background: rgba(169, 120, 66, 0.1); }
  /* The primary action is the one deliberate dark block in the header. It is
     charcoal, not navy: navy here would sit 200px from the mark at a similar
     size and flatten it. */
  .headact--primary {
    color: var(--text-on-dark);
    background: var(--surface-charcoal);
    border: 1px solid var(--surface-charcoal);
  }
  .headact--primary:hover,
  .headact--primary:focus-visible { background: var(--surface-olive-charcoal); border-color: var(--accent-brass); }
}

/* ---- Mobile drawer ---- */
.menu__panel { background: var(--surface-parchment); border-top: 1px solid var(--border-brass); }
.menu__actions { display: grid; gap: var(--s3); margin-top: var(--s4); }
.menu__actions .headact {
  justify-content: center;
  border-radius: 999px;
  min-height: 48px;
  padding: 0 var(--s5);
  text-decoration: none;
  font-weight: 600;
}
.menu__actions .headact--utility { color: var(--text-ink); border: 1px solid var(--border-strong); background: transparent; }
.menu__actions .headact--primary { color: var(--text-on-dark); background: var(--surface-charcoal); border: 1px solid var(--surface-charcoal); }
.mnav__item { border-bottom: 1px solid var(--border-subtle); }
.mnav__summary, .mnav__link--top { color: var(--text-primary); }
.mnav__link { color: var(--text-secondary); }
.mnav__link:hover { color: var(--accent-brass-deep); }
.mnav__caret { border-color: var(--accent-brass-deep); }
/* The open drawer holds the page still behind it. Set by nav.mjs, and only
   while it is genuinely open. */
body[data-menu-open] { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* ---- 8. Main footer: the logo on an uninterrupted light surface ---- */
.site-foot {
  background: var(--surface-parchment);
  color: var(--text-primary);
  border-top: 1px solid var(--border-brass);
}
.site-foot__inner { padding-block: clamp(3rem, 5vw, 4.5rem); }
/* No plate, no card, no coloured box behind it — just clear space. */
.site-foot__brand { background: none; border: 0; padding: 0; }
.site-foot__mark {
  height: auto;
  width: clamp(150px, 14vw, 190px);
  margin-bottom: var(--s5);
  filter: none;
  opacity: 1;
  mix-blend-mode: normal;
}
.site-foot__position { color: var(--text-secondary); max-width: 34ch; }
.site-foot__heading {
  color: var(--accent-brass-deep);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-foot__link { color: var(--text-primary); }
.site-foot__link:hover, .site-foot__link:focus-visible { color: var(--accent-brass-deep); }
.site-foot__legal { color: var(--text-secondary); }
.site-foot__legal p { color: var(--text-secondary); }
.site-foot__caution { color: var(--text-secondary); border-left: 2px solid var(--accent-brass); padding-left: var(--s3); }
.site-foot__legal .link { color: var(--brand-navy); }
.site-foot__group + .site-foot__group { border-top: 0; }

/* ---- 9. Thin dark legal strip ---- */
.legalstrip {
  background: var(--surface-olive-charcoal);
  border-top: 1px solid var(--border-on-dark);
  padding: var(--s3) var(--inset);
}
.legalstrip__line {
  margin: 0;
  max-width: var(--max);
  margin-inline: auto;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-on-dark-soft);
}

/* =========================== HOMEPAGE SURFACES =========================== *
   Scoped, so the approval prototype is the only page that moves.           */

[data-page="home"] { background: var(--surface-page); }

/* ---- 2. Hero: the film is the visual, the frame is neutral ---- */
/* The wings become a warm near-black rather than two heavy blue columns.
   Olive-charcoal reads as neutral against the aerial's own greens without
   ever announcing itself as green. */
[data-page="home"] .stage { background: var(--surface-olive-charcoal); }

@media (min-width: 75em) {
  [data-page="home"] .wing {
    background: linear-gradient(180deg, #212821 0%, var(--surface-olive-charcoal) 100%);
  }
  /* One warm hairline between each wing and the film. No glow, no blur. */
  [data-page="home"] .wing--left {
    border-right: 1px solid var(--border-brass);
    box-shadow: inset -14px 0 20px -20px rgba(0, 0, 0, 0.7);
  }
  [data-page="home"] .wing--right {
    border-left: 1px solid var(--border-brass);
    box-shadow: inset 14px 0 20px -20px rgba(0, 0, 0, 0.7);
  }
}
[data-page="home"] .wing__text { border-top: 1px solid var(--border-brass); }
[data-page="home"] .wing__text p { color: var(--text-on-dark); }
[data-page="home"] .wing__name { color: var(--text-on-dark); }
/* Champagne, not brass, for the small labels: brass does not clear 4.5:1
   against this surface at this size and champagne does. */
[data-page="home"] .wing__source,
[data-page="home"] .wing__index { color: var(--accent-champagne); }
[data-page="home"] .wing__stars { color: var(--accent-champagne); }

/* The eyebrow loses its navy rectangle: champagne type between two fine
   rules, sitting on the film. */
[data-page="home"] .hero--stage .hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--accent-champagne);
  text-shadow: 0 1px 12px rgba(12, 14, 12, 0.9);
}
[data-page="home"] .hero--stage .hero__eyebrow::before,
[data-page="home"] .hero--stage .hero__eyebrow::after {
  content: "";
  display: block;
  width: clamp(1.25rem, 2.5vw, 2.25rem);
  height: 1px;
  background: var(--accent-champagne);
  opacity: 0.7;
}

/* Primary action stays parchment with ink type. */
[data-page="home"] .hero--stage .btn--gold {
  --btn-fill: var(--surface-parchment);
  --btn-fg: var(--text-ink);
  border: 1px solid var(--border-brass);
}
[data-page="home"] .hero--stage .btn--gold::after { background: var(--surface-charcoal); }
[data-page="home"] .hero--stage .btn--gold:hover,
[data-page="home"] .hero--stage .btn--gold:focus-visible { color: var(--text-on-dark); }

/* Secondary loses its navy rectangle for a quiet charcoal wash and a fine
   champagne rule. */
[data-page="home"] .hero__second {
  background: rgba(29, 36, 31, 0.42);
  border: 1px solid rgba(197, 166, 106, 0.6);
  color: var(--text-on-dark);
}
[data-page="home"] .hero__second:hover,
[data-page="home"] .hero__second:focus-visible {
  background: rgba(29, 36, 31, 0.72);
  border-color: var(--accent-champagne);
  color: var(--text-on-dark);
}

/* ---- 3. Route dock: warm limestone, the transition out of the film ---- */
[data-page="home"] .hero--stage .dock,
[data-page="home"] .hero--stage .dock__item {
  background: var(--surface-limestone);
}
[data-page="home"] .hero--stage .dock {
  border-top: 1px solid var(--accent-brass);
  box-shadow: none;
}
[data-page="home"] .hero--stage .dock::before { display: none; }
[data-page="home"] .hero--stage .dock__list {
  background: rgba(41, 38, 32, 0.18);
  gap: 1px;
  max-width: var(--max);
  margin-inline: auto;
}
/* Roughly 12% shorter, and the headings come down with it: refined spacing
   rather than oversized type. */
[data-page="home"] .hero--stage .dock__link {
  min-height: 78px;
  padding: 13px 26px;
  color: var(--text-primary);
  transition: background-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-page="home"] .hero--stage .dock__audience {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: var(--accent-brass-deep);
}
[data-page="home"] .hero--stage .dock__action {
  font-size: clamp(1.15rem, 1.05rem + 0.25vw, 1.35rem);
  line-height: 1.15;
  color: var(--text-primary);
}
[data-page="home"] .hero--stage .dock__cue { color: var(--accent-brass-deep); transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1); }
/* A warm tonal shift, not a navy flood. */
[data-page="home"] .hero--stage .dock__link:hover,
[data-page="home"] .hero--stage .dock__link:focus-visible { background: rgba(107, 70, 32, 0.1); }
[data-page="home"] .hero--stage .dock__link:hover .dock__cue,
[data-page="home"] .hero--stage .dock__link:focus-visible .dock__cue { transform: translateX(3px); }
[data-page="home"] .hero--stage .dock__link::after { background: var(--accent-brass-deep); height: 2px; }
[data-page="home"] .hero--stage .dock__link:focus-visible { outline: 2px solid var(--accent-brass-deep); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .hero--stage .dock__cue { transition: none; }
}

/* ---- 4. Why Dukes: the light paper surface ---- */
[data-page="home"] .band--dossier { background: var(--surface-page); color: var(--text-primary); }

/* ---- Why Dukes refinement, 8 August 2026 (homepage section scope) ---- *
   Measured before the change at 1440px: the hero and the section touched
   (gap 0), but 57.6px of stagewrap runway + 100.8px of band padding + 49px
   of chapter margin ≈ 207px of air stood before the heading — the "empty
   space" was inside the section, not between sections. Corrected in normal
   flow with the existing clamp idiom; the scroll-settle mechanism, the Curve
   image, captions and both actions are untouched. All three hooks
   (.stagewrap, .band--dossier, .welcome__*) render on the homepage only. */
[data-page="home"] .hero--stage + .stagewrap { padding-top: clamp(1.25rem, 2.25vw, 2rem); }
[data-page="home"] .band--dossier { padding-top: clamp(2.75rem, 4.5vw, 4.05rem); }
[data-page="home"] .band--dossier > .chapter { margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }

/* The 51px three-line headline dominated the composition and pushed the copy
   column to twice the media column's height. With the five-word heading the
   scale steps down to a mature editorial size, balanced wrapping, and the
   emphasis budget is spent here and nowhere else in the section. */
[data-page="home"] .welcome__title {
  font-size: clamp(2rem, 1.55rem + 1.5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  /* Wide enough that each sentence holds its own line at desktop —
     "Clear guidance." / "Direct communication." — instead of orphaning
     the last word. */
  max-width: 22ch;
  text-wrap: balance;
}
[data-page="home"] .welcome__lede {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--text-primary);
  max-width: 46ch;
}
/* One fine rule separates the principles from the actions — the section's
   restrained depth detail, using the existing hairline idiom rather than a
   card, gradient or texture. */
[data-page="home"] .welcome__actions {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--s5);
}

/* ---- 5. Journey gateway: a related limestone tone, no new hue ---- */
[data-page="home"] .band--journeys { background: var(--surface-muted); color: var(--text-primary); }

/* ---- 6. Reviews: paper, not another full-width dark wall ---- */
[data-page="home"] .band--reviews {
  background: var(--surface-page);
  color: var(--text-primary);
  --fg: var(--text-primary);
  --fg-soft: var(--text-secondary);
  --line: var(--border-subtle);
  --rule: var(--border-subtle);
}
[data-page="home"] .band--reviews .h-section,
[data-page="home"] .band--reviews .lede,
[data-page="home"] .band--reviews .chapter__label { color: var(--text-primary); }
[data-page="home"] .band--reviews .chapter__index { color: var(--accent-brass-deep); }
[data-page="home"] .band--reviews .chapter__rule { background: var(--border-subtle); }
/* Cards become a warm ivory variant on paper: separated by tone and a rule,
   not by being dropped onto a coloured slab. */
[data-page="home"] .band--reviews .rcard {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  box-shadow: none;
}
[data-page="home"] .band--reviews .rcard__quote { color: var(--text-primary); }
[data-page="home"] .band--reviews .rcard__stars { color: var(--accent-brass-deep); }
[data-page="home"] .band--reviews .rcard__name { color: var(--text-primary); }
[data-page="home"] .band--reviews .rcard__src,
[data-page="home"] .band--reviews .rcard__when,
[data-page="home"] .band--reviews .rcard__host,
[data-page="home"] .band--reviews .rcard__verify { color: var(--text-secondary); }
[data-page="home"] .band--reviews .rcard__initials {
  background: var(--surface-limestone);
  color: var(--text-ink);
  border: 1px solid var(--border-subtle);
}
[data-page="home"] .band--reviews .rcard__link { color: var(--brand-navy); }
[data-page="home"] .band--reviews .rwall__eyebrow { color: var(--accent-brass-deep); }
[data-page="home"] .band--reviews .rwall__title { color: var(--text-primary); }
[data-page="home"] .band--reviews .rwall__links .link { color: var(--brand-navy); }
[data-page="home"] .band--reviews .rwall__toggle {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
[data-page="home"] .band--reviews .rwall__toggle:hover,
[data-page="home"] .band--reviews .rwall__toggle:focus-visible { border-color: var(--accent-brass-deep); background: rgba(169, 120, 66, 0.1); }
/* One small dark panel is allowed, for the aggregate that has to carry
   authority. It is the only dark surface in the light run. */
[data-page="home"] .band--reviews .score {
  background: var(--surface-olive-charcoal);
  color: var(--text-on-dark);
  border: 0;
  padding: var(--s5);
}
[data-page="home"] .band--reviews .score__value { color: var(--text-on-dark); }
[data-page="home"] .band--reviews .score__stars { color: var(--accent-champagne); }
[data-page="home"] .band--reviews .score__count,
[data-page="home"] .band--reviews .score__captured { color: var(--text-on-dark-soft); }

/* ---- 7. Contact and receptionist: the single deliberate dark anchor ---- */
[data-page="home"] .band--contact,
[data-page="home"] .reception {
  background: var(--surface-olive-charcoal);
  color: var(--text-on-dark);
  --fg: var(--text-on-dark);
  --fg-soft: var(--text-on-dark-soft);
  --line: var(--border-on-dark);
  --rule: var(--border-on-dark);
  --focus-ring: var(--text-on-dark);
}
[data-page="home"] .band--contact { padding-bottom: 0; }
[data-page="home"] .reception { padding-top: clamp(2rem, 4vw, 3.5rem); }
[data-page="home"] .band--contact .h-section,
[data-page="home"] .band--contact .lede,
[data-page="home"] .band--contact .chapter__label,
[data-page="home"] .reception .h-section { color: var(--text-on-dark); }
[data-page="home"] .band--contact .chapter__index,
[data-page="home"] .reception__eyebrow { color: var(--accent-champagne); }
[data-page="home"] .band--contact .chapter__rule { background: var(--border-on-dark); }
/* The two closing choices separate by tone and rule, not by two more hues. */
[data-page="home"] .action-panel {
  background: rgba(244, 238, 227, 0.06);
  border: 1px solid var(--border-on-dark);
  color: var(--text-on-dark);
}
[data-page="home"] .action-panel--lead { background: rgba(49, 83, 69, 0.34); border-color: rgba(197, 166, 106, 0.42); }
[data-page="home"] .action-panel__title { color: var(--text-on-dark); }
/* Full ivory, not the 0.78-alpha soft tone: Aarav flagged the panel copy as
   hard to read on the dark surface. */
[data-page="home"] .action-panel__body { color: var(--text-on-dark); line-height: 1.65; max-width: 58ch; }
[data-page="home"] .action-panel__index { color: var(--accent-champagne); }

/* ---- Contact section lift + button feedback, 8 August 2026 ---- *
   Measured before the change at 1440px: 100.8px section padding-top + 49px
   chapter margin + 51.8px head margin over the creds band's own 100.8px
   bottom padding pushed this section ≈ 300px below the rail and hard against
   the assistant panel that follows. Tightened with the existing clamp idiom
   only — the section now enters ≈ 58px earlier and breathes before the
   panel. */
[data-page="home"] .band--contact { padding-top: clamp(2.75rem, 4.5vw, 4.05rem); }
[data-page="home"] .band--contact > .chapter { margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
[data-page="home"] .band--contact .band__head { margin-bottom: clamp(2rem, 3vw, 2.75rem); }

/* Both actions lose the shared button's shrink (scale on press, scaleY fill
   collapse on hover) — Aarav rejected the shrinking treatment here. The
   replacement is the calm, confident idiom this palette already owns:
   the primary fills champagne and flips its label to deep bottle ink, the
   secondary warms its border and label. Colour and surface only; nothing
   moves, nothing glows, 160ms, immediate keyboard focus. */
[data-page="home"] .band--contact .btn {
  transition: color 160ms var(--ease-in-out), background-color 160ms var(--ease-in-out), border-color 160ms var(--ease-in-out);
}
[data-page="home"] .band--contact .btn:active,
[data-page="home"] .band--contact .btn:hover { transform: none; }
[data-page="home"] .band--contact .btn::before { transition: none; }
[data-page="home"] .band--contact .btn:hover::before { transform: none; }
[data-page="home"] .band--contact .btn:hover::after { box-shadow: none; }

/* Green earns its place here as the primary action, and only here. */
[data-page="home"] .band--contact .btn--gold {
  --btn-fill: var(--accent-bottle-green);
  --btn-fg: var(--text-on-dark);
  border: 1px solid rgba(197, 166, 106, 0.55);
}
[data-page="home"] .band--contact .btn--gold:hover,
[data-page="home"] .band--contact .btn--gold:focus-visible {
  background: var(--accent-champagne);
  --btn-fill: var(--accent-champagne);
  --btn-fg: #0b231c;
  color: #0b231c;
  border-color: var(--accent-champagne);
}
[data-page="home"] .band--contact .btn--gold:active {
  background: var(--accent-brass, #c5a66a);
  --btn-fill: var(--accent-brass, #c5a66a);
  border-color: var(--accent-brass, #c5a66a);
}
/* The secondary's hairline was 0.18-alpha ivory — near-invisible at rest.
   A visible rest border, and a warm champagne border + label on hover. */
[data-page="home"] .band--contact .btn--outline {
  --btn-fill: transparent;
  --btn-fg: var(--text-on-dark);
  border: 1px solid rgba(244, 238, 227, 0.45);
}
[data-page="home"] .band--contact .btn--outline:hover,
[data-page="home"] .band--contact .btn--outline:focus-visible {
  border-color: var(--accent-champagne);
  color: var(--accent-champagne);
}
[data-page="home"] .band--contact .btn--outline:active {
  border-color: var(--accent-champagne);
  color: #0b231c;
  background: var(--accent-champagne);
}
[data-page="home"] .band--contact .btn:focus-visible { transition: none; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .band--contact .btn { transition: none; }
}
[data-page="home"] .reception__notice { color: var(--text-on-dark-soft); }
[data-page="home"] .reception__summary { color: var(--text-on-dark); }
[data-page="home"] .reception__index { color: var(--accent-champagne); }
[data-page="home"] .reception__route { border-color: var(--border-on-dark); }

/* ---- Dukes Assistant panel treatment, 8 August 2026 (homepage only) ---- *
   The section read as one field of same-strength near-white: heading, both
   notices and five routes all blended. Three tiers now: champagne identity
   (eyebrow + heading), warm-ivory explanation, muted reassurance with a thin
   champagne rule — and the routes become visibly interactive objects. All
   selectors sit under [data-page="home"] #dukes-receptionist, so the
   standalone /receptionist/ page and every other route are untouched. */
[data-page="home"] #dukes-receptionist .reception__eyebrow {
  margin: 0 0 var(--s3);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-champagne);
}
/* The heading takes the warm accent. Measured against the section's
   surface (--surface-olive-charcoal) at 8.2:1 — comfortably past even the
   4.5:1 body-text bar, at display size. */
[data-page="home"] #dukes-receptionist .h-section { color: var(--accent-champagne); }

/* Two levels of supporting copy, wording untouched. */
[data-page="home"] #dukes-receptionist .reception__notice { color: var(--text-on-dark); }
[data-page="home"] #dukes-receptionist .reception__notice + .reception__notice {
  color: rgba(244, 238, 227, 0.66);
  font-size: var(--t-small);
  border-left: 2px solid var(--accent-champagne);
  padding-left: var(--s4);
}

/* The routes: a whisper of surface at rest, thin separators kept, breathing
   room between choices. */
[data-page="home"] #dukes-receptionist .reception__routes { border-top: 0; }
[data-page="home"] #dukes-receptionist .reception__route {
  border-bottom: 0;
  margin-top: var(--s2);
}
[data-page="home"] #dukes-receptionist .reception__route:first-child { margin-top: 0; }
[data-page="home"] #dukes-receptionist .reception__disclosure {
  background: rgba(244, 238, 227, 0.05);
  border: 1px solid var(--border-on-dark);
  transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1), border-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-page="home"] #dukes-receptionist .reception__summary {
  position: relative;
  min-height: 60px;
  padding: var(--s3) var(--s4);
}
/* The centre-out champagne line: grows from the middle toward both sides on
   hover/focus/open. 160ms, the site's enter curve, explicit properties. */
[data-page="home"] #dukes-receptionist .reception__summary::after {
  content: "";
  position: absolute;
  left: var(--s4);
  right: var(--s4);
  bottom: 0;
  height: 1px;
  background: var(--accent-champagne);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] #dukes-receptionist .reception__disclosure:not([open]):hover {
    background: rgba(244, 238, 227, 0.085);
    border-color: rgba(197, 166, 106, 0.45);
  }
  [data-page="home"] #dukes-receptionist .reception__summary:hover::after { transform: scaleX(1); }
}
/* Keyboard focus is immediate: no easing on the way in. */
[data-page="home"] #dukes-receptionist .reception__summary:focus-visible::after {
  transition: none;
  transform: scaleX(1);
}
/* The open route: stronger surface, champagne label, and the revealed answer
   shares the same surface so summary and body read as one object. */
[data-page="home"] #dukes-receptionist .reception__disclosure[open] {
  background: rgba(244, 238, 227, 0.1);
  border-color: rgba(197, 166, 106, 0.55);
}
[data-page="home"] #dukes-receptionist .reception__disclosure[open] .reception__label {
  color: var(--accent-champagne);
  font-weight: 700;
}
[data-page="home"] #dukes-receptionist .reception__disclosure[open] .reception__summary::after { transform: scaleX(1); }
[data-page="home"] #dukes-receptionist .reception__body { padding: var(--s2) var(--s4) var(--s5); }

/* Composition: one restrained vertical rule between the introduction and the
   selector at the two-column width; it disappears with the columns. */
@media (min-width: 64em) {
  [data-page="home"] #dukes-receptionist .reception__routes {
    border-left: 1px solid var(--border-on-dark);
    padding-left: var(--s6);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-page="home"] #dukes-receptionist .reception__disclosure,
  [data-page="home"] #dukes-receptionist .reception__summary::after {
    transition: none;
  }
}
/* Warm ivory inputs rather than stark white rectangles. */
[data-page="home"] .reception .form__control,
[data-page="home"] .band--contact .form__control {
  background: var(--surface-ivory);
  color: var(--text-ink);
  border: 1px solid var(--border-brass);
}

/* ---- Focus, on every surface ---- */
[data-page="home"] .band--contact :focus-visible,
[data-page="home"] .reception :focus-visible,
.legalstrip :focus-visible { outline: 2px solid var(--accent-champagne); outline-offset: 2px; }

/* ---- The chapter rule, brought onto the system ---- *
   This component predates the palette and was still reading the old --copper
   and --ink-soft values. Against the new paper and limestone surfaces those
   land at 3.65:1, 4.17:1 and 3.81:1 — axe caught all three. The numbered
   plate and its label are small text, so they take the deep brass and the ink
   rather than the decorative brass.                                          */
[data-page="home"] .chapter__index { color: var(--accent-brass-deep); }
[data-page="home"] .chapter__label { color: var(--text-primary); }
[data-page="home"] .chapter__rule { background: var(--border-subtle); }

/* The dark anchor keeps champagne, which clears 7:1 there. */
[data-page="home"] .band--contact .chapter__index,
[data-page="home"] .reception .chapter__index { color: var(--accent-champagne); }
[data-page="home"] .band--contact .chapter__label { color: var(--text-on-dark); }
[data-page="home"] .band--contact .chapter__rule { background: var(--border-on-dark); }

/* ========================================================================== *
 *  COLOUR SYSTEM — promoted site-wide
 *
 *  The homepage was the approval prototype and it is approved, so the system
 *  now applies to all sixteen pages.
 *
 *  This is done by redefining the three earlier generations of primitive in
 *  terms of the approved semantic tokens, rather than by restyling ~177 call
 *  sites one at a time. Every component that already reads --bone, --bottle,
 *  --copper or --sand keeps working untouched and simply renders in the new
 *  palette, which is what keeps the secondary pages consistent with the
 *  homepage instead of drifting into a second dialect of it.
 *
 *  The relative roles are preserved exactly — page surface stays lighter than
 *  raised, raised stays lighter than sunk, and the deep surface stays deeper
 *  than the mid one — so existing light/dark rhythm decisions still read the
 *  way their authors intended.
 * ========================================================================== */

:root {
  /* One new primitive: the deepest surface, for footers and the base of a
     dark chapter. Everything else is already declared above. */
  --surface-dark-deep: #141813;

  /* ---- Warm neutrals replace the bone family ---- */
  --bone: var(--surface-paper);
  --bone-raised: var(--surface-ivory);
  --bone-sunk: var(--surface-limestone);

  /* ---- Bottle green stops being the default dark ----
     Green is no longer a surface. It survives as an action colour and as a
     small landlord-side cue, which is where it means something. */
  --bottle: var(--surface-olive-charcoal);
  --bottle-deep: var(--surface-dark-deep);
  --forest-shade: var(--surface-dark-deep);

  /* ---- Ink ---- */
  --ink: var(--text-ink);
  --ink-soft: var(--text-muted);
  --on-deep: var(--text-on-dark-warm);
  --on-deep-soft: var(--text-on-dark-soft);

  /* ---- Metals ----
     --copper carried small labels all over the site, so it takes the
     text-safe deep brass rather than the decorative one. --sand sat on dark
     surfaces, where champagne clears 7:1. */
  --copper: var(--accent-brass-deep);
  --copper-deep: #573716;
  --sand: var(--accent-champagne);

  /* ---- Lines ---- */
  --rule: var(--border-subtle);
  --rule-strong: var(--border-strong);
  --rule-on-deep: var(--border-on-dark);

  /* Crest red stays exactly what it was: a micro-accent, never a surface. */
}

/* Page surface for every page, not just the approved one. */
body { background: var(--surface-page); color: var(--text-primary); }

/* ---- Actions ----
   The primary control is where bottle green earns its keep. Everything else
   that used to be a green block is now a neutral surface, so the one green
   thing on a page is the thing you are meant to press. */
.btn--primary {
  --btn-fill: var(--accent-bottle-green);
  --btn-fg: var(--text-on-dark-warm);
}
.btn--primary:hover,
.btn--primary:focus-visible { --btn-fill: #274539; }

/* Two hardcoded bottle-deep values predate the token system and would have
   stayed green on the search hero. */
.hero--search .btn--primary {
  --btn-fill: var(--accent-champagne);
  --btn-fg: var(--text-ink);
  border-color: var(--accent-champagne);
  color: var(--text-ink);
}

/* ---- Dark chapters on secondary pages ----
   Same warm near-black as the homepage's contact anchor, so a dark band on
   /landlords/ and a dark band on / are recognisably the same material. */
.band--dark { background: var(--surface-dark); color: var(--text-on-dark-warm); }
.band--dark .chapter__index { color: var(--accent-champagne); }
.band--dark .chapter__label { color: var(--text-on-dark-warm); }
.band--dark .chapter__rule { background: var(--border-on-dark); }

/* Service and search heroes take the light surface: they open a page, they do
   not need to announce themselves with a colour. */
.hero--service { background: var(--surface-page); }
.hero--search { background: var(--surface-dark); color: var(--text-on-dark-warm); }

/* Forms: warm ivory fields, never stark white rectangles. */
.form__control,
.search__control { background: var(--surface-ivory); color: var(--text-ink); border-color: var(--border-strong); }
.form__control:hover,
.form__control:focus-visible { border-color: var(--accent-brass-deep); }

/* Tables and comparison areas group with tone, not with another hue. */
.package-grid > *,
.facts__row,
.evidence__list > * { background: var(--surface-raised); border-color: var(--border-subtle); }

/* ---- Secondary-text colours that the promotion exposed ---- *
   The site-wide pass moved several surfaces darker or lighter than the colours
   sitting on them expected. These are the pairs axe found once every page was
   measured rather than just the homepage.                                    */

/* Muted ink is a light-surface colour. Anywhere it landed on a dark panel it
   was reading at 2.7:1, so those places take the on-dark tone instead. */
/* Scoped: .stage__step also appears on the valuation form, which is on a light
   surface. An unscoped on-dark colour there was light type on light paper. */
.band--dark .mount__meta,
.band--dark .mount__summary,
.band--dark .stage__step,
.hero--search .stage__step { color: var(--text-on-dark-soft); }
/* Small uppercase step counter. Deep brass rather than muted ink: it is a
   wayfinding label, and at 12px it needs the headroom. */
.stage__step { color: var(--accent-brass-deep); opacity: 1; }
.stage__title { color: var(--text-primary); }

/* The media mount plates are internal art-direction furniture, but they are
   still rendered text and still have to be legible. They were using faded
   greys on near-white. */
.mount__title { color: var(--text-primary); }
.mount__id,
.mount__meta,
.mount__summary,
.mount__replace { color: var(--text-muted); }
.mount__flag { color: var(--accent-brass-deep); }
.mount__banner { background: var(--surface-ivory); border: 1px solid var(--border-subtle); }

/* The mount's storyboard scene is a mid-grey panel; dark text on it was
   reading at 2.4:1. Light type on the scene, dark type on the plate. */
.mount__scene { background: var(--surface-mushroom); }
.mount__scene .mount__flag,
.mount__scene .mount__title,
.mount__scene .mount__id { color: var(--text-ink); }

/* ---- Two permanent fades that were doing the job twice ---- */

/* The valuation form dims the steps you are not on. Dimming a heading to the
   point it cannot be read is not the same as disabling a control, and these
   fieldsets are not disabled — they are the map of where the form is going. */
fieldset.stage { opacity: 1; filter: none; }

/* ---- The valuation form's fieldsets ---- *
   `.stage` is used twice in this codebase: the hero film container and each
   step of the valuation form. Two unscoped `.stage` rules written for the hero
   were painting the form's fieldsets near-black and absolutely positioning
   them, which is why a brass step label was sitting on a dark panel. The form
   takes a raised light surface, like every other form panel in the system.  */
fieldset.stage {
  position: static;
  inset: auto;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
fieldset.stage .stage__title { color: var(--text-primary); }
fieldset.stage .stage__step { color: var(--accent-brass-deep); }

/* ---- The route dock on a phone ---- *
   Three routes in a two-column grid left a dead cell in the bottom right. The
   third route takes the full width instead: two decisions side by side, one
   beneath, and no empty box.                                                */
@media (max-width: 47.99em) {
  .hero--stage .dock__item:last-child { grid-column: 1 / -1; }
}

/* ---- The launcher wears the crown ---- */
.launcher__glyph {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
}
.launcher__crown {
  width: 100%;
  height: auto;
  /* The artwork is used as supplied: no filter, no recolour, no monochrome. */
  filter: none;
}


/* ====================== Receptionist showcase (04) ======================= *
   The assistant presented as part of the offer. Paper surface, because the
   chapter above it is paper too and there is no functional reason to change
   material — spacing and a rule do the separating.                          */
[data-page="home"] .band--showcase { background: var(--surface-page); }

.showcase { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 64em) {
  .showcase { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.showcase__copy .lede { margin-top: var(--s4); max-width: 52ch; }
.showcase__points { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; gap: 0; }
.showcase__point { padding: var(--s5) 0; border-top: 1px solid var(--border-subtle); }
.showcase__point:last-child { border-bottom: 1px solid var(--border-subtle); }
.showcase__point-title {
  margin: 0 0 6px;
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.showcase__point-body { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--text-secondary); max-width: 50ch; }
.showcase__actions { margin: var(--s7) 0 0; }
.showcase__status {
  margin: var(--s3) 0 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  max-width: 52ch;
}

[data-page="home"] .band--creds { background: var(--surface-muted); }

/* ---- Memberships & Portals refinement, 8 August 2026 (section-scoped) ---- *
   Measured before the change at 1440px: 100.8px of section padding-top on
   top of the reviews band's own 100.8px padding-bottom, then a 49px chapter
   margin and a 51.8px head margin — over 200px of air before the heading,
   which detached the section from the page. Tightened with the existing
   clamp spacing idiom only; no transforms, no negative margins, no overlap.
   Net lift ≈ 58px at 1440px, proportionally less at narrow widths. */
[data-page="home"] .band--creds { padding-top: clamp(2.75rem, 4.5vw, 4.05rem); }
[data-page="home"] .band--creds .chapter { margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
[data-page="home"] .band--creds .band__head { margin-bottom: clamp(2rem, 3vw, 2.75rem); }

/* The heading and its supporting line were reading as furniture on the sand
   surface: the lede sat at rgb(86,83,74) / weight 400 (≈4.6:1). Full ink and
   a half-step of weight lift it to immediately readable (≈9:1) without a
   card, a box or any rewording. Reading width capped at a comfortable
   measure; line-height kept generous. */
[data-page="home"] .band--creds .h-section { color: var(--ink); }
[data-page="home"] .band--creds .lede {
  color: var(--ink);
  font-weight: 500;
  max-width: 56ch;
  line-height: 1.6;
}

/* ---- Narrow-width guards for the two new chapters ---- *
   Grid and flex children default to min-width:auto, so they refuse to shrink
   below their content and push the whole page wider than the viewport. At
   320px that was 215px of horizontal overflow.                              */
.showcase > *,
.showcase__copy,
.showcase__points { min-width: 0; }
.creds__wordmark { overflow-wrap: anywhere; }


/* ---- The review wall must not push the page wider than the phone ---- *
   Its track is a deliberately over-wide strip of cloned cards. The window
   around it was not clipping horizontally at the narrowest widths, so a card
   sitting past the right edge dragged the document's scroll width out with it
   (215px of overflow at 320px, 164px at 375px).
   `clip`, never `hidden`: hidden would make this a scroll container and break
   the sticky header above it.                                               */
.rwall,
.rwall__window,
.rwall__wall { overflow-x: clip; }

/* The band is the boundary that matters: nothing inside the review chapter may
   extend the document. `clip` keeps it from becoming a scroll container. */
.band--reviews { overflow-x: clip; }

/* A chapter label is a short tag, not a sentence. This keeps an over-long one
   from refusing to wrap and dragging the document wider than the viewport,
   which a 53-character label did at 320px. */
.chapter__label { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.chapter { flex-wrap: wrap; }

/* The Why Dukes image is landscape now, so its frame is too. Forcing a 16:9
   architectural view into a 4:5 portrait crop would have thrown away the
   station frontage, which is the only reason to use the picture. */
.welcome__photo--wide { aspect-ratio: 16 / 9; }
@media (min-width: 64em) {
  .welcome__photo--wide { aspect-ratio: 4 / 3; }
}


/* ============================ The launcher ============================== *
   It was a near-black disc with a champagne ring and a shimmer sweep across
   it. Three problems: the crown carries navy, gold and red linework and goes
   muddy on a dark disc (the same logo-safe rule the header and footer already
   follow — the crown is part of the mark, so it is covered by it); a ring plus
   a wide dark halo reads as a glow rather than as a control; and a shimmer
   that sweeps across a brand mark is exactly the detail that makes premium
   look cheap.

   It is now the same warm parchment as the header, with one brass hairline and
   a tight contact shadow. The crown sits on light, where it was designed to.  */

.launcher {
  background: var(--surface-parchment);
  color: var(--text-ink);
  border: 1px solid var(--border-brass);
  /* A contact shadow, not a halo: short offset, tight blur, low alpha. */
  box-shadow: 0 6px 18px -8px rgba(28, 33, 31, 0.45);
  overflow: visible;
  transition:
    background-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.launcher:hover,
.launcher:focus-visible {
  background: var(--surface-ivory);
  border-color: var(--accent-brass);
  box-shadow: 0 10px 24px -10px rgba(28, 33, 31, 0.5);
}
.launcher:focus-visible { outline: 2px solid var(--accent-brass-deep); outline-offset: 3px; }
.launcher:active { transform: translateY(1px); }

/* The shimmer goes entirely. */
.launcher__glint { display: none !important; }

.launcher__text { color: var(--text-ink); font-weight: 700; }
.launcher__sub { color: var(--text-secondary); }

/* The disc below the desktop breakpoint. */
@media (max-width: 63.99em) {
  [data-enhanced] .launcher {
    border-color: var(--border-brass);
    background: var(--surface-parchment);
  }
  [data-enhanced] .launcher .launcher__glyph { color: inherit; }
}

/* The crown is given room to breathe rather than filling the disc edge to
   edge, which is what made it read as a sticker. */
.launcher__glyph { width: 30px; height: 30px; }
.launcher__crown { width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  .launcher { transition: none; }
  .launcher:active { transform: none; }
}

/* At desktop the crown sits beside the label rather than stacked above it, so
   the whole thing reads as one control instead of a small card with a mark
   dropped in the corner. */
@media (min-width: 64em) {
  [data-enhanced] .launcher {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s3);
    padding: 14px var(--s5) 14px var(--s4);
  }
  [data-enhanced] .launcher .launcher__glyph { display: grid; width: 34px; height: 34px; }
}


/* ===================== Credentials rail, as a marquee =================== *
   Driven entirely by a CSS animation rather than a JavaScript loop, and that
   is the load-bearing decision. A rAF loop has to be told to stop when the tab
   is hidden and told to start again when the reader comes back, which is
   exactly the case that gets missed: leave the page, return, and the rail is
   dead. A CSS animation is suspended and resumed by the browser itself, so
   returning to the tab, restoring from the back-forward cache, or coming back
   from another app all continue from where it stopped, with no code.

   Pause on hover and on keyboard focus is then one declaration, and it pauses
   in place rather than snapping.                                            */

.creds { position: relative; }

.creds__viewport {
  overflow: hidden;
  /* The rail fades out at both edges instead of being guillotined by the
     section, so items enter and leave rather than appearing and vanishing. */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.creds__track {
  list-style: none;
  margin: 0;
  padding: var(--s2) 0;
  display: flex;
  width: max-content;
  gap: var(--s4);
  animation: creds-roll 56s linear infinite;
  /* Promoted once, so the loop does not repaint the whole band every frame. */
  will-change: transform;
}

@keyframes creds-roll {
  from { transform: translate3d(0, 0, 0); }
  /* Exactly half: the second copy of the list lands where the first began. */
  to { transform: translate3d(-50%, 0, 0); }
}

/* Pause in place. `:focus-within` covers the keyboard, not just the pointer. */
.creds:hover .creds__track,
.creds:focus-within .creds__track { animation-play-state: paused; }

.creds__item { flex: 0 0 auto; }

.creds__card {
  display: grid;
  gap: var(--s3);
  align-content: center;
  justify-items: center;
  width: 208px;
  min-height: 124px;
  padding: var(--s4) var(--s5);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  text-align: center;
  color: var(--text-primary);
  transition:
    border-color 260ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* The whole rail slows and the card under the pointer lifts its keyline. No
   scale, no shadow bloom: the rail is already the moving thing on screen. */
.creds__item:hover .creds__card {
  border-color: var(--accent-brass);
  box-shadow: 0 10px 24px -18px rgba(28, 33, 31, 0.5);
}

.creds__mark { display: grid; place-items: center; min-height: 44px; width: 100%; }
.creds__logo { max-width: 100%; max-height: 44px; width: auto; height: auto; }

/* Until each approved brand file arrives, a wordmark set in the site's own
   display face. Never an imitation of somebody else's mark. */
.creds__wordmark {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--text-primary);
}

.creds__kind {
  font-size: 0.6563rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-brass-deep);
}

/* Reduced motion: the rail stops being a rail. Every item is present and
   readable in a static wrapped grid rather than being hidden off-track. */
@media (prefers-reduced-motion: reduce) {
  .creds__viewport { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .creds__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .creds__item[aria-hidden="true"] { display: none; }
  .creds__item:hover .creds__card { box-shadow: none; }
}
[data-motion="static"] .creds__viewport { overflow: visible; mask-image: none; -webkit-mask-image: none; }
[data-motion="static"] .creds__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
[data-motion="static"] .creds__item[aria-hidden="true"] { display: none; }


/* ---- Credentials rail: review fixes ---- */

/* Optical scale per record. Normalising by bounding box alone leaves a wide
   wordmark tiny beside a near-square mark. */
.creds__logo { max-height: calc(40px * var(--logo-scale, 1)); max-width: 100%; width: auto; }

/* Every plate identical regardless of whether its label wraps. One record's
   two-line label was shifting its whole content block up by 9px, which on a
   moving rail reads as a wobble. */
.creds__card { grid-template-rows: 44px auto; align-content: start; }
.creds__kind { align-self: start; }

/* The fade has to be at least a card wide or plates are guillotined rather
   than dissolving. 6% was 21px against a 208px card at 390. */
.creds__viewport {
  mask-image: linear-gradient(90deg, transparent 0, #000 200px, #000 calc(100% - 200px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 200px, #000 calc(100% - 200px), transparent 100%);
}

/* Below the tablet breakpoint the rail stops rolling and becomes the static
   wrapped grid that already exists for reduced motion. A 208px card inside a
   350px viewport can never show a whole plate, so on a phone the marquee was
   guaranteed to display two half-cut cards and nothing else. */
@media (max-width: 47.99em) {
  .creds__viewport { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .creds__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s3);
  }
  .creds__item[aria-hidden="true"] { display: none; }
  .creds__card { width: 100%; min-height: 108px; }
  .creds__item { flex: 1 1 150px; max-width: 220px; }
}


/* ====================== The receptionist conversation =================== *
   A transcript, not a form. Assistant on the left in ivory, the reader on the
   right in olive-charcoal, chips and a single input along the bottom.        */

.chat {
  width: min(30rem, calc(100vw - 2rem));
  max-height: min(84vh, 44rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-brass);
  border-radius: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(20, 24, 19, 0.8);
}
.chat::backdrop { background: rgba(20, 24, 19, 0.62); }
/* Flex, not grid with positional tracks. The progress bar is conditional, so a
   fixed list of rows shifted every child up one whenever it was absent and the
   closing note landed on top of the answer buttons, swallowing their clicks. */
.chat[open] { display: flex; flex-direction: column; }
.chat > * { flex: none; }
.chat__log { flex: 1 1 auto; min-height: 0; }

/* ---- Head ---- */
.chat__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--surface-olive-charcoal);
}
.chat__crown { width: 38px; height: auto; flex: none; }
.chat__id { display: grid; gap: 1px; margin-right: auto; }
.chat__title { margin: 0; font-family: var(--font-display); font-size: 1.0625rem; color: var(--text-on-dark); }
.chat__role { margin: 0; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--accent-champagne); }
.chat__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  background: none;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-on-dark);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .chat__close:hover { color: var(--accent-champagne); }
}
.chat__close:focus-visible { outline: 2px solid var(--accent-champagne); outline-offset: -4px; }

/* ---- Persistent status. Stays visible for as long as the builder is open. ---- */
.chat__banner {
  margin: 0;
  padding: 9px var(--s5);
  background: var(--accent-brass-deep);
  color: var(--surface-ivory);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chat__progress {
  margin: 0;
  padding: 7px var(--s5);
  background: var(--surface-parchment);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-brass-deep);
}

/* ---- Transcript ---- */
.chat__log {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s5);
  display: grid;
  gap: var(--s3);
  align-content: start;
}
/* One step at a time, not a growing transcript: nothing here is replayed. */
.chat__prompt {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--text-ink);
}
.chat__bubble {
  margin: 0;
  max-width: 100%;
  padding: 11px 14px;
  background: var(--surface-ivory);
  border: 1px solid var(--border-subtle);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-primary);
}
/* Safety and closing notices: brass keyline, never a red error box. */
.chat__bubble--safety {
  background: var(--surface-parchment);
  border-left: 3px solid var(--accent-brass);
}
/* Inline validation, next to the field it belongs to and in the live region
   that already wraps the whole panel — never a separate error box. */
.chat__error {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid var(--crest);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.chat__error[hidden] { display: none; }

.chat__guide-link {
  justify-self: start;
  font-size: 0.8125rem;
  color: var(--accent-brass-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .chat__guide-link:hover { color: var(--text-ink); }
}

.chat__summary {
  margin: 0;
  padding: var(--s4);
  background: var(--surface-ivory);
  border: 1px solid var(--border-subtle);
  display: grid;
  gap: var(--s3);
  font-size: 0.875rem;
}
.chat__summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "key edit" "value edit";
  align-items: center;
  column-gap: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border-subtle);
}
.chat__summary-row:last-child { padding-bottom: 0; border-bottom: 0; }
.chat__summary-key { grid-area: key; margin: 0; color: var(--accent-brass-deep); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; }
.chat__summary-value { grid-area: value; margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.chat__summary-edit {
  grid-area: edit;
  align-self: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--border-strong);
  font: inherit;
  font-size: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .chat__summary-edit:hover { border-color: var(--accent-brass-deep); color: var(--accent-brass-deep); }
}
.chat__summary-edit:focus-visible { outline: 2px solid var(--accent-brass-deep); outline-offset: 2px; }

/* ---- Answer area ---- */
.chat__foot {
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-parchment);
  display: grid;
  gap: var(--s3);
}
.chat__chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chat__chip {
  min-height: 44px;
  padding: 10px 15px;
  background: var(--surface-ivory);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .chat__chip:hover { background: var(--surface-page); border-color: var(--accent-brass-deep); }
}
.chat__chip:focus-visible { outline: 2px solid var(--accent-brass-deep); outline-offset: 2px; }
/* Marks the answer already on record when a question is revisited, so
   stepping back or editing from the summary never looks unanswered. */
.chat__chip--selected { border-color: var(--accent-bottle-green); background: var(--surface-page); }

.chat__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); }
.chat__input {
  min-height: 48px;
  padding: 12px 14px;
  background: var(--surface-ivory);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--text-primary);
  resize: vertical;
}
.chat__input:focus-visible { outline: 2px solid var(--accent-brass-deep); outline-offset: -1px; border-color: var(--accent-brass-deep); }
.chat__send {
  width: 48px;
  min-height: 48px;
  display: grid;
  place-items: center;
  background: var(--accent-bottle-green);
  border: 1px solid var(--accent-bottle-green);
  border-radius: 0;
  font-size: 1.15rem;
  color: var(--text-on-dark);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .chat__send:hover { background: #274539; }
}
.chat__send:focus-visible { outline: 2px solid var(--accent-brass-deep); outline-offset: 2px; }

.chat__stepctrls { display: flex; flex-wrap: wrap; gap: var(--s4); }
.chat__back {
  justify-self: start;
  min-height: 44px;
  padding: 0 2px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .chat__back:hover { color: var(--accent-brass-deep); }
}

/* The four contact actions. Equal weight: the brief ranks none of them above
   the others, so neither does this. */
.chat__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.chat__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 var(--s5);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .chat__action:hover { border-color: var(--accent-brass-deep); color: var(--accent-brass-deep); }
}
.chat__action--email,
.chat__action--whatsapp,
.chat__action--call {
  background: var(--accent-bottle-green);
  border-color: var(--accent-bottle-green);
  color: var(--text-on-dark);
}
@media (hover: hover) and (pointer: fine) {
  .chat__action--email:hover,
  .chat__action--whatsapp:hover,
  .chat__action--call:hover { background: #274539; border-color: #274539; color: var(--text-on-dark); }
}

.chat__copy-status {
  margin: 0;
  min-height: 1em;
  font-size: 0.8125rem;
  color: var(--accent-brass-deep);
}

/* The urgent-safety interstitial's single acknowledgement control. */
.chat__send-full {
  width: 100%;
  min-height: 46px;
  background: var(--accent-bottle-green);
  border: 1px solid var(--accent-bottle-green);
  border-radius: 0;
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-on-dark);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .chat__send-full:hover { background: #274539; }
}
.chat__send-full:focus-visible { outline: 2px solid var(--accent-champagne); outline-offset: 2px; }

/* A phone gets the full height: a conversation is the task, not an overlay. */
@media (max-width: 47.99em) {
  .chat {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    margin: 0;
    border: 0;
  }
  .chat__bubble { max-width: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  .chat__chip,
  .chat__input,
  .chat__close,
  .chat__send,
  .chat__send-full,
  .chat__back,
  .chat__guide-link,
  .chat__summary-edit,
  .chat__action { transition: none; }
}


/* ---- Bigger plates: the marks were unreadable at 208px ---- *
   A 208px card with a 40px logo box left OnTheMarket about 24px tall. The
   plate now gives each mark a 200x72 field, and the mark is constrained on
   both axes so a wide wordmark and a near-square badge read at the same
   optical weight rather than the same bounding box.                        */
.creds__card { width: 300px; min-height: 150px; padding: var(--s5) var(--s5); gap: var(--s4); }
.creds__mark { min-height: 72px; }
.creds__logo {
  max-height: calc(60px * var(--logo-scale, 1));
  max-width: calc(200px * var(--logo-scale, 1));
  width: auto;
  height: auto;
}
.creds__viewport {
  mask-image: linear-gradient(90deg, transparent 0, #000 290px, #000 calc(100% - 290px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 290px, #000 calc(100% - 290px), transparent 100%);
}
@media (max-width: 47.99em) {
  .creds__card { width: 100%; min-height: 120px; padding: var(--s4); }
  .creds__item { flex: 1 1 160px; max-width: 240px; }
  .creds__mark { min-height: 56px; }
  .creds__logo { max-height: calc(46px * var(--logo-scale, 1)); max-width: calc(150px * var(--logo-scale, 1)); }
}

/* ---- Logos supplied on a white field ---- *
   Rightmove and OnTheMarket arrived as flattened files with a white
   background, which showed as a bright rectangle sitting inside the ivory
   plate. `multiply` drops white to transparent against the plate while leaving
   every brand colour exactly as supplied — no desaturation, no recolouring,
   which both companies' guidelines require.                                 */
.creds__logo { mix-blend-mode: multiply; }

/* ================= Credentials rail: legibility fixes ================== *
   Three faults, all visible on a phone at once.

   1. The edge fade was eating the rail. A 290px mask against a 350px mobile
      viewport meant no plate ever reached full opacity — the whole band looked
      like a failed image load. It is now a short, honest fade, and it is off
      entirely below the tablet breakpoint where there is no room for it.
   2. The mark row was 44px while the mark box was 72px, so every logo taller
      than 44px overprinted its own label. On PRS and ICO, which carry their own
      sub-wordmarks, two lines of text printed straight through each other.
   3. No hover response.                                                     */

.creds__viewport {
  mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

/* The mark row matches the mark box, so nothing can print over the label. */
.creds__card { grid-template-rows: 72px auto; }

/* A small lift, on pointer and on touch. The rail is already pausing under the
   pointer, so the plate has room to answer. */
.creds__card { will-change: transform; }
.creds__item:hover .creds__card,
.creds__item:focus-within .creds__card {
  transform: translateY(-4px);
  border-color: var(--accent-brass);
  box-shadow: 0 14px 26px -20px rgba(28, 33, 31, 0.55);
}

@media (max-width: 47.99em) {
  /* No fade at all: at this width it only ever hid content. */
  .creds__viewport { mask-image: none !important; -webkit-mask-image: none !important; }
  .creds__card { grid-template-rows: 56px auto; }
  /* Two even columns rather than a flex wrap that produced ragged rows. */
  .creds__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .creds__item { flex: none; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .creds__item:hover .creds__card,
  .creds__item:focus-within .creds__card { transform: none; }
}

/* The answer panel keeps its height while the receptionist is thinking, so the
   dialog does not deflate and re-inflate on every step. */
.chat__foot { min-height: 76px; align-content: center; }

/* ============== Credentials rail: rolling on every width =============== *
   The static mobile grid read as generic, and losing the motion lost the one
   thing that said "these are partners" rather than "here is a table". The rail
   rolls at every width now, with a short fade at each edge — enough to soften
   the entry and exit, nowhere near enough to grey out the plates.          */
@media (max-width: 47.99em) {
  .creds__viewport {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%) !important;
  }
  .creds__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: creds-roll 46s linear infinite;
    gap: var(--s3);
    justify-content: flex-start;
  }
  .creds__item { flex: 0 0 auto; max-width: none; }
  .creds__item[aria-hidden="true"] { display: block; }
  .creds__card { width: 230px; min-height: 128px; }
}

/* Reduced motion keeps the grid, and the odd ninth plate centres on its own
   row rather than sitting alone against the left edge. */
@media (prefers-reduced-motion: reduce) {
  .creds__track { display: flex; flex-wrap: wrap; justify-content: center; width: auto; animation: none; }
  .creds__item[aria-hidden="true"] { display: none; }
}


/* ============ Credentials rail: discrete row-by-row carousel ============ *
   Everything below supersedes the marquee rules earlier in this file.

   Default state, which is also the no-JavaScript and reduced-motion state: a
   wrapped, centred list with every plate visible. The odd ninth plate centres
   on its own row rather than sitting alone against the left edge.

   `[data-creds-rolling]` is set by creds-rail.mjs once it is actually running,
   and only then does this become a single-row carousel.                     */

.creds__viewport { overflow: visible; mask-image: none; -webkit-mask-image: none; }

.creds__track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: auto;
  gap: var(--s4);
  animation: none;
  list-style: none;
  margin: 0;
  padding: 0;
  transform: none;
}

.creds__item { flex: 0 0 auto; max-width: none; }

/* ---- Rolling ---- */
.creds[data-creds-rolling] .creds__viewport {
  overflow: hidden;
  /* Just enough to soften the entry and the exit. The plates stay legible all
     the way across; an earlier 290px fade greyed out most of the rail. */
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.creds[data-creds-rolling] .creds__track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  will-change: transform;
}

/* ---- The plate ---- */
.creds__card {
  display: grid;
  grid-template-rows: 72px auto;
  gap: var(--s3);
  align-content: center;
  justify-items: center;
  width: 264px;
  min-height: 152px;
  padding: var(--s5);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  text-align: center;
  color: var(--text-primary);
  transition:
    transform 260ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 260ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.creds__item:hover .creds__card,
.creds__item:focus-within .creds__card {
  transform: translateY(-4px);
  border-color: var(--accent-brass);
  box-shadow: 0 14px 26px -20px rgba(28, 33, 31, 0.55);
}

.creds__mark { display: grid; place-items: center; min-height: 72px; width: 100%; }
.creds__logo {
  max-height: calc(58px * var(--logo-scale, 1));
  max-width: calc(190px * var(--logo-scale, 1));
  width: auto;
  height: auto;
  mix-blend-mode: multiply;
}
.creds__wordmark {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--text-primary);
}
.creds__kind {
  font-size: 0.6563rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-brass-deep);
  align-self: start;
}

@media (max-width: 47.99em) {
  .creds__card { width: 216px; min-height: 132px; grid-template-rows: 56px auto; padding: var(--s4); }
  .creds__mark { min-height: 56px; }
  .creds__logo { max-height: calc(46px * var(--logo-scale, 1)); max-width: calc(150px * var(--logo-scale, 1)); }
  .creds[data-creds-rolling] .creds__viewport {
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .creds__track { gap: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  .creds__item:hover .creds__card,
  .creds__item:focus-within .creds__card { transform: none; box-shadow: none; }
}

/* ---- The receptionist head: the crown goes on light ---- *
   The head was olive-charcoal with the genuine crown on it, which contradicts
   the rule this build applies everywhere else — the mark carries navy, gold and
   fine linework and turns to mud on a dark field. The launcher already states
   it: the crown sits on light, where it was designed to. The dialog now agrees,
   and the head reads as a continuation of the site header rather than a
   separate dark bar.                                                        */
.chat__head {
  background: var(--surface-parchment);
  border-bottom: 1px solid var(--border-brass);
}
.chat__title { color: var(--text-ink); }
.chat__role { color: var(--accent-brass-deep); }
.chat__close { color: var(--text-ink); }
@media (hover: hover) and (pointer: fine) {
  .chat__close:hover { color: var(--accent-brass-deep); }
}
.chat__close:focus-visible { outline-color: var(--accent-brass-deep); }

/* ============ Journey gateway: the gallery fits its own band ============ *
   The gallery, its heading and its aside are all set to 1480px so the route
   cards read wider and more cinematic than body copy. The band around them was
   still capped at the standard 1320px content column, and `margin-inline: auto`
   on a child wider than its parent does not centre — it resolves to zero on the
   left and negative on the right. So the whole gallery hung 229px past the
   band's right edge and sat on the page surface outside it.

   Clipping it would have thrown away the intent. The band takes the wider
   measure instead, and everything inside centres honestly within it.        */
.band--journeys {
  max-width: none;
  padding-inline: var(--inset);
}
/* The numbered rule centres on the same measure as the cards it introduces. */
.band--journeys > .chapter {
  width: min(1480px, 100%);
  margin-inline: auto;
}
.band--journeys .band__head,
.band--journeys .gallery,
.band--journeys .gallery__aside,
.band--journeys .gallery__note {
  width: min(1480px, 100%);
}

/* ---- The Google Reviews lockup ---- *
   The review chapter read as typeset quotations rather than as Google reviews.
   The mark says where they came from at a glance, and it sits on the paper
   surface rather than on the dark score panel: the lockup's "Reviews" wordmark
   is mid-grey and would disappear against olive-charcoal, and Google's brand
   terms do not allow recolouring it to fix that.                            */
.rwall__source { margin: 0 0 var(--s4); }
.rwall__source-mark {
  width: clamp(132px, 12vw, 168px);
  height: auto;
  display: block;
  /* The supplied file is flattened on white; multiply drops that to the paper
     behind it without touching a single brand colour. */
  mix-blend-mode: multiply;
}

/* ---- Manual stepping ---- *
   Waiting for the right mark to come round is fine for a decorative logo wall
   and useless for somebody checking whether their deposit scheme is on it.  */
.creds { position: relative; }
.creds__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  background: var(--surface-parchment);
  border: 1px solid var(--border-brass);
  border-radius: 0;
  font-size: 1rem;
  color: var(--text-ink);
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.creds__nav[hidden] { display: none; }
.creds__nav--prev { left: -10px; }
.creds__nav--next { right: -10px; }
.creds__nav:hover { background: var(--surface-ivory); border-color: var(--accent-brass-deep); }
.creds__nav:focus-visible { outline: 2px solid var(--accent-brass-deep); outline-offset: 2px; }
@media (max-width: 47.99em) {
  .creds__nav--prev { left: -6px; }
  .creds__nav--next { right: -6px; }
}

/* ================= Credentials rail: the scrub control ================== *
   The arrows are gone. They only moved you one plate at a time and never said
   where you were in the set; a slider does both, drags on a phone, and takes
   arrow keys, Home and End for free.

   It is a real <input type="range">, restyled rather than replaced, so all of
   that keyboard behaviour is the browser's rather than something to reimplement
   and get subtly wrong.                                                     */

.creds__nav { display: none !important; }

.creds__scrub {
  display: flex;
  justify-content: center;
  margin-top: var(--s5);
}
.creds__scrub[hidden] { display: none; }

.creds__slider {
  -webkit-appearance: none;
  appearance: none;
  width: min(340px, 68%);
  height: 44px; /* the target, not the visible rail */
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: grab;
}
.creds__slider:active { cursor: grabbing; }

/* One hairline track, the same weight as the rules used elsewhere. */
.creds__slider::-webkit-slider-runnable-track {
  height: 2px;
  background: rgba(41, 38, 32, 0.24);
  border-radius: 0;
}
.creds__slider::-moz-range-track {
  height: 2px;
  background: rgba(41, 38, 32, 0.24);
  border-radius: 0;
}

/* A brass marker rather than a round grey knob: square geometry, like the
   rest of the system. */
.creds__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 46px;
  height: 10px;
  margin-top: -4px;
  background: var(--accent-brass-deep);
  border: 0;
  border-radius: 0;
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.creds__slider::-moz-range-thumb {
  width: 46px;
  height: 10px;
  background: var(--accent-brass-deep);
  border: 0;
  border-radius: 0;
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.creds__slider:hover::-webkit-slider-thumb { background: var(--accent-brass); }
.creds__slider:hover::-moz-range-thumb { background: var(--accent-brass); }
.creds__slider:focus-visible { outline: 2px solid var(--accent-brass-deep); outline-offset: 4px; }

@media (max-width: 47.99em) {
  .creds__slider { width: min(280px, 78%); }
  .creds__slider::-webkit-slider-thumb { width: 54px; }
  .creds__slider::-moz-range-thumb { width: 54px; }
}

/* The roll itself is the Web Animations API's, so the stylesheet only has to
   stop competing for the same property. */
.creds[data-creds-rolling] .creds__track { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .creds__scrub { display: none; }
}

/* The range input still carried its own border and radius under the custom
   track, which read as a rounded form control sitting in a square system. */
.creds__slider,
.creds__slider:focus {
  border: 0;
  border-radius: 0;
  outline-offset: 6px;
  background: transparent;
  box-shadow: none;
}
.creds__slider::-moz-focus-outer { border: 0; }
/* Give the rail a hairline the full width of the control so the thumb reads as
   a position along a measure rather than a lone marker. */
.creds__scrub { position: relative; }

/* ---- Notches ---- *
   One detent per credential, so the thumb reads as a position within a known
   set rather than a marker on an unmeasured line. Drawn on the wrapper rather
   than the input's track pseudo-element: the track is a 2px hairline and the
   notches need to stand proud of it, and the three browser engines disagree
   about how tall a range track is allowed to be.                            */
.creds__scrub::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(340px, 68%);
  height: 9px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(41, 38, 32, 0.3) 0 1px,
    transparent 1px calc(100% / var(--creds-count, 9))
  );
  /* The last notch would otherwise fall off the end of the repeat. */
  background-size: calc(100% - 1px) 100%;
  background-repeat: no-repeat;
}
.creds__scrub::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(340px, 68%);
  height: 1px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: rgba(41, 38, 32, 0.3);
}

/* The input sits above the drawn track, and stops drawing its own. */
.creds__slider { position: relative; z-index: 1; }
.creds__slider::-webkit-slider-runnable-track { background: transparent; }
.creds__slider::-moz-range-track { background: transparent; }

/* Grip lines on the thumb, so it reads as something to take hold of. */
.creds__slider::-webkit-slider-thumb {
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 20px,
    rgba(250, 247, 240, 0.55) 20px 21px,
    transparent 21px 24px
  );
}
.creds__slider::-moz-range-thumb {
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 20px,
    rgba(250, 247, 240, 0.55) 20px 21px,
    transparent 21px 24px
  );
}

@media (max-width: 47.99em) {
  .creds__scrub::before,
  .creds__scrub::after { width: min(280px, 78%); }
}

/* ---- Notches removed ---- *
   Nine tick marks across a hairline read as a measuring instrument, not as a
   premium control. The position is legible from the thumb's travel alone.   */
.creds__scrub::before { content: none; }

/* ---- The thumb loses its grip lines ---- *
   A light rule drawn across the middle of the marker read as a crack in it,
   not as something to take hold of. The block alone is the control.         */
.creds__slider::-webkit-slider-thumb { background-image: none; }
.creds__slider::-moz-range-thumb { background-image: none; }

/* A pinned plate says so: it holds the hover keyline rather than snapping back
   to flat the moment the pointer leaves. */
/* Only the plate you actually stopped on is marked, not the whole rail. */
.creds__item[data-pinned] .creds__card { border-color: var(--accent-brass); }
.creds { cursor: default; }
.creds[data-creds-rolling] .creds__item { cursor: pointer; }

/* ---- The track line goes too ---- *
   First the notches, now the rule they sat on. A hairline running out either
   side of the marker is measuring-instrument furniture; the marker's own
   travel across the band already says where you are. What is left is a single
   brass block that moves, which is all the control ever needed to be.       */
.creds__scrub::after { content: none; }
.creds__slider::-webkit-slider-runnable-track { background: transparent; border: 0; }
.creds__slider::-moz-range-track { background: transparent; border: 0; }

/* Slightly wider and softer now it stands alone, so it reads as a considered
   marker rather than a stray rectangle. */
.creds__slider::-webkit-slider-thumb { width: 58px; height: 8px; margin-top: -3px; }
.creds__slider::-moz-range-thumb { width: 58px; height: 8px; }

/* ---- The track line comes back ---- *
   Removing it was a step too far. The notches were the clutter; the rule was
   doing real work — it shows how far the set runs, so the marker's position
   means something instead of floating on an unmeasured field. Restored as one
   hairline, with the notches still gone.                                    */
.creds__scrub::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(340px, 68%);
  height: 1px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: rgba(41, 38, 32, 0.28);
}
@media (max-width: 47.99em) {
  .creds__scrub::after { width: min(280px, 78%); }
}

/* ---- The marker ---- *
   The native thumb is kept for dragging and for the keyboard, and made
   invisible: it can only sit on whole pixels, so at this speed it advanced in
   visible jerks. What is seen is a sibling positioned by transform, which the
   compositor moves in sub-pixels and therefore continuously.                */
.creds__slider::-webkit-slider-thumb { background: transparent; width: 58px; height: 22px; margin-top: -10px; }
.creds__slider::-moz-range-thumb { background: transparent; border: 0; width: 58px; height: 22px; }

.creds__marker {
  position: absolute;
  top: 50%;
  left: calc(50% - min(340px, 68%) / 2);
  width: 58px;
  height: 8px;
  background: var(--accent-brass-deep);
  pointer-events: none;
  transform: translate3d(0, -50%, 0);
  will-change: transform;
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.creds__slider:hover ~ .creds__marker,
.creds__slider:focus-visible ~ .creds__marker { background: var(--accent-brass); }

@media (max-width: 47.99em) {
  .creds__marker { left: calc(50% - min(280px, 78%) / 2); }
}
@media (prefers-reduced-motion: reduce) {
  .creds__marker { will-change: auto; }
}


/* The pointer-tracked tilt and sheen were removed after review. Kept here as a
   note rather than a file, because the reasons are worth not rediscovering:

   * 3deg moved the launcher's corner 1.2px. The two extremes of its travel were
     visually identical — the effect was invisible on the element it was built
     for.
   * The sheen gradient was ~316px across against a 223px launcher, so it could
     not track a pointer; it was a uniform wash. Its one visible effect was
     shifting the genuine crown's reds warm and flattening its golds, which the
     brand rules forbid outright.
   * `transition: transform 260ms` on the card silently reset transition-property
     and, at equal specificity but later in the file, killed the review card's
     -3px hover lift. That lift was the only hover feedback those cards had.
   * On a 288px card, 3deg is 5.6px at a corner and 0.04px at the centre, where
     a pointer actually rests. The only perceptible result was body copy losing
     subpixel antialiasing.

   The binding visual brief bans 3D tilts by name, twice. It was right. */


/* ============================ The footer ================================ *
   Measured against Apex's, which reads denser than ours and is worth being
   honest about why: four labelled columns, a contact block at the top, and a
   confident brand field.
   
   Their weakness is that the density is padding. Eighteen visible links resolve
   to about twelve destinations — "Book a Valuation" appears three times,
   "Commercial Property" and "Property EPC Ratings" twice each. Columns filled
   by repetition look complete and waste the reader's time.
   
   So this does not copy the grid. It fixes the two things that actually made
   ours weaker — one sparse column on a phone, and no contact block at all —
   and keeps the one thing Apex cannot claim: every destination appears exactly
   once, and the legal identity links to the public record rather than to a page
   about itself.                                                             */

/* Two columns on a phone. One column for six links was a whole screen of
   almost nothing, which is the entire reason theirs felt more substantial. */
.site-foot__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
@media (min-width: 48em) {
  .site-foot__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.site-foot__list { display: grid; gap: 2px; }
.site-foot__list li { margin: 0; }
.site-foot__link {
  display: inline-block;
  padding: 7px 0;
  line-height: 1.35;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-foot__link:hover,
.site-foot__link:focus-visible { border-bottom-color: var(--accent-brass); }

/* ---- Contact ---- */
.site-foot__contact { margin: var(--s5) 0 0; font-style: normal; }
.site-foot__office-label {
  margin: 0 0 3px;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-brass-deep);
}
.site-foot__office { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--text-primary); max-width: 26ch; }

.site-foot__reach { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: var(--s4) 0 0; }
.site-foot__reach-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-brass);
}
.site-foot__reach-link span { transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); display: inline-block; }
.site-foot__reach-link:hover span,
.site-foot__reach-link:focus-visible span { transform: translateX(3px); }

/* ---- The provenance note, moved down ---- *
   It has to stay — the film's licence is genuinely unconfirmed and the footer
   is where that is recorded. It does not have to be the loudest thing above
   the fold of the footer, which is what a bordered block in the main flow made
   it. It sits with the legal line instead, in the same quiet register.       */
.legalstrip { padding-block: var(--s4); }
.legalstrip__note {
  max-width: var(--max);
  margin: 0 auto var(--s2);
  font-size: 0.75rem;
  line-height: 1.55;
  color: rgba(244, 238, 227, 0.6);
}

/* The evidence group carries six links against the other two columns' three or
   four, so on a phone it takes the full width and lays them out two-up rather
   than running a long thin column down one side with dead space beside it. */
@media (max-width: 47.99em) {
  .site-foot__group:last-child { grid-column: 1 / -1; }
  .site-foot__group:last-child .site-foot__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px var(--s5);
  }
}

/* ====================== The compact menu, full screen =================== *
   Measured against Apex's, which is stronger and worth saying why: it commits
   to the whole screen, the rows are large enough to hit without looking, and
   the two actions sit anchored at the bottom where a thumb already is.

   Ours covered about 40% and let the page show through underneath, so it read
   as an unfinished dropdown rather than a menu. That is the fault being fixed.

   What is not copied is the burgundy field. Apex needs a saturated background
   because their mark is gold and has to survive on it; ours is parchment,
   which is the surface the genuine Dukes mark was drawn for.                */

@media (max-width: 63.99em) {
  .menu[open] .menu__panel {
    position: fixed;
    inset: var(--head-h, 61px) 0 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    padding: var(--s5) var(--inset) max(var(--s5), env(safe-area-inset-bottom));
    background: var(--surface-parchment);
    border-top: 1px solid var(--border-brass);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Rows you can hit without aiming. */
  .menu[open] .mnav { flex: 1 1 auto; }
  .menu[open] .mnav__summary,
  .menu[open] .mnav__link--top {
    min-height: 60px;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.01em;
  }
  .menu[open] .mnav__item { border-bottom: 1px solid var(--border-subtle); }
  .menu[open] .mnav__link { min-height: 48px; font-size: 1rem; }
  .menu[open] .mnav__caret { width: 9px; height: 9px; border-width: 2px; }

  /* The actions anchor to the bottom rather than trailing the list, so they
     are where a thumb rests and not wherever the links happen to end. */
  .menu[open] .menu__actions {
    margin-top: auto;
    padding-top: var(--s5);
    border-top: 1px solid var(--border-brass);
    gap: var(--s3);
  }
  .menu[open] .menu__actions .headact { min-height: 54px; font-size: 1rem; }

  /* The button says what pressing it does. A chevron that flips is a glyph
     you have to interpret. */
  .menu__label--close { display: none; }
  .menu[open] .menu__label--close { display: inline; }
  .menu[open] [data-menu-open-label] { display: none; }
}
@media (min-width: 64em) {
  .menu__label--close { display: none; }
}

/* ---- Filling the middle, and making the actions read as actions ---- */
@media (max-width: 63.99em) {
  .menu[open] .mnav { flex: 0 0 auto; }

  .menu__contact { margin-top: var(--s6); }
  .menu__contact-label {
    margin: 0 0 4px;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-brass-deep);
  }
  .menu__contact-office { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--text-primary); max-width: 30ch; }
  .menu__contact-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: var(--s3);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-brass);
  }

  /* Centred, like a button rather than another row in the list. */
  .menu[open] .menu__actions .headact { justify-content: center; text-align: center; }

  /* An X, not a rotated chevron. The hamburger's own bars become the cross. */
  .menu[open] .menu__glyph {
    position: relative;
    background: none;
    border: 0;
    width: 16px;
    height: 16px;
  }
  .menu[open] .menu__glyph::before,
  .menu[open] .menu__glyph::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: var(--text-ink);
  }
  .menu[open] .menu__glyph::before { transform: rotate(45deg); }
  .menu[open] .menu__glyph::after { transform: rotate(-45deg); }
}

/* The glyph is already rotated 45deg by the open state further up, so bars at
   45/-45 landed at 90/0 and drew a plus. Zero the parent and let the bars be
   the only rotation in play. */
@media (max-width: 63.99em) {
  .menu[open] .menu__glyph { transform: none; }
}

/* ==================== The receptionist route list ======================= *
   Five rows that were entirely interactive and looked entirely like text.
   They are <summary> elements, so pressing one opens it — but nothing said so,
   and the 01-05 numbering actively worked against it: numbers read as a
   sequence to complete, when these are five alternatives and a reader picks
   one. The numbers are gone and a caret does the job they were occupying.   */

.reception__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 64px;
  padding: var(--s3) 0;
  cursor: pointer;
  list-style: none;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reception__summary::-webkit-details-marker { display: none; }
.reception__label { font-size: 1.0625rem; line-height: 1.4; }

.reception__caret {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent-champagne);
  border-bottom: 2px solid var(--accent-champagne);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reception__disclosure[open] .reception__caret { transform: rotate(-135deg) translateY(-2px); }

/* It answers to a pointer, so it reads as something you can press. */
.reception__summary:hover { color: var(--accent-champagne); }
.reception__summary:hover .reception__caret { border-color: var(--text-on-dark); }
.reception__summary:focus-visible {
  outline: 2px solid var(--accent-champagne);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .reception__caret { transition: none; }
}

/* ======================== The evidence rail ============================= *
   Seven records, each sized to its own text, so they staggered at seven
   different widths and the eye had nothing to follow. The category label also
   repeated on every card — "COMPANY PARTICULARS" three times, "PUBLISHED
   DOCUMENTS" three times — which is the label doing the grouping's job badly.

   A regular grid, and the label demoted to a quiet tag rather than the loudest
   line on each card. The record's own name leads, because that is the thing a
   reader is looking for.                                                    */

.rail__track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  width: auto;
  animation: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 48em) {
  .rail__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .rail__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.rail__viewport { overflow: visible; mask-image: none; -webkit-mask-image: none; }

.rail__item { min-width: 0; }
.rail__link,
.rail__card {
  display: grid;
  align-content: space-between;
  gap: var(--s3);
  min-height: 108px;
  height: 100%;
  padding: var(--s4);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
a.rail__link:hover,
a.rail__link:focus-visible { border-color: var(--accent-brass); }

/* Name first, category second and quiet. */
.rail__org { font-size: 1rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; order: 1; }
.rail__category {
  order: 2;
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ===================== The hero veil, derived not pasted ================ *
   It was a radial ellipse of near-black dropped over the middle of the film —
   an arbitrary shape with no relationship to the picture underneath, which is
   precisely why it read as a smudge rather than as light.

   The reference here is Apple's: the light belongs to the subject. Their type
   sits in the glow the object in frame is already casting, so nothing looks
   applied. This film has its own light — a bright dusk sky across the top and
   third, and progressively darker land below. So the protection follows that
   luminance instead of ignoring it: almost nothing over the sky, a gentle
   graded weight where the ground already is, and the copy sits in the part of
   the frame that was dark to begin with.

   Not Apex's approach, which is a flat burgundy wash across the whole aerial.
   That guarantees contrast and costs them the photography — their sky, their
   rooftops and their fields all end up one colour.

   Net effect: roughly 40% less darkening overall, and what remains is where
   the eye already expected shadow.                                          */
[data-page="home"] .stage__veil {
  background:
    /* Following the footage: sky stays open, ground carries the weight. */
    linear-gradient(
      180deg,
      rgba(14, 17, 15, 0.12) 0%,
      rgba(14, 17, 15, 0) 26%,
      rgba(14, 17, 15, 0.06) 58%,
      rgba(14, 17, 15, 0.42) 100%
    );
}

/* The eyebrow was champagne type over a moving picture with no ground of its
   own — the thing Apex's gold "REAL ESTATE" gets wrong on burgundy. A short
   rule either side and a text shadow give it an edge to sit against without
   putting it back in a box. */
[data-page="home"] .hero--stage .hero__eyebrow {
  color: #f0dcb8;
  text-shadow: 0 1px 16px rgba(10, 13, 11, 0.95), 0 0 3px rgba(10, 13, 11, 0.7);
}
[data-page="home"] .hero--stage .hero__eyebrow::before,
[data-page="home"] .hero--stage .hero__eyebrow::after { opacity: 0.85; }

/* ================= The copy carries its own light ====================== *
   The veil above no longer tries to protect the words: it only follows the
   film's own luminance. Legibility is now the copy's own job.

   This is the part of the Apple reference that actually matters. Their type is
   readable because the light in the frame belongs to the thing being lit — the
   glow is the subject's, and the words sit inside it. Nothing is laid over the
   picture. A frame-anchored scrim cannot do that anyway: the copy sits near the
   middle of a 1440 hero and near the bottom of a 390 one, so a fixed pool is
   aimed at the right place on exactly one viewport and at empty sky on the rest.

   So the pool travels with the copy. It is heavily blurred and much larger than
   the text, which is what stops it having an edge — an edge is what made the
   previous treatment read as a smudge rather than as light.                  */
[data-page="home"] .hero--stage .hero__copy { position: relative; isolation: isolate; }

[data-page="home"] .hero--stage .hero__copy::before {
  content: "";
  position: absolute;
  inset: -40% -30%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 42% 40% at 50% 50%,
    rgba(12, 15, 13, 0.58) 0%,
    rgba(12, 15, 13, 0.38) 40%,
    rgba(12, 15, 13, 0.16) 66%,
    rgba(12, 15, 13, 0.04) 84%,
    rgba(12, 15, 13, 0) 100%
  );
}
[data-page="home"] .hero--stage .hero__copy > * { position: relative; z-index: 1; }

/* The gold that was hardest to see: the review line, which on a phone lands on
   the brightest sunlit part of the frame. Champagne rather than brass gives it
   the headroom the darker gold never had against that. */
[data-page="home"] .hero--stage .hero__score-label { color: #f2e0bf; }

/* The outlined action was a hairline over rooftops. A dark, slightly blurred
   fill gives it a surface to be an outline on, without turning it into a second
   solid button competing with the primary. */
[data-page="home"] .hero--stage .hero__second {
  background: rgba(12, 15, 13, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-color: rgba(242, 224, 191, 0.5);
}
[data-page="home"] .hero--stage .hero__second:hover {
  background: rgba(12, 15, 13, 0.62);
  border-color: rgba(242, 224, 191, 0.9);
}

/* ============= Hero height: the gateway has to be on screen ============= *
   The hero was tall enough that a phone showed the film and nothing else, so
   the three routes underneath — landlords, tenants, anything else — were an
   act of faith. Shortening it means the top of the gateway is visible without
   scrolling, which is what tells a visitor the site has somewhere to go.

   It got shorter for free as well: "Properties to rent" has been removed from
   the hero because it and "Find a home to rent" in the gateway were the same
   link twice, one directly above the other. Two controls doing one job is the
   thing that reads as filler. The hero keeps a single action, and the gateway
   keeps all three routes, which is the division of labour that was already
   implied by having both.                                                    */
.hero--stage { min-height: clamp(520px, calc(78svh - var(--head-h)), 720px); }
@media (max-width: 47.99em) {
  .hero--stage { min-height: clamp(500px, calc(72svh - var(--head-h)), 680px); }
}
@media (min-width: 64em) {
  .hero--stage { min-height: clamp(560px, calc(82svh - var(--head-h)), 760px); }
}

/* One action, so it should stop pretending to be one of a pair. */
[data-page="home"] .hero--stage .hero__actions { justify-content: center; }

/* ==================== The launcher arrives, and stays =================== *
   The stowing rule is gone from the script, so the old hidden state must not
   be reachable from a stale class either. Belt and braces: nothing hides this
   control now except reduced motion, which only removes the movement.        */
[data-enhanced] .launcher.is-stowed {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

/* Rest state before the entrance. Only applied when the script is running, so
   a JavaScript failure leaves the launcher plainly visible rather than stuck
   at zero opacity waiting for a class that will never arrive. */
[data-enhanced] .launcher {
  opacity: 0;
  /* Before the reveal the launcher was transparent but still hit-testable and
     still in the tab order. At 320px it sits over the Complaints email button,
     so a tap landed on an invisible control. visibility:hidden also takes it
     out of the focus order, which is why no JavaScript is needed here.
     The entrance itself is untouched: visibility flips to visible in the same
     frame the opacity transition starts. */
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 10px, 0) scale(0.72);
  transition:
    opacity 260ms cubic-bezier(0, 0, 0.2, 1),
    /* Overshoot on the way in, so it settles rather than simply stopping.
       420ms is long enough to read as weight and short enough to stay a UI
       gesture rather than an effect. */
    transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
}
[data-enhanced] .launcher[data-launcher-in="on"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Follow-through: the crown finishes after the plate it sits on, which is what
   separates one object arriving from two things moving in lockstep. A small
   counter-rotation gives it something to settle out of. */
[data-enhanced] .launcher .launcher__glyph {
  transform: scale(0.82) rotate(-7deg);
  opacity: 0;
  transition:
    transform 460ms cubic-bezier(0.34, 1.56, 0.64, 1) 110ms,
    opacity 240ms cubic-bezier(0, 0, 0.2, 1) 110ms;
}
[data-enhanced] .launcher[data-launcher-in="on"] .launcher__glyph {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

/* The label trails the crown by the same margin again.
   Transform only, deliberately: fading the label independently set its computed
   opacity below 1, and a contrast checker cannot evaluate text it cannot see
   through — it reported a serious colour-contrast failure on .launcher__text
   and .launcher__sub on every page in the site. The parent already carries the
   fade, so the stagger costs nothing by being movement alone. */
[data-enhanced] .launcher .launcher__text,
[data-enhanced] .launcher .launcher__sub {
  transform: translate3d(-4px, 0, 0);
  transition: transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1) 190ms;
}
[data-enhanced] .launcher[data-launcher-in="on"] .launcher__text,
[data-enhanced] .launcher[data-launcher-in="on"] .launcher__sub {
  transform: none;
}

/* Once it has landed the hint is spent: keeping will-change on a permanently
   composited fixed element for the life of the page is the misuse the property
   is known for. */
[data-enhanced] .launcher[data-launcher-in="on"] { will-change: auto; }

/* The press has to survive the entrance transform rather than replace it. */
[data-enhanced] .launcher[data-launcher-in="on"]:active {
  transform: translate3d(0, 1px, 0) scale(0.97);
  transition: transform 110ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  [data-enhanced] .launcher,
  [data-enhanced] .launcher .launcher__glyph,
  [data-enhanced] .launcher .launcher__text,
  [data-enhanced] .launcher .launcher__sub {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
[data-motion="static"] [data-enhanced] .launcher,
[data-motion="static"] .launcher {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ================= The review summary, as one object =================== *
   Supersedes the earlier .score panel and the .rwall__source / .rwall__links
   stack, which together put five separate blocks between the section heading
   and the first review.                                                     */
.rwall__source, .rwall__links { display: none; }

.score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  padding: 0;
  margin: var(--s5) 0 0;
  background: none;
  border: 0;
  color: var(--text-primary);
}

/* The number and the stars share a baseline instead of the stars sitting in a
   line of their own underneath. Stacked, they read as two unrelated facts; on
   one line they read as a rating, which is what they are. */
.score__line {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin: 0;
}
.score__value {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.4rem + 2.4vw, 4rem);
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: lining-nums tabular-nums;
}
.score__stars {
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.3rem);
  letter-spacing: 0.16em;
  color: var(--accent-brass-deep);
  white-space: nowrap;
}

/* One meta line, not two. The capture date stays: it is the whole difference
   between a rating a visitor can trust and a number with no age on it. */
.score__meta {
  margin: 0;
  font-size: var(--t-small);
  color: var(--text-secondary);
  line-height: 1.5;
}
.score__meta strong { color: var(--text-primary); font-weight: 600; }
.score__sep { color: var(--border-subtle); }

/* The supplied mark, unaltered: full colour, on a light surface, never
   recoloured and never set on a dark panel where its grey "Reviews" would go.
   It is a link now rather than decoration, which is the part Apex leaves on
   the table. */
.score__brand { margin: var(--s2) 0 0; }
.score__brand a {
  display: inline-block;
  border-radius: 2px;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.score__brand a:hover { opacity: 0.78; }
.score__brand a:focus-visible { outline: 2px solid var(--accent-brass-deep); outline-offset: 4px; }
.score__brand-mark { display: block; width: auto; height: 34px; }

.score__acts { margin: var(--s3) 0 0; font-size: var(--t-small); }

@media (max-width: 47.99em) {
  .score__brand-mark { height: 28px; }
}

/* ---- The pause, docked to the wall ---- */
.rwall__wall { position: relative; }
.rwall__pause {
  position: absolute;
  top: calc(var(--s3) * -1);
  right: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 36px;
  padding: 0 var(--s3);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rwall__pause:hover { border-color: var(--accent-brass); color: var(--text-primary); }
.rwall__pause:focus-visible { outline: 2px solid var(--accent-brass-deep); outline-offset: 2px; }
.rwall__pause-glyph {
  width: 9px;
  height: 10px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
/* Pressed means the wall is stopped, so the glyph becomes a play triangle. */
.rwall__pause[aria-pressed="true"] .rwall__pause-glyph {
  border: 0;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 9px solid currentColor;
}
@media (max-width: 47.99em) {
  .rwall__pause { top: calc(var(--s2) * -1); font-size: 0.7rem; min-height: 32px; }
}

/* The anchor column is a deep panel, which the previous layout worked around by
   keeping the Google mark outside it. Rebuilding the lockup moved the mark in,
   and two things broke at once: the supplied mark ended up on a dark surface,
   which it is never allowed to be, and the count set in --text-primary went
   dark-ink-on-dark and disappeared entirely.
   Giving the lockup its own light plate fixes both at the source and is the
   better composition anyway: it is one object, so it should read as one card
   rather than as text floating on the panel behind it. */
/* The homepage score panel is a deliberate deep plate, set higher up the file
   with enough specificity to win, and it is the right call: it is the one dark
   object in a warm section and it makes the rating read as a single card.
   So the lockup keeps it, and the two things that broke when the Google mark
   moved inside are fixed properly rather than by flattening the panel.        */
.rwall__anchor .score { max-width: 30rem; }

/* On the deep plate the meta has to use the on-dark tokens. Set in
   --text-secondary it was dark ink on a dark panel: the count read as an empty
   gap and a contrast check reported it as a serious failure. */
[data-page="home"] .band--reviews .score__meta { color: var(--text-on-dark-soft); }
[data-page="home"] .band--reviews .score__meta strong { color: var(--text-on-dark); }
[data-page="home"] .band--reviews .score__sep { color: rgba(244, 238, 227, 0.4); }

/* The supplied Google mark is never allowed on a dark surface — its "Reviews"
   is set in a grey that disappears there, and recolouring it is not permitted.
   Moving it into the panel meant it needed a surface of its own, so it gets a
   light chip: the mark stays exactly as supplied, full colour on light, and the
   chip doubles as the hit area for the link through to the profile. */
[data-page="home"] .band--reviews .score__brand a {
  background: var(--surface-ivory);
  padding: var(--s3) var(--s4);
  border: 1px solid rgba(244, 238, 227, 0.16);
}
[data-page="home"] .band--reviews .score__brand a:hover {
  opacity: 1;
  border-color: var(--accent-champagne);
}

/* The pause sat over the first card because it was pulled above the wall by a
   negative offset. It gets its own room instead. */
.rwall__wall { padding-top: 52px; }
.rwall__pause { top: 4px; right: 0; }
@media (max-width: 47.99em) {
  .rwall__wall { padding-top: 46px; }
  .rwall__pause { top: 2px; }
}

/* ======================= Hero: three doors, one primary ================= *
   Apex's trio is three identical gold slabs: no hierarchy, and none of it
   related to the footage behind. Here the valuation keeps the one solid gold
   surface and the two routes flank it as quiet glass — dark enough to read on
   the film, transparent enough that the film stays the surface they sit on. */
.hero__actions--trio {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
}
.hero__actions--trio .btn--gold { order: 0; }
.hero__side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--s5);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--warm-ivory);
  text-decoration: none;
  background: rgba(12, 15, 13, 0.42);
  border: 1px solid rgba(242, 224, 191, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition:
    background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__side:hover,
.hero__side:focus-visible {
  background: rgba(12, 15, 13, 0.62);
  border-color: rgba(242, 224, 191, 0.9);
}
.hero__side:focus-visible { outline: 2px solid var(--accent-champagne); outline-offset: 3px; }

/* Portrait phones: the valuation leads on its own row, the two routes share
   the row beneath. In landscape and up all three sit in one row with the
   valuation centred — the Apex arrangement, with a hierarchy. */
@media (max-width: 47.99em) and (orientation: portrait) {
  .hero__actions--trio { flex-direction: column; align-items: stretch; }
  .hero__actions--trio .btn--gold { width: 100%; }
  .hero__side { flex: 1 1 0; }
  .hero__actions--trio::after { content: none; }
  .hero__sides-row { display: contents; }
}
@media (max-width: 47.99em) and (orientation: portrait) {
  .hero__actions--trio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
  }
  .hero__actions--trio .btn--gold { grid-column: 1 / -1; }
}
@media (min-width: 48em), (orientation: landscape) {
  .hero__actions--trio { flex-wrap: nowrap; }
  .hero__side { flex: 0 1 auto; }
}

/* ==================== Review wall: the verified fixes =================== */

/* Cards inherit the tallest review's height from the flex track, and a grid
   card stacked its content at the top with the slack dangling below the link —
   45% of the tallest card was void, and the verify rows sat at a different
   height on every card. As a column, the quote keeps its place and the
   permalink pins to the bottom edge of every card, which lines the verify rows
   up across the whole wall. */
.rwall__track > .rcard { display: flex; flex-direction: column; }
.rwall__track .rcard__link { margin-top: auto; }

/* The date must not orphan onto its own line: it is the fact the meta line
   exists to carry. */
.score__captured { white-space: nowrap; }
.score__meta { font-size: 0.8125rem; }

/* The Google chip hugs the mark instead of floating as a 94px sticker, and it
   carries a resting border so it reads as a control before the pointer finds
   it — invisible-until-hover was the only affordance it had. */
[data-page="home"] .band--reviews .score__brand a {
  padding: var(--s2) var(--s3);
  border: 1px solid rgba(17, 26, 22, 0.14);
}

/* ================== The dock, as a single catch-all strip =============== *
   With one route left, three empty grid columns would park the card in the
   left third. One item lays out as one full-width strip, centred, and the row
   stays shallower than the three-card band it replaces.                     */
.dock__list:has(> .dock__item:only-child) { display: block; }
.dock__list:has(> .dock__item:only-child) .dock__link {
  /* The base link is a grid, so the one-line arrangement must set display
     itself — flex-direction alone silently did nothing. */
  display: flex;
  min-height: 64px;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: var(--s4);
}
/* Engines without :has() keep the grid; the single card simply sits in the
   first column, which is inelegant but complete. */

/* ================ Wings contained in the hero's own row ================= *
   The wings ran top-to-bottom of the whole hero, but the route dock occupies
   the hero's last row, so on shorter laptop viewports the centred quotation's
   attribution — the reviewer's name and the "Google review" source line, the
   two things that make the quotation checkable — slid behind the dock band.

   The wings now stop where the dock begins. --dock-clear is measured by
   hero-wings.mjs and tracks the dock through every resize; the fallback here
   approximates one dock row plus the warm lip, so even with no JavaScript the
   attribution clears the band. No negative margins, no guessed heights.      */
@media (min-width: 75em) {
  .wing { bottom: var(--dock-clear, 132px); }
}

/* ================= Compact laptop composition =========================== *
   Not the desktop design scaled down: a different balance for the viewport it
   serves. Both dimensions gate it — a tall narrow desktop or a wide tall one
   keeps the full composition.

   The fixed margin CLAMPS a wing that is too wide and never widens one that
   is not: the first cut of this tier set a bare 236px, which at 1200-1440px
   was WIDER than the 16% it replaced and shrank the film — the exact defect
   it existed to fix. min() keeps whichever is smaller.

   The quote block hangs from the upper third rather than centring in the
   column: centred, the compact block floated in 44% void and read as a
   leftover. The outer screen edge keeps a real margin while the film-side
   edge absorbs the squeeze — the outer inset is what makes it read as a
   printed folio rather than text pushed against the bezel.                  */
@media (min-width: 75em) and (max-height: 56.25rem) {
  .stage__film { left: min(236px, 16%); right: min(236px, 16%); }
  .wing {
    width: min(236px, 16%);
    place-items: start center;
    padding-block: clamp(4rem, 12vh, 7rem) var(--s6);
  }
  .wing--left { padding-inline: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1rem, 1.4vw, 1.5rem); }
  .wing--right { padding-inline: clamp(1rem, 1.4vw, 1.5rem) clamp(1.5rem, 2.4vw, 2.25rem); }
  .wing__quote { gap: var(--s2); }
  .wing__index { font-size: 0.625rem; letter-spacing: 0.15em; }
  .wing__stars { font-size: 0.75rem; letter-spacing: 0.2em; }
  .wing__text { padding-top: var(--s2); }
  /* The authored short excerpt replaces the full text; the clamp remains only
     as a guard against a future long short-form. text-wrap: pretty spends its
     effort on the last lines, which is where a 38px orphan word was landing. */
  .wing__text .wing__full { display: none; }
  .wing__text .wing__short {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
  }
  .wing__text p {
    font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.25rem);
    line-height: 1.45;
    text-wrap: pretty;
  }
}
@media (min-width: 90em) and (max-height: 56.25rem) {
  .stage__film { left: min(248px, 20%); right: min(248px, 20%); }
  .wing { width: min(248px, 20%); }
}
/* Shorter again (1280x720): tighter spacing, not smaller type — 17px is the
   floor. */
@media (min-width: 75em) and (max-height: 47.5rem) {
  .wing__text .wing__short { -webkit-line-clamp: 5; }
  .wing { padding-block: clamp(3.25rem, 10vh, 5rem) var(--s5); }
}

/* Outside the compact tier the full quotation shows and the short form does
   not exist. Unconditional, not a negated media query: `@media not (...)`
   failed silently on the current engine and both paragraphs rendered at once
   on big desktop, pushing the attribution under the dock. The compact tier
   re-shows the short form with a more specific selector, so source order no
   longer matters. */
.wing__short { display: none; }

/* The single-route dock strip lost its inset at 1280 (list at x=0). Content
   is centred so nothing touched the edge, but the one tight width should not
   be the one with no container. */
.dock__list:has(> .dock__item:only-child) { padding-inline: clamp(1.5rem, 4vw, 6rem); }

/* ================= The gateway, on a contained cream panel ============== *
   The section ran edge to edge on the page's own muted surface, so the four
   routes floated on the same plane as everything above and below them and the
   band read as a continuation rather than as a place where a decision is made.

   It becomes one restrained cream panel, inset from both edges, with the page
   white either side. The white gutters are the point: they give the panel an
   edge, and an edge is what makes it read as a considered object rather than
   as a section that happens to have a background colour.                    */
[data-page="home"] .band--journeys {
  /* White, not ivory. The first pass set the band to ivory and the panel to
     parchment, and at those two values the gutters were invisible — the panel
     had no edge, so it was not a panel. The canvas has to be the page's
     lightest surface for the cream to read as an object sitting on it. */
  background: #ffffff;
  padding-inline: clamp(1rem, 4vw, 4rem);
  /* The panel below is absolutely positioned; without this it anchors to some
     ancestor other than the band and the cream never appears where intended.
     It computed a correct inset and still rendered nothing visible. */
  position: relative;
}
[data-page="home"] .band--journeys > * {
  position: relative;
  z-index: 1;
}
[data-page="home"] .band--journeys::before {
  content: "";
  position: absolute;
  inset: clamp(1.5rem, 3vw, 3.25rem) clamp(1rem, 5vw, 5.5rem);
  z-index: 0;
  background: var(--surface-parchment);
  border: 1px solid var(--border-subtle);
  pointer-events: none;
}
/* The chapter rule runs edge to edge above the panel and belongs to the white
   canvas, so it keeps the band's own inset rather than the panel's. */
[data-page="home"] .band--journeys > .chapter { padding-top: clamp(2.5rem, 4vw, 4rem); }
/* The content sits inside the panel's inset, not the band's. */
[data-page="home"] .band--journeys > .chapter,
[data-page="home"] .band--journeys .band__head,
[data-page="home"] .band--journeys .gallery {
  width: min(1240px, 100%);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 3.5rem);
}
[data-page="home"] .band--journeys > .chapter { padding-top: clamp(1rem, 2vw, 2rem); }
[data-page="home"] .band--journeys .gallery { padding-bottom: clamp(1.5rem, 3vw, 3rem); }

/* ---- Three equal cards ---- *
   Equal in every dimension, so the row reads as a grid rather than as three
   things that happen to be near each other.

   The grid was built for four cards in a 2x2 and the tenant card has gone, so
   three now have to sit down cleanly at every width. Base grid is one column;
   .gallery already turns two at 48em. Two additions:

     48em-74.99em  two columns, and the odd card out spans the full row rather
                   than sitting half-width beside a hole.
     75em and up   three columns, one row, nothing to span.

   Scoped to the homepage gateway, because .gallery is used elsewhere with a
   different number of children. */
@media (min-width: 48em) and (max-width: 74.99em) {
  [data-page="home"] .band--journeys .gallery > .gcard:last-child { grid-column: 1 / -1; }
}
@media (min-width: 75em) {
  [data-page="home"] .band--journeys .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
[data-page="home"] .band--journeys .gallery { align-items: stretch; }
[data-page="home"] .band--journeys .gcard { display: flex; }
[data-page="home"] .band--journeys .gcard__link {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

/* A neutral photographic gradient, not a green wash. The scrim was tinted
   toward the brand green on every image, which flattened four different
   photographs into one colour and lost the warm interior light that made two
   of them worth using. Neutral black carries the text and leaves the
   photography its own colour. */
[data-page="home"] .band--journeys .gcard__scrim {
  background: linear-gradient(
    180deg,
    rgba(10, 12, 11, 0) 34%,
    rgba(10, 12, 11, 0.38) 58%,
    rgba(10, 12, 11, 0.74) 84%,
    rgba(10, 12, 11, 0.86) 100%
  );
}

/* Restrained interaction: the image breathes, the arrow steps, the border
   warms. Nothing glows and nothing jumps — the card is already a whole link,
   so the feedback only has to confirm that. */
[data-page="home"] .band--journeys .gcard__link {
  border: 1px solid var(--border-subtle);
  transition: border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-page="home"] .band--journeys .gcard__link:hover,
[data-page="home"] .band--journeys .gcard__link:focus-visible {
  border-color: var(--accent-brass);
  transform: none;
}
[data-page="home"] .band--journeys .gcard__media img {
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-page="home"] .band--journeys .gcard__link:hover .gcard__media img,
[data-page="home"] .band--journeys .gcard__link:focus-visible .gcard__media img {
  transform: scale(1.02);
}
[data-page="home"] .band--journeys .gcard__link:focus-visible {
  outline: 2px solid var(--accent-brass-deep);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .band--journeys .gcard__media img,
  [data-page="home"] .band--journeys .gcard__arrow { transition: none; transform: none !important; }
}

/* ---- Mobile: one column, one card height ---- */
@media (max-width: 47.99em) {
  [data-page="home"] .band--journeys::before {
    inset: clamp(1rem, 3vw, 1.5rem) clamp(0.5rem, 2vw, 1rem);
  }
  [data-page="home"] .band--journeys .gallery { gap: var(--s4); }
  [data-page="home"] .band--journeys .gcard__link { height: 13.5rem; }
  /* The blurb is hidden at this width by an earlier rule, which left the CTA
     as the only thing separating one card from the next. It earns its room. */
  [data-page="home"] .band--journeys .gcard__line { display: block; }
}

/* On a phone the card is 216px and the copy block starts 17% down it, but the
   scrim stayed fully transparent until 34% — so the eyebrow and title sat on
   bare photograph, and on the two interior shots that meant cream type over a
   sunlit window. The gradient starts earlier at this size, because the text
   does. Same neutral black, same restraint, different geometry. */
@media (max-width: 47.99em) {
  [data-page="home"] .band--journeys .gcard__scrim {
    background: linear-gradient(
      180deg,
      rgba(10, 12, 11, 0.12) 0%,
      rgba(10, 12, 11, 0.52) 22%,
      rgba(10, 12, 11, 0.74) 52%,
      rgba(10, 12, 11, 0.88) 100%
    );
  }
}

/* ---- Gateway corrections from review ---- */

/* The brass eyebrow was failing AA over the two interior photographs: 49% of
   its glyph area below 4.5:1 on the tenants card at 1440, because the copy
   lands at 51% of the card where the scrim was only 0.28 alpha, over sunlit
   cream plaster. Brass is a mid-tone, so lightening the ink cannot fix it —
   cream over that wall is still 2.6:1. Only the gradient can, so the middle
   stops carry more weight. The top third is untouched, which is what keeps
   each photograph its own. */
[data-page="home"] .band--journeys .gcard__scrim {
  background: linear-gradient(
    180deg,
    rgba(10, 12, 11, 0) 28%,
    rgba(10, 12, 11, 0.7) 50%,
    rgba(10, 12, 11, 0.84) 74%,
    rgba(10, 12, 11, 0.9) 100%
  );
}
@media (max-width: 47.99em) {
  [data-page="home"] .band--journeys .gcard__scrim {
    background: linear-gradient(
      180deg,
      /* Raised again for the rebuilt copy: the buyer and management blurbs run
         a line longer, which lifts the kicker into brighter parts of both
         photographs. Measured at 4.46 and 4.39 against a 4.5 requirement. */
      rgba(10, 12, 11, 0.26) 0%,
      rgba(10, 12, 11, 0.8) 18%,
      rgba(10, 12, 11, 0.88) 52%,
      rgba(10, 12, 11, 0.93) 100%
    );
  }
}

/* The panel boundary sat exactly halfway between the page edge and the cards —
   72px gutter, 71.2px inner padding — so it read as a colour change dropped
   into the margin rather than as a frame with something inside it. The gutter
   stays; the inside grows, which is what makes it a panel. */
[data-page="home"] .band--journeys .gallery,
[data-page="home"] .band--journeys .band__head {
  padding-inline: clamp(1.25rem, 5vw, 7rem);
}
@media (max-width: 47.99em) {
  /* An 8px sliver of white reads as a misregistration, not an edge. */
  [data-page="home"] .band--journeys::before {
    inset: clamp(1rem, 3vw, 1.5rem) 20px;
  }
}

/* Card 1's blurb is one line and card 2's is two, which stepped the top row of
   copy by 27px. Reserving two lines levels the row without touching any
   wording. The CTAs were already aligned to the pixel. */
[data-page="home"] .band--journeys .gcard__line { min-height: 2lh; }

/* ============ Gateway cards: split, not overlaid ======================= *
   Approved art direction, 6 Aug 2026. The card stops being a photograph with
   type sitting on it and becomes two stacked zones: an unobstructed image, and
   a solid deep-green panel underneath carrying every word.

   This supersedes the scrim work above rather than tuning it further. That
   gradient existed only to drag the copy up to 4.5:1 over sunlit plaster, and
   it was losing: each pass darkened the middle stops, and each pass took more
   of the photograph with it. On a solid panel the contrast question is settled
   once — ivory on #0b231c is roughly 14:1 — and the photograph keeps all of
   its own light.

   Geometry. The card is a two-row grid with a fixed height, so the image row
   takes whatever the panel does not: `1fr auto`. The panel's height is made
   deterministic by reserving two lines for both the heading and the
   description, which is what keeps the image/panel boundary on one line across
   all three cards no matter how long each headline runs. Card heights per
   breakpoint are chosen so the image lands inside the approved 58-62% band.  */
[data-page="home"] .band--journeys .gcard__link {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: stretch;
  height: 36rem;
  overflow: hidden;
  background: var(--bottle-deep);
}
[data-page="home"] .band--journeys .gcard__media {
  position: static;
  grid-row: 1;
  /* A grid item's default min-height is its content; without this the image
     refuses to shrink and pushes the panel off the bottom of the card. */
  min-height: 0;
}
[data-page="home"] .band--journeys .gcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* RESTORED 8 August 2026, on Aarav's instruction. A previous pass moved the
   copy into a solid panel below the photograph and switched this scrim off
   with `display: none` ("nothing sits on the photograph any more, so nothing
   needs washing"). That removed the approved dark photographic treatment
   Aarav had signed off, and the cards lost their depth.
   The scrim is back, using the approved neutral-black gradient already
   defined for these cards above — no new colour is introduced here. It is a
   PROTECTED treatment: do not switch it off again without explicit
   permission. See DUKES_DESIGN_AND_MOTION_STANDARD.md. */
[data-page="home"] .band--journeys .gcard__scrim {
  display: block;
  /* SUBTLE. Corrected 8 August 2026: the first restoration re-enabled the
     full text-protection gradient (opaque to 0.86 at the foot), which was
     built for copy sitting ON the photograph. In this layout the copy sits
     in its own solid panel below the image, so that strength protected
     nothing and simply hid the house and interior photographs — Aarav
     flagged the cards as far too dark.
     This is depth only: the photograph must read clearly at first glance.
     Peak 0.22 at the very bottom edge, nothing above the half-way line. */
  background: linear-gradient(
    180deg,
    rgba(10, 12, 11, 0) 55%,
    rgba(10, 12, 11, 0.10) 78%,
    rgba(10, 12, 11, 0.22) 100%
  );
  /* Behind every piece of copy, over the photograph only. The body panel is
     a separate grid row, so no text can ever inherit this darkness. */
  z-index: 0;
}
/* Hover changes the overlay by a barely-perceptible amount and never becomes
   heavy. No zoom, no lift, no layout movement, and the card and its text
   containers are never faded as a whole. */
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .band--journeys .gcard__link:hover .gcard__scrim { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .band--journeys .gcard__scrim { transition: none; }
}

[data-page="home"] .band--journeys .gcard__body {
  /* Explicitly stacked above the scrim (position: static ignores z-index
     entirely, which is why an earlier fix here silently did nothing) — the
     panel's own opaque background already made this moot in practice, but
     "text can never inherit overlay darkness" should hold structurally too. */
  position: relative;
  z-index: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px 22px 22px;
  background: var(--bottle-deep);
}
/* Restrained gold, and legible: on the panel it is a flat #efc29a on #0b231c
   rather than a mid-tone fighting a photograph, which is what it was doing. */
[data-page="home"] .band--journeys .gcard__audience {
  margin: 0 0 12px;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--sand);
}
/* Sized to sit on one or two lines at every width. The old clamp topped out at
   3.25rem, which turned "Sell your property quickly" into three lines in a
   409px column and left nothing for the description. */
[data-page="home"] .band--journeys .gcard__title {
  margin: 0 0 16px;
  font-size: clamp(1.1875rem, 1.5vw, 1.625rem);
  line-height: 1.18;
  color: var(--on-deep);
  min-height: 2lh;
}
[data-page="home"] .band--journeys .gcard__line {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--on-deep);
  opacity: 0.92;
  /* Holds the measure on the full-width third card at two columns, where the
     panel is 840px wide and an unbounded line would run the whole way. */
  max-width: 44ch;
  /* Three lines reserved, not two. The seller blurb runs to three and the other
     two run to two, which made one panel 22px deeper than its neighbours and
     put a visible step in the image/panel boundary across the row. Reserving
     the longest case is what holds that boundary on one line. */
  min-height: 3lh;
}
/* Pinned to the bottom of the panel, so all three CTAs share a baseline
   whatever happens above them. */
[data-page="home"] .band--journeys .gcard__cta {
  margin-top: auto;
  padding-top: 18px;
  font-size: 1rem;
  color: var(--on-deep);
}
@media (max-width: 47.99em) {
  /* "Explore landlord services" is the longest of the three and wrapped to a
     second line on a phone, which made that one panel deeper than its
     neighbours and stepped the boundary the whole row is aligned on. */
  [data-page="home"] .band--journeys .gcard__cta { font-size: 0.9375rem; }
}
@media (max-width: 22.5em) {
  /* 244px of panel at 320. One size further down is what keeps that same
     label on one line here. */
  [data-page="home"] .band--journeys .gcard__cta { font-size: 0.875rem; }
}

/* ===== BEGIN HOVER-EXPANSION EXPERIMENT (reversible) ===== *
   Desktop-only trial, 6 Aug 2026. Delete this whole fenced block to return the
   gateway to the approved static design; nothing outside it was changed.
   See REVERT-EXPERIMENT.md alongside the pre-experiment snapshot.

   The row is already a three-track grid, so the expansion is the grid's own
   column proportions animating — not a transform on a card. That is what keeps
   the movement spatially honest: the gallery's outer edges never move, the
   three tracks always sum to 3fr, and a card can only grow by taking width its
   neighbours give up. Hovering the left card therefore pushes the other two
   right; hovering the centre pushes one left and one right; hovering the right
   pulls both others left. No card is ever repositioned directly.

   The parent has to know which child is hovered, which is what :has() is for.
   Without it this would need JavaScript, and the markup would need changing.

   Gated on four conditions at once, so it cannot leak anywhere it should not:
   a real pointer, hover capability, the 1200px breakpoint where three columns
   begin, and no reduced-motion preference. A touch device fails the first two,
   so there is no sticky hover to clear. Focus is deliberately not a trigger —
   keyboard users keep the existing outline and the row stays still.           */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* ---- Phase one: the row ---- *
     Driven by [data-active] from gateway-hover.mjs, never by :hover. See that
     file for why: a card widening moves its neighbour's edge, and an edge
     crossing a stationary pointer re-decides the hover, which re-moves the row.
     The pointer's zone decides instead, and the row's outer box — which this
     animation never changes — is what the zones are measured against.

     Named property, never `all`. */
  [data-page="home"] .band--journeys .gallery {
    /* Load-bearing, and the reason the first cut snapped instead of sliding.
       The base grid is written `repeat(3, minmax(0, 1fr))`, and the active
       states are explicit three-item lists. Those two forms do not interpolate,
       so every change jumped to its end value in a single frame — measured as
       one distinct width across a whole transition. Restating the rest state in
       the same explicit form is what makes it animate at all. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    transition: grid-template-columns 190ms cubic-bezier(0.25, 1, 0.5, 1);
  }
  /* Asymmetric: the row settles quicker than it expands. The longer duration
     applies while a card is active, so the fall back to rest uses the 190ms
     above. */
  [data-page="home"] .band--journeys .gallery[data-active] {
    transition-duration: 240ms;
  }

  /* 1.18 / 0.91 / 0.91 sums to 3, so the row's total width is unchanged and
     the two yielding cards give up exactly half the gain each. */
  [data-page="home"] .band--journeys .gallery[data-active="0"] {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.91fr) minmax(0, 0.91fr);
  }
  [data-page="home"] .band--journeys .gallery[data-active="1"] {
    grid-template-columns: minmax(0, 0.91fr) minmax(0, 1.18fr) minmax(0, 0.91fr);
  }
  [data-page="home"] .band--journeys .gallery[data-active="2"] {
    grid-template-columns: minmax(0, 0.91fr) minmax(0, 0.91fr) minmax(0, 1.18fr);
  }

  /* The lift is a transform, so it costs no layout and cannot move anything
     around it. It shares phase one's clock exactly — a card that arrives
     before the space it is moving into reads as two separate events. */
  [data-page="home"] .band--journeys .gcard__link {
    transition:
      border-color 190ms cubic-bezier(0.25, 1, 0.5, 1),
      transform 190ms cubic-bezier(0.25, 1, 0.5, 1),
      box-shadow 190ms cubic-bezier(0.25, 1, 0.5, 1);
  }
  [data-page="home"] .band--journeys .gallery[data-active] .gcard__link {
    transition-duration: 240ms;
  }
  /* Neutralises the standing :hover lift, so nothing responds to the pointer
     except through the controller. */
  [data-page="home"] .band--journeys .gcard__link:hover {
    transform: none;
  }
  [data-page="home"] .band--journeys .gallery[data-active="0"] > .gcard:nth-child(1) .gcard__link,
  [data-page="home"] .band--journeys .gallery[data-active="1"] > .gcard:nth-child(2) .gcard__link,
  [data-page="home"] .band--journeys .gallery[data-active="2"] > .gcard:nth-child(3) .gcard__link {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -26px rgba(6, 18, 14, 0.85);
    border-color: var(--accent-brass);
  }

  /* ---- The photograph: no second animation at all ---- *
     The image is never transformed and never transitioned. The media box is
     overflow-hidden and the image covers it, so widening the card widens the
     viewport onto the same photograph and more of it becomes visible. The
     reveal is therefore not a second effect that has to be synchronised with
     the movement — it is the movement, seen through the frame.

     Two earlier versions scaled the image on its own clock, one after
     transitionend and one 80ms behind the card. Both read as a separate
     mechanical beat, which is the fault this removes. Scale and object-position
     stay exactly where the approved design put them.

     This also neutralises the standing :hover scale that sits above it in the
     cascade, so the pointer never moves an image by any route. */
  [data-page="home"] .band--journeys .gcard__media img,
  [data-page="home"] .band--journeys .gcard__link:hover .gcard__media img {
    transform: none;
    transition: none;
  }

  /* ---- Text stability ---- *
     The panel widens with the card; the measure must not, or every heading and
     description re-breaks mid-slide and the whole row shimmers. These caps sit
     inside the narrowest state's content box at every supported width, so the
     line breaks chosen at rest are the line breaks throughout. The extra width
     an expanded card gains becomes breathing room, not a longer line. */
  [data-page="home"] .band--journeys .gcard__title { max-width: 21ch; }
  [data-page="home"] .band--journeys .gcard__line { max-width: 27ch; }

  /* "Property management" composed permanently as two lines.
     Measured: at the 21ch cap it sets on one line and the reserved second line
     sits empty. Capping this one title just under the width of the full phrase,
     and comfortably over the width of "management", fixes the break between the
     two words. The cap is in ch and therefore independent of the card's width,
     so the composition is identical in every hover state — it cannot re-break
     mid-animation. Font, size, weight, line-height, alignment and spacing are
     untouched; nothing is shrunk. The other two titles are left alone because
     they were measured across 223 frames and do not reflow. */
  [data-page="home"] .band--journeys .gcard[data-journey-card="manage"] .gcard__title {
    max-width: 13ch;
  }
}
/* ===== END HOVER-EXPANSION EXPERIMENT ===== */

/* ======================= Stamp Duty calculator ========================= *
   One tool page, built from the existing system: warm page surface, raised
   panel, brass accents, the standing form controls and buttons. Nothing here
   introduces a colour, face or radius the site does not already use.        */
.sdlt { display: grid; gap: var(--s6); margin-top: var(--s6); align-items: start; }
/* Grid items default to min-width:auto, so a wide band table would push its
   panel — and the whole page — wider instead of scrolling inside its own box.
   Measured: 8px of page overflow at 320 the moment a result rendered. Every
   link in this chain must be allowed to shrink for .sdlt__scroll to work. */
.sdlt > *,
.sdlt__panel,
.sdlt__result { min-width: 0; }
@media (min-width: 64em) {
  .sdlt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); }
}

.sdlt__form {
  display: grid;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
}
/* Price and timing share one desktop row; the whole point is that section 03
   stays inside a 900px viewport at 100% zoom. */
.sdlt__fieldrow { display: grid; gap: var(--s4); }
@media (min-width: 48em) {
  .sdlt__fieldrow { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
/* Zone labels: visual wayfinding, deliberately not headings. */
.sdlt__zone {
  margin: 0;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-brass-deep);
}
.sdlt__zone:not(:first-child) { margin-top: var(--s2); }
.sdlt__field { display: grid; gap: var(--s2); }

/* The pound sign is part of the control, not part of the value: it sits in
   the field's own box so the number can be typed bare. */
.sdlt__money { position: relative; }
.sdlt__currency {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-weight: 600;
  pointer-events: none;
}
.sdlt__price { padding-left: 34px; width: 100%; }
/* Native date control, sized and dressed like every other field. The explicit
   min-height keeps the target comfortably past 44px in every engine, where a
   bare date input can render shorter than a text input. */
.sdlt__date { width: 100%; min-height: 44px; }
.sdlt__price { min-height: 44px; }

.sdlt__error {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #8a2d2b;
}
/* The error is a sentence, never only a colour. aria-describedby carries it
   to assistive technology; this border carries it to everyone else. */
.sdlt__price[aria-invalid="true"] { border-color: #8a2d2b; }

.sdlt__group {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--s2);
}
/* Short, parallel choices sit in one row, which is what keeps the residency
   section on screen at 100% zoom instead of a scroll below the fold. */
@media (min-width: 26em) {
  .sdlt__group--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdlt__group--row > legend,
  .sdlt__group--row > .form__hint,
  .sdlt__group--row > .sdlt__error { grid-column: 1 / -1; }
}
.sdlt__legend {
  padding: 0;
  margin-bottom: var(--s2);
  font-weight: 700;
  font-size: var(--t-small);
}

/* Radio cards. The whole card is the label, so the target is the card —
   comfortably past 44px tall. State is a filled mark plus a border change,
   never colour alone. */
.sdltchoice {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  min-height: 44px;
  padding: var(--s2) var(--s3);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
}
.sdltchoice__mark {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--border-subtle);
  border-radius: 50%;
  position: relative;
}
.sdltchoice:has(.sdltchoice__input:checked) {
  border-color: var(--accent-brass);
  background: color-mix(in srgb, var(--sand) 16%, var(--surface-raised));
  box-shadow: inset 3px 0 0 var(--bottle-deep);
}
.sdltchoice:has(.sdltchoice__input:checked) .sdltchoice__mark { border-color: var(--accent-brass-deep); }
.sdltchoice:has(.sdltchoice__input:checked) .sdltchoice__mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent-brass-deep);
}
.sdltchoice:has(.sdltchoice__input:focus-visible) {
  outline: 2px solid var(--accent-brass-deep);
  outline-offset: 3px;
}
.sdltchoice__body { display: grid; gap: 2px; }
.sdltchoice__label { font-weight: 600; }
.sdltchoice__note { font-size: 0.875rem; line-height: 1.5; color: var(--text-secondary); }

.sdlt__actions { margin-top: var(--s2); }

/* The result panel */
.sdlt__panel {
  padding: var(--s5) var(--s5) var(--s4);
  /* A whisper of bottle green over the ivory, so the workspace reads as its
     own material without becoming a dark block. */
  background: color-mix(in srgb, var(--bottle-deep) 5%, var(--surface-raised));
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--bottle-deep);
  display: grid;
  gap: var(--s3);
  align-self: start;
}
.sdlt__actions { margin: 0; }
.sdlt__calc { width: 100%; }
/* Permanent brand masthead at the top of the estimate workspace: the label
   sits on the baseline, the genuine mark holds the right edge. Present in
   both states, never duplicated inside a result, never animated. */
.sdlt__brandbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border-subtle);
}
.sdlt__brandbar-label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-secondary);
}
.sdlt__brandbar-logo {
  flex: none;
  width: 124px;
  height: auto;
  object-fit: contain;
}

/* The completed estimate card: figures only — the masthead above carries
   the brand. */
.sdlt__summary {
  display: grid;
  gap: var(--s2);
  padding: var(--s4);
  background: var(--surface-raised);
  border: 1px solid color-mix(in srgb, var(--accent-brass) 55%, var(--border-subtle));
}
.sdlt__summary-label {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-secondary);
}
/* Panel header. (The .sdlt__logo rule that used to sit here targeted markup
   that moved into the brandbar; the dead selector was removed in the
   10 Aug 2026 pass.) */
.sdlt__panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s4);
}

/* The download action: secondary by design, revealed only with a result, and
   perfectly still — no halo, no collapse, no press movement. */
.sdlt__download-row { margin: 0; }
.sdlt__download { min-height: 44px; }
.sdlt__download:hover::after { box-shadow: none; }
.sdlt__download:hover::before { transform: none; }
.sdlt__download:active { transform: none; }

.sdlt__empty { margin: 0; color: var(--text-secondary); }
.sdlt__total {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  line-height: 1.1;
  color: var(--bottle-deep);
}
.sdlt__date-line { margin: 0; font-size: var(--t-small); font-weight: 600; }
.sdlt__rate { margin: 0; color: var(--text-secondary); font-size: var(--t-small); }
/* An assumption, stated quietly. Deliberately plainer than .sdlt__notice —
   no rule, no accent — because it is neither an error nor a rate condition,
   only a statement of what any future-dated estimate silently is. */
.sdlt__assumption { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--text-secondary); font-style: italic; }
.sdlt__category { margin: 0; font-size: var(--t-small); }
.sdlt__notice {
  margin: 0;
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--accent-brass-deep);
  font-size: var(--t-small);
  line-height: 1.5;
}
.sdlt__privacy { margin: var(--s2) 0 0; font-size: 0.8125rem; color: var(--text-secondary); }

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.sdlt__scroll { overflow-x: auto; }
.sdlt__table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.sdlt__table th,
.sdlt__table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border-subtle); text-align: left; }
.sdlt__table thead th {
  background: var(--bottle-deep);
  color: #f6f4ef;
  border-bottom: 0;
  font-weight: 600;
}
.sdlt__table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--bottle-deep) 3%, var(--surface-raised));
}
.sdlt__table tbody tr:nth-child(odd) td { background: var(--surface-raised); }
.sdlt__table tfoot th,
.sdlt__table tfoot td { border-top: 2px solid var(--accent-brass); }
.sdlt__table tfoot th,
.sdlt__table tfoot td { border-bottom: 0; font-weight: 700; }
.sdlt__num { text-align: right; font-variant-numeric: tabular-nums; }

/* The one permitted animation: a quiet fade when the figure changes. */
.sdlt__result.is-updated { animation: sdlt-fade 220ms cubic-bezier(0.25, 1, 0.5, 1); }
@keyframes sdlt-fade {
  from { opacity: 0.35; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sdlt__result.is-updated { animation: none; }
}

.sdlt__scope { margin: var(--s4) 0; padding-left: 1.2em; display: grid; gap: var(--s2); }

/* ---- The calculator's submit button: still, tonal, certain ---- *
   The site button's hover collapses its fill layer (the pale strip along the
   bottom) and blooms a brass halo. Neither belongs on a figures tool, so both
   are neutralised here — unconditionally, so a touch device that replays
   :hover on tap never sees them either. The button never changes size,
   position or shadow; only its colours move. */
.sdlt__actions .btn--primary::before {
  transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sdlt__actions .btn--primary:hover::before { transform: none; }
.sdlt__actions .btn--primary:hover::after { box-shadow: none; }
.sdlt__actions .btn--primary {
  transition:
    color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* The tonal fill shift comes from the standing site rule (--btn-fill deepens
   on hover); the ::before transition above is what makes it a fade instead of
   a snap. The brass border is offered only to a real pointer. */
@media (hover: hover) and (pointer: fine) {
  .sdlt__actions .btn--primary:hover { border-color: var(--accent-brass); }
}
/* Pressed: one pixel down, quickly, and nothing scales. The global focus
   outline is untouched — hover is feedback, focus is location, and neither
   substitutes for the other. */
.sdlt__actions .btn--primary:active {
  transform: translateY(1px);
  transition-duration: 100ms;
}
@media (prefers-reduced-motion: reduce) {
  .sdlt__actions .btn--primary:active { transform: none; }
  .sdlt__actions .btn--primary,
  .sdlt__actions .btn--primary::before { transition: none; }
}

/* ---- "What could change this estimate?" ---- */
.sdlt__more {
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}
.sdlt__more-summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: var(--s2) var(--s4);
  font-weight: 600;
  font-size: var(--t-small);
  cursor: pointer;
}
.sdlt__more-body { padding: 0 var(--s4) var(--s3); }
.sdlt__more-body .sdlt__scope { margin-top: var(--s2); }
.sdlt__checked { margin: 0; font-size: 0.8125rem; color: var(--text-secondary); }

/* Card heights are derived, not chosen: the panel's height is fixed by the
   reservations above, so the card is sized to put that panel at ~40% and leave
   the photograph the ~60% the direction asks for. Measured at each breakpoint
   rather than estimated. */
@media (min-width: 48em) {
  [data-page="home"] .band--journeys .gcard__link { height: 39rem; }
  [data-page="home"] .band--journeys .gcard__body { padding: 22px 24px 24px; }
  [data-page="home"] .band--journeys .gcard__line { font-size: 0.9375rem; }
}
@media (min-width: 75em) {
  [data-page="home"] .band--journeys .gcard__link { height: 40rem; }
}

/* ============= Hero: two actions, deliberately unequal ================== *
   Supersedes the three-up trio. One solid gold surface and one quiet glass
   block, so the hierarchy is legible before a single word is read. The pair
   shares the trio's glass treatment; only the count and the balance change. */
.hero__actions--pair {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
}
/* The primary carries more presence than the secondary at every width, rather
   than the two simply being different colours of the same size. */
.hero__actions--pair .btn--gold { padding-inline: clamp(1.75rem, 3vw, 2.75rem); }
.hero__actions--pair .hero__side { padding-inline: clamp(1.25rem, 2vw, 1.75rem); }

@media (max-width: 47.99em) and (orientation: portrait) {
  .hero__actions--pair { flex-direction: column; align-items: stretch; }
  .hero__actions--pair .btn--gold,
  .hero__actions--pair .hero__side { width: 100%; }
}
@media (min-width: 48em), (orientation: landscape) {
  .hero__actions--pair { flex-wrap: nowrap; }
}

/* The dock stays subordinate to the hero it sits under: quieter type, less
   height, no competing surface. It is a question, not a third row of buttons. */
[data-page="home"] .hero--stage .dock__action {
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.375rem);
}

/* On a portrait phone the hero and the route dock share the opening viewport,
   and "View Properties" and "Find a home to rent" are the same destination
   twice inside it — stacked, eight lines apart. The dock keeps it, because the
   dock's version names who it is for, and the hero is left with the single
   action worth leading on. Nothing is hidden that is not reachable one row
   below and again in the header. */
@media (max-width: 47.99em) and (orientation: portrait) {
  .hero__actions--pair .hero__side { display: none; }
}

/* ============ Hero actions: one accent, one genuinely quiet ============= *
   The primary was painted --surface-parchment, which computes to the exact
   background colour of the header — #e8decc, byte for byte. So the opening
   viewport carried three parchment surfaces and no accent at all, and "the
   strongest hero action" was the same neutral plate as everything else.
   --sand is already the accent in the base .btn--gold; this restores it on
   the homepage hero, where the one solid object should be the one that matters. */
[data-page="home"] .hero--stage .btn--gold {
  --btn-fill: var(--sand);
  --btn-fg: #0b231c;
  background: var(--sand);
  color: #0b231c;
  border: 1px solid var(--copper);
}
[data-page="home"] .hero--stage .btn--gold:hover,
[data-page="home"] .hero--stage .btn--gold:focus-visible {
  background: var(--accent-champagne, #f0dcb8);
  border-color: var(--accent-brass-deep);
}

/* The secondary was described as glass and was not: rgba(12,15,13,0.42) over
   blur composited to 1.78:1 against the film beside it — an opaque black plate,
   and the same rendered luminance as the header's filled primary 400px above.
   Two dark filled slabs teach the reader that dark means important, then point
   them at two different places. This one now genuinely lets the film through
   and reads as an outline, which is what a secondary is. */
[data-page="home"] .hero--stage .hero__side {
  background: rgba(12, 15, 13, 0.18);
  border: 1px solid rgba(242, 224, 191, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
[data-page="home"] .hero--stage .hero__side:hover,
[data-page="home"] .hero--stage .hero__side:focus-visible {
  background: rgba(12, 15, 13, 0.34);
  border-color: var(--accent-champagne, #f0dcb8);
}

/* The dock went full bleed below 1366 while every other element kept a ~58px
   inset, so at 1280 "FOR LANDLORDS" sat 31.6px outside the page margin. */
.hero--stage .dock__list {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3.75rem);
}

/* The authored short excerpt is budgeted for 1440. At 1366 and 1280 the column
   narrows, the same words need more lines, and a 6-line clamp cut a third of
   the text off mid-word — the exact defect the authored short form exists to
   prevent. More lines are available: the attribution has 110px of clearance
   above the dock at these widths, so this does not push it back under. */
@media (min-width: 75em) and (max-width: 87.5em) {
  .wing__text .wing__short { -webkit-line-clamp: 9; }
  /* Nine lines fit the text but left only 29px between the attribution and the
     dock, down from 110. The lines are tightened rather than the quote being
     re-clipped: the attribution keeping real clearance is the whole reason this
     work started, and it must not be paid for out of that margin. */
  .wing__text p { line-height: 1.34; }
  .wing__quote { gap: calc(var(--s2) * 0.75); }
}

/* ============ The launcher's travelling brass perimeter ================= *
   A concierge entrance, not a chatbot bubble. The problem it solves is real:
   a quiet ivory plate in the corner of a quiet ivory page is easy to miss
   entirely. The problem it must not create is the pulsing, glowing, colour-
   cycling widget every AI product ships.

   So the resting state is unchanged — one 1px neutral brass hairline — and the
   only thing that ever moves is a single narrow champagne segment travelling
   the perimeter once, occasionally. Between passes there is nothing to see.

   Built from a conic gradient masked to the border, which is the one technique
   that can light a rounded rectangle's edge without a second element tracing
   its corners. `--launcher-angle` is registered as a real <angle> so it can be
   interpolated at all; an unregistered custom property is a string and would
   jump from 0 to 360 in one frame.                                          */
@property --launcher-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

[data-enhanced] .launcher {
  /* The halo has to be allowed out of the box. The base rule clips it. */
  overflow: visible;
  isolation: isolate;
}

[data-enhanced] .launcher::before,
[data-enhanced] .launcher::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  /* A ~30deg lit segment: 8.3% of the circuit. Wider reads as a sweep, much
     narrower stops registering as light at all and starts to flicker. */
  /* Saturated brass, not champagne. The first attempt lit the segment in
     #f0dcb8 on a #e8decc plate — light on light, and it measured as visible
     while being invisible. On a cream surface an illuminated edge has to read
     as metal catching the light, which means more chroma than the hairline it
     runs along, not more lightness. Champagne survives only at the very tips,
     where it reads as the highlight rolling off. */
  background: conic-gradient(
    from var(--launcher-angle),
    transparent 0%,
    rgba(197, 166, 106, 0.35) 2.5%,
    rgba(240, 220, 184, 1) 4%,
    rgba(143, 80, 36, 1) 6%,
    rgba(169, 120, 66, 0.9) 7.5%,
    rgba(197, 166, 106, 0.3) 8.3%,
    transparent 11%
  );
  /* Masked to the border only. Without the exclude the gradient fills the
     plate and the whole launcher becomes the advertisement this must not be. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: 2px;
  /* The crisp line must sit above its own halo. ::after paints after ::before
     by default, so the blurred copy was covering the sharp one and only the
     smudge was visible. */
  z-index: 3;
}

/* The halo is the same segment again, blurred and held well back. Separating
   it from the crisp line is what keeps it a soft light rather than a smear:
   the line stays 1px sharp, the glow sits behind it at a fifth of the alpha. */
[data-enhanced] .launcher::after {
  inset: -3px;
  padding: 4px;
  filter: blur(5px);
  opacity: 0;
  z-index: 1;
}

/* One circuit, then quiet. 14s in total, with the pass occupying the first 8s, so the
   segment travels for 8 seconds and the border is an ordinary hairline for the
   remaining 6. A CSS animation rather than a JS timer, deliberately: an
   infinite CSS animation cannot be restarted by a scroll handler, cannot stack
   on resize, and is suspended and resumed by the browser across tab switches
   and the back-forward cache with no code to get wrong. */
@keyframes launcher-travel {
  0%   { --launcher-angle: 0deg;   opacity: 0; }
  3%   { opacity: 1; }
  50%  { --launcher-angle: 360deg; opacity: 1; }
  57%  { --launcher-angle: 360deg; opacity: 0; }
  100% { --launcher-angle: 360deg; opacity: 0; }
}

[data-enhanced] .launcher[data-launcher-in="on"]::before {
  animation: launcher-travel 14s linear 1.5s infinite;
}
[data-enhanced] .launcher[data-launcher-in="on"]::after {
  animation: launcher-travel 14s linear 1.5s infinite;
  /* The halo peaks lower than the line it belongs to. */
  animation-name: launcher-travel-halo;
}
@keyframes launcher-travel-halo {
  0%   { --launcher-angle: 0deg;   opacity: 0; }
  3%   { opacity: 0.55; }
  50%  { --launcher-angle: 360deg; opacity: 0.55; }
  57%  { --launcher-angle: 360deg; opacity: 0; }
  100% { --launcher-angle: 360deg; opacity: 0; }
}

/* ---- Hover and keyboard focus ---- */
/* The segment brightens and settles rather than the plate lighting up. The
   lift is 2px and the shadow stays a contact shadow, not a halo. */
[data-enhanced] .launcher[data-launcher-in="on"]:hover,
[data-enhanced] .launcher[data-launcher-in="on"]:focus-visible {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 10px 22px -14px rgba(28, 33, 31, 0.5);
  border-color: var(--accent-brass);
}
[data-enhanced] .launcher[data-launcher-in="on"]:hover::before,
[data-enhanced] .launcher[data-launcher-in="on"]:focus-visible::before {
  animation-play-state: running;
  opacity: 1;
}
[data-enhanced] .launcher[data-launcher-in="on"]:hover::after,
[data-enhanced] .launcher[data-launcher-in="on"]:focus-visible::after { opacity: 0.7; }
/* The crown alone, and barely. Animating the text as well is what makes a
   control feel like it is inflating. */
[data-enhanced] .launcher .launcher__glyph { transform-origin: center; }
[data-enhanced] .launcher[data-launcher-in="on"]:hover .launcher__glyph,
[data-enhanced] .launcher[data-launcher-in="on"]:focus-visible .launcher__glyph {
  transform: scale(1.02);
}

/* ---- While the conversation is open ---- */
/* The launcher must not compete with the panel it opened. No JavaScript and no
   timer: :has() reads the dialog's own open state, so there is nothing to
   resume incorrectly and nothing to leak on close. */
/* Specificity has to beat the entrance rule, which sets opacity on the same
   elements — at equal weight the launcher stayed at full opacity and the ring
   kept running while the conversation was open. */
body:has(dialog[open]) [data-enhanced] .launcher::before,
body:has(dialog[open]) [data-enhanced] .launcher::after,
[data-enhanced] body:has(dialog[open]) .launcher::before,
[data-enhanced] body:has(dialog[open]) .launcher::after,
body:has(dialog[open]) .launcher[data-launcher-in="on"]::before,
body:has(dialog[open]) .launcher[data-launcher-in="on"]::after {
  animation-play-state: paused;
  opacity: 0;
}
body:has(dialog[open]) .launcher[data-launcher-in="on"],
body:has(dialog[open]) [data-enhanced] .launcher { opacity: 0.5; }

/* ---- Reduced motion: the hairline stays, the travel goes ---- */
@media (prefers-reduced-motion: reduce) {
  [data-enhanced] .launcher::before,
  [data-enhanced] .launcher::after { animation: none; opacity: 0; }
  [data-enhanced] .launcher[data-launcher-in="on"]:hover,
  [data-enhanced] .launcher[data-launcher-in="on"]:focus-visible { transform: none; }
  [data-enhanced] .launcher[data-launcher-in="on"]:hover .launcher__glyph,
  [data-enhanced] .launcher[data-launcher-in="on"]:focus-visible .launcher__glyph { transform: none; }
}
[data-motion="static"] .launcher::before,
[data-motion="static"] .launcher::after { animation: none; opacity: 0; }

/* ---- Position, safe areas and footer clearance ---- */
[data-enhanced] .launcher {
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
}
@media (max-width: 47.99em) {
  /* Compact on a phone: the crown and the name stay, the supporting line goes.
     A two-line card in the corner of a 375px screen covers more of the page
     than it earns. */
  [data-enhanced] .launcher {
    grid-template-columns: auto auto;
    align-items: center;
    gap: var(--s2);
    padding: 12px var(--s4);
    min-height: 48px;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px));
    max-width: calc(100vw - 24px);
  }
  [data-enhanced] .launcher .launcher__glyph { display: grid; width: 26px; height: 26px; }
  [data-enhanced] .launcher .launcher__sub { display: none; }
}
/* So a fixed control can never sit on top of the legal line at the foot of the
   page. Clearance, not stowing — hiding it was the behaviour that made it
   unreliable in the first place. */
[data-enhanced] .site-foot { padding-bottom: clamp(5rem, 8vh, 7rem); }

/* The disc is retired below the desktop breakpoint. It hid "Speak to Dukes" in
   a visually-hidden span, so on every phone and tablet the control was a gold
   crown in a circle with no words on it — a symbol a first-time visitor has no
   reason to read as "talk to someone". The label is the discoverability.
   The compact pill keeps the crown, keeps the name, and drops only the
   supporting line, which is the one part a phone genuinely has no room for. */
@media (max-width: 63.99em) {
  [data-enhanced] .launcher {
    width: auto;
    height: auto;
    min-height: 48px;
    padding: 10px var(--s4) 10px 12px;
    border-radius: var(--radius-control);
    place-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s3);
    max-width: calc(100vw - 24px);
  }
  [data-enhanced] .launcher .launcher__glyph {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
  }
  /* Undo the visually-hidden clip: the name is the point of the control. */
  [data-enhanced] .launcher .launcher__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: nowrap;
  }
  [data-enhanced] .launcher .launcher__text { font-size: 0.875rem; }
}
/* Only the very narrowest phones lose the supporting line; a 768 tablet keeps
   it, because it has the room. */
@media (max-width: 47.99em) {
  [data-enhanced] .launcher .launcher__sub { display: none; }
}

/* ---- The buyer card's confirmation label ---- *
   Discreet, not decorative, and deliberately not styled as a badge: a badge
   reads as a feature ("New", "Popular"), and this is the opposite — a note
   that the service behind the card is not yet agreed. It sits with the
   audience kicker because that is where the card says who it is for, and the
   qualification belongs to the same breath.

   The card is otherwise identical to the other three. Equal prominence was
   asked for and is right: a visitor looking to buy should see the route, and
   the label is for the client reviewing this preview, not a reason to demote
   the card visually. */
.gcard__flag {
  display: block;
  margin-top: 4px;
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240, 220, 184, 0.82);
  font-weight: 600;
}
.gcard__flag::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--copper, #8f5024);
  box-shadow: 0 0 0 1px rgba(240, 220, 184, 0.55);
}
/* The dashed edge already carried by .gcard--planned says the same thing
   silently; both together are enough, and neither shouts. */
@media (max-width: 47.99em) {
  .gcard__flag { font-size: 0.5rem; letter-spacing: 0.12em; }
}

/* ================== Why Dukes: the proof sequence ====================== *
   Place, then person, then action. One editorial sequence in a fixed frame,
   not a carousel: no arrows, no dots, no slide. The three principles beside it
   are the controls, so moving through the images is the same act as reading
   the claims they stand for.

   The frame size is fixed per breakpoint and the images are absolutely
   positioned inside it, so the section cannot move as the picture changes —
   the defect this composition exists to avoid.                              */
.proofseq { position: relative; width: 100%; }
.proofseq__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-parchment);
}
.proofseq__shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 750ms cubic-bezier(0.4, 0, 0.2, 1);
}
.proofseq__shot[data-active] { opacity: 1; }
.proofseq__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* A 1.5% drift, and only on the frame being shown. Enough to keep a held still
   from looking frozen; far short of a zoom. */
@media (prefers-reduced-motion: no-preference) {
  /* Every frame drifts, not only the visible one. Running it on [data-active]
     alone meant the outgoing picture dropped its transform the instant the
     attribute was removed — 0.87% of width in a single frame, at 99.9% opacity,
     which is a visible pop in the middle of the crossfade. It also meant each
     frame only ever played the first half of a 12s alternate ramp, so the
     drift never reached the 1.5% it declares. 6s each way completes the arc
     within one hold. */
  .proofseq[data-proof-seq] .proofseq__shot img {
    animation: proof-drift 6s ease-in-out infinite alternate;
  }
  /* Must match the specificity of the rule that sets `animation`, or the
     shorthand resets play-state to running and the picture keeps creeping
     while it is supposedly held. */
  .proofseq[data-proof-seq][data-proof-paused] .proofseq__shot img,
  .proofseq[data-proof-seq][data-proof-paused] .proofseq__shot[data-active] img {
    animation-play-state: paused;
  }
}
/* A slow push, not a zoom. 3% over a 6s hold is roughly 15px of travel across
   a 510px frame — enough that the picture reads as alive rather than as a
   pasted still, and far short of anything that announces itself as an effect.
   The half-percent of vertical drift is what stops it looking like a lens
   zooming: real camera movement has a direction.

   Every frame runs this same animation in sync, which is what makes the
   handover invisible — at the moment of the crossfade the outgoing and
   incoming pictures are at an identical scale, so there is nothing to pop.
   6s per direction matches the 6s hold, so each frame gets one clean pass
   rather than reversing mid-view. */
@keyframes proof-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.03) translate3d(0, -0.5%, 0); }
}

/* ---- The counter and progress line ---- */
.proofseq__meter {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s3);
}
.proofseq__count {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
/* Was --border-subtle: 1.32:1 against the panel, which is not text, it is a
   smudge. The frame index carries nothing a non-sighted reader can act on, so
   the meter is aria-hidden in the markup and this only has to satisfy the eye —
   but it still has to be legible to the eye it is for. */
.proofseq__of { color: var(--text-secondary); opacity: 0.55; }
.proofseq__line {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
  position: relative;
  overflow: hidden;
}
.proofseq__fill {
  position: absolute;
  inset: 0;
  background: var(--accent-brass-deep);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ---- The caption ---- *
   Editorial, not a warning banner. It says what the picture is, in the same
   register as a photo credit, because that is what it is.

   One caption per frame, because one of these frames is a photograph of a real
   building and the others are concept images of people who do not exist: a
   single line cannot be honest about both. They are stacked in a single grid
   cell rather than swapped as text, so the block is always as tall as the
   longest of them. Swapping textContent instead measured 0.0126 of layout shift
   at 320px, where the one-line credit becomes a four-line disclosure and the
   copy column below it moved every time the sequence advanced. */
.proofseq__captions {
  display: grid;
  margin-top: var(--s3);
}
.proofseq__caption {
  grid-area: 1 / 1;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-secondary);
  font-style: italic;
  letter-spacing: 0.01em;
  opacity: 0;
  /* Held visible for the length of the fade, then taken out of the
     accessibility tree — a caption for a picture nobody can see is noise. */
  visibility: hidden;
  transition: opacity 750ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 750ms;
}
.proofseq__caption[data-active] {
  opacity: 1;
  visibility: visible;
  transition: opacity 750ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

/* ---- The principles, now controls ---- */
.welcome__principles[data-proof-nav] { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
/* The list item kept its own padding and bottom border from the plain-list
   version, so each row was 87px tall around a 54px button — 38% dead click
   zone — and drew a second grey hairline under the button's own brass rule.
   The button owns the whole row now, and .principle__rule is the only rule. */
.welcome__principles[data-proof-nav] > li { padding: 0; border-bottom: 0; margin: 0; }
.principle {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: var(--s3) 0;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.principle__label { font-size: var(--t-small); }
/* A fine brass rule, not a coloured card. It is the whole indicator. */
.principle__rule {
  display: block;
  height: 1px;
  background: var(--border-subtle);
  position: relative;
  overflow: hidden;
}
.principle__rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-brass-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.principle[aria-pressed="true"] { color: var(--text-primary); }
.principle[aria-pressed="true"] .principle__rule::after { transform: scaleX(1); }
.principle:hover { color: var(--text-primary); }
.principle:hover .principle__rule::after { transform: scaleX(0.35); }
.principle:focus-visible {
  outline: 2px solid var(--accent-brass-deep);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  /* A progress line that can never progress is furniture with no function. */
  .proofseq__line { display: none; }
  .proofseq__shot { transition: none; }
  .proofseq__shot img { animation: none !important; }
  .principle__rule::after { transition: none; }
  /* Both states, or the delayed visibility hop survives and the outgoing
     caption sits on top of the incoming one for three quarters of a second. */
  .proofseq__caption,
  .proofseq__caption[data-active] { transition: none; }
}
[data-motion="static"] .proofseq__shot { transition: none; }
[data-motion="static"] .proofseq__shot img { animation: none !important; }
[data-motion="static"] .proofseq__caption,
[data-motion="static"] .proofseq__caption[data-active] { transition: none; }

/* ---- Mobile: image first, then copy, then the selectors ---- */
@media (max-width: 47.99em) {
  .welcome__grid { display: flex; flex-direction: column; align-items: stretch; }
  /* Explicit width, because the frame's only size is an aspect ratio: a flex
     item that shrink-to-fits around content with no intrinsic width resolves
     to zero, and the image vanished entirely on a phone. */
  .welcome__media { order: 1; width: 100%; align-self: stretch; }
  .proofseq, .proofseq__frame { width: 100%; }
  .welcome__copy { order: 2; }
  .proofseq__frame { aspect-ratio: 4 / 3; }
  .principle { padding: var(--s3) 0; min-height: 44px; }
  /* The floating launcher sits in the bottom-right corner and covered the
     right half of the progress line and the end of the caption — measured
     166x17px of overlap at 375. Real clearance, not a no-op declaration. */
  .proofseq__meter { padding-right: 188px; }
  .proofseq__caption { padding-right: 188px; }
}

/* ================= Navigation: collapse before it squeezes ============== *
   The desktop bar appeared from 1024px. With the full architecture that left
   25px between the last nav item and the actions block — measured, not
   estimated — which is a bar that fits rather than a bar that reads. Tablet
   landscape and the narrower laptops now get the accordion instead, which is
   a better control at that width anyway. 13-inch Macs report 1440 or 1512, so
   they keep the full bar.                                                   */
@media (min-width: 64em) and (max-width: 73.99em) {
  .nav--wide { display: none; }
  .menu { display: inline-flex; }
}

/* ---- The dropdown, as a warm editorial panel ---- *
   Opaque parchment, ink type, a brass hairline and a contact shadow. Not a
   white box, and nothing borrowed from Apex's red blocks. */
.navdrop {
  background: var(--surface-parchment);
  border: 1px solid var(--border-brass);
  box-shadow: 0 18px 40px -28px rgba(28, 33, 31, 0.5);
  padding: var(--s4);
  min-width: 19rem;
  border-radius: 0;
}
.navdrop__intro {
  margin: 0 0 var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  max-width: 34ch;
}
/* Past five links a single column becomes a scroll rather than a menu. */
/* A two-column panel needs a two-column panel's width. The base rule caps
   .navdrop at 22rem, and the wider list simply overflowed it — the second
   column's links rendered outside the parchment, on top of the hero film,
   unreadable and un-clickable-looking. The cap is raised only for panels that
   actually hold two columns, and clamped to the viewport so a trigger near
   the right edge cannot push the panel off screen. */
.navdrop:has(.navdrop__list--two) {
  /* Both bounds. Raising only the maximum let the grid compress itself back
     into the 19rem minimum and the two columns became two narrow gutters. */
  min-width: min(34rem, calc(100vw - 2rem));
  max-width: min(38rem, calc(100vw - 2rem));
}
.navdrop__list--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s4);
  width: 100%;
}
/* Panels belonging to the last triggers open leftward, so they stay on screen
   at the width the two-column layout needs. */
.nav__item:nth-last-child(-n + 2) .navdrop { left: auto; right: -14px; }
.navdrop__link { min-height: 44px; display: grid; align-content: center; }
.navdrop__note { max-width: 30ch; }

/* A safe diagonal path from trigger to panel: without it the pointer crosses
   a gap and the panel closes under the cursor on its way there. */
.navdrop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .navdrop { transition: none; }
}

/* The drawer's contact link was a 23px text target. It is a real control in a
   menu operated by thumb, so it gets a real hit area. */
.menu__contact-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ==================== The evidence library ============================= *
   Supersedes the moving trust rail. That was a marquee: cards drifted, the
   left edge clipped them mid-word, and the last row was whatever happened to
   be left over. Evidence is the one thing on this site a reader may want to
   stop and inspect, so it must not move, and it must not need a pause button
   to be readable.

   Seven records, four then three, centred as a block rather than left-packed,
   so the shorter second row sits under the middle of the first.             */
.ev {
  width: min(1240px, 100%);
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 3rem);
  background: var(--surface-parchment);
  border: 1px solid var(--border-subtle);
}
.ev__head { max-width: 62ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.ev__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1.1;
  margin: 0 0 var(--s3);
  color: var(--text-primary);
}
.ev__intro { margin: 0; color: var(--text-secondary); font-size: var(--t-small); line-height: 1.6; }

/* Centred by the grid itself: `justify-content: center` on a fixed-width track
   keeps the block centred whatever the count, so a trailing row of three sits
   under the middle of four rather than against the left edge. No negative
   margins, no transforms, nothing to drift. */
/* Flex, not grid, and for one reason: a grid cannot centre an incomplete final
   row. Seven records means a row of four and a row of three, and under grid the
   three packed to the left and left a hole on the right — the unbalanced last
   row this rebuild exists to fix. Wrapping flex centres every row it produces,
   including the short one, with no placeholder cells and no offsets. */
.ev__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--s4);
}
.ev__cell { flex: 0 1 15.5rem; }
/* Every card the same height, across both rows and not merely within one.
   Rows sized to content left the second row 21px shorter than the first, which
   is the sort of near-miss that reads as sloppy rather than as variation.
   Single-column mobile is excluded: matching a one-line card to the tallest in
   the set would only add dead space. */
.ev__cell { display: flex; }
.ev__cell > .ev__card { height: 100%; }

.ev__card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: var(--s2);
  width: 100%;
  padding: var(--s5) var(--s4) var(--s4);
  background: var(--surface-ivory);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  color: var(--text-primary);
  transition:
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* The one piece of decoration: a fine brass rule along the top edge, which is
   what separates an evidence card from a content card without a coloured slab. */
.ev__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--accent-brass);
}
.ev__card:hover,
.ev__card:focus-visible {
  transform: translate3d(0, -3px, 0);
  border-color: var(--accent-brass);
  box-shadow: 0 12px 24px -18px rgba(28, 33, 31, 0.45);
}
.ev__card:focus-visible { outline: 2px solid var(--accent-brass-deep); outline-offset: 3px; }

.ev__mark { display: flex; align-items: center; min-height: 34px; }
.ev__icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--accent-brass-deep);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The supplied portal mark, used as delivered. It is flattened on white, so
   multiply drops it onto the ivory card without touching a brand colour. */
/* The portal mark was set to 22px, which put it well below the 26px line
   markers beside it — the one real logo in the set read as the smallest thing
   on the card. Matched to the marker row's optical weight instead. */
.ev__logo { height: 34px; width: auto; display: block; mix-blend-mode: multiply; }

.ev__label {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-brass-deep);
  font-weight: 600;
}
.ev__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.25;
  color: var(--text-primary);
}
.ev__blurb { font-size: 0.8125rem; line-height: 1.55; color: var(--text-secondary); }
.ev__act {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}
.ev__arrow { color: var(--accent-brass-deep); transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }

/* The marker leads the movement by a fraction, so the card reads as one object
   settling rather than a box and an arrow moving independently. 40ms is below
   the threshold at which a stagger is consciously noticed and above the one at
   which it does nothing — it is felt as weight, not seen as a sequence.
   Purpose, not decoration: this card is a link to an external register, and
   the hover has to say "this opens something" more clearly than a colour
   change can on a page where everything is already warm ivory. */
.ev__mark { transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 40ms; }
.ev__card:hover .ev__mark,
.ev__card:focus-visible .ev__mark { transform: translate3d(0, -2px, 0); }

/* The brass rule is the card's one piece of identity, so it is what confirms
   the hover: it thickens rather than the card changing colour. */
.ev__card::before { transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.ev__card:hover::before,
.ev__card:focus-visible::before { height: 3px; }
.ev__card:hover .ev__arrow,
.ev__card:focus-visible .ev__arrow { transform: translateX(4px); }

/* Tablet is two columns, and that runs to 1200 rather than 1024 — at 1024 a
   flexible basis produced three columns and left a single card alone on a
   third row, which is the unbalanced tail this rebuild is fixing. The cut
   matches the navigation's own: below 75em this is a tablet. */
@media (max-width: 74.99em) {
  .ev__cell { flex: 0 1 20rem; max-width: 20rem; }
}
@media (max-width: 47.99em) {
  .ev__grid { gap: var(--s3); }
  .ev__cell { flex: 1 1 100%; }
  .ev { padding: var(--s5) var(--s4); }
  .ev__card { padding: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  .ev__card, .ev__arrow, .ev__mark { transition: none; }
  .ev__card:hover .ev__mark, .ev__card:focus-visible .ev__mark { transform: none; }
  .ev__card:hover, .ev__card:focus-visible { transform: none; }
  .ev__card:hover .ev__arrow, .ev__card:focus-visible .ev__arrow { transform: none; }
}


/* ---- Navigation corrections from review ---- */

/* A wrapping link left its arrow stranded: .navdrop__label was an inline-flex
   whose text wrapped internally while the arrow stayed on the flex line —
   measured 146px of gap on "Tenant fees and permitted payments" at 1440. The
   arrow belongs to the last word, so it goes back in the text flow. */
.navdrop__label { display: block; }
.navdrop__arrow { display: inline; margin-left: 8px; }
/* And the panels were sitting exactly on their 19rem floor, which is what
   forced those wraps in the first place. */
.navdrop { min-width: 21rem; }

/* "Contact" carries both .mnav__link and .mnav__link--top, and the plain-child
   rules came later at equal specificity, so the top-level item rendered
   smaller and greyer than its siblings. Scoping the child rules to the
   submenu lets the top-level styling win on its own terms. */
.menu[open] .mnav__sub .mnav__link,
.mnav__sub .mnav__link { font-size: 1rem; }
.menu[open] .mnav__link--top,
.mnav__link--top {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--text-primary);
  min-height: 60px;
}

/* The drawer's two primary actions were pinned with margin-top:auto inside a
   scrolling column, so they sat at the bottom of the CONTENT, not the panel —
   measured off screen at 320 and 375 before any interaction, with a 169px void
   above them. Sticky keeps them on screen whatever the panel height. */
.menu[open] .menu__actions {
  margin-top: var(--s5);
  position: sticky;
  bottom: 0;
  background: var(--surface-parchment);
  padding-block: var(--s3);
  box-shadow: 0 -12px 18px -18px rgba(28, 33, 31, 0.5);
}

/* The review build packs seven groups plus two actions; at a large root font
   "Contact" overprinted the Properties button. Letting the nav shrink and the
   actions keep their intrinsic width resolves it without a new breakpoint. */
.site-head__inner { min-width: 0; }
.nav--wide { min-width: 0; }
.site-head__actions { flex: 0 0 auto; }

/* Short labels — Buy, Sell, Let — rendered 40-43px wide, under the 44px
   minimum target. Height was already right; width was not. */
.nav__link--trigger { min-width: 44px; justify-content: center; }

/* The horizontal TDS lockup, which sits with the other landscape plates
   instead of fighting them. It is a JPEG flattened on white like the rest of
   the supplied marks, so multiply drops it onto the warm surfaces without
   touching its turquoise or its navy. */
.creds__logo[src*="tds"] { max-height: 40px; max-width: 150px; object-fit: contain; }
[data-page="home"] .ev__logo[src*="tds"] {
  height: 34px;
  max-width: 130px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ==========================================================================
 *  CONTACT HUB AND SEARCH HERO                        2 August 2026
 *
 *  Two components rebuilt against verified facts.
 *
 *  The contact panel used to be a definition list of five bracketed gaps —
 *  "[Business phone pending client confirmation]" and four more like it —
 *  because nothing had been confirmed. Aarav has now verified the office
 *  line, the WhatsApp number, the email address and the Instagram profile,
 *  so the panel becomes what it was always meant to be: four routes a
 *  visitor can actually use. Facebook and opening hours are still
 *  unconfirmed and are therefore absent, not greyed out and not labelled
 *  pending: a public visitor is not the audience for the build's own open
 *  questions.
 *
 *  The property hero opened on a mushroom-grey media placeholder with crop
 *  guides and a ratio badge printed on it, and put white type on that grey
 *  at a contrast nobody would have signed off. It is now a warm ivory-to-
 *  stone wash with charcoal type, and the deep-forest search module is the
 *  only saturated thing on the screen — which is the point, because it is
 *  the thing you are meant to use.
 *
 *  This block is last in the sheet on purpose. dukes.css is nine thousand
 *  lines with three generations of palette in it, and every earlier attempt
 *  to restyle either component from the middle of the file lost to a later
 *  override.
 * ========================================================================== */

:root {
  /* The brief's values, scoped to these two components rather than pushed
     into the shared palette. Repainting the site tokens would move all
     sixteen pages and invalidate every contrast pair axe has measured. */
  --contact-ivory: #f7f3ea;
  --contact-parchment: #e9dfcf;
  --contact-forest: #183a31;
  --contact-charcoal: #211f1a;
  --contact-brass: #b48745;
  /* Measured, not assumed: #b48745 is 2.9:1 on ivory, so it never carries
     text on a light surface. It is the fill, the rule and the hover edge.
     Text-weight brass is the existing deep one, 7.5:1 on ivory. */
  --contact-brass-text: var(--accent-brass-deep);
  --contact-on-forest: #f4eee3;
  --contact-on-forest-soft: rgba(244, 238, 227, 0.82);
}

/* ------------------------------ Contact hub ------------------------------ */

.contact { display: grid; gap: var(--s3); }
.contact__intro {
  margin: 0;
  font-size: var(--t-small);
  color: var(--text-secondary);
  max-width: 62ch;
}

.contact__grid {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}
/* Two columns from tablet up and no further. Four routes are a 2x2 at every
   size that can hold two; a third column would leave one card alone on a
   second row, which is the unbalanced tail this rebuild exists to avoid. */
@media (min-width: 40em) {
  .contact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.contact__cell { display: flex; }

/* The card is the evidence card's material on purpose: same ivory, same
   hairline, same brass rule, same three-pixel lift. A contact route and a
   source record are both "a thing you can act on", and giving them two
   different card languages on the same page is how a site starts to look
   assembled rather than designed. */
.cmethod {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: var(--s2);
  width: 100%;
  padding: var(--s5) var(--s4) var(--s4);
  background: var(--contact-ivory);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  color: var(--contact-charcoal);
  text-decoration: none;
  transition:
    transform 200ms var(--ease-in-out),
    border-color 200ms var(--ease-in-out),
    box-shadow 200ms var(--ease-in-out);
}
.cmethod::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--contact-brass);
  transition: height 200ms var(--ease-in-out);
}

.cmethod__mark {
  display: flex;
  align-items: center;
  min-height: 30px;
  transition: transform 200ms var(--ease-in-out) 40ms;
}
.cmethod__icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--contact-charcoal);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The two platform glyphs are the official marks, drawn solid. They take the
   monochrome treatment both platforms publish rather than a brass tint,
   because recolouring somebody else's mark to match your palette is the one
   thing their guidelines actually forbid. Keeping all five marks the same
   ink also leaves brass doing one job on this page. */
.cmethod__icon--brand { fill: var(--contact-charcoal); stroke: none; }

.cmethod__label {
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-secondary);
}
.cmethod__value {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--contact-charcoal);
  /* "ask@dukesestate.com" is one unbreakable token in a 230px column. */
  overflow-wrap: anywhere;
}
.cmethod__blurb { font-size: var(--t-small); color: var(--text-secondary); }
.cmethod__act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--contact-brass-text);
}
.cmethod__arrow { transition: transform 200ms var(--ease-in-out); }

/* Hover is gated so a tap on a phone does not leave a card stuck in its
   hover state. Focus gets the identical treatment plus a ring: the keyboard
   route is not the poor relation of the pointer one. */
@media (hover: hover) and (pointer: fine) {
  .cmethod:hover {
    transform: translate3d(0, -3px, 0);
    border-color: var(--contact-brass);
    box-shadow: 0 12px 24px -18px rgba(33, 31, 26, 0.45);
  }
  .cmethod:hover::before { height: 3px; }
  .cmethod:hover .cmethod__mark { transform: translate3d(0, -2px, 0); }
  .cmethod:hover .cmethod__arrow { transform: translateX(4px); }
}
.cmethod:focus-visible {
  outline: 2px solid var(--contact-brass-text);
  outline-offset: 3px;
  transform: translate3d(0, -3px, 0);
  border-color: var(--contact-brass);
  box-shadow: 0 12px 24px -18px rgba(33, 31, 26, 0.45);
}
.cmethod:focus-visible::before { height: 3px; }
.cmethod:focus-visible .cmethod__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .cmethod,
  .cmethod::before,
  .cmethod__mark,
  .cmethod__arrow { transition: none; }
  .cmethod:hover,
  .cmethod:focus-visible { transform: none; }
  .cmethod:hover .cmethod__mark,
  .cmethod:focus-visible .cmethod__mark { transform: none; }
}

/* The registered office is legal information, not a fifth way to get in
   touch, so it is a quieter row on parchment below the four cards and it
   says in its own words that nobody is sitting there waiting for you. */
.contact__legal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3) var(--s4);
  align-items: start;
  margin: var(--s5) 0 0;
  padding: var(--s4);
  background: var(--contact-parchment);
  border-left: 3px solid var(--contact-brass);
  /* It is a <p>, and every <p> in this sheet is capped at the reading measure.
     This one is a panel, so it takes the width of the cards above it. */
  max-width: none;
}
.contact__legal-mark { display: flex; align-items: start; }
.contact__legal-mark .cmethod__icon { width: 22px; height: 22px; stroke: var(--contact-brass-text); }
.contact__legal-body { display: grid; gap: 3px; min-width: 0; }
.contact__legal-label {
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--contact-brass-text);
}
.contact__legal-value { font-weight: 600; color: var(--contact-charcoal); }
.contact__legal-note { font-size: var(--t-small); color: var(--text-secondary); }

/* The closing block used to sit the contact routes in a 0.85fr column beside
   the form, which left the four cards 185px wide at 1024. The hub now spans
   the full measure and the form is centred under it. */
.closing__hub { width: 100%; }
/* The form keeps a reading measure — full-width fields at 1320px are a worse
   form — but it shares the hub's left edge rather than being centred under it,
   so the block has one alignment instead of two. */
.closing__form { width: 100%; max-width: 64rem; margin-inline: 0; }

/* --------------------------- Property search hero ------------------------- */

.hero--search {
  position: relative;
  /* Ends close to --surface-page so the hero hands over to the results band
     without a visible seam across the full width of the viewport. */
  background: linear-gradient(168deg, #fdfbf7 0%, #f6f1e6 38%, #ece2d1 78%, #f2ede3 100%);
  color: var(--contact-charcoal);
  --fg: var(--contact-charcoal);
  --fg-soft: var(--text-secondary);
  --focus-ring: var(--contact-brass-text);
  --focus-halo: rgba(180, 135, 69, 0.32);
  border-bottom: 1px solid rgba(33, 31, 26, 0.12);
}
/* Restraint over texture: two very wide, very low-opacity radials so the wash
   has a light source and a warm corner instead of reading as a flat fill. No
   image, no noise layer, nothing to download. */
.hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 78% at 86% 6%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 62%),
    radial-gradient(78% 62% at 2% 100%, rgba(180, 135, 69, 0.11), rgba(180, 135, 69, 0) 70%);
}
.hero__inner--search { position: relative; padding-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.hero--search .h-display,
.hero--search .h-display--sm { color: var(--contact-charcoal); }
.hero--search .hero__lede { color: var(--text-secondary); max-width: 46ch; }

/* Brass eyebrow, in the two weights the palette already distinguishes: the
   deep one carries the word at 7.5:1, the decorative one draws the rule. */
.eyebrow--rule {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  color: var(--contact-brass-text);
}
.eyebrow--rule::after {
  content: "";
  width: clamp(2rem, 6vw, 3.5rem);
  height: 1px;
  background: var(--contact-brass);
}

/* The one saturated surface on the page. */
.hero--search .search--hero {
  margin-top: var(--s6);
  padding: clamp(1.25rem, 2.4vw, 2.25rem);
  background: var(--contact-forest);
  border-top: 3px solid var(--contact-brass);
  color: var(--contact-on-forest);
  --fg: var(--contact-on-forest);
  --fg-soft: var(--contact-on-forest-soft);
  --focus-ring: var(--contact-brass);
  --focus-halo: rgba(197, 166, 106, 0.4);
  box-shadow: 0 26px 50px -36px rgba(24, 58, 49, 0.75);
}
.hero--search .form__label,
.hero--search .search__legend { color: var(--contact-on-forest); }

/* Fields were translucent dark-on-dark. They are light warm surfaces now, so
   what you have typed is the highest-contrast thing in the module. */
.hero--search .form__control {
  min-height: 46px;
  background: var(--contact-ivory);
  border: 1px solid rgba(33, 31, 26, 0.3);
  color: var(--contact-charcoal);
}
.hero--search .form__control:hover { border-color: var(--contact-brass-text); }
.hero--search .form__control:focus-visible {
  outline: 3px solid var(--contact-brass);
  outline-offset: 2px;
  border-color: var(--contact-charcoal);
}
.hero--search .form__control option { color: var(--contact-charcoal); background: var(--contact-ivory); }

.hero--search .btn--primary {
  --btn-fill: var(--contact-brass);
  --btn-fg: var(--contact-charcoal);
  border-color: var(--contact-brass);
  color: var(--contact-charcoal);
}
.hero--search .btn--primary:hover,
.hero--search .btn--primary:focus-visible { --btn-fill: #c79a55; border-color: #c79a55; }
.hero--search .btn--quiet {
  --btn-fg: var(--contact-on-forest);
  border-color: rgba(244, 238, 227, 0.45);
  color: var(--contact-on-forest);
}
.hero--search .btn--quiet:hover,
.hero--search .btn--quiet:focus-visible { border-color: var(--accent-champagne); }
.hero--search .search__toggle { color: var(--contact-on-forest); }
.hero--search .search__note {
  margin: 0;
  max-width: 62ch;
  color: var(--contact-on-forest-soft);
  font-size: var(--t-small);
}

/* Public build: no transaction control at all, because lettings is the only
   confirmed one and a single radio is not a choice. This states the scope
   instead, and the hidden input keeps the submitted query honest. */
.search__scope {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  margin: 0;
}
.search__scope-label {
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--contact-on-forest-soft);
}
.search__scope-value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--contact-on-forest);
  border-bottom: 2px solid var(--contact-brass);
  padding-bottom: 2px;
}

/* Review build only: the sale route is visible so its shape can be judged,
   unselectable, and labelled in words rather than by colour alone. The struck
   label and the "not offered" flag both survive a greyscale screenshot; the
   dimmed control alone would not, and an unchecked disabled radio renders as a
   filled grey dot in Chromium, which reads as selected. */
.hero--search .search__radio--off { color: rgba(244, 238, 227, 0.72); }
.hero--search .search__radio--off input {
  cursor: not-allowed;
  opacity: 0.45;
}
.hero--search .search__radio--off > span:first-of-type {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
/* At 375 the two radios and the flag fought over one line and broke "For sale"
   across it. One choice per row below 30em, flag under its own control. */
@media (max-width: 30em) {
  .hero--search .search__mode { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .hero--search .search__radio { flex-wrap: wrap; }
  .hero--search .search__radio--off .search__flag { flex-basis: 100%; padding-left: 30px; }
}
.hero--search .search__flag {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-champagne);
}

/* ---------------------- Launcher clearance, restored ---------------------- */
/* .is-stowed has existed since the launcher was built and has been inert the
   whole time. Its rule is at line ~3086; the entrance rule at ~7732 is
   [data-enhanced] .launcher[data-launcher-in="on"], which carries the same
   0-3-0 specificity and comes four thousand lines later, so it won every
   cascade and put opacity back to 1 on a control that had just asked to be
   hidden. That is why the launcher sat on top of a contact card and the
   property-type select at 320 and 375. The class does something again now.
   Stated at the end of the sheet because that is the only place in this file
   where a rule is safe. */
[data-enhanced] .launcher.is-stowed,
[data-enhanced] .launcher[data-launcher-in="on"].is-stowed {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 10px, 0) scale(0.96);
  pointer-events: none;
}

/* ==========================================================================
 *  REVIEWER FACES                                     2 August 2026
 *
 *  Every review card used to open with two letters in the display face. Where
 *  Aarav supplied the reviewer's own Google profile picture, the card opens
 *  with that instead. The two states are deliberately the same object — same
 *  diameter, same circle, same position — so a row containing one of each
 *  reads as one component with a photograph missing, not as two designs.
 *
 *  The photographs are the only faces on this site that are of real, named
 *  people. The two people-images on /about/ are still registered as
 *  placeholders. Keeping the reviewer portraits small and circular is what
 *  stops the page reading as though Dukes has a photographed team.
 * ========================================================================== */

.face {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  /* Every card that holds a face is a grid, so a face is a grid item and a grid
     item stretches to its column. The photo variants below all state an
     explicit width and height, which is what keeps them circular; the letter
     variants must not stretch either, hence justify-self.

     There was an aspect-ratio: 1 here, and it was actively harmful: display
     is blockified on a grid item, so the letter variant's width: auto became
     the full 1154px column and aspect-ratio squared it into a 1154px void.
     Sizing is stated per variant now rather than inferred. */
  justify-self: start;
}
.face__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* The wall card already had a 40px circle. It keeps it; only the contents
   change. */
.rcard__initials.face { padding: 0; }
.rcard__initials.face:not(.face--letters) {
  border-color: var(--border-subtle);
  background: var(--surface-limestone);
}
[data-page="home"] .band--reviews .rcard__initials.face:not(.face--letters) {
  background: var(--surface-limestone);
  border: 1px solid var(--border-subtle);
}

/* The About testimonial rail. Its 44px disc predates the face component;
   the photo variant fills it edge to edge. */
.abt-rail__initials.face { padding: 0; }
.abt-rail__initials.face:not(.face--letters) { background: var(--surface-limestone); border: 1px solid var(--border-subtle); }

/* The /reviews/ cards. Same face component at the standard 40px. */
.rvw-card__initials.face { width: 40px; height: 40px; flex: none; }
.rvw-card__initials.face:not(.face--letters) { background: var(--surface-limestone); border: 1px solid var(--border-subtle); }

/* The hero wings' attribution row. A compact 24px face beside the name —
   same gate, same asset, same identity as the review's own card. The wing's
   dimensions, rotation and aria-hidden status are untouched; only the
   figcaption became a row. */
.wing__by { display: flex; align-items: center; gap: 8px; }
.wing__who { display: grid; gap: 2px; min-width: 0; }
.wing__initials.face {
  width: 24px;
  height: 24px;
  flex: none;
  border: 1px solid rgba(246, 240, 228, 0.35);
}
.wing__initials.face--letters {
  background: rgba(246, 240, 228, 0.12);
  color: rgba(246, 240, 228, 0.92);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* The /reviews/ source list. Same face component, sized for a dense list. */
.reviewlist__initials.face {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-limestone);
}
/* Initials keep the circle rather than collapsing to loose type. A row of
   cards where some open with a 40px disc and others with two floating letters
   is two components; this way it is one component with a photograph missing,
   and the rows stay the same height. */
.reviewlist__initials.face--letters {
  background: transparent;
  border-color: var(--border-brass);
  color: var(--accent-brass-deep);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

/* ==========================================================================
 *  CONTACT HUB AND SEARCH HERO — review pass                  2 August 2026
 *
 *  Changes from an independent review that measured rather than eyeballed.
 *  Each one is here rather than edited in place above, because that is the
 *  rule this sheet runs on: the last block wins.
 * ========================================================================== */

/* 1. Four across on a wide screen.
      The earlier comment justified capping at two columns because a third
      would strand one card on a second row. That is true of three columns and
      false of four. Measured at 1440 the two-column cards were 594px wide
      holding a longest text run of 277px, so half of every card was empty and
      the action hairline stretched 562px above a 77px link. Four routes in one
      row is the balanced arrangement; 2x2 stays the tablet answer. */
@media (min-width: 75em) {
  .contact__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 2. Card padding was mobile-sized at every width. */
@media (min-width: 48em) {
  .cmethod { padding: var(--s5) var(--s5) var(--s5); }
  .contact__legal { padding: var(--s5); }
}

/* 3. The brand glyphs were optically two to three times heavier than the line
      icons. Rasterised at 104px: phone 14.8% ink in a 75px bounding box,
      envelope 19.9%, pin 17.2% — against WhatsApp 35.8% and Instagram 44.2%,
      both filling the full 103px box. Same nominal size, visibly different
      weight, alternating around a grid. Solid marks are set smaller so the
      optical sizes match; .cmethod__mark keeps its min-height so nothing
      shifts. */
.cmethod__icon--brand { width: 21px; height: 21px; }

/* 4. One measure for the whole closing block. The hub's cards and its
      parchment legal row are painted surfaces running the full width; the form
      beneath is also a painted surface, and at 1440 it stopped 181px short,
      which read as a misalignment rather than a reading measure. The form
      keeps a comfortable line length through its own two-column field grid. */
.closing__form { max-width: none; }
.closing__form .form { max-width: 64rem; }

/* 5. The initials fallback had three treatments across four blocks: brass ring
      on the stage and the source list, filled limestone disc on the wall, and
      photo faces carried a different ring colour from letter faces inside the
      same list. The whole argument for this component is that a card with a
      photograph and a card without are the same object, so they now share one
      ring and one background, and only the contents differ. */
.rcard__initials.face--letters,
.reviewlist__initials.face--letters,
[data-page="home"] .band--reviews .rcard__initials.face--letters {
  background: var(--surface-limestone);
  border: 1px solid var(--border-subtle);
  color: var(--text-ink);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}
.rcard__initials.face--letters,
.reviewlist__initials.face--letters { font-size: 0.95rem; }

/* ---------------------------- Search module ------------------------------- */

/* 6. The legend and the field labels were both 14.4px in the same colour, so
      the question outranked nothing. */
.hero--search .search__legend,
.search__scope-label {
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* 7. Five fields in a two-column grid left "Sort by" alone beside a hole.
      Location spans the row, which is also the field most people use. */
@media (min-width: 48em) and (max-width: 63.99em) {
  .search--hero .search__field:first-child { grid-column: 1 / -1; }
}

/* 8. At 320 the three actions stacked as three ragged pills of 125, 133 and
      151px inside a 248px column. The primary takes the row it deserves. */
@media (max-width: 30em) {
  .search__actions { display: grid; gap: var(--s3); }
  .search__actions .btn { width: 100%; }
  .search__toggle { margin-top: var(--s2); }
}

/* The two confirmed routes now printed in the drawer and the footer. They were
   withheld until 2 August 2026 because nothing was confirmed; leaving them out
   after confirmation meant the footer implied there was no phone number while
   the contact hub printed one 900px above it. */
.menu__contact-routes,
.site-foot__routes {
  display: grid;
  gap: 2px;
  margin: 0 0 var(--s3);
  max-width: none;
}
.menu__contact-routes a,
.site-foot__routes a { justify-self: start; }

/* ==========================================================================
 *  THE CONTACT RAIL                                          2 August 2026
 *
 *  A row of four circular controls: telephone, WhatsApp, email, Instagram.
 *  Adapted from the supplied SocialTooltip React component, translated into
 *  this project's own system rather than the other way round — there is no
 *  React here, no Tailwind and no build step that would compile either.
 *
 *  Kept from the original: the circle, the fill rising from the bottom edge,
 *  the icon inverting over it, the tooltip fading up beneath, and the
 *  reduced-motion guards.
 *
 *  Changed, deliberately:
 *    * One fill colour, not four. The original painted each control in its
 *      platform's own green, pink and blue. Four saturated discs in a row is
 *      the look this palette was built to avoid, and it would put more
 *      colour in the footer than exists on the rest of the page. The fill is
 *      the site's forest; the edge is its brass.
 *    * 220ms, not 300ms, on --standard with the sheet's own easing, so the
 *      rail moves at the same speed as every other control here.
 *    * A 2px lift. The original's -translate-y-0.5 is the same idea; this
 *      states it in pixels because the rest of the sheet does.
 *    * Below the hover breakpoint the tooltip is not a tooltip. It becomes a
 *      permanent two-line caption under each control, because a label that
 *      only appears on hover is a label a touch user never reads.
 * ========================================================================== */

.crail { display: grid; gap: var(--s3); }
.crail__intro {
  margin: 0;
  font-size: var(--t-small);
  color: var(--text-secondary);
  max-width: 60ch;
}

.crail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}
.crail__item { position: relative; }

/* 48px: comfortably over the 44px minimum target at every width, and it stays
   48px on a phone rather than shrinking, because the phone is where these are
   most likely to be the thing somebody actually presses. */
.crail__link {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--contact-ivory);
  color: var(--contact-charcoal);
  overflow: hidden;
  text-decoration: none;
  transition:
    transform var(--standard) var(--ease-in-out),
    border-color var(--standard) var(--ease-in-out),
    box-shadow var(--standard) var(--ease-in-out);
}

/* The fill rises from the bottom edge. Height rather than transform is the one
   place this sheet animates a layout property on purpose: the element is
   absolutely positioned inside an overflow-hidden circle, so it composites
   without touching the page's layout, and a scaleY would stretch the circle's
   curve into an ellipse on the way up. */
.crail__fill {
  position: absolute;
  inset: auto 0 0;
  height: 0;
  background: var(--contact-forest);
  transition: height var(--standard) var(--ease-in-out);
}

.crail__glyph { position: relative; z-index: 1; display: grid; place-items: center; }
.crail__icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color var(--standard) var(--ease-in-out);
}
/* The two official marks are solid, and were measured at two to three times
   the ink of the line icons at a matched box, so they are set smaller. */
.crail__icon--brand { fill: currentColor; stroke: none; width: 18px; height: 18px; }

/* ---------------------------------- Tooltip ------------------------------- */

.crail__tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 5;
  display: grid;
  gap: 1px;
  padding: var(--s2) var(--s3);
  background: var(--contact-charcoal);
  color: var(--contact-ivory);
  border-radius: var(--radius-control);
  box-shadow: 0 10px 22px -16px rgba(28, 33, 31, 0.75);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition:
    opacity var(--standard) var(--ease-in-out),
    transform var(--standard) var(--ease-in-out);
}
.crail__tip-label {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-champagne);
}
.crail__tip-value { font-size: var(--t-small); font-weight: 600; }

/* The first and last controls anchor their tooltip to their own edge instead
   of centring it, so a rail sitting hard against the page inset cannot push a
   tooltip off screen. */
.crail__item:first-child .crail__tip { left: 0; transform: translate(0, 4px); }
.crail__item:last-child .crail__tip { left: auto; right: 0; transform: translate(0, 4px); }

/* -------------------------------- States ---------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .crail__link:hover {
    transform: translate3d(0, -2px, 0);
    border-color: var(--contact-brass);
    box-shadow: 0 10px 20px -14px rgba(28, 33, 31, 0.5);
  }
  .crail__link:hover .crail__fill { height: 100%; }
  .crail__link:hover { color: var(--contact-ivory); }
  .crail__item:hover .crail__tip { opacity: 1; transform: translate(-50%, 0); }
  .crail__item:first-child:hover .crail__tip,
  .crail__item:last-child:hover .crail__tip { transform: translate(0, 0); }
}

/* Focus is given the whole treatment, not a ring bolted onto a dead control. */
.crail__link:focus-visible {
  outline: 2px solid var(--accent-brass-deep);
  outline-offset: 3px;
  transform: translate3d(0, -2px, 0);
  border-color: var(--contact-brass);
  color: var(--contact-ivory);
}
.crail__link:focus-visible .crail__fill { height: 100%; }
.crail__item:focus-within .crail__tip { opacity: 1; transform: translate(-50%, 0); }
.crail__item:first-child:focus-within .crail__tip,
.crail__item:last-child:focus-within .crail__tip { transform: translate(0, 0); }

@media (prefers-reduced-motion: reduce) {
  .crail__link,
  .crail__fill,
  .crail__tip,
  .crail__icon { transition: none; }
  .crail__link:hover,
  .crail__link:focus-visible { transform: none; }
  /* The state still reads, it just arrives rather than travels. */
  .crail__item:hover .crail__tip,
  .crail__item:focus-within .crail__tip { transform: translate(-50%, 0); }
  .crail__item:first-child:hover .crail__tip,
  .crail__item:first-child:focus-within .crail__tip,
  .crail__item:last-child:hover .crail__tip,
  .crail__item:last-child:focus-within .crail__tip { transform: none; }
}

/* ------------------------------- On the dark footer ----------------------- */

.crail--dark .crail__intro { color: var(--text-on-dark-soft); }
.crail--dark .crail__link {
  background: transparent;
  border-color: var(--border-on-dark);
  color: var(--text-on-dark-warm);
}
.crail--dark .crail__fill { background: var(--accent-champagne); }
@media (hover: hover) and (pointer: fine) {
  .crail--dark .crail__link:hover {
    border-color: var(--accent-champagne);
    color: var(--contact-charcoal);
  }
}
.crail--dark .crail__link:focus-visible {
  outline-color: var(--accent-champagne);
  border-color: var(--accent-champagne);
  color: var(--contact-charcoal);
}
.crail--dark .crail__tip {
  background: var(--contact-ivory);
  color: var(--contact-charcoal);
}
.crail--dark .crail__tip-label { color: var(--accent-brass-deep); }

/* The labelled variant's caption is permanently visible, not a hover popup, so
   it needs a genuine dark-surface colour rather than the light-tooltip
   default. Previously only patched inside `.reception--safe`; this direct-
   contact fallback (added under the Homepage/Receptionist reconciliation
   brief) is the first `tone: "dark"` + labelled usage outside that one
   section, and it surfaced the gap. Same colours the no-hover/touch fallback
   already uses below, so a dark-tone labelled rail reads correctly everywhere
   it appears rather than only where it happened to be patched before. */
.crail--dark.crail--labelled .crail__tip-label { color: var(--text-on-dark-soft); }
.crail--dark.crail--labelled .crail__tip-value { color: var(--text-on-dark-warm); }

/* --------------------------- No hover: no tooltip ------------------------- */

/* A touch screen never fires hover, so the tooltip would be a label nobody
   reads. It stops being a tooltip and becomes the control's caption: in flow,
   permanently visible, and left-aligned under its own icon. The rail becomes a
   column so four captions cannot collide or run off the side. */
@media (hover: none), (max-width: 47.99em) {
  .crail__list { display: grid; gap: var(--s3); }
  .crail__item { display: flex; align-items: center; gap: var(--s4); min-height: 48px; }
  .crail__tip {
    position: static;
    display: grid;
    gap: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
    white-space: normal;
    min-width: 0;
    color: inherit;
  }
  .crail__item:first-child .crail__tip,
  .crail__item:last-child .crail__tip { left: auto; right: auto; transform: none; }
  .crail__tip-label { color: var(--text-secondary); }
  .crail__tip-value { color: var(--contact-charcoal); overflow-wrap: anywhere; }
  .crail--dark .crail__tip-label { color: var(--text-on-dark-soft); }
  .crail--dark .crail__tip-value { color: var(--text-on-dark-warm); }
}

/* Two columns of caption rows once there is room for them, before the hover
   breakpoint takes over. */
@media (hover: none) and (min-width: 34em) {
  .crail__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------- The labelled variant ------------------------- *
   The contact section shows the route and its value permanently. Same control,
   same circle, same fill and lift — the tooltip simply stops being a tooltip
   and becomes the caption beside it, which is exactly what the no-hover rules
   above already do for touch. Stated as a class so the presentation is chosen
   by where the rail is used, not only by what the device can do.            */
.crail--labelled .crail__list {
  display: grid;
  gap: var(--s4) var(--s5);
}
.crail--labelled .crail__item {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 48px;
}
.crail--labelled .crail__tip {
  position: static;
  display: grid;
  gap: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  transform: none;
  white-space: normal;
  pointer-events: auto;
  color: inherit;
}
.crail--labelled .crail__item:first-child .crail__tip,
.crail--labelled .crail__item:last-child .crail__tip {
  left: auto;
  right: auto;
  transform: none;
}
.crail--labelled .crail__tip-label {
  color: var(--text-secondary);
  font-size: 0.6875rem;
}
.crail--labelled .crail__tip-value {
  color: var(--contact-charcoal);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  overflow-wrap: anywhere;
}
/* Two by two once there is room, four across on a wide screen: the same
   rhythm the card hub uses, so the two contact presentations on this site
   are recognisably the same family. */
@media (min-width: 40em) {
  .crail--labelled .crail__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 75em) {
  .crail--labelled .crail__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The closing block is plain flow, so its children need their own separation:
   the rail was sitting directly on the enquiry form's top rule, and in the
   footer it was touching the "Registered office" label. */
.closing__hub { margin-bottom: var(--s7); }
.site-foot__contact .crail { margin-bottom: var(--s4); }

/* Tooltip containment.
   Centring on the control and anchoring the last one to its own right edge
   both fail the same way: the anchor is the control, and a control near the
   left of the viewport has no room to its left whatever you anchor to. At
   1024 the footer's Instagram tooltip measured -103px, i.e. a hundred pixels
   off the left of the screen. Every tooltip now opens from its control's LEFT
   edge and is capped to the viewport, so its left edge can never be further
   left than the control itself — and the control is already inside the page
   inset. Both rails on this site are left-aligned, so nothing can push the
   right edge out either. */
.crail__tip,
.crail__item:first-child .crail__tip,
.crail__item:last-child .crail__tip {
  left: 0;
  right: auto;
  transform: translate(0, 4px);
  max-width: min(18rem, calc(100vw - 2 * var(--inset)));
  white-space: normal;
}
.crail__item:hover .crail__tip,
.crail__item:focus-within .crail__tip,
.crail__item:first-child:hover .crail__tip,
.crail__item:first-child:focus-within .crail__tip,
.crail__item:last-child:hover .crail__tip,
.crail__item:last-child:focus-within .crail__tip {
  transform: translate(0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .crail__item:hover .crail__tip,
  .crail__item:focus-within .crail__tip { transform: none; }
}
/* The labelled variant has no tooltip to contain — it is a caption in flow. */
.crail--labelled .crail__tip { max-width: none; }

/* ==========================================================================
 *  REAL LISTINGS: RESULT CARDS AND THE GALLERY          2 August 2026
 *
 *  Two properties with real photographs now sit at the top of the search
 *  results, above the demonstration records. The card treatment is the same
 *  card; only the media well changes, because a card that shows a photograph
 *  and a card that shows a placeholder should still be the same object.
 * ========================================================================== */

.prop__shot {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface-limestone);
  border-radius: var(--radius-control);
  aspect-ratio: 3 / 2;
}
.prop__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms var(--ease-in-out);
}
/* The whole card is already a link through its title. The photograph lifts
   very slightly on hover so the card reads as one target, and nothing moves
   for a reader who has asked for less motion. */
@media (hover: hover) and (pointer: fine) {
  .prop:hover .prop__shot img { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .prop__shot img { transition: none; }
  .prop:hover .prop__shot img { transform: none; }
}

/* The photo count and the status stamp sit on the image, so both carry their
   own solid backing rather than relying on whatever the photograph happens to
   be behind them. */
.prop__count,
.prop__stamp {
  position: absolute;
  bottom: var(--s3);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--radius-control);
}
.prop__count {
  left: var(--s3);
  background: rgba(28, 33, 31, 0.82);
  color: var(--contact-ivory);
}
.prop__stamp {
  right: var(--s3);
  background: var(--contact-brass);
  color: var(--contact-charcoal);
}

.prop__status--open { color: var(--accent-brass-deep); font-weight: 700; }
.prop__status--closed { color: var(--text-secondary); font-weight: 700; }

/* The .listing__* detail rules were replaced by .plead__* on 8 August 2026. */

/* The listing gallery that lived here — a 17-thumbnail strip with its own
   nested scrollbar, an edge-fade mask and three separate overflow fixes — was
   replaced on 8 August 2026 by .pgal / .pgv: one main photograph, two crops and
   a native <dialog>. Its markup, its controller (public/assets/js/gallery.mjs)
   and these rules are all gone rather than left behind as dead weight. */

/* ==========================================================================
 *  DIRECT CONTACT                                          2 August 2026
 *
 *  The SocialTooltip interaction, adapted to the Dukes contact section rather
 *  than pasted into it. What survives from the reference: a colour surface
 *  rising from the bottom edge on hover and focus, the mark lifting slightly,
 *  and the content inverting over the fill. What changed:
 *
 *    * The fill covers the whole tile, not a 48px disc, because here the tile
 *      IS the control — the number is meant to be readable before anyone
 *      interacts, so the medallion is not doing the work on its own.
 *    * Channel colour is used at the depth this palette runs at. WhatsApp's
 *      own green and Instagram's own gradient at full saturation would put
 *      two internet-brand blocks in the middle of an ivory editorial page.
 *      Each fill is the channel's colour taken down to Dukes' register: every
 *      one of the four measures at least 6.8:1 against the ivory type that
 *      lands on it, which is what lets the text inversion be safe rather than
 *      hopeful.
 *    * No shadow, no scale, no bounce. 400ms on the reference's own easing.
 * ========================================================================== */

.dc { display: grid; gap: var(--s5); }

/* Editorial two-column: the statement on the left, the routes on the right.
   Single column until there is genuinely room for both. */
@media (min-width: 64em) {
  .dc {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: start;
  }
  .dc__intro { position: sticky; top: 6.5rem; }
  .dc__grid { margin: 0; }
  .contact__legal { grid-column: 1 / -1; }
}

.dc__intro { display: grid; gap: var(--s3); }
.dc__eyebrow {
  margin: 0;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-brass-deep);
}
.dc__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--contact-charcoal);
}
.dc__copy {
  margin: 0;
  color: var(--text-secondary);
  max-width: 34ch;
}

/* ---------------------------------- Grid ---------------------------------- */

.dc__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}
@media (min-width: 34em) {
  .dc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dc__cell { display: flex; }

/* ---------------------------------- Tile ---------------------------------- */

.dc__tile {
  --dc-fill: var(--contact-charcoal);
  --dc-on-fill: var(--contact-ivory);

  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  min-height: 108px;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: var(--contact-charcoal);
  background: var(--contact-ivory);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  transition: border-color 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The rising surface. Height rather than transform: the tile clips it, so it
   composites inside its own box, and scaleY would smear the gradient on the
   Instagram tile as it grew. */
.dc__fill {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 0;
  background: var(--dc-fill);
  transition: height 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dc__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5) var(--s4) var(--s4);
  min-height: 108px;
}

.dc__mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-brass);
  color: var(--contact-charcoal);
  transition:
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 400ms cubic-bezier(0.22, 1, 0.36, 1),
    color 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dc__icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dc__icon--brand { fill: currentColor; stroke: none; width: 18px; height: 18px; }

.dc__lines { display: grid; gap: 3px; min-width: 0; }
.dc__label {
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-secondary);
  transition: color 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dc__value {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.25;
  /* ask@dukesestate.com and @dukes_estate_agency are single unbreakable
     tokens; without this they push the arrow out of the tile. */
  overflow-wrap: anywhere;
  transition: color 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dc__arrow {
  align-self: center;
  color: var(--accent-brass-deep);
  transition:
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
    color 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------ Channel fills ----------------------------- *
   Measured against --contact-ivory (#f7f3ea), which is what lands on them:
     phone      #211f1a  14.9:1
     whatsapp   #075e54   6.9:1   (WhatsApp's dark teal, not its bright green)
     email      #43301c  11.3:1
     instagram  #5b2545 → #8c3a28, lightest point 6.9:1                       */
.dc__tile--phone { --dc-fill: #211f1a; }
.dc__tile--whatsapp { --dc-fill: #075e54; }
.dc__tile--email { --dc-fill: #43301c; }
.dc__tile--instagram { --dc-fill: linear-gradient(135deg, #5b2545 0%, #7a2f39 55%, #8c3a28 100%); }

/* --------------------------------- States --------------------------------- */

.dc__tile:hover,
.dc__tile:focus-visible { border-color: var(--contact-brass); }
.dc__tile:hover .dc__fill,
.dc__tile:focus-visible .dc__fill { height: 100%; }

.dc__tile:hover .dc__value,
.dc__tile:focus-visible .dc__value { color: var(--dc-on-fill); }
.dc__tile:hover .dc__label,
.dc__tile:focus-visible .dc__label { color: rgba(247, 243, 234, 0.82); }
.dc__tile:hover .dc__arrow,
.dc__tile:focus-visible .dc__arrow {
  color: var(--accent-champagne);
  transform: translateX(3px);
}
.dc__tile:hover .dc__mark,
.dc__tile:focus-visible .dc__mark {
  transform: translateY(-2px);
  border-color: var(--accent-champagne);
  color: var(--dc-on-fill);
}

.dc__tile:focus-visible {
  outline: 2px solid var(--accent-brass-deep);
  outline-offset: 3px;
}

/* Touch has no hover: the fill would either never run or stick after a tap.
   The tile is fully readable at rest, so nothing is lost by leaving it there. */
@media (hover: none) {
  .dc__tile:hover .dc__fill { height: 0; }
  .dc__tile:hover .dc__value,
  .dc__tile:hover .dc__label { color: inherit; }
  .dc__tile:hover .dc__mark { transform: none; color: var(--contact-charcoal); }
  .dc__tile:hover .dc__arrow { transform: none; color: var(--accent-brass-deep); }
  .dc__tile:hover .dc__label { color: var(--text-secondary); }
}

/* Reduced motion keeps the state change and drops the travel: the surface
   arrives rather than rises, and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .dc__tile,
  .dc__fill,
  .dc__mark,
  .dc__arrow,
  .dc__label,
  .dc__value { transition-duration: 1ms; }
  .dc__tile:hover .dc__mark,
  .dc__tile:focus-visible .dc__mark { transform: none; }
  .dc__tile:hover .dc__arrow,
  .dc__tile:focus-visible .dc__arrow { transform: none; }
}

/* ---------------------- Direct contact: correction pass -------------------- *
   Three things were wrong once this was on a real page at a real width.

   1. The value column measured 125px, so ask@dukesestate.com and
      @dukes_estate_agency each broke onto two lines mid-word and left the
      tiles at two different heights. The intro column was taking too much of
      the row and the medallion and gaps took most of what was left.
   2. Four bordered boxes sat on the ivory as four objects. Hairline rules
      between cells is the treatment the rest of this page already uses, and
      it lets the fill be the only thing that ever draws a shape.
   3. At 400ms in both directions, dragging the pointer across the grid left a
      visible colour bar trailing behind on every tile just left. The rise is
      the deliberate moment; the retreat should get out of the way.           */

@media (min-width: 64em) {
  /* Was 0.82fr / 1.18fr. The routes are the working part of this section. */
  .dc { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); }
}

/* Hairlines, not boxes. One rule between the columns and one between the
   rows, drawn on the grid rather than around each cell, so no cell carries a
   border the fill then has to sit inside. */
.dc__grid { gap: 0; border-top: 1px solid var(--border-subtle); }
.dc__cell { border-bottom: 1px solid var(--border-subtle); }
@media (min-width: 34em) {
  .dc__cell:nth-child(odd) { border-right: 1px solid var(--border-subtle); }
}

.dc__tile {
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 96px;
}
.dc__body {
  min-height: 96px;
  gap: var(--s3);
  padding: var(--s4);
}
.dc__mark { width: 40px; height: 40px; }
.dc__value {
  /* One line is the requirement; anywhere-breaking is the fallback of last
     resort, not the default. */
  font-size: clamp(0.9375rem, 0.88rem + 0.22vw, 1.0625rem);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.dc__label { font-size: 0.6875rem; letter-spacing: 0.14em; }

/* The tile draws no border, so hover marks itself with the fill and the mark
   alone. */
.dc__tile:hover,
.dc__tile:focus-visible { border-color: transparent; }

/* Rise deliberately, retreat quickly. */
.dc__fill { transition-duration: 420ms; }
.dc__tile:not(:hover):not(:focus-visible) .dc__fill { transition-duration: 130ms; }
@media (prefers-reduced-motion: reduce) {
  .dc__tile:not(:hover):not(:focus-visible) .dc__fill { transition-duration: 1ms; }
}

/* The rail is the version that appears on every page, and it was filling
   forest for all four routes while the contact page's tiles filled in each
   channel's own colour. Two treatments of one component reads as two
   components. Same four colours, same measured contrast against the ivory
   that lands on them. */
.crail__link--phone { --crail-fill: #211f1a; }
.crail__link--whatsapp { --crail-fill: #075e54; }
.crail__link--email { --crail-fill: #43301c; }
.crail__link--instagram { --crail-fill: linear-gradient(135deg, #5b2545 0%, #7a2f39 55%, #8c3a28 100%); }
.crail__fill { background: var(--crail-fill, var(--contact-forest)); }

/* DARK-TONE RAIL RECOLOURED — Aarav, 10 August 2026.
   The channel fills are measured against ivory and belong to the light
   surfaces. Carried onto the bottle-green reception band they collapse:
   the telephone's #211f1a is a black disc on dark green, and the hover
   glyph flip to charcoal (right for a champagne fill) left the icon
   invisible inside it — the defect Aarav screenshotted on /properties/.
   His direction: drop the colour washes here and use a restrained tonal
   surface lift instead, matching the rest of the palette. That is the
   same rgba-ivory lift the site's other dark surfaces already hover with
   (route dock, dark buttons), so the rail stops being the odd one out.
   The circle, the rising fill, the tips, the motion and every light-
   surface instance — including the protected contact-page tiles — are
   unchanged. */
.crail--dark .crail__link { --crail-fill: rgba(246, 244, 239, 0.14); }
.crail--dark .crail__fill { background: var(--crail-fill); }
/* The glyph never goes charcoal on the tonal lift: it brightens. */
@media (hover: hover) and (pointer: fine) {
  .crail--dark .crail__link:hover { color: var(--contact-ivory); }
}
.crail--dark .crail__link:focus-visible { color: var(--contact-ivory); }

/* ------------------- Direct contact: Safari overlap + email ---------------- */

/* The intro column was position:sticky inside the grid. In WebKit it escaped
   its grid area and rode down over the Registered Office panel, printing the
   heading straight through the address. Aarav caught it in Safari. Sticky was
   a nicety on one section; a heading overlapping an address is a defect, so
   the nicety loses. */
@media (min-width: 64em) {
  .dc__intro { position: static; top: auto; }
}

/* Email was bronze, which sat too close to the telephone tile's ink and read
   as the odd one of the four. A deep petrol blue is the professional register
   this palette can carry: 10.8:1 against the ivory type that lands on it, and
   deliberately NOT --brand-navy (#0b223b), which is the logo's protected
   signature and does not get spent on a UI surface. */
.dc__tile--email { --dc-fill: #1e3a47; }
.crail__link--email { --crail-fill: #1e3a47; }

/* The About contact section's written route: one restrained line under the
   four protected tiles. abt- scoped, so it renders on /about/ only. */
.abt-contact__written {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  max-width: 46rem;
}
.abt-contact__written-label { margin: 0; font-weight: 700; color: var(--ink); }
.abt-contact__written-copy { margin: var(--s1) 0 0; font-size: var(--t-small); color: var(--ink); }
.abt-contact__written-act { margin: var(--s4) 0 0; }
/* The page's next action, in the established Dukes button language: warm
   parchment surface, dark ink, bronze hairline, and the same centre-out rule
   the hero and the service cards use. Underline dropped — the rule is the
   affordance, and the surface already reads as a control. */
.abt-contact__written-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--s3) var(--s6);
  background: var(--bone-sunk);
  border: 1px solid rgba(111, 61, 27, 0.34);
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 1px rgba(111, 61, 27, 0.14);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.abt-contact__written-rule {
  position: absolute;
  left: var(--s5);
  right: var(--s5);
  bottom: 9px;
  height: 1px;
  background: var(--copper-deep);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .abt-contact__written-link:hover {
    background: #ecdfc9;
    border-color: var(--copper-deep);
    box-shadow: inset 0 0 0 1px rgba(111, 61, 27, 0.28);
  }
  .abt-contact__written-link:hover .abt-contact__written-rule { transform: scaleX(1); }
}
/* Pressed state outside the hover gate, so coarse pointers get real feedback. */
.abt-contact__written-link:active { background: #dfd0b6; border-color: var(--copper-deep); }
/* Focus is immediate and stronger than hover. */
.abt-contact__written-link:focus-visible {
  transition: none;
  background: #ecdfc9;
  border-color: var(--copper-deep);
  outline: 3px solid var(--copper-deep);
  outline-offset: 3px;
}
.abt-contact__written-link:focus-visible .abt-contact__written-rule { transition: none; transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .abt-contact__written-link,
  .abt-contact__written-rule { transition: none; }
}

/* ============================ Written enquiry ============================= *
 * /contact/enquiry/, 8 August 2026. Page-scoped wq__ classes; the form and
 * the review panel are two stages of one composed workspace. Established
 * tokens only; the review panel's appearance is a restrained opacity step.  */
.wq-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.75rem, 3vw, 2.75rem) var(--inset) clamp(1.25rem, 2.5vw, 2rem);
}
.wq-hero__copy { min-width: 0; max-width: 46rem; }
.wq-hero__privacy {
  margin: var(--s5) 0 0;
  padding: var(--s3) var(--s4);
  border-left: 2px solid var(--accent-champagne, #c5a66a);
  background: var(--bone-raised);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink);
  max-width: 58ch;
}
.wq-link { color: var(--copper-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.wq { max-width: 56rem; }
.wq__fallback-title { margin: 0; font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
.wq__fallback-copy { margin: var(--s3) 0 0; line-height: 1.65; color: var(--ink); max-width: 62ch; }
.wq__routes { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); }
.wq__route {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--copper-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wq__summary-errors {
  padding: var(--s4);
  background: var(--bone-raised);
  border-left: 3px solid #8c2f24;
  outline: none;
}
.wq__errors-title { margin: 0; font-family: var(--font-display); font-size: 1.125rem; color: var(--ink); }
.wq__errors-list { margin: var(--s3) 0 0; padding: 0 0 0 1.1rem; display: grid; gap: var(--s1); }
.wq__errors-list a { color: #8c2f24; font-weight: 700; }

.wq__grid { display: grid; gap: var(--s5); margin-top: var(--s5); }
@media (min-width: 48em) {
  .wq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wq__field--wide { grid-column: 1 / -1; }
}
.wq__field { min-width: 0; }
.wq__error { margin: var(--s2) 0 0; font-size: var(--t-small); font-weight: 700; color: #8c2f24; }
/* Genuinely absent for people: no space, no focus stop, no announcement. */
.wq__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wq__status {
  margin: var(--s5) 0 0;
  padding: var(--s3) var(--s4);
  background: var(--bone-raised);
  border-left: 3px solid var(--copper);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink);
  max-width: 62ch;
}
.wq__status--strong { font-weight: 700; }
.wq__form-actions { margin: var(--s5) 0 0; }

.wq__review { margin-top: var(--s5); }
.wq__review[hidden] { display: none; }
.wq__review-head { display: flex; align-items: center; gap: var(--s4); }
.wq__review-mark { width: 72px; height: auto; flex: none; }
.wq__review-title { margin: 0; font-family: var(--font-display); font-size: var(--t-section); color: var(--ink); outline: none; }
.wq__review-list { margin: var(--s5) 0 0; border-top: 1px solid var(--rule-strong); }
.wq__review-row { display: grid; gap: var(--s1) var(--s5); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 40em) {
  .wq__review-row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
}
.wq__review-row dt { font-size: var(--t-small); font-weight: 700; color: var(--copper-deep); }
.wq__review-row dd { margin: 0; color: var(--ink); line-height: 1.6; overflow-wrap: break-word; white-space: pre-wrap; }
.wq__send { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0 0; }
.wq__copied { margin: var(--s3) 0 0; font-size: var(--t-small); font-weight: 700; color: var(--bottle); }
.wq__back { margin: var(--s4) 0 0; }
.wq__edit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--copper-deep);
  font: inherit;
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.wq__edit:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 2px; }
/* The one state-change motion: the review panel steps in with a restrained
   fade. Reduced motion shows it immediately. */
@media (prefers-reduced-motion: no-preference) {
  [data-enhanced] .wq__review:not([hidden]) { animation: wq-appear 160ms cubic-bezier(0.22, 1, 0.36, 1); }
}
@keyframes wq-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================ Sales Valuation ============================= *
 * The seller journey's request page, rebuilt 12 August 2026 as an
 * address-first progressive assessment. Page-scoped: every selector is
 * svq-/svb- prefixed, a compound of one, or a descendant of one; nothing here
 * reaches another route.
 *
 * The scene order carries the redesign's whole argument. The opening viewport
 * belongs to the seller's question and the one field that answers it; the
 * sequence, the staged assessment and the human-review scene follow; the seven
 * canonical statements sit below the work rather than in front of it. Surfaces
 * alternate bone (hero) → bone-raised sequence → bone (assessment) → bone
 * (human review) → dark band (terms) → bone-sunk (next steps).
 *
 * Motion policy: one-time entrances and stage changes only, transform/opacity,
 * named properties, all gated behind [data-enhanced][data-motion="full"] so
 * the no-JavaScript, static and reduced-motion paths render the finished page
 * immediately. Interaction feedback is colour/border at explicit durations,
 * and focus is never animated. */

/* ------------------------ Scene 1: the opening ---------------------------- */
/* A composed 55/45 split: the decision and the first control on the left, the
   exterior assessment photograph on the right. One bordered layer, so the two
   halves read as a single object rather than a card floating on cream. There
   is no logo panel — the global header already establishes authorship. */
.svq-open {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.25rem, 2vw, 2rem) var(--inset) clamp(1.5rem, 3vw, 2.5rem);
}
.svq-open__frame {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--copper);
  background: var(--bone-raised);
  display: grid;
  align-items: stretch;
}
@media (min-width: 62em) {
  .svq-open__frame { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
}
.svq-open__copy {
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 2.75vw, 2.75rem);
  align-self: center;
}
.svq-open__copy .h-display { margin-bottom: var(--s4); }
.svq-open__standfirst { margin: 0 0 var(--s5); max-width: 48ch; }
.svq-open__static { margin: 0; }

/* The reassurance strip: three verified facts on one ruled line. Metadata,
   not three floating cards — it scans as one row where the column allows it
   and stacks with its rules where it does not. */
.svq-reassure {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.svq-reassure__item {
  position: relative;
  min-width: 0;
  padding: var(--s3) var(--s4) var(--s3) 0;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.svq-reassure__item + .svq-reassure__item { padding-left: var(--s4); border-left: 1px solid var(--rule); }
@media (max-width: 47.99em) {
  .svq-reassure { display: grid; }
  .svq-reassure__item { padding-inline: 0; }
  .svq-reassure__item + .svq-reassure__item { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
}

/* ------------------------- The decision ledger ---------------------------- */
/* The owner-priority question as a Dukes decision ledger: square ruled rows,
   native radios, one crossfading selection field per row. Never a pill. */
.svq-ledger {
  margin: var(--s6) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.svq-ledger__legend { margin: 0 0 var(--s3); padding: 0; }
.svq-ledger__q {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-group);
  line-height: 1.25;
  color: var(--ink);
}
.svq-ledger__hint {
  display: block;
  margin-top: var(--s1);
  font-size: var(--t-small);
  color: var(--fg-soft);
  line-height: 1.55;
}
.svq-ledger__rows {
  display: grid;
  border: 1px solid var(--rule-strong);
  background: var(--bone-raised);
}
.svq-ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: var(--s3) var(--s4);
  cursor: pointer;
  isolation: isolate;
}
.svq-ledger__row + .svq-ledger__row { border-top: 1px solid var(--rule); }
/* The whole row is the control: the input covers it invisibly, so the touch
   target is the full rule-to-rule width and focus behaves like the row's. */
.svq-ledger__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.svq-ledger__row:focus-within { outline: 2px solid var(--copper-deep); outline-offset: 2px; z-index: 1; }
/* The selection field. One bottle plate per row that crossfades and settles
   in from the ledger's spine — transform/opacity only, decisive ease-out. */
.svq-ledger__fill {
  position: absolute;
  inset: 0;
  background: var(--bottle);
  opacity: 0;
  transform: scaleX(0.985);
  transform-origin: left center;
  pointer-events: none;
  z-index: -1;
}
[data-enhanced][data-motion="full"] .svq-ledger__fill {
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.svq-ledger__input:checked ~ .svq-ledger__fill { opacity: 1; transform: scaleX(1); }
.svq-ledger__n {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--copper-deep);
}
.svq-ledger__label {
  min-width: 0;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}
.svq-ledger__state {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid var(--rule-strong);
  color: transparent;
}
.svq-ledger__tick { width: 0.75rem; height: 0.75rem; }
.svq-ledger__input:checked ~ .svq-ledger__n { color: var(--sand); }
.svq-ledger__input:checked ~ .svq-ledger__label { color: var(--on-deep); }
.svq-ledger__input:checked ~ .svq-ledger__state {
  border-color: var(--sand);
  color: var(--sand);
}
@media (hover: hover) {
  .svq-ledger__row:hover .svq-ledger__label { color: var(--copper-deep); }
  .svq-ledger__row:hover .svq-ledger__input:checked ~ .svq-ledger__label { color: var(--on-deep); }
}
/* The direct-investor limitation is revealed beside the choice by CSS alone,
   so it works identically with scripting off. In a browser without :has()
   the same statement remains one disclosure away in the full terms. */
.svq-ledger__note { display: none; }
.svq-ledger:has(.svq-ledger__input[value="Explore a direct investor introduction"]:checked) .svq-ledger__note {
  display: block;
}
.svq-ledger__error { margin-top: var(--s3); }

/* The single hero control. The field and its action share a baseline on wide
   screens and stack on narrow ones; the button never shrinks below the 44px
   target and never moves on hover or press. */
.svq-start__row { display: grid; gap: var(--s4); align-items: end; }
@media (min-width: 34em) {
  .svq-start__row { grid-template-columns: minmax(0, 1fr) auto; }
}
.svq-start__field { min-width: 0; margin: 0; }
/* The Clear control sits inside the field's own box. The input reserves room
   for it so a long address never runs underneath the button. */
.svq-start__control { position: relative; min-width: 0; }
.svq-start__input { padding-right: 2.75rem; }
.svq-start__clear {
  position: absolute;
  top: 50%;
  right: 0.375rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fg-soft);
  cursor: pointer;
  transition: color 170ms var(--ease-in-out), background-color 170ms var(--ease-in-out);
}
.svq-start__clear:hover { color: var(--ink); background: rgba(17, 26, 22, 0.06); }
.svq-start__clear:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 1px; }
.svq-start__clear-mark { position: relative; width: 0.75rem; height: 0.75rem; }
.svq-start__clear-mark::before,
.svq-start__clear-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
}
.svq-start__clear-mark::before { transform: translateY(-50%) rotate(45deg); }
.svq-start__clear-mark::after { transform: translateY(-50%) rotate(-45deg); }
.svq-start__go { min-height: 48px; white-space: nowrap; }

/* The address and its action read as one consultation control on layouts that
   can hold them side by side. The label remains outside the joined edge, the
   native input remains native, and the focus treatment belongs to the field
   rather than painting a ring around the label as well. */
.svq-start__control:focus-within {
  outline: 2px solid var(--copper-deep);
  outline-offset: 2px;
}
@media (min-width: 34em) {
  .svq-start__row { gap: 0; }
  .svq-start__input { border-color: var(--rule-strong); }
  .svq-start__go { margin-left: -1px; }
}
@media (max-width: 33.99em) {
  .svq-start__go { width: 100%; justify-content: center; }
}
/* The right-hand scene: the photograph establishes place and the dossier
   plate demonstrates the service. Overlap is used only where there is room
   for it to stay clear; below the split the two stack with a modest mount. */
.svq-open__scene { position: relative; min-width: 0; display: grid; }
.svq-open__media { margin: 0; min-width: 0; position: relative; }
.svq-open__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(13rem, 26vw, 20rem);
  object-fit: cover;
  object-position: 50% 48%;
}
.svq-open__mount { min-width: 0; }
@media (min-width: 62em) {
  .svq-open__scene { align-items: stretch; }
  .svq-open__media { height: 100%; }
  .svq-open__mount {
    position: absolute;
    left: clamp(-3rem, -2.5vw, -1.5rem);
    bottom: clamp(1.25rem, 2.5vw, 2.25rem);
    width: min(21.5rem, 82%);
  }
}
@media (max-width: 61.99em) {
  .svq-open__mount {
    margin: calc(-1 * clamp(2.5rem, 8vw, 4rem)) var(--s5) var(--s5);
  }
}

/* ------------------------ The property dossier ---------------------------- */
/* Paper and ink: a square plate with a bottle header, ruled chapters and
   truthful status words. No valuation, no percentage, no score. */
.svq-dossier {
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--copper);
  background: var(--bone-raised);
  min-width: 0;
}
.svq-dossier__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--bottle);
}
.svq-dossier__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-group);
  color: var(--on-deep);
}
.svq-dossier__status {
  margin: 0;
  font-size: var(--t-label);
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sand);
}
.svq-dossier__address {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule);
}
.svq-dossier__address-label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.svq-dossier__address-value {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--ink);
  line-height: 1.4;
  overflow-wrap: break-word;
}
.svq-dossier__address-value.is-empty { color: var(--fg-soft); }
.svq-dossier__chapters { list-style: none; margin: 0; padding: 0; }
.svq-dossier__chapter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) var(--s4);
}
.svq-dossier__chapter + .svq-dossier__chapter { border-top: 1px solid var(--rule); }
.svq-dossier__n {
  grid-row: 1 / 3;
  align-self: start;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--copper-deep);
}
.svq-dossier__chapter-name {
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink);
}
.svq-dossier__state {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg-soft);
}
.svq-dossier__chapter.is-started .svq-dossier__state { color: var(--copper-deep); }
.svq-dossier__chapter.is-complete .svq-dossier__state { color: var(--bottle); }
/* The ruled segments: one small square per question in the chapter, filled
   as answers arrive. A truthful tally of what has been supplied — never a
   percentage and never a score. */
.svq-dossier__segments {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: var(--s1);
}
.svq-dossier__segments i {
  width: 9px;
  height: 9px;
  border: 1px solid var(--rule-strong);
  background: transparent;
}
[data-enhanced][data-motion="full"] .svq-dossier__segments i {
  transition: background-color 220ms var(--ease-arrive), border-color 220ms var(--ease-arrive);
}
.svq-dossier__segments i.is-on { background: var(--bottle); border-color: var(--bottle); }
.svq-dossier__facts { margin: 0; padding: var(--s2) var(--s4) var(--s3); border-top: 1px solid var(--rule); }
.svq-dossier__facts div {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--s3);
  padding: 2px 0;
}
.svq-dossier__facts dt {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.025em;
  color: var(--copper-deep);
}
.svq-dossier__facts dd {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink);
  overflow-wrap: break-word;
}
.svq-dossier__seal {
  position: relative;
  margin: 0;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--rule);
  font-size: var(--t-label);
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.svq-dossier__seal::after {
  content: "";
  position: absolute;
  left: var(--s4);
  right: var(--s4);
  bottom: calc(var(--s3) - 4px);
  height: 1px;
  background: var(--copper);
  transform-origin: left center;
}
/* The one completion moment: the seal's rule draws once when the brief is
   prepared for review. It marks readiness, never delivery — the status line
   above it still says Not sent. */
[data-enhanced][data-motion="full"] .svq-dossier.is-sealed .svq-dossier__seal::after {
  animation: svq-seal 360ms var(--ease-arrive) backwards;
}
@keyframes svq-seal {
  from { transform: scaleX(0); }
}
.svq-dossier__note {
  margin: 0;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--rule);
  background: var(--bone);
  font-size: var(--t-label);
  color: var(--fg-soft);
  line-height: 1.5;
}

/* --------------------- Scene 2: what happens next ------------------------- */
/* A genuine three-step sequence on one ruled band: horizontal on wide screens,
   a plain vertical list everywhere narrower. Never three image cards, and
   never three cramped tablet columns. */
.svq-flow {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--inset) clamp(1.75rem, 3.5vw, 3rem);
}
.svq-flow__title {
  margin: 0 0 var(--s5);
  font-family: var(--font-display);
  font-size: var(--t-group);
  font-weight: 400;
  color: var(--ink);
}
.svq-flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s5);
  border-top: 1px solid var(--rule);
}
@media (min-width: 62em) {
  .svq-flow__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .svq-flow__step { padding-inline: clamp(1.25rem, 2.5vw, 2rem); border-left: 1px solid var(--rule); }
  .svq-flow__step:first-child { padding-left: 0; border-left: 0; }
  .svq-flow__step:last-child { padding-right: 0; }
}
.svq-flow__step { min-width: 0; padding-top: var(--s5); }
.svq-flow__n {
  display: block;
  margin-bottom: var(--s2);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--copper-deep);
}
.svq-flow__step-title {
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-size: var(--t-group);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
}
.svq-flow__copy { margin: 0; font-size: var(--t-small); line-height: 1.65; color: var(--fg-soft); max-width: 40ch; }

/* ------------------- Scene 6: the qualification chapter ------------------- */
/* Rides the shared .band--dark surface; everything inside is page-scoped.
   Three statements stay on the page and the remaining four sit in a native
   disclosure — the same seven sentences, never a shorter set. */
.svq-qual { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.svq-qual__inner { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); align-items: start; }
@media (min-width: 62em) {
  .svq-qual__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 5.5rem); }
}
.svq-qual__head { min-width: 0; }
.svq-qual__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-section);
  line-height: 1.15;
  color: var(--on-deep);
  max-width: 18ch;
}
.svq-qual__intro { margin: var(--s4) 0 0; color: var(--on-deep-soft); max-width: 40ch; line-height: 1.6; }
/* The seven statements sit on one mounted document plate — a static legal
   text layer with dash markers, deliberately unlike any link row or tile. */
.svb__terms {
  min-width: 0;
  border: 1px solid var(--rule-on-deep);
  background: rgba(246, 244, 239, 0.06);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem);
}
.svb__terms-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.svb__term {
  position: relative;
  padding-left: var(--s6);
  line-height: 1.65;
  color: var(--on-deep);
  max-width: 62ch;
}
.svb__term::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 14px;
  height: 1px;
  background: var(--sand);
}

/* The native disclosure. No JavaScript owns it: the state mark is drawn from
   the element's own [open] state, so it is complete with scripting off and
   keyboard-operable by default. */
.svq-disclose { margin-top: var(--s5); border-top: 1px solid var(--rule-on-deep); }
.svq-disclose__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 48px;
  padding: var(--s3) 0;
  color: var(--on-deep);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  list-style: none;
  transition: color 170ms var(--ease-in-out);
}
.svq-disclose__summary::-webkit-details-marker { display: none; }
.svq-disclose__summary:hover { color: var(--sand); }
.svq-disclose__summary:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
/* A plus that becomes a minus: two rules, one of which is removed when open.
   Colour and shape both carry the state, never colour alone. */
.svq-disclose__mark {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.svq-disclose__mark::before,
.svq-disclose__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--sand);
  transform: translateY(-50%);
}
.svq-disclose__mark::after { transform: translateY(-50%) rotate(90deg); }
.svq-disclose[open] .svq-disclose__mark::after { display: none; }
.svq-disclose__list { margin-top: var(--s4); padding-bottom: var(--s3); }

/* ----------------------- Scene 3: the Assessment Studio ------------------- */
/* A wider working measure than the reading pages: the form is the page's
   main event, and at wide widths it shares the canvas with the docked
   dossier. Natural page scrolling only — no nested scroll panel. */
.svq-main { max-width: 80rem; padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(3rem, 5.5vw, 5rem); }
.svq-studio { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 68.75em) {
  /* The side column exists only while the dossier is actually docked there:
     before the visitor starts, the form keeps the whole working measure and
     no dead column is reserved. */
  .svq-studio:has(.svq-dock:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); }
}
/* The dock. In-flow collapsible summary below the split; a sticky column
   beside the form above it. The dossier itself is the same element the hero
   mounted — moved, never duplicated. */
.svq-dock { min-width: 0; }
.svq-dock__fold { border: 0; }
.svq-dock__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 48px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule-strong);
  background: var(--bone-raised);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color 170ms var(--ease-in-out), border-color 170ms var(--ease-in-out);
}
.svq-dock__summary::-webkit-details-marker { display: none; }
.svq-dock__summary:hover { color: var(--copper-deep); }
.svq-dock__summary:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 2px; }
.svq-dock__mark::before,
.svq-dock__mark::after { background: var(--copper-deep); }
.svq-dock__fold[open] .svq-dock__summary { border-bottom: 0; }
.svq-dock__fold[open] .svq-dock__mark::after { display: none; }
@media (min-width: 68.75em) {
  .svq-dock { position: sticky; top: calc(var(--head-h) + 1.25rem); }
  /* Above the split the fold is not a fold: the script holds it open and the
     summary control retires, so the dossier reads as a docked panel. */
  .svq-dock__summary { display: none; }
}
[data-enhanced][data-motion="full"] .svq-dock .svq-dossier {
  animation: svq-arrive 320ms var(--ease-arrive) backwards;
}

/* The priority echo inside stage 3: one state, shown where the seller is
   working, changed only through the single ledger above. */
.svq-echo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--copper);
  background: var(--bone);
}
.svq-echo__label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.svq-echo__value { font-size: var(--t-small); color: var(--ink); }
.svq-echo__value.is-empty { color: var(--fg-soft); font-weight: 400; }
.svq-echo__change {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  color: var(--copper-deep);
  font: inherit;
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 170ms var(--ease-in-out);
}
.svq-echo__change:hover,
.svq-echo__change:active { color: var(--copper); }
.svq-echo__change:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 2px; }

.svq-brief-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.svb__title { margin: 0; font-family: var(--font-display); font-size: var(--t-section); color: var(--ink); }
.svb__intro { margin: var(--s3) 0 0; color: var(--ink); line-height: 1.65; max-width: 62ch; }

/* ------------------ Scene 4: the deliverable made tangible ---------------- *
 * One ruled panel, not three cards — the audit's objection to the Redfin and
 * Opendoor references was exactly that shape. Sits on the same bone-raised
 * surface as the form it introduces, so it reads as part of the assessment
 * rather than a fourth, separate scene. */
.svq-clarify {
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--copper);
}
.svq-clarify__title {
  margin: 0 0 var(--s4);
  font-family: var(--font-display);
  font-size: var(--t-group);
  font-weight: 400;
  color: var(--ink);
}
.svq-clarify__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
}
/* Three narrow columns at 768 is exactly the cramped shape the dossier's
   audit warned against, so the panel stays a readable single column through
   tablet and only spreads out once there is genuine width for it. */
@media (min-width: 62em) {
  .svq-clarify__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 1.75rem); }
}
.svq-clarify__item {
  position: relative;
  padding-left: var(--s6);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}
.svq-clarify__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 14px;
  height: 1px;
  background: var(--copper);
}

/* Base (no-JavaScript) state: the same three chapters as the form. */
.svb__fallback { margin-top: var(--s5); }
.svb__fallback-copy { margin: 0; color: var(--ink); font-weight: 500; max-width: 62ch; }
/* Four chapters now, so tablet gets a balanced 2×2 rather than four columns
   too narrow to read. Four across only where each one keeps a real measure. */
.svq-fallback-groups { display: grid; gap: var(--s5); margin-top: var(--s5); }
@media (min-width: 48em) {
  .svq-fallback-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
}
@media (min-width: 75em) {
  .svq-fallback-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
}
.svq-fallback-group {
  min-width: 0;
  border: 1px solid var(--rule);
  background: var(--bone-raised);
}
.svq-fallback-group__title {
  margin: 0;
  padding: var(--s3) var(--s5);
  background: var(--bottle);
  color: var(--on-deep);
  font-family: var(--font-display);
  font-size: var(--t-group);
  font-weight: 400;
}
.svb__checklist {
  margin: 0;
  padding: var(--s4) var(--s5) var(--s5) calc(var(--s5) + 1.1rem);
  font-size: var(--t-small);
  line-height: 1.9;
  color: var(--ink);
}
.svb__routes { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s2); }
.svb__route {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--copper-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 170ms var(--ease-in-out);
}
.svb__route:hover,
.svb__route:active { color: var(--copper); }
/* JavaScript confirmed: the checklist path is replaced by the builder. */
[data-enhanced] .svb__fallback[hidden] { display: none; }

/* One stage at a time. The stage is a bordered plate whose legend is a solid
   bottle header strip above a light working body; the legend floats
   full-width so the strip bleeds to the plate's edges. */
.svb__form { margin-top: var(--s5); }

/* The progress header. On wide screens the four stage names are legible, so
   they are shown; below that they would be four cramped fragments, so the
   count, the current stage name and the bar carry the state instead. */
.svq-progress { margin-bottom: var(--s5); }
.svq-progress__count {
  margin: 0 0 var(--s3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.svq-progress__stage { color: var(--ink); }
.svq-progress__stages { display: none; }
@media (min-width: 56em) {
  .svq-progress__count { display: none; }
  .svq-progress__stages {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s4);
    list-style: none;
    margin: 0 0 var(--s4);
    padding: 0;
  }
}
.svq-progress__stage-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding-top: var(--s3);
  border-top: 2px solid var(--rule);
  color: var(--fg-soft);
  font-size: var(--t-small);
  transition: color 170ms var(--ease-in-out), border-color 170ms var(--ease-in-out);
}
.svq-progress__stage-head { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.svq-progress__stage-item.is-done { border-top-color: var(--bottle); color: var(--ink); }
.svq-progress__stage-item.is-current {
  border-top-color: var(--copper);
  color: var(--ink);
  font-weight: 700;
}

/* The state marker. Completed shows a tick, everything else shows the stage
   number, so completed and upcoming are told apart by shape as well as by
   colour — the rail was previously distinguishing them by colour alone. */
.svq-progress__stage-mark {
  position: relative;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
  font-size: var(--t-label);
  font-weight: 700;
  color: var(--fg-soft);
  transition: border-color 170ms var(--ease-in-out), background-color 170ms var(--ease-in-out),
    color 170ms var(--ease-in-out);
}
.svq-progress__tick { width: 0.75rem; height: 0.75rem; display: none; }
.svq-progress__stage-item.is-current .svq-progress__stage-mark {
  border-color: var(--copper);
  background: var(--copper-deep);
  color: var(--on-deep);
}
.svq-progress__stage-item.is-done .svq-progress__stage-mark {
  border-color: var(--bottle);
  background: var(--bottle);
  color: var(--on-deep);
}
.svq-progress__stage-item.is-done .svq-progress__stage-n { display: none; }
.svq-progress__stage-item.is-done .svq-progress__tick { display: block; }
.svq-progress__stage-name { min-width: 0; }
/* The stage's own one-line description, the "title & description" stepper
   pattern. It is indented to the title's text edge, never under the marker. */
.svq-progress__stage-summary {
  display: block;
  padding-left: calc(1.25rem + var(--s2));
  font-size: var(--t-label);
  font-weight: 400;
  line-height: 1.45;
  color: var(--fg-soft);
}
.svq-progress__bar { height: 3px; background: var(--rule); overflow: hidden; }
.svq-progress__fill {
  display: block;
  height: 100%;
  width: var(--svq-progress, 25%);
  background: var(--copper);
  transition: width 260ms var(--ease-arrive);
}

/* The stage plate. One bordered object holds the visible stage and the
   footer that acts on it, so the seller reads a single working document
   rather than a fieldset with two loose paragraphs floating beneath it. */
.svq-stack {
  border: 1px solid var(--rule);
  background: var(--bone-raised);
  min-width: 0;
}
.svq-step {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.svq-step__legend {
  float: left;
  width: 100%;
  margin: 0;
  padding: var(--s4) clamp(1.25rem, 2.5vw, 2rem);
  background: var(--bottle);
  color: var(--on-deep);
  font-family: var(--font-display);
  font-size: var(--t-group);
  line-height: 1.25;
}
.svq-step__legend:focus-visible { outline: 2px solid var(--sand); outline-offset: -4px; }
.svq-step__legend-index {
  display: block;
  margin-bottom: var(--s1);
  font-family: var(--font-text);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
}
.svq-step__legend-name { display: block; }
/* align-items: start is load-bearing. Without it a cell whose neighbour has
   grown — the goal select, once its qualification note appears — stretches its
   own control to match, and a plain select silently becomes a 90px box. */
.svq-step__grid {
  clear: both;
  display: grid;
  align-items: start;
  gap: var(--s5);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 48em) {
  /* Balanced pairs, never a twelve-column puzzle. Only the address line and
     the free-text notes claim the full measure. */
  .svq-step__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svq-step__grid .svq-span-full { grid-column: 1 / -1; }
}
.svb__field { min-width: 0; }
.svq-field__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.svq-notes { min-height: 8rem; }
.svb__error { margin: 0; font-size: var(--t-small); font-weight: 700; color: #8c2f24; }

/* The direct-route qualification note. It belongs to its own field so the
   trade-off is read beside the choice that triggers it. */
.svq-qualify {
  margin: var(--s3) 0 0;
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--copper);
  background: rgba(143, 80, 36, 0.07);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink);
}

/* The stage footer. It belongs to the plate, separated by a rule rather than
   by empty ground, so the actions read as this document's actions. */
.svq-stage-foot {
  border-top: 1px solid var(--rule);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 2rem);
}

/* Stage navigation. The reassurance sits with the actions rather than above
   them: it is a caption on the buttons, not a separate announcement. */
.svq-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}
/* Stated through .svq-nav so it beats .svb__status, which is defined later in
   this block and carries the callout rule this caption must not wear: the
   footer already separates it, and a second accent bar would make a quiet
   caption read as a warning. */
.svq-nav .svq-nav__note {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  max-width: 40ch;
  color: var(--fg-soft);
}
.svq-nav__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.svq-nav .btn { min-height: 48px; }
@media (max-width: 33.99em) {
  /* On a phone the actions lead and the caption follows, so the primary
     action is never pushed below a paragraph the seller has already read. */
  .svq-nav { flex-direction: column-reverse; align-items: stretch; }
  .svq-nav__actions .btn { flex: 1 1 auto; justify-content: center; }
  .svq-nav__note { max-width: none; }
}

/* Launcher clearance is handled by the shared component's own opt-in hook,
   `[data-launcher-clear]`, carried on this page's field grid and its three
   action rows — see the markup in build/pages/sellers.mjs. The assistant
   stows itself over those regions rather than the page reserving a dead
   channel that would squeeze a 320px button to a third of its width. Nothing
   here moves, resizes or restyles the assistant. */

/* One concise validation status for the current stage. It sits at the head of
   the footer, above the actions it is talking about. The tinted field is what
   separates it from the plate now that it lives inside the plate. */
.svq-form__alert {
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  border-left: 3px solid #8c2f24;
  background: rgba(140, 47, 36, 0.08);
  font-size: var(--t-small);
  font-weight: 700;
  color: #8c2f24;
  max-width: 62ch;
}

.svb__status {
  margin: var(--s5) 0 0;
  padding: var(--s3) var(--s4);
  background: var(--bone-raised);
  border-left: 3px solid var(--copper);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink);
  max-width: 62ch;
}
.svb__actions { margin: var(--s5) 0 0; }

/* ----------------------- Scene 3b: the review scene ----------------------- */
/* The same layered anatomy as the fieldsets — bottle header strip, light
   body — so the review reads as the dossier's closing chapter. */
.svb__summary {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--rule);
  background: var(--bone-raised);
  padding: 0;
}
/* The heading and the "nothing has been sent yet" line share one strip, so
   the reassurance is read at the same moment as the heading rather than
   discovered further down the panel. */
.svb__summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s5);
  padding: var(--s4) clamp(1.25rem, 2.5vw, 2rem);
  background: var(--bottle);
}
.svb__summary-title {
  margin: 0;
  color: var(--on-deep);
  font-family: var(--font-display);
  font-size: var(--t-group);
  outline: none;
}
.svb__summary-title:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
.svb__summary-note {
  margin: 0;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--sand);
}
/* Shown only when the visitor asked to be telephoned: this page cannot book a
   call, and must not imply that it can. */
.svq-send-note {
  margin: var(--s5) 0 0;
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--copper);
  background: rgba(143, 80, 36, 0.07);
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--ink);
  max-width: 62ch;
}
.svb__summary-body { padding: clamp(1.25rem, 2.5vw, 2rem); }
.svb__summary-list { margin: 0; border-top: 0; }
.svb__summary-row {
  display: grid;
  gap: var(--s1) var(--s5);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 40em) {
  .svb__summary-row { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
}
.svb__summary-row dt {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.025em;
  color: var(--copper-deep);
}
.svb__summary-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--ink);
  line-height: 1.5;
  overflow-wrap: break-word;
}
.svb__send { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0 0; }
.svb__copied { margin: var(--s3) 0 0; font-size: var(--t-small); font-weight: 700; color: var(--bottle); }
.svb__back { margin: var(--s4) 0 0; }
.svb__edit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--copper-deep);
  font: inherit;
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 170ms var(--ease-in-out);
}
.svb__edit:hover,
.svb__edit:active { color: var(--copper); }
.svb__edit:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 2px; }

/* ------------------ Scene 4: why a person reads the brief ----------------- */
/* An editorial split, image left. The photograph is a content image: honest
   crop, no wash, no zoom, no parallax. */
.svq-human {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) var(--inset) clamp(1.5rem, 3vw, 2.5rem);
}
.svq-human__frame { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 62em) {
  /* The copy's own measure is ~60ch. Giving its column more than that left a
     dead gutter at the right edge and made the scene read as unbalanced, so
     the photograph takes the surplus instead. */
  .svq-human__frame { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 5vw, 4rem); }
}
.svq-human__media { margin: 0; min-width: 0; border: 1px solid var(--rule); }
.svq-human__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 45%;
}
.svq-human__copy { min-width: 0; }
.svq-human__title {
  margin: 0 0 var(--s4);
  font-family: var(--font-display);
  font-size: var(--t-section);
  line-height: 1.15;
  color: var(--ink);
  max-width: 20ch;
}
.svq-human__body { margin: 0; line-height: 1.7; color: var(--ink); max-width: 60ch; }
@media (min-width: 62em) {
  /* With the lens ledger under the copy the photograph can sit alongside the
     whole reading column rather than floating beside one paragraph. */
  .svq-human__frame { align-items: start; }
  .svq-human__media { position: sticky; top: calc(var(--head-h) + 1.25rem); }
}

/* The eight lenses: a ruled ledger of native exclusive disclosures. The open
   lens carries a copper measurement rule from its title down its
   explanation, so the active lens and its evidence read as one object. */
.svq-lens { margin-top: var(--s6); border-top: 1px solid var(--rule-strong); }
.svq-lens__kicker {
  margin: 0;
  padding: var(--s3) 0 var(--s2);
  font-size: var(--t-label);
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.svq-lens__item { border-top: 1px solid var(--rule); }
.svq-lens__summary {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: var(--s3) 0;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  transition: color 170ms var(--ease-in-out);
}
.svq-lens__summary::-webkit-details-marker { display: none; }
.svq-lens__summary:hover { color: var(--copper-deep); }
.svq-lens__summary:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 2px; }
.svq-lens__n { font-family: var(--font-display); font-size: 1.0625rem; color: var(--copper-deep); }
.svq-lens__name { min-width: 0; font-size: var(--t-small); font-weight: 700; }
.svq-lens__mark { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.svq-lens__mark::before,
.svq-lens__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--copper-deep);
  transform: translateY(-50%);
}
.svq-lens__mark::after { transform: translateY(-50%) rotate(90deg); }
.svq-lens__item[open] .svq-lens__mark::after { display: none; }
/* The measurement rule: the open lens's copy hangs from a copper spine that
   starts at the title's index column. */
.svq-lens__copy {
  margin: 0 0 var(--s4);
  padding: var(--s2) 0 var(--s2) calc(var(--s5) + 2px);
  border-left: 2px solid var(--copper);
  margin-left: 6px;
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--ink-soft, var(--fg-soft));
  max-width: 56ch;
}
.svq-lens__item[open] .svq-lens__summary { color: var(--copper-deep); }
[data-enhanced][data-motion="full"] .svq-lens__item[open] .svq-lens__copy {
  animation: svq-arrive 240ms var(--ease-arrive) backwards;
}

/* ------------------------ Scene 5: the route ledger ----------------------- */
/* One honest comparison in matched terms. A continuous ruled field, never
   two competing cards; the wide table scrolls in its own focusable region on
   narrow screens, exactly as the Selling Process comparison does. */
.svq-routes {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--inset) clamp(2rem, 4vw, 3.5rem);
}
.svq-routes__head { max-width: 62ch; margin-bottom: var(--s5); }
.svq-routes__title {
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: var(--t-section);
  line-height: 1.15;
  color: var(--ink);
}
.svq-routes__intro { margin: 0; color: var(--fg-soft); line-height: 1.65; }
.svq-routes__emph {
  margin: 0 0 var(--s3);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--copper-deep);
}
.svq-routes__scroll { overflow-x: auto; border: 1px solid var(--rule-strong); background: var(--bone-raised); }
.svq-routes__scroll:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 2px; }
.svq-routes__table { width: 100%; min-width: 44rem; border-collapse: collapse; }
.svq-routes__table th,
.svq-routes__table td {
  padding: var(--s4) var(--s4);
  text-align: left;
  vertical-align: top;
  font-size: var(--t-small);
  line-height: 1.6;
  border-bottom: 1px solid var(--rule);
}
.svq-routes__table thead th {
  font-family: var(--font-display);
  font-size: var(--t-group);
  font-weight: 400;
  color: var(--on-deep);
  background: var(--bottle);
  border-bottom: 0;
}
.svq-routes__table tbody th {
  font-size: var(--t-label);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper-deep);
  white-space: nowrap;
}
.svq-routes__table td { color: var(--ink); }
.svq-routes__table td + td { border-left: 1px solid var(--rule); }
.svq-routes__table tbody tr:last-child th,
.svq-routes__table tbody tr:last-child td { border-bottom: 0; }
/* Priority emphasis: a reading aid on the row, applied to both routes
   equally so neither column reads as recommended. */
.svq-routes__table tr.is-lead th,
.svq-routes__table tr.is-lead td { background: rgba(143, 80, 36, 0.07); }
.svq-routes__table tr.is-lead > th { box-shadow: inset 3px 0 0 var(--copper); }
.svq-routes__note {
  margin: var(--s4) 0 0;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink);
  max-width: 70ch;
  line-height: 1.6;
}
.svq-routes__dukes { margin: var(--s2) 0 0; font-size: var(--t-small); color: var(--fg-soft); max-width: 70ch; }

/* --------------------- Scene 6: local confidence -------------------------- */
/* One verified voice, quoted large, over the same three compact facts. No
   avatars, no logos, no invented roles, no rating figure. */
.svq-conf {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--inset) clamp(2rem, 4vw, 3.5rem);
}
.svq-conf__quote {
  margin: 0;
  padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.25rem, 2.75vw, 2.75rem);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--copper);
  background: var(--bone-raised);
}
/* One large central proof statement, as the reference composes it — never a
   left-stranded paragraph with a dead right half. */
.svq-conf__text { margin: 0; }
.svq-conf__text p {
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.4;
  color: var(--ink);
  max-width: 36ch;
  text-align: center;
  text-wrap: balance;
}
.svq-conf__text p::before { content: "\201C"; }
.svq-conf__text p::after { content: "\201D"; }
.svq-conf__source {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s4);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}
.svq-conf__name { font-size: var(--t-small); font-weight: 700; color: var(--ink); }
.svq-conf__meta {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.svq-conf__link,
.svq-conf__rowlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--copper-deep);
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 170ms var(--ease-in-out);
}
.svq-conf__link:hover,
.svq-conf__link:active,
.svq-conf__rowlink:hover,
.svq-conf__rowlink:active { color: var(--copper); }
.svq-conf__link { margin-left: auto; }
.svq-conf__row {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 48em) {
  .svq-conf__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svq-conf__item + .svq-conf__item { border-left: 1px solid var(--rule); padding-left: clamp(1.25rem, 3vw, 2.5rem); }
  .svq-conf__item:not(:last-child) { padding-right: clamp(1.25rem, 3vw, 2.5rem); }
}
.svq-conf__item {
  min-width: 0;
  padding-block: clamp(0.875rem, 1.75vw, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.svq-conf__item + .svq-conf__item { border-top: 1px solid var(--rule); }
@media (min-width: 48em) {
  .svq-conf__item + .svq-conf__item { border-top: 0; }
}
.svq-conf__label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.svq-conf__value { font-size: var(--t-small); font-weight: 700; color: var(--ink); line-height: 1.5; }

/* -------------------------- Scene 6b: Verify Dukes ------------------------ */
/* The company record, one compact drawer instead of a page-width gallery.
   Native disclosure; every link is the shared evidence source's own. */
.svq-verify {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--inset) clamp(1.75rem, 3.5vw, 3rem);
}
.svq-verify__fold { border: 1px solid var(--rule-strong); background: var(--bone-raised); }
.svq-verify__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 48px;
  padding: var(--s4) clamp(1.25rem, 2.5vw, 1.75rem);
  cursor: pointer;
  list-style: none;
  transition: background-color 170ms var(--ease-in-out);
}
.svq-verify__summary::-webkit-details-marker { display: none; }
.svq-verify__summary:hover { background: var(--bone); }
.svq-verify__summary:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: -4px; }
.svq-verify__headline { min-width: 0; display: grid; gap: 2px; }
.svq-verify__title { font-family: var(--font-display); font-size: var(--t-group); color: var(--ink); }
.svq-verify__sub { font-size: var(--t-small); color: var(--fg-soft); line-height: 1.5; }
.svq-verify__mark { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.svq-verify__mark::before,
.svq-verify__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--copper-deep);
  transform: translateY(-50%);
}
.svq-verify__mark::after { transform: translateY(-50%) rotate(90deg); }
.svq-verify__fold[open] .svq-verify__mark::after { display: none; }
.svq-verify__list {
  list-style: none;
  margin: 0;
  padding: 0 clamp(1.25rem, 2.5vw, 1.75rem) var(--s4);
}
.svq-verify__record {
  display: grid;
  gap: var(--s1) var(--s4);
  padding: var(--s3) 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 62em) {
  .svq-verify__record {
    grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1.6fr) minmax(11rem, auto);
    align-items: baseline;
  }
}
.svq-verify__record-label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.svq-verify__record-name { font-size: var(--t-small); font-weight: 700; color: var(--ink); }
.svq-verify__record-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--copper-deep);
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 170ms var(--ease-in-out);
}
@media (min-width: 62em) {
  .svq-verify__record-link { justify-self: end; }
}
.svq-verify__record-link:hover,
.svq-verify__record-link:active { color: var(--copper); }

/* ------------------------ Scene 6c: straight answers ---------------------- */
.svq-answers {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--inset) clamp(2rem, 4vw, 3.5rem);
}
.svq-answers__head { max-width: 62ch; margin-bottom: var(--s4); }
.svq-answers__title {
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-size: var(--t-section);
  line-height: 1.15;
  color: var(--ink);
}
.svq-answers__intro { margin: 0; color: var(--fg-soft); line-height: 1.6; }
.svq-answers__list { border-top: 1px solid var(--rule-strong); }
.svq-answer { border-bottom: 1px solid var(--rule); }
.svq-answer__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4);
  min-height: 48px;
  padding: var(--s4) 0;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  transition: color 170ms var(--ease-in-out);
}
.svq-answer__summary::-webkit-details-marker { display: none; }
.svq-answer__summary:hover { color: var(--copper-deep); }
.svq-answer__summary:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 2px; }
.svq-answer__n { font-family: var(--font-display); font-size: 1.0625rem; color: var(--copper-deep); }
.svq-answer__q { min-width: 0; font-size: 1rem; font-weight: 700; line-height: 1.4; }
.svq-answer__mark { position: relative; width: 14px; height: 14px; }
.svq-answer__mark::before,
.svq-answer__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--copper-deep);
  transform: translateY(-50%);
}
.svq-answer__mark::after { transform: translateY(-50%) rotate(90deg); }
.svq-answer[open] .svq-answer__mark::after { display: none; }
.svq-answer__a {
  margin: 0 0 var(--s5);
  padding-left: calc(var(--s5) + 2px);
  border-left: 2px solid var(--copper);
  margin-left: 6px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 62ch;
}
[data-enhanced][data-motion="full"] .svq-answer[open] .svq-answer__a {
  animation: svq-arrive 240ms var(--ease-arrive) backwards;
}

/* ------------------------- The calm invitation ---------------------------- */
.svq-invite {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) var(--inset) 0;
  font-family: var(--font-display);
  font-size: var(--t-group);
  line-height: 1.4;
  color: var(--ink);
}

/* ----------------------- Scene 8: the closing chapter --------------------- */
/* Page-scoped descendants only; the shared component and .steps rules are
   untouched. The two destination cards read as one considered pair: equal
   height, the same bottle top rule on both (no heavier "lead" card), serif
   titles matching the dossier chapters, and actions on a shared baseline. */
.svq-close { background: var(--bone-sunk); border-top: 1px solid var(--rule); }
.svq-close .steps { border-top: 0; }
.svq-close .steps__list { align-items: stretch; }
.svq-close .steps__item { min-width: 0; display: grid; }
.svq-close .steps__link {
  height: 100%;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  gap: var(--s3);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 2px solid var(--bottle);
  transition: border-color 170ms var(--ease-in-out), background-color 170ms var(--ease-in-out),
    color 170ms var(--ease-in-out);
}
.svq-close .steps__item--lead .steps__link { border-top: 2px solid var(--bottle); }
.svq-close .steps__label {
  font-family: var(--font-display);
  font-size: var(--t-group);
  font-weight: 400;
  line-height: 1.25;
}
.svq-close .steps__blurb { max-width: 52ch; }
.svq-close .steps__action {
  position: relative;
  align-self: end;
  width: fit-content;
  padding-bottom: 3px;
}
.svq-close .steps__action::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 170ms var(--ease-in-out);
}
.svq-close .steps__link:hover { transform: none; border-color: var(--copper); border-top-color: var(--copper); }
.svq-close .steps__link:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 3px; }
.svq-close .steps__arrow { transition: transform 170ms var(--ease-in-out); }
.svq-close .steps__link:hover .steps__action::after,
.svq-close .steps__link:focus-visible .steps__action::after { transform: scaleX(1); }
.svq-close .steps__link:hover .steps__arrow,
.svq-close .steps__link:focus-visible .steps__arrow { transform: translateX(3px); }

/* The page-scoped evidence register that used to restyle the shared .ev rail
   here was retired on 13 August 2026: this route now sets hideTrustRail and
   presents the same records inside the Verify Dukes drawer above. The shared
   rail and its styles are untouched on every other route. */

/* ------------------------------ Page motion ------------------------------- */
/* Hero: the copy settles once, the photograph follows once. CSS animations
   rather than the observer, because the hero is on screen at first paint. */
@keyframes svq-arrive {
  from { opacity: 0; transform: translateY(10px); }
}
[data-enhanced][data-motion="full"] .svq-open__copy {
  animation: svq-arrive 420ms var(--ease-arrive) backwards;
}
[data-enhanced][data-motion="full"] .svq-open__media {
  animation: svq-arrive 420ms var(--ease-arrive) 70ms backwards;
}

/* Stage changes. Direction is the whole point: Continue arrives from the
   right, Back from the left, so the movement says which way the journey went.
   8px, transform and opacity only, and the class is removed as soon as it has
   played so nothing accumulates. Focus is moved before this starts and is
   never animated. */
@keyframes svq-step-forward {
  from { opacity: 0; transform: translateX(8px); }
}
@keyframes svq-step-back {
  from { opacity: 0; transform: translateX(-8px); }
}
[data-enhanced][data-motion="full"] .svq-step.is-forward {
  animation: svq-step-forward 240ms var(--ease-arrive);
}
[data-enhanced][data-motion="full"] .svq-step.is-back {
  animation: svq-step-back 240ms var(--ease-arrive);
}

/* Qualification chapter: the composed inner block reveals once as one unit. */
[data-enhanced][data-motion="full"] .svq-qual .svq-qual__inner { opacity: 0; transform: translateY(10px); }
[data-enhanced][data-motion="full"] .svq-qual.is-in .svq-qual__inner {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--ease-arrive), transform 420ms var(--ease-arrive);
}

/* The review scene steps in once when the summary is asked for. */
@media (prefers-reduced-motion: no-preference) {
  [data-enhanced][data-motion="full"] .svb__summary:not([hidden]) {
    animation: svq-review-in 360ms var(--ease-arrive);
  }
}
@media (prefers-reduced-motion: reduce) {
  .svq-close .steps__action::after,
  .svq-close .steps__arrow,
  .page--sales-valuation .ev__card,
  .page--sales-valuation .ev__arrow { transition: none; }
}
@keyframes svq-review-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* Static, reduced-motion and reduced-data paths render the final state
   immediately: no entrance, no stage transition, no crossfade, no seal draw,
   and a progress bar that jumps straight to its width. Every new animation
   above is already gated behind [data-motion="full"]; these rules are the
   belt to that braces. */
[data-motion="static"] .svq-qual .svq-qual__inner { opacity: 1 !important; transform: none !important; }
[data-motion="static"] .svq-progress__fill { transition: none; }
@media (prefers-reduced-motion: reduce) {
  [data-enhanced] .svq-qual .svq-qual__inner { opacity: 1; transform: none; }
  .svq-progress__fill { transition: none; }
  .svq-step.is-forward,
  .svq-step.is-back { animation: none; }
  .svq-ledger__fill { transition: none; }
  .svq-dossier__segments i { transition: none; }
  .svq-dock .svq-dossier,
  .svq-lens__item[open] .svq-lens__copy,
  .svq-answer[open] .svq-answer__a,
  .svq-dossier.is-sealed .svq-dossier__seal::after { animation: none; }
}
@media (prefers-reduced-data: reduce) {
  [data-enhanced] .svq-qual .svq-qual__inner { opacity: 1; transform: none; }
  .svq-progress__fill { transition: none; }
}

/* Print: the working page becomes a readable record. Disclosures are opened
   by the page script before printing; interaction-only controls retire. */
@media print {
  .svq-start__clear,
  .svq-echo__change,
  .svq-dock__summary { display: none !important; }
  .svq-open__mount { position: static; margin: var(--s4) 0 0; width: auto; }
  .svq-conf__quote,
  .svq-routes__scroll,
  .svq-verify__fold { break-inside: avoid; }
}

/* ============================ Selling Process ============================= *
 * The seller journey's chronological page, 8 August 2026. Page-scoped spx__
 * classes render only on /sales/selling-process/. Established tokens only;
 * the single interactive treatment is the colour-only next-stage link.      */
.spx { max-width: 56rem; }
.spx__stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s6);
}
.spx__stage {
  min-width: 0;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--bone-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--copper);
}
.spx__head { display: flex; align-items: baseline; gap: var(--s4); min-width: 0; }
.spx__index { font-family: var(--font-display); font-size: 1.5rem; color: var(--copper); flex: none; }
.spx__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.2; color: var(--ink); }
.spx__happens { margin: var(--s3) 0 0; color: var(--ink); line-height: 1.65; max-width: 62ch; }
.spx__facts {
  margin: var(--s4) 0 0;
  display: grid;
  gap: var(--s3) var(--s5);
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
}
@media (min-width: 48em) {
  .spx__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.spx__fact { min-width: 0; }
.spx__fact dt { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--copper-deep); }
.spx__fact dd { margin: var(--s1) 0 0; font-size: var(--t-small); line-height: 1.6; color: var(--ink); }
.spx__next {
  margin: var(--s4) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--ink);
}
.spx__next-label { font-weight: 700; color: var(--copper-deep); }
.spx__next-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin: -11px 0 -11px var(--s2);
  color: var(--copper-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 150ms var(--ease-in-out);
}
@media (hover: hover) and (pointer: fine) {
  .spx__next-link:hover { color: var(--bottle); }
}
.spx__next-link:focus-visible { transition: none; outline: 2px solid var(--copper-deep); outline-offset: 2px; }

.spx__routes { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.spx__routes-title { margin: 0; font-family: var(--font-display); font-size: var(--t-section); color: var(--ink); }
.spx__routes-intro { margin: var(--s3) 0 0; color: var(--ink); max-width: 62ch; }
/* Wide content scrolls inside its own region, never the page. */
.spx__routes-scroll { margin-top: var(--s4); overflow-x: auto; }
.spx__routes-scroll:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 2px; }
.spx__table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: var(--t-small); }
.spx__table th,
.spx__table td { padding: var(--s3) var(--s4); text-align: left; vertical-align: top; border: 1px solid var(--line); line-height: 1.6; color: var(--ink); }
.spx__table thead th { background: var(--bone-sunk); font-weight: 700; }
.spx__table tbody th { background: var(--bone-raised); font-weight: 700; white-space: normal; }
.spx__routes-note { margin: var(--s4) 0 0; font-size: var(--t-small); color: var(--ink); font-weight: 500; max-width: 62ch; }

.spx__extras { margin-top: clamp(2rem, 3vw, 3rem); padding-top: var(--s5); border-top: 1px solid var(--rule-strong); }
.spx__extras-title { margin: 0; font-family: var(--font-display); font-size: 1.375rem; color: var(--ink); }
.spx__extras-copy { margin: var(--s3) 0 0; line-height: 1.65; color: var(--ink); max-width: 68ch; }

@media (prefers-reduced-motion: reduce) {
  .spx__next-link { transition: none; }
}

.cert {
  --cx-move: 190ms;
  --cx-ease: var(--ease-in-out);
}

/* --------------------------- Certificate panel ---------------------------- */
/* Rendered only when a genuine, complete certificate record exists. There is
   deliberately no empty state: an empty state still tells a visitor that a
   certificate is out there somewhere. */

.cert {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--inset);
  display: grid;
  gap: var(--s4);
  min-width: 0;
}

.cert > * {
  background: var(--bone-raised);
}

.cert__eyebrow {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
  background: none;
}

.cert__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
  color: var(--bottle);
  background: none;
}

.cert__facts {
  margin: 0;
  display: grid;
  gap: var(--s4);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--bottle);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  min-width: 0;
}

@media (min-width: 56em) {
  .cert__facts {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    column-gap: clamp(1.25rem, 2.5vw, 2rem);
  }
}

.cert__fact { min-width: 0; }

.cert__term {
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
  margin-bottom: 2px;
}

.cert__value {
  margin: 0;
  color: var(--ink);
  line-height: 1.4;
  word-break: break-word;
}

.cert__action { margin: 0; background: none; }

.cert__link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em;
  /* 44px target: 1rem line-box plus 0.8125rem padding top and bottom. */
  padding: 0.8125rem 1.5rem;
  min-height: 44px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
  background-color: var(--bottle);
  color: var(--on-deep);
  border: 1px solid var(--bottle);
  transition: background-color var(--cx-move) var(--cx-ease),
    border-color var(--cx-move) var(--cx-ease), color var(--cx-move) var(--cx-ease);
}

.cert__link:hover {
  background-color: var(--bottle-deep);
  border-color: var(--bottle-deep);
  color: var(--sand);
}

.cert__link:focus-visible {
  background-color: var(--bottle-deep);
  border-color: var(--copper);
}

.cert__meta {
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--on-deep-soft);
}

.cert__link:hover .cert__meta { color: var(--sand); }

/* ------------------------- Client protection page ------------------------- */
/* Page-scoped, same tokens, same motion policy: colour and border only. */

.cp {
  padding-block: clamp(1rem, 2vw, 1.75rem) clamp(2.5rem, 5vw, 5rem);
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 3.5rem);
}

.cp__certs,
.cp__library {
  display: grid;
  gap: var(--s4);
  min-width: 0;
  border-top: 2px solid var(--bottle);
  padding-top: var(--s5);
}

/* Two certificates side by side where there is room, stacked below. Each keeps
   the shared certificate component; only its page gutter is removed. */
.cp__cert-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--s2);
  min-width: 0;
}

@media (min-width: 62em) {
  .cp__cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cp .cert {
  max-width: none;
  padding: 0;
  margin: 0;
}

.cp a,
.cp button { transform: none !important; }

.cp .btn::before,
.cp .btn::after,
.cp .link::after {
  content: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* The shared next-steps card lifts on hover; on this governance page the policy
   is colour and border only. Descendants of .cp only: the component keeps its
   own motion everywhere else. */
.cp .steps__link {
  transition: border-color 190ms var(--ease-in-out),
    background-color 190ms var(--ease-in-out), color 190ms var(--ease-in-out);
}

.cp .steps__arrow,
.cp .steps__link { transform: none !important; }
.cp .steps__arrow { transition: none; }

.cert a {
  transform: none !important;
}

.cert .btn::before,
.cert .btn::after {
  content: none !important;
  transform: none !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .cert__link {
    transition: none;
  }
}

/* ============================ The guide system ============================ *
 * Shared by the Buying Guide, the Tenant Guide and Tenant fees. Every
 * selector begins with .gx, so nothing here reaches another component.
 *
 * Tokens only: bone surfaces, bottle green, restrained copper and sand,
 * Palatino display and Manrope body. No new colour, gradient, glass, shadow
 * or radius.
 *
 * Motion policy: colour and border only, 180ms, explicit properties. Nothing
 * on these pages moves, lifts, zooms or slides.
 * ========================================================================== */

.gx {
  --gx-move: 180ms;
  --gx-ease: var(--ease-in-out);
  padding-block: clamp(1rem, 2vw, 1.75rem) clamp(3rem, 6vw, 6rem);
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 68.75em) {
  .gx {
    grid-template-columns: minmax(13.5rem, 15.5rem) minmax(0, 1fr);
    gap: clamp(2rem, 3.5vw, 3.25rem);
    align-items: start;
  }
}

/* ----------------------------- Phase overview ---------------------------- */
/* Compact and sticky. Deliberately no max-height and no overflow: a second
   scrolling pane inside a page that already scrolls is the worst thing a long
   guide can do to a reader, and it was the defect this replaced. */

.gx__overview {
  border-top: 2px solid var(--copper);
  padding-top: var(--s4);
  min-width: 0;
}

@media (min-width: 68.75em) {
  .gx__overview {
    position: sticky;
    top: calc(var(--head-h) + 1.25rem);
  }
}

.gx__overview-title {
  margin: 0 0 var(--s4);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 700;
}

.gx__phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s5);
}

.gx__phase { min-width: 0; }

.gx__phase-head {
  margin: 0 0 var(--s2);
  display: grid;
  gap: 1px;
}

.gx__phase-index {
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
}

.gx__phase-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.2;
  color: var(--bottle);
}

.gx__jumps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.gx__jump + .gx__jump { border-top: 1px solid var(--rule); }

.gx__jump-link {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  /* 44px minimum: 0.625rem padding each side of a 1.35 line-box. */
  padding: 0.625rem 0.5rem;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid transparent;
  background-color: transparent;
  line-height: 1.35;
  font-size: 0.9375rem;
  transition: background-color var(--gx-move) var(--gx-ease),
    border-color var(--gx-move) var(--gx-ease), color var(--gx-move) var(--gx-ease);
}

.gx__jump-index {
  flex: none;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  color: var(--copper-deep);
  font-variant-numeric: tabular-nums;
}

.gx__jump-name { min-width: 0; }

.gx__jump-link:hover {
  background-color: var(--bone-raised);
  border-color: var(--rule);
  color: var(--bottle);
}

.gx__jump-link:focus-visible {
  background-color: var(--bone-raised);
  border-color: var(--copper);
}

/* ------------------------------- The stages ------------------------------ */

.gx__stages {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  min-width: 0;
}

.gx__phase-block {
  display: grid;
  gap: var(--s5);
  min-width: 0;
}

/* Bottle-green phase banner: the strongest surface on the page, used once per
   phase and never for anything else. */
.gx__banner {
  background: var(--bottle);
  color: var(--on-deep);
  border-top: 3px solid var(--copper);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  gap: var(--s2);
  min-width: 0;
}

.gx__banner-kicker {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 700;
}

.gx__banner-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.1;
  color: var(--on-deep);
}

.gx__banner-summary {
  margin: 0;
  color: var(--on-deep-soft);
  max-width: var(--measure);
  line-height: 1.55;
}

.gx__banner-range {
  margin: 0;
  font-size: var(--t-small);
  color: var(--on-deep-soft);
}

/* Raised bone stage card with a single copper edge. */
.gx__stage {
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--copper);
  padding: clamp(1.25rem, 3vw, 2rem);
  display: grid;
  gap: var(--s5);
  min-width: 0;
  scroll-margin-top: calc(var(--head-h) + 1rem);
}

.gx__stage-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "mark meta" "mark title";
  column-gap: var(--s4);
  row-gap: 2px;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--s4);
}

.gx__stage-head:not(:has(.gx__stage-meta)) {
  grid-template-areas: "mark title";
  align-items: center;
}

.gx__stage-mark {
  grid-area: mark;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--bottle);
  background: var(--bottle);
  color: var(--sand);
}

.gx__icon { width: 1.5rem; height: 1.5rem; display: block; }

.gx__stage-meta {
  grid-area: meta;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
}

.gx__stage-title {
  grid-area: title;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  line-height: 1.15;
  color: var(--bottle);
  min-width: 0;
}

.gx__stage-index {
  flex: none;
  font-size: 0.72em;
  color: var(--copper);
  font-variant-numeric: tabular-nums;
}

.gx__stage-name { min-width: 0; }

.gx__stage-intro {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
  max-width: var(--measure);
}

/* The essential checks: always visible, never behind a disclosure. */
.gx__checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
  min-width: 0;
  border-left: 3px solid var(--copper);
  background: var(--bone-sunk);
  padding: var(--s4) var(--s5);
}

.gx__check {
  position: relative;
  padding-left: 1.1rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: var(--measure);
}

.gx__check::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--copper);
}

/* ---------------------------- Progressive detail ------------------------- */
/* Native details/summary: keyboard accessible, find-in-page friendly, and it
   works with no JavaScript. The marker is replaced with a drawn sign because
   the default triangle varies between engines. */

.gx__more {
  border-top: 1px solid var(--rule);
  min-width: 0;
}

.gx__more-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  /* 44px row. */
  padding: 0.75rem 0;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--copper-deep);
  transition: color var(--gx-move) var(--gx-ease);
}

.gx__more-summary::-webkit-details-marker { display: none; }
.gx__more-summary:hover { color: var(--bottle); }

.gx__more-sign {
  flex: none;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
  border: 1px solid currentColor;
}

.gx__more-sign::before,
.gx__more-sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  inset: 50% 3px auto 3px;
  height: 1px;
}

.gx__more-sign::after {
  inset: 3px 50% 3px auto;
  width: 1px;
  height: auto;
}

/* Open state removes the vertical stroke: a plus becomes a minus. No rotation,
   because rotation is movement and this page has none. */
.gx__more[open] .gx__more-sign::after { content: none; }

.gx__more-body { padding: var(--s2) 0 var(--s5); }

.gx__points {
  margin: 0;
  display: grid;
  gap: var(--s5);
  min-width: 0;
}

@media (min-width: 56em) {
  .gx__points {
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    column-gap: clamp(1.25rem, 2.5vw, 2rem);
  }
}

.gx__point {
  min-width: 0;
  border-top: 1px solid var(--rule);
  padding-top: var(--s4);
}

.gx__point-term {
  margin: 0 0 var(--s2);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--bottle);
}

.gx__point-detail {
  margin: 0;
  color: var(--fg-soft);
  line-height: 1.6;
  max-width: var(--measure);
}

.gx__stage-action { margin: 0; }

/* --------------------------------- Links --------------------------------- */

.gx__link {
  color: var(--copper-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  padding: 2px 0;
  transition: color var(--gx-move) var(--gx-ease),
    background-color var(--gx-move) var(--gx-ease);
}

.gx__link:hover {
  color: var(--bottle);
  background-color: color-mix(in srgb, var(--copper) 10%, transparent);
}

/* ------------------------------ Closing panel ---------------------------- */

.gx__close {
  background: var(--bottle);
  border-top: 3px solid var(--copper);
  color: var(--on-deep);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: grid;
  gap: var(--s4);
  justify-items: start;
  min-width: 0;
}

.gx__close-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
  color: var(--on-deep);
}

.gx__close-copy {
  margin: 0;
  color: var(--on-deep-soft);
  max-width: var(--measure);
  line-height: 1.6;
}

.gx__close-actions {
  margin: var(--s2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

.gx__cta {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  min-height: 44px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
  background-color: var(--sand);
  color: var(--bottle-deep);
  border: 1px solid var(--sand);
  transition: background-color var(--gx-move) var(--gx-ease),
    border-color var(--gx-move) var(--gx-ease), color var(--gx-move) var(--gx-ease);
}

.gx__cta:hover,
.gx__cta:focus-visible {
  background-color: var(--on-deep);
  border-color: var(--on-deep);
  color: var(--bottle-deep);
}

.gx__cta--quiet {
  background-color: transparent;
  color: var(--on-deep);
  border-color: var(--on-deep-soft);
}

.gx__cta--quiet:hover,
.gx__cta--quiet:focus-visible {
  background-color: transparent;
  border-color: var(--sand);
  color: var(--sand);
}

/* ------------------------------- Supporting ------------------------------ */

.gx__note {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-soft);
  border-left: 2px solid var(--line);
  padding-left: var(--s4);
  max-width: var(--measure);
}

.gx__sources { min-width: 0; }

.gx__sources-title {
  margin: 0 0 var(--s3);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 700;
}

.gx__sources-list {
  margin: 0 0 var(--s4);
  padding-left: 1.1em;
  font-size: var(--t-small);
  max-width: var(--measure);
}

.gx__sources-list li { margin-bottom: var(--s2); }
.gx__sources .reviewed { margin: 0; }

/* ------------------------------ Hero, shared ----------------------------- */

.gx-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.75rem, 3vw, 2.75rem) var(--inset) clamp(1.5rem, 2.5vw, 2.25rem);
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  align-items: start;
}

@media (min-width: 62em) {
  .gx-hero {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
    gap: clamp(2rem, 4vw, 4rem);
  }
}

.gx-hero__copy { min-width: 0; }
.gx-hero__copy .lede { margin-bottom: var(--s4); }

.gx-hero__scope {
  margin: 0;
  font-size: var(--t-small);
  color: var(--fg-soft);
  max-width: var(--measure);
}

.gx-hero__media {
  min-width: 0;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--copper);
  background: var(--bone-raised);
  padding: var(--s3);
}

.gx-hero__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 62%;
}

/* --------------------- Fee schedule, tenant fees only -------------------- */

.gx__feeset {
  display: grid;
  gap: var(--s5);
  min-width: 0;
}

.gx__fee {
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--copper);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  display: grid;
  gap: var(--s2);
  min-width: 0;
}

.gx__fee--barred { border-left-color: var(--bottle); }

.gx__fee-name {
  margin: 0;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--bottle);
}

.gx__fee-limit {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--ink);
  max-width: var(--measure);
}

.gx__fee-note {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: var(--measure);
}

.gx__fee-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s3);
  min-width: 0;
}

@media (min-width: 56em) {
  .gx__fee-list { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
}

.gx__fee-item {
  position: relative;
  padding-left: 1.1rem;
  line-height: 1.55;
  color: var(--ink);
}

.gx__fee-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--bottle);
}

/* Verified scheme panel, imported from the canonical certificate records. */
.gx__schemes {
  display: grid;
  gap: var(--s5);
  min-width: 0;
}

@media (min-width: 62em) {
  .gx__schemes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gx__scheme {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--bottle);
  background: var(--bone-raised);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  display: grid;
  gap: var(--s2);
  min-width: 0;
  align-content: start;
}

.gx__scheme-kicker {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
}

.gx__scheme-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-group);
  line-height: 1.2;
  color: var(--bottle);
}

.gx__scheme-fact {
  margin: 0;
  font-size: var(--t-small);
  color: var(--fg-soft);
  line-height: 1.5;
  word-break: break-word;
}

.gx__scheme-action { margin: var(--s2) 0 0; }

/* --------------------------- Motion neutralisers ------------------------- */
/* Scoped: descendants of the guide system only. Shared components keep their
   own behaviour everywhere else on the site. */

.gx a,
.gx button,
.gx summary,
.gx-hero a { transform: none !important; }

.gx .btn::before,
.gx .btn::after,
.gx .link::after {
  content: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.gx .steps__link {
  transition: border-color var(--gx-move) var(--gx-ease),
    background-color var(--gx-move) var(--gx-ease), color var(--gx-move) var(--gx-ease);
}

.gx .steps__arrow { transition: none; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .gx__jump-link,
  .gx__link,
  .gx__cta,
  .gx__more-summary { transition: none; }
}

/* ==================== Rental Valuation Calculator ======================== *
 * Page-scoped. Every selector begins with .rv, so nothing here reaches a
 * component on another page. Tokens only: bone surfaces, bottle green,
 * copper and sand accents, Palatino display, Manrope body.
 *
 * Motion: colour and border only, 180ms, explicit properties. Nothing lifts,
 * zooms, glows or slides.
 * ========================================================================== */

.rv,
.rv-open {
  --rv-move: 180ms;
  --rv-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.rv-open {
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--text-on-dark);
  background:
    radial-gradient(circle at 86% 18%, rgba(197, 166, 106, 0.11), transparent 28rem),
    var(--surface-olive-charcoal);
  border-top: 1px solid var(--border-on-dark);
  border-bottom: 1px solid var(--border-on-dark);
}

.rv-open__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6.5rem) var(--inset);
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.rv-open__copy { min-width: 0; max-width: 50rem; }
.rv-open .h-display {
  margin: 0;
  max-width: 12ch;
  color: var(--text-on-dark);
  text-wrap: balance;
}
.rv-open__copy .lede {
  margin: var(--s5) 0 0;
  max-width: 59ch;
  color: var(--text-on-dark-soft);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
  line-height: 1.7;
}

.rv-open__signals {
  list-style: none;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: var(--s4) 0 0;
  border-top: 1px solid var(--border-on-dark);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  color: var(--text-on-dark);
  font-size: var(--t-small);
  font-weight: 650;
}

.rv-open__signals li {
  position: relative;
  padding-left: 1rem;
}

.rv-open__signals li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--accent-champagne);
}

.rv-open__guide {
  min-width: 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: rgba(244, 238, 227, 0.055);
  border: 1px solid var(--border-on-dark);
}

.rv-open__guide-title {
  margin: 0 0 var(--s5);
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.65vw, 1.65rem);
  line-height: 1.2;
  color: var(--accent-champagne);
}

.rv-open__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rv-open__steps li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 0.75fr) minmax(0, 1fr);
  gap: var(--s3);
  align-items: baseline;
  min-height: 3.15rem;
  padding: var(--s3) 0;
  border-top: 1px solid var(--border-on-dark);
}

.rv-open__steps span {
  color: var(--accent-champagne);
  font-size: var(--t-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.rv-open__steps strong {
  color: var(--text-on-dark);
  font-size: var(--t-small);
}

.rv-open__steps small {
  color: var(--text-on-dark-soft);
  font-size: 0.78rem;
  line-height: 1.45;
}

@media (min-width: 60em) {
  .rv-open__inner { grid-template-columns: minmax(0, 1.3fr) minmax(20rem, 0.7fr); }
}

.rv {
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(4rem, 7vw, 7rem);
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

/* The result sits beside the form on a wide screen and beneath it on a narrow
   one, which is the whole layout requirement in one declaration. */
@media (min-width: 62em) {
  .rv { grid-template-columns: minmax(0, 1.2fr) minmax(21rem, 0.8fr); }
}

/* ---------------------------------- Form --------------------------------- */

.rv__form {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  min-width: 0;
}

.rv__group {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  padding: clamp(1.25rem, 3vw, 2rem);
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  min-width: 0;
}

.rv__group-head {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--border-subtle);
}

.rv__step {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--accent-brass-deep);
  border: 1px solid var(--border-brass);
  font-size: var(--t-label);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.rv__group-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.2rem + 0.75vw, 1.85rem);
  line-height: 1.12;
  color: var(--text-primary);
  text-wrap: balance;
}

.rv__group-copy {
  margin: var(--s2) 0 0;
  max-width: 58ch;
  color: var(--text-secondary);
  font-size: var(--t-small);
  line-height: 1.6;
}

.rv__field { margin: 0; display: grid; gap: var(--s2); min-width: 0; }
.rv__field--short { max-width: 22rem; }

.rv__label,
.rv__legend {
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.rv__optional { font-weight: 500; color: var(--fg-soft); }

.rv__control {
  font: inherit;
  color: var(--ink);
  background: var(--surface-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  /* 44px: 1.0625rem line-box plus 0.6875rem padding each side. */
  padding: 0.6875rem 0.75rem;
  min-height: 44px;
  width: 100%;
  transition: border-color var(--rv-move) var(--rv-ease),
    background-color var(--rv-move) var(--rv-ease), box-shadow var(--rv-move) var(--rv-ease);
}

@media (hover: hover) and (pointer: fine) {
  .rv__control:hover { border-color: var(--accent-brass-deep); }
}
.rv__control:focus-visible {
  border-color: var(--accent-bottle-green);
  box-shadow: 0 0 0 3px rgba(49, 83, 69, 0.16);
  transition: none;
}
.rv__control[aria-invalid="true"] { border-color: var(--crest); background: color-mix(in srgb, var(--crest) 5%, var(--bone)); }

.rv__fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
  min-width: 0;
}

.rv__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  min-width: 0;
}

.rv__choices--tight .rv__choice { min-width: 4.5rem; }

.rv__choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-mount);
  background: var(--surface-page);
  cursor: pointer;
  line-height: 1.35;
  transition: background-color var(--rv-move) var(--rv-ease),
    border-color var(--rv-move) var(--rv-ease), color var(--rv-move) var(--rv-ease);
}

.rv__choice--wide { flex: 1 1 12rem; }

.rv__choice input {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.rv__choice-label { pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
  .rv__choice:hover { border-color: var(--accent-brass-deep); background: var(--surface-raised); }
}

.rv__choice:has(input:checked) {
  background: var(--accent-bottle-green);
  border-color: var(--accent-bottle-green);
  color: var(--text-on-dark);
}

.rv__choice:has(input:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.rv__check {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  cursor: pointer;
  line-height: 1.4;
}

.rv__check--inline { margin-top: var(--s2); }

.rv__check input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--bottle);
  flex: none;
}

.rv__confirm { margin: 0; display: grid; gap: var(--s2); }

.rv__hint,
.rv__privacy {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: var(--measure);
}

.rv__privacy {
  padding-top: var(--s4);
  border-top: 1px solid var(--border-subtle);
}

.rv__error {
  display: block;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--crest);
  line-height: 1.5;
}

.rv__submit-row { margin: 0; }

.rv__completion {
  display: grid;
  gap: var(--s5);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface-limestone);
  border: 1px solid var(--border-strong);
}

.rv__completion-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.2rem + 0.75vw, 1.85rem);
  line-height: 1.15;
  color: var(--text-primary);
}

.rv__completion-copy p {
  margin: var(--s2) 0 0;
  max-width: 54ch;
  color: var(--text-secondary);
  font-size: var(--t-small);
  line-height: 1.6;
}

.rv__submit {
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.875rem 1.75rem;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-dark);
  background-color: var(--accent-bottle-green);
  border: 1px solid var(--accent-bottle-green);
  border-radius: var(--radius-control);
  transition: background-color var(--rv-move) var(--rv-ease),
    border-color var(--rv-move) var(--rv-ease), color var(--rv-move) var(--rv-ease);
}

@media (hover: hover) and (pointer: fine) {
  .rv__submit:hover {
    background-color: #274539;
    border-color: #274539;
    color: var(--text-on-dark);
  }
}

/* Press feedback stays outside the hover gate so touch gets it too. */
.rv__submit:active {
  background-color: #20392f;
  border-color: #20392f;
}

.rv__submit:focus-visible { border-color: var(--accent-champagne); transition: none; }

/* --------------------------------- Result -------------------------------- */

.rv__side {
  display: grid;
  gap: var(--s4);
  min-width: 0;
  align-content: start;
}

@media (min-width: 62em) {
  .rv__side {
    position: sticky;
    top: calc(var(--head-h) + 1.25rem);
  }
}

.rv__panel {
  background: var(--surface-olive-charcoal);
  color: var(--text-on-dark);
  border: 1px solid var(--border-on-dark);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: var(--s4);
  min-width: 0;
}

.rv__panel--empty { background: var(--surface-olive-charcoal); color: var(--text-on-dark); }
.rv__panel--refused { background: var(--surface-raised); color: var(--text-primary); border-color: color-mix(in srgb, var(--crest) 45%, var(--border-subtle)); }

.rv__status {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sand);
}

.rv__panel--empty .rv__status { color: var(--accent-champagne); }
.rv__panel--refused .rv__status { color: var(--copper-deep); }

.rv__result-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem);
  line-height: 1.15;
  color: inherit;
}

.rv__result-copy {
  margin: 0;
  color: var(--on-deep-soft);
  line-height: 1.6;
}

.rv__panel--empty .rv__result-copy { color: var(--text-on-dark-soft); }
.rv__panel--refused .rv__result-copy { color: var(--fg-soft); }

.rv__range {
  margin: var(--s2) 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.35rem + 2.1vw, 3rem);
  line-height: 1.05;
  color: var(--on-deep);
  font-variant-numeric: tabular-nums;
}

.rv__range-unit {
  display: block;
  font-family: var(--font-text);
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sand);
  margin-top: var(--s2);
}

.rv__annual {
  margin: var(--s4) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-on-deep);
  font-size: 1.0625rem;
  color: var(--on-deep);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.rv__band {
  margin: var(--s2) 0 0;
  font-size: var(--t-small);
  color: var(--on-deep-soft);
  line-height: 1.5;
}

.rv__sub {
  margin: var(--s4) 0 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 700;
}

.rv__facts {
  margin: 0;
  display: grid;
  gap: var(--s3);
  border-top: 1px solid var(--rule-on-deep);
  padding-top: var(--s3);
}

.rv__fact {
  display: grid;
  grid-template-columns: minmax(7.5rem, 40%) minmax(0, 1fr);
  gap: var(--s3);
  min-width: 0;
}

.rv__fact dt {
  font-size: var(--t-small);
  color: var(--sand);
  font-weight: 700;
}

.rv__fact dd {
  margin: 0;
  font-size: var(--t-small);
  color: var(--on-deep);
  line-height: 1.5;
  word-break: break-word;
}

.rv__more { border-top: 1px solid var(--rule-on-deep); margin-top: var(--s2); }

.rv__more-summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--sand);
  transition: color var(--rv-move) var(--rv-ease);
}

.rv__more-summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .rv__more-summary:hover { color: var(--on-deep); }
}

.rv__influences {
  margin: 0 0 var(--s4);
  padding-left: 1.1em;
  color: var(--on-deep-soft);
  font-size: var(--t-small);
  line-height: 1.6;
}

.rv__influences li { margin-bottom: var(--s2); }

.rv__explain {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--on-deep-soft);
  border-left: 2px solid var(--sand);
  padding-left: var(--s4);
}

/* One restrained endorsement in the completed result, and nowhere else. */
.rv__endorse { margin: var(--s2) 0 0; }

.rv__logo {
  display: block;
  width: 7.5rem;
  height: auto;
  aspect-ratio: 625 / 441;
  /* The mark is navy on a transparent field; on the bottle panel it needs its
     own light plate rather than a recolour. The artwork itself is untouched.
     Warm parchment, not bare bone-raised — the same "no white boxes" ladder
     mix Aarav asked for on the stamp-duty page (10 Aug 2026), applied here. */
  background: color-mix(in srgb, var(--bone-sunk) 80%, var(--bone-raised));
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule-on-deep);
}

.rv__actions {
  margin: var(--s3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.rv__action {
  font: inherit;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.4;
  padding: 0.75rem 1.25rem;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  background-color: var(--sand);
  color: var(--bottle-deep);
  border: 1px solid var(--sand);
  border-radius: var(--radius-control);
  transition: background-color var(--rv-move) var(--rv-ease),
    border-color var(--rv-move) var(--rv-ease), color var(--rv-move) var(--rv-ease);
}

@media (hover: hover) and (pointer: fine) {
  .rv__action:hover {
    background-color: var(--on-deep);
    border-color: var(--on-deep);
    color: var(--bottle-deep);
  }
}
.rv__action:focus-visible {
  background-color: var(--on-deep);
  border-color: var(--on-deep);
  color: var(--bottle-deep);
  transition: none;
}

.rv__action--quiet {
  background-color: transparent;
  color: var(--on-deep);
  border-color: var(--on-deep-soft);
}

@media (hover: hover) and (pointer: fine) {
  .rv__action--quiet:hover {
    background-color: transparent;
    border-color: var(--sand);
    color: var(--sand);
  }
}
.rv__action--quiet:focus-visible {
  background-color: transparent;
  border-color: var(--sand);
  color: var(--sand);
  transition: none;
}

.rv__panel--empty .rv__action--quiet,
.rv__panel--refused .rv__action--quiet {
  color: var(--ink);
  border-color: var(--rule-strong);
}

@media (hover: hover) and (pointer: fine) {
  .rv__panel--refused .rv__action--quiet:hover {
    border-color: var(--copper);
    color: var(--copper-deep);
  }
}
.rv__panel--refused .rv__action--quiet:focus-visible {
  border-color: var(--copper);
  color: var(--copper-deep);
  transition: none;
}

.rv__panel--refused .rv__action {
  background-color: var(--bottle);
  border-color: var(--bottle);
  color: var(--on-deep);
}

@media (hover: hover) and (pointer: fine) {
  .rv__panel--refused .rv__action:hover {
    background-color: var(--bottle-deep);
    border-color: var(--bottle-deep);
    color: var(--sand);
  }
}
.rv__panel--refused .rv__action:focus-visible {
  background-color: var(--bottle-deep);
  border-color: var(--bottle-deep);
  color: var(--sand);
  transition: none;
}

/* ------------------------------- Supporting ------------------------------ */

.rv__support {
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: grid;
  gap: var(--s4);
  min-width: 0;
}

.rv__support-title {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
}

.rv__support-copy {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-soft);
}

.rv__support-links {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
}

.rv__support-links li { border-top: 1px solid var(--border-subtle); }

/* These are standalone list items rather than links inside a sentence, so each
   one carries a full 44px target instead of relying on the inline exception. */
.rv__support-links .rv__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 44px;
  padding: 0.7rem 0;
  text-decoration: none;
}

.rv__support-links .rv__link::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.rv__support .reviewed { margin: 0; }

.rv__link {
  color: var(--copper-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  padding: 2px 0;
  transition: color var(--rv-move) var(--rv-ease),
    background-color var(--rv-move) var(--rv-ease);
}

@media (hover: hover) and (pointer: fine) {
  .rv__link:hover {
    color: var(--bottle);
    background-color: color-mix(in srgb, var(--copper) 10%, transparent);
  }
}

/* Browser-native details are part of the calculator's visual system too. */
.rv ::selection,
.rv-open ::selection {
  color: var(--surface-dark-deep);
  background: var(--accent-champagne);
}

.rv input,
.rv textarea { caret-color: var(--accent-bottle-green); }

@media (max-width: 36em) {
  .rv-open__inner { padding-block: 2.75rem; }
  .rv-open__signals { gap: var(--s2) var(--s4); }
  .rv-open__steps li {
    grid-template-columns: 1.8rem minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--s2);
  }
  .rv__group { padding-inline: var(--s4); }
  .rv__group-head { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .rv__step { width: 2.25rem; height: 2.25rem; }
  .rv__choice { flex: 1 1 8rem; }
  .rv__choices--tight .rv__choice { min-width: 4.75rem; }
  .rv__submit { width: 100%; justify-content: center; }
}

/* ---------------------------- Motion neutralisers ------------------------ */

.rv a,
.rv button,
.rv summary,
.rv-open a { transform: none !important; }

.rv .btn::before,
.rv .btn::after,
.rv .link::after {
  content: none !important;
  transform: none !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .rv__control,
  .rv__choice,
  .rv__submit,
  .rv__action,
  .rv__link,
  .rv__more-summary { transition: none; }
}

/* ------------------- Optional enquiry inside the result ------------------ */
/* Collapsed by default. Same tokens, same colour-only motion policy as the
   rest of the calculator. */

.rv__enquiry {
  margin-top: var(--s4);
  border-top: 1px solid var(--rule-on-deep);
}

.rv__enquiry-summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--sand);
  transition: color var(--rv-move) var(--rv-ease);
}

.rv__enquiry-summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .rv__enquiry-summary:hover { color: var(--on-deep); }
}

.rv__enquiry-sign {
  flex: none;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
  border: 1px solid currentColor;
}

.rv__enquiry-sign::before,
.rv__enquiry-sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  inset: 50% 3px auto 3px;
  height: 1px;
}

.rv__enquiry-sign::after { inset: 3px 50% 3px auto; width: 1px; height: auto; }
.rv__enquiry[open] .rv__enquiry-sign::after { content: none; }

.rv__enquiry-body {
  display: grid;
  gap: var(--s4);
  padding: var(--s4) 0 var(--s2);
}

.rv__enquiry-optional {
  margin: 0;
  font-size: var(--t-small);
  color: var(--on-deep-soft);
}

.rv__eq-field {
  display: grid;
  gap: var(--s2);
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.rv__enquiry-body .rv__label,
.rv__enquiry-body legend.rv__label { color: var(--on-deep); }

.rv__enquiry-body .rv__control {
  background: var(--bone-raised);
  border-color: var(--rule-on-deep);
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .rv__enquiry-body .rv__control:hover { border-color: var(--sand); }
}
.rv__enquiry-body .rv__control:focus-visible { border-color: var(--sand); transition: none; }

.rv__control--area {
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.5;
}

.rv__enquiry-body .rv__choice {
  background: transparent;
  border-color: var(--rule-on-deep);
  color: var(--on-deep);
}

@media (hover: hover) and (pointer: fine) {
  .rv__enquiry-body .rv__choice:hover { border-color: var(--sand); background: transparent; }
}

.rv__enquiry-body .rv__choice:has(input:checked) {
  background: var(--sand);
  border-color: var(--sand);
  color: var(--bottle-deep);
}

.rv__enquiry-body .rv__error { color: var(--sand); }
.rv__enquiry-body .rv__optional { color: var(--on-deep-soft); }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   anything that is not rendered at all. It is aria-hidden and unreachable by
   keyboard, so nobody using the page can meet it. */
.rv__pot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rv__turnstile:empty { display: none; }

.rv__eq-explain {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--on-deep-soft);
  border-left: 2px solid var(--sand);
  padding-left: var(--s4);
}

.rv__eq-privacy {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--on-deep-soft);
}

.rv__eq-privacy .rv__link { color: var(--sand); }
.rv__eq-privacy .rv__link:hover { color: var(--on-deep); background-color: transparent; }

.rv__eq-actions { margin: 0; }

.rv__eq-state:empty { display: none; }

.rv__eq-state {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--sand);
  font-weight: 700;
}

.rv__eq-sent {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--on-deep);
  border-left: 2px solid var(--sand);
  padding-left: var(--s4);
}

.rv__action[aria-busy="true"] { opacity: 1; }
.rv__action:disabled { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .rv__enquiry-summary { transition: none; }
}

/* ---- Premium concept adoption, 10 Aug 2026 late pass ---------------------- *
 * Adapted from Aarav's approved concept boards: progress rail with live
 * done/current states, skyline line-art in the empty panel, tighter location
 * group, submit arrow (the one Aarav-approved translate), result-panel
 * settle, and the field-boundary contrast fix (was 1.78:1 vs the 3.0 floor).
 * Everything stays page-scoped under .rv.                                    */

/* The workspace band goes full-bleed parchment, the way every approved
   concept board grounds it — no content floating on the bare page. Padding
   uses 100% (the element's own width), not 100vw, so the scrollbar can
   never cause a horizontal overflow. */
.rv {
  max-width: none;
  /* Depth, not a flat fill: lighter at the top where the hero hands over,
     settling deeper toward the claims band, so the plates sit ON a ground
     instead of floating over one. */
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bone-sunk) 30%, var(--bone)) 0%,
      color-mix(in srgb, var(--bone-sunk) 46%, var(--bone)) 55%,
      color-mix(in srgb, var(--bone-sunk) 56%, var(--bone)) 100%
    );
  border-bottom: 1px solid var(--rule);
  padding-inline: max(var(--inset), calc((100% - var(--max)) / 2 + var(--inset)));
}

/* Every plate takes a seat line: the bottom edge reads a step darker than the
   other three, which is what visually plants a card on the ground. */
.rv__group,
.rv__completion,
.rv__support { border-bottom-color: rgba(28, 33, 31, 0.3); }

/* The workspace grows a left rail on wide screens; below that the rail
   becomes a horizontal chip row above the form. */
@media (min-width: 75em) {
  .rv { grid-template-columns: 12rem minmax(0, 1.15fr) minmax(21rem, 0.8fr); }
  .rv__progress {
    position: sticky;
    top: calc(var(--head-h) + 1.25rem);
    align-self: start;
  }
}

@media (min-width: 62em) and (max-width: 74.99em) {
  .rv__progress { grid-column: 1 / -1; }
}

.rv__progress-title {
  margin: 0 0 var(--s4);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-deep);
}

.rv__progress-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: var(--s4);
}

/* The connector line walks the eye down the rail on wide screens only. */
@media (min-width: 75em) {
  .rv__progress-list::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: var(--border-brass);
  }
}

@media (max-width: 74.99em) {
  .rv__progress-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
  }
}

.rv__progress-step {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  min-height: 44px;
  text-decoration: none;
  color: var(--text-secondary);
}

.rv__progress-mark {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-brass);
  color: var(--accent-brass-deep);
  font-size: var(--t-label);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  transition: background-color var(--rv-move) var(--rv-ease),
    border-color var(--rv-move) var(--rv-ease), color var(--rv-move) var(--rv-ease);
}

.rv__progress-info { display: grid; gap: 2px; min-width: 0; }

.rv__progress-info strong {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-primary);
  transition: color var(--rv-move) var(--rv-ease);
}

.rv__progress-info small {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--fg-soft);
}

@media (max-width: 74.99em) {
  .rv__progress-info small { display: none; }
  .rv__progress-step { align-items: center; }
}

@media (hover: hover) and (pointer: fine) {
  .rv__progress-step:hover .rv__progress-mark { border-color: var(--accent-brass-deep); background: var(--bone); }
  .rv__progress-step:hover .rv__progress-info strong { color: var(--accent-brass-deep); }
}

.rv__progress-step:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  transition: none;
}

/* Current chapter: the mark goes dark, the way the concept boards show it. */
.rv__progress-step.is-current .rv__progress-mark {
  background: var(--surface-olive-charcoal);
  border-color: var(--surface-olive-charcoal);
  color: var(--accent-champagne);
}

/* Completed chapter: bottle-green mark with a drawn tick. */
.rv__progress-step.is-done .rv__progress-mark {
  background: var(--accent-bottle-green);
  border-color: var(--accent-bottle-green);
}

.rv__progress-step.is-done .rv__progress-mark > span { visibility: hidden; }

.rv__progress-step.is-done .rv__progress-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--text-on-dark);
  border-bottom: 2px solid var(--text-on-dark);
  transform: translate(-50%, -62%) rotate(-45deg);
}

/* Location chapter: address and postcode share a row on wide screens. */
@media (min-width: 48em) {
  .rv__group--location {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 14rem);
    align-items: start;
  }
  .rv__group--location .rv__group-head,
  .rv__group--location .rv__confirm,
  .rv__group--location .rv__hint { grid-column: 1 / -1; }
  .rv__group--location .rv__field--short { max-width: none; }
}

/* Quiet requirement annotations, right-aligned on the label row. */
.rv__field { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
.rv__field > .rv__control,
.rv__field > .rv__error,
.rv__field > .rv__check { grid-column: 1 / -1; }

.rv__req {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-soft);
}

/* Bedroom and floor chips take the display serif, per the concept tiles. */
.rv__choices--tight .rv__choice-label {
  font-family: var(--font-display);
  font-size: 1.0625rem;
}

/* Submit arrow: the one approved translate, gated, colour-only elsewhere. */
.rv__submit-arrow {
  display: inline-block;
  margin-left: 0.5rem;
  transition: transform var(--rv-move) var(--rv-ease);
}

@media (hover: hover) and (pointer: fine) {
  .rv__submit:hover .rv__submit-arrow { transform: translateX(3px); }
}

/* The panel carries its own scene: a champagne glow from the top corner and
   a faint rooftop watermark along the foot. Both are paint, not requests —
   the data URI keeps the calculator at zero network calls — and both survive
   the innerHTML swap because they live on the panel class, not its content. */
.rv__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 10%, rgba(197, 166, 106, 0.1), transparent 20rem),
    var(--surface-olive-charcoal);
}

.rv__panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: -6%;
  height: 46%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 64' fill='none' stroke='%23c5a66a' stroke-width='1'%3E%3Cpath d='M8 60 v-22 l16 -12 16 12 v22'/%3E%3Cpath d='M52 60 v-30 l20 -14 20 14 v30'/%3E%3Cpath d='M104 60 v-24 h26 v24'/%3E%3Cpath d='M142 60 v-34 l18 -12 18 12 v34'/%3E%3Cpath d='M190 60 v-26 h30 v26'/%3E%3Cpath d='M232 60 v-30 l17 -12 17 12 v30'/%3E%3Cpath d='M278 60 v-20 h28 v20'/%3E%3Cpath d='M0 60 h320'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 130% auto;
  opacity: 0.08;
  pointer-events: none;
}

/* The refused panel is a light surface; the dark scene does not apply. */
.rv__panel--refused {
  background: var(--surface-raised);
}

.rv__panel--refused::before { content: none; }

/* Skyline line-art seats the empty panel; decorative, never load-bearing. */
.rv__skyline {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--s4);
  color: var(--accent-champagne);
  opacity: 0.55;
}

.rv__panel-note {
  margin: 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-on-deep);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-on-dark-soft);
}

/* The result panel settles in rather than popping: one run, both on load and
   on every innerHTML swap (a fresh node restarts the animation). */
@keyframes rv-panel-in {
  from { opacity: 0; transform: translateY(6px); }
}

[data-enhanced] [data-rv-result] .rv__panel {
  animation: rv-panel-in 260ms var(--ease-arrive);
}

[data-motion="static"] [data-rv-result] .rv__panel { animation: none !important; }

/* Field boundaries measured 1.78:1 against the raised plate (floor 3.0 for
   non-text UI). A deeper ink border carries the boundary on both fills. */
.rv__form .rv__control,
.rv__form .rv__choice { border-color: rgba(28, 33, 31, 0.52); }

.rv__form .rv__control[aria-invalid="true"] { border-color: var(--crest); }

/* The checkbox accent matches the submit green, not the near-black bottle. */
.rv__check input { accent-color: var(--accent-bottle-green); }

@media (prefers-reduced-motion: reduce) {
  .rv__progress-mark,
  .rv__progress-info strong,
  .rv__submit-arrow { transition: none; }
  .rv__submit:hover .rv__submit-arrow { transform: none; }
}

/* ======================= The landlord visual system ====================== *
 * Layered on the shared .gx guide system so the landlord pages read as part
 * of the same information system. Every selector begins with .ll.
 *
 * Tokens only: bottle green, bone surfaces, restrained copper and sand.
 * Motion: colour and border only, 170ms. No lift, zoom, reflow or slide.
 * ========================================================================== */

.ll {
  --ll-move: 170ms;
  --ll-ease: var(--ease-in-out);
}

/* ------------------------------ Service cards ---------------------------- */

.ll__cards {
  display: grid;
  gap: var(--s5);
  min-width: 0;
}

@media (min-width: 56em) {
  .ll__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ll__cards--three { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
}

.ll__card {
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--copper);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  gap: var(--s3);
  align-content: start;
  min-width: 0;
}

/* Guaranteed Rent is a different kind of thing, and its card says so before a
   word is read. */
.ll__card--separate { border-top-color: var(--bottle); }

.ll__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-group);
  line-height: 1.15;
  color: var(--bottle);
}

.ll__card-focus {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
}

.ll__card-copy {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
  max-width: var(--measure);
}

.ll__card-keeps,
.ll__card-confirm {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: var(--measure);
}

.ll__card-confirm {
  border-top: 1px solid var(--rule);
  padding-top: var(--s3);
}

.ll__card-action { margin: 0; }

/* ------------------------------ The journey ------------------------------ */

.ll__journey {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s4);
  min-width: 0;
}

.ll__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--copper);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  min-width: 0;
}

.ll__step-mark,
.ll__step-number {
  flex: none;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: var(--bottle);
  border: 1px solid var(--bottle);
  color: var(--sand);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}

.ll__step-body {
  min-width: 0;
  display: grid;
  gap: var(--s2);
}

.ll__step-index {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
}

.ll__step-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--bottle);
}

.ll__step-copy {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
  max-width: var(--measure);
}

.ll__step-confirm {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: var(--measure);
}

/* --------------------------- Responsibility ledger ----------------------- */

.ll__ledger {
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  min-width: 0;
}

.ll__duty {
  display: grid;
  gap: var(--s2);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}

@media (min-width: 56em) {
  .ll__duty {
    grid-template-columns: minmax(11rem, 24%) minmax(0, 1fr);
    gap: var(--s5);
    align-items: baseline;
  }
}

.ll__duty-term {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
  color: var(--bottle);
  line-height: 1.3;
}

.ll__duty-detail {
  margin: 0;
  color: var(--fg-soft);
  line-height: 1.6;
  max-width: var(--measure);
}

/* ------------------------------ Decision rows ---------------------------- */

.ll__question {
  margin: 0 0 var(--s4);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--bottle);
  border-left: 3px solid var(--copper);
  padding-left: var(--s4);
  max-width: var(--measure);
}

.ll__rows {
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  min-width: 0;
}

.ll__row {
  display: grid;
  gap: var(--s2);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}

@media (min-width: 56em) {
  .ll__row {
    grid-template-columns: minmax(12rem, 28%) minmax(0, 1fr);
    gap: var(--s5);
    align-items: baseline;
  }
}

.ll__row-term {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
  color: var(--bottle);
  line-height: 1.3;
}

.ll__row-detail {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
  max-width: var(--measure);
}

.ll__row-confirm {
  display: block;
  margin-top: var(--s2);
  font-size: var(--t-small);
  color: var(--fg-soft);
  line-height: 1.55;
}

.ll__asks {
  margin: 0;
  padding-left: 1.1em;
  color: var(--fg-soft);
  line-height: 1.6;
  max-width: var(--measure);
}

.ll__asks li { margin-bottom: var(--s2); }

/* --------------------------- Benefits and considerations ----------------- */

.ll__balance {
  display: grid;
  gap: var(--s5);
  min-width: 0;
}

@media (min-width: 56em) {
  .ll__balance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ll__side {
  border: 1px solid var(--rule);
  background: var(--bone-raised);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  min-width: 0;
}

.ll__side--for { border-top: 3px solid var(--bottle); }
.ll__side--against { border-top: 3px solid var(--copper); }

.ll__side-title {
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: var(--t-group);
  line-height: 1.2;
  color: var(--bottle);
}

.ll__side-list {
  margin: 0;
  padding-left: 1.1em;
  color: var(--ink);
  line-height: 1.6;
}

.ll__side-list li { margin-bottom: var(--s3); }
.ll__side--against .ll__side-list { color: var(--fg-soft); }

/* ------------------------------- Protection ------------------------------ */

.ll__protect {
  display: grid;
  gap: var(--s4);
  min-width: 0;
  border-top: 2px solid var(--bottle);
  padding-top: var(--s5);
}

.ll__protect-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
  color: var(--bottle);
}

.ll__schemes {
  display: grid;
  gap: var(--s5);
  min-width: 0;
}

@media (min-width: 56em) {
  .ll__schemes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ll__scheme {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--bottle);
  background: var(--bone-raised);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  display: grid;
  gap: var(--s2);
  align-content: start;
  min-width: 0;
}

.ll__scheme-kicker {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
}

.ll__scheme-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-group);
  line-height: 1.2;
  color: var(--bottle);
}

.ll__scheme-fact {
  margin: 0;
  font-size: var(--t-small);
  color: var(--fg-soft);
  line-height: 1.5;
  word-break: break-word;
}

.ll__scheme-action { margin: var(--s2) 0 0; }

/* ---------------------------------- Fees --------------------------------- */
/* Rendered only when a complete schedule exists. Until then the page renders
   nothing here at all: no figure, no placeholder, no notice. */

.ll__fees {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--bottle);
  background: var(--bone-raised);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  min-width: 0;
}

.ll__fees-title {
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: var(--t-group);
  color: var(--bottle);
}

.ll__fee-list { margin: 0; display: grid; gap: var(--s3); }
.ll__fee dt { font-weight: 700; color: var(--bottle); }
.ll__fee dd { margin: 0; color: var(--fg-soft); line-height: 1.6; }

/* --------------------------- Motion neutralisers ------------------------- */

.ll a,
.ll button,
.ll summary { transform: none !important; }

.ll .btn::before,
.ll .btn::after,
.ll .link::after {
  content: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.ll .steps__link {
  transition: border-color var(--ll-move) var(--ll-ease),
    background-color var(--ll-move) var(--ll-ease), color var(--ll-move) var(--ll-ease);
}

.ll .steps__arrow { transition: none; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ll a,
  .ll summary { transition: none; }
}

/* ==================== EPC GUIDANCE — LUXE V3. 11 August 2026 ============== *
 * A luxury rebuild of /epc/ only. Every selector is .lx-* or .page--epc and
 * nothing here reaches the header, the footer, the assistant widget or any
 * shared component — those are untouched by this file by construction.
 *
 * The brief named React, Tailwind, Framer Motion and five 21st.dev
 * components. This project has none of that machinery, so each component is
 * built natively and behaves the same way:
 *
 *   Border Beam Panel  -> .lx-beam, a conic-gradient ring on a masked
 *                         ::before driven by a registered @property angle
 *   Accordion          -> .lx-acc, native <details> plus grid-rows 0fr->1fr
 *   Timeline Stepper   -> .lx-steps, an <ol> with a drawn connector rail
 *   Bento Grid         -> .lx-bento, CSS grid with one spanning feature
 *   Log rows + badges  -> .lx-logs / .lx-tag
 *   Scroll fade-ups    -> the site's existing reveal system
 *
 * Motion respects prefers-reduced-motion and [data-motion="static"], and every
 * state is reachable with no JavaScript at all.
 * ========================================================================== */

/* The rotating conic angle. Registered so it interpolates: a bare custom
   property is a string to the animation engine and would snap rather than
   sweep. @supports-guarded because Firefox only shipped @property in 128. */
@property --lx-beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes lx-beam-spin {
  to { --lx-beam-angle: 360deg; }
}

.page--epc {
  /* The brief's palette, scoped to this page so it cannot leak into the
     shared shell. Named --lx-* rather than overriding the site tokens for
     exactly that reason. */
  --lx-cream: #f9f8f3;
  --lx-obsidian: #121212;
  --lx-obsidian-soft: #1a1a1a;
  --lx-obsidian-lift: #222222;
  --lx-gold: #c5a059;
  --lx-gold-bright: #e0c185;
  /* #c5a059 on #121212 is 7.4:1, but on cream it is only 2.3:1 — far under
     AA. This is the gold for text on light grounds; the brand gold stays for
     rules, marks and anything on charcoal. */
  --lx-gold-ink: #6f5320;
  --lx-ink: #2b2b2b;
  --lx-ink-soft: #55534d;
  --lx-on-dark: #f4f2ec;
  --lx-on-dark-soft: rgba(244, 242, 236, 0.72);
  --lx-hair: rgba(18, 18, 18, 0.12);
  --lx-hair-dark: rgba(244, 242, 236, 0.14);

  --lx-max: 78rem;
  --lx-move: 220ms;
  --lx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The hero is a full-bleed band and must meet the header with no gap. */
.page--epc .main { padding-top: 0; }

/* ------------------------------ Shared bones ----------------------------- */

.lx-icon { width: 100%; height: 100%; display: block; }

.lx-sec { padding-block: clamp(3.5rem, 7vw, 6.5rem); }

.lx-sec__inner,
.lx-close__inner,
.lx-sources__inner,
.lx-switch {
  max-width: var(--lx-max);
  margin-inline: auto;
  padding-inline: var(--inset);
  min-width: 0;
}

.lx-head { display: grid; gap: var(--s3); margin-bottom: clamp(2rem, 4vw, 3.25rem); min-width: 0; }

.lx-head__index {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--lx-gold-ink);
}

.lx-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--lx-ink);
}

.lx-head__summary {
  margin: 0;
  color: var(--lx-ink-soft);
  line-height: 1.65;
  font-size: 1.0625rem;
  max-width: 58ch;
}

/* Section grounds. No two neighbours share one. */
.lx-sec--routes { background: var(--lx-cream); }
.lx-sec--certificate { background: var(--lx-obsidian); }
.lx-sec--limits { background: var(--lx-cream); }
.lx-sec--standard { background: #efece2; }

.lx-sec--certificate .lx-head__index { color: var(--lx-gold); }
.lx-sec--certificate .lx-head__title { color: var(--lx-on-dark); }
.lx-sec--certificate .lx-head__summary { color: var(--lx-on-dark-soft); }

/* Status pills, one component for every badge on the page. */
.lx-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: 6px;
}

/* Keyword chips under a bento card's copy — the reference's hashtag row.
   Lifted from the card's own sentence, so a chip can never out-claim it. */
.lx-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }

.lx-chip {
  display: inline-flex;
  padding: 0.25rem 0.55rem;
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--lx-ink-soft);
  background: rgba(18, 18, 18, 0.05);
  border: 1px solid var(--lx-hair);
  border-radius: 6px;
  white-space: nowrap;
}

.lx-cell--feature .lx-chip {
  color: var(--lx-on-dark-soft);
  background: rgba(244, 242, 236, 0.06);
  border-color: var(--lx-hair-dark);
}

.lx-tag--gold { color: var(--lx-gold); }
.lx-tag--quiet { color: var(--lx-gold-ink); background: rgba(197, 160, 89, 0.1); }
.lx-tag--required { color: #7a3b16; background: rgba(122, 59, 22, 0.08); }
.lx-tag--scope { color: #3f5145; background: rgba(63, 81, 69, 0.08); }
.lx-tag--conditional { color: var(--lx-gold-ink); background: rgba(197, 160, 89, 0.12); }
.lx-tag--enforced { color: #6b2f2f; background: rgba(107, 47, 47, 0.08); }
.lx-tag--neutral { color: var(--lx-ink-soft); background: rgba(18, 18, 18, 0.05); }

/* ================================== HERO ================================== */

.lx-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(28rem, 52vw, 40rem);
  overflow: hidden;
  background: var(--lx-obsidian);
}

.lx-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.lx-hero__poster {
  position: absolute;
  inset: 0;
  display: block;
}

.lx-hero__film,
.lx-hero__still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lx-hero__film {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 360ms ease;
}

.lx-hero__film.is-playing { opacity: 1; }

/* Two axes. The horizontal one protects the copy column; the vertical one
   seats the band against the header above and the switcher below. */
.lx-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.88) 38%, rgba(10, 10, 10, 0.5) 66%, rgba(10, 10, 10, 0.3) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.45) 0%, rgba(10, 10, 10, 0) 40%, rgba(10, 10, 10, 0.55) 100%);
}

@media (max-width: 61.99em) {
  .lx-hero__veil {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.9) 55%, rgba(10, 10, 10, 0.95) 100%);
  }
}

.lx-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--lx-max);
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 4rem) var(--inset);
  display: grid;
  gap: var(--s4);
  align-content: center;
  min-width: 0;
}

@media (min-width: 62em) {
  .lx-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 27rem);
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: var(--s4);
    grid-template-areas:
      "crumb dock"
      "title dock"
      "rule  dock"
      "lede  dock"
      "scope dock";
  }
  .lx-hero .crumbs { grid-area: crumb; }
  .lx-hero__title { grid-area: title; }
  .lx-hero__rule { grid-area: rule; }
  .lx-hero__lede { grid-area: lede; }
  .lx-hero__scope { grid-area: scope; }
  .lx-dock { grid-area: dock; align-self: center; }
}

/* The shared breadcrumb is a light-ground component; on the hero it is the
   same component reading on dark. Colour only, no geometry. */
.lx-hero .crumbs { max-width: none; margin: 0; padding: 0; }
.lx-hero .crumbs__link {
  color: var(--lx-on-dark-soft);
  border-bottom-color: rgba(244, 242, 236, 0.3);
  transition: color var(--lx-move) var(--lx-ease), border-color var(--lx-move) var(--lx-ease);
}
.lx-hero .crumbs__current { color: var(--lx-on-dark); }
.lx-hero .crumbs__item + .crumbs__item::before { color: rgba(244, 242, 236, 0.5); }

@media (hover: hover) and (pointer: fine) {
  .lx-hero .crumbs__link:hover { color: var(--lx-gold-bright); border-bottom-color: var(--lx-gold); }
}

.lx-hero .crumbs__link:focus-visible { outline: 3px solid var(--lx-gold); outline-offset: 3px; transition: none; }

.lx-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.3rem + 4.2vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--lx-on-dark);
}

/* The second line drops and goes gold: the display face carries the luxury,
   the colour break carries the rhythm. */
.lx-hero__title span { display: block; color: var(--lx-gold); }

.lx-hero__rule { display: block; width: 4rem; height: 2px; background: var(--lx-gold); }

.lx-hero__lede {
  margin: 0;
  color: var(--lx-on-dark);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.55;
  max-width: 36ch;
}

.lx-hero__scope {
  margin: 0;
  color: var(--lx-on-dark-soft);
  font-size: var(--t-small);
  line-height: 1.65;
  max-width: 48ch;
}

/* ----------------------------- The GOV.UK dock --------------------------- */

.lx-dock {
  min-width: 0;
  background: rgba(10, 10, 10, 0.66);
  border: 1px solid var(--lx-hair-dark);
  border-top: 2px solid var(--lx-gold);
  border-radius: 12px;
  padding: clamp(1.125rem, 2.2vw, 1.5rem);
}

@supports (backdrop-filter: blur(3px)) {
  /* Not a glass card: 3px only, so the film behind cannot compete with eight
     lines of text. Colour already carries the contrast. */
  .lx-dock { backdrop-filter: blur(3px); }
}

.lx-dock__title {
  margin: 0 0 var(--s4);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lx-gold);
}

.lx-dock__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }

.lx-dock__action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s3);
  min-height: 48px;
  padding: 0.875rem 1rem;
  background-color: rgba(244, 242, 236, 0.05);
  border: 1px solid var(--lx-hair-dark);
  border-radius: 8px;
  color: var(--lx-on-dark);
  text-decoration: none;
  transition: background-color var(--lx-move) var(--lx-ease), border-color var(--lx-move) var(--lx-ease);
}

.lx-dock__mark { width: 1.375rem; height: 1.375rem; color: var(--lx-gold); margin-top: 2px; }
.lx-dock__text { min-width: 0; display: grid; gap: 3px; }

.lx-dock__label {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}

.lx-dock__blurb { font-size: var(--t-small); line-height: 1.5; color: var(--lx-on-dark-soft); }

.lx-dock__ext {
  width: 1.0625rem;
  height: 1.0625rem;
  color: var(--lx-gold);
  margin-top: 3px;
  transition: transform var(--lx-move) var(--lx-ease);
}

@media (hover: hover) and (pointer: fine) {
  .lx-dock__action:hover { background-color: rgba(244, 242, 236, 0.1); border-color: var(--lx-gold); }
  .lx-dock__action:hover .lx-dock__ext { transform: translate(3px, -3px); }
}

.lx-dock__action:active { background-color: rgba(244, 242, 236, 0.14); }

.lx-dock__action:focus-visible {
  border-color: var(--lx-gold);
  outline: 3px solid var(--lx-gold);
  outline-offset: 2px;
  transition: none;
}

/* ============================ SECTION SWITCHER ============================ */

.lx-switch {
  position: sticky;
  top: var(--head-h);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  padding-block: 0.625rem;
  background: var(--lx-cream);
}

/* The strip is contained but its hairline reads edge to edge. The negative
   top inset closes the 5px slot left by the header compressing on scroll
   (--head-h is 84px; the scrolled header is 79px) — the header is z-1000 so
   the overlap never shows. */
.lx-switch::before {
  content: "";
  position: absolute;
  inset: -12px calc(50% - 50vw) 0;
  background: var(--lx-cream);
  border-bottom: 1px solid var(--lx-hair);
  z-index: -1;
}

.lx-switch__title {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lx-ink-soft);
  flex: none;
}

.lx-switch__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.lx-switch__list::-webkit-scrollbar { display: none; }
.lx-switch__item { min-width: 0; flex: none; }
.lx-switch__item + .lx-switch__item { border-left: 1px solid var(--lx-hair); }

.lx-switch__link {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  color: var(--lx-ink-soft);
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.3;
  white-space: nowrap;
  border-top: 2px solid transparent;
  transition: background-color var(--lx-move) var(--lx-ease), color var(--lx-move) var(--lx-ease),
    border-color var(--lx-move) var(--lx-ease);
}

.lx-switch__index {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--lx-gold-ink);
  transition: color var(--lx-move) var(--lx-ease);
}

@media (hover: hover) and (pointer: fine) {
  .lx-switch__link:hover { background-color: rgba(18, 18, 18, 0.05); color: var(--lx-ink); }
}

.lx-switch__link:focus-visible { outline: 3px solid var(--lx-gold-ink); outline-offset: -3px; transition: none; }

.lx-switch__link[aria-current="true"] {
  background-color: var(--lx-obsidian);
  border-top-color: var(--lx-gold);
  color: var(--lx-on-dark);
}

.lx-switch__link[aria-current="true"] .lx-switch__index { color: var(--lx-gold); }

/* Anchors must clear the header AND the sticky strip. */
.page--epc [data-epc-section] { scroll-margin-top: calc(var(--head-h) + 4.5rem); }

/* ========================= 01 — BORDER BEAM PANELS ======================== */

.lx-beams { display: grid; gap: var(--s5); min-width: 0; }

@media (min-width: 48em) {
  .lx-beams { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 48em) and (max-width: 61.99em) {
  /* Three 15rem columns squeeze the copy to five words a line. */
  .lx-beams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-beam:first-child { grid-column: 1 / -1; }
}

.lx-beam {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--lx-obsidian);
  border: 1px solid var(--lx-hair-dark);
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
  /* Scale, not lift: the brief asked for hover scaling and a scale keeps the
     card anchored to the grid instead of floating off it. */
  transform: scale(1);
  transition: transform var(--lx-move) var(--lx-ease), border-color var(--lx-move) var(--lx-ease),
    background-color var(--lx-move) var(--lx-ease);
}

/* The beam. A conic gradient painted on a 1px ring: the element is inset by
   -1px and masked so only its border band shows, which is what makes the
   light look like it is travelling along the edge rather than behind it. */
/* The reference beam is alive at rest — a light already travelling the edge —
   and intensifies under the pointer. One constant duration in both states:
   changing animation-duration mid-flight remaps the current progress and the
   light visibly jumps, so hover raises brightness and adds the glow instead
   of retiming the sweep. */
.lx-beam__ring {
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  opacity: 0.45;
  background: conic-gradient(
    from var(--lx-beam-angle),
    transparent 0deg,
    transparent 296deg,
    var(--lx-gold) 338deg,
    var(--lx-gold-bright) 352deg,
    var(--lx-gold) 360deg
  );
  animation: lx-beam-spin 6.5s linear infinite;
  transition: opacity 260ms var(--lx-ease);
  pointer-events: none;
  /* The mask that makes it a BORDER beam: two fills, content-box knocked out
     of border-box, leaving only a 2px edge band for the gradient to travel.
     Without this the conic paints across the whole card face as a wedge. */
  padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

@media (hover: hover) and (pointer: fine) {
  .lx-beam:hover {
    transform: scale(1.015);
    border-color: rgba(197, 160, 89, 0.4);
    background-color: var(--lx-obsidian-soft);
    box-shadow: 0 0 44px -16px rgba(197, 160, 89, 0.55);
  }
  .lx-beam:hover .lx-beam__ring { opacity: 1; }
  .lx-beam:hover .lx-beam__arrow { transform: translateX(4px); }
}

/* Keyboard gets the same emphasis. */
.lx-beam:focus-within {
  border-color: rgba(197, 160, 89, 0.4);
  background-color: var(--lx-obsidian-soft);
  box-shadow: 0 0 44px -16px rgba(197, 160, 89, 0.55);
}
.lx-beam:focus-within .lx-beam__ring { opacity: 1; }

.lx-beam__body {
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  display: grid;
  gap: var(--s3);
  align-content: start;
  min-width: 0;
}

.lx-beam__mark {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.4rem;
  color: var(--lx-gold);
  border: 1px solid rgba(197, 160, 89, 0.35);
}

.lx-beam__kicker {
  margin: 0;
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lx-gold);
}

.lx-beam__who {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.12;
  color: var(--lx-on-dark);
}

.lx-beam__lead { margin: 0; font-weight: 700; color: var(--lx-on-dark); line-height: 1.45; font-size: 0.9375rem; }
.lx-beam__detail { margin: 0; font-size: var(--t-small); line-height: 1.65; color: var(--lx-on-dark-soft); }

.lx-beam__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 56px;
  padding: 0.875rem clamp(1.25rem, 2.4vw, 1.75rem);
  border-top: 1px solid var(--lx-hair-dark);
  background-color: rgba(244, 242, 236, 0.04);
  color: var(--lx-gold);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color var(--lx-move) var(--lx-ease), color var(--lx-move) var(--lx-ease);
}

.lx-beam__arrow { width: 1.125rem; height: 1.125rem; flex: none; transition: transform var(--lx-move) var(--lx-ease); }

@media (hover: hover) and (pointer: fine) {
  .lx-beam__action:hover { background-color: rgba(197, 160, 89, 0.14); color: var(--lx-gold-bright); }
}

.lx-beam__action:active { background-color: rgba(197, 160, 89, 0.2); }

.lx-beam__action:focus-visible {
  background-color: rgba(197, 160, 89, 0.14);
  color: var(--lx-gold-bright);
  outline: 3px solid var(--lx-gold);
  outline-offset: -3px;
  transition: none;
}

/* ==================== 02 — ACCORDION + TIMELINE STEPPER =================== */

.lx-cert { display: grid; gap: clamp(2rem, 4vw, 3.25rem); min-width: 0; align-items: start; }

@media (min-width: 62em) {
  .lx-cert { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
}

.lx-scale { min-width: 0; display: grid; gap: var(--s4); }

.lx-scale__title,
.lx-steps__title {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lx-gold);
}

.lx-scale__note {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--lx-on-dark-soft);
  max-width: var(--measure);
}

/* ------------------------------ The accordion ---------------------------- */

.lx-acc { display: grid; gap: 8px; min-width: 0; }

.lx-acc__item {
  background: var(--lx-obsidian-soft);
  border: 1px solid var(--lx-hair-dark);
  border-left: 3px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  min-width: 0;
  transition: border-color var(--lx-move) var(--lx-ease), background-color var(--lx-move) var(--lx-ease);
}

.lx-acc__item--min { border-left-color: var(--lx-gold); }

.lx-acc__summary {
  display: grid;
  grid-template-columns: auto 4.5rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  list-style: none;
  color: var(--lx-on-dark);
}

.lx-acc__summary::-webkit-details-marker { display: none; }
.lx-acc__summary::marker { content: ""; }

/* The band badge. The letter is inside it AND repeated to screen readers, so
   the colour is never the carrier — it is the standard EPC band colour, kept
   because there it means something. */
.lx-acc__badge {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
  border-radius: 2px;
}

.lx-acc__badge--a { background: #cfe4d2; }
.lx-acc__badge--b { background: #d9e7cd; }
.lx-acc__badge--c { background: #e6ecc8; }
.lx-acc__badge--d { background: #f2eec6; }
.lx-acc__badge--e { background: #f4e3c4; }
.lx-acc__badge--f { background: #f2d6c2; }
.lx-acc__badge--g { background: #eec8c2; }

.lx-acc__range {
  font-size: var(--t-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--lx-on-dark);
}

.lx-acc__meaning { font-size: var(--t-small); color: var(--lx-on-dark-soft); min-width: 0; }

/* The reference accordion carries a mono item label at the right edge; ours
   says the honest thing — which band the row is. */
.lx-acc__id {
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 242, 236, 0.4);
  white-space: nowrap;
}

/* The chevron, which turns over when the row opens. */
.lx-acc__chev {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--lx-gold);
  transition: transform var(--lx-move) var(--lx-ease);
}

.lx-acc__item[open] .lx-acc__chev { transform: rotate(180deg); }

@media (hover: hover) and (pointer: fine) {
  .lx-acc__item:hover { background-color: var(--lx-obsidian-lift); border-color: rgba(197, 160, 89, 0.3); }
}

.lx-acc__summary:focus-visible { outline: 3px solid var(--lx-gold); outline-offset: -3px; }

/* The open animation. A closed <details> renders its content display:none,
   so a 0fr->1fr height transition never gets a starting frame to run from —
   instead the panel plays one short settle the moment it becomes rendered.
   The row's own height is native (the note is normal flow), which is what
   the auto-height requirement actually needs; closing snaps shut, which
   native details does anyway and which reads as decisive rather than broken. */
.lx-acc__panel { min-width: 0; }

@keyframes lx-acc-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

[data-enhanced] .lx-acc__item[open] .lx-acc__panel-in {
  animation: lx-acc-open 240ms var(--lx-ease) both;
}

.lx-acc__note {
  margin: 0;
  padding: 0 0.875rem 0.875rem 3.5rem;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--lx-on-dark-soft);
}

@media (max-width: 34em) {
  .lx-acc__summary { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 2px; padding: 0.625rem; }
  .lx-acc__range { grid-column: 2; }
  .lx-acc__meaning { grid-column: 2; }
  .lx-acc__item--min .lx-tag { grid-column: 2; justify-self: start; }
  .lx-acc__id { display: none; }
  .lx-acc__note { padding-left: 0.625rem; }
}

/* --------------------------- The timeline stepper ------------------------ */

.lx-steps { min-width: 0; display: grid; gap: var(--s4); }

.lx-steps__list { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }

.lx-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  padding: 0 0 var(--s5) 0;
  min-width: 0;
}

.lx-step:last-child { padding-bottom: 0; }

/* The connector rail, drawn between badges rather than under them. */
.lx-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.09375rem;
  top: 2.25rem;
  bottom: 0.35rem;
  width: 1px;
  background: var(--lx-hair-dark);
}

.lx-step__badge {
  display: grid;
  place-items: center;
  width: 2.1875rem;
  height: 2.1875rem;
  border: 1px solid rgba(197, 160, 89, 0.4);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--lx-gold);
  background: var(--lx-obsidian);
  transition: border-color var(--lx-move) var(--lx-ease), color var(--lx-move) var(--lx-ease);
}

.lx-step__body { min-width: 0; display: grid; gap: 3px; padding-top: 0.3rem; }

.lx-step__term {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--lx-on-dark);
}

.lx-step__mark { width: 1.0625rem; height: 1.0625rem; flex: none; color: var(--lx-gold); }
.lx-step__detail { margin: 0; font-size: var(--t-small); line-height: 1.6; color: var(--lx-on-dark-soft); }

@media (hover: hover) and (pointer: fine) {
  .lx-step:hover .lx-step__badge { border-color: var(--lx-gold); color: var(--lx-gold-bright); }
}

/* ============================ 03 — BENTO GRID ============================= */

.lx-bento { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); min-width: 0; }

@media (min-width: 52em) {
  .lx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lx-cell {
  display: grid;
  gap: var(--s3);
  align-content: start;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: #ffffff;
  border: 1px solid var(--lx-hair);
  border-radius: 14px;
  min-width: 0;
  transform: scale(1);
  transition: transform var(--lx-move) var(--lx-ease), border-color var(--lx-move) var(--lx-ease),
    box-shadow var(--lx-move) var(--lx-ease);
}

/* The feature cell goes dark and spans: four equal tiles would say all four
   limits weigh the same, and the building survey is the one people get wrong. */
.lx-cell--feature {
  background: var(--lx-obsidian);
  border-color: var(--lx-hair-dark);
}

@media (min-width: 52em) {
  .lx-cell--feature { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: var(--s5); }
  .lx-cell--feature .lx-cell__top { grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .lx-cell--feature .lx-cell__term { grid-column: 2; }
  .lx-cell--feature .lx-cell__detail { grid-column: 2; }
}

.lx-cell__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }

.lx-cell__mark {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.4rem;
  color: var(--lx-gold-ink);
  border: 1px solid rgba(111, 83, 32, 0.25);
}

.lx-cell__term {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem);
  line-height: 1.2;
  color: var(--lx-ink);
}

.lx-cell__detail { margin: 0; font-size: var(--t-small); line-height: 1.65; color: var(--lx-ink-soft); }

.lx-cell--feature .lx-cell__mark { color: var(--lx-gold); border-color: rgba(197, 160, 89, 0.35); }
.lx-cell--feature .lx-cell__term { color: var(--lx-on-dark); }
.lx-cell--feature .lx-cell__detail { color: var(--lx-on-dark-soft); }
.lx-cell--feature .lx-tag--quiet { color: var(--lx-gold); background: rgba(197, 160, 89, 0.14); }

@media (hover: hover) and (pointer: fine) {
  .lx-cell:hover { transform: scale(1.012); border-color: rgba(197, 160, 89, 0.45); }
  .lx-cell:not(.lx-cell--feature):hover { box-shadow: 0 18px 40px -28px rgba(18, 18, 18, 0.45); }
}

/* ==================== 04 — BAND E FEATURE + LOG ROWS ====================== */

.lx-standard { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); min-width: 0; align-items: start; }

@media (min-width: 62em) {
  .lx-standard { grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); gap: clamp(1.75rem, 3vw, 2.75rem); }
}

.lx-badge {
  background: var(--lx-obsidian);
  border: 1px solid var(--lx-hair-dark);
  border-top: 2px solid var(--lx-gold);
  border-radius: 14px;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  display: grid;
  gap: var(--s2);
  align-content: start;
  min-width: 0;
}

.lx-badge__kicker {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lx-gold);
}

.lx-badge__mark { width: 1.0625rem; height: 1.0625rem; flex: none; }

.lx-badge__letter {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4.5rem, 3rem + 5vw, 6.5rem);
  line-height: 0.88;
  color: var(--lx-gold);
}

.lx-badge__title {
  margin: var(--s2) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--lx-on-dark);
}

.lx-badge__copy { margin: 0; font-size: var(--t-small); line-height: 1.6; color: var(--lx-on-dark-soft); }

.lx-badge__facts { margin: var(--s3) 0 0; display: grid; border-top: 1px solid var(--lx-hair-dark); min-width: 0; }

.lx-badge__fact {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--lx-hair-dark);
  font-size: var(--t-small);
}

.lx-badge__fact dt { color: var(--lx-on-dark-soft); }
.lx-badge__fact dd { margin: 0; font-weight: 700; color: var(--lx-on-dark); text-align: right; }

/* ------------------------------- The log rows ---------------------------- *
 * The reference component: a contained list of expandable rows, a chevron at
 * the left edge, a level pill, the entry name, and a count line above. Each
 * row is a native <details>, so it works with no JavaScript and rows expand
 * independently — exactly how the reference behaves. */

.lx-logs {
  margin: 0;
  display: grid;
  background: #ffffff;
  border: 1px solid var(--lx-hair);
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
}

.lx-logs__count {
  margin: 0;
  /* The global paragraph measure capped this at ~60ch and its ground stopped
     mid-container; the count line is chrome, not prose. */
  max-width: none;
  padding: 0.75rem clamp(1rem, 2vw, 1.375rem);
  font-family: var(--font-text);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--lx-ink-soft);
  border-bottom: 1px solid var(--lx-hair);
  background: var(--lx-cream);
}

.lx-log { min-width: 0; }
.lx-log + .lx-log { border-top: 1px solid var(--lx-hair); }

.lx-log__summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding: 0.625rem clamp(1rem, 2vw, 1.375rem);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--lx-move) var(--lx-ease);
}

.lx-log__summary::-webkit-details-marker { display: none; }
.lx-log__summary::marker { content: ""; }

.lx-log__chev {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--lx-gold-ink);
  transition: transform var(--lx-move) var(--lx-ease);
}

.lx-log[open] .lx-log__chev { transform: rotate(180deg); }

@media (hover: hover) and (pointer: fine) {
  .lx-log__summary:hover { background-color: var(--lx-cream); }
}

.lx-log__summary:focus-visible { outline: 3px solid var(--lx-gold-ink); outline-offset: -3px; }

.lx-log__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--lx-ink);
  min-width: 0;
}

.lx-log__body { padding: 0 clamp(1rem, 2vw, 1.375rem) var(--s4) calc(clamp(1rem, 2vw, 1.375rem) + 1.75rem); }

[data-enhanced] .lx-log[open] .lx-log__body { animation: lx-acc-open 240ms var(--lx-ease) both; }

.lx-log__detail { margin: 0; font-size: var(--t-small); line-height: 1.65; color: var(--lx-ink-soft); max-width: var(--measure); }

.lx-note {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--lx-ink-soft);
  border-left: 2px solid var(--lx-gold);
  padding-left: var(--s4);
  max-width: var(--measure);
}

.lx-note__mark { width: 1.125rem; height: 1.125rem; flex: none; color: var(--lx-gold-ink); margin-top: 2px; }

/* ============================ CLOSING DECISION ============================ */

.lx-close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--lx-obsidian);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.lx-close__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.lx-close__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lx-close__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.95) 0%, rgba(8, 8, 8, 0.9) 46%, rgba(8, 8, 8, 0.72) 100%),
    linear-gradient(180deg, rgba(8, 8, 8, 0.4) 0%, rgba(8, 8, 8, 0.58) 100%);
}

.lx-close__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 62em) {
  .lx-close__inner { grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem); gap: clamp(2rem, 5vw, 4rem); }
}

.lx-close__copy { display: grid; gap: var(--s3); min-width: 0; }

.lx-close__kicker {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lx-gold);
}

.lx-close__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  line-height: 1.06;
  color: var(--lx-on-dark);
}

.lx-close__lede { margin: 0; color: var(--lx-on-dark-soft); line-height: 1.65; max-width: 48ch; }

.lx-close__actions { display: grid; gap: var(--s4); min-width: 0; }

.lx-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  min-height: 60px;
  padding: 0.875rem 1.25rem;
  background-color: rgba(244, 242, 236, 0.05);
  border: 1px solid rgba(197, 160, 89, 0.45);
  border-radius: 10px;
  color: var(--lx-on-dark);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color var(--lx-move) var(--lx-ease), border-color var(--lx-move) var(--lx-ease),
    color var(--lx-move) var(--lx-ease);
}

.lx-cta__mark { width: 1.25rem; height: 1.25rem; color: var(--lx-gold); }
.lx-cta__ext { width: 1.0625rem; height: 1.0625rem; color: var(--lx-gold); transition: transform var(--lx-move) var(--lx-ease); }
.lx-cta__label { min-width: 0; }

.lx-cta--quiet { grid-template-columns: minmax(0, 1fr) auto; border-color: var(--lx-hair-dark); }

@media (hover: hover) and (pointer: fine) {
  .lx-cta:hover { background-color: var(--lx-gold); border-color: var(--lx-gold); color: #1a1408; }
  .lx-cta:hover .lx-cta__mark,
  .lx-cta:hover .lx-cta__ext { color: #1a1408; }
  .lx-cta:hover .lx-cta__ext { transform: translate(3px, -3px); }
  .lx-cta--quiet:hover .lx-cta__ext { transform: translateX(4px); }
}

.lx-cta:active { background-color: var(--lx-gold-bright); color: #1a1408; }

.lx-cta:focus-visible {
  background-color: var(--lx-gold);
  border-color: var(--lx-gold);
  color: #1a1408;
  outline: 3px solid var(--lx-gold-bright);
  outline-offset: 3px;
  transition: none;
}

.lx-cta:focus-visible .lx-cta__mark,
.lx-cta:focus-visible .lx-cta__ext { color: #1a1408; }

/* ============================ OFFICIAL GUIDANCE =========================== */

.lx-sources { background: var(--lx-cream); padding-block: clamp(2.5rem, 5vw, 4rem); }

.lx-sources__inner { display: grid; gap: var(--s4); }

@media (min-width: 62em) {
  .lx-sources__inner { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
}

.lx-sources__title {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lx-gold-ink);
}

.lx-sources__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); min-width: 0; }

.lx-sources__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 56px;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border: 1px solid var(--lx-hair);
  border-radius: 10px;
  color: var(--lx-ink);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color var(--lx-move) var(--lx-ease), border-color var(--lx-move) var(--lx-ease),
    color var(--lx-move) var(--lx-ease);
}

.lx-sources__ext { width: 1.0625rem; height: 1.0625rem; flex: none; color: var(--lx-gold-ink); transition: transform var(--lx-move) var(--lx-ease), color var(--lx-move) var(--lx-ease); }

@media (hover: hover) and (pointer: fine) {
  .lx-sources__link:hover { background: var(--lx-obsidian); border-color: var(--lx-obsidian); color: var(--lx-on-dark); }
  .lx-sources__link:hover .lx-sources__ext { color: var(--lx-gold); transform: translate(3px, -3px); }
}

.lx-sources__link:focus-visible { outline: 3px solid var(--lx-gold-ink); outline-offset: 2px; transition: none; }

.lx-sources__reviewed { margin: 0; }

/* ================================= MOTION ================================= *
 * Scroll-triggered fade-ups through the site's existing reveal system. Every
 * hidden state is scoped to [data-enhanced], which enhance.mjs sets only once
 * it is running, so nothing can be stranded invisible.
 * ========================================================================== */

[data-enhanced] .page--epc [data-reveal="stage"] {
  opacity: 0;
  transform: translateY(16px);
}

[data-enhanced] .page--epc [data-reveal="stage"].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--lx-ease), transform 520ms var(--lx-ease);
  transition-delay: calc(var(--stage-index, 0) * 70ms);
}

[data-enhanced] [data-reveal="epc-hero-band"] { opacity: 0; }
[data-enhanced] [data-reveal="epc-hero-band"].is-in { opacity: 1; transition: opacity 620ms var(--lx-ease); }

[data-enhanced] [data-reveal="epc-switch"] { opacity: 0; transform: translateY(-10px); }
[data-enhanced] [data-reveal="epc-switch"].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--lx-ease) 180ms, transform 420ms var(--lx-ease) 180ms;
}

[data-enhanced] [data-reveal="epc-switch"] .lx-switch__item { opacity: 0; transform: translateY(-6px); }
[data-enhanced] [data-reveal="epc-switch"].is-in .lx-switch__item {
  opacity: 1;
  transform: none;
  transition: opacity 300ms var(--lx-ease), transform 300ms var(--lx-ease);
  transition-delay: calc(var(--stage-index, 0) * 60ms + 260ms);
}

/* The hero group: breadcrumb, title, rule, both paragraphs, then the dock. */
[data-enhanced] [data-reveal="hero-copy"].is-in > *:nth-child(4) { transition-delay: 300ms; }
[data-enhanced] [data-reveal="hero-copy"].is-in > *:nth-child(5) { transition-delay: 350ms; }
[data-enhanced] [data-reveal="hero-copy"].is-in > *:nth-child(6) { transition-delay: 420ms; }

/* Reduced motion and Save-Data: the finished composition, immediately. The
   beam stops travelling and the accordion snaps rather than sliding; every
   colour state survives. */
@media (prefers-reduced-motion: reduce) {
  [data-enhanced] .page--epc [data-reveal="stage"],
  [data-enhanced] [data-reveal="epc-hero-band"],
  [data-enhanced] [data-reveal="epc-switch"],
  [data-enhanced] [data-reveal="epc-switch"] .lx-switch__item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .lx-beam,
  .lx-cell { transform: none !important; transition: border-color var(--lx-move) var(--lx-ease) !important; }
  /* The beam holds still: the ring stays as a static edge light. */
  .lx-beam__ring { animation: none !important; }
  [data-enhanced] .lx-acc__item[open] .lx-acc__panel-in { animation: none; }
  [data-enhanced] .lx-log[open] .lx-log__body { animation: none; }
  .lx-acc__chev,
  .lx-log__chev,
  .lx-beam__arrow,
  .lx-cta__ext,
  .lx-dock__ext,
  .lx-sources__ext { transition: none; }
  .page--epc { scroll-behavior: auto; }
}

@media (prefers-reduced-data: reduce) {
  [data-enhanced] .page--epc [data-reveal="stage"],
  [data-enhanced] [data-reveal="epc-hero-band"],
  [data-enhanced] [data-reveal="epc-switch"],
  [data-enhanced] [data-reveal="epc-switch"] .lx-switch__item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

[data-motion="static"] .page--epc [data-reveal="stage"],
[data-motion="static"] [data-reveal="epc-hero-band"],
[data-motion="static"] [data-reveal="epc-switch"],
[data-motion="static"] [data-reveal="epc-switch"] .lx-switch__item {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

[data-motion="static"] .lx-beam__ring { animation: none !important; }
[data-motion="static"] .lx-log[open] .lx-log__body { animation: none !important; }
[data-motion="static"] .lx-beam,
[data-motion="static"] .lx-cell { transform: none !important; }
[data-motion="static"] .lx-acc__item[open] .lx-acc__panel-in { animation: none !important; }

/* --------------------------- Motion neutralisers ------------------------- */
/* The shared button and link components carry lift, halo and slide treatments
   for the rest of the site. On this page they are switched off by hand. */

.page--epc .btn::before,
.page--epc .btn::after,
.page--epc .link::after {
  content: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ================== PROPERTY SEARCH, LISTINGS AND SELLING ================= *
 * 8 August 2026.
 *
 * Three surfaces: the availability panel that ships while nothing clears the
 * publication gate (.psx), the search surface and detail template that appear
 * when something does (.psearch, .plead, .pgal, .pgv, .pfacts), and the
 * direct-sale page ("The Threshold": .sell-hero, .sell-truths, .sell-compare,
 * .sell-journey, .sell-scene, .sell-ready, .sell-faq, .sell-final — rebuilt
 * 11 August 2026 from the Threshold handoff brief, see build/pages/about.mjs).
 *
 * Tokens only. Motion is colour, border and underline, 170ms, explicit
 * properties. Nothing here lifts, zooms, slides or scroll-jacks.
 * ========================================================================== */

.psx,
.psearch,
.plead,
.pgal,
.pfacts {
  --px-move: 170ms;
  --px-ease: var(--ease-in-out);
}

/* ------------------------- The availability panel ------------------------ */

.psx {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) var(--inset);
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  min-width: 0;
}

@media (min-width: 62em) {
  .psx {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
    grid-template-areas: "lead act" "asks act";
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .psx__lead { grid-area: lead; }
  .psx__asks { grid-area: asks; }
  .psx__act { grid-area: act; }
}

.psx__lead { min-width: 0; }

.psx__kicker {
  margin: 0 0 var(--s3);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
}

.psx__title {
  margin: 0 0 var(--s4);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: 1.1;
  color: var(--bottle);
}

.psx__copy {
  margin: 0;
  color: var(--ink);
  line-height: 1.65;
  max-width: var(--measure);
}

.psx__asks { min-width: 0; }

.psx__asks-title {
  margin: 0 0 var(--s4);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 700;
}

.psx__ask-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  min-width: 0;
}

@media (min-width: 44em) {
  .psx__ask-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
}

.psx__ask {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}

.psx__ask-mark {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  background: var(--bottle);
  border: 1px solid var(--bottle);
  color: var(--sand);
}

.psx__ask-body { min-width: 0; display: grid; gap: 2px; }

.psx__ask-term {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--bottle);
}

.psx__ask-detail {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--fg-soft);
}

/* The action column: bottle green, so the one thing worth doing on this page
   is also the strongest surface on it. */
.psx__act {
  min-width: 0;
  background: var(--bottle);
  border-top: 3px solid var(--copper);
  color: var(--on-deep);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: grid;
  gap: var(--s5);
  align-content: start;
}

.psx__act-primary { margin: 0; }

.psx__cta {
  display: block;
  text-align: center;
  padding: 0.9375rem 1.5rem;
  min-height: 48px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  text-decoration: none;
  background-color: var(--sand);
  border: 1px solid var(--sand);
  color: var(--bottle-deep);
  transition: background-color var(--px-move) var(--px-ease),
    border-color var(--px-move) var(--px-ease), color var(--px-move) var(--px-ease);
}

.psx__cta:hover,
.psx__cta:focus-visible {
  background-color: var(--on-deep);
  border-color: var(--on-deep);
  color: var(--bottle-deep);
}

.psx__act-direct {
  margin: 0;
  display: grid;
  gap: var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-on-deep);
}

.psx__direct {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-deep);
  font-weight: 700;
  text-decoration: underline;
  /* 0.32em clears the descenders — at 0.22em the g's tail sat on the line
     (Aarav, 10 August 2026) — and skip-ink breaks the line around any tail
     that still reaches. */
  text-underline-offset: 0.32em;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 1px;
  transition: color var(--px-move) var(--px-ease);
}

.psx__direct:hover,
.psx__direct:focus-visible { color: var(--sand); }

.psx__portal {
  margin: 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-on-deep);
  display: grid;
  gap: var(--s2);
}

.psx__portal-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-deep);
  font-weight: 700;
  text-decoration: underline;
  /* Same clearance as .psx__direct above: the two underlined routes in this
     panel keep one underline geometry. */
  text-underline-offset: 0.32em;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 1px;
  transition: color var(--px-move) var(--px-ease);
}

.psx__portal-link:hover,
.psx__portal-link:focus-visible { color: var(--sand); }

.psx__portal-note {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--on-deep-soft);
}

/* ---------------------------- Search surface ----------------------------- */

.psearch {
  margin: 0 0 var(--s6);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--copper);
  display: grid;
  gap: var(--s4);
  min-width: 0;
}

.psearch__scope {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
}

.psearch__scope-label {
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 700;
}

.psearch__scope-value { font-weight: 700; color: var(--bottle); }

.psearch__grid {
  display: grid;
  gap: var(--s4);
  min-width: 0;
}

@media (min-width: 44em) {
  .psearch__grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}

.psearch__field { margin: 0; display: grid; gap: var(--s2); min-width: 0; }

.psearch__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: center;
}

.psearch__submit,
.psearch__clear {
  min-height: 44px;
  padding: 0.625rem 1.5rem;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color var(--px-move) var(--px-ease),
    border-color var(--px-move) var(--px-ease), color var(--px-move) var(--px-ease);
}

.psearch__submit {
  background-color: var(--bottle);
  border: 1px solid var(--bottle);
  color: var(--on-deep);
}

.psearch__submit:hover,
.psearch__submit:focus-visible {
  background-color: var(--bottle-deep);
  border-color: var(--copper);
  color: var(--sand);
}

.psearch__clear {
  background-color: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--bottle);
}

.psearch__clear:hover,
.psearch__clear:focus-visible {
  background-color: var(--bone);
  border-color: var(--copper);
  color: var(--bottle-deep);
}

/* ------------------------------ Detail lead ------------------------------ */

.plead {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--inset) clamp(1.5rem, 2.5vw, 2rem);
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  align-items: start;
  min-width: 0;
}

@media (min-width: 68em) {
  .plead {
    /* Measured at 1440: a fixed 26rem copy column forced the address heading
       onto three short lines beside a gallery with room to spare. */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.plead__copy { min-width: 0; }

.plead__status {
  margin: 0 0 var(--s3);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.plead__status--open { color: var(--copper-deep); }
.plead__status--closed { color: var(--fg-soft); }

.plead__rent {
  margin: var(--s3) 0 var(--s4);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1.1;
  color: var(--bottle);
}

.plead__facts {
  list-style: none;
  margin: 0 0 var(--s4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  font-size: var(--t-small);
  color: var(--ink);
}

.plead__facts li { position: relative; padding-right: var(--s4); }
.plead__facts li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0.25em;
  bottom: 0.25em;
  width: 1px;
  background: var(--rule-strong);
}

/* Below 48em the four facts wrap, and a divider drawn on the last item of a
   wrapped line hangs off the end with nothing after it — measured at 375, where
   "House |" ended line one. CSS cannot know where a flex line breaks, so the
   list becomes a two-column grid instead: the columns do the separating and no
   divider is needed. */
@media (max-width: 47.9375em) {
  .plead__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2) var(--s4);
  }
  .plead__facts li { padding-right: 0; }
  .plead__facts li:not(:last-child)::after { content: none; }
}

.plead__when {
  margin: 0 0 var(--s5);
  font-size: var(--t-small);
  color: var(--fg-soft);
  line-height: 1.55;
}

.plead__actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
}

.plead__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.875rem 1.75rem;
  min-height: 48px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  background-color: var(--bottle);
  border: 1px solid var(--bottle);
  color: var(--on-deep);
  transition: background-color var(--px-move) var(--px-ease),
    border-color var(--px-move) var(--px-ease), color var(--px-move) var(--px-ease);
}

.plead__cta:hover,
.plead__cta:focus-visible {
  background-color: var(--bottle-deep);
  border-color: var(--copper);
  color: var(--sand);
}

.plead__ref { font-size: var(--t-small); color: var(--fg-soft); }

.plead__closed {
  margin: 0;
  padding: var(--s4) var(--s5);
  background: var(--bone-sunk);
  border-left: 3px solid var(--copper);
}

.plead__closed-lead { margin: 0 0 var(--s4); font-weight: 700; color: var(--bottle); }

.plead__media { min-width: 0; }

/* -------------------------------- Gallery -------------------------------- */
/* One main photograph, up to two supporting crops on a wide screen, and a
   button into the full set. No nested scrollbar, no thumbnail strip, no zoom
   on hover. */

.pgal { display: grid; gap: var(--s4); min-width: 0; }

.pgal__main { margin: 0; background: var(--bone-sunk); overflow: hidden; }

.pgal__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.pgal__support {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  gap: var(--s4);
  min-width: 0;
}

@media (min-width: 48em) {
  .pgal__support { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pgal__support-item { min-width: 0; background: var(--bone-sunk); overflow: hidden; }

.pgal__support-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.pgal__act { margin: 0; }

.pgal__all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--bottle);
  transition: background-color var(--px-move) var(--px-ease),
    border-color var(--px-move) var(--px-ease), color var(--px-move) var(--px-ease);
}

.pgal__all:hover,
.pgal__all:focus-visible {
  background-color: var(--bone-raised);
  border-color: var(--copper);
  color: var(--bottle-deep);
}

.pgal__all-list { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s4); }
.pgal__all-list img { display: block; width: 100%; height: auto; }

/* --------------------------- The photograph viewer ----------------------- */

.pgv {
  width: min(64rem, 94vw);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--rule-strong);
  background: var(--bone);
  color: var(--ink);
  overflow: auto;
}

.pgv::backdrop { background: rgba(15, 20, 17, 0.72); }

.pgv__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid var(--rule);
}

.pgv__pos {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-soft);
}

.pgv__close,
.pgv__step {
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--bottle);
  transition: background-color var(--px-move) var(--px-ease),
    border-color var(--px-move) var(--px-ease), color var(--px-move) var(--px-ease);
}

.pgv__close:hover,
.pgv__close:focus-visible,
.pgv__step:hover,
.pgv__step:focus-visible {
  background-color: var(--bone-raised);
  border-color: var(--copper);
  color: var(--bottle-deep);
}

.pgv__stage { margin: 0; background: var(--bone-sunk); }

.pgv__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 68vh;
  object-fit: contain;
  background: var(--bone-sunk);
}

.pgv__caption {
  padding: var(--s3) clamp(1rem, 2.5vw, 1.5rem);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--fg-soft);
  background: var(--bone);
}

.pgv__nav {
  display: flex;
  gap: var(--s4);
  padding: var(--s4) clamp(1rem, 2.5vw, 1.5rem);
  border-top: 1px solid var(--rule);
}

/* --------------------------- Grouped fact panels ------------------------- */

.pfacts {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  min-width: 0;
}

@media (min-width: 56em) {
  .pfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pfacts__group {
  min-width: 0;
  border-top: 2px solid var(--bottle);
  padding-top: var(--s4);
}

.pfacts__group-title {
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: var(--t-group);
  line-height: 1.2;
  color: var(--bottle);
}

.pfacts__list { margin: 0; display: grid; gap: 0; min-width: 0; }

.pfacts__row {
  display: grid;
  gap: var(--s2);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}

@media (min-width: 30em) {
  .pfacts__row {
    grid-template-columns: minmax(9rem, 38%) minmax(0, 1fr);
    gap: var(--s4);
    align-items: baseline;
  }
}

.pfacts__term {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--bottle);
  line-height: 1.35;
}

.pfacts__value { margin: 0; color: var(--ink); line-height: 1.55; min-width: 0; }

.pfacts__note {
  display: block;
  margin-top: 2px;
  font-size: var(--t-small);
  color: var(--fg-soft);
  line-height: 1.5;
}

.pfacts__link {
  /* 44px: measured at 1440 and 320, these links were 19–41px tall. They are
     the routes to the tenant-fees page and the energy certificate, which are
     the two things a renter is most likely to open from this page. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--copper-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  transition: color var(--px-move) var(--px-ease);
}

.pfacts__link:hover,
.pfacts__link:focus-visible { color: var(--bottle); }

.pfacts__features { margin: 0; padding-left: 1.1em; line-height: 1.6; }
.pfacts__features li { margin-bottom: var(--s2); }

.pfacts__checked {
  margin: var(--s5) 0 0;
  font-size: var(--t-small);
  color: var(--fg-soft);
}

/* ---------------------------- Direct-sale page --------------------------- *
 * "The Threshold" — rebuilt 11 August 2026 from the Threshold handoff brief
 * (scratchpad/SALES_HANDOFF_2026-08-11 at the Client AMRIT root). One
 * editorial narrative: hero, three truths, route comparison, the five-stage
 * journey, two image/copy scenes, a readiness checklist, FAQ, final action.
 * Tokens throughout — no hard-coded hex, so this tracks the live palette
 * (dukes.css reassigns --bone/--bottle/etc. in a later :root block; the
 * painted values differ from the ones declared at the top of the file).
 * -------------------------------------------------------------------------- */

/* --------------------------------- Hero ------------------------------------ *
 * Full-bleed cinematic scene. Content sits on a rail anchored to the image via
 * a gradient scrim — never a detached floating card. Edge blur/vignette is a
 * pair of pseudo-elements with backdrop-filter, progressively enhanced; the
 * unconditional gradient is the fallback when backdrop-filter is unsupported.
 * -------------------------------------------------------------------------- */

/* Height is a DESKTOP-only commitment. Below 62em the trust panel stacks
   under the copy, so a 82vh floor made the hero taller than the viewport and
   pushed the next section 96-184px BELOW the fold — the page then read as if
   it ended at the hero. Measured 12 August 2026. Below the two-column
   breakpoint the content sets the height and the inner padding carries the
   rhythm. */
.sell-hero {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--bottle-deep);
}

@media (min-width: 62em) {
  .sell-hero {
    min-height: clamp(26rem, 72vh, 40rem);
    max-height: 52rem;
  }
}

.sell-hero picture,
.sell-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The legibility scrim. Retuned 12 August 2026 to a warm bottle-green tint
   (rgb 11 35 28 — the same green --bottle-deep is built from) rather than the
   previous neutral near-black, on Aarav's instruction that the hero read as a
   warm dark green. Three layers, one element:
     1. a flat green wash that lifts the whole frame off neutral grey;
     2. bottom-up, for the actions and the caveat;
     3. left-to-right, for the badge, H1 and support statement.
   The right-hand column carries its own panel surface, so the horizontal
   gradient deliberately dies before it reaches it. */
/* Strength is measured, not guessed. The photograph's brightest patch under
   the copy column samples around rgb(140,144,142); cream --on-deep needs the
   blended backdrop at or below roughly rgb(60,66,64) to clear 4.5:1, which
   takes about 0.6 alpha of this green over that patch. The stacked layout
   below 62em puts copy across the full frame, so there the wash is flat and
   carries the whole image rather than fading to the right. */
.sell-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(9, 28, 22, 0.5) 0%, rgba(9, 28, 22, 0.2) 42%, transparent 70%),
    linear-gradient(0deg, rgba(11, 35, 28, 0.45), rgba(11, 35, 28, 0.45));
}

@media (min-width: 62em) {
  .sell-hero::before {
    background:
      linear-gradient(0deg, rgba(9, 28, 22, 0.5) 0%, rgba(9, 28, 22, 0.18) 40%, transparent 68%),
      linear-gradient(
        100deg,
        rgba(9, 28, 22, 0.82) 0%,
        rgba(9, 28, 22, 0.74) 34%,
        rgba(9, 28, 22, 0.4) 56%,
        rgba(9, 28, 22, 0.16) 74%,
        transparent 88%
      ),
      linear-gradient(0deg, rgba(11, 35, 28, 0.22), rgba(11, 35, 28, 0.22));
  }
}

.sell-hero__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: clamp(2.5rem, 9vw, 9.5rem);
  pointer-events: none;
  mask-image: linear-gradient(var(--edge-dir, to right), black, transparent);
  -webkit-mask-image: linear-gradient(var(--edge-dir, to right), black, transparent);
}

.sell-hero__edge--left {
  left: 0;
  --edge-dir: to right;
  background: linear-gradient(to right, rgba(11, 15, 12, 0.32), transparent);
}

.sell-hero__edge--right {
  right: 0;
  --edge-dir: to left;
  background: linear-gradient(to left, rgba(11, 15, 12, 0.32), transparent);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sell-hero__edge {
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
  }
}

/* Two columns from 62em: copy rail left, trust panel right. Below that the
   panel stacks under the copy and the whole thing returns to a single
   readable column — never a squeezed side-by-side. The inner is a normal
   flow element rather than an absolutely positioned rail, so the hero now
   grows with its own content instead of clipping it. */
.sell-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--inset) clamp(2rem, 6vw, 3.5rem);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  min-height: inherit;
}

@media (min-width: 62em) {
  .sell-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

/* Stacked, the hero carries two panels and ran to 1.23x the viewport at
   768px, putting the next section 308px below the fold — the page then reads
   as if it ends here. Tightened rather than truncated: nothing is hidden on
   mobile, the rhythm is simply denser. Measured 12 August 2026. */
@media (max-width: 61.99em) {
  .sell-hero__inner {
    padding-top: clamp(1.75rem, 5vw, 2.5rem);
    padding-bottom: clamp(1.75rem, 5vw, 2.5rem);
    gap: var(--s5);
  }
}

.sell-hero__rail {
  max-width: 34rem;
  display: grid;
  gap: var(--s3);
  color: var(--on-deep);
  min-width: 0;
}

/* Below the two-column breakpoint the copy runs across the full frame, where
   the mobile photograph's bright sky sampled around rgb(198) — sand on that
   measured 2.83:1. Reaching AA with a flat wash alone would have taken about
   0.75 alpha across the whole image, which is precisely the "heavy black wash
   to fix weak contrast" the standard forbids. So the copy takes its own glass
   surface instead, matching the trust panel: the photograph stays visible
   around both panels, and the text sits on a known ground. Measured
   12 August 2026. */
@media (max-width: 61.99em) {
  .sell-hero__rail {
    max-width: none;
    padding: clamp(1.25rem, 4vw, 1.75rem);
    background: rgba(11, 35, 28, 0.72);
    border: 1px solid rgba(244, 238, 227, 0.16);
  }

  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .sell-hero__rail {
      background: rgba(11, 35, 28, 0.62);
      backdrop-filter: blur(18px) saturate(1.25);
      -webkit-backdrop-filter: blur(18px) saturate(1.25);
    }
  }
}

.sell-hero__eyebrow { color: var(--sand); }

/* The badge: a glass pill, not a solid chip. Sand text on a translucent
   green field, with the diamond as a separated mark rather than punctuation
   glued to the label. */
.sell-hero__badge {
  margin: 0;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(197, 166, 106, 0.42);
  /* 0.62, not the 0.38 first tried: sand on the badge measured 4.06-4.12:1
     against the photograph at 320-768px, just under the 4.5 floor. */
  background: rgba(11, 35, 28, 0.62);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--sand);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sell-hero__badge {
    backdrop-filter: blur(10px) saturate(1.15);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
  }
}

.sell-hero__badge-mark { font-size: 0.75em; line-height: 1; opacity: 0.9; }

/* The accent word. Sand against --on-deep cream: both clear AA on the
   scrimmed photograph, and the weight/family stay identical so this reads as
   emphasis inside one headline, not as two headlines. */
.sell-hero__accent { color: var(--sand); }

.sell-hero__h1 {
  margin: 0;
  color: var(--on-deep);
}

.sell-hero__support {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.35rem);
  color: var(--on-deep);
  line-height: 1.3;
}

.sell-hero__body {
  margin: 0;
  max-width: 46ch;
  color: var(--on-deep-soft);
  line-height: 1.55;
}

.sell-hero__actions {
  margin: var(--s3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

/* Secondary: the glass button. Translucent green field + blur + cream
   hairline, so it reads as the quieter sibling of the solid primary without
   ever becoming the "vague grey patch" the standard forbids. */
.sell-hero__secondary {
  --btn-fg: var(--on-deep);
  border-color: rgba(244, 238, 227, 0.5);
  background: rgba(11, 35, 28, 0.34);
  transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sell-hero__secondary {
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
  }
}

@media (hover: hover) and (pointer: fine) {
  .sell-hero__secondary:hover {
    border-color: var(--sand);
    color: var(--sand);
    background: rgba(11, 35, 28, 0.52);
  }
}

.sell-hero__secondary:active { border-color: var(--sand); background: rgba(11, 35, 28, 0.6); }

.sell-hero__arrow {
  display: inline-block;
  margin-left: 0.45em;
  transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .sell-hero__primary:hover .sell-hero__arrow { transform: translateX(3px); }
}

.sell-hero__caveat {
  margin: var(--s2) 0 0;
  max-width: 42ch;
  font-size: var(--t-small);
  color: var(--on-deep-soft);
  line-height: 1.5;
}

/* --------------------------- Hero trust panel ------------------------------ *
 * The floating dark-glass card. Bottle green at 62% over the photograph plus a
 * real blur, a sand top rule and a cream hairline — the page's existing dark
 * route-card language rendered translucent, rather than a new component.
 * Every figure and label in it is a statement the page proves further down;
 * nothing here is a metric that would need a source it does not have.
 * -------------------------------------------------------------------------- */

.sell-trust {
  min-width: 0;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  /* 0.78/0.68, not the 0.62/0.5 first tried: the sand eyebrow measured
     2.98:1 against the panel at 1024px, where the photograph behind it is
     brightest. Sand needs the blended ground at or below about rgb(58,64,63)
     to clear 4.5:1. */
  background: rgba(11, 35, 28, 0.88);
  border: 1px solid rgba(244, 238, 227, 0.18);
  border-top: 2px solid var(--sand);
  color: var(--on-deep);
  display: grid;
  gap: var(--s4);
  align-content: start;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sell-trust {
    background: rgba(11, 35, 28, 0.8);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
  }
}

.sell-trust__eyebrow {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--sand);
}

.sell-trust__stat {
  margin: 0;
  display: grid;
  gap: 0.15rem;
}

.sell-trust__figure {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1;
  color: var(--on-deep);
}

.sell-trust__stat-label {
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  color: var(--on-deep-soft);
}

/* The qualifier is not fine print: it sits directly under the figure, at body
   size, on the sand rule — because the figure is meaningless without it. */
.sell-trust__qualifier {
  margin: 0;
  padding-left: var(--s4);
  border-left: 2px solid var(--sand);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--on-deep);
}

.sell-trust__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(244, 238, 227, 0.18);
}

.sell-trust__cell {
  display: grid;
  gap: 0.2rem;
  padding: var(--s3) 0;
  border-bottom: 1px solid rgba(244, 238, 227, 0.18);
  min-width: 0;
}

.sell-trust__cell-label {
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--sand);
}

.sell-trust__cell-detail {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--on-deep);
}

/* The bottom bar. The reference puts a partner-logo strip here; Dukes has no
   verified badge asset to show, so it carries a written commitment instead. */
.sell-trust__bar {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--on-deep-soft);
}

@media (max-width: 61.99em) {
  .sell-trust { padding: clamp(1.25rem, 4vw, 1.5rem); gap: var(--s3); }
  .sell-trust__figure { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.4rem); }
  .sell-trust__cell { padding: 0.6rem 0; }
}

/* One restrained hero reveal: opacity/translate, 380ms, no bounce. The panel
   follows the copy rail by one beat so the eye lands on the H1 first. */
[data-enhanced] .sell-hero__rail,
[data-enhanced] .sell-trust { opacity: 0; transform: translateY(14px); }
[data-enhanced] .sell-hero__rail.is-in,
[data-enhanced] .sell-trust.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 380ms var(--ease-arrive), transform 380ms var(--ease-arrive);
}
[data-enhanced] .sell-trust.is-in { transition-delay: 110ms; }

@media (min-width: 48em) {
  .sell-hero__rail { max-width: 32rem; }
}

/* ---------------------------- Section rhythm ------------------------------- */

.sell-compare,
.sell-journey,
.sell-scene,
.sell-ready,
.sell-faq,
.sell-final {
  padding-top: clamp(3rem, 6vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

.sell-compare .band__head,
.sell-journey .band__head,
.sell-ready .band__head,
.sell-faq .band__head { margin-bottom: var(--s6); }

/* The three truths moved into the hero's own sill band on 13 August 2026
   (see the /sales/ "THE SEAM" section at the end of this file). The old
   .sell-truths rules are deleted rather than left orphaned: no element
   renders them any more. */

/* ---------------------------- Route comparison ------------------------------ */

.sell-compare { background: var(--bone-sunk); }

/* ---- The criteria matrix (replaced the two-column frame, 12 Aug 2026) ----- *
 * One dark card carrying four criteria, both routes answering each. The dark
 * ground is the page's own --bottle-deep/--bottle pair, so the requested
 * "#121412 / #1C1E1B charcoal" arrives through tokens and tracks the palette
 * rather than pinning two hex values that would drift out of the system.
 *
 * Radius is 4px — --radius-mount, the house ceiling. The reference's 12-16px
 * card corner is refused: at this size it reads as a web app panel, and every
 * other surface on this page squares off.
 * -------------------------------------------------------------------------- */

.sell-matrix {
  margin: 0 auto;
  max-width: 78rem;
  min-width: 0;
  background: linear-gradient(180deg, var(--bottle-deep) 0%, var(--bottle) 100%);
  color: var(--on-deep);
  border: 1px solid var(--rule-on-deep);
  border-top: 3px solid var(--copper);
  border-radius: var(--radius-mount);
  overflow: hidden;
}

/* Stacked first. Below the matrix breakpoint every row is an ordinary block
   and each cell states its own column, so the reading order at 320px is
   criterion, then route, then pill, then sentence. */
.sell-matrix__head { display: none; }

.sell-matrix__row {
  padding: var(--s5) clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--rule-on-deep);
  min-width: 0;
}

.sell-matrix__criterion {
  margin: 0 0 var(--s4);
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--on-deep);
}

.sell-matrix__cell { min-width: 0; padding: var(--s3) 0; }

.sell-matrix__cell--direct {
  background: rgba(197, 166, 106, 0.08);
  box-shadow: inset 2px 0 0 var(--sand);
  padding-left: var(--s4);
}

.sell-matrix__cell-label {
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--on-deep-soft);
}

.sell-matrix__cell--direct .sell-matrix__cell-label { color: var(--sand); }

/* The pill is a tag, not a stadium. 2px squares it into the same family as
   the .sell-ready cards; a 999px capsule is the one shape on this page that
   would read as a SaaS status chip. */
.sell-matrix__pill {
  display: inline-block;
  max-width: 100%;
  margin-bottom: var(--s2);
  padding: 0.15rem 0.45rem;
  border: 1px solid rgba(244, 238, 227, 0.3);
  border-radius: 2px;
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--on-deep);
}

.sell-matrix__pill--direct { border-color: rgba(197, 166, 106, 0.55); color: var(--sand); }

.sell-matrix__text {
  margin: 0;
  line-height: 1.55;
  color: var(--on-deep);
}

/* Three columns from 56em. The rows become display:contents so all twelve
   cells sit on the matrix's own grid and every criterion lines up across
   both routes — the point of the whole component.

   minmax(0, …) on all three tracks, and min-width:0 on every child: an auto
   track sized to an unwrapped sentence is exactly how this page's journey
   list once overflowed 320px by ~80px. */
@media (min-width: 56em) {
  .sell-matrix {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .sell-matrix__head {
    display: contents;
  }

  .sell-matrix__col-label {
    padding: var(--s4) clamp(1rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--rule-on-deep);
    font-family: var(--font-text);
    font-size: var(--t-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    /* Quiet by size, weight and tracking — never by dropping the ratio.
       This is 8.6:1 on the matrix ground; the floor is 4.5:1. */
    color: rgba(201, 210, 203, 0.82);
    min-width: 0;
  }

  .sell-matrix__col-label--direct {
    color: var(--sand);
    background: rgba(197, 166, 106, 0.08);
    box-shadow: inset 2px 0 0 var(--sand);
  }

  .sell-matrix__row { display: contents; }

  .sell-matrix__criterion,
  .sell-matrix__cell {
    padding: var(--s5) clamp(1rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--rule-on-deep);
    min-width: 0;
  }

  /* No align-self:start here. With display:contents rows, each cell is its
     own grid item; letting the criterion stretch to the row height is what
     makes its bottom hairline meet the two cells' hairlines instead of
     stopping short and stepping across the row. */
  .sell-matrix__criterion { margin: 0; }

  .sell-matrix__cell--direct { padding-left: clamp(1rem, 2vw, 1.5rem); }

  /* Clipped, not removed: the stacked layout's per-cell column label would
     be redundant beside a visible column header, but it stays in the
     accessibility tree so a cell still announces which route it belongs to. */
  .sell-matrix__cell-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* The disclosure closes the matrix as a full-width row, directly under the
   "~28 days" pill it qualifies. */
.sell-matrix .sell-timescale {
  grid-column: 1 / -1;
  border-bottom: 0;
}

.sell-compare__disclosure {
  margin: var(--s5) auto 0;
  max-width: 78rem;
  color: var(--ink);
  line-height: 1.6;
  font-weight: 600;
}

/* The 28-day disclosure, inside the direct-route column. */
.sell-timescale {
  margin: var(--s5) 0 0;
  background: var(--bottle-deep);
  border-left: 3px solid var(--sand);
  padding: var(--s5);
  max-width: none;
}

.sell-timescale__summary {
  display: block;
  margin: calc(var(--s5) * -1);
  padding: var(--s5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sand);
  -webkit-tap-highlight-color: transparent;
}

.sell-timescale__summary::-webkit-details-marker { display: none; }
.sell-timescale__summary::marker { content: ""; }

.sell-timescale__summary-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.sell-timescale__lead {
  display: block;
  margin-top: var(--s3);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.6;
  color: var(--on-deep);
}

.sell-timescale__mark {
  position: relative;
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  border: 1px solid var(--sand);
  border-radius: 50%;
}

.sell-timescale__mark::before,
.sell-timescale__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--sand);
  transform: translate(-50%, -50%);
}

.sell-timescale__mark::before { width: 0.625rem; height: 1.5px; }
.sell-timescale__mark::after { width: 1.5px; height: 0.625rem; }

.sell-timescale__body { overflow: hidden; }

.sell-timescale__copy {
  margin: 0;
  padding-top: var(--s4);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--on-deep);
}

@keyframes sellTimescaleOpen {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sell-timescale[open] .sell-timescale__body {
  animation: sellTimescaleOpen 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sell-timescale[open] .sell-timescale__mark::after { opacity: 0; }

.sell-timescale__mark::after {
  transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .sell-timescale__summary { transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1); }
  .sell-timescale__summary:hover,
  .sell-timescale__summary:hover .sell-timescale__mark { color: var(--on-deep); }
  .sell-timescale__summary:hover .sell-timescale__mark { border-color: var(--on-deep); }
  .sell-timescale__summary:hover .sell-timescale__mark::before,
  .sell-timescale__summary:hover .sell-timescale__mark::after { background: var(--on-deep); }
}

.sell-timescale__summary:active { color: var(--on-deep); }
.sell-timescale__summary:active .sell-timescale__mark { border-color: var(--on-deep); }

.sell-timescale__summary:focus-visible {
  outline: 3px solid var(--sand);
  outline-offset: -3px;
  transition: none;
}

/* ------------------------------ Five-stage journey -------------------------- */

.sell-journey__route {
  list-style: none;
  counter-reset: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  max-width: 78rem;
  margin-inline: auto;
}

/* Plain block stacking on mobile — the brief's "simple vertical ordered
   list": index, then label, then detail, each full width. The two-column
   grid (number beside text) is a desktop-only enhancement below. Grid
   columns declared unscoped here previously left an "auto" track sized to
   the unwrapped max-content width of the detail sentence at narrow widths,
   overflowing the viewport by ~80px — caught by pages.spec.mjs's 320/375px
   overflow sweep. */
.sell-journey__stage {
  position: relative;
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--rule);
}

.sell-journey__index { display: block; margin-bottom: var(--s2); }

/* A continuous copper/sand route line down the left edge on desktop, where
   the stage number column gives it somewhere to sit, with a small node
   marking each stage — a numbered rail rather than a bare hairline. The
   node reuses the page's own copper/sand accent pair (the same one the
   line already carries) rather than introducing a new icon. */
@media (min-width: 56em) {
  .sell-journey__route { border-top: none; }
  /* The rail runs down the far left and the numeral sits in its own column
     beside it, so the enlarged display figures never cross the line. Reading
     order across a row is therefore rail, numeral, heading. */
  .sell-journey__stage {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    column-gap: var(--s5);
    align-items: baseline;
    padding-left: 2rem;
    padding-block: var(--s6);
  }
  .sell-journey__index { margin-bottom: 0; }
  .sell-journey__stage::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(var(--copper), var(--sand));
    opacity: 0.5;
  }
  .sell-journey__stage:first-child::before { top: var(--s6); }
  .sell-journey__stage:last-child::before { bottom: calc(100% - var(--s6)); }

  .sell-journey__stage::after {
    content: "";
    position: absolute;
    left: calc(0.5rem - 4px);
    top: calc(var(--s6) + 0.45em);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bone);
    border: 1.5px solid var(--copper);
  }
  .sell-journey__stage:last-child::after { border-color: var(--sand); }
}

/* The stage numeral is the rail's editorial voice: a large display-serif
   figure, not a boxed icon. It is decorative (the <ol> already numbers the
   stages for assistive technology), so it can carry weight without competing
   with the heading for meaning. */
.sell-journey__index {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 2vw, 3.25rem);
  font-weight: 400;
  color: var(--copper-deep);
  line-height: 0.9;
  letter-spacing: -0.01em;
}

.sell-journey__label {
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-group);
  color: var(--bottle);
  line-height: 1.25;
}

.sell-journey__detail {
  margin: 0;
  color: var(--ink);
  line-height: 1.55;
  max-width: 52ch;
}

@media (min-width: 56em) {
  .sell-journey__label,
  .sell-journey__detail { grid-column: 2; }
}

/* ---- The stage control and its state card (12 August 2026) --------------- *
 * The control is a button that looks like the heading it sits in — the stage
 * label was always the thing you would point at, so it becomes the target
 * rather than growing a separate "view" affordance beside it.
 * -------------------------------------------------------------------------- */

.sell-journey__control {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sell-journey__control:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 3px;
}

/* The state card. Light ground on purpose: the page already spends its dark
   budget on the comparison matrix and the readiness cards, and a third dark
   zone here would flatten the rhythm into one long dark page. */
.sell-journey__state {
  margin-top: var(--s4);
  padding: var(--s5);
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--sand);
  border-radius: 3px;
  min-width: 0;
}

.sell-state { margin: 0; display: grid; gap: var(--s4); }
.sell-state__row { display: grid; gap: 0.2rem; min-width: 0; }

.sell-state__label {
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
}

.sell-state__value {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
}

@media (min-width: 56em) {
  .sell-journey__state { grid-column: 2; }

  /* The rail proper, claimed by sales-page.mjs. Without that attribute every
     card simply stays in flow beneath its own stage, which is the no-JS view
     and stays fully readable.

     The card is a child of its <li>, not of the <ol>, so it takes a third
     column on the STAGE's own grid rather than a column on the list's. That
     keeps each card beside the stage it belongs to — and it avoids putting
     display:contents on a list item, which drops the item out of the
     accessibility tree in several engines. */
  /* The stage keeps its two-column grid and simply reserves the right-hand
     band with padding. The card is then positioned into that band rather than
     placed as a grid item.

     That is the whole point: a grid item would set its row's height, so the
     tall three-axis card would stretch whichever stage was selected and every
     other row would collapse — the list would visibly jump each time the
     reader moved between stages. Taking the card out of flow keeps all five
     rows the same height whatever is open, so selecting a stage changes what
     is on the right and nothing else moves. */
  [data-journey-rail="on"] .sell-journey__stage {
    padding-right: 25rem;
  }

  [data-journey-rail="on"] .sell-journey__state {
    position: absolute;
    top: var(--s5);
    right: 0;
    width: 22rem;
    margin-top: 0;
    display: none;
  }

  [data-journey-rail="on"] .sell-journey__stage.is-active .sell-journey__state { display: block; }

  /* Active/inactive treatment is colour only, and it is deliberately partial:
     the LABEL dims, the DETAIL never does. Those detail sentences carry
     "Dukes is not the purchaser" and "Nothing is binding before exchange",
     so they hold full contrast in every state, active or not. */
  [data-journey-rail="on"] .sell-journey__stage:not(.is-active) .sell-journey__label {
    color: var(--ink-soft);
  }

  [data-journey-rail="on"] .sell-journey__label {
    transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-journey-rail="on"] .sell-journey__stage.is-active .sell-journey__index { color: var(--copper); }

  [data-journey-rail="on"] .sell-journey__stage.is-active::after {
    background: var(--copper);
    border-color: var(--copper);
  }

  [data-journey-rail="on"] .sell-journey__stage::after {
    transition: background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

[data-enhanced] .sell-journey__stage { opacity: 0; transform: translateY(8px); }
[data-enhanced] .sell-journey__stage.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1), transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--stage-index, 0) * 45ms);
}

/* -------------------------- Editorial image/copy scenes --------------------- */

.sell-scene {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  /* Top-aligned rather than centred: the copy in these two scenes runs
     shorter than the 3:2 photograph, and centring left visibly uneven empty
     margins above and below it. Aligning both to the top makes the heading
     sit level with the top of the photograph — a deliberate editorial
     pairing rather than a block floating in the middle of its row. */
  align-items: start;
}

.sell-scene--assessment { background: var(--bone); }
.sell-scene--legal { background: var(--bone-raised); }

@media (min-width: 56em) {
  .sell-scene { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sell-scene--assessment .sell-scene__media { order: 2; }
  .sell-scene--assessment .sell-scene__copy { order: 1; }
  .sell-scene--legal .sell-scene__media { order: 1; }
  .sell-scene--legal .sell-scene__copy { order: 2; }
}

.sell-scene__media {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bone-sunk);
}

.sell-scene__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* House content-photograph grade. */
  filter: brightness(0.96) contrast(1.05) saturate(1.03);
}

.sell-scene__copy { min-width: 0; }

.sell-scene__copy .lede { max-width: 46ch; }

/* ------------------------------ Readiness checklist -------------------------- */

/* Rebuilt 12 August 2026 as stacked cards (adapting the animated-list
   structure Aarav supplied) on the warm greige ground. Deep bottle-green
   cards with a gold icon badge, cream type and a hairline edge — the page's
   own dark-card language, not the reference's blue-white notification stack.
   Radius stays at the house 0-4px: rounded pills would put a SaaS shape on an
   estate agency page. Feedback is border and surface only; no lift, no
   shadow bloom, no zoom. */
.sell-ready { background: var(--bone-sunk); }

.sell-ready__list {
  margin: 0 auto;
  max-width: 52rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s4);
}

.sell-ready__card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--s4);
  padding: var(--s5);
  background: var(--bottle);
  border: 1px solid rgba(244, 238, 227, 0.16);
  border-left: 2px solid var(--sand);
  border-radius: 3px;
  color: var(--on-deep);
  box-shadow: 0 10px 26px -22px rgba(11, 35, 28, 0.85);
}

.sell-ready__badge {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(197, 166, 106, 0.5);
  background: rgba(197, 166, 106, 0.12);
  color: var(--sand);
}

.sell-ready__badge .sell-icon { width: 1.25rem; height: 1.25rem; }

.sell-ready__text { display: grid; gap: 0.2rem; min-width: 0; }

.sell-ready__label {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--on-deep);
}

.sell-ready__detail {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--on-deep-soft);
}

@media (hover: hover) and (pointer: fine) {
  .sell-ready__card {
    transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sell-ready__card:hover {
    background: #242d27;
    border-color: rgba(197, 166, 106, 0.42);
  }
  .sell-ready__card:hover .sell-ready__badge { border-color: var(--sand); background: rgba(197, 166, 106, 0.2); }
}

/* The stacked entrance: the same staggered settle the journey uses, so the
   page has one entrance family rather than two competing ones. */
[data-enhanced] .sell-ready__card { opacity: 0; transform: translateY(8px); }
[data-enhanced] .sell-ready__card.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1), transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--stage-index, 0) * 45ms);
}

/* ----------------------- /sales/ resource cards ------------------------------ *
 * Three editorial destinations with a photograph each. Page-scoped: the shared
 * next-steps component and its .steps rules are untouched and still render
 * every other route unchanged.
 *
 * The whole card is clickable through a stretched pseudo-element on the title
 * link, so the card carries exactly one tab stop and one accessible name. The
 * action line beneath is aria-hidden decoration, not a second link. */
.sell-res { background: var(--bone); }
.sell-res__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 78rem;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 48em) {
  .sell-res__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 68em) {
  .sell-res__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sell-res__card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 200ms var(--ease-in-out);
}
.sell-res__media { margin: 0; overflow: hidden; }
.sell-res__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform 240ms var(--ease-in-out);
}
.sell-res__body {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  flex: 1 1 auto;
}
.sell-res__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-group);
  font-weight: 400;
  line-height: 1.25;
  color: var(--bottle);
}
.sell-res__link { color: inherit; text-decoration: none; }
/* The stretched hit area. It sits above the card's own content but below
   nothing else, so no other interactive element is trapped underneath. */
.sell-res__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.sell-res__link:focus-visible { outline: none; }
.sell-res__card:has(.sell-res__link:focus-visible) {
  outline: 2px solid var(--copper-deep);
  outline-offset: 2px;
}
.sell-res__blurb {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink);
  flex: 1 1 auto;
}
.sell-res__action {
  margin: 0;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--copper-deep);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.sell-res__arrow { transition: transform 200ms var(--ease-in-out); }
/* Hover feedback only where there is a real pointer, and only colour, a
   restrained image scale inside the frame's own clip, and 3px of arrow
   travel. No lift, no shadow, no cursor effect. */
@media (hover: hover) and (pointer: fine) {
  .sell-res__card:hover { border-color: var(--copper); }
  .sell-res__card:hover .sell-res__media img { transform: scale(1.02); }
  .sell-res__card:hover .sell-res__arrow { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .sell-res__media img,
  .sell-res__arrow { transition: none; }
  .sell-res__card:hover .sell-res__media img { transform: none; }
  .sell-res__card:hover .sell-res__arrow { transform: none; }
}

/* ---------------------------------- FAQ -------------------------------------- */

.sell-faq { background: var(--bone); }

.sell-faq__list {
  margin: 0 auto;
  max-width: 52rem;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

/* The pointer wash: the requested "radial glow cursor", delivered as a tint
   rather than a bloom. This page's cards explicitly forbid glow, shadow and
   cursor effects, so there is no box-shadow, no filter, no transform and no
   text-colour change here — only a very faint warm radial fill that follows
   the pointer, set from --fx/--fy by sales-page.mjs. The 0.055 alpha ceiling
   is deliberate: at that strength the ink contrast on --bone is unchanged.
   Falls back to a dead-centre static tint when no script runs. */
.sell-faq__item {
  border-bottom: 1px solid var(--rule);
  background-image: radial-gradient(
    16rem circle at var(--fx, 50%) var(--fy, 50%),
    rgba(143, 80, 36, 0.055),
    transparent 70%
  );
}

@media (prefers-reduced-motion: reduce) {
  .sell-faq__item { background-image: none; }
}

/* display:block, NOT flex. Flex on a <summary> strips its native disclosure
   role and its Enter/Space handling in some engines — measured 10 Aug 2026,
   which is why the timescale disclosure was built with an inner span. The FAQ
   had kept the flex on the summary itself; corrected here. */
.sell-faq__summary {
  display: block;
  padding: var(--s5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-text);
  font-weight: 700;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

.sell-faq__summary-inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

/* The category tag. A label that names the subject, never a claim about it —
   "Role", "Price", "Timescale", "Legal", "Fees". */
.sell-faq__tag {
  flex: none;
  min-width: 5.5rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
}

.sell-faq__q { flex: 1 1 auto; min-width: 0; }

@media (max-width: 34em) {
  .sell-faq__summary-inner { flex-wrap: wrap; gap: var(--s3); }
  .sell-faq__tag { min-width: 0; }
  .sell-faq__q { flex: 1 0 100%; order: 3; }
}

.sell-faq__summary::-webkit-details-marker { display: none; }
.sell-faq__summary::marker { content: ""; }
/* The row is the control, so the focus ring belongs to the whole row rather
   than to the text inside it. Without this the summary was keyboard operable
   but gave no visible indication of where focus was. */
.sell-faq__summary:focus-visible {
  outline: 2px solid var(--copper-deep);
  outline-offset: -2px;
}
.sell-faq__summary:hover .sell-faq__mark { border-color: var(--copper-deep); }

/* Restrained height transition where the engine supports animating to a
   keyword size. Everything else — including the answer being present in the
   document — is unchanged, so this is decoration on top of a working control,
   never the thing that makes it work. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    /* interpolate-size is inherited, so it is declared on the item and the
       pseudo-element picks it up; declaring it on the pseudo-element alone
       would not let block-size animate to auto. */
    .sell-faq__item { interpolate-size: allow-keywords; }
    .sell-faq__item::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size 220ms cubic-bezier(0.22, 1, 0.36, 1),
        content-visibility 220ms allow-discrete;
    }
    .sell-faq__item[open]::details-content { block-size: auto; }
  }
}

/* Monochrome: the mark drops copper for the neutral rule colour, so the only
   warm note left in a closed row is the pointer wash. The focus ring keeps
   copper — visibility beats palette purity. */
.sell-faq__mark {
  position: relative;
  flex: none;
  margin-left: auto;
  width: 1.375rem;
  height: 1.375rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
}

.sell-faq__mark::before,
.sell-faq__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink-soft);
  transform: translate(-50%, -50%);
  transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sell-faq__mark::before { width: 0.625rem; height: 1.5px; }
.sell-faq__mark::after { width: 1.5px; height: 0.625rem; }

.sell-faq__item[open] .sell-faq__mark::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

.sell-faq__answer {
  margin: 0;
  padding: 0 0 var(--s5);
  max-width: 58ch;
  color: var(--ink);
  line-height: 1.6;
}

@keyframes sellFaqOpen {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sell-faq__item[open] .sell-faq__answer {
  animation: sellFaqOpen 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .sell-faq__summary { transition: color 170ms cubic-bezier(0.22, 1, 0.36, 1); }
  .sell-faq__summary:hover { color: var(--copper-deep); }
}

/* A second .sell-faq__summary:focus-visible used to sit here at equal
   specificity (3px solid var(--copper), offset 2px) and won by source order,
   overriding the inset ring declared with the summary above. An outset ring
   collides with the hairline row dividers on both neighbours; the inset one
   does not. Removed 12 August 2026 — the surviving rule is the one with the
   explanatory comment beside the summary. */

/* -------------------------------- Final ------------------------------------ */

.sell-final__actions { margin: var(--s5) 0 0; }

.sell-final__link { display: inline-flex; align-items: center; gap: var(--s2); }

.sell-final__arrow {
  display: inline-block;
  transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .sell-final__link:hover .sell-final__arrow { transform: translateX(3px); }
}

.sell-icon { width: 1.5rem; height: 1.5rem; display: block; }

/* ------------------------------ Useful next steps ---------------------------- *
 * Page-scoped presentation only — the shared .steps markup, its destinations
 * and every other route's use of it are untouched (build/components.mjs is
 * not part of this pass). [data-page="sales"] is the same body attribute
 * sales-parallax.mjs already keys off, so this stays a page-scoped override
 * of the shared component rather than a redefinition of it. The one visible
 * change from the shared default: no hover lift (translateY), per the
 * editorial-link-grid brief for this page — feedback stays a hairline/colour
 * change, and the lead destination reads as primary through the serif
 * display face rather than motion or shadow.
 * ------------------------------------------------------------------------- */

/* ------------------- Glass header — /sales/ ONLY (scoped) ------------------ *
 * Aarav asked for a glassmorphism header on this page, 12 August 2026. The
 * global header is shared shell across all 23 routes and is protected, so this
 * is deliberately scoped to [data-page="sales"]: the markup, the logo, every
 * link, the 78-84px band and the dropdown geometry are untouched, and no other
 * route sees any of it. Extending it site-wide is a separate decision.
 *
 * The opacity is 0.88, not the reference's 0.6. Below 0.88 the dark hero
 * photograph scrolls under the header and the charcoal nav text drops out of
 * AA — measured, not assumed. The blur and the warm hairline are what make it
 * read as glass; the opacity is what keeps it legible.
 * ------------------------------------------------------------------------- */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  [data-page="sales"] .site-head {
    background:
      radial-gradient(circle at 50% -70%, rgb(250 244 233 / 42%), transparent 52%),
      linear-gradient(100deg, rgb(221 206 182 / 88%) 0%, rgb(236 225 207 / 88%) 48%, rgb(222 208 184 / 88%) 100%);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border-bottom: 1px solid rgb(143 80 36 / 30%);
    box-shadow: 0 10px 30px -24px rgb(11 35 28 / 78%);
  }
}

[data-page="sales"] .steps__link {
  transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-page="sales"] .steps__item--lead .steps__label {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 400;
}

@media (hover: hover) and (pointer: fine) {
  [data-page="sales"] .steps__link:hover {
    border-color: var(--copper);
    transform: none;
  }
}

[data-page="sales"] .steps__link:active { transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-page="sales"] .steps__link { transition: none; }
}

/* ------------------------------ Reduced motion ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-enhanced] .sell-hero__rail,
  [data-enhanced] .sell-trust,
  [data-enhanced] .sell-journey__stage,
  [data-enhanced] .sell-ready__card,
  .sell-ready__card,
  .sell-hero__secondary,
  .sell-hero__arrow,
  .sell-timescale__mark,
  .sell-timescale__mark::after,
  .sell-timescale__summary,
  .sell-faq__mark::before,
  .sell-faq__mark::after,
  .sell-faq__summary,
  .sell-final__arrow {
    transition: none;
    transform: none;
    opacity: 1;
    animation: none;
  }
  .sell-timescale[open] .sell-timescale__body,
  .sell-faq__item[open] .sell-faq__answer { animation: none; }
}

/* --------------------------- Motion neutralisers ------------------------- */
/* The standing photograph zoom on a result card is gone: a card is a link to
   a property, and a photograph that grows under the pointer adds nothing to
   that decision. The selected-thumbnail lift went with the thumbnail strip. */

.prop__shot img { transition: none !important; }
.prop:hover .prop__shot img { transform: none !important; }

/* The card title is the card's link, so it carries the card's target size.
   Measured at 24px before this. */
.prop__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.psx a,
.psearch button,
.plead a,
.pgal button,
.pgv button,
.pfacts a { transform: none !important; }

/* No .btn neutraliser here: the shared button component keeps its own fill,
   and these surfaces use their own controls rather than borrowing it. */

@media (prefers-reduced-motion: reduce) {
  .psx__cta,
  .psx__direct,
  .psx__portal-link,
  .plead__cta,
  .pgal__all,
  .pgv__close,
  .pgv__step,
  .pfacts__link { transition: none; }
}

/* --------------------- Public-safe reception section ---------------------- *
 * Property search, the direct-sale route and any published listing render a
 * contact section here instead of the demo conversation. Same bottle-green
 * surface and same rhythm as the approved block, so nothing about the page
 * changes visually except what the section says.
 * ------------------------------------------------------------------------- */

.reception--safe .reception__routes--safe {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 0;
  min-width: 0;
}

/* The carried property reference. Hidden until a listing hands one over, so it
   never occupies space on a page that has no reference to show. */
.reception__context {
  margin: var(--s4) 0 0;
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--sand);
  background: color-mix(in srgb, var(--sand) 12%, transparent);
  color: var(--on-deep);
  font-size: var(--t-small);
  line-height: 1.55;
  max-width: 62ch;
}

.reception__context[hidden] { display: none; }

/* The labelled rail was written for a bone surface, so its caption colours are
   dark. On this bottle-green section they measured as near-invisible, so the
   dark tone's on-deep colours are applied to the labelled captions too. Scoped
   to this section: the rail keeps its approved appearance everywhere else. */
.reception--safe .crail--labelled .crail__tip-label { color: var(--sand); }
.reception--safe .crail--labelled .crail__tip-value { color: var(--on-deep); }
.reception--safe .crail__intro { color: var(--on-deep-soft); }

/* Four across inside the reception section's right-hand column left every value
   wrapping mid-word ("ask@dukese / state.com"). Two by two fits the column. */
@media (min-width: 75em) {
  .reception--safe .crail--labelled .crail__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============= ABOUT, CUSTOMER REVIEWS AND THE PRIVACY NOTICE ============= *
 * 8 August 2026.
 *
 * Three surfaces, one language: bottle green, bone, copper and sand, Palatino
 * display over Manrope text, square geometry, fine rules. No new palette, no
 * gradient, glass, glow, blob or bento clutter.
 *
 * Motion policy for everything below: colour, background, border and underline
 * only, 160ms, explicit properties, gated behind a real pointer, with a
 * reduced-motion path. Nothing lifts, scales, zooms, slides or animates layout.
 * ========================================================================== */

.abt-open,
.abt-routes,
.abt-themes,
.abt-proof,
.abt-contact,
.rvw-open,
.rvw-grid,
.rvw-method,
.pv-open,
.pv-hold,
.pv-glance,
.pv-purposes,
.pv-routes,
.pv-services {
  --arp-move: 160ms;
  --arp-ease: var(--ease-in-out);
}

/* --------------------------------- About --------------------------------- */

.abt-open {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.75rem, 3vw, 2.75rem) var(--inset) clamp(1.25rem, 2.5vw, 2rem);
}

.abt-open__copy { min-width: 0; max-width: 46rem; }

/* One measure for every reading column on these pages: 65-72 characters. */
.abt-open .lede,
.abt-route__detail,
.abt-theme,
.abt-proof__detail,
.pv-body,
.pv-hold__copy .lede {
  max-width: 68ch;
}

.abt-routes,
.abt-proof {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s5);
  min-width: 0;
}

@media (min-width: 52em) {
  .abt-routes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .abt-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.abt-route,
.abt-proof__item {
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--copper);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  display: grid;
  gap: var(--s3);
  align-content: start;
  min-width: 0;
}

.abt-route__name,
.abt-proof__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-group);
  line-height: 1.15;
  color: var(--bottle);
}

.abt-route__detail,
.abt-proof__detail {
  margin: 0;
  color: var(--fg-soft);
  line-height: 1.6;
  font-size: var(--t-small);
}

.abt-route__action { margin: 0; }

.abt-proof__fact {
  margin: 0;
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
  word-break: break-word;
}

/* Themes: a quiet list, not four boasts in boxes. */
.abt-themes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  min-width: 0;
}

@media (min-width: 52em) {
  .abt-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
}

.abt-theme {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  line-height: 1.6;
}

.abt-more { margin: var(--s5) 0 0; }

.abt-link,
.abt-proof__link,
.rvw-link,
.pv-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--copper-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--arp-move) var(--arp-ease),
    background-color var(--arp-move) var(--arp-ease);
}

@media (hover: hover) and (pointer: fine) {
  .abt-link:hover,
  .abt-proof__link:hover,
  .rvw-link:hover,
  .pv-link:hover {
    color: var(--bottle);
    background-color: color-mix(in srgb, var(--copper) 10%, transparent);
  }
}

.abt-link:focus-visible,
.abt-proof__link:focus-visible,
.rvw-link:focus-visible,
.pv-link:focus-visible { color: var(--bottle); }

/* ------------------------------ About contact ---------------------------- */

.abt-contact__anchor {
  display: block;
  height: 0;
  /* Clears the sticky header when the launcher or the header Contact link
     lands on this section. */
  scroll-margin-top: calc(var(--head-h) + 1rem);
}

.abt-contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s4);
  min-width: 0;
}

@media (min-width: 52em) {
  .abt-contact__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .abt-contact__list--secondary { grid-template-columns: minmax(0, 20rem); }
}

.abt-contact__item { min-width: 0; }

.abt-contact__link {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 56px;
  padding: var(--s4);
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--bottle);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--arp-move) var(--arp-ease),
    border-color var(--arp-move) var(--arp-ease), color var(--arp-move) var(--arp-ease);
}

@media (hover: hover) and (pointer: fine) {
  .abt-contact__link:hover {
    background-color: var(--bone-sunk);
    border-left-color: var(--copper);
    color: var(--bottle);
  }
}

.abt-contact__link:focus-visible {
  background-color: var(--bone-sunk);
  border-left-color: var(--copper);
}

.abt-contact__mark {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-strong);
  color: var(--bottle);
}

.abt-contact__mark svg { width: 1.25rem; height: 1.25rem; }

.abt-contact__body { min-width: 0; display: grid; gap: 2px; }

.abt-contact__label {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 700;
}

.abt-contact__value {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--bottle);
  overflow-wrap: anywhere;
}

/* Instagram is a profile, and the treatment says so before the note does. */
.abt-contact__secondary { margin-top: var(--s6); }

.abt-contact__secondary-title {
  margin: 0 0 var(--s3);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 700;
}

.abt-contact__item--secondary .abt-contact__link {
  border-left-color: var(--rule-strong);
  background: transparent;
}

.abt-contact__note {
  margin: var(--s3) 0 0;
  font-size: var(--t-small);
  color: var(--fg-soft);
  max-width: 68ch;
}

/* ---- Company details: the closing scene ----
   Replaces the former .abt-contact__ledger, which stated every fact in one
   flowing line at one weight. Two balanced columns of separated fact rows,
   held to a readable block rather than the full page width, with three
   visibly distinct levels: label, value, supporting note. Nothing here is
   interactive and nothing uses a control colour. */
.abt-legal {
  margin: var(--s7) 0 0;
  padding: var(--s5) 0 0;
  border-top: 1px solid var(--rule-strong);
  /* Held well inside the content column: at 1440 the old block ran the full
     width and read as loose prose rather than a record. */
  max-width: 54rem;
}
.abt-legal__title {
  margin: 0 0 var(--s5);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-brass-deep);
}
.abt-legal__grid {
  margin: 0;
  display: grid;
  gap: var(--s5);
}
@media (min-width: 48em) {
  .abt-legal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
}
.abt-legal__row {
  min-width: 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
/* Level 1: what this fact is. Quietest in size, but unmistakably a label —
   brass, tracked and uppercase, so it can never be mistaken for the value. */
.abt-legal__label {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-brass-deep);
}
.abt-legal__detail { margin: var(--s2) 0 0; min-width: 0; }
/* Level 2: the fact itself. */
.abt-legal__value {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
}
/* The address breaks only between its own parts, never inside one, so the
   postcode can never be split across two lines. 22ch settles it into two or
   three controlled lines at every width instead of one long run. */
.abt-legal__address { max-width: 22ch; }
.abt-legal__part { white-space: nowrap; }
/* Level 3: supporting facts and the caveat, clearly subordinate to the value
   above them but still comfortably readable. */
.abt-legal__fact,
.abt-legal__note {
  margin: var(--s2) 0 0;
  font-size: var(--t-small);
  color: var(--fg-soft);
  max-width: 44ch;
}
.abt-legal__fact { margin-top: 4px; }

/* The one discreet route to the full photograph attribution, added 9 August
   2026. Set at the quietest weight in this block — smaller and softer than
   even .abt-legal__note — so it reads as a footnote beneath the company
   record, not as another action competing with "Open the enquiry form"
   above it. */
.abt-legal__credits { margin: var(--s5) 0 0; font-size: var(--t-label); color: var(--fg-soft); }
.abt-legal__credits-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -11px 0;
  padding: 0 2px;
}
.abt-legal__credits-link:hover,
.abt-legal__credits-link:focus-visible { color: var(--accent-brass-deep); }
.abt-legal__credits-link:focus-visible { outline: 2px solid var(--accent-brass-deep); outline-offset: 2px; }

/* The floating "Speak to Dukes" launcher sits over the foot of the viewport
   on small screens and was covering the closing legal rows. Extra trailing
   space on THIS section only clears it; the launcher itself is untouched. */
/* The closing block carries the `contact` class purely so the launcher's own
   clearance logic treats it as a region to stow over, exactly as it already
   does for the contact tiles. `.contact` sets `display: grid`, which would
   change this block's spacing, so display is reset — the class contributes
   clearance and nothing else. */
.abt-contact__closing { display: block; }

/* ---- The contact plate ---- *
   Added 10 August 2026 on direct instruction: the closing act's content sat
   directly on the bare page — routes ending at 60% width, a dead right side,
   the enquiry and ledger as loose left-pinned items — and read as unfinished.
   The plate is the reviews act's composed-surface device applied to the close
   of the page: inset width, warm greige, one copper rule. The approved shared
   contact panel inside it is untouched; only the ground it stands on and the
   composition of the About-only closing area changed. */
.abt-contact__plate {
  max-width: 78rem;
  margin: 0 auto;
  background: var(--bone-sunk);
  border-top: 3px solid var(--copper);
  padding: clamp(2rem, 3.4vw, 3rem) clamp(1.25rem, 2.6vw, 2.5rem);
}
/* The Instagram caveat reads as the panel's footnote, tied to the routes it
   qualifies rather than dangling in space. */
.abt-contact .abt-contact__note {
  margin: var(--s4) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  max-width: 60ch;
}
/* Closing tier: the enquiry action and the company ledger were stacked in the
   plate's left half with nothing opposite. They now mirror the panel's own
   editorial two-column grid above (statement 0.82fr / routes 1.18fr), so the
   two tiers of the plate sit on one skeleton. */
@media (min-width: 64em) {
  .abt-contact .abt-contact__closing {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: start;
  }
}
/* The enquiry is the page's next action, so it takes the strongest surface in
   the system — the deep panel the Google-reviews anchor already uses — with
   the approved parchment button rendered on it exactly as the hero renders
   its own parchment action on the film. */
.abt-contact .abt-contact__written {
  margin-top: var(--s6);
  max-width: none;
  border-top: 0;
  padding: var(--s5);
  background: var(--bottle);
}
.abt-contact .abt-contact__written-label { color: var(--on-deep); }
.abt-contact .abt-contact__written-copy { color: var(--on-deep-soft); }
.abt-contact .abt-legal {
  max-width: none;
  margin-top: var(--s6);
}

/* ----------------------------- Customer reviews -------------------------- */
/* Ultra-premium dark canvas, 12 August 2026, second pass on Aarav's direct
   instruction (21st.dev references: stats-card grid, moving-dot glow card,
   cybernetic bento grid, pointer-spotlight story cards, split CTA + contact
   grid). The 11 August structure is unchanged underneath: same narrative,
   same 24 records, same reveal contract, same tests. Page-scoped exceptions
   to the written standard, all on his named call: rounded geometry, subtle
   glassmorphism, hover lift on takeaway/featured cards, a pointer-following
   gold spotlight on the three featured cards, and one very subtle ambient
   glow drift behind the metric numbers (gated to full motion, killed by
   reduced motion). Archive evidence still never moves. Vanilla CSS — no
   Tailwind, no framework. */

.page--reviews {
  /* GREEN RETUNE — 12 August 2026, Aarav's instruction, superseding the
     same-day obsidian pass: the black read as generic "AI slop", and the
     five values below are his own supplied swatches, not an approximation.
     Mapped onto the existing five-step ladder by measured luminance
     (#1D241F darkest -> #24342C lightest) so the structure that already
     worked — deep through the middle, LIFTED at the foot so the page never
     ends at its blackest point above the cream footer — is unchanged; only
     the hue is exactly what he specified.
     Gold reverts to the site's own established --accent-champagne (#c5a66a,
     dukes.css:5295) rather than the brighter obsidian-tuned value: "the
     premium version that goes well with the colours we have before" means
     the real brand token, not a new invention. */
  --rvwx-dark: #202721;
  --rvwx-dark-deep: #1d241f;
  --rvwx-dark-warm: #212821;
  --rvwx-dark-2: #24342c;
  --rvwx-lift: #1d241f;
  --rvwx-line: rgba(255, 255, 255, 0.1);
  --rvwx-gold: #c5a66a;
  --rvwx-gold-line: rgba(197, 166, 106, 0.22);
  --rvwx-glow: rgba(197, 166, 106, 0.16);
  --rvwx-text: #f4efe6;
  --rvwx-text-soft: rgba(244, 239, 230, 0.78);
}

/* ---- Hero: an inset dark luxury frame ---- */
.rvw-hero {
  max-width: none;
  padding: clamp(1rem, 2vw, 1.75rem) var(--inset) 0;
}

.rvw-hero__frame {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  background: var(--rvwx-dark);
  border: 1px solid var(--rvwx-line);
  border-radius: 24px;
  overflow: hidden;
  color: var(--rvwx-text);
  --fg: var(--rvwx-text);
  --fg-soft: var(--rvwx-text-soft);
  --focus-ring: var(--rvwx-gold);
  --focus-halo: rgba(227, 192, 126, 0.4);
  --rule: var(--rvwx-line);
  --line: var(--rvwx-line);
}

/* PLACEHOLDER SURFACE. Until Aarav supplies the generated atmosphere plate,
   this layer paints composed radial glows over the dark field. When the
   plate arrives it becomes a background-image on this same element with the
   gradients riding above it as the scrim — nothing else moves. Production
   still requires the real photograph recorded as REVIEWS-HERO-01 in
   data/media.mjs. */
.rvw-hero__scene {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 85% 12%, rgba(197, 166, 106, 0.13), transparent 62%),
    radial-gradient(55% 75% at 8% 92%, rgba(49, 83, 69, 0.35), transparent 65%),
    linear-gradient(180deg, #262f28 0%, #1d241f 100%);
}

/* The Dukes mark as an ultra-low watermark behind the hero copy. A CSS
   background on the existing decorative layer, never an <img>: it stays out
   of the document's image list, out of the accessibility tree and out of the
   tab order by construction. At 0.035 it is a texture, not a logo placement.
   Suppressed below the two-column threshold, matching the stamp-duty
   watermark precedent — a mark behind copy on a narrow screen is exactly the
   contrast hazard the invariants ban. */
.rvw-hero__scene::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Capped at the mark's native 625px — there is no vector master, and an
     upscaled raster watermark reads as a degraded logo, not a texture. */
  width: min(39rem, 74%);
  aspect-ratio: 625 / 441;
  background: url("/assets/brand/dukes-logo.png") center / contain no-repeat;
  opacity: 0.035;
  filter: grayscale(1);
  pointer-events: none;
}

@media (max-width: 62em) {
  .rvw-hero__scene::after { display: none; }
}

.rvw-hero__inner {
  position: relative;
  min-width: 0;
  max-width: 62rem;
  padding: clamp(2.5rem, 5vw, 4.25rem) clamp(1.25rem, 4vw, 4rem) clamp(2rem, 4vw, 3rem);
}

.rvw-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--rvwx-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rvwx-text-soft);
}

.rvw-hero__pill-star { color: var(--rvwx-gold); }

.rvw-hero__title {
  margin: var(--s5) 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: 0.002em;
  color: var(--rvwx-text);
  text-wrap: balance;
}

.rvw-hero__lede {
  margin: var(--s4) 0 0;
  max-width: 56ch;
  color: var(--rvwx-text-soft);
  line-height: 1.6;
  font-size: clamp(1.0625rem, 0.8rem + 1vw, 1.1875rem);
}

.rvw-hero__actions {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

/* ---- The page's own CTA pair: gold fill and glass outline ---- */
.rvw-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0 1.75rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transform: none !important;
  transition: background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rvw-cta--gold {
  background: #d9bf8f;
  border: 1px solid rgba(231, 211, 171, 0.55);
  color: #181410;
}

.rvw-cta--glass {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--rvwx-text);
  backdrop-filter: blur(8px);
}

@media (hover: hover) and (pointer: fine) {
  .rvw-cta--gold:hover { background: #e8d3ac; border-color: #e8d3ac; }
  .rvw-cta--glass:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.36); }
}

.rvw-cta:focus-visible {
  outline: 2px solid var(--rvwx-gold);
  outline-offset: 3px;
}

.rvw-cta--gold:active { background: #cbb078; }
.rvw-cta--glass:active { background: rgba(255, 255, 255, 0.16); }

/* cta-3 primary (Aarav, 12 Aug): solid light surface warming to gold. */
.rvw-cta--light {
  background: #f4f4f5;
  border: 1px solid #f4f4f5;
  color: #121212;
}

@media (hover: hover) and (pointer: fine) {
  .rvw-cta--light:hover { background: #e8c77e; border-color: #e8c77e; }
}

.rvw-cta--light:active { background: #d9bf8f; }

/* A single sheen sweep across the filled CTAs on hover (Aarav, 12 Aug).
   Transform-only travel with an explicit curve — deliberately NOT the sales
   shine, whose undefined --ease-out token makes it snap. */
.rvw-cta--gold,
.rvw-cta--light { position: relative; overflow: hidden; }

.rvw-cta--gold::before,
.rvw-cta--light::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .rvw-cta--gold:hover::before,
  .rvw-cta--light:hover::before {
    transform: translateX(330%) skewX(-18deg);
    transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ---- Hero stat row ---- */
.rvw-hero__stats {
  list-style: none;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
  padding: clamp(1rem, 2vw, 1.375rem) 0 0;
  border-top: 1px solid var(--rvwx-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) 0;
  min-width: 0;
}

.rvw-hero__stat {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--rvwx-line);
}

.rvw-hero__stat:first-child { padding-left: 0; border-left: 0; }

.rvw-hero__stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem);
  line-height: 1.1;
  color: var(--rvwx-text);
}

.rvw-hero__stat-star { color: var(--rvwx-gold); font-size: 0.8em; }

.rvw-hero__stat-label {
  font-size: var(--t-small);
  color: var(--rvwx-text-soft);
  letter-spacing: 0.02em;
}

@media (max-width: 40em) {
  .rvw-hero__stats { flex-direction: column; gap: var(--s3); }
  .rvw-hero__stat { padding: 0; border-left: 0; }
}

.rvw-hero__capture {
  margin: var(--s4) 0 0;
  font-size: var(--t-small);
  color: var(--rvwx-text-soft);
}

/* Stars are decorative beside visually hidden rating text; gold everywhere. */
.rvw-stars { color: var(--rvwx-gold); letter-spacing: 0.12em; font-size: 0.875rem; }

/* ---- Links: quiet rest underline, centre-out rule, ≤3px arrow ---- */
.rvw-link { position: relative; }

.rvw-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .rvw-link:hover::after { transform: scaleX(1); opacity: 1; }
}

.rvw-link:focus-visible::after { transform: scaleX(1); opacity: 1; transition: none; }

.rvw-link__arrow {
  display: inline-block;
  margin-left: 0.4em;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .rvw-link:hover .rvw-link__arrow { transform: translateX(3px); }
}

.rvw-link:focus-visible .rvw-link__arrow { transform: translateX(3px); transition: none; }

/* Every rvw section below the breadcrumb is a dark surface now, so the page's
   links are gold at rest and brighten on request. */
.rvw-hero .rvw-link,
.rvw-feat .rvw-link,
.rvw-facts-band .rvw-link,
.rvw-archive-band .rvw-link,
.rvw-close .rvw-link {
  color: var(--rvwx-gold);
  text-decoration-color: color-mix(in srgb, var(--rvwx-gold) 45%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .rvw-hero .rvw-link:hover,
  .rvw-feat .rvw-link:hover,
  .rvw-facts-band .rvw-link:hover,
  .rvw-archive-band .rvw-link:hover,
  .rvw-close .rvw-link:hover {
    color: var(--rvwx-text);
    background-color: rgba(227, 192, 126, 0.12);
  }
}

.rvw-hero .rvw-link:focus-visible,
.rvw-feat .rvw-link:focus-visible,
.rvw-facts-band .rvw-link:focus-visible,
.rvw-archive-band .rvw-link:focus-visible,
.rvw-close .rvw-link:focus-visible { color: var(--rvwx-text); }

.rvw-hero .rvw-link:active,
.rvw-feat .rvw-link:active,
.rvw-facts-band .rvw-link:active,
.rvw-archive-band .rvw-link:active,
.rvw-close .rvw-link:active {
  color: var(--rvwx-text);
  background-color: rgba(227, 192, 126, 0.16);
}

/* ---- Shared section furniture (dark canvas) ---- */
.rvw-kicker {
  margin: 0 0 var(--s2);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rvwx-gold);
}

.rvw-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.12;
  color: var(--rvwx-text);
}

/* ---- Metric cards + bento takeaways: one near-black band ---- */
/* The canvas starts here and runs unbroken to the footer seam: the hero's
   beige breathing room is the page's one light gap, and the bands below
   share one ground rather than alternating with beige strips. */
.rvw-facts-band {
  max-width: none;
  margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
  background: var(--rvwx-dark-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(0.5rem, 1vw, 0.75rem);
  color: var(--rvwx-text);
  --fg: var(--rvwx-text);
  --fg-soft: var(--rvwx-text-soft);
  --focus-ring: var(--rvwx-gold);
  --rule: var(--rvwx-line);
  --line: var(--rvwx-line);
}

.rvw-facts {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--inset);
  max-width: var(--max);
  display: grid;
  gap: var(--s4);
  min-width: 0;
}

@media (min-width: 48em) {
  .rvw-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Dark glass metric card with a very subtle drifting glow behind the number.
   The glow is one compositor-friendly transform loop, exists only under the
   full-motion flag, and dies under reduced motion and Save-Data. */
.rvw-facts__item {
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: grid;
  gap: var(--s2);
  align-content: start;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rvwx-gold-line);
  border-radius: 16px;
  padding: clamp(1.125rem, 2.2vw, 1.5rem);
  backdrop-filter: blur(6px);
  transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rvw-facts__item::before {
  content: "";
  position: absolute;
  left: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 192, 126, 0.14), transparent 70%);
  pointer-events: none;
}

[data-enhanced][data-motion="full"] .rvw-facts__item::before {
  animation: rvwx-glow-drift 14s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

@keyframes rvwx-glow-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(75%, 55%); }
}

@media (hover: hover) and (pointer: fine) {
  .rvw-facts__item:hover {
    border-color: rgba(227, 192, 126, 0.45);
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 20px var(--rvwx-glow);
  }
}

.rvw-facts__value {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.15;
  color: var(--rvwx-text);
}

.rvw-facts__label {
  position: relative;
  font-size: var(--t-small);
  color: var(--rvwx-text-soft);
  line-height: 1.5;
}

/* ---- Key takeaways: the bento grid ---- */
.rvw-themes {
  max-width: none;
  margin: 0;
  background: var(--rvwx-dark-deep);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(2.5rem, 4.5vw, 3.75rem);
  color: var(--rvwx-text);
  --fg: var(--rvwx-text);
  --fg-soft: var(--rvwx-text-soft);
  --rule: var(--rvwx-line);
  --line: var(--rvwx-line);
}

.rvw-themes__plate {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--inset);
  background: transparent;
  border: 0;
}

.rvw-themes__list {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--s4);
  min-width: 0;
}

@media (min-width: 52em) {
  .rvw-themes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Bento block: dark surface, gold side rail, Aarav's named 4px hover lift. */
.rvw-themes__item {
  position: relative;
  min-width: 0;
  max-width: none;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--rvwx-line);
  border-left: 2px solid rgba(227, 192, 126, 0.4);
  border-radius: 16px;
  padding: var(--s4) var(--s5);
  color: var(--rvwx-text-soft);
  line-height: 1.55;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rvw-themes__item::before { content: none; }

@media (hover: hover) and (pointer: fine) {
  .rvw-themes__item:hover {
    transform: translateY(-4px);
    border-color: var(--rvwx-gold-line);
    border-left-color: var(--rvwx-gold);
    background-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 20px var(--rvwx-glow);
  }
}

/* ---- Featured proof: the spotlight band ---- */
.rvw-feat {
  max-width: none;
  background: var(--rvwx-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: clamp(2.5rem, 5vw, 4.25rem) 0;
  color: var(--rvwx-text);
  --fg: var(--rvwx-text);
  --fg-soft: var(--rvwx-text-soft);
  --rule: var(--rvwx-line);
  --line: var(--rvwx-line);
}

.rvw-feat > .rvw-kicker,
.rvw-feat > .rvw-h2,
.rvw-feat > .rvw-feat__grid {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--inset);
}

.rvw-feat__grid {
  margin-top: var(--s5);
  display: grid;
  gap: var(--s5);
  min-width: 0;
}

@media (min-width: 62em) {
  .rvw-feat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rvw-feat__card--lead { grid-column: 1 / -1; }
}

/* The 4px hover lift and the pointer spotlight are Aarav's named asks
   (12 Aug 2026), scoped to the featured trio; the archive evidence below
   never moves. The spotlight paints on an overlay via two custom properties
   set by reviews-page.mjs, shown only while data-rvw-spot is present. */
.rvw-feat__card {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--rvwx-dark-2);
  border: 1px solid var(--rvwx-line);
  border-radius: 20px;
  color: var(--rvwx-text);
  padding: clamp(1.375rem, 2.6vw, 2rem);
  display: grid;
  gap: var(--s4);
  align-content: start;
  min-width: 0;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rvw-feat__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    220px circle at var(--rvwx-spot-x, 50%) var(--rvwx-spot-y, 50%),
    rgba(227, 192, 126, 0.15),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.rvw-feat__card[data-rvw-spot]::after { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .rvw-feat__card:hover {
    transform: translateY(-4px);
    border-color: rgba(227, 192, 126, 0.45);
    background-color: #2c3830;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 20px var(--rvwx-glow);
  }
}

.rvw-feat__label {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--rvwx-gold);
}

.rvw-feat__quote { margin: 0; }
.rvw-feat__quote p { margin: 0; color: var(--rvwx-text); line-height: 1.6; max-width: 62ch; }

.rvw-feat__card--lead .rvw-feat__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  line-height: 1.35;
  max-width: 52ch;
}

.rvw-feat__foot {
  display: grid;
  gap: var(--s3);
  border-top: 1px solid var(--rvwx-line);
  padding-top: var(--s3);
  min-width: 0;
}

.rvw-feat__head { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.rvw-feat__who { display: grid; gap: 0; min-width: 0; }

.rvw-feat__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-style: normal;
  color: var(--rvwx-text);
}

.rvw-feat__when { font-size: var(--t-small); color: var(--rvwx-text-soft); }

.rvw-feat__meta { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

/* A text chip, never a redrawn Google mark. */
.rvw-feat__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--rvwx-gold-line);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--rvwx-gold);
  background: rgba(227, 192, 126, 0.08);
}

.rvw-feat__source { display: block; }

.rvw-feat__initials.face { width: 44px; height: 44px; flex: none; }
.rvw-feat__initials.face:not(.face--letters) {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(227, 192, 126, 0.3);
}
.rvw-feat__initials.face--letters {
  background: rgba(107, 70, 32, 0.35);
  border: 1px solid rgba(227, 192, 126, 0.3);
  color: var(--rvwx-gold);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

/* Featured entrances: the shared stage device, slowed to a premium 480ms
   with a 120ms stagger for these three cards only. */
[data-enhanced] .rvw-feat [data-reveal="stage"] { transform: translateY(12px); }
[data-enhanced] .rvw-feat [data-reveal="stage"].is-in {
  transform: none;
  transition: opacity 480ms var(--ease-arrive), transform 480ms var(--ease-arrive);
  transition-delay: calc(var(--stage-index, 0) * 120ms);
}

/* ---- The full collection: warm dark band, true row-order grid ---- */
.rvw-archive-band {
  max-width: none;
  background: var(--rvwx-dark-warm);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: clamp(2.25rem, 4.5vw, 4rem) 0;
  color: var(--rvwx-text);
  --fg: var(--rvwx-text);
  --fg-soft: var(--rvwx-text-soft);
  --focus-ring: var(--rvwx-gold);
  --rule: var(--rvwx-line);
  --line: var(--rvwx-line);
}

.rvw-archive-band__head {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--inset);
  min-width: 0;
}

.rvw-archive-band__head .rvw-h2 { scroll-margin-top: calc(var(--head-h) + 1rem); }
.rvw-archive-band__head .rvw-method { margin-top: var(--s4); }

/* "Reviews from Google" — the official G, unmodified, on its own white tile
   (the treatment Google's brand guidelines specify on coloured grounds). */
.rvw-archive-band__lockup {
  margin: var(--s3) 0 0;
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--rvwx-text-soft);
}

.rvw-glogo {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 6px;
}

/* High-density grid: gap-5 rhythm, three columns from 64em (Aarav, 12 Aug). */
.rvw-grid {
  list-style: none;
  margin: var(--s5) auto 0;
  padding: 0 var(--inset);
  max-width: var(--max);
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

@media (min-width: 48em) {
  .rvw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .rvw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rvw-card { min-width: 0; }

/* Cards arrive with the shared reveal device — a 500ms slide-up, staggered
   across a row by the inline column index. Static motion, reduced motion and
   no-JS all render the settled state through the device's own guards. */
[data-enhanced] .rvw-grid .rvw-card[data-reveal="stage"] {
  opacity: 0;
  transform: translateY(20px);
}

[data-enhanced] .rvw-grid .rvw-card[data-reveal="stage"].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--ease-arrive), transform 500ms var(--ease-arrive);
  transition-delay: calc(var(--stage-index, 0) * 90ms);
}

/* Evidence holds still once arrived: colour, keyline and glow only on hover —
   no transform, ever. */
.rvw-card__inner {
  margin: 0;
  height: 100%;
  background: #212821;
  border: 1px solid var(--rvwx-line);
  border-radius: 16px;
  padding: clamp(1.125rem, 2.5vw, 1.5rem);
  display: grid;
  gap: var(--s4);
  align-content: start;
  min-width: 0;
  transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .rvw-card:hover .rvw-card__inner {
    background-color: #2c3830;
    border-color: rgba(227, 192, 126, 0.4);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px var(--rvwx-glow);
  }
}

.rvw-card__quote { margin: 0; }

.rvw-card__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--rvwx-text);
  line-height: 1.55;
  max-width: 62ch;
}

.rvw-card__foot {
  display: grid;
  gap: var(--s2);
  border-top: 1px solid var(--rvwx-line);
  padding-top: var(--s3);
  min-width: 0;
}

.rvw-card__head { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.rvw-card__meta { margin-left: auto; flex: none; display: grid; gap: 4px; justify-items: end; }
.rvw-card__who { display: grid; gap: 0; min-width: 0; }

/* The per-card provenance chip — honest text, never a redrawn Google mark. */
.rvw-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.55rem;
  border: 1px solid var(--rvwx-gold-line);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--rvwx-gold);
  background: rgba(227, 192, 126, 0.08);
}

.rvw-card__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-style: normal;
  color: var(--rvwx-text);
}

.rvw-card__when { font-size: var(--t-small); color: var(--rvwx-text-soft); }
.rvw-card__source { margin: 0; display: block; }

/* Faces on the dark cards: one ringed disc whether photograph or letters. */
.rvw-card__initials.face:not(.face--letters) {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(227, 192, 126, 0.3);
}

.rvw-card__initials.face--letters {
  background: rgba(107, 70, 32, 0.35);
  border: 1px solid rgba(227, 192, 126, 0.3);
  color: var(--rvwx-gold);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

/* Collapsed archive: the attribute exists only after reviews-page.mjs
   initialises, so a no-JS visitor always sees all 24. Display toggles are
   deliberately not animated. */
[data-rvw-collapsed] .rvw-card:nth-child(n + 9) { display: none; }

.rvw-more {
  max-width: var(--max);
  margin: var(--s5) auto 0;
  padding: 0 var(--inset);
}

.rvw-more__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: var(--rvwx-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transform: none !important;
  transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .rvw-more__btn:hover {
    background-color: rgba(227, 192, 126, 0.14);
    border-color: var(--rvwx-gold);
    color: var(--rvwx-text);
  }
}

.rvw-more__btn:focus-visible {
  outline: 2px solid var(--rvwx-gold);
  outline-offset: 2px;
  background-color: rgba(227, 192, 126, 0.14);
}

.rvw-more__btn:active { background-color: rgba(227, 192, 126, 0.2); }

/* ---- Methodology accordion (native details; JS animates the height) ---- */
.rvw-method {
  border: 1px solid var(--rvwx-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  max-width: 68ch;
  overflow: hidden;
}

/* Flex on the inner span, never the summary: display:flex on a summary
   strips its disclosure role in some engines. */
.rvw-method__summary {
  display: block;
  padding: 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-text);
  font-weight: 700;
  color: var(--rvwx-text);
  transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rvw-method__summary::-webkit-details-marker { display: none; }

.rvw-method__summary-inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 64px;
  padding: var(--s4) var(--s5);
}

@media (hover: hover) and (pointer: fine) {
  .rvw-method__summary:hover { background-color: rgba(255, 255, 255, 0.05); }
}

.rvw-method__summary:focus-visible { background-color: rgba(255, 255, 255, 0.05); }

/* Origin-UI accordion anatomy (Aarav, 12 Aug): circular icon badge, title
   over a muted sub-label, chevron on the right. */
.rvw-method__badge {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--rvwx-gold-line);
  border-radius: 50%;
  color: var(--rvwx-gold);
  background: rgba(227, 192, 126, 0.08);
}

.rvw-method__titles { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }

.rvw-method__sub {
  font-weight: 400;
  font-size: var(--t-small);
  color: var(--rvwx-text-soft);
}

/* The chevron turns over; one small transform, reduced-motion safe. */
.rvw-method__chevron {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--rvwx-gold);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rvw-method[open] .rvw-method__chevron { transform: rotate(180deg); }

/* overflow:hidden is what lets reviews-page.mjs animate the height. */
.rvw-method__body { padding: 0 var(--s5) var(--s5); overflow: hidden; }

.rvw-method__list {
  margin: 0;
  padding-left: 1.1em;
  color: var(--rvwx-text-soft);
  line-height: 1.6;
  font-size: var(--t-small);
}

.rvw-method__list li { margin-bottom: var(--s2); }

/* ---- The close: split banner and the four confirmed routes ----
   Full-bleed on the same warm-dark canvas as the sections above it (12 Aug,
   Aarav: the dark blocks floating on beige strips read as a mismatch). The
   banner and cells now sit as elevated surfaces on the canvas; the page's
   only beige breaths are around the hero frame and at the shell's own
   footer seam. */
.rvw-close {
  max-width: none;
  margin: 0;
  background: var(--rvwx-lift);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: clamp(2.25rem, 4.5vw, 4rem) var(--inset);
  color: var(--rvwx-text);
}

.rvw-close__banner {
  position: relative;
  overflow: hidden;
  max-width: var(--max);
  margin: 0 auto;
  background: var(--rvwx-dark-2);
  border: 1px solid var(--rvwx-line);
  border-radius: 24px;
  padding: clamp(2rem, 3.4vw, 3rem) clamp(1.25rem, 2.6vw, 2.5rem);
  color: var(--rvwx-text);
  display: grid;
  gap: var(--s5);
}

.rvw-close__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 90% at 90% 10%, rgba(227, 192, 126, 0.1), transparent 60%);
  pointer-events: none;
}

/* The closing mark: offset right, quieter than the hero's, and warming
   slightly when the banner is hovered. Same pseudo-element construction —
   no <img>, no accessible name, no tab stop. */
.rvw-close__banner::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(1.5rem, 5vw, 4rem);
  transform: translateY(-50%);
  width: clamp(12rem, 20vw, 18rem);
  aspect-ratio: 625 / 441;
  background: url("/assets/brand/dukes-logo.png") center / contain no-repeat;
  opacity: 0.03;
  filter: grayscale(1);
  pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .rvw-close__banner:hover::after { opacity: 0.05; }
}

/* The banner's copy sits on its own layer above both marks. */
@media (max-width: 64em) {
  .rvw-close__banner::after { display: none; }
}

/* Banner buttons take the cta-3 rounded-md geometry rather than the hero pill.
   (The corner crosshairs shipped 12 Aug and were removed the same day on
   Aarav's instruction.) */
.rvw-close .rvw-cta { border-radius: 10px; }

@media (min-width: 64em) {
  .rvw-close__banner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: center;
  }
  .rvw-close__actions { justify-content: flex-end; }
}

.rvw-close__copy { position: relative; min-width: 0; }
.rvw-close__kicker { color: var(--rvwx-gold); }
.rvw-close__title { color: var(--rvwx-text); }

.rvw-close__body {
  margin: var(--s4) 0 0;
  color: var(--rvwx-text-soft);
  line-height: 1.6;
  max-width: 58ch;
}

.rvw-close__actions {
  position: relative;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
}

/* The four confirmed routes, straight off contactMethods — the divider-grid
   frame: a hairline container whose 2px gaps read as fine rules between the
   cells (grid-feature-cards recipe, Aarav 12 Aug). */
.rvw-contact {
  list-style: none;
  max-width: var(--max);
  margin: var(--s5) auto 0;
  padding: 0;
  display: grid;
  gap: 2px;
  min-width: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--rvwx-line);
  border-radius: 14px;
  overflow: hidden;
}

@media (min-width: 40em) {
  .rvw-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .rvw-contact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rvw-contact__item { min-width: 0; display: grid; }

/* Feature-card cell: wireframe icon on top, gold label, the route, and a
   quiet Connect action. A faint blueprint grid sits behind each cell. */
.rvw-contact__link {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--s3);
  align-content: start;
  min-height: 44px;
  padding: var(--s5);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 22px),
    var(--rvwx-dark-2);
  color: var(--rvwx-text);
  text-decoration: none;
  transform: none !important;
}

/* The rising-fill hover from the approved contact-tile family, in its
   dark-surface tonal form (the same device the reception rail uses) —
   Aarav's 12 Aug ask. The fill animates height because the cell clips it;
   that is this device's recorded exception. */
.rvw-contact__link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: rgba(244, 238, 227, 0.1);
  transition: height 200ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .rvw-contact__link:hover::before { height: 100%; }
}

/* On the lifted foot the divider gaps need a touch more light to stay
   visible against the raised cells. */
.rvw-close .rvw-contact { background: rgba(255, 255, 255, 0.14); }

.rvw-contact__link:focus-visible {
  outline: 2px solid var(--rvwx-gold);
  outline-offset: -2px;
}

.rvw-contact__link:focus-visible::before { height: 100%; transition: none; }
.rvw-contact__link:active::before { height: 100%; background: rgba(244, 238, 227, 0.14); }

.rvw-contact__link > * { position: relative; }

.rvw-contact__iconplate {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--rvwx-gold-line);
  border-radius: 12px;
  color: var(--rvwx-gold);
  background: rgba(227, 192, 126, 0.06);
}

/* The shared glyph set inside the plate: line marks stroke, brand marks fill. */
.rvw-contact__icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rvw-contact__icon--brand {
  fill: currentColor;
  stroke: none;
  width: 19px;
  height: 19px;
}

.rvw-contact__body { min-width: 0; display: grid; gap: 2px; }

.rvw-contact__label {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rvwx-gold);
  font-weight: 700;
}

.rvw-contact__value {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--rvwx-text);
  overflow-wrap: anywhere;
}

.rvw-contact__go {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--rvwx-text-soft);
  transition: color 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rvw-contact__go-arrow {
  display: inline-block;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .rvw-contact__link:hover .rvw-contact__go { color: var(--rvwx-gold); }
  .rvw-contact__link:hover .rvw-contact__go-arrow { transform: translateX(3px); }
}

.rvw-contact__link:focus-visible .rvw-contact__go { color: var(--rvwx-gold); }

/* ---- The shared next-steps block, dressed for this page's dark canvas.
   Page-scoped by body class: the component itself is untouched and keeps its
   own appearance on every other route. ---- */
.page--reviews .steps {
  max-width: none;
  background: var(--rvwx-lift);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin: 0;
  padding-top: clamp(2.25rem, 4.5vw, 3.5rem);
  padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}

.page--reviews .steps > * {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--inset);
}

.page--reviews .steps .h-section { color: var(--rvwx-text); border: 0; }
.page--reviews .steps__list { border-top: 1px solid var(--rvwx-line); padding-top: var(--s4); }

.page--reviews .steps__link {
  background: var(--rvwx-dark-2);
  border: 1px solid var(--rvwx-line);
  border-radius: 16px;
  color: var(--rvwx-text);
}

@media (hover: hover) and (pointer: fine) {
  .page--reviews .steps__link:hover {
    background-color: #2c3830;
    border-color: rgba(227, 192, 126, 0.4);
  }
}

.page--reviews .steps__link:focus-visible {
  outline: 2px solid var(--rvwx-gold);
  outline-offset: 2px;
}

.page--reviews .steps__label { color: var(--rvwx-text); }
.page--reviews .steps__blurb { color: var(--rvwx-text-soft); }
.page--reviews .steps__action { color: var(--rvwx-gold); }

/* ---- Entrances: hero, 8px settle, shared reveal device ---- */
[data-enhanced] .rvw-hero [data-reveal="stage"] { transform: translateY(8px); }
[data-enhanced] .rvw-hero [data-reveal="stage"].is-in { transform: none; }

/* ---- Motion discipline ---- */
.rvw-hero a,
.rvw-feat a,
.rvw-close a { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .rvw-link::after,
  .rvw-link__arrow,
  .rvw-card__inner,
  .rvw-facts__item,
  .rvw-themes__item,
  .rvw-feat__card,
  .rvw-feat__card::after,
  .rvw-cta,
  .rvw-method__chevron,
  .rvw-contact__link,
  .rvw-more__btn { transition: none; }
  .rvw-feat__card:hover,
  .rvw-themes__item:hover { transform: none; }
  .rvw-link:hover .rvw-link__arrow,
  .rvw-link:focus-visible .rvw-link__arrow { transform: none; }
  .rvw-contact__go,
  .rvw-contact__go-arrow,
  .rvw-contact__link::before { transition: none; }
  .rvw-contact__link:hover .rvw-contact__go-arrow { transform: none; }
  .rvw-cta--gold::before,
  .rvw-cta--light::before { transition: none; transform: translateX(-130%) skewX(-18deg) !important; }
  .rvw-facts__item::before { animation: none; }
}

/* ============================================================== *
 * STORY-LED ABOUT — added 8 August 2026.
 * Bottle / deep-bottle / bone / raised parchment / sand / restrained copper,
 * Palatino display, Manrope body, square geometry, fine rules. No gradients,
 * glass, rounded bento cards, glows, parallax or animation on every section.
 * ============================================================== */

/* ---- 2.1 Story hero ---- *
   Type refined in the About revision pass, 8 August 2026. The heading was
   using the shared .h-display--sm scale, which at this measure read as an
   oversized marketing line rather than a mature editorial opening; it now
   has its own controlled scale, tighter line-height and a real optical
   letter-spacing rather than the display face's -0.018em. The standfirst is
   one direct sentence at a comfortable reading size, not the smaller,
   lower-contrast .lede grey. */
/* The shared breadcrumb (build/components.mjs, rendered on every page) uses
   the same combined max-width+margin:auto+padding-inset pattern the hero
   used to — correct on every OTHER page, where nothing beside it needs to
   share its exact left edge, but on About it must line up with the hero
   directly below it. This is a page-scoped override, not an edit to the
   shared component: gated on the body's own `.page--about` class (set in
   build/build.mjs from the page id), so `.crumbs` itself, and every other
   page that renders it, is untouched — verified by generated-output
   byte-comparison. It reproduces the exact two-tier pattern below (full-bleed
   + inset padding on the outer element, max-width + centring on the inner
   one) so the breadcrumb lands on the identical edge as the hero and every
   other About band, rather than merely matching the hero's old, equally
   wrong position. */
.page--about .crumbs { max-width: none; margin: 0; }
.page--about .crumbs__list { max-width: var(--max); margin-inline: auto; }

/* Outer band: full-bleed, owns only the inset padding — the same role
   .abt-slough and .abt-services play for their own content. max-width and
   centring live on .abt-hero__inner below, never doubled up here. */
/* Rebuilt as a full-width cinematic film hero on 9 August 2026, keeping the
   exact two-tier container geometry the earlier alignment fix established:
   .abt-hero owns the inset padding, .abt-hero__inner owns max-width +
   auto margins. Both halves are load-bearing for alignment and neither can
   be dropped. At 1440 the outer padding is 57.6px and the inner's auto
   margins add the remaining 2.4px to reach exactly the 60px the breadcrumb
   and every other section sit at — removing the inner cap during this
   rebuild silently landed the copy at 58px instead, which the hero-film
   spec's edge test then caught.

   Absolute positioning is unaffected by that padding: .abt-hero__backdrop
   and .abt-hero__scrim use inset:0 against .abt-hero's padding box's outer
   edge, so the film still reaches every edge of the section. */
/* Reframed 9 August 2026 from a full-bleed banner into a contained editorial
   frame. The section is now just the page surface plus deliberate outer
   margin; .abt-hero__frame is the framed object, capped at the site's own
   var(--max) and sitting on the same left edge as every other section.
   Measured before: 612px tall at 1440x900 (68% of the viewport), leaving the
   next section as a 166px sliver. After: see .abt-hero__stage's min-height. */
.abt-hero {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.25rem) var(--inset) clamp(1.75rem, 3vw, 2.75rem);
}
/* A mount around the film, added 9 August 2026 to give the hero the same
   "placed on its own surface" treatment as the reviews plate, but at a
   fraction of the strength: this is a picture mat, not a panel. The fallback
   is the page's own recessed tone; where color-mix is supported the mat is
   mixed back most of the way toward the page, so it reads as a shadowline
   around the frame rather than as a second coloured band. */
.abt-hero__frame {
  position: relative;
  background: var(--bone-sunk);
  background: color-mix(in srgb, var(--bone-sunk) 38%, var(--bone));
  padding: clamp(0.5rem, 0.9vw, 0.875rem);
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  /* One column at every width: the stage is the frame's only child now that
     both side rails are gone, so the film keeps the full measure. */
  grid-template-columns: 1fr;
  gap: 0;
}
/* The stage is the film itself: the only thing with a height, so the frame's
   proportions come from the picture rather than from padding. 29rem-32.5rem
   is 464-520px, inside the brief's 460-520 target, and the svh middle value
   keeps it off a short laptop viewport. */
.abt-hero__stage {
  position: relative;
  min-width: 0;
  min-height: clamp(29rem, 54svh, 32.5rem);
  overflow: hidden;
  display: flex;
  /* Top-aligned, not centred. Centring the copy inside the film left the
     eyebrow's text 14px below the two rail labels — close enough to read as
     a mistake rather than as a deliberate relationship. Top-aligning puts
     the eyebrow, both rail labels and the frame's own top edge on one line,
     which is the shared grid alignment this hero is meant to show. */
  align-items: flex-start;
  background: var(--accent-bottle-green);
}
.abt-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--accent-bottle-green);
}
.abt-hero__poster,
.abt-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Horizontal centre always; vertical position tuned per breakpoint below
     so the houses and the street stay in frame rather than being pushed out
     by however much sky or foreground a given aspect ratio crops away. */
  object-position: 50% 58%;
  /* Restrained grade, not a look. The source's right third is a bright
     golden-hour sky that clipped toward white against the cream page; pulling
     brightness back a touch and holding contrast/saturation recovers
     definition in it without darkening the houses, which are the subject.
     Kept this side of a "filter" aesthetic deliberately. */
  filter: brightness(0.94) contrast(1.04) saturate(1.03);
}
.abt-hero__poster { z-index: 0; }
.abt-hero__video {
  z-index: 1;
  opacity: 0;
  /* No transition: the poster IS this film's exact opening frame at the
     same crop, so the two are pixel-identical the moment playback starts —
     an instant swap produces no visible flash, and a fade here would be the
     "additional animation" the brief asks not to add for a handoff that
     needs none. */
}
.abt-hero__video.is-playing { opacity: 1; }
/* Directional scrim: strongest behind the copy on the left, gone by roughly
   two-thirds across, so the terrace of houses and the street the film is
   actually of stay visible on the right rather than the whole scene being
   dimmed under one flat veil. Colour is the genuine bottle green token, not
   plain black, so the darkening reads as the brand's own tone. */
/* The strong-scrim zone is measured from .abt-hero__copy's own max-width
   (46rem) plus the leading inset, in fixed length units rather than
   viewport-relative percentages. Percentage stops were tried first and
   pixel-sampled against real screenshots to check: at 1440 the text sat
   safely inside the fade (11.37:1 / 7.81:1) but at 1024 and 768 the same
   percentages put real rendered text past the fade point, on near-transparent
   scrim over bright sky (measured 3.44:1 and 2.47:1 — both AA failures). The
   underlying cause was that .abt-hero__copy holds close to a constant pixel
   width across breakpoints while a percentage-based stop moves with the
   viewport, so the two drift apart. Anchoring the stops to the copy column's
   own width instead makes the strong zone track the text at every width by
   construction — including narrow phones, where the calculated stop simply
   falls outside the visible viewport and the whole frame stays in the
   opening, near-flat part of the ramp. Re-measured after this change: AA at
   every one of 1440/1024/768/375/320, pixel-sampled the same way. */
.abt-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Two passes, both restrained, neither a flat wash over the picture:
     1. the directional scrim behind the copy, in bottle green, anchored to
        the copy column's own width so it tracks the text at every breakpoint
        (the lesson from the percentage-stop AA failures measured earlier);
     2. a very soft warm-neutral knock-back on the extreme right only, which
        is where the sky is brightest — it lifts that corner off pure white
        without touching the terrace in the middle. */
  /* The ramp is deliberately long and multi-stop. A shorter one (0.78 held
     flat to the copy edge, then down to 0 in 6rem) produced a visible hard
     vertical seam in the picture: a near-flat dark field meeting a fast
     falloff reads as an edge, especially against this film's bright sky.
     Falling away gradually from well inside the copy column removes it. */
  /* One directional scrim only. The right-edge knockback that used to sit
     here was removed 10 August 2026 with the quote seat's green — the right
     side of the film now carries no wash at all. */
  background: linear-gradient(
    90deg,
    rgba(21, 34, 27, 0.9) 0,
    rgba(21, 34, 27, 0.86) calc(var(--abt-hero-copy) * 0.45),
    rgba(21, 34, 27, 0.7) calc(var(--abt-hero-copy) * 0.8),
    rgba(21, 34, 27, 0.46) calc(var(--abt-hero-copy) + 2rem),
    rgba(21, 34, 27, 0.22) calc(var(--abt-hero-copy) + 7rem),
    rgba(21, 34, 27, 0.06) calc(var(--abt-hero-copy) + 13rem),
    rgba(21, 34, 27, 0) calc(var(--abt-hero-copy) + 19rem)
  );
}
/* One declared measure for the copy column, so the scrim stops above and the
   column itself can never drift apart — the failure mode that produced the
   AA misses when they were tuned independently. */
.abt-hero {
  /* Widened from 31rem on 9 August 2026. That measure was set when two rails
     took ~22rem out of the frame; with the stage now holding the full width, a
     31rem column read as cramped and wrapped the standfirst onto a fourth line,
     which pushed the stage past the brief's containment band at 1366x768. The
     scrim stops are calc()-anchored to this value, so they follow it. */
  --abt-hero-copy: 35rem;
  --abt-hero-gutter: clamp(1.5rem, 2.6vw, 2.75rem);
}
.abt-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: clamp(1.5rem, 2.6vw, 2.25rem) var(--abt-hero-gutter);
}
.abt-hero__copy { min-width: 0; max-width: var(--abt-hero-copy); }

/* ---- Hero proof line ---- *
   Replaced the two side rails on 9 August 2026. The rails were removed for the
   reasons recorded in build/pages/about.mjs; this is what took their place.
   One line, inside the copy column so it sits on the same scrim that already
   carries the headline — no new surface, no third panel. It reads as the last
   line of the copy block, which is why it takes the standfirst's own soft
   on-deep colour rather than announcing itself. */
.abt-hero__proof {
  margin: var(--s4) 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--t-small);
  color: var(--on-deep-soft);
}
.abt-hero__proof-stars {
  color: var(--sand);
  letter-spacing: 0.12em;
  /* Decorative: the same figure is in the text beside it, so this is
     aria-hidden in the markup and must never be the only carrier. */
}

/* ---- About hero, revision 9 August 2026 ---- *
   Every rule below is `.abt-hero`-scoped and owns its own component. The
   shared `.eyebrow`, `.btn` and `.btn--primary` classes are deliberately no
   longer used in this hero, so nothing here can reach another page and
   nothing there can reach back in.

   Type: the eyebrow was 12px and read as a faint label; the standfirst and
   the H1 were the identical ink, so the block had no internal hierarchy.
   The eyebrow steps up to 13px and the standfirst gets its own weight,
   measure and rhythm — hierarchy from size, spacing and measure rather than
   from dropping anyone below AA. */
.abt-hero__eyebrow {
  margin: 0 0 var(--s3);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  /* Was --accent-brass-deep, tuned for the page's warm cream. Now sits over
     the film's scrim instead, so it takes --sand (the champagne/muted-gold
     token already used for every other on-dark eyebrow in About — Slough,
     evidence, testimonials). currentColor on .abt-act__eyebrow's own thread
     rule means the brass hairline above the label follows automatically. */
  color: var(--sand);
}
.abt-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 1.6rem + 1.9vw, 3.125rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  /* Warm ivory on the scrim, replacing --ink (near-black, tuned for the
     cream page background this heading no longer sits on). */
  color: var(--on-deep);
  text-wrap: balance;
  max-width: 18ch;
}
.abt-hero__standfirst {
  margin: var(--s4) 0 0;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  /* High-contrast warm neutral on the scrim: --on-deep-soft, the same token
     used for secondary on-dark copy elsewhere in About (the testimonials
     score card's review count, the evidence cards' supporting lines) —
     legible without competing with the heading above it for weight. */
  color: var(--on-deep-soft);
  font-weight: 500;
  /* Narrowed from 48ch (a ch value) to a fixed rem on 9 August 2026. The
     heading's own max-width is 18ch of ITS font, which shrinks faster across
     the responsive clamp than the standfirst's much narrower font-size
     clamp — so any ch value tuned to sit narrower at 1440 drifted wider than
     the heading again by 1024 and 768. A flat rem measure holds a stable
     relationship instead: 21rem sits narrower than the heading's rendered
     width at 1440 (450px), 1024 (405px) and 768 (362px) — measured, not
     assumed — while still reading as a comfortable ~36-38 character line for
     body copy. */
  max-width: 21rem;
  text-wrap: pretty;
}
.abt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s4);
  margin-top: var(--s6);
}

/* Both actions share one skeleton, so they read as a deliberate pair; only
   the surface, ink and accent differ, which is what keeps the hierarchy
   obvious without making the secondary look disabled. */
.abt-hero__primary,
.abt-hero__secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--s3) var(--s6);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-weight: 700;
  letter-spacing: 0.005em;
  text-decoration: none;
  /* Explicit properties only. No transform on the control itself, ever:
     nothing lifts, sinks, scales or slides. */
  transition:
    background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.abt-hero__action-label { display: inline-flex; align-items: center; gap: 8px; }
/* The static arrow keeps its "this goes somewhere" affordance and never
   travels — arrow movement is explicitly out. */
.abt-hero__secondary-arrow { display: inline-block; }

/* The one micro-interaction: a fine inset rule that grows from the centre
   outward. transform: scaleX only, on a decorative pseudo-child, so the
   control's own box never moves and no layout property is touched. */
.abt-hero__rule {
  position: absolute;
  left: var(--s5);
  right: var(--s5);
  bottom: 9px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

/* Primary: bottle green, warm ivory, a muted-gold hairline held inside the
   edge. The gold is a fine inset ring, not a glow or a shadow. */
/* NOTE: `--bottle` is reassigned further down this stylesheet to
   `--surface-olive-charcoal` (#1d241f), a near-black charcoal — it no longer
   means bottle green. The genuine bottle green is `--accent-bottle-green`
   (#315345), which is what the brief asks for and what this uses. Measured
   7.41:1 against the warm ivory label. */
.abt-hero__primary {
  background: var(--accent-bottle-green);
  color: var(--on-deep);
  border-color: var(--accent-bottle-green);
  box-shadow: inset 0 0 0 1px rgba(197, 166, 106, 0.32);
}
.abt-hero__primary .abt-hero__rule { background: var(--accent-champagne); }

/* Secondary: warm parchment, dark ink, a bronze hairline. Same skeleton,
   quieter voice — never a grey patch. */
.abt-hero__secondary {
  background: var(--bone-sunk);
  color: var(--ink);
  border-color: rgba(111, 61, 27, 0.34);
  box-shadow: inset 0 0 0 1px rgba(111, 61, 27, 0.14);
}
.abt-hero__secondary .abt-hero__rule { background: var(--copper-deep); }

@media (hover: hover) and (pointer: fine) {
  .abt-hero__primary:hover {
    background: #27453a;
    border-color: #27453a;
    box-shadow: inset 0 0 0 1px rgba(197, 166, 106, 0.58);
  }
  .abt-hero__secondary:hover {
    background: #ecdfc9;
    border-color: var(--copper-deep);
    box-shadow: inset 0 0 0 1px rgba(111, 61, 27, 0.28);
  }
  .abt-hero__primary:hover .abt-hero__rule,
  .abt-hero__secondary:hover .abt-hero__rule { transform: scaleX(1); }
}
/* Pressed state, on every pointer type including touch. Colour only. */
.abt-hero__primary:active { background: #1f382e; border-color: #1f382e; }
.abt-hero__secondary:active { background: #dfd0b6; border-color: var(--copper-deep); }

/* Keyboard focus is at least as strong as hover and completely immediate:
   no transition on the way in, and the rule is already drawn. */
.abt-hero__primary:focus-visible,
.abt-hero__secondary:focus-visible {
  transition: none;
  outline: 3px solid var(--copper-deep);
  outline-offset: 3px;
}
.abt-hero__primary:focus-visible {
  background: #27453a;
  border-color: #27453a;
  box-shadow: inset 0 0 0 1px rgba(197, 166, 106, 0.58);
}
.abt-hero__secondary:focus-visible {
  background: #ecdfc9;
  border-color: var(--copper-deep);
}
.abt-hero__primary:focus-visible .abt-hero__rule,
.abt-hero__secondary:focus-visible .abt-hero__rule { transition: none; transform: scaleX(1); }

/* Reduced motion: the state still arrives in full, it simply does not
   animate on the way. */
@media (prefers-reduced-motion: reduce) {
  .abt-hero__primary,
  .abt-hero__secondary,
  .abt-hero__rule { transition: none; }
}
/* .abt-hero__media, .abt-threshold-panel*, .abt-hero__image and the
   two-column/--copy-only grid rules that used to live here were removed
   9 August 2026 with the hero's rebuild into a full-bleed film composition.
   They served the side-by-side still-photo layout, which was never live on
   this build (see the render() comment above publishableHeroPhoto's old call
   site) — about-threshold.mjs, the module that drove the curtain reveal on
   [data-threshold-ready], is left as-is: that attribute no longer appears in
   the markup, so the module's own first line (a querySelector that finds
   nothing) is already its complete, harmless retirement. The reveal was also
   exactly the kind of extra motion this hero's brief asks to avoid — "the
   video is already the hero's motion" — so its absence now is intentional,
   not a gap. */

/* Vertical focus of the film, tuned per breakpoint so the terrace of houses
   and the street stay in frame rather than being pushed out by however much
   sky or foreground a given crop keeps. The contained frame is wider and
   shorter than the old full-bleed band, so it crops more vertically and the
   downward bias is stronger than before at every size. */
@media (min-width: 64em) {
  .abt-hero__poster,
  .abt-hero__video { object-position: 50% 64%; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .abt-hero__poster,
  .abt-hero__video { object-position: 50% 60%; }
}
@media (max-width: 47.99em) {
  .abt-hero__poster,
  .abt-hero__video { object-position: 50% 54%; }
}

/* ---- The frame's responsive shape ---- *
   With both rails gone the frame is a single column at every width, so the
   film keeps the full measure instead of surrendering ~22rem of it to two
   panels. Only the stage height still varies by breakpoint. */
/* Short viewports. The brief set two limits that disagree on a 768px-tall
   laptop: a 460-520px film, and no more than 62% of the viewport. At 1366x768
   the copy block's own height put the stage at 489px — inside the pixel band,
   but 0.637 of the screen, which is the limit that actually matters because it
   is what decides whether the next section is visible without scrolling.
   Tightening the film's internal rhythm (not its content) resolves it. */
@media (max-height: 820px) and (min-width: 48em) {
  .abt-hero__inner {
    padding-top: clamp(1.25rem, 2vw, 1.625rem);
    padding-bottom: clamp(1.25rem, 2vw, 1.625rem);
  }
}
/* Phones keep the film, the copy and the two CTAs and nothing else. */
@media (max-width: 47.99em) {
  .abt-hero__stage { min-height: clamp(24rem, 62svh, 28rem); }
  /* The mount is a desktop refinement. On a phone the copy wraps far harder —
     at 320px the film runs 605px tall — and the mat's 16px of vertical padding
     was enough to push the following section off screen (measured gap 78px
     against the 80px floor). The film takes every pixel here instead. */
  .abt-hero__frame { padding: 0; background: none; }
}

/* ---- Entrance ---- *
   Rebuilt 9 August 2026 on direct instruction to replace the plain opacity
   fade with something more deliberate, explicitly not curtains — this site
   already owns that device (public/assets/js/hero-film.mjs's shutter panels,
   about-threshold.mjs's threshold reveal) and reusing its shape here would
   read as the same trick twice rather than as this section's own moment.

   Instead the frame opens as an aperture: a clip-path inset collapses in
   from both long edges toward the centre, so the film appears to unfold
   outward from its own centreline as one composition. (It opened a triptych
   before the rails were removed; the same gesture now opens the film alone.)
   Still one property family (clip-path + opacity), still transform/opacity-
   adjacent for compositor performance, still a single run on load. */
[data-enhanced][data-motion="full"] .abt-hero__frame {
  opacity: 0;
  animation: abt-hero-in 460ms cubic-bezier(0.22, 1, 0.36, 1) 60ms forwards;
}
@keyframes abt-hero-in {
  from { opacity: 0; clip-path: inset(0 42% 0 42%); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-enhanced][data-motion="full"] .abt-hero__frame {
    opacity: 1;
    animation: none;
    transform: none;
    clip-path: none;
  }
}

/* ---- 2.2 The reason Dukes exists / journey ---- */
.abt-journey { max-width: var(--max); }
.abt-journey__origin { max-width: 62ch; font-size: 1.0625rem; line-height: 1.7; color: var(--ink); }
.abt-journey__milestones {
  list-style: none;
  margin: var(--s6) 0;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
}
.abt-journey__milestone {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--s5);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
}
.abt-journey__milestone-year { margin: 0; font-family: var(--font-display); color: var(--copper); }
.abt-journey__milestone-detail { margin: 0; color: var(--fg-soft); }
.abt-journey__quote {
  margin: var(--s6) 0 0;
  padding: var(--s5) 0 var(--s5) var(--s5);
  border-left: 3px solid var(--copper);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--ink);
  max-width: 56ch;
}
.abt-journey__image { margin-top: var(--s6); max-width: 34rem; }
@media (max-width: 34em) {
  .abt-journey__milestone { grid-template-columns: 1fr; gap: var(--s1); }
}

/* ---- 2.3 The person behind Dukes ---- */
.abt-person { max-width: var(--max); }
.abt-person__grid { display: grid; gap: var(--s7); }
.abt-person__portrait { min-width: 0; }
.abt-person__portrait img,
.abt-person__portrait .abt-placeholder {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border: 1px solid var(--rule-strong);
}
.abt-person__copy { min-width: 0; }
.abt-person__title { margin: var(--s2) 0 0; font-size: var(--t-small); letter-spacing: 0.04em; color: var(--copper); text-transform: uppercase; }
.abt-person__bio { margin: var(--s4) 0 0; max-width: 58ch; line-height: 1.7; color: var(--ink); }
.abt-person__handles { margin: var(--s3) 0 0; color: var(--fg-soft); }
.abt-person__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
@media (min-width: 56em) {
  .abt-person__grid { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); align-items: start; }
}

/* ---- 2.4 How Dukes can help — image-led route cards ---- *
   About visual-refinement brief, 8 August 2026, §3: a substantial approved
   photograph above a disciplined text region, higher text/action contrast
   than the previous icon-led cards, and a centre-out rule under the action
   label in place of the old whole-card lift. */
/* Section leading space trimmed 9 August 2026. The hero pass cut its own
   share of the gap under the actions and flagged that the remainder belonged
   to this band; this brief puts the section wrapper in scope, so it is
   collected here. */
.abt-services { max-width: var(--max); padding-top: clamp(1.5rem, 2.4vw, 2.25rem); }
/* Desktop-only trim of this section's trailing space. The seam matters at
   laptop heights; on mobile the page is a scroll anyway and the normal
   rhythm is kept. */
@media (min-width: 64em) {
  /* Tightened again 9 August 2026, alongside removing the "Next" link: with
     continuation now carried by layout alone, the seam is trimmed further so
     the dark Slough band is already visibly entering the viewport at typical
     laptop scroll rests, not merely close below the fold. */
  .abt-services { padding-bottom: clamp(0.75rem, 1.4vw, 1.25rem); }
  /* Desktop-only rhythm trim. Body padding stays generous enough that no
     line of copy tightens (measured 3 lines at 1366, unchanged); these are
     the gaps around the copy, not the copy's own breathing room. */
  .abt-services .abt-cards { margin-top: var(--s4); }
  .abt-services .abt-card__body { padding: 1.15rem clamp(1.25rem, 1.6vw, 1.75rem) 1.25rem; }
  .abt-services .abt-card__action { padding-top: var(--s4); }
}

/* The named "Next" link that used to share this header with the heading was
   removed 9 August 2026 (presentation-layer navigation, not editorial
   content), so the header is a single stacked block again. */
.abt-services__head { display: grid; gap: var(--s3); }
.abt-cards {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.25rem, 2vw, 2rem);
}
/* Tablet is a deliberate 2+1, not three ~220px columns of cramped copy
   (design standard §3). Three equal columns only start once each one has
   real room — 64em/1024px — so 768 and 640 get the wider, readable pair
   with the third card taking the full row beneath. */
@media (min-width: 40em) {
  .abt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abt-card:last-child { grid-column: 1 / -1; }
  .abt-card:last-child .abt-card__link { flex-direction: row; align-items: stretch; }
  .abt-card:last-child .abt-card__media { flex: 0 0 42%; aspect-ratio: auto; }
  .abt-card:last-child .abt-card__body { flex: 1; justify-content: center; }
}
/* Desktop is a feature plus a pair, not three identical columns — rebuilt
   9 August 2026. Three equal cards, each photograph-over-copy at the same size,
   read as a row of tiles laid out left to right rather than as an edited page:
   nothing led, nothing followed, and the eye had no reason to start anywhere.

   The horizontal variant this promotes is not new. It already existed for the
   40em tablet row (see the block above), where the odd card out turns into an
   image-beside-copy band. Desktop now uses that same device for the FIRST
   route, so the section opens on the landlord service at full width and the
   two remaining routes sit beneath it as a pair. One composition, one
   hierarchy, and no new component invented to get it. */
@media (min-width: 64em) {
  .abt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Undo the tablet row treatment: at this width the last card is an ordinary
     column again, and the first card is the one that spans. */
  .abt-card:last-child { grid-column: auto; }
  .abt-card:last-child .abt-card__link { flex-direction: column; }
  .abt-card:last-child .abt-card__media { flex: none; aspect-ratio: 3 / 2; }
  .abt-card:last-child .abt-card__body { justify-content: flex-start; }

  .abt-card:first-child { grid-column: 1 / -1; }
  .abt-card:first-child .abt-card__link { flex-direction: row; align-items: stretch; }
  /* Bigger, as asked: the feature image runs 55% of the full row rather than
     a third of it, so the photograph finally has room to be a photograph.
     aspect-ratio is released so it fills the band's height instead of
     dictating it. */
  .abt-card:first-child .abt-card__media { flex: 0 0 55%; aspect-ratio: auto; min-height: 22rem; }
  .abt-card:first-child .abt-card__body {
    flex: 1;
    justify-content: center;
    padding: clamp(1.75rem, 3vw, 3rem);
    gap: var(--s4);
  }
  /* The feature carries the section's largest card type. Still well below the
     h2 above it, so the heading keeps the section. */
  .abt-card:first-child .abt-card__title { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); }
  .abt-card:first-child .abt-card__detail { font-size: 1.0625rem; max-width: 42ch; }
  /* .abt-card__action carries margin-top:auto so the CTA sits on the card's
     bottom edge in the column cards, where every card must end on the same
     line. In this centred row there is no bottom edge to meet — the auto
     margin just pushed the link away from the copy it belongs to and left a
     void through the middle of the feature. */
  .abt-card:first-child .abt-card__action { margin-top: 0; }
}
.abt-card { min-width: 0; }
/* One composed object: image, copy, action and frame belong to one link, not
   a photograph sitting on a plain box (design standard §3). One clear
   accessible name, no nested second link. The card never changes size or
   position on hover, so rapid pointer crossing cannot open a boundary loop. */
.abt-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  /* Adopted from the homepage journey cards on 10 August 2026, on direct
     instruction (the cream About cards read as the weaker sibling of the
     homepage's dark route cards). Same deep panel the Google-reviews anchor
     and the enquiry card already use, so the page's strongest surfaces are
     one family. The sand top rule is the shield cards' own dark-card device.
     Every state mechanic below — gated hover, ungated press, instant
     focus-visible, centre-out rule — is unchanged; only the colours moved
     to the on-deep set. */
  background: var(--bottle);
  border: 1px solid var(--rule-on-deep);
  border-top: 2px solid var(--sand);
  color: var(--on-deep);
  text-decoration: none;
  cursor: pointer;
  /* One duration in both directions, so hover-off settles on exactly the
     same curve it arrived on — no robotic second phase. */
  transition: background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* 3:2 matches the sources' native 1536x1024 exactly, so nothing is cropped —
   the previous 4:3 window cut the sides off every frame — and the card loses
   roughly 30px of height on the way, which is what lets the next section's
   dark edge reach the viewport on a laptop. */
.abt-card__media { position: relative; display: block; min-width: 0; aspect-ratio: 3 / 2; overflow: hidden; }
/* The same grade the hero film carries, so the photographs across the page
   read as one shoot rather than as three separate stock frames dropped in.
   Slightly pulled-back brightness with a little more contrast and warmth is
   what stops them looking untreated. */
.abt-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.96) contrast(1.05) saturate(1.03);
}
/* A short shade rising from the bottom edge of each photograph. Separate from
   .abt-card__overlay on purpose: that veil is flat and its opacity is the
   hover/focus/active signal, so folding a gradient into it would have made the
   card's state change animate the grade too. Deliberately shallow — fully
   clear by 45% up the frame — so it seats the image against the card edge
   without reading as a vignette. */
.abt-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.26) 0%,
    rgba(0, 0, 0, 0.09) 20%,
    rgba(0, 0, 0, 0) 45%
  );
  pointer-events: none;
}
/* The image-darkening overlay. Opacity only — the photograph itself never
   scales, zooms or moves (design standard §5). */
.abt-card__overlay {
  position: absolute;
  inset: 0;
  background: var(--bottle);
  /* A resting veil, deliberately tiny: enough to seat the photograph into
     the card and take the glare off it, never enough to mute detail. It is
     the same restraint as the approved homepage journey scrim — hover then
     refines it by 0.06, not by a dramatic darkening. */
  opacity: 0.1;
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.abt-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
  padding: clamp(1.25rem, 1.6vw, 1.75rem);
  flex: 1;
}
.abt-card__title,
.abt-card__detail,
.abt-card__action { min-width: 0; }
/* The audience line, in the homepage journey cards' own voice: tracked caps
   in sand above the serif title. The label text comes from data/about.mjs,
   which borrows the vocabulary from data/routes.mjs. */
.abt-card__eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--sand);
}
.abt-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  line-height: 1.25;
  font-weight: 700;
  color: var(--on-deep);
  overflow-wrap: break-word;
}
.abt-card__detail {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--on-deep-soft);
  max-width: 38ch;
  overflow-wrap: break-word;
}
.abt-card__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--s5);
  padding-bottom: 6px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--sand);
  width: fit-content;
  max-width: 100%;
}
/* The static baseline rule: visible at rest, so the action reads as
   actionable before any hover, not only after it. */
.abt-card__action::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--sand);
  opacity: 0.5;
}
/* The centre-out rule: a pseudo-element scaled from the middle toward both
   edges, never swept left-to-right. */
.abt-card__action::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--sand);
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* The arrow is a static affordance. Its 3px hover travel is removed: arrow
   movement is explicitly out under this brief. */
.abt-card__arrow { display: inline-block; }

/* Keyboard focus: same colour/border emphasis and the same centre-out rule
   as hover, shown IMMEDIATELY — `transition: none` on every animatable part,
   so a keyboard user never watches the indicator or the rule ease in — and
   never any positional movement. Works on every pointer type, unlike the
   gated :hover block below. */
/* State surfaces are computed lifts of the same deep panel (rgb(29,36,31)):
   hover +5 per channel-ish, press further — the exact restraint the cream
   cards used (#f2ebdc / #e9dfca), translated to the dark set. */
.abt-card__link:focus-visible {
  transition: none;
  background: #242d27;
  border-color: var(--sand);
  outline: 3px solid var(--sand);
  outline-offset: 2px;
}
.abt-card__link:focus-visible .abt-card__action::after {
  transition: none;
  transform: scaleX(1);
}
.abt-card__link:focus-visible .abt-card__overlay { transition: none; opacity: 0.16; }

/* Hover: gated, because a touch tap would otherwise leave a card stuck in a
   hover state with no pointer there to leave it. Colour, border, the
   image-darkening overlay, the centre-out rule and a 3px arrow move. No
   lift, no scale, no zoom, no layout property. */
@media (hover: hover) and (pointer: fine) {
  .abt-card:hover .abt-card__link {
    background: #242d27;
    border-color: var(--sand);
  }
  /* A 0.06 refinement of the resting veil — visible, never dramatic. */
  .abt-card:hover .abt-card__overlay { opacity: 0.16; }
  .abt-card:hover .abt-card__action::after { transform: scaleX(1); }
}

/* The pressed state is NOT inside the hover gate: a coarse/touch pointer gets
   a real, visible press too (design standard §5). Deeper surface and a
   stronger overlay than hover, so a tap is unambiguous on a phone. */
.abt-card__link:active {
  background: #2b362f;
  border-color: var(--sand);
}
.abt-card__link:active .abt-card__overlay { opacity: 0.22; }
.abt-card__link:active .abt-card__action::after { transform: scaleX(1); }

/* Reduced motion keeps every colour, border, overlay and rule state — the
   card stays completely understandable — and removes only movement and the
   easing of it. */
@media (prefers-reduced-motion: reduce) {
  .abt-card__link,
  .abt-card__overlay,
  .abt-card__action::after { transition: none; }
}

/* ================= About: the journey thread ==================== *
   /about/ is one route through six acts — start, choose, place, proof, trust,
   act — and it has to read as one, not as six unrelated blocks that happen to
   be stacked.

   The thread is a single recurring detail: a short brass hairline above every
   act's eyebrow. It is drawn in currentColor, so it takes the copper of a
   light act and the champagne of a dark one without a second rule and without
   ever being restated per section. It is the crest's precision — one exact
   line, repeated — rather than any borrowed crown or lion.

   About-scoped throughout. The contact act's eyebrow belongs to the shared
   contact panel, so it is reached here by an About-scoped selector rather
   than by editing the component, which /receptionist/ also renders. */
.abt-act__eyebrow,
.abt-contact .dc__eyebrow {
  position: relative;
  padding-top: calc(var(--s3) + 1px);
}
.abt-act__eyebrow::before,
.abt-contact .dc__eyebrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 1px;
  background: currentColor;
  /* The thread reads as fine detailing, not as a divider. */
  opacity: 0.55;
}

/* Deliberate surface alternation. The hero and this act were both the plain
   warm page, so the journey opened with two identical surfaces and the first
   change of scene did not arrive until the dark Slough band. Raising this act
   onto ivory gives the sequence page / raised / dark / raised / deep / page,
   with no two neighbouring acts sharing a surface. The treatment is the one
   already used by the customer-proof act, not a new one. */
/* Flipped 10 August 2026 from --bone-raised on direct instruction (the cream
   read as "white background" against the photographs). The section now takes
   the warm greige and the cards go back to cream — the same plate-and-card
   relationship the reviews section established, inverted. One material system,
   two sections. Neighbour check: differs from the hero's page surface and from
   .abt-slough's deep green, so the no-shared-surfaces journey rule holds. */
.abt-services {
  max-width: none;
  background: var(--bone-sunk);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.abt-services > * {
  max-width: var(--max);
  margin-inline: auto;
}

/* ---- 2.5 Focused on Slough property — the three-frame local sequence ---- *
   About visual-refinement brief §4-5: a full-width deep-bottle surface makes
   the section boundary obvious without a chapter number, and the frames
   settle in once via the shared reveal system (data-reveal="slough" in
   public/assets/js/reveal.mjs) rather than a bespoke observer. */
.abt-slough {
  max-width: none;
  background: var(--bottle);
  color: var(--on-deep);
  padding: clamp(2.5rem, 5vw, 4rem) var(--inset);
}
/* Seam spacing only, desktop. The dark section keeps its content, colour and
   treatment; its leading space tightens so the chapter heading sits close
   enough to the contrasting edge to register as the start of something new
   rather than an empty dark band. Placed after the base rule above, whose
   `padding` shorthand would otherwise win on source order. */
@media (min-width: 64em) {
  /* Tightened further 9 August 2026 for the same reason as .abt-services'
     trailing space above: the seam is what makes continuation legible without
     a "Next" label, so both sides of it are trimmed together. */
  .abt-slough { padding-top: clamp(1.25rem, 2vw, 1.75rem); }
}
/* The intro sits on the SAME grid as the frames. It previously carried its
   own 42rem auto-centred measure while the frames used var(--max), so at
   1440 the heading began at 384px and the photographs at 60px — two blocks
   that read as unrelated. The container now matches; the reading measure is
   kept on the lede itself, where it belongs. */
.abt-slough__intro { max-width: var(--max); margin: 0 auto; text-align: left; }
.abt-slough__intro .eyebrow { margin-bottom: var(--s2); }
.abt-slough__intro .h-section { color: var(--on-deep); }
.abt-slough__intro .lede { color: var(--on-deep-soft); margin-top: var(--s3); max-width: 42rem; }
.abt-slough__frames {
  list-style: none;
  margin: var(--s7) auto 0;
  padding: 0;
  max-width: var(--max);
  display: grid;
  gap: var(--s5);
}
@media (min-width: 40em) and (max-width: 63.99em) {
  .abt-slough__frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abt-slough__frame:last-child { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .abt-slough__frames { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.abt-slough__frame { min-width: 0; }
.abt-slough__figure { margin: 0; }
.abt-slough__pic { aspect-ratio: 4 / 5; overflow: hidden; position: relative; }
.abt-slough__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The "Photo: … · source · licence · modified" line that used to live here
   moved to /about/image-credits/ on 9 August 2026 (build/pages/about.mjs
   §2.5), so the caption is the place name alone; .abt-slough__place is the
   only rule this needs now. */
.abt-slough__caption { margin-top: var(--s3); font-size: var(--t-small); }
.abt-slough__place { font-weight: 700; color: var(--on-deep); }

/* Fine-pointer frame response. A photograph is not a control, so this must
   not imitate one: no lift, no shadow, no cursor change. The frame acknowledges
   the pointer with a 1.02 scale inside its own clip and a single hairline
   keyline, both of which read as the image settling rather than a button
   offering itself. transform and opacity only, 200ms, and gated so touch
   never inherits a hover state it cannot leave. */
.abt-slough__pic::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--sand);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .abt-slough__pic img,
  .abt-slough__pic::after {
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .abt-slough__figure:hover .abt-slough__pic img { transform: scale(1.02); }
  .abt-slough__figure:hover .abt-slough__pic::after { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .abt-slough__pic img,
  .abt-slough__pic::after { transition: none; }
  .abt-slough__figure:hover .abt-slough__pic img { transform: none; }
}
/* One purposeful transition for this one section — not a generic fade-up on
   every text block. Retimed in the revision pass to ~420ms with a 0/60/120ms
   stagger (design standard §6: section reveals 360-480ms, modest stagger).
   Default state (no JS, reduced motion, Save-Data) is fully visible
   immediately; reveal.mjs only ever adds is-in after the element already
   resolves visible for those cases. */
[data-enhanced][data-motion="full"] .abt-slough__frame {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-enhanced][data-motion="full"] .abt-slough__frame:nth-child(2) { transition-delay: 60ms; }
[data-enhanced][data-motion="full"] .abt-slough__frame:nth-child(3) { transition-delay: 120ms; }
[data-enhanced][data-motion="full"] .abt-slough__frame.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-enhanced][data-motion="full"] .abt-slough__frame {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- 2.6 What clients say about working with Dukes ---- *
   Rebuilt in the About revision pass, 8 August 2026, as a full-width
   customer-proof band (design standard §7) — not a narrow rail beside a
   large paragraph.
   The class is `.abt-testimonials`, deliberately NOT `.abt-proof`: that name
   is already taken by a much older, still-live list reset near line 15522
   (`.abt-routes, .abt-proof { display:grid; margin:0; padding:0 }`) which was
   silently stripping this section's band inset and pinning the heading to
   the viewport edge. Renaming, rather than fighting it with specificity,
   is the fix — the old rule belongs to a retired component and is left
   untouched for the pages that still reference it. */
/* Two tiers, kept strictly apart: this section owns the page inset only, and
   .abt-testimonials__plate owns width, centring and surface. Combining both
   roles on one element double-applies the inset at wide viewports. */
.abt-testimonials {
  max-width: none;
  min-width: 0;
  background: var(--bone);
  padding: clamp(2.5rem, 5vw, 4rem) var(--inset);
}
/* The plate. Narrower than var(--max) so the proof sits in from the page edge
   rather than spanning it, and on --bone-sunk so it is unmistakably its own
   surface: warmer and deeper than the --bone-raised of .abt-services, while
   the near-white cards inside it gain contrast rather than losing it. The
   copper rule along the top is the same brass thread every other act on this
   page is marked with, at the one weight that suits a full plate edge. */
.abt-testimonials__plate {
  /* 68rem -> 72rem -> 78rem on 9 August 2026, on successive requests for more
     room to see the reviews. It still stops short of the page inset, so the
     plate reads as placed rather than as another full-bleed band. */
  max-width: 78rem;
  margin: 0 auto;
  background: var(--bone-sunk);
  border-top: 3px solid var(--copper);
  padding: clamp(2rem, 3.4vw, 3rem) clamp(1.25rem, 2.6vw, 2.5rem);
}
/* Simplified to one column 9 August 2026: the Google-reviews card that used
   to be this head's second column moved to a fixed anchor beside the
   scrolling cards (.abt-rail__anchor below) — see that block for the reason
   and the unchanged content. */
/* Width and centring now belong to .abt-testimonials__plate, so the head only
   flows inside it. It kept var(--max) and var(--inset) here, which inside the
   plate would have insetted an already-insetted box. */
.abt-testimonials__head {
  max-width: none;
  margin: 0;
  padding: 0;
}
.abt-testimonials__intro { min-width: 0; }
.abt-testimonials__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.35vw, 2.625rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 20ch;
}
.abt-testimonials__lede {
  margin: var(--s4) 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 52ch;
}
/* ---- The Google-reviews anchor ---- *
   Moved 9 August 2026 from the section head into a fixed card beside the
   scrolling rail, on direct instruction: it now reads as the source the
   whole row is drawn from. Selectors renamed from .abt-testimonials__score*
   to .abt-rail__anchor* to match its new home; content, tokens and every
   fact are byte-for-byte what the old card carried — the rebuild note this
   replaces (Google's own mark, rating as the loudest figure, count
   secondary, one CTA, no endorsement claim) still applies unchanged. */
.abt-rail__anchor {
  min-width: 0;
  flex: none;
  display: flex;
  flex-direction: column;
  padding: var(--s5);
  background: var(--bottle);
  color: var(--on-deep);
}
@media (min-width: 40em) {
  /* The anchor sits in the same flex row as .abt-rail__scroll, which is the
     pause control stacked above the card window. Left to stretch across that
     whole column the anchor inherited the pause row's height too, so it began
     ~60px above the cards and ended as a tall slab with a dead void under the
     CTA (measured 272x366 against a 272x306 card, 9 August 2026).

     Offsetting by exactly the pause row — its own min-height plus its bottom
     margin — drops the anchor's top onto the card row's top. Stretch then
     resolves its height to precisely the card height, so the anchor reads as
     the first cell of the row rather than a panel behind it. Both numbers are
     the pause button's own declared values, so the two stay locked together
     if either is retuned.

     align-self keeps it off the row's stretch: the anchor is a summary of the
     row, not a card in it, so it sizes to its own content and stops. Matching
     the card height instead left ~100px of empty bottle green under the CTA,
     which read as a slab rather than a card. */
  .abt-rail__anchor {
    width: 17rem;
    margin-top: calc(44px + var(--s4));
    align-self: flex-start;
  }
}
.abt-rail__anchor-brand { margin: 0; display: flex; align-items: center; gap: 10px; }
.abt-rail__anchor-mark { display: block; flex: none; }
.abt-rail__anchor-name {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--on-deep-soft);
}
.abt-rail__anchor-rating { margin: var(--s3) 0 0; display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.abt-rail__anchor-value { font-family: var(--font-display); font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem); line-height: 1; color: var(--on-deep); }
.abt-rail__anchor-stars { color: var(--sand); letter-spacing: 0.18em; font-size: 1.0625rem; }
.abt-rail__anchor-meta { margin: var(--s3) 0 0; font-size: var(--t-small); color: var(--on-deep-soft); }
.abt-rail__anchor-meta strong { color: var(--on-deep); font-weight: 700; }
.abt-rail__anchor-act { margin: var(--s4) 0 0; }
/* The centre-out underline already established for this page's other cards
   (.abt-shield__action::after): a 1px rule at rest, growing from the centre
   to full width on hover/focus, so every CTA on the page shares one motion
   language. The arrow stays a static direction cue, matching .abt-shield__cue. */
.abt-rail__anchor-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: -10px 0;
  padding-bottom: 4px;
  color: var(--on-deep);
  font-weight: 700;
  font-size: var(--t-small);
  /* The ::after bar below is the underline; the browser default on <a> must
     be switched off or the link shows two at once. */
  text-decoration: none;
}
.abt-rail__anchor-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--sand);
  transform: scaleX(0.18);
  transform-origin: center;
}
.abt-rail__anchor-arrow { display: inline-block; color: var(--sand); }
@media (hover: hover) and (pointer: fine) {
  .abt-rail__anchor-link::after { transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1); }
  .abt-rail__anchor-link:hover::after { transform: scaleX(1); }
}
.abt-rail__anchor-link:focus-visible { transition: none; outline: 2px solid var(--sand); outline-offset: 3px; }
.abt-rail__anchor-link:focus-visible::after { transition: none; transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .abt-rail__anchor-link::after { transition: none; }
}

/* ---- The rail ----------------------------------------------------------- *
   BASE STATE IS STATIC AND COMPLETE. Everything below the `.abt-rail` block
   renders a wrapped, fully visible, unclipped grid of all 24 reviews. No
   `overflow: hidden`, no `width: max-content`, no `nowrap`, no animation.
   That is what a visitor gets with JavaScript off, under reduced motion or
   under Save-Data — design standard §6, and the fix for the audit's
   "extremely wide clipped row" blocker.
   The clipping/marquee rules are gated behind [data-rail-state="live"],
   which about-review-rail.mjs sets only after it has confirmed the enhanced,
   full-motion state and appended the duplicate set. */
/* As with the head: the plate owns width and inset now, so the rail simply
   fills it. Leaving var(--max)/var(--inset) here would have insetted it twice. */
.abt-rail {
  --rail-gap: clamp(1rem, 1.6vw, 1.5rem);
  position: relative;
  min-width: 0;
  max-width: none;
  margin: var(--s6) 0 0;
  padding: 0;
}
/* The anchor (Google's rating) and the scrolling cards, side by side from
   40em up — below that the anchor stacks above the cards rather than
   squeezing both into a column too narrow for either. */
.abt-rail__layout {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}
@media (min-width: 40em) {
  .abt-rail__layout { flex-direction: row; align-items: stretch; gap: var(--s6); }
}
.abt-rail__scroll { min-width: 0; flex: 1; }
.abt-rail__window { position: relative; min-width: 0; max-width: 100%; }
.abt-rail__track { display: block; }
/* Edge veils: a soft gradient fade at each edge of the moving row, so cards
   read as entering/leaving through a soft boundary rather than spawning
   abruptly at the clipped edge. Gradient-only is the complete effect and
   works everywhere; backdrop-filter blur is added only where @supports
   confirms the engine has it, and only across these two narrow strips —
   never across the cards or their text. Decorative and inert: aria-hidden,
   pointer-events:none, and only present once the rail is genuinely clipping
   (the static/wrapped base state has no edge to soften). */
.abt-rail__veil {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  /* Narrowed 9 August 2026: at clamp(28px, 6vw, 64px) the veil ran 64px over a
     272px card, so it covered roughly a quarter of a card and read as a
     smeared card rather than a softened boundary. This width stays inside the
     card's own gutter, which is all the clip edge needs. */
  width: clamp(16px, 2.2vw, 30px);
  z-index: 2;
  pointer-events: none;
}
[data-rail-state="live"] .abt-rail__veil { display: block; }
/* These fade to the surface immediately behind the cards, which is now the
   plate (--bone-sunk), not the old --bone-raised section background. A veil
   that fades to a colour the plate no longer uses reads as a grey smear. */
.abt-rail__veil--left {
  left: 0;
  background: linear-gradient(to right, var(--bone-sunk), transparent);
}
.abt-rail__veil--right {
  right: 0;
  background: linear-gradient(to left, var(--bone-sunk), transparent);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .abt-rail__veil {
    /* Reduced from 2px on 9 August 2026: combined with the old 64px width the
       blur was legible as an effect on the card itself. At 1px across a strip
       this narrow it only takes the hard edge off the clip. */
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
  }
}
.abt-rail__set {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rail-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.abt-rail__card {
  margin: 0;
  padding: clamp(1.25rem, 1.6vw, 1.5rem);
  background: var(--surface-page, #fffdf8);
  border: 1px solid var(--line);
  box-shadow: inset 0 3px 0 0 var(--copper);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}
/* Restrained hover: a 4px rise and a stronger border/shadow, real-mouse only.
   Gated on (hover: hover) and (pointer: fine) rather than on a JS-added
   class, so it structurally cannot be triggered by iOS Safari's synthetic
   :hover-on-tap — that media query does not match a touch device regardless
   of what the touch/click sequence does. */
@media (hover: hover) and (pointer: fine) {
  .abt-rail__card {
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .abt-rail__card:hover {
    transform: translate3d(0, -4px, 0);
    border-color: var(--copper);
    box-shadow: inset 0 3px 0 0 var(--copper), 0 8px 20px -8px rgba(31, 26, 20, 0.28);
  }
}
.abt-rail__card:focus-within { border-color: var(--copper); }
@media (prefers-reduced-motion: reduce) {
  .abt-rail__card { transition: none; }
}
/* The verify link sits on the card's baseline whatever the quote length, so
   a row of cards reads as one composed set rather than ragged. */
.abt-rail__quote { flex: 1; }
.abt-rail__head { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.abt-rail__initials {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bottle);
  color: var(--sand);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  overflow: hidden;
}
.abt-rail__who { min-width: 0; }
.abt-rail__name { margin: 0; font-style: normal; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.abt-rail__stars { margin: 2px 0 0; color: var(--copper); letter-spacing: 0.16em; font-size: 0.8125rem; }
.abt-rail__quote { margin: 0; min-width: 0; flex: 1; }
.abt-rail__quote p { margin: 0; color: var(--ink); line-height: 1.6; font-size: 0.9375rem; }
.abt-rail__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -11px 0;
  width: fit-content;
  max-width: 100%;
  color: var(--copper-deep);
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 150ms var(--ease-in-out);
}
@media (hover: hover) and (pointer: fine) {
  .abt-rail__link:hover { color: var(--bottle); }
}
.abt-rail__link:focus-visible { transition: none; outline: 2px solid var(--copper-deep); outline-offset: 2px; }

/* The pause control only exists once the rail is genuinely moving. It is
   hidden in the base state (nothing to pause) and revealed by the live flag,
   at a full 44x44 minimum target. It sits in normal flow above the window,
   right-aligned — an absolutely positioned control collided with the
   aggregate panel above it at some widths. */
.abt-rail__pause {
  display: none;
  margin: 0 0 var(--s4) auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--s4);
  background: var(--surface-page, #fffdf8);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-small);
  font-weight: 700;
  cursor: pointer;
  transition: color 150ms var(--ease-in-out), border-color 150ms var(--ease-in-out);
}
[data-rail-state="live"] .abt-rail__pause { display: flex; width: fit-content; }
@media (hover: hover) and (pointer: fine) {
  .abt-rail__pause:hover { border-color: var(--bottle); color: var(--bottle); }
}
.abt-rail__pause:active { background: var(--bone-sunk); }
.abt-rail__pause:focus-visible { transition: none; outline: 2px solid var(--copper-deep); outline-offset: 2px; }
.abt-rail__pause-glyph {
  width: 10px;
  height: 12px;
  flex: none;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.abt-rail__pause[aria-pressed="true"] .abt-rail__pause-glyph {
  width: 0;
  height: 0;
  border-left: 9px solid currentColor;
  border-right: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* ---- Enhanced-only: the continuous rail -------------------------------- *
   THE SEAM. translateX(-50%) shifts the track by exactly half its own width,
   so the loop only lands on the clone's first card if each half's box is
   exactly half the track. A gap applied BETWEEN the two sets breaks that:
   track = 2·set + gap, so -50% = set + gap/2, and every loop jumps back by
   half a gap (measured: 11.52px of a 23.04px gap).
   The fix is that the track carries NO gap at all; each set carries its own
   trailing gap as padding-right. Each half's box is then exactly
   (cards + inner gaps + one trailing gap), the two halves are identical, and
   -50% is exactly one half — a mathematically exact seam, not a tuned one. */
/* padding-top + matching negative margin: gives the -4px hover lift 8px of
   room to rise into above the clipped edge without the card's top ever
   touching (and being cut by) overflow:hidden, while the negative margin
   pulls that padding back out of the document's own vertical rhythm so nothing
   below the rail shifts down by 8px to make space for it. */
[data-rail-state="live"] .abt-rail__window { overflow: hidden; padding-top: 8px; margin-top: -8px; }
[data-rail-state="live"] .abt-rail__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: abt-rail-scroll var(--rail-duration, 170s) linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
[data-rail-state="live"] .abt-rail__set {
  display: flex;
  flex: 0 0 auto;
  gap: var(--rail-gap);
  padding-right: var(--rail-gap);
  grid-template-columns: none;
}
/* Narrowed from clamp(16rem, 24vw, 20rem) on 9 August 2026. At 20rem only
   about two and a half cards cleared the window, so the row read as three
   reviews rather than as a run of them. 17rem also squares the cards with the
   anchor beside them, so the whole row sits on one module. */
[data-rail-state="live"] .abt-rail__card { flex: 0 0 auto; width: clamp(14rem, 19vw, 17rem); }
/* The duplicate half is decorative: never announced, never focusable, and
   never pointer-interactive, so a click cannot land on a clone. */
[data-rail-clone-set] { pointer-events: none; }
[data-rail-running="true"] .abt-rail__track { animation-play-state: running; }

@keyframes abt-rail-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* Reduced motion never reaches the live branch (the controller returns
   early and leaves data-rail-state="static"), but this is belt and braces
   in case the preference changes after boot. */
@media (prefers-reduced-motion: reduce) {
  [data-rail-state="live"] .abt-rail__track { animation: none; }
}

/* ---- 2.7 Protection you can open — the deep-bottle reassurance band ---- */
.abt-shield {
  max-width: none;
  background: var(--bottle-deep);
  color: var(--on-deep);
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--inset);
}
/* Rebuilt 10 August 2026 as a top bed, on direct instruction (with a bento
   reference supplied). The old head split the heading hard left and pushed the
   lede to the far right (justify-self: end), and it never centred itself — the
   list below carries margin:auto but this head did not, so on wide screens the
   heading strandeded at the page edge while the cards floated centre. One
   left-aligned column, centred like every other act. */
.abt-shield .band__head {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: var(--s4);
}
.abt-shield .eyebrow { margin: 0 0 var(--s3); }
.abt-shield .h-section {
  max-width: 13ch;
  color: var(--on-deep);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 0.98;
}
.abt-shield .lede {
  max-width: 48ch;
  margin: 0;
  color: var(--on-deep-soft);
}
/* (The 64em two-column head split is gone: heading and lede now read as one
   introduction, and the room it wasted goes to the records below.) */
.abt-shield__list {
  list-style: none;
  margin: clamp(2rem, 4vw, 3.5rem) auto 0;
  padding: 0;
  max-width: var(--max);
  display: grid;
  gap: var(--s4);
}
@media (min-width: 40em) {
  .abt-shield__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Bento, not a strip. Four identical cells in a row read as a row of tiles;
   the reference layout the instruction pointed at leads with a wide feature.
   The company record is the one primary-source fact (Companies House) so it
   takes the wide cell; the complaints route closes the set with the second
   wide cell on the opposite side, and the two certificates sit between. The
   diagonal weight is what makes it read as composed. All four records, their
   hrefs, facts and order are byte-identical — this is grid placement only. */
@media (min-width: 64em) {
  .abt-shield__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .abt-shield__item:nth-child(1) { grid-column: span 2; }
  .abt-shield__item:nth-child(4) { grid-column: span 2; }
  /* The wide cells breathe a little harder than the singles. */
  .abt-shield__item:nth-child(1) .abt-shield__card,
  .abt-shield__item:nth-child(4) .abt-shield__card { padding: clamp(1.75rem, 2.6vw, 2.25rem); }
  .abt-shield__item:nth-child(1) .abt-shield__name { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.9rem); }
  /* The registered identity is the feature's payload — let the number carry. */
  .abt-shield__item:nth-child(1) .abt-shield__fact { font-size: 1.0625rem; letter-spacing: 0.02em; }
  .abt-shield__item:nth-child(1) .abt-shield__detail,
  .abt-shield__item:nth-child(4) .abt-shield__detail { max-width: 52ch; }
}
.abt-shield__item { min-width: 0; }
/* The cards are a raise OF the band, not sheets of paper laid on top of it.
   Solid bone panels on deep bottle read as four white documents — the thing
   you are being shown — when each one is really a control that opens a record
   elsewhere. Lifting the band by a few per cent instead keeps them legible as
   surfaces you press, and lets the brass action rule be the brightest thing
   in the card. */
.abt-shield__card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  border: 1px solid var(--rule-on-deep);
  border-top: 2px solid var(--sand);
  background: rgba(246, 244, 239, 0.055);
  color: var(--on-deep);
  text-decoration: none;
}
/* Identity area. One fixed 34px row on every card, so an approved logo plate
   and a neutral glyph occupy exactly the same footprint and nothing reflows
   when the images arrive. */
.abt-shield__mark {
  display: flex;
  align-items: center;
  height: 34px;
  margin-bottom: var(--s3);
}
.abt-shield__mark--plate {
  box-sizing: border-box;
  justify-content: center;
  /* Sized to the mark, never to the card. A full-width plate is a cream slab,
     which is the white-document look this section was moved away from. */
  width: fit-content;
  min-width: 88px;
  max-width: 100%;
  padding: 0 8px;
  border-radius: 2px;
  /* Both supplied marks are drawn for light grounds and cmp.png has no alpha,
     so each keeps its own bone plate. That protects the mark's approved
     colours and clear space instead of stranding it on a dark field. */
  background: var(--bone-raised);
}
.abt-shield__mark--plate img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 22px;
  object-fit: contain;
}
.abt-shield__mark--glyph { color: var(--sand); }
.abt-shield__mark--glyph svg { display: block; width: 26px; height: 26px; }
.abt-shield__kind {
  color: var(--sand);
  /* Was var(--t-micro), a token that does not exist anywhere in this sheet, so
     the declaration was invalid and these labels silently inherited the 17px
     body size — the same size as the card's own name. --t-label is the real
     token and restores the intended label/value separation. */
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.abt-shield__name {
  margin: var(--s3) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.08;
}
.abt-shield__detail {
  margin: var(--s3) 0 0;
  color: var(--on-deep-soft);
  font-size: var(--t-small);
}
.abt-shield__fact {
  margin: var(--s4) 0 0;
  color: var(--sand);
  font-size: var(--t-small);
  font-weight: 700;
}
.abt-shield__action {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: auto;
  padding-top: var(--s5);
  padding-bottom: 0.35rem;
  color: var(--on-deep);
  font-weight: 800;
}
.abt-shield__action::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--sand);
  content: "";
  transform: scaleX(0.18);
  transform-origin: center;
}
.abt-shield__cue { display: inline-block; color: var(--sand); }
.abt-shield__card:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 4px;
  background: rgba(246, 244, 239, 0.1);
}
.abt-shield__card:focus-visible .abt-shield__action::after {
  transform: scaleX(1);
}
@media (hover: hover) and (pointer: fine) {
  .abt-shield__card {
    transition: background-color 150ms ease-out, border-color 150ms ease-out;
  }
  .abt-shield__action::after {
    transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1);
  }
  .abt-shield__cue { transition: transform 150ms ease-out; }
  .abt-shield__card:hover {
    border-color: var(--sand);
    background: rgba(246, 244, 239, 0.1);
  }
  .abt-shield__card:hover .abt-shield__action::after {
    transform: scaleX(1);
  }
  /* The one moving part on hover: the arrow steps 3px toward the edge it
     already points at. Everything else on the card is colour/border only. */
  .abt-shield__card:hover .abt-shield__cue { transform: translate3d(3px, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .abt-shield__card,
  .abt-shield__action::after,
  .abt-shield__cue { transition: none; }
}

/* ---- Private-review placeholder mounts (Aarav-only; never public) ---- */
.abt-placeholder {
  display: grid;
  place-items: center;
  padding: var(--s5);
  background: repeating-linear-gradient(135deg, var(--bone-sunk) 0 12px, var(--bone-raised) 12px 24px);
  border: 1px dashed var(--rule-strong);
  text-align: center;
}
.abt-placeholder__label { margin: 0; font-size: var(--t-small); color: var(--fg-soft); line-height: 1.5; }
.abt-placeholder__kind { display: block; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.abt-placeholder__inline {
  display: inline-block;
  padding: var(--s2) var(--s3);
  background: var(--bone-sunk);
  border: 1px dashed var(--rule-strong);
  font-size: var(--t-small);
  color: var(--fg-soft);
}

/* ----------------------------- Privacy notice ---------------------------- */
/* ================= /about/image-credits/ ==================== *
   Added 9 August 2026, reached only from the "Image credits" footnote in
   About's closing area. Plain and utilitarian on purpose: this is a record,
   not another editorial scene, so it does not carry an eyebrow thread, a
   dark band or any of the journey motion — it is legal reference material. */
.ic-open {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.75rem, 3vw, 2.75rem) var(--inset) clamp(1.5rem, 2.5vw, 2.25rem);
}
.ic-open .lede { max-width: var(--measure); }
.ic {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--inset) clamp(2rem, 4vw, 3rem);
}
.ic__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s6);
}
.ic__item {
  display: grid;
  gap: var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
@media (min-width: 40em) {
  .ic__item { grid-template-columns: 9rem minmax(0, 1fr); align-items: start; }
}
.ic__thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border: 1px solid var(--line);
}
@media (min-width: 40em) {
  .ic__thumb { width: 9rem; }
}
.ic__facts { margin: 0; display: grid; gap: var(--s3); min-width: 0; }
.ic__row { display: grid; gap: 2px; }
.ic__row dt {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-deep);
}
.ic__row dd { margin: 0; color: var(--ink); }
.ic__link {
  color: var(--copper-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -11px 0;
  padding: 0 2px;
}
.ic__link:hover,
.ic__link:focus-visible { color: var(--bottle); }
.ic__link:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 2px; }


.pv-open,
.pv-hold {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.75rem, 3vw, 2.75rem) var(--inset) clamp(1.5rem, 2.5vw, 2.25rem);
}

.pv-open__copy,
.pv-hold__copy { min-width: 0; max-width: 46rem; }

.pv-hold__meanwhile {
  margin: var(--s4) 0 0;
  color: var(--fg-soft);
  line-height: 1.6;
  max-width: 68ch;
}

.pv-hold__action { margin: var(--s4) 0 0; }

.pv-meta,
.pv-routes,
.pv-services {
  margin: var(--s5) 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  min-width: 0;
}

.pv-meta__row,
.pv-routes__row,
.pv-services__row {
  display: grid;
  gap: var(--s2);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}

@media (min-width: 52em) {
  .pv-meta__row,
  .pv-routes__row,
  .pv-services__row {
    grid-template-columns: minmax(11rem, 26%) minmax(0, 1fr);
    gap: var(--s5);
    align-items: baseline;
  }
}

.pv-meta__row dt,
.pv-routes__row dt,
.pv-services__row dt {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--bottle);
  line-height: 1.35;
}

.pv-meta__row dd,
.pv-routes__row dd,
.pv-services__row dd {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
  max-width: 68ch;
}

.pv-glance {
  display: grid;
  gap: var(--s5);
  min-width: 0;
}

@media (min-width: 52em) {
  .pv-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 75em) {
  .pv-glance { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pv-glance__item {
  min-width: 0;
  border-top: 2px solid var(--bottle);
  padding-top: var(--s4);
}

.pv-glance__term {
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: var(--t-group);
  line-height: 1.2;
  color: var(--bottle);
}

.pv-list {
  margin: 0;
  padding-left: 1.1em;
  color: var(--fg-soft);
  line-height: 1.6;
  font-size: var(--t-small);
}

.pv-list li { margin-bottom: var(--s2); }
.pv-list--rights { color: var(--ink); font-size: 1rem; max-width: 68ch; }

/* Each purpose keeps its lawful basis and its retention beside it. */
.pv-purposes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s5);
  min-width: 0;
}

.pv-purpose {
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--copper);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  display: grid;
  gap: var(--s3);
  min-width: 0;
}

.pv-purpose__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-group);
  line-height: 1.2;
  color: var(--bottle);
}

.pv-purpose__detail { margin: 0; color: var(--ink); line-height: 1.6; max-width: 68ch; }

.pv-purpose__facts {
  margin: 0;
  display: grid;
  gap: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}

@media (min-width: 44em) {
  .pv-purpose__facts { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}

.pv-purpose__fact { display: grid; gap: 2px; min-width: 0; }

.pv-purpose__fact dt {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 700;
}

.pv-purpose__fact dd { margin: 0; color: var(--ink); font-size: var(--t-small); line-height: 1.55; }

.pv-body { margin: 0; color: var(--ink); line-height: 1.6; }

/* --------------------------- Motion neutralisers ------------------------- */
/* The shared button and link components carry lift and halo treatments for the
   rest of the site. None of them reaches these three pages. */

.abt-open a,
.abt-routes a,
.abt-proof a,
.abt-contact a,
.rvw-open a,
.rvw-grid a,
.rvw-method summary,
.pv-open a,
.pv-hold a,
.pv-routes a,
.pv-services a { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .abt-link,
  .abt-proof__link,
  .abt-contact__link,
  .rvw-link,
  .rvw-method__summary,
  .pv-link { transition: none; }
}

/* The shared next-steps component transitions border-color AND transform at
   220ms. On these three pages the motion policy is colour and border only at
   160ms, so the transform is dropped and the timing brought into range. Scoped
   by body class: the component keeps its own behaviour everywhere else. */
.page--about .steps__link,
.page--reviews .steps__link,
.page--privacy .steps__link {
  transition: border-color 160ms var(--ease-in-out),
    background-color 160ms var(--ease-in-out),
    color 160ms var(--ease-in-out);
}

.page--about .steps__arrow,
.page--reviews .steps__arrow,
.page--privacy .steps__arrow {
  transition: none;
  transform: none !important;
}

/* The carried-reference row on the About contact section, which uses the bone
   surface rather than the bottle-green one the other public-safe sections sit on. */
.abt-contact__context {
  margin: var(--s4) 0 0;
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--copper);
  background: var(--bone-sunk);
  color: var(--ink);
  font-size: var(--t-small);
  line-height: 1.55;
  max-width: 68ch;
}

.abt-contact__context[hidden] { display: none; }

/* ==================================================================== *
 * PROPERTIES — image-led opening and next-step refinement
 * (Aarav, 10 August 2026)
 *
 * Scoped to /properties/ via the .page--properties body class and the
 * page's own .phero block. No rule here reaches another route, and the
 * shared .steps component keeps its own behaviour everywhere else.
 * ==================================================================== */

/* ------------- The hero montage: an editorial split ------------- */

/* Mobile first: copy, then the lead frame, then the two supporting
   frames in a compact two-up row. The caption closes the figure. */
.phero { display: grid; gap: var(--s6); }
.phero__copy { min-width: 0; }
.phero__media { margin: 0; min-width: 0; }

/* Square-edged frames on one shared gutter. The montage is static by
   design: no overlay, no zoom, no hover state, no carousel and no
   entrance animation — a photograph is not a control and must not
   imitate one. */
.phero__frames {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
.phero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* With images blocked the frames keep a quiet sunk field, so the
     composition still reads and the caption still has a referent. */
  background: var(--bone-sunk);
}
.phero__img--lead { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.phero__img--support { aspect-ratio: 4 / 3; }

.phero__caption {
  margin: var(--s3) 0 0;
  font-size: var(--t-small);
  color: var(--text-secondary);
}

/* Tablet: the deliberate copy-plus-media composition — the copy keeps
   the full measure above, and the montage beneath takes its
   dominant-plus-stack form. One height decision governs the strip:
   5:2 overall, which is the lead's own 3:2 at its 61% column to within
   a percent, so the lead renders effectively uncropped while the two
   supports take a wide editorial band. Their vertical crop is the
   measured object-position carried in each image's provenance record,
   not a blind centre. */
@media (min-width: 48em) {
  .phero__frames {
    grid-template-columns: 1.55fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    aspect-ratio: 5 / 2;
  }
  .phero__img--lead { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; }
  .phero__img--support { grid-column: 2; aspect-ratio: auto; min-height: 0; }
}

/* Desktop: the split proper. Copy holds the left reading column and the
   montage leads the right. Because the montage's height is fixed by its
   ratio, the hero's total height stays controlled and the
   current-availability chapter remains discoverable at 1366×768. */
@media (min-width: 64em) {
  .phero {
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: center;
  }
}

/* -------- Next-step cards: one rest state, restrained motion -------- */

/* Wide desktop: three equal columns. The shared component's 48em rule
   already gives the 2+1 tablet arrangement and the mobile stack. */
@media (min-width: 64em) {
  .page--properties .steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* All three cards rest on the same 1px border: the lead card's 3px
   bottle top rule asserted a hierarchy three equal next steps do not
   have. */
.page--properties .steps__item--lead .steps__link { border-top: 1px solid var(--line); }

/* The shared component lifts -2px on hover and transitions transform.
   On this page the card never moves: state is carried by surface,
   border and the action rule alone. The rows pin every card's action
   to its bottom edge so the three actions align across the row. */
.page--properties .steps__link {
  position: relative;
  height: 100%;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  transition:
    border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.page--properties .steps__link:hover { transform: none; }
.page--properties .steps__link .steps__action { align-self: end; }

/* The one motion element: a centre-out rule along the card's top edge.
   It exists at rest scaled to zero, so hover, focus, touch and reduced
   motion all resolve to the same completed geometry. */
.page--properties .steps__link::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--bottle);
  transform: scaleX(0);
  transform-origin: 50% 50%;
}

/* Outside the hover gate a tap's synthetic hover must change nothing:
   hold the rest values and keep the arrow still. The gated block below
   overrides these for a real pointer. */
.page--properties .steps__arrow { transition: none; }
.page--properties .steps__link:hover {
  border-color: var(--line);
  background: var(--bone-raised);
}
.page--properties .steps__link:hover .steps__arrow { transform: none; }

/* Hover, for a real pointer only: a restrained surface/border change,
   the centre-out rule at 160ms, and the arrow easing 3px right. */
@media (hover: hover) and (pointer: fine) {
  .page--properties .steps__link::after {
    transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .page--properties .steps__link:hover {
    border-color: var(--rule-strong);
    background: #fffdf6;
  }
  .page--properties .steps__link:hover::after { transform: scaleX(1); }
  .page--properties .steps__arrow {
    transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .page--properties .steps__link:hover .steps__arrow { transform: translateX(3px); }
}

/* Keyboard focus: the global outline-and-halo focus treatment applies
   unchanged, the border strengthens, and the rule is complete
   immediately — no positional animation of any kind. */
.page--properties .steps__link:focus-visible { border-color: var(--rule-strong); }
.page--properties .steps__link:focus-visible::after {
  transform: scaleX(1);
  transition: none;
}

/* Touch and active: a clear pressed surface with the completed rule.
   Nothing shrinks, nothing moves, the hit area is unchanged. */
.page--properties .steps__link:active {
  border-color: var(--rule-strong);
  background: var(--bone-sunk);
  transform: none;
}
.page--properties .steps__link:active::after {
  transform: scaleX(1);
  transition: none;
}

/* Reduced motion: every final state is preserved — surface, border,
   completed rule — with the transform animation removed and the arrow
   held still. */
@media (prefers-reduced-motion: reduce) {
  .page--properties .steps__link { transition: none; }
  .page--properties .steps__link::after { transition: none; }
  .page--properties .steps__arrow { transition: none; }
  .page--properties .steps__link:hover .steps__arrow { transform: none; }
}

/* ------------------- The property canvas (10 August 2026) ------------------ */

/* One centred editorial field carrying the hero, the availability/listings
   region and the next steps as a single dossier, framed against the page
   background. The contact region and footer stay outside it. The inner
   sections keep their own --max (1320px) measure and inset, so nothing about
   the content grid changes — only the surface it sits on. */
.pcanvas {
  /* 1640px cap on very wide screens; below that, a deliberate 24px field of
     page background on each side (20–32px required at 1366–1440). */
  width: min(102.5rem, 100% - 3rem);
  margin: clamp(1rem, 2.5vw, 2.5rem) auto clamp(2rem, 4vw, 4rem);
  background: var(--bone-raised);
  border: 1px solid var(--line);
  /* The thin copper/brass top accent the page's own palette already uses for
     its eyebrow rule and search surface. Square editorial geometry — no
     radius, and no shadow: the 1px boundary and the tonal step do the work. */
  border-top: 2px solid var(--contact-brass);
}

/* Mobile: edge-to-edge, side boundary dropped, the top accent kept. */
@media (max-width: 47.9375em) {
  .pcanvas {
    width: 100%;
    margin: 0;
    border-left: 0;
    border-right: 0;
  }
}

/* ------- Listing-card interaction for the approved future state ------------ */

/* Reviewed through the fixture build only: no record clears the publication
   gate today, so no public build renders these cards. When one does, the
   card follows the same restrained vocabulary as the next steps: surface and
   border state, a centre-out top rule, and a photograph zoom held to 1.025 —
   explicitly reopened by Aarav's 10 August brief, superseding the 8 August
   neutraliser for this page's overview cards only. No whole-card lift. */
.page--properties .prop {
  position: relative;
  transition: border-color 170ms var(--ease-in-out);
}
.page--properties .prop::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--bottle);
  transform: scaleX(0);
  transform-origin: 50% 50%;
}
@media (hover: hover) and (pointer: fine) {
  .page--properties .prop::after {
    transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .page--properties .prop:hover { border-color: var(--rule-strong); }
  .page--properties .prop:hover::after { transform: scaleX(1); }
  .page--properties .prop__shot img {
    transition: transform 170ms var(--ease-in-out) !important;
  }
  .page--properties .prop:hover .prop__shot img { transform: scale(1.025) !important; }
}

/* Equivalent keyboard affordance: focusing the card's link completes the
   same border and rule immediately — and never moves the photograph. */
.page--properties .prop:has(.prop__link:focus-visible) { border-color: var(--rule-strong); }
.page--properties .prop:has(.prop__link:focus-visible)::after {
  transform: scaleX(1);
  transition: none;
}

/* Reduced motion: state colours survive, nothing transforms. */
@media (prefers-reduced-motion: reduce) {
  .page--properties .prop::after { transition: none; }
  .page--properties .prop__shot img { transition: none !important; }
  .page--properties .prop:hover .prop__shot img { transform: none !important; }
}

/* ======================= Buying Guide (10 August 2026) ==================== *
 * "Nine stages. One clear route." — editorial recomposition.
 *
 * Page-scoped: every selector is under .bguide, .bguide-hero, .bguide-plan or
 * .bguide-board, all of which only build/pages/buyers-guide.mjs emits. The
 * shared .gx system keeps its own rules for the Tenant Guide, Tenant Fees and
 * the landlord/EPC layers; everything this page changes about a .gx__ element
 * is a .bguide descendant override, declared after the shared block so equal
 * specificity resolves this way deliberately.
 *
 * Surfaces: the page reads on bone. Dark bottle green appears exactly three
 * times — the hero route panel (orientation), the phase banners (phase
 * transitions) and the closing Ask Dukes panel (conversion). The repeated
 * bone-sunk check slabs and the raised card boxes are gone: stages are
 * editorial sections separated by rules, not nine identical cards.
 *
 * Motion: colour, border and drawn-rule feedback at 190-200ms with the
 * approved cubic-bezier(0.22, 1, 0.36, 1) draw curve; one-time section
 * entrances ride the shared [data-reveal] system (opacity + small translate,
 * reduced-motion safe). Hover effects are gated behind (hover) + (pointer:
 * fine); focus feedback is immediate; touch gets its own pressed states. No
 * transition: all, no layout-property animation, nothing moves on hover.
 * ========================================================================== */

.bguide,
.bguide-hero {
  --bg-move: 190ms;
  --bg-draw: 200ms;
  --bg-ease: var(--ease-in-out);
  --bg-draw-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------- Hero ---------------------------------- */
/* A split editorial opening: positioning and scope on the left, the route
   panel on the right. The panel is the page's first orientation device and
   its only dark moment above the fold. */

.bguide-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.75rem, 3vw, 2.75rem) var(--inset) clamp(1.5rem, 2.5vw, 2.25rem);
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  align-items: start;
}

@media (min-width: 62em) {
  .bguide-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 26rem);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

.bguide-hero__copy { min-width: 0; }
.bguide-hero__copy .lede { margin-bottom: var(--s4); }

.bguide-hero__scope {
  font-size: var(--t-small);
  color: var(--fg-soft);
  margin: 0;
  max-width: var(--measure);
}

/* The route panel. Dark green for orientation; the global focus ring swaps to
   its on-deep pair here, exactly as .band--dark does. */
.bguide-plan {
  background: var(--bottle);
  border-top: 3px solid var(--copper);
  color: var(--on-deep);
  --focus-ring: var(--on-deep);
  --focus-halo: rgba(239, 194, 154, 0.4);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: grid;
  gap: var(--s4);
  min-width: 0;
}

.bguide-plan__kicker {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 700;
}

.bguide-plan__lede {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--on-deep);
}

.bguide-plan__phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.bguide-plan__phase { min-width: 0; }
.bguide-plan__phase + .bguide-plan__phase { border-top: 1px solid var(--rule-on-deep); }

.bguide-plan__phase-link {
  display: flex;
  align-items: center;
  gap: var(--s4);
  /* 44px minimum: a 2rem numeral mark plus 0.4375rem padding each side. */
  padding: 0.4375rem 0.375rem;
  min-height: 44px;
  color: var(--on-deep);
  text-decoration: none;
  transition: background-color var(--bg-move) var(--bg-ease);
}

.bguide-plan__phase-n {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-on-deep);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--sand);
  transition: background-color var(--bg-move) var(--bg-ease),
    border-color var(--bg-move) var(--bg-ease), color var(--bg-move) var(--bg-ease);
}

.bguide-plan__phase-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.bguide-plan__phase-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.25;
}

.bguide-plan__phase-range {
  font-size: var(--t-small);
  color: var(--on-deep-soft);
}

.bguide-plan__phase-link:active {
  background-color: rgba(246, 244, 239, 0.12);
}

.bguide-plan__facts {
  margin: 0;
  display: grid;
  gap: var(--s2);
  border-top: 1px solid var(--rule-on-deep);
  padding-top: var(--s4);
}

.bguide-plan__fact {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
}

.bguide-plan__fact dt {
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 700;
}

.bguide-plan__fact dd {
  margin: 0;
  color: var(--on-deep);
}

.bguide-plan__actions { margin: 0; }

.bguide-plan__start {
  display: inline-block;
  padding: 0.75rem 1.375rem;
  min-height: 44px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
  background-color: var(--sand);
  color: var(--bottle-deep);
  border: 1px solid var(--sand);
  transition: background-color var(--bg-move) var(--bg-ease),
    border-color var(--bg-move) var(--bg-ease);
}

.bguide-plan__start:active {
  background-color: color-mix(in srgb, var(--sand) 78%, var(--bottle-deep));
  border-color: color-mix(in srgb, var(--sand) 78%, var(--bottle-deep));
}

/* ------------------------------ Page shell ------------------------------- */
/* The shared .gx grid gives guides a sticky side rail. This page replaced the
   rail with the wide board below, so the band is a single reading column. */

.band.gx.bguide {
  padding-block: clamp(1rem, 2vw, 1.75rem) clamp(3rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}

/* -------------------------------- The board ------------------------------ */
/* The three-phase overview as a wide orientation device: three phase columns,
   each listing its stage anchors. The vertical hairline through the stage
   numbers is the route itself — it communicates the progression the numbers
   sit on, and it is the only decorative line the page keeps. */

.bguide-board {
  border-top: 2px solid var(--copper);
  padding-top: var(--s5);
  min-width: 0;
}

.bguide-board .gx__overview {
  border-top: 0;
  padding-top: 0;
  position: static;
}

.bguide-board .gx__overview-title { margin-bottom: var(--s5); }

@media (min-width: 56em) {
  .bguide-board .gx__phases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: start;
  }
}

.bguide-board .gx__phase {
  border-top: 1px solid var(--rule);
  padding-top: var(--s4);
}

.bguide-board .gx__jumps { position: relative; }

.bguide-board .gx__jumps::before {
  content: "";
  position: absolute;
  top: 0.875rem;
  bottom: 0.875rem;
  left: calc(0.5rem + 0.75rem);
  width: 1px;
  background: color-mix(in srgb, var(--copper) 40%, transparent);
}

.bguide-board .gx__jump { position: relative; }

.bguide-board .gx__jump-index {
  width: 1.5rem;
  text-align: center;
  background: var(--bone);
  position: relative;
}

/* The board's own hover reads as copper, not another grey. */
@media (hover: hover) and (pointer: fine) {
  .bguide-board .gx__jump-link:hover {
    background-color: color-mix(in srgb, var(--copper) 8%, transparent);
    border-color: transparent;
    color: var(--bottle);
  }
  .bguide-board .gx__jump-link:hover .gx__jump-index { color: var(--bottle); }
}

.bguide-board .gx__jump-link:active {
  background-color: color-mix(in srgb, var(--copper) 14%, transparent);
}

/* ------------------------------ Phase banners ---------------------------- */
/* Dark green marks the phase transitions. Wide composition: identity on the
   left, the phase's promise on the right. */

.bguide .gx__banner {
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

@media (min-width: 62em) {
  .bguide .gx__banner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-areas:
      "kicker range"
      "title summary";
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
  }
  .bguide .gx__banner-kicker { grid-area: kicker; }
  .bguide .gx__banner-title { grid-area: title; }
  .bguide .gx__banner-summary { grid-area: summary; }
  .bguide .gx__banner-range { grid-area: range; justify-self: end; }
}

/* --------------------------------- Stages -------------------------------- */
/* Editorial sections, not cards, and nothing floats: one anchored reading
   column — head, intro at the measure — then the essential checks as a
   full-width band on its own hairline rule, adapting three-across, two, then
   one with the available width. Every element hangs off a rule; no detached
   side column. */

.bguide-stage { min-width: 0; }

.bguide .gx__stage {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  padding: clamp(1.5rem, 3vw, 2rem) 0 0;
}

.bguide .gx__stage-head {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Arriving on a stage anchor marks the stage itself, so the journey links
   communicate their destination rather than merely scrolling. Colour only. */
.bguide .gx__stage:target {
  border-top-color: var(--copper);
}

.bguide .gx__stage:target .gx__stage-mark {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--bone-raised);
}

/* The essential checks: a width-adaptive band on its own rule — no sunk slab,
   no border bar, no floating side list. The copper square markers alone carry
   the accent. */
.bguide .gx__checks {
  background: transparent;
  border-left: 0;
  border-top: 1px solid var(--rule);
  padding: var(--s4) 0 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s4) clamp(1.5rem, 3vw, 3rem);
  align-content: start;
}

.bguide .gx__check {
  padding-left: 1.25rem;
  max-width: none;
}

.bguide .gx__check::before {
  top: 0.58em;
  width: 7px;
  height: 7px;
}

/* ------------------------------ Disclosures ------------------------------ */
/* "What each of these means": the whole summary row is the control, and it
   says so. Closed: copper label, drawn plus. Hover/focus: the label's rule
   draws in and the row warms. Open: the plus becomes a minus, the rule stays
   drawn and the row keeps its tint — the state is visible at a glance. */

.bguide .gx__more { border-top: 1px solid var(--rule); }

.bguide .gx__more-summary {
  min-height: 48px;
  padding: 0.875rem 0.375rem;
  font-size: 1rem;
  color: var(--copper-deep);
  transition: color var(--bg-move) var(--bg-ease),
    background-color var(--bg-move) var(--bg-ease);
}

.bguide .gx__more-label {
  position: relative;
  padding-bottom: 3px;
}

.bguide .gx__more-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform var(--bg-draw) var(--bg-draw-ease);
}

.bguide .gx__more-sign {
  width: 1.25rem;
  height: 1.25rem;
  transition: color var(--bg-move) var(--bg-ease);
}

.bguide .gx__more-sign::before,
.bguide .gx__more-sign::after {
  inset: 50% 4px auto 4px;
}

.bguide .gx__more-sign::after {
  inset: 4px 50% 4px auto;
  width: 1px;
  height: auto;
}

@media (hover: hover) and (pointer: fine) {
  .bguide .gx__more-summary:hover {
    color: var(--bottle);
    background-color: color-mix(in srgb, var(--copper) 8%, transparent);
  }
  .bguide .gx__more-summary:hover .gx__more-label::after { transform: scaleX(1); }
}

.bguide .gx__more-summary:focus-visible { color: var(--bottle); }
.bguide .gx__more-summary:focus-visible .gx__more-label::after {
  transform: scaleX(1);
  transition: none;
}

.bguide .gx__more-summary:active {
  background-color: color-mix(in srgb, var(--copper) 14%, transparent);
}

.bguide .gx__more[open] > .gx__more-summary {
  color: var(--bottle);
  background-color: color-mix(in srgb, var(--copper) 6%, transparent);
}

.bguide .gx__more[open] > .gx__more-summary .gx__more-label::after { transform: scaleX(1); }

.bguide .gx__more-body { padding: var(--s4) 0 var(--s5); }

/* --------------------------------- Links --------------------------------- */
/* One deliberate treatment for every text link the guide owns: the EPC and
   Stamp Duty stage actions, and the official-guidance sources. Resting state
   keeps a quiet underline so a link is never colour-alone; hover and focus
   draw a 2px copper rule from the centre while the foreground deepens to
   bottle. Focus is immediate. Touch gets a pressed tint. */

.bguide .gx__link,
.bguide .bguide__inline-link {
  display: inline-block;
  position: relative;
  color: var(--copper-deep);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.26em;
  text-decoration-color: color-mix(in srgb, var(--copper) 45%, transparent);
  padding: 0.625rem 0;
  transition: color var(--bg-move) var(--bg-ease),
    text-decoration-color var(--bg-move) var(--bg-ease),
    background-color var(--bg-move) var(--bg-ease);
}

.bguide .gx__link::after,
.bguide .bguide__inline-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.375rem;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform var(--bg-draw) var(--bg-draw-ease);
}

@media (hover: hover) and (pointer: fine) {
  .bguide .gx__link:hover,
  .bguide .bguide__inline-link:hover {
    color: var(--bottle);
    text-decoration-color: transparent;
    background-color: transparent;
  }
  .bguide .gx__link:hover::after,
  .bguide .bguide__inline-link:hover::after { transform: scaleX(1); }
}

.bguide .gx__link:focus-visible,
.bguide .bguide__inline-link:focus-visible {
  color: var(--bottle);
  text-decoration-color: transparent;
}

.bguide .gx__link:focus-visible::after,
.bguide .bguide__inline-link:focus-visible::after {
  transform: scaleX(1);
  transition: none;
}

.bguide .gx__link:active,
.bguide .bguide__inline-link:active {
  background-color: color-mix(in srgb, var(--copper) 12%, transparent);
}

/* ---------------------------- Three distinctions -------------------------- */
/* No beige box: a wide, three-column comparison that opens on its own bottle
   rule. Each pair stacks a / IS NOT / b, so the distinction itself is the
   typography. */

.bguide__support-kicker {
  margin: 0 0 var(--s2);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
}

.bguide__distinctions {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--bottle);
  padding: var(--s5) 0 0;
  min-width: 0;
  max-width: none;
}

.bguide__distinctions-title {
  font-family: var(--font-display);
  font-size: var(--t-group);
  line-height: 1.2;
  color: var(--bottle);
  margin: 0 0 var(--s5);
}

.bguide__distinctions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 62em) {
  .bguide__distinctions-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

.bguide__distinction {
  min-width: 0;
  border-top: 1px solid var(--rule);
  padding-top: var(--s4);
}

.bguide__distinction + .bguide__distinction {
  border-top: 1px solid var(--rule);
  padding-top: var(--s4);
}

.bguide__distinction-pair {
  display: grid;
  gap: 2px;
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.3;
}

.bguide__distinction-a,
.bguide__distinction-b { color: var(--ink); }

.bguide__distinction-sep {
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
}

.bguide__distinction-detail {
  margin: 0;
  color: var(--fg-soft);
  font-size: var(--t-small);
  line-height: 1.6;
  max-width: var(--measure);
}

/* ------------------------------ Closing panel ---------------------------- */
/* The conversion moment: still the page's strongest surface, no longer an
   oversized rectangle. Copy left, action right, one composed band. */

.bguide .gx__close {
  --focus-ring: var(--on-deep);
  --focus-halo: rgba(239, 194, 154, 0.4);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 3vw, 2.5rem);
}

@media (min-width: 62em) {
  .bguide .gx__close {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title actions"
      "copy actions";
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
  }
  .bguide .gx__close-title { grid-area: title; }
  .bguide .gx__close-copy { grid-area: copy; }
  .bguide .gx__close-actions { grid-area: actions; margin: 0; }
}

.bguide .gx__cta:active {
  background-color: color-mix(in srgb, var(--sand) 78%, var(--bottle-deep));
  border-color: color-mix(in srgb, var(--sand) 78%, var(--bottle-deep));
  color: var(--bottle-deep);
}

/* ------------------------ Supporting notes and sources -------------------- */
/* Concise and visually secondary, fully legible: the disclaimer reads beside
   the compact official-guidance list rather than above another full-width
   block. */

.bguide__notes {
  border-top: 1px solid var(--rule);
  padding-top: var(--s5);
  display: grid;
  gap: var(--s4);
  min-width: 0;
}

@media (min-width: 62em) {
  .bguide__notes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }
  .bguide__notes > .bguide__support-kicker { grid-column: 1; }
  .bguide__disclaimer { grid-column: 1; }
  .bguide__sources { grid-column: 2; grid-row: 1 / span 2; }
}

.bguide__disclaimer {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: var(--measure);
}

.bguide__sources { min-width: 0; }

.bguide__sources-title {
  margin: 0 0 var(--s2);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 700;
}

.bguide__sources-list {
  list-style: none;
  margin: 0 0 var(--s3);
  padding: 0;
  font-size: var(--t-small);
  max-width: var(--measure);
}

.bguide__sources-list li { margin: 0; }
.bguide__sources-list li + li { border-top: 1px solid var(--rule); }

.bguide__sources .reviewed { margin: 0; }

/* --------------------- Neutralised inherited animation -------------------- */
/* Scoped to this page only: shared sweep, halo and press-scale effects stay
   off so the guide keeps one motion policy. The drawn rules above live on
   pseudo-elements of the page's own classes and are unaffected. */

.bguide *,
.bguide-hero * { animation: none !important; }

.bguide a,
.bguide button,
.bguide summary,
.bguide-hero a { transform: none !important; }

.bguide .btn::before,
.bguide .btn::after,
.bguide .link::after {
  content: none !important;
}

/* ------------------------------ Reduced motion ---------------------------- */
/* The global reduced-motion block already zeroes durations; these keep the
   final states explicit. State changes stay, movement goes. */

@media (prefers-reduced-motion: reduce) {
  .bguide-plan__phase-link,
  .bguide-plan__phase-n,
  .bguide-plan__start,
  .bguide .gx__jump-link,
  .bguide .gx__more-summary,
  .bguide .gx__more-label::after,
  .bguide .gx__more-sign,
  .bguide .gx__link,
  .bguide .gx__link::after,
  .bguide .bguide__inline-link,
  .bguide .bguide__inline-link::after,
  .bguide .gx__cta { transition: none; }
}

/* ====================== LANDLORDS PAGE 1 (redesign) ======================= *
 * Additive and page-scoped: every selector is written under .page--landlords
 * (the body class build/build.mjs sets from page.id), and every class begins
 * llp-. Nothing here can match on another route, and no shared rule above is
 * modified. Pages 2 and 3 keep the .ll/.gx system untouched.
 *
 * Tokens only. Motion: colour/border feedback at 170ms; the journey's active
 * illustration at 360ms cubic-bezier(0.22, 1, 0.36, 1) on opacity/transform;
 * the progress fill on transform scaleY only. Explicit properties throughout.
 * ========================================================================== */

.page--landlords {
  --llp-move: 170ms;
  --llp-ease: var(--ease-in-out);
}

.page--landlords .llp-hero,
.page--landlords .llp-services,
.page--landlords .llp-scene,
.page--landlords .llp-duties,
.page--landlords .llp-protect {
  scroll-margin-top: calc(var(--head-h) + 1rem);
}

/* --------------------------------- Hero ---------------------------------- */

.page--landlords .llp-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.75rem, 3vw, 2.75rem) var(--inset) clamp(1.25rem, 2vw, 1.75rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

@media (min-width: 62em) {
  .page--landlords .llp-hero {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 27rem);
    gap: clamp(2rem, 4vw, 4rem);
  }
}

.page--landlords .llp-hero__copy { min-width: 0; }
.page--landlords .llp-hero__copy .lede { margin-bottom: var(--s4); }

.page--landlords .llp-hero__scope {
  margin: 0;
  font-size: var(--t-small);
  color: var(--fg-soft);
  max-width: var(--measure);
  border-top: 1px solid var(--rule);
  padding-top: var(--s3);
}

.page--landlords .llp-hero__media {
  min-width: 0;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--copper);
  background: var(--bone-raised);
  padding: var(--s3);
}

/* ----------------------- Private placeholder frames ----------------------- */
/* Aarav regenerates the photography; until an image is approved these frames
   hold the exact space, state what they are, and carry the generation brief
   in a closed native disclosure. The flag token blocks production builds. */

.page--landlords .llp-frame {
  margin: 0;
  min-width: 0;
  display: grid;
  gap: var(--s3);
}

.page--landlords .llp-frame__stage {
  display: grid;
  place-items: center;
  width: 100%;
  background: var(--bone-sunk);
  border: 1px solid var(--rule);
  color: var(--bottle);
}

.page--landlords .llp-frame--32 .llp-frame__stage { aspect-ratio: 3 / 2; }

.page--landlords .llp-frame__stage .gx__icon {
  width: 3rem;
  height: 3rem;
  opacity: 0.55;
}

.page--landlords .llp-frame__caption {
  display: grid;
  gap: var(--s1);
  min-width: 0;
}

.page--landlords .llp-frame__flag {
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-deep);
}

.page--landlords .llp-frame__job {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--ink);
  line-height: 1.4;
}

.page--landlords .llp-frame__spec { min-width: 0; }

.page--landlords .llp-frame__spec-summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--copper-deep);
  transition: color 170ms var(--llp-ease);
}

@media (hover: hover) and (pointer: fine) {
  .page--landlords .llp-frame__spec-summary:hover { color: var(--bottle); }
}

.page--landlords .llp-frame__spec-summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.page--landlords .llp-frame__spec-copy {
  margin: var(--s1) 0 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: var(--measure);
  border-left: 2px solid var(--rule);
  padding-left: var(--s3);
}

/* --------------------------- Chapter anchor row --------------------------- */

.page--landlords .llp-toc {
  background: var(--bone-raised);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.page--landlords .llp-toc__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s3) var(--inset);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s5);
}

.page--landlords .llp-toc__title {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 700;
}

.page--landlords .llp-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  min-width: 0;
}

.page--landlords .llp-toc__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.375rem 0.75rem;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: 2px solid var(--rule);
  transition: color var(--llp-move) var(--llp-ease), border-color var(--llp-move) var(--llp-ease),
    background-color var(--llp-move) var(--llp-ease);
}

@media (hover: hover) and (pointer: fine) {
  .page--landlords .llp-toc__link:hover {
    color: var(--bottle);
    border-bottom-color: var(--copper);
    background-color: var(--bone);
  }
}

.page--landlords .llp-toc__link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-bottom-color: var(--copper);
}

.page--landlords .llp-toc__link:active {
  color: var(--copper-deep);
  border-bottom-color: var(--copper-deep);
  background-color: var(--bone-sunk);
}

/* ------------------------------ Section heads ----------------------------- */

.page--landlords .llp-kicker {
  margin: 0 0 var(--s2);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
}

.page--landlords .llp-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-section);
  line-height: 1.12;
  color: var(--bottle);
  max-width: 26ch;
}

.page--landlords .llp-intro {
  margin: var(--s3) 0 0;
  color: var(--ink);
  line-height: 1.6;
  max-width: var(--measure);
}

/* ------------------------------ Service mosaic ---------------------------- */

.page--landlords .llp-services {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.25rem, 4.5vw, 4rem) var(--inset) clamp(2.5rem, 5vw, 4.5rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.page--landlords .llp-mosaic {
  display: grid;
  gap: var(--s5);
  min-width: 0;
}

.page--landlords .llp-route {
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--copper);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  min-width: 0;
  display: grid;
  gap: var(--s4);
  align-content: start;
}

.page--landlords .llp-route--separate { border-top-color: var(--bottle); }

.page--landlords .llp-route__copy {
  min-width: 0;
  display: grid;
  gap: var(--s3);
  align-content: start;
}

.page--landlords .llp-route__focus {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
}

.page--landlords .llp-route--separate .llp-route__focus { color: var(--bottle); }

.page--landlords .llp-route__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  line-height: 1.15;
  color: var(--bottle);
}

.page--landlords .llp-route__summary {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
  max-width: var(--measure);
}

.page--landlords .llp-route__action { margin: 0; }

.page--landlords .llp-route__media {
  margin: 0;
  min-width: 0;
}

/* Tablet: the feature stacks copy over image, the two managed routes pair up,
   Guaranteed Rent takes its own full row. */
@media (min-width: 48em) {
  .page--landlords .llp-mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .page--landlords .llp-route--feature { grid-column: 1 / -1; }
  .page--landlords .llp-route--five { grid-column: span 6; }
  .page--landlords .llp-route--seven { grid-column: span 6; }
  .page--landlords .llp-route--offset { grid-column: 1 / -1; }

  .page--landlords .llp-route--feature {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;
  }
}

/* Desktop: the editorial 12-column mosaic. */
@media (min-width: 62em) {
  .page--landlords .llp-route--five { grid-column: span 5; }
  .page--landlords .llp-route--seven {
    grid-column: span 7;
    padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  }
  .page--landlords .llp-route--offset { grid-column: 4 / -1; }
}

.page--landlords .llp-confirm {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-soft);
  border-left: 2px solid var(--copper);
  padding-left: var(--s4);
  max-width: var(--measure);
}

.page--landlords .llp-note {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-soft);
}

/* ------------------------- Journey scene (full width) --------------------- */
/* The page's dark chapter: the journey runs on the brand's deep bottle field
   (10 August 2026 — Aarav asked for more of the theme's colour), with the six
   steps as light cards so every word keeps its ink-on-bone contrast. */

.page--landlords .llp-scene {
  background: var(--bottle-deep);
  border-top: 3px solid var(--copper);
  border-bottom: 1px solid var(--rule);
}

.page--landlords .llp-scene .llp-title { color: var(--on-deep); }
.page--landlords .llp-scene .llp-intro { color: var(--on-deep-soft); }
.page--landlords .llp-scene .llp-note { color: var(--on-deep-soft); }

.page--landlords .llp-scene .llp-link {
  color: var(--sand);
  border-bottom-color: var(--sand);
}

@media (hover: hover) and (pointer: fine) {
  .page--landlords .llp-scene .llp-link:hover {
    color: var(--on-deep);
    border-bottom-color: var(--on-deep);
  }
}

.page--landlords .llp-scene .llp-link:focus-visible {
  outline-color: var(--on-deep);
}

.page--landlords .llp-scene .llp-link:active { color: var(--sand); }

.page--landlords .llp-scene__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.25rem, 4.5vw, 4rem) var(--inset) clamp(2.5rem, 5vw, 4.5rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.page--landlords .llp-journey {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  min-width: 0;
  align-items: start;
}

/* The stage rail renders only once the controller is live, and only where the
   sticky composition exists. Without JavaScript the journey is the ordered
   list with its inline illustrations, complete at every width. */
.page--landlords .llp-journey__stage { display: none; }

@media (min-width: 62em) {
  .page--landlords [data-llp-enhanced] .llp-journey {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  }

  .page--landlords [data-llp-enhanced] .llp-journey__stage {
    display: block;
    position: sticky;
    top: calc(var(--head-h) + 1.5rem);
  }

  /* The rail carries the stage's illustration; the inline mark would repeat
     it a hand-span away. The step copy itself never hides. */
  .page--landlords [data-llp-enhanced] .llp-step__mark { display: none; }
}

.page--landlords .llp-journey__frame {
  position: relative;
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--sand);
  min-height: 23rem;
}

.page--landlords .llp-journey__visual {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s3);
  padding: var(--s6);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.page--landlords .llp-journey__visual.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* The stage's image slot. Until Aarav's generated stage photographs are
   approved this is a flagged placeholder surface; the icon names the stage's
   subject, and the flag keeps the frame honest and production-blocked. */
.page--landlords .llp-journey__pic {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s2);
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bone-sunk);
  border: 1px solid var(--rule);
  color: var(--bottle);
}

.page--landlords .llp-journey__pic .gx__icon {
  width: 2.75rem;
  height: 2.75rem;
  opacity: 0.65;
}

.page--landlords .llp-journey__pic-glyph { display: block; }

.page--landlords .llp-journey__pic-flag {
  display: block;
  padding: 0 var(--s3);
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-soft);
  text-align: center;
}

.page--landlords .llp-journey__stagelabel {
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
}

.page--landlords .llp-journey__stagename {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--bottle);
  max-width: 16ch;
}

/* The flow column and its progress rule. */
.page--landlords .llp-journey__flow {
  position: relative;
  min-width: 0;
}

.page--landlords .llp-progress {
  display: none;
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 3px;
  background: rgba(246, 244, 239, 0.24);
}

@media (min-width: 62em) {
  .page--landlords [data-llp-enhanced] .llp-progress { display: block; }
  .page--landlords [data-llp-enhanced] .llp-steps { padding-left: clamp(1.25rem, 2vw, 1.75rem); }
}

.page--landlords .llp-progress__fill {
  position: absolute;
  inset: 0;
  background: var(--sand);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.page--landlords .llp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
  min-width: 0;
}

.page--landlords .llp-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background-color: var(--bone);
  border: 1px solid var(--rule);
  border-left: 3px solid transparent;
  min-width: 0;
  transition: background-color 170ms var(--llp-ease), border-color 170ms var(--llp-ease);
}

.page--landlords .llp-step.is-active {
  background-color: var(--bone-raised);
  border-left-color: var(--copper);
}

.page--landlords .llp-step__mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  background: var(--bottle);
  color: var(--sand);
}

.page--landlords .llp-step__body {
  min-width: 0;
  display: grid;
  gap: var(--s2);
}

.page--landlords .llp-step__index {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
}

.page--landlords .llp-step__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--bottle);
}

.page--landlords .llp-step__copy {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
  max-width: var(--measure);
}

.page--landlords .llp-step__confirm {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: var(--measure);
}

/* ------------------------- Responsibility section ------------------------- */

.page--landlords .llp-duties {
  max-width: min(var(--max), 74rem);
  margin: 0 auto;
  padding: clamp(2.25rem, 4.5vw, 4rem) var(--inset) clamp(2.5rem, 5vw, 4.5rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

@media (min-width: 68.75em) {
  .page--landlords .llp-duties {
    grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .page--landlords .llp-duties__intro {
    position: sticky;
    top: calc(var(--head-h) + 1.5rem);
  }
}

.page--landlords .llp-duties__grid {
  margin: 0;
  display: grid;
  gap: var(--s4);
  min-width: 0;
}

@media (min-width: 48em) {
  .page--landlords .llp-duties__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page--landlords .llp-duty--wide { grid-column: 1 / -1; }
}

.page--landlords .llp-duty {
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--bottle);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  display: grid;
  gap: var(--s2);
  align-content: start;
  min-width: 0;
  transition: border-color 170ms var(--llp-ease), background-color 170ms var(--llp-ease);
}

/* The full-width duties carry the copper rule, so the grid reads as a
   composed sequence of bottle and copper accents rather than seven
   identical blocks. */
.page--landlords .llp-duty--wide { border-top-color: var(--copper); }

@media (hover: hover) and (pointer: fine) {
  .page--landlords .llp-duty:hover {
    border-color: var(--rule-strong);
    background-color: var(--bone);
  }
}

.page--landlords .llp-duty__term {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--bottle);
  line-height: 1.2;
}

.page--landlords .llp-duty__detail {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
  max-width: var(--measure);
}

/* ----------------------------- Protection ------------------------------- */
/* A sand-tinted band between the light responsibility section and the dark
   closing panel, so the page's surface rhythm reads bone → deep bottle →
   bone → sunk sand → bottle. */

.page--landlords .llp-protect {
  background: var(--bone-sunk);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.page--landlords .llp-protect__inner {
  max-width: min(var(--max), 68rem);
  margin: 0 auto;
  padding: clamp(2.25rem, 4.5vw, 4rem) var(--inset) clamp(2.5rem, 5vw, 4.5rem);
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.page--landlords .llp-protect__cards {
  display: grid;
  gap: var(--s5);
  min-width: 0;
}

@media (min-width: 56em) {
  .page--landlords .llp-protect__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page--landlords .llp-scheme {
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--bottle);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  gap: var(--s2);
  align-content: start;
  min-width: 0;
  transition: border-color 170ms var(--llp-ease), background-color 170ms var(--llp-ease);
}

@media (hover: hover) and (pointer: fine) {
  .page--landlords .llp-scheme:hover {
    border-color: var(--rule-strong);
    background-color: var(--bone);
  }
}

/* One shared footprint for both supplied marks, so the 400x96 and 300x160
   sources sit on the same baseline without distorting the card grid. */
.page--landlords .llp-scheme__markbox {
  display: block;
  width: 11.25rem;
  height: 3.25rem;
  margin-bottom: var(--s2);
}

.page--landlords .llp-scheme__mark {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.page--landlords .llp-scheme__kicker {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 700;
}

.page--landlords .llp-scheme__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-group);
  line-height: 1.2;
  color: var(--bottle);
}

.page--landlords .llp-scheme__fact {
  margin: 0;
  font-size: var(--t-small);
  color: var(--fg-soft);
  line-height: 1.5;
  word-break: break-word;
}

.page--landlords .llp-scheme__action { margin: var(--s2) 0 0; }

/* The action link: centre-out rule, arrow capped at 3px of travel. */
.page--landlords .llp-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 2px;
  font-weight: 700;
  font-size: var(--t-small);
  color: var(--copper-deep);
  text-decoration: none;
}

.page--landlords .llp-action::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--copper);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 170ms var(--llp-ease);
}

.page--landlords .llp-action__arrow {
  transition: transform 170ms var(--llp-ease);
}

@media (hover: hover) and (pointer: fine) {
  .page--landlords .llp-action:hover { color: var(--bottle); }
  .page--landlords .llp-action:hover::after { transform: scaleX(1); }
  .page--landlords .llp-action:hover .llp-action__arrow { transform: translateX(3px); }
}

.page--landlords .llp-action:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.page--landlords .llp-action:focus-visible::after {
  transform: scaleX(1);
  transition: none;
}

.page--landlords .llp-action:active { color: var(--copper-deep); }

/* Inline text links reuse the site's established underline language. */
.page--landlords .llp-link {
  color: var(--copper-deep);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--copper);
  transition: color 170ms var(--llp-ease), border-color 170ms var(--llp-ease);
}

@media (hover: hover) and (pointer: fine) {
  .page--landlords .llp-link:hover {
    color: var(--bottle);
    border-bottom-color: var(--bottle);
  }
}

.page--landlords .llp-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.page--landlords .llp-link:active { color: var(--copper-deep); }

/* ------------------------------- Next step -------------------------------- */

.page--landlords .llp-close {
  background: var(--bottle);
  border-top: 3px solid var(--copper);
}

.page--landlords .llp-close__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.25rem) var(--inset);
  display: grid;
  gap: var(--s4);
  justify-items: start;
}

.page--landlords .llp-close__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
  color: var(--on-deep);
}

.page--landlords .llp-close__copy {
  margin: 0;
  color: var(--on-deep-soft);
  max-width: var(--measure);
  line-height: 1.6;
}

.page--landlords .llp-close__actions {
  margin: var(--s2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

.page--landlords .llp-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.875rem 1.75rem;
  min-height: 44px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
  background-color: var(--sand);
  color: var(--bottle-deep);
  border: 1px solid var(--sand);
  transition: background-color 170ms var(--llp-ease), border-color 170ms var(--llp-ease),
    color 170ms var(--llp-ease);
}

@media (hover: hover) and (pointer: fine) {
  .page--landlords .llp-cta:hover {
    background-color: var(--on-deep);
    border-color: var(--on-deep);
    color: var(--bottle-deep);
  }
}

.page--landlords .llp-cta:focus-visible {
  outline: 2px solid var(--on-deep);
  outline-offset: 3px;
}

.page--landlords .llp-cta:active {
  background-color: var(--bone-sunk);
  border-color: var(--bone-sunk);
  color: var(--bottle-deep);
}

.page--landlords .llp-cta--quiet {
  background-color: transparent;
  color: var(--on-deep);
  border-color: var(--on-deep-soft);
}

@media (hover: hover) and (pointer: fine) {
  .page--landlords .llp-cta--quiet:hover {
    background-color: transparent;
    border-color: var(--sand);
    color: var(--sand);
  }
}

.page--landlords .llp-cta--quiet:active {
  background-color: rgba(246, 244, 239, 0.1);
  border-color: var(--sand);
  color: var(--sand);
}

/* ----------------------------- Guidance strip ----------------------------- */

.page--landlords .llp-guidance {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.75rem, 3vw, 2.5rem) var(--inset) clamp(2.25rem, 4vw, 3.5rem);
  display: grid;
  gap: var(--s4);
}

.page--landlords .llp-guidance__title {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 700;
}

.page--landlords .llp-guidance__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  min-width: 0;
}

.page--landlords .llp-guidance__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  transition: border-color 170ms var(--llp-ease), color 170ms var(--llp-ease),
    background-color 170ms var(--llp-ease);
}

@media (hover: hover) and (pointer: fine) {
  .page--landlords .llp-guidance__link:hover {
    border-color: var(--copper);
    color: var(--bottle);
  }
}

.page--landlords .llp-guidance__link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--copper);
}

.page--landlords .llp-guidance__link:active {
  background-color: var(--bone-sunk);
  color: var(--bottle);
}

.page--landlords .llp-guidance .reviewed { margin: 0; }

/* ------------------------------ Card reveals ------------------------------ */
/* One-time entrances for the mosaic routes, duty cards and scheme cards
   (10 August 2026 — Aarav asked for the boxes, especially the responsibility
   grid, to feel less static). The pre-reveal state exists ONLY under
   [data-llp-reveals], which landlords-page.mjs stamps after setup succeeds:
   without JavaScript every card is simply visible. 420ms arrive curve, a
   quiet 70ms alternating stagger, transform/opacity only, once per page. */

.page--landlords [data-llp-reveals] .llp-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms var(--ease-arrive), transform 420ms var(--ease-arrive);
}

.page--landlords [data-llp-reveals] .llp-reveal:nth-child(even) {
  transition-delay: 70ms;
}

.page--landlords [data-llp-reveals] .llp-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------ Reduced motion / save-data ---------------------- */
/* State remains complete and immediate: the active stage, borders and colours
   still switch; nothing translates or animates. */

@media (prefers-reduced-motion: reduce) {
  .page--landlords .llp-journey__visual,
  .page--landlords .llp-progress__fill,
  .page--landlords .llp-step,
  .page--landlords .llp-toc__link,
  .page--landlords .llp-scheme,
  .page--landlords .llp-action,
  .page--landlords .llp-action::after,
  .page--landlords .llp-action__arrow,
  .page--landlords .llp-link,
  .page--landlords .llp-cta,
  .page--landlords .llp-guidance__link {
    transition: none;
  }

  .page--landlords .llp-journey__visual { transform: none; }
  .page--landlords .llp-action:hover .llp-action__arrow { transform: none; }

  .page--landlords [data-llp-reveals] .llp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

:root[data-motion="static"] .page--landlords .llp-journey__visual,
:root[data-motion="static"] .page--landlords .llp-progress__fill,
:root[data-motion="static"] .page--landlords .llp-step,
:root[data-motion="static"] .page--landlords [data-llp-reveals] .llp-reveal {
  transition: none;
}

:root[data-motion="static"] .page--landlords .llp-journey__visual { transform: none; }

:root[data-motion="static"] .page--landlords [data-llp-reveals] .llp-reveal {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Stamp Duty Calculator — page pass, 10 August 2026.
   Implements Aarav's approved reference (dark estimate masthead, crest
   watermark hero, premium calculator treatment) and the measured audit fixes:
   587-740px dead column under a static panel, three bare-ground sections,
   unchecked choice cards identical to the form surface, a snapping
   disclosure, ungated hover movement. Page-scoped: .sdlt-* classes and
   [data-page="stamp-duty"] only. No tax figure, band or wording is styled
   into or out of existence here.
   ========================================================================== */

/* ---- Hero: full-bleed parchment wash, crown watermark on light ---- *
   .page-open is shared with /receptionist/, so the treatment rides the
   page-scoped .sdlt-open class added in the template. The section goes
   full-bleed (the copy column keeps the contained measure) so the wash
   reads as a field, not a floating card. The genuine crown sits on light,
   where it was designed to (the launcher/receptionist precedent) — faint,
   right-hand, decorative, and never under the copy. */
.sdlt-open {
  position: relative;
  max-width: none;
  padding-inline: 0;
  display: block;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bone-sunk) 30%, var(--bone)) 0%,
    var(--bone) 100%
  );
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.sdlt-open > .page-open__copy {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--inset);
  position: relative;
  z-index: 1;
}
.sdlt-open::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(2rem, 8vw, 9rem);
  transform: translateY(-50%);
  width: clamp(15rem, 22vw, 21rem);
  aspect-ratio: 252 / 182;
  background: url("/assets/brand/dukes-crown.png") center / contain no-repeat;
  opacity: 0.09;
  filter: saturate(0.6);
  pointer-events: none;
}
/* Below the two-column threshold the copy owns the full width; a watermark
   behind text is exactly the contrast hazard the invariants ban. */
@media (max-width: 63.99em) {
  .sdlt-open::after { display: none; }
}

/* ---- Calculator: the composed plate ---- *
   The section surround was bare body ground; the two-tier rule applies —
   the section keeps the page inset, the plate owns width, centring and the
   greige surface, and the form/panel cards stand on it as ivory objects. */
.sdlt {
  max-width: 78rem;
  margin-inline: auto;
  background: var(--bone-sunk);
  border-top: 3px solid var(--copper);
  padding: clamp(2rem, 3.4vw, 3rem) clamp(1.25rem, 2.6vw, 2.5rem);
}

/* ---- The estimate masthead: the reference dark band, made honest ---- *
   The approved reference shows the brandbar as a deep green band with the
   mark in gold. We do not own a reverse (gold) mark, and the standing
   rule is that the crown sits on light — so the band goes deep and the
   genuine mark keeps a small ivory plate inside it. A reverse-logo brief
   is registered in data/media.mjs (SDLT-BRAND-REVERSE-01); when that asset
   exists the plate can go. */
.sdlt__panel {
  border-top: 0;
  padding-top: 0;
}
.sdlt__brandbar {
  margin: 0 calc(-1 * var(--s5));
  padding: var(--s3) var(--s5);
  background: var(--bottle);
  border-top: 2px solid var(--sand);
  border-bottom: 0;
}
.sdlt__brandbar-label { color: var(--sand); }
.sdlt__brandbar-logo {
  background: var(--bone-raised);
  padding: 7px 10px;
}

/* ---- The panel holds the viewport while the form scrolls ---- *
   Measured: 587px (1440) / 740px (1024) of dead column under a static
   panel with 400px+ of viewport headroom. Sticky keeps the estimate and
   its action beside the section being filled in. align-self: start is
   already set; top clears the sticky site header. Verified against the
   WebKit sticky-in-grid escape (the .dc__intro precedent) in the pass
   geometry probe — if that probe ever reds, sticky loses, as it did there. */
/* Sticky was REVERTED on Aarav's report that the calculator "comes down on
   its own": the panel is far shorter than the form it shares a grid row
   with, so it unpinned partway down and eased through the rest of the row.
   Restored 10 Aug 2026 23:32 after a concurrent session's overwrite of
   dukes.css reintroduced it. Do not re-add without fixing the row-height
   differential first. */

/* ---- Choice cards: visible before chosen, felt on approach ---- *
   Measured: unchecked cards painted rgb(250,247,240) on an identical form
   surface. They step down one rung to the page bone so every option reads
   as an object, and hover feedback arrives as colour only, gated to real
   pointers, with the press state left ungated. The checked treatment
   (parchment fill, brass border, bottle bar) is unchanged — it is the
   approved reference language already. */
.sdltchoice {
  background: var(--bone);
  transition:
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .sdltchoice:hover {
    border-color: color-mix(in srgb, var(--accent-brass) 60%, var(--border-subtle));
    background: color-mix(in srgb, var(--sand) 9%, var(--bone));
  }
}
@media (prefers-reduced-motion: reduce) {
  .sdltchoice { transition: none; }
}

/* ---- Disclosure: the approved recipe, and the flex-on-summary fix ---- *
   The summary ran display:flex, which strips the disclosure role in some
   engines — block layout restores it. The marker is drawn as a brass plus
   that turns to a cross, and the body arrives once, 6px and 260ms, never
   on reduced motion. */
.sdlt__more-summary {
  display: block;
  position: relative;
  list-style: none;
  padding: 12px calc(var(--s4) + 26px) 12px var(--s4);
}
.sdlt__more-summary::-webkit-details-marker { display: none; }
.sdlt__more-summary::after {
  content: "+";
  position: absolute;
  right: var(--s4);
  top: 50%;
  width: 1em;
  text-align: center;
  transform: translateY(-50%);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-brass-deep);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sdlt__more[open] > .sdlt__more-summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.sdlt__more[open] .sdlt__more-body {
  animation: sdlt-more-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sdlt-more-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sdlt__more[open] .sdlt__more-body { animation: none; }
  .sdlt__more-summary::after { transition: none; }
}

/* ---- The closing route: the deep panel ---- *
   "Discuss your property plans" floated on bare ground. It takes the
   homepage route-card language: bottle field, sand top rule, on-deep type,
   and the one CTA restyled to champagne via the button system fill hooks
   (the .hero--search precedent). */
.sdlt-talk {
  max-width: 46rem;
  margin-top: var(--s6);
  padding: clamp(2rem, 3.2vw, 3rem);
  background: var(--bottle);
  border: 1px solid var(--rule-on-deep);
  border-top: 2px solid var(--sand);
}
.sdlt-talk .h-section { color: var(--on-deep); }
.sdlt-talk .lede { color: var(--on-deep-soft); max-width: 38ch; }
.sdlt-talk .hero__actions { margin-top: var(--s5); }
.sdlt-talk .btn--primary {
  --btn-fill: var(--sand);
  --btn-fg: var(--ink);
}
.sdlt-talk .btn--primary:hover,
.sdlt-talk .btn--primary:focus-visible { --btn-fill: var(--accent-brass); }
/* The base button halo and fill-collapse are movement on touch replay;
   the calculator submit sets the precedent — neutralise both
   unconditionally, keep colour, keep the press. */
.sdlt-talk .btn--primary:hover::before { transform: none; }
.sdlt-talk .btn--primary:hover::after { box-shadow: none; }
.sdlt-talk .btn--primary::before {
  transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sdlt-talk .btn--primary:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .sdlt-talk .btn--primary:active { transform: none; }
  .sdlt-talk .btn--primary::before { transition: none; }
}

/* ---- Arrow links: movement stays with real pointers ---- *
   The base .link--arrow hover slides the arrow and shrinks the underline
   ungated; on this page both are offered only to hover-capable, fine
   pointers, so a tap never leaves a stuck half-state. */
@media (hover: none), (pointer: coarse) {
  [data-page="stamp-duty"] .link--arrow:hover::before { transform: none; }
  [data-page="stamp-duty"] .link:hover::after { transform: scaleX(1); }
}

/* Neighbour-surface fix (same pass): the calculator plate is greige, so the
   caveats band beside it steps to the ivory rung instead of repeating the
   plate's surface — no two adjacent acts share a ground. */
[data-page="stamp-duty"] .band--raised { background: var(--bone-raised); }

/* ---- Amendments, same pass, on Aarav's live review (10 Aug 2026) ---- *
   1. The hero watermark is the full genuine mark, not the crown alone.
   2. The masthead's ivory plate is gone — direction: no white boxes, ever.
      The mark sits straight on the bottle band; its navy wordmark runs
      quiet there, accepted by that direction, and SDLT-BRAND-REVERSE-01
      (data/media.mjs) remains the proper fix.
   3. Nothing on the calculator reads white: form, panel, fields, choices,
      summary, table rows and the disclosure all step onto parchment rungs
      mixed from the ladder (bone-sunk into bone-raised), keeping every
      text pair at or above the measured greige floors. */
.sdlt-open::after {
  background-image: url("/assets/brand/dukes-logo.png");
  aspect-ratio: 625 / 441;
  width: clamp(13rem, 19vw, 19rem);
  opacity: 0.1;
  filter: saturate(0.7);
}
.sdlt__brandbar-logo {
  background: transparent;
  padding: 0;
}
.sdlt__form,
.sdlt__panel {
  background: color-mix(in srgb, var(--bone-sunk) 50%, var(--bone-raised));
}
.sdlt .form__control { background: var(--bone); }
.sdltchoice {
  background: color-mix(in srgb, var(--bone-sunk) 78%, var(--bone-raised));
}
@media (hover: hover) and (pointer: fine) {
  .sdltchoice:hover {
    background: color-mix(
      in srgb,
      var(--sand) 14%,
      color-mix(in srgb, var(--bone-sunk) 78%, var(--bone-raised))
    );
  }
}
.sdlt__summary,
.sdlt__more {
  background: color-mix(in srgb, var(--bone-sunk) 40%, var(--bone-raised));
}
.sdlt__table tbody tr:nth-child(odd) td { background: transparent; }
.sdlt__table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--bone-sunk) 32%, var(--bone-raised));
}

/* ==========================================================================
   RESTORED 10 August 2026, 23:32. A concurrent session overwrote
   public/assets/css/dukes.css at 23:30:51 and reverted it to a state that
   predated most of this page pass: the entire "What this covers" treatment
   was gone (the section fell back to plain bullets), the masthead reverted
   to the unreadable dark green, and the sticky-panel bug Aarav had rejected
   was reintroduced. Everything below is re-applied exactly as approved, in
   its original order. The full restore file is kept at
   scratchpad/PRE-STAMPDUTY-PASS/RESTORE-SDLT.css so it can be re-applied in
   one command if it happens again.
   ========================================================================== */

/* ---- Amendment 2: masthead legibility + watermark alignment ---- *
   The mark's navy wordmark was unreadable on near-black green and no
   reverse artwork exists yet. The hero watermark's right edge tracks the
   contained content column instead of the viewport edge. */
.sdlt__brandbar {
  background: var(--bone-sunk);
  border-top: 2px solid var(--copper);
}
.sdlt__brandbar-label { color: var(--copper-deep); }
.sdlt-open::after {
  right: max(calc((100% - var(--max)) / 2 + var(--inset)), var(--inset));
}

/* ---- Amendment 3: the masthead takes a tone of its own ---- *
   Greige matched the plate behind the panel, so the card read as floating.
   A champagne wash owned by neither neighbour, seated with a copper
   hairline. Navy wordmark ~8.5:1 on this ground. */
.sdlt__brandbar {
  background: color-mix(in srgb, var(--sand) 35%, var(--bone-sunk));
  border-bottom: 1px solid color-mix(in srgb, var(--copper) 35%, transparent);
}

/* ---- Amendment 4: the rule wraps the whole card ---- */
.sdlt__panel {
  border: 1px solid color-mix(in srgb, var(--copper) 35%, transparent);
}
.sdlt__brandbar { border-top: 0; }

/* ---- Amendment 5: header scroll elevation, this page only ---- *
   Hooks the site's own scroll-state flag (ui.mjs initHeaderScroll, already
   running globally). No new script; both selectors require the page. */
[data-page="stamp-duty"] .site-head {
  transition:
    box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
    border-bottom-color 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-scrolled="true"] [data-page="stamp-duty"] .site-head {
  box-shadow: 0 20px 36px -20px rgba(11, 35, 28, 0.5), inset 0 -2px 0 var(--sand);
  border-bottom-color: var(--copper);
}
@supports (backdrop-filter: blur(1px)) {
  html[data-scrolled="true"] [data-page="stamp-duty"] .site-head {
    backdrop-filter: blur(8px) saturate(1.15);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="stamp-duty"] .site-head { transition: none; }
}

/* ---- Amendment 6: the watermark reads as the real crest ---- *
   The desaturate filter and 10% opacity buried the crest's own gold, red
   and navy into a flat grey silhouette. */
.sdlt-open {
  background: linear-gradient(180deg, var(--bone-raised) 0%, var(--bone) 100%);
}
.sdlt-open::after {
  opacity: 0.22;
  filter: drop-shadow(0 6px 14px rgba(28, 33, 31, 0.1));
}

/* ==========================================================================
   Stamp Duty — "What this covers", rebuilt 10 August 2026 from Aarav's
   approved reference. The section was a heading, a paragraph, four flat
   bullets and two block-quoted notes with no hierarchy at all. It becomes a
   photographic band carrying the heading and lede, an overlapping scope
   composition where the four statements are ranked (01 leads on parchment,
   02/03 support, 04 closes on the deep band), and the notes in a designed
   aside. Every sentence is the pre-pass wording, unchanged.
   Page-scoped: .sdlt-covers* only.
   ========================================================================== */

.sdlt-covers {
  /* The overlap distance is the animation's travel too, so it is declared
     once and read by both the layout and the entrance. */
  --covers-lift: 112px;
  margin-top: var(--s6);
}

/* ---- The photographic band ---- */
.sdlt-covers__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(20rem, 34vw, 34rem);
  display: flex;
  align-items: flex-end;
  background: var(--bottle-deep);
}
.sdlt-covers__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The content-photograph grade, as the standing device specifies. */
  filter: brightness(0.96) contrast(1.05) saturate(1.03);
  transform-origin: 50% 55%;
  z-index: -2;
}
/* Two jobs: seat the image at its foot, and give the caption a ground dark
   enough for ivory type. Measured by pixel sample, not by eye — the sky and
   the white window frames are the bright risks, and both sit above the
   caption band, so the scrim is weighted to the lower half. */
.sdlt-covers__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(10, 12, 11, 0) 30%,
      rgba(10, 12, 11, 0.55) 62%,
      rgba(10, 12, 11, 0.88) 100%
    );
}
.sdlt-covers__caption {
  position: relative;
  width: 100%;
  display: grid;
  gap: var(--s4);
  padding: clamp(1.5rem, 3vw, 2.75rem);
}
@media (min-width: 62em) {
  .sdlt-covers__caption {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(2rem, 4vw, 4rem);
  }
}
.sdlt-covers__title {
  margin: 0;
  color: var(--on-deep);
  text-wrap: balance;
}
/* The lede is set against a sand hairline rather than an indent, so the two
   halves of the caption read as one composed line of thought. */
.sdlt-covers__lede {
  margin: 0;
  color: var(--on-deep);
  font-size: var(--t-small);
  line-height: 1.65;
  max-width: 46ch;
  padding-left: var(--s4);
  border-left: 1px solid var(--sand);
}

/* ---- The scope composition, overlapping the band ---- */
.sdlt-covers__list {
  list-style: none;
  margin: 0;
  padding: 0 clamp(0px, 2vw, 2.5rem);
  display: grid;
  gap: var(--s3);
}
@media (min-width: 62em) {
  .sdlt-covers__list {
    position: relative;
    margin-top: calc(-1 * var(--covers-lift));
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
  }
}
.sdlt-covers__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--bone-raised);
  border: 1px solid var(--rule);
}
.sdlt-covers__num {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1;
  color: var(--copper);
  font-variant-numeric: tabular-nums;
}
.sdlt-covers__text { min-width: 0; }

/* 01 leads: it spans the left column across both supporting rows, takes the
   parchment ground and sets its statement in the display face. */
.sdlt-covers__item--lead {
  background: var(--bone-sunk);
  border-color: color-mix(in srgb, var(--copper) 30%, transparent);
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 3vw, 2.75rem);
}
@media (min-width: 62em) {
  .sdlt-covers__item--lead {
    grid-row: span 2;
    align-content: space-between;
    min-height: 17rem;
  }
}
.sdlt-covers__item--lead .sdlt-covers__num {
  font-size: clamp(2.75rem, 5vw, 4rem);
  color: color-mix(in srgb, var(--copper) 55%, var(--bone-sunk));
}
.sdlt-covers__item--lead .sdlt-covers__text {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.35;
}
/* 02 and 03 alternate their ground so the pair reads as a rhythm rather
   than two identical tiles. */
.sdlt-covers__item--alt:nth-of-type(3) { background: var(--bone-sunk); }

/* 04 closes on the deep band, full width, with the arrow holding the end. */
.sdlt-covers__item--band {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  background: var(--accent-bottle-green);
  border-color: var(--rule-on-deep);
  border-top: 2px solid var(--sand);
  color: var(--on-deep);
  padding: var(--s4) clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 62em) {
  .sdlt-covers__item--band { grid-column: 1 / -1; }
}
.sdlt-covers__item--band .sdlt-covers__num { color: var(--sand); }
.sdlt-covers__item--band .sdlt-covers__text {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
}
.sdlt-covers__arrow { color: var(--sand); font-size: 1.125rem; line-height: 1; }

/* ---- The notes aside ---- */
.sdlt-covers__notes {
  margin-top: var(--s6);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--bone-raised);
  border-left: 2px solid var(--copper);
  display: grid;
  gap: var(--s3);
}
.sdlt-covers__notes .note { margin: 0; border-left: 0; padding-left: 0; }
.sdlt-covers__route { margin: var(--s2) 0 0; }

/* ==========================================================================
   Entrance choreography (Aarav's spec, 10 Aug 2026)
   700ms cubic-bezier(.22,1,.36,1): the photograph settles to 1.045 and its
   foot tint deepens, the scope composition lifts 112px into its overlap,
   the four statements stagger at 80ms, and the closing band deepens to
   green-black as its arrow travels 7px right.

   One deliberate change from the brief: the band animates between two DARK
   greens (brand green to green-black) rather than up from a light ground.
   Crossing light-to-dark under ivory text would pass through a stretch of
   failing contrast mid-transition; both ends of this range hold ivory at
   AA, so the movement is identical and nothing is ever unreadable.

   Every initial state is gated behind [data-enhanced], so with JavaScript
   unavailable the composition renders in its final, complete form.
   ========================================================================== */
[data-enhanced] .sdlt-covers[data-reveal="card"] {
  /* The wrapper only carries `is-in` for its children; the generic card
     entrance is neutralised so it cannot double up on them. */
  opacity: 1;
  transform: none;
}
[data-enhanced] .sdlt-covers__photo { transform: scale(1); }
[data-enhanced] .sdlt-covers.is-in .sdlt-covers__photo {
  transform: scale(1.045);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-enhanced] .sdlt-covers__scrim { opacity: 0.72; }
[data-enhanced] .sdlt-covers.is-in .sdlt-covers__scrim {
  opacity: 1;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 62em) {
  [data-enhanced] .sdlt-covers__list { transform: translateY(var(--covers-lift)); }
  [data-enhanced] .sdlt-covers.is-in .sdlt-covers__list {
    transform: none;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}
/* The four statements ride the shared stage reveal; only the interval
   changes, from the site's 45ms to the 80ms this composition asks for. */
[data-enhanced] .sdlt-covers__item[data-reveal="stage"].is-in {
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--stage-index, 0) * 80ms);
}
[data-enhanced] .sdlt-covers__item--band { background: var(--accent-bottle-green); }
[data-enhanced] .sdlt-covers__item--band.is-in { background: var(--bottle-deep); }
[data-enhanced] .sdlt-covers__item--band .sdlt-covers__arrow { transform: translateX(0); }
[data-enhanced] .sdlt-covers__item--band.is-in .sdlt-covers__arrow {
  transform: translateX(7px);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--stage-index, 0) * 80ms);
}

/* Reduced motion and Save-Data: opacity only. Every element arrives in its
   final position and colour with no travel, no scale and no tint shift. */
@media (prefers-reduced-motion: reduce) {
  [data-enhanced] .sdlt-covers__photo,
  [data-enhanced] .sdlt-covers.is-in .sdlt-covers__photo { transform: none; transition: none; }
  [data-enhanced] .sdlt-covers__scrim,
  [data-enhanced] .sdlt-covers.is-in .sdlt-covers__scrim { opacity: 1; transition: none; }
  [data-enhanced] .sdlt-covers__list,
  [data-enhanced] .sdlt-covers.is-in .sdlt-covers__list { transform: none; transition: none; }
  [data-enhanced] .sdlt-covers__item--band,
  [data-enhanced] .sdlt-covers__item--band.is-in { background: var(--bottle-deep); }
  [data-enhanced] .sdlt-covers__item--band .sdlt-covers__arrow,
  [data-enhanced] .sdlt-covers__item--band.is-in .sdlt-covers__arrow { transform: none; transition: none; }
}
[data-motion="static"] .sdlt-covers__photo,
[data-motion="static"] .sdlt-covers__list { transform: none !important; }
[data-motion="static"] .sdlt-covers__scrim { opacity: 1; }
[data-motion="static"] .sdlt-covers__item--band { background: var(--bottle-deep); }
[data-motion="static"] .sdlt-covers__item--band .sdlt-covers__arrow { transform: none !important; }

/* ---- Covers section, corrections on first render ---- *
   1. The lifted list covered the heading and lede: the caption reserves the
      overlap distance as bottom padding.
   2. The scrim was measured too weak for the sunlit render behind it.
   3. Supporting cards stepped onto parchment mixes: no surface reads white. */
@media (min-width: 62em) {
  .sdlt-covers__caption { padding-bottom: calc(var(--covers-lift) + var(--s5)); }
}
.sdlt-covers__scrim {
  background:
    linear-gradient(
      180deg,
      rgba(10, 12, 11, 0) 18%,
      rgba(10, 12, 11, 0.58) 55%,
      rgba(10, 12, 11, 0.93) 100%
    ),
    linear-gradient(0deg, rgba(10, 12, 11, 0.34), rgba(10, 12, 11, 0.34));
}
.sdlt-covers__item { background: color-mix(in srgb, var(--bone-sunk) 42%, var(--bone-raised)); }
.sdlt-covers__item--alt:nth-of-type(3) { background: color-mix(in srgb, var(--bone-sunk) 72%, var(--bone-raised)); }

/* ---- Covers caption: the type scrim rides the caption ---- *
   Pixel-sampled: the band scrim is anchored to the FOOT of the photograph
   while the lede sits mid-frame. The scrim that protects the type now
   tracks the text at every width and survives a photograph swap. Anchored
   in px, not percentages, so a taller caption cannot slide its text back
   into the ramp. Verified: heading 16.4:1, lede 13.7/11.8/8.2:1. */
.sdlt-covers__caption {
  background: linear-gradient(
    180deg,
    rgba(10, 12, 11, 0) 0,
    rgba(10, 12, 11, 0.9) 58px,
    rgba(10, 12, 11, 0.92) 100%
  );
}

/* ==========================================================================
   Stamp Duty — composition pass, 10 August 2026 (Aarav's review of the
   rebuilt caveats chapter and the closing route).

   Measured defects this fixes, all at 1440:
   - The 01-04 cards sat at x=89/1351 while the photograph and the notes
     sat at x=60/1380: a 29px misalignment running down the whole section.
   - 02 and 03 were 61px tall against 01's 272px, leaving ~138px of dead
     column under them.
   - The closing panel was 736px wide inside a 1320px measure — 584px of
     empty ground beside it, which is what "floating" looked like.
   - The section grounds painted rgb(250,247,240): effectively white.
   - Section padding was 100.8px top and bottom, so consecutive sections
     opened a ~200px void between two pieces of content.
   ========================================================================== */

/* ---- Grounds: warm, never white ---- */
[data-page="stamp-duty"] .band--raised {
  background: color-mix(in srgb, var(--bone-sunk) 24%, var(--bone-raised));
}
/* The closing chapter takes its own warmer rung so it never repeats the
   caveats ground it follows. */
[data-page="stamp-duty"] .band:not(.band--raised):not(.band--dark) {
  background: color-mix(in srgb, var(--bone-sunk) 45%, var(--bone-raised));
}
/* Rhythm: the bands were spending ~200px of nothing between sections. */
[data-page="stamp-duty"] .band { padding-block: clamp(2.75rem, 4.6vw, 4.75rem); }

/* ---- Alignment: the cards join the column the rest of the section uses ---- */
.sdlt-covers__list { padding: 0; }

/* ---- The dead column under 02/03 ---- *
   The supporting pair now stretches to fill the rows the lead card defines,
   and centres its own content, so the right side reads as two designed
   panels rather than two labels with a hole beneath them. */
@media (min-width: 62em) {
  .sdlt-covers__list { align-items: stretch; }
  .sdlt-covers__item--alt { align-content: center; }
}

/* ---- Card detailing: a seated object, not a floating tile ---- */
.sdlt-covers__item {
  position: relative;
  border-color: color-mix(in srgb, var(--copper) 22%, transparent);
  transition:
    background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* A copper index rule on the supporting pair, drawn from the number out —
   the same editorial device the chapter rules use, at card scale. */
.sdlt-covers__item--alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--copper);
  opacity: 0.55;
}
@media (hover: hover) and (pointer: fine) {
  .sdlt-covers__item--alt:hover {
    background: color-mix(in srgb, var(--sand) 12%, var(--bone-sunk));
    border-color: color-mix(in srgb, var(--copper) 45%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sdlt-covers__item { transition: none; }
}

/* ---- The notes aside: fills its measure instead of half of it ---- *
   The two notes sit side by side and the HMRC route takes the full width
   beneath them, separated by a hairline, so the block reads as one panel
   with a clear action rather than a ragged left-hand column. */
.sdlt-covers__notes {
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.75rem);
  background: color-mix(in srgb, var(--bone-sunk) 34%, var(--bone-raised));
  border-left: 3px solid var(--copper);
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: var(--s4);
}
@media (min-width: 62em) {
  .sdlt-covers__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdlt-covers__route { grid-column: 1 / -1; }
}
.sdlt-covers__route {
  margin: 0;
  padding-top: var(--s4);
  border-top: 1px solid color-mix(in srgb, var(--copper) 28%, transparent);
}

/* ==========================================================================
   The closing route — rebuilt to hold its measure
   Two columns inside one full-width deep panel: the invitation reads on the
   left, the action holds the right. Nothing floats, because the panel IS
   the ground for its chapter.
   ========================================================================== */
.sdlt-talk {
  max-width: none;
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(2.25rem, 4vw, 3.75rem);
  position: relative;
  overflow: hidden;
}
@media (min-width: 62em) {
  .sdlt-talk {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    padding-right: clamp(2.5rem, 5vw, 5rem);
  }
  .sdlt-talk .h-section { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .sdlt-talk .lede { grid-column: 1; grid-row: 2; }
  .sdlt-talk .hero__actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    margin-top: 0;
  }
}
.sdlt-talk .lede { max-width: 52ch; }
/* One quiet brass arc in the panel's far corner: the crest's geometry at
   architectural scale, never a texture and never over the type. */
.sdlt-talk::after {
  content: "";
  position: absolute;
  right: -6rem;
  bottom: -9rem;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--sand) 34%, transparent);
  pointer-events: none;
}
@media (max-width: 61.99em) {
  .sdlt-talk::after { display: none; }
}

/* ==========================================================================
   Entrance — the remaining pieces. Nothing on this page arrives statically.
   ========================================================================== */
[data-enhanced] .sdlt-covers__notes[data-reveal="card"] {
  opacity: 0;
  transform: translateY(14px);
}
[data-enhanced] .sdlt-covers__notes[data-reveal="card"].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* The closing panel's own arrival: the copy settles, then the action and
   the brass arc follow it in, once. */
[data-enhanced] .sdlt-talk .hero__actions { opacity: 0; transform: translateY(10px); }
[data-enhanced] .sdlt-talk.is-in .hero__actions {
  opacity: 1;
  transform: none;
  transition:
    opacity 460ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
    transform 460ms cubic-bezier(0.22, 1, 0.36, 1) 180ms;
}
[data-enhanced] .sdlt-talk::after { opacity: 0; transform: scale(0.94); }
[data-enhanced] .sdlt-talk.is-in::after {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) 140ms,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 140ms;
}
@media (prefers-reduced-motion: reduce) {
  [data-enhanced] .sdlt-covers__notes[data-reveal="card"],
  [data-enhanced] .sdlt-covers__notes[data-reveal="card"].is-in { transform: none; transition: none; }
  [data-enhanced] .sdlt-talk .hero__actions,
  [data-enhanced] .sdlt-talk.is-in .hero__actions { transform: none; transition: none; }
  [data-enhanced] .sdlt-talk::after,
  [data-enhanced] .sdlt-talk.is-in::after { opacity: 1; transform: none; transition: none; }
}
[data-motion="static"] .sdlt-covers__notes,
[data-motion="static"] .sdlt-talk .hero__actions { opacity: 1; transform: none !important; }
[data-motion="static"] .sdlt-talk::after { opacity: 1; transform: none !important; }

/* One measure down the whole page. `.band--raised` is full-bleed with its
   children capped at --max, which put the caveats chapter at 60-1380 while
   the calculator plate and closing panel sat at 118-1322. */
[data-page="stamp-duty"] .band--raised > * {
  max-width: calc(var(--max) - 2 * var(--inset));
}

/* The plain bands painted their ground as a centred 1320px slab with the
   lighter page showing either side — which is what read as floating. They
   go full-bleed and hand the measure to their children. */
[data-page="stamp-duty"] .band:not(.band--raised):not(.band--dark) { max-width: none; }
[data-page="stamp-duty"] .band:not(.band--raised):not(.band--dark) > * {
  max-width: calc(var(--max) - 2 * var(--inset));
  margin-inline: auto;
}
/* The brass arc was running through the action; dropped so its crown sits
   below the button and it holds the corner alone. */
.sdlt-talk::after {
  right: -8rem;
  bottom: -18rem;
  width: 24rem;
  height: 24rem;
}

/* The route spans both note columns correctly, but the global
   `p { max-width: var(--measure) }` capped it at 705px so its rule stopped
   halfway across the panel. It is a divider, not a paragraph of prose. */
.sdlt-covers__route { max-width: none; }

/* The scrimmed photograph shows between the lead card and the supporting
   column. At the inherited 12px that read as a crack; widened, it becomes a
   deliberate dark channel echoing the 04 band directly beneath it. */
@media (min-width: 62em) {
  .sdlt-covers__list { column-gap: clamp(0.75rem, 1.7vw, 1.5rem); }
}

/* ---- Aarav: "why did you change this / keep everything else the same" ----
   Two page-wide rules from the composition pass reached the CALCULATOR
   chapter, which he had already signed off: it went full-bleed with a warm
   ground, and its vertical rhythm tightened. Those were introduced for the
   two lower chapters ("What this covers" and the closing route), so they
   are re-scoped to those only. The calculator section returns to exactly
   the ground, measure and spacing it had before. */
[data-page="stamp-duty"] .band:not(.band--raised):not(.band--dark):not(:has(.sdlt-talk)) {
  max-width: var(--max);
  background: transparent;
  padding-block: clamp(3rem, 7vw, 8rem);
}
[data-page="stamp-duty"] .band:not(.band--raised):not(.band--dark):not(:has(.sdlt-talk)) > * {
  max-width: none;
  margin-inline: 0;
}
/* ==========================================================================
 * CLIENT PROTECTION — VERIFICATION LEDGER  ·  11 August 2026
 *
 * Rebuilt at Aarav's direction as a calm, source-led register rather than a
 * marketing compliance page: no dark band, no illustration, no card lift, no
 * shadows. Every selector is `.cpl-*` and every token is declared on
 * `.page--client-protection`, mirroring the `.page--complaints` pattern
 * directly above — no other route is reachable from here and no sitewide
 * token is touched.
 *
 * The @font-face for Gloock is already declared above (COMPLAINTS PROCEDURE
 * section) and is reused here, not redeclared.
 *
 * Palette contrast, checked against this file's actual values (not the
 * site's own bone/bottle/copper ladder, which this page does not use):
 *   ink on cream 15.65 · muted on cream 6.32 · copper on cream 6.92
 *   ink on parchment-1 13.82 · muted on parchment-1 5.58 · copper on
 *   parchment-1 6.11 · muted on parchment-2 4.74.
 *   Brass (9a7236) only reaches 3.74 on cream / 3.30 on parchment-1 — below
 *   the 4.5:1 text floor, so it is used for rules, focus rings and the large
 *   (32px+) section numerals only, never for eyebrow-sized text. Copper
 *   carries every small accent instead.
 * ========================================================================== */

.page--client-protection {
  --cpl-cream: #f6f3ec;
  --cpl-parchment-1: #ebe6dc;
  --cpl-parchment-2: #dcd6c9;
  --cpl-ink: #141a16;
  --cpl-muted: #4a544c;
  --cpl-brass: #9a7236;
  --cpl-brass-light: #c49b54;
  --cpl-copper: #6b4a2b;
  --cpl-line: rgba(16, 23, 19, 0.16);
  --cpl-line-strong: rgba(16, 23, 19, 0.32);
  --cpl-display: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --cpl-ease: var(--ease-arrive);

  background: var(--cpl-cream);
  color: var(--cpl-ink);
  font-variant-numeric: tabular-nums;
}

/* Anchored targets clear the site header AND the sticky page dock beneath it.
   Clearing only the header dropped each landed section underneath the dock —
   the very bar the reader used to get there was covering the heading. */
.page--client-protection { --cpl-dock-h: 4rem; }
.page--client-protection [id] { scroll-margin-top: calc(var(--head-h) + var(--cpl-dock-h) + 1rem); }

/* ------------------------------- Hero ------------------------------------ */

.cpl-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) var(--inset) clamp(1.75rem, 3vw, 2.5rem);
}

.cpl-hero__eyebrow { color: var(--cpl-copper); }

.cpl-hero__title {
  margin: 0 0 var(--s4);
  font-family: var(--cpl-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1.08;
  color: var(--cpl-ink);
  max-width: 20ch;
}

.cpl-hero__rule {
  display: block;
  width: 4.5rem;
  height: 2px;
  background: var(--cpl-brass);
  margin: 0 0 var(--s4);
}

.cpl-hero__lede {
  margin: 0 0 var(--s5);
  max-width: 52ch;
  color: var(--cpl-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.cpl-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s3);
  margin: 0;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--cpl-line);
  border-left: 2px solid var(--cpl-brass);
  border-radius: 2px;
  background: var(--cpl-parchment-1);
  width: fit-content;
  max-width: 100%;
  font-size: 0.875rem;
}

.cpl-proof__entity { font-weight: 700; }
.cpl-proof__sep { color: var(--cpl-brass); }

/* ------------------------------ Sections ---------------------------------- */

.cpl-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.75rem, 3.4vw, 2.75rem) var(--inset);
  border-top: 1px solid var(--cpl-line);
}

.cpl-section--sunk { background: var(--cpl-parchment-1); }

.cpl-section__num {
  margin: 0 0 0.25rem;
  font-family: var(--cpl-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  color: var(--cpl-brass);
}

.cpl-section__title {
  margin: 0 0 var(--s5);
  font-family: var(--cpl-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.2;
  color: var(--cpl-ink);
}

.cpl-section__caveat {
  margin: calc(-1 * var(--s4)) 0 var(--s5);
  max-width: 60ch;
  color: var(--cpl-muted);
  font-size: 0.875rem;
}

/* --------------------------- 01 Protection cards --------------------------- */

.cpl-section__grid {
  display: grid;
  gap: var(--s5);
  min-width: 0;
}
@media (min-width: 48em) {
  .cpl-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cpl-card {
  border: 1px solid var(--cpl-line);
  border-top: 2px solid var(--cpl-brass);
  border-radius: 2px;
  padding: clamp(1.125rem, 2vw, 1.5rem);
  background: var(--cpl-cream);
  min-width: 0;
}
.cpl-section--sunk .cpl-card,
.page--client-protection .cpl-section--sunk .cpl-card { background: var(--cpl-parchment-2); }

.cpl-card__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cpl-copper);
}

.cpl-card__title {
  margin: 0 0 var(--s4);
  font-family: var(--cpl-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.25;
}

.cpl-card__facts { margin: 0 0 var(--s4); display: grid; gap: 0; }
.cpl-card__fact {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: var(--s3);
  padding: 0.5rem 0;
  border-top: 1px solid var(--cpl-line);
  font-size: 0.875rem;
}
.cpl-card__fact dt { color: var(--cpl-muted); }
.cpl-card__fact dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.cpl-card__action { margin: 0; }
.cpl-card__meta { font-weight: 400; color: var(--cpl-muted); }

/* -------------------------- 02 Company register ---------------------------- */

.cpl-register {
  margin: 0 0 var(--s5);
  display: grid;
  gap: 0;
  max-width: 46rem;
}
.cpl-register > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--s4);
  padding: 0.625rem 0;
  border-top: 1px solid var(--cpl-line);
  font-size: 0.9375rem;
}
.cpl-register dt { color: var(--cpl-muted); }
.cpl-register dd { margin: 0; overflow-wrap: anywhere; }
.cpl-register__note {
  display: block;
  margin-top: 0.25rem;
  color: var(--cpl-muted);
  font-size: 0.8125rem;
}
.cpl-register__act { margin: 0; }

/* ------------------------ 03/04 disclosure register ------------------------ */

.cpl-list { display: block; }

.cpl-row {
  border-top: 1px solid var(--cpl-line);
}
.cpl-row:last-of-type { border-bottom: 1px solid var(--cpl-line); }

.cpl-row__summary {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s2) var(--s4);
  padding: 0.875rem 0;
  cursor: pointer;
  min-height: 2.75rem;
}
.cpl-row__summary::-webkit-details-marker { display: none; }
.cpl-row__summary::marker { content: ""; }

.cpl-row__title {
  font-weight: 700;
  color: var(--cpl-ink);
}
.cpl-row__what {
  grid-column: 1 / -1;
  color: var(--cpl-muted);
  font-size: 0.875rem;
}
.cpl-row__chev {
  position: relative;
  width: 0.625rem;
  height: 0.625rem;
  border-right: 2px solid var(--cpl-brass);
  border-bottom: 2px solid var(--cpl-brass);
  transform: rotate(45deg);
  transition: transform 220ms var(--cpl-ease);
  align-self: center;
}
.cpl-row[open] .cpl-row__chev { transform: rotate(225deg); }

.cpl-row__summary:focus-visible {
  outline: 2px solid var(--cpl-brass);
  outline-offset: 3px;
}

.cpl-row__body { padding: 0 0 1.25rem; }

.cpl-row__facts { margin: 0 0 var(--s3); display: grid; gap: 0.375rem; }
.cpl-row__facts > div { display: flex; gap: var(--s3); font-size: 0.875rem; }
.cpl-row__facts dt { color: var(--cpl-muted); min-width: 6rem; }
.cpl-row__facts dd { margin: 0; font-weight: 600; }

.cpl-row__caution { margin: 0 0 var(--s3); color: var(--cpl-muted); font-size: 0.8125rem; max-width: 56ch; }
.cpl-row__act { margin: 0; }

/* One-shot reveal for the record content each time a disclosure opens.
   Native <details> cannot animate its own open/close without JavaScript
   overriding the toggle (initClientProtection does this — see
   client-protection.mjs); this keyframe is what plays once that JS layer has
   set the body's height and reveals the content inside it. Without
   JavaScript the browser's native instant show/hide is the whole
   experience, which is also the reduced-motion end state. */
@keyframes cpl-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
[data-enhanced] .cpl-row[open] .cpl-row__body > * { animation: cpl-row-in 220ms var(--cpl-ease) both; }

/* ---------------------------------- Links ---------------------------------- */

.cpl-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
  min-height: 2.75rem;
  align-items: center;
  color: var(--cpl-copper);
  font-weight: 700;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 200ms var(--cpl-ease);
}
.cpl-link::after {
  content: "";
  position: relative;
  width: 0.6875rem;
  height: 0.6875rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 180ms var(--cpl-ease);
}
@media (hover: hover) and (pointer: fine) {
  .cpl-link:hover { background-size: 100% 2px; }
  .cpl-link:hover::after { transform: rotate(45deg) translate(2px, -2px); }
}
.cpl-link:focus-visible {
  outline: 2px solid var(--cpl-brass);
  outline-offset: 3px;
  background-size: 100% 2px;
  transition: none;
}

/* Inline text links (none currently rendered inside running copy on this
   route) are exempt from the 44px control-height rule by definition — the
   only inline link is the Email Dukes link in the closing line below, sized
   by its surrounding text, not as a button-shaped target. */
.cpl-help .cpl-link {
  min-height: 0;
  font-weight: 700;
}

/* ----------------------------------- Close ---------------------------------- */

.cpl-help {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.75rem, 3vw, 2.5rem) var(--inset) clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--cpl-line);
  color: var(--cpl-muted);
  font-size: 0.9375rem;
}

/* ----------------------------------- Motion ---------------------------------- */

@keyframes cpl-rise-12 {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes cpl-slide-12 {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes cpl-draw-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.cpl-hero__eyebrow,
.cpl-hero__title,
.cpl-hero__lede { animation: cpl-rise-12 560ms var(--cpl-ease) both; }
.cpl-hero__title { animation-delay: 60ms; }
.cpl-hero__lede { animation-delay: 120ms; }
.cpl-hero__rule {
  transform-origin: left center;
  animation: cpl-draw-x 420ms var(--cpl-ease) 260ms both;
}
.cpl-proof {
  animation: cpl-slide-12 480ms var(--cpl-ease) 340ms both;
}

@media (prefers-reduced-motion: reduce) {
  .cpl-hero__eyebrow,
  .cpl-hero__title,
  .cpl-hero__lede,
  .cpl-hero__rule,
  .cpl-proof { animation: none; }
  [data-enhanced] .cpl-row[open] .cpl-row__body > * { animation: none; }
}
[data-motion="static"] .cpl-hero__eyebrow,
[data-motion="static"] .cpl-hero__title,
[data-motion="static"] .cpl-hero__lede,
[data-motion="static"] .cpl-hero__rule,
[data-motion="static"] .cpl-proof { animation: none !important; }

/* ----------------------------------- Narrow --------------------------------- */

@media (max-width: 47.99em) {
  .cpl-card__fact,
  .cpl-register > div { grid-template-columns: 1fr; gap: 0.125rem; }
  .cpl-row__summary { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ==========================================================================
 * COMPLAINTS PROCEDURE — PREMIUM INSTITUTIONAL  ·  11 August 2026
 *
 * Two sections: make a complaint, then what happens next. The visual system
 * is the brief's: cream ground, white card surfaces, forest-green ink, warm
 * gold accents, serif titles over a humanist sans.
 *
 * Note on house style: this page carries rounded card geometry and hover
 * lift, which the earlier quiet-luxury passes explicitly banned. That is
 * Aarav's later instruction and it wins; the divergence is deliberate and
 * scoped to this route.
 *
 * Every selector is `.cxr-*` and every token is declared on
 * `.page--complaints`. The procedure wording and the three/ten working-day
 * commitments are NOT defined here — they come from data/complaints.mjs.
 * ========================================================================== */

@font-face {
  font-family: "Gloock";
  src: url("/assets/fonts/gloock-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.page--complaints {
  /* Desaturated, near-black greens rather than a flat saturated brand green
     — the same tonal family the site's other dark surfaces use, so the hero
     reads as considered charcoal-green rather than a stock "AI green". */
  --forest: #212821;
  --forest-deep: #1d241f;
  --gold: #a4855f;
  --gold-strong: #896b49;
  /* Gold for text and marks on LIGHT surfaces. #a4855f reads 2.55 on white —
     fine on the dark card, well under AA anywhere else — so light-ground gold
     darkens to this, same hue family, 5.16 on white / 4.70 on the warm
     neutral. */
  --gold-ink: #765a3d;
  --champagne: #ded0bc;
  --cream: #f8f4ec;
  --surface: #fdfbf7;
  --line: #e3ddd2;
  --line-warm: #d8cebf;
  --warm-neutral: #f1eadf;
  --cxr-ink: #14231c;
  --cxr-muted: #55635b;

  --cxr-shell: 1320px;
  --cxr-gutter: clamp(1.25rem, 4vw, 4rem);
  --cxr-display: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --cxr-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cxr-radius: 0.75rem;
  --cxr-shadow: 0 1px 2px rgba(19, 42, 32, 0.04), 0 8px 24px -12px rgba(19, 42, 32, 0.12);

  /* The dotted grid is painted straight onto the page background, with the
     15% baked into the dot colour. It was briefly a fixed ::before layer with
     `.page--complaints > * { position: relative }` above it — which silently
     overrode the shared header's `position: sticky` and pushed the whole page
     down 27px. A background image needs no stacking context and cannot touch
     the header. */
  background-color: var(--cream);
  background-image: none;
  color: var(--cxr-ink);
}

.cxr-shell {
  width: min(100% - (var(--cxr-gutter) * 2), var(--cxr-shell));
  margin-inline: auto;
}

/* The header's Properties and Rental Valuation actions stay. An earlier brief
   asked for them to be suppressed here; Aarav restored them on 11 August 2026
   — the shared banner should look the same on every route. */

.page--complaints .cxr-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
}

.page--complaints .cxr-eyebrow {
  margin: 0 0 0.5rem;
  color: var(--gold-ink);
  font-family: var(--font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page--complaints .cxr-open__title,
.page--complaints .cxr-route__title,
.page--complaints .cxr-include__title,
.page--complaints .cxr-contact__role,
.page--complaints .cxr-step h3 {
  font-family: var(--cxr-display);
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* ============================ Screen 1: hero ============================== */

.cxr-open {
  position: relative;
  /* clip, not hidden: the glows sit 2.5rem outside the card and would push the
     document 20px wide at 390px otherwise. clip contains them without making
     a scroll container. */
  overflow: clip;
  padding: clamp(1.5rem, 2.4vw, 2.25rem) 0 clamp(2rem, 3.2vw, 2.75rem);
  background-color: var(--forest-deep);
  background-image: none;
  border-bottom: 1px solid rgba(222, 208, 188, 0.22);
}

/* The two hero-scale ambient blooms — bigger and hero-anchored, distinct from
   .cxr-glow (which lights only the card, further down the same section).
   Pseudo-elements, not markup, since both are purely decorative. */
.cxr-open::before,
.cxr-open::after { content: none; }

/* Ambient glows: decorative, behind the card, and clipped by the stack so a
   72rem blur cannot bleed across the page or create a scrollbar. */
.cxr-glow { display: none; }

/* A 12-column hero: 7 for the copy, 5 for the card, vertically centred so
   neither column floats against the other. */
.cxr-open__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2rem, 4vw, 3rem);
}

.cxr-open__copy {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cxr-stack { grid-column: span 5; }

/* Pill eyebrow: gold text on a 10% gold wash with a gold hairline border —
   the dark-ground reading of the badge, now the hero itself is dark. */
.cxr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.3rem 0.75rem;
  background: rgba(164, 133, 95, 0.1);
  border: 1px solid rgba(164, 133, 95, 0.3);
  border-radius: 999px;
  color: var(--gold);
  font-family: var(--font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cxr-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.cxr-open__copy .cxr-action { width: auto; min-width: min(100%, 22rem); margin-top: 1.75rem; }

.cxr-contact__email {
  margin: 0 0 1rem;
  color: var(--gc-cream);
  font-size: 0.9375rem;
  word-break: break-word;
}

/* Breadcrumb: flush left with the badge and the headline, quiet, and clear of
   the H1. The shared component's markup is untouched — only its presentation
   changes on this route. */
.cxr-crumbs { margin-bottom: 2rem; }

/* The shared .crumbs nav carries its own page inset (57.6px at this width).
   Inside the hero the shell already supplies the gutter, so that padding
   pushed the trail 58px right of the badge and the headline. */
.page--complaints .cxr-crumbs .crumbs {
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}

.page--complaints .cxr-crumbs .crumbs__list {
  display: flex;
  flex-wrap: wrap;
  /* The links carry a 44px hit box and the current page is plain text: without
     a shared centre line the three items sit on different baselines. */
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  text-align: left;
}

.page--complaints .cxr-crumbs .crumbs__item {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.page--complaints .cxr-crumbs .crumbs__current {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Muted, non-essential punctuation. */
.page--complaints .cxr-crumbs .crumbs__item + .crumbs__item::before {
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  color: rgba(255, 255, 255, 0.3);
}

.page--complaints .cxr-crumbs .crumbs__link {
  /* 44px hit area without a 44px-looking link: the row is padded, the text is
     not. Regressed once in a restyle; pinned by the target test. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  /* rgba(255,255,255,0.6) reads just over 4.5 on the dark hero ground — the
     muted-light-text reading of this link, now the hero itself is dark. */
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  border-bottom: 0;
  transition: color 200ms var(--cxr-ease);
}

@media (hover: hover) and (pointer: fine) {
  .page--complaints .cxr-crumbs .crumbs__link:hover {
    color: #fff;
  }
}

.page--complaints .cxr-crumbs .crumbs__current {
  color: #fff;
  font-weight: 600;
}

.cxr-open__title {
  max-width: 14ch;
  margin: 0;
  color: #fff;
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.cxr-open__lede {
  max-width: 36rem;
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ------------------------ The shine-bordered card ------------------------- */

.cxr-contact {
  /* One step lighter than the hero (#1d241f) so the card still reads as a
     raised surface, without the flat brand-green fill. */
  --gc-bg: #24342c;
  --gc-cream: #fdfbf7;
  --gc-border: #e8e2d5;
  --gc-glow: rgba(164, 133, 95, 0.45);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.75rem, 2.6vw, 2.25rem);
  background: var(--gc-bg);
  color: var(--gc-cream);
  border: 1px solid rgba(232, 226, 213, 0.22);
  border-radius: 0.75rem;
  box-shadow: 0 18px 46px -30px rgba(4, 16, 11, 0.8);
}

/* A soft ambient wash at the base of the card, muted gold/cream rather than
   the reference's neon purple — resting low, rising on hover AND
   focus-within so a keyboard user tabbing onto the card's controls gets the
   same emphasis a pointer does. */
.cxr-contact::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -35%;
  width: 130%;
  height: 65%;
  background: radial-gradient(closest-side, var(--gc-glow), transparent 75%);
  filter: blur(36px);
  opacity: 0.3;
  transform: translateX(-50%);
  transition: opacity 400ms var(--cxr-ease);
  pointer-events: none;
}

.cxr-contact:hover::before,
.cxr-contact:focus-within::before {
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .cxr-contact::before { transition: none; }
}

/* Adapted from MagicUI's ShineBorder: one conic gradient, masked to the
   1.5px frame, rotating once every 12s. Brand colours only. */
.cxr-shine {
  display: none;
}

.cxr-shine::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  aspect-ratio: 1;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--gold) 40deg,
    var(--champagne) 80deg,
    var(--forest-deep) 140deg,
    transparent 220deg,
    transparent 360deg
  );
  transform: translate(-50%, -50%) rotate(0deg);
  animation: cxr-shine 12s linear infinite;
}

@keyframes cxr-shine {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.cxr-contact > * { position: relative; z-index: 1; }

.cxr-contact__avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  background: rgba(164, 133, 95, 0.12);
  border: 1px solid rgba(164, 133, 95, 0.4);
  border-radius: 0.25rem;
  color: var(--gold);
}

.cxr-contact__avatar .cxr-icon { width: 22px; height: 22px; }

.page--complaints .cxr-contact__role {
  margin: 0;
  color: var(--gc-cream);
  font-size: clamp(1.75rem, 2.4vw, 2.125rem);
  line-height: 1.1;
}

.cxr-contact .cxr-eyebrow { color: var(--gold); }

.cxr-contact__org {
  margin: 0.3rem 0 1.5rem;
  color: rgba(253, 251, 247, 0.7);
  font-size: 0.875rem;
}

/* ------------------------------- Controls -------------------------------- */

/* Paper on the dark hero: the one light, dominant action against the green
   ground, not another dark shape competing with it. */
.page--complaints .cxr-action {
  position: relative;
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.15rem;
  background: #fdfbf7;
  border: 1px solid var(--forest-deep);
  border-radius: 0.75rem;
  box-shadow: none;
  color: var(--forest-deep);
  text-decoration: none;
  transition: background-color 180ms var(--cxr-ease), border-color 180ms var(--cxr-ease);
}

.page--complaints .cxr-action::after { content: none; }

@keyframes cxr-shimmer {
  0%, 55% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.page--complaints .cxr-action > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.page--complaints .cxr-action strong { font-size: 0.9375rem; font-weight: 700; }

/* Solid, not alpha: at 0.78 this composited to ~4.0 on the gold fill and axe
   flagged it. Hierarchy comes from size and weight instead. */
.page--complaints .cxr-action small {
  margin-top: 0.1rem;
  color: var(--cxr-muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.page--complaints .cxr-action > .cxr-icon {
  transition: transform 180ms var(--cxr-ease);
}

.page--complaints .cxr-copy {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.85rem;
  padding: 0 0.9rem;
  background: var(--forest-deep);
  border: 1px solid rgba(232, 226, 213, 0.35);
  border-radius: 0.5rem;
  color: var(--gc-cream);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms var(--cxr-ease), color 160ms var(--cxr-ease);
}

.cxr-copy__mark { position: relative; display: grid; place-items: center; width: 16px; height: 16px; }
.cxr-copy__mark .cxr-icon { grid-area: 1 / 1; width: 16px; height: 16px; transition: opacity 140ms ease; }
.cxr-copy__mark .cxr-icon--check { opacity: 0; color: var(--gold); }
.cxr-copy.is-copied .cxr-icon--copy { opacity: 0; }
.cxr-copy.is-copied .cxr-icon--check { opacity: 1; }
.cxr-copy.is-copied { border-color: var(--gold); color: var(--gc-cream); }

.cxr-copy__status {
  display: block;
  margin-top: 0.5rem;
  min-height: 1.25em;
  color: rgba(253, 251, 247, 0.7);
  font-size: 0.8125rem;
}

.page--complaints .cxr-action:focus-visible,
.page--complaints .cxr-copy:focus-visible,
.page--complaints .cxr-cert__link:focus-visible,
.page--complaints .cxr-form__submit:focus-visible,
.page--complaints .cxr-crumbs a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ==================== Screen 1: essentials bento + SLA ==================== */

/* The hairline marks where the dark hero ends: a thin gold rule, then the
   alabaster-cream ground the include panel and its white cards sit on. */
.cxr-include {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(164, 133, 95, 0.25);
}

/* A cream field behind the white cards: the micro-shadow needs a surface to
   fall on, and a cream-on-cream stack reads flat. */
.cxr-include__panel {
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--warm-neutral);
  border: 1px solid rgba(164, 133, 95, 0.18);
  border-radius: var(--cxr-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.cxr-include__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.6fr);
  align-items: baseline;
  gap: 2rem;
  margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem);
}

.page--complaints .cxr-include__title {
  margin: 0;
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  line-height: 1.05;
}

.cxr-include__head p {
  max-width: 46ch;
  margin: 0;
  color: var(--cxr-muted);
  font-size: 0.875rem;
}

/* Three across, two rows. Each essential is its own white card. */
.cxr-include__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.3vw, 1rem);
  margin: 0;
  padding: 0;
}

.cxr-card {
  display: flex;
  flex-direction: column;
  transition: border-color 300ms var(--cxr-ease), box-shadow 300ms var(--cxr-ease);
  padding: clamp(1.1rem, 1.6vw, 1.5rem);
  background: var(--surface);
  border: 1px solid rgba(229, 231, 235, 0.8);
  border-radius: var(--cxr-radius);
  box-shadow: var(--cxr-shadow);
}

.cxr-include__n {
  margin-bottom: 0.6rem;
  color: var(--gold-ink);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cxr-card--field label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}

.cxr-field__req {
  color: var(--gold-ink);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: lowercase;
}

.cxr-field__desc {
  margin: 0.4rem 0 0;
  color: var(--cxr-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.cxr-field__error {
  margin: 0.4rem 0 0;
  color: #a3402f;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

.page--complaints .cxr-form input,
.page--complaints .cxr-form textarea {
  width: 100%;
  min-height: 46px;
  margin-top: auto;
  padding: 0.6rem 0.75rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  color: var(--cxr-ink);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color 160ms var(--cxr-ease), box-shadow 160ms var(--cxr-ease);
}

.page--complaints .cxr-form textarea { resize: vertical; }

.page--complaints .cxr-form input:focus-visible,
.page--complaints .cxr-form textarea:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(164, 133, 95, 0.25);
}

.page--complaints .cxr-form input[aria-invalid="true"],
.page--complaints .cxr-form textarea[aria-invalid="true"] {
  border-color: #a3402f;
}

.page--complaints .cxr-form input[aria-invalid="true"]:focus-visible,
.page--complaints .cxr-form textarea[aria-invalid="true"]:focus-visible {
  border-color: #a3402f;
  box-shadow: 0 0 0 3px rgba(163, 64, 47, 0.2);
}

.page--complaints .cxr-form input:disabled,
.page--complaints .cxr-form textarea:disabled {
  background: var(--warm-neutral);
  color: var(--cxr-muted);
  cursor: not-allowed;
}

/* Item 05: guidance, not a control — the accent note container. */
.cxr-card--note {
  background: var(--warm-neutral);
  border-color: var(--line-warm);
  box-shadow: none;
}

.cxr-card__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 0.6rem;
  background: rgba(164, 133, 95, 0.14);
  border-radius: 0.5rem;
  color: var(--gold-ink);
}

.cxr-card--note strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}

.cxr-card--note > span:last-child {
  color: var(--cxr-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.cxr-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(1rem, 1.8vw, 1.4rem);
}

.cxr-form__assurance {
  order: -1;
  flex: 1 1 22rem;
  max-width: 52ch;
  margin: 0;
  color: var(--cxr-muted);
  font-size: 0.8125rem;
}

.page--complaints .cxr-form__submit {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 1.4rem;
  background: var(--forest);
  border: 1px solid var(--forest);
  border-radius: 0.5rem;
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 180ms var(--cxr-ease);
}

/* ------------------------------ SLA badges -------------------------------- */

.cxr-slawrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin: clamp(1.5rem, 2.6vw, 2.25rem) 0 0;
}

.cxr-pill {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.75rem 1.15rem;
  background: var(--warm-neutral);
  border: 1px solid var(--line-warm);
  border-radius: var(--cxr-radius);
  color: var(--forest);
  transition: border-color 300ms var(--cxr-ease);
}

.cxr-pill__item { font-size: 0.875rem; line-height: 1.4; }
.cxr-pill__item strong { font-weight: 750; }
.cxr-pill__sep { width: 1px; height: 20px; background: var(--line-warm); }

.cxr-pill__close {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  margin-left: 0.25rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--cxr-muted);
  cursor: pointer;
  transition: background-color 200ms var(--cxr-ease), color 200ms var(--cxr-ease);
}

.cxr-pill__close .cxr-icon { width: 15px; height: 15px; }

/* --------------------------- Direct-send attachments ---------------------- */
/* Present only when the deployed endpoint is advertised; built by JS, so the
   no-JS page never shows controls that cannot work. */

.cxr-attach { margin-top: 0.9rem; display: grid; gap: 0.5rem; }

.page--complaints .cxr-attach__add {
  justify-self: start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  background: var(--surface);
  border: 1px solid var(--line-warm);
  border-radius: 0.5rem;
  color: var(--forest);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 200ms var(--cxr-ease);
}

.page--complaints .cxr-attach__add:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.cxr-attach__list { list-style: none; display: grid; gap: 0.35rem; margin: 0; padding: 0; }

.cxr-attach__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  word-break: break-word;
}

.page--complaints .cxr-attach__remove {
  min-height: 32px;
  padding: 0 0.6rem;
  background: transparent;
  border: 0;
  color: var(--gold-ink);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cxr-attach__meter { margin: 0; color: var(--cxr-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.cxr-attach__error { margin: 0; color: #8a2f22; font-size: 0.8125rem; font-weight: 600; }
.cxr-attach__turnstile { margin-top: 0.25rem; min-height: 65px; }

.cxr-form__sent {
  margin: clamp(1rem, 1.8vw, 1.4rem) 0 0;
  padding: 1rem 1.15rem;
  background: rgba(27, 54, 42, 0.06);
  border: 1px solid rgba(27, 54, 42, 0.25);
  border-radius: 0.5rem;
  color: var(--forest);
  font-size: 0.9375rem;
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .page--complaints .cxr-attach__add:hover { border-color: var(--gold); }
}

/* Tabular figures and a reserved min-width: counting 0 -> 10 changes digit
   count, and the label must not jump while it does. */
.cxr-ticker {
  display: inline-block;
  min-width: 1.6ch;
  font-variant-numeric: tabular-nums;
}

/* ======================= Screen 2: the complaint route ==================== */

.cxr-route {
  padding: clamp(2.25rem, 3.6vw, 3.25rem) 0 clamp(2rem, 3.2vw, 3rem);
  background: var(--cream);
  border-top: 1px solid rgba(232, 225, 213, 0.6);
}

.cxr-route__head { margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }

.page--complaints .cxr-route__title {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(2.1rem, 3.2vw, 3.25rem);
  line-height: 1.03;
}

.cxr-route__head p:last-child {
  max-width: 52ch;
  margin: 0.65rem 0 0;
  color: var(--cxr-muted);
  font-size: 0.9375rem;
}

/* Five stages as a connected progression: three across, then two. */
/* A gold spine down the left of the sequence, anchoring the five cards to one
   process rather than leaving them as loose tiles. */
.cxr-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin: 0;
  padding-left: clamp(1rem, 1.8vw, 1.5rem);
  border-left: 2px solid rgba(164, 133, 95, 0.3);
}

.cxr-step {
  position: relative;
  padding: clamp(1.1rem, 1.7vw, 1.5rem);
  background: var(--surface);
  border: 1px solid rgba(229, 231, 235, 0.9);
  border-radius: var(--cxr-radius);
  box-shadow: var(--cxr-shadow);
  transition: transform 200ms var(--cxr-ease), border-color 200ms var(--cxr-ease),
    box-shadow 200ms var(--cxr-ease);
}

/* Stage one is where the visitor starts, so it opens by default and carries
   the active treatment; the rest preview their title and expand on click —
   each stage's own <details>, so every stage's full text is still real,
   present content, not JS-generated on demand. */
.cxr-step.is-active {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(164, 133, 95, 0.3), var(--cxr-shadow);
}

.cxr-step:last-child { grid-column: span 2; }

.cxr-step__summary {
  list-style: none;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  cursor: pointer;
}
.cxr-step__summary::-webkit-details-marker { display: none; }
.cxr-step__summary::marker { content: ""; }
.cxr-step__summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

.cxr-step__n {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--warm-neutral);
  border-radius: 0.5rem;
  color: var(--gold-ink);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 700;
}

.cxr-step.is-active .cxr-step__n { background: var(--forest); color: var(--champagne); }

.page--complaints .cxr-step h3 {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.2;
}

/* A plain "+", rotated to read as "×" once open — the same rotate-a-plus
   trick used nowhere else needs its own icon asset or script. */
.cxr-step__toggle {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(164, 133, 95, 0.4);
  border-radius: 50%;
  color: var(--gold-ink);
  transition: transform 200ms var(--cxr-ease);
}
.cxr-step__toggle::before { content: "+"; font-size: 1rem; line-height: 1; }
.cxr-step__d[open] .cxr-step__toggle { transform: rotate(45deg); }

.cxr-step__body { padding: 0.85rem 0 0 calc(2.5rem + 0.85rem); }

.cxr-step p {
  max-width: 60ch;
  margin: 0;
  color: var(--cxr-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* --------------------------- Independent redress -------------------------- */

.cxr-independent {
  max-width: 82ch;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding-top: clamp(1.25rem, 2.2vw, 1.75rem);
  border-top: 1px solid var(--line);
  color: var(--cxr-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* ---------------------------- Certificate card ---------------------------- */

.cxr-cert { max-width: none; margin: clamp(1.25rem, 2.2vw, 1.75rem) 0 0; }

.page--complaints .cxr-cert__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
  padding: clamp(1rem, 1.6vw, 1.25rem);
  background: var(--warm-neutral);
  border: 1px solid var(--line-warm);
  border-radius: var(--cxr-radius);
  color: var(--cxr-ink);
  text-decoration: none;
  transition: border-color 180ms var(--cxr-ease), box-shadow 180ms var(--cxr-ease);
}

.cxr-cert__mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--surface);
  border: 1px solid var(--line-warm);
  border-radius: 0.5rem;
  color: var(--gold-strong);
}

.cxr-cert__mark { color: var(--gold-ink); }
.cxr-cert__mark .cxr-icon { width: 22px; height: 22px; }

/* The Property Redress mark replaced the generic file glyph here (11 August
   2026). It is a 300x160 landscape logo, so the square 44px well would have
   scaled it to 23px tall and made the wordmark unreadable; the well widens
   to suit the artwork instead. Height stays at 44 so the row's three-column
   grid keeps the same optical baseline as before. */
.cxr-cert__mark--logo {
  width: auto;
  min-width: 76px;
  padding: 0.375rem 0.5rem;
  background: #fff;
}
.cxr-cert__logo {
  display: block;
  width: auto;
  height: 100%;
  max-height: 30px;
  object-fit: contain;
}

.cxr-cert__meta { min-width: 0; display: flex; flex-direction: column; }
.cxr-cert__meta strong { font-size: 0.9375rem; font-weight: 650; }

.cxr-cert__meta small {
  margin-top: 0.15rem;
  color: var(--cxr-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.cxr-cert__action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  background: var(--forest);
  border-radius: 0.5rem;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 650;
  white-space: nowrap;
  transition: background-color 180ms var(--cxr-ease);
}

.cxr-cert__action .cxr-icon { width: 16px; height: 16px; }

/* ========================= Stacked document layers ======================== */
/* The stacked-card mechanic, applied where it cannot hide anything: two
   decorative leaves behind the contact card, so it reads as the top sheet of
   a correspondence file. The back layers carry no text and are aria-hidden —
   content at opacity 0.5 behind another card is unreadable, and every fact on
   this page has to stay legible. */

.cxr-stack {
  position: relative;
  isolation: isolate;
}

.cxr-stack__leaf {
  display: none;
}

.cxr-stack__leaf--back {
  z-index: 1;
  opacity: 0.5;
  transform: translate(1rem, -1rem) scale(0.9);
}

.cxr-stack__leaf--mid {
  z-index: 2;
  opacity: 0.8;
  transform: translate(0.5rem, -0.5rem) scale(0.95);
}

.cxr-stack .cxr-contact {
  z-index: 3;
  transition: border-color 180ms var(--cxr-ease), box-shadow 180ms var(--cxr-ease);
}

/* Response commitment is quiet metadata, not a decorative status pill. */
.cxr-contact__badge {
  display: block;
  margin: 0 0 0.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  /* --gold itself reads under 4.5:1 on this card's ground at this weight and
     size; champagne is the same warm-gold family, lightened enough to clear
     AA comfortably. */
  color: var(--champagne);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cxr-contact__badge::before { content: none; }

.cxr-contact__tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(164, 133, 95, 0.28);
  color: rgba(253, 251, 247, 0.65);
  font-size: 0.75rem;
}

.cxr-contact__tag .cxr-icon { width: 14px; height: 14px; color: var(--gold); }

/* ================================ Motion ================================== */

@media (hover: hover) and (pointer: fine) {
  .page--complaints .cxr-action:hover { background: #e8dfd2; border-color: var(--gold); }
  .page--complaints .cxr-crumbs .crumbs__link:hover { color: var(--forest); }
  .cxr-pill:hover { border-color: var(--gold); box-shadow: 0 10px 26px -10px rgba(19, 42, 32, 0.3); }
  .cxr-pill__close:hover { background: rgba(19, 42, 32, 0.08); color: var(--forest); }
  .page--complaints .cxr-action:hover > .cxr-icon { transform: translateX(4px); }
  .page--complaints .cxr-copy:hover { border-color: var(--forest); color: var(--forest); }
  .page--complaints .cxr-form__submit:hover { background: var(--forest-deep); }

  .cxr-stack:hover .cxr-contact {
    border-color: #c9baa7;
    box-shadow: 0 20px 48px -34px rgba(4, 16, 11, 0.75);
  }

  /* Neutral cards lift; the active stage is already raised, so it holds still. */
  .cxr-step:not(.is-active):hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 12px 28px -14px rgba(19, 42, 32, 0.28);
  }

  /* Every light card warms its edge on hover. */
  .cxr-card:hover {
    border-color: var(--gold);
    box-shadow: 0 6px 18px -8px rgba(19, 42, 32, 0.16);
  }

  .page--complaints .cxr-cert__link:hover {
    border-color: var(--gold);
    box-shadow: 0 12px 28px -16px rgba(19, 42, 32, 0.3);
  }
  .page--complaints .cxr-cert__link:hover .cxr-cert__action { background: var(--forest-deep); }
}

@media (prefers-reduced-motion: reduce) {
  .cxr-pill { transition: none; }

  .page--complaints .cxr-action,
  .page--complaints .cxr-action > .cxr-icon,
  .page--complaints .cxr-copy,
  .page--complaints .cxr-form__submit,
  .page--complaints .cxr-cert__link,
  .page--complaints .cxr-cert__action,
  .cxr-step,
  .cxr-stack .cxr-contact,
  .cxr-copy__mark .cxr-icon,
  .page--complaints .cxr-form input,
  .page--complaints .cxr-form textarea,
  .page--complaints .cxr-crumbs .crumbs__link,
  .cxr-card {
    transition: none;
  }

  .cxr-stack:hover .cxr-contact,
  .cxr-step:not(.is-active):hover { transform: none; }
}

/* ============================== Responsive ================================ */

@media (max-width: 72em) {
  .cxr-open__copy { grid-column: span 6; }
  .cxr-stack { grid-column: span 6; }
  .cxr-include__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cxr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cxr-step:last-child { grid-column: auto; }
}

@media (max-width: 56em) {
  .cxr-open__grid { grid-template-columns: 1fr; }
  .cxr-open__copy,
  .cxr-stack { grid-column: 1 / -1; }
  .cxr-open__title { max-width: none; }
  .cxr-open__copy .cxr-action { width: 100%; min-width: 0; }
  .cxr-include__head { grid-template-columns: 1fr; gap: 0.75rem; }

  /* The decorative leaves need room the copy needs more; the real card stays. */
  .cxr-stack__leaf { display: none; }
  .cxr-stack { margin-top: 0.5rem; }
}

@media (max-width: 40em) {
  .cxr-include__list,
  .cxr-steps { grid-template-columns: 1fr; }
  .cxr-steps { padding-left: 0.9rem; }
  .cxr-include__panel { padding: 1.1rem; }

  /* Below 40em the pill stops being a pill: a single line of two commitments
     cannot round-cap without wrapping into an unreadable lozenge. */
  .cxr-pill {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.15rem;
    border-radius: var(--cxr-radius);
  }
  .cxr-pill__sep { display: none; }
  .cxr-pill__close { position: absolute; top: 0.35rem; right: 0.35rem; }
  .cxr-slawrap { position: relative; }

  .cxr-form__actions { justify-content: stretch; }
  .page--complaints .cxr-form__submit { width: 100%; justify-content: center; }

  .page--complaints .cxr-cert__link {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 1rem;
  }
  .cxr-cert__action { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 26em) {
  .cxr-crumbs { margin-bottom: 1.5rem; }
  .cxr-open__title { font-size: clamp(2.2rem, 11vw, 2.75rem); }
  .page--complaints .cxr-route__title { font-size: clamp(1.9rem, 9vw, 2.3rem); }
  .cxr-contact { padding: 1.35rem; }
}

/* ====================== Header: current-section accent + hide-on-scroll ==== */
/* Sitewide, not one route. The header stays the normal square, full-width,
   sticky bar everywhere — only two things are added to it:
   (1) a gold light-bar under whichever nav group the current page lives in
       (About, for /complaints/), marked at build time in build/shell.mjs via
       data-nav-current-group so no script is needed and it cannot drift out
       of sync with the dropdown it describes;
   (2) an animated hide-on-scroll-down / reveal-on-scroll-up, driven by the
       shared initHeaderScroll() in ui.mjs, with the same guards a scripted
       auto-hiding header always needs: suppressed while a dropdown or the
       mobile drawer is open, suppressed while focus rests anywhere inside
       it, and skipped entirely under reduced motion. */
[data-nav-trigger][data-nav-current-group] {
  position: relative;
  color: var(--bottle);
}

[data-nav-trigger][data-nav-current-group]::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 50%;
  width: 1.5rem;
  height: 2px;
  background: #a4855f;
  box-shadow: 0 0 8px #a4855f;
  /* Centred on the label itself, not the trigger's full hit-box — the box
     also contains the .nav__caret icon plus its flex gap (6px each), which
     would otherwise pull the bar 6px right of the text. */
  transform: translateX(calc(-50% - 6px));
}

/* Mobile drawer: no horizontal bar to sit above in a vertical accordion row,
   so the current group is signalled by recolouring its own label instead. */
.mnav__summary[data-nav-current-group] {
  color: var(--bottle);
  font-weight: 700;
}

.site-head {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Kept in flow (not display:none) so the dropdown panels it still contains
   are never orphaned, and pointer-events are cut so an invisible header
   cannot be clicked through to. */
.site-head.head--hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-head,
  .site-head.head--hidden {
    transform: none;
    transition: none;
    pointer-events: auto;
  }
}

/* ============================== Ambient card glow ========================== */
/* A gold-forest-gold halo directly behind the contact card, adapted from
   21st.dev's "card-with-glow": rests low, intensifies on hover and on
   focus-within so keyboard users tabbing onto the card's controls get the
   same emphasis a pointer does. */

.cxr-halo {
  display: none;
}

.cxr-stack:hover .cxr-halo,
.cxr-stack:focus-within .cxr-halo {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cxr-halo {
    transition: none;
  }
}

/* ==========================================================================
 * SALES VALUATION — COMPONENT 01: THE SURVEY HEADER          13 August 2026
 *
 * Supersedes the 13 August baseline layer (kept as the behavioural contract,
 * replaced as the visual one). The difficult behaviour still lives in
 * nav.mjs and is untouched: real buttons, explicit expanded state, Escape,
 * focus return, pointer grace and a native-<details> compact fallback. This
 * layer is the art direction on top of it.
 *
 * THE IDEA. Every other route's header is a bar you navigate from. On the
 * assessment route it is the head of a survey sheet: the reader is opening a
 * file on their own property, and the chrome above that file should read like
 * the top margin of a measured drawing rather than like agency furniture.
 *
 * One motif carries the whole component — the copper rule with a scale on it,
 * lifted from the surveying rule the page's own opening already draws:
 *   · the header's bottom edge is that rule, with ticks and a lead segment
 *     that reports how far into the assessment the reader has come;
 *   · a navigation label is underlined by a rule that lands with an end tick,
 *     the way a dimension is taken;
 *   · the section the reader is in is bracketed like a measured span;
 *   · an open dropdown is tethered to its own trigger by the same hairline
 *     and unrolls beneath it like a sheet laid on the desk;
 *   · every opened surface — dropdown, compact drawer, the action itself —
 *     is headed by the same 2px copper rule.
 *
 * WHAT IT IS NOT ALLOWED TO DO. Nothing here changes the header's height, in
 * any state, at any width: the mark never scales, the dropdown is absolutely
 * positioned, and the survey rule is absolutely positioned too. No colour is
 * the only carrier of state. Every motion resolves to a finished, readable
 * frame with the preference set to reduce, and the component is complete and
 * operable before a line of JavaScript runs.
 *
 * Scope: every selector below is inside .page--sales-valuation. No other
 * route, and no other component on this route, is reached by this block.
 * ========================================================================== */

.page--sales-valuation {
  /* Route-local, so the shared header on twenty-two other pages cannot
     inherit any of it.

     WHY THESE ARE LITERAL AND NOT --copper / --bottle. The site-wide colour
     promotion further up this file remapped the original primitives onto the
     warm-neutral system: --copper now resolves to the text-safe deep brass
     #6b4620, --bottle to olive charcoal #1d241f and --sand to champagne. That
     remapping is right for body copy and for the neutral surfaces it was
     written for, and it is left completely alone.
     This component is the one place the brief asks for the original brand
     metals back: copper #8f5024 for the linework, bottle green #12362b for
     the single action. Both are used exactly where the system says they are
     safe — copper only on rules, ticks, traces and marks that carry no
     reading burden, never on small text, which keeps consuming the deep
     brass; bottle green only as the fill behind #f6f4ef at 13:1. The system's
     own note is that the one green thing on a page should be the thing you
     are meant to press, and on this route that is the assessment action. */
  --svh-copper: #8f5024;
  --svh-bottle: #12362b;
  --svh-bottle-deep: #0b231c;
  --svh-sand: #efc29a;

  --svh-line: rgb(143 80 36 / 42%);
  --svh-line-soft: rgb(143 80 36 / 18%);
  --svh-grid: rgb(143 80 36 / 3.6%);
  --svh-sheet: var(--surface-ivory);
  --svh-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- 1. The surface: drafting paper, and what scrolling does to it ------- *
   At rest the bar is bone with a faint 64px survey grid ruled across it and a
   paper sheen along its top edge — visible at arm's length, invisible as
   decoration. Once the page has moved, the grid fades out, the sheet lifts to
   raised bone and the bottom rule sharpens: the drawing has been picked up.
   Surface emphasis only. The `background-color` layer is what changes, so the
   state is readable from computed style and not merely from an image.       */

.page--sales-valuation .site-head--valuation {
  background-color: var(--bone);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 46%), transparent 42%);
  background-repeat: no-repeat;
  /* The edge is drawn by the survey rule below, not by a border. The border
     is kept at full width so the bar's height is unchanged in every state,
     and made transparent so there is one line along the bottom rather than
     two nearly-coincident ones. */
  border-bottom: 1px solid transparent;
  box-shadow: none;
  /* Deliberately not a background-color transition. The two bones are a
     couple of units apart and crossfading them reads as nothing at all,
     while a colour caught mid-transition is a state that cannot be observed
     reliably — the component's own scroll test reads the computed value on
     the frame the attribute flips, and a 260ms tint fails there roughly one
     run in three. The surface swaps at once and the change is carried by the
     things that actually communicate it: the contact shadow arriving, the
     ruling fading out, the scale coming up on the rule. */
  transition: box-shadow 260ms var(--ease-in-out);
}

/* The survey grid. Its own layer behind the content, ruled at the same 96px
   pitch as the rule's scale so the two read as one drawing, and masked away
   across the first 330px — the genuine mark keeps the uninterrupted light
   field the design system requires of it, with no plate, ring or box. */
.page--sales-valuation .site-head--valuation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 95px, var(--svh-grid) 95px 96px);
  mask-image: linear-gradient(90deg, transparent 0 210px, #000 330px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 210px, #000 330px);
  transition: opacity 320ms var(--ease-in-out);
}

/* Picked up off the desk: the ruling fades, the sheet lifts to raised bone,
   and the bar gains a contact shadow. Emphasis only — no dimension moves. */
html[data-scrolled="true"] .page--sales-valuation .site-head--valuation {
  background-color: var(--bone-raised);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 62%), transparent 42%);
  box-shadow:
    0 18px 34px -28px rgb(11 35 28 / 74%),
    inset 0 1px 0 rgb(255 255 255 / 55%);
}

html[data-scrolled="true"] .page--sales-valuation .site-head--valuation::before { opacity: 0; }

/* The mark holds one size in every state. The shared sheet steps it from 50px
   to 47px once the page has moved, which is a perfectly good idea on a bar
   that is meant to compress — and the wrong one here, where nothing about the
   header is allowed to change dimension. Pinned across the tablet band as
   well as the wide one, which the earlier layer had left out. */
@media (min-width: 64em) and (max-width: 73.99em) {
  .page--sales-valuation .site-head--valuation .brand__mark,
  html[data-scrolled="true"] .page--sales-valuation .site-head--valuation .brand__mark {
    height: 50px;
  }

  .page--sales-valuation .site-head--valuation .site-head__inner,
  html[data-scrolled="true"] .page--sales-valuation .site-head--valuation .site-head__inner {
    min-height: 82px;
  }
}

@media (min-width: 74em) {
  /* One height, both states. 78px closed, 78px open, 78px scrolled. */
  .page--sales-valuation .site-head--valuation .site-head__inner,
  html[data-scrolled="true"] .page--sales-valuation .site-head--valuation .site-head__inner {
    min-height: 78px;
    padding-block: 8px;
  }

  .page--sales-valuation .site-head--valuation .brand__mark,
  html[data-scrolled="true"] .page--sales-valuation .site-head--valuation .brand__mark {
    height: 47px;
  }

  /* The bar is bounded by its own column rather than by its content.
     The shared sheet sizes the list to its labels and centres it, which is
     right for the seven groups the public build ships and wrong for the eight
     the review build shows: measured at 1184px, the eighth ran 31px into the
     action block, and at 1240px it still ran 10px in. Filling the column and
     letting the gaps take the strain means the row can be crowded but can
     never collide — the gap floor is 12px, which is still a readable
     separation, and the labels never wrap or truncate. */
  .page--sales-valuation .site-head--valuation .nav--wide { min-width: 0; }

  .page--sales-valuation .site-head--valuation .nav--wide .nav__list {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    justify-content: space-between;
    gap: clamp(0.75rem, 1.5vw, 2rem);
    flex-wrap: nowrap;
  }

  /* The gaps absorb the pressure, never the labels: an item that could shrink
     below its own text would overlap its neighbour rather than crowd it. */
  .page--sales-valuation .site-head--valuation .nav__item { flex: 0 0 auto; }

  .page--sales-valuation .site-head--valuation .nav__link,
  .page--sales-valuation .site-head--valuation .nav__link--trigger { white-space: nowrap; }

  /* The action is separated from the navigation by a hairline rather than by
     distance alone: it is the page's task, not another destination. */
  .page--sales-valuation .site-head--valuation .site-head__actions {
    position: relative;
    gap: 0;
    padding-left: clamp(1rem, 2vw, 1.75rem);
  }

  .page--sales-valuation .site-head--valuation .site-head__actions::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 26px;
    background: var(--svh-line-soft);
    transform: translateY(-50%);
  }
}

/* The narrow desktop band, 1184-1279px. This is where the wide bar first
   appears and where the fullest architecture the project ships — the review
   build's eight groups, one more than the public build's seven — is closest
   to running out of room. Measured there rather than assumed: the labels
   tighten by a step and the gaps drop to their floor, which buys back the
   50px the eighth group needs and leaves the row separated rather than
   merely fitting. Above 80em nothing is tightened, because nothing needs
   to be. */
@media (min-width: 74em) and (max-width: 79.99em) {
  .page--sales-valuation .site-head--valuation .nav--wide .nav__list { gap: 12px; }

  .page--sales-valuation .site-head--valuation .nav__link,
  .page--sales-valuation .site-head--valuation .nav__link--trigger { font-size: 0.9rem; }

  .page--sales-valuation .site-head--valuation .site-head__actions { padding-left: 0.75rem; }
}

/* ---- 2. The survey rule: the signature ---------------------------------- *
   A copper hairline along the bottom edge carrying a 96px scale, and a lead
   segment that extends with the reader's progress through the page. It is
   absolutely positioned, so it adds nothing to the header's height, and it is
   aria-hidden and pointer-transparent, so it states nothing that is not also
   stated in words somewhere the reader can reach.                           */

.page--sales-valuation .svrule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 7px;
  overflow: hidden;
  pointer-events: none;
}

.page--sales-valuation .svrule__track,
.page--sales-valuation .svrule__lead,
.page--sales-valuation .svrule__ticks {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
}

/* The rule itself, occupying the row the border would have. Drawn once from
   the left on arrival; deepens with the scrolled state. */
.page--sales-valuation .svrule__track {
  bottom: 0;
  height: 1px;
  background: var(--svh-line-soft);
  transform-origin: left center;
  transition: background-color 260ms var(--ease-in-out);
}

html[data-scrolled="true"] .page--sales-valuation .svrule__track { background: var(--svh-line); }

/* The scale, standing on the rule. Held back at rest so the resting bar is
   quiet, brought up the moment the page is in motion: the drawing is in use. */
.page--sales-valuation .svrule__ticks {
  bottom: 1px;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    var(--svh-copper) 0 1px,
    transparent 1px 96px
  );
  opacity: 0;
  transition: opacity 320ms var(--ease-in-out);
}

html[data-scrolled="true"] .page--sales-valuation .svrule__ticks { opacity: 0.3; }

/* The lead segment: how far into the assessment the reader has come. A
   transform, so it costs a composite and never a layout. */
.page--sales-valuation .svrule__lead {
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--svh-bottle), var(--svh-copper));
  transform: scaleX(var(--svrule-progress, 0));
  transform-origin: left center;
  will-change: transform;
}

/* ---- 3. Brand arrival --------------------------------------------------- *
   The mark settles, then the rule draws out from under it across the full
   width. Once, on arrival, and only where enhancement is actually running —
   nothing that could be left invisible by a failed script is ever animated
   in. The artwork is not scaled, recoloured, cropped or plated.             */

html[data-enhanced="true"][data-motion="full"] .page--sales-valuation .site-head--valuation .brand__mark {
  animation: svhead-brand 520ms var(--svh-ease) both;
}

html[data-enhanced="true"][data-motion="full"] .page--sales-valuation .svrule__track {
  animation: svhead-draw 760ms var(--svh-ease) 140ms both;
}

@keyframes svhead-brand {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}

@keyframes svhead-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---- 4. Navigation: a label, and the dimension taken under it ----------- */

@media (min-width: 64em) {
  .page--sales-valuation .site-head--valuation .nav__link,
  .page--sales-valuation .site-head--valuation .nav__link--trigger {
    color: var(--ink);
    letter-spacing: 0.005em;
  }

  /* The underline is a measured span: a hairline that draws left to right and
     lands with a vertical end tick, the way a dimension is closed off. One
     element carries both marks, so there is nothing extra in the DOM. */
  .page--sales-valuation .site-head--valuation .nav__link::after,
  .page--sales-valuation .site-head--valuation .nav__link--trigger::after {
    bottom: 3px;
    height: 6px;
    background:
      linear-gradient(var(--svh-copper), var(--svh-copper)) 0 100% / 100% 1px no-repeat,
      linear-gradient(var(--svh-copper), var(--svh-copper)) 0 100% / 1px 5px no-repeat,
      linear-gradient(var(--svh-copper), var(--svh-copper)) 100% 100% / 1px 5px no-repeat;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 320ms var(--svh-ease);
  }

  /* Restated at this layer's own specificity. The shared sheet sets the
     drawn state on a two-class selector, which this component's three-class
     base rule would otherwise outrank — leaving a label that never underlined
     at all. */
  .page--sales-valuation .site-head--valuation .nav__link:hover::after,
  .page--sales-valuation .site-head--valuation .nav__link:focus-visible::after,
  .page--sales-valuation .site-head--valuation .nav__link[aria-current="page"]::after,
  .page--sales-valuation .site-head--valuation .nav__link--trigger:hover::after,
  .page--sales-valuation .site-head--valuation .nav__link--trigger:focus-visible::after,
  .page--sales-valuation .site-head--valuation .nav__link--trigger[aria-expanded="true"]::after {
    transform: scaleX(1);
  }

  .page--sales-valuation .site-head--valuation .nav__link--trigger[aria-expanded="true"] {
    color: var(--svh-bottle);
  }

  /* A finer caret in the route's own copper. */
  .page--sales-valuation .site-head--valuation .nav__caret {
    width: 5px;
    height: 5px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-color: var(--svh-copper);
    transition: transform 260ms var(--svh-ease);
  }

  /* THE CURRENT SECTION. A measured span bracketed above the label — the
     drawing-office notation for "this is the piece under discussion". Shape,
     weight and colour all carry it, and aria-current carries it to anyone not
     looking at any of the three. */
  .page--sales-valuation .site-head--valuation [data-nav-trigger][data-nav-current-group] {
    color: var(--svh-bottle);
    font-weight: 650;
  }

  .page--sales-valuation .site-head--valuation [data-nav-trigger][data-nav-current-group]::before {
    top: -0.5rem;
    width: 2.15rem;
    height: 5px;
    background: none;
    border: 1px solid var(--svh-copper);
    border-bottom: 0;
    box-shadow: none;
    transform: translateX(calc(-50% - 6px));
  }

  /* The tether. An open panel is joined to the trigger that opened it by the
     same hairline the rest of the route is drawn with, so a sheet lying over
     the hero is never ambiguous about where it came from. */
  .page--sales-valuation .site-head--valuation .nav__item:has([aria-expanded="true"])::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 1px;
    height: 6px;
    background: var(--svh-copper);
    transform-origin: center top;
    pointer-events: none;
  }

  html[data-motion="full"] .page--sales-valuation .site-head--valuation .nav__item:has([aria-expanded="true"])::after {
    animation: svhead-tether 240ms var(--svh-ease) both;
  }

  /* The last two panels open leftward to stay on screen, so their tether
     follows the edge the sheet is actually hung from. */
  .page--sales-valuation .site-head--valuation .nav__item:nth-last-child(-n + 2):has([aria-expanded="true"])::after {
    left: auto;
    right: 0;
  }
}

@keyframes svhead-tether {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* ---- 5. The dropdown as a mounted sheet --------------------------------- */

.page--sales-valuation .site-head--valuation .navdrop {
  background:
    linear-gradient(var(--svh-copper), var(--svh-copper)) top left / 100% 2px no-repeat,
    var(--svh-sheet);
  border-color: var(--svh-line);
  box-shadow:
    0 26px 46px -32px rgb(11 35 28 / 62%),
    0 1px 0 rgb(255 255 255 / 60%) inset;
  padding-top: calc(var(--s4) + 2px);
}

.page--sales-valuation .site-head--valuation .navdrop__intro {
  border-bottom-color: var(--svh-line-soft);
  color: var(--ink-soft);
}

/* Each destination carries a copper trace that draws down its left edge as it
   is reached — the same hairline again, at the scale of a single row. */
.page--sales-valuation .site-head--valuation .navdrop__link {
  position: relative;
  padding-left: 16px;
  transition: background-color 200ms var(--ease-in-out);
}

.page--sales-valuation .site-head--valuation .navdrop__link::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: var(--svh-copper);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 240ms var(--svh-ease);
}

.page--sales-valuation .site-head--valuation .navdrop__link:hover,
.page--sales-valuation .site-head--valuation .navdrop__link:focus-visible {
  background: rgb(143 80 36 / 9%);
}

.page--sales-valuation .site-head--valuation .navdrop__link:hover::before,
.page--sales-valuation .site-head--valuation .navdrop__link:focus-visible::before {
  transform: scaleY(1);
}

/* The destination the reader is already on. Trace held open permanently, the
   label in bottle green at a heavier weight, and aria-current underneath all
   of it — three carriers, not one. */
.page--sales-valuation .site-head--valuation .navdrop__link[aria-current="page"]::before {
  transform: scaleY(1);
  width: 2px;
}

.page--sales-valuation .site-head--valuation .navdrop__link[aria-current="page"] .navdrop__label {
  color: var(--svh-bottle);
  font-weight: 700;
}

.page--sales-valuation .site-head--valuation .navdrop__arrow { color: var(--svh-copper); }

/* The sheet is laid down: it unrolls from beneath its trigger rather than
   fading in as a box. The end frame of the clip is deliberately far outside
   the panel — a clip that finished at the border box would have cropped the
   panel's own shadow and, worse, the invisible bridge above it that lets a
   pointer cross the gap from the trigger without the menu closing. */
html[data-motion="full"] .page--sales-valuation .site-head--valuation .navdrop[data-open] {
  animation: svhead-sheet 300ms var(--svh-ease) both;
}

@keyframes svhead-sheet {
  from {
    opacity: 0;
    transform: translateY(-4px);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(-40px -60px -80px -60px);
  }
}

html[data-motion="full"] .page--sales-valuation .site-head--valuation .navdrop[data-open] .navdrop__list > li {
  animation: svhead-row 300ms var(--svh-ease) both;
}

.page--sales-valuation .site-head--valuation .navdrop[data-open] .navdrop__list > li:nth-child(1) { animation-delay: 90ms; }
.page--sales-valuation .site-head--valuation .navdrop[data-open] .navdrop__list > li:nth-child(2) { animation-delay: 128ms; }
.page--sales-valuation .site-head--valuation .navdrop[data-open] .navdrop__list > li:nth-child(3) { animation-delay: 166ms; }
.page--sales-valuation .site-head--valuation .navdrop[data-open] .navdrop__list > li:nth-child(4) { animation-delay: 204ms; }
.page--sales-valuation .site-head--valuation .navdrop[data-open] .navdrop__list > li:nth-child(5) { animation-delay: 242ms; }
.page--sales-valuation .site-head--valuation .navdrop[data-open] .navdrop__list > li:nth-child(n + 6) { animation-delay: 280ms; }

@keyframes svhead-row {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* ---- 6. The assessment action ------------------------------------------ *
   The one thing in this header that is not navigation, drawn so it cannot be
   mistaken for it: a square bottle-green block, a drafting corner set before
   the label, a copper file tab along its top edge that pulls to full width as
   the reader engages, and — the single heraldic note in the component — a
   crest-red mark at its outer corner, the size of a pin head.               */

.page--sales-valuation .site-head--valuation .headact,
.page--sales-valuation .site-head--valuation .menu__actions .headact {
  border-radius: var(--radius-control);
}

.page--sales-valuation .site-head--valuation .headact--assess {
  position: relative;
  gap: 10px;
  overflow: visible;
  color: var(--on-deep);
  background: var(--svh-bottle);
  border: 1px solid var(--svh-bottle);
  box-shadow: 0 1px 0 rgb(11 35 28 / 12%);
  transition:
    background-color 220ms var(--ease-in-out),
    border-color 220ms var(--ease-in-out),
    box-shadow 220ms var(--ease-in-out),
    transform 120ms var(--ease-in-out);
}

/* The file tab. */
.page--sales-valuation .site-head--valuation .headact--assess::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--svh-copper);
  transform: scaleX(0.26);
  transform-origin: left center;
  transition:
    transform 380ms var(--svh-ease),
    background-color 220ms var(--ease-in-out);
}

/* The heraldic mark: crest red, five pixels, and nowhere else in this
   component. It sits at the far end of the tab's travel, so a pulled tab
   arrives at it. */
.page--sales-valuation .site-head--valuation .headact--assess::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 5px;
  height: 5px;
  background: var(--crest);
}

.page--sales-valuation .site-head--valuation .headact__corner {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-left: 1px solid var(--svh-sand);
  border-bottom: 1px solid var(--svh-sand);
  transition: transform 240ms var(--svh-ease), border-color 220ms var(--ease-in-out);
}

.page--sales-valuation .site-head--valuation .headact--assess:hover,
.page--sales-valuation .site-head--valuation .headact--assess:focus-visible {
  background: var(--svh-bottle-deep);
  border-color: var(--svh-bottle-deep);
  box-shadow: 0 10px 22px -16px rgb(11 35 28 / 70%);
}

.page--sales-valuation .site-head--valuation .headact--assess:hover::before,
.page--sales-valuation .site-head--valuation .headact--assess:focus-visible::before {
  transform: scaleX(1);
  background: var(--svh-sand);
}

.page--sales-valuation .site-head--valuation .headact--assess:hover .headact__corner,
.page--sales-valuation .site-head--valuation .headact--assess:focus-visible .headact__corner {
  transform: translate(-2px, 2px);
}

.page--sales-valuation .site-head--valuation .headact--assess:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px -4px rgb(11 35 28 / 70%);
}

/* Scrolled: the tab is already pulled. The action does not grow, move or
   change what it says — it is simply readable as armed. */
html[data-scrolled="true"] .page--sales-valuation .site-head--valuation .headact--assess::before {
  transform: scaleX(1);
}

html[data-scrolled="true"] .page--sales-valuation .site-head--valuation .headact--assess {
  box-shadow: 0 12px 24px -20px rgb(11 35 28 / 74%);
}

/* ---- 7. The compact control -------------------------------------------- */

.page--sales-valuation .site-head--valuation .menu__button {
  border-color: var(--svh-line);
  background: rgb(250 246 237 / 72%);
  color: var(--ink);
  border-radius: var(--radius-control);
  transition: background-color 200ms var(--ease-in-out), border-color 200ms var(--ease-in-out);
}

.page--sales-valuation .site-head--valuation .menu__button:hover {
  background: var(--bone-raised);
  border-color: var(--svh-copper);
}

/* ---- 8. The compact menu ------------------------------------------------ *
   Not the desktop bar stacked. It opens onto the name of the file the reader
   is in, then the routes at reading scale, then the confirmed contact block,
   then the one action docked where a thumb rests. The full-screen treatment
   is extended up to the width at which the wide bar actually returns (74em),
   because between 1024 and 1184 this route has no wide bar either and a
   half-height dropdown there read as an unfinished panel.                   */

@media (max-width: 73.99em) {
  .page--sales-valuation .menu[open] .menu__panel {
    position: fixed;
    inset: var(--head-h, 61px) 0 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    padding: var(--s5) var(--inset) max(var(--s5), env(safe-area-inset-bottom));
    background:
      linear-gradient(var(--svh-copper), var(--svh-copper)) top left / 100% 2px no-repeat,
      repeating-linear-gradient(90deg, transparent 0 63px, var(--svh-grid) 63px 64px),
      var(--svh-sheet);
    border-top: 0;
    border-bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* The file this drawer belongs to. */
  .page--sales-valuation .svmenu__mark {
    margin: 0 0 var(--s5);
    padding-bottom: var(--s4);
    border-bottom: 1px solid var(--svh-line-soft);
    display: grid;
    gap: 4px;
  }

  .page--sales-valuation .svmenu__mark-eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--copper-deep);
  }

  .page--sales-valuation .svmenu__mark-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.15;
    color: var(--svh-bottle);
  }

  /* Every block in the drawer keeps its own height. The shared sheet only
     pinned .mnav, which is the <ul> — not the <nav> that is actually the flex
     child — so on a short viewport the flex default shrank the contact block
     below its content and the address ran out underneath the action dock.
     Measured at 375x812, where the drawer is taller than the screen. */
  .page--sales-valuation .menu[open] .menu__panel > * { flex: 0 0 auto; }
  .page--sales-valuation .menu[open] .mnav { flex: 0 0 auto; }

  .page--sales-valuation .menu[open] .mnav__summary,
  .page--sales-valuation .menu[open] .mnav__link--top {
    position: relative;
    min-height: 60px;
    padding-left: 14px;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--ink);
  }

  .page--sales-valuation .menu[open] .mnav__item { border-bottom: 1px solid var(--svh-line-soft); }
  .page--sales-valuation .menu[open] .mnav__link { min-height: 48px; font-size: 1rem; padding-left: 14px; }
  .page--sales-valuation .menu[open] .mnav__caret { width: 9px; height: 9px; border-width: 1.5px; border-color: var(--svh-copper); }
  .page--sales-valuation .menu[open] .mnav__sub { padding-left: var(--s4); }

  /* The row's own trace, drawn on press and hold as well as on hover, so a
     touch reader gets the same acknowledgement a pointer does. */
  .page--sales-valuation .menu[open] .mnav__summary::before,
  .page--sales-valuation .menu[open] .mnav__link--top::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: var(--svh-copper);
    transform: scaleY(0);
    transform-origin: center top;
    transition: transform 240ms var(--svh-ease);
  }

  .page--sales-valuation .menu[open] .mnav__summary:active::before,
  .page--sales-valuation .menu[open] .mnav__link--top:active::before,
  .page--sales-valuation .menu[open] .mnav__group[open] .mnav__summary::before { transform: scaleY(1); }

  /* The section the reader is in: the trace held open, the label in bottle
     green, the weight raised. Colour is never on its own. */
  .page--sales-valuation .menu[open] .mnav__summary[data-nav-current-group] {
    color: var(--svh-bottle);
    font-weight: 600;
  }

  .page--sales-valuation .menu[open] .mnav__summary[data-nav-current-group]::before { transform: scaleY(1); }

  .page--sales-valuation .menu[open] .mnav__link[aria-current="page"] {
    color: var(--svh-bottle);
    font-weight: 700;
  }

  .page--sales-valuation .menu__contact { margin-top: var(--s6); }

  .page--sales-valuation .menu__contact-label {
    margin: 0 0 4px;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--copper-deep);
  }

  .page--sales-valuation .menu__contact-office {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ink);
    max-width: 30ch;
  }

  .page--sales-valuation .menu__contact-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: var(--s3);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--svh-copper);
  }

  /* The action docks to the bottom of the drawer and stays there while the
     routes scroll behind it. On a short phone the drawer is taller than the
     screen, and the one thing this route exists to offer must not be the one
     thing a reader has to scroll a menu to find. */
  .page--sales-valuation .menu[open] .menu__actions {
    position: sticky;
    bottom: calc(max(var(--s5), env(safe-area-inset-bottom)) * -1);
    z-index: 2;
    margin-top: auto;
    padding-top: var(--s4);
    padding-bottom: max(var(--s4), env(safe-area-inset-bottom));
    border-top: 1px solid var(--svh-line-soft);
    gap: var(--s3);
    background: var(--svh-sheet);
    box-shadow: 0 -14px 20px -18px rgb(11 35 28 / 40%);
  }

  .page--sales-valuation .menu[open] .menu__actions .headact {
    min-height: 54px;
    font-size: 1rem;
    justify-content: center;
    text-align: center;
  }

  /* The drafting corner belongs beside a left-set label. Against a centred
     one it reads as a stray glyph, so the docked action carries the tab and
     the crest mark alone. */
  .page--sales-valuation .menu__actions .headact__corner { display: none; }

  /* The button says what pressing it does, at every compact width — the
     shared rule only revealed "Close" below 64em, which left the 1024-1184
     drawer with a control still reading "Menu" while it was open. */
  .page--sales-valuation .menu__label--close { display: none; }
  .page--sales-valuation .menu[open] .menu__label--close { display: inline; }
  .page--sales-valuation .menu[open] [data-menu-open-label] { display: none; }

  .page--sales-valuation .menu[open] .menu__glyph {
    position: relative;
    background: none;
    border: 0;
    width: 16px;
    height: 16px;
    transform: none;
  }

  .page--sales-valuation .menu[open] .menu__glyph::before,
  .page--sales-valuation .menu[open] .menu__glyph::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: var(--ink);
  }

  .page--sales-valuation .menu[open] .menu__glyph::before { transform: rotate(45deg); }
  .page--sales-valuation .menu[open] .menu__glyph::after { transform: rotate(-45deg); }
}

/* ---- 9. Compact-menu choreography --------------------------------------- *
   The surface wipes down from the header's own edge; the file name, then the
   routes, then the contact block follow it in; the action dock rises last
   from the bottom edge. Downward on open, upward on close, so the direction
   of travel always matches the gesture. Enhancement only: with the motion
   preference set to reduce, or scripting unavailable, every one of these
   frames resolves to the finished state immediately.                        */

@media (max-width: 73.99em) {
  html[data-motion="full"] .page--sales-valuation .menu[open] .menu__panel {
    animation: svmenu-surface 320ms var(--svh-ease) both;
  }

  html[data-motion="full"] .page--sales-valuation .menu[open] .svmenu__mark,
  html[data-motion="full"] .page--sales-valuation .menu[open] .mnav__item,
  html[data-motion="full"] .page--sales-valuation .menu[open] .menu__contact {
    animation: svmenu-row 360ms var(--svh-ease) both;
  }

  .page--sales-valuation .menu[open] .svmenu__mark { animation-delay: 90ms; }
  .page--sales-valuation .menu[open] .mnav__item:nth-child(1) { animation-delay: 140ms; }
  .page--sales-valuation .menu[open] .mnav__item:nth-child(2) { animation-delay: 172ms; }
  .page--sales-valuation .menu[open] .mnav__item:nth-child(3) { animation-delay: 204ms; }
  .page--sales-valuation .menu[open] .mnav__item:nth-child(4) { animation-delay: 236ms; }
  .page--sales-valuation .menu[open] .mnav__item:nth-child(5) { animation-delay: 268ms; }
  .page--sales-valuation .menu[open] .mnav__item:nth-child(6) { animation-delay: 300ms; }
  .page--sales-valuation .menu[open] .mnav__item:nth-child(7) { animation-delay: 332ms; }
  .page--sales-valuation .menu[open] .mnav__item:nth-child(n + 8) { animation-delay: 364ms; }
  .page--sales-valuation .menu[open] .menu__contact { animation-delay: 396ms; }

  html[data-motion="full"] .page--sales-valuation .menu[open] .menu__actions {
    animation: svmenu-dock 420ms var(--svh-ease) 200ms both;
  }

  /* The close sequence. Set by valuation-head.mjs on the two deliberate close
     gestures — the Close button and Escape — and cleared the moment the panel
     is actually removed. A dismissal (tapping the page, following a link) is
     still instant: that gesture is about leaving, and delaying it would be a
     worse drawer, not a more considered one. */
  html[data-motion="full"] .page--sales-valuation .menu[data-closing] .menu__panel {
    animation: svmenu-close 190ms var(--ease-exit) both;
    pointer-events: none;
  }
}

@keyframes svmenu-surface {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 -40px 0); }
}

@keyframes svmenu-row {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes svmenu-dock {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes svmenu-close {
  from { clip-path: inset(0 0 -40px 0); opacity: 1; }
  to { clip-path: inset(0 0 100% 0); opacity: 0.55; }
}

/* ---- 10. Focus ---------------------------------------------------------- *
   Every surface in the component, on one ring: two pixels of bottle green
   with real offset, which clears 3:1 against bone, raised bone and the
   parchment drawer alike. Nothing here relies on the browser default.      */

.page--sales-valuation .site-head--valuation a:focus-visible,
.page--sales-valuation .site-head--valuation button:focus-visible,
.page--sales-valuation .site-head--valuation summary:focus-visible,
.page--sales-valuation .site-head--valuation .navdrop a:focus-visible {
  outline: 2px solid var(--svh-bottle);
  outline-offset: 3px;
}

.page--sales-valuation .site-head--valuation .headact--assess:focus-visible {
  outline-color: var(--copper-deep);
}

/* ---- 11. Defence in depth ----------------------------------------------- *
   ui.mjs does not apply the hide-on-scroll state on this route; if a stale
   class survives a bfcache restoration, the task action still stays put.   */

.page--sales-valuation .site-head--valuation.head--hidden {
  transform: none;
  pointer-events: auto;
}

/* ---- 12. Reduced motion and static mode --------------------------------- *
   Not a dimmer on the same animations — the equivalent component with the
   choreography removed. Every surface arrives finished, every state is still
   carried by shape, weight, position and colour, and the reading measure
   still tracks the page because it answers a gesture rather than performing
   on its own. Both switches are covered: the media query, and the data-motion
   attribute applied by motion.mjs (which also catches Save-Data).          */

@media (prefers-reduced-motion: reduce) {
  .page--sales-valuation .site-head--valuation,
  .page--sales-valuation .site-head--valuation *,
  .page--sales-valuation .site-head--valuation *::before,
  .page--sales-valuation .site-head--valuation *::after,
  .page--sales-valuation .menu__panel,
  .page--sales-valuation .menu__panel * { animation: none; transition: none; }

  .page--sales-valuation .site-head--valuation .navdrop[data-open],
  .page--sales-valuation .site-head--valuation .navdrop[data-open] .navdrop__list > li,
  .page--sales-valuation .menu[open] .menu__panel,
  .page--sales-valuation .menu[data-closing] .menu__panel {
    animation: none;
    clip-path: none;
    opacity: 1;
    transform: none;
  }

  .page--sales-valuation .svrule__track,
  .page--sales-valuation .site-head--valuation .brand__mark { animation: none; opacity: 1; transform: none; }

  /* Held open rather than drawn: the states the traces report are permanent
     facts about the row, not a reward for reaching it. */
  .page--sales-valuation .site-head--valuation .navdrop__link:hover::before,
  .page--sales-valuation .site-head--valuation .navdrop__link:focus-visible::before,
  .page--sales-valuation .site-head--valuation .nav__item:has([aria-expanded="true"])::after { transform: none; }

  .page--sales-valuation .site-head--valuation .headact--assess::before { transform: scaleX(1); }
  .page--sales-valuation .svrule__ticks { opacity: 0.28; }
}

html[data-motion="static"] .page--sales-valuation .site-head--valuation,
html[data-motion="static"] .page--sales-valuation .site-head--valuation *,
html[data-motion="static"] .page--sales-valuation .site-head--valuation *::before,
html[data-motion="static"] .page--sales-valuation .site-head--valuation *::after,
html[data-motion="static"] .page--sales-valuation .menu__panel,
html[data-motion="static"] .page--sales-valuation .menu__panel * { animation: none; transition: none; }

html[data-motion="static"] .page--sales-valuation .site-head--valuation .navdrop[data-open],
html[data-motion="static"] .page--sales-valuation .site-head--valuation .navdrop[data-open] .navdrop__list > li,
html[data-motion="static"] .page--sales-valuation .menu[open] .menu__panel,
html[data-motion="static"] .page--sales-valuation .menu[data-closing] .menu__panel {
  animation: none;
  clip-path: none;
  opacity: 1;
  transform: none;
}

html[data-motion="static"] .page--sales-valuation .site-head--valuation .headact--assess::before { transform: scaleX(1); }
html[data-motion="static"] .page--sales-valuation .svrule__ticks { opacity: 0.28; }
html[data-motion="static"] .page--sales-valuation .site-head--valuation .nav__item:has([aria-expanded="true"])::after { transform: none; }

/* ==========================================================================
 * CLIENT PROTECTION — HERO UPGRADE  ·  11 August 2026
 *
 * Requested as Tailwind + 21st.dev components. Rebuilt in the project's own
 * CSS instead, per DUKES_DESIGN_AND_MOTION_STANDARD.md section 1 (no
 * framework is introduced for an isolated visual refinement) — the visual
 * outcomes are the same: animated gold gradient eyebrow, serif heading with
 * a gold shimmer on its accent phrase, a floating glass dock with a sliding
 * indicator, and a verification bento with a live dot and lift-on-hover.
 *
 * Page-scoped: every selector is .cpl-* under .page--client-protection.
 * The shared header, footer, receptionist and launcher are untouched.
 * ========================================================================== */

.page--client-protection {
  --cplx-forest: #1d241f;
  --cplx-forest-soft: #24342c;
  --cplx-cream: #f6f3ec;
  --cplx-gold: #c5a880;
  --cplx-gold-deep: #8a6a3c;   /* text-safe gold: 4.9:1 on cream */
  --cplx-charcoal: #141a16;
}

/* --------------------------------- Hero ---------------------------------- */

.cpl-hero__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 64em) {
  .cpl-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem); }
}

/* Eyebrow: a metallic sweep across a gold gradient. The text keeps a solid
   fallback colour so it is never invisible where background-clip is absent. */
.cpl-hero__eyebrow {
  margin: 0 0 var(--s4);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cplx-gold-deep);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .cpl-hero__eyebrow > span {
    background-image: linear-gradient(100deg, #8a6a3c 0%, #c5a880 30%, #f0dcb8 45%, #c5a880 60%, #8a6a3c 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: cplx-sheen 7s linear infinite;
  }
}
@keyframes cplx-sheen {
  0%   { background-position: 130% 50%; }
  100% { background-position: -130% 50%; }
}

.cpl-hero__title {
  margin: 0 0 var(--s4);
  font-family: var(--cpl-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  line-height: 1.06;
  color: var(--cplx-forest);
  max-width: 18ch;
}

/* The accent phrase carries a gold rule that sweeps in on hover. The words
   stay full-contrast forest green; the gold is decoration beneath them and
   never the text colour, so legibility never depends on it. */
.cpl-hero__accent { position: relative; white-space: nowrap; }
.cpl-hero__accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 2px;
  background: linear-gradient(90deg, var(--cplx-gold), #f0dcb8, var(--cplx-gold));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-arrive);
}
@media (hover: hover) and (pointer: fine) {
  .cpl-hero:hover .cpl-hero__accent::after { transform: scaleX(1); }
}

/* ------------------------------ Floating dock ----------------------------- */

.cpl-dock {
  position: sticky;
  top: calc(var(--head-h) + 0.5rem);
  z-index: 20;
  padding: 0 var(--inset);
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
  max-width: var(--max);
  display: flex;
  justify-content: flex-start;
}

.cpl-dock__pill {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  max-width: 100%;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(251, 249, 245, 0.72);
  border: 1px solid rgba(29, 36, 31, 0.1);
  box-shadow: 0 10px 30px rgba(29, 36, 31, 0.07);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
/* Engines without backdrop-filter get an opaque pill rather than washed-out
   text sitting over whatever scrolls behind it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cpl-dock__pill { background: var(--cplx-cream); }
}

.cpl-dock__label {
  flex: 0 0 auto;
  padding-left: 0.5rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cplx-gold-deep);
}

.cpl-dock__track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}
.cpl-dock__track::-webkit-scrollbar { display: none; }

.cpl-dock__link {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  border-radius: 999px;
  font-size: 0.83rem;
  font-weight: 600;
  color: rgba(31, 42, 36, 0.72);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms var(--ease-arrive);
}
.cpl-dock__link.is-current { color: var(--cplx-forest); }
@media (hover: hover) and (pointer: fine) {
  .cpl-dock__link:hover { color: var(--cplx-forest); }
}
.cpl-dock__link:focus-visible { outline: 2px solid var(--cplx-gold-deep); outline-offset: 2px; }

/* The sliding indicator, sized and positioned by client-protection.mjs. With
   no JavaScript it stays at zero width and the links read as a plain list. */
.cpl-dock__indicator {
  position: absolute;
  left: 0;
  top: 50%;
  height: calc(100% - 0.5rem);
  width: 0;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(197, 168, 128, 0.26), rgba(197, 168, 128, 0.14));
  border: 1px solid rgba(197, 168, 128, 0.5);
  transition: transform 420ms var(--ease-arrive), width 420ms var(--ease-arrive);
  pointer-events: none;
}

/* ----------------------------- Verification bento -------------------------- */

.cpl-bento { display: grid; gap: 0.75rem; min-width: 0; }
@media (min-width: 30em) and (max-width: 63.99em) {
  .cpl-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpl-bento__card--lead { grid-column: 1 / -1; }
}

.cpl-bento__card {
  position: relative;
  display: block;
  padding: clamp(1rem, 2vw, 1.35rem);
  border-radius: 1rem;
  background: var(--cplx-cream);
  border: 1px solid rgba(29, 36, 31, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(29, 36, 31, 0.04);
  transition: transform 300ms var(--ease-arrive), box-shadow 300ms var(--ease-arrive),
    border-color 300ms var(--ease-arrive);
}
.cpl-bento__card--lead {
  background: linear-gradient(160deg, var(--cplx-forest) 0%, var(--cplx-forest-soft) 100%);
  border-color: rgba(197, 168, 128, 0.34);
  color: var(--cplx-cream);
}

@media (hover: hover) and (pointer: fine) {
  .cpl-bento__card:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 14px 30px rgba(29, 36, 31, 0.12);
    border-color: rgba(197, 168, 128, 0.7);
  }
}
.cpl-bento__card--link:focus-visible { outline: 2px solid var(--cplx-gold-deep); outline-offset: 3px; }

.cpl-bento__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--s3);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #cfe6d5;
}
.cpl-bento__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #46c07f;
  box-shadow: 0 0 0 0 rgba(70, 192, 127, 0.55);
  animation: cplx-pulse 2.6s ease-out infinite;
}
@keyframes cplx-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(70, 192, 127, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(70, 192, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(70, 192, 127, 0); }
}

.cpl-bento__figure {
  margin: 0 0 0.15rem;
  font-family: var(--cpl-display);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--cplx-gold-deep);
}
.cpl-bento__card--lead .cpl-bento__figure { color: var(--cplx-gold); }

.cpl-bento__label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cplx-charcoal);
}
.cpl-bento__card--lead .cpl-bento__label { color: var(--cplx-cream); }

.cpl-bento__meta {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: rgba(31, 42, 36, 0.66);
  font-variant-numeric: tabular-nums;
}
.cpl-bento__card--lead .cpl-bento__meta { color: rgba(251, 249, 245, 0.76); }

.cpl-bento__card--link { text-decoration: none; color: inherit; }
.cpl-bento__meta--go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--cplx-gold-deep);
}
.cpl-bento__arrow {
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms var(--ease-arrive);
}
@media (hover: hover) and (pointer: fine) {
  .cpl-bento__card--link:hover .cpl-bento__arrow { transform: rotate(45deg) translate(2px, -2px); }
}

/* ------------------------------ Reduced motion ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cpl-hero__eyebrow > span { animation: none; }
  .cpl-bento__dot { animation: none; }
  .cpl-dock__indicator { transition: none; }
  .cpl-hero__accent::after { transition: none; }
  .cpl-bento__card { transition: none; }
  .cpl-bento__card:hover { transform: none; }
}
[data-motion="static"] .cpl-hero__eyebrow > span,
[data-motion="static"] .cpl-bento__dot { animation: none !important; }

/* --------------------------------- Narrow --------------------------------- */

@media (max-width: 47.99em) {
  .cpl-dock__label { display: none; }
  .cpl-hero__accent { white-space: normal; }
}

/* ---- Hero upgrade, gap fixes · 11 August 2026 --------------------------- *
 * Two items from the brief that the first pass under-delivered:
 *   1. the accent words were given a swept underline, but the brief asked for
 *      a shimmer across the words themselves;
 *   2. nothing here changes contrast — the sweep runs forest → deep gold →
 *      forest, and both stops clear AA on cream (15.0:1 and 4.9:1), so the
 *      words never pale out mid-animation the way a gold-to-white sheen would.
 * ------------------------------------------------------------------------ */

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .cpl-hero__accent {
    background-image: linear-gradient(
      100deg,
      var(--cplx-forest) 0%,
      var(--cplx-forest) 38%,
      #8a6a3c 50%,
      var(--cplx-forest) 62%,
      var(--cplx-forest) 100%
    );
    background-size: 280% 100%;
    background-position: 130% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  @media (hover: hover) and (pointer: fine) {
    .cpl-hero:hover .cpl-hero__accent {
      transition: background-position 900ms var(--ease-arrive);
      background-position: -130% 50%;
    }
  }
  /* Focus reaching the heading area must not start a sweep, and reduced
     motion gets the settled, fully solid word. */
  @media (prefers-reduced-motion: reduce) {
    .cpl-hero__accent {
      background-image: none;
      color: var(--cplx-forest);
      transition: none;
    }
    .cpl-hero:hover .cpl-hero__accent { background-position: 130% 50%; }
  }
}
[data-motion="static"] .cpl-hero__accent {
  background-image: none !important;
  color: var(--cplx-forest) !important;
}

/* ==========================================================================
 * CLIENT PROTECTION — BODY UPGRADE  ·  11 August 2026
 *
 * Certificate cards with hover reveal + lightbox, copy pills on membership
 * numbers, the meaning band, the complaints stepper, and the source cards.
 * Requested as Tailwind; rebuilt in the project's own CSS per
 * DUKES_DESIGN_AND_MOTION_STANDARD.md section 1. Page-scoped .cpl-* only.
 * ========================================================================== */

/* ------------------------- Certificate thumbnail -------------------------- */

.cpl-card {
  transition: transform 300ms var(--ease-arrive), box-shadow 300ms var(--ease-arrive),
    border-color 300ms var(--ease-arrive);
}
@media (hover: hover) and (pointer: fine) {
  .cpl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(29, 36, 31, 0.13);
    border-color: rgba(197, 168, 128, 0.6);
  }
}

.cpl-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.5rem;
  margin-bottom: var(--s3);
  background: #fff;
  border: 1px solid var(--cpd-line, rgba(17, 25, 20, 0.14));
}
.cpl-thumb__img { display: block; width: 100%; height: auto; }

/* The glass veil and its badge. Hidden from the accessibility tree because
   the link's own text already says what it does. */
.cpl-thumb__veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(29, 36, 31, 0.34);
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  opacity: 0;
  transition: opacity 300ms var(--ease-arrive);
}
.cpl-thumb__badge {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 1.1rem;
  border-radius: 999px;
  background: rgba(251, 249, 245, 0.94);
  border: 1px solid rgba(197, 168, 128, 0.75);
  color: #1d241f;
  font-size: 0.82rem;
  font-weight: 700;
  transform: translateY(6px);
  transition: transform 300ms var(--ease-arrive);
}
@media (hover: hover) and (pointer: fine) {
  .cpl-thumb:hover .cpl-thumb__veil { opacity: 1; }
  .cpl-thumb:hover .cpl-thumb__badge { transform: none; }
}
/* Keyboard users get the same affordance, without the hover requirement. */
.cpl-thumb:focus-visible { outline: 2px solid var(--cplx-gold-deep, #8a6a3c); outline-offset: 3px; }
.cpl-thumb:focus-visible .cpl-thumb__veil { opacity: 1; }
.cpl-thumb:focus-visible .cpl-thumb__badge { transform: none; }

.cpl-filetag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--s4);
  font-size: 0.78rem;
  color: var(--cpl-muted, #4d594f);
  font-variant-numeric: tabular-nums;
}
.cpl-filemark { width: 14px; height: 14px; flex: 0 0 auto; color: var(--cplx-gold-deep, #8a6a3c); }

/* ------------------------------- Copy pill -------------------------------- */

.cpl-card__fact dd { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cpl-card__value { font-variant-numeric: tabular-nums; }

.cpl-copy {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(17, 25, 20, 0.16);
  background: rgba(255, 255, 255, 0.7);
  color: var(--cplx-gold-deep, #8a6a3c);
  cursor: pointer;
  transition: border-color 180ms var(--ease-arrive), background-color 180ms var(--ease-arrive),
    color 180ms var(--ease-arrive);
}
@media (hover: hover) and (pointer: fine) {
  .cpl-copy:hover { border-color: rgba(197, 168, 128, 0.8); background: #fff; }
}
.cpl-copy:focus-visible { outline: 2px solid var(--cplx-gold-deep, #8a6a3c); outline-offset: 2px; }

.cpl-copy__icons { display: grid; place-items: center; width: 15px; height: 15px; }
.cpl-copy__i {
  grid-area: 1 / 1;
  width: 15px;
  height: 15px;
  transition: opacity 160ms var(--ease-arrive), transform 160ms var(--ease-arrive);
}
.cpl-copy__i--done { opacity: 0; transform: scale(0.7); color: #1f7a4d; }
.cpl-copy.is-done { color: #1f7a4d; border-color: rgba(31, 122, 77, 0.5); }
.cpl-copy.is-done .cpl-copy__i--copy { opacity: 0; transform: scale(0.7); }
.cpl-copy.is-done .cpl-copy__i--done { opacity: 1; transform: none; }

.cpl-copy__tip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translate(-50%, 5px);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  background: #1d241f;
  color: #fbf9f5;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-arrive), transform 200ms var(--ease-arrive);
}
.cpl-copy.is-done .cpl-copy__tip { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------- Lightbox --------------------------------- */

.cpl-lightbox {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: min(94vw, 74rem);
  max-height: 92vh;
  overflow: visible;
}
.cpl-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cpl-lightbox__panel {
  background: #fbf9f5;
  border: 1px solid rgba(197, 168, 128, 0.45);
  border-radius: 1rem;
  padding: clamp(0.85rem, 2vw, 1.35rem);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  transform: scale(0.95);
  opacity: 0;
  transition: transform 200ms var(--ease-arrive), opacity 200ms var(--ease-arrive);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.cpl-lightbox[open] .cpl-lightbox__panel { transform: none; opacity: 1; }

.cpl-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cpl-lightbox__title {
  margin: 0;
  font-family: var(--cpl-display);
  font-weight: 400;
  font-size: 1.1rem;
  color: #1d241f;
}
.cpl-lightbox__file {
  margin: 0.1rem 0 0;
  font-size: 0.76rem;
  color: rgba(31, 42, 36, 0.66);
  font-variant-numeric: tabular-nums;
}
.cpl-lightbox__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(17, 25, 20, 0.16);
  background: #fff;
  color: #1d241f;
  cursor: pointer;
  transition: border-color 180ms var(--ease-arrive), color 180ms var(--ease-arrive);
}
@media (hover: hover) and (pointer: fine) {
  .cpl-lightbox__close:hover { border-color: rgba(197, 168, 128, 0.8); color: var(--cplx-gold-deep, #8a6a3c); }
}
.cpl-lightbox__close:focus-visible { outline: 2px solid var(--cplx-gold-deep, #8a6a3c); outline-offset: 2px; }
.cpl-lightbox__close svg { width: 18px; height: 18px; }

.cpl-lightbox__figure { margin: 0; min-height: 0; overflow: auto; background: #fff; border-radius: 0.5rem; }
.cpl-lightbox__img { display: block; width: 100%; height: auto; }

.cpl-lightbox__foot { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; }

/* ------------------------------ Meaning band ------------------------------ */

.cpl-meaning {
  background: #1d241f;
  color: #fbf9f5;
  padding: clamp(2.5rem, 5vw, 4rem) var(--inset);
}
.cpl-meaning__inner { max-width: var(--max); margin: 0 auto; }
.cpl-meaning__head { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); display: grid; gap: var(--s4); }
@media (min-width: 64em) {
  .cpl-meaning__head { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
}
.cpl-meaning__eyebrow {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c5a880;
  max-width: 14ch;
}
.cpl-meaning__title {
  margin: 0;
  font-family: var(--cpl-display);
  font-weight: 400;
  font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.4rem);
  line-height: 1.12;
  max-width: 20ch;
}

.cpl-meaning__grid { display: grid; gap: 1rem; }
@media (min-width: 48em) { .cpl-meaning__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Border-gradient card with an ambient inner glow. The gradient lives on a
   ::before ring so the card's own surface stays flat and legible. */
.cpl-mcard {
  position: relative;
  border-radius: 1rem;
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
  background: linear-gradient(160deg, rgba(251, 249, 245, 0.06), rgba(251, 249, 245, 0.02));
  border: 1px solid rgba(251, 249, 245, 0.14);
  box-shadow: inset 0 1px 0 rgba(251, 249, 245, 0.08);
  transition: border-color 300ms var(--ease-arrive), box-shadow 300ms var(--ease-arrive);
}
.cpl-mcard::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(197, 168, 128, 0.8), rgba(197, 168, 128, 0) 45%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 300ms var(--ease-arrive);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .cpl-mcard:hover {
    border-color: rgba(197, 168, 128, 0.5);
    box-shadow: inset 0 1px 0 rgba(251, 249, 245, 0.1), inset 0 0 40px rgba(197, 168, 128, 0.09);
  }
  .cpl-mcard:hover::before { opacity: 1; }
}

.cpl-mcard__icon {
  display: block;
  margin-bottom: var(--s4);
  filter: brightness(0) saturate(100%) invert(78%) sepia(23%) saturate(560%) hue-rotate(348deg) brightness(92%) contrast(87%);
}
.cpl-mcard__label {
  margin: 0 0 var(--s2);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c5a880;
}
.cpl-mcard__lead {
  margin: 0 0 var(--s3);
  font-family: var(--cpl-display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.2;
}
.cpl-mcard__copy { margin: 0; font-size: 0.9rem; line-height: 1.62; color: rgba(251, 249, 245, 0.8); max-width: 44ch; }

.cpl-meaning__note {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding-top: var(--s5);
  border-top: 1px solid rgba(251, 249, 245, 0.14);
  font-size: 0.86rem;
  color: rgba(251, 249, 245, 0.8);
  max-width: 80ch;
}
.cpl-meaning__note strong { color: #c5a880; }

/* -------------------------------- Stepper --------------------------------- */

.cpl-stepper-band {
  background: #1d241f;
  color: #fbf9f5;
  padding: clamp(2.5rem, 5vw, 4rem) var(--inset);
}
.cpl-stepper-band__inner { max-width: var(--max); margin: 0 auto; }
.cpl-stepper-band__head { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.cpl-section__num--deep { color: #c5a880; }
.cpl-stepper-band__title {
  margin: 0 0 var(--s3);
  font-family: var(--cpl-display);
  font-weight: 400;
  font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.4rem);
  line-height: 1.12;
  max-width: 22ch;
}
.cpl-stepper-band__intro { margin: 0; font-size: 0.92rem; line-height: 1.62; color: rgba(251, 249, 245, 0.78); max-width: 56ch; }

.cpl-stepper { list-style: none; margin: 0; padding: 0; position: relative; }

/* The connecting line runs behind the badges, stopping at the last one. */
.cpl-step { position: relative; padding-left: 3.5rem; }
.cpl-step::before {
  content: "";
  position: absolute;
  left: 1.09rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(251, 249, 245, 0.16);
}
.cpl-step:first-child::before { top: 1.6rem; }
.cpl-step:last-child::before { bottom: auto; height: 1.6rem; }

.cpl-step__d { border-bottom: 1px solid rgba(251, 249, 245, 0.12); }
.cpl-step:last-child .cpl-step__d { border-bottom: 0; }

.cpl-step__summary {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4);
  padding: 1rem 0;
  min-height: 44px;
  cursor: pointer;
}
.cpl-step__summary::-webkit-details-marker { display: none; }
.cpl-step__summary::marker { content: ""; }

.cpl-step__badge {
  position: absolute;
  left: 0;
  top: 0.95rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: #1d241f;
  border: 1px solid rgba(197, 168, 128, 0.45);
  color: #c5a880;
  font-family: var(--cpl-display);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  transition: border-color 300ms var(--ease-arrive), box-shadow 300ms var(--ease-arrive),
    background-color 300ms var(--ease-arrive);
}
/* The open step's node lights up — the only "glow" on the page, and it marks
   state rather than decorating. */
.cpl-step__d[open] .cpl-step__badge {
  background: #24342c;
  border-color: #c5a880;
  box-shadow: 0 0 0 4px rgba(197, 168, 128, 0.16);
}

.cpl-step__title { font-size: 1rem; font-weight: 700; }
.cpl-step__d[open] .cpl-step__title { color: #fbf9f5; }

.cpl-step__chev {
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid #c5a880;
  border-bottom: 2px solid #c5a880;
  transform: rotate(45deg);
  transition: transform 280ms var(--ease-arrive);
}
.cpl-step__d[open] .cpl-step__chev { transform: rotate(225deg); }

.cpl-step__summary:focus-visible { outline: 2px solid #c5a880; outline-offset: 3px; }

.cpl-step__body { padding: 0 0 1.15rem; }
.cpl-step__body p { margin: 0; font-size: 0.92rem; line-height: 1.65; color: rgba(251, 249, 245, 0.8); max-width: 62ch; }

.cpl-stepper-band__act { margin: clamp(1.5rem, 3vw, 2rem) 0 0; }

/* ------------------------------ Source cards ------------------------------ */

.cpl-srcgrid { display: grid; gap: 0.9rem; }
@media (min-width: 52em) { .cpl-srcgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cpl-src {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.15rem, 2.2vw, 1.5rem);
  border-radius: 1rem;
  background: #1d241f;
  border: 1px solid rgba(251, 249, 245, 0.12);
  color: #fbf9f5;
  text-decoration: none;
  min-height: 44px;
  transition: transform 300ms var(--ease-arrive), border-color 300ms var(--ease-arrive),
    box-shadow 300ms var(--ease-arrive);
}
@media (hover: hover) and (pointer: fine) {
  .cpl-src:hover {
    transform: translateY(-3px);
    border-color: rgba(197, 168, 128, 0.6);
    box-shadow: 0 16px 34px rgba(29, 36, 31, 0.2);
  }
}
.cpl-src:focus-visible { outline: 2px solid #c5a880; outline-offset: 3px; }

.cpl-src__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(197, 168, 128, 0.4);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c5a880;
}
.cpl-src__name { font-family: var(--cpl-display); font-size: 1.2rem; line-height: 1.2; }
.cpl-src__note { font-size: 0.8rem; line-height: 1.55; color: rgba(251, 249, 245, 0.74); }

.cpl-src__go {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #c5a880;
}
.cpl-src__arrow {
  width: 0.9rem;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: transform 200ms var(--ease-arrive);
}
.cpl-src__arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
@media (hover: hover) and (pointer: fine) {
  .cpl-src:hover .cpl-src__arrow { transform: translateX(6px); }
}

/* ------------------------------ Reduced motion ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cpl-card,
  .cpl-src,
  .cpl-mcard,
  .cpl-thumb__veil,
  .cpl-thumb__badge,
  .cpl-step__badge,
  .cpl-step__chev,
  .cpl-copy,
  .cpl-copy__i,
  .cpl-copy__tip,
  .cpl-src__arrow { transition: none; }
  .cpl-card:hover,
  .cpl-src:hover { transform: none; }
  .cpl-lightbox__panel { transition: none; transform: none; opacity: 1; }
}

/* --------------------------------- Narrow --------------------------------- */

@media (max-width: 47.99em) {
  .cpl-step { padding-left: 3rem; }
  .cpl-step__badge { width: 2rem; height: 2rem; font-size: 0.85rem; }
  .cpl-step::before { left: 0.94rem; }
  .cpl-lightbox { max-width: 96vw; }
}

/* Bento figures corrected 12 August 2026. Two cards counted "01" and, set in
   the display serif with zero padding, they read as step numbers rather than
   totals — the page uses exactly that treatment for its real section numerals.
   The singular cards now carry a status chip, and the one real count is read
   out beside its noun. */
.cpl-bento__count {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0;
}
.cpl-bento__count .cpl-bento__figure { margin: 0; font-size: 2.1rem; }
.cpl-bento__count .cpl-bento__label { margin: 0; }

.cpl-bento__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 var(--s3);
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(122, 92, 46, 0.32);
  background: rgba(197, 168, 128, 0.14);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cplx-gold-deep, #8a6a3c);
}

/* The chip sets 9.6px bold, which is small text, so it needs the full 4.5:1.
   Against its own tinted ground (#f3eee5 composited) the standard deep gold
   reached only 4.32. Darkened to #7d5f35 = 5.10:1, measured, not guessed. */
.cpl-bento__chip { color: #7d5f35; }

/* ==========================================================================
 * CONTACT RAIL — GLASS CARDS (sitewide) · 12 August 2026
 *
 * Previewed on /client-protection/ and rolled out to every route carrying the
 * reception rail on Aarav's explicit instruction ("do the exact same for all
 * the other pages too"). Targets `.crail--labelled` only — the reception bar.
 * The footer's `.crail--compact` rail is a different variant and is untouched.
 *
 * SUPERSEDES part of DUKES_DESIGN_AND_MOTION_STANDARD.md section 8A: the
 * rising channel-colour fill (WhatsApp #075e54, Email #1e3a47, Instagram
 * burgundy-rust) no longer renders on this rail. That was a protected
 * treatment, replaced here with written authorisation. The channel colours
 * remain the approved values for `.dc__tile`, which is a separate component
 * and still uses them. Section 8A should be updated to record this.
 *
 * Contrast measured on the composited card ground rgb(28,45,38):
 * gold label 6.39:1 · ivory value 13.75:1 · gold glyph 6.65:1.
 * ========================================================================== */

.crail--labelled .crail__list {
  display: grid;
  /* auto-fit, not a guessed column count: a card never appears in less room
     than its own content needs, so the values can never be squeezed into an
     ellipsis. Four across when there is room, fewer when there is not. */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The card. The item is the visual object; the anchor inside it is stretched
   across the whole card below, so the entire pill is the target rather than
   just the icon. */
.crail--labelled .crail__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 0.85rem;
  background: rgba(33, 40, 33, 0.4);
  border: 1px solid rgba(197, 168, 128, 0.2);
  backdrop-filter: blur(6px) saturate(130%);
  -webkit-backdrop-filter: blur(6px) saturate(130%);
  transition: border-color 300ms var(--ease-arrive), background-color 300ms var(--ease-arrive),
    transform 300ms var(--ease-arrive);
}
@media (hover: hover) and (pointer: fine) {
  .crail--labelled .crail__item:hover {
    border-color: #c5a880;
    background: rgba(33, 40, 33, 0.62);
    transform: translateY(-2px);
  }
}
/* Focus is drawn on the card, because the card is what the reader sees as the
   control — the anchor itself is an invisible overlay. */
.crail--labelled .crail__item:focus-within {
  border-color: #c5a880;
  outline: 2px solid #c5a880;
  outline-offset: 2px;
}

/* The anchor keeps its glyph in the flow, then stretches over the card. */
.crail--labelled .crail__link {
  position: static;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: 0.6rem;
  background: rgba(29, 36, 31, 0.8);
  border: 1px solid rgba(197, 168, 128, 0.22);
  color: #c5a880;
}
.crail--labelled .crail__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.crail--labelled .crail__link:focus-visible { outline: none; }

/* The protected rising fill is suppressed here, not deleted. */
.crail--labelled .crail__fill { display: none; }

.crail--labelled .crail__icon { width: 17px; height: 17px; }
/* The brand-coloured WhatsApp/Instagram glyphs inherit the gold here so the
   four cards read as one set rather than four different brands. */
.crail--labelled .crail__icon--brand { fill: currentColor; }

/* Label and value. */
.crail--labelled .crail__tip {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  opacity: 1;
  transform: none;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  pointer-events: none;
}
.crail--labelled .crail__tip-label {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c5a880;
}
.crail--labelled .crail__tip-value {
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fbf9f5;
  /* Never truncated. An ellipsis here hid the actual phone number, which is
     the one thing the card exists to show. The grid above guarantees the room
     instead; if a value still cannot fit it wraps rather than disappears. */
  min-width: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.crail--labelled .crail__intro {
  margin: 0 0 0.9rem;
  font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
  .crail--labelled .crail__item { transition: none; }
  .crail--labelled .crail__item:hover { transform: none; }
}

@media (max-width: 26em) {
  .crail--labelled .crail__list { grid-template-columns: 1fr; }
}

/* The rail sits in the reception's left column (485px), where four cards
   compress to 112px each and the labels crowd. For this preview it spans the
   full inner width beneath both columns, which is what gives the four-across
   bar room to breathe. Page-scoped, like the rest of the preview. */
@media (min-width: 62em) {
  .reception__inner .reception__routes--safe {
    grid-column: 1 / -1;
    max-width: none;
  }
}

/* Directional hover wipe, adapted from the clip-path pattern (implemented in
   CSS + a few lines of vanilla JS rather than framer-motion). The fill enters
   from whichever edge the pointer crossed and leaves towards the opposite one,
   so the motion follows the hand instead of appearing from nowhere. */
.crail--labelled .crail__item { overflow: hidden; isolation: isolate; }
.crail--labelled .crail__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(140deg, #24342c, #20272199);
  clip-path: var(--wipe, polygon(0 0, 0 0, 0 100%, 0 100%));
  transition: clip-path 380ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
/* Pointer-driven only. Keyboard focus reveals it instantly, with no sweep, so
   focus never animates position. */
.crail--labelled .crail__item:focus-within::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .crail--labelled .crail__item::before { transition: none; }
}

/* ==================================================================== *
 * About refinements — 12 August 2026
 *
 * Three treatments, all /about/-scoped, requested directly by Aarav:
 *   1. "How Dukes can help" moves from feature-row-plus-pair to an
 *      asymmetric bento composition at desktop: the landlord feature runs
 *      tall on the left, the two remaining routes stack beside it as
 *      image-beside-copy bands. Cards gain a 16px radius and a gated
 *      hover lift + shadow + slow image scale + 3px arrow nudge — the
 *      lift/zoom vocabulary is reinstated here ON DIRECT INSTRUCTION
 *      (12 Aug request), superseding the earlier colour-only hover note
 *      above for THIS page's cards only.
 *   2. "Focused on Slough property" becomes a three-panel expanding row
 *      at desktop when JS is available (data-slough-on, set by
 *      about-slough-cards.mjs). The no-JS page keeps the static grid.
 *   3. The hero gains a frosted trust card on the right at desktop,
 *      reading its figures from the same reviewAggregate record as the
 *      proof line.
 * ==================================================================== */

/* ---- 1. Bento cards ---- */

.abt-card__link {
  border-radius: 16px;
  overflow: hidden;
  transition:
    background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.abt-card__media img {
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.abt-card__arrow {
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .abt-card:hover .abt-card__link {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -20px rgba(4, 10, 8, 0.6);
  }
  .abt-card:hover .abt-card__media img { transform: scale(1.05); }
  .abt-card:hover .abt-card__arrow { transform: translateX(3px); }
}
.abt-card__link:focus-visible .abt-card__arrow {
  transition: none;
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .abt-card__link,
  .abt-card__media img,
  .abt-card__arrow { transition: none; }
  .abt-card:hover .abt-card__link { transform: none; box-shadow: none; }
  .abt-card:hover .abt-card__media img { transform: none; }
  .abt-card:hover .abt-card__arrow { transform: none; }
}

/* The bento composition. Same specificity as the 9 August feature-row rules
   further up; being later in the file, these win — the earlier block is left
   in place as the record of the previous layout. */
@media (min-width: 64em) {
  .abt-cards {
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .abt-card:first-child { grid-column: 1; grid-row: 1 / 3; }
  .abt-card:first-child .abt-card__link { flex-direction: column; }
  .abt-card:first-child .abt-card__media {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 18rem;
  }
  .abt-card:first-child .abt-card__body {
    flex: 0 0 auto;
    justify-content: flex-start;
    padding: clamp(1.5rem, 2.2vw, 2.25rem);
    gap: var(--s3);
  }
  .abt-card:nth-child(2),
  .abt-card:last-child { grid-column: 2; }
  .abt-card:nth-child(2) .abt-card__link,
  .abt-card:last-child .abt-card__link { flex-direction: row; align-items: stretch; }
  .abt-card:nth-child(2) .abt-card__media,
  .abt-card:last-child .abt-card__media {
    flex: 0 0 40%;
    aspect-ratio: auto;
    min-height: 11rem;
  }
  .abt-card:nth-child(2) .abt-card__body,
  .abt-card:last-child .abt-card__body { flex: 1; justify-content: center; }
}

/* ---- 2. Slough expanding panels ---- */

/* Base (every layout, including no-JS and mobile): the description renders
   as a quiet second caption line. */
.abt-slough__desc {
  display: block;
  margin-top: 4px;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--on-deep-soft);
}

@media (min-width: 64em) {
  .abt-slough__frames[data-slough-on] {
    display: flex;
    gap: clamp(0.875rem, 1.4vw, 1.5rem);
  }
  .abt-slough__frames[data-slough-on] .abt-slough__frame {
    flex: 1 1 0;
    min-width: 0;
    transition: flex-grow 500ms cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
  }
  .abt-slough__frames[data-slough-on] .abt-slough__frame:focus-visible {
    outline: 3px solid var(--sand);
    outline-offset: 3px;
    border-radius: 16px;
  }
  .abt-slough__frames[data-slough-on] .abt-slough__frame.is-open { flex-grow: 3.2; }
  .abt-slough__frames[data-slough-on] .abt-slough__figure {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: clamp(24rem, 30vw, 28rem);
    padding: clamp(1rem, 1.6vw, 1.5rem);
    border-radius: 16px;
    overflow: hidden;
  }
  .abt-slough__frames[data-slough-on] .abt-slough__pic {
    position: absolute;
    inset: 0;
    z-index: 0;
    aspect-ratio: auto;
  }
  /* The readability gradient for text over the photograph: strong at the
     foot, gone by 75% up the frame, always on in this mode (the base
     hover-only shade stays as-is for the static grid). */
  .abt-slough__frames[data-slough-on] .abt-slough__pic::after {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.3) 45%,
      rgba(0, 0, 0, 0) 75%
    );
    opacity: 1;
  }
  .abt-slough__frames[data-slough-on] .abt-slough__caption {
    position: relative;
    z-index: 2;
    margin: 0;
  }
  .abt-slough__frames[data-slough-on] .abt-slough__desc {
    position: relative;
    z-index: 2;
    max-width: 46ch;
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(8px);
    transition:
      max-height 400ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 300ms cubic-bezier(0.22, 1, 0.36, 1) 120ms,
      transform 300ms cubic-bezier(0.22, 1, 0.36, 1) 120ms,
      margin-top 400ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .abt-slough__frames[data-slough-on] .abt-slough__frame.is-open .abt-slough__desc {
    max-height: 6em;
    margin-top: 6px;
    opacity: 1;
    transform: none;
  }
  /* The place name needs no colour change here: it already sits in
     --on-deep over the gradient's strongest zone. */
  @media (prefers-reduced-motion: reduce) {
    .abt-slough__frames[data-slough-on] .abt-slough__frame,
    .abt-slough__frames[data-slough-on] .abt-slough__desc { transition: none; }
    .abt-slough__frames[data-slough-on] .abt-slough__desc { transform: none; }
  }
}

/* ---- 3. Hero trust card ---- */

/* Hidden below desktop: the proof line inside the copy column already
   carries the rating there. */
.abt-hero__glass { display: none; }

@media (min-width: 64em) {
  .abt-hero__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(1.5rem, 3vw, 3rem);
  }
  .abt-hero__copy { flex: 0 1 auto; }
  .abt-hero__glass {
    display: block;
    flex: 0 0 auto;
    width: min(19rem, 26vw);
    padding: clamp(1.25rem, 1.8vw, 1.75rem);
    background: rgba(21, 34, 27, 0.55);
    border: 1px solid var(--rule-on-deep);
    border-top: 2px solid var(--sand);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--on-deep);
  }
  /* No backdrop-filter support: the tint alone at 0.55 is not a safe seat
     for text over a bright sky, so the panel goes near-solid instead. */
  @supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
    .abt-hero__glass { background: rgba(21, 34, 27, 0.92); }
  }
  .abt-hero__glass-badge {
    margin: 0 0 var(--s3);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--sand);
  }
  .abt-hero__glass-lead {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--rule-on-deep);
  }
  .abt-hero__glass-figure {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
    color: var(--on-deep);
  }
  .abt-hero__glass-stars {
    color: var(--sand);
    letter-spacing: 0.12em;
    font-size: 0.875rem;
  }
  .abt-hero__glass-caption {
    flex: 1 0 100%;
    font-size: var(--t-small);
    color: var(--on-deep-soft);
  }
  .abt-hero__glass-stats {
    list-style: none;
    margin: var(--s3) 0 0;
    padding: 0;
    display: grid;
    gap: var(--s3);
  }
  .abt-hero__glass-row { display: grid; gap: 2px; }
  .abt-hero__glass-stat {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--on-deep);
  }
  .abt-hero__glass-label {
    font-size: var(--t-small);
    color: var(--on-deep-soft);
  }
}

/* ==================================================================== *
 * About — ultra-premium renovation pass, 12 August 2026
 *
 * Aarav's brief: bring the About page's INNER content up to a high-end
 * UK agency standard, 21st.dev/Tailwind-UI flavoured. Header banner, nav,
 * footer and the "Speak to Dukes" launcher are explicitly out of scope and
 * are not referenced by a single selector below.
 *
 * Five sections treated, in page order:
 *   1. How Dukes can help — bento cards get real CTA buttons.
 *   2. Focused on Slough property — glass location badges on the panels.
 *   3. What clients say — premium testimonial cards + gold-ringed avatars.
 *   4. Credentials and protections — metallic-edged dark cards.
 *   5. Contact Dukes — elevated enquiry CTA + registered-office side card.
 *
 * The brief asked for React/Tailwind. This build has neither — it is a
 * static template + hand-authored CSS pipeline — so every requirement is
 * implemented with the site's own tokens and vanilla CSS. Behaviour is the
 * same; consistency with the other 22 pages is preserved, which is what
 * Aarav actually asked for ("everything matches").
 * ==================================================================== */

/* ---- 1. Bento CTA buttons ---- *
   The card action becomes a bordered gold-on-deep pill, so each route ends
   on something that reads as pressable. It stays inside the card's single
   link, so the centre-out rule that used to be the affordance is retired
   here (the button IS the affordance) — the ::before/::after rules are
   suppressed rather than deleted so the earlier block stays readable. */
.abt-card__action--btn {
  align-self: flex-start;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--sand);
  border-radius: 999px;
  background: rgba(197, 166, 106, 0.08);
  color: var(--sand);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition:
    background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.abt-card__action--btn::before,
.abt-card__action--btn::after { content: none; }

@media (hover: hover) and (pointer: fine) {
  .abt-card:hover .abt-card__action--btn {
    background: var(--sand);
    border-color: var(--sand);
    color: #1b241e;
  }
}
.abt-card__link:focus-visible .abt-card__action--btn {
  transition: none;
  background: var(--sand);
  border-color: var(--sand);
  color: #1b241e;
}
.abt-card__link:active .abt-card__action--btn {
  background: var(--sand);
  border-color: var(--sand);
  color: #1b241e;
}
@media (prefers-reduced-motion: reduce) {
  .abt-card__action--btn { transition: none; }
}

/* ---- 2. Slough glass badges ---- *
   Only shown in the enhanced desktop accordion (data-slough-on), where the
   figure is a positioned frame with the photograph behind it. In the static
   grid the pic is not a backdrop, so a floating badge would have nothing to
   float over. */
.abt-slough__badge { display: none; }

@media (min-width: 64em) {
  .abt-slough__frames[data-slough-on] .abt-slough__badge {
    position: absolute;
    top: clamp(0.75rem, 1.2vw, 1rem);
    left: clamp(0.75rem, 1.2vw, 1rem);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.4rem 0.7rem;
    border: 1px solid rgba(244, 238, 227, 0.28);
    border-radius: 999px;
    background: rgba(18, 26, 21, 0.52);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--on-deep);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  @supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .abt-slough__frames[data-slough-on] .abt-slough__badge { background: rgba(18, 26, 21, 0.88); }
  }
  .abt-slough__frames[data-slough-on] .abt-slough__badge svg {
    display: block;
    width: 13px;
    height: 13px;
    color: var(--sand);
  }
}

/* ---- 3. Testimonial cards ---- *
   The rail's mechanics (track, clone set, pause control, veils, reveal
   contract) are untouched — this is surface only: rounded geometry, a warm
   ivory card instead of near-white, a gold-ringed avatar, a quote mark, and
   the verify link promoted to a bordered pill. */
.abt-rail__card {
  border-radius: 16px;
  background: var(--bone-raised);
  border-color: rgba(107, 70, 32, 0.16);
  box-shadow: inset 0 2px 0 0 var(--copper);
}
/* A large serif quote mark seats each excerpt as a quotation rather than a
   floating sentence. Decorative — the <blockquote> already carries the
   semantics. */
.abt-rail__quote { position: relative; }
.abt-rail__quote::before {
  content: "\201C";
  position: absolute;
  top: -0.5rem;
  left: -0.25rem;
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 1;
  color: rgba(107, 70, 32, 0.16);
  pointer-events: none;
}
.abt-rail__quote p { position: relative; }
.abt-rail__initials {
  border: 2px solid var(--sand);
  box-shadow: 0 0 0 1px rgba(107, 70, 32, 0.12);
}
.abt-rail__link {
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(107, 70, 32, 0.3);
  border-radius: 999px;
  margin: 0;
  min-height: 0;
  text-decoration: none;
  transition:
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .abt-rail__link:hover {
    background: var(--bottle);
    border-color: var(--bottle);
    color: var(--on-deep);
  }
}
.abt-rail__link:focus-visible {
  background: var(--bottle);
  border-color: var(--bottle);
  color: var(--on-deep);
}
@media (hover: hover) and (pointer: fine) {
  .abt-rail__card:hover {
    box-shadow: inset 0 2px 0 0 var(--copper), 0 18px 36px -18px rgba(31, 26, 20, 0.34);
  }
}
@media (prefers-reduced-motion: reduce) {
  .abt-rail__link { transition: none; }
}

/* ---- 4. Credential cards: metallic edge ---- *
   The existing bento placement, records, hrefs and hover mechanics stay.
   Added: rounded corners, a brushed-metal gradient edge (a gradient border
   via background-image on the padding box, so no extra element is needed),
   and a slightly deeper card fill so the metal reads. */
.abt-shield__card {
  border-radius: 16px;
  /* The solid fill is a separate background-color, not folded into the
     gradient shorthand below: about-refinement.spec.mjs samples
     getComputedStyle(card).backgroundColor directly to verify the card reads
     as a dark raise of the band, and the `background:` shorthand resets that
     sub-property to transparent regardless of what shorthand layers you give
     it. Declaring it as its own longhand, in the same value already approved
     before this pass, keeps that measurement meaningful. */
  background-color: rgba(246, 244, 239, 0.055);
  background-image: linear-gradient(
    150deg,
    rgba(197, 166, 106, 0.55) 0%,
    rgba(197, 166, 106, 0.12) 26%,
    rgba(244, 238, 227, 0.06) 52%,
    rgba(197, 166, 106, 0.18) 78%,
    rgba(197, 166, 106, 0.5) 100%
  );
  background-origin: border-box;
  background-clip: border-box;
  border: 1px solid transparent;
  border-top: 2px solid var(--sand);
}
@media (hover: hover) and (pointer: fine) {
  .abt-shield__card:hover {
    background-color: rgba(246, 244, 239, 0.1);
    background-image: linear-gradient(
      150deg,
      rgba(197, 166, 106, 0.9) 0%,
      rgba(197, 166, 106, 0.3) 26%,
      rgba(244, 238, 227, 0.12) 52%,
      rgba(197, 166, 106, 0.36) 78%,
      rgba(197, 166, 106, 0.85) 100%
    );
    border-color: transparent;
    border-top-color: var(--sand);
  }
}
.abt-shield__card:focus-visible { border-top-color: var(--sand); }
.abt-shield__mark--plate { border-radius: 6px; }

/* ---- 5. Contact close ---- *
   The approved shared contact panel (.dc__*) is NOT touched — a bespoke
   restyle of it was explicitly rejected before. Only the About-only closing
   tier changes: the enquiry block becomes an elevated CTA card and the
   company ledger becomes a distinct side card, so the two stop reading as
   two loose stacks of text. */
.abt-contact .abt-contact__written {
  border-radius: 16px;
  border: 1px solid var(--rule-on-deep);
  border-top: 2px solid var(--sand);
  box-shadow: 0 22px 44px -26px rgba(4, 10, 8, 0.7);
}
.abt-contact .abt-legal {
  padding: var(--s5);
  border-radius: 16px;
  border: 1px solid rgba(107, 70, 32, 0.18);
  border-top: 2px solid var(--copper);
  background: var(--bone-raised);
}

/* ==================================================================== *
 * About renovation, second pass — 12 August 2026
 *
 * Aarav asked for the same five sections to go further: scroll-driven
 * staggered entrances, and border-glow + scale micro-interactions on the
 * interactive surfaces. This is additive on top of the first pass above —
 * no device is replaced, the mechanics already established (lift, zoom,
 * arrow nudge, metallic edge, fill-on-hover) are unchanged.
 *
 * The entrance itself is markup-only: the bento cards, credential cards,
 * hero glass card and testimonials intro are opted into the site's
 * EXISTING shared reveal system ([data-reveal="stage"], dukes.css:3460),
 * the same one the Sales page already uses — no new JS, no new CSS
 * mechanism, and it inherits that system's reduced-motion, Save-Data and
 * no-JS ([data-enhanced]-gated) safety for free.
 *
 * What this pass deliberately did NOT add, because the content does not
 * exist and inventing it would violate the "never invent a fact" rule: a
 * rebuilt stat-card hero, a Buyers/Investors persona, priced service
 * tiers, or featured listings with beds/baths/prices. Dukes has no
 * publishable pricing (data/services.mjs's feesArePublishable gate is
 * closed) and no fourth audience beyond Landlords/Tenants/Sellers.
 * ==================================================================== */

/* Bento cards: a soft sand glow joins the existing lift + shadow on hover,
   and the CTA button gets real press feedback (a button, unlike the whole
   card, is allowed to scale on press — about-story.spec.mjs pins the CARD
   itself never scaling; the button is a separate element). */
@media (hover: hover) and (pointer: fine) {
  .abt-card:hover .abt-card__link {
    box-shadow:
      0 0 0 1px rgba(197, 166, 106, 0.28),
      0 0 32px -6px rgba(197, 166, 106, 0.35),
      0 24px 48px -20px rgba(4, 10, 8, 0.6);
  }
}
.abt-card__action--btn {
  transition:
    background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.abt-card__link:active .abt-card__action--btn { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  .abt-card__link:active .abt-card__action--btn { transform: none; }
}

/* Credential cards: the metallic edge gains a matching outer glow on hover
   and the card itself takes a subtle press-scale, so a tap reads as a
   press rather than only a colour change. Outside the hover gate, like
   every other press state on this page. */
@media (hover: hover) and (pointer: fine) {
  .abt-shield__card {
    transition:
      background-color 150ms ease-out,
      border-color 150ms ease-out,
      box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .abt-shield__card:hover {
    box-shadow: 0 0 0 1px rgba(197, 166, 106, 0.3), 0 0 40px -8px rgba(197, 166, 106, 0.4);
  }
}
.abt-shield__card:active { transform: scale(0.985); }
@media (prefers-reduced-motion: reduce) {
  .abt-shield__card,
  .abt-shield__card:active { transition: none; transform: none; }
}

/* ================= EPC GUIDANCE — PERFECTION PASS V4 ===================== *
 * Approved 12 August 2026. EPC-scoped overrides only: forest, foliage,
 * warm paper and champagne replace the isolated charcoal system; the
 * section switcher becomes the rounded Client Protection-style dock.
 * ========================================================================== */

.page--epc {
  --lx-forest: #1d241f;
  --lx-bottle: #24342c;
  --lx-olive-charcoal: #1d241f;
  --lx-paper: #f5eddf;
  --lx-ivory: #f7f1e6;
  --lx-raised: #fbf9f5;
  --lx-parchment: #eadfcc;
  --lx-copper: #684a30;
  --lx-gold-ink: #8a6a3c;
  --lx-gold: #b6873e;
  --lx-gold-bright: #e8cfa3;
  --lx-ink: #101713;
  --lx-ink-soft: #4d5851;
  --lx-on-dark: #f7f1e6;
  --lx-on-dark-soft: rgba(247, 241, 230, 0.78);
  --lx-hair: rgba(29, 36, 31, 0.15);
  --lx-hair-dark: rgba(232, 207, 163, 0.2);
  --lx-max: 92rem;
}

.page--epc .lx-sec {
  padding-block: clamp(4.5rem, 7vw, 7rem);
}

.page--epc .lx-sec--routes { background: var(--lx-ivory); }
.page--epc .lx-sec--certificate { background: var(--lx-forest); }
.page--epc .lx-sec--limits { background: var(--lx-paper); }
.page--epc .lx-sec--standard { background: var(--lx-parchment); }

.page--epc .lx-head {
  max-width: 64rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.75rem);
}

.page--epc .lx-head__title { color: var(--lx-ink); }
.page--epc .lx-head__summary { color: var(--lx-ink-soft); font-size: 1rem; }
.page--epc .lx-sec--certificate .lx-head__title { color: var(--lx-on-dark); }
.page--epc .lx-sec--certificate .lx-head__summary { color: var(--lx-on-dark-soft); }

/* Hero: the clean keyframe supplies the greenery; one green veil supplies
   measured text contrast without flattening the warm stone on the right. */
.page--epc .lx-hero {
  min-height: clamp(36rem, 54vw, 44rem);
  background: var(--lx-forest);
}

.page--epc .lx-hero__veil {
  background:
    linear-gradient(90deg, rgba(9, 36, 28, 0.96) 0%, rgba(9, 36, 28, 0.9) 33%, rgba(9, 36, 28, 0.58) 58%, rgba(9, 36, 28, 0.22) 100%),
    linear-gradient(180deg, rgba(8, 31, 24, 0.38) 0%, rgba(8, 31, 24, 0.03) 48%, rgba(8, 31, 24, 0.5) 100%);
}

.page--epc .lx-hero__inner {
  max-width: var(--lx-max);
  padding-block: clamp(3.25rem, 6vw, 5.25rem);
}

.page--epc .lx-hero__title span { color: var(--lx-gold-bright); }
.page--epc .lx-hero__rule { background: var(--lx-gold-bright); }
.page--epc .lx-hero__scope { font-size: 1rem; }

/* The supplied London-street film is a progressive layer over its exact
   opening frame. Both share one crop so the hand-off cannot jump. */
.page--epc .lx-hero__film,
.page--epc .lx-hero__still { object-position: 50% 50%; }

@media (prefers-reduced-motion: reduce) {
  .page--epc .lx-hero__film { display: none; }
}

[data-motion="static"] .page--epc .lx-hero__film { display: none; }

.page--epc .lx-dock {
  background: rgba(247, 241, 230, 0.96);
  border: 1px solid rgba(104, 74, 48, 0.28);
  border-radius: 1.25rem;
  box-shadow: inset 0 2px 0 rgba(182, 135, 62, 0.7), 0 24px 70px -44px rgba(6, 29, 22, 0.75);
}

.page--epc .lx-dock__title { color: var(--lx-copper); }
.page--epc .lx-dock__action {
  background: var(--lx-raised);
  border-color: rgba(104, 74, 48, 0.18);
  color: var(--lx-ink);
}
.page--epc .lx-dock__mark,
.page--epc .lx-dock__ext { color: var(--lx-gold-ink); }
.page--epc .lx-dock__blurb { color: var(--lx-ink-soft); }

@media (hover: hover) and (pointer: fine) {
  .page--epc .lx-dock__action:hover {
    background: #fffdf9;
    border-color: var(--lx-gold);
  }
}

/* Rounded section dock. The short labels remove the desktop dead zone; on
   phones the four destinations are an intentional two-by-two map. */
.page--epc .lx-switch {
  width: calc(100% - (2 * var(--inset)));
  max-width: min(86rem, calc(100% - (2 * var(--inset))));
  margin: -1.75rem auto 0;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  top: calc(var(--head-h) + 0.5rem);
  background: rgba(247, 241, 230, 0.96);
  border: 1px solid rgba(104, 74, 48, 0.22);
  border-radius: 999px;
  box-shadow: 0 20px 48px -34px rgba(29, 36, 31, 0.72);
  backdrop-filter: blur(12px);
}

.page--epc .lx-switch::before { content: none; }
.page--epc .lx-switch__title {
  padding-inline: clamp(0.75rem, 2vw, 1.4rem);
  color: var(--lx-copper);
  align-self: center;
}
.page--epc .lx-switch__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: visible;
  gap: 0.25rem;
}
.page--epc .lx-switch__item,
.page--epc .lx-switch__item + .lx-switch__item { border: 0; }
.page--epc .lx-switch__link {
  justify-content: center;
  min-height: 48px;
  padding: 0.55rem 0.75rem;
  color: #49544e;
  border: 0;
  border-radius: 999px;
  white-space: nowrap;
}
.page--epc .lx-switch__link[aria-current="true"] {
  background: var(--lx-forest);
  color: var(--lx-on-dark);
  box-shadow: inset 0 0 0 1px rgba(232, 207, 163, 0.18);
}
.page--epc .lx-switch__link[aria-current="true"] .lx-switch__index { color: var(--lx-gold-bright); }
.page--epc [data-epc-section] { scroll-margin-top: calc(var(--head-h) + 6.75rem); }

/* 01 — calm bottle-green decision cards, with the whole card as the target. */
.page--epc .lx-beams { gap: clamp(1rem, 2vw, 1.5rem); }
.page--epc .lx-beam {
  background: var(--lx-bottle);
  border: 1px solid rgba(182, 135, 62, 0.48);
  border-radius: 1rem;
  color: var(--lx-on-dark);
  text-decoration: none;
  transform: none;
  box-shadow: inset 0 2px 0 rgba(232, 207, 163, 0.42), 0 20px 50px -40px rgba(29, 36, 31, 0.8);
}
.page--epc .lx-beam__ring { display: none; animation: none; }
.page--epc .lx-beam__body { padding: clamp(1.4rem, 2.4vw, 2rem); }
.page--epc .lx-beam__mark,
.page--epc .lx-beam__kicker,
.page--epc .lx-beam__action { color: var(--lx-gold-bright); }
.page--epc .lx-beam__detail { font-size: 1rem; }
.page--epc .lx-beam__action { background: rgba(8, 31, 24, 0.28); }
.page--epc .lx-beam:focus-visible {
  outline: 3px solid var(--lx-gold);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .page--epc .lx-beam:hover {
    transform: none;
    background: #21483a;
    border-color: var(--lx-gold-bright);
  }
  .page--epc .lx-beam:hover .lx-beam__arrow { transform: translateX(4px); }
}

/* 02 — a recognisable EPC ladder followed by six equally weighted checks. */
.page--epc .lx-cert { display: grid; grid-template-columns: 1fr; gap: clamp(2.75rem, 5vw, 4.5rem); }
.page--epc .lx-scale,
.page--epc .lx-steps {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--lx-bottle);
  border: 1px solid rgba(232, 207, 163, 0.16);
  border-radius: 1.1rem;
}
.page--epc .lx-acc { gap: 0.45rem; }
.page--epc .lx-acc__item {
  background: rgba(247, 241, 230, 0.055);
  border-color: rgba(232, 207, 163, 0.16);
  border-radius: 0.6rem;
}
.page--epc .lx-acc__item--min {
  border-color: rgba(232, 207, 163, 0.72);
}
.page--epc .lx-acc__summary { min-height: 60px; }
.page--epc .lx-acc__range,
.page--epc .lx-acc__meaning,
.page--epc .lx-acc__note,
.page--epc .lx-scale__note { font-size: 1rem; }
.page--epc .lx-steps__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.page--epc .lx-step {
  grid-template-columns: auto minmax(0, 1fr);
  padding: 1rem;
  background: rgba(247, 241, 230, 0.055);
  border: 1px solid rgba(232, 207, 163, 0.14);
  border-radius: 0.8rem;
}
.page--epc .lx-step:last-child { padding-bottom: 1rem; }
.page--epc .lx-step::before { content: none !important; }
.page--epc .lx-step__detail { font-size: 1rem; }
.page--epc .lx-step__badge { background: var(--lx-forest); }

/* 03 — one full-width warning, then three balanced answers. */
@media (min-width: 62em) {
  .page--epc .lx-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.page--epc .lx-cell {
  background: var(--lx-raised);
  border-color: rgba(104, 74, 48, 0.17);
  border-radius: 1rem;
  transform: none;
  box-shadow: none;
}
.page--epc .lx-cell--feature {
  background: var(--lx-bottle);
  border-color: rgba(182, 135, 62, 0.42);
}
.page--epc .lx-cell__detail { font-size: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .page--epc .lx-cell:hover {
    transform: none;
    border-color: rgba(104, 74, 48, 0.35);
    box-shadow: none;
  }
}

/* 04 — the Band E anchor and the five-point evidence list share one width. */
.page--epc .lx-standard { gap: clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 62em) {
  .page--epc .lx-standard { grid-template-columns: minmax(21rem, 28rem) minmax(0, 1fr); }
}
.page--epc .lx-badge {
  background: var(--lx-bottle);
  border-color: rgba(182, 135, 62, 0.4);
  border-top-color: var(--lx-gold);
  border-radius: 1rem;
}
.page--epc .lx-badge__copy,
.page--epc .lx-badge__fact,
.page--epc .lx-log__detail,
.page--epc .lx-note { font-size: 1rem; }
.page--epc .lx-logs {
  background: var(--lx-raised);
  border-color: rgba(104, 74, 48, 0.2);
  border-radius: 1rem;
}
.page--epc .lx-logs__count {
  background: rgba(104, 74, 48, 0.06);
  color: var(--lx-copper);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.page--epc .lx-log + .lx-log { border-color: rgba(104, 74, 48, 0.16); }
.page--epc .lx-note { max-width: 76ch; color: #4d514a; }

/* Closing action: the former neutral charcoal is now the same green story as
   the hero, and the Dukes route does not preselect a tenant journey. */
.page--epc .lx-close { background: var(--lx-forest); }
.page--epc .lx-close__veil {
  background:
    linear-gradient(90deg, rgba(9, 36, 28, 0.97) 0%, rgba(9, 36, 28, 0.91) 48%, rgba(9, 36, 28, 0.64) 100%),
    linear-gradient(180deg, rgba(9, 36, 28, 0.42), rgba(9, 36, 28, 0.66));
}
.page--epc .lx-cta { border-color: rgba(232, 207, 163, 0.42); }

/* Official links form one aligned editorial block; the review note belongs
   with the heading instead of floating under the unrelated link column. */
.page--epc .lx-sources { background: var(--lx-ivory); }
.page--epc .lx-sources__inner {
  grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.page--epc .lx-sources__intro { display: grid; gap: 1.25rem; align-content: start; }
.page--epc .lx-sources__reviewed { max-width: 34ch; color: var(--lx-ink-soft); }
.page--epc .lx-sources__link {
  background: var(--lx-raised);
  border-color: rgba(104, 74, 48, 0.16);
}
@media (hover: hover) and (pointer: fine) {
  .page--epc .lx-sources__link:hover {
    background: var(--lx-bottle);
    border-color: var(--lx-bottle);
  }
}

@media (max-width: 74.99em) {
  .page--epc .lx-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 61.99em) {
  .page--epc .lx-hero__veil {
    background: linear-gradient(180deg, rgba(9, 36, 28, 0.74) 0%, rgba(9, 36, 28, 0.9) 52%, rgba(9, 36, 28, 0.98) 100%);
  }
  .page--epc .lx-hero__inner { padding-bottom: 4.5rem; }
  .page--epc .lx-sources__inner { grid-template-columns: 1fr; gap: 2rem; }
  .page--epc .lx-sources__reviewed { max-width: 54ch; }
}

@media (max-width: 47.99em) {
  .page--epc .lx-hero { min-height: auto; }
  .page--epc .lx-hero__title { font-size: clamp(2.55rem, 12vw, 3.8rem); }
  .page--epc .lx-hero__lede { font-size: 1.05rem; }
  .page--epc .lx-switch {
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
    margin-top: -1.25rem;
    top: calc(var(--head-h) + 0.25rem);
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 0.45rem;
    border-radius: 1.5rem;
  }
  .page--epc .lx-switch__title { padding: 0.4rem 0.75rem 0.2rem; }
  .page--epc .lx-switch__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
  }
  .page--epc .lx-switch__link {
    min-height: 46px;
    justify-content: flex-start;
    padding: 0.5rem 0.65rem;
    white-space: normal;
    border-radius: 1rem;
    font-size: 0.85rem;
  }
  .page--epc [data-epc-section] { scroll-margin-top: calc(var(--head-h) + 10rem); }
  .page--epc .lx-steps__list { grid-template-columns: 1fr; }
  .page--epc .lx-step { padding: 0.9rem; }
}

@media (max-width: 24em) {
  .page--epc .lx-switch__index { display: none; }
  .page--epc .lx-switch__link { font-size: 0.81rem; }
  .page--epc .lx-sec { padding-block: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page--epc .lx-beam__ring { display: none !important; }
}

/* Reviews: approved forest / parchment perfection pass, 12 August 2026.
   Late and page-scoped so the superseded obsidian experiment cannot leak to
   other routes. */
.page--reviews {
  --rvwx-max: 92rem;
  --rvwx-dark: #1d241f;
  --rvwx-dark-deep: #1d241f;
  --rvwx-dark-warm: #f3eee5;
  --rvwx-dark-2: #24342c;
  --rvwx-lift: #1d241f;
  --rvwx-line: rgba(250, 247, 240, 0.17);
  --rvwx-gold: #c5a66a;
  --rvwx-gold-line: rgba(197, 166, 106, 0.42);
  --rvwx-glow: rgba(197, 166, 106, 0.12);
  --rvwx-text: #faf7f0;
  --rvwx-text-soft: #e8decc;
}

.page--reviews .rvw-hero {
  background: #f3eee5;
  padding: clamp(1rem, 2.4vw, 2rem) var(--inset) clamp(1.5rem, 3vw, 2.75rem);
}
.page--reviews .rvw-hero__frame {
  max-width: var(--rvwx-max);
  min-height: clamp(35rem, 67svh, 44rem);
  border-color: rgba(169, 120, 66, 0.36);
  border-radius: 10px;
  background: #1d241f;
  box-shadow: 0 24px 60px rgba(29, 36, 31, 0.16);
}
.page--reviews .rvw-hero__scene {
  overflow: hidden;
  background: #1d241f url("/assets/media/reviews/reviews-hero-entrance-poster.webp") center / cover no-repeat;
}
.page--reviews .rvw-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.page--reviews .rvw-hero__scene::after {
  display: block;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  transform: none;
  background: linear-gradient(90deg, rgba(29, 36, 31, 0.98) 0%, rgba(29, 36, 31, 0.92) 31rem, rgba(29, 36, 31, 0.58) 48rem, rgba(29, 36, 31, 0.12) 78%, rgba(29, 36, 31, 0.06) 100%);
  opacity: 1;
  filter: none;
}
.page--reviews .rvw-hero__inner {
  z-index: 1;
  min-height: clamp(35rem, 67svh, 44rem);
  max-width: 53rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1.25rem, 4.5vw, 5rem);
}
.page--reviews .rvw-hero__pill {
  align-self: flex-start;
  border-radius: 4px;
  background: rgba(250, 247, 240, 0.08);
  backdrop-filter: blur(10px);
}
.page--reviews .rvw-hero__title { max-width: 15ch; }
.page--reviews .rvw-hero__lede { max-width: 49ch; }

.page--reviews .rvw-trust {
  max-width: var(--rvwx-max);
  margin: 0 auto;
  padding: clamp(2.75rem, 5vw, 5.5rem) var(--inset);
  display: grid;
  gap: clamp(2rem, 4vw, 4.5rem);
  background: #f3eee5;
}
@media (min-width: 62em) {
  .page--reviews .rvw-trust { grid-template-columns: minmax(17rem, 0.78fr) minmax(0, 2fr); align-items: start; }
}
.page--reviews .rvw-facts-band,
.page--reviews .rvw-themes {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1c211f;
  --rvwx-text: #1c211f;
  --rvwx-text-soft: #556159;
  --rvwx-line: rgba(28, 33, 31, 0.14);
  --rvwx-gold: #8a5c2e;
  --rvwx-gold-line: rgba(138, 92, 46, 0.26);
}
.page--reviews .rvw-facts,
.page--reviews .rvw-themes__plate { max-width: none; margin: 0; padding: 0; }
.page--reviews .rvw-facts {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(28, 33, 31, 0.18);
}
.page--reviews .rvw-facts__item {
  min-height: 0;
  padding: 1.25rem 0;
  border: 0;
  border-bottom: 1px solid rgba(28, 33, 31, 0.18);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.page--reviews .rvw-facts__item::before { content: none; }
@media (hover: hover) and (pointer: fine) {
  .page--reviews .rvw-facts__item:hover { background: transparent; border-color: rgba(28, 33, 31, 0.18); box-shadow: none; }
}
.page--reviews .rvw-facts__value { color: #1d241f; }
.page--reviews .rvw-facts__label { color: #556159; }
.page--reviews .rvw-themes .rvw-h2 { color: #1d241f; max-width: 22ch; }
.page--reviews .rvw-themes .rvw-kicker { color: #8a5c2e; }
.page--reviews .rvw-themes__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(28, 33, 31, 0.16);
  border-radius: 8px;
  background: rgba(28, 33, 31, 0.16);
}
.page--reviews .rvw-themes__item {
  border: 0;
  border-radius: 0;
  background: #faf7f0;
  color: #39433d;
  padding: clamp(1.25rem, 2.3vw, 1.75rem);
}
@media (hover: hover) and (pointer: fine) {
  .page--reviews .rvw-themes__item:hover {
    transform: translateY(-2px);
    border-color: transparent;
    background: #f6f0e5;
    box-shadow: inset 3px 0 0 #a97842;
  }
}

.page--reviews .rvw-feat {
  background: #1d241f;
  border-top-color: rgba(197, 166, 106, 0.24);
  padding: clamp(3.25rem, 6vw, 6rem) 0;
}
.page--reviews .rvw-feat > .rvw-kicker,
.page--reviews .rvw-feat > .rvw-h2,
.page--reviews .rvw-feat > .rvw-feat__grid { max-width: var(--rvwx-max); }
.page--reviews .rvw-feat__card {
  border-radius: 8px;
  background: #24342c;
  border-color: rgba(232, 222, 204, 0.18);
}
@media (hover: hover) and (pointer: fine) {
  .page--reviews .rvw-feat__card:hover {
    background: #2c3830;
    border-color: rgba(197, 166, 106, 0.48);
    box-shadow: 0 18px 38px rgba(3, 16, 12, 0.32);
  }
}
.page--reviews .rvw-feat__initials.face--letters {
  background: rgba(197, 166, 106, 0.12);
  color: #e6ca91;
}

.page--reviews .rvw-archive-band {
  background: #f3eee5;
  border-top: 0;
  color: #1c211f;
  --rvwx-text: #1c211f;
  --rvwx-text-soft: #59635d;
  --rvwx-line: rgba(28, 33, 31, 0.15);
  --rvwx-gold: #8a5c2e;
  --rvwx-gold-line: rgba(138, 92, 46, 0.28);
  --rvwx-glow: rgba(138, 92, 46, 0.08);
  padding: clamp(3.25rem, 6vw, 6rem) 0;
}
.page--reviews .rvw-archive-band__head,
.page--reviews .rvw-grid,
.page--reviews .rvw-more { max-width: var(--rvwx-max); }
.page--reviews .rvw-archive-band .rvw-kicker { color: #8a5c2e; }
.page--reviews .rvw-archive-band .rvw-h2 { color: #1d241f; }
.page--reviews .rvw-archive-band__lockup { color: #4d5851; }
.page--reviews .rvw-method { max-width: none; border-radius: 8px; background: #faf7f0; }
@media (hover: hover) and (pointer: fine) {
  .page--reviews .rvw-method__summary:hover { background: #eee4d4; }
}
.page--reviews .rvw-method__summary:focus-visible { background: #eee4d4; outline: 2px solid #8a5c2e; outline-offset: -2px; }
.page--reviews .rvw-card__inner {
  border-radius: 8px;
  background: #faf7f0;
  border-color: rgba(28, 33, 31, 0.15);
}
@media (hover: hover) and (pointer: fine) {
  .page--reviews .rvw-card:hover .rvw-card__inner {
    background: #fffdf8;
    border-color: rgba(138, 92, 46, 0.42);
    box-shadow: 0 14px 30px rgba(29, 36, 31, 0.1);
  }
}
.page--reviews .rvw-card__initials.face--letters {
  background: #1d241f;
  border-color: #1d241f;
  color: #f0d79e;
}
.page--reviews .rvw-card__chip,
.page--reviews .rvw-feat__chip { letter-spacing: 0.035em; }
.page--reviews .rvw-more__btn {
  border-radius: 6px;
  background: transparent;
  border-color: rgba(29, 36, 31, 0.36);
  color: #1d241f;
}
@media (hover: hover) and (pointer: fine) {
  .page--reviews .rvw-more__btn:hover { background: #1d241f; border-color: #1d241f; color: #faf7f0; }
}
@media (min-width: 88em) {
  .page--reviews .rvw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.page--reviews .rvw-close {
  background: #1d241f;
  border-top: 1px solid rgba(197, 166, 106, 0.26);
  padding: clamp(3.25rem, 6vw, 6rem) var(--inset);
}
.page--reviews .rvw-close__banner,
.page--reviews .rvw-contact { max-width: var(--rvwx-max); }
.page--reviews .rvw-close__banner {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.page--reviews .rvw-close__banner::before,
.page--reviews .rvw-close__banner::after { content: none; }
.page--reviews .rvw-close__actions { gap: var(--s4); }
.page--reviews .rvw-contact {
  gap: 1px;
  border-radius: 8px;
  border-color: rgba(232, 222, 204, 0.65);
  background: rgba(232, 222, 204, 0.65);
}
.page--reviews .rvw-contact__link {
  --rvw-contact-clip: inset(0 100% 0 0);
  background: #f3eee5;
  color: #1c211f;
  min-height: 12.5rem;
}
.page--reviews .rvw-contact__link::before {
  inset: 0;
  height: auto;
  background: #24342c;
  clip-path: var(--rvw-contact-clip);
  transition: var(--rvw-contact-transition, clip-path 360ms cubic-bezier(0.22, 1, 0.36, 1));
}
.page--reviews .rvw-contact__link[data-rvw-contact-active]::before,
.page--reviews .rvw-contact__link:focus-visible::before { height: auto; clip-path: inset(0); }
.page--reviews .rvw-contact__link:active::before { height: auto; background: #1d241f; }
.page--reviews .rvw-contact__link > * { z-index: 1; }
.page--reviews .rvw-contact__iconplate {
  border-radius: 6px;
  color: #8a5c2e;
  border-color: rgba(138, 92, 46, 0.34);
  background: rgba(169, 120, 66, 0.08);
}
.page--reviews .rvw-contact__label { color: #7b522b; }
.page--reviews .rvw-contact__value { color: #1c211f; }
.page--reviews .rvw-contact__go { color: #536059; }
.page--reviews .rvw-contact__link[data-rvw-contact-active] .rvw-contact__iconplate,
.page--reviews .rvw-contact__link:focus-visible .rvw-contact__iconplate { color: #e6ca91; border-color: rgba(230, 202, 145, 0.5); }
.page--reviews .rvw-contact__link[data-rvw-contact-active] .rvw-contact__label,
.page--reviews .rvw-contact__link:focus-visible .rvw-contact__label { color: #e6ca91; }
.page--reviews .rvw-contact__link[data-rvw-contact-active] .rvw-contact__value,
.page--reviews .rvw-contact__link[data-rvw-contact-active] .rvw-contact__go,
.page--reviews .rvw-contact__link:focus-visible .rvw-contact__value,
.page--reviews .rvw-contact__link:focus-visible .rvw-contact__go { color: #faf7f0; }

.page--reviews .steps {
  background: #f3eee5;
  border-top: 0;
  color: #1c211f;
}
.page--reviews .steps > * { max-width: var(--rvwx-max); }
.page--reviews .steps .h-section { color: #1d241f; }
.page--reviews .steps__list { grid-template-columns: 1fr; border-top-color: rgba(28, 33, 31, 0.16); }
.page--reviews .steps__link {
  border-radius: 8px;
  background: #faf7f0;
  border-color: rgba(28, 33, 31, 0.15);
  color: #1c211f;
}
.page--reviews .steps__label { color: #1d241f; }
.page--reviews .steps__blurb { color: #59635d; }
.page--reviews .steps__action { color: #8a5c2e; }
@media (hover: hover) and (pointer: fine) {
  .page--reviews .steps__link:hover { background: #eee4d4; border-color: rgba(138, 92, 46, 0.42); }
}

@media (max-width: 61.99em) {
  .page--reviews .rvw-hero__scene::after {
    background: linear-gradient(90deg, rgba(29, 36, 31, 0.97) 0%, rgba(29, 36, 31, 0.88) 65%, rgba(29, 36, 31, 0.48) 100%);
  }
  .page--reviews .rvw-themes__list { grid-template-columns: 1fr; }
}
@media (max-width: 40em) {
  .page--reviews .rvw-hero { padding-inline: 0; padding-top: 0; }
  .page--reviews .rvw-hero__frame { border-left: 0; border-right: 0; border-radius: 0; }
  .page--reviews .rvw-hero__video { object-position: 61% 50%; }
  .page--reviews .rvw-hero__scene::after { background: rgba(29, 36, 31, 0.78); }
  .page--reviews .rvw-trust { padding-inline: var(--inset); }
  .page--reviews .rvw-contact__link { min-height: 10rem; }
}
@media (prefers-reduced-motion: reduce) {
  .page--reviews .rvw-hero__video { display: none; }
  .page--reviews .rvw-contact__link::before { transition: none; }
}

/* ================= ABOUT — APPROVED PERFECTION PASS ===================== *
 * Approved 12 August 2026. This final page-scoped layer implements the
 * greenery-and-gold direction across the About journey without changing the
 * global header, footer, Slough panel controller, review controller or shared
 * contact data. The visual hierarchy is deliberately wider and less boxed.
 * ======================================================================== */

.page--about {
  /* Premium neutral ladder (Aarav, 13 Aug 2026): replaces the more saturated
     forest/bottle pair with a tighter, near-black neutral so green stops
     reading as a flat brand wash and gold carries the accent instead. */
  --about-forest: #1d241f;
  --about-bottle: #24342c;
  --about-leaf: #315345;
  --about-paper: #f3eee3;
  --about-ivory: #fbf8f1;
  --about-parchment: #e7dcc8;
  --about-gold: #c5a66a;
  --about-bronze: #8a5c2e;
  --about-ink: #1c211f;
  --about-max: 92rem;
}

/* Hero: the film is the section, not a framed picture sitting on beige. */
.page--about .abt-hero {
  --abt-hero-copy: 37rem;
  --abt-hero-gutter: var(--inset);
  padding: 0;
  background: var(--about-forest);
}
.page--about .abt-hero__frame {
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--about-forest);
}
.page--about .abt-hero__stage {
  min-height: clamp(35rem, 72svh, 45rem);
  align-items: center;
  background: var(--about-forest);
}
.page--about .abt-hero__inner {
  display: block;
  width: min(100%, var(--about-max));
  margin-inline: auto;
  padding: clamp(3rem, 7svh, 5.5rem) var(--abt-hero-gutter);
}
.page--about .abt-hero__copy { max-width: var(--abt-hero-copy); }
.page--about .abt-hero__title {
  max-width: 15ch;
  font-size: clamp(2.75rem, 2rem + 3vw, 5.25rem);
  line-height: 0.98;
}
.page--about .abt-hero__standfirst { max-width: 31rem; }
.page--about .abt-hero__poster,
.page--about .abt-hero__video { object-position: 50% 56%; }
.page--about .abt-hero__scrim {
  background:
    linear-gradient(90deg, rgba(29, 36, 31, 0.94) 0, rgba(29, 36, 31, 0.84) 31rem, rgba(29, 36, 31, 0.34) 49rem, rgba(29, 36, 31, 0.04) 72rem),
    linear-gradient(0deg, rgba(29, 36, 31, 0.18), rgba(29, 36, 31, 0.03) 42%);
}
.page--about .abt-hero__glass { display: none; }
.page--about .abt-hero__motion {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(243, 238, 227, 0.42);
  border-radius: 999px;
  background: rgba(29, 36, 31, 0.7);
  color: var(--about-ivory);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.page--about .abt-hero__motion:hover,
.page--about .abt-hero__motion:focus-visible { border-color: var(--about-gold); background: rgba(29, 36, 31, 0.92); }
.page--about .abt-hero__motion:focus-visible { outline: 2px solid var(--about-gold); outline-offset: 3px; }
.page--about .abt-hero__motion-glyph {
  width: 10px;
  height: 12px;
  border-inline: 3px solid currentColor;
}
.page--about .abt-hero__motion[aria-pressed="true"] .abt-hero__motion-glyph {
  width: 0;
  height: 0;
  border-left: 9px solid currentColor;
  border-right: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* Primary CTA, gold not green (Aarav, 13 Aug 2026): with every surrounding
   surface now a neutral near-black, the one filled action on the page reads
   as the thing you press. Same skeleton as the base .abt-hero__primary rule,
   just recoloured — dark ink on the champagne fill for contrast. */
.page--about .abt-hero__primary {
  background: var(--about-gold);
  color: var(--about-forest);
  border-color: var(--about-gold);
  box-shadow: none;
}
.page--about .abt-hero__primary .abt-hero__rule { background: var(--about-forest); }
@media (hover: hover) and (pointer: fine) {
  .page--about .abt-hero__primary:hover {
    background: #d9c084;
    border-color: #d9c084;
    box-shadow: none;
  }
}
.page--about .abt-hero__primary:active { background: var(--about-bronze); border-color: var(--about-bronze); color: var(--about-ivory); }
.page--about .abt-hero__primary:focus-visible {
  background: #d9c084;
  border-color: #d9c084;
  box-shadow: none;
}

/* Shared section measure: the whitespace becomes breathing room inside a
   wider content field rather than blank rails outside a narrow composition. */
.page--about .abt-services > *,
.page--about .abt-slough__intro,
.page--about .abt-slough__frames,
.page--about .abt-shield .band__head,
.page--about .abt-shield__list { max-width: var(--about-max); }

.page--about .abt-services {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  background: var(--about-parchment);
  border: 0;
}
.page--about .abt-services__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.72fr);
  column-gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
}
.page--about .abt-cards { margin-top: clamp(2rem, 4vw, 3.5rem); }
.page--about .abt-card__link {
  border-radius: 10px;
  border-color: rgba(197, 166, 106, 0.22);
  border-top: 2px solid var(--about-gold);
  background: var(--about-forest);
}
.page--about .abt-card__body { background: var(--about-forest); }
.page--about .abt-card__media img { filter: saturate(0.92) contrast(1.02); }
.page--about .abt-card__action--btn { border-radius: 999px; }
@media (hover: hover) and (pointer: fine) {
  .page--about .abt-card:hover .abt-card__link { border-color: var(--about-gold); border-top-color: var(--about-gold); }
}
.page--about .abt-card__link:focus-visible { border-color: var(--about-gold); border-top-color: var(--about-gold); }

/* Local context: one editorial introduction aligned to the expanding panels. */
.page--about .abt-slough {
  padding: clamp(3.75rem, 7vw, 6.5rem) var(--inset);
  background: var(--about-forest);
}
@media (min-width: 64em) {
  .page--about .abt-slough__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.7fr);
    column-gap: clamp(3rem, 7vw, 8rem);
    align-items: end;
  }
  .page--about .abt-slough__intro .eyebrow,
  .page--about .abt-slough__intro .h-section { grid-column: 1; }
  .page--about .abt-slough__intro .lede {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
    margin: 0;
  }
}
.page--about .abt-slough__frames { margin-top: clamp(2rem, 4vw, 3.5rem); }
.page--about .abt-slough__frames[data-slough-on] .abt-slough__figure { border-radius: 8px; }

/* Reviews: the Google record remains fixed while the live rail becomes an
   asymmetric two-row wall inspired by the approved reference. */
.page--about .abt-testimonials {
  padding: clamp(3.75rem, 7vw, 6.5rem) var(--inset);
  background: var(--about-paper);
}
.page--about .abt-testimonials__plate {
  max-width: var(--about-max);
  padding: 0;
  border: 0;
  background: transparent;
}
.page--about .abt-testimonials__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
  column-gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
}
.page--about .abt-testimonials__intro { display: contents; }
.page--about .abt-testimonials__intro .eyebrow,
.page--about .abt-testimonials__title { grid-column: 1; }
.page--about .abt-testimonials__lede { grid-column: 2; grid-row: 1 / 3; align-self: end; margin: 0; }
.page--about .abt-rail { margin-top: clamp(2rem, 4vw, 3.5rem); }
.page--about .abt-rail__anchor {
  border-radius: 8px;
  background: var(--about-forest);
}
.page--about .abt-rail__card {
  border-radius: 8px;
  border: 1px solid rgba(28, 33, 31, 0.14);
  background: var(--about-ivory);
  box-shadow: inset 0 2px 0 var(--about-gold);
}
.page--about .abt-rail__link { border-radius: 4px; }
@media (min-width: 64em) {
  .page--about [data-rail-state="live"] .abt-rail__set {
    display: grid;
    grid-template-rows: repeat(2, minmax(18rem, auto));
    grid-auto-flow: column;
    grid-auto-columns: 17rem;
    gap: var(--rail-gap);
    padding-right: var(--rail-gap);
  }
  .page--about [data-rail-state="live"] .abt-rail__card {
    width: auto;
    min-height: 0;
  }
  .page--about [data-rail-state="live"] .abt-rail__card:nth-child(1),
  .page--about [data-rail-state="live"] .abt-rail__card:nth-child(8),
  .page--about [data-rail-state="live"] .abt-rail__card:nth-child(15),
  .page--about [data-rail-state="live"] .abt-rail__card:nth-child(22) { grid-row: span 2; }
  .page--about [data-rail-state="live"] .abt-rail__card:nth-child(8n + 1),
  .page--about [data-rail-state="live"] .abt-rail__card:nth-child(8n + 5) {
    background: var(--about-bottle);
    border-color: rgba(197, 166, 106, 0.5);
    color: var(--about-ivory);
  }
  .page--about [data-rail-state="live"] .abt-rail__card:nth-child(8n + 1) .abt-rail__name,
  .page--about [data-rail-state="live"] .abt-rail__card:nth-child(8n + 1) .abt-rail__quote p,
  .page--about [data-rail-state="live"] .abt-rail__card:nth-child(8n + 5) .abt-rail__name,
  .page--about [data-rail-state="live"] .abt-rail__card:nth-child(8n + 5) .abt-rail__quote p { color: var(--about-ivory); }
  .page--about [data-rail-state="live"] .abt-rail__card:nth-child(8n + 1) .abt-rail__link,
  .page--about [data-rail-state="live"] .abt-rail__card:nth-child(8n + 5) .abt-rail__link { color: #efd69f; border-color: rgba(239, 214, 159, 0.5); }
}

/* Credentials: consistent 2×2 trust grid, no diagonal metallic glow. */
.page--about .abt-shield {
  padding: clamp(3.75rem, 7vw, 6.5rem) var(--inset);
  background: var(--about-forest);
}
.page--about .abt-shield .band__head {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.7fr);
  column-gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
}
.page--about .abt-shield .h-section { max-width: 18ch; }
.page--about .abt-shield .lede { justify-self: end; }
.page--about .abt-shield__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.page--about .abt-shield__item { grid-column: auto; grid-row: auto; }
.page--about .abt-shield__card,
.page--about .abt-shield__card:hover {
  min-height: 22rem;
  border: 1px solid rgba(197, 166, 106, 0.34);
  border-top: 2px solid var(--about-gold);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.055);
  background-image: none;
  box-shadow: none;
}

/* Contact: four distinct channel cards, no square rule grid. The channel
   colour travels left-to-right and retracts back toward the left edge. */
.page--about .abt-contact {
  max-width: none;
  padding: clamp(3.75rem, 7vw, 6.5rem) var(--inset);
  background: var(--about-paper);
}
.page--about .abt-contact__plate {
  max-width: var(--about-max);
  padding: 0;
  border: 0;
  background: transparent;
}
.page--about .abt-contact .dc { gap: clamp(2rem, 5vw, 6rem); }
.page--about .abt-contact .dc__grid {
  gap: 1rem;
  border: 0;
  background: transparent;
}
.page--about .abt-contact .dc__cell { border: 0; }
.page--about .abt-contact .dc__tile {
  min-height: 9.5rem;
  border: 1px solid rgba(28, 33, 31, 0.16);
  border-radius: 8px;
  background: var(--about-ivory);
}
.page--about .abt-contact .dc__body { min-height: 9.5rem; padding: 1.35rem; }
.page--about .abt-contact .dc__fill {
  inset: 0;
  width: 100%;
  height: auto;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.page--about .abt-contact .dc__tile:hover .dc__fill,
.page--about .abt-contact .dc__tile:focus-visible .dc__fill { height: auto; transform: scaleX(1); }
.page--about .abt-contact .dc__tile:not(:hover):not(:focus-visible) .dc__fill { transition-duration: 220ms; }
.page--about .abt-contact .abt-contact__note { max-width: 72ch; }
.page--about .abt-contact .abt-contact__closing {
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.page--about .abt-contact .abt-contact__written,
.page--about .abt-contact .abt-legal {
  margin-top: 0;
  border-radius: 8px;
  box-shadow: none;
}
.page--about .abt-contact .abt-contact__written { background: var(--about-bottle); }
.page--about .abt-contact .abt-legal { background: var(--about-ivory); }

@media (max-width: 63.99em) {
  .page--about .abt-services__head,
  .page--about .abt-testimonials__head,
  .page--about .abt-shield .band__head { display: block; }
  .page--about .abt-testimonials__intro { display: block; }
  .page--about .abt-testimonials__lede,
  .page--about .abt-shield .lede { margin-top: var(--s4); }
}
@media (max-width: 47.99em) {
  .page--about .abt-hero__stage { min-height: 38rem; }
  .page--about .abt-hero__scrim { background: rgba(29, 36, 31, 0.76); }
  .page--about .abt-hero__title { font-size: clamp(2.5rem, 11vw, 3.65rem); }
  .page--about .abt-hero__motion { right: 1rem; bottom: 1rem; }
  .page--about .abt-shield__list { grid-template-columns: 1fr; }
  .page--about .abt-shield__card,
  .page--about .abt-shield__card:hover { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .page--about .abt-hero__motion { display: none; }
  .page--about .abt-contact .dc__fill { transition: none; }
}

/* About density correction — 12 August 2026.
   Reviews return to a compact evidence ribbon: one row, one card height,
   smaller type and no blurred edge treatment. The moving/pausing mechanics,
   source links and complete static fallback remain unchanged. */
.page--about .abt-testimonials {
  padding-block: clamp(2.5rem, 4vw, 3.75rem);
}
.page--about .abt-testimonials__title {
  font-size: clamp(1.875rem, 1.55rem + 1.2vw, 2.5rem);
  max-width: 24ch;
}
.page--about .abt-testimonials__lede {
  max-width: 42ch;
  font-size: 1rem;
}
.page--about .abt-rail {
  --rail-gap: 0.875rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.page--about .abt-rail__layout {
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: flex-end;
}
.page--about .abt-rail__anchor {
  width: 14.5rem;
  height: 18rem;
  min-height: 0;
  margin-top: calc(40px + 0.75rem);
  padding: 1.25rem;
  align-self: flex-start;
}
.page--about .abt-rail__anchor-value { font-size: 2.5rem; }
.page--about .abt-rail__anchor-stars { font-size: 0.8rem; }
.page--about .abt-rail__pause {
  min-height: 40px;
  margin-bottom: 0.75rem;
  padding-inline: 0.875rem;
}
.page--about .abt-rail__window { mask-image: none; -webkit-mask-image: none; }
.page--about .abt-rail__veil { display: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.page--about .abt-rail__card {
  height: 18rem;
  min-height: 0;
  padding: 1.125rem;
  gap: 0.75rem;
  border-radius: 6px;
}
.page--about .abt-rail__initials { width: 38px; height: 38px; }
.page--about .abt-rail__quote p { font-size: 0.875rem; line-height: 1.5; }
.page--about [data-rail-state="live"] .abt-rail__quote p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
.page--about .abt-rail__link {
  min-height: 38px;
  margin: 0;
  padding: 0.4rem 0.7rem;
  font-size: 0.75rem;
}
@media (min-width: 64em) {
  .page--about [data-rail-state="live"] .abt-rail__set {
    display: flex;
    gap: var(--rail-gap);
    padding-right: var(--rail-gap);
  }
  .page--about [data-rail-state="live"] .abt-rail__card {
    width: clamp(13.5rem, 16vw, 15.25rem);
    height: 18rem;
    min-height: 0;
    overflow: hidden;
    background: var(--about-ivory);
    border-color: rgba(28, 33, 31, 0.14);
    color: var(--about-ink);
  }
  .page--about [data-rail-state="live"] .abt-rail__card:nth-child(8n + 1),
  .page--about [data-rail-state="live"] .abt-rail__card:nth-child(8n + 5) {
    background: var(--about-bottle);
    border-color: rgba(197, 166, 106, 0.5);
    color: var(--about-ivory);
  }
}
@media (max-width: 39.99em) {
  .page--about .abt-rail__anchor { width: 100%; height: auto; min-height: 0; margin-top: 0; }
  .page--about .abt-rail__card { height: auto; min-height: 0; }
}

/* ================= /epc/ HERO REFINEMENT. 12 August 2026 ================== *
 * Hero-scoped only, to Aarav's spec: a blur-in title reveal, staggered
 * paragraph fades (the shared hero-copy stagger already provides these), and
 * the GOV.UK dock as a floating cream panel carrying two white action cards
 * with a -2px lift on hover. Nothing outside .page--epc hero selectors;
 * header, navigation, switcher, footer, widget and the video element are
 * untouched. Appended last so it wins over the earlier dock treatment.
 * ========================================================================== */

/* --- Title: blur-in. Composes with the shared hero-copy stagger: the same
       opacity/translate ride, plus the blur, on the title alone. The blur is
       cleared under reduced motion with every other entrance below. */
[data-enhanced] .page--epc [data-reveal="hero-copy"] > .lx-hero__title {
  filter: blur(14px);
}

[data-enhanced] .page--epc [data-reveal="hero-copy"].is-in > .lx-hero__title {
  filter: blur(0);
  transition: opacity 720ms var(--lx-ease), transform 720ms var(--lx-ease), filter 720ms var(--lx-ease);
  transition-delay: 140ms;
}

@media (prefers-reduced-motion: reduce) {
  [data-enhanced] .page--epc [data-reveal="hero-copy"] > .lx-hero__title {
    filter: none !important;
    transition: none !important;
  }
}

[data-motion="static"] .page--epc [data-reveal="hero-copy"] > .lx-hero__title {
  filter: none !important;
  transition: none !important;
}

/* --- The dock: floating cream panel, exactly the requested surface. */
.page--epc .lx-dock {
  background: #f7f4ed;
  border-radius: 1rem;
  padding: 1.5rem;
}

/* --- The two service cards: white, hairline-bordered, softly rounded. */
.page--epc .lx-dock__action {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  transition: background-color var(--lx-move) var(--lx-ease),
    border-color var(--lx-move) var(--lx-ease),
    transform var(--lx-move) var(--lx-ease),
    box-shadow var(--lx-move) var(--lx-ease);
}

@media (hover: hover) and (pointer: fine) {
  .page--epc .lx-dock__action:hover {
    background: #ffffff;
    border-color: var(--lx-gold);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -22px rgba(29, 36, 31, 0.5);
  }
}

.page--epc .lx-dock__action:active { transform: none; }

.page--epc .lx-dock__action:focus-visible {
  background: #ffffff;
  border-color: var(--lx-gold);
  outline: 3px solid var(--lx-gold-ink);
  outline-offset: 2px;
  transform: none;
  transition: none;
}

/* The lift is the one movement in the dock; reduced motion keeps the colour
   states and drops it. */
@media (prefers-reduced-motion: reduce) {
  .page--epc .lx-dock__action,
  .page--epc .lx-dock__action:hover { transform: none !important; }
}

[data-motion="static"] .page--epc .lx-dock__action,
[data-motion="static"] .page--epc .lx-dock__action:hover { transform: none !important; }

/* The playing film carries z-index: 1, which lifted it above the veil (whose
   z-index was auto) — so the moment playback started, every hero word sat on
   raw bright footage. Measured at 1.07:1 on the title. The veil rides above
   the film, and below the copy, which lives outside this stacking context. */
.page--epc .lx-hero__veil { z-index: 2; }

/* ================= SELLER'S GUIDE — THE SELLER'S DOSSIER ==================
 * Page-scoped replacement for the inherited Buying Guide opening. The guide
 * behaves like a prepared decision file: priority first, route trade-off
 * second, then the complete three-phase dossier. No competitor claim, gated
 * download or generic marketing hero survives into this surface.
 * ========================================================================== */

.page--sellers-guide {
  --sg-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sg-move: 260ms;
  /* The duration ladder. Controls stay inside the 150-250ms budget a clicked
     control needs to feel immediate; scene work may breathe. Added 13 Aug 2026
     because the guide had grown 12 distinct animation durations and 7 distinct
     transition durations, which is what makes a page feel assembled rather
     than authored. */
  --sg-fast: 160ms;   /* press and colour feedback */
  --sg-state: 240ms;  /* a control changing state */
  --sg-scene: 520ms;  /* a chapter arriving */
}

.page--sellers-guide ::selection {
  background: var(--sand);
  color: var(--bottle-deep);
}

.page--sellers-guide button { caret-color: var(--copper); }

.page--sellers-guide::-webkit-scrollbar { width: 12px; }
.page--sellers-guide::-webkit-scrollbar-track { background: var(--bone-sunk); }
.page--sellers-guide::-webkit-scrollbar-thumb {
  background: var(--bottle);
  border: 3px solid var(--bone-sunk);
}

/* The opening is the dark cover of the file. It reaches the viewport edges
   while its content remains on the site grid. */
.sg-hero {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 5rem) var(--inset);
  display: grid;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: stretch;
  background: var(--bottle-deep);
  color: var(--on-deep);
  box-shadow: 0 0 0 100vmax var(--bottle-deep);
  clip-path: inset(0 -100vmax);
}

@media (min-width: 62em) {
  .sg-hero { grid-template-columns: minmax(0, 1.12fr) minmax(21rem, 0.88fr); }
}

.sg-hero__copy {
  min-width: 0;
  align-self: center;
  padding-block: clamp(0.5rem, 2vw, 1.5rem);
}

.sg-hero__register {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--rule-on-deep);
  color: var(--on-deep-soft);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.sg-hero__title {
  margin: 0 0 var(--s4);
  max-width: 8ch;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2.2rem + 5vw, 5.8rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--on-deep);
}

.sg-hero__thesis {
  margin: 0 0 var(--s5);
  max-width: 26ch;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.15rem);
  line-height: 1.18;
  color: var(--sand);
}

.sg-hero__compact-index { display: none; }

.sg-hero__lede {
  margin: 0 0 var(--s4);
  max-width: 56ch;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--on-deep);
}

.sg-hero__scope {
  margin: 0;
  max-width: 64ch;
  color: var(--on-deep-soft);
  font-size: var(--t-small);
  line-height: 1.65;
}

.sg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.sg-action {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.35rem;
  border-radius: 0;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--sg-move) var(--sg-ease),
    border-color var(--sg-move) var(--sg-ease), color var(--sg-move) var(--sg-ease);
}

.sg-action--primary {
  background: var(--sand);
  border: 1px solid var(--sand);
  color: var(--bottle-deep);
}

.sg-action--quiet {
  background: transparent;
  border: 1px solid var(--rule-on-deep);
  color: var(--on-deep);
}

@media (hover: hover) and (pointer: fine) {
  .sg-action--primary:hover {
    background: var(--on-deep);
    border-color: var(--on-deep);
  }
  .sg-action--quiet:hover {
    background: rgba(246, 244, 239, 0.1);
    border-color: var(--sand);
  }
}

.sg-action:active { background: var(--bone-sunk); color: var(--bottle-deep); }

/* The document index is a real secondary composition, not unstyled metadata. */
.sg-dossier {
  min-width: 0;
  align-self: stretch;
  background: var(--bone-raised);
  color: var(--ink);
  border: 1px solid rgba(197, 166, 106, 0.55);
  padding: clamp(1.35rem, 3vw, 2rem);
  display: grid;
  align-content: start;
}

.sg-dossier__head {
  display: grid;
  gap: var(--s2);
  padding-bottom: var(--s5);
  border-bottom: 2px solid var(--copper);
}

.sg-dossier__label {
  color: var(--copper-deep);
  font-size: var(--t-label);
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sg-dossier__shape {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
}

.sg-dossier__phases {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sg-dossier__phase + .sg-dossier__phase { border-top: 1px solid var(--rule); }

.sg-dossier__phase a {
  min-height: 72px;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--s4);
  align-items: center;
  padding: 0.8rem 0;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--sg-move) var(--sg-ease), background-color var(--sg-move) var(--sg-ease);
}

.sg-dossier__n {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--copper);
  color: var(--copper-deep);
  font-family: var(--font-display);
}

.sg-dossier__phase-copy { display: grid; gap: 2px; }
.sg-dossier__phase-name { font-weight: 750; line-height: 1.35; }
.sg-dossier__phase-range { color: var(--ink-soft); font-size: var(--t-small); }

@media (hover: hover) and (pointer: fine) {
  .sg-dossier__phase a:hover { color: var(--copper-deep); background: rgba(107, 70, 32, 0.06); }
}

.sg-dossier__note {
  margin: var(--s5) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: var(--t-small);
  line-height: 1.55;
}

/* Decision desk: a real first action, where competitors usually place either
   a generic hero image or an email gate. */
.sg-decision,
.sg-routes {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 7rem) var(--inset);
}

.sg-decision__head,
.sg-routes__head {
  display: grid;
  gap: var(--s4);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  align-items: end;
}

@media (min-width: 58em) {
  .sg-decision__head,
  .sg-routes__head {
    grid-template-columns: minmax(0, 0.95fr) minmax(20rem, 1.05fr);
    gap: clamp(2.5rem, 6vw, 6rem);
  }
}

.sg-decision__title,
.sg-routes__title,
.sg-questions__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.45rem);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--bottle);
}

.sg-decision__intro,
.sg-routes__intro,
.sg-questions__intro {
  margin: 0;
  max-width: 60ch;
  color: var(--ink-soft);
}

.sg-priority {
  border-top: 2px solid var(--bottle);
  border-bottom: 1px solid var(--rule-strong);
  display: grid;
  min-width: 0;
}

@media (min-width: 58em) {
  .sg-priority { grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.1fr); }
}

.sg-priority__choices { min-width: 0; }

@media (min-width: 58em) {
  .sg-priority__choices { border-right: 1px solid var(--rule-strong); }
}

.sg-priority__choice {
  min-height: 82px;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: var(--s4);
  align-items: center;
  padding: 1rem clamp(0.75rem, 2vw, 1.35rem);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--sg-move) var(--sg-ease), color var(--sg-move) var(--sg-ease);
}

.sg-priority__choice:last-child { border-bottom: 0; }
[data-enhanced="true"] .sg-priority__choice.is-active { background: var(--bottle); color: var(--on-deep); }

.sg-priority__choice-n {
  font-family: var(--font-display);
  color: var(--copper-deep);
}

[data-enhanced="true"] .sg-priority__choice.is-active .sg-priority__choice-n,
[data-enhanced="true"] .sg-priority__choice.is-active .sg-priority__choice-state { color: var(--sand); }

.sg-priority__choice-copy { min-width: 0; display: grid; gap: 2px; }
.sg-priority__choice-title { font-weight: 750; line-height: 1.35; }
.sg-priority__choice-state { color: var(--ink-soft); font-size: var(--t-small); }
.sg-priority__choice-arrow { font-size: var(--t-small); font-weight: 750; }

@media (hover: hover) and (pointer: fine) {
  .sg-priority__choice:hover { background: rgba(107, 70, 32, 0.08); color: var(--copper-deep); }
  [data-enhanced="true"] .sg-priority__choice.is-active:hover { background: var(--bottle); color: var(--on-deep); }
}

.sg-priority__results {
  min-width: 0;
  background: var(--bone-raised);
}

.sg-priority__result {
  min-width: 0;
  align-self: stretch;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  display: grid;
  align-content: center;
}

.sg-priority__result + .sg-priority__result { border-top: 1px solid var(--rule); }

[data-enhanced="true"] .sg-priority__results {
  min-height: 245px;
  display: grid;
}

[data-enhanced="true"] .sg-priority__result {
  grid-area: 1 / 1;
  border-top: 0;
}

[data-enhanced="true"] .sg-priority__result:not([data-active]) { display: none; }

[data-enhanced="true"] .sg-priority__result[data-active] {
  animation: sg-answer-in 420ms var(--sg-ease) both;
}

@keyframes sg-answer-in {
  from { opacity: 0.45; clip-path: inset(0 0 18% 0); }
  to { opacity: 1; clip-path: inset(0); }
}

.sg-priority__result-label {
  margin: 0 0 var(--s3);
  color: var(--copper-deep);
  font-size: var(--t-label);
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sg-priority__result-title {
  margin: 0 0 var(--s4);
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 1.3rem + 1.1vw, 2.4rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--bottle);
}

.sg-priority__result-copy { margin: 0 0 var(--s5); max-width: 58ch; color: var(--ink-soft); }

.sg-priority__result-action {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--copper-deep);
  font-weight: 750;
  text-underline-offset: 0.28em;
}

/* Route comparison is a sunk, full-width ledger rather than two floating
   cards. The dividing rule is the comparison. */
.sg-routes {
  max-width: none;
  background: var(--bone-sunk);
  box-shadow: 0 0 0 100vmax var(--bone-sunk);
  clip-path: inset(0 -100vmax);
}

.sg-routes > * { width: min(100%, calc(var(--max) - (2 * var(--inset)))); margin-inline: auto; }

.sg-routes__grid {
  display: grid;
  border-top: 2px solid var(--bottle);
  border-bottom: 1px solid var(--rule-strong);
}

@media (min-width: 58em) {
  .sg-routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-route + .sg-route { border-left: 1px solid var(--rule-strong); }
}

.sg-route { min-width: 0; padding: clamp(1.5rem, 3vw, 2.75rem); }
.sg-route + .sg-route { border-top: 1px solid var(--rule-strong); }

@media (min-width: 58em) {
  .sg-route + .sg-route { border-top: 0; }
}

.sg-route__head {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--s4);
  margin-bottom: var(--s5);
}

.sg-route__index {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  background: var(--bottle);
  color: var(--sand);
  font-family: var(--font-display);
}

.sg-route__title {
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.25rem + 0.7vw, 1.95rem);
  font-weight: 500;
  color: var(--bottle);
}

.sg-route__summary { margin: 0; color: var(--ink-soft); }
.sg-route__facts { margin: 0; }

.sg-route__fact {
  display: grid;
  grid-template-columns: minmax(6rem, 0.35fr) minmax(0, 1fr);
  gap: var(--s4);
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}

.sg-route__fact dt {
  color: var(--copper-deep);
  font-size: var(--t-label);
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sg-route__fact dd { margin: 0; color: var(--ink); }

.sg-routes__dukes {
  margin-top: var(--s5);
  margin-bottom: 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-strong);
  color: var(--ink-soft);
  font-size: var(--t-small);
}

/* Correct the inherited guide shell: the overview now sits inside the board
   its design rules expected, and the active stage is visible without turning
   the page into an app. */
.page--sellers-guide .band.gx.bguide {
  padding-top: clamp(3rem, 6vw, 6rem);
}

.page--sellers-guide .sg-index { scroll-margin-top: calc(var(--head-h) + 1rem); }

.page--sellers-guide .sg-index .gx__jump-link[aria-current="location"] {
  background: var(--bottle);
  color: var(--on-deep);
}

.page--sellers-guide .sg-index .gx__jump-link[aria-current="location"] .gx__jump-index {
  background: var(--bottle);
  color: var(--sand);
}

.page--sellers-guide .gx__stage { scroll-margin-top: calc(var(--head-h) + 1rem); }

/* Fast-reference answers before the closing assessment. */
.sg-questions {
  margin-top: clamp(3rem, 6vw, 6rem);
  border-top: 2px solid var(--bottle);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.sg-questions__head {
  display: grid;
  gap: var(--s4);
  margin-bottom: var(--s5);
}

@media (min-width: 58em) {
  .sg-questions__head {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.85fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
  }
}

.sg-question { border-top: 1px solid var(--rule); }
.sg-question:last-child { border-bottom: 1px solid var(--rule); }

.sg-question__summary {
  min-height: 64px;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem;
  gap: var(--s4);
  align-items: center;
  padding: 0.85rem 0.25rem;
  cursor: pointer;
  color: var(--ink);
  transition: background-color var(--sg-move) var(--sg-ease), color var(--sg-move) var(--sg-ease);
}

.sg-question__summary::-webkit-details-marker { display: none; }
.sg-question__n { color: var(--copper-deep); font-family: var(--font-display); }
.sg-question__label { font-weight: 750; }

.sg-question__sign {
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
}

.sg-question__sign::before,
.sg-question__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.sg-question__sign::before { left: 2px; right: 2px; top: 50%; height: 1px; }
.sg-question__sign::after { top: 2px; bottom: 2px; left: 50%; width: 1px; }
.sg-question[open] .sg-question__sign::after { display: none; }

@media (hover: hover) and (pointer: fine) {
  .sg-question__summary:hover { background: rgba(107, 70, 32, 0.07); color: var(--copper-deep); }
}

.sg-question__answer {
  margin: 0;
  padding: 0 var(--s4) var(--s5) calc(2.25rem + var(--s4));
  max-width: 72ch;
  color: var(--ink-soft);
}

@media (max-width: 42em) {
  .sg-hero { padding-block: 2.5rem; }
  .sg-hero__copy { display: flex; flex-direction: column; }
  .sg-hero__register { display: grid; gap: 0.25rem; margin-bottom: 1.6rem; order: 1; }
  .sg-hero__title { font-size: clamp(3.15rem, 15vw, 4.3rem); }
  .sg-hero__title { order: 2; }
  .sg-hero__thesis { order: 3; margin-bottom: 1.1rem; }
  .sg-hero__compact-index {
    order: 4;
    display: grid;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--rule-on-deep);
    border-bottom: 1px solid var(--rule-on-deep);
    color: var(--on-deep);
  }
  .sg-hero__compact-index strong {
    color: var(--sand);
    font-size: var(--t-small);
    letter-spacing: 0.04em;
  }
  .sg-hero__compact-index ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.8rem;
    margin: 0;
    padding: 0;
  }
  .sg-hero__compact-index li:not(:last-child)::after {
    content: "/";
    margin-left: 0.8rem;
    color: var(--sand);
  }
  .sg-hero__compact-index a {
    color: var(--on-deep);
    font-size: 0.78rem;
    font-weight: 700;
    text-underline-offset: 0.2em;
  }
  .sg-hero__actions { display: grid; order: 5; margin-top: 0; }
  .sg-hero__lede { order: 6; margin-top: 1.5rem; }
  .sg-hero__scope { order: 7; }
  .sg-action { width: 100%; }
  .sg-priority__choice { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .sg-priority__choice-arrow { display: none; }
  .sg-route__fact { grid-template-columns: 1fr; gap: var(--s1); }
}

@media (prefers-reduced-motion: reduce) {
  .sg-action,
  .sg-dossier__phase a,
  .sg-priority__choice,
  .sg-question__summary { transition: none; }
  [data-enhanced="true"] .sg-priority__result[data-active] { animation: none; }
}

[data-motion="static"] .sg-action,
[data-motion="static"] .sg-dossier__phase a,
[data-motion="static"] .sg-priority__choice,
[data-motion="static"] .sg-question__summary { transition: none; }

[data-motion="static"] .sg-priority__result[data-active] { animation: none; }

@media print {
  .page--sellers-guide .site-head,
  .page--sellers-guide .crumbs,
  .page--sellers-guide .trustrail,
  .page--sellers-guide .reception,
  .page--sellers-guide .site-foot,
  .page--sellers-guide .legalstrip,
  .page--sellers-guide .launcher,
  .page--sellers-guide .steps,
  .page--sellers-guide .sg-hero__actions { display: none !important; }

  .page--sellers-guide,
  .page--sellers-guide body { background: #fff !important; color: #000 !important; }

  .sg-hero,
  .sg-routes {
    display: block;
    max-width: none;
    box-shadow: none;
    clip-path: none;
    background: #fff;
    color: #000;
    padding-inline: 0;
  }

  .sg-hero__register,
  .sg-hero__title,
  .sg-hero__thesis,
  .sg-hero__lede,
  .sg-hero__scope { color: #000; }

  .sg-dossier { margin-top: 1.5rem; border-color: #777; }
  .sg-priority__choices { display: none; }
  [data-enhanced="true"] .sg-priority__result:not([data-active]) { display: grid; }
  .sg-priority__results { display: block; }
  .sg-priority__result { min-height: 0; padding: 1rem 0; border-top: 1px solid #777; }
  .page--sellers-guide .band.gx.bguide { padding-inline: 0; }
  .page--sellers-guide details > * { visibility: visible; }
}

/* ============= SELLER'S GUIDE — MAXIMUM CEILING (13 August 2026) ==========
 * Page-scoped layer over the Seller's Dossier surface above. Everything here
 * is sgm- prefixed or a .page--sellers-guide descendant; no other route is
 * touched. It implements the five mandatory 21st.dev adaptations natively:
 * the dossier-cover hero choreography and entry folios, the Find-a-decision
 * combobox, the priority compass with its masked travelling thumb, the Why
 * Dukes proof chapter, and the radial three-phase/nine-decision instrument.
 * Motion is gated behind [data-enhanced][data-motion="full"]; reduced-motion
 * and static modes resolve every scene immediately.
 * ========================================================================== */

/* ----------------------- Motion vocabulary -------------------------------- */
/* Three curves, one page: --sg-ease (arrive) for paper and copy rising,
   --sg-state for interface-state feedback, --sg-draw (even pace) for every
   line that communicates a measurement, relationship or progress state. */
.page--sellers-guide {
  --sg-state: cubic-bezier(0.22, 1, 0.36, 1);
  --sg-draw: cubic-bezier(0.65, 0, 0.35, 1);
}
/* The two dark chapters remap the semantic surface tokens exactly as
   .band--dark does, so site-wide focus rings, rules and soft text resolve
   to visible dark-surface values instead of ink-on-bottle. */
.sg-hero,
.sgm-why {
  --fg: var(--on-deep);
  --fg-soft: var(--on-deep-soft);
  --focus-ring: var(--on-deep);
  --focus-halo: rgba(197, 166, 106, 0.4);
  --rule: var(--rule-on-deep);
  --rule-strong: rgba(246, 244, 239, 0.4);
}

/* ----------------------- The cover entrance ------------------------------- */
/* One weighted sequence, run once at load: register, title, thesis, prose,
   actions and the instrument arrive as a single opening ceremony. */
@keyframes sgm-rise {
  from { opacity: 0; transform: translateY(18px); }
}
@keyframes sgm-rise-soft {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes sgm-pop {
  from { opacity: 0; transform: scale(0.94); }
}
@keyframes sgm-draw {
  from { stroke-dashoffset: 100; }
}
[data-enhanced][data-motion="full"] .sg-hero__register {
  animation: sgm-rise-soft 520ms var(--sg-ease) backwards;
}
[data-enhanced][data-motion="full"] .sg-hero__title {
  animation: sgm-rise 640ms var(--sg-ease) 120ms backwards;
}
[data-enhanced][data-motion="full"] .sg-hero__thesis {
  animation: sgm-rise 560ms var(--sg-ease) 280ms backwards;
}
[data-enhanced][data-motion="full"] .sg-hero__compact-index {
  animation: sgm-rise-soft 520ms var(--sg-ease) 340ms backwards;
}
[data-enhanced][data-motion="full"] .sg-hero__lede {
  animation: sgm-rise-soft 520ms var(--sg-ease) 400ms backwards;
}
[data-enhanced][data-motion="full"] .sg-hero__scope {
  animation: sgm-rise-soft 520ms var(--sg-ease) 460ms backwards;
}
[data-enhanced][data-motion="full"] .sg-hero__actions {
  animation: sgm-rise-soft 420ms var(--sg-ease) 320ms backwards;
}
/* Keyboard entry resolves the group instantly: focus is never invisible. */
[data-enhanced][data-motion="full"] .sg-hero__actions:focus-within { animation: none; }
[data-enhanced][data-motion="full"] .sgm-instrument {
  animation: sgm-rise 640ms var(--sg-ease) 260ms backwards;
}
/* The rule that opens the file, drawn once under the thesis. Sand, not
   copper: sand is the dark-surface metal, and this line marks a real event —
   the file being opened. */
.sg-hero__thesis { position: relative; padding-bottom: var(--s4); }
.sg-hero__thesis::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(16rem, 70%);
  height: 2px;
  background: var(--sand);
  transform-origin: left center;
}
[data-enhanced][data-motion="full"] .sg-hero__thesis::after {
  animation: sgm-rule 700ms var(--sg-draw) 480ms backwards;
}
@keyframes sgm-rule {
  from { transform: scaleX(0); }
}

/* --------------------- The dossier instrument ----------------------------- */
/* The three-phase/nine-decision map as an object: phase arcs and decision
   points on one ring, with the current position typeset in its centre. The
   script advances it as the reader actually travels the guide. */
.sgm-instrument__stage {
  position: relative;
  margin: var(--s5) auto var(--s4);
  width: min(15rem, 82%);
}
/* The instrument sits on the index card's warm paper, so it is drawn in ink
   and copper, not in the dark cover's sand. */
.sgm-ring { display: block; width: 100%; height: auto; }
.sgm-ring__paper { fill: var(--bone); stroke: var(--rule); stroke-width: 0.5; }
.sgm-ring__arc-track {
  fill: none;
  stroke: rgba(17, 26, 22, 0.16);
  stroke-width: 2.5;
  stroke-dasharray: 100;
}
.sgm-ring__arc-fill {
  fill: none;
  stroke: var(--copper);
  stroke-width: 2.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
/* The arc closes 120ms after its ninth dot reads: completion is caused by
   the last decision, never simultaneous with it. */
[data-enhanced][data-motion="full"] .sgm-ring__arc-fill { transition: stroke-dashoffset 600ms var(--sg-draw) 120ms; }
.sgm-ring__arc.is-read .sgm-ring__arc-fill { stroke-dashoffset: 0; }
.sgm-ring__dot {
  fill: rgba(87, 55, 22, 0.35);
  transform-box: fill-box;
  transform-origin: center;
}
[data-enhanced][data-motion="full"] .sgm-ring__dot {
  animation: sgm-pop 320ms var(--sg-ease) calc(400ms + var(--sgm-i, 0) * 35ms) backwards;
  transition: fill 300ms var(--sg-ease), transform 300ms var(--sg-ease);
}
.sgm-ring__dot.is-read { fill: var(--bottle); }
.sgm-ring__dot.is-current { fill: var(--copper); transform: scale(1.7); }
.sgm-instrument__state {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-content: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
}
.sgm-instrument__state-phase {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.2;
  color: var(--ink);
  max-width: 11ch;
  margin: 0 auto;
}
.sgm-instrument__state-decision {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--copper-deep);
}

/* -------------------------- The reference desk ---------------------------- */
/* A raised paper shelf that overlaps the dark cover: the Find-a-decision
   navigator and the two photographic entry folios. */
.sgm-desk {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: calc(-1 * clamp(1.5rem, 3.5vw, 3rem)) auto 0;
  padding: 0 var(--inset) clamp(2rem, 4vw, 3rem);
}
.sgm-find {
  position: relative;
  background: var(--bone-raised);
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--copper);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: 0 18px 40px -28px rgba(11, 35, 28, 0.55);
}
.sgm-find__label {
  display: block;
  margin-bottom: var(--s2);
  font-size: var(--t-label);
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.sgm-find__control { position: relative; }
.sgm-find__input {
  width: 100%;
  min-height: 48px;
  padding: 0 3.25rem 0 var(--s4);
  border: 1px solid var(--rule-strong);
  background: var(--bone);
  color: var(--ink);
  font: inherit;
  transition: border-color 150ms var(--sg-state), background-color 150ms var(--sg-state);
}
.sgm-find__input::placeholder { color: var(--fg-soft); }
.sgm-find__input:hover { border-color: var(--copper); }
.sgm-find__input:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 2px; }
.sgm-find__clear {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-soft);
  cursor: pointer;
  transition: color 150ms var(--sg-state), background-color 150ms var(--sg-state);
}
.sgm-find__clear:hover { color: var(--ink); background: rgba(17, 26, 22, 0.06); }
.sgm-find__clear:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 1px; }
.sgm-find__clear-mark { position: relative; width: 0.75rem; height: 0.75rem; }
.sgm-find__clear-mark::before,
.sgm-find__clear-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
}
.sgm-find__clear-mark::before { transform: translateY(-50%) rotate(45deg); }
.sgm-find__clear-mark::after { transform: translateY(-50%) rotate(-45deg); }
/* The result sheet: paper below the field, each option a ruled row with the
   decision's own number, title and phase. */
.sgm-find__list {
  position: absolute;
  left: clamp(1.25rem, 2.5vw, 1.75rem);
  right: clamp(1.25rem, 2.5vw, 1.75rem);
  z-index: 5;
  margin: 0.375rem 0 0;
  padding: 0;
  list-style: none;
  background: var(--bone-raised);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 24px 48px -24px rgba(11, 35, 28, 0.5);
  max-height: 21rem;
  overflow-y: auto;
}
@keyframes sgm-option-in {
  from { opacity: 0; transform: translateY(6px); }
}
/* The option stagger belongs to the sheet opening, never to typing: the
   controller arms [data-entering] once per open and retires it, so filtering
   updates rows instantly. */
[data-enhanced][data-motion="full"] .sgm-find__list[data-entering] .sgm-find__option {
  animation: sgm-option-in 200ms var(--sg-ease) calc(var(--sgm-i, 0) * 22ms) backwards;
}
.sgm-find__option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s3);
  min-height: 48px;
  padding: var(--s3) var(--s4);
  cursor: pointer;
  border-top: 1px solid var(--rule);
}
.sgm-find__option:first-child { border-top: 0; }
.sgm-find__option-n {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--copper-deep);
}
.sgm-find__option-copy { display: grid; gap: 1px; min-width: 0; }
.sgm-find__option-title { font-size: var(--t-small); font-weight: 700; color: var(--ink); }
.sgm-find__option-meta {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.sgm-find__option:hover { background: var(--bone); }
.sgm-find__option.is-active { background: var(--bottle); }
.sgm-find__option.is-active .sgm-find__option-title { color: var(--on-deep); }
.sgm-find__option.is-active .sgm-find__option-n { color: var(--sand); }
.sgm-find__option.is-active .sgm-find__option-meta { color: var(--on-deep-soft); }
.sgm-find__empty {
  padding: var(--s4);
  font-size: var(--t-small);
  color: var(--fg-soft);
}

/* The entry folios: two photographic openings into the guide's two big
   questions, held by copper frame rules. Hover follows the approved Dukes
   card language: image darkens gently, the action rule draws centre-out,
   the arrow travels 3px — no lift, no zoom. */
.sgm-folios {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 48em) {
  .sgm-folios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sgm-folio {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  background: var(--bone-raised);
  border: 1px solid var(--rule-strong);
  text-decoration: none;
  color: var(--ink);
}
/* Square mount, per the site's geometry rule: the diagonal notch said
   nothing, so it is gone. The inner frame is copper — the light-content
   metal — held to a strength that survives daylight photography. */
.sgm-folio__media {
  position: relative;
  margin: 0;
  overflow: clip;
}
.sgm-folio__media::before {
  content: "";
  position: absolute;
  inset: 0.625rem;
  border: 1px solid rgba(143, 80, 36, 0.45);
  z-index: 2;
  pointer-events: none;
}
.sgm-folio__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 11, 0) 55%, rgba(10, 12, 11, 0.1) 78%, rgba(10, 12, 11, 0.22) 100%);
  z-index: 1;
  transition: opacity 170ms var(--ease-in-out);
  opacity: 1;
}
.sgm-folio__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 45%;
}
.sgm-folio:hover .sgm-folio__media::after { opacity: 0.85; }
.sgm-folio__copy {
  display: grid;
  gap: var(--s2);
  align-content: start;
  padding: clamp(1rem, 2vw, 1.5rem);
}
.sgm-folio__kicker {
  font-size: var(--t-label);
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.sgm-folio__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.2;
  color: var(--ink);
}
.sgm-folio__line { font-size: var(--t-small); line-height: 1.55; color: var(--fg-soft); max-width: 44ch; }
.sgm-folio__action {
  position: relative;
  width: fit-content;
  margin-top: var(--s2);
  padding-bottom: 3px;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--copper-deep);
}
.sgm-folio__action::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 170ms var(--ease-in-out);
}
.sgm-folio:hover .sgm-folio__action::after,
.sgm-folio:focus-visible .sgm-folio__action::after { transform: scaleX(1); }
.sgm-folio:hover { border-color: var(--copper); }
.sgm-folio:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 3px; }

/* -------------------------- The priority compass -------------------------- */
/* At compass widths the three priorities become one instrument: a ruled
   three-segment bar with a single travelling bottle thumb. The thumb carries
   an inverted copy of the labels, masked to its own edges, so the active
   wording swaps inside it as it glides — the reference's signature move,
   rebuilt natively. The links beneath remain the real, deep-linkable
   controls; without script the stacked ledger presentation stands. */
@media (min-width: 48em) {
  /* The compass claims the full desk width; the answer recomposes beneath
     it. This overrides the ledger's two-column arrangement on this page
     only, and only while enhanced — the stacked ledger remains the base and
     no-JavaScript presentation. */
  [data-enhanced] .page--sellers-guide .sg-priority { display: grid; grid-template-columns: minmax(0, 1fr); }
  [data-enhanced] .page--sellers-guide .sg-priority__results { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
  [data-enhanced] .sgm-compass {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--rule-strong);
    background: var(--bone-raised);
    isolation: isolate;
  }
  [data-enhanced] .sgm-compass .sg-priority__choice {
    position: relative;
    display: grid;
    grid-template-columns: 100%;
    align-content: center;
    min-width: 0;
    min-height: 76px;
    margin: 0;
    padding: var(--s4) var(--s5);
    border: 0;
    background: none;
    text-align: center;
    white-space: normal;
  }
  [data-enhanced] .sgm-compass .sg-priority__choice + .sg-priority__choice { border-left: 1px solid var(--rule); }
  [data-enhanced] .sgm-compass .sg-priority__choice-n,
  [data-enhanced] .sgm-compass .sg-priority__choice-arrow,
  [data-enhanced] .sgm-compass .sg-priority__choice-state { display: none; }
  [data-enhanced] .sgm-compass .sg-priority__choice-copy { display: block; width: 100%; min-width: 0; }
  [data-enhanced] .sgm-compass .sg-priority__choice-title {
    display: block;
    width: 100%;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.25;
    color: var(--ink);
    text-wrap: balance;
  }
  [data-enhanced] .sgm-compass .sg-priority__choice.is-active { background: none; }
  /* While the thumb is placed, it paints the active state; the link's own
     active colours stand down so the glide reads cleanly. */
  [data-enhanced] .sgm-compass.has-thumb .sg-priority__choice.is-active .sg-priority__choice-title { color: var(--ink); }
  [data-enhanced] .sgm-compass .sg-priority__choice:focus-visible {
    outline: 2px solid var(--copper-deep);
    outline-offset: -4px;
  }
}
.sgm-compass__thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  background: var(--bottle);
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
[data-enhanced][data-motion="full"] .sgm-compass__thumb {
  /* --sg-state is a DURATION token (240ms), so putting it in the easing slot
     made this read "320ms duration, 240ms delay" — the compass thumb lagged a
     quarter second before moving. Duration and easing, in that order. */
  transition: transform var(--sg-state) var(--sg-ease);
}
.sgm-compass__thumb-track {
  position: absolute;
  inset: 0 auto 0 0;
  display: grid;
  grid-auto-flow: column;
  height: 100%;
}
[data-enhanced][data-motion="full"] .sgm-compass__thumb-track {
  /* --sg-state is a DURATION token (240ms), so putting it in the easing slot
     made this read "320ms duration, 240ms delay" — the compass thumb lagged a
     quarter second before moving. Duration and easing, in that order. */
  transition: transform var(--sg-state) var(--sg-ease);
}
/* The instrument leads and the answer follows: the result panel waits 140ms
   so the thumb's glide is visibly the cause of the recomposition. */
[data-enhanced][data-motion="full"] .page--sellers-guide .sg-priority__result[data-active] {
  animation-delay: 140ms;
  animation-fill-mode: backwards;
}
.sgm-compass__thumb-cell {
  display: grid;
  grid-template-columns: 100%;
  align-content: center;
  padding: var(--s4) var(--s5);
  text-align: center;
}
.sgm-compass__thumb-title {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.25;
  color: var(--on-deep);
  text-wrap: balance;
}
.sgm-compass__thumb-state { display: none; }

/* ----------------------- The route scene additions ------------------------ */
.sgm-routes__lens {
  margin: 0 0 var(--s4);
  font-size: var(--t-label);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.sgm-routes__stage { position: relative; }
.sgm-routes__spine { display: none; }
@media (min-width: 62em) {
  .sgm-routes__stage { column-gap: clamp(3.5rem, 6vw, 5.5rem); }
  .sgm-routes__spine {
    display: block;
    position: absolute;
    top: -1rem;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(2.5rem, 4vw, 3.5rem);
    /* A replaced SVG resolves height:auto from its intrinsic ratio and the
       fork dangled at ~160px; the split must run the full comparison. */
    height: calc(100% + 2rem);
    pointer-events: none;
  }
  /* Armed-before-hidden: the line hides only after the controller arms the
     scene for its draw, so a script failure can never lose the spine. */
  .sgm-routes__spine-line {
    stroke: var(--copper);
    stroke-width: 1.5;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    vector-effect: non-scaling-stroke;
  }
  [data-enhanced][data-motion="full"] [data-sgm-routes][data-sgm-armed]:not(.is-in) .sgm-routes__spine-line {
    stroke-dashoffset: 100;
  }
  [data-enhanced][data-motion="full"] [data-sgm-routes][data-sgm-armed].is-in .sgm-routes__spine-line {
    animation: sgm-draw 900ms var(--sg-draw) 150ms both;
  }
}
/* Priority emphasis: the compass lens quietly raises the facts it most
   affects — matched emphasis on both cards, never a winner. The inset is
   reserved permanently so nothing reflows: only ground and the copper bar
   arrive, and the text never moves. */
.sg-route__fact {
  padding-left: var(--s4);
  padding-right: var(--s3);
}
.sg-route__fact.is-lead {
  background: rgba(107, 70, 32, 0.08);
  box-shadow: inset 3px 0 0 var(--copper);
}
[data-enhanced][data-motion="full"] .sg-route__fact {
  transition: background-color 260ms var(--sg-state), box-shadow 260ms var(--sg-state);
}

/* ------------------------ The nine decision poses ------------------------- */
/* Each decision chapter reveals in its own pose as the reader reaches it.
   Armed-before-hidden: the hidden state applies only once the controller has
   armed the pose for observation, so a script failure can never strand a
   chapter invisible. */
[data-enhanced][data-motion="full"] .sgm-pose[data-sgm-armed] {
  opacity: 0;
  transform: translateY(16px);
}
[data-enhanced][data-motion="full"] .sgm-pose[data-sgm-armed].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--sg-ease), transform 520ms var(--sg-ease);
}
[data-motion="static"] .sgm-pose { opacity: 1 !important; transform: none !important; }
/* The three phases are three grounds of the same paper — one step darker per
   phase, a real progress state, and one vocabulary only. */
.sgm-phase--2 .gx__stage,
.sgm-phase--2 .sgm-device { background: var(--bone); }
.sgm-phase--3 .gx__stage,
.sgm-phase--3 .sgm-device { background: var(--bone-sunk); }

/* The chapter devices: copper line-work objects that typeset each decision's
   own facts, docked to their stage card as its appendix ledger — same edge,
   same ground, same inset — never orphaned on the band. All decorative:
   the checklists beside them carry the truth. */
.sgm-pose { display: grid; }
.sgm-device {
  margin: -1px 0 0;
  padding: var(--s5) clamp(1.25rem, 3vw, 2rem);
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-top: 0;
}
.sgm-device__kicker {
  margin: 0 0 var(--s3);
  font-size: var(--t-label);
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.sgm-device__line {
  stroke: var(--copper);
  stroke-width: 1.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}
[data-enhanced][data-motion="full"] .sgm-pose[data-sgm-armed]:not(.is-in) .sgm-device__line {
  stroke-dashoffset: 100;
}
/* Route split */
.sgm-device--split { position: relative; }
.sgm-device--split svg { display: block; width: min(20rem, 100%); height: 72px; }
.sgm-device__tag {
  position: absolute;
  left: calc(min(20rem, 100%) * 0.66);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.sgm-device__tag--up { top: 0; }
.sgm-device__tag--down { bottom: 0; }
/* Clearance ledger */
.sgm-device--ledger ul { list-style: none; margin: 0; padding: 0; display: grid; }
.sgm-device--ledger li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-top: 1px solid var(--rule);
}
.sgm-device--ledger span { font-size: var(--t-small); font-weight: 700; color: var(--ink); white-space: nowrap; }
.sgm-device--ledger i {
  display: block;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--copper) 0 6px, transparent 6px 12px);
  align-self: center;
}
/* Document stack */
.sgm-device--stack { display: grid; }
.sgm-device__sheet {
  display: block;
  width: min(24rem, 100%);
  padding: var(--s3) var(--s4);
  background: var(--bone);
  border: 1px solid var(--rule-strong);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.sgm-device__sheet + .sgm-device__sheet { margin-top: -1px; margin-left: clamp(0.75rem, 2vw, 1.25rem); }
/* Offer anatomy */
.sgm-device--anatomy .sgm-device__cross {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(22rem, 100%);
  border: 1px solid var(--rule-strong);
  background: var(--bone);
}
.sgm-device--anatomy .sgm-device__cross span {
  padding: var(--s4);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--ink);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.sgm-device--anatomy .sgm-device__cross span:nth-child(-n + 2) { border-top: 0; }
.sgm-device--anatomy .sgm-device__cross span:nth-child(odd) { border-left: 0; }
/* Exchange timeline */
.sgm-device--timeline svg { display: block; width: 100%; height: 20px; }
.sgm-device--timeline ol {
  list-style: none;
  margin: var(--s2) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3);
}
.sgm-device--timeline li {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-soft);
  line-height: 1.45;
}
.sgm-device--timeline strong { color: var(--copper-deep); }
@media (max-width: 47.99em) {
  .sgm-device--timeline ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Tenure folio, conveyancer handover and viewing walkthrough reuse the sheet
   and timeline vocabularies so all nine chapters carry a distinct pose in
   one visual language. */
.sgm-device--tenure .sgm-device__tabs { display: grid; }
.sgm-device--handover svg,
.sgm-device--walkthrough svg { display: block; width: 100%; height: 20px; }
.sgm-device--handover ol,
.sgm-device--walkthrough ol {
  list-style: none;
  margin: var(--s2) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
}
.sgm-device--handover li,
.sgm-device--walkthrough li {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-soft);
  line-height: 1.45;
}
.sgm-device--handover strong { color: var(--copper-deep); }

/* --------------- Chapter choreography inside the guide band --------------- */
/* The nine poses live inside the legacy .bguide shell, whose kill-switch
   (`.bguide * { animation: none !important }`) protects the old guide from
   inherited motion — and silently swallowed every device draw, sheet
   cascade and quote rise. These page-scoped, motion-gated re-assertions
   restore exactly the intended choreography. They can never leak into
   reduced/static modes: data-motion="full" is absent there, so no selector
   below matches at all. Timing tells cause and effect: the pose lands, the
   line draws out of it, and the labels the line delivers arrive as it
   reaches them. */
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device__line {
  animation: sgm-draw 800ms var(--sg-draw) 250ms both !important;
}
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device__sheet {
  animation: sgm-rise-soft 420ms var(--sg-ease) 250ms both !important;
}
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device__sheet:nth-child(2) { animation-delay: 340ms !important; }
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device__sheet:nth-child(3) { animation-delay: 430ms !important; }
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device__sheet:nth-child(4) { animation-delay: 520ms !important; }
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device__tag {
  animation: sgm-rise-soft 300ms var(--sg-ease) 700ms both !important;
}
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device__tag--down { animation-delay: 770ms !important; }
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device--timeline li,
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device--handover li,
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device--walkthrough li {
  animation: sgm-rise-soft 300ms var(--sg-ease) both !important;
}
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device--timeline li:nth-child(1) { animation-delay: 350ms !important; }
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device--timeline li:nth-child(2) { animation-delay: 500ms !important; }
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device--timeline li:nth-child(3) { animation-delay: 650ms !important; }
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device--timeline li:nth-child(4) { animation-delay: 800ms !important; }
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device--handover li:nth-child(1),
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device--walkthrough li:nth-child(1) { animation-delay: 350ms !important; }
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device--handover li:nth-child(2),
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device--walkthrough li:nth-child(2) { animation-delay: 530ms !important; }
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device--handover li:nth-child(3),
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-pose[data-sgm-armed].is-in .sgm-device--walkthrough li:nth-child(3) { animation-delay: 710ms !important; }
[data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-why__quote.is-open {
  animation: sgm-rise-soft 320ms var(--sg-ease) 80ms both !important;
}
@media (hover: hover) {
  [data-enhanced][data-motion="full"] .page--sellers-guide .bguide .sgm-why__face:hover {
    transform: scale(1.12) !important;
  }
}

/* ---------------------------- Why Dukes ----------------------------------- */
/* The proof chapter: a bottle-deep plate whose central statement is composed
   from the published review themes, with reviewer faces that open their own
   source-linked words. All three quotations are complete in the DOM. */
.sgm-why {
  margin: clamp(2.5rem, 5vw, 4rem) 0;
  padding: clamp(2rem, 4.5vw, 3.75rem) clamp(1.5rem, 3.5vw, 3rem);
  background: linear-gradient(170deg, var(--bottle) 0%, var(--bottle-deep) 100%);
  color: var(--on-deep);
}
/* At desk widths the chapter composes in two columns — statement and faces
   on the left, the source-linked quotation stage on the right — so the dark
   plate carries no dead half. DOM order, no-JS and print are untouched. */
@media (min-width: 62em) {
  .sgm-why {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .sgm-why__head,
  .sgm-why__statement,
  .sgm-why__themes,
  .sgm-why__scope { grid-column: 1; }
  .sgm-why__quotes,
  .sgm-why__evidence { grid-column: 2; }
  .sgm-why__quotes { grid-row: 1 / 4; }
}
.sgm-why__head { max-width: 62ch; }
.sgm-why__kicker {
  margin: 0 0 var(--s3);
  font-size: var(--t-label);
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
}
.sgm-why__title {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.12;
  color: var(--on-deep);
  max-width: 22ch;
}
.sgm-why__statement {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.3vw, 2rem);
  line-height: 1.5;
  color: var(--on-deep);
  max-width: 34ch;
}
.sgm-why__face {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 0.35rem;
  padding: 0;
  border: 2px solid var(--sand);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bottle-deep);
  cursor: pointer;
  vertical-align: middle;
  transition: transform 170ms var(--sg-ease), border-color 170ms var(--sg-ease);
}
.sgm-why__face img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
  .sgm-why__face:hover { transform: scale(1.12); border-color: var(--on-deep); }
}
.sgm-why__face:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
.sgm-why__face[aria-expanded="true"] { border-color: var(--copper); }
.sgm-why__themes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) 0;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  padding: 0;
}
.sgm-why__theme {
  position: relative;
  padding: 0 var(--s4);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-deep-soft);
  line-height: 1.6;
}
.sgm-why__theme:first-child { padding-left: 0; }
.sgm-why__theme + .sgm-why__theme { border-left: 1px solid rgba(197, 166, 106, 0.4); }
.sgm-why__quotes { list-style: none; margin: 0 0 clamp(1.25rem, 3vw, 2rem); padding: 0; display: grid; gap: var(--s4); }
/* The collapsed stage keeps a stable height so a quote swap never reflows
   the chapter: cause (the face), then effect (the words), on a still stage. */
[data-enhanced] .sgm-why__quotes.is-collapsed { min-height: 12rem; align-content: start; }
.sgm-why__quote {
  border: 1px solid var(--rule-on-deep);
  background: rgba(246, 244, 239, 0.06);
  padding: clamp(1rem, 2vw, 1.5rem);
}
[data-enhanced] .sgm-why__quotes.is-collapsed .sgm-why__quote:not(.is-open) { display: none; }
[data-enhanced][data-motion="full"] .sgm-why__quote.is-open { animation: sgm-rise-soft 320ms var(--sg-ease) backwards; }
.sgm-why__quote-text { margin: 0 0 var(--s3); }
.sgm-why__quote-text p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.45;
  color: var(--on-deep);
  max-width: 52ch;
}
.sgm-why__quote-text p::before { content: "\201C"; }
.sgm-why__quote-text p::after { content: "\201D"; }
.sgm-why__quote-source {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s4);
  margin: 0;
}
.sgm-why__quote-name { font-size: var(--t-small); font-weight: 700; color: var(--on-deep); }
.sgm-why__quote-meta {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sand);
}
.sgm-why__quote-link,
.sgm-why__evidence-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--sand);
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 170ms var(--ease-in-out);
}
.sgm-why__quote-link:hover,
.sgm-why__evidence-link:hover { color: var(--on-deep); }
.sgm-why__quote-link:focus-visible,
.sgm-why__evidence-link:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.sgm-why__evidence {
  list-style: none;
  margin: 0 0 var(--s4);
  padding: var(--s4) 0 0;
  border-top: 1px solid var(--rule-on-deep);
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
}
.sgm-why__scope { margin: 0; font-size: var(--t-small); line-height: 1.6; color: var(--on-deep-soft); max-width: 62ch; }

/* ------------------- Reduced motion, static and print --------------------- */
@media (prefers-reduced-motion: reduce) {
  .sg-hero__register,
  .sg-hero__title,
  .sg-hero__thesis,
  .sg-hero__compact-index,
  .sg-hero__lede,
  .sg-hero__scope,
  .sg-hero__actions,
  .sgm-instrument,
  .sgm-device__tag,
  .sgm-device--timeline li,
  .sgm-device--handover li,
  .sgm-device--walkthrough li,
  .sg-hero__thesis::after,
  .sgm-ring__dot,
  .sgm-find__option,
  .sgm-device__line,
  .sgm-device__sheet,
  .sgm-routes__spine-line,
  .sgm-why__quote.is-open,
  .sgm-pose { animation: none !important; }
  .sgm-pose { opacity: 1 !important; transform: none !important; }
  .sgm-ring__arc-fill,
  .sgm-ring__dot,
  .sgm-compass__thumb,
  .sgm-compass__thumb-track,
  .sg-route__fact,
  .sgm-why__face { transition: none !important; }
  .sgm-device__line,
  .sgm-routes__spine-line { stroke-dashoffset: 0 !important; }
}
[data-motion="static"] .sgm-ring__arc-fill,
[data-motion="static"] .sgm-compass__thumb,
[data-motion="static"] .sgm-compass__thumb-track,
[data-motion="static"] .sg-route__fact,
[data-motion="static"] .sgm-why__face,
[data-motion="static"] .sgm-folio__action::after,
[data-motion="static"] .sgm-folio__media::after { transition: none !important; }
[data-motion="static"] .sgm-why__face:hover { transform: none !important; }

@media print {
  .sgm-desk,
  .sgm-instrument__stage { display: none !important; }
  .sgm-why {
    background: #fff;
    color: #000;
    padding-inline: 0;
  }
  .sgm-why__title,
  .sgm-why__statement,
  .sgm-why__quote-text p,
  .sgm-why__quote-name { color: #000; }
  .sgm-why__kicker,
  .sgm-why__quote-meta,
  .sgm-why__theme { color: #444; }
  .sgm-why__face { display: none; }
  [data-enhanced] .sgm-why__quotes.is-collapsed .sgm-why__quote:not(.is-open) { display: block; }
  .sgm-device__line,
  .sgm-routes__spine-line { stroke-dashoffset: 0 !important; }
}

/* ========================================================================== * /sales/ — "THE SEAM"   13 August 2026
 *
 * A page-wide creative renovation of the direct investor sale route, built
 * to the maximum-creativity handoff. Everything in this section is scoped to
 * [data-page="sales"] or to a .sell-* class that exists on no other route.
 *
 * THE MOTIF. One copper hairline — the seam — stands on the split between
 * the photographic plane and the dossier plane in the hero, then returns at
 * every decision point on the page: the rule under the route dock, the line
 * between the two routes in the comparison, the drawn route through the five
 * journey stages, the gutter of the readiness frame, the rule inside each
 * FAQ row, and finally the enclosure around the closing action. The page
 * opens and closes on the same object.
 *
 * SUPERSEDES the earlier restrained brief for this route only. The comments
 * above (11-12 August) that prohibit lift, depth, masks, image movement and
 * scroll response were written under that brief; where a rule below conflicts
 * with one of them, the rule below is the current intent. The FACTUAL,
 * semantic and accessibility commitments in those comments are untouched and
 * remain binding: no disclosure is gated behind hover, scroll, an open panel
 * or a completed animation anywhere in this section.
 *
 * MOTION CONTRACT
 *   - Entrances run ONCE, through the shared reveal system (is-in).
 *   - prefers-reduced-motion and [data-motion="static"] land every element in
 *     its final composed position with all colour and focus feedback intact.
 *     Reduced motion is an alternate art direction here, not a broken page.
 *   - Nothing scroll-jacks. Scroll-linked work is limited to two cheap
 *     transform reads behind rAF (see sales-page.mjs).
 *   - Every hover state has a keyboard equal and a touch-safe press state.
 * ========================================================================== */

[data-page="sales"] {
  /* The seam, and the page's motion vocabulary, in one place. */
  --seam: var(--copper);
  --seam-soft: rgba(107, 70, 32, 0.34);
  --seam-deep: var(--copper-deep);
  --seam-on-deep: var(--sand);
  --seam-on-deep-soft: rgba(197, 166, 106, 0.34);

  --sell-arrive: cubic-bezier(0.16, 1, 0.3, 1);   /* paper and panels: weighted */
  --sell-state: cubic-bezier(0.22, 1, 0.36, 1);   /* interface states: crisp */
  --sell-draw: cubic-bezier(0.65, 0, 0.35, 1);    /* lines drawing: even */
  --sell-step: 55ms;                              /* stagger unit */
  --sell-dock-h: 3.5rem;
}

/* The dock is sticky under the sticky site header, so in-page anchor jumps
   need to clear BOTH or a chapter heading lands underneath them. */
@media (min-width: 62em) {
  html:has([data-page="sales"]) { scroll-padding-top: calc(var(--head-h) + var(--sell-dock-h) + 1.25rem); }
}

/* ------------------------------------------------------------------ *
 * The seam itself. One element, one job: a copper hairline that draws
 * itself once from a chosen origin. Direction and axis are set by the
 * component that uses it.
 * ------------------------------------------------------------------ */
.sell-seam {
  display: block;
  background: var(--seam);
  transform-origin: top center;
}

/* ==================================================================== *
 * 1. THE HERO — asymmetric split, threshold seam, glass dossier,
 *    line-by-line type choreography.
 *
 * References 1 (split hero: asymmetric narrative/visual balance),
 * 2 (containment and divider discipline), 7 (translucent trust layer with
 * proof beside the action) and 8 (staged editorial reveal) all land here.
 * ==================================================================== */

/* Containment. The hero previously ran to 625px at 1366x768, leaving 20px of
   the next section above the fold, and to 680px at 1024x768, leaving none at
   all — the page read as if it ended at the hero. Measured 13 August 2026.
   The rhythm is tightened rather than the content truncated, and the sill
   band below now carries the overflow of attention: at every desktop height
   the reader can see the page continue. */
@media (min-width: 62em) {
  .sell-hero { min-height: clamp(23rem, 60vh, 33rem); max-height: 44rem; }
  .sell-hero__inner {
    padding-top: clamp(1.75rem, 3.4vw, 2.75rem);
    padding-bottom: clamp(1.75rem, 3.2vw, 2.5rem);
    gap: clamp(2rem, 4vw, 4rem);
  }
  /* 1.15/0.85, not 1.05/0.95: the reference's asymmetry is the point. The
     editorial column leads, the dossier answers. */
  .sell-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .sell-hero__rail { gap: var(--s3); }
}

@media (min-width: 62em) and (max-width: 85em) {
  /* Laptop band. The frame is narrowest here relative to its two panels, so
     the dossier's cells wrap to more lines and it, not the copy, sets the
     height. It tightens first rather than the hero growing taller: at 1024
     the hero measured 568px, three pixels past the budget that keeps 80px of
     the sill visible on a 768px-tall window. */
  .sell-hero { min-height: clamp(22rem, 56vh, 30rem); }
  /* Scoped to the page so this outranks the wider (min-width: 62em) block
     further down, which would otherwise win on source order. */
  [data-page="sales"] .sell-trust__cell { padding: 0.28rem 0; }
  [data-page="sales"] .sell-hero__actions { gap: var(--s2); }
}

/* Stacked hero. Below the two-column breakpoint the hero carries both panels
   in one column and is necessarily taller than the viewport; the job here is
   to keep it as close to the previously measured 1043px at 768px as the new
   composition allows. Measured 13 August 2026: 1058px before this block,
   1035px after — better than the figure it inherited. */
@media (max-width: 61.99em) {
  .sell-trust { gap: var(--s3); }
  .sell-trust__cell { padding: 0.4rem 0; }
  .sell-hero__h1 { gap: 0; }
}

@media (min-width: 62em) {
}


/* --- Type choreography (reference 8) ---------------------------------- *
 * Line planes, not characters. Each line rises out of its own mask in
 * reading order, 70ms apart, once. The text is never split per character:
 * that would hand a screen reader single letters and break selection,
 * search and translation. */
.sell-hero__h1 { display: grid; gap: 0.04em; }

.sell-hero__line {
  display: block;
  overflow: hidden;
  /* The mask has to clear the descenders of "property" or the mask crops
     the letterform. */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.sell-hero__line-in { display: block; }

[data-enhanced] .sell-hero__rail [data-line] { opacity: 0; }
[data-enhanced] .sell-hero__rail [data-line] > .sell-hero__line-in { transform: translateY(105%); }
[data-enhanced] .sell-hero__rail:not(.is-in) [data-line]:not(.sell-hero__line) { transform: translateY(9px); }

[data-enhanced] .sell-hero__rail.is-in [data-line] {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--sell-arrive), transform 520ms var(--sell-arrive);
  transition-delay: calc(var(--line-delay, 0ms) + 60ms);
}
[data-enhanced] .sell-hero__rail.is-in [data-line] > .sell-hero__line-in {
  transform: none;
  transition: transform 640ms var(--sell-arrive);
  transition-delay: calc(var(--line-delay, 0ms) + 60ms);
}

.sell-hero__rail [data-line="0"] { --line-delay: 0ms; }
.sell-hero__rail [data-line="1"] { --line-delay: 70ms; }
.sell-hero__rail [data-line="2"] { --line-delay: 140ms; }
.sell-hero__rail [data-line="3"] { --line-delay: 240ms; }
.sell-hero__rail [data-line="4"] { --line-delay: 310ms; }
.sell-hero__rail [data-line="5"] { --line-delay: 380ms; }
.sell-hero__rail [data-line="6"] { --line-delay: 450ms; }

/* --- The dossier (references 5 and 7) --------------------------------- *
 * A brass-edged property brief on warm glass, not a metrics widget. Its
 * top edge draws itself as the panel lands, which is where the ledger
 * materiality begins. */
.sell-trust { position: relative; overflow: hidden; }

.sell-trust__edge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--sand);
  transform-origin: left center;
}
[data-enhanced] .sell-trust__edge { transform: scaleX(0); }
[data-enhanced] .sell-trust.is-in .sell-trust__edge {
  transform: scaleX(1);
  transition: transform 620ms var(--sell-draw);
  transition-delay: 200ms;
}

/* The figure and its qualification are one block with one ground. They can
   never be seen, hovered, revealed or read apart: the figure alone is not a
   true statement about this route. */
.sell-trust__stat-block {
  display: grid;
  gap: var(--s2);
  /* Tight on purpose: giving the block its own generous padding cost the
     stacked hero 26px at 390px, where the hero is already taller than the
     viewport. The rule beneath it does the separating work instead. */
  padding: var(--s1) 0 var(--s3);
  border-bottom: 1px solid var(--rule-on-deep);
}
.sell-trust__stat-block .sell-trust__stat,
.sell-trust__stat-block .sell-trust__qualifier { margin: 0; }

.sell-trust__qualifier {
  border-left: 2px solid var(--sand);
  padding-left: var(--s3);
}

@media (min-width: 62em) {
  /* The dossier overlaps the seam by a hair, so the two planes read as
     connected rather than as two columns that happen to sit side by side. */
  .sell-trust { margin-left: -0.75rem; }

  /* CONTAINMENT, measured 13 August 2026. The dossier was 567px tall and it,
     not the copy, set the hero's height — 651px, which left the next section
     5px ABOVE the bottom of a 1366x768 window. Every number below is a
     tightening of rhythm, not a removal: no statement, qualification or cell
     has been dropped. Target: the whole hero inside 566px at 768px of
     viewport, so at least 80px of the sill below it is always visible.
     Re-measure with scratchpad/PRE-SALES-DIRECT-2026-08-13/m.mjs before
     changing any of it. */
  .sell-trust { padding: clamp(1.1rem, 1.8vw, 1.5rem); gap: var(--s3); }
  .sell-trust__figure { font-size: clamp(1.85rem, 1.2rem + 1.35vw, 2.3rem); }
  .sell-trust__stat-block { padding: var(--s2) 0 var(--s3); gap: var(--s2); }
  .sell-trust__grid { gap: var(--s2); }
  .sell-trust__cell { padding: 0.35rem 0; }

  /* 38rem, not 34rem: at 34rem the two hero actions wrapped onto two rows,
     costing 62px of hero height for no editorial gain. The measure is still
     well inside a comfortable line length because the body and caveat carry
     their own ch caps. */
  .sell-hero__rail { max-width: 38rem; }
}

/* ==================================================================== *
 * 1b. THE SILL — the three truths, physically attached to the hero.
 * ==================================================================== */

.sell-sill {
  max-width: none;
  background: var(--bottle-deep);
  border-top: 1px solid rgba(197, 166, 106, 0.28);
  padding: clamp(1.75rem, 3vw, 2.75rem) var(--inset);
  color: var(--on-deep);
}

.sell-sill__rail {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--max);
  display: grid;
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
}

@media (min-width: 56em) {
  .sell-sill__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sell-sill__item {
  min-width: 0;
  position: relative;
  padding-left: clamp(2.25rem, 3vw, 2.75rem);
}

.sell-sill__mark {
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--sand);
}

/* The mark's own hairline, drawn once. The seam again, at truth scale. */
.sell-sill__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2rem;
  bottom: 0.2rem;
  width: 1px;
  background: var(--seam-on-deep-soft);
  transform-origin: top center;
}
[data-enhanced] .sell-sill__item::before { transform: scaleY(0); }
[data-enhanced] .sell-sill__item.is-in::before {
  transform: scaleY(1);
  transition: transform 520ms var(--sell-draw);
  transition-delay: calc(var(--stage-index, 0) * var(--sell-step) + 160ms);
}

.sell-sill__title {
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--on-deep);
}

.sell-sill__detail {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--on-deep-soft);
  max-width: 38ch;
}

[data-enhanced] .sell-sill__item { opacity: 0; transform: translateY(10px); }
[data-enhanced] .sell-sill__item.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--sell-arrive), transform 420ms var(--sell-arrive);
  transition-delay: calc(var(--stage-index, 0) * var(--sell-step));
}

/* ==================================================================== *
 * 1c. THE ROUTE DOCK — chapter navigator + persistent action.
 *
 * References 3 and 9 (keyboard-navigable choice rows, clear active state,
 * honest ARIA) merged with 4 and 10 (one continuous enclosure holding a
 * navigation surface and its primary action in a single aligned rhythm).
 * They are one component because they are one problem: the reader needs to
 * know where they are and be able to act, in one place, without either
 * covering the page.
 * ==================================================================== */

.sell-dock {
  max-width: none;
  background: var(--bone-raised);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--seam-soft);
  padding: 0 var(--inset);
}

@media (min-width: 62em) {
  .sell-dock {
    position: sticky;
    top: var(--head-h);
    z-index: 30;
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .sell-dock {
      background: rgba(250, 247, 240, 0.9);
      backdrop-filter: blur(14px) saturate(1.1);
      -webkit-backdrop-filter: blur(14px) saturate(1.1);
    }
  }
}

.sell-dock__inner {
  max-width: var(--max);
  margin: 0 auto;
  min-height: var(--sell-dock-h);
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
}

.sell-dock__eyebrow {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--seam-deep);
  display: none;
}

@media (min-width: 80em) { .sell-dock__eyebrow { display: block; } }

.sell-dock__chapters {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: clamp(0.25rem, 1vw, 0.75rem);
  /* Below the sticky breakpoint the strip scrolls sideways rather than
     wrapping into a three-line block that would push the page down. The
     scroll is native and horizontal only, inside this element. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sell-dock__chapters::-webkit-scrollbar { display: none; }

.sell-dock__chapter { flex: 0 0 auto; }

.sell-dock__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* 44px minimum touch target. */
  min-height: 2.75rem;
  padding: 0.4rem 0.6rem;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: var(--t-small);
  font-weight: 600;
  white-space: nowrap;
  transition: color 170ms var(--sell-state), background-color 170ms var(--sell-state);
}

.sell-dock__index {
  font-family: var(--font-display);
  font-size: 0.8em;
  color: var(--seam-soft);
  transition: color 170ms var(--sell-state);
}

/* The travelling marker. It is the seam, lying flat under the active
   chapter, and it slides between rows rather than blinking on and off. */
.sell-dock__link::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0;
  height: 2px;
  background: var(--seam);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms var(--sell-state);
}

.sell-dock__link[aria-current="true"] { color: var(--bottle); }
.sell-dock__link[aria-current="true"] .sell-dock__index { color: var(--seam-deep); }
.sell-dock__link[aria-current="true"]::after { transform: scaleX(1); }

@media (hover: hover) and (pointer: fine) {
  .sell-dock__link:hover { color: var(--bottle); background: rgba(107, 70, 32, 0.06); }
  .sell-dock__link:hover .sell-dock__index { color: var(--seam-deep); }
}
.sell-dock__link:active { color: var(--bottle); background: rgba(107, 70, 32, 0.12); }
.sell-dock__link:focus-visible {
  outline: 3px solid var(--seam-deep);
  outline-offset: -2px;
  color: var(--bottle);
  transition: none;
}

/* The action, inside the same enclosure and aligned to the same baseline —
   reference 4's single-enclosure geometry, with the chat furniture stripped
   and no input invented for a page that sends nothing. */
.sell-dock__action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.5rem clamp(0.75rem, 1.6vw, 1.1rem);
  background: var(--bottle);
  color: var(--on-deep);
  border: 1px solid var(--bottle);
  border-radius: 2px;
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 170ms var(--sell-state), border-color 170ms var(--sell-state),
    color 170ms var(--sell-state);
}
.sell-dock__arrow { transition: transform 170ms var(--sell-state); }

@media (hover: hover) and (pointer: fine) {
  .sell-dock__action:hover { background: #242d27; border-color: var(--sand); }
  .sell-dock__action:hover .sell-dock__arrow { transform: translateX(3px); }
}
.sell-dock__action:active { background: #2b362f; }
.sell-dock__action:focus-visible {
  outline: 3px solid var(--seam-deep);
  outline-offset: 2px;
  transition: none;
}

/* Below the sticky breakpoint the action drops to its own full-width row so
   its label is never squeezed against a scrolling chapter strip. */
@media (max-width: 61.99em) {
  .sell-dock__inner {
    flex-wrap: wrap;
    padding: 0.6rem 0;
    gap: 0.5rem;
  }
  .sell-dock__chapters { width: 100%; }
  .sell-dock__action { width: 100%; justify-content: center; }
}

[data-enhanced] .sell-dock { opacity: 0; transform: translateY(8px); }
[data-enhanced] .sell-dock.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 380ms var(--sell-arrive), transform 380ms var(--sell-arrive);
  transition-delay: 320ms;
}

/* ==================================================================== *
 * 3. THE COMPARISON INSTRUMENT
 *
 * The matrix keeps every word and both routes at equal weight. What is new
 * is the seam standing between them and a copper indicator that travels
 * criterion by criterion. EMPHASIS IS ADDITIVE ONLY: the active row gains a
 * ground and an edge, and no row ever loses contrast, dims, blurs or
 * collapses. Neither route is ever made to lose.
 * ==================================================================== */

.sell-matrix { position: relative; }

.sell-matrix__seam {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(197, 166, 106, 0) 0%,
    rgba(197, 166, 106, 0.4) 12%,
    rgba(197, 166, 106, 0.4) 88%,
    rgba(197, 166, 106, 0) 100%
  );
  transform-origin: top center;
  pointer-events: none;
}

.sell-matrix__criterion { position: relative; }

.sell-matrix__criterion-mark {
  position: absolute;
  /* Inside the criterion cell's own padding, not outside it: at
     calc(-1 * ...) the mark landed beyond the matrix's left border and was
     invisible. Measured 13 August 2026. */
  left: -0.65rem;
  top: 0.45em;
  width: 2px;
  height: 1.1em;
  background: var(--sand);
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: center;
  transition: opacity 200ms var(--sell-state), transform 200ms var(--sell-state);
}

@media (min-width: 56em) {
  .sell-matrix__seam { display: block; }
  /* The boundary between the open-market and direct columns. The matrix grid
     is 0.9fr / 1fr / 1fr with no gap, so that edge sits at (0.9 + 1) / 2.9 of
     the width — 65.517%, not the 50% a three-equal-column assumption gives.
     Measured against the rendered grid on 13 August 2026; if the track sizes
     above ever change, this number changes with them. */
  .sell-matrix__seam { left: 65.517%; }
}

@media (min-width: 62em) {
  .sell-matrix__row {
    /* display:contents at this width, so the emphasis has to be painted by
       the cells themselves rather than by the row box. */
    transition: none;
  }

  .sell-matrix__row.is-lit .sell-matrix__criterion-mark { opacity: 1; transform: scaleY(1); }
  .sell-matrix__row.is-lit .sell-matrix__criterion { color: var(--sand); }
  .sell-matrix__row.is-lit .sell-matrix__pill { border-color: rgba(197, 166, 106, 0.5); }
  .sell-matrix__row.is-lit .sell-matrix__cell { background: rgba(197, 166, 106, 0.055); }

  .sell-matrix__criterion,
  .sell-matrix__cell {
    transition: background-color 260ms var(--sell-state), color 260ms var(--sell-state);
  }
  .sell-matrix__pill { transition: border-color 260ms var(--sell-state), color 260ms var(--sell-state); }
}

[data-enhanced] .sell-matrix__seam { transform: scaleY(0); }
[data-enhanced] .sell-matrix__seam.is-in {
  transform: scaleY(1);
  transition: transform 720ms var(--sell-draw);
  transition-delay: 120ms;
}

/* The rows arrive in reading order. Below 62em each row is a real block, so
   it can carry its own entrance; at and above 62em the row is
   display:contents and CANNOT be transformed, so the entrance is suppressed
   there and the cells simply arrive with the section. */
@media (max-width: 61.99em) {
  [data-enhanced] .sell-matrix__row { opacity: 0; transform: translateY(10px); }
  [data-enhanced] .sell-matrix__row.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 380ms var(--sell-arrive), transform 380ms var(--sell-arrive);
    transition-delay: calc(var(--stage-index, 0) * var(--sell-step));
  }
}

/* ==================================================================== *
 * 4. THE JOURNEY — the page's centrepiece, on its own dark field.
 *
 * Reference 5 (framed preview whose state changes) becomes the living
 * dossier: one ledger well on the right, one page of the dossier visible at
 * a time, sliding to meet the stage it belongs to. Reference 3's keyboard
 * mechanics drive the stage rail (Up/Down/Home/End, roving tabindex,
 * honest aria-expanded).
 * ==================================================================== */

.sell-journey {
  max-width: none;
  position: relative;
  background: var(--bottle-deep);
  color: var(--on-deep);
  --rule: var(--rule-on-deep);
  overflow: hidden;
}

.sell-journey > * { max-width: var(--max); margin-inline: auto; }

.sell-journey .band__head { position: relative; z-index: 1; }
.sell-journey .h-section { color: var(--on-deep); }
.sell-journey .lede { color: var(--on-deep-soft); }
.sell-journey__label { color: var(--on-deep); }
.sell-journey__detail { color: var(--on-deep-soft); }
.sell-journey__index { color: var(--sand); }
.sell-journey__control { color: inherit; }

/* The drawn route. The SVG is stretched over the ordered list and its
   viewBox height is normalised with pathLength, so one dash animation draws
   correctly at any content height. */
.sell-route {
  position: absolute;
  display: none;
  pointer-events: none;
  z-index: 0;
}
.sell-route__svg { display: block; width: 2px; height: 100%; overflow: visible; }
.sell-route__line {
  stroke: var(--seam-on-deep-soft);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

@media (min-width: 56em) {
  .sell-route {
    display: block;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
  }
}

[data-enhanced] .sell-route__line { stroke-dashoffset: 100; }
[data-enhanced] .sell-route.is-in .sell-route__line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1100ms var(--sell-draw);
  transition-delay: 140ms;
}

.sell-journey__route { position: relative; }

.sell-journey__stage { border-bottom-color: var(--rule-on-deep); }
.sell-journey__route { border-top-color: var(--rule-on-deep); }

/* --- the ledger well and the living dossier (rail widths only) -------- */
@media (min-width: 56em) {
  /* The well: a full-height framed column so the right-hand side of the
     journey is never an empty margin beside four unselected stages. The
     dossier page then slides WITHIN it to meet the active stage. Decorative
     and drawn as a pseudo-element on the list. */
  [data-journey-rail="on"].sell-journey__route::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 23rem;
    border: 1px solid var(--rule-on-deep);
    border-top: 1px solid var(--seam-on-deep-soft);
    /* Ruled ledger paper. The well is taller than the page of the dossier
       currently open, and an empty framed rectangle beside four unselected
       stages is exactly the dead space this pass exists to remove — so the
       remainder is a surface with its own material rather than a void: faint
       horizontal rules at the dossier's own line rhythm, fading out as they
       fall away from the open page. */
    background:
      repeating-linear-gradient(
        180deg,
        rgba(246, 244, 239, 0.05) 0,
        rgba(246, 244, 239, 0.05) 1px,
        transparent 1px,
        transparent 2rem
      ),
      linear-gradient(180deg, rgba(246, 244, 239, 0.06), rgba(246, 244, 239, 0.015) 62%, rgba(246, 244, 239, 0));
    pointer-events: none;
  }

  [data-journey-rail="on"] .sell-journey__stage { padding-right: 26rem; }

  /* Every dossier page sits at the same origin inside the well and the
     active one is the one that is visible. visibility (not display) so the
     change can actually be animated, and so the hidden pages leave the
     accessibility tree in step with aria-expanded="false". */
  [data-journey-rail="on"] .sell-journey__state {
    position: absolute;
    top: 0;
    right: 0;
    width: 23rem;
    margin-top: 0;
    display: block;
    padding: clamp(1.1rem, 1.6vw, 1.5rem);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 200ms var(--sell-state), transform 260ms var(--sell-arrive),
      visibility 0s linear 260ms;
  }

  [data-journey-rail="on"] .sell-journey__stage.is-active .sell-journey__state {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 260ms var(--sell-state) 60ms, transform 380ms var(--sell-arrive) 60ms,
      visibility 0s linear 0s;
  }

  /* The shared anchor: a copper connector running from the active stage's
     marker across to the well. This is what makes the dossier feel pulled
     toward the stage rather than swapped out behind it. */
  [data-journey-rail="on"] .sell-journey__stage::before {
    z-index: 1;
  }
  [data-journey-rail="on"] .sell-journey__stage .sell-journey__link {
    display: block;
  }
}

/* The dossier page itself, in both layouts. The section moved onto the dark
   field, so the card can no longer keep its cream --bone-raised ground: cream
   labels on a cream panel measured unreadable in the first capture. It takes
   the page's translucent dark-card treatment instead, which is also what lets
   the ledger well show faintly through it. */
.sell-journey__state {
  position: relative;
  background: rgba(246, 244, 239, 0.055);
  border: 1px solid var(--rule-on-deep);
  border-left: 2px solid var(--sand);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sell-journey__state {
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
  }
}

.sell-state__caption {
  margin: 0 0 var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule-on-deep);
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}
.sell-state__caption-index {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--sand);
}
.sell-state__caption-text {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--on-deep);
}

.sell-journey .sell-state__label { color: var(--sand); }
.sell-journey .sell-state__value { color: var(--on-deep); }

/* The dossier's closing rule — the reference's footer strip, carrying the
   one thing this page can state without inventing anything: where the reader
   is in the sequence. */
.sell-state__foot {
  margin: var(--s4) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--rule-on-deep);
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(197, 166, 106, 0.85);
}
.sell-state__foot-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--seam-on-deep-soft);
  transform-origin: right center;
}
[data-enhanced] .sell-journey__stage.is-active .sell-state__foot-rule {
  animation: sellFootRule 520ms var(--sell-draw) 240ms both;
}
@keyframes sellFootRule {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* The stage markers, on the dark field. */
@media (min-width: 56em) {
  .sell-journey__stage::before { background: var(--seam-on-deep-soft); }
  .sell-journey__stage::after {
    background: var(--bottle-deep);
    border-color: var(--seam-on-deep-soft);
  }
  [data-journey-rail="on"] .sell-journey__stage.is-active::after {
    background: var(--sand);
    border-color: var(--sand);
  }
  [data-journey-rail="on"] .sell-journey__stage:not(.is-active) .sell-journey__label {
    color: rgba(244, 238, 227, 0.62);
  }
  [data-journey-rail="on"] .sell-journey__stage.is-active .sell-journey__index { color: var(--sand); }
  [data-journey-rail="on"] .sell-journey__stage.is-active {
    background: linear-gradient(90deg, rgba(197, 166, 106, 0.07), rgba(197, 166, 106, 0));
  }
  [data-journey-rail="on"] .sell-journey__stage {
    transition: background-color 220ms var(--sell-state), background 220ms var(--sell-state);
  }
}

.sell-journey__control:focus-visible {
  outline: 3px solid var(--sand);
  outline-offset: 3px;
  transition: none;
}

/* ==================================================================== *
 * 5 & 7. THE EDITORIAL SCENES — architectural wipe, house grade, foot
 * tint, slow drift, overlapping planes.
 * ==================================================================== */

.sell-scene { position: relative; }

.sell-scene__eyebrow {
  margin: 0 0 var(--s3);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--seam-deep);
}

.sell-scene__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bone-sunk);
  /* The mat: hero-class media gets a paper margin so the photograph reads as
     mounted rather than pasted. Desktop only. */
  padding: 0;
}

@media (min-width: 56em) {
  .sell-scene__media {
    padding: clamp(0.5rem, 0.9vw, 0.875rem);
    background: color-mix(in srgb, var(--bone-sunk) 38%, var(--bone));
  }
}

.sell-scene__frame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sell-scene__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* House content-photograph grade. Applied by CSS, never baked into the
     asset, so one edit re-grades every photograph on the route. */
  filter: brightness(0.96) contrast(1.05) saturate(1.03);
  will-change: transform;
}

/* The foot tint, at homepage-journey strength: the image is seated on the
   page instead of floating on it. Dies well before the middle so it can
   never read as a vignette. */
.sell-scene__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 12, 11, 0) 55%,
    rgba(10, 12, 11, 0.1) 78%,
    rgba(10, 12, 11, 0.22) 100%
  );
}

/* The architectural wipe. The photograph opens from the seam side — the
   assessment scene from the left, the legal scene from the right, so the
   two scenes visibly hand the page across. One run, on entry. */
[data-enhanced] .sell-scene__media .sell-scene__frame { clip-path: inset(0 100% 0 0); }
[data-enhanced] .sell-scene--legal .sell-scene__media .sell-scene__frame { clip-path: inset(0 0 0 100%); }
[data-enhanced] .sell-scene__media.is-in .sell-scene__frame {
  clip-path: inset(0 0 0 0);
  transition: clip-path 880ms var(--sell-draw);
}

[data-enhanced] .sell-scene__copy { opacity: 0; transform: translateY(12px); }
[data-enhanced] .sell-scene__copy.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 480ms var(--sell-arrive), transform 480ms var(--sell-arrive);
  transition-delay: 160ms;
}

/* The slow crop drift. --sell-drift is written by sales-page.mjs from the
   scene's own progress through the viewport, behind a single rAF, and only
   for fine pointers at full motion. The scale headroom is what the drift
   travels inside, so no edge is ever exposed. */
.sell-scene__img { transform: scale(1.045) translate3d(0, var(--sell-drift, 0px), 0); }

/* Overlapping planes. The copy card steps over the seam side of the
   photograph, which is what makes the pair read as one composed scene. */
@media (min-width: 68em) {
  .sell-scene { align-items: center; }
  .sell-scene--assessment .sell-scene__copy {
    position: relative;
    z-index: 1;
    margin-right: -3.5rem;
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
    background: var(--bone-raised);
    border-top: 2px solid var(--seam);
  }
  .sell-scene--legal .sell-scene__copy {
    position: relative;
    z-index: 1;
    margin-left: -3.5rem;
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
    background: var(--bone);
    border-top: 2px solid var(--seam);
  }
}

/* ==================================================================== *
 * 6. THE READINESS FRAME (reference 6)
 *
 * One composition with four spatial roles, not four equal tiles. Nothing
 * here is a completed check: every marker is an open copper ring and every
 * card is labelled "Required".
 * ==================================================================== */

.sell-ready__list {
  max-width: 72rem;
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
}

@media (min-width: 62em) {
  .sell-ready__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(7.5rem, auto);
  }
  /* The property itself leads: full height on the left. */
  .sell-ready__card--1 { grid-column: 1 / 4; grid-row: 1 / 3; }
  /* Title and investor are the paired middle. */
  .sell-ready__card--2 { grid-column: 4 / 7; grid-row: 1 / 2; }
  .sell-ready__card--3 { grid-column: 4 / 7; grid-row: 2 / 3; }
  /* The legal adviser closes the frame across the base — and hands the page
     to the next scene, where the owner's solicitor takes over. */
  .sell-ready__card--4 { grid-column: 1 / 7; grid-row: 3 / 4; }

  /* The lead card takes a different internal shape as well as a different
     footprint: badge over text, larger label, its own breathing room. Four
     identical interiors in four different boxes is still four equal tiles. */
  .sell-ready__card--1 {
    grid-template-columns: minmax(0, 1fr);
    /* space-between, not start: the lead card is two rows tall and its
       content is short, so aligning to the top left 140px of empty card
       under it. The status label now sits on the card's own base line, which
       is also what gives the composition its fourth spatial role. */
    align-content: space-between;
    gap: var(--s4);
    padding: clamp(1.5rem, 2.2vw, 2rem);
  }
  .sell-ready__card--1 .sell-ready__label { font-size: 1.15rem; }
  .sell-ready__card--1 .sell-ready__state { grid-column: 1; justify-self: start; }
  .sell-ready__card--4 { align-items: center; }
}

/* The card gains a third track for its status label. */
.sell-ready__card {
  position: relative;
  overflow: hidden;
  grid-template-columns: auto minmax(0, 1fr) auto;
}


/* An OPEN ring. Not a tick, not a fill, not a progress arc: none of these
   four conditions is satisfied and the composition must never suggest one
   is. */
.sell-ready__badge {
  border: 1px solid rgba(197, 166, 106, 0.55);
  background: transparent;
  transition: border-color 180ms var(--sell-state), background-color 180ms var(--sell-state);
}

.sell-ready__state {
  margin-left: auto;
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(197, 166, 106, 0.8);
  padding-top: 0.15rem;
}
@media (min-width: 62em) {
  .sell-ready__card--1 .sell-ready__state { margin-left: 0; }
}


/* ==================================================================== *
 * 8. PRACTICAL QUESTIONS
 *
 * The list was indented to a narrower centred measure while the section
 * heading sat at the page inset, so the two never lined up (measured 187px
 * apart at 1440px, 13 August 2026). Both now share one measure on one
 * designed ground.
 * ==================================================================== */

.sell-faq { background: var(--bone); }

.sell-faq .band__head,
.sell-faq__list {
  max-width: 62rem;
  margin-left: auto;
  margin-right: auto;
}

.sell-faq__list {
  background: var(--bone-sunk);
  border-top: 3px solid var(--seam);
  padding: clamp(1.25rem, 2.4vw, 2rem) clamp(1.25rem, 2.6vw, 2.25rem);
}

.sell-faq__summary { position: relative; }

.sell-faq__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--seam);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 320ms var(--sell-draw);
}
.sell-faq__item[open] .sell-faq__rule { transform: scaleX(1); }

.sell-faq__mark { transition: transform 220ms var(--sell-state), border-color 180ms var(--sell-state); }
.sell-faq__item[open] .sell-faq__mark { transform: rotate(135deg); }

.sell-faq__body { overflow: hidden; }
.sell-faq__item[open] .sell-faq__body { animation: sellFaqOpen 300ms var(--sell-arrive) both; }

@keyframes sellFaqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================================================================== *
 * 9. THE CULMINATION
 *
 * The seam arrives from above, turns, and closes as the enclosure around
 * the action — the same single-strip geometry as the dock at the top of the
 * page (references 4 and 10), so the page opens and closes on one object.
 * ==================================================================== */

/* The closing band takes its own rung of the surface ladder. It used to be
   transparent, which painted it the same --bone as the FAQ band directly
   above it: two neighbouring sections on one undesigned ground. */
.sell-final { position: relative; background: var(--bone-raised); }

.sell-final__plate {
  max-width: 78rem;
  margin: clamp(2rem, 5vw, 4rem) auto 0;
  background: var(--bottle);
  border: 1px solid var(--rule-on-deep);
  border-top: 3px solid var(--seam-on-deep);
  color: var(--on-deep);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 3.4vw, 3rem);
}

@media (min-width: 68em) {
  .sell-final__plate { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
}

.sell-final .h-section { color: var(--on-deep); margin: 0 0 var(--s4); }
.sell-final .lede { color: var(--on-deep-soft); margin: 0; max-width: 46ch; }

/* The closing enclosure. One continuous rule around a statement and its
   action, stacked on narrow screens so the label is never squeezed. */
.sell-final__dock {
  border: 1px solid var(--seam-on-deep-soft);
  border-radius: 2px;
  padding: clamp(1rem, 2vw, 1.35rem);
  display: grid;
  gap: var(--s4);
  background: rgba(246, 244, 239, 0.045);
}

.sell-final__dock-note {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--on-deep-soft);
}

.sell-final__link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 3rem;
  padding: 0.75rem 1.1rem;
  background: var(--sand);
  color: #241a08;
  border: 1px solid var(--sand);
  border-radius: 2px;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 180ms var(--sell-state), border-color 180ms var(--sell-state),
    color 180ms var(--sell-state);
}
.sell-final__arrow { transition: transform 180ms var(--sell-state); }

@media (hover: hover) and (pointer: fine) {
  .sell-final__link:hover { background: #d8bd85; border-color: #d8bd85; }
  .sell-final__link:hover .sell-final__arrow { transform: translateX(4px); }
}
.sell-final__link:active { background: #b8974f; border-color: #b8974f; }
.sell-final__link:focus-visible {
  outline: 3px solid var(--on-deep);
  outline-offset: 3px;
  transition: none;
}

[data-enhanced] .sell-final__plate { opacity: 0; transform: translateY(14px); }
[data-enhanced] .sell-final__plate.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 480ms var(--sell-arrive), transform 480ms var(--sell-arrive);
}

/* --- the remaining routes, inside the same composition --------------- */
.sell-res {
  max-width: 78rem;
  margin: clamp(2.5rem, 5vw, 4.5rem) auto 0;
  /* It used to be its own band with its own --bone ground. Nested inside the
     closing section it must not paint one, or it draws a slightly darker
     rectangle across the ivory band it now sits on. */
  background: transparent;
}

.sell-res__head {
  margin: 0 0 var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--t-group);
  font-weight: 400;
  color: var(--bottle);
}

@media (min-width: 68em) {
  .sell-res__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* The open-market valuation leads: this page says repeatedly that the
     open-market route may be the better fit, so its card is not one of
     three equal thumbnails. */
  .sell-res__card--lead { grid-column: span 2; }
  .sell-res__card--lead .sell-res__media img { aspect-ratio: 16 / 10; }
  .sell-res__card--lead .sell-res__title { font-size: calc(var(--t-group) * 1.12); }
}

.sell-res__media { position: relative; }
.sell-res__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 12, 11, 0) 55%,
    rgba(10, 12, 11, 0.1) 78%,
    rgba(10, 12, 11, 0.22) 100%
  );
}
.sell-res__media img { filter: brightness(0.96) contrast(1.05) saturate(1.03); }

[data-enhanced] .sell-res__card { opacity: 0; transform: translateY(10px); }
[data-enhanced] .sell-res__card.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 400ms var(--sell-arrive), transform 400ms var(--sell-arrive);
  transition-delay: calc(var(--stage-index, 0) * var(--sell-step));
}

/* ==================================================================== *
 * REDUCED MOTION — an alternate art direction, not a broken page.
 *
 * Every composed end state survives: the seams stand at full length, the
 * dossier well and its active page are in place, the photographs are fully
 * revealed at their designed crop, and every colour, border and focus
 * response is untouched. What is removed is travel: draws, wipes, drift,
 * staggered entrances and the crossfade between dossier pages.
 * ==================================================================== */

@media (prefers-reduced-motion: reduce) {
  [data-page="sales"] *,
  [data-page="sales"] *::before,
  [data-page="sales"] *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .sell-trust__edge,
  .sell-sill__item::before,
  .sell-matrix__seam { transform: none !important; }

  .sell-hero__rail [data-line],
  .sell-sill__item,
  .sell-matrix__row,
  .sell-journey__stage,
  .sell-scene__copy,
  .sell-ready__card,
  .sell-res__card,
  .sell-dock,
  .sell-final__plate {
    opacity: 1 !important;
    transform: none !important;
  }

  .sell-hero__line-in { transform: none !important; }
  .sell-scene__media .sell-scene__frame { clip-path: none !important; }
  .sell-scene__img { transform: none !important; }
  .sell-route__line { stroke-dashoffset: 0 !important; }
  .sell-faq__item[open] .sell-faq__body { animation: none !important; }
}

/* The same end states for the harness's static mode, which is how the
   visual regression shots and several tests read the page. */
[data-motion="static"] .sell-trust__edge,
[data-motion="static"] .sell-sill__item::before,
[data-motion="static"] .sell-matrix__seam { transform: none; }
[data-motion="static"] .sell-scene__media .sell-scene__frame { clip-path: none; }
[data-motion="static"] .sell-route__line { stroke-dashoffset: 0; }

/* ==========================================================================
 * SALES VALUATION — COMPONENT 02: THE DRAWING BOARD          13 August 2026
 *
 * The opening of /sales/valuation/, and nothing else on the route. Every
 * selector below is under .page--sales-valuation and almost all of them are
 * under .vhero; the header (Component 01), the staged assessment, the flow
 * list, the evidence drawer and the footer are untouched.
 *
 * THE IDEA. A seller arriving here is opening a file on their own property.
 * The hero is the board that file is opened on: a deep bottle-green field
 * ruled like a drawing sheet, with the proposition set into it, one address
 * control laid on paper over it, and — mounted beside them under registration
 * marks — the photograph and the dossier the seller is actually building.
 *
 * The six approved 21st.dev components are the six materials of that board:
 *   · Launch UI Hero        — the badge / title / description / actions /
 *                             large media composition and its container
 *                             rhythm, re-cut as a 58/42 editorial asymmetry.
 *   · Animated Hero (Sonu)  — the word-by-word masked headline, the sequenced
 *                             entrance and the layered background lines.
 *   · coss Combobox         — the address control: input, popup listbox,
 *                             active option, empty state, full keyboard.
 *   · Card Stack (Verma)    — the dossier: layered sheets with visible
 *                             separation that assemble in order.
 *   · Blueprint Shader Grid — the living ruled field behind everything.
 *   · Spotlight Cursor      — a copper surveyor's light over the board.
 *
 * WHAT IS NOT ALLOWED. No layer here may enter the accessibility tree, take
 * a pointer event, or reduce the contrast of anything readable. The hero is
 * complete and operable with no CSS, no JavaScript, no WebGL and no pointer,
 * and every motion below resolves to a finished frame under a reduced-motion
 * or Save-Data preference.
 * ========================================================================== */

.page--sales-valuation {
  /* COMPONENT-LAYER TOKENS ONLY.
     The route's brand primitives — bottle green, copper, sand — are declared
     once, by Component 01's block above, and consumed here. Component 02
     originally redeclared them as a parallel set of raw hex, which is two
     definitions of the same route's green that can drift apart on any future
     pass; this layer now aliases them instead. Where the shared system
     already has the right semantic token (ivory paper, parchment edge, the
     arrival ease) that token is used rather than its value copied.

     THE TWO METALS ARE NOT INTERCHANGEABLE. Copper (#8f5024) is the metal on
     paper, where it is text-safe; sand (#efc29a) is its counterpart on the
     bottle-green ground, where copper goes muddy. An earlier draft split the
     difference with an invented #c98a4b, which is a fourth brand colour
     nobody approved. */
  --vh-board: var(--svh-bottle-deep);
  --vh-board-lift: var(--svh-bottle);
  --vh-ink: #f6f4ef;
  --vh-ink-soft: rgb(246 244 239 / 78%);
  --vh-ink-faint: rgb(246 244 239 / 62%);

  --vh-metal: var(--svh-sand);          /* on the board */
  --vh-metal-deep: var(--svh-copper);   /* on paper */

  --vh-paper: var(--surface-ivory);
  --vh-paper-edge: var(--surface-parchment);

  --vh-line: rgb(239 194 154 / 30%);
  --vh-line-soft: rgb(246 244 239 / 14%);

  --vh-ease: var(--ease-arrive);
  --vh-ease-firm: cubic-bezier(0.32, 0.72, 0.24, 1);
}

/* ---- 1. The board ------------------------------------------------------- */

.page--sales-valuation .vhero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--vh-board);
  color: var(--vh-ink);
  /* The board is lit from the upper left, where the proposition sits. */
  background-image:
    radial-gradient(120% 90% at 22% 8%, rgb(18 54 43 / 92%), transparent 62%),
    radial-gradient(90% 80% at 88% 100%, rgb(18 54 43 / 62%), transparent 58%);
}

.page--sales-valuation .vhero__board {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* The explicit fallback, and the pre-enhancement state. A ruled sheet in
   plain CSS: it is what a reader sees with JavaScript unavailable, with WebGL
   unavailable, on a coarse pointer and under a reduced-motion preference. It
   is never the whole component on a machine that can run the real one — the
   shader fades it back rather than replacing it, so the ruling stays as the
   drawing's base tone underneath the living lines. */
.page--sales-valuation .vhero__ruling {
  position: absolute;
  inset: -1px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 27px, rgb(239 194 154 / 12%) 27px 28px),
    repeating-linear-gradient(0deg, transparent 0 27px, rgb(239 194 154 / 8%) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 139px, rgb(239 194 154 / 15%) 139px 140px),
    repeating-linear-gradient(0deg, transparent 0 139px, rgb(239 194 154 / 11%) 139px 140px);
  mask-image: radial-gradient(115% 100% at 34% 46%, #000 12%, rgb(0 0 0 / 42%) 62%, transparent 100%);
  -webkit-mask-image: radial-gradient(115% 100% at 34% 46%, #000 12%, rgb(0 0 0 / 42%) 62%, transparent 100%);
  transition: opacity 700ms var(--vh-ease);
}

.page--sales-valuation .vhero__grid,
.page--sales-valuation .vhero__light {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 600ms var(--vh-ease);
}

/* Raised only once the context is real and the first frame has been drawn,
   so a failed WebGL start can never leave a blank rectangle over the ruling. */
.page--sales-valuation .vhero[data-vhero-grid="live"] .vhero__grid { opacity: 1; }
.page--sales-valuation .vhero[data-vhero-grid="live"] .vhero__ruling { opacity: 0.34; }
.page--sales-valuation .vhero[data-vhero-light="live"] .vhero__light { opacity: 1; }

/* The seam: the board's own edge, drawn against the page above it. */
.page--sales-valuation .vhero__seam {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--vh-metal-deep), var(--vh-metal) 42%, transparent 92%);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---- 2. The container rhythm (Launch UI) -------------------------------- */

.page--sales-valuation .vhero__inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(2.75rem, 6vw, 5.5rem) var(--inset) clamp(2.5rem, 5vw, 4.5rem);
  display: grid;
  gap: clamp(2.25rem, 4vw, 3.5rem);
}

.page--sales-valuation .vhero__editorial {
  display: grid;
  align-content: start;
  gap: clamp(1rem, 1.6vw, 1.4rem);
  min-width: 0;
}

/* ---- 3. The badge (Launch UI) ------------------------------------------- */

.page--sales-valuation .vhero__badge {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vh-metal);
}

.page--sales-valuation .vhero__badge-text {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 0.85rem 0 0.75rem;
  border: 1px solid var(--vh-line);
  border-left: 2px solid var(--vh-metal);
  background: rgb(246 244 239 / 5%);
}

.page--sales-valuation .vhero__badge-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: var(--vh-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--vh-ease), border-color 200ms var(--vh-ease);
}

.page--sales-valuation .vhero__badge-arrow {
  transition: transform 240ms var(--vh-ease);
}

.page--sales-valuation .vhero__badge-action:hover,
.page--sales-valuation .vhero__badge-action:focus-visible {
  color: var(--vh-ink);
  border-bottom-color: var(--vh-metal);
}

.page--sales-valuation .vhero__badge-action:hover .vhero__badge-arrow,
.page--sales-valuation .vhero__badge-action:focus-visible .vhero__badge-arrow { transform: translateX(3px); }

/* ---- 4. The headline (Sonu's word reveal) ------------------------------- */

.page--sales-valuation .vhero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.1rem + 5.1vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--vh-ink);
  text-wrap: balance;
}

/* The mask. Each word rides in its own clipped box, so the reveal is the
   letterforms rising out of the ruled sheet rather than a block fading in.
   Both spans are ordinary inline text: with no CSS and no script the sentence
   reads exactly as written, and a screen reader gets one sentence with real
   spaces, never five announcements. */
.page--sales-valuation .vhero__w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.06em;
}

.page--sales-valuation .vhero__wi { display: inline-block; }

/* ---- 5. The measuring rule and the prose ------------------------------- */

.page--sales-valuation .vhero__ruleline { color: var(--vh-metal); line-height: 0; }

.page--sales-valuation .vhero__rule {
  display: block;
  width: min(360px, 68%);
  height: 26px;
  overflow: visible;
}

.page--sales-valuation .vhero__rule-line,
.page--sales-valuation .vhero__rule-ticks {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}

.page--sales-valuation .vhero__lede {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--vh-ink-soft);
}

/* ---- 6. The fileplate: paper laid on the board -------------------------- */

.page--sales-valuation .vhero__plate {
  position: relative;
  margin-top: clamp(0.5rem, 1.2vw, 1rem);
  padding: clamp(1rem, 1.8vw, 1.5rem);
  background: var(--vh-paper);
  border: 1px solid var(--vh-paper-edge);
  border-top: 2px solid var(--vh-metal-deep);
  box-shadow: 0 26px 48px -34px rgb(0 0 0 / 74%);
  color: var(--ink);
}

.page--sales-valuation .vhero__plate-kicker {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.85rem;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-deep);
}

.page--sales-valuation .vhero__plate-rule {
  flex: 1 1 auto;
  height: 1px;
  background: rgb(143 80 36 / 26%);
}

.page--sales-valuation .vhero__plate-state { color: var(--ink-soft); }

.page--sales-valuation .vhero__static { margin: 0.75rem 0 0; }

/* ---- 7. The address combobox (coss) ------------------------------------ */

.page--sales-valuation .svq-start__row {
  display: grid;
  gap: 0.85rem;
  align-items: end;
}

.page--sales-valuation .vcombo { position: relative; min-width: 0; }

.page--sales-valuation .vcombo .form__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}

.page--sales-valuation .vcombo__control { position: relative; display: block; }

.page--sales-valuation .vcombo__input {
  width: 100%;
  min-height: 52px;
  padding: 0 3rem 0 0.9rem;
  background: #fff;
  border: 1px solid rgb(28 33 31 / 26%);
  border-radius: var(--radius-control);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 200ms var(--vh-ease), box-shadow 200ms var(--vh-ease);
}

.page--sales-valuation .vcombo__input:hover { border-color: rgb(143 80 36 / 55%); }

/* A copper rule under the field rather than a glow around it. */
.page--sales-valuation .vcombo__input:focus,
.page--sales-valuation .vcombo__input:focus-visible {
  outline: 2px solid var(--copper-deep);
  outline-offset: 2px;
  border-color: var(--copper-deep);
  box-shadow: inset 0 -2px 0 var(--copper-deep);
}

.page--sales-valuation .vcombo__help {
  margin: 0.45rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.page--sales-valuation .svq-start__clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-control);
  cursor: pointer;
}

.page--sales-valuation .svq-start__clear-mark {
  position: relative;
  width: 13px;
  height: 13px;
}

.page--sales-valuation .svq-start__clear-mark::before,
.page--sales-valuation .svq-start__clear-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--ink-soft);
}

.page--sales-valuation .svq-start__clear-mark::before { transform: rotate(45deg); }
.page--sales-valuation .svq-start__clear-mark::after { transform: rotate(-45deg); }
.page--sales-valuation .svq-start__clear:hover .svq-start__clear-mark::before,
.page--sales-valuation .svq-start__clear:hover .svq-start__clear-mark::after { background: var(--copper-deep); }

/* The popup. Positioned against the field, above every other hero layer, and
   display:none when closed so nothing invisible sits over the CTA. */
.page--sales-valuation .vcombo__list {
  position: absolute;
  z-index: 40;
  top: calc(100% - 1.35rem);
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  max-height: min(19rem, 46vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--vh-paper);
  border: 1px solid rgb(143 80 36 / 42%);
  border-top: 2px solid var(--copper-deep);
  border-radius: var(--radius-control);
  box-shadow: 0 26px 44px -28px rgb(11 35 28 / 68%);
}

.page--sales-valuation .vcombo__list[hidden] { display: none; }

.page--sales-valuation .vcombo__option {
  display: grid;
  gap: 1px;
  align-content: center;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 1px;
  cursor: pointer;
  color: var(--ink);
}

.page--sales-valuation .vcombo__option-label { font-size: 0.9375rem; font-weight: 600; }
.page--sales-valuation .vcombo__option-note { font-size: 0.8125rem; color: var(--ink-soft); }

/* The active option. Bottle-green ground, and a copper marker down its left
   edge, so the active row is never carried by colour alone. */
.page--sales-valuation .vcombo__option[data-active="true"] {
  background: var(--vh-board-lift);
  color: var(--vh-ink);
  box-shadow: inset 3px 0 0 var(--vh-metal);
}

.page--sales-valuation .vcombo__option[data-active="true"] .vcombo__option-note { color: var(--vh-ink-soft); }

.page--sales-valuation .vcombo__option[aria-selected="true"]::after {
  content: "Selected";
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-deep);
}

/* The empty and unavailable states are real rows, not a blank panel. */
.page--sales-valuation .vcombo__empty {
  display: grid;
  gap: 2px;
  padding: 12px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.page--sales-valuation .vcombo__empty-title { font-weight: 600; color: var(--ink); }

/* ---- 8. The primary action --------------------------------------------- */

.page--sales-valuation .vhero__go {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 1.5rem;
  border-radius: var(--radius-control);
  background: var(--vh-board-lift);
  border: 1px solid var(--vh-board-lift);
  color: var(--vh-ink);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition:
    background-color 220ms var(--vh-ease),
    border-color 220ms var(--vh-ease),
    box-shadow 220ms var(--vh-ease),
    transform 120ms var(--vh-ease);
}

.page--sales-valuation .vhero__go::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: var(--vh-metal-deep);
  transform: scaleX(0.26);
  transform-origin: left center;
  transition: transform 380ms var(--vh-ease), background-color 220ms var(--vh-ease);
}

.page--sales-valuation .vhero__go-corner {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-left: 1px solid var(--vh-metal);
  border-bottom: 1px solid var(--vh-metal);
  transition: transform 240ms var(--vh-ease);
}

.page--sales-valuation .vhero__go:hover,
.page--sales-valuation .vhero__go:focus-visible {
  background: var(--vh-board);
  border-color: var(--vh-board);
  box-shadow: 0 14px 26px -18px rgb(0 0 0 / 74%);
}

.page--sales-valuation .vhero__go:hover::before,
.page--sales-valuation .vhero__go:focus-visible::before { transform: scaleX(1); background: var(--vh-metal); }
.page--sales-valuation .vhero__go:hover .vhero__go-corner,
.page--sales-valuation .vhero__go:focus-visible .vhero__go-corner { transform: translate(-2px, 2px); }
.page--sales-valuation .vhero__go:active { transform: translateY(1px); }

.page--sales-valuation .vhero__go:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 3px; }

/* ---- 9. The reassurance strip ------------------------------------------ */

.page--sales-valuation .vhero__assure {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.35rem;
  margin: 0.5rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--vh-line-soft);
  list-style: none;
}

.page--sales-valuation .vhero__assure-item {
  position: relative;
  padding-left: 0.9rem;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--vh-ink-faint);
}

.page--sales-valuation .vhero__assure-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 1px;
  background: var(--vh-metal);
}

/* ---- 10. The scene: photograph and dossier ----------------------------- */

.page--sales-valuation .vhero__scene {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: start;
}

.page--sales-valuation .vhero__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--vh-line);
  background: var(--vh-board-lift);
}

.page--sales-valuation .vhero__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* Graded to the board rather than dropped on it: the photograph is a plate
     mounted on a green field, so it carries a trace of that green. */
  filter: saturate(0.88) contrast(1.04);
}

.page--sales-valuation .vhero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(190deg, rgb(11 35 28 / 24%), transparent 42%),
    linear-gradient(0deg, rgb(11 35 28 / 46%), transparent 46%);
}

.page--sales-valuation .vhero__mount-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--vh-metal), rgb(239 194 154 / 0%));
  z-index: 2;
}

.page--sales-valuation .vhero__reg {
  position: absolute;
  z-index: 2;
  color: rgb(239 194 154 / 62%);
}

.page--sales-valuation .vhero__reg--tl { top: 10px; left: 10px; }
.page--sales-valuation .vhero__reg--br { right: 10px; bottom: 10px; }

/* ---- 11. The dossier stack (Card Stack) -------------------------------- *
   Layered paper with real separation: three sheet edges under the plate, each
   one offset and rotated a fraction of a degree, so the stack reads as
   collated paperwork rather than as a drop shadow. The sheets carry no text
   and claim nothing; the only thing that states anything is the plate, and
   it states only what the visitor has supplied. */

.page--sales-valuation .vhero__dossier {
  position: relative;
  margin-top: clamp(-3.5rem, -4vw, -2rem);
  margin-left: clamp(0.75rem, 3vw, 2.5rem);
  margin-right: clamp(0rem, 1vw, 0.75rem);
  z-index: 3;
}

.page--sales-valuation .vstack__sheet {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--vh-paper-edge);
  border: 1px solid rgb(143 80 36 / 26%);
  box-shadow: 0 18px 30px -26px rgb(0 0 0 / 70%);
  transform-origin: 18% 92%;
}

.page--sales-valuation .vstack__sheet--1 { transform: translate(6px, 7px) rotate(0.5deg); opacity: 0.95; }
.page--sales-valuation .vstack__sheet--2 { transform: translate(12px, 14px) rotate(1.05deg); opacity: 0.7; }
.page--sales-valuation .vstack__sheet--3 { transform: translate(18px, 21px) rotate(1.6deg); opacity: 0.45; }

/* Collated: once the file has an address the sheets square up on the plate. */
.page--sales-valuation .vhero__dossier[data-vstack="collated"] .vstack__sheet--1 { transform: translate(4px, 4px) rotate(0.2deg); }
.page--sales-valuation .vhero__dossier[data-vstack="collated"] .vstack__sheet--2 { transform: translate(8px, 8px) rotate(0.42deg); }
.page--sales-valuation .vhero__dossier[data-vstack="collated"] .vstack__sheet--3 { transform: translate(12px, 12px) rotate(0.64deg); }

.page--sales-valuation .vhero__dossier .svq-dossier {
  position: relative;
  z-index: 2;
  margin: 0;
  background: var(--vh-paper);
  border: 1px solid rgb(143 80 36 / 34%);
  border-top: 2px solid var(--vh-metal-deep);
  box-shadow: 0 30px 54px -34px rgb(0 0 0 / 78%);
  transition: transform 380ms var(--vh-ease-firm);
}

.page--sales-valuation .vhero__dossier[data-vstack="collated"] .svq-dossier { transform: translateY(-2px); }

/* ---- 12. The ledger, set below the proposition ------------------------- */

.page--sales-valuation .vhero__ledger {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--vh-line-soft);
}

.page--sales-valuation .vhero__ledger .svq-ledger { border: 0; margin: 0; padding: 0; }
.page--sales-valuation .vhero__ledger .svq-ledger__q { color: var(--vh-ink); }
.page--sales-valuation .vhero__ledger .svq-ledger__hint,
.page--sales-valuation .vhero__ledger .svq-qualify { color: var(--vh-ink-faint); }
.page--sales-valuation .vhero__ledger .svq-ledger__label { color: var(--vh-ink); }
.page--sales-valuation .vhero__ledger .svq-ledger__n { color: var(--vh-metal); }
.page--sales-valuation .vhero__ledger .svq-ledger__row { border-color: var(--vh-line-soft); }
.page--sales-valuation .vhero__ledger .svq-ledger__row:hover { border-color: var(--vh-line); }

/* ---- 13. Composition --------------------------------------------------- *
   Mobile first, and the mobile order is the DOM order: badge, heading, rule,
   prose, address, action, reassurance, photograph, dossier, ledger. Nothing
   is reordered by CSS, so the reading order and the tab order are the same
   sequence at every width.                                                 */

@media (max-width: 47.99em) {
  .page--sales-valuation .vhero__inner { gap: 2rem; }
  .page--sales-valuation .vhero__title { font-size: clamp(2.2rem, 1.2rem + 6.4vw, 3.1rem); }
  .page--sales-valuation .vhero__rule { width: min(240px, 78%); }

  /* The dossier stops overlapping the photograph on a phone: a stack sitting
     over a 375px-wide picture covers the subject of it. */
  .page--sales-valuation .vhero__dossier {
    margin: 1rem 0 0;
    z-index: 1;
  }

  .page--sales-valuation .vstack__sheet--3 { display: none; }
  .page--sales-valuation .vstack__sheet--1 { transform: translate(4px, 5px) rotate(0.35deg); }
  .page--sales-valuation .vstack__sheet--2 { transform: translate(8px, 10px) rotate(0.7deg); }

  .page--sales-valuation .vhero__reg { display: none; }
  .page--sales-valuation .vcombo__list { max-height: 42vh; }
}

/* Tablet: still one column, but the scene becomes a composed pair rather
   than a stack of two full-width blocks. */
@media (min-width: 48em) and (max-width: 63.99em) {
  .page--sales-valuation .vhero__scene {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
    gap: 0;
  }
  .page--sales-valuation .vhero__dossier {
    margin: clamp(2rem, 6vw, 4rem) 0 0 clamp(-4rem, -5vw, -2rem);
  }
}

/* The editorial split. 58/42, and it arrives at the width where the measure
   of the prose and the readable width of the dossier can both be honoured —
   not at a round number. */
@media (min-width: 64em) {
  .page--sales-valuation .vhero__inner {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    column-gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
  }

  .page--sales-valuation .vhero__editorial { grid-area: 1 / 1 / 2 / 2; }
  .page--sales-valuation .vhero__scene { grid-area: 1 / 2 / 2 / 3; }
  .page--sales-valuation .vhero__ledger { grid-area: 2 / 1 / 3 / -1; }

  .page--sales-valuation .svq-start__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
  }

  /* The action sits on the field's baseline, not on the help text's. */
  .page--sales-valuation .vhero__go { align-self: start; margin-top: 1.72rem; }
}

/* Laptop: the split rebalances before anything becomes less legible. */
@media (min-width: 64em) and (max-width: 79.99em) {
  .page--sales-valuation .vhero__inner { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); }
  .page--sales-valuation .vhero__title { font-size: clamp(2.5rem, 1rem + 3.6vw, 3.5rem); }
  .page--sales-valuation .svq-start__row { grid-template-columns: minmax(0, 1fr); }
  .page--sales-valuation .vhero__go { margin-top: 0; justify-self: start; }
}

@media (min-width: 90em) {
  .page--sales-valuation .vhero__inner { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
}

/* ---- 14. The entrance -------------------------------------------------- *
   One sequence, six beats: the board resolves, the file is opened, the
   proposition is revealed, the address is offered, the photograph is mounted
   and the dossier is collated. Every element starts from a DIFFERENT resting
   state — masked type rises, rules draw, the photograph is wiped in through
   an architectural clip, paper sheets arrive firmly with no overshoot — so
   the hero is choreographed rather than uniformly faded.

   Enhancement only: the from-states are applied by [data-vhero-armed], which
   valuation-hero.mjs sets on the section in the same frame it starts the
   sequence. Nothing is invisible before that, so a failed script, a blocked
   module or a reduced-motion preference leaves the finished hero standing. */

.page--sales-valuation .vhero[data-vhero-armed] .vhero__wi,
.page--sales-valuation .vhero[data-vhero-armed] [data-vhero-step] {
  will-change: transform, opacity;
}

.page--sales-valuation .vhero[data-vhero-armed] .vhero__wi {
  transform: translateY(105%);
  transition: transform 620ms var(--vh-ease);
}

.page--sales-valuation .vhero[data-vhero-armed] [data-vhero-step] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--vh-ease), transform 620ms var(--vh-ease);
}

.page--sales-valuation .vhero[data-vhero-armed] .vhero__seam {
  transition: transform 900ms var(--vh-ease) 60ms;
}

.page--sales-valuation .vhero[data-vhero-armed] .vhero__rule-line,
.page--sales-valuation .vhero[data-vhero-armed] .vhero__rule-ticks {
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 720ms var(--vh-ease) 430ms;
}

/* The photograph is not faded: it is wiped in from the top edge, the way a
   plate is laid onto a mount. */
.page--sales-valuation .vhero[data-vhero-armed] .vhero__photo {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.04);
  transition: clip-path 900ms var(--vh-ease-firm) 690ms, transform 1100ms var(--vh-ease) 690ms;
}

/* Sheets arrive firmly, in order, from beneath the plate. No spring, no
   overshoot: this is paper being squared up, not a card game. */
.page--sales-valuation .vhero[data-vhero-armed] .vstack__sheet {
  opacity: 0;
  transition: transform 620ms var(--vh-ease-firm), opacity 420ms linear;
}

.page--sales-valuation .vhero[data-vhero-armed] .vstack__sheet--1 { transform: translate(6px, 46px) rotate(2.4deg); transition-delay: 940ms; }
.page--sales-valuation .vhero[data-vhero-armed] .vstack__sheet--2 { transform: translate(12px, 62px) rotate(3.2deg); transition-delay: 1010ms; }
.page--sales-valuation .vhero[data-vhero-armed] .vstack__sheet--3 { transform: translate(18px, 78px) rotate(4deg); transition-delay: 1080ms; }

.page--sales-valuation .vhero[data-vhero-armed] .svq-dossier {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 520ms linear 920ms, transform 700ms var(--vh-ease-firm) 920ms;
}

/* The played state. Each beat's delay lives here, on one axis of time. */
.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] .vhero__seam { transform: scaleX(1); }

.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] [data-vhero-step] {
  opacity: 1;
  transform: none;
}

.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] [data-vhero-step="1"] { transition-delay: 120ms; }
.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] [data-vhero-step="3"] { transition-delay: 470ms; }
.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] [data-vhero-step="4"] { transition-delay: 590ms; }
.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] [data-vhero-step="5"] { transition-delay: 840ms; }
.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] [data-vhero-step="6"] { transition-delay: 690ms; }
.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] [data-vhero-step="7"] { transition-delay: 900ms; }
.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] [data-vhero-step="8"] { transition-delay: 1120ms; }

/* The headline. 220ms in, 55ms apart — the one place the sequence is a
   rhythm rather than a set of cues. */
.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] .vhero__wi { transform: none; }
.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] .vhero__w:nth-child(1) .vhero__wi { transition-delay: 220ms; }
.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] .vhero__w:nth-child(2) .vhero__wi { transition-delay: 275ms; }
.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] .vhero__w:nth-child(3) .vhero__wi { transition-delay: 330ms; }
.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] .vhero__w:nth-child(4) .vhero__wi { transition-delay: 385ms; }
.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] .vhero__w:nth-child(n + 5) .vhero__wi { transition-delay: 440ms; }

.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] .vhero__rule-line,
.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] .vhero__rule-ticks { stroke-dashoffset: 0; }

.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] .vhero__photo {
  clip-path: inset(0 0 0 0);
  transform: none;
}

.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] .vstack__sheet { opacity: 1; }
.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] .vstack__sheet--1 { transform: translate(6px, 7px) rotate(0.5deg); opacity: 0.95; }
.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] .vstack__sheet--2 { transform: translate(12px, 14px) rotate(1.05deg); opacity: 0.7; }
.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] .vstack__sheet--3 { transform: translate(18px, 21px) rotate(1.6deg); opacity: 0.45; }

.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] .svq-dossier {
  opacity: 1;
  transform: none;
}

/* The sequence is played once. Once it has, the handles come off so nothing
   is left promoted to its own layer for the rest of the session. */
.page--sales-valuation .vhero[data-vhero-settled] .vhero__wi,
.page--sales-valuation .vhero[data-vhero-settled] [data-vhero-step] { will-change: auto; }

/* ---- 15. Reduced motion, static mode and forced colours ---------------- *
   Not the same hero more slowly: the same hero, already finished. The board
   keeps its ruling (drawn, not animated), the shader and the pointer light
   never start, and every element is at its resting state on the first frame.
*/

@media (prefers-reduced-motion: reduce) {
  .page--sales-valuation .vhero,
  .page--sales-valuation .vhero *,
  .page--sales-valuation .vhero *::before,
  .page--sales-valuation .vhero *::after { animation: none; transition: none; }

  .page--sales-valuation .vhero[data-vhero-armed] .vhero__wi,
  .page--sales-valuation .vhero[data-vhero-armed] [data-vhero-step],
  .page--sales-valuation .vhero[data-vhero-armed] .vstack__sheet,
  .page--sales-valuation .vhero[data-vhero-armed] .svq-dossier,
  .page--sales-valuation .vhero[data-vhero-armed] .vhero__photo {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .page--sales-valuation .vhero[data-vhero-armed] .vstack__sheet--1 { transform: translate(6px, 7px) rotate(0.5deg); opacity: 0.95; }
  .page--sales-valuation .vhero[data-vhero-armed] .vstack__sheet--2 { transform: translate(12px, 14px) rotate(1.05deg); opacity: 0.7; }
  .page--sales-valuation .vhero[data-vhero-armed] .vstack__sheet--3 { transform: translate(18px, 21px) rotate(1.6deg); opacity: 0.45; }

  .page--sales-valuation .vhero[data-vhero-armed] .vhero__rule-line,
  .page--sales-valuation .vhero[data-vhero-armed] .vhero__rule-ticks { stroke-dashoffset: 0; }

  .page--sales-valuation .vhero[data-vhero-armed] .vhero__seam { transform: scaleX(1); }
  .page--sales-valuation .vhero__ruling { opacity: 1; }
}

html[data-motion="static"] .page--sales-valuation .vhero,
html[data-motion="static"] .page--sales-valuation .vhero *,
html[data-motion="static"] .page--sales-valuation .vhero *::before,
html[data-motion="static"] .page--sales-valuation .vhero *::after { animation: none; transition: none; }

html[data-motion="static"] .page--sales-valuation .vhero[data-vhero-armed] .vhero__wi,
html[data-motion="static"] .page--sales-valuation .vhero[data-vhero-armed] [data-vhero-step],
html[data-motion="static"] .page--sales-valuation .vhero[data-vhero-armed] .svq-dossier,
html[data-motion="static"] .page--sales-valuation .vhero[data-vhero-armed] .vhero__photo {
  opacity: 1;
  transform: none;
  clip-path: none;
}

html[data-motion="static"] .page--sales-valuation .vhero__ruling { opacity: 1; }

@media (forced-colors: active) {
  .page--sales-valuation .vhero__board { display: none; }
  .page--sales-valuation .vhero__plate,
  .page--sales-valuation .vcombo__list,
  .page--sales-valuation .vhero__dossier .svq-dossier { border: 1px solid CanvasText; }
  .page--sales-valuation .vcombo__option[data-active="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .page--sales-valuation .vstack__sheet { display: none; }
}

@media (prefers-contrast: more) {
  .page--sales-valuation { --vh-ink-soft: rgb(246 244 239 / 92%); --vh-ink-faint: rgb(246 244 239 / 80%); }
  .page--sales-valuation .vhero__ruling { opacity: 0.5; }
  .page--sales-valuation .vcombo__input { border-color: rgb(28 33 31 / 62%); }
}

/* ---- 16. Refinements from the design-skill pass ------------------------- *
 * analyse-design  — the photograph gains the labelled mount this project
 *                   uses everywhere else, carrying the illustrative sentence
 *                   its own media record requires of it.
 * brand           — the crest-red mark from Component 01 is carried onto the
 *                   hero's action, so the route has one heraldic signature
 *                   used twice rather than two unrelated treatments.
 * design-system   — the dossier head was reading as a black bar: it asks for
 *                   var(--bottle), and the site-wide colour promotion has
 *                   since remapped that primitive to olive charcoal. On this
 *                   board it takes the route's own bottle green back.
 * ------------------------------------------------------------------------ */

.page--sales-valuation .vhero__caption {
  margin: 0;
  padding: 0.55rem 0 0;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vh-ink-faint);
}

/* The crest mark: five pixels, at the end of the tab's travel, and the only
   place crest red appears anywhere in this component. */
.page--sales-valuation .vhero__go::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 5px;
  height: 5px;
  background: var(--crest);
}

.page--sales-valuation .vhero__dossier .svq-dossier__head {
  background: var(--vh-board-lift);
  border-bottom: 1px solid rgb(239 194 154 / 22%);
}

.page--sales-valuation .vhero__dossier .svq-dossier__status { color: var(--vh-metal); }

/* Composition: a larger plate, and the dossier laid across its lower third
   rather than floating beside it. The crop keeps the display position the
   media record specifies, so the adviser and the homeowner both stay above
   the paper. */
@media (min-width: 48em) {
  .page--sales-valuation .vhero__photo {
    aspect-ratio: 5 / 4;
    object-position: 50% 48%;
  }

  .page--sales-valuation .vhero__dossier {
    margin-top: clamp(-6rem, -6.5vw, -3.5rem);
    margin-left: clamp(1.5rem, 5vw, 4rem);
    margin-right: 0;
  }
}

/* The mount label belongs ON the plate. Set under the photograph it was
   clipped by the frame and then covered by the dossier, which is the same as
   not having it: it now sits in the print's own top corner, on a scrim, at a
   contrast that holds over any part of the image. */
.page--sales-valuation .vhero__caption {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  max-width: min(24ch, 70%);
  margin: 0;
  padding: 0.4rem 0.6rem;
  background: rgb(11 35 28 / 82%);
  border-left: 1px solid rgb(239 194 154 / 34%);
  border-bottom: 1px solid rgb(239 194 154 / 34%);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  line-height: 1.35;
  text-transform: uppercase;
  color: rgb(246 244 239 / 88%);
}

@media (max-width: 47.99em) {
  .page--sales-valuation .vhero__caption { max-width: 100%; font-size: 0.5938rem; }
}

/* ---- 17. From premium_web_design and frontend-design -------------------- *
 * Depth by tonal step rather than by elevation, and no pure white anywhere:
 * the fileplate takes the paper tone and the field the ivory above it, so the
 * control reads as a lighter surface set into the sheet rather than a white
 * box dropped on a cream one. Both are existing system tokens.
 * The registration crosshairs that used to sit on the photograph's corners
 * are gone — they encoded nothing — so their rules go with them.
 * ------------------------------------------------------------------------ */

.page--sales-valuation .vhero__plate { background: var(--surface-paper); }
.page--sales-valuation .vcombo__input { background: var(--surface-ivory); }
.page--sales-valuation .vcombo__input:focus,
.page--sales-valuation .vcombo__input:focus-visible { background: #fdfbf7; }

.page--sales-valuation .vhero__reg { display: none; }

/* The badge and its action sit on one line wherever there is room for one,
   and the action never lands between the badge and the headline as a third
   stacked block. */
@media (max-width: 47.99em) {
  .page--sales-valuation .vhero__badge {
    gap: 0.5rem 0.9rem;
    align-items: baseline;
  }
  .page--sales-valuation .vhero__badge-action { min-height: 32px; font-size: 0.625rem; }
}

/* ---- 18. Reconciled against DESIGN.md ---------------------------------- *
 * The project's own design record specifies the display face at weight 500,
 * line-height 1.02 and letter-spacing -0.018em, and its label role at 0.75rem
 * / weight 750 / 0.11em. The hero had drifted from both — a lighter display
 * weight and two invented label sizes — which is exactly the drift a design
 * system exists to stop. The hero's labels now sit on the record's label
 * role, scaled down one step where they are genuinely secondary.
 * ------------------------------------------------------------------------ */

.page--sales-valuation .vhero__title {
  font-weight: 500;
  letter-spacing: -0.018em;
}

.page--sales-valuation .vhero__badge,
.page--sales-valuation .vhero__plate-kicker {
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.11em;
}

.page--sales-valuation .vhero__caption {
  font-weight: 750;
  letter-spacing: 0.11em;
}

/* ---- 19. The batched fix from the measured audit ------------------------ *
 *
 * THE ONE THAT MATTERED. The priority ledger's rows sit on their own ivory
 * panel — .svq-ledger__rows carries the paper — and this component had
 * recoloured its labels to the board's near-white ink. Measured at 1.03:1
 * and 1.53:1: the question a seller is asked was invisible, on a page whose
 * whole job is to ask it. The component was already right on paper, with a
 * dark fill and a light label on the selected row; the fix is to stop
 * overriding it and to restyle only the parts that genuinely sit on the
 * board — the legend, its hint and the qualification note.
 *
 * Also here: the mount label reduced to one line, and the two label roles
 * taken to the 0.75rem DESIGN.md actually specifies rather than the 0.6875
 * this component had settled on.
 * ------------------------------------------------------------------------ */

/* On the board. */
.page--sales-valuation .vhero__ledger .svq-ledger__q { color: var(--vh-ink); }
.page--sales-valuation .vhero__ledger .svq-ledger__hint { color: var(--vh-ink-faint); }
.page--sales-valuation .vhero__ledger > .svq-ledger > .svq-qualify,
.page--sales-valuation .vhero__ledger .svq-ledger__note { color: var(--vh-ink-faint); }

/* On the paper. Reverted to the component's own colours, which were correct:
   ink on ivory, copper numerals, and the dark selected fill with its light
   label that the original already ships. */
.page--sales-valuation .vhero__ledger .svq-ledger__label { color: var(--ink); }
.page--sales-valuation .vhero__ledger .svq-ledger__n { color: var(--copper-deep); }
.page--sales-valuation .vhero__ledger .svq-ledger__row { border-color: var(--rule); }
.page--sales-valuation .vhero__ledger .svq-ledger__row:hover { border-color: rgb(143 80 36 / 42%); }
.page--sales-valuation .vhero__ledger .svq-ledger__input:checked ~ .svq-ledger__label { color: var(--on-deep); }
.page--sales-valuation .vhero__ledger .svq-ledger__input:checked ~ .svq-ledger__n { color: var(--sand); }

/* The paper panel is a sheet like the others, so it is headed like them. */
.page--sales-valuation .vhero__ledger .svq-ledger__rows {
  border-top: 2px solid var(--copper-deep);
}

/* One line, and quieter: a mount label states a fact, it does not announce
   itself over the photograph it belongs to. */
.page--sales-valuation .vhero__caption {
  max-width: none;
  padding: 0.35rem 0.55rem;
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

@media (max-width: 30em) {
  .page--sales-valuation .vhero__caption { white-space: normal; max-width: 62%; }
}

/* The label role, at the size the design record specifies. */
.page--sales-valuation .vhero__badge,
.page--sales-valuation .vhero__plate-kicker { font-size: 0.75rem; }

@media (max-width: 47.99em) {
  .page--sales-valuation .vhero__badge { font-size: 0.6875rem; }
  .page--sales-valuation .vhero__badge-action { font-size: 0.6875rem; }
}

/* The ledger reads under the proposition, not across the whole board: a row
   1,670px wide puts its control a long way from its label, and a full-width
   paper panel competes with the plate above it for the same attention. */
@media (min-width: 64em) {
  .page--sales-valuation .vhero__ledger { max-width: min(100%, 54rem); }
}

/* ---- 20. From the motion review ---------------------------------------- *
 * Interactive feedback was running on entrance timings. A hover that takes
 * 200-220ms to acknowledge reads as lag; the guidance is under 100ms for
 * hover and under 150ms for press. Split into two layers instead: the
 * acknowledgement is immediate, and the expressive part — the file tab
 * pulling across the action — keeps its 380ms travel behind it.
 * The ledger's entrance is pulled forward so the visible sequence lands
 * inside 1.6s rather than trailing to 1.75s.
 * ------------------------------------------------------------------------ */

.page--sales-valuation .vhero__go {
  transition:
    background-color 140ms var(--ease-in-out),
    border-color 140ms var(--ease-in-out),
    box-shadow 200ms var(--ease-in-out),
    transform 120ms var(--ease-in-out);
}

.page--sales-valuation .vcombo__input {
  transition: border-color 140ms var(--ease-in-out), box-shadow 140ms var(--ease-in-out), background-color 140ms var(--ease-in-out);
}

.page--sales-valuation .vcombo__option { transition: background-color 120ms var(--ease-in-out); }

.page--sales-valuation .vhero__badge-action,
.page--sales-valuation .vhero__badge-arrow { transition-duration: 140ms; }

.page--sales-valuation .vhero[data-vhero-armed][data-vhero-entered] [data-vhero-step="8"] { transition-delay: 980ms; }

/* ---- 21. Layering, caught by the component's own test ------------------- *
 * The surveyor's light was moved out of the board so it could pass over the
 * photograph and the dossier, and it lost two things on the way: the board's
 * pointer-events:none, and any z-index at all. It was therefore sitting
 * UNDER the scene rather than over it, and quietly taking pointer events on
 * every empty part of the hero. Three layers, stated explicitly:
 *   1  the scene — photograph and dossier
 *   2  the light — over both of them, over nothing else
 *   3  the proposition, the address control and the ledger, which a moving
 *      light must never cross.
 * ------------------------------------------------------------------------ */

.page--sales-valuation .vhero__light {
  z-index: 2;
  pointer-events: none;
}

.page--sales-valuation .vhero__scene { position: relative; z-index: 1; }
.page--sales-valuation .vhero__editorial { position: relative; z-index: 3; }
.page--sales-valuation .vhero__ledger { position: relative; z-index: 3; }

/* ---- 22. Legacy hooks kept, legacy styling refused ---------------------- *
 * The approved seller-journey suite reaches this hero through the class
 * names the previous opening used: .svq-open__copy, .svq-open__media,
 * .svq-open__scene, .svq-open__standfirst and .svq-reassure. Those tests
 * assert real approved facts — the three reassurance statements, the
 * reduced-motion resting state, the address carried into stage 1 — so the
 * elements keep those hooks rather than the tests being repointed at new
 * names. What they must not keep is the old visual treatment, which was
 * written for a light two-column frame. Every property those rules would
 * have leaked is restated here for the board.
 * ------------------------------------------------------------------------ */

.page--sales-valuation .vhero__editorial.svq-open__copy {
  padding: 0;
  align-self: start;
}

.page--sales-valuation .vhero__media.svq-open__media img {
  min-height: 0;
  height: auto;
}

.page--sales-valuation .vhero__assure.svq-reassure {
  border-bottom: 0;
  margin: 0.5rem 0 0;
  padding: 0.85rem 0 0;
  display: flex;
}

.page--sales-valuation .vhero__assure-item.svq-reassure__item {
  padding: 0 0 0 0.9rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--vh-ink-faint);
  border-left: 0;
}

.page--sales-valuation .vhero__assure-item.svq-reassure__item + .vhero__assure-item.svq-reassure__item {
  padding-left: 0.9rem;
  border-left: 0;
  border-top: 0;
}

.page--sales-valuation .vhero__lede.svq-open__standfirst { margin: 0; max-width: 46ch; }

@media (max-width: 47.99em) {
  .page--sales-valuation .vhero__assure.svq-reassure { display: flex; }
  .page--sales-valuation .vhero__assure-item.svq-reassure__item { padding-left: 0.9rem; }
}

/* ========================================================================
   PROPERTIES — THE RENTAL BRIEF (13 August 2026)

   The numbered brief is the page's signature: four useful facts move through
   one visible human route. This gives the zero-listing state orientation and
   progress without imitating a portal or presenting illustrative photography
   as available stock.
   ======================================================================== */

.page--properties .phero__copy { align-self: center; }

.page--properties .phero__actions {
  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
}

.page--properties .phero__cta,
.page--properties .phero__call {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-text);
  font-weight: 700;
  line-height: 1.3;
}

.page--properties .phero__cta {
  padding: 0.8rem 1.2rem;
  background: var(--bottle);
  border: 1px solid var(--bottle);
  color: var(--on-deep);
  text-decoration: none;
  transition: background-color 170ms var(--ease-in-out), border-color 170ms var(--ease-in-out), color 170ms var(--ease-in-out);
}

.page--properties .phero__cta:hover,
.page--properties .phero__cta:focus-visible {
  background: var(--bottle-deep);
  border-color: var(--bottle-deep);
  color: var(--sand);
}

.page--properties .phero__call {
  color: var(--bottle);
  text-underline-offset: 0.32em;
  text-decoration-thickness: 1px;
  transition: color 170ms var(--ease-in-out);
}

.page--properties .phero__call:hover,
.page--properties .phero__call:focus-visible { color: var(--copper-deep); }

.page--properties .phero__signal {
  margin: var(--s4) 0 0;
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  max-width: 44ch;
  color: var(--text-secondary);
  font-size: var(--t-small);
  line-height: 1.55;
}

.page--properties .phero__signal-mark,
.page--properties .psx__promise-mark {
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  margin-top: 0.35em;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 0 4px rgba(150, 95, 56, 0.14);
}

.page--properties .psx {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5.75rem);
  border-top: 1px solid var(--rule);
  overflow: hidden;
}

.page--properties .psx::before {
  content: "RENTAL BRIEF";
  position: absolute;
  right: var(--inset);
  top: clamp(1rem, 2vw, 1.5rem);
  color: rgba(17, 44, 37, 0.055);
  font-family: var(--font-text);
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  font-weight: 750;
  letter-spacing: -0.06em;
  line-height: 0.8;
  pointer-events: none;
}

.page--properties .psx__lead,
.page--properties .psx__asks,
.page--properties .psx__act { position: relative; }

.page--properties .psx__title {
  max-width: 16ch;
  font-size: clamp(2rem, 1.45rem + 2.35vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.page--properties .psx__copy { max-width: 58ch; }

.page--properties .psx__promise {
  margin: var(--s5) 0 0;
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  color: var(--bottle);
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.5;
}

.page--properties .psx__asks { border-top: 1px solid var(--rule-strong); }

.page--properties .psx__asks-head {
  min-height: 3.5rem;
  padding: var(--s3) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  border-bottom: 1px solid var(--rule);
}

.page--properties .psx__asks-title,
.page--properties .psx__asks-count { margin: 0; }

.page--properties .psx__asks-count {
  color: var(--fg-soft);
  font-family: var(--font-text);
  font-size: var(--t-small);
  letter-spacing: 0.04em;
}

.page--properties .psx__asks-count span {
  margin-right: var(--s2);
  color: var(--copper-deep);
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.page--properties .psx__ask-list { border-top: 0; }

.page--properties .psx__ask {
  position: relative;
  grid-template-columns: 2rem 2.25rem minmax(0, 1fr);
  gap: var(--s3);
  min-height: 6.15rem;
  align-items: center;
}

.page--properties .psx__ask-index {
  color: var(--copper-deep);
  font-family: var(--font-display);
  font-size: 0.83rem;
  font-variant-numeric: tabular-nums;
}

.page--properties .psx__ask-mark {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--bottle);
}

.page--properties .psx__ask-term { font-size: 0.95rem; }

.page--properties .psx__act {
  min-height: 100%;
  padding: clamp(1.75rem, 3.2vw, 2.6rem);
  border-top-width: 0;
  box-shadow: 0 1.5rem 4rem rgba(5, 25, 20, 0.2);
}

.page--properties .psx__act::before {
  content: "";
  width: 3.5rem;
  height: 2px;
  display: block;
  background: var(--copper);
}

.page--properties .psx__act-kicker {
  margin: 0;
  color: var(--sand);
  font-family: var(--font-text);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page--properties .psx__act-title {
  margin: calc(var(--s2) * -1) 0 0;
  color: var(--on-deep);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.8vw, 2.55rem);
  font-weight: 400;
  line-height: 1.05;
}

.page--properties .psx__act-copy {
  margin: calc(var(--s2) * -1) 0 0;
  color: var(--on-deep-soft);
  font-size: var(--t-small);
  line-height: 1.6;
}

.page--properties .psx__cta {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.page--properties .psx__cta::after {
  content: "\2192";
  flex: none;
  font-size: 1.25rem;
}

@media (min-width: 62em) {
  .page--properties .hero--search {
    padding-top: clamp(1.75rem, 3vw, 2.75rem);
    padding-bottom: var(--s4);
  }
  .page--properties .hero__inner--search { padding-bottom: 0; }
  .page--properties .phero__actions { margin-top: var(--s4); }
  .page--properties .phero__signal { margin-top: var(--s3); }
  .page--properties .phero__frames { aspect-ratio: 5 / 1.7; }
  .page--properties .psx {
    grid-template-columns: minmax(0, 0.88fr) minmax(20rem, 0.95fr) minmax(18rem, 0.72fr);
    grid-template-areas: "lead asks act";
    column-gap: clamp(2rem, 3.7vw, 4rem);
    align-items: stretch;
  }
}

.page--properties .rpath {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--inset);
  border-top: 1px solid var(--rule);
}

.page--properties .rpath__head {
  display: grid;
  gap: var(--s3);
  max-width: 56rem;
}

.page--properties .rpath__kicker {
  margin: 0;
  color: var(--copper-deep);
  font-family: var(--font-text);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page--properties .rpath__title {
  margin: 0;
  max-width: 19ch;
  color: var(--bottle);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.55rem + 1.8vw, 3.25rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.page--properties .rpath__lede {
  margin: 0;
  color: var(--fg-soft);
  line-height: 1.6;
}

.page--properties .rpath__list {
  position: relative;
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  list-style: none;
  border-top: 1px solid var(--rule-strong);
}

.page--properties .rpath__step {
  position: relative;
  min-width: 0;
  padding: var(--s5) 0;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--s4);
  border-bottom: 1px solid var(--rule);
}

.page--properties .rpath__number {
  color: var(--copper-deep);
  font-family: var(--font-display);
  font-size: 1rem;
}

.page--properties .rpath__step h3 {
  margin: 0;
  color: var(--bottle);
  font-family: var(--font-text);
  font-size: 1rem;
}

.page--properties .rpath__step p {
  margin: var(--s2) 0 0;
  max-width: 34ch;
  color: var(--fg-soft);
  font-size: var(--t-small);
  line-height: 1.6;
}

@media (min-width: 48em) {
  .page--properties .rpath__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--rule);
  }
  .page--properties .rpath__step {
    grid-template-columns: 1fr;
    padding: var(--s5) clamp(var(--s4), 2.5vw, var(--s6)) var(--s6) 0;
    border-bottom: 0;
  }
  .page--properties .rpath__step + .rpath__step {
    padding-left: clamp(var(--s4), 2.5vw, var(--s6));
    border-left: 1px solid var(--rule);
  }
  .page--properties .rpath__step::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--copper);
  }
  .page--properties .rpath__step + .rpath__step::before {
    left: clamp(var(--s4), 2.5vw, var(--s6));
  }
}

@media (max-width: 47.9375em) {
  .page--properties .phero__actions { align-items: stretch; }
  .page--properties .phero__cta,
  .page--properties .phero__call { width: 100%; }
  .page--properties .psx::before { display: none; }
  .page--properties .psx__ask { grid-template-columns: 1.75rem 2.25rem minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .page--properties .phero__cta,
  .page--properties .phero__call { transition: none; }
}

/* ========================================================================
   PROPERTIES — THE HUMAN SEARCH DESK (13 August 2026)

   The supplied portal references are strongest when a clear search action or
   excellent property photograph leads, but weakest when a narrow feed leaves
   half the viewport empty or generic cards create an endless white page. This
   pass keeps the honest zero-inventory state and compresses its service path:
   one brief, one visible human check, one direct handover.
   ======================================================================== */

.page--properties .psx { padding-block: clamp(2.25rem, 4vw, 3.75rem); }

.page--properties .psx::before {
  top: clamp(0.75rem, 1.4vw, 1rem);
  font-size: clamp(2.5rem, 5.4vw, 5.25rem);
}

.page--properties .psx__title {
  max-width: 14ch;
  font-size: clamp(2rem, 1.55rem + 1.8vw, 3.2rem);
  letter-spacing: -0.03em;
}

.page--properties .psx__copy { max-width: 52ch; }
.page--properties .psx__promise { margin-top: var(--s4); }
.page--properties .psx__asks-head { min-height: 3rem; }

.page--properties .psx__ask {
  min-height: 5.2rem;
  padding-block: var(--s3);
}

.page--properties .psx__act {
  padding: clamp(1.5rem, 2.4vw, 2rem);
  gap: var(--s4);
  border: 1px solid rgb(239 194 154 / 24%);
  box-shadow: none;
}

.page--properties .psx__act::before { display: none; }

.page--properties .psx__act-intro,
.page--properties .psx__routes {
  min-width: 0;
  display: grid;
  gap: var(--s3);
}

.page--properties .psx__act-title,
.page--properties .psx__act-copy { margin: 0; }

.page--properties .psx__act-title {
  font-size: clamp(1.75rem, 2.2vw, 2.25rem);
  letter-spacing: -0.025em;
}

.page--properties .psx__human {
  display: grid;
  grid-template-columns: 2.65rem minmax(0, 1fr);
  gap: var(--s3);
  align-items: center;
  padding-block: var(--s4);
  border-top: 1px solid rgb(239 194 154 / 24%);
  border-bottom: 1px solid rgb(239 194 154 / 24%);
}

.page--properties .psx__human-mark {
  width: 2.65rem;
  height: 2.65rem;
  object-fit: contain;
  padding: 0.35rem;
  background: var(--bone-raised);
  border: 1px solid rgb(239 194 154 / 42%);
}

.page--properties .psx__human-copy { margin: 0; }

.page--properties .psx__human-copy strong,
.page--properties .psx__human-copy span { display: block; }

.page--properties .psx__human-copy strong {
  color: var(--on-deep);
  font-size: 0.9rem;
  line-height: 1.35;
}

.page--properties .psx__human-copy span {
  margin-top: var(--s1);
  color: var(--on-deep-soft);
  font-size: 0.76rem;
  line-height: 1.5;
}

.page--properties .psx__lead .psx__portal {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

.page--properties .psx__lead .psx__portal-link { color: var(--bottle); }
.page--properties .psx__lead .psx__portal-note { color: var(--fg-soft); }

.page--properties .psx__routes .psx__act-direct { padding-top: var(--s3); }

.page--properties .rpath {
  max-width: none;
  padding: clamp(2rem, 3.4vw, 3rem) var(--inset);
  display: grid;
  gap: var(--s6);
  background: var(--bottle-deep);
  border-top-color: rgb(239 194 154 / 30%);
}

.page--properties .rpath__head {
  align-content: start;
  max-width: 30rem;
}

.page--properties .rpath__kicker,
.page--properties .rpath__number { color: var(--sand); }

.page--properties .rpath__title {
  color: var(--on-deep);
  font-size: clamp(1.9rem, 1.55rem + 1.2vw, 2.7rem);
}

.page--properties .rpath__lede,
.page--properties .rpath__step p { color: var(--on-deep-soft); }

.page--properties .rpath__list {
  margin: 0;
  border-top-color: rgb(239 194 154 / 38%);
}

.page--properties .rpath__step {
  padding-block: var(--s4);
  border-bottom-color: rgb(239 194 154 / 22%);
}

.page--properties .rpath__step h3 { color: var(--on-deep); }

.page--properties .steps {
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.page--properties .steps__link {
  min-height: 9.25rem;
  padding: clamp(1rem, 1.8vw, 1.35rem);
}

@media (min-width: 62em) {
  .page--properties .psx {
    grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.5fr);
    grid-template-areas:
      "lead asks"
      "act act";
    column-gap: clamp(2rem, 3.6vw, 4rem);
    row-gap: var(--s6);
    align-items: start;
  }

  .page--properties .psx__act {
    display: grid;
    grid-template-columns: minmax(15rem, 0.82fr) minmax(18rem, 1fr) minmax(19rem, 1.06fr);
    gap: 0;
    align-items: center;
  }

  .page--properties .psx__human {
    min-height: 100%;
    margin-inline: var(--s5);
    padding: var(--s3) var(--s5);
    border-top: 0;
    border-bottom: 0;
    border-left: 1px solid rgb(239 194 154 / 24%);
    border-right: 1px solid rgb(239 194 154 / 24%);
  }

  .page--properties .rpath {
    grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 2fr);
    align-items: center;
  }
}

@media (min-width: 48em) {
  .page--properties .rpath__list { border-bottom-color: rgb(239 194 154 / 22%); }

  .page--properties .rpath__step + .rpath__step {
    border-left-color: rgb(239 194 154 / 22%);
  }

  .page--properties .rpath__step::before { background: var(--sand); }
}

@media (max-width: 61.9375em) {
  .page--properties .rpath__list { margin-top: var(--s2); }
}

@media (max-width: 47.9375em) {
  .page--properties .psx { padding-block: 2.25rem; }
  .page--properties .psx__act { margin-top: var(--s2); }
  .page--properties .rpath { gap: var(--s4); }
  .page--properties .rpath__step { padding-block: var(--s4); }
  .page--properties .steps__link { min-height: 0; }
}

/* ================ /epc/ PALETTE: THE FIVE GREENS. 12 August 2026 ========== *
 * Aarav's shades, replacing every dark surface on this page with one deep
 * bottle-green family (his words: premium, not AI-slop charcoal):
 *
 *   #1D241F  the ground        — deep sections, beam cards, the close
 *   #202721  the panel         — feature cell, band-E panel, dark hovers
 *   #212821  the row           — accordion items, quiet lifts
 *   #24342C  the lift          — hover and active surfaces, the brightest
 *
 * Gold and cream stay as the accents. Nearly everything below rides the four
 * tokens; the two veils and the beam footer are the only literals. Appended
 * last so it wins over both earlier /epc/ layers. Contrast re-measured after
 * the swap: gold on #1D241F 6.6:1, ivory on #24342C 11.2:1 — see the pass log.
 * ========================================================================== */

.page--epc {
  --lx-obsidian: #202721;
  --lx-obsidian-soft: #212821;
  --lx-obsidian-lift: #24342c;
  --lx-forest: #1d241f;
}

/* The two veils re-tinted into the same family (previously rgba(9,36,28), a
   bluer forest). Alphas kept exactly as tuned — only the hue moves. */
.page--epc .lx-hero__veil {
  background:
    linear-gradient(90deg, rgba(29, 36, 31, 0.96) 0%, rgba(29, 36, 31, 0.9) 33%, rgba(29, 36, 31, 0.58) 58%, rgba(29, 36, 31, 0.22) 100%),
    linear-gradient(180deg, rgba(32, 39, 33, 0.38) 0%, rgba(32, 39, 33, 0.03) 48%, rgba(32, 39, 33, 0.5) 100%);
}

.page--epc .lx-close__veil {
  background:
    linear-gradient(90deg, rgba(29, 36, 31, 0.97) 0%, rgba(29, 36, 31, 0.91) 48%, rgba(29, 36, 31, 0.64) 100%),
    linear-gradient(180deg, rgba(29, 36, 31, 0.42), rgba(29, 36, 31, 0.66));
}

/* The beam card's footer strip: the lift green at low opacity over the
   ground green, instead of the old blue-forest wash. */
.page--epc .lx-beam__action { background: rgba(36, 52, 44, 0.45); }

/* The greenish shadow tints follow the family so nothing glows blue. */
.page--epc .lx-dock { box-shadow: inset 0 2px 0 rgba(182, 135, 62, 0.7), 0 24px 70px -44px rgba(23, 29, 25, 0.78); }
.page--epc .lx-switch { box-shadow: 0 20px 48px -34px rgba(23, 29, 25, 0.72); }

/* The one green outside the family: the beam hover was #21483a, a minty step
   no shade in the set can reach. Hover now lifts the ground by warming it
   with the gold accent instead of introducing a sixth green. */
@media (hover: hover) and (pointer: fine) {
  .page--epc .lx-beam:hover { background: color-mix(in srgb, #24342c 88%, #e8cfa3 12%); }
}

/* Contrast repairs after the green swap. The family's grounds are a touch
   lighter than the old blue-forest, which dropped the brass #b6873e below AA
   on dark (4.07) and #8a6a3c below AA on cream (4.44). On dark the gold goes
   champagne; on light it deepens. Measured back to 6.5-9.4 after this block. */
.page--epc .lx-scale__title,
.page--epc .lx-steps__title,
.page--epc .lx-badge__kicker,
.page--epc .lx-tag--gold,
.page--epc .lx-cell--feature .lx-tag { color: #e8cfa3; }

.page--epc .lx-head__index,
.page--epc .lx-sources__title,
.page--epc .lx-tag--conditional,
.page--epc .lx-cell:not(.lx-cell--feature) .lx-tag { color: #6f5320; }

/* ---- 23. The popup never covers the action ----------------------------- *
 * Below the width at which the action sits beside the field, it sits under
 * it — and an anchored popup there lands straight on top of the one control
 * the page exists to offer. At those widths the results take their place in
 * the flow instead, so the action is pushed down rather than covered. The
 * bottom-anchored mobile treatment is Component 03's job; this is the floor
 * underneath it.
 * ------------------------------------------------------------------------ */

@media (max-width: 63.99em) {
  .page--sales-valuation .vcombo__list {
    position: static;
    top: auto;
    margin: 0.5rem 0 0;
    max-height: 46vh;
    box-shadow: none;
    border-color: rgb(143 80 36 / 34%);
  }
}

/* ---- 24. The action never moves under the pointer ---------------------- *
 * Everything in the entrance arrives from somewhere except the fileplate,
 * which holds its position and resolves on opacity alone. Two reasons, and
 * the second one is the real one: a control that is still travelling when a
 * reader reaches for it is a control that moves under their cursor, and this
 * is the one control the page exists to offer. It also stops every automated
 * check having to wait out a 1.2s settle before it can press the button.
 * ------------------------------------------------------------------------ */

.page--sales-valuation .vhero[data-vhero-armed] [data-vhero-step="4"] { transform: none; }

/* ============ Buying Guide - the Dukes Buying Desk (13 August 2026) ======= *
 * Every selector below is scoped to .page--buyers-guide. The shared 10 Aug
 * `.bguide`/`.gx` block belongs to the Seller's Guide and the tenant pages;
 * this route no longer emits those classes and nothing here may touch them.
 *
 * Untouched: header, breadcrumb, crest, receptionist, launcher, footer.
 *
 * The composition (approved blueprint, 13 Aug evening):
 *   1 clipped hero          bottle-deep field + diagonally clipped plate
 *   2 the Buying Desk       phase rail | roadmap + context + card stack
 *   3 facts band            distinctions 5/12 + quick answers 7/12
 *   4 proof band            portrait | guidance + review + final actions
 *   5 notes                 disclaimer + sources
 *
 * Geometry: structural corners square, controls 2px, mounts <= 4px.
 * Motion: transform/opacity/colour only, signature ease
 * cubic-bezier(0.16, 1, 0.3, 1); 120-140ms press, 200-240ms state,
 * 480-700ms hero only. Interactions gated behind (hover:hover)+(pointer:
 * fine); :focus-visible immediate; reduced motion resolves finished states.
 * ========================================================================== */

.page--buyers-guide {
  --bgx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bgx-quick: 130ms;
  --bgx-state: 220ms;
  --bgx-measure: 1320px;
}

/* One editorial left edge for every band. `margin: 0 auto` on a grid item is
   justify-self: center and shrinks the block, so width is explicit. */
.page--buyers-guide .bgx-hero__inner,
.page--buyers-guide .bgx-desk__inner,
.page--buyers-guide .bgx-facts__inner,
.page--buyers-guide .bgx-proof__inner,
.page--buyers-guide .bgx-notes__inner {
  width: 100%;
  max-width: var(--bgx-measure);
  margin-inline: auto;
  padding-inline: var(--inset);
}

.page--buyers-guide .bgx { display: block; }

/* Anchored arrivals settle below the sticky site header. */
.page--buyers-guide .bgx-card,
.page--buyers-guide [data-bgx-phase],
.page--buyers-guide .bgx-answer {
  scroll-margin-top: calc(var(--head-h) + 1.5rem);
}

/* --------------------------- shared type + links -------------------------- */

.page--buyers-guide .bgx-link {
  color: var(--copper-deep);
  text-decoration: underline;
  text-underline-offset: 0.24em;
  text-decoration-thickness: 1px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color var(--bgx-state) var(--bgx-ease);
}

.page--buyers-guide .bgx-link--quiet { font-weight: 500; font-size: var(--t-small); }

@media (hover: hover) and (pointer: fine) {
  .page--buyers-guide .bgx-link:hover { color: var(--copper); }
}

.page--buyers-guide .bgx-link:focus-visible { transition: none; }

.page--buyers-guide .bgx-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1.375rem;
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color var(--bgx-state) var(--bgx-ease), border-color var(--bgx-state) var(--bgx-ease),
    color var(--bgx-state) var(--bgx-ease), transform var(--bgx-quick) var(--bgx-ease);
}

.page--buyers-guide .bgx-action--primary {
  background-color: var(--sand);
  border-color: var(--sand);
  color: var(--bottle-deep);
}

.page--buyers-guide .bgx-action--quiet {
  background-color: transparent;
  border-color: var(--rule-on-deep);
  color: var(--on-deep);
}

.page--buyers-guide .bgx-action--text {
  background: none;
  border-color: transparent;
  color: var(--sand);
  padding-inline: 0.25rem;
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

.page--buyers-guide .bgx-action:active { transform: translateY(1px); }

@media (hover: hover) and (pointer: fine) {
  .page--buyers-guide .bgx-action--primary:hover {
    background-color: color-mix(in srgb, var(--sand) 88%, #ffffff);
    border-color: color-mix(in srgb, var(--sand) 88%, #ffffff);
  }
  .page--buyers-guide .bgx-action--quiet:hover { border-color: var(--sand); color: var(--sand); }
  .page--buyers-guide .bgx-action--text:hover { color: color-mix(in srgb, var(--sand) 88%, #ffffff); }
}

.page--buyers-guide .bgx-action:focus-visible { transition: none; }

html:not([data-enhanced]) .page--buyers-guide .bgx-action--text { display: none; }

/* ----------------------------- the clipped hero --------------------------- */

.page--buyers-guide .bgx-hero {
  background: var(--bottle-deep);
  border-top: 3px solid var(--copper);
  color: var(--on-deep);
  --focus-ring: var(--on-deep);
  --focus-halo: rgba(239, 194, 154, 0.4);
  overflow: hidden;
}

.page--buyers-guide .bgx-hero__inner {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  min-height: clamp(30rem, 42vw, 36rem);
}

@media (min-width: 62em) {
  .page--buyers-guide .bgx-hero__inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(20rem, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
}

.page--buyers-guide .bgx-hero__field { min-width: 0; }

.page--buyers-guide .bgx-hero__brand {
  margin: 0 0 clamp(1rem, 2vw, 1.75rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.page--buyers-guide .bgx-hero__brand img { flex: none; width: 40px; height: auto; }

.page--buyers-guide .bgx-hero__eyebrow {
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sand);
}

.page--buyers-guide .bgx-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--on-deep);
}

.page--buyers-guide .bgx-hero__statement {
  margin: var(--s3) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.22;
  color: var(--sand);
  max-width: 24ch;
}

.page--buyers-guide .bgx-hero__support {
  margin: var(--s4) 0 0;
  color: var(--on-deep-soft);
  max-width: 46ch;
  border-left: 2px solid var(--sand);
  padding-left: var(--s4);
}

.page--buyers-guide .bgx-hero__actions {
  margin: clamp(1.25rem, 2.4vw, 2rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
}

/* The metadata row along the base, replacing the reference's contact strip. */
.page--buyers-guide .bgx-hero__meta {
  margin: clamp(1.5rem, 2.8vw, 2.5rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--rule-on-deep);
  padding-top: var(--s4);
}

.page--buyers-guide .bgx-hero__fact { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; }

.page--buyers-guide .bgx-hero__fact dt {
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sand);
}

.page--buyers-guide .bgx-hero__fact dd { margin: 0; color: var(--on-deep); font-size: var(--t-small); }

/* The diagonally clipped plate. The clip is the reference's own polygon;
   the reveal runs once from the right edge and never repeats. */
.page--buyers-guide .bgx-hero__clip {
  min-width: 0;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
  transition: clip-path 700ms var(--bgx-ease);
}

html[data-enhanced] .page--buyers-guide .bgx-hero:not(.is-in) .bgx-hero__clip {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.page--buyers-guide .bgx-hero__mount { margin: 0; }

.page--buyers-guide .bgx-hero__caption,
.page--buyers-guide .bgx-ctx__caption,
.page--buyers-guide .bgx-proof__caption {
  margin: 0.5rem 0 0;
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

.page--buyers-guide .bgx-hero__caption { color: var(--sand); padding-left: 18%; }
.page--buyers-guide .bgx-ctx__caption { color: var(--copper-deep); }
.page--buyers-guide .bgx-proof__caption { color: var(--sand); }

/* The hero copy cascade: one short settle, usable before it finishes. */
.page--buyers-guide .bgx-hero__field > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 480ms var(--bgx-ease), transform 480ms var(--bgx-ease);
}

.page--buyers-guide .bgx-hero.is-in .bgx-hero__field > * { opacity: 1; transform: none; }

.page--buyers-guide .bgx-hero.is-in .bgx-hero__field > :nth-child(1) { transition-delay: 0ms; }
.page--buyers-guide .bgx-hero.is-in .bgx-hero__field > :nth-child(2) { transition-delay: 40ms; }
.page--buyers-guide .bgx-hero.is-in .bgx-hero__field > :nth-child(3) { transition-delay: 80ms; }
.page--buyers-guide .bgx-hero.is-in .bgx-hero__field > :nth-child(4) { transition-delay: 120ms; }
.page--buyers-guide .bgx-hero.is-in .bgx-hero__field > :nth-child(5) { transition-delay: 160ms; }
.page--buyers-guide .bgx-hero.is-in .bgx-hero__field > :nth-child(6) { transition-delay: 200ms; }

html:not([data-enhanced]) .page--buyers-guide .bgx-hero__field > * { opacity: 1; transform: none; }

/* ------------------------------ the Buying Desk --------------------------- */

.page--buyers-guide .bgx-desk { padding-block: clamp(1.75rem, 3.4vw, 3rem); }

.page--buyers-guide .bgx-desk__inner {
  display: grid;
  gap: clamp(1.25rem, 2.6vw, 2rem);
  align-items: start;
}

@media (min-width: 62em) {
  .page--buyers-guide .bgx-desk__inner { grid-template-columns: 16rem minmax(0, 1fr); }
}

/* ------------------------------- the phase rail --------------------------- */

.page--buyers-guide .bgx-drail {
  background: var(--bottle);
  border-top: 3px solid var(--copper);
  color: var(--on-deep);
  --focus-ring: var(--on-deep);
  --focus-halo: rgba(239, 194, 154, 0.4);
  padding: clamp(1rem, 2vw, 1.375rem);
  display: grid;
  gap: var(--s4);
  align-content: start;
}

@media (min-width: 62em) {
  .page--buyers-guide .bgx-drail { position: sticky; top: calc(var(--head-h) + 1rem); }
}

.page--buyers-guide .bgx-drail__kicker {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sand);
}

.page--buyers-guide .bgx-drail__list { list-style: none; margin: 0; padding: 0; display: grid; }

.page--buyers-guide .bgx-drail__item + .bgx-drail__item { border-top: 1px solid var(--rule-on-deep); }

.page--buyers-guide .bgx-drail__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  min-height: 52px;
  padding: 0.5rem 0.5rem 0.5rem 0.625rem;
  border-left: 3px solid transparent;
  text-decoration: none;
  color: var(--on-deep-soft);
  transition: color var(--bgx-state) var(--bgx-ease), background-color var(--bgx-state) var(--bgx-ease),
    border-color var(--bgx-state) var(--bgx-ease);
}

.page--buyers-guide .bgx-drail__n {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--sand);
}

.page--buyers-guide .bgx-drail__text { display: grid; gap: 1px; min-width: 0; }

.page--buyers-guide .bgx-drail__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.2;
  color: var(--on-deep);
}

.page--buyers-guide .bgx-drail__range { font-size: var(--t-small); }

/* Current phase: sand type, the crest-red rule, and the word itself. */
.page--buyers-guide .bgx-drail__link.is-current {
  border-left-color: var(--crest, #7b1e2b);
  background-color: rgba(246, 244, 239, 0.07);
  color: var(--on-deep);
}

.page--buyers-guide .bgx-drail__link.is-current .bgx-drail__name { color: var(--sand); }

.page--buyers-guide .bgx-drail__current {
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sand);
}

.page--buyers-guide .bgx-drail__current[hidden] { display: none; }

.page--buyers-guide .bgx-drail__link:active { background-color: rgba(246, 244, 239, 0.12); }

@media (hover: hover) and (pointer: fine) {
  .page--buyers-guide .bgx-drail__link:hover { background-color: rgba(246, 244, 239, 0.09); color: var(--on-deep); }
}

.page--buyers-guide .bgx-drail__link:focus-visible { transition: none; }

/* Mobile: a horizontal three-item switcher above the workspace. */
@media (max-width: 61.99em) {
  .page--buyers-guide .bgx-drail { position: static; }
  .page--buyers-guide .bgx-drail__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page--buyers-guide .bgx-drail__item + .bgx-drail__item { border-top: 0; border-left: 1px solid var(--rule-on-deep); }
  .page--buyers-guide .bgx-drail__link {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px;
    border-left: 0;
    border-top: 3px solid transparent;
    min-height: 60px;
    padding: 0.5rem 0.5rem;
    text-align: left;
  }
  .page--buyers-guide .bgx-drail__link.is-current { border-top-color: var(--crest, #7b1e2b); }
  .page--buyers-guide .bgx-drail__n { display: none; }
  .page--buyers-guide .bgx-drail__name { font-size: 0.875rem; }
  .page--buyers-guide .bgx-drail__range { font-size: 0.6875rem; }
}

/* --------------------------- find a decision ------------------------------ */

.page--buyers-guide .bgx-find { position: relative; border-top: 1px solid var(--rule-on-deep); padding-top: var(--s3); }

.page--buyers-guide .bgx-find__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.625rem;
  background: none;
  border: 1px solid var(--rule-on-deep);
  border-radius: var(--radius-control);
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--on-deep);
  cursor: pointer;
  transition: color var(--bgx-state) var(--bgx-ease), border-color var(--bgx-state) var(--bgx-ease),
    background-color var(--bgx-state) var(--bgx-ease);
}

.page--buyers-guide .bgx-find__glass { width: 18px; height: 18px; flex: none; }

.page--buyers-guide .bgx-find__button:active { background-color: rgba(246, 244, 239, 0.12); }

@media (hover: hover) and (pointer: fine) {
  .page--buyers-guide .bgx-find__button:hover { border-color: var(--sand); color: var(--sand); }
}

.page--buyers-guide .bgx-find__button:focus-visible { transition: none; }

.page--buyers-guide .bgx-find__button[aria-expanded="true"] { border-color: var(--sand); color: var(--sand); }

.page--buyers-guide .bgx-find__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 30;
  margin-top: 0.375rem;
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--copper);
  box-shadow: 0 20px 44px rgba(17, 26, 22, 0.16);
  padding: var(--s4);
  display: grid;
  gap: var(--s3);
  color: var(--ink);
  --focus-ring: var(--copper-deep);
}

@media (min-width: 62em) {
  .page--buyers-guide .bgx-find__panel { width: min(24rem, 78vw); right: auto; }
}

.page--buyers-guide .bgx-find__panel[hidden] { display: none; }

.page--buyers-guide .bgx-find__label {
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-deep);
}

.page--buyers-guide .bgx-find__input {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--ink);
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
}

.page--buyers-guide .bgx-find__results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  max-height: 17rem;
  overflow-y: auto;
}

.page--buyers-guide .bgx-find__result + .bgx-find__result { border-top: 1px solid var(--rule); }
.page--buyers-guide .bgx-find__result[hidden] { display: none; }

.page--buyers-guide .bgx-find__link {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding: 0.375rem 0.25rem;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--bgx-state) var(--bgx-ease), background-color var(--bgx-state) var(--bgx-ease);
}

.page--buyers-guide .bgx-find__n {
  flex: none;
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--copper-deep);
  min-width: 1.75rem;
}

.page--buyers-guide .bgx-find__link:active,
.page--buyers-guide .bgx-find__link.is-active { background-color: var(--bone-sunk); color: var(--copper-deep); }

@media (hover: hover) and (pointer: fine) {
  .page--buyers-guide .bgx-find__link:hover { background-color: var(--bone-sunk); color: var(--copper-deep); }
}

.page--buyers-guide .bgx-find__link:focus-visible { transition: none; }

.page--buyers-guide .bgx-find__empty { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }
.page--buyers-guide .bgx-find__empty[hidden] { display: none; }

/* --------------------------------- roadmap -------------------------------- */
/* Three nodes, nine ticks, one state. Copper = covered, bottle/sand = here,
   rule = ahead. The connecting line draws with scaleX from the left. */

.page--buyers-guide .bgx-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--copper);
  padding: clamp(0.875rem, 1.8vw, 1.25rem) clamp(0.875rem, 1.8vw, 1.5rem) clamp(0.75rem, 1.6vw, 1.125rem);
  margin-bottom: clamp(1.25rem, 2.6vw, 2rem);
}

.page--buyers-guide .bgx-map__phase { position: relative; min-width: 0; padding-top: 0.25rem; }

.page--buyers-guide .bgx-map__line {
  position: absolute;
  top: 0.6875rem;
  left: calc(-100% + 1.5rem);
  right: calc(100% - 0.3125rem);
  height: 2px;
  background: var(--rule);
  overflow: hidden;
}

.page--buyers-guide .bgx-map__line i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--copper);
  transform: scaleX(var(--map-line, 0));
  transform-origin: left center;
  transition: transform 260ms var(--bgx-ease);
}

.page--buyers-guide .bgx-map__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 0.9375rem;
  height: 0.9375rem;
  border: 2px solid var(--rule);
  border-radius: 50%;
  background: var(--bone-raised);
  transition: border-color var(--bgx-state) var(--bgx-ease), transform var(--bgx-state) var(--bgx-ease);
}

.page--buyers-guide .bgx-map__node i {
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: transparent;
  transition: background-color var(--bgx-state) var(--bgx-ease);
}

.page--buyers-guide .bgx-map__phase[data-map-state="done"] .bgx-map__node { border-color: var(--copper); }
.page--buyers-guide .bgx-map__phase[data-map-state="done"] .bgx-map__node i { background: var(--copper); }

.page--buyers-guide .bgx-map__phase[data-map-state="active"] .bgx-map__node {
  border-color: var(--bottle);
  background: var(--bottle);
  transform: scale(1.04);
}

.page--buyers-guide .bgx-map__phase[data-map-state="active"] .bgx-map__node i { background: var(--sand); }

.page--buyers-guide .bgx-map__label { display: block; margin-top: 0.5rem; }

.page--buyers-guide .bgx-map__phase-name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--ink);
}

.page--buyers-guide .bgx-map__phase-range { display: block; font-size: 0.6875rem; color: var(--ink-soft); }

.page--buyers-guide .bgx-map__ticks { display: flex; gap: 0.375rem; margin-top: 0.5rem; }

.page--buyers-guide .bgx-map__tick {
  width: 1.125rem;
  height: 3px;
  background: var(--rule);
  transition: background-color var(--bgx-state) var(--bgx-ease);
}

.page--buyers-guide .bgx-map__tick[data-tick-state="done"] { background: var(--copper); }
.page--buyers-guide .bgx-map__tick[data-tick-state="active"] { background: var(--bottle); }

@media (max-width: 47.99em) {
  .page--buyers-guide .bgx-map { padding-inline: 0.75rem; }
  .page--buyers-guide .bgx-map__phase-name { font-size: 0.8125rem; }
  .page--buyers-guide .bgx-map__tick { width: 0.875rem; }
}

/* ------------------------------ phase groups ------------------------------ */

.page--buyers-guide .bgx-group {
  display: grid;
  gap: clamp(1.25rem, 2.6vw, 2rem);
  align-items: start;
}

.page--buyers-guide .bgx-group[hidden] { display: none; }

.page--buyers-guide .bgx-group + .bgx-group { margin-top: clamp(2rem, 4vw, 3rem); }

@media (min-width: 56em) {
  .page--buyers-guide .bgx-group { grid-template-columns: minmax(15rem, 0.55fr) minmax(0, 1.45fr); }
}

.page--buyers-guide .bgx-ctx { min-width: 0; display: grid; gap: var(--s3); align-content: start; }

.page--buyers-guide .bgx-ctx__kicker {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-deep);
}

.page--buyers-guide .bgx-ctx__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.12;
  color: var(--ink);
}

.page--buyers-guide .bgx-ctx__support { margin: 0; color: var(--ink-soft); max-width: 40ch; }

.page--buyers-guide .bgx-ctx__media { margin-top: var(--s3); }
.page--buyers-guide .bgx-ctx__mount { margin: 0; }

@media (max-width: 55.99em) {
  /* Mobile keeps one clean reading column and no repeated giant frames. */
  .page--buyers-guide .bgx-ctx__media { display: none; }
}

/* ------------------------------ the card stack ---------------------------- */

.page--buyers-guide .bgx-stack { min-width: 0; display: grid; gap: clamp(0.625rem, 1.4vw, 1rem); align-content: start; }

.page--buyers-guide .bgx-card {
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--sand);
  min-width: 0;
  transition: border-color var(--bgx-state) var(--bgx-ease), box-shadow var(--bgx-state) var(--bgx-ease);
}

/* The active card visibly rises; the compact two stay flush. */
.page--buyers-guide .bgx-card.is-open {
  border-top-color: var(--copper);
  box-shadow: 0 14px 34px rgba(17, 26, 22, 0.1);
}

.page--buyers-guide .bgx-card__head { margin: 0; }

.page--buyers-guide .bgx-card__button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 52px;
  padding: 0.625rem clamp(0.875rem, 1.8vw, 1.25rem);
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: color var(--bgx-state) var(--bgx-ease), background-color var(--bgx-state) var(--bgx-ease);
}

.page--buyers-guide .bgx-card__index {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--copper);
}

.page--buyers-guide .bgx-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  line-height: 1.2;
}

.page--buyers-guide .bgx-card__state {
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-deep);
}

.page--buyers-guide .bgx-card__state[hidden] { display: none; }

.page--buyers-guide .bgx-card__sign {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
  transition: transform 200ms var(--bgx-ease);
}

.page--buyers-guide .bgx-card__sign::before,
.page--buyers-guide .bgx-card__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--copper-deep);
}

.page--buyers-guide .bgx-card__sign::after { transform: rotate(90deg); }

.page--buyers-guide .bgx-card.is-open .bgx-card__sign { transform: rotate(45deg); }

.page--buyers-guide .bgx-card__button:active { background-color: color-mix(in srgb, var(--bone-sunk) 55%, transparent); }

@media (hover: hover) and (pointer: fine) {
  .page--buyers-guide .bgx-card__button:hover { color: var(--copper-deep); }
}

.page--buyers-guide .bgx-card__button:focus-visible { transition: none; }

.page--buyers-guide .bgx-card__body {
  padding: 0 clamp(0.875rem, 1.8vw, 1.25rem) clamp(1rem, 2vw, 1.5rem);
}

.page--buyers-guide .bgx-card__body[hidden] { display: none; }

/* The stage change: 8px in the direction of travel, plus opacity. */
.page--buyers-guide .bgx-card__body[data-bgx-enter="forward"] { animation: bgx-enter-forward 210ms var(--bgx-ease) both; }
.page--buyers-guide .bgx-card__body[data-bgx-enter="back"] { animation: bgx-enter-back 210ms var(--bgx-ease) both; }

@keyframes bgx-enter-forward {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes bgx-enter-back {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.page--buyers-guide .bgx-card__meta {
  margin: 0 0 var(--s3);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-deep);
}

.page--buyers-guide .bgx-card__intro { margin: 0; color: var(--ink); max-width: 64ch; }

.page--buyers-guide .bgx-card__action { margin: var(--s4) 0 0; }

/* ---------------------------- valuation v survey -------------------------- */

.page--buyers-guide .bgx-vs {
  margin: var(--s5) 0 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

@media (min-width: 44em) {
  .page--buyers-guide .bgx-vs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page--buyers-guide .bgx-vs__side {
  background: var(--bone);
  padding: clamp(0.875rem, 1.8vw, 1.25rem);
  min-width: 0;
  transition: background-color var(--bgx-state) var(--bgx-ease);
}

.page--buyers-guide .bgx-vs__label {
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--copper-deep);
}

.page--buyers-guide .bgx-vs__facts { margin: 0 0 var(--s3); display: grid; gap: var(--s2); }
.page--buyers-guide .bgx-vs__fact { display: grid; gap: 1px; }

.page--buyers-guide .bgx-vs__fact dt {
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper);
}

.page--buyers-guide .bgx-vs__fact dd { margin: 0; font-size: var(--t-small); color: var(--ink); }
.page--buyers-guide .bgx-vs__detail { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }

.page--buyers-guide .bgx-vs__side:active { background: var(--bone-raised); }
.page--buyers-guide .bgx-vs__side:focus-visible { background: var(--bone-raised); transition: none; }

@media (hover: hover) and (pointer: fine) {
  .page--buyers-guide .bgx-vs__side:hover { background: var(--bone-raised); }
}

/* ------------------------------- disclosures ------------------------------ */

.page--buyers-guide .bgx-more { margin: var(--s4) 0 0; border-top: 1px solid var(--rule); }

.page--buyers-guide .bgx-more__summary,
.page--buyers-guide .bgx-answer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 44px;
  padding: 0.5rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-text);
  font-weight: 700;
  color: var(--copper-deep);
  transition: color var(--bgx-state) var(--bgx-ease);
}

.page--buyers-guide .bgx-more__summary::-webkit-details-marker,
.page--buyers-guide .bgx-answer__summary::-webkit-details-marker { display: none; }

@media (hover: hover) and (pointer: fine) {
  .page--buyers-guide .bgx-more__summary:hover,
  .page--buyers-guide .bgx-answer__summary:hover { color: var(--copper); }
}

.page--buyers-guide .bgx-more__summary:focus-visible,
.page--buyers-guide .bgx-answer__summary:focus-visible { transition: none; }

.page--buyers-guide .bgx-more__sign,
.page--buyers-guide .bgx-answer__sign {
  position: relative;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 200ms var(--bgx-ease);
}

.page--buyers-guide .bgx-more__sign::before,
.page--buyers-guide .bgx-more__sign::after,
.page--buyers-guide .bgx-answer__sign::before,
.page--buyers-guide .bgx-answer__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
}

.page--buyers-guide .bgx-more__sign::after,
.page--buyers-guide .bgx-answer__sign::after { transform: rotate(90deg); }

.page--buyers-guide .bgx-more[open] .bgx-more__sign,
.page--buyers-guide .bgx-answer[open] .bgx-answer__sign { transform: rotate(45deg); }

.page--buyers-guide .bgx-more__body { padding-bottom: var(--s3); }

.page--buyers-guide .bgx-points { margin: 0; display: grid; gap: var(--s4); }

@media (min-width: 52em) {
  .page--buyers-guide .bgx-points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
}

.page--buyers-guide .bgx-point { min-width: 0; border-top: 1px solid var(--rule); padding-top: var(--s3); }

.page--buyers-guide .bgx-point__term {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

.page--buyers-guide .bgx-point__detail { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }

.page--buyers-guide .bgx-more[open] .bgx-point,
.page--buyers-guide .bgx-answer[open] .bgx-answer__body {
  animation: bgx-row 200ms var(--bgx-ease) both;
}

.page--buyers-guide .bgx-more[open] .bgx-point { animation-delay: calc(var(--row-index, 0) * 30ms); }

@keyframes bgx-row {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------- the deposit panel --------------------------- */

.page--buyers-guide .bgx-budget {
  margin: var(--s5) 0 0;
  background: var(--bone-sunk);
  border-top: 3px solid var(--copper);
  padding: clamp(1.125rem, 2.2vw, 1.625rem);
  display: grid;
  gap: var(--s4);
}

.page--buyers-guide .bgx-budget__head { display: grid; gap: 2px; }

.page--buyers-guide .bgx-budget__kicker {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-deep);
}

.page--buyers-guide .bgx-budget__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.2;
  color: var(--ink);
}

.page--buyers-guide .bgx-budget__body { display: grid; gap: clamp(1.125rem, 2.4vw, 2rem); }

@media (min-width: 46em) {
  .page--buyers-guide .bgx-budget__body { grid-template-columns: minmax(0, 1.15fr) minmax(11rem, 0.85fr); }
}

.page--buyers-guide .bgx-budget__controls { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.page--buyers-guide .bgx-budget__control { display: grid; gap: 2px; min-width: 0; }

.page--buyers-guide .bgx-budget__label {
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-deep);
}

.page--buyers-guide .bgx-budget__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4);
}

.page--buyers-guide .bgx-budget__out {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  color: var(--ink);
  min-width: 5.5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.page--buyers-guide .bgx-budget__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.page--buyers-guide .bgx-budget__range::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(107, 70, 32, 0.24);
  border: 0;
}

.page--buyers-guide .bgx-budget__range::-moz-range-track {
  height: 4px;
  background: rgba(107, 70, 32, 0.24);
  border: 0;
}

.page--buyers-guide .bgx-budget__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 26px;
  margin-top: -11px;
  background: var(--bottle);
  border: 1px solid var(--copper-deep);
  border-radius: 0;
  transition: background-color var(--bgx-quick) var(--bgx-ease);
}

.page--buyers-guide .bgx-budget__range::-moz-range-thumb {
  width: 14px;
  height: 26px;
  background: var(--bottle);
  border: 1px solid var(--copper-deep);
  border-radius: 0;
  transition: background-color var(--bgx-quick) var(--bgx-ease);
}

.page--buyers-guide .bgx-budget__range:active::-webkit-slider-thumb { background: var(--copper-deep); }
.page--buyers-guide .bgx-budget__range:active::-moz-range-thumb { background: var(--copper-deep); }

@media (hover: hover) and (pointer: fine) {
  .page--buyers-guide .bgx-budget__range:hover::-webkit-slider-thumb { background: var(--copper-deep); }
  .page--buyers-guide .bgx-budget__range:hover::-moz-range-thumb { background: var(--copper-deep); }
}

.page--buyers-guide .bgx-budget__bar {
  margin: var(--s2) 0 0;
  height: 12px;
  background: var(--bottle);
  border: 1px solid var(--rule);
  overflow: hidden;
}

.page--buyers-guide .bgx-budget__bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--sand);
  transform: scaleX(var(--deposit-scale, 0.15));
  transform-origin: left center;
  transition: transform 200ms var(--bgx-ease);
}

.page--buyers-guide .bgx-budget__figures {
  margin: 0;
  display: grid;
  gap: var(--s3);
  align-content: start;
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--copper);
  padding: clamp(0.875rem, 1.8vw, 1.25rem);
  min-width: 0;
}

.page--buyers-guide .bgx-budget__figure dt {
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-deep);
  margin-bottom: 0.125rem;
}

.page--buyers-guide .bgx-budget__figure dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.page--buyers-guide .bgx-budget__note {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
  border-top: 1px solid rgba(107, 70, 32, 0.28);
  padding-top: var(--s3);
  max-width: 76ch;
}

.page--buyers-guide .bgx-budget__action { margin: 0; }

/* ------------------------------- facts band ------------------------------- */

.page--buyers-guide .bgx-facts {
  background: var(--bone-sunk);
  border-top: 3px solid var(--copper);
  padding-block: clamp(1.75rem, 3.4vw, 3rem);
}

.page--buyers-guide .bgx-facts__inner {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

@media (min-width: 62em) {
  .page--buyers-guide .bgx-facts__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.page--buyers-guide .bgx-facts__kicker {
  margin: 0 0 var(--s2);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-deep);
}

.page--buyers-guide .bgx-critical__title,
.page--buyers-guide .bgx-answers__title {
  margin: 0 0 var(--s4);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.15;
  color: var(--ink);
  max-width: 26ch;
}

.page--buyers-guide .bgx-critical__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
}

/* Each distinction reads as a defined card, not a plain row: a hairline
   border, a copper spine on the left, and a restrained hover/focus lift.
   They stay stacked in one column (never a floating Bento grid) — the
   card treatment is applied to the existing row, not a new layout. */
.page--buyers-guide .bgx-critical__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4);
  background: var(--bone-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--copper);
  padding: var(--s4) clamp(1rem, 2vw, 1.375rem);
  min-width: 0;
  transition: border-color var(--bgx-state) var(--bgx-ease), box-shadow var(--bgx-state) var(--bgx-ease),
    transform var(--bgx-quick) var(--bgx-ease);
}

.page--buyers-guide .bgx-critical__item:active { transform: translateY(0); box-shadow: none; }

.page--buyers-guide .bgx-critical__item:focus-within {
  border-left-color: var(--copper-deep);
  box-shadow: 0 10px 24px rgba(17, 26, 22, 0.08);
}

@media (hover: hover) and (pointer: fine) {
  .page--buyers-guide .bgx-critical__item:hover {
    border-left-color: var(--copper-deep);
    box-shadow: 0 10px 24px rgba(17, 26, 22, 0.08);
    transform: translateY(-2px);
  }
}

.page--buyers-guide .bgx-critical__n {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--copper);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--copper-deep);
}

.page--buyers-guide .bgx-critical__body { min-width: 0; }

.page--buyers-guide .bgx-critical__pair { margin: 0 0 var(--s2); display: grid; gap: 1px; }

.page--buyers-guide .bgx-critical__a,
.page--buyers-guide .bgx-critical__b {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.2;
  color: var(--ink);
}

.page--buyers-guide .bgx-critical__sep {
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-deep);
}

.page--buyers-guide .bgx-critical__detail { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }
.page--buyers-guide .bgx-critical__from { margin: var(--s2) 0 0; }

.page--buyers-guide .bgx-answers__list { border-top: 1px solid rgba(107, 70, 32, 0.28); }

.page--buyers-guide .bgx-answer { border-bottom: 1px solid rgba(107, 70, 32, 0.28); }

.page--buyers-guide .bgx-answer__summary {
  min-height: 56px;
  padding: 0.75rem 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
}

.page--buyers-guide .bgx-answer__body { padding: 0 0 var(--s4); max-width: 66ch; }
.page--buyers-guide .bgx-answer__a { margin: 0; color: var(--ink-soft); }
.page--buyers-guide .bgx-answer__where { margin: var(--s2) 0 0; }

/* -------------------------------- the proof ------------------------------- */

.page--buyers-guide .bgx-proof {
  background: var(--bottle);
  color: var(--on-deep);
  --focus-ring: var(--on-deep);
  --focus-halo: rgba(239, 194, 154, 0.4);
  border-top: 3px solid var(--copper);
  padding-block: clamp(1.75rem, 3.4vw, 3rem);
}

.page--buyers-guide .bgx-proof__inner { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }

@media (min-width: 62em) {
  .page--buyers-guide .bgx-proof__inner { grid-template-columns: minmax(15rem, 0.4fr) minmax(0, 1.6fr); }
}

.page--buyers-guide .bgx-proof__portrait { min-width: 0; }

@media (min-width: 62em) {
  .page--buyers-guide .bgx-proof__portrait { max-width: 19rem; }
}

.page--buyers-guide .bgx-proof__mount { margin: 0; }

.page--buyers-guide .bgx-proof__copy { min-width: 0; }

.page--buyers-guide .bgx-proof__kicker {
  margin: 0 0 var(--s2);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sand);
}

.page--buyers-guide .bgx-proof__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.12;
  color: var(--on-deep);
  max-width: 22ch;
}

.page--buyers-guide .bgx-proof__lede { margin: var(--s4) 0 0; color: var(--on-deep-soft); max-width: 58ch; }

.page--buyers-guide .bgx-proof__limit {
  margin: var(--s4) 0 0;
  font-size: var(--t-small);
  color: var(--on-deep-soft);
  max-width: 60ch;
}

.page--buyers-guide .bgx-proof__review {
  margin: var(--s5) 0 0;
  background: rgba(246, 244, 239, 0.05);
  border: 1px solid var(--rule-on-deep);
  border-top: 2px solid var(--sand);
  padding: clamp(1rem, 2vw, 1.375rem);
  max-width: 44rem;
}

.page--buyers-guide .bgx-proof__stars {
  margin: 0 0 var(--s2);
  font-size: 0.9375rem;
  letter-spacing: 0.18em;
  color: var(--sand);
}

.page--buyers-guide .bgx-proof__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.4;
  color: var(--on-deep);
}

.page--buyers-guide .bgx-proof__by {
  margin: var(--s4) 0 0;
  display: flex;
  align-items: center;
  gap: var(--s3);
  border-top: 1px solid var(--rule-on-deep);
  padding-top: var(--s3);
}

.page--buyers-guide .bgx-proof__avatar { flex: none; width: 44px; height: 44px; object-fit: cover; }
.page--buyers-guide .bgx-proof__who { display: grid; gap: 1px; min-width: 0; }
.page--buyers-guide .bgx-proof__name { font-weight: 700; font-size: var(--t-small); color: var(--on-deep); }

.page--buyers-guide .bgx-proof__source {
  font-size: var(--t-small);
  color: var(--sand);
  text-decoration: underline;
  text-underline-offset: 0.24em;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color var(--bgx-state) var(--bgx-ease);
}

@media (hover: hover) and (pointer: fine) {
  .page--buyers-guide .bgx-proof__source:hover { color: var(--on-deep); }
}

.page--buyers-guide .bgx-proof__source:focus-visible { transition: none; }

.page--buyers-guide .bgx-proof__close {
  margin-top: clamp(1.25rem, 2.6vw, 2rem);
  border-top: 1px solid var(--rule-on-deep);
  padding-top: clamp(1rem, 2vw, 1.5rem);
}

.page--buyers-guide .bgx-proof__close-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.15;
  color: var(--on-deep);
  max-width: 26ch;
}

.page--buyers-guide .bgx-proof__actions {
  margin: var(--s4) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
}

/* --------------------------------- notes ---------------------------------- */

.page--buyers-guide .bgx-notes { padding-block: clamp(1.5rem, 2.8vw, 2.25rem); }

.page--buyers-guide .bgx-notes__inner {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.5rem, 2.6vw, 2.25rem);
}

@media (min-width: 62em) {
  .page--buyers-guide .bgx-notes__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page--buyers-guide .bgx-notes__kicker {
  margin: 0 0 var(--s3);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-deep);
}

.page--buyers-guide .bgx-notes__copy { margin: 0; font-size: var(--t-small); color: var(--ink-soft); max-width: 62ch; }

.page--buyers-guide .bgx-sources { min-width: 0; }

.page--buyers-guide .bgx-sources__title {
  margin: 0 0 var(--s3);
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-deep);
}

.page--buyers-guide .bgx-sources__list { list-style: none; margin: 0; padding: 0; display: grid; }
.page--buyers-guide .bgx-sources__list li { border-top: 1px solid var(--rule); }
.page--buyers-guide .bgx-sources__list li:first-child { border-top: 0; }

/* ------------------------------ reduced motion ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  .page--buyers-guide .bgx-hero__field > *,
  html[data-enhanced] .page--buyers-guide .bgx-hero:not(.is-in) .bgx-hero__clip {
    opacity: 1;
    transform: none;
    transition: none;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
  }
  .page--buyers-guide .bgx-hero__clip { transition: none; }
  .page--buyers-guide .bgx-map__line i,
  .page--buyers-guide .bgx-map__node,
  .page--buyers-guide .bgx-budget__bar-fill,
  .page--buyers-guide .bgx-card__sign,
  .page--buyers-guide .bgx-more__sign,
  .page--buyers-guide .bgx-answer__sign { transition: none; }
  .page--buyers-guide .bgx-action:active { transform: none; }
  .page--buyers-guide .bgx-card__body[data-bgx-enter],
  .page--buyers-guide .bgx-more[open] .bgx-point,
  .page--buyers-guide .bgx-answer[open] .bgx-answer__body { animation: none; }
}

/* ------------------------------ forced colours ---------------------------- */

@media (forced-colors: active) {
  .page--buyers-guide .bgx-drail__link.is-current { border-left-color: Highlight; }
  .page--buyers-guide .bgx-card,
  .page--buyers-guide .bgx-map,
  .page--buyers-guide .bgx-budget__figures,
  .page--buyers-guide .bgx-proof__review,
  .page--buyers-guide .bgx-find__panel { border: 1px solid CanvasText; }
  .page--buyers-guide .bgx-map__tick[data-tick-state="done"],
  .page--buyers-guide .bgx-map__tick[data-tick-state="active"],
  .page--buyers-guide .bgx-map__line i,
  .page--buyers-guide .bgx-budget__bar-fill { background: Highlight; forced-color-adjust: none; }
  .page--buyers-guide .bgx-action { border-color: CanvasText; }
}

/* ---------------------------------- print --------------------------------- */
/* Print is the whole guide: everything opens, controls and decoration go. */

@media print {
  .page--buyers-guide .bgx-drail,
  .page--buyers-guide .bgx-map,
  .page--buyers-guide .bgx-hero__actions,
  .page--buyers-guide .bgx-proof__actions,
  .page--buyers-guide .bgx-hero__clip,
  .page--buyers-guide .bgx-ctx__media,
  .page--buyers-guide .bgx-proof__portrait,
  .page--buyers-guide .bgx-card__sign,
  .page--buyers-guide .bgx-more__sign,
  .page--buyers-guide .bgx-answer__sign,
  .page--buyers-guide .bgx-budget__range,
  .page--buyers-guide .bgx-budget__bar { display: none !important; }

  .page--buyers-guide .bgx-hero,
  .page--buyers-guide .bgx-drail,
  .page--buyers-guide .bgx-proof {
    background: none !important;
    color: #000 !important;
    border-top: 2px solid #000;
  }

  .page--buyers-guide .bgx-hero__title,
  .page--buyers-guide .bgx-hero__statement,
  .page--buyers-guide .bgx-hero__support,
  .page--buyers-guide .bgx-hero__fact dd,
  .page--buyers-guide .bgx-proof__title,
  .page--buyers-guide .bgx-proof__lede,
  .page--buyers-guide .bgx-proof__quote { color: #000 !important; }

  .page--buyers-guide .bgx-group[hidden] { display: grid !important; }
  .page--buyers-guide .bgx-card__body[hidden] { display: block !important; }
  .page--buyers-guide .bgx-more__body,
  .page--buyers-guide .bgx-answer__body { display: block !important; }
  .page--buyers-guide .bgx-card,
  .page--buyers-guide .bgx-answer { break-inside: avoid; }
  .page--buyers-guide .bgx-group { break-before: page; }
}