/* ==========================================================================
   LORQEN — VANTAGE
   Signature: the identity layer
   --------------------------------------------------------------------------
   Loads after the shared component and page cores and before fx.css. It owns
   the header, the hero, the buttons, the media plates and the footer — and
   the four surface classes, which in this theme are not four colours but
   four DISTANCES: how near the light is.

     .surface-ivory    → the interior. Pewter, lit, close.
     .surface-dark     → the road. Green, with the headlamp crossing it.
     .surface-charcoal → the far distance. The deepest green, one per page.
     .surface-wine     → the cellar door. Oxblood.
   ========================================================================== */

/* ==========================================================================
   THE FILL
   The four distances above were drawn with light and with the colour of
   what sits on them, on one continuous dark ground -- the rhythm was
   implied, not seen. The client asked for it to actually read as the page
   scrolls -- dark, then light, then light again -- so each class below
   also paints the ground its name promised.

   A light band needs more than a new background: everything already
   written against --text, --text-muted, --accent and --line exists so that
   redefining those four roles here re-themes every heading, icon, rule and
   hover state underneath for free -- the same mechanism the client's own
   contrast audit anticipated ("Gold is never small text on a light ground;
   Gold-Dark takes that job"). The individual .surface-ivory overrides
   already in this file (buttons, cards, form fields) still apply on top.

   Dark grounds keep --text and friends as they are: Ivory on Black is
   already AAA per the audit, so nothing needs to change but the fill.

   There is no .surface-wine fill. The client's colour brief scopes Wine
   Accent to the Wine Tours page, and there only for badges and tags -- not
   a section wash -- so the two sections that used to carry it (the home
   page's wine spotlight, the wine-tours testimonials) are ivory instead,
   and .chip--wine below is what actually carries the wine colour, gated to
   that one page.
   ========================================================================== */

.surface-dark     { background: var(--bg); }
.surface-charcoal { background: var(--green-4); --bg: var(--green-4); }

.surface-ivory {
  background:     var(--pewter-2);
  --bg:           var(--pewter-2);
  --text:         var(--ink);
  --text-muted:   var(--slate);
  --text-dim:     var(--stone);
  --accent:       var(--bronze);
  --accent-hover: var(--bronze-2);
  --mark:         var(--bronze);
  --line:         var(--pewter-4);
  --line-soft:    var(--pewter-3);
  --line-accent:  var(--pewter-4);
}

/* .wipe (the retracting image-reveal panel) is painted in var(--bg), "the
   section's own ground colour" -- so --bg has to actually change with the
   section or the panel paints the global dark ground through a light one.
   Redefined above alongside the visible background so the two can never
   drift apart. */

/* ==========================================================================
   HEADER
   It does not switch between two states at a threshold. --fx-y runs 0 → 1
   over the first 240 pixels and everything about the header is interpolated
   from it: the height, the tint, the weight of its rule. By the time you
   notice it has changed it has been changing for a while, which is the
   difference between a header that responds and a header that snaps.
   ========================================================================== */

.header {
  height: calc(var(--header-h) - (var(--header-h) - var(--header-h-stuck)) * var(--fx-y, 0));
  background: color-mix(in srgb, var(--green-4) calc(var(--fx-y, 0) * 92%), transparent);
  backdrop-filter: blur(calc(var(--fx-y, 0) * 14px)) saturate(140%);
  -webkit-backdrop-filter: blur(calc(var(--fx-y, 0) * 14px)) saturate(140%);
  border-bottom: var(--hair) solid color-mix(in srgb, var(--brass) calc(var(--fx-y, 0) * 45%), transparent);
}

.header.is-hidden { transform: none; }

/* --------------------------------------------------------------------------
   FULL-WIDTH HEADER
   Every other bar on the page is capped at --container so a paragraph stays
   readable. A header is not a paragraph: on a wide screen, stopping the
   brand mark and the phone/Book Now cluster at that same 1280px measure
   just strands them in the middle of the bar with dead space either side.
   The header keeps the page's own edge rhythm (the fluid --gutter) but
   drops the content cap entirely, so the logo sits near the true left
   edge and the phone/Book Now cluster sits near the true right edge.
   -------------------------------------------------------------------------- */
.header__inner {
  max-width: none;
  padding-inline: var(--gutter);
}

.brand__logo--header { height: calc(40px - 5px * var(--fx-y, 0)); width: auto; }
.brand__name { font-family: var(--font-display); font-weight: 400; }
.brand__tag  { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.24em; color: var(--brass); }

.nav__link {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}

.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--pewter); }

.header__phone {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--sage);
}

.header__phone:hover { color: var(--brass); }
.burger__bar { background: var(--pewter); height: 1px; border-radius: 0; }
.progress__bar { background: linear-gradient(90deg, var(--brass) 0%, var(--brass-lt) 100%); transform-origin: left center; }

/* --------------------------------------------------------------------------
   THE 1024–1279 BAND
   The core already drops the phone number here so that the full navigation
   fits beside the brand and the CTA. These themes set their nav in tracked
   type, which is wider than the core budgeted for, so the band needs a
   little more taken out of it — otherwise the Book Now button runs past the
   right edge of the page and is clipped by the body.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__list { gap: 1rem; }
  .nav__link { letter-spacing: 0.03em; }
  .header .btn { padding-inline: 1.05rem; }
  .header__inner { gap: 1.25rem; }
}

/* ==========================================================================
   DRAWER
   ========================================================================== */

.drawer {
  background: var(--green-4);
  border-left: var(--hair) solid var(--line-accent);
}

.drawer__item { border-color: var(--line-soft); }

.drawer__link {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--pewter);
}

.drawer__link:hover { color: var(--brass); }
.drawer__foot { border-top: var(--hair) solid var(--line-accent); }

/* ==========================================================================
   BUTTONS
   fx.css owns the mechanism — the resting fill and the sweep are two
   pseudo-elements behind the label, and the element's own background-color
   is out of play. This file only says what colour each of them is, per
   ground, which is the whole of a button's identity once the movement is
   settled elsewhere.
   ========================================================================== */

.btn {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  border-radius: var(--radius);
  border: var(--btn-border-w) solid currentColor;
  padding: 0.92rem 1.9rem;
  line-height: 1.25;
}

/* Dark ground — the default. A brass button fills with pewter; an outlined
   one fills with pewter too, so the pair read as one family under the light
   rather than as two different controls. */
.btn {
  color: var(--pewter);
  border-color: color-mix(in srgb, var(--pewter) 42%, transparent);
  --fx-btn-rest: transparent;
  --fx-btn-sweep: var(--pewter);
  --fx-btn-sweep-text: var(--green);
}

.btn--primary {
  color: var(--on-accent);
  border-color: var(--brass);
  /* Literal background, not just the --fx-btn-rest custom property --
     so every primary button (Explore Wine Tours, the fleet "Book the
     ..." buttons, Enquire About Corporate Accounts, etc.) shows the
     same shine as .header__cta immediately, rather than the flat
     var(--btn-fill) from components.css until the fx layer takes over. */
  background: linear-gradient(125deg, var(--brass) 0%, var(--brass) 30%, var(--brass-lt) 42%, color-mix(in srgb, var(--brass-lt) 45%, white) 50%, var(--brass-lt) 58%, var(--brass) 70%, var(--brass) 100%);
  --fx-btn-rest: linear-gradient(125deg, var(--brass) 0%, var(--brass) 30%, var(--brass-lt) 42%, color-mix(in srgb, var(--brass-lt) 45%, white) 50%, var(--brass-lt) 58%, var(--brass) 70%, var(--brass) 100%);
  --fx-btn-sweep: var(--pewter);
  --fx-btn-sweep-text: var(--green);
}

.btn--primary:hover { border-color: var(--pewter); }

/* Light ground. */
.surface-ivory .btn {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 34%, transparent);
  --fx-btn-sweep: var(--ink);
  --fx-btn-sweep-text: var(--pewter);
}

.surface-ivory .btn--primary {
  color: var(--on-accent);
  border-color: var(--bronze);
  background: linear-gradient(125deg, var(--brass) 0%, var(--brass) 30%, var(--brass-lt) 42%, color-mix(in srgb, var(--brass-lt) 45%, white) 50%, var(--brass-lt) 58%, var(--brass) 70%, var(--brass) 100%);
  --fx-btn-rest: linear-gradient(125deg, var(--brass) 0%, var(--brass) 30%, var(--brass-lt) 42%, color-mix(in srgb, var(--brass-lt) 45%, white) 50%, var(--brass-lt) 58%, var(--brass) 70%, var(--brass) 100%);
  --fx-btn-sweep: var(--green);
  --fx-btn-sweep-text: var(--pewter);
}

/* The cellar door. */
.surface-wine .btn,
.page-hero--wine .btn {
  --fx-btn-sweep: var(--brass-lt);
  --fx-btn-sweep-text: var(--oxblood-3);
}

/* ==========================================================================
   PLATES
   Vantage has none of Marque's pewter panels. A card here is a pane of the
   ground held slightly forward: a wash of light on the green, a hairline,
   and a top edge that catches. It is the difference between something
   screwed on and something lit.
   ========================================================================== */

.card,
.callout,
.package,
.mode,
.selector__card,
.faq-panel,
.stat-plate,
.quickbook__panel,
.form,
.integration-slot,
.map-slot,
.doc-notice {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pewter) 7%, transparent) 0%, transparent 62%), var(--green-2);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  box-shadow: var(--lift-sm);
}

/* A specular line along the top edge — one pixel, at 18% — that brightens
   and lengthens on hover. It is the only "shine" in the theme. */
.card::before,
.package::before,
.mode::before,
.callout::before,
.quickbook__panel::before,
.faq-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--beam);
  opacity: 0.35;
  transform: scaleX(0.32);
  transform-origin: left center;
  transition: transform var(--fx-dur-hover) var(--fx-ease), opacity var(--fx-dur-hover) var(--fx-ease);
  pointer-events: none;
  z-index: 2;
}

.card:hover::before,
.package:hover::before,
.mode:hover::before,
.callout:hover::before,
.quickbook__panel:hover::before,
.faq-panel:hover::before { transform: scaleX(1); opacity: 1; }

.card:hover, .package:hover, .mode:hover, .selector__card:hover {
  border-color: color-mix(in srgb, var(--brass) 52%, transparent);
  box-shadow: var(--lift);
}

.surface-ivory :is(.card, .callout, .package, .mode, .selector__card, .faq-panel, .stat-plate, .quickbook__panel, .form, .integration-slot, .map-slot, .doc-notice) {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--pewter-2) 100%);
  border-color: var(--pewter-4);
  color: var(--ink);
  box-shadow: 0 8px 26px rgba(11, 10, 8, 0.07);
}

.surface-ivory :is(.card, .package, .mode, .callout, .quickbook__panel, .faq-panel)::before {
  background: linear-gradient(90deg, transparent 0%, var(--bronze) 52%, transparent 100%);
  opacity: 0.22;
}

.surface-ivory :is(.card, .package, .mode, .selector__card):hover {
  border-color: color-mix(in srgb, var(--bronze) 46%, transparent);
  box-shadow: 0 20px 46px rgba(11, 10, 8, 0.13);
}

/* --------------------------------------------------------------------------
   RULED STRIPS
   These cannot lift — they have no plate to lift — so on hover they step
   away from their rule instead, and the rule takes the accent.
   -------------------------------------------------------------------------- */
.step, .usecase, .assurance, .highlight, .coverage, .region {
  border-color: var(--line);
}

/* .step / .usecase / .highlight moved to their own gentle wash-and-drift
   treatment below (same reasoning as .pillar): a hard border-color swap
   plus a padding shove read as harsh.

   .assurance was the last one left on this system, and on 2026-09-20 it
   came off it too -- see block 32 at the foot of this file for why. The
   rule that stood here was:

       .assurance:hover { border-color: var(--brass); padding-left: var(--sp-3); }

   and it is the reason the booking block grew taller on hover. Removed
   rather than overridden, because an override would have had to guess
   which of the three cells it was fighting for. */

/* .pillar (Why LORQEN) gets its own, gentler treatment: the shared
   ruled-strip hover above jumps the whole block sideways on a hard
   expo-out curve, and disagreed with the divider CSS on alternating
   columns (some blocks shifted, some didn't, because a higher-specificity
   nth-child rule was silently winning the padding fight). This version
   uses transform instead of padding -- so it never fights the column
   dividers -- eases softly, and gives the number and title their own
   slight, staggered lift instead of one flat shove. */
.pillar {
  border-color: var(--line);
  overflow: hidden;
}

/* No border highlight, no resizing -- a soft warm wash breathes in from
   the left behind the content, and the number/title/text drift a few
   pixels in step with it. Nothing changes size, nothing snaps. */
.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brass) 9%, transparent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.7s var(--fx-ease-soft, ease);
  pointer-events: none;
}

.pillar:hover::before { opacity: 1; }

.pillar__num, .pillar__title, .pillar__text {
  position: relative;
  z-index: 1;
  display: block;
  transition:
    transform 0.7s var(--fx-ease-soft, ease),
    color     0.7s var(--fx-ease-soft, ease);
}

.pillar:hover .pillar__num   { transform: translateX(8px); color: var(--brass-lt); }
.pillar:hover .pillar__title { transform: translateX(6px); }
.pillar:hover .pillar__text  { transform: translateX(4px); }

/* .step (How It Works), .usecase (Which vehicle suits what) and
   .highlight (contact Call Us / Email Us) get the same treatment as
   .pillar just above: their existing structural rule (top border on
   step/usecase, bottom border on highlight) stays exactly as it is --
   only the hover feedback changes. No border-color swap, no padding
   shove, no resizing. A soft warm wash breathes in behind the content
   and the icon/title/text drift a few pixels in step with it. */
.step, .usecase, .highlight {
  overflow: hidden;
}

.step::after, .usecase::before, .highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brass) 9%, transparent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.7s var(--fx-ease-soft, ease);
  pointer-events: none;
}

.step:hover::after, .usecase:hover::before, .highlight:hover::before { opacity: 1; }

.step::before,
.step__title, .step__text,
.usecase__icon, .usecase__title, .usecase__text,
.highlight__icon, .highlight__label, .highlight__value, .highlight__note {
  position: relative;
  z-index: 1;
  display: block;
  transition:
    transform 0.7s var(--fx-ease-soft, ease),
    color     0.7s var(--fx-ease-soft, ease);
}

.step:hover::before      { transform: translateX(8px); color: var(--brass-lt); }
.step:hover .step__title { transform: translateX(6px); }
.step:hover .step__text  { transform: translateX(4px); }

.usecase:hover .usecase__icon  { transform: translateX(8px); color: var(--brass-lt); }
.usecase:hover .usecase__title { transform: translateX(6px); }
.usecase:hover .usecase__text  { transform: translateX(4px); }

.highlight:hover .highlight__icon  { transform: translateX(8px); color: var(--brass-lt); }
.highlight:hover .highlight__label { transform: translateX(6px); }
.highlight:hover .highlight__value { transform: translateX(5px); }
.highlight:hover .highlight__note  { transform: translateX(4px); }

.package--featured {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brass) 12%, transparent) 0%, transparent 55%), var(--green-3);
  border-color: var(--brass);
}

.package__flag {
  background: linear-gradient(125deg, var(--brass) 0%, var(--brass) 30%, var(--brass-lt) 42%, color-mix(in srgb, var(--brass-lt) 45%, white) 50%, var(--brass-lt) 58%, var(--brass) 70%, var(--brass) 100%);
  color: var(--on-accent);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-radius: var(--radius);
}

.package__price { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; }

.chip {
  border-radius: 999px;
  border: var(--hair) solid currentColor;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Wine Accent is scoped to the Wine Tours page and, there, only to chips
   -- everywhere else a wine-tagged chip is just the shared accent-coloured
   chip components.css already draws. */
body[data-page="wine-tours"] .chip--wine { border-color: var(--oxblood-2); color: var(--oxblood-2); }
body[data-page="wine-tours"] .surface-dark .chip--wine,
body[data-page="wine-tours"] .surface-charcoal .chip--wine { border-color: var(--brass); color: var(--brass); }
body[data-page="wine-tours"] .surface-ivory .chip--wine { border-color: var(--oxblood) !important; color: var(--oxblood) !important; }

/* The statistic is the one place the display face is allowed a number. */
.stat__value, .stat-plate__value {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--pewter);
}

.surface-ivory :is(.stat__value, .stat-plate__value) { color: var(--ink); }

.stat__label, .stat-plate__label {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.badge__mark { border-radius: 50%; border-width: var(--hair); }
.badge__name { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.06em; }
.check input, .checks input { border-radius: var(--radius); border-width: var(--hair); }

/* ==========================================================================
   FORMS
   ========================================================================== */

.field__label {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-dim);
}

.field__control {
  border-radius: var(--radius);
  border: var(--hair) solid var(--line);
  background: color-mix(in srgb, var(--green-4) 55%, transparent);
  color: var(--text);
  transition: border-color var(--fx-dur-fast) var(--fx-ease), box-shadow var(--fx-dur-fast) var(--fx-ease), background var(--fx-dur-fast) var(--fx-ease);
}

.field__control:focus {
  border-color: var(--brass);
  background: color-mix(in srgb, var(--green-4) 75%, transparent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.surface-ivory .field__control { background: #FFFFFF; border-color: var(--pewter-4); color: var(--ink); }
.surface-ivory .field__control:focus { border-color: var(--bronze); box-shadow: 0 0 0 3px var(--focus-ring); }

/* --------------------------------------------------------------------------
   THE FORM IS A BARE <form>
   The shared core gives .form nothing but `position: relative` — it is not a
   panel there, it is an element the fields sit inside. All three of the new
   themes DO draw it as a plate, so the inset the other plates inherit from
   the core has to be supplied here. Without it the submit button and the
   privacy note sit flush against the plate's own bottom edge.
   -------------------------------------------------------------------------- */
.form { padding: clamp(1.5rem, 1rem + 2.4vw, var(--sp-7)); }

/* --------------------------------------------------------------------------
   THE MAP PLACEHOLDER
   The core fixes .map-slot at 16:9 and centres its content. Below about
   560px the label and note together are taller than that box, so the ratio
   is dropped and the slot takes the height it needs.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .map-slot { aspect-ratio: auto; min-height: 56vw; }
}

/* ==========================================================================
   MEDIA
   Every plate is over-scaled and clipped, because the parallax drift needs
   somewhere to go. The frame's rule is drawn INSIDE it — .framed::before
   already does that in the core — so the drift never has an edge to expose.
   ========================================================================== */

/* Anything that can hold a parallaxing plate has to clip, or the drift shows
   the plate's edge — the one failure mode that makes parallax look broken
   rather than expensive. */
.framed, .split__media, .gallery__cell, .zoom, .media {
  overflow: hidden;
  border-radius: var(--radius);
}

/* .split__media itself needs to NOT clip: the stat-plate badge already
   overhangs its right edge by 10px (by design), and the offset frame
   below overhangs top-left. The photograph and its hover sheen still
   clip correctly -- that happens on .zoom/.media above, which keep
   overflow: hidden of their own. */
.split__media { overflow: visible; }

/* The gold rule around the photograph. It used to sit 14px up and to the
   left as a second plate peeking out behind the picture; the offset read as
   the image having slipped down-right out of its frame rather than as
   layered depth, so the frame now closes onto the photograph exactly.

   z-index moves from 0 to 2 with it: at inset 0 a frame behind the picture
   is a frame nobody sees, because .media paints over it. 2 keeps it under
   the stat-plate badge, which sits at 3. */
.split__media::before {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--hair) solid var(--brass);
  border-radius: var(--radius);
  z-index: 2;
  pointer-events: none;
}

.media, .gallery__cell {
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(150deg, var(--green-2) 0%, var(--green-3) 58%, var(--green-4) 100%);
  position: relative;
}

.surface-ivory :is(.media, .gallery__cell) {
  background: linear-gradient(150deg, var(--pewter-2) 0%, var(--pewter-3) 100%);
}

.framed::before { border-color: color-mix(in srgb, var(--pewter) 16%, transparent); border-radius: var(--radius); }
.surface-ivory .framed::before { border-color: color-mix(in srgb, var(--ink) 12%, transparent); }

.media__hint {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-dim);
}

/* A light that crosses the plate on hover. Not a highlight sitting on it —
   a reflection travelling over it, which is what a car body does. */
.zoom { position: relative; overflow: hidden; border-radius: var(--radius); }

.zoom::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: var(--sheen);
  transform: translateX(-120%);
  transition: transform 1.05s var(--fx-ease);
  pointer-events: none;
  z-index: 3;
}

.zoom:hover::after, .zoom:focus-within::after { transform: translateX(120%); }

/* ==========================================================================
   ROWS, LINKS, ACCORDION, TABLE
   ========================================================================== */

.service-row { border-color: var(--line); }
.service-row__index, .pillar__num { font-family: var(--font-display); font-weight: 400; color: var(--mark); }
.step__title, .pillar__title, .card__title, .callout__title { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.005em; }
.ticks { color: var(--line-accent); }

.link {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.link__arrow { transition: transform var(--fx-dur-hover) var(--fx-ease); }
.link:hover .link__arrow { transform: translateX(7px); }

.accordion__item { border-color: var(--line); }
.accordion__trigger { font-family: var(--font-body); font-weight: 500; }

.accordion__icon {
  border-radius: 50%;
  border: var(--hair) solid var(--line-accent);
  transition: transform var(--fx-dur-hover) var(--fx-ease), border-color var(--fx-dur-hover) var(--fx-ease), background var(--fx-dur-hover) var(--fx-ease);
}

.accordion__item.is-open .accordion__icon,
.accordion__item:has([aria-expanded="true"]) .accordion__icon {
  transform: rotate(135deg);
  border-color: var(--brass);
  background: color-mix(in srgb, var(--brass) 14%, transparent);
}

.compare { border: var(--hair) solid var(--line); border-radius: var(--radius); }
.compare th { font-family: var(--font-ui); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; }
.compare td, .compare th { border-color: var(--line); }

/* ==========================================================================
   THE RIBBON
   A marquee is the one place a page is allowed to move on its own, and it
   is the only such place in this theme.
   ========================================================================== */

.ribbon { border-block: var(--hair) solid var(--line-accent); padding-block: 0.9rem; }

.ribbon__item {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-dim);
}

.cta-band { border-block: var(--rule-w-lg, 2px) solid var(--brass); }
.footer__title { font-family: var(--font-ui); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--brass); font-size: var(--fs-label); }
.footer__social { border-radius: 50%; border-width: var(--hair); }
.footer__bottom { border-top: var(--hair) solid var(--line); }

/* components.css sets `.footer__list a:hover` to var(--btn-fill-text) --
   the colour meant for text sitting ON an accent-filled surface (dark ink,
   for gold buttons). On the footer's own near-black ground that resolves to
   near-black-on-near-black, so the link (and its currentColor underline in
   fx.css) disappears on hover/focus. Overridden here, after components.css
   in the load order, to the same --accent gold `.footer__legal a:hover`
   already correctly uses, rather than editing the shared components.css. */
