/* ======================================================================
 * HOME 2026 — PART ONE. Top of the page to the end of the route cards.
 *
 * Every rule is scoped to [data-page="home"]. Nothing here can reach
 * another page. dukes.css loads first and still supplies the header, the
 * footer, the .chapter rule, the assistant's own component styles and
 * everything part two renders; this sheet dresses part one on top of it.
 *
 * ITEM 9 — COLOUR, WITH JOBS.
 * The top of the page was deep green, beige and near black on repeat.
 * Two new FIELD tints and three new CARD tints are introduced, all drawn
 * from the Dukes family. Nothing is tinted at random; each token below
 * states the job it does. Computed contrast for every pair is in the
 * report and in scratchpad/home-pass/report/.
 * ====================================================================== */

[data-page="home"] {
  /* ---- fields ----
     19 AUG RECOLOUR. Aarav: "the colours do not match the Seller's Guide
     and the other pages". They did not: this page was a green/sage/clay
     world of its own while the guide — the design authority — runs navy,
     oxblood, cream and pale blue. The FIELDS now come from the guide's
     palette directly, so the homepage reads as the same house. Gold is
     kept as the identity accent, because it is the crown in the mark and
     it is what the sunset film is lit with; oxblood joins it as the
     secondary accent, exactly as the guide uses it. */
  --hx-forest-deep: #0d1d31;   /* guide NIGHT · hero base, under the film */
  --hx-slate-green: #182d45;   /* guide NIGHT-SOFT · job: the entry-strip
                                  field. Sits between the hero base above
                                  and the light assistant band below. */
  --hx-sage: #dbe8ec;          /* guide BLUE · job: the assistant band.
                                  The guide's own pale blue, so the prime
                                  slot reads as one of its chapters. */
  --hx-clay: #f2ede4;          /* guide PAPER · job: the route-card band */
  --hx-white: #fbf8f2;         /* guide CREAM · THE premium white, plates only */

  /* ---- route-card tints — three jobs, now in the guide's family ---- */
  --hx-card-forest: #16283d;   /* let · night, closest to the guide's chapter plates */
  --hx-card-bronze: #7b2430;   /* sell · the guide's OXBLOOD, its accent colour */
  --hx-card-slate: #1d3446;    /* manage · a cooler, lifted night */

  /* ---- ink ---- */
  --hx-ink: #171a20;           /* guide INK */
  --hx-ink-soft: #4f555b;      /* guide INK-SOFT */
  --hx-cream-text: #f4eee3;
  --hx-cream-text-soft: #d3ccbe;

  /* ---- identity ---- */
  --hx-gold: #c5a66a;
  --hx-gold-lift: #d3b87f;
  --hx-bronze: #7b2430;        /* was a brown; now the guide's oxblood, so
                                  kickers and small accents match the guide */

  /* ---- lines ---- */
  --hx-line-light: rgba(28, 33, 31, 0.16);
  --hx-line-strong: rgba(28, 33, 31, 0.32);
  --hx-line-dark: rgba(244, 238, 227, 0.2);
  --hx-line-dark-strong: rgba(244, 238, 227, 0.36);

  /* ---- geometry. Item 7: the rhythm is one step tighter than the old
          band padding, which ran to 104px a side with half-empty bands. ---- */
  /* THE SELLER'S GUIDE IS THE DESIGN AUTHORITY. These four are its
     language, adopted here rather than reinvented:
       · Gloock as the display face, already global in dukes.css
       · a 1640px-class shell, against the 1200px column this page had
       · the signature asymmetric corner, 18/18/72/18
       · an 8px control radius, not a pill
     Where home goes further than the guide is stated at each device. */
  --hx-display: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --hx-colw: 1560px;
  --hx-gutter: clamp(18px, 3vw, 40px);
  --hx-radius: 18px;
  --hx-radius-plate: 18px 18px 72px 18px;
  --hx-radius-sm: 8px;
  --hx-lift: 0 34px 80px -46px rgba(8, 14, 10, 0.72);
  --hx-tap: 48px;
  --hx-row: 40px;
  --hx-band-y: clamp(40px, 4.4vw, 68px);
  --hx-seam: 4.75rem;
}

/* ---------------------------------------------------------------- *
 * ITEM 2 — HEADER SPACING.
 * "Contact" (the last nav item) sat hard against the Properties button
 * and read as part of the button group. The nav list is pushed away from
 * the two header actions and a hairline divider states the break.
 *
 * SCOPED TO THIS PAGE. The header is shared and out of scope for editing,
 * so this is a homepage-only rule; it is one selector away from being
 * promoted site-wide when you want it. Checked at 1280, 1440 and 1920.
 * ---------------------------------------------------------------- */
@media (min-width: 62em) {
  [data-page="home"] .site-head__actions {
    margin-inline-start: clamp(1.5rem, 3vw, 3rem);
    padding-inline-start: clamp(1.5rem, 3vw, 3rem);
    border-inline-start: 1px solid var(--hx-line-light);
  }
  [data-page="home"] .nav--wide .nav__list { padding-inline-end: 0; }
}

/* ---------------------------------------------------------------- *
 * SHELL
 * ---------------------------------------------------------------- */
[data-page="home"] main { overflow-x: clip; }

[data-page="home"] .hx-band {
  position: relative;
  width: 100%;
  margin: 0;
  padding-block: var(--hx-band-y);
}
[data-page="home"] .hx-col {
  width: 100%;
  max-width: var(--hx-colw);
  margin-inline: auto;
  padding-inline: var(--hx-gutter);
}

[data-page="home"] .hx-band--entry {
  background: var(--hx-slate-green);
  color: var(--hx-cream-text);
  padding-block: clamp(16px, 2vw, 26px);
}
[data-page="home"] .hx-band--sage { background: var(--hx-sage); color: var(--hx-ink); }
[data-page="home"] .hx-band--clay { background: var(--hx-clay); color: var(--hx-ink); }

[data-page="home"] .hx-band .chapter { margin-bottom: clamp(18px, 2.2vw, 28px); }
[data-page="home"] .hx-band--clay .chapter__index { color: var(--hx-bronze); }

[data-page="home"] .hx-head { max-width: 62ch; margin-bottom: clamp(20px, 2.6vw, 32px); }

/* Item 7: display type one step down. The old h-section ran to 2.6rem
   against copy that never justified it. */
[data-page="home"] .hx-h2 {
  margin: 0 0 0.6rem;
  font-family: var(--hx-display);
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: inherit;
}
[data-page="home"] .hx-lede {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(0.98rem, 1.1vw, 1.06rem);
  line-height: 1.55;
  color: var(--hx-ink-soft);
}

/* ---------------------------------------------------------------- *
 * INTERACTION STANDARD (item 8, item 11)
 * No bare underlines. Every link is a chip or a button, every control
 * clears 48px, every hover sits behind a hover:hover guard, and every
 * control has a real pressed state.
 * ---------------------------------------------------------------- */
[data-page="home"] .hx-btn,
[data-page="home"] .hx-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--hx-tap);
  padding: 0.72rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--hx-radius-sm);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
[data-page="home"] .hx-chip { padding: 0.6rem 1.05rem; font-size: 0.9rem; }
[data-page="home"] .hx-chip__arrow { transition: transform 0.18s ease; }

[data-page="home"] .hx-btn--gold {
  background: var(--hx-gold);
  color: var(--hx-ink);
  border-color: var(--hx-gold);
  box-shadow: 0 10px 26px -14px rgba(8, 11, 9, 0.9);
}
/* The hero's second action. It was cream text on the film with no field
   and no border — 1.24:1 at the brightest frame. It is now a real
   surface with its own weight, deliberately quieter than the gold. */
[data-page="home"] .hx-btn--onfilm {
  background: rgba(244, 238, 227, 0.95);
  color: var(--hx-ink);
  border-color: rgba(244, 238, 227, 0.95);
}
[data-page="home"] .hx-chip--gold { background: var(--hx-gold); color: var(--hx-ink); border-color: var(--hx-gold); }

@media (hover: hover) {
  [data-page="home"] .hx-btn--gold:hover { background: var(--hx-gold-lift); border-color: var(--hx-gold-lift); transform: translateY(-2px); }
  [data-page="home"] .hx-btn--onfilm:hover { background: #ffffff; border-color: #ffffff; transform: translateY(-2px); }
  [data-page="home"] .hx-btn:hover .hx-chip__arrow,
  [data-page="home"] .hx-chip:hover .hx-chip__arrow { transform: translateX(3px); }
}
/* Pressed. Both hero buttons had none at all. */
[data-page="home"] .hx-btn:active { transform: translateY(0); box-shadow: 0 4px 12px -8px rgba(8, 11, 9, 0.9); }

[data-page="home"] .hx-btn:focus-visible,
[data-page="home"] .hx-chip:focus-visible,
[data-page="home"] .hx-rating:focus-visible,
[data-page="home"] .hx-entry__plate:focus-visible,
[data-page="home"] .hx-route__link:focus-visible,
[data-page="home"] .hx-nav__pill:focus-visible,
[data-page="home"] .hx-nav__link:focus-visible {
  outline: 3px solid var(--hx-gold);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- *
 * ITEM 12 — MEDIA SLOTS
 * One container, one aspect ratio, video-ready. A still and a film
 * occupy the identical box, so the swap costs no layout and no rebuild.
 * ---------------------------------------------------------------- */
[data-page="home"] .hx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

[data-page="home"] .hx-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--hx-media-ratio, 3 / 2);
  margin: 0;
  overflow: hidden;
  border-radius: var(--hx-radius);
  background: rgba(28, 33, 31, 0.06);
}
[data-page="home"] .hx-media--flush { border-radius: 0; }
[data-page="home"] .hx-media__video,
[data-page="home"] .hx-media__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The poster is a real element under the video, so a still is what is on
   screen with no JavaScript, before first frame, and under reduced
   motion — where the video is removed entirely, by CSS, not a script. */
[data-page="home"] .hx-media__poster { z-index: 0; }
[data-page="home"] .hx-media__video { z-index: 1; }

