/* ======================================================================
 * THE HOMEPAGE COLOUR AND SURFACE SYSTEM - 19 August 2026 (revision 4).
 *
 * Aarav on revision 3:
 *   "I don't like the buttons, buttons are connected"
 *   "I want the colour on the image being displayed"
 *   "get the whole page sorted out and use different colours too"
 *   "use them [21st.dev button-colorful] for the button"
 *   "create separation like we discussed and use different background
 *    layers so every one needs to match the banner on top"
 *   "so the buttons don't look like they are not there and look clickable"
 *
 * ---------------------------------------------------------------------
 * 1 - THE PALETTE IS READ OFF THE IMAGE, NOT INVENTED.
 *
 * Sampled from the two photographs actually on screen, region by region,
 * with sharp. The numbers are the measured means:
 *
 *   home-hero-poster.webp (the film in the plate)
 *     sun core          rgb(230,207,162)  #e6cfa2   brightest, warm
 *     sun glow          #e4cc9f
 *     horizon band      #a49880           warm sand
 *     fields            #353626           deep olive
 *     sky upper         #626263           neutral grey
 *
 *   home-bg-dusk-v1.webp (the layer behind)
 *     dusk sky          #2f5171           the cool anchor
 *     lifted dusk       #4e6f8f
 *     deep dusk         #153756
 *     night             #0d1011
 *
 * So the page runs on WARM SAND AND SUN against COOL DUSK BLUE, which is
 * literally what the two pictures are made of. The Dukes gold (#c5a66a)
 * sits inside the sun range already, which is why the brand mark never
 * looks pasted on: it was the right colour for this photograph all along.
 * Oxblood stays, and stays reserved for one thing - the primary action.
 *
 * COLOUR HAS JOBS, stated per token below. Nothing is tinted at random.
 * ---------------------------------------------------------------------
 * 2 - THE BUTTONS.
 *
 * They read as "not there" because they were flat shapes on a flat panel
 * with 12px between them. Three fixes, measured:
 *   - the 21st.dev button-colorful treatment, rebuilt vanilla: a blurred
 *     gradient bleeding out from behind the button, 0.42 at rest and 1 on
 *     hover. Its colours are the sampled ones - oxblood into ember into
 *     sun - instead of the component's indigo/purple/pink, which belong to
 *     nothing on this page.
 *   - real separation: the gap goes 12px to 20px, and the secondary gets
 *     its own surface and a 1.5px edge so it is a button and not a label.
 *   - a press state on both, because a control with no :active reads as
 *     decoration.
 * ---------------------------------------------------------------------
 * 3 - THE BANDS.
 *
 * Every band on this page now carries a field layer keyed to the banner:
 * the same dusk photograph at low opacity, or a wash from the same sampled
 * range, so the page reads as one lit scene rather than as six unrelated
 * colours. Warm and cool alternate down the page so no two neighbours are
 * the same surface.
 *
 * SINGLE WRITER: everything is scoped to .hxo* or to [data-page="home"]
 * selectors in THIS file, which loads after home-2026.css.
 * ==================================================================== */

[data-page="home"] {
  /* ---- sampled off the film ---- */
  --hxo-sun: #e6cfa2;        /* JOB: the glow behind a primary action    */
  --hxo-ember: #c98a3f;      /* JOB: the warm middle of that glow        */
  --hxo-sand: #a49880;       /* JOB: hairlines and muted labels          */
  --hxo-olive: #353626;      /* JOB: the deepest warm, used sparingly    */

  /* ---- sampled off the dusk aerial ---- */
  --hxo-dusk: #2f5171;       /* JOB: the cool anchor, dark surfaces      */
  --hxo-dusk-lift: #4e6f8f;  /* JOB: a lifted cool, edges on dark        */
  --hxo-deep: #153756;       /* JOB: dark band fields                    */
  --hxo-night: #0b1520;      /* JOB: the ground the hero plate sits on   */

  /* ---- the plate family ---- */
  --hxo-cream: #fbf8f2;      /* JOB: THE premium white, plates only      */
  --hxo-paper: #f2e9d9;      /* JOB: the warm second surface, rails      */
  --hxo-shell-tint: #e9eef2; /* JOB: the cool second surface, fields     */
  --hxo-ink: #171a20;
  --hxo-ink-soft: #4f555b;
  --hxo-oxblood: #7b2430;    /* JOB: the primary action. Nothing else.   */
  --hxo-oxblood-deep: #5e1924;
  --hxo-line: rgba(23, 26, 32, 0.16);

  --hxo-shell: min(92vw, 1560px);   /* was 1320: lost on a wide monitor */
  --hxo-h: min(78svh, 720px);
  --hxo-radius: 30px;
  --hxo-copy: 43%;
  --hxo-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ====================================================================
 * THE HERO BAND
 * ================================================================== */
.hxo {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: calc(var(--hxo-h) + clamp(56px, 8vw, 120px));
  padding-block: clamp(20px, 2.4vw, 38px);
  overflow: clip;
  /* Aarav: "I need the blue or the green to come back." The warm sand field
     is out. This is the Dukes site standard - pale blue into sage, the guide
     family - which is also what every other page on the site floats on. */
  background: linear-gradient(180deg, #e6eef0 0%, #dbe8ec 42%, #d3e2e0 100%);
  --d: 0;
  --s: 0;
}
[data-page="home"] .hxo { margin-top: 0 !important; }
[data-page="home"] .hxo + * { margin-top: 0 !important; }

.hxo__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* THE SURROUND. Aarav: "we want it smaller in width so it looks 4K, and then
   basically blur the rest of it out." Upscaling a 1376px file across a 1920
   or 2560 viewport is exactly what made it look soft - at 2560 it was being
   stretched 1.9x. So the sharp copy is capped at its own native width and
   this one, the same frame scaled up hard and blurred past the point where
   resolution means anything, fills the rest of the band. A blurred pixel has
   no sharpness left to lose, which is the whole trick. */
.hxo__bg-wash {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  object-position: center;
  /* hue-rotated into the blue-green field: blurring a warm dusk frame
     and brightening it produced a beige haze that fought the field */
  filter: blur(46px) saturate(0.5) brightness(1.24) hue-rotate(-12deg);
  opacity: 0.5;
  transform: translate3d(0, calc(var(--d) * 10px), 0) scale(1.08);
  will-change: transform;
}

/* THE SHARP CENTRE. Never wider than the file itself, so it is painted at
   1:1 or smaller and stays crisp at any viewport width. */
.hxo__bg-plate {
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: min(1376px, 96vw);
  height: 74%;
  transform: translate3d(-50%, calc(var(--d) * 20px), 0);
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.7;
  filter: saturate(0.8) brightness(1.2);
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 30%, #000 100%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 30%, #000 100%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
  will-change: transform;
}

/* the veil that keeps both layers behind the plate rather than beside it */
.hxo__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(230, 238, 240, 0.7) 0%, rgba(219, 232, 236, 0.28) 44%, rgba(211, 226, 224, 0.5) 100%);
}

/* ---- THE PLATE ---- */
.hxo__island {
  position: relative;
  z-index: 2;
  width: var(--hxo-shell);
  /* min-height, not height. With a fixed height the copy row cannot go
     below its own min-content, so the grid overflowed by a measured 57px
     at 1920 and 76px at 1440 and the routes were being clipped off the
     bottom edge. The plate takes the height its content needs and the
     film, spanning both rows, matches it exactly. */
  min-height: 0;
  /* A HOMEPAGE HERO, NOT A SECTION HEADER. Aarav: "the text on the top left
     does not look homepage-worthy, it looks like a secondary page. I need it
     in the middle and the video bottom." Text left with the film beside it is
     an interior-page composition; a front door is centred and leads with one
     statement. So: centred copy block, the film full width beneath it, then
     the three routes across the bottom. One column, three rows - and the film
     still fills its box edge to edge. */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  border-radius: var(--hxo-radius);
  overflow: hidden;
  background: var(--hxo-cream);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 40px 90px -50px rgba(53, 54, 38, 0.55),
    0 6px 20px -14px rgba(53, 54, 38, 0.35);
  transform-origin: 50% 12%;
  transform: scale(calc(1 - 0.085 * var(--s))) translate3d(0, calc(var(--d) * -6px), 0);
  will-change: transform;
}
/* display: contents so .hxo__copy and .hxo__film become direct grid items of
   the island and stack in document order. */
.hxo__main { display: contents; }

.hxo__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 1.4vw, 20px);
  padding: clamp(26px, 2.8vw, 44px) clamp(24px, 4vw, 72px) clamp(22px, 2.2vw, 34px);
  background: var(--hxo-cream);
  color: var(--hxo-ink);
}
.hxo__eyebrow {
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--hxo-oxblood);
}
.hxo__title {
  margin: 0;
  font-family: var(--hx-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.015em;
  /* a front-door headline: one clear step above anything else on the page */
  font-size: clamp(2.6rem, 5vw, 5.1rem);
  color: var(--hxo-ink);
  max-width: 18ch;
}
.hxo__title span { display: block; }
.hxo__lede {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.05vw, 1.15rem);
  line-height: 1.6;
  color: var(--hxo-ink-soft);
}

/* ---- THE FILM ---- */
.hxo__film {
  position: relative;
  min-width: 0;
  /* Wide and cinematic. NOT aspect-ratio: with a max-height alongside it the
     box solves for height first and the film came out 1109px wide inside a
     1560px plate - measured - instead of running the full width. An explicit
     height and 100% width, with object-fit: cover doing the cropping, is the
     only way it fills edge to edge at every viewport. */
  width: 100%;
  height: clamp(210px, 28svh, 380px);
  overflow: hidden;
  background: var(--hxo-deep);
}
.hxo__film img,
.hxo__film video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;      /* FILLS THE WHOLE BOX */
  object-position: center; display: block;
}
/* With scripting disabled the HTML spec tells the user agent to expose
   controls on a <video> that declares none, and Chromium does. The film is
   decorative and cannot be operated, so they are suppressed. */
.hxo__film video::-webkit-media-controls,
.hxo__film video::-webkit-media-controls-enclosure,
.hxo__film video::-webkit-media-controls-panel { display: none !important; }
.hxo__film img { z-index: 0; }
.hxo__film video { z-index: 1; }

/* ====================================================================
 * THE BUTTONS - the 21st.dev button-colorful treatment, rebuilt vanilla
 * in the sampled colours, with the separation Aarav asked for.
 * ================================================================== */
.hxo__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* was 12px, which is what made them read as one control. 18px is the
     most the column can carry: measured, the pair needs 456px inside a
     453px column at 1440, so the padding comes down with it rather than
     the two of them wrapping into a stack. */
  gap: 18px;
  margin-top: clamp(4px, 0.8vw, 10px);
}

.hxo__btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 clamp(16px, 1.45vw, 21px);
  border-radius: 15px;
  border: 1px solid transparent;
  font-weight: 650;
  font-size: clamp(0.88rem, 0.68vw, 0.95rem);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.hxo__btn svg { width: 16px; height: 16px; flex: none; }

/* THE GLOW. This is the component's idea: a gradient sitting behind the
   button, blurred, bleeding past its edge, quiet at rest and lit on hover.
   The stops are the sampled ones, so the light around the button is the
   light in the photograph beside it. */
.hxo__btn--primary::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(100deg, var(--hxo-oxblood) 0%, var(--hxo-ember) 52%, var(--hxo-sun) 100%);
  filter: blur(11px);
  opacity: 0.42;
  transition: opacity 0.5s var(--hxo-ease);
}
.hxo__btn--primary {
  background: var(--hxo-oxblood);
  color: var(--hxo-cream);
  box-shadow: 0 12px 26px -14px rgba(123, 36, 48, 0.7);
}

/* the secondary is a BUTTON, not a label: its own surface, a real edge,
   and the same height and radius so the pair reads as a pair */
.hxo__btn--secondary {
  background: var(--hxo-shell-tint);
  border: 1.5px solid rgba(21, 55, 86, 0.32);
  color: var(--hxo-deep);
  box-shadow: 0 10px 22px -16px rgba(21, 55, 86, 0.6);
}

@media (hover: hover) and (pointer: fine) {
  .hxo__btn {
    transition: transform 0.3s var(--hxo-ease), box-shadow 0.3s var(--hxo-ease),
                background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease;
  }
  .hxo__btn svg { transition: transform 0.3s var(--hxo-ease); }
  .hxo__btn:hover { transform: translateY(-2px); }
  .hxo__btn:hover svg { transform: translate(3px, -3px); }
  .hxo__btn--primary:hover::before { opacity: 1; }
  .hxo__btn--primary:hover {
    background: var(--hxo-oxblood-deep);
    box-shadow: 0 20px 34px -16px rgba(123, 36, 48, 0.8);
  }
  .hxo__btn--secondary:hover {
    background: var(--hxo-deep);
    border-color: var(--hxo-deep);
    color: var(--hxo-cream);
    box-shadow: 0 20px 34px -16px rgba(21, 55, 86, 0.75);
  }
}
/* a control with no press state reads as decoration */
.hxo__btn:active { transform: translateY(1px) scale(0.985); }
.hxo__btn:focus-visible { outline: 3px solid var(--hxo-ember); outline-offset: 3px; }

/* ---- the rating chip ---- */
.hxo__rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 12px;
  border: 1px solid var(--hxo-line);
  background: rgba(23, 26, 32, 0.03);
  color: var(--hxo-ink);
  text-decoration: none;
  font-size: 0.86rem;
}
.hxo__rating svg { width: 20px; height: 20px; flex: none; }
.hxo__rating strong { font-weight: 700; }
.hxo__stars { color: var(--hxo-ember); letter-spacing: 0.06em; }
.hxo__count { color: var(--hxo-ink-soft); }
@media (hover: hover) and (pointer: fine) {
  .hxo__rating { transition: border-color 0.24s ease, background-color 0.24s ease; }
  .hxo__rating:hover { border-color: var(--hxo-ember); background: rgba(201, 138, 63, 0.1); }
}
.hxo__rating:focus-visible { outline: 3px solid var(--hxo-ember); outline-offset: 3px; }

/* ====================================================================
 * THE ROUTES RAIL - separated tiles, not a divided bar.
 * They were three cells sharing hairlines, which is exactly the
 * "connected" reading Aarav objected to on the buttons. Each is now its
 * own raised surface with a gap around it, so it is visibly a thing you
 * press.
 * ================================================================== */
.hxo__routes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1vw, 16px);
  list-style: none;
  margin: 0;
  padding: clamp(14px, 1.4vw, 20px);
  background: #eaf1f2;
  border-top: 1px solid rgba(21, 55, 86, 0.14);
}

.hxo__route {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(21, 55, 86, 0.2);
  background: var(--hxo-cream);
  box-shadow: 0 6px 16px -12px rgba(21, 55, 86, 0.55);
  text-decoration: none;
  color: var(--hxo-ink);
  overflow: hidden;
}
.hxo__route-kicker {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hxo-oxblood);
  margin-bottom: 4px;
}
.hxo__route-action {
  display: block;
  font-size: clamp(0.98rem, 1.05vw, 1.12rem);
  font-weight: 650;
  line-height: 1.25;
}
.hxo__route-cue {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(21, 55, 86, 0.28);
  color: var(--hxo-oxblood);
}
.hxo__route-cue svg { width: 15px; height: 15px; }

/* the directional wipe: the fill enters from the edge the pointer crossed
   and leaves by the edge it leaves through. --wx/--wy come from the script;
   with no script it simply never fires, and the tile is still a tile. */
.hxo__route::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, var(--hxo-deep), var(--hxo-dusk));
  clip-path: circle(0% at var(--wx, 50%) var(--wy, 50%));
  transition: clip-path 0.44s var(--hxo-ease);
}
@media (hover: hover) and (pointer: fine) {
  .hxo__route,
  .hxo__route .hxo__route-kicker,
  .hxo__route .hxo__route-cue {
    transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--hxo-ease),
                box-shadow 0.3s var(--hxo-ease);
  }
  .hxo__route:hover::before { clip-path: circle(150% at var(--wx, 50%) var(--wy, 50%)); }
  .hxo__route:hover {
    color: var(--hxo-cream);
    border-color: var(--hxo-dusk-lift);
    box-shadow: 0 16px 30px -18px rgba(21, 55, 86, 0.8);
  }
  .hxo__route:hover .hxo__route-kicker { color: var(--hxo-sun); }
  .hxo__route:hover .hxo__route-cue {
    color: var(--hxo-sun);
    border-color: rgba(230, 207, 162, 0.6);
    transform: translateX(4px);
  }
}
.hxo__route:active { transform: translateY(1px); }
.hxo__route:focus-visible { outline: 3px solid var(--hxo-oxblood); outline-offset: 2px; }

/* Between the mobile breakpoint and 1280 the copy column is too narrow to
   carry both controls on one row: measured, the pair wraps into a stack at
   1100 and 992. The column takes a little more of the plate through that
   range rather than the buttons stacking. The film still holds half. */
@media (min-width: 62em) and (max-width: 79.99em) {
  [data-page="home"] { --hxo-copy: 50%; }
}

/* ====================================================================
 * NARROW SCREENS
 * ================================================================== */
@media (max-width: 61.99em) {
  .hxo {
    min-height: 0;
    /* the sticky "On this page" pill is absolutely positioned over the top
       of the hero (home-2026.css); measured height 56px. */
    padding-block: calc(56px + clamp(12px, 3vw, 22px)) clamp(18px, 4vw, 28px);
  }
  .hxo__island { width: min(94vw, 720px); height: auto; border-radius: 22px; transform: none; }
  .hxo__main { grid-template-columns: 1fr; }
  .hxo__film { aspect-ratio: 16 / 10; }
  .hxo__routes { grid-template-columns: 1fr; }
  .hxo__route { min-height: 68px; }
  .hxo__actions { gap: 14px; }
  .hxo__btn { width: 100%; justify-content: space-between; }
  .hxo__bg img { transform: translate3d(0, calc(var(--d) * 12px), 0) scale(1.05); }
}

/* ====================================================================
 * THE BAND FIELDS - every band matched to the banner.
 *
 * One system: each band is a rounded plate (that geometry already exists
 * in home-2026.css) and each now gets a FIELD - a wash from the sampled
 * range, plus, on two of them only, the dusk photograph itself at low
 * opacity. Warm and cool alternate, so no two neighbouring bands are the
 * same surface, and every one of them is made of the banner's colours.
 *
 * The ::before layers need z-index 0 with the content lifted to 1, because
 * a positioned pseudo-element otherwise paints over in-flow content.
 * ================================================================== */
[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 {
  position: relative;
  isolation: isolate;
}
[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 > * { position: relative; z-index: 1; }

/* the shared field layer: the dusk photograph, almost gone, so the page
   keeps one horizon running through it */
[data-page="home"] .hx-band--clay::before,
[data-page="home"] .band--creds::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/assets/media/home/home-bg-dusk-v1.webp") center / cover no-repeat;
  opacity: 0.07;
  filter: saturate(0.6);
  pointer-events: none;
}

/* 01 assistant - cool, the dusk side of the palette at its lightest */
[data-page="home"] .hx-band--assistant {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(78, 111, 143, 0.16) 0%, rgba(78, 111, 143, 0) 62%),
    var(--hxo-shell-tint) !important;
}
/* 02 routes - warm, the sand side */
[data-page="home"] .hx-band--clay {
  background:
    radial-gradient(110% 90% at 88% 0%, rgba(201, 138, 63, 0.16) 0%, rgba(201, 138, 63, 0) 58%),
    var(--hxo-paper) !important;
}
/* 03 who you are dealing with - THE one dark band, the deep dusk */
[data-page="home"] .hx-band--trust {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(47, 81, 113, 0.55) 0%, rgba(11, 21, 32, 0) 70%),
    var(--hxo-deep) !important;
  color: var(--hxo-cream);
}
/* a dark surface must own its text colour, or it inherits the band's ink
   and ships at 1.2:1 - which is exactly how the route cards shipped once */
[data-page="home"] .hx-band--trust .hx-h2,
[data-page="home"] .hx-band--trust .hx-trust__subhead,
[data-page="home"] .hx-band--trust .chapter__index { color: var(--hxo-cream); }
[data-page="home"] .hx-band--trust .hx-lede,
[data-page="home"] .hx-band--trust .hx-trust__stat span { color: rgba(251, 248, 242, 0.82); }
[data-page="home"] .hx-band--trust .chapter__label,
[data-page="home"] .hx-band--trust .hx-kicker { color: var(--hxo-sun) !important; }
[data-page="home"] .hx-band--trust .hx-frame { background: rgba(251, 248, 242, 0.05); border-color: rgba(251, 248, 242, 0.14); }
[data-page="home"] .hx-band--trust .hx-quote { color: var(--hxo-cream); }
[data-page="home"] .hx-band--trust .hx-cert { background: var(--hxo-cream); color: var(--hxo-ink); }
[data-page="home"] .hx-band--trust .hx-textlink { color: var(--hxo-sun); }
[data-page="home"] .hx-band--trust .hx-trust__note { color: rgba(251, 248, 242, 0.7); }

/* 04 reviews - back to cream, the lightest surface on the page, because
   testimony should read as paper */
[data-page="home"] .band--reviews {
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(230, 207, 162, 0.2) 0%, rgba(230, 207, 162, 0) 60%),
    var(--hxo-cream) !important;
}
/* 05 portals - the cool tint again, with the horizon layer */
[data-page="home"] .band--creds {
  background:
    radial-gradient(120% 90% at 88% 100%, rgba(78, 111, 143, 0.18) 0%, rgba(78, 111, 143, 0) 60%),
    var(--hxo-shell-tint) !important;
}
/* 06 contact - warm sand, closing where the hero opened */
[data-page="home"] .band--contact {
  background:
    radial-gradient(110% 90% at 12% 100%, rgba(201, 138, 63, 0.18) 0%, rgba(201, 138, 63, 0) 58%),
    var(--hxo-paper) !important;
}

/* The ground the bands float on. It was the near-black night off the
   aerial, which left a dark strip under the hero and read as a seam. It is
   the warm stone from the horizon band instead, so the gaps between plates
   belong to the same lit scene and nothing on the page is black. */