.footer__list a:hover,
.footer__list a:focus-visible { color: var(--accent); }

/* ==========================================================================
   THE HERO
   Full-bleed, and the deepest green on the site, so the first thing that
   happens on arrival is the curtain lifting off something almost black and
   the headline rising out of it on a diagonal.

   The ground is not static: --fx-p on the hero drives a slow separation of
   the two light pools as you scroll away from it, so the hero is still
   moving when it leaves.
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: flex;
  align-items: center;
  background: var(--green-4);
  color: var(--pewter);
  --text: var(--pewter);
  --text-muted: var(--sage);
  --text-dim: var(--moss);
  --accent: var(--brass);
  --mark: var(--brass);
  --line: #211E19;
  --line-accent: var(--brass);
  padding-block: clamp(6rem, 3rem + 9vw, 11rem) clamp(4rem, 2rem + 6vw, 8rem);
  overflow: hidden;
  border-bottom: var(--hair) solid color-mix(in srgb, var(--brass) 40%, transparent);
}

.hero::before {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(64vw 52vw at calc(74% + var(--fx-p, 0) * 14%) calc(8% + var(--fx-p, 0) * 22%), rgba(201, 194, 174, 0.20) 0%, transparent 66%),
    radial-gradient(42vw 34vw at calc(10% - var(--fx-p, 0) * 12%) calc(94% - var(--fx-p, 0) * 20%), rgba(221, 156, 44, 0.14) 0%, transparent 70%);
}

/* The road: a single brass line that runs the width of the hero and is
   drawn as the page arrives. It is the horizon the rest of the site
   inherits, introduced once at full size. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, var(--brass) 22%, var(--brass) 78%, transparent 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.6s var(--fx-ease) 0.35s;
  z-index: 2;
}

html.fx-hero-in .hero::after { transform: scaleX(1); }
html.no-js .hero::after, html.fx-reduced .hero::after { transform: scaleX(1); transition: none; }

.hero__bg {
  position: absolute;
  inset: 0;
  top: var(--header-h);
  z-index: 0;
  background:
    radial-gradient(80vw 60vw at 50% 120%, rgba(23, 20, 15, 0.9) 0%, transparent 70%);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 3; }
.hero__title { max-width: 15ch; margin-bottom: calc(var(--sp-6) + 0.18em); }
.hero__lead  { max-width: 48ch; margin-bottom: var(--sp-7); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: clamp(3rem, 1.75rem + 4.5vw, 6rem);
}

@media (max-width: 420px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
}

.hero__trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--hair) solid color-mix(in srgb, var(--brass) 38%, transparent);
}

@media (min-width: 860px) { .hero__trust { grid-template-columns: repeat(3, 1fr); } }

.hero__trust-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: var(--sp-4);
  border-bottom: var(--hair) solid var(--line);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (min-width: 860px) {
  .hero__trust-item { border-bottom: 0; padding-right: var(--sp-6); }
  .hero__trust-item + .hero__trust-item { border-left: var(--hair) solid var(--line); padding-left: var(--sp-6); }
}

.hero__trust-item .icon-svg { flex: none; width: 17px; height: 17px; color: var(--accent); }

/* ==========================================================================
   PAGE HEROES
   ========================================================================== */

.page-hero {
  position: relative;
  background: var(--green-3);
  color: var(--pewter);
  --text: var(--pewter);
  --text-muted: var(--sage);
  --text-dim: var(--moss);
  --accent: var(--brass);
  --mark: var(--brass);
  --line: #241F17;
  padding-top: calc(var(--header-h) + clamp(4.5rem, 2.5rem + 7vw, 9rem));
  padding-bottom: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  overflow: hidden;
  border-bottom: var(--hair) solid color-mix(in srgb, var(--brass) 40%, transparent);
  /* Every interior page shares this hero, but copy length differs page to
     page (some carry a CTA row, thank-you.php is its own shorter, centred
     layout) -- left to auto height, that made the band visibly jump
     between pages. min-height gives every page the same floor, sized to
     the tallest natural variant so nothing needs to grow past its own
     content; flex centres shorter copy inside that floor rather than
     pinning it to the top. */
  min-height: clamp(28rem, 28rem + 19vw, 46rem);
  display: flex;
  align-items: center;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58vw 44vw at calc(78% + var(--fx-p, 0) * 10%) 16%, rgba(201, 194, 174, 0.16) 0%, transparent 70%);
}

.page-hero__inner { position: relative; z-index: 2; }
.page-hero__title { max-width: 20ch; margin-bottom: var(--sp-5); }
.page-hero__lead { max-width: 52ch; }

.page-hero--wine {
  background: var(--oxblood-3);
  --text-muted: var(--brass-lt);
  --text-dim: #C9A492;
  --accent: var(--brass-lt);
  --mark: var(--brass-lt);
}

.page-hero--wine::before { background: radial-gradient(58vw 44vw at calc(78% + var(--fx-p, 0) * 10%) 16%, rgba(232, 196, 104, 0.17) 0%, transparent 70%); }

.whatsapp { border-radius: 50%; border: var(--hair) solid var(--brass); box-shadow: var(--lift); }

/* ==========================================================================
   NARROW
   The headlamp and the parallax both cost a compositor layer per section.
   On a phone the sections are short enough that the sweep never reads, so
   it comes off and takes its layers with it.
   ========================================================================== */

@media (max-width: 700px) {
  .surface-dark::after, .surface-charcoal::after { display: none; }
  .hero { min-height: 0; }
  /* travel-x was 34px: a full-width plate entering from 34px off-centre is
     clipped against the section edge for the length of the reveal, which on
     a phone reads as the layout settling rather than as choreography. */
  :root { --fx-travel: 40px; --fx-travel-x: 18px; --fx-parallax-scale: 1.1; }
}

/* ==========================================================================
   THE PHONE — LEGIBILITY PASS (2026-09-12)
   --------------------------------------------------------------------------
   Added after reviewing draft 13 at 390px against the client's reference
   (chauffeuradelaide.com.au). Vantage was drawn at 1440px and then allowed
   to reflow; everything below is where reflowing alone was not enough.

   Four things were wrong on a phone, and none of them was the design:

   1. COPY SIZE. Card text, table cells and every meta line resolve to
      --fs-sm, which is 15px. Fifteen-pixel body copy is the single most
      reliable way to make an expensive site feel cheap on a handset, and
      15px form controls also make iOS Safari zoom the page on focus —
      the page then sits off-centre for the rest of the session. 16px is
      the floor for both, so --fs-sm becomes 1rem here.

   2. TRACKING. --ls-label is 0.24em, drawn for 11px gold labels at the top
      of a 1440px band where they read as a rule of small caps. At phone
      width the same value spreads a three-word eyebrow across two lines
      and stops being readable as words. 0.16em at 12px keeps the character
      and gives back the line.

   3. DEAD SCREEN. The desktop rhythm (72px bands, 6.75rem block gaps) is
      roughly three swipes of empty ground between one idea and the next on
      a 390px viewport. The bands come to 56px and the big spacing steps
      come down with them. This is the change that most makes the page feel
      "designed for the phone" rather than "shrunk onto it".

   4. THINGS THE PHONE MAKES TALL. .split__media is 3/4 portrait — on a
      laptop it is a column beside text, on a phone it is a 450px-tall wall
      between two paragraphs. And the fleet photograph sat inset inside its
      card's padding, so it read as a picture ON a card rather than the
      face of it.

   Everything here is confined to the media query. Nothing above is edited,
   so the desktop composition is untouched, and the theme's signatures —
   the horizon, the differential speed, the parallax — all still run.
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    /* ---- Type ---- */
    --fs-sm:    1rem;        /* 15px -> 16px : card copy, meta, table cells */
    --fs-xs:    0.875rem;    /* 13px -> 14px */
    --fs-label: 0.75rem;     /* 11px -> 12px */
    --fs-index: 0.8125rem;
    --ls-label: 0.16em;
    --ls-index: 0.14em;
    --ls-button:0.1em;
    --lh-body:  1.68;

    /* ---- Space ---- */
    --section-y: 3.5rem;
    --sp-7: 2.5rem;
    --sp-8: 3.25rem;
    --sp-9: 4rem;
    --sp-10: 4.75rem;
    --sp-11: 5.5rem;
  }

  /* ---- The hero ---------------------------------------------------------
     It was 891px tall on an 844px screen, so the trust list and the scroll
     into the page were both below the fold with nothing to suggest they
     existed. The photograph's own scrim is handled in images.css. */
  .hero { padding-block: 5.25rem 2.75rem; }
  .hero__title { max-width: 20ch; margin-bottom: calc(var(--sp-5) + 0.18em); }
  .hero__lead { max-width: none; margin-bottom: var(--sp-6); }
  .hero__actions { margin-bottom: var(--sp-6); gap: var(--sp-3); }

  /* ---- Controls: 48px is the floor for a thumb ------------------------- */
  .btn {
    min-height: 3rem;
    font-size: 0.875rem;
    padding-block: 0.95rem;
  }
  .field__control { min-height: 3rem; font-size: 1rem; }
  .region-nav__link, .selector__card, .accordion__trigger { min-height: 2.875rem; }

  /* ---- Panels on the dark ground ---------------------------------------
     "Get a quote" is a near-black panel on a near-black band with a #211E19
     hairline: on a phone screen in daylight the panel, its fields and the
     band behind them were one flat surface. The panel lifts one step, the
     field lifts another, and both borders go to a gold at low mix — which
     is how the rest of the theme separates surfaces. */
  .surface-dark   :is(.quickbook__panel, .form, .faq-panel, .callout, .card),
  .surface-charcoal :is(.quickbook__panel, .form, .faq-panel, .callout, .card) {
    background: #15120C;
    border-color: color-mix(in srgb, var(--brass) 20%, transparent);
  }
  .surface-dark .field__control,
  .surface-charcoal .field__control,
  .cta-band .field__control {
    background: #1D1912;
    border-color: color-mix(in srgb, var(--brass) 26%, transparent);
  }
  .surface-dark .field__control::placeholder,
  .surface-charcoal .field__control::placeholder { color: #ABA48F; }

  /* ---- Media: stop the phone making things tall ------------------------
     Kept a touch flatter than the old 4/3 to match the more compact plate
     ratios the desktop breakpoints now use (see tokens.css --plate-ratio*
     and the .fleet-grid/.selector__card/.split__media overrides). */
  .split__media .media { aspect-ratio: 16 / 10; }
  .gallery__btn .media { aspect-ratio: 4 / 3.4; }
  .editorial__aside .media { aspect-ratio: 16 / 10; }

  /* ---- The fleet card --------------------------------------------------
     The photograph becomes the face of the card: bled to the card's three
     outer edges, with the body copy the only thing the padding holds. */
  .card { padding: var(--sp-5); }
  .fleet-grid .card { padding: var(--sp-5); }
  .card > .zoom:first-child,
  .card > a:first-child > .zoom,
  .card > .media:first-child {
    margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .fleet-grid .card .media { aspect-ratio: 16 / 9; }

  /* ---- Vehicle specs read as numbers with no unit ----------------------
     The icons are aria-hidden and the markup is shared by every theme, so
     "3  3" was all a phone (and a screen reader) got. */
  .vehicle-specs { gap: var(--sp-5); font-size: var(--fs-sm); }
  /* Scoped to the fleet CARDS (2026-10-12). Only the cards print a bare
     number; the fleet page's detail rows already say "Up to 3 passengers"
     and "2 cases", so the unscoped rule turned those into "passengers
     passengers" / "cases cases". */
  .card__body > .vehicle-specs li:first-child::after  { content: " passengers"; }
  .card__body > .vehicle-specs li:nth-child(2)::after { content: " cases"; }
  .card__body > .vehicle-specs li::after { letter-spacing: 0; text-transform: none; color: var(--text-muted); }

  /* ---- The call bar ----------------------------------------------------
     Both halves were gold, so the bar read as one 68px slab of yellow with
     a hairline in it and neither action looked primary. Call goes to the
     body colour with gold type; Book keeps the gold. */
  .callbar { grid-template-columns: 1fr 1.15fr; }
  .callbar__action {
    min-height: 3.5rem;
    font-size: 0.8125rem;
    background: var(--green);
    color: var(--brass-lt);
  }
  .callbar__action .icon-svg { color: var(--brass-lt); }
  .callbar__action--gold { background: linear-gradient(125deg, var(--brass) 0%, var(--brass) 30%, var(--brass-lt) 42%, color-mix(in srgb, var(--brass-lt) 45%, white) 50%, var(--brass-lt) 58%, var(--brass) 70%, var(--brass) 100%); color: var(--on-accent); }
  .callbar__action--gold .icon-svg { color: var(--on-accent); }
  .callbar__action + .callbar__action { border-left: 0; }

  /* ---- Section heads --------------------------------------------------- */
  .section-head { margin-bottom: var(--sp-6); }
  .section-head__title, .h2 { text-wrap: pretty; }
}

@media (max-width: 420px) {
  :root { --section-y: 3rem; --gutter: 1.25rem; }
  .hero { padding-block: 4.75rem 2.25rem; }
  .callbar__action { font-size: 0.75rem; letter-spacing: 0.06em; }
}

/* ==========================================================================
   SOCIAL CHANNELS
   layout.php now renders a brand glyph per channel instead of a single
   letter, so the button is sized for a 18px mark and its edge is gold at a
   low mix rather than the near-invisible --line.
   ========================================================================== */

.footer__socials { gap: 0.6rem; flex-wrap: wrap; }
.footer__social {
  width: 2.75rem;
  height: 2.75rem;
  border-color: color-mix(in srgb, var(--brass) 26%, transparent);
  color: var(--text-muted);
}
.footer__social .icon-svg { width: 18px; height: 18px; }
.footer__social:hover .icon-svg, .footer__social:focus-visible .icon-svg { color: var(--on-accent); }

/* ==========================================================================
   CLIENT REVISION — 2026-09-13
   --------------------------------------------------------------------------
   Three notes from the client, in their words:

     · "doesn't like blur everywhere"
     · "when scrolling to bottom it is all golden golden, not looking good"
     · "improve the header to be premium"

   Everything below answers one of those three. It is appended (signature.css
   loads last) so the composition above is untouched and any of it can be
   reverted by deleting this block.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BLUR — where it was actually coming from

   There are no blur filters on the content of this theme; --fx-blur-in is
   0px here (that is Alba's device). The softness the client is seeing has
   two sources, and both are fixed below:

   a) THE HEADER WAS A PIECE OF FROSTED GLASS. It carried
      `backdrop-filter: blur(14px) saturate(140%)`, ramped up by scroll — so
      everything passing under the bar smeared, and the saturate pushed the
      colour of whatever was behind it. That is the single most visible blur
      on the site and it is now gone entirely. The bar tints instead.

   b) EVERY PHOTOGRAPH WAS BEING ENLARGED. Parallax needs headroom, and this
      theme asked for the deepest drift in the set: --fx-parallax-scale 1.22
      with a further 1.07 on hover, i.e. a 1600px file drawn at up to ~2090px
      — 30% past its own resolution, on every plate, permanently. That is
      not a filter, but on screen it is indistinguishable from one. 1.10
      still gives the drift somewhere to go and keeps the file inside its
      native pixels at every common viewport.
   -------------------------------------------------------------------------- */

.header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:root {
  --fx-parallax-scale: 1.10;
  --fx-zoom: 1.035;
}

/* The hero's two radial washes are a veil of warm light over the picture.
   They are what gives the photograph its depth, but at 0.20 they also give
   it a haze. Halved. */
.hero::before  { opacity: 0.5; }
.page-hero::before { opacity: 0.6; }

/* Clarity, at every width rather than only on a phone (this was added for
   mobile on 2026-09-12): one notch of contrast and saturation on the
   photograph layers only, never on a layer carrying type. */
.media,
.gallery__cell,
.hero__bg,
.page-hero__bg { filter: saturate(1.05) contrast(1.04); }

/* --------------------------------------------------------------------------
   2. THE HEADER — premium

   It was a black bar sitting ON TOP of the picture's box: the photograph
   began 84px down the page, so the first thing a visitor met was a slab of
   flat colour. Now the picture runs to the top edge of the browser and the
   brand sits ON it, over a soft top-down scrim that keeps the logo and nav
   legible without a bar being drawn at all. The bar materialises only once
   you scroll — solid, not frosted, with one gold hairline.

   The nav mark changes too: the shared core draws a 7px dot under the
   active link (explicit width, so `right: 0` alone will not beat it — see
   the note in the motion memo). A dot is a wayfinding device; an underline
   drawn the width of the word is a typographic one, and reads as the more
   expensive of the two.
   -------------------------------------------------------------------------- */

.hero,
.page-hero { }

.hero {
  padding-top: calc(var(--header-h) + clamp(3.5rem, 1.5rem + 6vw, 8rem));
  padding-bottom: clamp(4rem, 2rem + 6vw, 8rem);
  border-bottom-color: color-mix(in srgb, var(--brass) 20%, transparent);
}

.page-hero {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 6rem));
  padding-bottom: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  border-bottom-color: color-mix(in srgb, var(--brass) 18%, transparent);
}

/* The scrim that replaces the bar at rest. It fades out as --fx-y runs
   0 → 1, handing over to the solid tint the header itself carries. */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  bottom: auto;
  height: var(--header-h);
  z-index: 0;
  pointer-events: none;
  opacity: calc(1 - var(--fx-y, 0));
  background: linear-gradient(180deg,
    rgba(5, 4, 2, 0.72) 0%,
    rgba(5, 4, 2, 0.34) 58%,
    rgba(5, 4, 2, 0) 100%);
}

.header__inner { position: relative; z-index: 1; }

/* Solid, and a little deeper than the page so the bar reads as a layer
   above it rather than a patch of the same colour. */
.header {
  background: color-mix(in srgb, #060504 calc(var(--fx-y, 0) * 97%), transparent);
  border-bottom-color: color-mix(in srgb, var(--brass) calc(var(--fx-y, 0) * 30%), transparent);
}

.header.is-stuck { box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.9); }

/* A larger mark at rest, because it is now sitting on a photograph and has
   to hold its own there; it shrinks as the bar closes up. */
.brand__logo--header { height: calc(46px - 11px * var(--fx-y, 0)); }

.nav__list { gap: clamp(1.25rem, 0.4rem + 1.5vw, 2.25rem); }

.nav__link {
  position: relative;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: color-mix(in srgb, var(--pewter) 74%, transparent);
  padding-block: 0.5rem;
  transition: color var(--dur-fast) var(--ease);
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__link[aria-current="page"] { color: var(--pewter); }

/* Overrides the core's dot: every geometry property it sets is reset. */
.nav__link::after {
  left: 0;
  right: 0;
  bottom: -0.15rem;
  width: auto;
  height: 1px;
  margin-left: 0;
  border-radius: 0;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-rule);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__phone {
  font-weight: 600;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--pewter) 88%, transparent);
  padding-right: var(--sp-5);
  border-right-color: color-mix(in srgb, var(--pewter) 18%, transparent);
}

/* Book Now: an outline on the photograph, a filled gold button once the bar
   is solid. Filled gold over a picture is the loudest thing on the page and
   is half of why the site reads as "all golden". The fill is handed to
   --fx-btn-rest because fx.css moves every button's background into a
   pseudo-element. */
.header .header__cta {
  /* Filled gold at all times, not only once the header is stuck -- it
     needs to stand out against the hero photograph from the first frame.
     A soft diagonal sheen instead of a flat fill, and a warm dark-bronze
     label instead of flat near-black, to match every other gold surface
     on the site. */
  --fx-btn-rest: linear-gradient(125deg, var(--brass) 0%, var(--brass) 30%, var(--brass-lt) 42%, color-mix(in srgb, var(--brass-lt) 45%, white) 50%, var(--brass-lt) 58%, var(--brass) 70%, var(--brass) 100%);
  --fx-btn-sweep: var(--brass-lt);
  --fx-btn-sweep-text: var(--on-accent);
  background: linear-gradient(125deg, var(--brass) 0%, var(--brass) 30%, var(--brass-lt) 42%, color-mix(in srgb, var(--brass-lt) 45%, white) 50%, var(--brass-lt) 58%, var(--brass) 70%, var(--brass) 100%);
  color: var(--on-accent);
  border-color: var(--brass);
  letter-spacing: 0.16em;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

/* The reading-progress bar sits above all of this; at 3px of solid gold it
   was a gold line permanently across the top of the window. */
.progress { height: 2px; }
.progress__bar { background: color-mix(in srgb, var(--brass) 72%, transparent); }

/* --------------------------------------------------------------------------
   3. "ALL GOLDEN GOLDEN"

   The client is right, and it is worth being precise about why. Gold was
   doing nine different jobs: the 2px rule at the top of every section, the
   eyebrow text AND its dot, the accent word in every headline, every
   "LEARN MORE" link, the marquee's separators, every footer heading, the
   section numerals' dash, the floating WhatsApp button, and the buttons.
   Nine gold things per screen is not an accent, it is a colour scheme.

   Gold now keeps four jobs and loses the rest:
     · primary buttons and interactive/hover states,
     · the eyebrow dot (the smallest possible cue),
     · the accent word on DARK grounds only, where it measures 11.8:1 and
       looks like gilding,
     · a hairline at low alpha where a section changes.

   The rest goes to ivory, sage and ink. On the ivory bands in particular,
   gold-dark (#8C6117) was never gold on screen — at that size it is olive,
   and that is most of what the client means by the colour combination
   being off. Those take ink, and the italic carries the emphasis on its
   own, which is what the display face was chosen for.
   -------------------------------------------------------------------------- */

/* The horizon — 2px solid gold at the top of every section, ~8 per page. */
.section::before {
  height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--brass) 52%, transparent) 0%,
    color-mix(in srgb, var(--brass) 8%, transparent) 100%);
}

.surface-ivory::before {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ink) 26%, transparent) 0%,
    color-mix(in srgb, var(--ink) 4%, transparent) 100%);
}

/* The accent word. Dark grounds keep the gilding; light grounds take ink. */
.surface-ivory .accentuate,
.surface-ivory .display .accentuate,
.surface-ivory .h2 .accentuate { color: var(--ink); }

/* Eyebrows: the dot stays gold, the words step back to the band's own
   voice. On dark that is sage; on ivory, charcoal. */
.eyebrow { color: var(--sage); }
.surface-ivory .eyebrow { color: var(--slate); }
.eyebrow::before {
  width: 6px;
  height: 6px;
  background: var(--brass);
  box-shadow: none;
}
.surface-ivory .eyebrow::before { background: var(--bronze); }

/* Section numerals and the index rail. */
/* .numeral was removed from every page view on 2026-09-20 — section heads
   carry their eyebrow and title alone now. The base rules for it are kept in
   base.css against the class being reintroduced, but nothing renders it. */