/* ---- the branded crown placeholder ---- */
[data-page="home"] .hx-media--slot {
  border: 1px solid var(--hx-line-dark);
  background:
    linear-gradient(155deg, rgba(197, 166, 106, 0.22), rgba(197, 166, 106, 0) 58%),
    rgba(12, 15, 13, 0.35);
}
[data-page="home"] .hx-media__crown {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 38%;
  max-width: 7.5rem;
  height: auto;
  transform: translate(-50%, -58%);
  color: var(--hx-gold);
  opacity: 0.38;
}
[data-page="home"] .hx-media__chip,
[data-page="home"] .hx-media__ratio {
  position: absolute;
  bottom: 0.7rem;
  padding: 0.3rem 0.58rem;
  border-radius: 7px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
[data-page="home"] .hx-media__chip {
  left: 0.7rem;
  max-width: calc(100% - 5.2rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(244, 238, 227, 0.94);
  color: var(--hx-ink);
}
[data-page="home"] .hx-media__ratio {
  right: 0.7rem;
  background: rgba(12, 15, 13, 0.86);
  color: var(--hx-cream-text);
}

/* ---------------------------------------------------------------- *
 * ITEM 6 — "ON THIS PAGE"
 * Canonical control: first element of main, native <details>, pill
 * anchored top left at the header seam, panel is a full table of
 * contents before any script runs. It reserves its own flow height, so
 * it cannot overlap content.
 * ---------------------------------------------------------------- */
[data-page="home"] .hx-nav {
  position: sticky;
  top: var(--hx-seam);
  z-index: 45;
  height: 3.5rem;             /* reserved flow height — no overlap */
  width: max-content;
  max-width: calc(100vw - 2rem);
  margin: 0 0 0 clamp(1rem, 3vw, 2.5rem);
  overflow: visible;
  transition: top 240ms ease;
}
[data-page="home"] .site-head.head--hidden ~ .main .hx-nav { top: 0; }

[data-page="home"] .hx-nav__pill {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  list-style: none;
  cursor: pointer;
  min-height: var(--hx-tap);
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  transform: translateY(0.5rem);
  background: rgba(12, 15, 13, 0.92);
  border: 1px solid rgba(197, 166, 106, 0.34);
  color: var(--hx-cream-text);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 14px 32px -14px rgba(8, 11, 9, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-page="home"] .hx-nav__pill::-webkit-details-marker { display: none; }
[data-page="home"] .hx-nav__pill::after { content: "+"; margin-inline-start: 0.15rem; color: var(--hx-gold); font-size: 1rem; line-height: 1; }
[data-page="home"] .hx-nav[open] .hx-nav__pill::after { content: "\2212"; }
[data-page="home"] .hx-nav__label { color: rgba(244, 238, 227, 0.72); font-weight: 600; }
[data-page="home"] .hx-nav__current { color: var(--hx-gold); font-weight: 700; }

[data-page="home"] .hx-nav__panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  width: min(23rem, calc(100vw - 2rem));
  padding: 0.5rem;
  border-radius: var(--hx-radius);
  background: rgba(12, 15, 13, 0.97);
  border: 1px solid rgba(197, 166, 106, 0.3);
  box-shadow: 0 26px 60px -28px rgba(8, 11, 9, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-page="home"] .hx-nav:not([open]) .hx-nav__panel { display: none; }
[data-page="home"] .hx-nav__group {
  margin: 0.5rem 0 0.25rem;
  padding-inline: 0.65rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 238, 227, 0.5);
}
[data-page="home"] .hx-nav__group:first-child { margin-top: 0.15rem; }
[data-page="home"] .hx-nav__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: var(--hx-tap);   /* 48px hit area … */
  padding: 0.25rem 0.65rem;
  border-radius: var(--hx-radius-sm);
  color: var(--hx-cream-text);
  text-decoration: none;
  transition: background-color 0.16s ease;
}
[data-page="home"] .hx-nav__name { line-height: var(--hx-row); font-size: 0.88rem; }  /* … around a 40px row */
[data-page="home"] .hx-nav__index { color: var(--hx-gold); font-size: 0.72rem; font-weight: 700; min-width: 1.4rem; }
[data-page="home"] .hx-nav__link[aria-current="true"] { background: rgba(197, 166, 106, 0.18); }
@media (hover: hover) {
  [data-page="home"] .hx-nav__link:hover { background: rgba(244, 238, 227, 0.1); }
}

/* ---------------------------------------------------------------- *
 * ITEM 1 + 8 — HERO
 * Full-width film. No flanking panels, no dark green gutters.
 * ---------------------------------------------------------------- */
[data-page="home"] .hx-hero {
  position: relative;
  isolation: isolate;
  min-height: min(76vh, 660px);   /* item 7: one step shorter */
  display: grid;
  align-content: center;
  margin-top: -3.5rem;            /* the nav's reserved height, reclaimed */
  padding-block: clamp(76px, 8vw, 108px) clamp(40px, 5vw, 64px);
  background: var(--hx-forest-deep);
  color: var(--hx-cream-text);
  overflow: hidden;
}

/* The film, untouched, behind everything and edge to edge. */
[data-page="home"] .hx-hero .stage { position: absolute; inset: 0; z-index: 0; }
[data-page="home"] .hx-hero .stage__film,
[data-page="home"] .hx-hero .stage__poster,
[data-page="home"] .hx-hero .stage__video { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The film frame keeps its own hidden overflow: that is what parks the
   painted shutters out of sight and stops them travelling sideways. */
[data-page="home"] .hx-hero .stage__film { overflow: hidden; }
[data-page="home"] .hx-hero .stage__poster img,
[data-page="home"] .hx-hero .stage__video { width: 100%; height: 100%; object-fit: cover; }

[data-page="home"] .hx-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Shaped to the copy block, not sprayed over the whole frame. The copy
     runs to 46rem inside a 1200px column, which is roughly 8%–60% of the
     viewport at 1440, so the scrim holds its weight to 60% and then lets
     go — the right-hand half of the film stays open.
     Removing the old copy PLATE (item 1: no panels, no gutters) took the
     eyebrow from 5.15:1 to 3.31:1, because the plate had been doing the
     work. These stops put it back: measured, not assumed. */
  background:
    linear-gradient(100deg, rgba(8, 11, 9, 0.62) 0%, rgba(8, 11, 9, 0.52) 32%, rgba(8, 11, 9, 0.36) 46%, rgba(8, 11, 9, 0.16) 66%, rgba(8, 11, 9, 0.04) 100%),
    linear-gradient(to top, rgba(8, 11, 9, 0.38) 0%, rgba(8, 11, 9, 0) 42%);
}
/* 19 Aug — the film was being crushed, not protected. Measured the actual
   film luminance behind the copy across five frames of the 8s loop: it is
   rgb(55,56,46) to rgb(67,65,56), i.e. already dark. The old 0.86/0.84/0.72
   wash therefore bought no legibility, it only flattened the footage — which
   is what read as "the video quality has dropped". Worst case across every
   sampled frame with the values above: cream text 11.87:1, gold eyebrow
   5.90:1, both clear of the 4.5 floor. Twice as much of the film now shows
   behind the copy, and the open right-hand side is essentially uncovered. */

/* Below the two-column threshold the copy stops being a left-hand column
   and fills the width, so a left-to-right scrim is the wrong shape: its
   60%–100% falloff lands directly under the headline. Measured at 768 the
   horizontal version gave "See your next move." 2.33:1 and the lede
   2.78:1 at 375. Narrow widths get a vertical scrim instead, weighted to
   where the copy actually sits. */
@media (max-width: 61.99em) {
  /* Lifted with the desktop scrim, but deliberately less far: on a narrow
     viewport the cover-crop of the mobile encode brings the bright sunset
     band into the middle of the frame, directly under the copy, so this one
     keeps more weight until it has been measured against that crop. */
  [data-page="home"] .hx-hero__scrim {
    background:
      linear-gradient(to top, rgba(8, 11, 9, 0.82) 0%, rgba(8, 11, 9, 0.78) 55%, rgba(8, 11, 9, 0.68) 85%, rgba(8, 11, 9, 0.56) 100%);
  }
}

[data-page="home"] .hx-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--hx-colw);
  margin-inline: auto;
  padding-inline: var(--hx-gutter);
}
[data-page="home"] .hx-hero__copy { max-width: 46rem; }

[data-page="home"] .hx-hero__eyebrow {
  margin: 0 0 0.8rem;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hx-gold);
}
/* Item 7: one step down from the old clamp ceiling of 3.9rem. */
/* The guide's h1 exactly: Gloock 400, 0.94 line-height, -0.035em, balanced,
   and a second line that changes tone rather than weight. The guide's accent
   is a pale blue on night; this page's identity is green and gold, so the
   accent is gold — the same device, in this page's palette. */
[data-page="home"] .hx-hero__title {
  margin: 0 0 1rem;
  max-width: 13ch;
  font-family: var(--hx-display);
  font-size: clamp(3rem, 5.25vw, 5rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: #f6f0e5;
}
[data-page="home"] .hx-hero__title span { display: block; }
[data-page="home"] .hx-hero__title span + span { color: var(--hx-gold); }
[data-page="home"] .hx-hero__lede {
  margin: 0 0 1.1rem;
  max-width: 44ch;
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.55;
  color: var(--hx-cream-text);
}

/* The surviving trust signal. */
[data-page="home"] .hx-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: var(--hx-tap);
  margin: 0 0 1.3rem;
  padding: 0.5rem 1.05rem 0.5rem 0.8rem;
  border: 1px solid rgba(197, 166, 106, 0.5);
  border-radius: 999px;
  background: rgba(10, 14, 11, 0.62);
  color: var(--hx-cream-text);
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
[data-page="home"] .hx-rating__mark { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; color: var(--hx-gold); }
[data-page="home"] .hx-rating__mark svg { width: 100%; height: 100%; }
[data-page="home"] .hx-rating__value { font-size: 1.05rem; font-weight: 700; line-height: 1; }
[data-page="home"] .hx-rating__stars { color: var(--hx-gold); font-size: 0.9rem; letter-spacing: 0.06em; }
[data-page="home"] .hx-rating__count { font-size: 0.8rem; color: var(--hx-cream-text); }
@media (hover: hover) {
  [data-page="home"] .hx-rating:hover { border-color: var(--hx-gold); background: rgba(10, 14, 11, 0.76); }
}

[data-page="home"] .hx-hero__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }

/* ---------------------------------------------------------------- *
 * ITEM 10 — ENTRY STRIP
 * ---------------------------------------------------------------- */
[data-page="home"] .hx-entry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(9px, 1.2vw, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-page="home"] .hx-entry__item { display: grid; }
[data-page="home"] .hx-entry__plate {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "kicker cue" "action cue";
  align-items: center;
  gap: 0.1rem 0.9rem;
  min-height: 68px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--hx-line-dark);
  border-radius: var(--hx-radius-sm);
  /* A recessed well, not a 6%-cream wash. The wash measured 1.000:1
     against its own field — literally no separation — because a 6% tint
     of the field colour is the field colour. This is the deep hero base
     dropped into the lifted green strip: measured 1.650:1, dL 0.0354,
     and it raises gold-on-plate from 4.19:1 to 8.29:1 rather than
     lowering it, which a lighter plate would have done. */
  background: var(--hx-forest-deep);
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
[data-page="home"] .hx-entry__kicker {
  grid-area: kicker;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hx-gold);
}
[data-page="home"] .hx-entry__action {
  grid-area: action;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hx-cream-text);
}
[data-page="home"] .hx-entry__cue {
  grid-area: cue;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--hx-line-dark-strong);
  color: var(--hx-gold);
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
@media (hover: hover) {
  [data-page="home"] .hx-entry__plate:hover { background: #141a16; border-color: var(--hx-gold); }
  [data-page="home"] .hx-entry__plate:hover .hx-entry__cue { transform: translateX(4px); background: var(--hx-gold); border-color: var(--hx-gold); color: var(--hx-ink); }
}
[data-page="home"] .hx-entry__plate:active { background: #1b231e; }

/* ---------------------------------------------------------------- *
 * ITEM 5 — THE ASSISTANT, IN ITS NEW PRIME SLOT
 * The shared section's markup is unchanged; this is placement and
 * treatment, scoped to this page's instance only.
 * ---------------------------------------------------------------- */
[data-page="home"] .hx-band--assistant { padding-bottom: clamp(44px, 5vw, 72px); }

[data-page="home"] #dukes-receptionist.reception {
  width: 100%;
  max-width: var(--hx-colw);
  margin-inline: auto;
  padding: 0 var(--hx-gutter);
  background: none;
  color: var(--hx-ink);
}

/* Contact routes into the LEFT column, under the intro; the journey
   rows take the right column across both rows. */
[data-page="home"] #dukes-receptionist .reception__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  max-width: none;
  padding: 0;
}
@media (min-width: 64em) {
  [data-page="home"] #dukes-receptionist .reception__inner {
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    align-items: start;
  }
  [data-page="home"] #dukes-receptionist .reception__intro { grid-column: 1; grid-row: 1; }
  [data-page="home"] #dukes-receptionist .reception__routes--safe { grid-column: 1; grid-row: 2; }
  [data-page="home"] #dukes-receptionist.reception ol.reception__routes { grid-column: 2; grid-row: 1 / span 2; }
}

[data-page="home"] #dukes-receptionist .reception__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hx-bronze);
}
[data-page="home"] #dukes-receptionist .reception__inner .h-section {
  margin: 0 0 0.6rem;
  font-family: var(--hx-display);
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--hx-ink);
}
[data-page="home"] #dukes-receptionist .reception__notice {
  margin: 0 0 0.6rem;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--hx-ink-soft);
}

/* The no-JavaScript line as an assurance chip. */
[data-page="home"] #dukes-receptionist .reception__assure {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  padding: 0.42rem 0.85rem;
  border: 1px solid rgba(28, 33, 31, 0.22);
  border-radius: 999px;
  background: var(--hx-white);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hx-ink);
}
[data-page="home"] #dukes-receptionist .reception__assure::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--hx-bronze);
}

/* ONE PLATE GEOMETRY, open and closed. The row is the same surface, the
   same border, the same radius and the same inset in both states; only
   the caret turns and the body appears. */
[data-page="home"] #dukes-receptionist.reception ol.reception__routes { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
[data-page="home"] #dukes-receptionist .reception__route { margin: 0; }
[data-page="home"] #dukes-receptionist .reception__disclosure {
  border: 1px solid var(--hx-line-light);
  border-radius: var(--hx-radius);
  background: var(--hx-white);
  overflow: hidden;
}
[data-page="home"] #dukes-receptionist .reception__disclosure[open] {
  border-color: var(--hx-line-strong);
  background: var(--hx-white);
}
[data-page="home"] #dukes-receptionist .reception__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--hx-tap);
  padding: 0.75rem 1.1rem;
  list-style: none;
  cursor: pointer;
  background: none;
  border: 0;
}
[data-page="home"] #dukes-receptionist .reception__summary::-webkit-details-marker { display: none; }
[data-page="home"] #dukes-receptionist .reception__label { font-size: 1rem; font-weight: 600; color: var(--hx-ink); line-height: var(--hx-row); }
[data-page="home"] #dukes-receptionist .reception__caret {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--hx-line-light);
  border-radius: 50%;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
[data-page="home"] #dukes-receptionist .reception__caret::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid var(--hx-bronze);
  border-bottom: 2px solid var(--hx-bronze);
  transform: translateY(-2px) rotate(45deg);
}
[data-page="home"] #dukes-receptionist .reception__disclosure[open] .reception__caret { transform: rotate(180deg); background: var(--hx-sage); }
[data-page="home"] #dukes-receptionist .reception__summary:focus-visible { outline: 3px solid var(--hx-gold); outline-offset: -3px; }
@media (hover: hover) {
  [data-page="home"] #dukes-receptionist .reception__summary:hover { background: rgba(28, 33, 31, 0.04); }
}

[data-page="home"] #dukes-receptionist .reception__body { padding: 0 1.1rem 1.05rem; }
[data-page="home"] #dukes-receptionist .reception__outcome { margin: 0 0 0.6rem; font-size: 0.92rem; line-height: 1.55; color: var(--hx-ink-soft); }
[data-page="home"] #dukes-receptionist .reception__safety { margin: 0 0 0.6rem; font-size: 0.86rem; color: var(--hx-bronze); }
[data-page="home"] #dukes-receptionist .reception__asks {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hx-ink-soft);
}
[data-page="home"] #dukes-receptionist .reception__questions {
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.28rem;
  font-size: 0.9rem;
  color: var(--hx-ink-soft);
}
[data-page="home"] #dukes-receptionist .reception__questions li { padding-inline-start: 0.9rem; position: relative; }
[data-page="home"] #dukes-receptionist .reception__questions li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--hx-gold);
}

/* Every open journey ends in a primary action plus a call and a WhatsApp
   link, all at 48px. */
[data-page="home"] #dukes-receptionist .reception__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
[data-page="home"] #dukes-receptionist .reception__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hx-tap);
  padding: 0.62rem 1.05rem;
  border: 1px solid var(--hx-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--hx-ink);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