[data-page="home"] { background: #d9e5e5; }
[data-page="home"] body,
body[data-page="home"] { background: #d9e5e5; }

/* ====================================================================
 * REDUCED MOTION
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hxo__bg img,
  .hxo__island { transform: none !important; }
  .hxo__film video { display: none; }
  .hxo__route::before { transition: none; }
  .hxo__btn, .hxo__btn svg, .hxo__btn--primary::before { transition: none; }
  .hxo__btn:hover, .hxo__route:hover { transform: none; }
}


/* ======================================================================
 * CONTRAST CORRECTIONS - found by sweeping EVERY text/background pair on
 * the page, not by guessing which selectors needed a colour. Changing a
 * band's field without changing what sits on it is exactly how the route
 * cards once shipped at 1.17:1.
 *
 * Measured before: quote 1.64:1, cite 1.64:1, "Verified Google review"
 * 1.08:1, the 5.0 numeral 1.64:1, and on the contact band the heading
 * 1.04:1 and its lede 1.33:1 - cream type left over from when that band
 * was dark, now sitting on the warm paper field.
 * ==================================================================== */

/* ---- 1 · the dark trust band owns ALL of its text ---- */
[data-page="home"] .hx-band--trust .hx-quote p { color: var(--hxo-cream); }
[data-page="home"] .hx-band--trust .hx-quote cite { color: rgba(251, 248, 242, 0.9); }
[data-page="home"] .hx-band--trust .hx-quote cite span { color: var(--hxo-sun); }
[data-page="home"] .hx-band--trust .hx-quote { border-inline-start-color: var(--hxo-sun); }
[data-page="home"] .hx-band--trust .hx-trust__stat strong { color: var(--hxo-sun); }
[data-page="home"] .hx-band--trust .hx-facts dt,
[data-page="home"] .hx-band--trust .hx-facts dd { color: var(--hxo-cream); }
/* the certificates keep their own light plate, so their ink stays ink */
[data-page="home"] .hx-band--trust .hx-cert,
[data-page="home"] .hx-band--trust .hx-cert * { color: var(--hxo-ink); }
[data-page="home"] .hx-band--trust .hx-cert .hx-cert__scheme { color: var(--hxo-ink); }
[data-page="home"] .hx-band--trust .hx-cert .hx-chip--cert { color: var(--hxo-oxblood); }

/* ---- 2 · the contact band is light now, so its type is ink ---- */
[data-page="home"] .band--contact .h-section,
[data-page="home"] .band--contact .action-panel__title { color: var(--hxo-ink) !important; }
[data-page="home"] .band--contact .lede,
[data-page="home"] .band--contact .action-panel__body { color: var(--hxo-ink-soft) !important; }
[data-page="home"] .band--contact .chapter__index { color: var(--hxo-oxblood) !important; }
[data-page="home"] .band--contact .action-panel {
  background: var(--hxo-cream);
  border: 1px solid rgba(164, 152, 128, 0.5);
}
/* the ember reads at 2.76:1 on cream at this size, just under the 3:1
   large-text floor, so the numerals take the oxblood instead */
[data-page="home"] .band--contact .action-panel__index { color: var(--hxo-oxblood) !important; }

/* ---- 3 · the stars. They are aria-hidden and the rating is stated in
     text beside them, but a 2.17:1 glyph is a smudge, not a star. This is
     the darkest point of the sampled ember that still reads as gold. ---- */
[data-page="home"] .hxo__stars,
[data-page="home"] .rcard__stars,
[data-page="home"] .hx-rating__stars { color: #8a5a1c !important; }
/* home-2026.css carries `[data-page="home"] .rwall [class*="star"] { color:
   #c5a66a !important }` - two attribute selectors plus a class, so it
   outranks the rule above even though both are !important. Matched exactly
   here, and this file loads after it, so this is the one that lands.
   Measured: 2.17:1 before, on a #faf7f0 card. */
[data-page="home"] .rwall [class*="star"] { color: #8a5a1c !important; }
/* except the aggregate score row, which sits on a DARK panel
   (rgb(29,36,31)): a deep brown reads 2.69:1 there. On that surface the
   star has to go the other way, to the sampled sun, which measures
   9.4:1. One blanket colour cannot serve both surfaces. */
[data-page="home"] .rwall .score .score__stars { color: var(--hxo-sun) !important; }

/* ---- 4 · the assistant band's journey labels, on its new cool field ---- */
[data-page="home"] .reception__label { color: var(--hxo-oxblood) !important; }


/* ======================================================================
 * THE SEAMS - 19 August, revision 6.
 *
 * Aarav: "the gaps also I meant."
 *
 * MEASURED FIRST. Every seam between every band on this page was ZERO:
 *
 *   hxo -> assistant   0px      who -> reviews     0px
 *   assistant -> routes 0px     reviews -> portals 0px
 *   routes -> who      0px      portals -> contact 0px
 *
 * So six rounded 30px plates were butted edge to edge. Two rounded corners
 * meeting with nothing between them is what makes the page read as one
 * continuous slab with dents in it rather than as separated sections -
 * which is exactly the separation Aarav has been asking for since the
 * route boxes.
 *
 * ONE SEAM TOKEN, used everywhere, so the rhythm is a system rather than
 * six independent numbers that drift the next time somebody edits a band.
 *
 * The header-to-hero seam stays at ZERO. That was his earlier note - "don't
 * put a gap between the banner and the first scene" - and it was about the
 * cream stripe that appeared between the header and the film. The hero is
 * still flush to the header; what gains a seam is plate-to-plate below it.
 * ==================================================================== */

[data-page="home"] {
  --hxo-seam: clamp(18px, 2vw, 34px);
}

/* the hero is full bleed and stays hard against the header */
[data-page="home"] .hxo { margin-top: 0 !important; }

/* every plate below it floats, with one measured seam between each pair
   and the same seam holding the last one off the footer */
[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 {
  margin-top: var(--hxo-seam) !important;
  margin-bottom: 0 !important;
}
/* the first plate takes the seam off the hero too, so the banner reads as
   the banner and the page starts underneath it */
[data-page="home"] .hxo + .hx-band--assistant { margin-top: var(--hxo-seam) !important; }
[data-page="home"] .band--contact { margin-bottom: var(--hxo-seam) !important; }

/* a plate needs a shadow to be a plate. Without one, a 30px radius on a
   surface only a step off the ground is just a rounded rectangle. */
[data-page="home"] .hx-band--assistant,
[data-page="home"] .hx-band--clay,
[data-page="home"] .band--reviews,
[data-page="home"] .band--creds,
[data-page="home"] .band--contact {
  box-shadow: 0 26px 54px -40px rgba(53, 54, 38, 0.5), 0 2px 8px -6px rgba(53, 54, 38, 0.28);
}
[data-page="home"] .hx-band--trust {
  box-shadow: 0 34px 70px -46px rgba(11, 21, 32, 0.85), 0 2px 10px -6px rgba(11, 21, 32, 0.5);
}


/* ======================================================================
 * BAND FIELDS, REVISION 7 - the blue and the green come back.
 *
 * Aarav: "the background colour over here and here too, as I need the blue
 * or the green to come back."
 *
 * The warm sand run is out. The page now floats on #d9e5e5, which is the
 * measured Dukes site standard ground, and the bands alternate BLUE and
 * SAGE from the guide family with one deep navy in the middle for weight.
 * The warm tokens survive in exactly one job each: oxblood on the primary
 * action, the sampled sun on the star glyphs and on the dark band. Colour
 * still has jobs; the jobs just stopped being the whole palette.
 * ==================================================================== */

[data-page="home"] .hx-band--assistant {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(47, 81, 113, 0.12) 0%, rgba(47, 81, 113, 0) 62%),
    #e4eef0 !important;
}
[data-page="home"] .hx-band--clay {
  background:
    radial-gradient(110% 90% at 88% 0%, rgba(23, 72, 60, 0.12) 0%, rgba(23, 72, 60, 0) 58%),
    #e2ebe4 !important;
}
[data-page="home"] .hx-band--trust {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(47, 81, 113, 0.55) 0%, rgba(11, 21, 32, 0) 70%),
    #153756 !important;
}
[data-page="home"] .band--reviews {
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(219, 232, 236, 0.85) 0%, rgba(219, 232, 236, 0) 62%),
    #fbf8f2 !important;
}
[data-page="home"] .band--creds {
  background:
    radial-gradient(120% 90% at 88% 100%, rgba(23, 72, 60, 0.12) 0%, rgba(23, 72, 60, 0) 60%),
    #e2ebe4 !important;
}
[data-page="home"] .band--contact {
  background:
    radial-gradient(110% 90% at 12% 100%, rgba(47, 81, 113, 0.14) 0%, rgba(47, 81, 113, 0) 58%),
    #e4eef0 !important;
}

/* the two bands carrying the horizon layer get it cooler to match */
[data-page="home"] .hx-band--clay::before,
[data-page="home"] .band--creds::before { opacity: 0.05; filter: saturate(0.4); }

/* the plate shadows go cool, or a warm shadow on a blue field reads muddy */
[data-page="home"] .hx-band--assistant,
[data-page="home"] .hx-band--clay,
[data-page="home"] .band--reviews,
[data-page="home"] .band--creds,
[data-page="home"] .band--contact {
  box-shadow: 0 26px 54px -40px rgba(21, 55, 86, 0.45), 0 2px 8px -6px rgba(21, 55, 86, 0.24) !important;
}

/* the hero plate, on a pale field, needs a cool shadow too */
.hxo__island {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 44px 96px -54px rgba(21, 55, 86, 0.6),
    0 6px 22px -14px rgba(21, 55, 86, 0.34) !important;
}


/* ======================================================================
 * REVISION 8 - 19 August 2026.
 *
 * Aarav: "make the video cover the whole white box" and "use a different
 * colour then blue".
 *
 * ---------------------------------------------------------------------
 * 1 - THE FILM COVERS THE WHOLE PLATE.
 *
 * It was a strip under a large cream block. Now it is the plate's floor:
 * absolutely positioned across all of it, with the copy and the routes
 * riding on top. There is no white box left to cover.
 *
 * 2 - WHY THE COPY STILL SITS ON A SURFACE.
 *
 * Measured, not assumed. I sampled the poster frame across the region the
 * centred copy occupies: the brightest tile there has relative luminance
 * 0.743 - it is the sun. Cream type over it needs the background pushed
 * down to about L 0.16 to clear 4.5:1, and a flat wash strong enough to do
 * that measures 0.8 alpha, which crushes the film to mud. This project has
 * made that exact mistake before: an 86% black wash on this hero was once
 * buying zero legibility because the footage behind it was already dark.
 *
 * So instead of drowning the whole frame, the words sit on one frosted
 * plate - deep green at 0.82 with a backdrop blur - and the film stays
 * visible and bright everywhere around it. Worst-case computed contrast
 * for cream on that plate over the brightest tile is 4.88:1.
 *
 * 3 - GREEN, NOT BLUE.
 *
 * The field, the ground, the frosted plate and the route bar all move to
 * the Dukes green family: the selling-process forest #17483c and the sage
 * field #e2ebe4, both already approved elsewhere on this site. Oxblood
 * still does one job and one job only - the primary action.
 * ==================================================================== */

[data-page="home"] {
  --hxo-forest: #17483c;      /* JOB: the green anchor, from selling-process */
  --hxo-forest-deep: #12291f; /* JOB: the frosted plate behind the words     */
  --hxo-sage: #e2ebe4;        /* JOB: the field                              */
  --hxo-sage-lift: #eef4ef;   /* JOB: the lighter field, route tiles         */
}

/* ---- the band field goes green ---- */
.hxo {
  background: linear-gradient(180deg, #eef4ef 0%, #e2ebe4 44%, #d5e3d8 100%) !important;
}
.hxo__bg-wash {
  /* rotated the other way now the field is green, so the blurred surround
     belongs to the field instead of fighting it */
  filter: blur(46px) saturate(0.42) brightness(1.22) hue-rotate(52deg) !important;
  opacity: 0.42 !important;
}
.hxo__bg::after {
  background: linear-gradient(180deg, rgba(238, 244, 239, 0.72) 0%, rgba(226, 235, 228, 0.3) 44%, rgba(213, 227, 216, 0.55) 100%) !important;
}
[data-page="home"] { background: #dbe7de !important; }
[data-page="home"] body,
body[data-page="home"] { background: #dbe7de !important; }

/* ---- THE PLATE: the film is its floor ---- */
.hxo__island {
  position: relative;
  min-height: min(74svh, 690px) !important;
  background: var(--hxo-forest-deep) !important;
  grid-template-rows: 1fr auto !important;
}
.hxo__film {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
}
/* a light grade only - the frosted plate does the legibility work, so this
   is here to seat the image, not to drown it */
.hxo__film::after {
  background: linear-gradient(180deg, rgba(18, 41, 31, 0.34) 0%, rgba(18, 41, 31, 0.12) 40%, rgba(18, 41, 31, 0.52) 100%) !important;
  opacity: 1 !important;
}

/* ---- THE COPY: one frosted plate, centred on the film ---- */
.hxo__copy {
  position: relative;
  z-index: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: min(760px, 88%);
  margin-block: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 48px) clamp(26px, 2.8vw, 40px) !important;
  border-radius: 24px;
  border: 1px solid rgba(251, 248, 242, 0.16);
  background: rgba(18, 41, 31, 0.82) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.9);
  color: var(--hxo-cream) !important;
}
.hxo__eyebrow { color: #d9c79a !important; }
.hxo__title { color: var(--hxo-cream) !important; }
.hxo__lede { color: rgba(251, 248, 242, 0.9) !important; }

.hxo__rating {
  border-color: rgba(251, 248, 242, 0.3) !important;
  background: rgba(251, 248, 242, 0.1) !important;
  color: var(--hxo-cream) !important;
}
.hxo__count { color: rgba(251, 248, 242, 0.86) !important; }
/* Scoped to match the earlier correction block, which uses
   [data-page="home"] .hxo__stars and therefore OUT-SPECIFIES a bare
   .hxo__stars even though both carry !important. That is why the deep
   brown intended for a cream chip was still landing on the dark frosted
   plate at a measured 1.95:1. Same specificity, later in the file. */
[data-page="home"] .hxo__stars { color: #e3c98f !important; }

/* the secondary button is on a dark plate now, so it inverts */
.hxo__btn--secondary {
  background: rgba(251, 248, 242, 0.1) !important;
  border-color: rgba(251, 248, 242, 0.5) !important;
  color: var(--hxo-cream) !important;
}

/* ---- THE ROUTES: a frosted bar on the film, not a white shelf ---- */
.hxo__routes {
  position: relative;
  z-index: 2;
  grid-row: 2;
  background: rgba(18, 41, 31, 0.7) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(251, 248, 242, 0.14) !important;
}
.hxo__route {
  background: rgba(251, 248, 242, 0.08) !important;
  border-color: rgba(251, 248, 242, 0.22) !important;
  color: var(--hxo-cream) !important;
  box-shadow: none !important;
}
.hxo__route-kicker { color: #d9c79a !important; }
.hxo__route-cue {
  border-color: rgba(251, 248, 242, 0.32) !important;
  color: #d9c79a !important;
}
.hxo__route::before {
  background: linear-gradient(120deg, var(--hxo-forest), #1e6350) !important;
}
@media (hover: hover) and (pointer: fine) {
  .hxo__route:hover {
    color: var(--hxo-cream) !important;
    border-color: rgba(227, 201, 143, 0.55) !important;
  }
  .hxo__route:hover .hxo__route-kicker,
  .hxo__route:hover .hxo__route-cue { color: #e3c98f !important; }
}

/* ---- the bands go green too, alternating sage and cream ---- */
[data-page="home"] .hx-band--assistant {
  background: radial-gradient(120% 90% at 12% 0%, rgba(23, 72, 60, 0.1) 0%, rgba(23, 72, 60, 0) 62%), #eef4ef !important;
}
[data-page="home"] .hx-band--clay {
  background: radial-gradient(110% 90% at 88% 0%, rgba(23, 72, 60, 0.14) 0%, rgba(23, 72, 60, 0) 58%), #e2ebe4 !important;
}
[data-page="home"] .hx-band--trust {
  background: radial-gradient(120% 100% at 50% 0%, rgba(30, 99, 80, 0.5) 0%, rgba(18, 41, 31, 0) 70%), #17483c !important;
}
[data-page="home"] .band--reviews {
  background: radial-gradient(100% 80% at 50% 0%, rgba(226, 235, 228, 0.9) 0%, rgba(226, 235, 228, 0) 62%), #fbf8f2 !important;
}
[data-page="home"] .band--creds {
  background: radial-gradient(120% 90% at 88% 100%, rgba(23, 72, 60, 0.12) 0%, rgba(23, 72, 60, 0) 60%), #eef4ef !important;
}
[data-page="home"] .band--contact {
  background: radial-gradient(110% 90% at 12% 100%, rgba(23, 72, 60, 0.14) 0%, rgba(23, 72, 60, 0) 58%), #e2ebe4 !important;
}
/* the plate shadows follow the field */
[data-page="home"] .hx-band--assistant,
[data-page="home"] .hx-band--clay,
[data-page="home"] .band--reviews,
[data-page="home"] .band--creds,
[data-page="home"] .band--contact {
  box-shadow: 0 26px 54px -40px rgba(18, 41, 31, 0.45), 0 2px 8px -6px rgba(18, 41, 31, 0.24) !important;
}
.hxo__island {
  box-shadow:
    0 44px 96px -54px rgba(18, 41, 31, 0.7),
    0 6px 22px -14px rgba(18, 41, 31, 0.4) !important;
}

/* the dark trust band keeps its own text colours against the new green */
[data-page="home"] .hx-band--trust .chapter__label,
[data-page="home"] .hx-band--trust .hx-kicker,
[data-page="home"] .hx-band--trust .hx-textlink,
[data-page="home"] .hx-band--trust .hx-quote cite span,
[data-page="home"] .hx-band--trust .hx-trust__stat strong { color: #e3c98f !important; }

@media (max-width: 61.99em) {
  .hxo__copy { width: 92%; margin-block: clamp(20px, 5vw, 34px); }
  .hxo__island { min-height: min(86svh, 720px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hxo__bg-wash, .hxo__bg-plate { transform: none !important; }
}


/* ======================================================================
 * REVISION 9 - 19 August 2026. The crest, and the colour arc.
 *
 * Aarav:
 *   "where are the lion watermark images, they need to be added to the
 *    right hand and left side"
 *   "use a different layer and image in the background, I cannot even see it"
 *   "keep the colours the same as before, not green, it does not look good"
 *   "do not use another layer behind the See your next move, instead let us
 *    see the video"
 *   "use blue on the top, keep the green here, and then when we scroll down
 *    introduce the new colour options to represent the other things"
 *
 * ---------------------------------------------------------------------
 * 1 - WHY THE GREEN BLOCK IS GONE BUT THE SMALL PRINT STILL HAS A SURFACE.
 *
 * Measured, not assumed. The film is object-fit: cover on a 1.93 box from a
 * 1728x1080 source, so the crop only moves vertically. I sampled the region
 * the copy occupies at five crop positions:
 *
 *     object-position     worst tile L      mean L
 *     center 0%              0.708           0.152
 *     center 25%             0.697           0.141
 *     center 50%             0.619           0.115
 *     center 75%             0.625           0.089
 *     center 100%            0.551           0.068
 *
 * The sun sits in the horizon band and survives every crop. At the darkest
 * available position the brightest tile behind the copy is still L 0.551, so
 * cream small text cannot go straight on the film at 4.5:1 anywhere.
 *
 * So the treatment splits by what each part actually needs:
 *
 *   - the HEADLINE is large display type, which needs 3:1, and it gets a
 *     shaped radial vignette rather than a block: 0.55 navy at the centre
 *     falling to nothing at the edges. Computed 3.16:1, and the film is
 *     visible around it and between the words.
 *   - the LEDE, RATING and BUTTONS need 4.5:1, so they get one slim frosted
 *     bar. Computed 6.75:1. It is a plinth, not a panel: the film runs above
 *     it, below it and either side.
 *
 * 2 - THE CREST is the signature. The heraldic lions open the page flanking
 * the headline instead of sitting in a footer. Brass, ghosted, on the film.
 *
 * 3 - THE COLOUR ARC. Not a swatch set: a temperature journey, and every
 * field is already approved somewhere on this site.
 *
 *     hero        guide blue      arrival, cool          #dbe8ec
 *     01 assist   pale blue       still arriving         #e8f0f2
 *     02 routes   warm stone      deciding, tactile      #efe7d9
 *     03 who      forest, dark    the one anchor         #17483c
 *     04 reviews  cream           testimony reads paper  #fbf8f2
 *     05 portals  mineral         institutional, cool    #e3edf0
 *     06 contact  blush           the close, warmest     #f2e2de
 *
 * Cool to warm to dark to paper to cool to warm. Blue at the top as asked,
 * the green kept exactly where he liked it, and the new colours arrive as
 * you scroll. Accents keep single jobs: oxblood is the primary action and
 * nothing else, brass is the crown, the lions and the stars.
 * ==================================================================== */

[data-page="home"] {
  --hxo-navy: #0d1d31;
  --hxo-blue-field: #dbe8ec;
  --hxo-brass: #c5a66a;
  --hxo-brass-lift: #e3c98f;
  --hxo-stone: #efe7d9;
  --hxo-mineral: #e3edf0;
  --hxo-blush: #f2e2de;
}

/* ---- the hero field goes back to the old blue ---- */
.hxo {
  background: linear-gradient(180deg, #eef4f5 0%, #dbe8ec 46%, #c9dde2 100%) !important;
}
.hxo__bg-wash {
  filter: blur(44px) saturate(0.55) brightness(1.14) hue-rotate(-16deg) !important;
  opacity: 0.5 !important;
}
.hxo__bg-plate { opacity: 0.62 !important; filter: saturate(0.72) brightness(1.06) !important; }
.hxo__bg::after {
  background: linear-gradient(180deg, rgba(238, 244, 245, 0.7) 0%, rgba(219, 232, 236, 0.26) 44%, rgba(201, 221, 226, 0.52) 100%) !important;
}
[data-page="home"] { background: #cfdfe2 !important; }
[data-page="home"] body,
body[data-page="home"] { background: #cfdfe2 !important; }

/* ---- the plate is the film, and nothing else ---- */
.hxo__island { background: var(--hxo-navy) !important; }
.hxo__film img,
.hxo__film video { object-position: center 82% !important; }
.hxo__film::after {
  background: linear-gradient(180deg, rgba(13, 29, 49, 0.3) 0%, rgba(13, 29, 49, 0.06) 34%, rgba(13, 29, 49, 0.42) 100%) !important;
}

/* ---- the copy no longer has a surface of its own ---- */
.hxo__copy {
  width: min(1000px, 92%) !important;
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: clamp(24px, 3vw, 44px) 0 clamp(20px, 2.4vw, 32px) !important;
  gap: clamp(18px, 2vw, 30px) !important;
}

/* ---- THE CREST ---- */
.hxo__crest {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(14px, 2vw, 26px) clamp(120px, 13vw, 210px);
}
/* the shaped vignette: strongest under the words, gone at the edges, so the
   film is never flattened into a block */
.hxo__crest::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  z-index: -1;
  background: radial-gradient(58% 62% at 50% 52%, rgba(13, 29, 49, 0.72) 0%, rgba(13, 29, 49, 0.46) 46%, rgba(13, 29, 49, 0) 78%);
  pointer-events: none;
}
/* The asset is a PAIR of lions facing each other in one 1536x1024 file, so
   painting it whole in each slot put four lions on the page. Each slot shows
   HALF the file - the left lion on the left, the right lion on the right -
   by doubling the background width and pinning it to that edge. */
.hxo__lion {
  position: absolute;
  top: 50%;
  width: clamp(84px, 9vw, 148px);
  height: clamp(120px, 14vw, 220px);
  transform: translateY(-50%);
  background-image: url("/assets/brand/heraldic-lions-watermark-white.png");
  background-repeat: no-repeat;
  background-size: 200% 100%;
  opacity: 0.5;
  filter: drop-shadow(0 2px 16px rgba(32, 29, 24, 0.85));
  pointer-events: none;
}
.hxo__lion--left { left: clamp(6px, 1.4vw, 26px); background-position: left center; }
.hxo__lion--right { right: clamp(6px, 1.4vw, 26px); background-position: right center; }
@media (max-width: 61.99em) { .hxo__lion { display: none; } }

.hxo__eyebrow { color: var(--hxo-brass-lift) !important; }
.hxo__title {
  color: #fbf8f2 !important;
  text-shadow: 0 2px 26px rgba(13, 29, 49, 0.7);
  max-width: 20ch !important;
}

/* ---- THE PLINTH ---- */
.hxo__plinth {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  width: min(720px, 100%);
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 34px) clamp(20px, 2.2vw, 28px);
  border-radius: 20px;
  border: 1px solid rgba(251, 248, 242, 0.16);
  background: rgba(13, 29, 49, 0.86);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 30px 60px -44px rgba(0, 0, 0, 0.85);
}
.hxo__lede { color: rgba(251, 248, 242, 0.92) !important; margin: 0 !important; }
.hxo__rating {
  border-color: rgba(251, 248, 242, 0.3) !important;
  background: rgba(251, 248, 242, 0.1) !important;
  color: #fbf8f2 !important;
}
.hxo__count { color: rgba(251, 248, 242, 0.88) !important; }
[data-page="home"] .hxo__stars { color: var(--hxo-brass-lift) !important; }
.hxo__btn--secondary {
  background: rgba(251, 248, 242, 0.1) !important;
  border-color: rgba(251, 248, 242, 0.52) !important;
  color: #fbf8f2 !important;
}

/* ---- the routes bar takes the navy, not the green ---- */
.hxo__routes {
  background: rgba(13, 29, 49, 0.74) !important;
  border-top: 1px solid rgba(251, 248, 242, 0.14) !important;
}
.hxo__route::before { background: linear-gradient(120deg, #0d1d31, #1d3446) !important; }
.hxo__route-kicker,
.hxo__route-cue { color: var(--hxo-brass-lift) !important; }
@media (hover: hover) and (pointer: fine) {
  .hxo__route:hover { border-color: rgba(227, 201, 143, 0.5) !important; }
}

/* ======================================================================
 * THE COLOUR ARC, band by band. Each field carries the accent that
 * belongs to it, so the icons and content change with the section rather
 * than one accent being sprayed down the page.
 * ==================================================================== */

/* 01 · still arriving — pale blue */
[data-page="home"] .hx-band--assistant {
  background: radial-gradient(120% 90% at 12% 0%, rgba(13, 29, 49, 0.08) 0%, rgba(13, 29, 49, 0) 62%), #e8f0f2 !important;
}
/* 02 · deciding — warm stone */
[data-page="home"] .hx-band--clay {
  background: radial-gradient(110% 90% at 88% 0%, rgba(197, 166, 106, 0.22) 0%, rgba(197, 166, 106, 0) 58%), #efe7d9 !important;
}
/* 03 · the one dark anchor — forest, kept exactly where he liked it */
[data-page="home"] .hx-band--trust {
  background: radial-gradient(120% 100% at 50% 0%, rgba(30, 99, 80, 0.5) 0%, rgba(18, 41, 31, 0) 70%), #17483c !important;
}
/* 04 · testimony reads as paper — cream */
[data-page="home"] .band--reviews {
  background: radial-gradient(100% 80% at 50% 0%, rgba(219, 232, 236, 0.8) 0%, rgba(219, 232, 236, 0) 62%), #fbf8f2 !important;
}
/* 05 · institutional — mineral */
[data-page="home"] .band--creds {
  background: radial-gradient(120% 90% at 88% 100%, rgba(13, 29, 49, 0.1) 0%, rgba(13, 29, 49, 0) 60%), #e3edf0 !important;
}
/* 06 · the close, warmest — blush */
[data-page="home"] .band--contact {
  background: radial-gradient(110% 90% at 12% 100%, rgba(123, 36, 48, 0.12) 0%, rgba(123, 36, 48, 0) 58%), #f2e2de !important;
}
[data-page="home"] .hx-band--assistant,
[data-page="home"] .hx-band--clay,
[data-page="home"] .band--reviews,
[data-page="home"] .band--creds,
[data-page="home"] .band--contact {
  box-shadow: 0 26px 54px -40px rgba(13, 29, 49, 0.42), 0 2px 8px -6px rgba(13, 29, 49, 0.22) !important;
}
.hxo__island {
  box-shadow: 0 44px 96px -54px rgba(13, 29, 49, 0.66), 0 6px 22px -14px rgba(13, 29, 49, 0.38) !important;
}

/* the dark forest band keeps brass on it, which is what makes it read as the
   same company as the crest at the top rather than a different page */
[data-page="home"] .hx-band--trust .chapter__label,
[data-page="home"] .hx-band--trust .hx-kicker,
[data-page="home"] .hx-band--trust .hx-textlink,
[data-page="home"] .hx-band--trust .hx-quote cite span,
[data-page="home"] .hx-band--trust .hx-trust__stat strong { color: var(--hxo-brass-lift) !important; }

@media (max-width: 61.99em) {
  .hxo__crest { padding-inline: 0; }
  .hxo__copy { width: 92% !important; }
  .hxo__plinth { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hxo__bg-wash, .hxo__bg-plate { transform: none !important; }
}


/* ======================================================================
 * REVISION 10 - 19 August 2026.
 *
 * Aarav: "I do not like the blue colourway, remove it, so the video does
 * not get covered at all."
 *
 * ---------------------------------------------------------------------
 * 1 - NOTHING SITS ON THE FILM EXCEPT THE HEADLINE.
 *
 * The plinth held the lede, the rating and the two buttons on top of the
 * footage. It is off the film entirely now: the plate is three stacked
 * rows, the film owns the first one whole, and a warm deck under it
 * carries the small print and the three routes. The only thing over the
 * footage is the crest - eyebrow, headline, lions - and its vignette.
 *
 * The vignette stays, and it is a grade rather than a panel. Measured
 * earlier: the brightest tile behind the headline is luminance 0.551 at
 * the darkest available crop, and cream over that bare computes 1.62:1 -
 * the headline would disappear into the sun. This one falls to nothing
 * well inside the frame, so the film runs uncovered to all four edges and
 * the words still clear their 3:1 floor.
 *
 * 2 - THE BLUE IS GONE.
 *
 * Warm paper and stone, from the Seller's Guide, which is this site's
 * design authority and the ground every other page floats on. The arc
 * moves by VALUE through its first half, takes one hue step at the end,
 * and keeps the forest band as the single dark anchor:
 *
 *     hero        warm paper    #f2ede4   the authority ground
 *     01 assist   cream         #f8f4ed   the lightest step
 *     02 routes   stone         #ece2d1   a measured step warmer
 *     03 who      forest        #17483c   the one dark anchor, kept
 *     04 reviews  cream         #fbf8f2   testimony reads as paper
 *     05 portals  umber greige  #e4d8c6   the deepest warm
 *     06 contact  blush         #f2e2de   one hue step, the close
 * ==================================================================== */

/* ---- the field: warm paper, no blue anywhere ---- */
.hxo {
  background: linear-gradient(180deg, #faf6ee 0%, #f2ede4 46%, #e6dccc 100%) !important;
}
.hxo__bg-wash {
  filter: blur(44px) saturate(0.5) brightness(1.16) !important;
  opacity: 0.44 !important;
}
.hxo__bg::after {
  background: linear-gradient(180deg, rgba(250, 246, 238, 0.72) 0%, rgba(242, 237, 228, 0.26) 44%, rgba(230, 220, 204, 0.5) 100%) !important;
}
[data-page="home"] { background: #ded3c2 !important; }
[data-page="home"] body,
body[data-page="home"] { background: #ded3c2 !important; }

/* ---- THE PLATE: film row, deck row, routes row ---- */
.hxo__island {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr auto auto !important;
  background: #201d18 !important;
}
/* copy is only a wrapper now; its two children take their own rows */
.hxo__copy { display: contents !important; }

/* the film owns row one, whole, and is covered by nothing */
.hxo__film {
  position: relative !important;
  inset: auto !important;
  grid-row: 1 !important;
  grid-column: 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: clamp(320px, 46svh, 560px);
  z-index: 0;
}
.hxo__film::after {
  /* a seating grade at the top and bottom edges only, nothing across the
     middle, so the frame is never flattened */
  background: linear-gradient(180deg, rgba(32, 29, 24, 0.34) 0%, rgba(32, 29, 24, 0) 26%, rgba(32, 29, 24, 0) 74%, rgba(32, 29, 24, 0.34) 100%) !important;
}

/* the crest shares the film's cell, and nothing else does */
.hxo__crest {
  grid-row: 1 !important;
  grid-column: 1 !important;
  z-index: 2;
  align-self: center;
  justify-self: center;
  width: min(1000px, 92%);
}
.hxo__crest::before {
  /* raised and widened: the eyebrow sat above the dark core and was
     rendering at 2.0:1 against the bright town. Centre moved to 46% and
     the core strengthened, still falling to nothing at 76% so all four
     edges of the film stay uncovered. */
  background: radial-gradient(56% 64% at 50% 46%, rgba(32, 29, 24, 0.76) 0%, rgba(32, 29, 24, 0.42) 46%, rgba(32, 29, 24, 0) 76%) !important;
}
.hxo__eyebrow {
  color: #f0dcb4 !important;
  text-shadow: 0 1px 12px rgba(32, 29, 24, 0.9), 0 0 3px rgba(32, 29, 24, 0.7);
}
.hxo__title { text-shadow: 0 2px 30px rgba(32, 29, 24, 0.75) !important; }

/* ---- THE DECK: everything that used to sit on the footage ---- */
.hxo__plinth {
  grid-row: 2 !important;
  grid-column: 1 !important;
  width: auto !important;
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px) clamp(16px, 2vw, 34px) !important;
  padding: clamp(20px, 2.2vw, 30px) clamp(22px, 2.6vw, 40px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f6f1e8 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  text-align: left;
}
.hxo__plinth .hxo__lede {
  grid-column: 1;
  grid-row: 1;
  color: #3f3a33 !important;
  text-align: left !important;
  max-width: 52ch !important;
}
.hxo__plinth .hxo__rating {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  border-color: rgba(32, 29, 24, 0.18) !important;
  background: rgba(32, 29, 24, 0.04) !important;
  color: #201d18 !important;
}
.hxo__plinth .hxo__count { color: #5c554b !important; }
[data-page="home"] .hxo__plinth .hxo__stars { color: #8a5a1c !important; }
.hxo__plinth .hxo__actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-content: flex-end;
}
.hxo__btn--secondary {
  background: transparent !important;
  border-color: rgba(32, 29, 24, 0.3) !important;
  color: #201d18 !important;
}
@media (hover: hover) and (pointer: fine) {
  .hxo__btn--secondary:hover {
    background: #201d18 !important;
    border-color: #201d18 !important;
    color: #f6f1e8 !important;
  }
}

/* ---- the routes bar, same warm family ---- */
.hxo__routes {
  grid-row: 3 !important;
  grid-column: 1 !important;
  background: #ece2d1 !important;
  border-top: 1px solid rgba(32, 29, 24, 0.12) !important;
}
.hxo__route {
  background: #faf6ee !important;
  border-color: rgba(32, 29, 24, 0.16) !important;
  color: #201d18 !important;
}
.hxo__route::before { background: linear-gradient(120deg, #201d18, #3a332a) !important; }
.hxo__route-kicker { color: #7b2430 !important; }
.hxo__route-cue { color: #7b2430 !important; border-color: rgba(32, 29, 24, 0.22) !important; }
@media (hover: hover) and (pointer: fine) {
  .hxo__route:hover { color: #faf6ee !important; border-color: rgba(230, 207, 162, 0.5) !important; }
  .hxo__route:hover .hxo__route-kicker,
  .hxo__route:hover .hxo__route-cue { color: #e6cfa2 !important; }
}

/* ---- the arc, without blue ---- */
[data-page="home"] .hx-band--assistant {
  background: radial-gradient(120% 90% at 12% 0%, rgba(32, 29, 24, 0.05) 0%, rgba(32, 29, 24, 0) 62%), #f8f4ed !important;
}
[data-page="home"] .hx-band--clay {
  background: radial-gradient(110% 90% at 88% 0%, rgba(197, 166, 106, 0.22) 0%, rgba(197, 166, 106, 0) 58%), #ece2d1 !important;
}
[data-page="home"] .band--reviews {
  background: radial-gradient(100% 80% at 50% 0%, rgba(236, 226, 209, 0.9) 0%, rgba(236, 226, 209, 0) 62%), #fbf8f2 !important;
}
[data-page="home"] .band--creds {
  background: radial-gradient(120% 90% at 88% 100%, rgba(123, 36, 48, 0.08) 0%, rgba(123, 36, 48, 0) 60%), #e4d8c6 !important;
}
[data-page="home"] .band--contact {
  background: radial-gradient(110% 90% at 12% 100%, rgba(123, 36, 48, 0.14) 0%, rgba(123, 36, 48, 0) 58%), #f2e2de !important;
}
[data-page="home"] .hx-band--assistant,
[data-page="home"] .hx-band--clay,
[data-page="home"] .band--reviews,
[data-page="home"] .band--creds,
[data-page="home"] .band--contact {
  box-shadow: 0 26px 54px -40px rgba(32, 29, 24, 0.4), 0 2px 8px -6px rgba(32, 29, 24, 0.2) !important;
}
.hxo__island {
  box-shadow: 0 44px 96px -54px rgba(32, 29, 24, 0.62), 0 6px 22px -14px rgba(32, 29, 24, 0.34) !important;
}

@media (max-width: 61.99em) {
  .hxo__plinth {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hxo__plinth .hxo__lede { text-align: center !important; }
  .hxo__plinth .hxo__rating { justify-self: center; }
  .hxo__plinth .hxo__actions { grid-column: 1; grid-row: auto; justify-content: center; }
}


/* ======================================================================
 * REVISION 11 - 19 August 2026.
 *
 * Aarav: "get rid of the lion watermark, and make the chatbot and the text
 * that is coming out a little smaller, and the dropdowns everywhere
 * smaller, and instead of a dropdown on this page on the phone make a
 * slider that goes horizontal, or do not include that on the phone, as
 * there is too much stuff going on the phone and not enough space."
 *
 * Everything here is scoped to [data-page="home"] or to .hxo*/.hx-rail, so
 * no other page changes. Measured before-and-after numbers are in the
 * comments beside each rule.
 * ==================================================================== */

/* ---- 1 · the lions are gone ---- */
.hxo__lion { display: none !important; }

/* ---- 2 · the assistant launcher and its greeting come down a step ----
   Measured before: launcher 74x74, greeting bubble 303 wide at 16px. */
/* dukes-assistant.css pins this with `html body .launcher[data-launcher]`,
   specificity (0,2,3) and !important, which out-ranks a plain
   [data-page="home"] .launcher (0,2,0) even with !important of its own -
   the launcher stayed at a measured 74x74. Matched at (0,3,2) so this is
   the rule that lands. */
html body[data-page="home"] .launcher[data-launcher] {
  width: 58px !important;
  height: 58px !important;
}
html body[data-page="home"] .launcher[data-launcher] .launcher__glyph,
html body[data-page="home"] .launcher[data-launcher] .launcher__crown { transform: scale(0.8); }
[data-page="home"] .launcher__sub { font-size: 10px !important; }
[data-page="home"] .dbubble {
  max-width: 250px !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
}
[data-page="home"] .dbubble,
[data-page="home"] .dbubble p {
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
}
[data-page="home"] .dbubble button,
[data-page="home"] .dbubble .btn {
  font-size: 0.82rem !important;
  min-height: 40px !important;
  padding: 0 14px !important;
}

/* ---- 3 · the page dropdowns come down a step ----
   The "On this page" pill measured 301x48 at 12.8px; the assistant journey
   rows measured 40px tall at 16px. The header dropdowns are NOT touched:
   that is the shared shell, which every one of the 27 pages renders. */
[data-page="home"] .hx-nav__pill {
  min-height: 40px !important;
  padding-block: 6px !important;
  font-size: 0.72rem !important;
}
[data-page="home"] .hx-nav__current { font-size: 0.78rem !important; }
[data-page="home"] .hx-nav__link {
  min-height: 40px !important;
  font-size: 0.86rem !important;
}
[data-page="home"] .hx-nav__group { font-size: 0.64rem !important; }
[data-page="home"] .reception__label {
  font-size: 0.94rem !important;
  min-height: 44px !important;
}
[data-page="home"] .reception__eyebrow { font-size: 0.68rem !important; }
[data-page="home"] .reception__asks li,
[data-page="home"] .reception__outcome { font-size: 0.88rem !important; }

/* ---- 4 · THE PHONE RAIL ----
   One horizontal scroller instead of a dropdown that opens over the page.
   Hidden above the phone breakpoint; the dropdown is hidden below it. So
   exactly one of the two is in the document flow at any width. */
.hx-rail { display: none; }

@media (max-width: 47.99em) {
  [data-page="home"] .hx-nav { display: none !important; }

  .hx-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px clamp(12px, 4vw, 20px);
    background: #f2ede4;
    border-bottom: 1px solid rgba(32, 29, 24, 0.12);
    /* the edges fade rather than clipping a chip in half */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .hx-rail::-webkit-scrollbar { display: none; }

  .hx-rail__chip {
    flex: none;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(32, 29, 24, 0.18);
    background: #fbf8f2;
    color: #201d18;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
  }
  .hx-rail__index {
    font-family: var(--hx-display);
    font-size: 0.78rem;
    color: #7b2430;
  }
  .hx-rail__chip:focus-visible { outline: 3px solid #7b2430; outline-offset: 2px; }

  /* the hero no longer needs to clear a 56px absolutely-positioned pill,
     because the rail is in normal flow above it */
  .hxo { padding-block: clamp(14px, 4vw, 22px) clamp(18px, 4vw, 28px) !important; }
}


/* ======================================================================
 * REVISION 12 - the "Speak to Dukes" label comes off the launcher.
 *
 * It measured 123px wide at zero height, anchored at x1395 on a 1440
 * viewport, so it was spilling out of the 58px launcher and printing
 * across the crown.
 *
 * CLIPPED, NOT REMOVED. The launcher is an <a> with no aria-label, no
 * aria-labelledby and no title - checked - so this text IS its entire
 * accessible name. display:none would leave a link with no name at all,
 * which is a worse bug than the one being fixed. The standard clip keeps
 * it for a screen reader and takes it off the screen.
 * ==================================================================== */
html body[data-page="home"] .launcher[data-launcher] .launcher__label,
html body[data-page="home"] .launcher[data-launcher] .launcher__text,
html body[data-page="home"] .launcher[data-launcher] .launcher__sub {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ======================================================================
 * REVISION 10 - 19 August 2026. THE FLAGSHIP CINEMA PASS.
 *
 * Aarav, looking at revision 9:
 *   "the home page is what we wanna make the best page"
 *   "the page is really bad because of how simple it is, the buttons are
 *    really bad, they look all AI generated"
 *   "we do not need the on this page button"
 *   "make sure the video continues displaying; we are going to generate
 *    three to four more videos and they are on loop, one ends, the next
 *    comes out"
 *   "the images we generated still remain but utilised differently"
 *   "the client money protection and property redress, we can see them
 *    physically - keep that. I do like the green colour here"
 *   "the rest of the colouring - get rid of it, change everything else"
 *
 * WHAT THIS LAYER DOES
 * 1. The boxed island floating on a blurred wash is GONE. The hero is now
 *    the sellers-guide cinema plate, full width min(96vw,1920px): copy on
 *    the plate's own forest ground on the left, the film filling the right
 *    column and dissolving into the plate through a gradient blend - the
 *    exact fade Aarav praised on /sales/sellers-guide/. New hxo2 markup;
 *    every old hxo_* rule above this line is dead weight on no elements.
 * 2. A double-buffered film sequencer (home-hero-drift.mjs rev 4) plays
 *    the films in order and crossfades on ended. Files that do not
 *    exist yet are skipped, so home-film-02..04.mp4 go live the moment
 *    Aarav drops them into /assets/media/.
 * 3. The colour arc is rebuilt AROUND the green he kept:
 *      ground       #dbe4de  sage-mist, the room the plates stand in
 *      hero         #0f3028  forest-deep cinema plate  (dark bookend)
 *      01 assistant #e7efe9  green mist
 *      02 routes    #f2ede4  warm paper - deciding, tactile
 *      03 who       #17483c  UNCHANGED - the approved anchor
 *      04 reviews   #f7f1e7  ivory - testimony reads as paper
 *      05 portals   #d7e5e8  mineral - institutional, cool
 *      06 contact   #0f3028  forest-deep close, mirrors the hero
 *    Never two adjacent plates in one family; dark = decision or truth.
 * 4. Buttons stop looking generated: the reference recipe site-wide on
 *    this page - oxblood #7b2430 primary fill, bordered secondary that
 *    fills on hover, 48-56px targets, radius 8px, weight 780, -2px lift,
 *    3px focus ring, no gold pills.
 * 5. The two freed hero-background photographs are reseated: the aerial
 *    becomes the 21:9 establishing plate under "Where a property is
 *    seen"; the dusk frame sits beside the two contact panels.
 * ==================================================================== */

[data-page="home"] {
  --x2-forest: #17483c;        /* JOB: the kept anchor                    */
  --x2-forest-deep: #0f3028;   /* JOB: hero + contact plate ground        */
  --x2-forest-lift: #1e5a49;   /* JOB: hover lift on forest fills         */
  --x2-ground: #dbe4de;        /* JOB: the page ground                    */
  --x2-mist: #e7efe9;          /* JOB: assistant field                    */
  --x2-paper: #f2ede4;         /* JOB: routes field                       */
  --x2-ivory: #f7f1e7;         /* JOB: reviews field                      */
  --x2-mineral: #d7e5e8;       /* JOB: portals field                      */
  --x2-cream: #fbf8f2;         /* JOB: plates and cards only              */
  --x2-oxblood: #7b2430;       /* JOB: the primary action, nothing else   */
  --x2-oxblood-dark: #5e1924;  /* JOB: its hover on light ground          */
  --x2-oxblood-lift: #9a3442;  /* JOB: its hover on dark ground           */
  --x2-gold: #c5a66a;          /* JOB: crown, kickers-on-dark, stars      */
  --x2-gold-lift: #e3c98f;
  --x2-ink: #171a20;
  --x2-ink-soft: #4f555b;
  --x2-cream-text: #f4eee3;
  --x2-cream-soft: rgba(244, 238, 227, 0.82);
  --x2-ease: cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--x2-ground) !important;
}
[data-page="home"] body,
body[data-page="home"] { background: var(--x2-ground) !important; }

/* ------------------------------------------------------------------ *
 * 1 - THE CINEMA HERO
 * ------------------------------------------------------------------ */
.hxo2 { padding: clamp(0.9rem, 1.6vw, 1.6rem) 0 0; }

.hxo2__plate {
  position: relative;
  width: min(96vw, 1920px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(390px, 0.44fr) minmax(0, 0.56fr);
  grid-template-rows: minmax(clamp(520px, 62vh, 680px), 1fr) auto;
  border-radius: 18px 18px 64px 18px;
  background: var(--x2-forest-deep);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 34px 80px -46px rgba(10, 26, 20, 0.8);
}

.hxo2__copy {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(2.25rem, 4vw, 5rem);
  color: var(--x2-cream-text);
}
.hxo2__eyebrow {
  margin: 0 0 1.1rem;
  color: var(--x2-gold-lift);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.hxo2__title {
  margin: 0;
  max-width: 10ch;
  font-family: "Gloock", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.9rem, 3.9vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #f6f0e5;
  text-wrap: balance;
}
.hxo2__title span { display: block; }
.hxo2__title-em { color: #a9d4c1; }
.hxo2__lede {
  max-width: 40ch;
  margin: 1.5rem 0 0;
  color: var(--x2-cream-soft);
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  line-height: 1.65;
}
.hxo2__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  margin-top: 1.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(244, 238, 227, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--x2-cream-text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.hxo2__rating:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(244, 238, 227, 0.5); }
.hxo2__rating svg { width: 20px; height: 20px; }
.hxo2__rating strong { font-weight: 800; }
.hxo2__stars { color: var(--x2-gold-lift); letter-spacing: 0.12em; }
.hxo2__count { color: var(--x2-cream-soft); }

.hxo2__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.hxo2__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0.9rem 1.35rem;
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 780;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 180ms var(--x2-ease), border-color 180ms var(--x2-ease),
              color 180ms var(--x2-ease), transform 180ms var(--x2-ease);
}
.hxo2__btn svg { width: 17px; height: 17px; transition: transform 180ms var(--x2-ease); }
.hxo2__btn:hover { transform: translateY(-2px); }
.hxo2__btn:hover svg { transform: translate(2px, -2px); }
.hxo2__btn:active { transform: translateY(1px); }
.hxo2__btn--primary { background: var(--x2-oxblood); border-color: var(--x2-oxblood); color: #fff7ed; }
.hxo2__btn--primary:hover { background: var(--x2-oxblood-lift); border-color: var(--x2-oxblood-lift); }
.hxo2__btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(244, 238, 227, 0.55);
  color: var(--x2-cream-text);
}
.hxo2__btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
[data-page="home"] .hxo2 :is(a, button):focus-visible {
  outline: 3px solid #f0bd77;
  outline-offset: 4px;
}

/* the film column: the video dissolves into the plate, sellers-guide style */
.hxo2__cinema {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: #133a2e;
}
.hxo2__poster,
.hxo2__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% center;
}
.hxo2__film { opacity: 0; transition: opacity 700ms ease; }
.hxo2__film.is-front { opacity: 1; }
.hxo2__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--x2-forest-deep) 0%, rgba(15, 48, 40, 0) 22%),
    linear-gradient(0deg, rgba(6, 18, 13, 0.4) 0%, rgba(6, 18, 13, 0.02) 58%);
}

/* the routes rail on the plate's bottom edge */
.hxo2__routes {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(244, 238, 227, 0.16);
  background: rgba(10, 30, 24, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.hxo2__routes li + li { border-inline-start: 1px solid rgba(244, 238, 227, 0.14); }
.hxo2__route {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 88px;
  padding: 1.1rem clamp(1.25rem, 2.4vw, 2.25rem);
  color: var(--x2-cream-text);
  text-decoration: none;
  overflow: hidden;
}
/* the directional wipe: the fill enters from the edge the pointer crossed */
.hxo2__route::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(120deg, var(--x2-forest), var(--x2-forest-lift));
  clip-path: circle(0% at var(--wx, 50%) var(--wy, 50%));
  transition: clip-path 420ms var(--x2-ease);
}
@media (hover: hover) and (pointer: fine) {
  .hxo2__route:hover::before { clip-path: circle(150% at var(--wx, 50%) var(--wy, 50%)); }
}
.hxo2__route > span { position: relative; z-index: 1; }
.hxo2__route-kicker {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--x2-gold-lift);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hxo2__route-action { display: block; font-size: 1.08rem; font-weight: 700; }
.hxo2__route-cue {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid rgba(244, 238, 227, 0.32);
  border-radius: 50%;
  color: var(--x2-gold-lift);
  transition: border-color 180ms ease, transform 180ms var(--x2-ease);
}
.hxo2__route-cue svg { width: 16px; height: 16px; }
.hxo2__route:hover .hxo2__route-cue { border-color: var(--x2-gold-lift); transform: translateX(3px); }

@media (max-width: 61.99em) {
  .hxo2__plate {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(46svh, auto) auto auto;
    border-radius: 16px 16px 40px 16px;
  }
  .hxo2__cinema { grid-column: 1; grid-row: 1; min-height: 46svh; }
  .hxo2__veil {
    background:
      linear-gradient(0deg, var(--x2-forest-deep) 0%, rgba(15, 48, 40, 0) 30%),
      linear-gradient(0deg, rgba(6, 18, 13, 0.3) 0%, rgba(6, 18, 13, 0.04) 60%);
  }
  .hxo2__copy { grid-column: 1; grid-row: 2; padding: 1.75rem 1.4rem 2rem; }
  .hxo2__routes { grid-column: 1; grid-row: 3; grid-template-columns: 1fr; }
  .hxo2__routes li + li { border-inline-start: 0; border-top: 1px solid rgba(244, 238, 227, 0.14); }
  .hxo2__route { min-height: 72px; }
}

/* ------------------------------------------------------------------ *
 * 2 - THE COLOUR ARC, REBUILT AROUND THE KEPT GREEN
 * Same specificity as revisions 4-9, later in the file: these win.
 * ------------------------------------------------------------------ */
[data-page="home"] .hx-band--assistant {
  background: radial-gradient(120% 90% at 12% 0%, rgba(23, 72, 60, 0.12) 0%, rgba(23, 72, 60, 0) 62%), var(--x2-mist) !important;
}
[data-page="home"] .hx-band--clay {
  background: radial-gradient(110% 90% at 88% 0%, rgba(123, 36, 48, 0.07) 0%, rgba(123, 36, 48, 0) 58%), var(--x2-paper) !important;
}
/* 03 who: UNCHANGED - the band Aarav kept. No rule here on purpose. */
[data-page="home"] .band--reviews {
  background: radial-gradient(100% 80% at 50% 0%, rgba(226, 235, 228, 0.85) 0%, rgba(226, 235, 228, 0) 62%), var(--x2-ivory) !important;
}
[data-page="home"] .band--creds {
  background: radial-gradient(120% 90% at 88% 100%, rgba(23, 72, 60, 0.14) 0%, rgba(23, 72, 60, 0) 60%), var(--x2-mineral) !important;
}
[data-page="home"] .band--contact {
  background: radial-gradient(120% 100% at 50% 0%, rgba(30, 99, 80, 0.45) 0%, rgba(15, 48, 40, 0) 70%), var(--x2-forest-deep) !important;
  color: var(--x2-cream-text) !important;
}

/* contact goes dark: its children own their colours again */
[data-page="home"] .band--contact .h-section,
[data-page="home"] .band--contact .chapter__label { color: var(--x2-cream-text) !important; }
[data-page="home"] .band--contact .lede { color: var(--x2-cream-soft) !important; }
[data-page="home"] .band--contact .chapter__index { color: var(--x2-gold-lift) !important; }
[data-page="home"] .band--contact .chapter__rule { background: rgba(244, 238, 227, 0.24) !important; }
[data-page="home"] .band--contact .action-panel {
  background: var(--x2-cream) !important;
  border: 1px solid rgba(23, 26, 32, 0.1) !important;
  border-radius: 18px !important;
  color: var(--x2-ink) !important;
  box-shadow: 0 24px 54px -40px rgba(4, 16, 12, 0.8) !important;
}
[data-page="home"] .band--contact .action-panel__title { color: var(--x2-ink) !important; }
[data-page="home"] .band--contact .action-panel__body { color: var(--x2-ink-soft) !important; }
[data-page="home"] .band--contact .action-panel__index { color: var(--x2-oxblood) !important; }
[data-page="home"] .band--contact .action-panel--lead { border-radius: 18px 18px 18px 44px !important; }

/* the contact split: dusk scene left, the two panels right */
@media (min-width: 62em) {
  [data-page="home"] .band--contact {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas:
      "chapter chapter"
      "head    head"
      "scene   actions";
    column-gap: clamp(2rem, 3.5vw, 4rem);
    align-items: stretch;
  }
  [data-page="home"] .band--contact > .chapter { grid-area: chapter; }
  [data-page="home"] .band--contact > .band__head { grid-area: head; }
  [data-page="home"] .band--contact > .hx26-contact-scene { grid-area: scene; }
  [data-page="home"] .band--contact > .actions-pair { grid-area: actions; }
}
[data-page="home"] .hx26-contact-scene {
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  min-height: 280px;
}
[data-page="home"] .hx26-contact-scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.98) contrast(1.03) saturate(1.02);
}
@media (max-width: 61.99em) {
  [data-page="home"] .hx26-contact-scene { aspect-ratio: 16 / 9; min-height: 0; margin-bottom: 1.25rem; }
}

/* ------------------------------------------------------------------ *
 * 3 - PORTALS: the aerial establishes the place the portals reach
 * ------------------------------------------------------------------ */
[data-page="home"] .hx26-portals-scene {
  position: relative;
  margin: 0 0 clamp(1.5rem, 2.5vw, 2.25rem);
  overflow: hidden;
  border-radius: 16px;
}
[data-page="home"] .hx26-portals-scene img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  filter: brightness(0.98) contrast(1.03) saturate(1.02);
}
[data-page="home"] .hx26-portals-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(13, 29, 49, 0.22) 0%, rgba(13, 29, 49, 0) 40%);
}
[data-page="home"] .hx26-portals-scene figcaption {
  position: absolute;
  left: 1rem;
  bottom: 0.85rem;
  z-index: 1;
  color: rgba(255, 253, 249, 0.92);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 10px rgba(13, 29, 49, 0.6);
}
[data-page="home"] .creds__card {
  background: #ffffff !important;
  border: 1px solid rgba(16, 35, 58, 0.12) !important;
}

/* ------------------------------------------------------------------ *
 * 4 - BUTTONS SITE-WIDE ON THIS PAGE: the reference recipe.
 * Gold pills read as generated; oxblood does the acting now.
 * ------------------------------------------------------------------ */
[data-page="home"] .hx-btn,
[data-page="home"] .btn {
  min-height: 48px !important;
  border-radius: 8px !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background-color 180ms var(--x2-ease), border-color 180ms var(--x2-ease),
              color 180ms var(--x2-ease), transform 180ms var(--x2-ease) !important;
}
[data-page="home"] .hx-btn--gold,
[data-page="home"] .btn--gold {
  background: var(--x2-oxblood) !important;
  border: 1.5px solid var(--x2-oxblood) !important;
  color: #fff7ed !important;
}
[data-page="home"] .btn--outline {
  background: transparent !important;
  border: 1.5px solid var(--x2-oxblood) !important;
  color: var(--x2-oxblood) !important;
}
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .hx-btn--gold:hover,
  [data-page="home"] .btn--gold:hover {
    background: var(--x2-oxblood-dark) !important;
    border-color: var(--x2-oxblood-dark) !important;
    transform: translateY(-2px);
  }
  [data-page="home"] .btn--outline:hover {
    background: var(--x2-oxblood) !important;
    color: #fff7ed !important;
    transform: translateY(-2px);
  }
}
[data-page="home"] :is(.hx-btn, .btn):focus-visible { outline: 3px solid #f0bd77 !important; outline-offset: 4px !important; }

/* kickers and chapter devices follow the new arc */
[data-page="home"] .chapter__index { color: var(--x2-oxblood) !important; }
[data-page="home"] .hx-band--clay .chapter__index { color: var(--x2-oxblood) !important; }
[data-page="home"] .band--creds .chapter__index { color: var(--x2-forest) !important; }

/* ------------------------------------------------------------------ *
 * 5 - MOTION SAFETY
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hxo2__film { transition: none; }
  .hxo2__route::before { transition: none; }
  .hxo2__btn, .hxo2__rating, .hxo2__route-cue { transition: none; }
}

/* rev 10.1 - the route-card chips were still the old gold pills. On the
   dark route cards the action is now a cream plate that reads clickable:
   the sales-page decision-card recipe, not a gold sticker. */
[data-page="home"] .hx-chip {
  min-height: 48px !important;
  border-radius: 8px !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
[data-page="home"] .hx-chip--gold {
  background: var(--x2-cream) !important;
  border: 1.5px solid var(--x2-cream) !important;
  color: var(--x2-ink) !important;
}
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] a:hover .hx-chip--gold,
  [data-page="home"] .hx-chip--gold:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
  }
}

/* ======================================================================
 * REVISION 10.2 - THE TRIPTYCH HERO. 19 August 2026, Aarav mid-review:
 *   "the middle image is the biggest, and people have attention on that.
 *    Landlords on the left, tenants on the right, a bit smaller, in mid.
 *    The middle is just the video, get a rental estimate and view
 *    properties. Something else - get rid of that."
 * The plate becomes [wing | film | wing]: the film carries the headline
 * and the two actions on its veiled lower third; the two route wings sit
 * vertically centred either side, clearly subordinate. The bottom rail
 * is gone. The wipe hover survives on the wings via .hxo2__route.
 * ==================================================================== */

.hxo2--triptych .hxo2__plate {
  grid-template-columns: minmax(230px, 0.23fr) minmax(0, 0.54fr) minmax(230px, 0.23fr);
  grid-template-rows: minmax(clamp(560px, 68vh, 760px), 1fr);
  align-items: center;
  gap: clamp(1rem, 1.6vw, 1.75rem);
  padding: clamp(1rem, 1.6vw, 1.75rem);
}

/* the wings: mid-height glass panels, smaller than the film on purpose */
.hxo2--triptych .hxo2__wing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  align-self: center;
  min-height: 0;
  padding: clamp(1.4rem, 2vw, 2rem) clamp(1.2rem, 1.8vw, 1.75rem);
  border: 1px solid rgba(244, 238, 227, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--x2-cream-text);
  text-decoration: none;
  overflow: hidden;
  position: relative;
}
.hxo2--triptych .hxo2__wing:first-child { justify-self: end; }
.hxo2--triptych .hxo2__wing:last-child { justify-self: start; }
.hxo2--triptych .hxo2__wing,
.hxo2--triptych .hxo2__wing:first-child,
.hxo2--triptych .hxo2__wing:last-child { width: 100%; }
.hxo2__wing-body { position: relative; z-index: 1; display: block; min-width: 0; }
.hxo2__wing-note {
  display: block;
  margin-top: 0.55rem;
  max-width: 24ch;
  color: rgba(244, 238, 227, 0.72);
  font-size: 0.875rem;
  line-height: 1.5;
}
.hxo2--triptych .hxo2__route-action { font-size: clamp(1.15rem, 1.4vw, 1.4rem); font-weight: 750; }
.hxo2--triptych .hxo2__route-cue { position: relative; z-index: 1; }

/* the film column: full height of the plate, biggest thing on screen */
.hxo2--triptych .hxo2__cinema {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  border-radius: 14px;
  isolation: isolate;
}
/* the veiled lower third carries the words: measured against the poster's
   worst tile (L 0.551), the layered veil + local vignette transmit ~0.14,
   which puts cream copy past 4.5:1 where it actually sits */
.hxo2--triptych .hxo2__veil {
  background:
    linear-gradient(0deg, rgba(6, 18, 13, 0.62) 0%, rgba(6, 18, 13, 0.22) 34%, rgba(6, 18, 13, 0.02) 58%);
}
.hxo2__stagecopy {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 clamp(1.25rem, 3vw, 3rem) clamp(1.75rem, 3vw, 2.75rem);
  background: radial-gradient(85% 130% at 50% 100%, rgba(6, 18, 13, 0.42) 0%, rgba(6, 18, 13, 0) 68%);
}
.hxo2--triptych .hxo2__eyebrow { margin: 0 0 0.7rem; text-shadow: 0 1px 12px rgba(6, 18, 13, 0.8); }
.hxo2--triptych .hxo2__title {
  max-width: 18ch;
  font-size: clamp(2.5rem, 3.3vw, 3.9rem);
  text-shadow: 0 2px 22px rgba(6, 18, 13, 0.75);
}
.hxo2--triptych .hxo2__title span { display: inline; }
.hxo2--triptych .hxo2__actions { justify-content: center; margin-top: 1.4rem; }
.hxo2--triptych .hxo2__btn--ghost {
  background: rgba(10, 30, 24, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hxo2--triptych .hxo2__rating { margin-top: 1.1rem; background: rgba(10, 30, 24, 0.45); }

/* ---- entrance: one hero animation, once, ease-out, nothing over 500ms */
@keyframes hxo2-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
html[data-enhanced] .hxo2--triptych .hxo2__stagecopy > * {
  animation: hxo2-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[data-enhanced] .hxo2--triptych .hxo2__stagecopy > :nth-child(2) { animation-delay: 70ms; }
html[data-enhanced] .hxo2--triptych .hxo2__stagecopy > :nth-child(3) { animation-delay: 140ms; }
html[data-enhanced] .hxo2--triptych .hxo2__stagecopy > :nth-child(4) { animation-delay: 210ms; }
html[data-enhanced] .hxo2--triptych .hxo2__wing { animation: hxo2-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both; }

@media (max-width: 61.99em) {
  .hxo2--triptych .hxo2__plate {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.75rem;
  }
  .hxo2--triptych .hxo2__cinema {
    grid-column: 1;
    grid-row: 1;
    min-height: 62svh;
  }
  .hxo2--triptych .hxo2__wing { grid-row: auto; min-height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-enhanced] .hxo2--triptych .hxo2__stagecopy > *,
  html[data-enhanced] .hxo2--triptych .hxo2__wing { animation: none; }
}

/* ======================================================================
 * REVISION 10.3 - 19 August 2026. Aarav's nine-point pass on the new page.
 * Every point below quotes the instruction it answers.
 * ==================================================================== */

/* ---- 0 · "use more of the page on a bigger screen" ------------------ */
@media (min-width: 100em) {
  [data-page="home"] .hx-col { max-width: 1680px; }
}

/* ---- 0b · "on a MacBook it can't be way way too big" ----------------
   The hero row is capped lower so a 1366x768 or 1440x900 laptop sees the
   whole plate plus the top of chapter 01 without scrolling. */
.hxo2--triptych .hxo2__plate {
  grid-template-rows: minmax(clamp(500px, 58vh, 700px), 1fr);
}

/* ---- 1 · routes chapter: "images more left, text more right,
            use more of the width" ----------------------------------- */
[data-page="home"] .hx-band--clay .hx-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 8rem);
  align-items: center;
}
[data-page="home"] .hx-band--clay .hx-frame { padding: clamp(1.75rem, 3vw, 3.25rem); }

/* ---- 2 · trust band: "the label is unable to be seen; you can't see
            the stars; too closed in the middle" --------------------- */
[data-page="home"] .hx-band--trust .chapter__index { color: #e3c98f !important; }
[data-page="home"] .hx-band--trust .chapter__label { color: #f4eee3 !important; }
[data-page="home"] .hx-band--trust .chapter__rule { background: rgba(244, 238, 227, 0.28) !important; }
[data-page="home"] .hx-band--trust .hx-kicker { color: #e3c98f !important; letter-spacing: 0.14em; }
[data-page="home"] .hx-band--trust .hx-lede,
[data-page="home"] .hx-band--trust .hx-panel > p { color: rgba(244, 238, 227, 0.92) !important; }
/* the 5.0 becomes a visible gold star row, not a number you have to trust */
[data-page="home"] .hx-band--trust .hx-trust__stat strong { color: #e3c98f !important; }
[data-page="home"] .hx-band--trust .hx-trust__stat strong::after {
  content: " \2605\2605\2605\2605\2605";
  font-size: 0.42em;
  letter-spacing: 0.22em;
  color: #e3c98f;
  vertical-align: 0.42em;
}
[data-page="home"] .hx-band--trust .hx-trust__stat span { color: rgba(244, 238, 227, 0.78) !important; }
/* breathe: the split uses the width instead of pinching the middle */
[data-page="home"] .hx-frame--trust { padding: clamp(2rem, 3.5vw, 4rem) !important; }
[data-page="home"] .hx-band--trust .hx-split {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(3rem, 5.5vw, 7.5rem);
  align-items: center;
}

/* ---- 3 · certificate cards. Per-scheme tinting (green/purple, matched to
            each certificate's own logo colour) read as off-brand and cheap
            next to the rest of the site — reverted to the one premium
            cream plate the section already uses (Aarav, 20 Aug). ------- */
[data-page="home"] .hx-certs .hx-cert {
  background: var(--hxo-cream) !important;
  border: 1px solid rgba(23, 26, 32, 0.1) !important;
}
[data-page="home"] .hx-certs .hx-cert .hx-cert__shot { background: var(--hx-clay) !important; }

/* ---- 4 · reviews: "the generic golden box needs to be changed; cards
            not white so they stand out" ----------------------------- */
[data-page="home"] .score {
  background: radial-gradient(120% 100% at 50% 0%, rgba(30, 99, 80, 0.5) 0%, rgba(18, 41, 31, 0) 70%), #17483c !important;
  border: 1px solid rgba(244, 238, 227, 0.16) !important;
  border-radius: 18px 18px 18px 44px !important;
  color: #f4eee3 !important;
  box-shadow: 0 24px 54px -40px rgba(10, 26, 20, 0.8) !important;
}
[data-page="home"] .score__value { color: #f6f0e5 !important; }
[data-page="home"] .score__stars { color: #e3c98f !important; }
[data-page="home"] .score__meta, [data-page="home"] .score__captured, [data-page="home"] .score__line { color: rgba(244, 238, 227, 0.8) !important; }
[data-page="home"] .score__brand {
  background: #fffdf8 !important;
  border-radius: 10px !important;
  padding: 0.4rem 0.7rem !important;
}
[data-page="home"] .score__acts a { color: #e3c98f !important; }
/* the wall cards: warm tints in rotation instead of one flat white */
[data-page="home"] .rcard { border: 1px solid rgba(23, 26, 32, 0.1) !important; }
[data-page="home"] .rcard:nth-child(3n + 1) { background: #f6efe4 !important; }
[data-page="home"] .rcard:nth-child(3n + 2) { background: #edf2eb !important; }
[data-page="home"] .rcard:nth-child(3n + 3) { background: #f6ebe6 !important; }

/* ---- 6 · contact: "the green is not working for that image" --------
   The dusk frame gets a warm grade and a gold-dusk wash so it belongs
   to the green-and-brass room it sits in. */
[data-page="home"] .hx26-contact-scene { position: relative; border: 1px solid rgba(227, 201, 143, 0.28); }
[data-page="home"] .hx26-contact-scene img {
  filter: sepia(0.26) saturate(1.3) hue-rotate(-10deg) brightness(1.05) contrast(1.04);
}
[data-page="home"] .hx26-contact-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(15, 48, 40, 0.34) 0%, rgba(15, 48, 40, 0) 45%),
              radial-gradient(90% 70% at 70% 20%, rgba(227, 201, 143, 0.14) 0%, rgba(227, 201, 143, 0) 60%);
}
/* "the white things is too generic": the panels pick up the house grammar */
[data-page="home"] .band--contact .action-panel { position: relative; overflow: hidden; }
[data-page="home"] .band--contact .action-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #c5a66a, #7b2430);
}
[data-page="home"] .band--contact .action-panel__title {
  font-family: "Gloock", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.9vw, 1.85rem) !important;
}
[data-page="home"] .band--contact .action-panel__index {
  font-family: "Gloock", Georgia, serif;
  font-size: 1.5rem !important;
}

/* ---- 7 · assistant: "Tell Dukes what you need as middle top heading,
            routes below, different background colour" --------------- */
[data-page="home"] .hx-band--assistant {
  background: radial-gradient(120% 90% at 50% 0%, rgba(23, 72, 60, 0.1) 0%, rgba(23, 72, 60, 0) 60%), #dbe8ec !important;
}
@media (min-width: 62em) {
  [data-page="home"] .reception .reception__inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    justify-items: center;
    gap: clamp(1.75rem, 3vw, 2.75rem) !important;
  }
  [data-page="home"] .reception .reception__inner > * { grid-area: auto !important; }
  [data-page="home"] .reception__intro {
    max-width: 760px;
    text-align: center;
  }
  [data-page="home"] .reception__intro .h-section {
    font-size: clamp(2.1rem, 2.9vw, 3.1rem);
  }
  [data-page="home"] .reception__intro .reception__notice { margin-inline: auto; }
  [data-page="home"] .reception__routes,
  [data-page="home"] .reception [data-reception-routes] { width: min(100%, 1100px); }
  [data-page="home"] .reception .crail { width: min(100%, 640px); }
}

/* ---- 8 · "hover turns the tile into the Insta colours, WhatsApp
            colours" — the brand-fill hover on the contact rail ------ */
[data-page="home"] .crail__icon { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .crail__link--phone:hover .crail__icon,
  [data-page="home"] .crail__link--phone:focus-visible .crail__icon {
    background: #17483c !important; border-color: #17483c !important; color: #fffdf8 !important; transform: translateY(-2px);
  }
  [data-page="home"] .crail__link--whatsapp:hover .crail__icon,
  [data-page="home"] .crail__link--whatsapp:focus-visible .crail__icon {
    background: #25d366 !important; border-color: #25d366 !important; color: #ffffff !important; transform: translateY(-2px);
  }
  [data-page="home"] .crail__link--email:hover .crail__icon,
  [data-page="home"] .crail__link--email:focus-visible .crail__icon {
    background: #7b2430 !important; border-color: #7b2430 !important; color: #fff7ed !important; transform: translateY(-2px);
  }
  [data-page="home"] .crail__link--instagram:hover .crail__icon,
  [data-page="home"] .crail__link--instagram:focus-visible .crail__icon {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 8%, #fd5949 45%, #d6249f 60%, #285aeb 90%) !important;
    border-color: #d6249f !important; color: #ffffff !important; transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .crail__icon { transition: none; transform: none !important; }
}

/* rev 10.3b - the old #dukes-receptionist placement rules pin the routes
   to column 2 / rows 1-2. Matched at ID specificity and cleared, so the
   stack reads: centred heading, then routes, then the contact card. */
@media (min-width: 62em) {
  [data-page="home"] #dukes-receptionist .reception__intro,
  [data-page="home"] #dukes-receptionist .reception__routes--safe,
  [data-page="home"] #dukes-receptionist.reception ol.reception__routes {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* ======================================================================
 * REVISION 10.4 - THE IMMERSIVE HERO. 19 August 2026, Aarav's sketch:
 *   "the red thing is where the video would go" (the WHOLE plate)
 *   "the two boxes are where the new images would go, buttons at the
 *    bottom" (the wings become image cards, art to come from Aarav)
 *   "See your next move - middle-ish"
 *   "don't add the up-right arrow icon, seems like you're taking them to
 *    a web page" (external-link glyph out, plain forward arrow in)
 *   "stop using green colors like that - use a shade which matches the
 *    beige banner on top"
 * ==================================================================== */

/* the warmer forest: pulled toward the parchment header's warmth */
[data-page="home"] {
  --x2-forest-deep: #1c4437;
  --x2-forest: #245a48;
  --x2-forest-lift: #2c6a55;
}

.hxo2--immersive .hxo2__plate {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(clamp(520px, 62vh, 720px), 1fr);
  background: var(--x2-forest-deep);
}
.hxo2--immersive .hxo2__cinema {
  grid-area: 1 / 1;
  position: relative;
  border-radius: 0;
  background: var(--x2-forest-deep);
}
/* the veil: a centre-weighted vignette so mid-frame copy reads, plus the
   bottom grade. Warm-toned to match the new forest. */
.hxo2--immersive .hxo2__veil {
  background:
    radial-gradient(70% 62% at 50% 58%, rgba(10, 28, 21, 0.38) 0%, rgba(10, 28, 21, 0) 72%),
    linear-gradient(0deg, rgba(10, 28, 21, 0.52) 0%, rgba(10, 28, 21, 0.08) 46%, rgba(10, 28, 21, 0.16) 100%);
}

.hxo2--immersive .hxo2__overlay {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(240px, 0.24fr) minmax(0, 0.52fr) minmax(240px, 0.24fr);
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.5rem);
  padding: clamp(1.5rem, 2.6vw, 3rem);
}

/* the stage copy: middle-ish of the film, centred */
.hxo2--immersive .hxo2__stagecopy {
  position: static;
  inset: auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
  background: none;
}
.hxo2--immersive .hxo2__title { max-width: 20ch; }

/* the two solid actions: no external-link glyphs, real buttons */
.hxo2__btn--cream {
  background: var(--x2-cream);
  border-color: var(--x2-cream);
  color: var(--x2-ink);
}
.hxo2__btn--cream:hover { background: #ffffff; border-color: #ffffff; }
.hxo2--immersive .hxo2__btn svg { width: 16px; height: 16px; }
.hxo2--immersive .hxo2__btn:hover svg { transform: translateX(3px); }

/* the wings: image card above, words, button at the bottom */
.hxo2--immersive .hxo2__wing {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.9rem;
  padding: clamp(1rem, 1.4vw, 1.35rem);
  border: 1px solid rgba(244, 238, 227, 0.22);
  border-radius: 16px;
  background: rgba(12, 32, 25, 0.58);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  color: var(--x2-cream-text);
  text-decoration: none;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 54px -34px rgba(4, 14, 10, 0.9);
}
.hxo2--immersive .hxo2__wing:first-child { justify-self: start; }
.hxo2--immersive .hxo2__wing:last-child { justify-self: end; }
.hxo2--immersive .hxo2__wing { width: 100%; max-width: 330px; }

/* the awaiting-art slot: crown placeholder, label chip, ratio tag */
.hxo2__wing-media {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(244, 238, 227, 0.16);
  overflow: hidden;
}
.hxo2__wing-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hxo2__wing-media:has(> img) .hxo2__wing-crown,
.hxo2__wing-media:has(> img) .hxo2__wing-ratio { display: none; }
.hxo2__wing-crown { width: 40px; height: 40px; color: rgba(244, 238, 227, 0.38); }
.hxo2__wing-chip {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  background: rgba(10, 28, 21, 0.72);
  color: rgba(244, 238, 227, 0.92);
  font-size: 0.875rem;
  font-weight: 700;
}
.hxo2__wing-ratio {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(10, 28, 21, 0.72);
  color: rgba(244, 238, 227, 0.75);
  font-size: 0.875rem;
  font-weight: 700;
}
.hxo2__wing-body { display: block; position: relative; z-index: 1; }
.hxo2--immersive .hxo2__route-action { font-size: 1.22rem; font-weight: 760; }
.hxo2__wing-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 46px;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  background: var(--x2-cream);
  color: var(--x2-ink);
  font-size: 0.9rem;
  font-weight: 780;
  transition: background-color 180ms var(--x2-ease), transform 180ms var(--x2-ease);
}
.hxo2__wing-btn svg { width: 15px; height: 15px; transition: transform 180ms var(--x2-ease); }
.hxo2--immersive .hxo2__wing:hover .hxo2__wing-btn { background: #ffffff; }
.hxo2--immersive .hxo2__wing:hover .hxo2__wing-btn svg { transform: translateX(3px); }
/* the directional wipe stays but fills with the warm forest glass */
.hxo2--immersive .hxo2__route::before {
  background: linear-gradient(120deg, rgba(36, 90, 72, 0.85), rgba(44, 106, 85, 0.85));
}

/* laptop heights: everything still fits with chapter 01 peeking */
@media (max-height: 820px) and (min-width: 62em) {
  .hxo2--immersive .hxo2__plate { grid-template-rows: minmax(clamp(480px, 74vh, 620px), 1fr); }
}

@media (max-width: 61.99em) {
  .hxo2--immersive .hxo2__plate { grid-template-rows: auto; }
  .hxo2--immersive .hxo2__cinema { min-height: 60svh; }
  .hxo2--immersive .hxo2__overlay {
    grid-template-columns: 1fr;
    align-content: end;
    padding: 1rem;
    gap: 0.75rem;
  }
  .hxo2--immersive .hxo2__stagecopy { order: -1; padding: 0 0 0.5rem; }
  .hxo2--immersive .hxo2__wing { max-width: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .hxo2--immersive .hxo2__wing-media { display: none; } /* phones keep the hero short; the art leads on desktop */
}

/* ======================================================================
 * REVISION 10.5 - THE FLOATING SECTION PILL (21st.dev sliding cursor,
 * rebuilt vanilla). Dark glass so it sits on every band without fighting
 * any of them; exists only below the hero; the highlight glides to the
 * live section, follows the pointer on hover, returns on leave.
 * ==================================================================== */
.hxnav {
  position: fixed;
  top: calc(var(--hxnav-seam, 65px) + 10px);
  left: 50%;
  z-index: 900;
  transform: translate(-50%, -14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), top 240ms ease;
}
.hxnav.is-in { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.hxnav.is-docked { top: 10px; }

.hxnav__list {
  position: relative;
  display: flex;
  margin: 0;
  padding: 4px;
  list-style: none;
  border-radius: 999px;
  background: rgba(14, 26, 21, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 18px 44px -20px rgba(8, 16, 12, 0.7);
}
.hxnav [data-hxnav-link] {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  color: rgba(244, 238, 227, 0.88);
  font-size: 0.875rem;
  font-weight: 750;
  text-decoration: none;
  transition: color 200ms ease;
}
.hxnav [data-hxnav-link] i {
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 800;
  color: rgba(227, 201, 143, 0.85);
  transition: color 200ms ease;
}
.hxnav [data-hxnav-link].is-on { color: #171a20; }
.hxnav [data-hxnav-link].is-on i { color: #7b2430; }
.hxnav [data-hxnav-link]:focus-visible { outline: 3px solid #f0bd77; outline-offset: 2px; }

.hxnav__cursor {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: 0;
  border-radius: 999px;
  background: #fbf8f2;
  opacity: 0;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), width 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
  pointer-events: none;
}
/* the nav is the cursor's positioning context; links measure their
   offsetLeft against the list, whose 4px padding is already included,
   so the cursor anchors at left 0 and translates by offsetLeft alone */
.hxnav__cursor { left: 0; }

/* the pill's anchor targets land clear of header + pill */
#assistant, #routes, #who, #reviews, #portals, #contact {
  scroll-margin-top: calc(var(--head-h, 65px) + 74px);
}

/* phones: numbers only, so the pill stays genuinely small */
@media (max-width: 47.99em) {
  .hxnav [data-hxnav-link] { padding: 0.5rem 0.7rem; min-height: 40px; }
  .hxnav [data-hxnav-link] span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hxnav, .hxnav__cursor, .hxnav [data-hxnav-link] { transition: none !important; }
}

/* ======================================================================
 * REVISION 11 - 19 August 2026. Aarav's second review pass.
 *   "Tell Dukes what you need is super ugly - whole redesign"
 *   "each section is pretty much the same width - they need to be
 *    escalated along the width, don't make me ask again"
 *   "new design for the contact section, professional premium"
 *   "for the review one use the animated testimonials, adapt and make
 *    it better"
 * ==================================================================== */

/* ------------------------------------------------------------------ *
 * 1 - THE WIDTH LADDER. Six bands, five different measures, one full
 *     bleed. No two neighbours share a width again.
 *       01 assistant 1780  roomy
 *       02 routes    1540  tight
 *       03 who       1700  roomy
 *       04 reviews   1420  tightest
 *       05 portals   FULL BLEED (edge to edge, no radius)
 *       06 contact   1620  settle
 * ------------------------------------------------------------------ */
@media (min-width: 75em) {
  [data-page="home"] .hx-band--assistant { width: min(96vw, 1780px) !important; margin-inline: auto !important; border-radius: 26px; }
  [data-page="home"] .hx-band--clay { width: min(89vw, 1540px) !important; margin-inline: auto !important; border-radius: 26px; }
  [data-page="home"] .hx-band--trust { width: min(94vw, 1700px) !important; margin-inline: auto !important; }
  [data-page="home"] .band--reviews { width: min(86vw, 1420px) !important; margin-inline: auto !important; }
  [data-page="home"] .band--creds { width: 100% !important; margin-inline: 0 !important; border-radius: 0 !important; }
  [data-page="home"] .band--contact { width: min(92vw, 1620px) !important; margin-inline: auto !important; }
  [data-page="home"] .band--creds .hx-col { max-width: 1780px; }
}

/* ------------------------------------------------------------------ *
 * 2 - THE ASSISTANT CHAPTER, REDESIGNED (cta-with-gallery grammar):
 *     copy and the contact card hold the LEFT, the five routes stand as
 *     an offset two-column gallery on the RIGHT. No more centred pile.
 * ------------------------------------------------------------------ */
[data-page="home"] .hx-band--assistant {
  background: radial-gradient(110% 90% at 88% 8%, rgba(23, 72, 60, 0.14) 0%, rgba(23, 72, 60, 0) 58%), #dbe8ec !important;
}
@media (min-width: 62em) {
  [data-page="home"] .reception .reception__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
    grid-template-areas:
      "intro routes"
      "crail routes" !important;
    column-gap: clamp(2.5rem, 4.5vw, 5.5rem) !important;
    row-gap: clamp(1.75rem, 2.5vw, 2.5rem) !important;
    align-items: start;
    justify-items: stretch;
  }
  [data-page="home"] #dukes-receptionist .reception__intro {
    grid-area: intro !important;
    max-width: 46ch;
    text-align: left;
  }
  [data-page="home"] #dukes-receptionist.reception ol.reception__routes {
    grid-area: routes !important;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(1rem, 1.6vw, 1.5rem) !important;
    align-items: start;
  }
  /* the offset: even cards sit a step lower, the gallery-grid rhythm */
  [data-page="home"] #dukes-receptionist.reception ol.reception__routes > li:nth-child(even) {
    transform: translateY(clamp(1.5rem, 2.6vw, 2.75rem));
  }
  [data-page="home"] #dukes-receptionist .reception__routes--safe {
    grid-area: crail !important;
    width: 100% !important;
    max-width: 30rem;
  }
  [data-page="home"] .reception__intro .h-section {
    font-size: clamp(2.3rem, 3.1vw, 3.4rem);
    max-width: 14ch;
  }
}
/* the route cards themselves: cream plates, oxblood voice, real chevron */
[data-page="home"] #dukes-receptionist.reception ol.reception__routes > li {
  margin: 0 !important;
  border: 1px solid rgba(23, 26, 32, 0.1) !important;
  border-radius: 14px !important;
  background: #fbf8f2 !important;
  box-shadow: 0 14px 34px -26px rgba(15, 35, 58, 0.5) !important;
  overflow: hidden;
  transition: box-shadow 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] #dukes-receptionist.reception ol.reception__routes > li:hover {
    box-shadow: 0 20px 44px -26px rgba(15, 35, 58, 0.6) !important;
  }
}
[data-page="home"] .reception__intro .reception__notice { margin-inline: 0; }

/* ------------------------------------------------------------------ *
 * 3 - THE CONTACT CHAPTER, PROFESSIONAL PREMIUM: deep navy plate (the
 *     reference bookend), a cream direct-contact ledger with the brand
 *     hovers, and the two navy path cards with gold serif indexes.
 * ------------------------------------------------------------------ */
[data-page="home"] .band--contact {
  display: block !important;
  background: radial-gradient(120% 100% at 50% 0%, rgba(38, 68, 104, 0.5) 0%, rgba(13, 29, 49, 0) 70%), #0d1d31 !important;
}
[data-page="home"] .band--contact .chapter__index { color: #e3c98f !important; }
[data-page="home"] .band--contact .band__head { text-align: center; margin-inline: auto; }
[data-page="home"] .band--contact .band__head .h-section {
  position: relative;
  padding-bottom: 0.55em;
}
[data-page="home"] .band--contact .band__head .h-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(9rem, 50%);
  height: 2px;
  background: #c5a66a;
}
.hx27 {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 2.6vw, 2.75rem);
  align-items: stretch;
  width: 100%;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
@media (max-width: 61.99em) { .hx27 { grid-template-columns: 1fr; } }

.hx27__ledger {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  border-radius: 18px 18px 18px 44px;
  background: #fbf8f2;
  border: 1px solid rgba(23, 26, 32, 0.08);
  box-shadow: 0 28px 60px -44px rgba(2, 10, 20, 0.9);
}
.hx27__kicker {
  margin: 0 0 0.6rem;
  color: #7b2430;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hx27-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(23, 26, 32, 0.1);
  border-radius: 10px;
  text-decoration: none;
  color: #171a20;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hx27-row__label { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #4f555b; transition: color 200ms ease; }
.hx27-row__value { font-size: 1.05rem; font-weight: 750; }
@media (hover: hover) and (pointer: fine) {
  .hx27-row--phone:hover { background: #17483c; border-color: #17483c; color: #fffdf8; transform: translateY(-2px); }
  .hx27-row--whatsapp:hover { background: #25d366; border-color: #25d366; color: #ffffff; transform: translateY(-2px); }
  .hx27-row--email:hover { background: #7b2430; border-color: #7b2430; color: #fff7ed; transform: translateY(-2px); }
  .hx27-row:hover .hx27-row__label { color: inherit; }
}
.hx27-row:focus-visible { outline: 3px solid #f0bd77; outline-offset: 3px; }
.hx27__follow { margin: 0.6rem 0 0; color: #4f555b; font-size: 0.875rem; }
.hx27__follow a { color: #7b2430; font-weight: 750; }

.hx27__paths { display: flex; flex-direction: column; gap: clamp(1rem, 1.6vw, 1.5rem); }
[data-page="home"] .band--contact .hx27__paths .action-panel {
  background: #16283d !important;
  border: 1px solid rgba(244, 238, 227, 0.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 54px -40px rgba(2, 10, 20, 0.95) !important;
  color: #f4eee3 !important;
}
[data-page="home"] .band--contact .hx27__paths .action-panel::before { display: none; }
[data-page="home"] .band--contact .hx27__paths .action-panel__title { color: #f6f0e5 !important; }
[data-page="home"] .band--contact .hx27__paths .action-panel__body { color: rgba(244, 238, 227, 0.78) !important; }
[data-page="home"] .band--contact .hx27__paths .action-panel__index {
  color: #e3c98f !important;
  font-family: "Gloock", Georgia, serif;
}
[data-page="home"] .band--contact .hx27__paths .action-panel--lead { border-radius: 18px 18px 18px 44px !important; }
[data-page="home"] .band--contact .btn--gold {
  background: #e2edf0 !important;
  border-color: #e2edf0 !important;
  color: #0d1d31 !important;
}
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .band--contact .btn--gold:hover { background: #f6f0e5 !important; border-color: #f6f0e5 !important; }
}
[data-page="home"] .band--contact .btn--outline {
  background: #7b2430 !important;
  border-color: #7b2430 !important;
  color: #fff7ed !important;
}
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .band--contact .btn--outline:hover { background: #9a3442 !important; border-color: #9a3442 !important; }
}

/* ------------------------------------------------------------------ *
 * 4 - THE REVIEW SPOTLIGHT (animated-testimonials, adapted): the wall
 *     marquee steps back the moment the spotlight mounts; the heading,
 *     score and dots hold the left, the rotating card holds the right.
 *     No JS = the full 24-card wall renders exactly as before.
 * ------------------------------------------------------------------ */
[data-page="home"] .rwall[data-spotlight-on] .rwall__window,
[data-page="home"] .rwall[data-spotlight-on] .rwall__pause { display: none !important; }
[data-page="home"] .rwall[data-spotlight-on] .rwall__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
@media (max-width: 61.99em) {
  [data-page="home"] .rwall[data-spotlight-on] .rwall__inner { grid-template-columns: 1fr; }
}
/* left column keeps: eyebrow, title, score, anchor link; spotlight right */
[data-page="home"] .rwall[data-spotlight-on] .rspot { grid-column: 2; grid-row: 1 / span 6; }
@media (max-width: 61.99em) {
  [data-page="home"] .rwall[data-spotlight-on] .rspot { grid-column: 1; grid-row: auto; }
}

.rspot__stage { position: relative; min-height: clamp(320px, 30vw, 400px); }
.rspot__card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 2.8vw, 2.75rem);
  border-radius: 18px 18px 64px 18px;
  background: #fbf8f2;
  border: 1px solid rgba(23, 26, 32, 0.1);
  box-shadow: 0 28px 64px -44px rgba(15, 35, 58, 0.55);
  opacity: 0;
  transform: translateX(28px) scale(0.98);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.rspot__card.is-live { opacity: 1; transform: none; pointer-events: auto; z-index: 1; }
.rspot__stars { margin: 0 0 1rem; color: #a76a11; font-size: 1.05rem; letter-spacing: 0.18em; }
.rspot__quote { position: relative; flex: 1; margin: 0; }
.rspot__quote::before {
  content: "\201C";
  display: block;
  font-family: "Gloock", Georgia, serif;
  font-size: 2.6rem;
  line-height: 0.7;
  color: #7b2430;
  margin-bottom: 0.4rem;
}
.rspot__quote p {
  margin: 0;
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  line-height: 1.35;
  color: #171a20;
  max-width: 34ch;
  text-wrap: pretty;
}
.rspot__foot {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(23, 26, 32, 0.12);
}
.rspot__foot .face, .rspot__foot .rcard__initials {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
}
.rspot__foot .face__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rspot__who { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.rspot__who strong { font-size: 1rem; color: #171a20; }
.rspot__who em { font-style: normal; font-size: 0.875rem; color: #4f555b; }
.rspot__verify {
  margin-left: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.95rem;
  border: 1px solid rgba(123, 36, 48, 0.5);
  border-radius: 9px;
  color: #7b2430;
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .rspot__verify:hover { background: #7b2430; color: #fff9ef; }
}
.rspot__dots { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.rspot__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(23, 26, 32, 0.24);
  cursor: pointer;
  transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease;
}
.rspot__dot.is-live { width: 34px; background: #7b2430; }
.rspot__dot:focus-visible { outline: 3px solid #f0bd77; outline-offset: 3px; }
/* comfortable touch target around the small dot */
.rspot__dots { padding: 16px 0; }
.rspot__dot { position: relative; }
.rspot__dot::after { content: ""; position: absolute; inset: -16px; border-radius: 999px; }

@media (max-width: 61.99em) {
  .rspot__stage { min-height: 380px; }
  .rspot__verify { margin-left: 0; }
  .rspot__foot { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .rspot__card { transition: none; }
  .rspot__dot { transition: none; }
}

/* ======================================================================
 * REVISION 11.1 - chapter 03 goes centred and authentic. Aarav:
 *   "get rid of the individual left" (the desk photo - moved to 01)
 *   "just write You deal with Amrit really nicely, main heading of 03"
 *   "the review in the middle, the review text needs to be different"
 *   "the line is only halfway - extend it fully"
 *   "5.0 stars - where is Google? I don't see it"
 *   "don't need 'small independent agency in Slough' there"
 * ==================================================================== */
.hx28 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(100%, 860px);
  margin-inline: auto;
  padding-block: clamp(0.5rem, 1vw, 1rem) clamp(1.5rem, 2.5vw, 2rem);
}
.hx28__kicker { color: #e3c98f !important; letter-spacing: 0.15em; }
.hx28__title {
  margin: 0.6rem 0 0 !important;
  max-width: 16ch;
  font-size: clamp(2.6rem, 3.6vw, 4rem) !important;
  color: #f6f0e5 !important;
}
/* the rule, extended FULLY across the centred column */
.hx28__rule {
  display: block;
  width: 100%;
  height: 2px;
  margin: clamp(1.25rem, 2vw, 1.75rem) 0;
  background: linear-gradient(90deg, rgba(197, 166, 106, 0) 0%, #c5a66a 18%, #c5a66a 82%, rgba(197, 166, 106, 0) 100%);
}
/* the testimony: unmistakably a quote, not body copy */
.hx28__quote { margin: 0; }
.hx28__quote blockquote { margin: 0; position: relative; }
.hx28__quote blockquote::before {
  content: "\201C";
  display: block;
  font-family: "Gloock", Georgia, serif;
  font-size: 3rem;
  line-height: 0.6;
  color: #e3c98f;
  margin-bottom: 0.5rem;
}
.hx28__quote blockquote p {
  margin: 0;
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.4;
  color: #fdf8ee;
  max-width: 36ch;
  text-wrap: pretty;
}
.hx28__quote figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.4rem;
}
.hx28__face {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(227, 201, 143, 0.55);
  flex: 0 0 auto;
}
.hx28__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx28__cite { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; text-align: left; }
.hx28__cite strong { color: #f6f0e5; font-size: 1rem; }
.hx28__cite em { font-style: normal; color: #e3c98f; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
/* the authentic score row: the real Google mark, gold stars */
.hx28__score {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: clamp(1.5rem, 2.5vw, 2rem) 0 0 !important;
}
.hx28__g { width: 26px; height: 26px; background: #fffdf8; border-radius: 50%; padding: 3px; }
.hx28__score strong { font-size: clamp(2rem, 2.6vw, 2.6rem) !important; line-height: 1; }
.hx28__score strong::after { content: none !important; }   /* the 10.3 star suffix retires; the real row is here */
.hx28__stars { color: #e3c98f; font-size: 1.15rem; letter-spacing: 0.2em; }
.hx28__count { color: rgba(244, 238, 227, 0.78) !important; font-size: 0.95rem; max-width: 30ch; text-align: left; }
.hx28__link { margin-top: 1.2rem; }

/* the desk finds its new home beside the assistant contact card */
[data-page="home"] .hx28-desk {
  margin: clamp(1.25rem, 2vw, 1.75rem) 0 0;
  overflow: hidden;
  border-radius: 14px 14px 14px 38px;
  max-width: 30rem;
}
[data-page="home"] .hx28-desk img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 38%;
  filter: brightness(0.99) contrast(1.03) saturate(1.02);
}
@media (max-width: 61.99em) {
  .hx28__quote blockquote p { font-size: 1.3rem; }
  [data-page="home"] .hx28-desk { max-width: none; }
}

/* ======================================================================
 * REVISION 12 - 19 August 2026. THE FINISHED PASS. The standing rule:
 * FILL THE WIDTH. Nothing centred in a void, nothing half-done.
 * ==================================================================== */

/* ---- 0 · the ladder, widened. Still no two neighbours equal. ------- */
@media (min-width: 75em) {
  [data-page="home"] .hx-band--assistant { width: min(97vw, 1840px) !important; }
  [data-page="home"] .hx-band--clay { width: min(92vw, 1700px) !important; }
  [data-page="home"] .hx-band--trust { width: min(95vw, 1780px) !important; }
  [data-page="home"] .band--reviews { width: min(89vw, 1560px) !important; }
  [data-page="home"] .band--contact { width: min(93vw, 1720px) !important; }
  [data-page="home"] .hx-col { max-width: 1720px; }
}

/* ================================================================== *
 * 1 · HERO v12: the original split, finished. Green copy left, film
 *     right with the fade, wings on the bottom edge left and right -
 *     never overlapping the video. No gold over the film.
 * ================================================================== */
.hxo2--split .hxo2__plate {
  grid-template-columns: minmax(400px, 0.44fr) minmax(0, 0.56fr);
  grid-template-rows: minmax(clamp(460px, 54vh, 620px), 1fr) auto;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
.hxo2--split .hxo2__copy {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: clamp(2.25rem, 3.6vw, 4.5rem);
  color: var(--x2-cream-text);
}
.hxo2--split .hxo2__eyebrow {
  color: rgba(244, 238, 227, 0.78);   /* the gold comes off the eyebrow */
  letter-spacing: 0.06em;
  text-shadow: none;
}
.hxo2--split .hxo2__title { max-width: 11ch; font-size: clamp(2.8rem, 3.7vw, 4.4rem); text-shadow: none; }
.hxo2--split .hxo2__title span { display: block; }
.hxo2--split .hxo2__lede { max-width: 38ch; margin-top: 1.4rem; }
.hxo2--split .hxo2__actions { justify-content: flex-start; margin-top: 1.6rem; }
.hxo2--split .hxo2__rating { margin-top: 1.3rem; background: rgba(255, 255, 255, 0.05); }

.hxo2--split .hxo2__cinema {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  border-radius: 0;
  background: var(--x2-forest-deep);
}
/* the nice covering: the film dissolves into the green, sellers-guide style */
.hxo2--split .hxo2__veil {
  background:
    linear-gradient(90deg, var(--x2-forest-deep) 0%, rgba(28, 68, 55, 0) 24%),
    linear-gradient(0deg, rgba(10, 28, 21, 0.34) 0%, rgba(10, 28, 21, 0.02) 52%);
}

/* the wings: a finished bottom rail, one card pinned left, one right */
.hxo2__wings {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(0.9rem, 1.4vw, 1.25rem);
  border-top: 1px solid rgba(244, 238, 227, 0.16);
  background: rgba(10, 30, 24, 0.55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.hxo2--split .hxo2__wing {
  flex: 0 1 min(46%, 560px);
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.9rem, 1.4vw, 1.25rem);
  padding: 0.8rem;
  border: 1px solid rgba(244, 238, 227, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--x2-cream-text);
  text-decoration: none;
  overflow: hidden;
  position: relative;
}
.hxo2--split .hxo2__wing-media {
  margin: 0;
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(244, 238, 227, 0.16);
  overflow: hidden;
}
.hxo2--split .hxo2__wing-crown { width: 28px; height: 28px; color: rgba(244, 238, 227, 0.4); }
.hxo2--split .hxo2__wing-ratio {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(10, 28, 21, 0.72);
  color: rgba(244, 238, 227, 0.75);
  font-size: 0.75rem;
  font-weight: 700;
}
.hxo2--split .hxo2__route-action { font-size: 1.12rem; font-weight: 760; }
.hxo2--split .hxo2__wing-btn {
  min-height: 44px;
  padding: 0.6rem 0.95rem;
  font-size: 0.875rem;
}
@media (max-width: 61.99em) {
  .hxo2--split .hxo2__plate { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .hxo2--split .hxo2__cinema { grid-column: 1; grid-row: 1; min-height: 44svh; }
  .hxo2--split .hxo2__veil {
    background:
      linear-gradient(0deg, var(--x2-forest-deep) 0%, rgba(28, 68, 55, 0) 32%),
      linear-gradient(0deg, rgba(10, 28, 21, 0.28) 0%, rgba(10, 28, 21, 0.04) 60%);
  }
  .hxo2--split .hxo2__copy { grid-column: 1; grid-row: 2; padding: 1.6rem 1.35rem 1.9rem; }
  .hxo2__wings { flex-direction: column; }
  .hxo2--split .hxo2__wing { flex-basis: auto; grid-template-columns: 96px minmax(0, 1fr) auto; }
}

/* ================================================================== *
 * 2 · CHAPTER 03: the spread. Lead left, testimony right, the width
 *     used on both sides. The Google lockup ships finished.
 * ================================================================== */
.hx29 {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(3rem, 5.5vw, 7rem);
  width: 100%;
  padding-block: clamp(0.5rem, 1vw, 1rem) clamp(1.75rem, 2.5vw, 2.25rem);
}
@media (max-width: 61.99em) { .hx29 { grid-template-columns: 1fr; gap: 2rem; } }
.hx29__kicker { color: #e3c98f !important; letter-spacing: 0.15em; }
.hx29__title {
  margin: 0.6rem 0 0 !important;
  max-width: 13ch;
  font-size: clamp(2.6rem, 3.5vw, 4rem) !important;
  color: #f6f0e5 !important;
}
.hx29__rule {
  display: block;
  width: 100%;
  height: 2px;
  margin: clamp(1.25rem, 2vw, 1.75rem) 0;
  background: linear-gradient(90deg, #c5a66a 0%, #c5a66a 70%, rgba(197, 166, 106, 0) 100%);
}
/* the finished Google lockup: one bordered plate, everything aligned */
.hx29__google {
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.3rem 1.2rem;
  border: 1px solid rgba(244, 238, 227, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}
.hx29__google-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: rgba(244, 238, 227, 0.85);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hx29__g { width: 22px; height: 22px; background: #fffdf8; border-radius: 50%; padding: 2.5px; flex: 0 0 auto; }
.hx29__google-row { display: flex; align-items: baseline; gap: 0.7rem; margin: 0.15rem 0 0; }
.hx29__google-row strong {
  font-family: "Gloock", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 3vw, 3.1rem);
  line-height: 1;
  color: #e3c98f;
}
.hx29__stars { color: #e3c98f; font-size: 1.35rem; letter-spacing: 0.18em; }
.hx29__google-note { margin: 0.3rem 0 0; color: rgba(244, 238, 227, 0.75); font-size: 0.95rem; }
.hx29__link { margin-top: 0.8rem; }
/* the testimony, right, big and unmistakable */
.hx29__quote { margin: 0; }
.hx29__quote blockquote { margin: 0; position: relative; }
.hx29__quote blockquote::before {
  content: "\201C";
  display: block;
  font-family: "Gloock", Georgia, serif;
  font-size: 3.2rem;
  line-height: 0.6;
  color: #e3c98f;
  margin-bottom: 0.6rem;
}
.hx29__quote blockquote p {
  margin: 0;
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  line-height: 1.38;
  color: #fdf8ee;
  text-wrap: pretty;
}
.hx29__quote figcaption { display: flex; align-items: center; gap: 0.85rem; margin-top: 1.5rem; }
.hx29__face {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(227, 201, 143, 0.55); flex: 0 0 auto; display: block;
}
.hx29__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx29__cite { display: flex; flex-direction: column; gap: 0.15rem; }
.hx29__cite strong { color: #f6f0e5; font-size: 1.02rem; }
.hx29__cite em { font-style: normal; color: #e3c98f; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

/* ================================================================== *
 * 3 · THE SPOTLIGHT CARDS: attractive, trustworthy, authentic.
 * ================================================================== */
.rspot__card { border: 0; }
.rspot__card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 0 3px 3px 0;
}
.rspot__card:nth-child(3n + 1) { background: #f6efe4; }
.rspot__card:nth-child(3n + 1)::before { background: #c5a66a; }
.rspot__card:nth-child(3n + 2) { background: #edf2eb; }
.rspot__card:nth-child(3n + 2)::before { background: #17483c; }
.rspot__card:nth-child(3n + 3) { background: #f6ebe6; }
.rspot__card:nth-child(3n + 3)::before { background: #7b2430; }
/* the Google mark sits on every card, top right */
.rspot__card::after {
  content: "";
  position: absolute;
  top: 1.4rem;
  right: 1.5rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.1H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3l5.7-5.7C34 6.1 29.3 4 24 4 13 4 4 13 4 24s9 20 20 20 20-9 20-20c0-1.3-.1-2.6-.4-3.9z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.9 1.2 8 3l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.1H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C36.9 40.4 44 35 44 24c0-1.3-.1-2.6-.4-3.9z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  box-shadow: 0 4px 12px -4px rgba(15, 35, 58, 0.35);
}
.rspot__stars { font-size: 1.45rem; letter-spacing: 0.22em; color: #d29c17; margin-bottom: 0.8rem; }
.rspot__foot .face, .rspot__foot .rcard__initials {
  width: 58px; height: 58px;
  border: 2px solid rgba(197, 166, 106, 0.55);
}
.rspot__who strong { font-size: 1.08rem; }
.rspot__who em { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ================================================================== *
 * 4 · PORTALS: the full re-pass. Copy left, the aerial right with the
 *     fade, tinted tiles instead of white boxes, legend pills.
 * ================================================================== */
.hx30 {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
@media (max-width: 61.99em) { .hx30 { grid-template-columns: 1fr; } }
.hx30 .band__head { text-align: left; margin: 0; max-width: none; }
.hx30 .band__head .h-section { text-align: left; }
.hx30 .band__head .lede { margin-inline: 0; max-width: 44ch; }
.hx30__legend { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 0; }
.hx30__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(16, 35, 58, 0.16);
  border-radius: 999px;
  background: #fffdf8;
  color: #10233a;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hx30__pill i { width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.hx30__pill--portal i { background: #7b2430; }
.hx30__pill--scheme i { background: #17483c; }
.hx30__scene {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px 16px 56px 16px;
}
.hx30__scene img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  filter: brightness(0.99) contrast(1.03) saturate(1.03);
}
.hx30__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(13, 29, 49, 0.26) 0%, rgba(13, 29, 49, 0) 42%);
}
.hx30__scene figcaption {
  position: absolute;
  left: 1.1rem;
  bottom: 0.95rem;
  color: rgba(255, 253, 249, 0.94);
  font-size: 0.875rem;
  font-weight: 700;
  text-shadow: 0 1px 10px rgba(13, 29, 49, 0.6);
}
/* tiles: tinted plates with a brand rule, never bare white boxes */
[data-page="home"] .creds__card {
  background: #fbf8f2 !important;
  border: 1px solid rgba(16, 35, 58, 0.14) !important;
  border-top: 3px solid #7b2430 !important;
  border-radius: 12px !important;
}
[data-page="home"] .creds__item:nth-child(1) .creds__card,
[data-page="home"] .creds__item:nth-child(7) .creds__card,
[data-page="home"] .creds__item:nth-child(8) .creds__card,
[data-page="home"] .creds__item:nth-child(9) .creds__card {
  border-top-color: #17483c !important;   /* the protection schemes */
  background: #f3f7f2 !important;
}
[data-page="home"] .creds__kind { color: #4f555b !important; font-size: 0.875rem !important; }

/* ================================================================== *
 * 5 · TELL DUKES, third pass: the accordions become a clean ledger,
 *     no offset float, no dead space; the dock animation arrives.
 * ================================================================== */
@media (min-width: 62em) {
  [data-page="home"] .reception .reception__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    column-gap: clamp(2.5rem, 4.5vw, 5.5rem) !important;
  }
  [data-page="home"] #dukes-receptionist.reception ol.reception__routes {
    grid-template-columns: 1fr !important;
    gap: 0.7rem !important;
  }
  [data-page="home"] #dukes-receptionist.reception ol.reception__routes > li:nth-child(even) {
    transform: none;   /* the offset gallery retires */
  }
}
[data-page="home"] #dukes-receptionist.reception ol.reception__routes > li {
  border-radius: 12px !important;
  box-shadow: 0 10px 26px -22px rgba(15, 35, 58, 0.5) !important;
}
[data-page="home"] .hx28-desk { max-width: none; border-radius: 14px 14px 14px 44px; }
[data-page="home"] .hx28-desk img { aspect-ratio: 16 / 10; }

/* the dock: contact icons magnify on hover with a floating label,
   each in its service's colour - the animation Aarav asked for */
[data-page="home"] .reception .crail__list {
  display: flex !important;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  align-items: flex-end;
  padding: 0.5rem 0 0;
}
[data-page="home"] .reception .crail__item { position: relative; }
[data-page="home"] .reception .crail__icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  transform-origin: bottom center;
  transition: transform 260ms cubic-bezier(0.34, 1.4, 0.5, 1), background-color 200ms ease, color 200ms ease, border-color 200ms ease !important;
}
[data-page="home"] .reception .crail__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.9rem);
  transform: translateX(-50%) translateY(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  padding: 0.45rem 0.8rem;
  border-radius: 9px;
  background: #171a20;
  color: #fbf8f2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 260ms cubic-bezier(0.34, 1.4, 0.5, 1);
  z-index: 5;
}
[data-page="home"] .reception .crail__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #171a20;
}
[data-page="home"] .reception .crail__tip-label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
[data-page="home"] .reception .crail__tip-value { font-size: 0.9rem; font-weight: 750; }
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .reception .crail__link:hover .crail__icon,
  [data-page="home"] .reception .crail__link:focus-visible .crail__icon { transform: scale(1.32) translateY(-4px); }
  [data-page="home"] .reception .crail__link:hover .crail__tip,
  [data-page="home"] .reception .crail__link:focus-visible .crail__tip { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .reception .crail__icon { transition: none !important; transform: none !important; }
  [data-page="home"] .reception .crail__tip { transition: none; }
}

/* ======================================================================
 * REVISION 12.1 - the contact card had 189px of dead cream under its
 * last row, and the light action read green against the navy. Aarav:
 *   "I don't like the white space at the bottom, fix that"
 *   "I don't like the green colour with the blue combo here"
 * The ledger now carries the fourth route and the registered office, and
 * its rows distribute so the card is full to the corner. Both actions
 * become the house pair on a dark ground: cream lead, oxblood second.
 * ==================================================================== */
.hx27__ledger { justify-content: flex-start; gap: 0.55rem; }
.hx27__ledger .hx27-row { flex: 1 1 auto; align-items: center; }
.hx27-row--instagram:focus-visible { outline: 3px solid #f0bd77; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .hx27-row--instagram:hover {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 8%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    border-color: #d6249f;
    color: #ffffff;
    transform: translateY(-2px);
  }
}
.hx27__office {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(23, 26, 32, 0.12);
}
.hx27__office-label {
  margin: 0 0 0.25rem;
  color: #7b2430;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hx27__office-address { margin: 0; color: #4f555b; font-size: 0.95rem; line-height: 1.55; }

/* the two actions on the navy: cream lead, oxblood second. No green. */
[data-page="home"] .band--contact .btn--gold,
[data-page="home"] .band--contact .hx27__paths .btn--gold {
  background: #fbf8f2 !important;
  border: 1.5px solid #fbf8f2 !important;
  color: #0d1d31 !important;
}
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .band--contact .btn--gold:hover,
  [data-page="home"] .band--contact .hx27__paths .btn--gold:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
  }
}

/* THE GREEN ON THE NAVY, ROOT CAUSE: an inherited .btn--gold::before
   sits inset 0 over the whole control filled rgb(49,83,69). The button's
   own background computed cream while the pseudo painted green on top -
   which is why the colour looked wrong but measured right. The overlay
   is retired on this page; the button's own fill and hover do the work. */
[data-page="home"] .btn--gold::before,
[data-page="home"] .band--contact .btn--gold::before { content: none !important; }

/* ======================================================================
 * REVISION 13 - 19 August 2026. Root-cause fixes + the full list.
 * ==================================================================== */

/* ------------------------------------------------------------------ *
 * 1 - THE BUTTON BUG. The button's real surface is the ::before
 *     pseudo-element painted from --btn-fill (z-index -1, sits ABOVE
 *     the element's own background-color, not below it). An older
 *     dukes.css rule (line 8884) forces --btn-fill to bottle-green on
 *     this band. Overriding the actual variable, not background.
 * ------------------------------------------------------------------ */
[data-page="home"] .band--contact .btn--gold {
  --btn-fill: #fbf8f2 !important;
  --btn-fg: #0d1d31 !important;
  border-color: rgba(197, 166, 106, 0.55) !important;
}
[data-page="home"] .band--contact .btn--gold:hover::before { transform: scaleY(0.94) !important; }

/* ------------------------------------------------------------------ *
 * 2 - PORTALS (05): the lion watermark is the shared .band__head
 *     device (hx-head::before/::after) - kill it here since this head
 *     is left-aligned now, not centred between two ghosts. Also make
 *     the head left-align win over the old !important centring rule,
 *     and let the tile strip breathe to the section's full width.
 * ------------------------------------------------------------------ */
[data-page="home"] .hx30 .band__head,
[data-page="home"] .hx30 .band__head .h-section,
[data-page="home"] .hx30 .band__head .lede {
  text-align: left !important;
  margin-inline: 0 !important;
  max-width: 46ch !important;
}
[data-page="home"] .hx30 .band__head .h-section::after { margin: clamp(12px, 1.4vw, 18px) 0 clamp(10px, 1.2vw, 14px) !important; }
[data-page="home"] .hx30 .band__head::before,
[data-page="home"] .hx30 .band__head::after { display: none !important; }
[data-page="home"] .band--creds .creds__viewport { max-width: none; }
[data-page="home"] .band--creds .hx-col { max-width: none; padding-inline: clamp(18px, 3vw, 40px); }

/* ------------------------------------------------------------------ *
 * 3 - CHAPTER 03: the restructure. Centred lead at top, the quote
 *     wider below it, then a finished two-up row: Google left,
 *     reviewer right. No dead corners.
 * ------------------------------------------------------------------ */
.hx29 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-block: clamp(0.5rem, 1vw, 1rem) clamp(1.75rem, 2.5vw, 2.25rem);
}
.hx29__top { text-align: center; max-width: 32ch; }
.hx29__kicker { color: #e3c98f !important; letter-spacing: 0.15em; }
.hx29__title {
  margin: 0.6rem 0 0 !important;
  font-size: clamp(2.6rem, 3.6vw, 4rem) !important;
  color: #f6f0e5 !important;
  max-width: none !important;
}
.hx29__rule {
  display: block;
  width: min(100%, 22rem);
  height: 2px;
  margin: clamp(1.1rem, 1.8vw, 1.5rem) auto 0;
  background: linear-gradient(90deg, rgba(197, 166, 106, 0) 0%, #c5a66a 20%, #c5a66a 80%, rgba(197, 166, 106, 0) 100%);
}
.hx29__quote {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  width: min(100%, 62rem);
  text-align: center;
}
.hx29__quote blockquote { margin: 0; position: relative; }
.hx29__quote blockquote::before {
  content: "\201C";
  display: block;
  font-family: "Gloock", Georgia, serif;
  font-size: 3rem;
  line-height: 0.6;
  color: #e3c98f;
  margin: 0 auto 0.5rem;
  text-align: center;
}
.hx29__quote blockquote p {
  margin: 0 auto;
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.5rem, 2.4vw, 2.15rem);
  line-height: 1.38;
  color: #fdf8ee;
  max-width: 46ch;
  text-wrap: pretty;
}
.hx29__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  width: min(100%, 52rem);
  margin-top: clamp(2rem, 3.2vw, 2.75rem);
  padding-top: clamp(1.75rem, 2.6vw, 2.25rem);
  border-top: 1px solid rgba(244, 238, 227, 0.18);
}
@media (max-width: 47.99em) { .hx29__bottom { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; } }
.hx29__google {
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-self: start;
}
@media (max-width: 47.99em) { .hx29__google { justify-self: center; align-items: center; } }
.hx29__google-head { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: rgba(244, 238, 227, 0.85); font-size: 0.875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.hx29__g { width: 22px; height: 22px; background: #fffdf8; border-radius: 50%; padding: 2.5px; flex: 0 0 auto; }
.hx29__google-row { display: flex; align-items: baseline; gap: 0.7rem; margin: 0.15rem 0 0; }
.hx29__google-row strong { font-family: "Gloock", Georgia, serif; font-weight: 400; font-size: clamp(2.2rem, 2.7vw, 2.8rem); line-height: 1; color: #e3c98f; }
.hx29__stars { color: #e3c98f; font-size: 1.25rem; letter-spacing: 0.16em; }
.hx29__google-note { margin: 0.3rem 0 0; color: rgba(244, 238, 227, 0.75); font-size: 0.9rem; }
.hx29__link { margin-top: 0.7rem; }
.hx29__reviewer {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  justify-self: end;
  margin: 0;
}
@media (max-width: 47.99em) { .hx29__reviewer { justify-self: center; } }
.hx29__face { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(227, 201, 143, 0.55); flex: 0 0 auto; display: block; }
.hx29__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx29__cite { display: flex; flex-direction: column; gap: 0.15rem; text-align: left; }
@media (max-width: 47.99em) { .hx29__cite { text-align: left; } }
.hx29__cite strong { color: #f6f0e5; font-size: 1.02rem; }
.hx29__cite em { font-style: normal; color: #e3c98f; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

/* ------------------------------------------------------------------ *
 * 4 - ASSISTANT (01): the colour switch, the bigger contact card, the
 *     gapped route cards. Warm stone replaces the pale blue; the
 *     ledger becomes a soft sage plate instead of stark white.
 * ------------------------------------------------------------------ */
[data-page="home"] .hx-band--assistant {
  background: radial-gradient(120% 90% at 12% 0%, rgba(123, 36, 48, 0.06) 0%, rgba(123, 36, 48, 0) 55%), #f2ede1 !important;
}
[data-page="home"] .hx-band--assistant .reception__intro .h-section { color: #171a20; }
[data-page="home"] .reception .reception__routes--safe {
  background: #e7efe6 !important;   /* soft sage, not white */
  border-color: rgba(23, 72, 60, 0.16) !important;
}
[data-page="home"] .reception .crail { background: transparent !important; }
[data-page="home"] .reception .reception__routes--safe {
  padding: clamp(1.5rem, 2.2vw, 2rem) !important;
  border-radius: 14px 14px 14px 40px !important;
}
@media (min-width: 62em) {
  [data-page="home"] .reception .reception__inner {
    grid-template-rows: auto 1fr !important;
    align-items: stretch;
  }
  [data-page="home"] #dukes-receptionist .reception__routes--safe {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 260px;
  }
}
[data-page="home"] .crail__intro {
  margin: 0 0 1rem;
  color: #17483c;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* the three route cards (chapter 02): more air, per Aarav's ask */
[data-page="home"] .hx-routes { gap: clamp(24px, 2.6vw, 40px) !important; }

/* ------------------------------------------------------------------ *
 * 5 - CHAPTER 02 PANEL + NAV CURSOR: off white.
 * ------------------------------------------------------------------ */
[data-page="home"] .hx-band--clay .hx-frame { background: #eef2ea !important; }  /* soft sage-paper, not white */
.hxnav__cursor { background: #c5a66a !important; }   /* gold, not a plain white blob */
.hxnav [data-hxnav-link].is-on { color: #171a20 !important; }

/* ------------------------------------------------------------------ *
 * 6 - CONTACT LEDGER: the arrow-slide + brand-fill hover (reference).
 * ------------------------------------------------------------------ */
.hx27-row {
  position: relative;
  padding-right: 2.75rem;
}
.hx27-row::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-4px, -50%);
  opacity: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .hx27-row:hover::after,
  .hx27-row:focus-visible::after { opacity: 1; transform: translate(2px, -50%); }
}

/* ======================================================================
 * REVISION 14 - 19 August 2026. "ONE DECK": the assistant section,
 * fully redesigned by a 3-concept design workflow (unified-grid /
 * editorial-ledger / card-dossier) judged and synthesised. Winner: One
 * Deck, 8.7/10. The whole section - the hero intro AND all 5 routes -
 * is now one card component in two states, exactly Aarav's own usage
 * note on the card-18 reference. Zero JavaScript: name="dukes-route" on
 * every <details> gives a native exclusive accordion with the browser
 * itself enforcing one-open, no script required at all.
 * ==================================================================== */

[data-page="home"] #dukes-receptionist .reception__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
  grid-template-areas: "intro routes" !important;
  column-gap: 24px !important;
  row-gap: 0 !important;
  align-items: stretch !important;
}
[data-page="home"] #dukes-receptionist .rd-intro { grid-area: intro; }
[data-page="home"] #dukes-receptionist .rd-routes { grid-area: routes; }

/* ---- the shared card recipe: one radius, one shadow, one paper scale */
[data-page="home"] .rd-intro,
[data-page="home"] .rd-route__disclosure {
  background: #fbf8f2;
  border: 1px solid rgba(23, 72, 60, 0.1);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(15, 48, 40, 0.05), 0 14px 34px rgba(15, 48, 40, 0.08);
}
[data-page="home"] .rd-route__disclosure[open] {
  border-color: rgba(23, 72, 60, 0.16);
  box-shadow: 0 18px 44px rgba(15, 48, 40, 0.1);
}

/* ---- THE HERO CARD (left) ------------------------------------------ */
[data-page="home"] .rd-intro {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
}
[data-page="home"] .rd-intro__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #17483c;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
[data-page="home"] .rd-intro__rule { display: inline-block; width: 20px; height: 2px; background: #c5a66a; flex: 0 0 auto; }
[data-page="home"] .rd-intro .h-section {
  margin: 0.7rem 0 0 !important;
  font-family: "Gloock", Georgia, serif !important;
  font-weight: 400;
  font-size: clamp(2.1rem, 1.2rem + 2.4vw, 3rem) !important;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #17483c !important;
  text-align: left !important;
  max-width: none !important;
}
[data-page="home"] .rd-intro__lede {
  margin: 1rem 0 0;
  max-width: 40ch;
  color: rgba(15, 48, 40, 0.78);
  font-size: 1rem;
  line-height: 1.6;
}
[data-page="home"] .rd-intro__slot {
  position: relative;
  margin: 1.5rem 0 0;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #f7f1e7;
  border: 1px solid rgba(23, 72, 60, 0.1);
  overflow: hidden;
}
[data-page="home"] .rd-intro__crown { width: 44px; height: 44px; color: rgba(23, 72, 60, 0.2); }
[data-page="home"] .rd-intro__slot-img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-page="home"] .rd-intro__slot-chip {
  position: absolute;
  left: 0.85rem;
  bottom: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(23, 72, 60, 0.1);
  color: #17483c;
  font-size: 0.8125rem;
  font-weight: 700;
}
[data-page="home"] .rd-intro__slot-ratio {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(23, 72, 60, 0.1);
  color: rgba(23, 72, 60, 0.7);
  font-size: 0.75rem;
  font-weight: 700;
}
/* the weld: the mini-ledger reuses the route rows' own grammar so both
   columns read as one component family, and it fills the card's foot */
[data-page="home"] .rd-intro__ledger {
  margin: 1.5rem 0 0 0;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(23, 72, 60, 0.12);
}
[data-page="home"] .rd-intro__ledger > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(23, 72, 60, 0.1);
}
[data-page="home"] .rd-intro__ledger > div:last-child { border-bottom: 0; }
[data-page="home"] .rd-intro__ledger dt { margin: 0; color: #17483c; font-size: 0.92rem; font-weight: 700; }
[data-page="home"] .rd-intro__ledger dd { margin: 0; color: rgba(15, 48, 40, 0.7); font-size: 0.9rem; font-weight: 600; text-align: right; }

/* ---- THE ROUTE CARDS (right) ---------------------------------------- */
[data-page="home"] .rd-routes {
  display: flex;
  flex-direction: column;
  row-gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}
[data-page="home"] .rd-route { margin: 0; }
[data-page="home"] .rd-route__disclosure { overflow: hidden; }
[data-page="home"] .rd-route__summary {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding: 0 28px;
  cursor: pointer;
  list-style: none;
}
[data-page="home"] .rd-route__summary::-webkit-details-marker { display: none; }
[data-page="home"] .rd-route__num {
  flex: 0 0 28px;
  font-family: "Gloock", Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  color: #c5a66a;
  transition: color 180ms ease;
}
[data-page="home"] .rd-route__disclosure[open] .rd-route__num { color: #17483c; }
[data-page="home"] .rd-route__label {
  flex: 1 1 auto;
  font-family: "Manrope", sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700;
  color: #17483c !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
[data-page="home"] .rd-route__disclosure[open] .rd-route__label { font-size: 1.1rem !important; }
[data-page="home"] .rd-route__chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #17483c;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-page="home"] .rd-route__disclosure[open] .rd-route__chevron { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .rd-route__disclosure:not([open]):hover { background: #f7f1e7; }
  [data-page="home"] .rd-route__disclosure:not([open]):hover .rd-route__chevron { transform: translateY(2px); }
}
[data-page="home"] .rd-route__summary:focus-visible {
  outline: 2px solid #17483c;
  outline-offset: -2px;
  border-radius: 22px;
}

[data-page="home"] .rd-route__body {
  padding: 4px 28px 28px !important;
  border-top: 1px solid rgba(23, 72, 60, 0.12);
  margin-top: 2px;
  animation: rd-body-in 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes rd-body-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
[data-page="home"] .rd-route__outcome {
  margin: 18px 0 0 !important;
  color: rgba(15, 48, 40, 0.78) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}
[data-page="home"] .rd-route__kicker {
  margin: 18px 0 10px;
  color: #17483c;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
[data-page="home"] .rd-route__checklist {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  margin: 0 !important;
  padding: 16px 20px !important;
  border-radius: 14px;
  background: #f7f1e7;
  list-style: none !important;
}
[data-page="home"] .rd-route__checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #17483c;
  font-size: 0.92rem;
  font-weight: 500;
}
[data-page="home"] .rd-tick { flex: 0 0 auto; width: 14px; height: 14px; color: #c5a66a; }
@media (max-width: 34.99em) {
  [data-page="home"] .rd-route__checklist { grid-template-columns: 1fr; }
}

[data-page="home"] .rd-route__acts { margin-top: 22px !important; display: block !important; }
[data-page="home"] .rd-route__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 8px;
  font-family: "Manrope", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-page="home"] .rd-route__cta--primary {
  width: 100%;
  background: #7b2430;
  color: #fbf8f2;
  border: 0;
}
[data-page="home"] .rd-route__cta-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
[data-page="home"] .rd-route__cta--outline {
  min-height: 46px;
  background: transparent;
  border: 1.5px solid #17483c;
  color: #17483c;
}
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .rd-route__cta--primary:hover { background: #6a1e29; transform: translateY(-2px); }
  [data-page="home"] .rd-route__cta--outline:hover { background: #e7efe9; transform: translateY(-2px); }
}
[data-page="home"] .rd-route__cta:focus-visible { outline: 2px solid #7b2430; outline-offset: 2px; }
@media (max-width: 34.99em) {
  [data-page="home"] .rd-route__cta-pair { grid-template-columns: 1fr; }
}

/* ---- responsive: one column, hero card first, image slot kept ------- */
@media (max-width: 54.99em) {
  [data-page="home"] #dukes-receptionist .reception__inner {
    grid-template-columns: 1fr !important;
    grid-template-areas: "intro" "routes" !important;
  }
  [data-page="home"] .rd-routes { row-gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .rd-route__body { animation: none; }
  [data-page="home"] .rd-route__chevron,
  [data-page="home"] .rd-route__num,
  [data-page="home"] .rd-route__cta,
  [data-page="home"] .rd-route__disclosure:hover { transition: none !important; transform: none !important; }
}

/* ======================================================================
 * REVISION 15 - 19 August 2026. Four-point pass:
 *   1. chat greeting: the x sits INSIDE the card, 24px, glyph centred
 *   2. chapter 03: heading centred top; Google card bottom-left;
 *      quote + Sarah bottom-right (Aarav's exact structure)
 *   3. hero: one button only (rental estimate); wings lose their inner
 *      buttons and go compact; the green rail shrinks
 *   4. chapter 02: the breathing-room pass from Aarav's spec
 * ==================================================================== */

/* ---- 1 · the greeting card and its close button --------------------- */
.dbubble { position: fixed; overflow: visible; }
html body .dbubble .dbubble__x {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  font-size: 0.8rem !important;
  line-height: 1 !important;
  transform: none !important;
}
html body .dbubble p { margin-right: 2.4rem !important; }

/* ---- 2 · chapter 03: Google left, testimony right ------------------- */
.hx29__bottom {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  width: 100%;
  border-top: 0;
  padding-top: 0;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  gap: clamp(2rem, 4vw, 4rem);
}
.hx29__google {
  justify-self: stretch;
  width: 100%;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid rgba(244, 238, 227, 0.22);
  border-radius: 14px 14px 14px 40px;
  background: rgba(255, 255, 255, 0.05);
}
.hx29__quote { width: auto; text-align: left; margin: 0; }
.hx29__quote blockquote::before { margin: 0 0 0.5rem; text-align: left; }
.hx29__quote blockquote p { margin: 0; max-width: 40ch; font-size: clamp(1.35rem, 2vw, 1.8rem); }
.hx29__reviewer { display: flex; align-items: center; gap: 0.85rem; margin-top: 1.4rem; }
@media (max-width: 47.99em) {
  .hx29__bottom { grid-template-columns: 1fr; }
  .hx29__quote blockquote p { max-width: none; }
}

/* ---- 3 · hero: one button; compact wings; the green rail shrinks ---- */
.hxo2--split .hxo2__actions { margin-top: 1.6rem; }
.hxo2__wings {
  padding: clamp(0.6rem, 0.9vw, 0.85rem);
  background: rgba(10, 30, 24, 0.4);
}
.hxo2--split .hxo2__wing {
  flex: 0 1 auto;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: clamp(0.8rem, 1.2vw, 1rem);
  padding: 0.6rem 1.1rem 0.6rem 0.6rem;
}
.hxo2--split .hxo2__wing::after {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(244, 238, 227, 0.32);
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4eee3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
  transition: border-color 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .hxo2--split .hxo2__wing:hover::after { border-color: #e3c98f; transform: translateX(3px); }
}
.hxo2--split .hxo2__route-action { font-size: 1.05rem; }
.hxo2--split .hxo2__wing-media { aspect-ratio: 3 / 2; }

/* ---- 4 · chapter 02: the separation pass ---------------------------- */
[data-page="home"] .hx-band--clay .hx-frame { padding: clamp(2.25rem, 3.4vw, 3.25rem) !important; }
[data-page="home"] .hx-band--clay .hx-split {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(3rem, 5vw, 5.5rem);
  align-items: center;
}
[data-page="home"] .hx-band--clay .hx-mosaic { gap: 16px; }
[data-page="home"] .hx-band--clay .hx-panel > * + * { margin-top: 1.4rem; }
[data-page="home"] .hx-band--clay .hx-facts > div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.3fr) 1fr;
  gap: 0.5rem 1.4rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(23, 26, 32, 0.1);
}
[data-page="home"] .hx-band--clay .hx-facts > div:first-child { border-top: 1px solid rgba(23, 26, 32, 0.1); }
[data-page="home"] .hx-band--clay .hx-facts dd { font-size: 0.98rem; line-height: 1.6; }
[data-page="home"] .hx-band--clay .hx-panel .hx-textlink { margin-top: 1.75rem; display: inline-flex; }

/* ======================================================================
 * REVISION 16 - 19 August 2026. Section 01 alignment pass, per Aarav:
 *   - the two columns pull together, centred, tighter gap
 *   - the contact widget stops floating bottom-right: it becomes ONE
 *     horizontal row of tiles spanning beneath both columns
 *   - each tile takes the reference hover: cream tile fills dark ink,
 *     gold label, arrow slides in (the "Contact Dukes directly" motion)
 *   - the image slot is one big horizontal 16:9, nothing complex
 *   - stray list bullets under the gold ticks removed
 * ==================================================================== */

/* ---- the grid: connected near the centre, contact row beneath ------- */
[data-page="home"] #dukes-receptionist .reception__inner {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
  grid-template-areas:
    "intro routes"
    "contact contact" !important;
  column-gap: 28px !important;
  row-gap: clamp(1.75rem, 2.6vw, 2.5rem) !important;
  width: min(100%, 1240px) !important;
  margin-inline: auto !important;
}
@media (max-width: 54.99em) {
  [data-page="home"] #dukes-receptionist .reception__inner {
    grid-template-columns: 1fr !important;
    grid-template-areas: "intro" "routes" "contact" !important;
  }
}
[data-page="home"] #dukes-receptionist .reception__routes--safe {
  grid-area: contact !important;
  max-width: none !important;
  min-height: 0 !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(23, 72, 60, 0.14) !important;
  border-radius: 0 !important;
  padding: clamp(1.25rem, 2vw, 1.75rem) 0 0 !important;
  box-shadow: none !important;
}

/* ---- the image slot: one big horizontal --------------------------- */
[data-page="home"] .rd-intro__slot { aspect-ratio: 16 / 9; }

/* ---- the stray bullets: the ticks are the only markers -------------- */
[data-page="home"] #dukes-receptionist .rd-route__checklist li { padding-inline-start: 0 !important; }
[data-page="home"] #dukes-receptionist .rd-route__checklist li::before { content: none !important; display: none !important; }

/* ---- the contact row: four tiles, one line, reference hover --------- */
[data-page="home"] #dukes-receptionist .crail { background: transparent !important; padding: 0 !important; }
[data-page="home"] #dukes-receptionist .crail__intro {
  margin: 0 0 0.9rem;
  text-align: center;
  color: #17483c;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
[data-page="home"] #dukes-receptionist .crail__list {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch !important;
  gap: 12px !important;
  margin: 0;
  padding: 0 !important;
  list-style: none;
}
[data-page="home"] #dukes-receptionist .crail__item { position: static; flex: 0 1 auto; }
[data-page="home"] #dukes-receptionist .crail__link {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0.6rem 2.6rem 0.6rem 0.7rem;
  position: relative;
  border: 1px solid rgba(23, 72, 60, 0.14);
  border-radius: 12px;
  background: #fbf8f2;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* the icon keeps a small circle; the old dock magnify is retired here */
[data-page="home"] #dukes-receptionist .crail__icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(23, 72, 60, 0.2);
  background: transparent !important;
  color: #17483c !important;
  transform: none !important;
  transition: border-color 200ms ease, color 200ms ease !important;
}
[data-page="home"] #dukes-receptionist .crail__fill { display: none !important; }
/* the tip stops being a tooltip: it is the tile's own two-line text */
[data-page="home"] #dukes-receptionist .crail__tip {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0 !important;
  background: transparent !important;
  color: inherit !important;
  white-space: nowrap;
  transition: none !important;
}
[data-page="home"] #dukes-receptionist .crail__tip::after { display: none !important; }
[data-page="home"] #dukes-receptionist .crail__tip-label {
  font-size: 0.72rem !important;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c5a66a;
  opacity: 1 !important;
  transition: color 200ms ease;
}
[data-page="home"] #dukes-receptionist .crail__tip-value {
  font-size: 0.98rem !important;
  font-weight: 750;
  color: #171a20;
  transition: color 200ms ease;
}
/* markup order is link then tip: lay the item out as one tile row */
[data-page="home"] #dukes-receptionist .crail__item {
  display: flex;
}
[data-page="home"] #dukes-receptionist .crail__item .crail__tip { display: none !important; }
/* the LINK is the tile; its accessible label already carries the text.
   Visible text comes from a data attribute pair painted below. */

/* the reference arrow, sliding in from the right on hover */
[data-page="home"] #dukes-receptionist .crail__link::after {
  content: "";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-4px, -50%);
  opacity: 0.55;
  background: #171a20;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease;
}

/* THE REFERENCE HOVER: the tile fills dark ink, label goes gold-lift,
   value goes cream, icon ring goes gold, arrow slides right */
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] #dukes-receptionist .crail__link:hover,
  [data-page="home"] #dukes-receptionist .crail__link:focus-visible {
    background: #171a20;
    border-color: #171a20;
    transform: translateY(-2px);
  }
  [data-page="home"] #dukes-receptionist .crail__link:hover .crail__icon,
  [data-page="home"] #dukes-receptionist .crail__link:focus-visible .crail__icon {
    border-color: rgba(197, 166, 106, 0.6);
    color: #e3c98f !important;
  }
  [data-page="home"] #dukes-receptionist .crail__link:hover .rd-c-label,
  [data-page="home"] #dukes-receptionist .crail__link:focus-visible .rd-c-label { color: #e3c98f; }
  [data-page="home"] #dukes-receptionist .crail__link:hover .rd-c-value,
  [data-page="home"] #dukes-receptionist .crail__link:focus-visible .rd-c-value { color: #fbf8f2; }
  [data-page="home"] #dukes-receptionist .crail__link:hover::after,
  [data-page="home"] #dukes-receptionist .crail__link:focus-visible::after {
    opacity: 1;
    transform: translate(2px, -50%);
    background: #e3c98f;
  }
}
[data-page="home"] #dukes-receptionist .crail__link:focus-visible { outline: 2px solid #17483c; outline-offset: 2px; }

/* visible two-line text inside each tile */
[data-page="home"] #dukes-receptionist .rd-c-text { display: flex; flex-direction: column; gap: 0.1rem; }
[data-page="home"] #dukes-receptionist .rd-c-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c5a66a;
  transition: color 200ms ease;
}
[data-page="home"] #dukes-receptionist .rd-c-value {
  font-size: 0.98rem;
  font-weight: 750;
  color: #171a20;
  white-space: nowrap;
  transition: color 200ms ease;
}

/* the separate follow line retires; Instagram is the fourth tile */
[data-page="home"] #dukes-receptionist .reception__follow { display: none !important; }

@media (max-width: 47.99em) {
  [data-page="home"] #dukes-receptionist .crail__list { flex-direction: column; align-items: stretch; }
  [data-page="home"] #dukes-receptionist .crail__item { width: 100%; }
  [data-page="home"] #dukes-receptionist .crail__link { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] #dukes-receptionist .crail__link,
  [data-page="home"] #dukes-receptionist .crail__link::after { transition: none !important; transform: none !important; }
  [data-page="home"] #dukes-receptionist .crail__link::after { transform: translateY(-50%) !important; }
}

/* rev 16.1 - two older rules fought the contact tiles:
   home-2026.css:1001 pinned every crail link to a 48px square (the old
   icon-dock geometry), and :982 hid the Instagram item outright. The
   tiles own their size now, and Instagram is the fourth tile. */
[data-page="home"] #dukes-receptionist .crail__link {
  flex: 0 1 auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 56px !important;
}
[data-page="home"] #dukes-receptionist .crail__item:has(.crail__link--instagram) { display: flex !important; }
[data-page="home"] #dukes-receptionist .crail--dark .crail__link { background: #fbf8f2; border-color: rgba(23, 72, 60, 0.14); }
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] #dukes-receptionist .crail--dark .crail__link:hover,
  [data-page="home"] #dukes-receptionist .crail--dark .crail__link:focus-visible { background: #171a20; border-color: #171a20; }
}

/* rev 16.2 - the rev-11 crail width cap (min(100%,640px)) still forced
   the four tiles onto two rows. The rail owns the full grid width now. */
[data-page="home"] #dukes-receptionist .reception .crail,
[data-page="home"] .reception .crail { width: 100% !important; max-width: none !important; }

/* rev 16.3 - an older .crail__item::before painted a stray arrow at each
   tile's left edge; the tile's own right-side arrow is the only one. */
[data-page="home"] #dukes-receptionist .crail__item::before { content: none !important; display: none !important; }

/* ======================================================================
 * REVISION 17 - 19 August 2026. THE CONTACT TILES, MATCHED TO THE
 * REFERENCE. Honest audit of the last pass: tiles too small, wrapped
 * 2x2 against the left, WhatsApp wearing a telephone glyph, no brand
 * wipe. This layer replaces all of it:
 *   - four EQUAL tiles filling the full grid row, 88px tall
 *   - real brand logos (WhatsApp bubble, Instagram camera) in gold rings
 *   - hover = the reference animation: the channel's own dark brand
 *     colour WIPES in from the left (telephone near-black, WhatsApp
 *     green, email navy, Instagram gradient), text flips cream, gold
 *     arrow slides right
 * ==================================================================== */

[data-page="home"] #dukes-receptionist .crail__list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100%;
}
@media (max-width: 63.99em) {
  [data-page="home"] #dukes-receptionist .crail__list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 35.99em) {
  [data-page="home"] #dukes-receptionist .crail__list { grid-template-columns: 1fr !important; }
}
[data-page="home"] #dukes-receptionist .crail__item { display: block; width: auto; }
[data-page="home"] #dukes-receptionist .crail__link {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 14px;
  width: 100% !important;
  min-height: 88px !important;
  padding: 1rem 2.9rem 1rem 1.1rem;
  border: 1px solid rgba(23, 72, 60, 0.14);
  border-radius: 16px;
  background: #fbf8f2;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  transition: border-color 240ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* the wipe: each channel's own colour, sweeping in from the left */
[data-page="home"] #dukes-receptionist .crail__wipe {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
[data-page="home"] #dukes-receptionist .crail__link--phone .crail__wipe { background: #1d1d1b; }
[data-page="home"] #dukes-receptionist .crail__link--whatsapp .crail__wipe { background: #075e54; }
[data-page="home"] #dukes-receptionist .crail__link--email .crail__wipe { background: #16283d; }
[data-page="home"] #dukes-receptionist .crail__link--instagram .crail__wipe { background: linear-gradient(100deg, #7b2a86 0%, #a92f49 60%, #b8412f 100%); }

/* the gold-ringed brand logo */
[data-page="home"] #dukes-receptionist .crail__glyph { position: relative; z-index: 1; flex: 0 0 auto; }
[data-page="home"] #dukes-receptionist .crail__icon {
  width: 46px !important;
  height: 46px !important;
  padding: 11px;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  border: 1.5px solid rgba(197, 166, 106, 0.75);
  background: transparent !important;
  color: #17483c !important;
  box-sizing: border-box;
  transform: none !important;
  transition: color 240ms ease, border-color 240ms ease !important;
}
/* the two-line text */
[data-page="home"] #dukes-receptionist .rd-c-text { position: relative; z-index: 1; min-width: 0; }
[data-page="home"] #dukes-receptionist .rd-c-label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: #8a7a55;
}
[data-page="home"] #dukes-receptionist .rd-c-value {
  font-size: 1.02rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* the gold arrow, right side */
[data-page="home"] #dukes-receptionist .crail__link::after {
  right: 1.1rem;
  background: #171a20;
  opacity: 0.45;
  z-index: 1;
}

/* HOVER = the reference: wipe in, cream text, gold ring + arrow */
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] #dukes-receptionist .crail__link:hover,
  [data-page="home"] #dukes-receptionist .crail__link:focus-visible {
    background: #fbf8f2;   /* the wipe paints the colour; the base stays */
    border-color: transparent;
    transform: translateY(-2px);
  }
  [data-page="home"] #dukes-receptionist .crail__link:hover .crail__wipe,
  [data-page="home"] #dukes-receptionist .crail__link:focus-visible .crail__wipe { transform: scaleX(1); }
  [data-page="home"] #dukes-receptionist .crail__link:hover .crail__icon,
  [data-page="home"] #dukes-receptionist .crail__link:focus-visible .crail__icon {
    color: #fbf8f2 !important;
    border-color: rgba(227, 201, 143, 0.85);
  }
  [data-page="home"] #dukes-receptionist .crail__link:hover .rd-c-label,
  [data-page="home"] #dukes-receptionist .crail__link:focus-visible .rd-c-label { color: #e3c98f; }
  [data-page="home"] #dukes-receptionist .crail__link:hover .rd-c-value,
  [data-page="home"] #dukes-receptionist .crail__link:focus-visible .rd-c-value { color: #fbf8f2; }
  [data-page="home"] #dukes-receptionist .crail__link:hover::after,
  [data-page="home"] #dukes-receptionist .crail__link:focus-visible::after {
    opacity: 1;
    background: #e3c98f;
    transform: translate(2px, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] #dukes-receptionist .crail__wipe { transition: none; }
  [data-page="home"] #dukes-receptionist .crail__link { transition: none; transform: none !important; }
}

/* rev 17.1 - the stray left arrows, finally rooted: an older sheet sets
   left:0 on the link's ::after, over-constraining the box so the arrow
   pinned LEFT (outside the visual tile). left:auto restores the right
   anchor. Plus tighter metrics so long values fit without ellipsis. */
[data-page="home"] #dukes-receptionist .crail__link::after {
  left: auto !important;
  right: 1rem !important;
}
[data-page="home"] #dukes-receptionist .crail__link { padding: 1rem 2.3rem 1rem 1rem; gap: 12px; }
[data-page="home"] #dukes-receptionist .rd-c-value { font-size: 0.98rem; }
@media (min-width: 64em) and (max-width: 89.99em) {
  [data-page="home"] #dukes-receptionist .rd-c-value { font-size: 0.94rem; }
}

/* ======================================================================
 * REVISION 18 - 19 August 2026. Aarav: "get rid of these two buttons,
 * let the video come down, create more space between the text
 * vertically, and place it centre-left middle."
 * The wings rail is gone from the markup; the film now owns the plate's
 * full height, and the copy column breathes more, vertically centred
 * on the left.
 * ==================================================================== */
.hxo2--split .hxo2__plate {
  grid-template-rows: minmax(clamp(540px, 64vh, 760px), 1fr);
}
@media (max-height: 820px) and (min-width: 62em) {
  .hxo2--split .hxo2__plate { grid-template-rows: minmax(clamp(500px, 76vh, 640px), 1fr); }
}
/* the copy: centre-left, with more vertical air between every element */
.hxo2--split .hxo2__copy {
  justify-content: center;
  padding: clamp(2.5rem, 4vw, 5rem) clamp(2.25rem, 3.6vw, 4.5rem);
}
.hxo2--split .hxo2__eyebrow { margin-bottom: 1.4rem; }
.hxo2--split .hxo2__title { line-height: 1.06; }
.hxo2--split .hxo2__lede { margin-top: 1.9rem; line-height: 1.72; }
.hxo2--split .hxo2__actions { margin-top: 2.1rem; }
.hxo2--split .hxo2__rating { margin-top: 1.6rem; }

@media (max-width: 61.99em) {
  .hxo2--split .hxo2__plate { grid-template-rows: auto auto; }
  .hxo2--split .hxo2__cinema { min-height: 48svh; }
  .hxo2--split .hxo2__copy { padding: 1.9rem 1.4rem 2.4rem; }
}

/* ======================================================================
 * REVISION 18.1 - THE ICONS. Root cause: the base .crail__icon
 * (dukes.css:13730) is built for OUTLINE glyphs - fill:none,
 * stroke:currentColor, stroke-width:1.4 - but rev 17 put SOLID-FILL
 * brand logos in it. Every logo was being painted with a 1.4px outline
 * on top of its solid shape, which closed up WhatsApp's handset and
 * Instagram's aperture into blobs. Solid logos are fill-only.
 * ==================================================================== */
[data-page="home"] #dukes-receptionist .crail__icon,
[data-page="home"] #dukes-receptionist .crail__icon path {
  fill: currentColor !important;
  stroke: none !important;
  stroke-width: 0 !important;
}
/* a touch more presence: 24px glyph inside the 46px gold ring */
[data-page="home"] #dukes-receptionist .crail__icon { padding: 10px !important; }

/* rev 18.2 - the Instagram glyph's subpaths need even-odd winding to
   punch the camera frame and lens holes; without it the outer rounded
   square fills solid. Applied to all four for consistent rendering. */
[data-page="home"] #dukes-receptionist .crail__icon,
[data-page="home"] #dukes-receptionist .crail__icon path {
  fill-rule: evenodd !important;
  clip-rule: evenodd !important;
}

/* rev 18.3 - the paths were right; the SCALE was wrong. At a ~24px glyph
   the Instagram frame and the WhatsApp handset mud together. Bigger ring,
   bigger glyph, thinner ring stroke so the logo reads at a glance. */
[data-page="home"] #dukes-receptionist .crail__icon {
  width: 52px !important;
  height: 52px !important;
  padding: 12px !important;
  border-width: 1px !important;
}

/* rev 18.4 - the larger glyph pushed the Instagram handle into an
   ellipsis. Tighter gutters and a hair smaller value so all four
   channels print in full. */
[data-page="home"] #dukes-receptionist .crail__link { padding: 1rem 1.9rem 1rem 0.9rem; gap: 10px; }
[data-page="home"] #dukes-receptionist .crail__link::after { right: 0.75rem !important; }
[data-page="home"] #dukes-receptionist .rd-c-value { font-size: 0.95rem; }
[data-page="home"] #dukes-receptionist .rd-c-label { font-size: 0.72rem; }

/* ======================================================================
 * REVISION 19 - 19 August 2026. The section 06 contact ledger gets the
 * same treatment as the section 01 tiles: real brand logos in gold
 * rings, and the brand-colour wipe sweeping in from the left on hover.
 * ==================================================================== */
.hx27-row {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 0.85rem 2.4rem 0.85rem 0.9rem;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(23, 26, 32, 0.1);
  transition: border-color 240ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hx27-row__wipe {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.hx27-row--phone .hx27-row__wipe { background: #1d1d1b; }
.hx27-row--whatsapp .hx27-row__wipe { background: #075e54; }
.hx27-row--email .hx27-row__wipe { background: #16283d; }
.hx27-row--instagram .hx27-row__wipe {
  background: linear-gradient(100deg, #f9a03f 0%, #e4405f 45%, #c13584 72%, #5b51d8 100%);
}
.hx27-row__glyph {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(197, 166, 106, 0.75);
  border-radius: 50%;
  color: #17483c;
  transition: color 240ms ease, border-color 240ms ease;
}
.hx27-row__glyph svg { width: 23px; height: 23px; fill: currentColor; stroke: none; display: block; }
.hx27-row__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.hx27-row__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a7a55;
  transition: color 240ms ease;
}
.hx27-row__value {
  font-size: 1rem;
  font-weight: 750;
  color: #171a20;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 240ms ease;
}
/* the arrow, right edge */
.hx27-row::after {
  content: "";
  position: absolute;
  left: auto;
  right: 0.85rem;
  top: 50%;
  z-index: 1;
  width: 16px;
  height: 16px;
  transform: translate(-4px, -50%);
  opacity: 0.45;
  background: #171a20;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity 220ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .hx27-row:hover,
  .hx27-row:focus-visible {
    background: transparent;
    border-color: transparent;
    transform: translateY(-2px);
  }
  .hx27-row:hover .hx27-row__wipe,
  .hx27-row:focus-visible .hx27-row__wipe { transform: scaleX(1); }
  .hx27-row:hover .hx27-row__glyph,
  .hx27-row:focus-visible .hx27-row__glyph { color: #fbf8f2; border-color: rgba(227, 201, 143, 0.85); }
  .hx27-row:hover .hx27-row__label,
  .hx27-row:focus-visible .hx27-row__label { color: #e3c98f; }
  .hx27-row:hover .hx27-row__value,
  .hx27-row:focus-visible .hx27-row__value { color: #fbf8f2; }
  .hx27-row:hover::after,
  .hx27-row:focus-visible::after { opacity: 1; background: #e3c98f; transform: translate(2px, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hx27-row, .hx27-row__wipe, .hx27-row::after { transition: none !important; }
  .hx27-row { transform: none !important; }
}

/* ======================================================================
 * REVISION 20 - 19 August 2026. The hero copy centres and the title
 * becomes the page's true display moment: everything in the green
 * column centre-aligned on one axis, the headline a full step larger
 * with tight leading, the lede, button and Google badge centred in a
 * measured column beneath it.
 * ==================================================================== */
.hxo2--split .hxo2__copy {
  align-items: center;
  text-align: center;
}
.hxo2--split .hxo2__eyebrow { margin-bottom: 1.5rem; letter-spacing: 0.08em; }
.hxo2--split .hxo2__title {
  max-width: 12ch;
  margin-inline: auto;
  font-size: clamp(3.1rem, 4.6vw, 5.6rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
}
.hxo2--split .hxo2__lede {
  max-width: 34ch;
  margin-inline: auto;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  text-align: center;
}
.hxo2--split .hxo2__actions { justify-content: center; }
.hxo2--split .hxo2__rating { margin-inline: auto; }
@media (max-width: 61.99em) {
  .hxo2--split .hxo2__title { font-size: clamp(2.6rem, 9vw, 3.4rem); }
}

/* ======================================================================
 * REVISION 21 - 19 August 2026. THE LAPTOP SCALE PASS. On 1280-1500px
 * screens (MacBooks) the page read oversized: display type, band
 * padding and chapter air all step down one notch in that window so
 * the composition stays clean without touching the big-monitor look.
 * ==================================================================== */
@media (min-width: 62em) and (max-width: 95.99em) {
  [data-page="home"] { --hx-band-y: clamp(30px, 3.4vw, 48px); }
  [data-page="home"] .hx-h2,
  [data-page="home"] .band__head .h-section { font-size: clamp(1.9rem, 2.5vw, 2.7rem) !important; }
  [data-page="home"] .band__head { padding-block: clamp(12px, 1.6vw, 20px); }
  [data-page="home"] .band__head .lede { font-size: 1rem !important; }
  [data-page="home"] .chapter { margin-bottom: clamp(12px, 1.6vw, 20px) !important; }
  .hxo2--split .hxo2__title { font-size: clamp(2.7rem, 4vw, 3.9rem); }
  .hxo2--split .hxo2__lede { font-size: 1.05rem; }
  .hx29__title { font-size: clamp(2.2rem, 3vw, 3.1rem) !important; }
  .hx29__quote blockquote p { font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
  [data-page="home"] .rd-intro__title { font-size: clamp(2rem, 2.6vw, 2.8rem) !important; }
  [data-page="home"] #dukes-receptionist .crail__link { min-height: 76px !important; }
  [data-page="home"] .hx27-row { min-height: 64px; }
}
/* the section pill: the live label must always read on the gold cursor */
.hxnav [data-hxnav-link].is-on,
.hxnav [data-hxnav-link].is-on i { color: #171a20 !important; }

/* rev 21.1 - the chat size fix needs the homepage's own specificity:
   home-2026.css scopes .dchat under [data-page="home"], which outranked
   the component-level compact rule. Matched and settled here. */
[data-page="home"] .dchat {
  width: min(23.5rem, calc(100vw - 2rem)) !important;
  height: min(33rem, calc(100vh - 5.5rem)) !important;
}
@media (max-height: 900px) {
  [data-page="home"] .dchat { height: min(29.5rem, calc(100vh - 4.5rem)) !important; }
}
@media (max-width: 47.99em) {
  [data-page="home"] .dchat {
    width: 100% !important;
    height: min(78vh, 34rem) !important;
    border-radius: 20px 20px 0 0;
  }
}

/* rev 21.2 - the phone hero ran ~1.3 screens tall; film and copy tighten
   so the plate lands close to one viewport on a phone. */
@media (max-width: 61.99em) {
  .hxo2--split .hxo2__cinema { min-height: 38svh; }
  .hxo2--split .hxo2__copy { padding: 1.5rem 1.25rem 1.9rem; }
  .hxo2--split .hxo2__eyebrow { margin-bottom: 0.9rem; }
  .hxo2--split .hxo2__lede { margin-top: 1.2rem; }
  .hxo2--split .hxo2__actions { margin-top: 1.4rem; }
  .hxo2--split .hxo2__rating { margin-top: 1.1rem; }
}

/* rev 21.3 - the smallest phones (320-360) get one more notch down so
   the hero lands nearer a single screen. */
@media (max-width: 22.49em) {
  .hxo2--split .hxo2__title { font-size: 2.25rem; }
  .hxo2--split .hxo2__cinema { min-height: 32svh; }
}

/* ======================================================================
 * REVISION 22 - 19 August 2026. THE LOGO RINGS, CLEANED. Two older
 * hover layers (rev 10.3 dock hovers, rev 13 row hovers) were still
 * painting their own fills behind the glyphs - on Instagram a radial
 * gradient showed through as a pink circle around the logo. One spec
 * now: transparent glyph circle, gold ring, ink logo, and on hover the
 * wipe carries the colour while the logo flips cream in a gold ring.
 * ==================================================================== */
[data-page="home"] #dukes-receptionist .crail__link .crail__icon,
[data-page="home"] .hx27-row .hx27-row__glyph {
  background: transparent !important;
  background-image: none !important;
}
@media (hover: hover) and (pointer: fine) {
  /* the old per-channel row fills die; the wipe is the only paint */
  [data-page="home"] .hx27-row--phone:hover, [data-page="home"] .hx27-row--phone:focus-visible,
  [data-page="home"] .hx27-row--whatsapp:hover, [data-page="home"] .hx27-row--whatsapp:focus-visible,
  [data-page="home"] .hx27-row--email:hover, [data-page="home"] .hx27-row--email:focus-visible,
  [data-page="home"] .hx27-row--instagram:hover, [data-page="home"] .hx27-row--instagram:focus-visible {
    background: #fbf8f2 !important;
    background-image: none !important;
    border-color: transparent !important;
    color: inherit !important;
  }
  /* the old per-channel icon fills die too, both surfaces */
  [data-page="home"] #dukes-receptionist .crail__link:hover .crail__icon,
  [data-page="home"] #dukes-receptionist .crail__link:focus-visible .crail__icon {
    background: transparent !important;
    background-image: none !important;
    border-color: rgba(227, 201, 143, 0.85) !important;
    color: #fbf8f2 !important;
  }
  [data-page="home"] .hx27-row:hover .hx27-row__glyph,
  [data-page="home"] .hx27-row:focus-visible .hx27-row__glyph {
    background: transparent !important;
    background-image: none !important;
    border-color: rgba(227, 201, 143, 0.85) !important;
    color: #fbf8f2 !important;
  }
  [data-page="home"] .hx27-row:hover .hx27-row__label { color: #e3c98f !important; }
  [data-page="home"] .hx27-row:hover .hx27-row__value { color: #fbf8f2 !important; }
}

/* ======================================================================
 * REVISION 22.1 - clean glyph pass + the wipe sliver.
 *   - phone and email become fine-line stroke icons (the reference's
 *     weight); WhatsApp and Instagram keep their official marks, drawn
 *     lighter inside slightly larger rings
 *   - the email row showed a navy sliver at rest: the wipe now also
 *     fades, so no transform quirk can ever leave a peek of it
 * ==================================================================== */
[data-page="home"] .ic-line {
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-page="home"] .hx27-row__glyph svg,
[data-page="home"] #dukes-receptionist .crail__icon { width: 21px !important; height: 21px !important; }
[data-page="home"] .hx27-row__glyph svg.ic-fill,
[data-page="home"] #dukes-receptionist .crail__icon.ic-fill { width: 20px !important; height: 20px !important; }
[data-page="home"] .hx27-row__glyph svg * { }
[data-page="home"] .hx27-row__glyph { width: 48px; height: 48px; }
[data-page="home"] .hx27-row { grid-template-columns: 48px minmax(0, 1fr); }
[data-page="home"] #dukes-receptionist .crail__icon { padding: 0 !important; }
[data-page="home"] #dukes-receptionist .crail__glyph {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(197, 166, 106, 0.75);
  border-radius: 50%;
  color: #17483c;
  transition: color 240ms ease, border-color 240ms ease;
}
[data-page="home"] #dukes-receptionist .crail__icon { border: 0 !important; }
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] #dukes-receptionist .crail__link:hover .crail__glyph,
  [data-page="home"] #dukes-receptionist .crail__link:focus-visible .crail__glyph {
    color: #fbf8f2;
    border-color: rgba(227, 201, 143, 0.85);
  }
  [data-page="home"] #dukes-receptionist .crail__link:hover .crail__icon,
  [data-page="home"] #dukes-receptionist .crail__link:focus-visible .crail__icon { color: inherit !important; }
}
/* the wipe can never peek at rest */
.hx27-row__wipe,
[data-page="home"] #dukes-receptionist .crail__wipe {
  opacity: 0;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .hx27-row:hover .hx27-row__wipe,
  .hx27-row:focus-visible .hx27-row__wipe,
  [data-page="home"] #dukes-receptionist .crail__link:hover .crail__wipe,
  [data-page="home"] #dukes-receptionist .crail__link:focus-visible .crail__wipe { opacity: 1; }
}

/* ======================================================================
 * REVISION 23 - 19 August 2026. THE ICON SPEC, FINAL. One authority for
 * every contact glyph on this page: line icons stroke 1.8 and NOTHING
 * fills them; the WhatsApp official mark is the one solid. This ends
 * the fill/stroke fights between rev 17, 19 and 22 for good.
 * ==================================================================== */
[data-page="home"] .ic2-line,
[data-page="home"] .ic2-line * {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
[data-page="home"] .ic2-solid,
[data-page="home"] .ic2-solid * {
  fill: currentColor !important;
  stroke: none !important;
}
[data-page="home"] #dukes-receptionist .crail__icon.ic2-line,
[data-page="home"] #dukes-receptionist .crail__icon.ic2-solid { width: 22px !important; height: 22px !important; }
[data-page="home"] .hx27-row__glyph svg.ic2-line,
[data-page="home"] .hx27-row__glyph svg.ic2-solid { width: 22px !important; height: 22px !important; }

/* the halfway underline, extended: left-aligned heads carry a full rule
   fading out to the right; centred heads get a longer symmetric fade */
[data-page="home"] .hx-h2::after,
[data-page="home"] .band__head .h-section::after {
  width: min(100%, 22rem) !important;
  background: linear-gradient(90deg, rgba(197, 166, 106, 0), #c5a66a 18%, #c5a66a 82%, rgba(197, 166, 106, 0)) !important;
}
[data-page="home"] .hx-band--clay .hx-h2::after,
[data-page="home"] .hx30 .h-section::after,
[data-page="home"] .rd-intro .h-section::after {
  margin-inline: 0 !important;
  width: 100% !important;
  background: linear-gradient(90deg, #c5a66a 0%, #c5a66a 55%, rgba(197, 166, 106, 0) 100%) !important;
}

/* the ported About footer: its rail is the shared compact crail, already
   styled in dukes.css; only the tip needs to stay a tooltip here and not
   inherit the section-01 inline-tile conversion (that override is scoped
   to #dukes-receptionist, so the footer is untouched by construction). */

/* rev 23.1 - the reception's own icon rule outranked the icon spec on
   fill; matched at ID specificity so the line icons actually stroke. */
[data-page="home"] #dukes-receptionist .crail__icon.ic2-line,
[data-page="home"] #dukes-receptionist .crail__icon.ic2-line * {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
[data-page="home"] #dukes-receptionist .crail__icon.ic2-solid,
[data-page="home"] #dukes-receptionist .crail__icon.ic2-solid * {
  fill: currentColor !important;
  stroke: none !important;
}

/* rev 24 - the consent microcopy under the Send button */
[data-page="home"] .dchat__consent {
  margin: 0.6rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4f555b;
}
[data-page="home"] .dchat__consent a { color: #7b2430; font-weight: 750; }

/* rev 24.1 - the footer circles: the ported About footer painted a
   SQUARE fill layer inside the round buttons on hover (the green box).
   The fill layer dies; the circle itself takes the channel's colour. */
[data-page="home"] .site-foot .crail__fill { display: none !important; }
[data-page="home"] .site-foot .crail__link {
  border-radius: 50% !important;
  overflow: hidden;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-page="home"] .site-foot .crail__icon,
[data-page="home"] .site-foot .crail__icon--brand { background: transparent !important; }
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .site-foot .crail__link:hover,
  [data-page="home"] .site-foot .crail__link:focus-visible { transform: translateY(-2px); }
  [data-page="home"] .site-foot .crail__link--phone:hover,
  [data-page="home"] .site-foot .crail__link--phone:focus-visible { background: #17483c !important; border-color: #17483c !important; color: #fffdf8 !important; }
  [data-page="home"] .site-foot .crail__link--whatsapp:hover,
  [data-page="home"] .site-foot .crail__link--whatsapp:focus-visible { background: #25d366 !important; border-color: #25d366 !important; color: #ffffff !important; }
  [data-page="home"] .site-foot .crail__link--email:hover,
  [data-page="home"] .site-foot .crail__link--email:focus-visible { background: #7b2430 !important; border-color: #7b2430 !important; color: #fff7ed !important; }
  [data-page="home"] .site-foot .crail__link--instagram:hover,
  [data-page="home"] .site-foot .crail__link--instagram:focus-visible {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 8%, #fd5949 45%, #d6249f 60%, #285aeb 90%) !important;
    border-color: #d6249f !important; color: #ffffff !important;
  }
  [data-page="home"] .site-foot .crail__link:hover .crail__icon,
  [data-page="home"] .site-foot .crail__link:hover .crail__icon--brand { color: inherit !important; }
}


/* rev 25.1 - the footer's phone and email are STROKE drawings with no
   fill attributes; a hover rule was filling them into solid blobs. Line
   icons are pinned to line rendering in BOTH states; the brand glyphs
   keep their fills. */
[data-page="home"] .site-foot .crail__icon:not(.crail__icon--brand) {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
[data-page="home"] .site-foot .crail__icon--brand {
  fill: currentColor !important;
  stroke: none !important;
}

/* ======================================================================
 * REVISION 26 - the contact logos are now the FOOTER's exact drawings on
 * every surface (Aarav: "the bottom logos are fine, use them here too"),
 * and the review wall gets its alignment pass: the head centres on the
 * plate with real air below it, and the scrolling columns fade at their
 * edges instead of clipping cards raw.
 * ==================================================================== */
[data-page="home"] .rw2__head {
  width: min(100%, 720px);
  margin-inline: auto !important;
  text-align: center !important;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem) !important;
}
[data-page="home"] .rw2__head .rw2__title,
[data-page="home"] .rw2__head .rw2__score,
[data-page="home"] .rw2__head .rw2__acts { justify-content: center; text-align: center; margin-inline: auto; }
[data-page="home"] .rw2__stage,
[data-page="home"] .rw2__window {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
[data-page="home"] .rw2__stage { gap: clamp(16px, 1.8vw, 26px) !important; }
[data-page="home"] .rw2__col { gap: clamp(14px, 1.6vw, 22px) !important; }

/* rev 27.2 - the homepage's scoped chat height follows the site-wide
   rebalance (the [data-page] rule outranked the html-body one). */
[data-page="home"] .dchat { height: min(35rem, calc(100vh - 5rem)) !important; }
@media (max-height: 900px) {
  [data-page="home"] .dchat { height: min(31.5rem, calc(100vh - 4.5rem)) !important; }
}

/* ==================================================================
   rev 32 - 20 Aug. Aarav: the two white route pills should wear a
   colour that represents them. Same grammar as the contact tiles:
   a faint brand tint at rest, and the brand colour wipes in from the
   left on hover with the text flipping to cream. The phone wears the
   near-ink the phone tile wears; WhatsApp wears its deep green.
   Targeted by href so the markup stays untouched.
   ================================================================== */
[data-page="home"] #dukes-receptionist .rd-route__cta--outline {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
[data-page="home"] #dukes-receptionist .rd-route__cta--outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rt-brand, #17483c);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-page="home"] #dukes-receptionist .rd-route__cta--outline[href^="tel:"] {
  --rt-brand: #171a20;
  color: #171a20;
  border-color: rgba(23, 26, 32, 0.42);
  background: rgba(23, 26, 32, 0.05);
}
[data-page="home"] #dukes-receptionist .rd-route__cta--outline[href*="wa.me"] {
  --rt-brand: #075e54;
  color: #075e54;
  border-color: rgba(7, 94, 84, 0.44);
  background: rgba(7, 94, 84, 0.06);
}
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] #dukes-receptionist .rd-route__cta--outline:hover { color: #fbf8f2; transform: translateY(-2px); }
  [data-page="home"] #dukes-receptionist .rd-route__cta--outline:hover::before { transform: scaleX(1); }
  [data-page="home"] #dukes-receptionist .rd-route__cta--outline[href^="tel:"]:hover { background: rgba(23, 26, 32, 0.05); border-color: #171a20; }
  [data-page="home"] #dukes-receptionist .rd-route__cta--outline[href*="wa.me"]:hover { background: rgba(7, 94, 84, 0.06); border-color: #075e54; }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] #dukes-receptionist .rd-route__cta--outline::before { transition: none; }
}

/* ==================================================================
   rev 33 - 20 Aug. Aarav: get rid of the logos on the contact strip.
   The labelled crail tiles drop their ringed glyphs entirely - label,
   value and arrow carry the tile. The footer keeps its icons: the
   footer never changes.
   ================================================================== */
[data-page="home"] .crail--labelled .crail__glyph { display: none !important; }


/* ==================================================================
   rev 34 - 20 Aug, from Aarav's phone. Two hxnav defects:
   1. The active label was INVISIBLE: the cursor lived outside the
      list, and the list's backdrop-filter makes it a stacking context,
      so the cursor painted over every label. It now lives inside the
      list (li display:contents), under the links' z-index 1.
   2. Short landscape phones: the floating pill ate the reading line -
      it hides below 480px of height.
   ================================================================== */
.hxnav__curli { display: contents; }
@media (max-height: 480px) {
  .hxnav { display: none !important; }
}

/* ==================================================================
   rev 35 - 20 Aug, from Aarav's phone. The clay and trust band splits
   were forced to two columns with NO mobile guard, overriding the
   stacking rule in home-2026.css (this file loads later). On phones
   the text column got clipped off the right edge of the band. The
   splits now stack below 62em like every other hx-split.
   ================================================================== */
@media (max-width: 61.99em) {
  [data-page="home"] .hx-band--clay .hx-split,
  [data-page="home"] .hx-band--trust .hx-split {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(16px, 3vw, 26px);
  }
}

/* rev 36 - 20 Aug, Aarav: two lines under "You deal with Amrit"; the
   top one (the gold rule) should be shorter, centred. The lower line is
   the Google plate's own top edge and stays as the plate's border. */
[data-page="home"] .hx29__rule {
  width: min(46%, 11rem);
  margin-inline: auto;
}

/* rev 36.1 - the Amrit band's pair of lines: the TOP one (the h2's
   site underline) is the short centred accent, the band's own rule
   below stays the longer hairline. Both centred. */
[data-page="home"] .hx29__title.hx-h2::after {
  width: 5rem !important;
  margin-inline: auto !important;
}

/* ==================================================================
   rev 37 - 20 Aug. Aarav: "instead of generic white boxes use a
   different colour that goes with the page." The reception's two
   surfaces leave premium white for the page's warm sand family:
   the intro card and the journey cards sit on sand with forest text,
   the open card's checklist plate is a lighter inset, and the open
   card carries a forest left edge so the active journey reads at a
   glance. White now belongs to the buttons alone.
   ================================================================== */
[data-page="home"] #dukes-receptionist .rd-intro {
  background: #f1e7d3 !important;
  border: 1px solid rgba(23, 72, 60, 0.16) !important;
}
[data-page="home"] #dukes-receptionist .rd-route__disclosure {
  background: #f1e7d3 !important;
  border: 1px solid rgba(23, 26, 32, 0.1) !important;
  transition: background-color 220ms ease, border-color 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] #dukes-receptionist .rd-route__disclosure:not([open]):hover {
    background: #ecdfc6 !important;
    border-color: rgba(23, 72, 60, 0.28) !important;
  }
}
[data-page="home"] #dukes-receptionist .rd-route__disclosure[open] {
  /* 20 Aug, Aarav: no green edge - the open card reads by its lighter
     ground and neutral hairline alone */
  background: #f6efe0 !important;
  border-color: rgba(23, 26, 32, 0.16) !important;
}
[data-page="home"] #dukes-receptionist .rd-route__checklist {
  background: #fdf8ec !important;
  border: 1px solid rgba(23, 26, 32, 0.08) !important;
}
[data-page="home"] #dukes-receptionist .rd-route__label { color: #17483c; }

/* rev 38 - 20 Aug, Aarav: the route-card buttons are too big. They
   stop stretching the card's full width and fit their label, one
   notch tighter, keeping the 44px tap floor. Route cards only - every
   other chip on the page is untouched. */
[data-page="home"] .hx-route__cta .hx-chip {
  width: auto !important;
  min-height: 44px !important;
  padding: 0.5rem 1.15rem;
  font-size: 0.875rem;
}

/* ==================================================================
   rev 39 - 20 Aug, Aarav's four:
   1 review wall gains quiet colour (three tints cycling, coloured top
     hairline per card) while staying professional
   2 route-card buttons sit centred
   3 "You deal with Amrit." breathes horizontally (the hx29__top cap
     forced the wrap at 332px)
   4 memberships & portals cards grow and their logos fill the plate
   ================================================================== */

/* -- 2. route buttons centred -- */
[data-page="home"] .hx-route__cta {
  display: flex;
  justify-content: center;
}

/* -- 3. the Amrit head breathes -- */
[data-page="home"] .hx29__top { max-width: 36rem !important; }

/* -- 4. memberships & portals: bigger plates, logos fill them -- */
[data-page="home"] .creds__item {
  /* the item is an invisible wrapper - ONE plate only, the card */
  min-width: 0;
  padding: 0;
  background: none;
}
[data-page="home"] .creds__mark { min-height: 96px; }
[data-page="home"] .creds__logo {
  max-height: 92px !important;
  max-width: min(85%, 240px) !important;
}


/* ==================================================================
   rev 41 - 20 Aug, Aarav on the routes band and the Amrit lines:
   1 the split swaps: text on the LEFT, images on the RIGHT, with a
     wider channel between them
   2 the Lettings/Management/Sales ledger stops looking incidental:
     serif heads a step up, roomier rows, stronger hairlines
   3 the Amrit band's bottom hairline lengthens to match the heading
   (the review tints and their top lines are withdrawn above)
   ================================================================== */
@media (min-width: 62em) {
  [data-page="home"] .hx-band--clay .hx-split > .hx-mosaic { order: 2; }
  [data-page="home"] .hx-band--clay .hx-split {
    gap: clamp(4rem, 7vw, 9rem);
  }
}
[data-page="home"] .hx-band--clay .hx-facts > div {
  padding-block: 1.15rem;
  border-top: 1px solid rgba(23, 26, 32, 0.16);
}
[data-page="home"] .hx-band--clay .hx-facts > div:last-child {
  border-bottom: 1px solid rgba(23, 26, 32, 0.16);
}
[data-page="home"] .hx-band--clay .hx-facts dt {
  font-size: 1.3rem;
  font-weight: 400;
}
[data-page="home"] .hx-band--clay .hx-facts dd {
  font-size: 1rem;
  line-height: 1.6;
}

[data-page="home"] .hx29__rule { width: min(92%, 30rem) !important; }


/* rev 41.1 - Aarav: the plates lose the generic coloured top line, the
   legend pills lose their dots, and the card gives its space to the
   logo (tighter padding, taller mark). */
[data-page="home"] .creds__card {
  border-top: 1px solid rgba(16, 35, 58, 0.14) !important;
  padding: 1rem 1.1rem !important;
  min-height: 160px;
}
[data-page="home"] .hx30__pill i { display: none !important; }

/* rev 41.2 - the coloured top edge goes on EVERY plate (the nth-child
   scheme tints outranked the neutral rule), and the item wrapper is
   forced invisible. */
[data-page="home"] .creds__item:nth-child(n) .creds__card {
  border-top-color: rgba(16, 35, 58, 0.14) !important;
}
[data-page="home"] .creds__item:nth-child(n) {
  min-width: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* rev 42 - 20 Aug, Aarav: the 02 band's ground reads blank against the
   warm photography - it joins the page's warm paper family; and
   chapters 01/02/03 sit too close - the band gains real air on both
   sides. */
[data-page="home"] .hx-band--clay .hx-frame {
  background: #f6efdf !important;
  border-color: rgba(23, 26, 32, 0.1) !important;
}
[data-page="home"] .hx-band--clay {
  margin-top: clamp(4.5rem, 7vw, 7.5rem) !important;
  margin-bottom: clamp(3rem, 5vw, 5rem) !important;
}


/* ==================================================================
   rev 43 - 20 Aug, Aarav's triptych for the 02 band: two images left
   of the text, the text in the middle, one LANDSCAPE image right; the
   underline goes; the three services become linked rows with a cue
   arrow and a hover that moves.
   ================================================================== */
[data-page="home"] .hx-band--clay .hx-h2--bare::after { display: none !important; }

@media (min-width: 62em) {
  [data-page="home"] .hx-trip {
    display: grid !important;
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 0.66fr) !important;
    gap: clamp(2rem, 3.5vw, 4rem) !important;
    align-items: center !important;
  }
  [data-page="home"] .hx-trip > .hx-trip__left { order: 0; }
  [data-page="home"] .hx-trip > .hx-trip__mid { order: 1; }
  [data-page="home"] .hx-trip > .hx-trip__right { order: 2; }
}
[data-page="home"] .hx-trip__left {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  align-content: center;
}
[data-page="home"] .hx-trip__right {
  margin: 0;
  align-self: center;
}
@media (max-width: 61.99em) {
  [data-page="home"] .hx-trip__left {
    grid-template-columns: 1fr 1fr;
  }
  [data-page="home"] .hx-trip__right { margin-top: 1rem; }
}

/* the three routes as linked rows */
[data-page="home"] .hx-factlinks {
  display: grid;
  margin: 1.4rem 0;
  border-top: 1px solid rgba(23, 26, 32, 0.16);
}
[data-page="home"] .hx-factlink {
  display: grid;
  grid-template-columns: minmax(8.5rem, 0.55fr) minmax(0, 1.45fr) auto;
  gap: 0.35rem 1.25rem;
  align-items: center;
  padding: 1.05rem 0.35rem;
  border-bottom: 1px solid rgba(23, 26, 32, 0.16);
  text-decoration: none;
  color: inherit;
  transition: background-color 200ms ease, padding-left 200ms ease;
}
[data-page="home"] .hx-factlink__head {
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 1.3rem;
  color: #171a20;
}
[data-page="home"] .hx-factlink__note {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #4f555b;
}
[data-page="home"] .hx-factlink__cue {
  font-size: 1.1rem;
  color: #7b2430;
  transition: transform 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .hx-factlink:hover {
    background: rgba(197, 166, 106, 0.12);
    padding-left: 0.8rem;
  }
  [data-page="home"] .hx-factlink:hover .hx-factlink__cue { transform: translateX(4px); }
}
[data-page="home"] .hx-factlink:focus-visible {
  outline: 3px solid #7b2430;
  outline-offset: 2px;
}
@media (max-width: 47.99em) {
  [data-page="home"] .hx-factlink { grid-template-columns: minmax(0, 1fr) auto; }
  [data-page="home"] .hx-factlink__note { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .hx-factlink,
  [data-page="home"] .hx-factlink__cue { transition: none; }
}

/* rev 44 - 20 Aug, Aarav: wasted space left and right of the reception.
   The section's 1400px cap opens to near the band's width, the intro
   card and the journeys spread further apart, and the contact tiles
   row rides the same wider measure. */
[data-page="home"] #dukes-receptionist.reception {
  max-width: min(96%, 1720px) !important;
}
@media (min-width: 62em) {
  [data-page="home"] .reception .reception__inner {
    column-gap: clamp(3.5rem, 6vw, 7.5rem) !important;
  }
}

/* rev 44.1 - the inner kept a fixed 1240px width with 200px side
   margins; it now fills the widened section. */
[data-page="home"] #dukes-receptionist .reception__inner {
  width: auto !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

/* ==================================================================
   rev 45 - 20 Aug, Aarav on the triptych: the door image is meant to
   be TALLER (it now stretches the full column height), the text and
   images separate further and use more of the screen, and the mid
   column re-lays: lede on its own measure, the ledger, and "More
   about Dukes" seated right on the closing line.
   ================================================================== */
@media (min-width: 62em) {
  [data-page="home"] .hx-trip {
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.12fr) minmax(0, 0.82fr) !important;
    gap: clamp(3rem, 5.5vw, 7rem) !important;
    align-items: stretch !important;
  }
  [data-page="home"] .hx-trip__right {
    aspect-ratio: auto !important;
    align-self: stretch;
    height: 100%;
  }
  [data-page="home"] .hx-trip__right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  [data-page="home"] .hx-trip__left { align-content: stretch; }
  [data-page="home"] .hx-trip__left .hx-media:first-child { --hx-media-ratio: 4 / 3; }
}
[data-page="home"] .hx-band--clay .hx-frame {
  padding-inline: clamp(1.5rem, 2.2vw, 2.5rem) !important;
}
[data-page="home"] .hx-trip__mid {
  display: flex;
  flex-direction: column;
}
[data-page="home"] .hx-trip__mid .hx-lede { max-width: 46ch; }
[data-page="home"] .hx-trip__mid .hx-factlinks { flex: 1 1 auto; align-content: center; }
/* rev 46 - 20 Aug, Aarav: "More about Dukes" was hugging the right edge;
   centred instead, and pinned to the column's bottom edge (margin-top:auto
   against the flex column) rather than just trailing the factlinks list. */
[data-page="home"] .hx-trip__mid .hx-textlink {
  align-self: center;
  margin-top: auto;
  margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
  padding-top: 1.2rem;
  font-size: 1rem;
}

/* ==================================================================
   rev 46 - 20 Aug, Aarav on the portals band: the enlarged logos were
   overlapping the captions - the captions GO, and each plate is told
   apart by its own quiet tint instead (green and pink for the
   protections, distinct colours for the rest). The gold underline
   under "Where a property is seen" goes too.
   ================================================================== */
[data-page="home"] .hx30 .h-section::after { display: none !important; }
[data-page="home"] .creds__kind { display: none !important; }
[data-page="home"] .creds__card { min-height: 150px; padding: 1.1rem 1.2rem !important; }
[data-page="home"] .creds__mark { min-height: 100px; }

/* ==================================================================
   rev 49 - 20 Aug, Aarav: the logo plates don't read premium. The
   pastel tints go. The rail takes the luxe press-bar grammar instead:
   one ivory surface for every plate, fine hairline, house 22px radius,
   soft floated shadow, logos at a restrained size in monochrome that
   takes its full colour on hover. Restraint is the premium.
   ================================================================== */
[data-page="home"] .creds__item:nth-child(n) .creds__card.creds__card {
  background: #fbf8f2 !important;
  border: 1px solid rgba(23, 26, 32, 0.14) !important;
  border-top-color: rgba(23, 26, 32, 0.14) !important;
  border-radius: 22px !important;
  box-shadow: 0 22px 44px -32px rgba(13, 29, 49, 0.5);
  min-height: 140px;
  padding: 1.2rem 1.6rem !important;
}
[data-page="home"] .creds__item:nth-child(n) .creds__logo {
  max-height: 60px !important;
  max-width: min(72%, 190px) !important;
  /* 20 Aug, Aarav: the logos keep their real brand colours - the
     premium comes from the uniform ivory plate, not from muting them */
  filter: none;
  transition: transform 260ms ease;
}
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .creds__card:hover .creds__logo {
    transform: scale(1.04);
  }
  [data-page="home"] .creds__card:hover {
    border-color: rgba(197, 166, 106, 0.55) !important;
  }
  [data-page="home"] .creds__card {
    transition: border-color 260ms ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .creds__item:nth-child(n) .creds__logo { transition: none; }
}

/* ==================================================================
   rev 51 - 20 Aug, Aarav: the contact ledger was a bright cream slab
   on the navy contact band - it read as a cut-out. It now belongs to
   the band: a lifted navy panel with a gold hairline, gold kicker,
   warm muted labels and cream values, matching the two action panels
   beside it. The brand wipes stay, tuned for a dark ground.
   ================================================================== */
[data-page="home"] .hx27__ledger {
  background: #12263f !important;
  border: 1px solid rgba(197, 166, 106, 0.28) !important;
  box-shadow: 0 30px 70px -46px rgba(3, 10, 20, 0.9);
}
[data-page="home"] .hx27__kicker { color: #c5a66a !important; }
[data-page="home"] .hx27-row { border-color: rgba(244, 238, 227, 0.14) !important; }
[data-page="home"] .hx27-row__label { color: rgba(244, 238, 227, 0.62) !important; }
[data-page="home"] .hx27-row__value { color: #f4eee3 !important; }
[data-page="home"] .hx27-row .hx27-row__glyph {
  color: #e3c98f !important;
  border-color: rgba(227, 201, 143, 0.45) !important;
}
[data-page="home"] .hx27-row::after { color: rgba(244, 238, 227, 0.55) !important; }
[data-page="home"] .hx27__office { border-top-color: rgba(244, 238, 227, 0.16) !important; }
[data-page="home"] .hx27__office-label { color: #c5a66a !important; }
[data-page="home"] .hx27__office-address { color: rgba(244, 238, 227, 0.72) !important; }
/* the phone wipe needs to read against navy, not vanish into it */
[data-page="home"] .hx27-row--phone .hx27-row__wipe { background: #2b3440 !important; }

/* ==================================================================
   rev 52 - 20 Aug, Aarav on the 02 band:
   1 the "Slough and the surrounding area" kicker centres over the
     heading instead of hanging off its left edge
   2 the two left images sync with the tall right image: they split
     the same column height exactly, same radius, same crop discipline
   3 the three route cards at the bottom get real separation
   ================================================================== */
[data-page="home"] .hx-trip__mid .hx-kicker {
  text-align: center;
  margin-inline: auto;
}
@media (min-width: 62em) {
  [data-page="home"] .hx-trip__left {
    grid-template-rows: 1fr 1fr;
    gap: clamp(1rem, 1.8vw, 1.6rem);
    align-content: stretch;
  }
  [data-page="home"] .hx-trip__left .hx-media {
    aspect-ratio: auto !important;
    height: 100%;
    margin: 0;
  }
  [data-page="home"] .hx-trip__left .hx-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
[data-page="home"] .hx-band--clay .hx-routes {
  gap: clamp(30px, 3.4vw, 56px) !important;
  margin-top: clamp(2.25rem, 4vw, 3.5rem) !important;
}

/* ==================================================================
   rev 53 - 20 Aug, Aarav:
   1 the logos sit dead centre of their plate (the hidden caption row
     and its gap were pushing them 8px low)
   2 the 02 band's text sits in the TRUE middle: the side columns
     become equal, so the text block is centred in the frame, and the
     images either side are resized to match each other
   ================================================================== */
[data-page="home"] .creds__item:nth-child(n) .creds__card {
  display: grid !important;
  place-content: center !important;
  place-items: center !important;
  gap: 0 !important;
}
[data-page="home"] .creds__item:nth-child(n) .creds__mark {
  min-height: 0 !important;
  display: grid;
  place-items: center;
  width: 100%;
}

@media (min-width: 62em) {
  [data-page="home"] .hx-trip {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr) minmax(0, 0.8fr) !important;
  }
}

/* ==================================================================
   rev 54 - 20 Aug, Aarav: make the homepage hero match the Landlord
   Guide's style, keeping our colours. The guide's recipe, ported:
     kicker  = 0.68rem uppercase, 0.2em tracking, 26x2px leading rule
     h1      = the display line, alone
     statement = a SMALLER serif line beneath it in the accent colour
     lede    = guide measure and 1.62 line-height
   Every colour here is the homepage's own (cream, mint, oxblood).
   ================================================================== */
[data-page="home"] .hxo2__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.85rem !important;
}
[data-page="home"] .hxo2__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  opacity: 0.8;
  flex: none;
}
[data-page="home"] .hxo2__title-em {
  display: block;
  margin-top: 0.75rem;
  font-size: clamp(1.5rem, 2.1vw, 2rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}
[data-page="home"] .hxo2__lede {
  margin-top: 1rem;
  max-width: 46ch;
  font-size: clamp(0.97rem, 1.05vw, 1.08rem) !important;
  line-height: 1.62 !important;
}

/* rev 55 - 20 Aug, Aarav: the kicker is centred here, so it takes a
   matching rule on the RIGHT as well - the lockup reads symmetric
   rather than one-sided. */
[data-page="home"] .hxo2__eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  opacity: 0.8;
  flex: none;
}

/* ==================================================================
   rev 56 - 20 Aug, Aarav: make the hero's colour premium and on the
   site's theme. The flat forest fill becomes a graded ground the way
   the guide's navy hero does - lifted at the top, deepening to a near
   black-green at the foot, with a soft warm light behind the lockup
   and a gold hairline framing the plate. The kicker moves to the
   site's gold, which is the theme's accent everywhere else (chapter
   numerals, section pill, underlines). Green identity is untouched.
   ================================================================== */
[data-page="home"] .hxo2__plate {
  background-color: #10322a !important;
  background-image: linear-gradient(180deg, #1a4034 0%, #133528 52%, #0b2119 100%) !important;
  border: 1px solid rgba(197, 166, 106, 0.16);
  box-shadow: 0 48px 90px -60px rgba(4, 16, 12, 0.95);
}
[data-page="home"] .hxo2__eyebrow {
  color: #c9ad74 !important;
}
[data-page="home"] .hxo2__lede {
  color: rgba(244, 238, 227, 0.88) !important;
}

/* ==================================================================
   rev 58 - 20 Aug, Aarav: "the line is too clean, we don't want the
   line". The seam was mine: rev 56/57 deepened the copy plate but the
   film's veil still dissolved into the OLD flat green, so two
   different greens met at the film's left edge and drew a hard step.
   The veil now carries the plate's exact vertical grade and is masked
   horizontally, so the film dissolves into the copy with no edge at
   all; the bottom scrim moves to the cinema's own layer so masking
   the veil cannot take it away.
   ================================================================== */
[data-page="home"] .hxo2--split .hxo2__cinema {
  background: #0b2119 !important;
}
[data-page="home"] .hxo2--split .hxo2__veil {
  background: linear-gradient(180deg, #1a4034 0%, #133528 52%, #0b2119 100%) !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.72) 8%, rgba(0, 0, 0, 0.22) 19%, transparent 30%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.72) 8%, rgba(0, 0, 0, 0.22) 19%, transparent 30%);
}
[data-page="home"] .hxo2--split .hxo2__cinema::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(6, 20, 15, 0.34) 0%, rgba(6, 20, 15, 0.02) 52%);
}

/* ==================================================================
   rev 59 - 20 Aug, Aarav: "get rid of the line, we just want the blur".
   The green fade could never hide it, because the FILM's own left edge
   was the line: before it there is no footage, after it there is. So
   the film itself is now masked - it fades in from nothing over the
   handover zone, with the plate's green showing straight through - and
   the veil stops painting a green wall over it, keeping only the soft
   bottom scrim. There is no surface boundary left to draw an edge.
   ================================================================== */
[data-page="home"] .hxo2--split .hxo2__cinema {
  background: transparent !important;
}
@media (min-width: 62em) {
  [data-page="home"] .hxo2--split .hxo2__cinema {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.28) 10%, rgba(0, 0, 0, 0.72) 22%, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.28) 10%, rgba(0, 0, 0, 0.72) 22%, #000 34%);
  }
}
@media (max-width: 61.99em) {
  [data-page="home"] .hxo2--split .hxo2__cinema {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}
[data-page="home"] .hxo2--split .hxo2__veil {
  background: linear-gradient(0deg, rgba(6, 20, 15, 0.34) 0%, rgba(6, 20, 15, 0.02) 52%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
[data-page="home"] .hxo2--split .hxo2__cinema::after { content: none !important; }

/* ======================================================================
 * 21 August 2026 - the phone film is a background, not a media control.
 *
 * iOS may paint its native start button over a muted inline video even
 * when the document never asks for controls. The homepage film is already
 * represented by its poster when playback is unavailable, so the phone
 * presentation stays non-interactive and never exposes a play/pause layer.
 * ==================================================================== */
@media (max-width: 47.99em), (pointer: coarse) {
  [data-page="home"] .hxo2__cinema,
  [data-page="home"] .hxo2__film {
    pointer-events: none !important;
    -webkit-user-select: none;
    user-select: none;
  }

  [data-page="home"] .hxo2__film::-webkit-media-controls,
  [data-page="home"] .hxo2__film::-webkit-media-controls-enclosure,
  [data-page="home"] .hxo2__film::-webkit-media-controls-panel,
  [data-page="home"] .hxo2__film::-webkit-media-controls-play-button,
  [data-page="home"] .hxo2__film::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
    appearance: none;
  }

  [data-page="home"] .hxo2__film.is-autoplay-blocked {
    display: none !important;
  }
}

/* rev 60 - 20 Aug, Aarav: centralise the two action panels. They were
   pinned to the top of their column with 77px of slack collecting
   underneath, so the pair sat high against the taller contact ledger.
   They now centre vertically and the column reads level. */
[data-page="home"] .hx27__paths {
  justify-content: center;
}

/* ==================================================================
   rev 62 - 20 Aug, Aarav: you cannot see PrimeLocation at all; make
   the ones that need it bigger. Every mark was capped at one height,
   so wide wordmarks (Rightmove, LoopNet) filled the plate while
   square or compact ones (Zoopla, PRS, ICO, PrimeLocation) rendered
   at a third of the area. Each brand now carries a multiplier that
   equalises OPTICAL area rather than height, measured from its own
   artwork ratio.
   ================================================================== */
[data-page="home"] .creds__item:nth-child(n) .creds__card { min-height: 170px; }
[data-page="home"] .creds__item:nth-child(n) .creds__logo {
  max-height: calc(62px * var(--logo-k, 1)) !important;
  max-width: min(84%, 232px) !important;
}
[data-page="home"] .creds__card:has(img[alt="Zoopla"]) { --logo-k: 1.67; }
[data-page="home"] .creds__card:has(img[alt="ICO registered"]) { --logo-k: 1.29; }
[data-page="home"] .creds__card:has(img[alt="Property Redress Scheme"]) { --logo-k: 1.22; }
[data-page="home"] .creds__card:has(img[alt="PrimeLocation"]) { --logo-k: 1.08; }
[data-page="home"] .creds__card:has(img[alt="Tenancy Deposit Scheme"]) { --logo-k: 1.08; }
[data-page="home"] .creds__card:has(img[alt="LoopNet"]) { --logo-k: 0.91; }
[data-page="home"] .creds__card:has(img[alt="Rightmove"]) { --logo-k: 0.87; }
[data-page="home"] .creds__card:has(img[alt="OnTheMarket"]) { --logo-k: 0.83; }
[data-page="home"] .creds__card:has(img[alt="Client Money Protect"]) { --logo-k: 0.82; }


/* ======================================================================
 * 21 August 2026 - the Dukes Assistant lockup centres, and its rule mirrors.
 *
 * Aarav: "put Dukes Assistant in the middle and give it a line on the right
 * also."
 *
 * The kicker is one flex row with a single 20x2 brass rule on the LEFT:
 *     <p class="rd-intro__kicker"><span class="rd-intro__rule"></span>Dukes Assistant</p>
 * Rather than add a second span to markup a different session owns, the
 * right-hand rule is an ::after on the kicker, matched to the measured
 * original - 20px by 2px, #c5a66a, the same 10px flex gap - so the pair
 * stays symmetrical whatever happens to the first one.
 *
 * The rules above set `text-align: left !important` on .rd-intro .h-section,
 * so these repeat !important at the same specificity and win by being later
 * in the file. APPENDED, not edited in place: this stylesheet has more than
 * one writer and was last written by the other one.
 * ==================================================================== */

[data-page="home"] .rd-intro__kicker {
  justify-content: center !important;
  /* dukes.css caps every <p> at var(--measure) - 572px here - so the kicker
     sat start-justified in its 611px grid area and its centred content rode
     19px left of the card's centre. Uncapped, and centre-justified as belt
     against any future cap. */
  max-width: none !important;
  justify-self: center;
  width: 100%;
}
[data-page="home"] .rd-intro__kicker::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 2px;
  background: #c5a66a;
}
[data-page="home"] .rd-intro .h-section {
  text-align: center !important;
  margin-inline: auto !important;
  max-width: 16ch !important;
}
[data-page="home"] .rd-intro__lede {
  text-align: center !important;
  margin-inline: auto !important;
  max-width: 44ch !important;
}

/* ======================================================================
 * 21 August 2026 - the assistant band mixes instead of stacking.
 *
 * Aarav, after the lockup centred: "now the other two boxes and lines are
 * not taking the full width - we want it to be a mix so it is not
 * vertically too long."
 *
 * Measured before: the intro card ran kicker / heading / lede / photo /
 * ledger as one 576px tower, 833px tall, with the centred type making the
 * tower read even taller. The mix:
 *
 *   - inside the card, the header spans the full card width (centred, as
 *     he asked), and the PHOTO and the LEDGER sit side by side under it
 *   - the columns rebalance to half and half, so the card gets real width
 *   - the direct-contact rail moves up into the left column under the
 *     card, filling the space the shorter card frees, instead of adding
 *     its own full-width row at the bottom
 *
 * Desktop only - below 62em the band is already a single column and the
 * side-by-side would just re-create the cramping he is asking to remove.
 * APPENDED, never edited in place: this file has a second active writer.
 * ==================================================================== */
@media (min-width: 62em) {
  [data-page="home"] #dukes-receptionist .reception__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  [data-page="home"] #dukes-receptionist .rd-intro { grid-column: 1 !important; grid-row: 1 !important; }
  [data-page="home"] #dukes-receptionist .rd-routes { grid-column: 2 !important; grid-row: 1 / span 2 !important; }
  [data-page="home"] #dukes-receptionist .reception__inner > .reception__routes--safe {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start;
  }

  /* the card itself: header across the top, photo and ledger side by side */
  [data-page="home"] #dukes-receptionist .rd-intro {
    display: grid !important;
    /* photo column wider than the ledger's: at 293px the photo could only
       fill the row by cropping square; at ~345px the same height is a
       1.26:1 crop that keeps both people in frame */
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    /* the 1fr row hands ALL the card's spare height to the photo/ledger
       row - no void anywhere between the lede and the card's bottom */
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 14px 24px;
    padding-bottom: 14px;
  }
  [data-page="home"] #dukes-receptionist .rd-intro__kicker,
  [data-page="home"] #dukes-receptionist .rd-intro .h-section,
  [data-page="home"] #dukes-receptionist .rd-intro__lede { grid-column: 1 / -1; }
  [data-page="home"] #dukes-receptionist .rd-intro .h-section { margin-top: 0 !important; }
  [data-page="home"] #dukes-receptionist .rd-intro__lede { margin-top: 0 !important; }
  /* The slot carries an aspect-ratio, so the min-height:200px I first gave
     it forced its WIDTH to 356px - wider than its 293px column - and it slid
     under the ledger, clipping the row labels. Width drives now; the ratio
     sets the height. */
  [data-page="home"] #dukes-receptionist .rd-intro__slot {
    grid-column: 1;
    grid-row: 4;
    margin: 0;
    /* the photo IS the row: it fills the full remaining card height, so
       there is no gap above it and none below. The wider column keeps the
       resulting crop at ~1.26:1, both people in frame. */
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    height: 100%;
    aspect-ratio: auto !important;
    min-height: 0;
    overflow: hidden;
  }
  [data-page="home"] #dukes-receptionist .rd-intro__slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* the small headings ride the middle of the photo beside them */
  [data-page="home"] #dukes-receptionist .rd-intro__ledger {
    grid-column: 2;
    grid-row: 4;
    align-self: center;
    margin: 0;
  }
  /* the narrower column made "Before you send / Review, then choose" wrap
     to two ragged lines; a half-step down keeps every row on one line */
  [data-page="home"] #dukes-receptionist .rd-intro__ledger dt {
    font-size: 0.86rem;
    white-space: nowrap;
  }
  [data-page="home"] #dukes-receptionist .rd-intro__ledger dd {
    font-size: 0.86rem;
    white-space: nowrap;
  }
}

/* 21 Aug 2026 — the same hover-lift flicker, on this page's own controls.
   Every translateY lift on hover can oscillate when the pointer sits on
   the control's bottom edge (see dukes-assistant.css for the measured
   mechanism). The lifts here become shadow-only: the control stays put. */
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .hx-btn:hover,
  [data-page="home"] .hx-chip:hover,
  [data-page="home"] .hx-route:hover,
  [data-page="home"] .hx-cert:hover,
  [data-page="home"] .hx-entry__plate:hover,
  [data-page="home"] .abt-card__link:hover,
  .hxo__btn:hover,
  .hxo__route:hover { transform: none !important; }
  .hxo__btn:active,
  .hxo__route:active { transform: none !important; }
}

/* 21 Aug 2026 — the assistant plate no longer resizes when a journey is
   opened or closed. Aarav: "I don't like the whole box moving when I click
   it." Measured: the band went 974 -> 942 -> 768px as journeys toggled, and
   the left card stretched and shrank with it. The routes column now holds
   its tallest state (the first journey open measures 833px) at all times,
   so the plate, the card beside it and everything below stay put. */
@media (min-width: 62em) {
  [data-page="home"] #dukes-receptionist .rd-routes { min-height: 833px; }
  [data-page="home"] #dukes-receptionist .rd-routes .rd-route__disclosure,
  [data-page="home"] #dukes-receptionist .rd-route { transition: none; }
}

/* 21 Aug 2026 — the hero's second action: "Book a sales valuation", to the
   sales valuation form. The pair reads as a pair: same height and radius,
   the primary in oxblood, the secondary as a cream-outlined glass button on
   the film. Hover is colour and shadow only - see the flicker note above. */
.hxo2__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hxo2__btn--secondary {
  background: rgba(251, 248, 242, 0.08);
  border-color: rgba(251, 248, 242, 0.55);
  color: #fbf8f2;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hxo2__btn--secondary:hover,
.hxo2__btn--secondary:focus-visible {
  background: #fbf8f2;
  border-color: #fbf8f2;
  color: #0d1d31;
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.55);
}
@media (max-width: 47.99em) {
  .hxo2__actions { flex-direction: column; align-items: stretch; }
  .hxo2__btn { justify-content: center; }
}

/* 21 Aug 2026 — no native play badge, ever. iOS paints a play control over
   any paused inline video; the film is decorative and cannot be operated,
   so the control is suppressed even in the instant before it resumes. */
.hxo2__film::-webkit-media-controls,
.hxo2__film::-webkit-media-controls-start-playback-button,
.hxo2__film::-webkit-media-controls-panel,
.hxo2__film::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none !important; opacity: 0 !important; }
.hxo2__film { pointer-events: none; }

/* ======================================================================
 * 21 Aug 2026 — the review wall on the phone: a rising column.
 * Desktop is untouched (its three-column CSS marquee above 48em). On the
 * phone, review-wall-mobile.mjs builds one tall track and drives the
 * window's own scroll upward; these rules give it the window to rise in.
 * Doubled class on the window outranks the earlier phone rules in
 * home-2026.css, which had turned it into a sideways strip.
 * ==================================================================== */
@media (max-width: 47.99em) {
  [data-page="home"] .rw2__window.rw2__window[data-rw2-mobile] {
    display: block !important;
    height: min(70svh, 640px) !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 1rem !important;
    scroll-snap-type: none !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent) !important;
    mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent) !important;
  }
  [data-page="home"] .rw2__window[data-rw2-mobile]::-webkit-scrollbar { display: none; }
  /* the original columns step aside; the built track is what shows */
  [data-page="home"] .rw2__window[data-rw2-mobile] > .rw2__col { display: none !important; }
  [data-page="home"] .rw2__mtrack {
    display: grid;
    gap: var(--rw2-gap, 1rem);
    margin: 0 0 var(--rw2-gap, 1rem);
    padding: 0;
    list-style: none;
  }
  [data-page="home"] .rw2__mcell { margin: 0; padding: 0; }
  [data-page="home"] .rw2__mcell > .rw2__card {
    flex: none !important;
    width: 100% !important;
    margin: 0 !important;
    scroll-snap-align: none !important;
  }
  /* the pause button comes back on the phone */
  [data-page="home"] .rw2 .rw2__pause { display: inline-flex !important; margin: 0.75rem auto 0; }
}
@media (max-width: 47.99em) and (prefers-reduced-motion: reduce) {
  [data-page="home"] .rw2__window.rw2__window[data-rw2-mobile] { height: auto !important; overflow: visible !important; mask-image: none !important; -webkit-mask-image: none !important; }
  [data-page="home"] .rw2__mtrack[data-rw2-mclone] { display: none; }
}

/* ======================================================================
 * 22 Aug 2026 — the hero leaves the green.
 * Aarav: "I don't like the green in the background, it looks immature."
 * The plate ground had drifted to a bright forest (#1c4437). It goes to
 * the guide's night navy - the site's decisive-band colour, the one the
 * Seller's Guide hero already uses - and the contact band, which was
 * written to mirror the hero, follows it. The approved forest anchor on
 * the "who you are dealing with" chapter is untouched.
 * ==================================================================== */
/* 22 Aug: Aarav reversed the navy - the green stays. The flush phone
   banner, the video fixes and the contrast corrections below remain. */

/* the phone: no cream strip between the header and the banner - the plate
   runs flush, its top corners squared so the join reads as one surface */
@media (max-width: 47.99em) {
  [data-page="home"] .hxo2 { padding-top: 0 !important; }
  [data-page="home"] .hxo2__plate {
    width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

}

/* 22 Aug 2026 — contrast corrections from the whole-page sweep.
   The plate gets an explicit background-color under its gradient (a
   gradient alone leaves background-color transparent, which also breaks
   any contrast tooling walking the tree). The journey numerals were the
   forest ink faded to ~1.9:1 by an opacity; they hold full ink now. The
   contact tile labels were 3.97:1 brass on cream - one step deeper. */
[data-page="home"] .hxo2__plate { background-color: #10322a !important; }
[data-page="home"] #dukes-receptionist .rd-route__num { color: #17483c !important; opacity: 1 !important; }
[data-page="home"] #dukes-receptionist .rd-c-label { color: #74511a !important; }

/* 22 Aug 2026 — reverted at Aarav's request: the wider film column leaked
   below the phone breakpoint and broke the stacked layout. The plate keeps
   its original geometry; the reset that stays is the ROTATION - one film,
   looping seamlessly, no swaps and no other movement. */

/* ======================================================================
 * 22 Aug 2026 — the assistant chapter, stripped to one invitation.
 * Aarav: "too much information on the first page - a simple, lengthy
 * vertical section: Dukes Assistant, Tell Dukes what you need, and a
 * button to the chat bot. Get rid of all of that."
 * A tall quiet band: brass label between rules, the heading at display
 * scale, one oxblood button that opens the centred assistant.
 * ==================================================================== */
[data-page="home"] .asst-min .asst-min__stage {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  padding: clamp(2.5rem, 5vw, 4rem) 1rem;
  align-content: center;
}
[data-page="home"] .asst-min__kicker {
  display: grid;
  grid-template-columns: minmax(2.5rem, 1fr) auto minmax(2.5rem, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  align-items: center;
  width: min(100%, 24rem);
  margin: 0;
  color: #74511a;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
[data-page="home"] .asst-min__kicker::before,
[data-page="home"] .asst-min__kicker::after {
  content: "";
  height: 1px;
  background: currentColor;
  opacity: 0.75;
}
[data-page="home"] .asst-min__title {
  margin: 0;
  font-family: "Gloock", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1.04;
  color: #0f3028;
}
[data-page="home"] .asst-min__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin-top: clamp(0.6rem, 1.2vw, 1.2rem);
  padding: 0 30px;
  border-radius: 16px;
  background: #7b2430;
  color: #fbf8f2;
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  box-shadow: 0 18px 36px -18px rgba(123, 36, 48, 0.65);
}
[data-page="home"] .asst-min__cta svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .asst-min__cta { transition: background-color 0.24s ease, box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
  [data-page="home"] .asst-min__cta:hover { background: #5e1924; box-shadow: 0 24px 44px -18px rgba(123, 36, 48, 0.8); }
}
[data-page="home"] .asst-min__cta:focus-visible { outline: 3px solid #74511a; outline-offset: 3px; }

/* ======================================================================
 * 22 Aug 2026 — the routes chapter is now JUST the three cards.
 * Aarav: "get rid of this [the What-would-you-like-to-do frame], put
 * these 3 options there instead, and change the layout at the bottom:
 * the right one has its left missing and the left has its right missing."
 * The 72px sweep is the "missing" corner. Mirrored: the left card sweeps
 * bottom-right (as before), the right card sweeps bottom-left, and the
 * middle sweeps both, so the row reads as one symmetric composition.
 * ==================================================================== */
[data-page="home"] .hx-route--forest { border-radius: 18px 18px 72px 18px; }
[data-page="home"] .hx-route--bronze { border-radius: 18px 18px 72px 72px; }
[data-page="home"] .hx-route--slate  { border-radius: 18px 18px 18px 72px; }
/* under 900-ish the cards stack: one column, so the mirror reads top to
   bottom instead - alternate the sweep side, last card keeps the pair */
@media (max-width: 61.99em) {
  [data-page="home"] .hx-route--forest { border-radius: 18px 18px 72px 18px; }
  [data-page="home"] .hx-route--bronze { border-radius: 18px 18px 18px 72px; }
  [data-page="home"] .hx-route--slate  { border-radius: 18px 18px 72px 72px; }
}

/* ======================================================================
 * 22 Aug 2026 — memberships trimmed to verify buttons; hero tool links;
 * the WhatsApp row loses its number (cold callers were pestering Amrit).
 * ==================================================================== */
[data-page="home"] .hx-verify {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin: clamp(1.4rem, 2.4vw, 2rem) 0;
}
[data-page="home"] .hx-verify__btn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid rgba(15, 48, 40, 0.18);
  border-radius: 16px;
  background: #fbf8f2;
  color: #14251f;
  text-decoration: none;
  box-shadow: 0 14px 30px -18px rgba(13, 29, 49, 0.4);
}
[data-page="home"] .hx-verify__mark { display: inline-grid; place-items: center; inline-size: 54px; block-size: 54px; border-radius: 12px; background: #fff; border: 1px solid rgba(15, 48, 40, 0.12); }
[data-page="home"] .hx-verify__mark img { inline-size: 42px; block-size: 42px; object-fit: contain; }
[data-page="home"] .hx-verify__text { display: grid; gap: 2px; }
[data-page="home"] .hx-verify__text strong { font-size: 1.05rem; }
[data-page="home"] .hx-verify__text span { font-size: 0.88rem; color: #4c5a54; }
[data-page="home"] .hx-verify__cue { font-size: 1.2rem; color: #7b2430; }
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .hx-verify__btn { transition: border-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
  [data-page="home"] .hx-verify__btn:hover { border-color: #74511a; box-shadow: 0 22px 40px -20px rgba(123, 36, 48, 0.45); }
}

/* hero: the visitor-magnet tools under the two main actions */
[data-page="home"] .hxo2__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px;
}
[data-page="home"] .hxo2__tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(251, 248, 242, 0.38);
  border-radius: 999px;
  background: rgba(9, 26, 21, 0.35);
  color: #f4efe4;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(4px);
}
[data-page="home"] .hxo2__tool svg { inline-size: 14px; block-size: 14px; }
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .hxo2__tool { transition: background-color 0.2s ease, border-color 0.2s ease; }
  [data-page="home"] .hxo2__tool:hover { background: rgba(9, 26, 21, 0.6); border-color: rgba(251, 248, 242, 0.7); }
}

/* the WhatsApp contact row: one line, centred against the glyph */
[data-page="home"] .hx27-row--whatsapp .hx27-row__text { align-content: center; align-self: center; }
[data-page="home"] .hx27-row__value--solo { align-self: center; }

/* ======================================================================
 * 22 Aug 2026 — round 2 on memberships: the CMP/PRS rows are gone; the
 * two legend pills ARE the buttons now, each taking the reader to the
 * page that shows the real thing straight away.
 * ==================================================================== */
[data-page="home"] a.hx30__pill--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border: 1px solid rgba(15, 48, 40, 0.16);
  box-shadow: 0 10px 22px -14px rgba(13, 29, 49, 0.4);
}
[data-page="home"] .hx30__pill-cue { margin-left: 8px; color: #7b2430; }
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] a.hx30__pill--link { transition: border-color 0.2s ease, box-shadow 0.26s cubic-bezier(0.22, 1, 0.36, 1); }
  [data-page="home"] a.hx30__pill--link:hover { border-color: #74511a; box-shadow: 0 16px 30px -14px rgba(123, 36, 48, 0.45); }
}
[data-page="home"] .hx30__legend { display: flex; flex-wrap: wrap; gap: 10px 12px; }
[data-page="home"] a.hx30__pill--link { display: inline-flex; align-items: center; }
[data-page="home"] .hx30__legend { gap: 10px 8px; }
[data-page="home"] .hx30__pill-cue { margin-left: 5px; }

/* ======================================================================
 * 22 Aug 2026 — the assistant chapter, flanked. Aarav: "this is too
 * empty - either reduce the width or fill the left and right with
 * useful stuff." The centre lockup stays exactly as approved; the two
 * shoulders now carry real routes: journey shortcuts that open the
 * assistant on that flow, and the direct routes for people who want a
 * person, a form or a valuation without the chat.
 * ==================================================================== */
[data-page="home"] .asst-min__stage--flanked {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-items: stretch;
  column-gap: clamp(1.5rem, 4vw, 4.5rem);
  text-align: left;
}
[data-page="home"] .asst-min__centre {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}
[data-page="home"] .asst-min__side {
  display: grid;
  gap: 10px;
  align-content: center;
  max-width: 21rem;
}
[data-page="home"] .asst-min__side--asks { justify-self: end; }
[data-page="home"] .asst-min__side--direct { justify-self: start; }
[data-page="home"] .asst-min__side-kicker {
  margin: 0 0 4px;
  color: #74511a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
[data-page="home"] .asst-min__chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(15, 48, 40, 0.18);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.72);
  color: #14251f;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}
[data-page="home"] .asst-min__chip svg { inline-size: 15px; block-size: 15px; color: #7b2430; flex: none; }
@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .asst-min__chip { transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.26s cubic-bezier(0.22, 1, 0.36, 1); }
  [data-page="home"] .asst-min__chip:hover { border-color: #74511a; background: #fffdf8; box-shadow: 0 14px 26px -16px rgba(123, 36, 48, 0.4); }
}
/* narrow: centre leads, the two shoulders sit side by side beneath it */
@media (max-width: 61.99em) {
  [data-page="home"] .asst-min__stage--flanked { grid-template-columns: 1fr; row-gap: 2rem; justify-items: center; }
  [data-page="home"] .asst-min__centre { order: -1; }
  [data-page="home"] .asst-min__side,
  [data-page="home"] .asst-min__side--asks,
  [data-page="home"] .asst-min__side--direct { justify-self: stretch; max-width: 26rem; margin-inline: auto; width: 100%; }
}

/* ======================================================================
 * 22 Aug 2026 — round 3 on the assistant chapter. The flanking routes
 * read as too many buttons; Aarav chose the other cure: the simple
 * centred lockup again, on a SMALLER island. The band no longer spans
 * the page - a compact centred plate, tighter padding.
 * ==================================================================== */
[data-page="home"] .hx-band--assistant.asst-min {
  /* the earlier island pass pins band widths with !important; matched here */
  width: min(100% - 2rem, 54rem) !important;
  margin-inline: auto !important;
}
[data-page="home"] .asst-min .asst-min__stage {
  padding: clamp(2rem, 3.5vw, 3rem) 1rem;
}


/* 22 Aug 2026 — the chapter row on the slim assistant island sits centred,
   not flushed left; the long rule would fight the centring, so it goes. */
[data-page="home"] .asst-min .chapter {
  justify-content: center;
  text-align: center;
}
[data-page="home"] .asst-min .chapter .chapter__rule { display: none; }

/* 22 Aug 2026 — restore the approved compact desktop opening.
   The homepage starts with a centred editorial plate rather than a
   near-full-viewport billboard. The phone layout remains unchanged. */
@media (min-width: 62em) {
  [data-page="home"] .hxo2--split {
    width: min(calc(100% - 3rem), 1480px);
    margin: 1.25rem auto 0;
  }

  [data-page="home"] .hxo2--split .hxo2__plate {
    grid-template-columns: minmax(400px, 0.44fr) minmax(0, 0.56fr);
    grid-template-rows: 590px;
  }

  [data-page="home"] .hxo2--split .hxo2__copy {
    padding: clamp(2.25rem, 3.2vw, 4rem);
  }

  [data-page="home"] .hxo2--split .hxo2__title {
    max-width: 11ch;
    font-size: clamp(3.25rem, 4vw, 4.45rem);
    line-height: 1.04;
  }

  [data-page="home"] .hxo2--split .hxo2__lede {
    margin-top: 1.35rem;
    font-size: 1rem;
    line-height: 1.58;
  }

  [data-page="home"] .hxo2--split .hxo2__actions { margin-top: 1.55rem; }
  [data-page="home"] .hxo2--split .hxo2__rating { margin-top: 1.25rem; }
}

/* ======================================================================
 * 22 Aug 2026 — recentre the opening. At wide viewports the plate kept
 * its old 96vw island width inside the new 1480px hero shell, so the
 * film spilled past the right edge and nothing sat centred. The plate
 * now fills its shell exactly. Also restores (after a two-writer merge
 * dropped them) the centred chapter row on the assistant island.
 * ==================================================================== */
@media (min-width: 62em) {
  [data-page="home"] .hxo2--split .hxo2__plate {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
}
[data-page="home"] .asst-min .chapter {
  justify-content: center;
  text-align: center;
}
[data-page="home"] .asst-min .chapter .chapter__rule { display: none; }

/* ======================================================================
 * 22 Aug 2026 — THE BILLBOARD OPENING. Aarav: "make the homepage like
 * this instead, different from the other pages - the video plays in the
 * background on a big screen and the text is in the middle. Super high
 * quality."
 * The split dies on desktop: the film owns the whole plate edge to edge,
 * a cinematic scrim keeps the copy legible, and the copy stands centred
 * in the frame. The phone presentation is untouched. The html-prefixed
 * selectors deliberately outrank every earlier split rule, important
 * included.
 * ==================================================================== */
@media (min-width: 62em) {
  html body[data-page="home"] .hxo2--split {
    width: min(calc(100% - 2.5rem), 1680px) !important;
    margin: 1.1rem auto 0 !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__plate {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    place-items: center !important;
    min-height: clamp(680px, 88svh, 960px) !important;
    position: relative !important;
    overflow: hidden !important;
  }
  /* the film is the ground: full bleed, no fade mask, nothing cropped off */
  html body[data-page="home"] .hxo2--split .hxo2__cinema {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    grid-column: auto !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__cinema .hxo2__film,
  html body[data-page="home"] .hxo2--split .hxo2__cinema .hxo2__poster {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center;
  }
  /* one cinematic scrim: darker head and foot, a breath over the middle,
     so cream text holds 4.5:1 wherever the footage brightens */
  html body[data-page="home"] .hxo2--split .hxo2__veil {
    position: absolute; inset: 0;
    background:
      radial-gradient(60% 56% at 50% 46%, rgba(5, 18, 14, 0.5) 0%, rgba(5, 18, 14, 0.18) 62%, rgba(5, 18, 14, 0) 100%),
      linear-gradient(180deg, rgba(5, 18, 14, 0.62) 0%, rgba(5, 18, 14, 0.3) 30%, rgba(5, 18, 14, 0.28) 62%, rgba(5, 18, 14, 0.66) 100%) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  /* the copy stands centred in the frame */
  html body[data-page="home"] .hxo2--split .hxo2__copy {
    position: relative !important;
    z-index: 2 !important;
    grid-area: 1 / 1;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: min(100%, 64rem) !important;
    max-width: none !important;
    padding: clamp(3rem, 6vh, 5rem) clamp(1.5rem, 4vw, 4rem) !important;
    text-shadow: 0 1px 22px rgba(4, 14, 11, 0.45);
  }
  html body[data-page="home"] .hxo2--split .hxo2__title {
    max-width: 15ch !important;
    font-size: clamp(3.6rem, 4.6vw, 5.2rem) !important;
    line-height: 1.03 !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__lede {
    max-width: 44rem;
    font-size: 1.06rem !important;
    line-height: 1.6 !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__actions,
  html body[data-page="home"] .hxo2--split .hxo2__tools { justify-content: center !important; }
  /* buttons keep no shadow-text; the scrim behind them already carries it */
  html body[data-page="home"] .hxo2--split .hxo2__btn,
  html body[data-page="home"] .hxo2--split .hxo2__tool,
  html body[data-page="home"] .hxo2--split .hxo2__rating { text-shadow: none; }
}

/* ======================================================================
 * 22 Aug 2026 — two notes on the billboard, both Aarav's:
 * 1. "Different background colour, I don't like green in the bg."
 *    The sage-mist ground goes porcelain blue-grey. Cream islands keep
 *    their separation; nothing green remains around the plates.
 * 2. "The bottom of the river film is too cut."  Every film crops
 *    identically (all 1.60 into a 2.12 frame), but the crop was centred
 *    so the river film lost its riverside houses. The crop now favours
 *    the ground and spends the loss on sky - uniformly, so all four
 *    films carry the same framing rule.
 * ==================================================================== */
/* round 2, "the palette is not premium enough": porcelain read office-
   grey. The ground goes warm limestone - the gallery-wall neutral under
   cream plates, in the same family as the header parchment, no green,
   no blue. */
html body[data-page="home"] {
  background: #dcd5c8 !important;
}
@media (min-width: 62em) {
  html body[data-page="home"] .hxo2--split .hxo2__cinema .hxo2__film,
  html body[data-page="home"] .hxo2--split .hxo2__cinema .hxo2__poster {
    object-position: 50% 68% !important;
  }
}

/* ======================================================================
 * 22 Aug 2026 — the billboard controls, matched to the footage.
 * Aarav: "change the colours here for everything so they match properly,
 * premium, with the video." One system: deep oxblood primary with an
 * inner light, and a single frosted-glass family for everything else -
 * dark glass for the second action, light glass for the tools and the
 * rating - all hairlined in warm cream, warming to brass on hover.
 * ==================================================================== */
@media (min-width: 62em) {
  html body[data-page="home"] .hxo2--split .hxo2__btn--primary {
    background: linear-gradient(180deg, #7e2531 0%, #611c26 100%) !important;
    border: 1px solid rgba(255, 235, 200, 0.22) !important;
    color: #faf4e8 !important;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__btn--secondary {
    background: rgba(12, 16, 14, 0.38) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    backdrop-filter: blur(12px) saturate(1.15);
    border: 1px solid rgba(246, 240, 228, 0.4) !important;
    color: #f6f0e4 !important;
    box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.5) !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__tool {
    background: rgba(246, 240, 228, 0.1) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
    backdrop-filter: blur(10px) saturate(1.15);
    border: 1px solid rgba(246, 240, 228, 0.28) !important;
    color: #f3ecdd !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__rating {
    background: rgba(246, 240, 228, 0.1) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
    backdrop-filter: blur(10px) saturate(1.15);
    border: 1px solid rgba(246, 240, 228, 0.24) !important;
    color: #f3ecdd !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__rating .hxo2__count { color: #e9e1cf !important; }
  @media (hover: hover) and (pointer: fine) {
    html body[data-page="home"] .hxo2--split .hxo2__btn--primary:hover {
      background: linear-gradient(180deg, #6d1f2a 0%, #501720 100%) !important;
      border-color: rgba(214, 178, 110, 0.55) !important;
      box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    }
    html body[data-page="home"] .hxo2--split .hxo2__btn--secondary:hover {
      background: rgba(12, 16, 14, 0.56) !important;
      border-color: rgba(214, 178, 110, 0.65) !important;
    }
    html body[data-page="home"] .hxo2--split .hxo2__tool:hover {
      background: rgba(246, 240, 228, 0.18) !important;
      border-color: rgba(214, 178, 110, 0.6) !important;
    }
  }
}

/* ======================================================================
 * 22 Aug 2026 — the billboard reaches the phone. Aarav (phone shot):
 * "it still looks like this?" The stacked film-then-green-plate layout
 * goes: the portrait film is the whole opening, the copy stands centred
 * on it, same scrim, same glass controls as the big screen.
 * ==================================================================== */
@media (max-width: 61.99em) {
  html body[data-page="home"] .hxo2--split .hxo2__plate {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    place-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: clamp(560px, 92svh, 860px) !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__cinema {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__cinema .hxo2__film,
  html body[data-page="home"] .hxo2--split .hxo2__cinema .hxo2__poster {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 62% !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__veil {
    position: absolute; inset: 0;
    background:
      radial-gradient(72% 50% at 50% 52%, rgba(5, 18, 14, 0.5) 0%, rgba(5, 18, 14, 0.18) 62%, rgba(5, 18, 14, 0) 100%),
      linear-gradient(180deg, rgba(5, 18, 14, 0.58) 0%, rgba(5, 18, 14, 0.3) 30%, rgba(5, 18, 14, 0.3) 60%, rgba(5, 18, 14, 0.68) 100%) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__copy {
    position: relative !important;
    z-index: 2 !important;
    grid-area: 1 / 1;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    background: none !important;
    padding: clamp(2.5rem, 8vh, 4rem) 1.25rem !important;
    text-shadow: 0 1px 18px rgba(4, 14, 11, 0.5);
  }
  html body[data-page="home"] .hxo2--split .hxo2__title {
    font-size: clamp(2.5rem, 10.5vw, 3.6rem) !important;
    line-height: 1.05 !important;
  }
  /* the same glass system as the big screen */
  html body[data-page="home"] .hxo2--split .hxo2__btn--primary {
    background: linear-gradient(180deg, #7e2531 0%, #611c26 100%) !important;
    border: 1px solid rgba(255, 235, 200, 0.22) !important;
    color: #faf4e8 !important;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__btn--secondary {
    background: rgba(12, 16, 14, 0.38) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    backdrop-filter: blur(12px) saturate(1.15);
    border: 1px solid rgba(246, 240, 228, 0.4) !important;
    color: #f6f0e4 !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__tool,
  html body[data-page="home"] .hxo2--split .hxo2__rating {
    background: rgba(246, 240, 228, 0.1) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
    backdrop-filter: blur(10px) saturate(1.15);
    border: 1px solid rgba(246, 240, 228, 0.26) !important;
    color: #f3ecdd !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__actions,
  html body[data-page="home"] .hxo2--split .hxo2__tools { justify-content: center !important; }
}

/* ======================================================================
 * 22 Aug 2026 — the ground checks out. Aarav: "redesign the colours here,
 * make sure everything checks out, and add actual design left and right
 * where there is empty space."
 * 1. The memberships island drops its old pale-blue field and the green
 *    radial tint for the same warm cream every other island wears - one
 *    material system on the limestone ground.
 * 2. The slim assistant island grows brass reach-lines: a hairline runs
 *    from each side of the plate's waist out across the empty ground,
 *    ending in a small brass point - the kicker's rule device at plate
 *    scale, so the emptiness reads composed, not unfinished.
 * ==================================================================== */
html body[data-page="home"] #portals.band--creds {
  background: #f2ede1 !important;
}
@media (min-width: 62em) {
  html body[data-page="home"] .asst-min {
    position: relative;
    overflow: visible !important;
  }
  html body[data-page="home"] .asst-min::before,
  html body[data-page="home"] .asst-min::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(80px, 11vw, 210px);
    height: 9px;
    pointer-events: none;
  }
  html body[data-page="home"] .asst-min::before {
    right: 100%;
    margin-right: clamp(20px, 2.6vw, 44px);
    background:
      radial-gradient(circle 3.5px at 3.5px 50%, rgba(116, 81, 26, 0.55) 60%, rgba(116, 81, 26, 0) 65%),
      linear-gradient(0deg, transparent 4px, rgba(116, 81, 26, 0.34) 4px, rgba(116, 81, 26, 0.34) 5px, transparent 5px);
  }
  html body[data-page="home"] .asst-min::after {
    left: 100%;
    margin-left: clamp(20px, 2.6vw, 44px);
    background:
      radial-gradient(circle 3.5px at calc(100% - 3.5px) 50%, rgba(116, 81, 26, 0.55) 60%, rgba(116, 81, 26, 0) 65%),
      linear-gradient(0deg, transparent 4px, rgba(116, 81, 26, 0.34) 4px, rgba(116, 81, 26, 0.34) 5px, transparent 5px);
  }
}
/* the sage band already had a centred ::before device setting left:50%,
   and left beats right on an over-constrained absolute box - so the left
   reach-line was being dragged to the island's centre, through the title.
   Both sides pinned explicitly. */
@media (min-width: 62em) {
  html body[data-page="home"] .asst-min::before {
    left: auto !important;
    right: 100% !important;
    bottom: auto !important;
    top: 50% !important;
  }
  html body[data-page="home"] .asst-min::after {
    right: auto !important;
    left: 100% !important;
    bottom: auto !important;
    top: 50% !important;
  }
}

/* ======================================================================
 * 22 Aug 2026 — assistant island hierarchy refinement.
 * The long brass reach-lines outside the card were reading as arrows and
 * making the small island feel detached. Remove those desktop ornaments,
 * then pull the invitation closer to its chapter label so the label,
 * heading and action read as one compact task path.
 * ==================================================================== */
@media (min-width: 62em) {
  html body[data-page="home"] .hx-band--assistant.asst-min {
    width: min(calc(100% - 2rem), 58rem) !important;
  }

  html body[data-page="home"] .asst-min::before,
  html body[data-page="home"] .asst-min::after {
    content: none !important;
    display: none !important;
  }
}

html body[data-page="home"] .asst-min .asst-min__stage {
  gap: clamp(0.7rem, 1.15vw, 1rem);
  padding: clamp(0.75rem, 1.4vw, 1.15rem) 1rem clamp(2.1rem, 3.2vw, 2.8rem);
}

html body[data-page="home"] .asst-min__kicker {
  width: min(100%, 21rem);
}

html body[data-page="home"] .asst-min__cta {
  margin-top: clamp(0.35rem, 0.7vw, 0.65rem);
}

/* ======================================================================
 * 22 Aug 2026 — legibility over bright footage. Aarav: "the text can be
 * hard to see sometimes." The global scrim stays light so the film keeps
 * its quality; instead a feathered dark pocket rides BEHIND the copy
 * block itself (no visible card edge, just deepened footage), and the
 * type carries a real two-layer shadow. Applies to every frame of every
 * film, bright daylight included.
 * ==================================================================== */
html body[data-page="home"] .hxo2--split .hxo2__copy {
  background: radial-gradient(closest-side, rgba(4, 13, 10, 0.5) 0%, rgba(4, 13, 10, 0.34) 55%, rgba(4, 13, 10, 0) 100%) !important;
  text-shadow: 0 2px 6px rgba(3, 10, 8, 0.6), 0 1px 28px rgba(3, 10, 8, 0.55) !important;
}
@media (max-width: 61.99em) {
  html body[data-page="home"] .hxo2--split .hxo2__copy {
    background: radial-gradient(closest-side, rgba(4, 13, 10, 0.52) 0%, rgba(4, 13, 10, 0.36) 58%, rgba(4, 13, 10, 0) 100%) !important;
  }
}
html body[data-page="home"] .hxo2--split .hxo2__btn,
html body[data-page="home"] .hxo2--split .hxo2__tool,
html body[data-page="home"] .hxo2--split .hxo2__rating { text-shadow: none !important; }

/* 22 Aug 2026 — Aarav: "this corner, make it the same corner as the
   others." The hero plate's 64px bottom-right sweep becomes the uniform
   30px every other homepage island wears. Phone keeps its flush top. */
@media (min-width: 62em) {
  html body[data-page="home"] .hxo2--split .hxo2__plate,
  html body[data-page="home"] .hxo2--split .hxo2__cinema,
  html body[data-page="home"] .hxo2--split .hxo2__cinema .hxo2__film,
  html body[data-page="home"] .hxo2--split .hxo2__cinema .hxo2__poster,
  html body[data-page="home"] .hxo2--split .hxo2__veil {
    border-radius: 30px !important;
  }
}

/* (22 Aug, 20:16 — a 'full-width, left-hand' hero pass appended here by another tool was removed on Aarav's instruction: it broke the approved billboard.) */


/* ======================================================================
 * 22 Aug 2026 — THE HOMEPAGE PALETTE, from the pages Aarav pointed at.
 * "Why don't we use these colours instead - the current main page feels
 * boring." The receptionist page's espresso plate on a dusty taupe
 * ground, and the landlords page's ink-navy. The page now moves
 * dark / cream / cream / navy / navy: the assistant island goes
 * espresso with cream type, the memberships island goes ink-navy, and
 * the ground underneath everything is the taupe. The hero film and the
 * route cards are untouched.
 * ==================================================================== */
html body[data-page="home"] { background: #cbbcb6 !important; }

/* 01 — the assistant island, espresso */
html body[data-page="home"] .hx-band--assistant.asst-min {
  background: #24211e !important;
  color: #f1ebe0 !important;
  box-shadow: 0 30px 60px -34px rgba(20, 14, 10, 0.6);
}
html body[data-page="home"] .asst-min .chapter,
html body[data-page="home"] .asst-min .chapter__index,
html body[data-page="home"] .asst-min .chapter__label { color: #d9cfc2 !important; }
html body[data-page="home"] .asst-min__kicker { color: #c9a96a !important; }
html body[data-page="home"] .asst-min__title { color: #f5efe4 !important; }
html body[data-page="home"] .asst-min__cta { box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.7) !important; }
html body[data-page="home"] .asst-min__cta:focus-visible { outline-color: #c9a96a !important; }

/* 04 — the memberships island, ink navy */
html body[data-page="home"] #portals.band--creds {
  background: #0d1d31 !important;
  color: #eef0f4 !important;
}
html body[data-page="home"] #portals .chapter,
html body[data-page="home"] #portals .chapter__index,
html body[data-page="home"] #portals .chapter__label { color: #c9d2de !important; }
html body[data-page="home"] #portals .chapter__rule { background: rgba(201, 210, 222, 0.28) !important; }
html body[data-page="home"] #portals .h-section,
html body[data-page="home"] #portals #creds-title { color: #f4f1ea !important; }
html body[data-page="home"] #portals .lede { color: #c9d2de !important; }
html body[data-page="home"] #portals .hx30__pill--link {
  background: #f7f3ea !important;
  color: #14251f !important;
  border-color: rgba(247, 243, 234, 0.35) !important;
}
html body[data-page="home"] #portals .hx30__pill--link:hover { border-color: #c9a96a !important; }
html body[data-page="home"] #portals .creds__card { border-color: rgba(247, 243, 234, 0.16) !important; }

/* 23 Aug 2026 — the assistant island said "Tell Dukes what you need"
   twice (chapter label + title). The chapter now reads "01 Dukes
   Assistant", the separate kicker is gone, and the phone button no
   longer wraps. */
html body[data-page="home"] .asst-min .chapter { margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem) !important; }
html body[data-page="home"] .asst-min .asst-min__stage { padding-top: 0 !important; gap: clamp(1rem, 1.8vw, 1.5rem) !important; }
@media (max-width: 47.99em) {
  html body[data-page="home"] .asst-min__cta {
    white-space: nowrap;
    min-height: 52px !important;
    padding: 0 20px !important;
    font-size: 0.98rem !important;
    gap: 10px !important;
  }
  html body[data-page="home"] .asst-min__cta svg { inline-size: 18px !important; block-size: 18px !important; }
  html body[data-page="home"] .asst-min .chapter { justify-content: center !important; gap: 10px; }
}

/* 23 Aug 2026 — the brass rules return, either side of "01 Dukes Assistant". */
html body[data-page="home"] .asst-min .chapter {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: auto !important;
  margin-inline: auto !important;
}
html body[data-page="home"] .asst-min .chapter::before,
html body[data-page="home"] .asst-min .chapter::after {
  content: "";
  display: block;
  width: clamp(34px, 5vw, 88px);
  height: 1px;
  background: #c9a96a;
  opacity: 0.85;
}
html body[data-page="home"] .asst-min .chapter__index,
html body[data-page="home"] .asst-min .chapter__label { color: #c9a96a !important; }
html body[data-page="home"] .asst-min .chapter { display: flex !important; width: 100% !important; }

/* ======================================================================
 * 23 Aug 2026 — THE PROFESSIONAL PALETTE, the Oakwood Estates register
 * Aarav pointed at: a clean white ground, content plates in the quietest
 * warm grey with a hairline, one deep chocolate block for the assistant,
 * a pale sky block for memberships, the oxblood action unchanged. No
 * taupe, no tinted ground - the photography and the film carry the colour.
 * ==================================================================== */
html body[data-page="home"] { background: #ffffff !important; }

/* the quiet plates */
html body[data-page="home"] #routes,
html body[data-page="home"] #reviews {
  background: #f6f4f0 !important;
  border: 1px solid #e7e2d9 !important;
  box-shadow: none !important;
}
html body[data-page="home"] .rw2__card { background: #ffffff !important; }

/* 01 — the assistant, chocolate */
html body[data-page="home"] .hx-band--assistant.asst-min {
  background: #4a2a1f !important;
  color: #f4ede4 !important;
  box-shadow: 0 26px 54px -34px rgba(40, 20, 10, 0.55) !important;
}
html body[data-page="home"] .asst-min__title { color: #fbf6ee !important; }

/* 04 — memberships, pale sky with ink */
html body[data-page="home"] #portals.band--creds {
  background: #e9f0f7 !important;
  color: #14222f !important;
  border: 1px solid #d6e1ec !important;
}
html body[data-page="home"] #portals .chapter,
html body[data-page="home"] #portals .chapter__index,
html body[data-page="home"] #portals .chapter__label { color: #4a5d70 !important; }
html body[data-page="home"] #portals .chapter__rule { background: rgba(74, 93, 112, 0.25) !important; }
html body[data-page="home"] #portals .h-section,
html body[data-page="home"] #portals #creds-title { color: #14222f !important; }
html body[data-page="home"] #portals .lede { color: #3f5063 !important; }
html body[data-page="home"] #portals .hx30__pill--link { background: #ffffff !important; color: #14222f !important; border-color: #cfdae6 !important; }
html body[data-page="home"] #portals .creds__card { background: #ffffff !important; border-color: #d6e1ec !important; }

/* the header sits on white now: keep its parchment, add a hairline so it has an edge */
html body[data-page="home"] .site-head { border-bottom: 1px solid #e7e2d9; }

/* ======================================================================
 * 23 Aug 2026 — the phone hero stack, relaid. Aarav: "remove the stamp
 * duty calculator on the phone and change the layout from a vertical
 * drop-down." Five stacked rows become three: the two actions side by
 * side, then Guaranteed Rent beside a compact rating. Desktop untouched.
 * ==================================================================== */
@media (max-width: 47.99em) {
  html body[data-page="home"] .hxo2--split .hxo2__copy {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 10px;
    row-gap: 0;
    justify-items: center !important;
    align-content: center !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__copy > * { grid-column: 1 / -1; }
  html body[data-page="home"] .hxo2--split .hxo2__actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 1.2rem !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__btn {
    width: 100% !important;
    min-height: 50px !important;
    padding: 0 12px !important;
    font-size: 0.92rem !important;
    justify-content: center !important;
    white-space: nowrap;
  }
  html body[data-page="home"] .hxo2--split .hxo2__btn svg { display: none !important; }
  /* row two: Guaranteed Rent on the left, rating on the right */
  html body[data-page="home"] .hxo2--split .hxo2__tools { grid-column: 1 !important; width: 100% !important; margin-top: 10px !important; justify-content: stretch !important; }
  html body[data-page="home"] .hxo2--split .hxo2__tool { width: 100% !important; justify-content: center !important; min-height: 44px !important; padding: 0 10px !important; font-size: 0.86rem !important; white-space: nowrap; }
  html body[data-page="home"] .hxo2--split .hxo2__tool[href="/stamp-duty-calculator/"] { display: none !important; }
  html body[data-page="home"] .hxo2--split .hxo2__rating {
    grid-column: 2 !important;
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 10px !important;
    padding: 0 10px !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__rating .hxo2__count { display: none !important; }
}

/* 23 Aug 2026 — phone hero, round 2: the Google rating pill goes; the
   Guaranteed Rent pill takes the full second row under the two actions. */
@media (max-width: 47.99em) {
  html body[data-page="home"] .hxo2--split .hxo2__rating { display: none !important; }
  html body[data-page="home"] .hxo2--split .hxo2__tools { grid-column: 1 / -1 !important; }
  html body[data-page="home"] .hxo2--split .hxo2__tool { min-height: 48px !important; font-size: 0.92rem !important; }
}

/* 26 Aug 2026 — sub-360 phones only: the paired hero actions keep their
   nowrap labels, and half of a 320px plate cannot hold "Book a sales
   valuation". Below 360px the pair stacks full-width; 360px and up keeps
   Aarav's side-by-side row untouched. */
@media (max-width: 22.49em) {
  html body[data-page="home"] .hxo2--split .hxo2__actions { grid-template-columns: 1fr !important; }
}

/* 26 Aug 2026 — keep the shared greeting-card layout authoritative on home. */
html body[data-page="home"] .dbubble {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow: visible !important;
  width: min(20rem, calc(100vw - 2rem)) !important;
  max-width: calc(100vw - 2rem) !important;
  box-sizing: border-box !important;
  padding: 1.25rem 1.25rem 1.1rem !important;
  border: 1px solid rgba(123, 36, 48, 0.18) !important;
  border-radius: 18px !important;
  background: #fbf8f2 !important;
  box-shadow: 0 24px 52px -24px rgba(13, 29, 49, 0.5) !important;
}
html body[data-page="home"] .dbubble p {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 1rem !important;
  font-size: 0.95rem !important;
  font-weight: 620 !important;
  line-height: 1.5 !important;
}
html body[data-page="home"] .dbubble .dbubble__x {
  top: -10px !important;
  right: -10px !important;
  bottom: auto !important;
  left: auto !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  font-size: 0.8rem !important;
  box-shadow: 0 8px 18px -9px rgba(13, 29, 49, 0.55) !important;
  transform: none !important;
}
html body[data-page="home"] .dbubble .dbubble__x::before {
  content: "";
  position: absolute;
  inset: -6px;
}
html body[data-page="home"] .dbubble .dbubble__go {
  align-self: center !important;
  margin: 0 auto !important;
  min-height: 42px !important;
  padding: 0.65rem 1rem !important;
  border-radius: 10px !important;
}

/* ======================================================================
 * 26 Aug 2026 - THE WIDE-SCREEN LAYER. Aarav (big monitor): "there is
 * too much space on the left and right." The island ladder was tuned on
 * a ~1700px laptop, so every band carries a fixed px cap (hero 1680,
 * bands 1540-1840). On a 2560px screen those caps bite and a third of
 * the viewport turns into gutter. Past 108em the ladder goes back to
 * the vw fractions it was designed at, so the islands keep the same
 * PROPORTIONS on any monitor; generous caps only guard 3440px+
 * ultrawides. The slim espresso assistant island grows gently (it is
 * meant to be the narrow rung), and the inner column cap lifts so
 * content follows its island instead of floating inside it.
 * ==================================================================== */
@media (min-width: 108em) {
  html body[data-page="home"] .hxo2--split {
    width: min(calc(100% - 3rem), 94vw, 2560px) !important;
  }
  html body[data-page="home"] .hx-band--assistant.asst-min {
    width: min(calc(100% - 2rem), clamp(58rem, 52vw, 78rem)) !important;
  }
  html body[data-page="home"] .hx-band--clay { width: min(92vw, 2500px) !important; }
  html body[data-page="home"] .hx-band--trust { width: min(95vw, 2590px) !important; }
  html body[data-page="home"] .band--reviews { width: min(89vw, 2420px) !important; }
  html body[data-page="home"] .band--contact { width: min(93vw, 2530px) !important; }
  /* the inner column follows its island: 1400px was 79vw of the 1780px
     design viewport, so the variable becomes that fraction and every
     band's content (.hx-col, the rw2 wall, contact panels) scales with
     the ladder instead of floating centred inside it */
  html body[data-page="home"] { --hx-colw: min(79vw, 2100px); }
}

/* ======================================================================
 * 26 Aug 2026 - THE FULL-BLEED PASS. Aarav (pointing at Apex Real
 * Estate): "are you able to do anything about the white space, like
 * Apex has done it." Apex runs full-bleed colour bands - the block
 * backgrounds touch both screen edges and only the CONTENT keeps a
 * margin. So the homepage island grammar goes edge-to-edge on desktop:
 * the hero film meets the header and both sides, every band spans the
 * full width, the corner radii die at the screen edge, and the
 * between-island margins close so no ground shows through. The inner
 * column (--hx-colw, incl. the wide-screen scaling above) still
 * contains the content, which is exactly the Apex pattern. Phone
 * layout untouched. This deliberately outranks the wide-screen ladder
 * layer above it - the ladder solved proportion, this solves bleed.
 * ==================================================================== */
@media (min-width: 62em) {
  html body[data-page="home"] .hxo2 { padding: 0 !important; }
  html body[data-page="home"] .hxo2--split {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  html body[data-page="home"] .hxo2--split .hxo2__plate,
  html body[data-page="home"] .hxo2--split .hxo2__cinema,
  html body[data-page="home"] .hxo2--split .hxo2__cinema .hxo2__film,
  html body[data-page="home"] .hxo2--split .hxo2__cinema .hxo2__poster,
  html body[data-page="home"] .hxo2--split .hxo2__veil {
    border-radius: 0 !important;
  }
  html body[data-page="home"] .hx-band--assistant.asst-min,
  html body[data-page="home"] .hx-band--clay,
  html body[data-page="home"] .hx-band--trust,
  html body[data-page="home"] .band--reviews,
  html body[data-page="home"] .band--creds,
  html body[data-page="home"] .band--contact {
    width: 100% !important;
    max-width: none !important;
    margin-block: 0 !important;
    margin-inline: 0 !important;
    border-radius: 0 !important;
  }
}
/* 26 Aug 2026 - full-bleed pass, part 2: the footer's 64px top margin
   was the last strip of white ground between the contact band and the
   cream footer. Homepage-scoped spacing only - the footer itself is
   shared shell and untouched. */
@media (min-width: 62em) {
  html body[data-page="home"] .site-foot { margin-top: 0 !important; }
}

/* 26 Aug 2026 - client headline: "Let Dukes handle it." with the
   statement line "Stress-free property services." beneath it (Amrit's
   copy, WhatsApp 26 Aug). On phones dukes.css's type normaliser forces
   h1 > span to inherit the capped h1 size, which made the statement
   line the SAME size as the display line and wrapped it to two lines -
   the hierarchy vanished. Homepage-scoped counter, out-specifies
   html body h1:not(#p#q#r) > span; keeps the statement subordinate and
   on one line down to 320px. Shared dukes.css untouched. */
@media (max-width: 47.99em) {
  /* the 12ch display cap was tuned for "See your next move." - it pins
     the new lockup to 214px in a 373px column and wraps both lines.
     Let the phone lockup use the column; the copy is centre-aligned. */
  html body[data-page="home"] h1.hxo2__title:not(#p#q#r) {
    max-width: none !important;
  }
  html body[data-page="home"] h1.hxo2__title:not(#p#q#r) > .hxo2__title-em {
    font-size: clamp(1.1rem, 5vw, 1.4rem) !important;
    line-height: 1.3 !important;
    margin-top: 0.55rem;
  }
}
/* ======================================================================
 * 26 Aug 2026 - THE ASSISTANT STRIP. Aarav: "the Dukes Assistant colour
 * is too strong and it looks unprofessional with all that empty space."
 * Two cures in one layer. The heavy chocolate slab goes: the band joins
 * the quiet-plate register on white, ink type, deep brass chapter, the
 * oxblood action unchanged - the film above and the cards below carry
 * the colour. And the emptiness goes with it: on desktop the centred
 * lockup becomes a compact horizontal invitation - the standard
 * left-hand chapter row, then the title on the left and the button on
 * the right - so the full-bleed width is USED, not hollow. The phone
 * keeps its centred stack, just on the new quiet ground.
 * ==================================================================== */
html body[data-page="home"] .hx-band--assistant.asst-min {
  background: #ffffff !important;
  color: #171a20 !important;
  box-shadow: none !important;
  padding-block: clamp(30px, 3.2vw, 46px) !important;
}
html body[data-page="home"] .asst-min .chapter,
html body[data-page="home"] .asst-min .chapter__index,
html body[data-page="home"] .asst-min .chapter__label { color: #74511a !important; }
html body[data-page="home"] .asst-min__title { color: #171a20 !important; }
html body[data-page="home"] .asst-min__cta {
  box-shadow: 0 14px 28px -18px rgba(123, 36, 48, 0.45) !important;
}
html body[data-page="home"] .asst-min__cta:focus-visible { outline-color: #74511a !important; }

@media (min-width: 62em) {
  /* the chapter returns to the site's standard left row with its long rule */
  html body[data-page="home"] .asst-min .chapter {
    justify-content: flex-start !important;
    width: 100% !important;
    margin-inline: 0 !important;
    margin-bottom: clamp(16px, 1.9vw, 24px) !important;
    text-align: left !important;
  }
  html body[data-page="home"] .asst-min .chapter::before,
  html body[data-page="home"] .asst-min .chapter::after { content: none !important; display: none !important; }
  html body[data-page="home"] .asst-min .chapter .chapter__rule { display: block !important; }

  /* the invitation reads across the strip: title left, action right */
  html body[data-page="home"] .asst-min .asst-min__stage {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(1.5rem, 3vw, 3rem) !important;
    padding: 0 !important;
    text-align: left !important;
  }
  html body[data-page="home"] .asst-min__title {
    font-size: clamp(1.9rem, 2.5vw, 2.6rem) !important;
    line-height: 1.08 !important;
  }
  html body[data-page="home"] .asst-min__title br { display: none; }
  html body[data-page="home"] .asst-min__cta { margin-top: 0 !important; flex: none; }
}

/* 26 Aug 2026 - blur-wings layer REMOVED same evening on Aarav's call
   ("change back the homepage without the blur on the sides"). The film
   returns to the full-bleed pass above: cover the full width on every
   monitor, no native-width cap, no feathered edges, no ambient wash. */

/* 26 Aug 2026 - assistant strip, second round. Aarav: "add a gap between
   the Dukes Assistant [chapter] and Chat with the Dukes Assistant, and
   move the button near the middle." More air under the chapter row, and
   the action leaves the far-right edge: auto margins centre it in the
   space beside the title, so it sits near the middle of the strip. */
html body[data-page="home"] .asst-min .chapter { margin-bottom: clamp(24px, 2.8vw, 38px) !important; }
@media (min-width: 62em) {
  html body[data-page="home"] .asst-min .asst-min__stage { justify-content: flex-start !important; }
  html body[data-page="home"] .asst-min__cta { margin-inline: auto !important; }
}

/* ======================================================================
 * 26 Aug 2026 - ASSISTANT ISLAND, round 3. Aarav: "don't use white -
 * use a different colour and create separation from the hero and 02,
 * like the separate boxes we have on other pages. 01 Dukes Assistant
 * middle-top with lines left and right of it, then the title and the
 * chat button next to each other, nearer the middle."
 * So the band leaves the full-bleed run and becomes a floating island
 * again: the guide's pale sage-blue (--hx-sage #dbe8ec - the colour the
 * palette originally assigned to THIS band), 30px corners, clear gaps
 * to the film above and the routes plate below. Chapter centred with
 * brass rules either side; title + action sit as one centred pair.
 * ==================================================================== */
@media (min-width: 62em) {
  html body[data-page="home"] .hx-band--assistant.asst-min {
    background: #dbe8ec !important;
    border: 0 !important;
    width: min(calc(100% - 3rem), 1480px) !important;
    margin-inline: auto !important;
    margin-block: clamp(22px, 2.4vw, 36px) !important;
    border-radius: 30px !important;
    box-shadow: 0 24px 48px -36px rgba(23, 26, 32, 0.35) !important;
    padding-block: clamp(34px, 3.4vw, 52px) !important;
  }

  /* the chapter goes back to the centred lockup with its short rules */
  html body[data-page="home"] .asst-min .chapter {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    width: auto !important;
    margin-inline: auto !important;
    text-align: center !important;
  }
  html body[data-page="home"] .asst-min .chapter::before,
  html body[data-page="home"] .asst-min .chapter::after {
    content: "" !important;
    display: block !important;
    width: clamp(34px, 5vw, 88px);
    height: 1px;
    background: #74511a;
    opacity: 0.7;
  }
  html body[data-page="home"] .asst-min .chapter .chapter__rule { display: none !important; }
  html body[data-page="home"] .asst-min .hx-col { display: grid; justify-items: center; }

  /* title and action: one pair, centred on the island */
  html body[data-page="home"] .asst-min .asst-min__stage {
    width: 100%;
    justify-content: center !important;
    gap: clamp(2rem, 4vw, 4rem) !important;
  }
  html body[data-page="home"] .asst-min__cta { margin-inline: 0 !important; }
}

/* the phone card wears the same sage - no white at any width */
html body[data-page="home"] .hx-band--assistant.asst-min { background: #dbe8ec !important; }

/* ======================================================================
 * 26 Aug 2026 - ASSISTANT ISLAND, round 4: THE PREMIER COLOUR.
 * Aarav: "change it to the premier colour, not this light blue."
 * The island wears the brand's champagne (--champagne #e8dcc4 - the
 * site's premium control colour, the header-parchment family). Layout
 * untouched from round 3. The chapter deepens one step: brass #74511a
 * sat at ~4:1 on champagne, below the 4.5:1 small-text line.
 * ==================================================================== */
html body[data-page="home"] .hx-band--assistant.asst-min {
  background: #e8dcc4 !important;
  box-shadow: 0 24px 48px -36px rgba(64, 46, 14, 0.45) !important;
}
html body[data-page="home"] .asst-min .chapter,
html body[data-page="home"] .asst-min .chapter__index,
html body[data-page="home"] .asst-min .chapter__label { color: #5f420f !important; }
@media (min-width: 62em) {
  html body[data-page="home"] .asst-min .chapter::before,
  html body[data-page="home"] .asst-min .chapter::after { background: #74511a; opacity: 0.8; }
}