.service-row__index, .pillar__num { color: color-mix(in srgb, var(--brass) 62%, transparent); }

/* Links. Gold on a dark ground is right; on cream it is olive text on
   cream. Ink with a gold rule under it reads as the same idea, cleanly. */
.surface-ivory .link { color: var(--ink); border-bottom-color: color-mix(in srgb, var(--bronze) 55%, transparent); }
.surface-ivory .link:hover,
.surface-ivory .link:focus-visible { color: var(--bronze); border-bottom-color: var(--bronze); }
.link { color: var(--brass-lt); }

/* The marquee's separator was a 13 × 8 gold pill between every phrase. */
.ribbon__item::after {
  width: 22px;
  height: 1px;
  border-radius: 0;
  background: color-mix(in srgb, var(--brass) 45%, transparent);
}
.ribbon { border-block-color: color-mix(in srgb, var(--brass) 16%, transparent); }

/* The quote panel sat inside a FULL --sp-7 top padding stacked on top of
   the hero's own bottom padding and hairline -- two near-identical
   near-black paddings (measured ~108px combined at 800px wide) reading as
   one unbroken slab of dark space above the panel, not a section
   boundary. .quickbook is used exactly once, straight after .hero, so
   this is scoped to that pairing rather than the token itself. */
.hero + .quickbook { padding-top: var(--sp-4); }

/* The ribbon is a hard-edged banner by design -- a marquee should look
   like a distinct strip -- but every instance is followed immediately by
   an ivory or charcoal section with literally zero transition: dark text
   on a dark strip, then a flat cut straight to a light section. A short
   shadow-fade bleeding a little way past the ribbon's own box softens
   that cut without touching its height or the marquee text inside it. */
.ribbon { position: relative; }

.ribbon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 28px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 22%, transparent) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* The CTA band was framed top and bottom in 2px of solid gold. */
.cta-band {
  border-block: var(--hair) solid color-mix(in srgb, var(--brass) 22%, transparent);
}

/* Footer headings: four gold headings stacked next to a gold call bar and a
   gold button is what the bottom of the page looked like. */
.footer__title {
  color: var(--pewter);
  position: relative;
  padding-bottom: 0.75rem;
}
.footer__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 1px;
  background: color-mix(in srgb, var(--brass) 70%, transparent);
}

/* The floating button is on screen the whole time the page is. Dark with a
   gold edge keeps it findable without it being a gold disc in the corner of
   every screenshot the client takes. */