[data-page="home"] #dukes-receptionist .reception__act--primary {
  background: var(--hx-ink);
  border-color: var(--hx-ink);
  color: var(--hx-cream-text);
}
@media (hover: hover) {
  [data-page="home"] #dukes-receptionist .reception__act:hover { background: rgba(28, 33, 31, 0.07); border-color: var(--hx-ink); }
  [data-page="home"] #dukes-receptionist .reception__act--primary:hover { background: #2a342d; border-color: #2a342d; }
}

/* Contact routes, left column. */
[data-page="home"] #dukes-receptionist .reception__routes--safe {
  padding: clamp(16px, 1.8vw, 24px);
  border: 1px solid var(--hx-line-light);
  border-radius: var(--hx-radius-plate);   /* the guide's signature corner */
  background: var(--hx-white);
  box-shadow: 0 26px 60px -44px rgba(8, 14, 10, 0.5);
}
[data-page="home"] #dukes-receptionist .reception__routes--safe .cmethod,
[data-page="home"] #dukes-receptionist .reception__routes--safe .crail__item a {
  min-height: var(--hx-tap);
}
/* Instagram out of the contact grid, as a small follow link. */
[data-page="home"] #dukes-receptionist .reception__follow { margin: 0.8rem 0 0; }
[data-page="home"] #dukes-receptionist .reception__follow a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hx-tap);
  padding: 0.4rem 0.2rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--hx-bronze);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
@media (hover: hover) {
  [data-page="home"] #dukes-receptionist .reception__follow a:hover { border-bottom-color: var(--hx-bronze); }
}

/* ---------------------------------------------------------------- *
 * ITEM 11 — ROUTE CARDS
 * Layout kept. Three individual tints, equal text panels, chip CTAs.
 * ---------------------------------------------------------------- */
[data-page="home"] .hx-routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(13px, 1.6vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-page="home"] .hx-route {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;   /* equal text-panel heights, by track */
  overflow: hidden;
  border: 1px solid var(--hx-line-dark);
  border-radius: var(--hx-radius-plate);   /* the guide's signature corner */
  box-shadow: var(--hx-lift);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
[data-page="home"] .hx-route--forest { background: var(--hx-card-forest); }
[data-page="home"] .hx-route--bronze { background: var(--hx-card-bronze); }
[data-page="home"] .hx-route--slate { background: var(--hx-card-slate); }

[data-page="home"] .hx-route__body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;  /* the chips land on one baseline */
  gap: 0.45rem;
  padding: clamp(16px, 1.8vw, 22px);
  /* The signature corner is 72px. The CTA chip has to clear it or the
     curve cuts the chip's bottom-left, which is what it did on the first
     render of this treatment. */
  padding-bottom: clamp(28px, 2.6vw, 38px);
}
[data-page="home"] .hx-route__audience {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hx-gold);
}
[data-page="home"] .hx-route__title { margin: 0; font-family: var(--hx-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.02em; }
[data-page="home"] .hx-route__link {
  display: flex;
  align-items: center;
  min-height: var(--hx-tap);
  color: var(--hx-cream-text);
  text-decoration: none;
}
[data-page="home"] .hx-route__link::after { content: ""; position: absolute; inset: 0; }
[data-page="home"] .hx-route__blurb { margin: 0; font-size: 0.91rem; line-height: 1.5; color: var(--hx-cream-text-soft); }
[data-page="home"] .hx-route__cta { margin: 0.3rem 0 0; }
[data-page="home"] .hx-route__cta .hx-chip { width: 100%; }
@media (hover: hover) {
  [data-page="home"] .hx-route:hover { border-color: var(--hx-gold); transform: translateY(-2px); }
  [data-page="home"] .hx-route:hover .hx-chip__arrow { transform: translateX(3px); }
}
[data-page="home"] .hx-route:focus-within { border-color: var(--hx-gold); }

/* ---------------------------------------------------------------- *
 * REDUCED MOTION — every moving thing in part one, including the film.
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] *,
  [data-page="home"] *::before,
  [data-page="home"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-page="home"] .hx-hero .stage__video { display: none; }
  [data-page="home"] .hx-hero .stage__poster { opacity: 1; }
  /* The media slot's video is removed and its poster is what remains.
     CSS, not a script, so it holds with JavaScript blocked. */
  [data-page="home"] .hx-media__video { display: none; }
  [data-page="home"] .hx-route:hover { transform: none; }
}

/* ======================================================================
 * ASSISTANT — CORRECTIONS AFTER FIRST RENDER.
 *
 * The shared assistant component is styled for a DARK band, because that
 * is the only field it has ever stood on. Moving it to the sage field
 * (item 5 + item 9) exposed four things that were invisible or wrong, all
 * measured off the first render rather than guessed at:
 *
 *   1. the caret kept dukes.css's rotate(45deg) on the element itself, so
 *      the circle this pass wraps it in was rotated too and the chevron
 *      read as an "L"
 *   2. the persistence notice is --text-on-dark-soft: pale cream, all but
 *      invisible on sage
 *   3. the contact rail renders crail--dark on what is now a white plate
 *   4. Instagram appeared twice — once as a fourth contact tile and once
 *      as the follow line item 5 asks for
 * ====================================================================== */

/* 1 · the caret. transform:none on the element; the chevron is the ::after. */
[data-page="home"] #dukes-receptionist .reception__caret {
  width: 30px;
  height: 30px;
  border: 1px solid var(--hx-line-light);
  border-radius: 50%;
  transform: none;
}
[data-page="home"] #dukes-receptionist .reception__disclosure[open] .reception__caret {
  transform: none;
  background: var(--hx-sage);
  border-color: var(--hx-line-strong);
}
[data-page="home"] #dukes-receptionist .reception__caret::after {
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
[data-page="home"] #dukes-receptionist .reception__disclosure[open] .reception__caret::after {
  transform: translateY(1px) rotate(-135deg);
}

/* 2 · both notices read as body copy on a light field. */
[data-page="home"] #dukes-receptionist .reception__notice {
  color: var(--hx-ink-soft);
  border-left-color: var(--hx-gold);
}

/* 3 · the contact rail, on light. */
[data-page="home"] #dukes-receptionist .crail--dark .crail__intro {
  color: var(--hx-ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
}
[data-page="home"] #dukes-receptionist .crail--dark .crail__link {
  background: var(--hx-sage);
  border-color: var(--hx-line-strong);
  color: var(--hx-ink);
}
[data-page="home"] #dukes-receptionist .crail--dark .crail__tip-label { color: var(--hx-bronze); }
[data-page="home"] #dukes-receptionist .crail--dark .crail__tip-value { color: var(--hx-ink); }
[data-page="home"] #dukes-receptionist .crail--dark .crail__fill { background: var(--hx-gold); }
[data-page="home"] #dukes-receptionist .crail__item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: var(--hx-tap);
}
[data-page="home"] #dukes-receptionist .crail__list {
  display: grid;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}
[data-page="home"] #dukes-receptionist .crail__tip {
  position: static;
  display: grid;
  gap: 0.05rem;
  opacity: 1;
  transform: none;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  white-space: normal;
}
[data-page="home"] #dukes-receptionist .crail__tip-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-page="home"] #dukes-receptionist .crail__tip-value { font-size: 0.92rem; font-weight: 600; }

/* 4 · Instagram leaves the contact grid. It stays on the page as the
       small follow link directly beneath — item 5 — so nothing is lost,
       it simply stops being presented as a way to contact the office. */
[data-page="home"] #dukes-receptionist .crail__item:has(.crail__link--instagram) { display: none; }

/* ---- corrections, round two (both read off computed style, not by eye) ----
   · the SECOND notice — the persistence status — is coloured by a
     :last-of-type rule in dukes.css, which outranks a plain class
     selector; it was computing rgba(244,238,227,0.66), a dark-band cream,
     on a sage field
   · .crail__item carried rgba(33,40,33,0.4): the dark slab showing behind
     each contact tile, and it squashed the 48px disc to 36px wide */
[data-page="home"] #dukes-receptionist .reception__notice,
[data-page="home"] #dukes-receptionist .reception__notice:last-of-type,
[data-page="home"] #dukes-receptionist .reception__notice + .reception__notice {
  color: var(--hx-ink-soft);
}
[data-page="home"] #dukes-receptionist .crail__item {
  background: transparent;
  border: 0;
  padding: 0;
}
[data-page="home"] #dukes-receptionist .crail__link {
  flex: 0 0 var(--hx-tap);
  width: var(--hx-tap);
  height: var(--hx-tap);
}

/* ======================================================================
 * HOME — 19 AUGUST CORRECTIONS (Aarav, on the live demo)
 * Scoped to [data-page="home"] throughout. No shared markup is touched:
 * the contact rail is a shared component, so its duplicate line is hidden
 * here rather than removed from the component.
 * ====================================================================== */

/* ---------------------------------------------------------------- *
 * 1 — THE DEAD GAP BETWEEN THE FIRST JOURNEY ROW AND "CALL THE OFFICE"
 * Cause: the journey list spans grid rows 1/2 and is ~400px tall, while
 * the two left-hand items sit in auto-sized rows. The grid handed the
 * spanning item's surplus height to BOTH rows equally, so row 1 grew and
 * the contact plate was pushed down away from the intro above it — the
 * hole Aarav is pointing at. Pinning row 1 to its content and letting
 * row 2 absorb the slack puts the plate back under the intro.
 * ---------------------------------------------------------------- */
@media (min-width: 64em) {
  [data-page="home"] #dukes-receptionist .reception__inner {
    grid-template-rows: auto 1fr;
  }
  [data-page="home"] #dukes-receptionist .reception__routes--safe {
    align-self: start;
    margin-top: 0.25rem;
  }
}

/* ---------------------------------------------------------------- *
 * 2 — THE LINE PRINTED TWICE
 * "Every route works without JavaScript." is the assurance chip in the
 * intro; the shared rail then prints "Every route below works without
 * JavaScript." immediately under it. One statement, once: the chip wins
 * because it is the styled one.
 * ---------------------------------------------------------------- */
[data-page="home"] #dukes-receptionist .reception__routes--safe .crail__intro {
  display: none;
}

/* ---------------------------------------------------------------- *
 * 3 — SEPARATION, TOP AND BOTTOM
 * The assistant band was a flat sage field butting straight into the
 * dark entry strip above and the clay route band below, so it read as
 * one continuous wash rather than its own room. It now opens on a
 * hairline seam, carries a soft top lift, and closes on a defined rule.
 * ---------------------------------------------------------------- */
[data-page="home"] .hx-band--assistant {
  position: relative;
  padding-top: clamp(40px, 4.6vw, 68px);
  border-top: 1px solid rgba(28, 33, 31, 0.14);
  border-bottom: 1px solid rgba(28, 33, 31, 0.14);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 220px);
}
/* A short gold seam at the top edge, aligned to the shell, so the join
   with the entry strip above is deliberate instead of accidental. */
[data-page="home"] .hx-band--assistant::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--hx-colw), calc(100% - (var(--hx-gutter) * 2)));
  height: 2px;
  background: linear-gradient(to right, var(--hx-gold) 0%, rgba(197, 166, 106, 0.45) 22%, rgba(197, 166, 106, 0) 55%);
}

/* ---------------------------------------------------------------- *
 * 4 — THE ASSISTANT STOPPED LOOKING GENERIC
 * Five identical white rectangles on a pale field is the "generic box"
 * Aarav called out. The rows keep ONE plate geometry open and closed —
 * that rule stands — and gain the page's own identity instead: a gold
 * indicator rail that fills on hover and stays filled when open, and a
 * numeral-free but weighted summary.
 * ---------------------------------------------------------------- */
[data-page="home"] #dukes-receptionist .reception__disclosure {
  position: relative;
  transition: border-color 0.18s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
[data-page="home"] #dukes-receptionist .reception__disclosure::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  border-radius: var(--hx-radius) 0 0 var(--hx-radius);
  background: var(--hx-gold);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-page="home"] #dukes-receptionist .reception__disclosure[open]::before { transform: scaleY(1); }
[data-page="home"] #dukes-receptionist .reception__summary {
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* The contact plate: the same signature corner as the guide's plates, a
   defined header rule, and tiles that read as one family with the rows. */
[data-page="home"] #dukes-receptionist .reception__routes--safe {
  box-shadow: 0 22px 54px -42px rgba(8, 14, 10, 0.55);
}
[data-page="home"] #dukes-receptionist .reception__routes--safe .crail__list {
  display: grid;
  gap: 0.4rem;
}

/* ---------------------------------------------------------------- *
 * 5 — THE MOTION, BOOSTED
 * Aarav likes the lift, it was just too small to register: every hover
 * was a 2px nudge. The travel roughly doubles, the shadow blooms with
 * it so the lift reads as depth rather than a jump, and the arrows now
 * actually move. Everything stays behind hover:hover, and the existing
 * prefers-reduced-motion block above still flattens all of it.
 * ---------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .hx-btn--gold:hover,
  [data-page="home"] .hx-btn--onfilm:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 34px -18px rgba(8, 11, 9, 0.72);
  }
  [data-page="home"] .hx-btn:hover .hx-chip__arrow,
  [data-page="home"] .hx-chip:hover .hx-chip__arrow { transform: translateX(4px); }

  [data-page="home"] .hx-route:hover {
    border-color: var(--hx-gold);
    transform: translateY(-6px);
    box-shadow: 0 34px 64px -34px rgba(8, 14, 10, 0.66);
  }
  [data-page="home"] .hx-route:hover .hx-route__media img { transform: scale(1.04); }

  [data-page="home"] .hx-entry__plate:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 44px -26px rgba(0, 0, 0, 0.6);
  }

  [data-page="home"] #dukes-receptionist .reception__disclosure:hover {
    transform: translateY(-2px);
    border-color: var(--hx-line-strong);
    box-shadow: 0 18px 38px -28px rgba(8, 14, 10, 0.5);
  }
  [data-page="home"] #dukes-receptionist .reception__disclosure:hover::before { transform: scaleY(1); }
}

/* The media needs a transition target for the scale above; the card owns
   the overflow so the image cannot escape its corner. */
