/* ======================================================================
 * 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; }