.whatsapp {
  background: color-mix(in srgb, #060504 82%, transparent);
  color: var(--brass-lt);
  border: 1px solid color-mix(in srgb, var(--brass) 55%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.whatsapp:hover,
.whatsapp:focus-visible { background: linear-gradient(125deg, var(--brass) 0%, var(--brass) 30%, var(--brass-lt) 42%, color-mix(in srgb, var(--brass-lt) 45%, white) 50%, var(--brass-lt) 58%, var(--brass) 70%, var(--brass) 100%); color: var(--on-accent); border-color: var(--brass); }

/* --------------------------------------------------------------------------
   4. THE PHONE — the same three answers, at phone widths
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :root { --fx-parallax-scale: 1.06; }

  .hero {
    padding-block: calc(var(--header-h) + 2.25rem) 2.75rem;
  }
  .page-hero {
    padding-block: calc(var(--header-h) + 1.75rem) 2.5rem;
  }

  .media,
  .gallery__cell,
  .hero__bg,
  .page-hero__bg { filter: saturate(1.06) contrast(1.05); }

  /* The bar is 2/3 of the screen width on a phone; at rest it stays an
     outline so the photograph is not competing with a gold slab. */
  .header .header__cta { font-size: 0.75rem; letter-spacing: 0.1em; }
}

/* --------------------------------------------------------------------------
   5. FINISH — two things the client's "not looking good as per finish" note
   is pointing at on a wide screen.

   a) THE PHOTOGRAPH SHOULD BE THE FACE OF THE CARD, not a picture sitting
      inside it with 36px of ground all round. This was already done for
      phones on 2026-09-12; on a desktop the inset reads even weaker,
      because the cards are wider and the border of ground is wider with
      them.

   b) THE BANDS WERE 152px OF PADDING TOP AND BOTTOM, so two neighbouring
      sections put ~300px of empty ground between one idea and the next.
      Generous is the point of the design; three screenfuls of nothing is
      not. 116px still reads as air around the content.
   -------------------------------------------------------------------------- */

:root { --section-y: clamp(3.5rem, 2rem + 5vw, 7.25rem); }

.card > .zoom:first-child,
.card > a:first-child > .zoom,
.card > .media:first-child {
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0;
  border-radius: var(--radius) var(--radius) 0 0;
}

.card { padding: var(--sp-5); }
.fleet-grid .card { padding: var(--sp-5); }

/* The hero photograph was over-scaled twice: inset:-12% on the layer plus
   the parallax scale on top of it. Halving the inset takes another 12% of
   enlargement off the one image every visitor sees first. */
.hero__bg { inset: -6%; }

/* The closing CTA band carried the same 144px of padding as a content band
   plus a centred block only three lines tall. */
.cta-band { padding-block: clamp(3.25rem, 2rem + 4vw, 6.5rem); }

/* --------------------------------------------------------------------------
   6. LEGIBILITY OVER A PHOTOGRAPH, WITHOUT DARKENING THE PHOTOGRAPH

   The heroes protect their type by darkening the WHOLE picture. That is the
   blunt instrument: on a bright frame (the fleet page's studio line-up is
   the worst case, measured at 3.6:1 behind the breadcrumb — below AA) the
   scrim has to go so heavy that the photograph stops being a photograph.

   Instead the copy carries its own shadow: one soft gradient anchored to the
   text column, transparent well before the edge of the frame. The picture
   keeps its exposure; the words get a ground. This is why the hero scrims
   above can stay as light as they are.
   -------------------------------------------------------------------------- */

.hero__inner,
.page-hero__inner { position: relative; }

.hero__inner::before,
.page-hero__inner::before {
  content: "";
  position: absolute;
  inset: -2.5rem -4rem -2.5rem -6rem;
  z-index: -1;
  pointer-events: none;
  /* Horizontal, not radial: a radial falls off vertically as well, and the
     breadcrumb sits at the very top of the block where that falloff left it
     at 2.4:1 over the fleet page's bright studio frame. A left-to-right
     gradient is even down the whole column. */
  background: linear-gradient(90deg,
    rgba(6, 5, 3, 0.90) 0%,
    rgba(6, 5, 3, 0.78) 30%,
    rgba(6, 5, 3, 0.46) 55%,
    rgba(6, 5, 3, 0.12) 74%,
    transparent 88%);
}

/* The breadcrumb is set in --text-dim, the dimmest of the three text roles,
   which is right on a flat ground and not enough over a photograph. */
.page-hero .breadcrumb,
.page-hero .breadcrumb a { color: var(--sage); }
.page-hero .breadcrumb a:hover { color: var(--brass-lt); }

@media (max-width: 900px) {
  /* No "other side" on a narrow screen: the column is the screen, so the
     protection runs top to bottom instead of left to right. */
  .hero__inner::before,
  .page-hero__inner::before {
    inset: -2rem -2.5rem;
    background: linear-gradient(180deg,
      rgba(6, 5, 3, 0.40) 0%,
      rgba(6, 5, 3, 0.66) 22%,
      rgba(6, 5, 3, 0.66) 78%,
      rgba(6, 5, 3, 0.30) 100%);
  }
}

/* The 1024–1399px band is the tight one for this header (the core hides the
   phone number between 1024 and 1279 for exactly that reason). The premium
   nav above is set wider than the one it replaced — 0.15em of tracking on
   seven links — and that pushed the Book Now button past the right edge by
   18px at 1280 and 27px at 1024, which is a horizontal scrollbar on every
   page. The tracking comes back in, in proportion, before it can. */
@media (max-width: 1399px) {
  .nav__list { gap: clamp(0.85rem, 0.1rem + 1.1vw, 1.6rem); }
  .nav__link { font-size: 0.72rem; letter-spacing: 0.1em; }
  .header .header__cta { letter-spacing: 0.1em; }
  .header__phone { padding-right: var(--sp-4); }
}

/* ==========================================================================
   HOME HERO — CLIENT REVISION (2026-09-13, second pass)
   --------------------------------------------------------------------------
   The client's note: the hero photograph "is cut out and not as per the
   screenshot", and the headline is to read as it does there.

   WHY IT WAS CUT. Nothing cropped the file — the BOX was the wrong shape for
   it. `.hero__bg` is `cover`, so the picture is scaled until it fills the
   box in both axes and the overflow is thrown away. Three things made that
   box far taller and narrower than the photograph:

     · the hero's own height (a three-line headline plus the trust list),
     · `.hero__bg { inset: -12% }`, which makes the layer 124% of the hero,
     · the parallax scale on top of that.

   A 1.92:1 photograph in a box that deep is scaled to the box's HEIGHT, and
   everything either side of the centre is cut — which is exactly what the
   client saw: the passenger filling the right half and the interior gone.

   The inset comes off entirely. The parallax scale (1.10) is itself the
   headroom the drift needs; the inset was a second, redundant enlargement.
   ========================================================================== */

.hero__bg { inset: 0; }

/* The headline is now a single line, so the second (empty) line of the
   reveal mask would otherwise leave a blank line-height behind it. */
.hero__title .rl > span:empty { display: none; }
.hero__title .rl:not(:has(> span:not(:empty))) { display: none; }

/* The accent line is gold again (2026-09-19) — the ivory override that used
   to sit here is gone. The italic still comes from .accentuate, which is
   where the whole headline now lives.

   The size bump goes on the .rl WRAPPER, not on the accent span inside it.
   .rl carries an em-based padding/negative-margin pair (see base.css) that
   is what stops Instrument Serif's j, y and g being sliced off by the
   reveal mask. Those ems resolve against .rl's own font-size, so enlarging
   only the inner span would grow the ink while the mask stayed put and clip
   the descenders. Scaling the wrapper scales the mask with the type. */
body[data-page="home"] .hero__title .accentuate { color: var(--brass); }
body[data-page="home"] .hero__title .rl:has(> .accentuate) { font-size: 1.08em; }

/* The photograph fills the hero box with `cover`, so the BOX's proportion
   decides how much of it you see: when the box is deeper than the picture's
   own 1.92:1, the picture is scaled to the box's HEIGHT and the sides are
   thrown away. At 1600px the hero measured 1017px tall — 1.57:1 — which is
   why the passenger filled half the frame and the interior disappeared.
   1600/1.916 = 835px is the ceiling; the numbers below land it near 800.

   Two things bring it down, and both were worth doing anyway: the headline
   is one line now, so it no longer needs a 15ch measure that forced "Driven
   by Precision" onto two, and it is set nearer the size the client's own
   screenshot uses rather than the full 102px display size. */

body[data-page="home"] .hero__title {
  max-width: none;
  /* 64px at 1600 rather than 80px: the client's own screenshot sets this
     headline at about 37% of the viewport width, and at 80px it ran to 59%
     — across the passenger's face, where no scrim should have to reach. */
  font-size: clamp(5.25rem, 1.1rem + 3.4vw, 4rem);
}

.hero {
  padding-block: calc(var(--header-h) + clamp(2.25rem, 1rem + 3.2vw, 4.5rem))
                 clamp(2.5rem, 1.5rem + 2.4vw, 4.25rem);
}

/* Slightly above centre: the passenger and the window line sit in the upper
   two-thirds of this frame. */

/* The parallax scale is the LAST enlargement in the chain, and on the home
   hero it is the one the client can see: at 1.10 the photograph is drawn
   1760px wide inside a 1600px window, so a tenth of the frame is outside
   the screen and everything in it is 10% larger than the file. The hero
   keeps a shallower drift than the plates do — enough to separate it from
   the page, not enough to re-crop the client's own photograph. */
body[data-page="home"] .hero__bg { --fx-parallax-scale: 1.03; }

/* With the copy now carrying its own gradient (section 6), the hero's own
   96deg wash is a second scrim doing the same job — stacked, they were what
   made the left third of the client's photograph read as a black panel.
   Softened to a light modelling wash; the vertical ends keep the header and
   the trust list clean. Contrast re-measured after this change: headline
   14:1, lead 9:1, trust labels 7:1. */
/* (the home hero image layer is defined in images.css — it loads LAST) */

/* The home hero's copy sits over the dark interior of the car, which is
   already a ground — so its text gradient can be lighter here than the one
   the page heroes need over a bright studio frame. Re-measured after: 
   headline 15:1, lead 9:1, eyebrow 5:1. */
body[data-page="home"] .hero__inner::before {
  background: linear-gradient(90deg,
    rgba(6, 5, 3, 0.72) 0%,
    rgba(6, 5, 3, 0.56) 32%,
    rgba(6, 5, 3, 0.28) 58%,
    rgba(6, 5, 3, 0.06) 76%,
    transparent 88%);
}

@media (max-width: 900px) {
  body[data-page="home"] .hero__inner::before {
    background: linear-gradient(180deg,
      rgba(6, 5, 3, 0.34) 0%,
      rgba(6, 5, 3, 0.58) 22%,
      rgba(6, 5, 3, 0.58) 78%,
      rgba(6, 5, 3, 0.26) 100%);
  }
}


/* ==========================================================================
   THE HERO SCRIM — one full-bleed gradient, not a panel (2026-09-13, third pass)
   --------------------------------------------------------------------------
   Client: *"the black box in the background of Driven by Precision is not
   looking good — the screenshot has a nice left to right gradient starting
   with black"*, and *"the person's head is cut off … the client's version
   has a nice contrast and sharp image"*.

   Both are mine. The text-protection gradient added earlier was attached to
   `.hero__inner`, which is the CONTAINER — a 1280px box, centred. Anchoring
   a gradient to it gives it four edges, and on a 1920px screen those edges
   are plainly visible: a black panel sitting on the photograph. It also
   reached to x≈1504, which is why the leather went grey — measured against
   the client's screenshot, the same patch of seat read mean 59 / p95 117
   here against their 91 / 194.

   The scrim belongs on the SECTION, where it can run the full width and
   finish in nothing. `.hero::before` already spans the whole hero, so it
   carries it: black at the left edge, gone by three-quarters across, with
   only a light top and foot wash for the header and the trust list. The
   photograph is then untouched everywhere the type is not.

   And the frame is pinned to the TOP of the photograph rather than 44% down
   it. At 1920px the box is 216px shorter than the picture, and taking that
   out of the middle cut the passenger's head off.
   ========================================================================== */

.hero__inner::before,
.page-hero__inner::before { display: none; }

body[data-page="home"] .hero::before,
.page-hero::before {
  inset: 0;
  opacity: 1;
  /* z-index matters here: `.page-hero__bg` is `z-index: 0`, and a ::before
     with `z-index: auto` paints BEFORE its element's children — i.e. under
     the photograph, where a scrim does nothing at all. `.hero::before`
     already carried `z-index: 1`; the page heroes did not. */
  z-index: 1;
  /* Smoothstep falloff (3t^2 - 2t^3), not a straight linear ramp: a
     linear alpha fade reads as a visible edge partway across because
     the eye is far more sensitive to alpha change in the mid-range
     than at the near-opaque or near-transparent ends. Nine evenly
     spaced stops sampling that curve removes the seam that a five-stop
     linear version showed around the 44%-60% mark. */
  background:
    linear-gradient(90deg,
      rgba(5, 4, 2, 1.00) 0%,
      rgba(5, 4, 2, 0.96) 11%,
      rgba(5, 4, 2, 0.84) 22%,
      rgba(5, 4, 2, 0.68) 32%,
      rgba(5, 4, 2, 0.50) 43%,
      rgba(5, 4, 2, 0.32) 54%,
      rgba(5, 4, 2, 0.16) 65%,
      rgba(5, 4, 2, 0.04) 75%,
      rgba(5, 4, 2, 0.00) 86%),
    /* The foot of the hero carries the trust row, which runs the full width
       and therefore leaves the left-hand gradient behind: measured at 2.7:1
       over the bright seat on the last item. The bottom wash starts earlier
       and finishes heavier so that row has a ground of its own.

       It also now reaches fully opaque (1.00) by the very last pixel,
       not a partial value: .page-hero has no fixed height (it is sized by
       its copy), so on a short page-hero the old 84-100% ramp was a small
       pixel span and stopping at 0.38 left a visible strip of photograph
       sitting hard against whatever section follows it -- glaring next to
       an ivory section, still a seam next to a dark one. Starting the ramp
       earlier (60%) and ending at 1.00 means the last few pixels match the
       section's own solid ground, so the only visible boundary left is the
       intentional brass hairline below, not a mismatched crop of photo. */
    linear-gradient(180deg,
      rgba(5, 4, 2, 0.30) 0%,
      rgba(5, 4, 2, 0.00) 22%,
      rgba(5, 4, 2, 0.00) 60%,
      rgba(5, 4, 2, 0.18) 76%,
      rgba(5, 4, 2, 0.48) 88%,
      rgba(5, 4, 2, 0.80) 96%,
      rgba(5, 4, 2, 1.00) 100%),
    radial-gradient(58vw 44vw at 78% 14%, rgba(201, 194, 174, 0.09) 0%, transparent 68%);
}

/* The image layer keeps only what the scrim above does not do. */
/* (see images.css for the image layer and its position) */

@media (max-width: 900px) {
  /* No "other side" on a phone — the column is the screen. */
  body[data-page="home"] .hero::before,
  .page-hero::before {
    /* A phone puts every line of copy over the picture, so the floor here is
       what the lead needs over the brightest part of the frame (measured:
       0.46 left two lines at 2.9:1). */
    background:
      linear-gradient(180deg,
        rgba(5, 4, 2, 0.62) 0%,
        rgba(5, 4, 2, 0.60) 26%,
        rgba(5, 4, 2, 0.62) 68%,
        rgba(5, 4, 2, 0.86) 88%,
        rgba(5, 4, 2, 1.00) 100%);
  }
}

/* ==========================================================================
   11. THE RELEASE 1.5 BUILD SPEC — header and footer
   Added 2026-09-19 from 11_WEBSITE-BUILD-SPEC/lorqen-header-footer-spec.html
   in the client's final logo package.

   The spec's own page is a generic bar and a generic footer; this theme's
   header is a scrim over the photograph that solidifies as you scroll, and
   its footer already has the watermark and the four-column grid. So what is
   taken from the spec here is its SUBSTANCE, not its markup: the two logo
   cuts and the size band each is legal in, the clear space, the gold rule
   under the masthead, the watermark opacity, the column behaviour, and the
   tap targets. Vantage's motion, its sticky compression and its progress
   bar are untouched.
   ========================================================================== */

/* -- The lockup ------------------------------------------------------------
   The logo is now a <picture> (see brand_logo_picture() in the shared
   helper): the dimensional cut above 768px, the stroke-compensated
   small-size cut below it. <picture> is inline by default and would sit on
   the anchor's text baseline, leaving a few pixels of descender space under
   the mark and pushing the bar off centre — so it is a block, and it is the
   flex item the old <svg> used to be. */
.brand__pic {
  display: block;
  line-height: 0;
  flex: 0 0 auto;
  max-width: 100%;
}

/* 64px at rest, 48px when the bar has closed. The lower number is the floor
   from the package's own read-me, not a round figure: below 48px the
   dimensional cut's face, wall and rim average into one duller tone. The
   <img> carries width and height attributes, so `width: auto` scales it on
   its own intrinsic ratio and nothing reflows while it loads. */
.brand__logo--header {
  height: calc(64px - 16px * var(--fx-y, 0));
  width: auto;
}

/* -- Clear space -----------------------------------------------------------
   One wordmark cap height on every side — 18px at a 64px lockup. The bar's
   96px height gives 16px above and below; this is the horizontal half, and
   it is a floor under the fluid gap rather than a replacement for it, so
   the nav still breathes wider on a wide screen. */
.header__inner { column-gap: max(var(--sp-6), 18px); }
@media (max-width: 1279px) {
  .header__inner { column-gap: max(1.25rem, 18px); }
}

/* -- The phone bar ---------------------------------------------------------
   68px with a 44px lockup, flat: no compression, because there is not
   enough bar left to compress and a mark that shrinks under 44px on a
   phone is a mark nobody reads. */
@media (max-width: 767px) {
  :root {
    --header-h:       68px;
    --header-h-stuck: 68px;
  }
  .brand__logo--header { height: 44px; }
}

/* -- The footer masthead ---------------------------------------------------
   A gold rule under it rather than the page's hairline: it is the one place
   in the footer the spec asks for the brand colour to carry a line, and it
   separates the masthead from the body without a second border weight. */
.footer__top { border-bottom-color: var(--accent); }

/* 88px on a desktop, 56px on a phone — the masthead lockup now carries the
   footer the way the header lockup carries the bar.

   Both are above the package's 48px floor, so BOTH slots point at the
   dimensional cut: the stroke-compensated file is drawn for the band below
   that line and using it above is as wrong as using the dimensional one
   below. The <picture> element stays even though it now offers the same
   file twice — it is what makes the two sizes independent, so the phone
   slot can go back under the floor later without touching the markup. */
.footer .brand__logo--footer { height: 88px; width: auto; max-width: 70%; }

@media (max-width: 767px) {
  .footer .brand__logo--footer { height: 56px; max-width: 82%; }
  .footer__top { align-items: flex-start; flex-direction: column; gap: var(--sp-3); }
}

/* -- The link columns ------------------------------------------------------
   Above 1000px the core already puts the contact block and the three link
   lists on one axis, which is what the spec asks for. Below it the three
   lists were wrapping into an uneven two-column run. Contact and Legal now
   take the full width and Services and Company sit two-up between them, so
   no column is ever left as an orphan beside a gap. */
@media (max-width: 999px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid > *:nth-child(1),
  .footer__grid > *:nth-child(4) { grid-column: 1 / -1; }
}

/* -- Tap targets -----------------------------------------------------------
   44px on a phone, 32px on a pointer. Padding alone does not reach it: a
   14px line box plus 4px of padding is 30px, well short. The line box
   itself has to be the target, which is why these are flex boxes with a
   min-height rather than links with more padding. */
.footer__contact-line a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

@media (max-width: 767px) {
  .footer__contact-line { margin-top: 0; }
  .footer__contact-line a { min-height: 44px; }
  /* On a phone the number is the primary action, so it is the largest thing
     in the block — larger than the address beneath it and larger than it is
     on a desktop, where a pointer makes size irrelevant to hitting it. */
  .footer__contact-line a[href^="tel"] {
    font-size: var(--fs-h3);
    letter-spacing: 0.04em;
  }
}


/* ==========================================================================
   12. COMPACT PHOTOGRAPHY
   Added 2026-09-19. The plates were trimmed shorter earlier (the
   --plate-ratio* tokens in tokens.css, which took height out of every image
   box). This takes WIDTH out as well, and because every plate's ratio is
   locked the height follows on its own — so the pictures get smaller as
   objects without a single ratio being touched.

   The width comes off the COLUMN, not off the plate inside it. A plate
   capped narrower than its column leaves a strip of empty ground either
   side and makes a card's photograph float inside the card instead of
   meeting its edge; moving the grid line instead hands the reclaimed width
   to the copy beside it, which is what actually makes the page read as
   compact rather than merely as emptier.

   Every number here is an override of a rule in components.css or
   pages.css, deliberately gathered in one block so the pass can be dialled
   or reverted without hunting through three files. The hero and both
   lockups are untouched — they are not plates and do not read these.
   ========================================================================== */

/* The intro split: the photograph is the FIRST child, so it is the 1fr side
   and the copy is the 1.15fr side. Taking the media column to 0.86fr makes
   the picture roughly an eighth narrower — and, at a locked 4/3 and 16/10,
   an eighth shorter with it. */
@media (min-width: 900px) {
  .split { grid-template-columns: 0.86fr 1.15fr; }
}

/* The wine-tours spotlight is the mirror case: copy first at 1.05fr, plate
   second at 0.95fr. Same proportion off the plate side. */
@media (min-width: 960px) {
  .spotlight__grid { grid-template-columns: 1.05fr 0.82fr; }
}

/* The gallery was four across from 900px and stayed four across at 1800px,
   where each cell had grown well past the size a thumbnail wants to be. A
   fifth column on the widest layouts takes about a fifth off every cell. */
@media (min-width: 1280px) {
  .gallery { grid-template-columns: repeat(5, 1fr); }
}

/* Card photography narrows the same way: one more card per row once there
   is room for it, rather than the same cards stretched wider. Held back to
   1440px so the copy inside a card never drops below a comfortable measure
   at the widths most visitors are actually on. */
@media (min-width: 1440px) {
  .services-grid { grid-template-columns: repeat(4, 1fr); }
}
/* .fleet-grid is deliberately absent here — it is pinned to the services
   track in block 13 so the two card decks on the home page match. */

/* ==========================================================================
   13. CLIENT PASS — 2026-09-19
   Ten notes from the client, gathered here rather than scattered through the
   files they each override, so the pass can be read and dialled in one place.
   ========================================================================== */

/* -- Footer contact lines: the phone and the address ------------------------
   They were set in Instrument Serif, which is a single-weight display face
   with enormous stroke contrast: its thin strokes fall below one device
   pixel at body sizes, so the hairlines drop in and out as the browser
   rounds them and the line reads as shimmering rather than as type. That
   face is drawn for very large, very few words — a phone number at 17px is
   neither. Inter Tight at 500 has an even stroke that lands on the pixel
   grid at this size, which is the whole of the fix.

   Tabular figures on the number so the digit groups sit in even columns
   instead of the 1s collapsing the spacing around them. */
.footer__contact-line a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.012em;
  color: var(--pewter);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.footer__contact-line a[href^="tel"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.035em;
}

/* -- The region line and the legal line -------------------------------------
   Both were 700-weight uppercase on 0.2em tracking. At that setting a line
   reads as a label shouting for attention no matter how small the type
   actually is — which is why they looked big and bold while sitting at
   11px. Sentence case, normal weight and ordinary tracking put them back to
   what they are: one quiet line of fact each. */
.footer__region {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  letter-spacing: 0.012em;
  text-transform: none;
}

.footer__bottom {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  letter-spacing: 0.012em;
  text-transform: none;
}

/* -- Header nav hover ------------------------------------------------------
   The underline was already declared gold further up this file, but fx.css
   loads after it and repaints the same pseudo-element with `currentColor`
   at equal specificity — so on hover it took the link's own ivory and the
   gold never appeared. One extra class in the selector settles it in gold's
   favour without touching the shared fx layer, which the other themes read.
   The word itself still goes ivory; only the rule under it is gold. */
html.fx body .nav .nav__link::after { background: var(--brass); }

/* -- Our Fleet matches Services -------------------------------------------
   Two differences made the fleet cards smaller than the services cards on
   the home page, and both are fixed here rather than at their source so the
   pairing is documented in one place: the fleet deck ran one column tighter
   at every breakpoint, and its photographs were cut to 16/8 above 1040px
   against the services 16/9. Equal track, equal ratio, equal card.

   The card count is untouched. Between 1040 and 1440 the four vehicles run
   three-up with the fourth beginning a second row; from 1440 all four sit
   in one row at the services card width. */
@media (min-width: 1040px) {
  .fleet-grid { grid-template-columns: repeat(3, 1fr); }
  .fleet-grid .card .media { aspect-ratio: var(--plate-ratio-card, 16 / 9); }
}

@media (min-width: 1440px) {
  .fleet-grid { grid-template-columns: repeat(4, 1fr); }
}

/* -- The scrollbar ---------------------------------------------------------
   Thin and gold, on both engines. `scrollbar-color` needs a track value as
   well as a thumb value or the whole declaration is dropped, so the track
   is named explicitly as the page's own sunk ground rather than left to the
   browser's grey.

   The bare ::-webkit-scrollbar selectors carry zero specificity by design:
   .region-nav__list already hides its own scrollbar in pages.css with a
   class-qualified selector, which outranks these and keeps working. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--brass) var(--green-3);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--green-3); }
::-webkit-scrollbar-thumb {
  background: var(--brass);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--brass-lt); }
::-webkit-scrollbar-corner { background: var(--green-3); }

/* ==========================================================================
   14. UNIFORM INTERIOR HERO HEIGHT
   Home keeps its taller arrival band; every other page now measures the
   same as every other page.

   WHAT WAS ACTUALLY WRONG. .page-hero already carried a min-height floor
   meant to stop the band jumping between pages, but it also carried a
   padding-top of `--header-h + clamp(4.5rem, 2.5rem + 7vw, 9rem)` — up to
   240px of padding on top of a centred flex layout that did not need it.
   On the longer pages that padding pushed the content past the floor, so
   those pages grew and the floor stopped meaning anything. Pages with short
   copy sat on the floor; pages with long copy did not; the heights diverged.

   THE FIX IS THE PADDING, NOT THE HEIGHT. The band centres its content, so
   the top padding only has to clear the header — everything else was
   holding the content down and inflating the box. With that gone the
   tallest hero on the site (wine-tours: a 45-character title over a
   259-character lead, about 480px of content at the widths where this rule
   applies) fits inside the floor with room to spare, so every interior page
   now lands exactly on the floor.

   WHY min-height AND NOT height. A fixed height would make them uniform by
   force, and .page-hero clips (it has to, for the parallax) — so the day
   someone writes a longer lead than the one measured here, a fixed height
   would silently cut the bottom off it. A floor that is comfortably above
   the tallest real content is uniform in practice and safe in the edge
   case: the worst that can happen is one page growing, which is visible,
   rather than one page losing a line, which is not.

   THE FLOOR: max(38rem, min(80vh, 44rem)).
     min(80vh, 44rem)  tracks the viewport, capped so it never becomes a
                       full-screen band on a tall monitor;
     max(38rem, …)     stops it collapsing under the content on a short
                       laptop screen. 38rem is 608px, against about 576px
                       of content plus header at the worst case.
   Every term is content-independent, which is what makes the result
   identical from page to page. Home's own min(88vh, 820px) sits above this
   at every viewport height, so home stays the taller of the two.
   ========================================================================== */

@media (min-width: 900px) {
  .page-hero {
    padding-top: var(--header-h);
    padding-bottom: 0;
    /* The floor this block described has moved to --hero-min-h in block 26,
       where home reads the same value. The padding above is what is left of
       this pass and is still doing its job. */
  }
}

/* Below 900px the copy rewraps unpredictably and the pages are read one at a
   time rather than compared, so the band goes back to taking its own
   content height — the same place .hero { min-height: 0 } already puts the
   home hero on a phone. */

/* ==========================================================================
   15. HERO SLIDES
   The layers the slider inserts. Geometry is copied from .hero__bg rather
   than invented: the stage has to sit in exactly the same box as the
   photograph it is replacing, or the crossfade lands a few pixels off and
   reads as a jolt rather than a dissolve.

   The stage goes BEHIND the background element, which keeps its scrim — see
   the note at the top of hero-slider.js for why the layers cannot live
   inside it, and the stacking table further down for how it gets there
   without a z-index of its own.
   ========================================================================== */

.hero-slides {
  position: absolute;
  /* inset: 0, matching .hero__bg's FINAL value. An earlier rule in this file
     sets .hero__bg to -6% and a later one resets it to 0; reading the first
     one and stopping is how the stage ended up as a different crop of the
     same frame. No z-index — see the note below. */
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-slides__layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  /* Top-anchored, the same as the theme's own hero rule: these photographs
     are framed for the subject in the upper half, and centring them crops
     the heads off at wide aspect ratios. */
  background-position: center top;
  /* The clarity pass applies to the photograph layers site-wide; the slides
     are photograph layers, so they carry it too or the hero would change
     grade the moment it rotated. */
  filter: saturate(1.05) contrast(1.04);
  opacity: 0;
  transition: opacity 1.1s var(--fx-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.hero-slides__layer.is-current { opacity: 1; }

/* NOTHING is restacked here, and that was a bug on 2026-09-19: this block
   used to raise .hero__bg to z-index 1 and drop .hero__inner to 2. Both were
   wrong. .hero__bg is z-index 0 and .hero::before — the black gradient over
   the photograph — is z-index 1, so lifting the photograph to 1 put it level
   with the scrim, and because .hero__bg is a real element while the scrim is
   a ::before (which paints first among equals), the photograph covered the
   gradient and the hero lost its darkening entirely.

   The stage needs no z-index of its own. It is inserted as the hero's FIRST
   child, so at the same level it paints before .hero__bg and therefore sits
   underneath it — which is exactly where it belongs, with the theme's own
   stacking left completely untouched:

     .hero background colour  the element itself
     .hero-slides             stage, first child          (level 0)
     .hero__bg                photograph + its gradients  (level 0, later)
     .hero::before            the light washes            (level 1)
     .hero__inner             the type                    (level 3)   */

@media (prefers-reduced-motion: reduce) {
  /* The script stops rotating as well; this is the belt to that braces, so
     a layer that is mid-fade when the preference changes lands at once
     instead of finishing a one-second dissolve nobody asked for. */
  .hero-slides__layer { transition: none; }
}

/* ==========================================================================
   16. CARDS — one height, tighter rhythm, title beside the icon
   Added 2026-09-19. Every card on this site comes out of one renderer
   (Render::serviceCards / fleetCards), so these rules reach the home page's
   Services and Our Fleet decks, the Services and Fleet pages, and anything
   else built on .card, without any of them being named individually.

   THE HEIGHT PROBLEM. A CSS grid already makes every card in a ROW the same
   height — what it cannot do is make row two match row one, because each row
   sizes to its own tallest card. So the six services cards came out as two
   bands of different heights, and which band was taller depended entirely on
   whose description ran longest. Special Event and Point-to-Point looked
   right because they happened to be the pair that set their row's height.

   THE FIX IS TO STOP MEASURING THE TEXT. Rather than pin a pixel height to
   the card — which cannot work, because the photograph's height is a ratio
   of the column width and so moves with the viewport — each text block is
   given a fixed number of LINES. Two for the title, three for the
   description. A block shorter than that is padded out to the line count; a
   block longer is clamped, and the Learn more link that is already there
   carries the rest. Every card then has identical content height at any
   width, the photograph is identical because the columns are equal, and the
   cards match — with nothing expressed in pixels, so it all scales with the
   type.
   ========================================================================== */

/* -- Icon and title on one line -------------------------------------------
   The markup has the icon as a sibling BEFORE the title, so this is a two
   column grid rather than a flex row: the icon takes column one of row one,
   the title column two, and everything below spans both. No markup changes,
   and a card with no icon at all (the fleet cards) is handled by the
   :first-child rule below rather than by a second class. */
.card__body {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  column-gap: 0.6rem;
  /* was --sp-5 (26px): the photograph above already separates these. */
  padding-top: var(--sp-4);
}

.card__icon {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  /* Aligned to the first line, not to the middle of the title box. The box
     is two lines tall whether or not the title fills it, so centring would
     drop the icon half a line below a one-line title. */
  align-self: start;
  margin-top: 0.12em;
}

.card__title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  align-self: start;
  line-height: 1.3;
  /* Exactly two lines, always. */
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* A card with no icon — the fleet cards — puts its title across both
   columns instead of leaving an empty gutter where the icon would be. */
.card__body > .card__title:first-child { grid-column: 1 / -1; }

.card__text,
.card__foot,
.card__body > .vehicle-specs { grid-column: 1 / -1; }

/* -- The vertical rhythm ---------------------------------------------------
   Title to text was --sp-3 on the title plus nothing else; text to Learn
   more was --sp-5 (26px) plus `margin-top: auto`, which pushed the link to
   the floor of whatever height the card happened to be and so varied from
   card to card. Both are now fixed and both are smaller. `auto` is gone on
   purpose: with the content height settled it was only ever adding slack. */
.card__text {
  /* No top margin. The title above reserves two lines whether or not it
     fills them, so a one-line title already leaves a line of clear space
     under itself — a margin on top of that read as a gap. */
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.65;
  /* Three lines, always — padded out when the copy is short, clamped when
     it is long. */
  min-height: 4.95em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.card__foot {
  margin-top: var(--sp-3);
  margin-bottom: 0;
}

/* The fleet cards' passenger/luggage row sits between title and text and
   carried the old wider gap. */
.card__body > .vehicle-specs {
  margin-top: var(--sp-3);
  margin-bottom: 0;
}

/* On a phone a card is the full width of the screen, so three lines of
   description is a lot less text than it is in a narrow column — and the
   cards are read one under the other rather than compared side by side.
   Two lines keeps the deck scannable without the clamp throwing away copy
   that would have fitted. */
@media (max-width: 640px) {
  .card__text { -webkit-line-clamp: 2; line-clamp: 2; min-height: 3.3em; }
  .card__title { min-height: 0; }
}

/* --------------------------------------------------------------------------
   17. THE SAME TREATMENT ELSEWHERE
   Asked for after the card pass: the other blocks on the site built on the
   icon / title / paragraph / link pattern, brought to the same rhythm so the
   page does not change its spacing habits from one section to the next.

   Deliberately NOT touched: .pillar, .step and .badge already sit at the
   --sp-3 title-to-text gap the cards have just been brought to, so there was
   nothing to close up; and .package__cta keeps its `margin-top: auto`,
   because a pricing card's call to action pinned to the floor is what keeps
   a row of them aligned — that is the one place the slack is doing a job.
   -------------------------------------------------------------------------- */

/* Use cases (Corporate) — the same icon-above-title the cards had, given the
   same two-column treatment so the title sits beside the mark. */
.usecase {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  column-gap: 0.6rem;
}

.usecase__icon {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  align-self: start;
  margin-top: 0.1em;
}

.usecase__title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  align-self: start;
  line-height: 1.3;
}

.usecase__text {
  grid-column: 1 / -1;
  margin-top: var(--sp-3);
  margin-bottom: 0;
}

/* Modes (Services) carried --sp-5 under the paragraph AND --sp-6 above the
   link — 62px of stacked margin between one line of copy and the link that
   follows it. */
.mode__text { margin-bottom: var(--sp-4); }
.mode__foot { margin-top: var(--sp-4); }

/* Packages (Services): close the gap under the summary, leave the CTA
   pinned to the floor as above. */
.package__summary { margin-bottom: var(--sp-4); }

/* --------------------------------------------------------------------------
   18. THE TRUST ROW'S OWN GROUND
   Added 2026-09-19 with the foot wash in images.css, and for the same
   reason: the hero copy sits on .hero__inner::before, which is a left-to-
   right gradient — 0.90 black at the left edge, gone by 88% across. That is
   the right shape for the headline and the lead, which are held to 15ch and
   48ch and never reach the right-hand side of the hero.

   The trust list is the exception. It is the one block in the hero that
   spans the full width, as three equal columns above 860px, so its third
   item ("Fixed, written pricing") lands past the point where that scrim has
   run out and reads straight off the photograph. The type there is small,
   uppercase, letter-spaced and set in --text-muted — the hardest thing in
   the hero to read and the one with the least ground under it.

   So the row gets a scrim of its own, flatter across the width than the
   block scrim above it: still heavier on the left so it blends into that
   one, but never falling below 0.34 at the right edge.

   No z-index on .hero__trust itself, deliberately: leaving it out means the
   element does not open a stacking context, so this ::before joins
   .hero__inner::before at level -1 of the hero's inner context and, being
   later in the DOM, paints just above it. Both stay behind the text.
   -------------------------------------------------------------------------- */

.hero__trust { position: relative; }

.hero__trust::before {
  content: "";
  position: absolute;
  /* Matches .hero__inner::before's horizontal bleed so the two scrims share
     an edge rather than showing a seam; vertically it only has to wrap the
     row and the hairline above it. */
  inset: -0.85rem -4rem -1.35rem -6rem;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(6, 5, 3, 0.66) 0%,
    rgba(6, 5, 3, 0.58) 42%,
    rgba(6, 5, 3, 0.46) 72%,
    rgba(6, 5, 3, 0.34) 100%);
}

@media (max-width: 859px) {
  /* Stacked one per line below the three-column breakpoint, inside the width
     the block scrim already covers — and on a phone .hero::before is
     carrying a full vertical black as well. Nothing more is needed, and
     stacking a third scrim there would only grey the picture. */
  .hero__trust::before { display: none; }
}

/* --------------------------------------------------------------------------
   19. THE GOLD FRAME HUGS THE PHOTOGRAPH, NOT ITS COLUMN
   The frame was drawn on .split__media — the COLUMN — and that box is taller
   than the picture inside it, so the rule carried on down past the bottom of
   the photograph into the ivory ground below. It was not obvious while the
   frame was offset up and to the left (it was equally too tall then, just
   shifted), and it became obvious the moment the frame was closed onto the
   box on 2026-09-19.

   The fix is to stop measuring the column. The frame moves onto .zoom, which
   IS the picture's box, so it cannot be any other size.

   Drawn as an outline rather than a border or an inset shadow, for two
   reasons that both matter here: an outline takes no space, so nothing
   reflows and the 16/10 plate ratio is untouched; and an outline paints
   ABOVE the element's content, where an inset box-shadow would paint below
   the photograph and never be seen. `outline-offset: -1px` pulls it just
   inside the edge so it follows the same corner radius the plate has.

   .zoom's own ::before is not free — .framed::before already uses it for the
   pale inner rule on the featured plates — which is the other reason this is
   an outline and not another pseudo-element.
   -------------------------------------------------------------------------- */

.split__media::before { display: none; }

.split__media > .zoom {
  outline: var(--hair, 1px) solid var(--brass);
  outline-offset: -1px;
}

/* --------------------------------------------------------------------------
   20. WHY LORQEN — BLACK AND GREY
   Client note: this section should read black and grey rather than warm
   gold. Only colour changes here — the ambient radial keeps its geometry and
   its --fx-c drift, and the pillars keep their wash-and-drift hover exactly
   as it is. Nothing about the movement is touched.

   Scoped to the home page's railed dark section so the other dark bands
   (the quote panel above it and the area ribbon below) keep the warm ground
   they share with the rest of the site.

   Type is left alone on purpose: the pillar numbers stay gold, because the
   note was about the background and the hover, and stripping the accent out
   of the numerals as well would take the brand colour off the section
   entirely. Say the word if that is wanted too.
   -------------------------------------------------------------------------- */

.surface-slate {
  /* Black into a cool grey rather than the flat near-black. */
  background: linear-gradient(162deg, #0B0A08 0%, #141517 48%, #1C1E21 100%);
  /* The hairlines in this band go neutral with it; left warm they read as a
     brown seam against a grey ground. */
  --line: #2A2C2F;
  --line-accent: #34373B;
  /* Everything else a dark band sets — text roles, accent, marks — comes
     from .surface-dark, which this is always used alongside. */
}

/* The ambient wash: same radial, same size, same drift, neutral light. */
.surface-slate::after {
  background: radial-gradient(
    58vw 46vw at calc(50% + var(--fx-c, 0) * 42%) calc(50% - var(--fx-c, 0) * 26%),
    rgba(236, 238, 240, 0.10) 0%,
    rgba(236, 238, 240, 0.035) 34%,
    transparent 72%
  );
}

/* The hover wash: same gradient, same 0.7s fade, grey instead of gold, on
   every block type that carries the wash-and-drift hover. .pillar is the
   one Why LORQEN uses; .step, .usecase and .highlight share its rule
   verbatim further up this file, and .assurance is the booking page's
   equivalent — so naming all five here is what makes the treatment travel
   rather than being reimplemented per page. */
.surface-slate :is(.pillar, .step, .usecase, .highlight, .assurance)::before,
.surface-slate .step::after {
  background: linear-gradient(90deg, rgba(236, 238, 240, 0.085) 0%, transparent 60%);
}

/* ==========================================================================
   21. THE HEADER STOPS RESIZING
   Client note: scrolling to the top and then a little way back down leaves a
   pause before the page settles. It is the header, and there were six
   separate contributors — worth listing, because removing only the obvious
   two would have left most of the lag in place.

   THE SIZE CHANGE ITSELF
     1. .header height interpolated between --header-h and --header-h-stuck
        against --fx-y, so the bar changed height continuously with scroll.
     2. .brand__logo--header interpolated 64px → 48px the same way.
     3. .header.is-stuck .header__inner and .header.is-stuck .brand__logo
        (components.css) set a second, class-driven size on top of that.

   THE LAG ON TOP OF IT
     4. .header__inner  transition: height 0.62s
     5. .brand__logo    transition: height 0.62s
     6. .header         transition: background / border-color / box-shadow
        0.55s (fx.css)
   The transitions are what turn a size that tracks the scroll into a size
   that CHASES it: --fx-y updates every frame, each update restarts a
   0.62s ease, and the bar spends the whole of a short scroll catching up.
   That is the pause, and it is worst exactly where it was reported —
   scrolling back to the top and immediately down again, which reverses the
   target mid-transition.

   WHAT IS KEPT. The bar still goes from transparent over the hero to solid
   as you scroll: that is driven straight off --fx-y with no transition, so
   it now tracks the scroll position exactly rather than easing towards it.
   No delay, same handover.
   ========================================================================== */

/* One line disarms three of the six. Every height on the bar is derived
   from the gap between these two tokens — the interpolation above, and both
   .is-stuck rules in components.css — so closing the gap makes all of them
   constant without any of them being overridden individually. It also keeps
   the anchor offsets honest: scroll-padding-top and the sticky editorial
   aside are both measured from --header-h-stuck, and the header they were
   compensating for no longer shrinks. */
:root { --header-h-stuck: var(--header-h); }

/* The lockup, pinned. Specificity of (0,2,1) on purpose: components.css
   sizes it through `.header.is-stuck .brand__logo`, which outranks a bare
   class selector however late it is declared. */
body .header .brand__logo--header {
  height: 64px;
  transition: none;
}

@media (max-width: 767px) {
  body .header .brand__logo--header { height: 44px; }
}

/* The transitions. `body .header` clears the fx.css rule, which is a bare
   .header and so cannot be beaten on source order — signature.css loads
   before fx.css. */
body .header,
body .header__inner {
  transition: none;
}

/* ==========================================================================
   22. THE FAQs PAGE
   Client note: the page does not look like the rest of the site. It does not,
   and for two specific reasons — both of them a component being used for a
   job it was not drawn for.

   1. THE CATEGORY TABS WERE CHIPS. .chip is the theme's STATIC LABEL: it is
      what the secondary services are set in, and it is not interactive
      anywhere else on the site. Pressed into service as a tablist it brought
      its pill border and, worse, `button.chip:hover` and
      `button.chip[aria-selected="true"]` resolve to the SAME rule — a solid
      gold fill — so the tab you are hovering and the tab you are actually on
      looked identical, and neither looked like a tab. On the ivory ground
      that fill is also the one gold the palette forbids at small sizes.

      They now use the vocabulary the site already has for "which one am I
      on": the header's nav rule. A quiet label, and a gold line that draws
      itself underneath the selected one on the same curve the nav uses.
      Hover moves the colour; only selection draws the rule.

   2. THE PANEL WAS A CARD. .faq-panel sits in the long plate list at the top
      of this file, so it took a raised background, a border, a radius, a
      shadow and the specular beam — around an accordion that already carries
      a rule above it and a hairline under every item. A box around a list of
      rules is two structures doing one job, and it is the single thing that
      made the page read as belonging to another site. Vantage is built from
      lines and open ground, not from boxes; the plate comes off and the
      accordion is left to be the structure.
   ========================================================================== */

/* -- The tablist ----------------------------------------------------------- */
.faq-tabs {
  gap: clamp(1.25rem, 0.5rem + 1.6vw, 2.75rem);
  padding-bottom: 0;
  border-bottom: var(--hair) solid var(--line);
}

/* (0,3,0) throughout — enough to clear `button.chip[aria-selected="true"]`
   at (0,2,1) in components.css, which cannot be beaten on source order. */
.faq-tabs .chip {
  position: relative;
  display: inline-block;
  padding: 0 0 var(--sp-4);
  border: 0;
  border-radius: 0;
  background: none;
  color: color-mix(in srgb, var(--text) 58%, transparent);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.2;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.faq-tabs .chip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;            /* sits on the list's own rule, not above it */
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-rule);
}

.faq-tabs .chip:hover,
.faq-tabs .chip:focus-visible { background: none; color: var(--text); }

.faq-tabs .chip[aria-selected="true"] {
  background: none;
  color: var(--text);
  font-weight: 600;
}

.faq-tabs .chip[aria-selected="true"]::after { transform: scaleX(1); }

/* -- The panel stops being a card ------------------------------------------
   Every property the plate rule set is returned to nothing. The second
   selector is the ivory override, which is (0,2,0) and so needs matching
   weight rather than just a later line. */
.faq-panel,
.surface-ivory .faq-panel {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* The specular beam belongs to plates. There is no plate here any more. */
.faq-panel::before { content: none; }

/* -- The accordion, given a little more room to be the page ---------------- */
.faq-panel .accordion { border-top-width: var(--rule-w-lg, 2px); }
.faq-panel .accordion__trigger { padding-block: var(--sp-5); }

/* ==========================================================================
   23. TWO SPACING CORRECTIONS
   ========================================================================== */

/* -- The card paragraph's margin was never actually removed ----------------
   Block 16 set `.card__text { margin-top: 0 }` and it did nothing, because
   base.css carries

     :is(h1, h2, h3, .mega, .display, .h1, .h2) + p { margin-top: var(--sp-5) }

   and :is() takes the specificity of its HEAVIEST argument — .mega and .h2
   are classes, so that selector weighs (0,1,1) against the (0,1,0) of a bare
   .card__text. The card title is an <h3> and the card text is the <p> right
   after it, so the rule matched and won, and 26px of margin stayed exactly
   where it was reported to be. One more class settles it. */
.card__body .card__text { margin-top: 0; }

/* -- Section rhythm --------------------------------------------------------
   Every band on the site is padded by --section-y, and at the top of its
   range that was 152px above and below the content — plus a --sp-8 (76px)
   gap under every section head on top of that. Stacked at a band boundary
   it came to well over 300px of empty ground between one section's last
   line and the next section's first, which is what reads as too much at the
   start and end of a section.

   Both are pulled in by roughly a third. The shape of the clamp is kept so
   the rhythm still opens up on a wide screen and closes on a phone — it is
   the same idea, just less of it. */
:root {
  --section-y: clamp(3rem, 1.5rem + 5vw, 6.5rem);
}

.section-head { margin-bottom: var(--sp-7); }

/* The closing band was padded on its own scale, wider even than a section.
   Brought onto the same footing. */
.cta-band { padding-block: clamp(2.75rem, 1.5rem + 4.5vw, 6rem); }

@media (max-width: 640px) {
  /* The narrow override in block 9 took the section head to --sp-6; with the
     desktop value now lower, --sp-5 keeps the same relationship. */
  .section-head { margin-bottom: var(--sp-5); }
}

/* --------------------------------------------------------------------------
   24. THE HERO SLIDE INDICATOR
   One thin rule per image along the foot of the hero. The one you are on
   fills gold left to right over exactly the interval the slide is held for,
   so the row answers all three questions at once: how many, which one, and
   how long is left.

   Rules and not dots, and no arrows, because this theme already says "in
   step with something" with a line that draws itself — the section horizon
   against the scroll, the nav underline on hover. A pair of chevrons is the
   one piece of furniture every slider on the internet already has; a gold
   rule filling to its own clock is the one this site would have.

   It is aligned to the container's left edge, not centred, so it sits on the
   same line the headline and the lead start from rather than floating.
   -------------------------------------------------------------------------- */

.hero-slides__nav {
  position: absolute;
  bottom: clamp(1rem, 2.2vh, 2rem);
  left: 50%;
  transform: translateX(-50%);
  /* .container is `max-width: var(--container)` with `padding-inline:
     var(--gutter)`, so its CONTENT box is min(100%, --container) minus two
     gutters. Written any other way the row starts a gutter's width left of
     the headline on any screen wider than the container. */
  width: calc(min(100%, var(--container)) - var(--gutter) * 2);
  /* Above .hero__inner (3), which is the highest thing in the band — these
     are controls and have to be clickable. */
  z-index: 4;
  display: flex;
  gap: 0.6rem;
  pointer-events: none;   /* the row is a spacer; the buttons take the clicks */
}

.hero-slides__dot {
  pointer-events: auto;
  /* A 14px-tall target around a 2px rule: the rule is the thing you see, the
     button is the thing you can actually hit. */
  flex: 0 1 clamp(2.5rem, 7vw, 4.5rem);
  height: 14px;
  padding: 6px 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
}

.hero-slides__dot::before {
  content: "";
  display: block;
  height: 2px;
  background: color-mix(in srgb, var(--pewter) 28%, transparent);
  transition: background-color var(--dur-fast) var(--ease);
}

.hero-slides__dot:hover::before,
.hero-slides__dot:focus-visible::before {
  background: color-mix(in srgb, var(--pewter) 55%, transparent);
}

.hero-slides__dot:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* The fill rides on top of the track, so the unfilled part of the current
   rule stays visible behind it rather than the whole thing going dark. */
.hero-slides__fill {
  display: block;
  height: 2px;
  margin-top: -2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left center;
}

.hero-slides__dot.is-current::before {
  background: color-mix(in srgb, var(--pewter) 40%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  /* The script already stops rotating and paints the current rule solid;
     this makes sure no leftover transition creeps it there. */
  .hero-slides__fill { transition: none !important; }
}

@media (max-width: 640px) {
  .hero-slides__nav { gap: 0.45rem; bottom: 0.85rem; }
  .hero-slides__dot { flex: 1 1 auto; }
}

/* The band gives up just enough room at its foot that the indicator can
   never sit under the last line of hero copy — the trust row on the home
   page, the lead everywhere else. Only when the row actually exists: the
   class is added by the script at the moment it inserts it. */
.hero.has-slide-nav .hero__inner,
.page-hero.has-slide-nav .page-hero__inner {
  padding-bottom: clamp(2.75rem, 5vh, 4rem);
}

/* ==========================================================================
   25. INTERIOR HERO HEIGHT, PROPERLY UNIFORM
   Block 14 pinned the interior heroes to a shared floor and that held for
   most of them — but two pages carry content the others do not, and both
   grew straight past it.

     wine-tours  a two-button action row, on a --sp-7 (52px) inline margin,
                 under the longest hero lead on the site (259 characters).
     thank-you   a seal, a THREE-button row on the same margin, and a narrow
                 container that makes every line of it wrap sooner.

   A floor only makes things uniform if it is above the tallest of them.
   Two changes, from both ends:

   1. The action rows come in from --sp-7 to --sp-5, which is what the gap
      is under a hero lead everywhere else on the site. wine-tours had this
      as an inline style, which no stylesheet can override — it is a class
      now, so the spacing lives with the rest of the spacing.

   2. The floor goes from 38rem to 41rem, which clears the tallest remaining
      hero with room to spare.

   And because the floor moved, the home hero moves with it: the whole point
   of the earlier pass was that home reads as the taller arrival, and at
   38rem that was true at every viewport height by a comfortable margin. At
   41rem the old home figure would have been SHORTER than an interior page
   on a short screen, which is the opposite of what was asked for. Its floor
   is raised to keep the relationship intact — verified against interior at
   every viewport height from 600 to 1400px, not assumed.
   ========================================================================== */

.hero__actions--in-hero,
.thankyou .cta-band__actions { margin-top: var(--sp-5); }

/* -- AND THE ACTUAL CULPRIT ------------------------------------------------
   The action row was not the whole story. Measuring the two authored title
   lines on every interior page against the 20ch measure they are set in:

     about 19/12   booking 21/13   contact 10/10   corporate 22/18
     partner 21/11 — all two lines, all the same height
     wine-tours 16/28  <- the second line does not fit and wraps
     services   26/26  <- both lines sit right on the limit

   So wine-tours renders a THREE line title where every other page renders
   two, and one extra line of display type at this size is about 94px. That
   is the difference that was reported, and no floor fixes it — a floor only
   raises the pages that are already short, it cannot bring the tall one
   down.

   The measure is widened on those two pages so their lines set the way every
   other page's do. Nothing else changes: same size, same leading, same
   copy — the line simply stops breaking where it was never meant to. */
.page-hero--wine .page-hero__title,
body[data-page="services"] .page-hero__title { max-width: 26ch; }

/* The two floors that stood here are gone: block 26 gives .hero and
   .page-hero one shared --hero-min-h, and a second pair of numbers in this
   file would only be a chance for the two to drift apart. The title measure
   above is the part of this pass that still matters. */

/* ==========================================================================
   26. ONE HERO HEIGHT, HOME INCLUDED
   Supersedes the "home is the taller arrival" split from block 14. Every
   hero on the site — home and interior — now resolves to the same number,
   and it is literally the same expression: both read --hero-min-h, so there
   is no pair of values that can be edited out of step with each other.

   WHAT HAD TO CHANGE ON HOME, beyond the floor itself. The interior heroes
   were already padded to clear the header and then centred (block 14); home
   was still carrying its own much larger padding-block plus a set of inner
   margins the interior pages do not have — the gap under the headline, the
   gap under the lead, and a clamp of up to 96px between the buttons and the
   trust row. Together that was roughly 300px that no interior hero spends.
   Home takes the same padding treatment and those three gaps come in to
   match the rhythm the rest of the site uses under a hero lead.

   THE NUMBER. Home's content measures about 690px at desktop widths and the
   tallest interior (wine-tours) about 630px, so the floor is set by home, as
   it has to be — one standard height means the fullest page sets it. 44rem
   clears home with room to spare; interior heroes are correspondingly taller
   than they were, which is the cost of them all matching.

   Still scoped to 900px and up. Below that the copy rewraps unpredictably
   and the pages are read one at a time rather than compared side by side,
   which is where .hero { min-height: 0 } already takes over on a phone.
   ========================================================================== */

@media (min-width: 900px) {
  :root {
    --hero-min-h: max(44rem, min(80vh, 46rem));
  }

  .hero,
  .page-hero { min-height: var(--hero-min-h); }

  /* Home on the interior treatment: clear the header, then let the flex
     centring place the content in what is left. */
  .hero { padding-block: var(--header-h) 0; }

  /* The three gaps that only home has. Each one drops to the value the same
     relationship carries elsewhere on the site. */
  .hero__title   { margin-bottom: calc(var(--sp-5) + 0.18em); }
  .hero__lead    { margin-bottom: var(--sp-6); }
  .hero__actions { margin-bottom: var(--sp-6); }
}

/* ==========================================================================
   27. THE FLAGSHIP SPOTLIGHT — THE IMAGE FILLS ITS COLUMN
   Reported as too much space above and below the photograph next to "Our
   Flagship Service". It is not padding; the picture is simply far shorter
   than the column beside it, for two compounding reasons.

   FIRST, AND THIS IS A BUG WORTH KNOWING ABOUT. lorqen_media() takes a
   `ratio` argument and writes it out as `style="--ratio: 4 / 3"`. Nothing
   reads --ratio. The .media rule in components.css reads --plate-RATIO,
   which is a theme token currently set to 16 / 8. So every ratio ever
   passed to that helper is discarded, and this plate — asked for at 4 / 3 —
   renders at 2 : 1. Beside a text column running to roughly 700px, a 2 : 1
   plate in a 546px column is about 273px tall, and the rest is the gap that
   was reported. (The same is true of every other lorqen_media call on the
   site; this block only fixes the one that was raised.)

   SECOND, the grid centres its items, so that short plate sits in the middle
   of the row with the difference split above and below it.

   THE FIX IS NOT ANOTHER RATIO. Picking a taller number would match today's
   copy and drift the moment a line is added or removed. The media column is
   stretched to the row instead, and the plate told to fill it — so the
   photograph is exactly as tall as the words beside it, whatever those words
   later become. .media paints its picture as a background at `cover`, so
   filling a taller box crops it rather than stretching it.
   ========================================================================== */

@media (min-width: 960px) {
  .spotlight__grid { align-items: stretch; }

  /* The media column and the zoom frame inside it both become flex parents
     so the height can pass all the way down to the plate. */
  .spotlight__grid > :last-child,
  .spotlight__grid > :last-child > .zoom { display: flex; }

  .spotlight__grid > :last-child > .zoom { flex: 1 1 auto; }

  /* (0,2,0) — enough to clear `.media { aspect-ratio: var(--plate-ratio) }`
     in components.css, which is what was fixing the height at 2 : 1. */
  .spotlight__grid > :last-child .media {
    flex: 1 1 auto;
    aspect-ratio: auto;
  }
}

/* ==========================================================================
   28. UPLOADED PHOTOGRAPHS INSIDE A PLATE
   .media has always had two ways to carry a picture: the theme's slot map,
   which paints it as a background, and lorqen_media()'s <img>, which is what
   an upload from the Media Library produces. Only the first was ever styled
   — nothing in this theme targeted `.media img` — so an uploaded photograph
   would have rendered at its intrinsic size inside a flex box with padding,
   which is to say wrongly. It has not shown up because no uploads exist yet;
   it would have shown up the first time the client added one.

   Absolute rather than a flow child, because .media's own layout (flex,
   align-items: flex-end) exists to place the hint label at the foot of an
   empty plate, and the photograph should not have to negotiate with it.
   object-fit: cover matches what the background version does, so a plate
   looks the same whichever way its picture arrived.
   ========================================================================== */

.media > img,
.media > picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.media > img,
.media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* The same grade the background-painted plates carry, so the two cannot be
     told apart on a page that mixes them. */
  filter: saturate(1.05) contrast(1.04);
}

/* With a real photograph in place the hint label is noise. */
.media:has(> img) .media__hint,
.media:has(> picture) .media__hint { display: none; }

/* ==========================================================================
   29. ROMAN NUMERALS ON THE PILLARS, AND RAILS WITHOUT A NUMBER
   Two notes from 2026-09-20.

   The vertical rails lost their numeral in the markup — they read as a label
   turned on its side now, and a number rotated ninety degrees was the part
   that had to be decoded rather than glanced at. Nothing to do here but note
   where it went.

   The six Why LORQEN pillars are set in Roman numerals instead. The stored
   value is still "01" through "06" — the conversion happens in Render, so
   the admin panel keeps a number that sorts and reads properly and the theme
   decides how to draw it.

   Two small corrections follow from the change of alphabet. The numeral rule
   carried `font-variant-numeric: oldstyle-nums`, which asks a font for
   text-figure digits and means nothing at all once the numeral is a run of
   letters — it is switched off rather than left sitting there implying an
   effect. And I, II, III, IV set solid at this size read as one wide glyph,
   so they take a little tracking; "VI" needs the air more than "06" ever
   did.
   ========================================================================== */

.pillar__num {
  font-variant-numeric: normal;
  letter-spacing: 0.08em;
  /* The tracking above adds space after the final letter too, which pushes
     the numeral visually right of the title beneath it. This pulls the
     optical left edge back into line. */
  margin-left: -0.02em;
}

/* ==========================================================================
   30. THE 2026-09-20 PASS
   ========================================================================== */

/* -- The hero scrim no longer reaches the band's edge ----------------------
   Reported as the hero gradient spilling over the top of the next section on
   booking, contact, corporate, fleet and services.

   It is not a spill — .page-hero clips — it is a HARD EDGE, and I caused it.
   The hero copy sits on .page-hero__inner::before, a left-to-right black at
   0.90 that bleeds 2.5rem past the block on every side. When the interior
   heroes were given `padding-bottom: 0` so their heights could be pinned,
   the inner block moved down to sit flush with the foot of the band — and
   its scrim, bleeding 2.5rem further, got cut off square by the overflow.
   A 0.90 black stopping dead on the boundary reads exactly like the
   gradient continuing into whatever is beneath it.

   Fixed from both ends. The band takes back enough bottom padding to hold
   the bleed — which costs nothing, because the height is set by min-height
   and the content is centred, so padding moves the content rather than the
   box. And the scrim is masked to fade out at top and bottom, so it can
   never present a hard edge anywhere again, whatever later changes the
   layout around it. */
@media (min-width: 900px) {
  .page-hero { padding-bottom: clamp(2.75rem, 5vh, 4.5rem); }
  .hero      { padding-bottom: clamp(2.75rem, 5vh, 4.5rem); }
}

.hero__inner::before,
.page-hero__inner::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 88%, transparent 100%);
}

/* -- The vehicle picker's caption -----------------------------------------
   Reported as the text under the images sitting wrongly on booking. The
   cause is one missing declaration: .selector__body is a <span> carrying
   `padding: var(--sp-4)`, and a span is INLINE, so that padding never
   pushed the box open — the name and the spec line, both display: block,
   were laying themselves out inside an inline parent. One word fixes it. */
.selector__body { display: block; }

/* While in there: the two lines needed a relationship rather than just a
   gap, and the spec line was the same weight as the name. */
.selector__name { line-height: 1.3; margin-bottom: 0.3rem; }
.selector__spec { display: block; color: var(--text-dim); }

/* -- The footer region line ------------------------------------------------ */
.footer__region { text-transform: capitalize; }

/* -- Compare our vehicles --------------------------------------------------
   Reported as not matching the theme, and it did not: the table was set
   entirely in the UI sans at --fs-xs, 12.8px, including the vehicle names —
   so the one column that is a list of PROPER NOUNS read as interface chrome.
   Everywhere else on this site a name of that rank is the display serif.
   Its rules were also the page's generic hairline rather than the rules this
   theme draws, and its hover filled the whole row with a raised surface
   colour, which is a control's behaviour, not a table's.

   Brought onto the theme's own terms. The vehicle column becomes display
   type at reading size; the head becomes the same gold letter-spaced label
   the rest of the site uses for a column heading, over the 2px rule the
   theme draws under anything that introduces a list; the body figures go
   tabular so the passenger and case counts line up down the column, which
   is the entire reason someone looks at a comparison table; and the hover
   is a gold left-edge mark and a lift in text colour rather than a fill.
   -------------------------------------------------------------------------- */

.compare { font-size: var(--fs-sm); border-collapse: collapse; }

.compare thead th {
  padding-bottom: var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  color: var(--accent);
  border-bottom: var(--rule-w-lg, 2px) solid var(--brass);
}

.compare th,
.compare td {
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
  border-bottom: var(--hair) solid var(--line);
  vertical-align: middle;
}

/* The row heading is the vehicle's name — set like a name. */
.compare tbody th {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--text);
  padding-left: var(--sp-4);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}

/* The gold mark that arrives on hover, drawn from the row's own left edge on
   the theme's rule curve — the same gesture the nav underline makes. */
.compare tbody th::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--brass);
  transform: translateY(-50%);
  transition: height var(--dur) var(--ease-rule);
}