[data-page="home"] .hx-route__media { overflow: hidden; }
[data-page="home"] .hx-route__media img { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .hx-route__media img,
  [data-page="home"] #dukes-receptionist .reception__disclosure,
  [data-page="home"] #dukes-receptionist .reception__disclosure::before { transition: none !important; transform: none !important; }
}

/* ---------------------------------------------------------------- *
 * 6 — ROUTE CARDS: INVISIBLE TITLES (found 19 Aug, contrast 1.17:1)
 * The three route cards carry dark tinted panels but never set their own
 * text colour, so every one of them inherited --hx-ink from the band
 * wrapper. Dark ink on a dark navy/oxblood panel measured 1.17:1, 1.77:1
 * and 1.35:1 — the titles were effectively invisible. The card now owns
 * its colour, which is what a dark surface has to do.
 * ---------------------------------------------------------------- */
[data-page="home"] .hx-route { color: var(--hx-cream-text); }
[data-page="home"] .hx-route .hx-route__title { color: var(--hx-cream-text); }
[data-page="home"] .hx-route .hx-route__copy,
[data-page="home"] .hx-route .hx-route__body > p:not(.hx-route__kicker) { color: var(--hx-cream-text-soft); }

/* ======================================================================
 * HOME — PART TWO, 19 AUGUST. Sections 03, 04 and 05.
 *
 * home-2026.css was written as "part one, top of the page to the end of
 * the route cards", so the reviews, memberships and contact bands were
 * still wearing the OLD palette (tan #d5c8b4, dark green #1d241f) and
 * still sitting INSET at 1320px while every band above them runs full
 * bleed at 1425px. That is the mismatch and the misaligned seam.
 * This block brings all three into the Seller's Guide palette and onto
 * one geometry. Scoped to [data-page="home"]; these classes are shared
 * with other pages, so every selector below is page-scoped.
 * ====================================================================== */

/* ---- 1 · ONE GEOMETRY. Full bleed, like every band above. ---- */
[data-page="home"] .band--reviews,
[data-page="home"] .band--creds,
[data-page="home"] .band--contact {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  border-radius: 0;
  padding-inline: var(--hx-gutter);
}
[data-page="home"] .band--creds > *,
[data-page="home"] .band--contact > *,
[data-page="home"] .band--reviews > * {
  width: 100%;
  max-width: var(--hx-colw);
  margin-inline: auto;
}

/* ---- 2 · THE GUIDE'S PALETTE, and a band rhythm that alternates ----
   navy → navy-soft → blue → paper → CREAM → BLUE → NAVY */
[data-page="home"] .band--reviews { background: var(--hx-white); color: var(--hx-ink); }
[data-page="home"] .band--creds   { background: var(--hx-sage);  color: var(--hx-ink); }
[data-page="home"] .band--contact { background: var(--hx-forest-deep); color: var(--hx-cream-text); }

[data-page="home"] .band--contact .h-section,
[data-page="home"] .band--contact .chapter__label { color: var(--hx-cream-text); }
[data-page="home"] .band--contact .lede { color: var(--hx-cream-text-soft); }
[data-page="home"] .band--contact .chapter__index { color: var(--hx-gold); }
[data-page="home"] .band--contact .chapter__rule { background: var(--hx-line-dark); }
[data-page="home"] .band--reviews .chapter__index,
[data-page="home"] .band--creds .chapter__index { color: var(--hx-bronze); }

/* The two contact panels sat on the old green. Lifted navy, so they read
   as plates on the band rather than blocks of the same colour. */
[data-page="home"] .band--contact .action-panel {
  background: #16283d;
  border: 1px solid var(--hx-line-dark);
  border-radius: var(--hx-radius);
}
[data-page="home"] .band--contact .action-panel__index { color: var(--hx-gold); }

/* ---- 3 · NO MORE CARDS SLICED IN HALF ----
   Both strips clipped their content dead at the band edge, so the first
   and last card were always cut through the middle. A mask feathers the
   two edges instead, which is what makes a marquee read as continuing
   rather than as broken. */
[data-page="home"] .rwall,
[data-page="home"] .creds__viewport {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

/* ---- 4 · EQUAL REVIEW CARDS, and no raw URLs ----
   The cards were sized by their own copy, so a two-line review left a
   deep hole under it while a six-line one ran long. They now share one
   height and the verify control sits on a common baseline. */
[data-page="home"] .rwall__track { align-items: stretch; }
[data-page="home"] .rcard {
  display: flex;
  flex-direction: column;
  background: var(--hx-white);
  border: 1px solid var(--hx-line-light);
  border-radius: var(--hx-radius);
}
[data-page="home"] .rcard__link { margin-top: auto; }
/* "Verify on Google ↗ maps.app.goo.gl" printed the raw domain next to the
   label. The link already says where it goes. */
[data-page="home"] .rcard__link > span:not(.rcard__verify):not(.u-visually-hidden) { display: none; }
[data-page="home"] .rcard__verify { font-weight: 700; }

/* ---- 5 · THE SCRUBBER BECOMES A CONTROL ----
   It was a 1px hairline with an 8px nub: not findable, not draggable on
   touch, under the 48px floor. */
[data-page="home"] .creds__scrub { min-height: var(--hx-tap); display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
[data-page="home"] .creds__slider { min-height: var(--hx-tap); cursor: grab; }
[data-page="home"] .creds__slider:active { cursor: grabbing; }
[data-page="home"] .creds__marker { height: 4px; border-radius: 999px; background: var(--hx-bronze); }

/* ---- 6 · THE VOID UNDER THE LOGOS ----
   The creds band ran 685px tall for 292px of content. */
[data-page="home"] .band--creds { padding-block: var(--hx-band-y); }
[data-page="home"] .band--creds .creds { margin-bottom: 0; }

/* ---- 7 · logo plates on the new blue field ---- */
[data-page="home"] .creds__track > li,
[data-page="home"] .creds__card {
  background: var(--hx-white);
  border: 1px solid var(--hx-line-light);
  border-radius: var(--hx-radius-sm);
}

@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .rcard { transition: transform 0.2s ease, box-shadow 0.2s ease; }
  [data-page="home"] .rcard:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -30px rgba(13, 29, 49, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .rcard { transition: none !important; transform: none !important; }
}

/* ======================================================================
 * HOME — KNIGHT FRANK PASS + AMRIT'S CLIENT LIST. 19 August.
 *
 * Reference read: knightfrank.co.uk. What that page actually does, and
 * what is worth taking (not copying — Dukes is a Slough independent, not
 * a global network, so the swagger has to be earned differently):
 *
 *   1. AIR. KF's editorial blocks sit in ~40% of the band width with the
 *      rest left empty. Nothing is stretched to fill. Our bands were
 *      running copy to 62ch and filling every column.
 *   2. NARROW MEASURE. Their body copy runs ~46ch, not 62ch. It reads as
 *      considered rather than as a wall.
 *   3. OVERLAP. Their "The View from Knight Frank" panel overlaps the
 *      photograph beside it. One depth move per page, not a page of them.
 *   4. BIG SERIF NUMERALS as the proof device (600+, 50+, 130).
 *   5. SECONDARY ACTIONS ARE TEXT LINKS, not chips. We keep chips for
 *      primary actions (Aarav's 48px rule stands) but the guide-style
 *      underline returns for genuinely secondary routes.
 *
 * AMRIT'S LIST, the items that live in CSS, are marked [AMRIT] below.
 * ====================================================================== */

/* ---------------------------------------------------------------- *
 * [AMRIT] "Make main page shorter."
 * Every band loses a step of vertical padding. This is the single
 * biggest lever on page length and it costs nothing structurally.
 * ---------------------------------------------------------------- */
[data-page="home"] {
  --hx-band-y: clamp(32px, 3.4vw, 52px);
  --hx-measure: 46ch;          /* KF-class reading measure */
}
[data-page="home"] .band--reviews,
[data-page="home"] .band--creds,
[data-page="home"] .band--contact { padding-block: var(--hx-band-y); }

/* KF air: the lede stops running the full column. */
[data-page="home"] .hx-lede,
[data-page="home"] .band__head .lede { max-width: var(--hx-measure); }
[data-page="home"] .hx-head { max-width: 52ch; }

/* ---------------------------------------------------------------- *
 * [AMRIT] "At bottom remove legal identity, make bottom bit smaller."
 * The legal identity column comes out of the homepage footer only —
 * the footer is shared, so this is page-scoped, and the company record
 * is still published on /about/ and /client-protection/ where it
 * belongs. The strip beneath it is halved.
 * ---------------------------------------------------------------- */
[data-page="home"] .site-foot__legal { display: none; }
[data-page="home"] .site-foot { padding-block: clamp(28px, 3vw, 44px); }
[data-page="home"] .legalstrip {
  padding-block: 0.6rem;
  font-size: 0.72rem;
  line-height: 1.45;
}
[data-page="home"] .legalstrip__note { max-width: 92ch; margin-inline: auto; opacity: 0.72; }

/* ---------------------------------------------------------------- *
 * [AMRIT] "Speak to Dukes — maybe make different colour so you can see it."
 * It was cream-on-cream against the page and disappeared. It now carries
 * the guide's oxblood with the gold crown, which is the one combination
 * on the site that cannot be mistaken for a content card.
 * ---------------------------------------------------------------- */
[data-page="home"] .launcher {
  background: var(--hx-bronze);            /* guide oxblood #7b2430 */
  border: 1px solid rgba(244, 238, 227, 0.28);
  color: var(--hx-cream-text);
  box-shadow: 0 22px 46px -22px rgba(13, 29, 49, 0.65);
}
[data-page="home"] .launcher__text { color: var(--hx-cream-text); font-weight: 750; }
[data-page="home"] .launcher__sub { color: rgba(244, 238, 227, 0.82); }
[data-page="home"] .launcher__glyph { background: rgba(244, 238, 227, 0.1); }
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .launcher { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
  [data-page="home"] .launcher:hover {
    background: #94303c;
    transform: translateY(-3px);
    box-shadow: 0 30px 58px -24px rgba(13, 29, 49, 0.7);
  }
}

/* ---------------------------------------------------------------- *
 * KF MOVE 4 — THE PROOF NUMERALS.
 * KF states its scale in three big serif numbers. Dukes cannot claim
 * 600 offices, but it can state what is true and verifiable: the rating,
 * the number of sourced reviews, and the fact that every one links to
 * its Google source. The 5.0 tile already holds those facts — it is
 * restyled here as KF states them, in the display face at scale.
 * ---------------------------------------------------------------- */
[data-page="home"] .rwall__aside .rwall__score,
[data-page="home"] .rwall__score {
  font-family: var(--hx-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 6vw, 5.2rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
}

/* ---------------------------------------------------------------- *
 * KF MOVE 3 — ONE DEPTH MOMENT.
 * The contact band's two panels sat flat on the field. The first now
 * lifts off it, which is the "The View from Knight Frank" overlap idea
 * applied once rather than everywhere.
 * ---------------------------------------------------------------- */
[data-page="home"] .band--contact .actions-pair { position: relative; }
[data-page="home"] .band--contact .action-panel:first-child {
  box-shadow: 0 30px 64px -34px rgba(0, 0, 0, 0.7);
}

/* ---------------------------------------------------------------- *
 * KF MOVE 5 — SECONDARY ROUTES AS TEXT LINKS.
 * KF's "Sell with us / Let with us" are underlined text, not buttons,
 * which is what makes their primary CTAs read as primary. Our chips
 * stay for primary actions; genuinely secondary routes get the guide's
 * underline, at a 48px hit area so the standard still holds.
 * ---------------------------------------------------------------- */
[data-page="home"] .hx-textlink {
  display: inline-flex;
  align-items: center;
  min-height: var(--hx-tap);
  gap: 0.4rem;
  color: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.34em;
}
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .hx-textlink:hover { color: var(--hx-bronze); }
}

/* ---------------------------------------------------------------- *
 * KF MOVE 1 + 2 — AIR AND ALIGNMENT IN THE HEADS.
 * KF never centres a band head over asymmetric content; heads sit left
 * and the content hangs from them. Ours were inheriting a centred
 * treatment in places. One rule, page-wide.
 * ---------------------------------------------------------------- */
[data-page="home"] .band__head { text-align: left; margin-bottom: clamp(20px, 2.4vw, 30px); }
[data-page="home"] .band__head .h-section { max-width: 20ch; }

/* ---------------------------------------------------------------- *
 * IMAGE SLOTS, left deliberately empty.
 * Aarav supplies all photography. Any slot the KF layout wants but we
 * do not yet have an approved asset for renders as a branded plate with
 * its label and ratio, never as a bare box and never as stock.
 * ---------------------------------------------------------------- */
[data-page="home"] .hx-slot {
  position: relative;
  display: grid;
  align-content: end;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--hx-line-light);
  border-radius: var(--hx-radius);
  background:
    url("/assets/brand/dukes-crown.png") center / clamp(84px, 26%, 150px) no-repeat,
    linear-gradient(165deg, #eef1f3 0%, #e3e9ec 100%);
  background-blend-mode: luminosity, normal;
  min-height: 12rem;
}
[data-page="home"] .hx-slot__label,
[data-page="home"] .hx-slot__ratio {
  position: relative;
  width: fit-content;
  padding: 0.34rem 0.6rem;
  border-radius: 6px;
  background: rgba(251, 248, 242, 0.92);
  color: #3f4b54;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-page="home"] .hx-slot__ratio { background: none; padding-inline: 0; letter-spacing: 0.06em; opacity: 0.75; }

/* ======================================================================
 * HOME — THE MISSING COMPOSITION. 19 August.
 *
 * Measured against the three pages Aarav approved, the homepage had 3
 * composed media figures to selling-process's 17, and failed all four of
 * the devices he named: the 3-up mosaic, the left/right alternation, the
 * centred heading block, and the container layer. Colour and spacing
 * passes could never fix that — it is structural. This block adds the
 * structure; the photography drops into the slots when it arrives.
 * ====================================================================== */

/* ---------------------------------------------------------------- *
 * 1 — THE CONTAINER LAYER (the thing that stops the floating)
 * The approved pages nest THREE deep: band field → container → plate.
 * The homepage was two: band → plate, which is exactly why every plate
 * read as sitting on nothing. .hx-frame is that middle layer.
 * ---------------------------------------------------------------- */
[data-page="home"] .hx-frame {
  position: relative;
  padding: clamp(20px, 2.6vw, 38px);
  border-radius: 22px;
  background: var(--hx-white);
  border: 1px solid var(--hx-line-light);
  box-shadow: 0 30px 70px -50px rgba(13, 29, 49, 0.4);
}
/* On the clay/paper band the frame is cream; on a light band it needs a
   defined edge rather than a shadow doing all the work. */
[data-page="home"] .hx-band--clay .hx-frame { background: var(--hx-white); }

/* The routes list becomes the third layer INSIDE the frame. */
[data-page="home"] .hx-band--clay .hx-routes { margin-top: clamp(18px, 2.2vw, 30px); }

/* ---------------------------------------------------------------- *
 * 2 — THE SPLIT: media one side, panel the other.
 * Mirrors /sales/ .sdr-route: mosaic and copy panel side by side, and
 * the whole thing flips on alternate instances so the eye zig-zags.
 * ---------------------------------------------------------------- */
[data-page="home"] .hx-split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(20px, 3vw, 46px);
  align-items: center;
}
/* ALTERNATION — every even split runs media-right, copy-left. */
[data-page="home"] .hx-split--flip > .hx-mosaic,
[data-page="home"] .hx-split:nth-of-type(even) > .hx-mosaic { order: 2; }

/* ---------------------------------------------------------------- *
 * 3 — THE 3-UP MOSAIC. One landscape, one tall portrait, one square,
 * on a fixed two-column grid so the shapes always relate.
 * ---------------------------------------------------------------- */
[data-page="home"] .hx-mosaic {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: clamp(10px, 1.2vw, 16px);
}
[data-page="home"] .hx-mosaic__tile { min-height: 0; margin: 0; overflow: hidden; border-radius: 16px; }
[data-page="home"] .hx-mosaic__tile--wide   { grid-column: 1; grid-row: 1; }
[data-page="home"] .hx-mosaic__tile--square { grid-column: 1; grid-row: 2; }
[data-page="home"] .hx-mosaic__tile--tall   { grid-column: 2; grid-row: 1 / span 2; }
/* The cell owns the geometry, not the slot's declared ratio — the ratio
   chip still states the shot Aarav needs to supply. */
[data-page="home"] .hx-mosaic .hx-media { height: 100%; aspect-ratio: auto; }
@media (min-width: 62em) {
  [data-page="home"] .hx-mosaic { min-height: 30rem; }
  [data-page="home"] .hx-mosaic__tile { box-shadow: 0 18px 42px -26px rgba(13, 29, 49, 0.42); }
}

/* ---------------------------------------------------------------- *
 * 4 — THE COPY PANEL, with the guide's fact ledger.
 * ---------------------------------------------------------------- */
[data-page="home"] .hx-panel { min-width: 0; display: grid; align-content: center; gap: 0.55rem; }
[data-page="home"] .hx-kicker {
  margin: 0;
  color: var(--hx-bronze);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
[data-page="home"] .hx-panel .hx-h2 { margin: 0.2rem 0 0; }
[data-page="home"] .hx-panel .hx-lede { margin: 0.5rem 0 0; }

[data-page="home"] .hx-facts {
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  border-top: 1px solid var(--hx-line-light);
}
[data-page="home"] .hx-facts > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.32fr) minmax(0, 1fr);
  gap: 0.5rem 1.2rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--hx-line-light);
}
[data-page="home"] .hx-facts dt {
  margin: 0;
  font-family: var(--hx-display);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--hx-ink);
}
[data-page="home"] .hx-facts dd { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--hx-ink-soft); }
[data-page="home"] .hx-panel .hx-textlink { margin-top: 0.6rem; }