.compare tbody td {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease);
}

/* No fill. The row lifts in colour and grows its mark. */
.compare tbody tr:hover th { color: var(--brass-lt); }
.compare tbody tr:hover td { color: var(--text); }
.compare tbody tr:hover th::before { height: calc(100% - var(--sp-5) * 1.4); }

.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }

/* The table scrolls sideways on a narrow screen. Say so, rather than letting
   someone discover the third column by accident. */
@media (max-width: 860px) {
  .compare { font-size: var(--fs-xs); }
  .compare th, .compare td { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; }
  .compare tbody th { font-size: var(--fs-body); }
}

/* -- The FAQ accordion -----------------------------------------------------
   Block 22 took the page's furniture off — the chip tabs and the card plate
   around the list. What was left underneath is a plain accordion, and this
   is the pass that makes it the site's.

   Four things were wrong with it, all of them the same mistake: it was
   built to the shared core's defaults rather than to this theme.

   1. The question sat at --fs-h4, barely above body size, so a list of
      questions read as a list of links. A question is the thing you scan;
      it is set at h3 now.
   2. Open and closed looked nearly identical — the trigger went gold either
      way. Now the OPEN row is the one that is marked: gold question, and a
      gold rule drawn down its left edge on the theme's own rule curve, the
      same gesture the nav underline and the section horizon make.
   3. The plus/minus mark was an 18px cross sitting at the top of the line.
      It is bigger, aligned to the question's optical centre, and it rotates
      rather than swapping glyphs.
   4. The answer appeared hard against the question with no relationship to
      it, and ran the full width. It is indented to the question's own text
      column so the two read as one block, and held to a measure.
   -------------------------------------------------------------------------- */

.faq-panel .accordion__item {
  position: relative;
  transition: border-color var(--dur) var(--ease);
}

/* The rule that marks the open row. */
.faq-panel .accordion__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform var(--dur) var(--ease-rule);
}

.faq-panel .accordion__item:has([aria-expanded="true"])::before { transform: scaleY(1); }

.faq-panel .accordion__trigger {
  gap: var(--sp-6);
  padding-left: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--text);
}

/* Hover moves it; only OPEN marks it. Two states that looked the same were
   the main reason the list read as inert. */
.faq-panel .accordion__trigger:hover { color: var(--text-muted); }
.faq-panel .accordion__trigger[aria-expanded="true"] { color: var(--accent); }

.faq-panel .accordion__icon {
  width: 22px;
  height: 22px;
  margin-top: 0.22em;
  transition: transform var(--dur) var(--ease);
}

.faq-panel .accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }

.faq-panel .accordion__content {
  padding-left: var(--sp-5);
  padding-bottom: var(--sp-6);
  max-width: 64ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (max-width: 640px) {
  /* The left indent costs more than it gives on a phone, where the column is
     the screen; the question drops a size with it. */
  .faq-panel .accordion__trigger,
  .faq-panel .accordion__content { padding-left: var(--sp-4); }
  .faq-panel .accordion__trigger { font-size: var(--fs-h4); gap: var(--sp-4); }
}

/* -- .assurance joins the wash-and-drift family ----------------------------
   The booking page's block below the hero was asked for in the Why LORQEN
   treatment, and the colour part of that reached it — but it turned out
   .assurance had no hover at all, so it would have taken the grey ground
   and then sat inert while every other block in that family responded.
   Given the same ::before wash and the same drift that .pillar, .step,
   .usecase and .highlight already share, so "the same as Why LORQEN" is
   true of the behaviour and not only the colour. */

.assurance {
  position: relative;
  overflow: hidden;
}

.assurance::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brass) 9%, transparent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.7s var(--fx-ease-soft, ease);
  pointer-events: none;
}

.assurance:hover::before { opacity: 1; }

.assurance__title,
.assurance__text {
  position: relative;
  z-index: 1;
  display: block;
  transition: transform 0.7s var(--fx-ease-soft, ease), color 0.7s var(--fx-ease-soft, ease);
}

.assurance:hover .assurance__title { transform: translateX(6px); }
.assurance:hover .assurance__text  { transform: translateX(4px); }

/* ==========================================================================
   31. ROMAN NUMERALS ON THE STEP LISTS
   ========================================================================== */

/* Asked for on the services page's "How It Works". The step numbers are not
   in the markup at all — Render::steps() emits no numeral, and the figure
   comes from a CSS counter declared in components.css:

       .steps { counter-reset: step; }
       .step  { counter-increment: step; }
       .step::before { content: counter(step, decimal-leading-zero); }

   So this needs no PHP. `decimal-leading-zero` and `upper-roman` are both
   built-in counter styles; swapping the second argument is the whole change,
   and the numbering stays automatic — add or remove a step in the admin and
   the sequence still runs I, II, III without anybody renumbering anything.

   Scope. Four templates share this component: services and thank-you use
   .steps--3, booking and wine-tours use .steps--4. Only services was named,
   but services "How It Works", wine-tours "How It Works" and booking "How
   Booking Works" were the same family in the earlier pass that gave all
   three the Why LORQEN treatment, so leaving two of them on 01 02 03 would
   reintroduce exactly the inconsistency that pass removed. All four move
   together; narrowing this to .steps--3, or to a page-scoped selector, is a
   one-line change if that is not wanted.

   The two adjustments underneath are the same two the pillar numerals
   needed, and for the same reasons. `oldstyle-nums` asks for text-figure
   digits and does nothing once the numeral is a run of letters, so it is
   switched off rather than left implying an effect. And I, II, III set
   solid at 1.6rem read as one wide glyph, so they take a little tracking —
   "VIII" on the booking list needs that air far more than "04" did. The
   tracking also adds space after the final letter, which pushes the numeral
   optically right of the title beneath it; the negative margin pulls its
   left edge back into line.

   Specificity: components.css sets .step::before at (0,1,1) and signature.css
   loads after it, so an equal-weight selector wins on order. No !important
   needed, and the hover translate in block 13 above is untouched. */

.step::before {
  content: counter(step, upper-roman);
  font-variant-numeric: normal;
  letter-spacing: 0.08em;
  margin-left: -0.02em;
}

/* ==========================================================================
   32. THE BOOKING BLOCK BELOW THE HERO JOINS THE FAMILY PROPERLY
   ========================================================================== */

/* Two faults reported together: the section changes height on hover, and its
   borders do not match the other sections of this kind. Both are mine, from
   the pass that gave .assurance the Why LORQEN treatment. That pass added the
   wash and the drift but left the OLD hover sitting underneath it, so the
   block was running two hover systems at once.

   THE HEIGHT CHANGE
   The old rule was `.assurance:hover { padding-left: var(--sp-3) }`. Padding
   on a grid cell comes out of the content box, so hovering re-wrapped the
   paragraph inside that cell. .assurances is a three-column grid with the
   default align-items: stretch, so one cell gaining a line makes the whole
   row -- and therefore the whole section -- taller, and the page below it
   jumps. On screens of 760px and up it was worse in a second way: pages.css
   gives `.assurance + .assurance` a padding-left of --sp-6, and the hover
   rule matches at the same (0,2,0) weight but loads later, so hovering the
   second or third cell REDUCED its padding from --sp-6 to --sp-3 and rewrapped
   in the opposite direction. Removed at source above rather than overridden
   here, because an override would have had to reinstate a different value for
   the first cell than for the other two and would have broken at the 760px
   boundary. Nothing in the family resizes on hover now.

   THE BORDERS
   The standard the other sections keep -- .pillars on home, about and partner,
   .highlights on contact -- is one accent rule across the top of the group, a
   hairline under each item, and NO vertical rules: the columns are separated
   by a gap. .assurances was the only one drawing border-left between its
   columns, and its hover then flipped that border to solid brass, which no
   other member of the family does. So it was reading as a different component
   on hover as well as at rest. Below it takes the .pillars geometry exactly:
   the same --sp-7 column gap, no vertical rules, no side padding. The top
   accent rule and the bottom hairline it already had are untouched, because
   those were already correct.

   Specificity: pages.css sets `.assurance + .assurance` at (0,2,0) inside a
   760px media query; the rule below matches that weight and loads later, so it
   wins on order without !important. The padding-left transition declared in
   fx.css is left alone -- padding no longer changes, so it is inert. */

.assurances { gap: 0 var(--sp-7); }
.assurance  { padding: var(--sp-6) 0; }

@media (min-width: 760px) {
  .assurance + .assurance { border-left: 0; padding-left: 0; }
}

/* ==========================================================================
   33. PARTNER — "WHAT WE LOOK FOR"
   ========================================================================== */

/* Reported as not carrying the black-grey ground and hover the other sections
   of its kind have. Nothing was wrong with the CSS: the section already uses
   .pillars, the same component as Why LORQEN, and .pillar's wash-and-drift
   hover is global. The section was simply never given the .surface-slate
   class -- it was marked up as plain .surface-dark. Every other section of
   this family carries both (home Why LORQEN, about The LORQEN Difference,
   services and wine-tours How It Works, fleet Ideal For Every Journey, both
   booking blocks), and partner was the one that got missed.

   Fixed in the markup, in partner.php, rather than with a page-scoped rule
   here -- a selector that reproduced .surface-slate for one page would be a
   second copy of the treatment to keep in step with this one. There is no CSS
   in this block; the note is here so the change is findable from the
   stylesheet, since that is where the rest of the treatment lives. */

/* ==========================================================================
   34. CLIENT PASS — 2026-09-20 (B)
   Fifteen notes from the client. The CSS half of them lives here; the rest
   is markup, data and admin work (see the migrations dated 2026-09-20-1000xx).
   ========================================================================== */

/* -- 1. Home → Our Services: taller cards, ONE height, nothing clipped -------
   Block 16 got every card to one height by clamping the copy to a fixed
   number of lines — and the client's longer descriptions were being cut off
   mid-sentence. The clamp is lifted for the services deck only (the fleet
   deck keeps block 16 exactly as it is) and the equal height now comes from
   the grid instead: `grid-auto-rows: 1fr` makes every implicit row as tall as
   the tallest card in the WHOLE deck, not just in its own row, so row two
   matches row one whatever the copy. Inside the card, the body is three rows
   — heading, text (takes the slack), Learn more — so the link sits on the
   same line in every card. */
.services-grid { grid-auto-rows: 1fr; }
.services-grid > .card { height: 100%; }
.services-grid .card__body {
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
}
.services-grid .card__title {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
  /* No reserved second line: the deck's equal height now comes from the
     grid, so a one-line title no longer needs padding out. */
  min-height: 0;
}
.services-grid .card__text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
  min-height: 0;
  margin-top: var(--sp-3);
}
.services-grid .card__foot { margin-top: var(--sp-4); align-self: end; }

/* -- 7. Footer: the LQ watermark, smaller and lighter ------------------------
   It was 330px tall at 4.5% and sat across the Company and Legal columns.
   Now a small, quieter mark tucked into the bottom-right corner, clear of the
   link columns, at roughly half the strength. */
.footer > .container::before {
  top: auto;
  bottom: calc(var(--sp-8) + 1.5rem);
  transform: none;
  height: 150px;
  opacity: 0.025;
}
@media (max-width: 767px) {
  .footer > .container::before { height: 96px; bottom: 76px; opacity: 0.03; }
}
/* Admin → Section Visibility → Site-wide → "Footer LQ watermark". */
.footer--no-mark > .container::before { content: none; }

/* -- 10. Wine Tours → From the Vineyards: no more jumping --------------------
   The testimonial slider showed one quote at a time with display:none on the
   rest, so the block took the height of whichever quote was showing and the
   whole page below it jumped every seven seconds. All quotes now share ONE
   grid cell, stacked; the box is as tall as the longest quote at all times,
   and changing quote is a cross-fade inside a box that never moves. Applies
   to every quotes slider (home and about too). */
.quotes > [aria-live] { display: grid; }
.quotes .quote {
  display: block;
  grid-area: 1 / 1;
  align-self: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.6s var(--fx-ease-soft, ease), visibility 0s linear 0.6s;
}
.quotes .quote.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.6s var(--fx-ease-soft, ease);
}

/* -- 12. Contact → the four cards under the hero were invisible --------------
   An ivory band redefines --text to ink, but `color` itself was never reset,
   so anything that simply INHERITS its colour — the phone number, the email,
   the region line — kept the page's ivory and vanished into the ivory
   ground (it only showed when hover coloured the link gold). Every ivory
   band now sets its own text colour, which fixes those four and anything
   else built the same way. */
.surface-ivory { color: var(--text); }
.surface-ivory .highlight__value,
.surface-ivory .highlight__value a { color: var(--text); }
.surface-ivory .highlight__value a:hover { color: var(--accent); }
.surface-ivory .highlight__note { color: var(--text-muted); }

/* -- 14. Legal pages → the "On this page" index follows the reading ----------
   motion.js already marked the clause being read with .is-active; nothing
   drew it. A rule down the left of the index, lit in gold beside the
   current clause, with the clause title brought up to full ink. */
.toc__list[data-spy] .toc__link {
  padding-left: 0.9rem;
  border-left: 2px solid var(--line);
  transition: color 0.3s var(--fx-ease-soft, ease), border-color 0.3s var(--fx-ease-soft, ease);
}
.toc__list[data-spy] .toc__link.is-active {
  color: var(--text);
  border-left-color: var(--accent);
  font-weight: 600;
}
.toc__list[data-spy] .toc__link.is-active .toc__num { color: var(--accent); }

/* -- 15. Policy consent on every form ------------------------------------- */
.form__consent { margin-top: var(--sp-3); }
.form__consent .check { align-items: flex-start; }
.form__consent label { font-size: var(--fs-sm); line-height: 1.55; }
.form__consent a { text-decoration: underline; text-underline-offset: 2px; }
.form__consent .field__error { display: none; margin-top: var(--sp-2); font-size: var(--fs-xs); color: #b3261e; }
.form__consent.is-invalid .field__error { display: block; }
.surface-dark .form__consent.is-invalid .field__error,
.surface-charcoal .form__consent.is-invalid .field__error { color: #ff9b8f; }

/* ==========================================================================
   35. CLIENT PASS — 2026-09-22
   16  Gold buttons toned down so the logo is the brightest gold on the page
   17  Wash-and-drift hover back to its warm original; Roman numerals sized
       like About → Our Values
   18  A hero slider transition worthy of the theme (see hero-slider.js)
   19  Home hero headline re-set so "Driven" and "Precision" match
   ========================================================================== */

/* -- 16. Gold buttons, toned down -------------------------------------------
   The buttons were drawn in the logo's own gold (#DD9C2C) with a sheen that
   ran through #F1C77E almost to white — so every "Book" button on the page
   was as bright as the mark, and brighter at its highlight. They now use an
   antique champagne a step below the logo: same family, lower saturation,
   and a short, soft highlight instead of a white flash. The logo is again
   the brightest gold on screen. One set of tokens, used everywhere a gold
   button is drawn (buttons, the header Book Now, the phone call bar, the
   booking-form submit, active wine-region tab). */
:root {
  --btn-gold-lo:  #AF7F31;
  --btn-gold:     #CF9A3F;
  --btn-gold-hi:  #DEB768;
  --btn-gold-ink: #2B1D07;
  --btn-gold-bg:  linear-gradient(125deg, var(--btn-gold-lo) 0%, var(--btn-gold) 38%, var(--btn-gold-hi) 50%, var(--btn-gold) 62%, var(--btn-gold-lo) 100%);
  --btn-fill:       var(--btn-gold);
  --btn-fill-hover: var(--btn-gold-hi);
}

.btn--primary,
.surface-ivory .btn--primary,
.header .header__cta {
  background: var(--btn-gold-bg);
  --fx-btn-rest: var(--btn-gold-bg);
  border-color: var(--btn-gold-lo);
  color: var(--btn-gold-ink);
}
.header .header__cta { --fx-btn-sweep: var(--btn-gold-hi); --fx-btn-sweep-text: var(--btn-gold-ink); }
body .callbar__action--gold { background: var(--btn-gold-bg); color: var(--btn-gold-ink); }
body .callbar__action--gold .icon-svg { color: var(--btn-gold-ink); }
.region-nav__list a.is-active { background: var(--btn-gold); border-color: var(--btn-gold); color: var(--btn-gold-ink); }

/* -- 17a. The hover wash, back to warm ---------------------------------------
   Block 20 turned the wash grey on the black-and-grey bands. The client wants
   the earlier warm version back on every one of them: Why LORQEN, The LORQEN
   Difference, both How It Works, Ideal For Every Journey, the booking
   assurances, How Booking Works and What We Look For — all .surface-slate.
   The bands themselves stay black-and-grey; only the hover changes. */
/* (.step is not in the ::before list: its ::before IS the Roman numeral —
   its wash lives on ::after. Block 20 painted the grey wash onto the
   numeral too, which is the faint band that sat behind "I / II / III".) */
.surface-slate :is(.pillar, .usecase, .highlight, .assurance)::before,
.surface-slate .step::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brass) 11%, transparent) 0%, transparent 62%);
}
.surface-slate .step::before { background: none; }

/* -- 17c. The band's own ground, back to the original warm black -----------
   Block 20 recoloured these eight bands black-into-cool-grey (a 162deg
   gradient, a neutral ambient light and grey hairlines). Reverted to the
   original Vantage dark band: the flat warm near-black every other dark
   section uses, the warm moving light (--fx-c) from base.css, and the warm
   hairlines. The .surface-slate class stays in the markup, so the grey look
   can be brought back by deleting this block alone. */
.surface-slate {
  background: var(--bg);
  --line: #211E19;
  --line-accent: #362F22;
}
.surface-slate::after {
  background: radial-gradient(
    58vw 46vw at calc(50% + var(--fx-c, 0) * 42%) calc(50% - var(--fx-c, 0) * 26%),
    rgba(201, 194, 174, 0.11) 0%,
    rgba(221, 156, 44, 0.045) 34%,
    transparent 72%
  );
}

/* -- 17b. Roman numerals at the Our Values size ------------------------------
   About → Our Values sets its numerals (.badge__mark) at 1.15rem, upright,
   untracked, in the accent gold. The pillar and step numerals were 1.6-1.7rem
   italic, tracked and at 62% gold, and read as a second, louder system.
   They now match. */
.pillar__num,
.step::before {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  margin-left: 0;
  color: var(--accent);
}
.step::before { margin-bottom: var(--sp-4); }
.pillar__num { margin-bottom: var(--sp-4); }

/* -- 18. Hero slider: the light sweep ----------------------------------------
   Replaces the plain one-second crossfade. Each new photograph is REVEALED
   rather than faded in: a raked edge sweeps across the frame from the left
   (the same diagonal as the headlamp that crosses this theme's dark bands),
   a fine champagne line of light rides that edge, and the new picture
   settles from a slightly closer crop into place while it is uncovered.
   Every picture then keeps drifting — a slow push-in over the time it is
   held — so the hero is never quite still. The outgoing picture holds its
   frame underneath until it is fully covered, so there is never a blank or
   a dip in brightness mid-change.

   Layer: the clip (the sweep).  Its child: the photograph (the drift).
   Kept on separate elements so the two motions never fight over transform.
   Timing comes from JS as --slide-hold (the admin's interval). */

/* The stage becomes its own stacking context AT LEVEL 0, so the z-index the
   layers use below stays inside it: without this, a layer at z-index 2
   would climb over the hero's scrim (.hero__bg, .hero::before) and the
   headline would lose its darkening. As the hero's first child at level 0
   the stage still paints underneath .hero__bg, exactly as before. */
.hero-slides { z-index: 0; isolation: isolate; }

.hero-slides__layer {
  opacity: 1;
  visibility: hidden;
  transition: none;
  z-index: 0;
  background: none !important;
  filter: none;
  clip-path: inset(0 0 0 0);
}
.hero-slides__layer.is-current { visibility: visible; z-index: 2; }
.hero-slides__layer.is-leaving { visibility: visible; z-index: 1; }

.hero-slides__img {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  filter: saturate(1.05) contrast(1.04);
  transform-origin: 62% 38%;
  will-change: transform;
}
.hero-slides__layer.is-current .hero-slides__img,
.hero-slides__layer.is-leaving .hero-slides__img {
  animation: lq-slide-drift var(--slide-hold, 6000ms) linear both;
}
.hero-slides__layer.is-leaving .hero-slides__img { animation-play-state: running; }

.hero-slides__layer.is-entering {
  animation: lq-slide-sweep var(--slide-sweep, 1500ms) cubic-bezier(0.77, 0, 0.18, 1) both;
}
.hero-slides__layer.is-entering .hero-slides__img {
  /* The settle runs during the sweep and lets go (fill: backwards only);
     the drift starts the instant it ends (delay = sweep, no backwards
     fill), so the two meet at scale 1.0 with no hand-over jump. */
  animation:
    lq-slide-drift var(--slide-hold, 6000ms) linear var(--slide-sweep, 1500ms) forwards,
    lq-slide-settle var(--slide-sweep, 1500ms) cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* The line of light on the moving edge: its own layer, above the pictures,
   below the scrim, clipped to a thin band that follows the same raked edge
   on the same curve. Toned to the new button champagne, not the logo gold. */
.hero-slides__beam {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--btn-gold-hi) 40%, transparent) 45%,
    color-mix(in srgb, #F6EBD2 70%, transparent) 50%,
    color-mix(in srgb, var(--btn-gold-hi) 40%, transparent) 55%,
    transparent 100%);
  mix-blend-mode: screen;
}
.hero-slides__beam.is-sweeping {
  animation: lq-slide-beam var(--slide-sweep, 1500ms) cubic-bezier(0.77, 0, 0.18, 1) both;
}