/* ---------------------------------------------------------------- *
 * 5 — THE CENTRED HEADING BLOCK (selling-process device)
 * Used once, on the reviews band, so the page has one centred moment
 * against an otherwise left-hung rhythm.
 * ---------------------------------------------------------------- */
[data-page="home"] .band--reviews .band__head,
[data-page="home"] .band--reviews .rwall__head {
  text-align: center;
  max-width: 46ch;
  margin-inline: auto;
}
[data-page="home"] .band--reviews .band__head .h-section { max-width: none; }

/* ---------------------------------------------------------------- *
 * 6 — RESPONSIVE
 * ---------------------------------------------------------------- */
@media (max-width: 61.99em) {
  [data-page="home"] .hx-split { grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 3vw, 26px); }
  [data-page="home"] .hx-split--flip > .hx-mosaic,
  [data-page="home"] .hx-split:nth-of-type(even) > .hx-mosaic { order: 0; }
  [data-page="home"] .hx-mosaic { aspect-ratio: 4 / 3; }
}
@media (max-width: 43.75em) {
  [data-page="home"] .hx-frame { padding: 14px; border-radius: 16px; }
  [data-page="home"] .hx-mosaic { aspect-ratio: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  [data-page="home"] .hx-mosaic__tile--wide,
  [data-page="home"] .hx-mosaic__tile--square,
  [data-page="home"] .hx-mosaic__tile--tall { grid-column: 1; grid-row: auto; }
  [data-page="home"] .hx-mosaic .hx-media { height: auto; aspect-ratio: var(--hx-media-ratio, 3 / 2); }
  [data-page="home"] .hx-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

/* ======================================================================
 * DUKES ASSISTANT — the conversational surface. 19 August.
 * Built after the Oakwood/Nurtur reference Aarav sent: a greeting bubble
 * beside the launcher that says what it does, and a real chat panel that
 * asks one question at a time. Dukes' own palette, not theirs.
 * Page-scoped: the launcher exists site-wide but this ships on home first.
 * ====================================================================== */

[data-page="home"] .dbubble {
  position: fixed;
  right: clamp(12px, 2vw, 26px);
  bottom: calc(clamp(12px, 2vw, 26px) + 84px);
  z-index: 70;
  width: min(21rem, calc(100vw - 2.5rem));
  padding: 1rem 1.1rem 0.9rem;
  border-radius: 18px 18px 4px 18px;
  background: var(--hx-white, #fbf8f2);
  border: 1px solid rgba(13, 29, 49, 0.14);
  box-shadow: 0 26px 56px -28px rgba(13, 29, 49, 0.5);
  animation: dbubble-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dbubble-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
[data-page="home"] .dbubble p {
  margin: 0 1.2rem 0.7rem 0;
  color: var(--hx-ink, #171a20);
  font-size: 0.9rem;
  line-height: 1.5;
}
[data-page="home"] .dbubble__x {
  position: absolute;
  top: 0.35rem; right: 0.4rem;
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: #5b6670; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
[data-page="home"] .dbubble__x:hover { background: rgba(13, 29, 49, 0.08); }
[data-page="home"] .dbubble__go {
  min-height: 40px;
  padding: 0.5rem 0.95rem;
  border: 0; border-radius: 8px;
  background: var(--hx-bronze, #7b2430);
  color: #fbf8f2;
  font: inherit; font-size: 0.85rem; font-weight: 750;
  cursor: pointer;
}
[data-page="home"] .dbubble__go:hover { background: #94303c; }

/* ---- the panel ---- */
[data-page="home"] .dchat {
  position: fixed;
  right: clamp(12px, 2vw, 26px);
  bottom: clamp(12px, 2vw, 26px);
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: min(25rem, calc(100vw - 1.5rem));
  height: min(34rem, calc(100vh - 3rem));
  border-radius: 20px;
  overflow: hidden;
  background: var(--hx-white, #fbf8f2);
  border: 1px solid rgba(13, 29, 49, 0.16);
  box-shadow: 0 40px 90px -40px rgba(13, 29, 49, 0.7);
}
[data-page="home"] .dchat[hidden] { display: none; }

[data-page="home"] .dchat__head {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  background: var(--hx-forest-deep, #0d1d31);
  color: #f4eee3;
}
[data-page="home"] .dchat__mark {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: rgba(244, 238, 227, 0.12);
}
[data-page="home"] .dchat__mark img { width: 20px; height: auto; }
[data-page="home"] .dchat__title { display: grid; gap: 0.1rem; min-width: 0; }
[data-page="home"] .dchat__title strong { font-size: 0.95rem; font-weight: 750; }
[data-page="home"] .dchat__title span { font-size: 0.7rem; color: rgba(244, 238, 227, 0.72); line-height: 1.35; }
[data-page="home"] .dchat__close {
  margin-left: auto; flex: none;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: transparent; color: #f4eee3;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
[data-page="home"] .dchat__close:hover { background: rgba(244, 238, 227, 0.14); }

[data-page="home"] .dchat__log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.9rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  background: #eef2f4;
}
[data-page="home"] .dchat__msg { display: flex; }
[data-page="home"] .dchat__msg p {
  margin: 0;
  max-width: 84%;
  padding: 0.6rem 0.8rem;
  font-size: 0.88rem;
  line-height: 1.5;
}
[data-page="home"] .dchat__msg--bot p {
  border-radius: 14px 14px 14px 4px;
  background: #fbf8f2;
  border: 1px solid rgba(13, 29, 49, 0.1);
  color: var(--hx-ink, #171a20);
}
[data-page="home"] .dchat__msg--me { justify-content: flex-end; }
[data-page="home"] .dchat__msg--me p {
  border-radius: 14px 14px 4px 14px;
  background: var(--hx-forest-deep, #0d1d31);
  color: #f4eee3;
}

[data-page="home"] .dchat__summary {
  margin-top: 0.2rem;
  padding: 0.8rem 0.9rem;
  border-radius: 14px;
  background: #fbf8f2;
  border: 1px solid rgba(13, 29, 49, 0.14);
}
[data-page="home"] .dchat__summary-kind {
  margin: 0 0 0.5rem;
  color: var(--hx-bronze, #7b2430);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
[data-page="home"] .dchat__summary dl { margin: 0; }
[data-page="home"] .dchat__summary dl > div {
  display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); gap: 0.6rem;
  padding: 0.34rem 0; border-top: 1px solid rgba(13, 29, 49, 0.09);
}
[data-page="home"] .dchat__summary dt { margin: 0; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #5b6670; }
[data-page="home"] .dchat__summary dd { margin: 0; font-size: 0.86rem; color: var(--hx-ink, #171a20); }

/* ---- the reply rail ---- */
[data-page="home"] .dchat__reply { flex: none; padding: 0.7rem; background: #fbf8f2; border-top: 1px solid rgba(13, 29, 49, 0.1); }
[data-page="home"] .dchat__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
[data-page="home"] .dchat__chip {
  min-height: 40px;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(13, 29, 49, 0.22);
  border-radius: 999px;
  background: #fff;
  color: var(--hx-ink, #171a20);
  font: inherit; font-size: 0.82rem; font-weight: 650;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.14s ease;
}
[data-page="home"] .dchat__chip:hover { background: var(--hx-sage, #dbe8ec); border-color: rgba(13, 29, 49, 0.4); transform: translateY(-1px); }

[data-page="home"] .dchat__form { display: flex; gap: 0.4rem; }
[data-page="home"] .dchat__input {
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(13, 29, 49, 0.22);
  border-radius: 10px;
  font: inherit; font-size: 0.88rem;
  background: #fff; color: var(--hx-ink, #171a20);
}
[data-page="home"] .dchat__input:focus-visible { outline: 3px solid #c5a66a; outline-offset: 1px; }
[data-page="home"] .dchat__send {
  flex: none; min-height: 44px; padding: 0 1rem;
  border: 0; border-radius: 10px;
  background: var(--hx-forest-deep, #0d1d31); color: #f4eee3;
  font: inherit; font-size: 0.85rem; font-weight: 750; cursor: pointer;
}
[data-page="home"] .dchat__send:hover { background: #16283d; }

[data-page="home"] .dchat__routes { display: grid; gap: 0.4rem; }
[data-page="home"] .dchat__route {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0.5rem 0.9rem;
  border: 1px solid rgba(13, 29, 49, 0.2); border-radius: 10px;
  background: #fff; color: var(--hx-ink, #171a20);
  font-size: 0.86rem; font-weight: 750; text-decoration: none;
}
[data-page="home"] .dchat__route--primary { background: var(--hx-bronze, #7b2430); border-color: var(--hx-bronze, #7b2430); color: #fbf8f2; }
[data-page="home"] .dchat__route:hover { border-color: rgba(13, 29, 49, 0.42); }
[data-page="home"] .dchat__route--primary:hover { background: #94303c; }
[data-page="home"] .dchat__restart {
  min-height: 40px; border: 0; background: none;
  color: #5b6670; font: inherit; font-size: 0.8rem; text-decoration: underline;
  text-underline-offset: 0.28em; cursor: pointer;
}

[data-page="home"] .dchat__foot {
  flex: none; margin: 0;
  padding: 0.5rem 0.9rem;
  background: #fbf8f2;
  border-top: 1px solid rgba(13, 29, 49, 0.09);
  color: #5b6670; font-size: 0.7rem;
}
[data-page="home"] .dchat__foot a { color: var(--hx-bronze, #7b2430); }

/* The launcher steps aside while the panel is open. */
[data-page="home"] body.has-dchat-open .launcher,
body.has-dchat-open [data-page="home"] .launcher { display: none; }
[data-page="home"].has-dchat-open .launcher { display: none; }

@media (max-width: 30em) {
  [data-page="home"] .dchat { right: 0; left: 0; bottom: 0; width: 100%; height: 88vh; border-radius: 18px 18px 0 0; }
  [data-page="home"] .dbubble { bottom: calc(84px + 12px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .dbubble { animation: none; }
  [data-page="home"] .dchat__chip { transition: none; }
}

/* ======================================================================
 * DUKES ASSISTANT — round two, 19 August.
 * Aarav: "add a two second gap", "the colours also change which I don't
 * like", "it should be popping out", "bigger so it is easy to read and
 * talk to", "place it somewhere like Oakwood has done".
 * ====================================================================== */

/* ---- 1 · ONLY ONE ASSISTANT OPENS ----------------------------------
   The old "Dukes Receptionist / Guided enquiry builder" modal was still
   wired to the same launcher, so two different assistants could appear.
   On the homepage the conversational one wins; the written section at
   #dukes-receptionist stays in the page as the no-JS route. */
[data-page="home"] .reception__modal,
[data-page="home"] .reception-modal,
[data-page="home"] [data-reception-modal],
[data-page="home"] dialog.reception__dialog { display: none !important; }

/* ---- 2 · THREE COLOURS, AND THEY NEVER CHANGE ----------------------
   Every bubble was picking up a slightly different tone against a cool
   log field, so the panel looked like it changed colour as it filled.
   Locked to exactly three, all from the Seller's Guide palette:
     field  = guide blue   #dbe8ec
     bot    = guide cream  #fbf8f2
     you    = guide navy   #0d1d31                                        */
[data-page="home"] .dchat__log { background: #dbe8ec; }
[data-page="home"] .dchat__msg--bot p,
[data-page="home"] .dchat__msg--bot .dchat__typing {
  background: #fbf8f2 !important;
  border: 1px solid rgba(13, 29, 49, 0.12) !important;
  color: #171a20 !important;
}
[data-page="home"] .dchat__msg--me p {
  background: #0d1d31 !important;
  border: 1px solid #0d1d31 !important;
  color: #f4eee3 !important;
}
[data-page="home"] .dchat__summary { background: #fbf8f2; border-color: rgba(13, 29, 49, 0.14); }
[data-page="home"] .dchat__reply,
[data-page="home"] .dchat__foot { background: #fbf8f2; }

/* ---- 3 · BIGGER, AND EASIER TO READ AND TALK TO --------------------- */
[data-page="home"] .dchat {
  width: min(30rem, calc(100vw - 2rem));
  height: min(41rem, calc(100vh - 4rem));
  border-radius: 22px;
}
[data-page="home"] .dchat__head { padding: 1rem 1.05rem; }
[data-page="home"] .dchat__mark { width: 42px; height: 42px; }
[data-page="home"] .dchat__mark img { width: 25px; }
[data-page="home"] .dchat__title strong { font-size: 1.08rem; }
[data-page="home"] .dchat__title span { font-size: 0.76rem; }
[data-page="home"] .dchat__close { width: 44px; height: 44px; font-size: 1.6rem; }

[data-page="home"] .dchat__log { padding: 1.05rem; gap: 0.6rem; }
[data-page="home"] .dchat__msg p {
  max-width: 88%;
  padding: 0.72rem 0.95rem;
  font-size: 1rem;          /* was 0.88 — this is the readability fix */
  line-height: 1.55;
}
[data-page="home"] .dchat__chip { min-height: 46px; font-size: 0.92rem; padding: 0.55rem 0.95rem; }
[data-page="home"] .dchat__input { min-height: 50px; font-size: 1rem; }
[data-page="home"] .dchat__send { min-height: 50px; font-size: 0.95rem; padding: 0 1.15rem; }
[data-page="home"] .dchat__route { min-height: 50px; font-size: 0.94rem; }
[data-page="home"] .dchat__foot { font-size: 0.76rem; padding: 0.6rem 1rem; }
[data-page="home"] .dchat__summary dt { font-size: 0.78rem; }
[data-page="home"] .dchat__summary dd { font-size: 0.94rem; }

/* ---- 4 · THE TYPING INDICATOR (the two second gap made visible) ----- */
[data-page="home"] .dchat__typing {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.85rem 1rem !important;
  border-radius: 14px 14px 14px 4px;
}
[data-page="home"] .dchat__typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5b6670;
  animation: dchat-blink 1.25s infinite ease-in-out both;
}
[data-page="home"] .dchat__typing span:nth-child(2) { animation-delay: 0.18s; }
[data-page="home"] .dchat__typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes dchat-blink {
  0%, 80%, 100% { opacity: 0.28; transform: translateY(0); }
  40%           { opacity: 1;    transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .dchat__typing span { animation: none; opacity: 0.5; }
}

/* ---- 5 · IT POPS OUT, like the Oakwood widget ----------------------- */
[data-page="home"] .dchat {
  transform-origin: 100% 100%;
  animation: dchat-pop 300ms cubic-bezier(0.22, 1.28, 0.5, 1) both;
}
@keyframes dchat-pop {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .dchat { animation: none; }
}

/* ---- 6 · PLACEMENT, matching the reference ------------------------- */
[data-page="home"] .dchat  { right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); }
[data-page="home"] .dbubble {
  right: clamp(14px, 2vw, 28px);
  bottom: calc(clamp(14px, 2vw, 28px) + 92px);
  width: min(23rem, calc(100vw - 2.5rem));
}
[data-page="home"] .dbubble p { font-size: 0.95rem; }

@media (max-width: 32em) {
  [data-page="home"] .dchat {
    right: 0; left: 0; bottom: 0;
    width: 100%; height: 90vh;
    border-radius: 20px 20px 0 0;
    transform-origin: 50% 100%;
  }
}

/* ======================================================================
 * HOME — QUALITY DEVICES, from the Oakwood benchmark. 19 August.
 * Aarav: "I like the high quality of Oakwood Estates, we should go for
 * something similar with quality aspect."
 * Taken: the quotation-mark device, and a texture layer behind one band.
 * Not taken: their red (Dukes owns oxblood and gold), and no invented awards.
 * ====================================================================== */

/* ---- 1 · TESTIMONY, NOT TEXT BOXES --------------------------------
   An oversized oxblood quote mark opening every review card. This is the
   single cheapest device on the Oakwood page and it does most of the work
   of making the cards read as somebody speaking. */
[data-page="home"] .rcard__quote,
[data-page="home"] .rcard__body { position: relative; }
[data-page="home"] .rcard__quote::before,
[data-page="home"] .rcard__body::before {
  content: "\201C";
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--hx-display, "Gloock", Georgia, serif);
  font-size: 2.5rem;
  line-height: 0.68;
  color: var(--hx-bronze, #7b2430);
}

/* ---- 2 · THE TEXTURE LAYER (Aarav's "additional layer") -------------
   Faint diagonal rules behind ONE band, masked so they fade out rather
   than tiling flatly. Never behind body copy, never more than two bands. */
[data-page="home"] .band--reviews { position: relative; overflow: hidden; }
[data-page="home"] .band--reviews::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(-45deg,
    rgba(13, 29, 49, 0.055) 0 1px, transparent 1px 14px);
  -webkit-mask-image: linear-gradient(to bottom right, #000, transparent 58%);
          mask-image: linear-gradient(to bottom right, #000, transparent 58%);
}
[data-page="home"] .band--reviews > * { position: relative; z-index: 1; }

/* ---- 3 · INITIAL AVATARS, when there is no photograph ---------------
   Fixed palette, never random: the colour is chosen in markup from these
   four so it stays stable between loads. */
[data-page="home"] .rcard__initials:not(:has(img)) {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #2f5d50;
  color: #fbf8f2;
  font-family: var(--hx-display, "Gloock", Georgia, serif);
  font-size: 1.35rem;
  line-height: 1;
}
[data-page="home"] .rcard__initials[data-tone="2"]:not(:has(img)) { background: #7b2430; }
[data-page="home"] .rcard__initials[data-tone="3"]:not(:has(img)) { background: #16283d; }
[data-page="home"] .rcard__initials[data-tone="4"]:not(:has(img)) { background: #6b4620; }

/* ---- 4 · GREYSCALE TEST SUPPORT -------------------------------------
   The quality checklist asks whether the page still reads in greyscale.
   Toggle in devtools with: document.body.classList.add('qa-greyscale') */
body.qa-greyscale { filter: grayscale(1); }
/* ======================================================================
 * HOME — "WHO YOU ARE DEALING WITH". 19 August.
 * Amrit and the certificates brought forward, because the Oakwood
 * benchmark's real advantage is evidence rather than layout. Built to the
 * quality checklist in §10.4 of the design authority: a named person,
 * credentials shown as evidence with a route to check them, the accent
 * used only on actions, one texture layer, body measure under 46ch.
 * ====================================================================== */

[data-page="home"] .hx-band--trust {
  position: relative;
  overflow: hidden;
  background: var(--hx-white);
  border-top: 1px solid var(--hx-line-light);
  border-bottom: 1px solid var(--hx-line-light);
}
/* The second (and last) texture layer on this page. */
[data-page="home"] .hx-band--trust::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-45deg,
    rgba(13, 29, 49, 0.05) 0 1px, transparent 1px 14px);
  -webkit-mask-image: linear-gradient(to bottom left, #000, transparent 55%);
          mask-image: linear-gradient(to bottom left, #000, transparent 55%);
}
[data-page="home"] .hx-band--trust > * { position: relative; z-index: 1; }

[data-page="home"] .hx-frame--trust { background: var(--hx-sage); border-color: rgba(13, 29, 49, 0.14); }
[data-page="home"] .hx-trust__portrait { border-radius: 18px 18px 18px 72px; }

/* ---- the pull quote: testimony, not a text box ---- */
[data-page="home"] .hx-quote {
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  padding: 0 0 0 1.1rem;
  border-left: 3px solid var(--hx-bronze);
}
[data-page="home"] .hx-quote p {
  margin: 0;
  max-width: 44ch;
  font-family: var(--hx-display);
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: var(--hx-ink);
}
[data-page="home"] .hx-quote cite {
  display: block;
  margin-top: 0.55rem;
  font-style: normal;
  font-size: 0.86rem;
  font-weight: 750;
  color: var(--hx-ink);
}
[data-page="home"] .hx-quote cite span {
  display: block;
  margin-top: 0.1rem;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hx-bronze);
}

/* ---- the rating, stated the way Knight Frank states scale ---- */
[data-page="home"] .hx-trust__stat {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hx-line-light);
}
[data-page="home"] .hx-trust__stat strong {
  font-family: var(--hx-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 3.4vw, 3.2rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--hx-ink);
}
[data-page="home"] .hx-trust__stat span { max-width: 26ch; font-size: 0.85rem; line-height: 1.45; color: var(--hx-ink-soft); }

/* ---- the certificates: evidence, with somewhere to check it ---- */
[data-page="home"] .hx-trust__subhead {
  margin: clamp(22px, 3vw, 34px) 0 clamp(12px, 1.6vw, 18px);
  font-family: var(--hx-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  letter-spacing: -0.02em;
  color: var(--hx-ink);
}
[data-page="home"] .hx-certs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  margin: 0; padding: 0; list-style: none;
}
[data-page="home"] .hx-cert {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: clamp(14px, 1.6vw, 20px);
  border: 1px solid var(--hx-line-light);
  border-radius: 14px;
  background: var(--hx-white);
}
[data-page="home"] .hx-cert__scheme {
  margin: 0;
  font-family: var(--hx-display);
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.15;
  color: var(--hx-ink);
}
[data-page="home"] .hx-cert__kind {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--hx-bronze);
}
[data-page="home"] .hx-cert__meta { margin: 0.55rem 0 0; }
[data-page="home"] .hx-cert__meta > div {
  display: flex; justify-content: space-between; gap: 0.8rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--hx-line-light);
}
[data-page="home"] .hx-cert__meta dt { margin: 0; font-size: 0.76rem; color: var(--hx-ink-soft); }
[data-page="home"] .hx-cert__meta dd { margin: 0; font-size: 0.8rem; font-weight: 750; color: var(--hx-ink); }
[data-page="home"] .hx-chip--cert {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0.9rem;
  min-height: var(--hx-tap);
  background: none;
  color: var(--hx-bronze);
  font-size: 0.85rem;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .hx-chip--cert:hover { color: var(--hx-ink); }
  [data-page="home"] .hx-cert { transition: transform 0.2s ease, box-shadow 0.2s ease; }
  [data-page="home"] .hx-cert:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -28px rgba(13, 29, 49, 0.45); }
}
[data-page="home"] .hx-trust__note {
  margin: clamp(12px, 1.4vw, 16px) 0 0;
  font-size: 0.78rem;
  color: var(--hx-ink-soft);
}

@media (max-width: 61.99em) {
  [data-page="home"] .hx-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-page="home"] .hx-cert--record { grid-column: 1 / -1; }
}
@media (max-width: 43.75em) {
  [data-page="home"] .hx-certs { grid-template-columns: minmax(0, 1fr); }
  [data-page="home"] .hx-cert--record { grid-column: auto; }
  [data-page="home"] .hx-trust__portrait { border-radius: 16px 16px 16px 44px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .hx-cert { transition: none !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   Filled media. Where Aarav's photography has landed, the crown plate steps
   aside: no border, no tint, no label chip. The image reuses .hx-media__poster
   so there is one absolute-cover rule on this page, not two. The mosaic rule
   that drops aspect-ratio for grid-sized tiles still applies, because the
   filled figure keeps .hx-media.
   -------------------------------------------------------------------------- */
[data-page="home"] .hx-media--filled {
  border: 0;
  background: rgba(28, 33, 31, 0.06);
}

/* ---- CERTIFICATES SHOWN AS ISSUED (Aarav, 19 Aug) -------------------
   "the certificates need to be actual pictures, the company we don't need
   like that." The typographic plates are replaced by the real certificate
   previews — the same assets /sales/selling-process/ publishes — and the
   Companies House card is gone. Two plates, not three. */
[data-page="home"] .hx-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

[data-page="home"] .hx-cert { padding: 0; overflow: hidden; gap: 0; }

[data-page="home"] .hx-cert__shot {
  margin: 0;
  padding: clamp(14px, 1.8vw, 22px);
  background: var(--hx-clay);
  border-bottom: 1px solid var(--hx-line-light);
}
[data-page="home"] .hx-cert__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 18px 40px -26px rgba(13, 29, 49, 0.55);
}

[data-page="home"] .hx-cert__body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: clamp(14px, 1.6vw, 18px) clamp(14px, 1.6vw, 20px) 0;
}
[data-page="home"] .hx-cert__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px; height: 46px;
  padding: 6px;
  border: 1px solid var(--hx-line-light);
  border-radius: 10px;
  background: var(--hx-white);
}
[data-page="home"] .hx-cert__mark img { width: 100%; height: auto; }

[data-page="home"] .hx-cert__meta { margin: 0.8rem 0 0; padding-inline: clamp(14px, 1.6vw, 20px); }
[data-page="home"] .hx-chip--cert { margin: 0 clamp(14px, 1.6vw, 20px) clamp(10px, 1.2vw, 14px); padding-top: 0.85rem; }

@media (max-width: 43.75em) {
  [data-page="home"] .hx-certs { grid-template-columns: minmax(0, 1fr); }
}
/* ======================================================================
 * DUKES ASSISTANT — colour coherence + visibility. 19 August, round three.
 * Aarav: "the chat colour changes to blue, even the assistant colour is
 * red, that is messed up" and "there is no text on top that makes it more
 * visible".
 *
 * The problem was three different identities in one component: an oxblood
 * launcher, a navy header and a pale-blue field. The assistant now runs
 * ONE family end to end — oxblood — so the button you press and the panel
 * that opens are visibly the same thing.
 * ====================================================================== */

/* ---- header takes the launcher's oxblood, not navy ---- */
[data-page="home"] .dchat__head { background: #7b2430 !important; }
[data-page="home"] .dchat__mark { background: rgba(251, 248, 242, 0.16); }

/* ---- the field stops being blue. Warm paper, one tone, never changes. ---- */
[data-page="home"] .dchat__log { background: #f2ede4 !important; }
[data-page="home"] .dchat__msg--bot p,
[data-page="home"] .dchat__msg--bot .dchat__typing {
  background: #fffdf8 !important;
  border-color: rgba(23, 26, 32, 0.12) !important;
}
/* your own replies in the oxblood, so both ends of the conversation
   belong to the same palette */
[data-page="home"] .dchat__msg--me p {
  background: #7b2430 !important;
  border-color: #7b2430 !important;
  color: #fbf8f2 !important;
}
[data-page="home"] .dchat__send { background: #7b2430; }
[data-page="home"] .dchat__send:hover { background: #94303c; }
[data-page="home"] .dchat__chip:hover { background: #f6e3e6; border-color: rgba(123, 36, 48, 0.5); }
[data-page="home"] .dchat__summary-kind,
[data-page="home"] .dchat__foot a { color: #7b2430; }

/* ---- THE TEXT ON TOP. The greeting has to be readable at a glance,
        which is what makes the widget worth noticing at all. ---- */
[data-page="home"] .dbubble {
  padding: 1.15rem 1.25rem 1.05rem;
  border-radius: 20px 20px 6px 20px;
  border-color: rgba(123, 36, 48, 0.22);
  box-shadow: 0 30px 60px -26px rgba(13, 29, 49, 0.55);
}
[data-page="home"] .dbubble p {
  margin: 0 1.4rem 0.85rem 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #171a20;
}
[data-page="home"] .dbubble__x {
  top: -10px; right: -10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #7b2430;
  color: #fbf8f2;
  font-size: 1.05rem;
  box-shadow: 0 8px 18px -8px rgba(13, 29, 49, 0.6);
}
[data-page="home"] .dbubble__x:hover { background: #94303c; }
[data-page="home"] .dbubble__go { min-height: 44px; font-size: 0.9rem; }

/* ---- and a label beside the launcher itself, always visible ---- */
[data-page="home"] .launcher { z-index: 60; }
/* ======================================================================
 * HOME — 19 August, round four. Aarav, on the live page:
 *   "the blue is too strong"
 *   "the left and right, get that sorted, it needs a tiny very bit"
 *   "I don't like that line, the sideways one, get rid of that and do
 *    something else"
 * ====================================================================== */

/* ---- 1 · THE DIAGONAL LINES COME OUT --------------------------------
   The Oakwood-style repeating diagonal rules read as stripes rather than
   as texture, and they were catching the eye at the left and right edges
   where they met the band boundary. Removed from both bands.
   Replaced with what they were actually there to do: give the field a
   little depth. A single very soft corner wash does that without drawing
   a single visible line. */
[data-page="home"] .band--reviews::before,
[data-page="home"] .hx-band--trust::before {
  background-image:
    radial-gradient(120% 90% at 8% 0%, rgba(13, 29, 49, 0.05) 0%, rgba(13, 29, 49, 0) 58%),
    radial-gradient(110% 80% at 100% 100%, rgba(123, 36, 48, 0.04) 0%, rgba(123, 36, 48, 0) 60%) !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

/* ---- 2 · THE BLUE COMES DOWN ----------------------------------------
   #dbe8ec was carrying too much saturation against the cream either side
   of it, so the band read as a slab. Lifted towards the paper it sits
   next to: same hue, roughly half the strength. */
[data-page="home"] {
  --hx-sage: #eaf1f3;
}
[data-page="home"] .band--creds { background: #eaf1f3; }
[data-page="home"] .hx-frame--trust { background: #eef4f5; }
/* the chat field is a different surface and stays warm paper */

/* ---- 3 · THE LEFT AND RIGHT EDGES -----------------------------------
   The full-bleed bands ran hard into the viewport with nothing between
   the content and the edge at large widths. A small inset on the band
   itself gives the "tiny very bit" of room, and rounds the corner so the
   band reads as a considered field rather than a painted stripe. */
@media (min-width: 75em) {
  [data-page="home"] .band--reviews,
  [data-page="home"] .band--creds,
  [data-page="home"] .hx-band--trust,
  [data-page="home"] .hx-band--clay {
    width: calc(100% - clamp(18px, 2.2vw, 40px));
    margin-inline: auto;
    border-radius: 26px;
  }
  [data-page="home"] .band--contact {
    width: calc(100% - clamp(18px, 2.2vw, 40px));
    margin-inline: auto;
    border-radius: 26px;
  }
}

/* ---- 4 · while we are here: the marquee's first card was still being
        cut at the left edge. Widen the feather so a card is never half
        visible at rest. ---- */
[data-page="home"] .rwall {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%) !important;
          mask-image: linear-gradient(to right, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%) !important;
}
/* ======================================================================
 * ASSISTANT SECTION — readability and separation. 19 Aug, round six.
 * Aarav: "too much text on the first part", "the text is really hard to
 * read so I am not sure what I need to look at", "the contact info is
 * super nice" (kept untouched), "the big gap between the bottom",
 * "can we use a separation approach rather than everything joined up".
 *
 * No copy is deleted — the persistence note and the no-JavaScript promise
 * are commitments, not decoration. They are demoted to small print so ONE
 * line leads and the eye knows where to start.
 * ==================================================================== */

/* ---- 1 · ONE THING TO READ FIRST ---- */
[data-page="home"] #dukes-receptionist .reception__intro .h-section {
  font-size: clamp(2.1rem, 3.1vw, 2.9rem) !important;
  line-height: 1.03;
  max-width: 14ch;
}
/* the lead line stays readable and full size */
[data-page="home"] #dukes-receptionist .reception__notice:first-of-type {
  max-width: 40ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hx-ink);
}
/* the persistence note becomes small print, not a second paragraph
   competing with the first */
[data-page="home"] #dukes-receptionist .reception__notice + .reception__notice {
  margin-top: 0.6rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--hx-line-light);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--hx-ink-soft);
}

/* ---- 2 · SEPARATION, NOT ONE JOINED SLAB ----
   The five routes were a near-continuous stack. They now read as five
   distinct plates: more air between them, a visible edge on each, and a
   rule under the heading block so the two halves of the section are
   clearly different things. */
[data-page="home"] #dukes-receptionist.reception ol.reception__routes {
  gap: 0.85rem !important;
}
[data-page="home"] #dukes-receptionist .reception__disclosure {
  border: 1px solid rgba(23, 26, 32, 0.16) !important;
  box-shadow: 0 10px 26px -22px rgba(13, 29, 49, 0.4);
}
[data-page="home"] #dukes-receptionist .reception__summary {
  min-height: 62px;
  padding-block: 1rem;
}
[data-page="home"] #dukes-receptionist .reception__intro {
  padding-bottom: clamp(14px, 1.8vw, 22px);
  border-bottom: 1px solid var(--hx-line-light);
  margin-bottom: clamp(14px, 1.8vw, 22px);
}

/* ---- 3 · THE BIG GAP AT THE BOTTOM ----
   The left column (heading, notes, contact plate) runs taller than the
   five collapsed rows, so the band was left with a void under the right
   column. The columns now align to the top of the band and the band
   stops at its content instead of padding out the difference. */
@media (min-width: 64em) {
  [data-page="home"] #dukes-receptionist .reception__inner {
    grid-template-rows: auto !important;
    align-items: start !important;
  }
  [data-page="home"] #dukes-receptionist.reception ol.reception__routes {
    grid-row: 1 / span 2 !important;
    align-self: start !important;
  }
}
[data-page="home"] .hx-band--assistant { padding-bottom: clamp(28px, 3vw, 44px) !important; }
/* ======================================================================
 * AARAV'S REVIEW — 19 August, final pass.
 * Measured in the browser first; every item below is a confirmed defect,
 * not a guess.
 * ==================================================================== */

/* ---- 1 · "can't see the stars" / "too much blur" --------------------
   CONFIRMED: the 5.0 tile sits INSIDE .rwall, and I had put the fade mask
   on .rwall itself — so the mask was fading the heading, the rating and
   the stars along with the card track. The stars were always there
   (★★★★★ in the markup); they were being erased by my own mask.
   The mask belongs on the SCROLLING TRACK only. */
[data-page="home"] .rwall {
  -webkit-mask-image: none !important;
          mask-image: none !important;
  overflow: visible !important;
}
[data-page="home"] .rwall__viewport,
[data-page="home"] .rwall__track {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
/* the rating must never be dimmed by anything */
[data-page="home"] .rwall__score,
[data-page="home"] .rwall [class*="star"],
[data-page="home"] .rwall [class*="score"] {
  opacity: 1 !important;
  filter: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}
/* stars read before numbers, so give them presence */
[data-page="home"] .rwall [class*="star"] {
  font-size: 1.35rem !important;
  letter-spacing: 0.12em !important;
  color: #c5a66a !important;
}

/* ---- 2 · "the header and the first section have no space in between"
   CONFIRMED: header→hero 0px, hero→entry 0px, entry→assistant 0px.
   Every seam was flush. Real breathing room, without adding page length
   anywhere it is not needed. */
[data-page="home"] .hx-hero { margin-top: clamp(10px, 1.2vw, 18px) !important; }
[data-page="home"] .hx-band--entry { margin-block: clamp(10px, 1.2vw, 18px) !important; }
[data-page="home"] .hx-band--assistant { margin-top: clamp(14px, 1.6vw, 24px) !important; }

/* ---- 3 · "hovering makes it green" ----------------------------------
   The primary action hovered to #2a342d, a green that belongs to no part
   of this page's palette. Oxblood, which is the accent the banner and the
   launcher already use. */
[data-page="home"] .reception__act--primary,
[data-page="home"] .action-panel a,
[data-page="home"] .action-panel button {
  background: #7b2430 !important;
  border-color: #7b2430 !important;
  color: #fbf8f2 !important;
  transition: background-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .reception__act--primary:hover,
  [data-page="home"] .action-panel a:hover,
  [data-page="home"] .action-panel button:hover {
    background: #94303c !important;
    border-color: #94303c !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 30px -16px rgba(123, 36, 48, 0.75) !important;
  }
}

/* ---- 4 · "too much blur" elsewhere ----------------------------------
   Soften every remaining heavy feather so nothing readable sits under a
   gradient. */
[data-page="home"] .creds__viewport {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%) !important;
          mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%) !important;
}
/* ======================================================================
 * HOMEPAGE — the selling-process treatment. 19 August, final.
 * Aarav: "don't put a gap between the banner and the first scene",
 * "why is everything extended, use a different type of layout",
 * "like /sales/selling-process/ — rounded corners, the watermarks,
 *  centre-aligned text, the heading different fonts and clear",
 * "do the colours and hover animations now".
 * ==================================================================== */

/* ---- 1 · THE GAP ABOVE THE HERO COMES BACK OFF ----------------------
   I added 71px between header and hero on the last pass; it reads as a
   cream stripe above the film. Flush again. The seams further down keep
   their breathing room. */
[data-page="home"] .hx-hero { margin-top: 0 !important; }

/* ---- 2 · "why is everything extended" -------------------------------
   Bands were running the full 1560px shell with copy stretched across it.
   The shell narrows and every band becomes a CONTAINED, rounded plate
   with real margin either side — the selling-process geometry — instead
   of edge-to-edge colour. */
[data-page="home"] {
  --hx-colw: 1400px;
  --hx-plate-r: 30px;
}
[data-page="home"] .hx-band--assistant,
[data-page="home"] .hx-band--clay,
[data-page="home"] .hx-band--trust,
[data-page="home"] .band--reviews,
[data-page="home"] .band--creds,
[data-page="home"] .band--contact {
  width: min(96vw, 1560px) !important;
  margin-inline: auto !important;
  border-radius: var(--hx-plate-r) !important;
  overflow: hidden;
}

/* ---- 3 · THE CENTRED HEADING BAND, WITH THE LIONS -------------------
   The device from "Nine stages. One clear route.": a tinted plate, the
   heraldic lions ghosted left and right, a centred kicker in oxblood, the
   display face at scale, a short gold rule, then a centred lede at a
   narrow measure. */
[data-page="home"] .hx-band--assistant > .hx-col > .chapter,
[data-page="home"] .hx-band--clay > .hx-col > .chapter,
[data-page="home"] .hx-band--trust > .hx-col > .chapter { justify-content: center; }

[data-page="home"] .hx-head,
[data-page="home"] .band__head {
  position: relative;
  max-width: 58ch !important;
  margin-inline: auto !important;
  padding-block: clamp(18px, 2.2vw, 30px);
  text-align: center !important;
}
/* the lions, ghosted either side, never behind the type */
[data-page="home"] .hx-head::before,
[data-page="home"] .hx-head::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(90px, 11vw, 170px);
  height: clamp(120px, 15vw, 220px);
  transform: translateY(-50%);
  background: url("/assets/brand/heraldic-lions-watermark-white.png") center / contain no-repeat;
  opacity: 0.16;
  filter: brightness(0) saturate(100%) invert(12%) sepia(28%) saturate(1200%) hue-rotate(175deg);
  pointer-events: none;
}
[data-page="home"] .hx-head::before { right: calc(100% + clamp(10px, 3vw, 60px)); }
[data-page="home"] .hx-head::after  { left:  calc(100% + clamp(10px, 3vw, 60px)); transform: translateY(-50%) scaleX(-1); }
@media (max-width: 61.99em) {
  [data-page="home"] .hx-head::before,
  [data-page="home"] .hx-head::after { display: none; }
}

/* heading in the display face, centred, with the gold rule beneath */
[data-page="home"] .hx-h2,
[data-page="home"] .band__head .h-section {
  font-family: var(--hx-display) !important;
  text-align: center !important;
  margin-inline: auto !important;
  max-width: 20ch !important;
}
[data-page="home"] .hx-h2::after,
[data-page="home"] .band__head .h-section::after {
  content: "";
  display: block;
  width: 88px;
  height: 2px;
  margin: clamp(12px, 1.4vw, 18px) auto clamp(10px, 1.2vw, 14px);
  background: var(--hx-gold);
}
[data-page="home"] .hx-lede,
[data-page="home"] .band__head .lede {
  margin-inline: auto !important;
  text-align: center !important;
  max-width: 46ch !important;
}
/* the kicker centres with it, in oxblood */
[data-page="home"] .chapter__label,
[data-page="home"] .hx-kicker { color: var(--hx-bronze) !important; }

/* ---- 4 · HOVER, PROPERLY ANIMATED, IN THE BANNER'S COLOURS ----------
   Not gold, not green, not generic. The banner is navy and oxblood, so
   every interactive surface answers in those, with a real easing curve
   and a shadow that grows with the lift rather than a flat colour swap. */
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .hx-btn,
  [data-page="home"] .hx-chip,
  [data-page="home"] .hx-route,
  [data-page="home"] .hx-cert,
  [data-page="home"] .hx-entry__plate,
  [data-page="home"] .sdx-more-card {
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.24s ease,
                border-color 0.24s ease !important;
  }
  [data-page="home"] .hx-btn:hover,
  [data-page="home"] .hx-chip:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 18px 34px -16px rgba(13, 29, 49, 0.55) !important;
  }
  [data-page="home"] .hx-route:hover,
  [data-page="home"] .hx-cert:hover,
  [data-page="home"] .hx-entry__plate:hover {
    transform: translateY(-5px) !important;
    border-color: var(--hx-bronze) !important;
    box-shadow: 0 26px 48px -24px rgba(123, 36, 48, 0.42) !important;
  }
  /* arrows travel on hover, on every control that has one */
  [data-page="home"] a:hover > svg,
  [data-page="home"] button:hover > svg,
  [data-page="home"] .hx-chip:hover .hx-chip__arrow { transform: translateX(4px); }
  [data-page="home"] svg, [data-page="home"] .hx-chip__arrow { transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] * { transition: none !important; }
  [data-page="home"] .hx-btn:hover, [data-page="home"] .hx-route:hover { transform: none !important; }
}
/* ---- CORRECTIONS, measured in the browser -------------------------
   1. The "gap between the banner and the first scene" was never margin.
      It is the sticky "On this page" pill (.hx-nav, 56px) taking its own
      row above the film. The hero now starts under it and the pill floats
      over the film, which is where a page control belongs.
   2. My lion/centring rules targeted .hx-head, which does not exist on
      this page. The real full-width heading container is .band__head.
      .hx-panel headings are inside split layouts and must stay LEFT, or
      the mosaic-and-copy composition breaks. */

[data-page="home"] .hx-nav {
  position: absolute !important;
  z-index: 40;
  margin: 0 !important;
}
[data-page="home"] .hx-hero { margin-top: -56px !important; }
[data-page="home"] .hx-hero .hx-hero__inner { padding-top: 56px; }

/* the centred band head, with the lions — on the container that exists */
[data-page="home"] .band__head {
  position: relative;
  max-width: 58ch;
  margin-inline: auto;
  text-align: center;
}
[data-page="home"] .band__head::before,
[data-page="home"] .band__head::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(90px, 10vw, 158px);
  height: clamp(120px, 14vw, 205px);
  transform: translateY(-50%);
  background: url("/assets/brand/heraldic-lions-watermark-white.png") center / contain no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
[data-page="home"] .band__head::before { right: calc(100% + clamp(12px, 3vw, 56px)); }
[data-page="home"] .band__head::after  { left:  calc(100% + clamp(12px, 3vw, 56px)); transform: translateY(-50%) scaleX(-1); }
@media (max-width: 61.99em) {
  [data-page="home"] .band__head::before,
  [data-page="home"] .band__head::after { display: none; }
}
/* split-layout headings stay left; only the full-width heads centre */
[data-page="home"] .hx-panel .hx-h2,
[data-page="home"] .hx-panel .hx-lede { text-align: left !important; margin-inline: 0 !important; }
[data-page="home"] .hx-panel .hx-h2::after { margin-inline: 0 !important; }
/* ======================================================================
   rw2 — SECTION 04 REVIEW WALL v2. 19 August 2026 (claude lane).
   Vanilla conversion of the 21st.dev "testimonial-v2" scrolling-columns
   pattern, in Dukes materials: centred lockup head, then three columns
   of the site's own verbatim Google reviews on a slow seamless vertical
   loop over a clay field plate. Motion is CSS-only (keyframe to -50%,
   each column holding two copies of its list — the second copy is
   aria-hidden with tabindex=-1 links). Hover, focus-within and the
   explicit toggle (review-wall-v2.mjs) all pause; reduced motion gets a
   static grid of the twelve originals and no control to press.
   Replaces the rspot spotlight + horizontal rwall (both scripts guard on
   attributes that no longer exist, so they no-op untouched).
   ==================================================================== */
[data-page="home"] .rw2 {
  --rw2-ink: var(--hx-ink);
  --rw2-muted: var(--hx-ink-soft);
  --rw2-line: rgba(23, 26, 32, 0.14);
  --rw2-accent: var(--hx-bronze, #7b4a21);
  --rw2-oxblood: #7b2430;
  --rw2-gap: clamp(1rem, 1.6vw, 1.5rem);
  padding-block: clamp(1.5rem, 2.5vw, 2.5rem) clamp(2.2rem, 3.5vw, 3.2rem);
}

/* ---- centred lockup head ------------------------------------------- */
[data-page="home"] .rw2__head {
  display: grid;
  justify-items: center;
  text-align: center;
  max-width: 46rem !important;
}
[data-page="home"] .rw2__eyebrow {
  margin: 0;
  padding: 0.45rem 1rem;
  border: 1px solid var(--rw2-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--rw2-accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.2;
}
[data-page="home"] .rw2__title {
  margin: 1.1rem 0 0;
  font-family: var(--font-display, "Gloock", Georgia, serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 3.4vw, 3.5rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--rw2-ink);
  text-wrap: balance;
}
[data-page="home"] .rw2__score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem 0.6rem;
  margin: 1.1rem 0 0;
}
[data-page="home"] .rw2__value {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--rw2-ink);
}
[data-page="home"] .rw2__scorestars {
  color: var(--rw2-accent);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}
[data-page="home"] .rw2__scoremeta { color: var(--rw2-muted); font-size: 0.95rem; }
[data-page="home"] .rw2__acts { margin: 0.9rem 0 0; }

/* ---- the stage: one clay field plate the columns live on ----------- */
[data-page="home"] .rw2__stage {
  position: relative;
  margin-top: clamp(1.8rem, 2.8vw, 2.6rem);
  padding: clamp(1.1rem, 1.8vw, 1.8rem);
  background: var(--hx-clay, #f2ede4);
  border: 1px solid rgba(23, 26, 32, 0.1);
  border-radius: 26px;
}
[data-page="home"] .rw2__pause {
  position: absolute;
  top: clamp(0.9rem, 1.4vw, 1.4rem);
  right: clamp(0.9rem, 1.4vw, 1.4rem);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 40px;
  padding: 0.4rem 1rem;
  border: 1px solid var(--rw2-line);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.95);
  color: var(--rw2-ink);
  font-size: 0.8rem;
  font-weight: 750;
  cursor: pointer;
}
[data-page="home"] .rw2__pause:focus-visible { outline: 3px solid var(--hx-gold, #c5a66a); outline-offset: 2px; }
[data-page="home"] .rw2__pause-glyph {
  width: 9px;
  height: 11px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
[data-page="home"] .rw2[data-paused] .rw2__pause-glyph {
  width: 0;
  height: 0;
  border: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* ---- three columns, seamless vertical loop -------------------------- */
[data-page="home"] .rw2__window {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rw2-gap);
  max-height: clamp(540px, 74vh, 700px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
}
[data-page="home"] .rw2__col {
  display: flex;
  flex-direction: column;
  animation: rw2-scroll var(--rw2-dur, 50s) linear infinite;
  will-change: transform;
  min-width: 0;
}
@keyframes rw2-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
/* two stacked copies per column; each list carries the seam gap as its
   own padding so the -50% loop lands exactly on the repeat */
[data-page="home"] .rw2__list {
  display: grid;
  gap: var(--rw2-gap);
  margin: 0;
  padding: 0 0 var(--rw2-gap);
  list-style: none;
}
[data-page="home"] .rw2__window:hover .rw2__col,
[data-page="home"] .rw2__col:focus-within,
[data-page="home"] .rw2[data-paused] .rw2__col { animation-play-state: paused; }

/* ---- the card -------------------------------------------------------- */
[data-page="home"] .rw2__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 1.4rem 1.4rem 1.2rem;
  background: var(--hx-white, #fbf8f2);
  border: 1px solid var(--rw2-line);
  border-radius: 22px;
  box-shadow: 0 16px 34px -26px rgba(23, 26, 32, 0.45);
}
[data-page="home"] .rw2__quote { margin: 0; }
[data-page="home"] .rw2__quote p {
  margin: 0;
  max-width: none;
  color: var(--rw2-ink);
  font-size: 0.97rem;
  line-height: 1.62;
}
[data-page="home"] .rw2__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(23, 26, 32, 0.1);
}
[data-page="home"] .rw2__face {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
}
[data-page="home"] .rw2__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-page="home"] .rw2__face--initials {
  background: var(--hx-sage, #dbe8ec);
  color: var(--rw2-ink);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
[data-page="home"] .rw2__who { display: grid; gap: 0.15rem; min-width: 0; }
[data-page="home"] .rw2__name {
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--rw2-ink);
  line-height: 1.2;
}
[data-page="home"] .rw2__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--rw2-muted);
}
[data-page="home"] .rw2__stars { color: var(--rw2-accent); letter-spacing: 0.06em; }
[data-page="home"] .rw2__verify {
  grid-column: 1 / -1;
  justify-self: start;
  color: var(--rw2-oxblood);
  font-size: 0.8rem;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-page="home"] .rw2__card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  [data-page="home"] .rw2__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 44px -24px rgba(23, 26, 32, 0.5);
  }
}

/* ---- narrower stages ------------------------------------------------- */
@media (max-width: 74.99em) {
  [data-page="home"] .rw2__col--3 { display: none; }
  [data-page="home"] .rw2__window { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99em) {
  [data-page="home"] .rw2__col--2 { display: none; }
  [data-page="home"] .rw2__window { grid-template-columns: 1fr; max-height: min(68vh, 540px); }
}

/* ---- reduced motion: a still wall of the twelve originals ------------ */
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .rw2__col { animation: none; }
  [data-page="home"] .rw2 [data-rw2-dupe] { display: none; }
  [data-page="home"] .rw2__window {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  [data-page="home"] .rw2__pause { display: none; }
  [data-page="home"] .rw2__list { padding-bottom: 0; }
}