@keyframes lq-slide-sweep {
  from { clip-path: polygon(0 0, 0 0, -22% 100%, 0 100%); }
  to   { clip-path: polygon(0 0, 122% 0, 100% 100%, 0 100%); }
}
@keyframes lq-slide-beam {
  0%   { opacity: 0;    clip-path: polygon(-3% 0, 0 0, -22% 100%, -25% 100%); }
  12%  { opacity: 0.85; }
  85%  { opacity: 0.85; }
  100% { opacity: 0;    clip-path: polygon(119% 0, 122% 0, 100% 100%, 97% 100%); }
}
@keyframes lq-slide-settle {
  from { transform: scale(1.09) translateX(-1.5%); filter: saturate(1.05) contrast(1.04) brightness(1.12); }
  to   { transform: scale(1.0)  translateX(0);     filter: saturate(1.05) contrast(1.04) brightness(1); }
}
@keyframes lq-slide-drift {
  from { transform: scale(1.0); }
  to   { transform: scale(1.055); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slides__layer.is-entering,
  .hero-slides__layer.is-entering .hero-slides__img,
  .hero-slides__layer.is-current .hero-slides__img,
  .hero-slides__layer.is-leaving .hero-slides__img,
  .hero-slides__beam.is-sweeping { animation: none; }
}

/* -- 19. Home hero headline ---------------------------------------------------
   "Driven by" was upright and "Precision" italic, a size larger and in full
   logo gold — so the D and the P were two different letters from two
   different styles, and the line read as two headlines. Both words are now
   set in ONE style: Cormorant Garamond, upright, medium — a high-contrast
   old-style roman with the classical proportions of engraved lettering,
   which is the register the logo's own serif sits in. "Precision" is told
   apart by colour alone: a quiet champagne gradient, a step below the logo.
   Same size, same weight, same slant; the D and the P now match. */
body[data-page="home"] .hero__title,
body[data-page="home"] .hero__title .accentuate {
  font-family: "Cormorant Garamond", "Cormorant", "Instrument Serif", Georgia, serif;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.005em;
}
body[data-page="home"] .hero__title {
  font-size: clamp(2.75rem, 1.35rem + 4vw, 5rem);
  line-height: 1.04;
}
body[data-page="home"] .hero__title .rl:has(> .accentuate) { font-size: 1em; }
body[data-page="home"] .hero__title .accentuate {
  color: var(--btn-gold-hi);
  background: linear-gradient(180deg, #E7D3A2 0%, var(--btn-gold-hi) 42%, var(--btn-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* A single fine rule under the headline, drawn in the same champagne, ties
   the two lines into one lockup. */
body[data-page="home"] .hero__title::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 1px;
  margin-top: 0.32em;
  background: linear-gradient(90deg, var(--btn-gold-hi), transparent);
}

/* ==========================================================================
   36. ICON CARDS — Why LORQEN and every block of its kind (2026-09-22)
   The client's reference: each item becomes a card — hairline border, soft
   rounded corners, a gold icon badge at the left, the Roman numeral and
   title beside it, a small chevron at the right, the copy underneath. On
   hover the whole card answers at once: the border warms to gold, a soft
   light gathers from the top-left corner, the card rises a few pixels and
   glows faintly — and nothing inside it moves or changes size, which is
   what made the old wash-and-drift read as "broken or teared".

   Applies to the four blocks built this way — .pillar (Why LORQEN, The
   LORQEN Difference, What We Look For, Why LORQEN on Services, What's
   Included, Regional destinations), .step (every How It Works / How Booking
   Works / What Happens Next), .usecase (Ideal For Every Journey, Regional
   Who It Is For) and .assurance (Booking, below the hero). The markup comes
   from Render (class lq-card + the icon and chevron spans); each card's icon
   is chosen from its title unless the content names one.

   The lift uses the `translate` property, not `transform`, so it cannot
   fight the scroll-reveal, which owns `transform` on these same elements.
   ========================================================================== */

/* -- The grids ------------------------------------------------------------ */
.pillars, .steps, .usecases, .assurances {
  gap: clamp(14px, 1.4vw, 22px);
  border-top: 0;
}
.assurances { gap: clamp(14px, 1.4vw, 22px); }
@media (min-width: 720px)  { .steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .steps--4 { grid-template-columns: repeat(4, 1fr); } }

/* The booking assurances sat in a narrow container, which was fine for
   ruled strips and far too tight for three cards. */
.section:has(.assurances) > .container--narrow { max-width: var(--container, 1280px); }
/* Four use cases in a three-column grid left one card on its own; four go
   two by two. */
@media (min-width: 1040px) {
  .usecases:has(> .lq-card:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}

/* -- The card ------------------------------------------------------------- */
.lq-card.lq-card {
  --lq-r: 14px;
  --lq-edge: color-mix(in srgb, var(--pewter, #F6F2E9) 9%, transparent);
  --lq-edge-hover: color-mix(in srgb, var(--btn-gold, #BD9A55) 62%, transparent);
  --lq-glow: color-mix(in srgb, var(--btn-gold, #BD9A55) 26%, transparent);
  --lq-face: linear-gradient(160deg, color-mix(in srgb, var(--pewter, #F6F2E9) 4.5%, transparent) 0%, color-mix(in srgb, var(--pewter, #F6F2E9) 1.2%, transparent) 100%);

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 1.9rem;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "icon num   chev"
    "icon title chev"
    "text text  text";
  column-gap: 1rem;
  align-items: start;
  padding: clamp(20px, 1.8vw, 28px);
  border: 1px solid var(--lq-edge);
  border-radius: var(--lq-r);
  background: var(--lq-face);
  overflow: hidden;
  translate: 0 0;
  transition:
    translate 0.6s var(--fx-ease-soft, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 0.6s var(--fx-ease-soft, ease),
    box-shadow 0.6s var(--fx-ease-soft, ease);
}
/* Clear the ruled-strip geometry each of the four used to carry. */
.pillars > .lq-card.lq-card,
.pillars--4 > .lq-card.lq-card,
.assurances > .lq-card.lq-card,
.assurance + .lq-card.lq-card {
  padding: clamp(20px, 1.8vw, 28px);
  border: 1px solid var(--lq-edge);
}

/* The light that gathers from the corner on hover. .step keeps its ::before
   for the numeral, so its light is ::after; the other three use ::before. */
.pillar.lq-card::before,
.usecase.lq-card::before,
.assurance.lq-card::before,
.step.lq-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(120% 95% at 0% 0%, color-mix(in srgb, var(--btn-gold, #BD9A55) 20%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--btn-gold, #BD9A55) 6%, transparent), transparent 70%);
  opacity: 0;
  transform: none;
  transition: opacity 0.6s var(--fx-ease-soft, ease);
  pointer-events: none;
}

.lq-card.lq-card:hover,
.lq-card.lq-card:focus-within {
  translate: 0 -4px;
  border-color: var(--lq-edge-hover);
  box-shadow:
    0 26px 50px -34px rgba(0, 0, 0, 0.85),
    0 0 36px -12px var(--lq-glow),
    inset 0 1px 0 color-mix(in srgb, var(--btn-gold-hi, #CDB073) 22%, transparent);
}
.pillar.lq-card:hover::before,
.usecase.lq-card:hover::before,
.assurance.lq-card:hover::before,
.step.lq-card:hover::after { opacity: 1; }

/* Nothing inside moves any more. */
.lq-card:hover .pillar__num, .lq-card:hover .pillar__title, .lq-card:hover .pillar__text,
.lq-card:hover .step__title, .lq-card:hover .step__text,
.lq-card:hover .usecase__title, .lq-card:hover .usecase__text,
.lq-card:hover .assurance__title, .lq-card:hover .assurance__text,
.step.lq-card:hover::before { transform: none; }

/* -- Placing the parts ---------------------------------------------------- */
.lq-card__icon { grid-area: icon; }
.lq-card__chev { grid-area: chev; justify-self: end; }
.lq-card .pillar__num, .step.lq-card::before { grid-area: num; }
.lq-card :is(.pillar__title, .step__title, .usecase__title, .assurance__title) { grid-area: title; }
.lq-card :is(.pillar__text, .step__text, .usecase__text, .assurance__text) { grid-area: text; }

/* Numeral and title sit as one small stack beside the badge. */
.lq-card .pillar__num,
.step.lq-card::before {
  align-self: end;
  margin: 0 0 0.2rem;
  font-size: 1rem;
  line-height: 1.1;
}
.lq-card :is(.pillar__title, .step__title, .usecase__title, .assurance__title) {
  align-self: start;
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.15rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text);
}
/* A card with no numeral (use cases, assurances): the title centres on the
   badge instead of sitting under an empty line. */
.usecase.lq-card, .assurance.lq-card {
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "icon title chev"
    "text text  text";
}
.usecase.lq-card .usecase__title,
.assurance.lq-card .assurance__title { align-self: center; }

.lq-card :is(.pillar__text, .step__text, .usecase__text, .assurance__text) {
  margin: 1.1rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-muted);
}

/* -- The badge and the chevron --------------------------------------------- */
.lq-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--btn-gold, #BD9A55) 32%, transparent);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--btn-gold, #BD9A55) 20%, transparent), color-mix(in srgb, var(--btn-gold, #BD9A55) 4%, transparent) 70%);
  color: var(--btn-gold-hi, #CDB073);
  transition: border-color 0.6s var(--fx-ease-soft, ease), box-shadow 0.6s var(--fx-ease-soft, ease), color 0.6s var(--fx-ease-soft, ease);
}
.lq-card__icon .icon-svg { width: 1.5rem; height: 1.5rem; stroke-width: 1.5; }
.lq-card:hover .lq-card__icon {
  border-color: color-mix(in srgb, var(--btn-gold, #BD9A55) 70%, transparent);
  box-shadow: 0 0 22px -6px var(--lq-glow);
  color: #E7D3A2;
}

.lq-card__chev {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--pewter, #F6F2E9) 16%, transparent);
  color: color-mix(in srgb, var(--pewter, #F6F2E9) 70%, transparent);
  transition: border-color 0.6s var(--fx-ease-soft, ease), color 0.6s var(--fx-ease-soft, ease), translate 0.6s var(--fx-ease-soft, ease);
}
.lq-card__chev .icon-svg { width: 0.95rem; height: 0.95rem; stroke-width: 1.8; }
.lq-card:hover .lq-card__chev {
  border-color: var(--lq-edge-hover);
  color: var(--btn-gold-hi, #CDB073);
  translate: 2px 0;
}

/* -- On an ivory band --------------------------------------------------------
   Services → Why LORQEN, Regional → Who It Is For and Corporate → What's
   Included sit on the light ground: the same card as white paper. */
.surface-ivory .lq-card.lq-card {
  --lq-edge: color-mix(in srgb, var(--ink, #0B0A08) 11%, transparent);
  --lq-edge-hover: color-mix(in srgb, var(--btn-gold-lo, #A8843F) 70%, transparent);
  --lq-glow: color-mix(in srgb, var(--btn-gold, #BD9A55) 22%, transparent);
  --lq-face: linear-gradient(160deg, #FFFFFF 0%, color-mix(in srgb, #FFFFFF 70%, var(--pewter-2, #F6F2E9)) 100%);
}
.surface-ivory .lq-card.lq-card:hover { box-shadow: 0 24px 44px -30px rgba(43, 29, 7, 0.35), 0 0 30px -14px var(--lq-glow); }
.surface-ivory .lq-card__icon { color: var(--btn-gold-lo, #A8843F); border-color: color-mix(in srgb, var(--btn-gold-lo, #A8843F) 35%, transparent); }
.surface-ivory .lq-card:hover .lq-card__icon { color: #8A6A2C; }
.surface-ivory .lq-card__chev { border-color: color-mix(in srgb, var(--ink, #0B0A08) 14%, transparent); color: var(--text-muted); }
.surface-ivory .lq-card:hover .lq-card__chev { color: var(--btn-gold-lo, #A8843F); }

/* -- Section head beside the cards ------------------------------------------
   The reference sets the heading on the left and the lead on the right,
   divided by a fine gold rule — used wherever one of these grids follows a
   head that has a lead. */
@media (min-width: 1024px) {
  .section-head:not(.section-head--center):has(> .lead):has(+ :is(.pillars, .steps, .usecases, .assurances)) {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    max-width: none;
  }
  .section-head:not(.section-head--center):has(> .lead):has(+ :is(.pillars, .steps, .usecases, .assurances)) > :not(.lead) { grid-column: 1; }
  .section-head:not(.section-head--center):has(> .lead):has(+ :is(.pillars, .steps, .usecases, .assurances)) > .lead {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    border-left: 1px solid color-mix(in srgb, var(--btn-gold, #BD9A55) 55%, transparent);
  }
}

/* -- Phones ----------------------------------------------------------------- */
@media (max-width: 600px) {
  .lq-card.lq-card { grid-template-columns: 2.6rem minmax(0, 1fr) 1.7rem; column-gap: 0.85rem; }
  .lq-card__icon { width: 2.6rem; height: 2.6rem; }
  .lq-card__chev { width: 1.7rem; height: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lq-card.lq-card, .lq-card.lq-card:hover, .lq-card:hover .lq-card__chev { translate: none; }
}

/* ==========================================================================
   37. HERO SLIDER — THE SLATTED REVEAL (2026-09-22)
   Replaces block 35's light sweep. The incoming photograph arrives in tall
   vertical slats that rise into place one after another, left to right,
   like the louvres of a screen turning; inside each slat the picture glides
   up and settles from a closer crop, and a hairline of champagne light marks
   each joint for a moment before fading. The outgoing picture holds its
   frame, eases back a fraction and dims beneath them. When the last slat
   lands, hero-slider.js swaps in the single full layer — so the picture is
   never left sliced — and its slow drift begins from rest.
   Timings come from the script: --slat-time, and each slat's --i.
   ========================================================================== */
.hero-slides__slats {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.hero-slides__slat {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  animation: lq-slat-open var(--slat-time, 1300ms) cubic-bezier(0.76, 0, 0.18, 1) calc(var(--i, 0) * 95ms) forwards;
}
.hero-slides__slat-img {
  position: absolute;
  top: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  filter: saturate(1.05) contrast(1.04);
  transform-origin: 62% 38%;
  animation: lq-slat-img var(--slat-time, 1300ms) cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 95ms) both;
}
/* The joint of light between slats. */
.hero-slides__slat + .hero-slides__slat::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  z-index: 1;
  background: linear-gradient(180deg, transparent 0%, rgba(231, 211, 162, 0.7) 35%, rgba(231, 211, 162, 0.7) 65%, transparent 100%);
  opacity: 0;
  animation: lq-slat-line var(--slat-time, 1300ms) ease calc(var(--i, 0) * 95ms) forwards;
}
/* The picture being covered eases back and dims, so the new one reads as
   laid over it. Filter and transform on the LAYER — the photograph inside
   keeps its own drift. */
.hero-slides__layer.is-leaving {
  animation: lq-slide-recede calc(var(--slat-time, 1300ms) * 1.4) cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

@keyframes lq-slat-open {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes lq-slat-img {
  from { transform: translateY(9%) scale(1.1); }
  to   { transform: translateY(0) scale(1); }
}
@keyframes lq-slat-line {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes lq-slide-recede {
  from { filter: brightness(1) saturate(1); transform: scale(1); }
  to   { filter: brightness(0.5) saturate(0.85); transform: scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slides__slat, .hero-slides__slat-img, .hero-slides__slat::after,
  .hero-slides__layer.is-leaving { animation: none; clip-path: none; }
}

/* ==========================================================================
   38. CONTACT — THE FOUR CARDS UNDER THE HERO (2026-09-22)
   Call us / Email us / Service area / Hours, rebuilt as cards in the same
   family as the icon cards (block 36): a gold icon badge and small label,
   the value set large in the display face, the note under a hairline, and
   on the phone and email cards an action line ("Call now →", "Send an
   email →"). The whole of those two cards is the link. Hover: gold edge,
   corner light, a small lift and glow — nothing inside shifts.
   Keeps the .highlight classes in the markup so other themes are unaffected;
   everything here is scoped to .contact-card.
   ========================================================================== */
.highlights:has(> .contact-card) {
  gap: clamp(14px, 1.4vw, 22px);
  border-top: 0;
  align-items: stretch;
}
@media (min-width: 700px)  { .highlights:has(> .contact-card) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .highlights:has(> .contact-card) { grid-template-columns: repeat(4, 1fr); } }

.highlights > .contact-card {
  --cc-edge: color-mix(in srgb, var(--ink, #0B0A08) 11%, transparent);
  --cc-edge-hover: color-mix(in srgb, var(--btn-gold-lo, #A8843F) 70%, transparent);
  --cc-glow: color-mix(in srgb, var(--btn-gold, #BD9A55) 22%, transparent);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2vw, 30px);
  border: 1px solid var(--cc-edge);
  border-radius: 14px;
  background: linear-gradient(160deg, #FFFFFF 0%, color-mix(in srgb, #FFFFFF 72%, var(--pewter-2, #F6F2E9)) 100%);
  overflow: hidden;
  translate: 0 0;
  transition:
    translate 0.6s var(--fx-ease-soft, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 0.6s var(--fx-ease-soft, ease),
    box-shadow 0.6s var(--fx-ease-soft, ease);
}
.surface-dark .highlights > .contact-card,
.surface-charcoal .highlights > .contact-card {
  --cc-edge: color-mix(in srgb, var(--pewter, #F6F2E9) 9%, transparent);
  --cc-edge-hover: color-mix(in srgb, var(--btn-gold, #BD9A55) 62%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--pewter, #F6F2E9) 4.5%, transparent), color-mix(in srgb, var(--pewter, #F6F2E9) 1.2%, transparent));
}

/* Corner light (replaces the old left-edge wash). */
.highlights > .contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 95% at 0% 0%, color-mix(in srgb, var(--btn-gold, #BD9A55) 16%, transparent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.6s var(--fx-ease-soft, ease);
}
.highlights > .contact-card:hover,
.highlights > .contact-card:focus-within {
  translate: 0 -4px;
  border-color: var(--cc-edge-hover);
  box-shadow: 0 24px 44px -30px rgba(43, 29, 7, 0.35), 0 0 30px -14px var(--cc-glow);
}
.highlights > .contact-card:hover::before,
.highlights > .contact-card:focus-within::before { opacity: 1; }

/* Nothing inside drifts any more (block 13's hover). */
.highlights > .contact-card:hover :is(.highlight__icon, .highlight__label, .highlight__value, .highlight__note) { transform: none; }

/* The badge. */
.contact-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--btn-gold-lo, #A8843F) 35%, transparent);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--btn-gold, #BD9A55) 20%, transparent), color-mix(in srgb, var(--btn-gold, #BD9A55) 4%, transparent) 70%);
  color: var(--btn-gold-lo, #A8843F);
  transition: border-color 0.6s var(--fx-ease-soft, ease), box-shadow 0.6s var(--fx-ease-soft, ease), color 0.6s var(--fx-ease-soft, ease);
}
.contact-card__icon .highlight__icon { width: 1.35rem; height: 1.35rem; margin: 0; color: inherit; stroke-width: 1.5; }
.contact-card:hover .contact-card__icon {
  border-color: color-mix(in srgb, var(--btn-gold-lo, #A8843F) 75%, transparent);
  box-shadow: 0 0 22px -6px var(--cc-glow);
  color: #8A6A2C;
}
.surface-dark .contact-card__icon { color: var(--btn-gold-hi, #CDB073); }

/* Label, value, note. */
.highlights > .contact-card .highlight__label {
  margin: 0 0 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.highlights > .contact-card .highlight__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--text);
  overflow-wrap: break-word;
}
.highlights > .contact-card .highlight__value a { color: inherit; text-decoration: none; }
/* The whole card is the link. */
.highlights > .contact-card .highlight__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.highlights > .contact-card .highlight__link:focus-visible { outline: none; }
.highlights > .contact-card:has(.highlight__link:focus-visible) { outline: 2px solid var(--btn-gold, #BD9A55); outline-offset: 3px; }

.highlights > .contact-card .highlight__note {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

/* The action line, pinned to the foot so all four cards end level. */
.contact-card__action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--btn-gold-lo, #A8843F);
}
.contact-card__action .link__arrow { transition: translate 0.5s var(--fx-ease-soft, ease); }
.contact-card:hover .contact-card__action .link__arrow { translate: 4px 0; }
.surface-dark .contact-card__action { color: var(--btn-gold-hi, #CDB073); }

@media (prefers-reduced-motion: reduce) {
  .highlights > .contact-card, .highlights > .contact-card:hover { translate: none; }
}

/* ==========================================================================
   39 · Footer, per the locked content inventory (2026-09-22)
   Blurb under the logo, then Services · Company · Contact columns, and the
   copyright line with the three legal links in the footer base.
   ========================================================================== */
.footer__blurb {
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: var(--fs-h4) !important;
  line-height: 1.45;
  color: var(--pewter, var(--text-muted)) !important;
}
.footer__list--contact li { line-height: 1.55; }
.footer__list--contact a { color: var(--text-muted); }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6); text-align: left; }
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.footer__legal a { color: var(--text-muted); transition: color var(--dur-fast) var(--ease); }
.footer__legal a:hover { color: var(--accent); }
@media (max-width: 639px) {
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Home hero scroll cue ("Scroll", per the inventory). */
.hero { position: relative; }
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(1rem, 3vh, 2rem); z-index: 3;
  translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; color: rgba(246, 242, 233, 0.72); text-decoration: none;
}
.hero__scroll i { position: relative; width: 1px; height: 38px; background: rgba(246, 242, 233, 0.22); overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--btn-gold-hi, #CDB073); animation: lq-scrollcue 2.2s var(--ease, ease) infinite; }
.hero__scroll:hover { color: var(--btn-gold-hi, #CDB073); }
@keyframes lq-scrollcue { to { top: 100%; } }
@media (max-width: 700px) { .hero__scroll { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll i::after { animation: none; top: 30%; } }

/* Legal document header (entity, trading names, state, version). */
.prose__meta { margin: 0 0 var(--sp-7); padding: 0 0 var(--sp-6); border-bottom: var(--hair, 1px) solid var(--line); }
.prose__meta p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); }
.prose__meta p + p { margin-top: 0.15rem; }
.prose__meta .prose__meta-entity { font-size: var(--fs-body, 1rem); color: var(--text); margin-bottom: 0.2rem; }
.prose p strong { color: var(--text); font-weight: 600; }

/* Form heading (title + intro from Admin → Forms), per the content inventory. */
.form__head { margin: 0 0 var(--sp-5); }
.form__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 500; line-height: 1.2; color: inherit; }
.form__intro { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); max-width: 60ch; }
@media (min-width: 640px) { .footer__bottom { padding-right: 4.75rem; } }

/* ==========================================================================
   40. HERO SLIDER — THE IRIS BLOOM (2026-09-23)
   Replaces block 37's slats, which read as hard and shaky. The new picture
   opens out of the old one as a soft-edged pool of light growing from just
   above the centre of the frame, while it settles from a slightly closer,
   brighter crop, like a lens finding focus. The picture underneath keeps
   drifting and eases down a stop. The photograph's settle and its slow
   drift are one continuous ease-out animation, so there is no hand-over
   for the motion to jump at. Timings come from hero-slider.js:
   --slide-change (the bloom) and --slide-hold (the drift).
   ========================================================================== */
.hero-slides__layer,
.hero-slides__layer.is-current,
.hero-slides__layer.is-leaving {
  visibility: hidden;
  z-index: 0;
  animation: none;
  clip-path: none;
  opacity: 1;
}
.hero-slides__layer.is-shown { visibility: visible; z-index: 1; }
.hero-slides__layer.is-shown.is-entering {
  z-index: 2;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, 0.55) 74%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, 0.55) 74%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 52% 40%;
          mask-position: 52% 40%;
  animation: lq-bloom-iris var(--slide-change, 2400ms) cubic-bezier(0.62, 0.02, 0.28, 1) both;
}
.hero-slides__layer.is-shown.is-leaving {
  z-index: 1;
  animation: lq-bloom-under var(--slide-change, 2400ms) cubic-bezier(0.4, 0, 0.2, 1) both;
}
.hero-slides__layer.is-shown .hero-slides__img {
  transform-origin: 52% 40%;
  backface-visibility: hidden;
  animation:
    lq-bloom-drift var(--slide-hold, 9000ms) cubic-bezier(0.16, 0.6, 0.3, 1) both,
    lq-bloom-expose var(--slide-change, 2400ms) cubic-bezier(0.25, 0.8, 0.3, 1) both;
}

@keyframes lq-bloom-iris {
  0%   { -webkit-mask-size: 0% 0%;     mask-size: 0% 0%;     opacity: 0; }
  18%  { opacity: 1; }
  100% { -webkit-mask-size: 330% 330%; mask-size: 330% 330%; opacity: 1; }
}
@keyframes lq-bloom-under {
  from { filter: brightness(1); }
  to   { filter: brightness(0.74); }
}
@keyframes lq-bloom-drift {
  from { transform: scale3d(1.085, 1.085, 1); }
  to   { transform: scale3d(1, 1, 1); }
}
@keyframes lq-bloom-expose {
  from { filter: saturate(0.96) contrast(1.0) brightness(1.16); }
  to   { filter: saturate(1.05) contrast(1.04) brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slides__layer.is-shown.is-entering,
  .hero-slides__layer.is-shown.is-leaving,
  .hero-slides__layer.is-shown .hero-slides__img { animation: none; -webkit-mask-image: none; mask-image: none; }
}

/* Contact cards: "Call now" / "Send an email" are real links, above the
   stretched card link, and the card itself is the containing block. */
.highlights > .contact-card { position: relative; }
.highlights > .contact-card .highlight__value,
.highlights > .contact-card .highlight__value p { position: static; transform: none; }
a.contact-card__action { position: relative; z-index: 3; text-decoration: none; cursor: pointer; align-self: flex-start; }
a.contact-card__action:hover,
a.contact-card__action:focus-visible { color: var(--btn-gold, #CF9A3F); }
a.contact-card__action:focus-visible { outline: 2px solid var(--btn-gold, #CF9A3F); outline-offset: 4px; border-radius: 2px; }

/* ==========================================================================
   41. THE HERO IS A SEALED BOX (2026-09-23)
   The client keeps seeing the hero's left-hand scrim (dark at the left,
   fading to the right, the full height of the hero) carry on past the foot
   of the hero over the first section, while scrolling. `overflow: hidden`
   alone is not a guarantee: composited layers (the slider's animated,
   masked photographs, the parallax plate) and pseudo-elements can escape it
   in some engines, notably WebKit/Safari during a scroll. Four independent
   clips now make it impossible for anything drawn by the hero to paint
   outside it:
     · clip-path: inset(0)  — clips every descendant, composited or not
     · contain: paint       — the hero's box is the paint boundary
     · overflow: clip       — no scroll container, hard edge
     · isolation: isolate   — its z-indexes cannot interleave with the page
   And, belt and braces, every section after the hero stacks ABOVE it on its
   own opaque ground, so even a stray layer would be painted over.
   ========================================================================== */
.hero,
.page-hero {
  overflow: hidden;
  overflow: clip;
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
  contain: paint;
  isolation: isolate;
}
.hero-slides,
.hero__bg,
.page-hero__bg,
.hero-slides__layer,
.hero-slides__img { max-height: 100%; }
main > .hero ~ *,
main > .page-hero ~ * { position: relative; z-index: 1; }
main > .hero ~ .section:not([class*="surface-"]),
main > .page-hero ~ .section:not([class*="surface-"]) { background-color: var(--bg); }

/* The Scroll cue moves to the right of the slide indicator row, clear of
   the trust points. */
.hero.has-slide-nav .hero__scroll {
  left: auto;
  right: max(1.5rem, calc((100vw - var(--container, 1296px)) / 2));
  translate: none;
  flex-direction: row;
  gap: 0.75rem;
  bottom: clamp(1.1rem, 2.4vh, 1.9rem);
}
.hero.has-slide-nav .hero__scroll i { width: 38px; height: 1px; }
.hero.has-slide-nav .hero__scroll i::after { top: 0; left: -40%; width: 40%; height: 1px; animation-name: lq-scrollcue-x; }
@keyframes lq-scrollcue-x { from { left: -40%; } to { left: 100%; } }

/* ==========================================================================
   42. HERO SLIDER — THE PRINT LIFT (2026-09-23)
   Replaces block 40's iris bloom. The picture on screen draws its edges in
   to a framed plate with softened corners, as if lifted off the table, and
   is carried away to the left; the next picture is waiting underneath in
   shadow, slightly closer, and rises into the light as the print clears.
   The outgoing layer is on TOP (z 3) and does the moving; the incoming one
   (z 2) only brightens while its photograph runs the same continuous settle
   and drift as before, so there is no hand-over jump when it takes over.
   Timing from hero-slider.js: --slide-change.
   ========================================================================== */
.hero-slides__layer.is-shown.is-entering {
  z-index: 2;
  -webkit-mask-image: none;
          mask-image: none;
  animation: lq-lift-rise var(--slide-change, 1900ms) cubic-bezier(0.33, 0, 0.15, 1) both;
}
.hero-slides__layer.is-shown.is-leaving {
  z-index: 3;
  transform-origin: 50% 50%;
  will-change: transform, clip-path;
  animation: lq-lift-away var(--slide-change, 1900ms) linear both;
}

@keyframes lq-lift-away {
  0% {
    -webkit-clip-path: inset(0% 0% 0% 0% round 0px);
            clip-path: inset(0% 0% 0% 0% round 0px);
    transform: translate3d(0, 0, 0);
    filter: brightness(1);
    animation-timing-function: cubic-bezier(0.55, 0, 0.3, 1);
  }
  32% {
    -webkit-clip-path: inset(6% 7% 6% 7% round 18px);
            clip-path: inset(6% 7% 6% 7% round 18px);
    transform: translate3d(0, 0, 0);
    filter: brightness(0.9);
    animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1);
  }
  100% {
    -webkit-clip-path: inset(6% 7% 6% 7% round 18px);
            clip-path: inset(6% 7% 6% 7% round 18px);
    transform: translate3d(-104%, 0, 0);
    filter: brightness(0.78);
  }
}
@keyframes lq-lift-rise {
  0%   { filter: brightness(0.42) saturate(0.85); }
  30%  { filter: brightness(0.5) saturate(0.88); }
  100% { filter: brightness(1) saturate(1); }
}

@media (max-width: 767px) {
  @keyframes lq-lift-away {
    0%   { clip-path: inset(0% 0% 0% 0% round 0px); transform: translate3d(0, 0, 0); filter: brightness(1); animation-timing-function: cubic-bezier(0.55, 0, 0.3, 1); }
    32%  { clip-path: inset(5% 5% 5% 5% round 12px); transform: translate3d(0, 0, 0); filter: brightness(0.9); animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1); }
    100% { clip-path: inset(5% 5% 5% 5% round 12px); transform: translate3d(-104%, 0, 0); filter: brightness(0.78); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slides__layer.is-shown.is-entering,
  .hero-slides__layer.is-shown.is-leaving { animation: none; }
}

/* ==========================================================================
   43. WINE TOURS — THE ITINERARY ASIDE (2026-09-23)
   Four packages on a three-column grid left two empty cells. The three
   pricing notes that sat in small type under the grid now fill them: a
   photographed panel (the long lunch among the vines, deep under a warm
   dark scrim), numbered in the site's Roman numerals, with a way to act on
   what it says. It takes whatever the last row leaves — two cells, one, or
   a full-width band when the cards fill their rows exactly.
   ========================================================================== */
.packages__aside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  border: 1px solid color-mix(in srgb, var(--btn-gold, #CF9A3F) 28%, transparent);
  border-radius: var(--radius);
  background: #0E0B07;
  box-shadow: var(--lift-sm);
  grid-column: 1 / -1;
  min-height: 100%;
  transition: border-color 0.6s var(--fx-ease-soft, ease), box-shadow 0.6s var(--fx-ease-soft, ease);
}
/* The photograph, drifting very slightly on hover. */
.packages__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--aside-img) center 55% / cover no-repeat;
  filter: saturate(0.9) contrast(1.05);
  transform: scale(1.04);
  transition: transform 1.6s var(--fx-ease-soft, cubic-bezier(0.22, 1, 0.36, 1));
}
/* The scrim: near-black where the words are, the picture breathing on the
   right; and a gold hairline across the top, like the cards' own. */
.packages__aside::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 8, 5, 0.97) 0%, rgba(10, 8, 5, 0.94) 50%, rgba(10, 8, 5, 0.8) 74%, rgba(10, 8, 5, 0.5) 100%),
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--btn-gold, #CF9A3F) 18%, transparent) 0%, transparent 60%);
}
.packages__aside:hover { border-color: color-mix(in srgb, var(--btn-gold, #CF9A3F) 55%, transparent); box-shadow: var(--lift); }
.packages__aside:hover::before { transform: scale(1.08); }

.packages__aside-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 44rem;
  padding: clamp(1.75rem, 1rem + 2.4vw, 3rem);
}
.packages__aside .eyebrow { margin-bottom: 0.9rem; }
.packages__aside-title {
  margin: 0 0 1.6rem;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--pewter, #F6F2E9);
}
.packages__notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.05rem;
}
.packages__notes li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: start;
  column-gap: 0.9rem;
  padding-top: 1.05rem;
  border-top: 1px solid color-mix(in srgb, var(--pewter, #F6F2E9) 10%, transparent);
}
.packages__notes li:first-child { padding-top: 0; border-top: 0; }
.packages__note-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--btn-gold-hi, #DEB768);
}
.packages__notes p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: color-mix(in srgb, var(--pewter, #F6F2E9) 78%, transparent);
}
.packages__aside-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: auto;
  padding-top: 1.9rem;
}
.packages__aside-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--btn-gold-hi, #DEB768);
  text-decoration: none;
}
.packages__aside-call:hover { color: var(--pewter, #F6F2E9); }
.packages__aside-call .link__arrow { transition: translate 0.5s var(--fx-ease-soft, ease); }
.packages__aside-call:hover .link__arrow { translate: 4px 0; }

/* Two columns: one card left over takes one cell, a full row takes the band. */
@media (min-width: 760px) and (max-width: 1079px) {
  .package:nth-child(2n + 1) + .packages__aside { grid-column: auto; }
  .package:nth-child(2n) + .packages__aside { grid-column: 1 / -1; }
}
/* Three columns: fill exactly what the last row leaves. */
@media (min-width: 1080px) {
  .package:nth-child(3n + 1) + .packages__aside { grid-column: span 2; }
  .package:nth-child(3n + 2) + .packages__aside { grid-column: span 1; }
  .package:nth-child(3n) + .packages__aside { grid-column: 1 / -1; }
  /* In the two-cell shape there is room to set the notes beside the title. */
  .package:nth-child(3n + 1) + .packages__aside .packages__aside-inner { max-width: 46rem; }
}
@media (prefers-reduced-motion: reduce) {
  .packages__aside::before, .packages__aside:hover::before { transition: none; transform: scale(1.04); }
}
@media (max-width: 759px) {
  .packages__aside::after {
    background: linear-gradient(180deg, rgba(10, 8, 5, 0.93) 0%, rgba(10, 8, 5, 0.9) 70%, rgba(10, 8, 5, 0.78) 100%);
  }
  .packages__notes li { grid-template-columns: 1.7rem minmax(0, 1fr); column-gap: 0.6rem; }
}

/* ==========================================================================
   44. ABOUT → OUR VALUES — THE ROAD PLATE (2026-09-23)
   Five values on a four-column grid leave three cells empty beside the last
   card. The client's own artwork fills them: contour lines, a winding
   headlight trail and a warm glow (public/img/values-road.svg), with the
   script line and the small label set in HTML over it so both stay sharp,
   editable and translatable. The plate takes whatever the last row leaves
   — three cells, one, or a full-width band — and becomes a short band under
   the cards on a phone.
   ========================================================================== */
.values-plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 100%;
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
  border-radius: var(--radius);
  list-style: none;
}
/* The artwork: anchored bottom-right, so the trail always runs out of the
   corner of the band whatever shape the row leaves it. */
.values-plate__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--values-road) right bottom / auto 118% no-repeat;
  opacity: 0.95;
}
.values-plate__script {
  margin: 0;
  max-width: 18ch;
  font-family: "Parisienne", var(--font-display), cursive;
  font-size: clamp(1.5rem, 0.9rem + 2.1vw, 2.9rem);
  font-weight: 400;
  line-height: 1.25;
  color: color-mix(in srgb, var(--btn-gold-hi, #DEB768) 88%, #FFF3DC);
  text-shadow: 0 2px 26px rgba(11, 8, 4, 0.85);
}
.values-plate__label {
  margin: 0 0 auto;
  align-self: flex-start;
  display: grid;
  justify-items: start;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.9;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--btn-gold-hi, #DEB768) 82%, transparent);
}
.values-plate__label::after {
  content: "";
  display: block;
  width: 3.4rem;
  height: 1px;
  margin-top: 0.7rem;
  background: linear-gradient(90deg, var(--btn-gold, #CF9A3F), transparent);
}

/* Four columns: fill exactly what the last row leaves. */
@media (min-width: 1040px) {
  .badge:nth-child(4n + 1) + .values-plate { grid-column: span 3; }
  .badge:nth-child(4n + 2) + .values-plate { grid-column: span 2; }
  .badge:nth-child(4n + 3) + .values-plate { grid-column: span 1; }
  .badge:nth-child(4n) + .values-plate { grid-column: 1 / -1; min-height: 15rem; }
}
/* Two columns. */
@media (min-width: 700px) and (max-width: 1039px) {
  .badge:nth-child(2n + 1) + .values-plate { grid-column: auto; }
  .badge:nth-child(2n) + .values-plate { grid-column: 1 / -1; min-height: 13rem; }
  .values-plate { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
  .values-plate__label { order: -1; margin: 0 0 auto auto; }
  .values-plate__script { font-size: 1.45rem; line-height: 1.22; max-width: 14ch; }
}
/* One column: a short band under the cards, the trail running out of the
   right-hand corner behind a single line. */
@media (max-width: 699px) {
  .values-plate {
    grid-column: 1 / -1;
    min-height: 12.5rem;
    align-items: flex-end;
  }
  .values-plate__art { background-size: auto 150%; opacity: 0.9; }
  .values-plate__script { font-size: 1.5rem; max-width: 14ch; text-shadow: 0 2px 20px rgba(11, 8, 4, 0.95); }
  .values-plate__label { font-size: 0.62rem; letter-spacing: 0.18em; line-height: 1.7; }
}

/* ==========================================================================
   30. FLEET PHOTOGRAPHS ARE 16:9
   The client's final vehicle photographs show a white and a black vehicle
   side by side, edge to edge, and are supplied 16:9. Every other rule that
   sets a ratio on a plate (16/10 beside body copy, 16/8 on wide cards, 4/3
   in the booking picker) would crop the left-hand vehicle's nose off, so
   Render::vehicleMedia() tags them .media--wide and this wins over all of
   them. Specificity beats source order on purpose.
   ========================================================================== */
.fleet-grid .card .media.media--wide,
.split__media .media.media--wide,
.selector__card .media.media--wide { aspect-ratio: 16 / 9; }

/* Fleet descriptions are the client's wording and some of them end in
   "subject to availability" — the clamp that keeps the other decks tidy would
   cut exactly that off, so the fleet deck shows its copy in full and gets its
   equal heights from the grid instead, as the services deck does. */
.fleet-grid { grid-auto-rows: 1fr; }
.fleet-grid > .card { height: 100%; }
.fleet-grid .card__body { grid-template-rows: auto auto 1fr auto; align-content: stretch; }
.fleet-grid .card__text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
  min-height: 0;
  margin-top: var(--sp-3);
}
.fleet-grid .card__foot { align-self: end; }

/* The fleet cards' longest descriptions run to five lines; keep a clear gap
   above the call to action on those too. */
.fleet-grid .card__text { margin-bottom: var(--sp-4); }

/* ==========================================================================
   RESPONSIVE PASS (2026-10-12) — phones and tablets only
   --------------------------------------------------------------------------
   Every rule below sits inside a max-width query that ends at 1023px, so
   nothing here can reach a laptop or desktop: the 1024px+ composition is
   exactly what it was. Each block names the defect it fixes and the width
   it was measured at.
   ========================================================================== */

/* -- 1. The open menu hid its own close button (all widths below 1024) -----
   The header is `position: static`, so its z-index: 100 does nothing, and
   the drawer is a fixed layer at 99 — the drawer painted straight over the
   header. Once the menu was open there was no logo and no close control on
   screen at all; the drawer's empty 90px top band is where the header was
   meant to show through. Sticky (not fixed) keeps the header's own space in
   the flow, so nothing behind the drawer jumps when it opens or closes. */
body:has(> .drawer.is-open) .header {
  position: sticky;
  top: 0;
  z-index: 100;
}

@media (max-width: 1023px) {

  /* -- 2. Fleet detail rows: 88px of nothing (fleet page) ---------------
     A vehicle with no long description, no feature ticks or no "best for"
     chips still emits the empty <p>/<ul>, each with its own top margin —
     which stacked up into a blank band between the capacity line and the
     Enquire button. Desktop is left exactly as it is. */
  .service-row :is(.body-copy, .ticks, .chips):empty { display: none; }

  /* -- 3. Wine-tour cards: the button sat on the last bullet -----------
     .package__cta takes `margin-top: auto`, which is only slack when a
     taller card in the same row lends some. Stacked one per row there is
     none, so "Enquire about this tour" butted against the list. */
  .package .ticks { margin-bottom: var(--sp-5); }

  /* -- 4. Testimonial dots were 8px tap targets ---------------------------
     Measured 8x8 at 390 and 768. The dot keeps its drawn size; an invisible
     ring takes the hit area to 32px, the smallest a thumb finds reliably. */
  .quotes__dots { gap: 1.5rem; }   /* 8px dot + 24px gap = one 32px target each, no overlap */
  .quotes__dot { position: relative; }
  .quotes__dot::before {
    content: "";
    position: absolute;
    inset: -12px;
  }
}

/* -- 5. Fleet cards on a tablet still read "3  2" ---------------------------
   The unit labels from the phone pass, carried up to the two-column tablet
   deck. Cards only — see the scoping note in the phone block. */
@media (min-width: 768px) and (max-width: 1023px) {
  .card__body > .vehicle-specs li:first-child::after  { content: " passengers"; }
  .card__body > .vehicle-specs li:nth-child(2)::after { content: " cases"; }
  .card__body > .vehicle-specs li::after { letter-spacing: 0; text-transform: none; color: var(--text-muted); }
}

@media (max-width: 767px) {

  /* -- 6. Chips that wrap onto two lines ----------------------------------
     "Appointment-only boutique producers" does not fit a 350px column, and
     the chip is drawn at line-height 1, so its two lines touched. Give a
     wrapped chip real leading and a slightly squarer end. */
  .chip { line-height: 1.4; padding-block: 0.42rem; max-width: 100%; }
}

/* -- 7. Equal-height decks in a single column (below 640px) -----------------
   .services-grid and .fleet-grid use `grid-auto-rows: 1fr` so that cards in
   a ROW line up. Below 640px there is one card per row, and 1fr then makes
   every card as tall as the tallest one on the page — a 30–60px hole above
   "Request this vehicle class" on most of them. */
@media (max-width: 639px) {
  .services-grid,
  .fleet-grid { grid-auto-rows: auto; }
}

/* -- 8. The fleet comparison table on a phone (below 640px) ----------------
   A 640px-wide table in a sideways scroller: on a 390px screen the passenger
   and luggage columns were cut mid-word ("Up to / passe…") and most people
   never find the scroll. The cells already carry data-label, so below 640px
   each vehicle becomes its own block: the name as a heading, then label /
   value lines. Nothing is hidden and no markup changes. */
@media (max-width: 639px) {
  .has-scroll-table,
  :where(div, section):has(> .compare) { overflow-x: visible; padding-bottom: 0; }

  .compare { min-width: 0; display: block; border: 0; }
  .compare caption { display: none; }
  .compare thead { display: none; }
  .compare tbody, .compare tr, .compare th, .compare td { display: block; }

  .compare tbody tr {
    padding: var(--sp-5) 0;
    border-bottom: var(--hair) solid var(--line);
  }
  .compare tbody tr:last-child { border-bottom: 0; }

  .compare tbody th {
    padding: 0 0 var(--sp-3);
    border: 0;
    white-space: normal;
  }
  .compare tbody th::before { display: none; }

  .compare tbody td {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-2) 0;
    border: 0;
    text-align: right;
    color: var(--text);
  }
  .compare tbody td::before {
    content: attr(data-label);
    flex: none;
    font-family: var(--font-ui);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--accent);
    text-align: left;
  }
  /* A vehicle with no "best for" entry would otherwise print the label
     with nothing beside it. */
  .compare tbody td:empty { display: none; }
  .compare tbody td:last-child { padding-top: var(--sp-3); justify-content: flex-start; }
  .compare tbody td:last-child::before { content: none; }
}

/* ==========================================================================
   FLEET "COMPARE VEHICLE CLASSES" — aligned edges, steady "Select" link
   - The header row used no left padding while the vehicle names had one, so
     "VEHICLE" sat against the table's left border. Every first-column cell now
     shares the same inset, and the last column the same right inset.
   - Hovering "Select" changed the link's gap (layout) AND slid the arrow
     (transform), so the cell's width changed and the whole row twitched.
     Inside the table the gap is fixed and only the arrow moves, by a small
     amount, in a space reserved for it.
   ========================================================================== */
@media (min-width: 640px) {
  .compare th:first-child,
  .compare td:first-child { padding-left: var(--sp-5); }
  .compare th:last-child,
  .compare td:last-child { padding-right: var(--sp-5); }
  .compare td:last-child { min-width: 7.5rem; }
}
.compare td:last-child .link,
.compare td:last-child .link:hover { gap: 0.5rem; white-space: nowrap; }
.compare td:last-child .link .link__arrow { transform: none; transition: translate var(--dur-fast, 0.25s) var(--ease, ease); }
.compare td:last-child .link:hover .link__arrow { transform: none; translate: 4px 0; }

/* ==========================================================================
   FOOTER SERVICES — one heading, two side-by-side lists (client, 23 Oct 2026)
   Left: Private Wine Tours, Corporate, Wedding, Special Event, Interstate.
   Right: Airport, Point-to-Point, Cruise Ship, Regional, All Services.
   The two lists sit in one grid so rows line up ("Private Wine Tours" beside
   "Airport Transfers"). Services gets the widest link column; Company and
   Contact keep enough room. Phones keep a single, full-width, 44px-tap list.
   ========================================================================== */
.footer__services-cols { display: grid; grid-template-columns: 1fr; gap: var(--sp-3) var(--sp-6); align-items: start; }
@media (min-width: 540px) {
  .footer__services-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .footer__grid { grid-template-columns: 1.7fr 1.95fr 0.9fr 1.2fr; gap: var(--sp-6); padding-bottom: calc(var(--sp-8) + 5.5rem); }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  .footer__grid { grid-template-columns: 1.1fr 2.5fr 0.9fr 1.25fr; gap: var(--sp-5); }
}
@media (min-width: 640px) and (max-width: 999px) {
  .footer__grid > .footer__services { grid-column: 1 / -1; }
}
/* On phones every link is a full-width 44px target. */
@media (max-width: 539px) {
  .footer__services .footer__list { gap: 0; }
  .footer__services .footer__list a { display: flex; align-items: center; min-height: 44px; }
}

/* LQ watermark: ~10% smaller (150px -> 135px), a touch higher and further left.
   It now lives INSIDE the footer grid, in the band of space under the columns
   (the grid carries extra bottom padding for exactly this), so it can never sit
   on the Contact text, the WhatsApp button, the divider or the legal links, at
   any width. The old container-anchored mark is switched off. */
.footer > .container::before { content: none; }
.footer__grid { position: relative; }
.footer__grid::after {
  content: "";
  position: absolute;
  right: 1.75rem;
  bottom: 1.5rem;
  height: 135px;
  aspect-ratio: 141 / 108;
  background-image: var(--footer-mark-img, url("../../../../brand/final/monogram/lorqen-monogram-white.svg"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.03;
  pointer-events: none;
  z-index: -1;
}
.footer--no-mark .footer__grid::after { content: none; }
@media (max-width: 767px) {
  .footer__grid { padding-bottom: calc(var(--sp-8) + 3.5rem); }
  .footer__grid::after { height: 86px; right: 0.75rem; bottom: 1rem; }
}
/* Phones: every footer column is full width, one link per 44px row. */
@media (max-width: 539px) {
  .footer__grid > * { grid-column: 1 / -1; }
  .footer__list { gap: 0; }
  .footer__list a { display: flex; align-items: center; min-height: 44px; }
  .footer__list--contact { gap: var(--sp-2); }
}