/*
 * @city-network/generator — styles/main.css
 *
 * Consumes the CSS custom properties compiled by `packages/design-tokens`
 * (contract 04 §4.1/§4.2 core token set, plus the resolved `VisualLayerCombinationV1`
 * overlay from `visual-layer.ts` — see that file's per-dimension `cssVars` for the
 * exact `--hero-*`, `--module-*`, `--photo-*`, `--proof-*`, `--accent-application`,
 * `--link-*`, `--cta-primary-*`, `--numeral-*`, `--eyebrow-*` names this stylesheet
 * reads). This file never redefines a token value — `:root { color-scheme: dark; ... }`
 * is emitted by `packages/design-tokens`'s `renderRootCss` and is expected to be linked
 * *before* this stylesheet. Every visual-layer-sourced variable is read with a
 * `var(--x, fallback)` so this stylesheet still renders correctly if a page's compiled
 * token stylesheet is briefly absent or a future combination omits an optional var —
 * fallbacks below mirror the shipped canary combination, `visual-layer.san-francisco-01`
 * (underline-and-focus x centered-cinematic x spacious-single-column x
 * wide-cinematic-21x9 x airport-ops-lead).
 *
 * No preprocessor, no framework. Modern CSS: grid, clamp(), logical properties,
 * :has() progressive enhancement, container queries where they help.
 * LUX-01..LUX-12 (docs/contracts/04-design-and-quality.md §2) are design constraints
 * this file is written to satisfy structurally, not just visually.
 */

/* ---------------------------------------------------------------------------------
   0. Typography — self-contained system stacks (LUX-01: exactly 2 families;
   no remote/CDN font — §4.2/§4.3).

   There is NO @font-face here on purpose. This is an offline build with no
   third-party font origins and no font binaries checked into the repo — a
   @font-face whose only `src` 404s is worse than none, because the browser
   blocks text rendering waiting on it. `--font-display` / `--font-text`
   (packages/design-tokens, compiled into tokens.css) name platform font
   stacks directly: a serif stack for display/heading and a grotesk stack for
   body/UI, preserving the original Fraunces/Inter serif-vs-grotesk contrast
   on every platform without fetching anything. Do not "helpfully" add a
   Google Fonts (or any remote) link here — that would silently break the
   offline contract this build depends on.
------------------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------------
   1. Reset — modern, minimal, no default-browser control chrome (LUX-09).
------------------------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  hanging-punctuation: first last;
}

body,
h1,
h2,
h3,
h4,
p,
dl,
dd,
dt,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

ul[class],
ol[class] {
  list-style: none;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

address {
  font-style: normal;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ---------------------------------------------------------------------------------
   2. Base — typography, ground, ink.
------------------------------------------------------------------------------------ */
body {
  background-color: var(--color-ground);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--type-size-3);
  line-height: var(--line-height-normal);
  font-weight: var(--type-weight-regular, 400);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--type-weight-semibold, 600);
  line-height: var(--line-height-tight);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, var(--type-size-7));
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, var(--type-size-6));
  margin-block-end: var(--space-4);
}

h3 {
  font-size: var(--type-size-5);
  margin-block-end: var(--space-3);
}

h4 {
  font-size: var(--type-size-4);
  margin-block-end: var(--space-2);
}

p {
  text-wrap: pretty;
}

a {
  color: var(--link-color, var(--color-ink));
  text-decoration-color: var(--link-decoration-color, var(--color-accent));
  text-decoration-thickness: var(--link-decoration-thickness, 1px);
  text-underline-offset: var(--link-underline-offset, 0.15em);
}

a:hover {
  text-decoration-color: var(--color-accent);
}

small,
.meta {
  font-size: var(--type-size-2);
  color: var(--color-ink-muted);
}

[data-numeral] {
  font-variant-numeric: var(--numeral-feature-settings, tabular-nums lining-nums);
  color: var(--numeral-color, inherit);
  font-weight: var(--numeral-weight, inherit);
}

/* ---------------------------------------------------------------------------------
   3. Focus — one visible, high-contrast ring everywhere; never removed (LUX-09/ACC).
------------------------------------------------------------------------------------ */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-control);
}

/* ---------------------------------------------------------------------------------
   4. Skip link — first focusable element in the document (SEO-19/GEO-19).
------------------------------------------------------------------------------------ */
.skip-link {
  position: fixed;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised);
  color: var(--color-ink);
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-control);
  transform: translateY(-150%);
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------------
   5. Containers, prose, section rhythm (LUX-02: section gap >= 4x intra-block gap).
------------------------------------------------------------------------------------ */
/* `main` shares the selector rather than restating the geometry: the page's content column has
   exactly one definition, so the band the header and footer sit in and the band the page body
   sits in cannot drift apart.

   `.container` is written into only two templates — `partials/header.njk` and
   `partials/footer.njk` — so before `main` joined this rule every section rendered between them
   spanned the full viewport at `left: 0` with no gutter: body copy ran to the window edge, card
   grids ran edge to edge, and `.hero__media-panel`'s rounded border touched the glass. That last
   one is what marks this as missing geometry rather than a full-bleed treatment — a bordered,
   radiused card is never meant to bleed. Every `main > *` computes a transparent background, so
   there is no edge-to-edge band here for a content column to cut in half. */
.container,
main {
  width: 100%;
  max-width: 88rem;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.prose {
  max-width: var(--content-measure, 66ch);
}

.prose > * + * {
  margin-block-start: var(--space-4);
}

main {
  display: block;
}

.section {
  padding-block: var(--module-internal-gap, var(--space-5));
}

.section + .section,
.section-stack > .section + .section {
  margin-block-start: var(--module-gap, var(--space-10));
}

.section-stack {
  display: flex;
  flex-direction: column;
}

.section__head {
  margin-block-end: var(--space-5);
}

.eyebrow {
  display: inline-block;
  font-size: var(--type-size-1);
  font-weight: var(--type-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-letter-spacing, 0.08em);
  color: var(--eyebrow-color, var(--color-ink-muted));
  margin-block-end: var(--space-3);
}

.rule {
  border: none;
  border-block-start: var(--rule-hairline) solid var(--color-rule);
  margin-block: var(--module-internal-gap, var(--space-5));
}

.rule--emphasis {
  border-block-start-width: var(--rule-emphasis);
  border-block-start-color: var(--rule-color-emphasis, var(--color-accent));
}

/* ---------------------------------------------------------------------------------
   6. Header / primary navigation.
------------------------------------------------------------------------------------ */
.site-header {
  border-block-end: var(--rule-hairline) solid var(--color-rule);
  background-color: var(--color-ground);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: var(--type-weight-semibold, 600);
  font-size: var(--type-size-4);
  color: var(--color-ink);
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

.brand__market {
  font-family: var(--font-text);
  font-weight: var(--type-weight-regular, 400);
  font-size: var(--type-size-2);
  color: var(--color-ink-muted);
}

.primary-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.primary-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min-size);
  font-size: var(--type-size-2);
  font-weight: var(--type-weight-medium, 500);
  text-decoration: none;
}

.primary-nav__list a[aria-current="page"] {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-color: var(--color-accent);
}

.header-actions {
  display: flex;
  gap: var(--space-3);
}

/* ---------------------------------------------------------------------------------
   7. Breadcrumb.
------------------------------------------------------------------------------------ */
.breadcrumb {
  padding-block: var(--space-4);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-size-1);
  color: var(--color-ink-muted);
}

.breadcrumb__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb__list li:not(:last-child)::after {
  content: "/";
  color: var(--color-rule);
}

.breadcrumb__list a {
  color: var(--color-ink-muted);
  text-decoration-color: var(--color-rule);
}

.breadcrumb__list [aria-current="page"] {
  color: var(--color-ink);
}

/* ---------------------------------------------------------------------------------
   8. Hero — reads the visual-layer's --hero-* namespace directly (§3.1 five options).

   Consumed here: `--hero-grid-template-columns`, `--hero-text-align`,
   `--hero-content-max-width`, `--hero-media-aspect-ratio`, `--hero-media-clip-path`,
   `--hero-masthead-rule`. Deliberately NOT consumed: `--hero-layout`,
   `--hero-media-position`, `--hero-overlay`.

   `--hero-layout` and `--hero-media-position` are descriptive markers, not levers: their
   visual effect is carried entirely by the tokens above. In particular the two
   `background-full-bleed*` values (`full-bleed-left-text`, `centered-cinematic`) are
   rendered as a framed full-width band, NOT as a cropped backdrop behind the text. A
   backdrop must cover-crop to the text's height; measured against the shipped crop
   languages that would discard most of the plate (washington-dc's 1:1 plate would drop
   from 100% of the source visible to roughly 47%). The framed band keeps every plate
   uncropped, which is the property the panel's aspect-ratio rule exists to guarantee.
   `--hero-overlay` is that backdrop mode's text scrim and so falls under the same
   decision — the rule below it says why, with the measured cost of having painted it.
   This is a deliberate, already-decided deviation from what the marker names suggest —
   not a gap to close later.
------------------------------------------------------------------------------------ */
.hero {
  display: grid;
  grid-template-columns: var(--hero-grid-template-columns, 1fr);
  gap: var(--space-7);
  align-items: center;
  padding-block: var(--space-9) var(--module-internal-gap, var(--space-5));
  text-align: var(--hero-text-align, left);
  position: relative;
  /* `container-type: normal` costs nothing layout-wise (no containment) but makes `.hero`
     queryable below via `@container style()`, so `.hero__content` can react to whether
     `--hero-masthead-rule` is actually set on this composition rather than merely
     defaulting a border to a zero-width `none`. */
  container-type: normal;
  container-name: hero;
}

.hero__content {
  max-width: var(--hero-content-max-width, 44ch);
  margin-inline: auto;
  /* Set only by `editorial-masthead`; every other composition leaves this unset, so
     `border-style` resolves to `none` and the border renders at zero width — content
     position is untouched. */
  border-block-start: var(--hero-masthead-rule, none);
}

/* Headroom for the masthead rule above the heading, added only when the rule is actually
   painted (i.e. `--hero-masthead-rule` is set) — a plain unconditional padding here would
   push every other composition's heading down too. `style(--hero-masthead-rule)` is true
   when that custom property has any value; unsupported browsers simply skip this block,
   leaving the rule tight against the heading rather than breaking anything. */
@container hero style(--hero-masthead-rule) {
  .hero__content {
    padding-block-start: var(--space-5);
  }
}

.hero__eyebrow {
  margin-block-end: var(--space-4);
}

.hero__heading {
  font-size: clamp(2rem, 1.3rem + 3.2vw, var(--type-size-7));
  margin-block-end: var(--space-5);
}

.hero__lede {
  font-size: var(--type-size-3);
  color: var(--color-ink-muted);
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
  align-items: center;
}

.hero__proof {
  margin-block-start: var(--space-5);
  font-size: var(--type-size-2);
  color: var(--color-ink-muted);
}

.hero__media-panel {
  aspect-ratio: var(--hero-media-aspect-ratio, 16/9);
  background: linear-gradient(
    155deg,
    var(--color-surface) 0%,
    var(--color-surface-raised) 60%,
    var(--color-ground) 100%
  );
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-control);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  overflow: hidden;
  /* Set only by `split-diagonal`; every other composition leaves this unset, so `clip-path`
     resolves to `none` and the panel's rendered geometry is untouched. */
  clip-path: var(--hero-media-clip-path, none);
}

/* `--hero-overlay` is deliberately NOT painted, for the same reason the `background-full-bleed*`
   backdrop mode is not rendered (see the section comment above): it is that mode's scrim, and it
   exists solely to keep headline text legible where the text sits ON the image. This layout puts
   the text ABOVE the panel, never over it — measured on the built pages, the `<h1>` rect and the
   panel rect do not intersect on any composition — so there is nothing for a scrim to make
   legible, and painting it only obscures the photograph.

   This was implemented and measured before being removed, so the cost is on the record rather
   than assumed. Both compositions that set the token drive their gradient to FULL opacity:
   `centered-cinematic` is `linear-gradient(180deg, rgba(11,12,14,0.15) 0%, var(--color-ground)
   92%)` and `full-bleed-left-text` is `linear-gradient(90deg, var(--color-ground) 0%, transparent
   55%)`. Painted over a plate that the aspect-ratio rule above had just brought to 100% visible,
   san-francisco-ca's hero went nearly black — the Bay Bridge, the Salesforce Tower and the vehicle
   were all but invisible and the bottom 8% was solid ground colour.

   So the token stays unconsumed on purpose. It is not an unimplemented feature; it is the scrim
   belonging to a rendering mode this stylesheet intentionally does not use. `--hero-media-clip-path`
   and `--hero-masthead-rule` ARE consumed, because neither is a legibility aid for overlaid text:
   one is a geometric treatment of the panel, the other a rule above the heading. */

/* When the panel holds a real photograph (hero.njk's ctx.mediaImage), drop the padding that
   frames the typographic mark so the image fills the panel edge-to-edge instead of floating
   inset within it, and frame it at the aspect its photography was actually shot in.

   A combination states its photography aspect twice, in two namespaces that disagree:
   `--hero-media-aspect-ratio` (the heroComposition dimension) and `--photo-aspect-ratio` (the
   photographyCropLanguage dimension). `photographyCropLanguage` is the authoritative one — it is
   the field `assets/library/MANIFEST.md` §1 binds each pack's city to, and every slot in that
   pack physically exists at that aspect and at no other (`assets/library/manifest.json`:
   city-context carries 4 slots per city, all in that city's one crop language, zero in the other
   three). `heroComposition`'s ratio was assigned per composition *name*, independent of which
   city would pair with it, so reading it here framed every city's plate against a ratio its
   photography was never shot for: Austin's 4:5 portrait in a 21/9 slot showed 34% of the image,
   Houston's 16:9 in a 3/4 slot 42%, DC's 1:1 in 16/9 56%, San Francisco's 21:9 in the default
   16/9 76%. Reading the crop language instead frames all four exactly as shot. This is the same
   variable, and the same reasoning, `.media-item` already uses for gallery imagery below.

   The empty typographic panel keeps `--hero-media-aspect-ratio`: with no photograph in it, that
   panel is a layout element the composition owns outright, and no crop language applies. */
.hero__media-panel:has(.hero__media-image) {
  padding: 0;
  aspect-ratio: var(--photo-aspect-ratio, var(--hero-media-aspect-ratio, 16/9));

  /* Framing the plate at its own aspect fixes the crop but not the scale: three of the five
     compositions put the media in a single full-width `1fr` column, where a tall crop language
     resolves to an enormous panel (Austin's 4:5 plate measured 1360x1700 at a 1440px viewport —
     a hero taller than the fold). Bounding the HEIGHT and letting the width follow from the
     aspect is what keeps both properties: the plate is never cropped, and it is never taller
     than `--hero-media-max-height`.

     `--photo-aspect-ratio` is a bare `<number>/<number>`, so it substitutes into calc() as a
     division and `calc(4/5 * 40rem)` is valid math (measured: resolves to 512px). Width is
     capped rather than set, so a composition whose media column is already narrower than the
     cap — the two-column ones — is left exactly as it was.

     At 40rem the wide crop languages still fill a full-width column outright (21/9 caps at
     93.3rem, past any real column), so this only ever binds on the tall and square ones, which
     are the only ones that had a scale problem. */
  max-width: calc(var(--photo-aspect-ratio, 16/9) * var(--hero-media-max-height, 40rem));
  margin-inline: auto;
}

.hero__media-image {
  width: 100%;
  height: 100%;
  object-fit: var(--photo-object-fit, cover);
  object-position: var(--photo-object-position, center);
  display: block;
}

.hero__media-mark {
  font-family: var(--font-display);
  font-size: var(--type-size-6);
  color: var(--color-ink-muted);
  opacity: 0.55;
  text-align: center;
}

/* The visual layer sets `--hero-grid-template-columns` per site (`2fr 1fr`, `1fr 1fr`, …) with no
   width qualifier, so below the phone breakpoint that ratio was still being honoured: measured live
   at a 390px viewport, the hero resolved to `206.984px 87.0156px` — a 207px text column beside an
   87px-wide media card, which is narrower than the card's own `padding: var(--space-6)` on both
   sides. The token expresses the *desktop* intent, so the reset belongs here at the breakpoint
   rather than in each site's token file; overriding the custom property (not `grid-template-columns`
   directly) keeps this rule the single definition of the hero's geometry, so a site that ships a
   three-track hero collapses the same way without a second override. */
@media (max-width: 47.9375rem) {
  .hero {
    --hero-grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------------
   9. Buttons / CTAs — role-based color, one accent hue applied per --accent-application.
------------------------------------------------------------------------------------ */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target-min-size);
  padding-inline: var(--space-5);
  border-radius: var(--radius-control);
  font-size: var(--type-size-2);
  font-weight: var(--type-weight-medium, 500);
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast) var(--motion-ease-standard);
}

.cta--primary {
  background: var(--cta-primary-bg, var(--color-accent));
  color: var(--cta-primary-text, var(--color-ground));
  border: var(--cta-primary-border, 1px solid var(--color-accent));
}

.cta--primary:hover {
  filter: brightness(1.08);
}

.cta--secondary {
  background: transparent;
  color: var(--color-ink);
  border: var(--rule-hairline) solid var(--color-rule);
}

.cta--secondary:hover {
  border-color: var(--color-accent);
}

.cta--ghost {
  background: transparent;
  color: var(--color-ink);
  padding-inline: var(--space-3);
  text-decoration: underline;
  text-decoration-color: var(--color-rule);
}

.cta[href^="tel:"] .cta__icon,
.cta[href^="sms:"] .cta__icon {
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------------
   10. Cards — service / vehicle / city.
------------------------------------------------------------------------------------ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-5);
}

.card-grid--triptych {
  grid-template-columns: repeat(var(--module-grid-columns, 3), 1fr);
}

@media (max-width: 47.9375rem) {
  .card-grid--triptych {
    grid-template-columns: 1fr;
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-control);
}

.card__eyebrow {
  margin-block-end: 0;
}

.card__title {
  font-size: var(--type-size-4);
  margin-block-end: 0;
}

.card__title a {
  color: inherit;
  text-decoration: none;
}

.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card {
  position: relative;
}

.card__body {
  color: var(--color-ink-muted);
  font-size: var(--type-size-2);
  flex-grow: 1;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--type-size-1);
  color: var(--color-ink-muted);
}

.card__link {
  font-size: var(--type-size-2);
  font-weight: var(--type-weight-medium, 500);
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------------
   11. Tables — tabular numerals everywhere a fact is numeric (LUX-07).
------------------------------------------------------------------------------------ */
.table-wrap {
  overflow-x: auto;
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-control);
}

.data-table {
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--type-size-2);
}

.data-table caption {
  text-align: left;
  padding: var(--space-4);
  font-size: var(--type-size-1);
  color: var(--color-ink-muted);
}

.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-4);
  border-block-end: var(--rule-hairline) solid var(--color-rule);
  text-align: start;
  white-space: nowrap;
}

.data-table thead th {
  font-weight: var(--type-weight-medium, 500);
  color: var(--color-ink-muted);
  font-size: var(--type-size-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.data-table tbody tr:last-child td {
  border-block-end: none;
}

.fact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-5);
}

.fact-list dt {
  font-size: var(--type-size-1);
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fact-list dd {
  font-size: var(--type-size-3);
  font-family: var(--font-display);
  margin-block-start: var(--space-1);
}

/* ---------------------------------------------------------------------------------
   12. FAQ — native <details>/<summary>, no default chrome (LUX-09).
------------------------------------------------------------------------------------ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-control);
  padding: var(--space-4) var(--space-5);
}

.faq-item summary {
  cursor: pointer;
  font-weight: var(--type-weight-medium, 500);
  font-size: var(--type-size-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  list-style: none;
  min-height: var(--target-min-size);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: var(--type-size-4);
  color: var(--color-accent);
  flex-shrink: 0;
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item__answer {
  margin-block-start: var(--space-3);
  color: var(--color-ink-muted);
}

/* ---------------------------------------------------------------------------------
   13. Trust strip.
------------------------------------------------------------------------------------ */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-5);
  padding: var(--space-5);
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.trust-strip__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.trust-strip__icon {
  color: var(--color-accent);
  flex-shrink: 0;
}

.trust-strip__label {
  font-size: var(--type-size-2);
  color: var(--color-ink-muted);
}

.trust-strip__value {
  font-size: var(--type-size-3);
  font-weight: var(--type-weight-medium, 500);
}

/* ---------------------------------------------------------------------------------
   14. Media gallery / truth-classification labels (LUX-04).
------------------------------------------------------------------------------------ */
.media-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-4);
}

.media-item {
  position: relative;
  aspect-ratio: var(--photo-aspect-ratio, 4/3);
  border-radius: var(--radius-control);
  overflow: hidden;
  border: var(--rule-hairline) solid var(--color-rule);
}

.media-item img {
  width: 100%;
  height: 100%;
  object-fit: var(--photo-object-fit, cover);
  object-position: var(--photo-object-position, center);
}

.media-label {
  position: absolute;
  inset-block-end: var(--space-2);
  inset-inline-start: var(--space-2);
  background: var(--color-ground);
  color: var(--color-ink-muted);
  font-size: var(--type-size-1);
  padding-inline: var(--space-2);
  padding-block: 2px;
  border-radius: var(--radius-control);
  border: var(--rule-hairline) solid var(--color-rule);
}

.media-gallery--empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: var(--rule-hairline) dashed var(--color-rule);
  border-radius: var(--radius-control);
  color: var(--color-ink-muted);
  text-align: center;
}

/* ---------------------------------------------------------------------------------
   15. Channel directory / fallback channels.
------------------------------------------------------------------------------------ */
.channel-directory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-5);
}

.channel-directory__item {
  padding: var(--space-5);
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-control);
}

.channel-directory__hours {
  font-size: var(--type-size-1);
  color: var(--color-ink-muted);
  margin-block-start: var(--space-2);
}

.channel-pending {
  color: var(--color-ink-muted);
  font-style: normal;
}

/* ---------------------------------------------------------------------------------
   16. Footer.
------------------------------------------------------------------------------------ */
.site-footer {
  border-block-start: var(--rule-hairline) solid var(--color-rule);
  margin-block-start: var(--space-11);
  padding-block: var(--space-9) var(--space-8);
  background: var(--color-surface);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-7);
}

.footer-region h2 {
  font-family: var(--font-text);
  font-size: var(--type-size-2);
  font-weight: var(--type-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
  margin-block-end: var(--space-4);
}

.footer-region ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-region a {
  font-size: var(--type-size-2);
}

.site-footer__attribution {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-5);
  border-block-start: var(--rule-hairline) solid var(--color-rule);
  font-size: var(--type-size-1);
  color: var(--color-ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: space-between;
}

/* ---------------------------------------------------------------------------------
   17. Mobile action bar — fixed, safe-area aware, quote ~50% width (spec exact).
------------------------------------------------------------------------------------ */
.mobile-action-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 90;
  display: none;
  padding: var(--space-3) var(--space-4);
  padding-block-end: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface-raised);
  border-block-start: var(--rule-hairline) solid var(--color-rule);
  gap: var(--space-3);
}

@media (max-width: 47.9375rem) {
  .mobile-action-bar[data-enhanced="true"][data-visible="true"] {
    display: flex;
  }

  main {
    padding-block-end: calc(var(--target-min-size) + var(--space-8));
  }
}

.mobile-action-bar__quote {
  flex: 1 1 50%;
}

.mobile-action-bar__call,
.mobile-action-bar__text {
  flex: 1 1 25%;
}

.mobile-action-bar .cta {
  width: 100%;
  padding-inline: var(--space-3);
}

@supports selector(:has(*)) {
  body:has(.site-menu[open]) .mobile-action-bar {
    display: none;
  }
}

@media (max-width: 47.9375rem) {
  /* Utility journeys already expose their primary action in the page itself. A fixed quote bar on
     these shorter heroes covers the first form, directory, contact, or policy heading. */
  body:is(
      .page-quote,
      .page-contact,
      .page-legal-policy,
      .page-accessibility,
      .page-locations-index,
      .page-error-retirement
    )
    .mobile-action-bar {
    display: none;
  }

  body:is(
      .page-quote,
      .page-contact,
      .page-legal-policy,
      .page-accessibility,
      .page-locations-index,
      .page-error-retirement
    )
    main {
    padding-block-end: 0;
  }
}

/* ---------------------------------------------------------------------------------
   18. Utility layout helpers.
------------------------------------------------------------------------------------ */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 60rem) {
  .two-col {
    grid-template-columns: 1.2fr 0.8fr;
  }
}

address.office-disclosure {
  padding: var(--space-5);
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-control);
}

ol.numbered {
  list-style: decimal;
  padding-inline-start: 1.4em;
}

ol.numbered li + li {
  margin-block-start: var(--space-3);
}

.expansion-notice {
  padding: var(--space-4) var(--space-5);
  border-inline-start: var(--rule-emphasis) solid var(--rule-color-emphasis, var(--color-accent));
  background: var(--color-surface);
  border-radius: var(--radius-control);
}

/* ---------------------------------------------------------------------------------
   19. Motion (LUX-05) — bounded set, reduced-motion honored.
------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------------
   20. Container query: cards flow to a single column in a narrow parent regardless
   of viewport (e.g. embedded step_trip preview panels).
------------------------------------------------------------------------------------ */
.card-grid-container {
  container-type: inline-size;
}

@container (max-width: 28rem) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------------
   21. Ride Lux redesign foundation.

   The rules below intentionally supersede the original narrow document geometry while
   preserving its public class contracts. New commercial templates use `.section-shell` as
   their shared alignment primitive; older templates retain a sensible contained fallback.
------------------------------------------------------------------------------------ */
:root {
  --page-gutter: clamp(24px, 5vw, 80px);
  --grid-columns: 12;
  --grid-gap: 24px;
  --section-padding: clamp(112px, 9vw, 144px);
  --section-padding-compact: clamp(72px, 6vw, 96px);
  --color-paper: #f3f0e8;
  --color-paper-deep: #e6e0d5;
  --color-paper-ink: #151617;
  --color-paper-muted: #625f59;
  --header-height: 92px;
}

@media (min-width: 100rem) {
  :root {
    --grid-gap: 32px;
  }
}

@media (min-width: 48rem) and (max-width: 79.9375rem) {
  :root {
    --page-gutter: 32px;
    --grid-columns: 8;
    --grid-gap: 20px;
  }
}

@media (max-width: 47.9375rem) {
  :root {
    --page-gutter: 20px;
    --grid-columns: 4;
    --grid-gap: 12px;
    --section-padding: clamp(72px, 20vw, 88px);
    --section-padding-compact: clamp(56px, 16vw, 72px);
    --header-height: 70px;
  }
}

html {
  background: var(--color-ground);
}

body {
  min-width: 20rem;
  overflow-x: clip;
  font-size: clamp(1.0625rem, 1rem + 0.15vw, 1.125rem);
  line-height: 1.65;
}

main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.container {
  width: min(calc(100% - (2 * var(--page-gutter))), 90rem);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

.section-shell {
  width: min(calc(100% - (2 * var(--page-gutter))), 90rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

.section {
  padding-block: var(--section-padding);
}

.section + .section,
.section-stack > .section + .section {
  margin-block-start: 0;
}

main > .section:not(:has(> .section-shell)):not(.hero) {
  width: min(calc(100% - (2 * var(--page-gutter))), 90rem);
  margin-inline: auto;
}

.section__head {
  margin-block-end: clamp(32px, 4vw, 56px);
}

.prose {
  max-width: 42rem;
}

.prose > * + * {
  margin-block-start: clamp(16px, 2vw, 24px);
}

h1,
h2,
h3,
h4 {
  font-weight: var(--type-weight-regular, 400);
  letter-spacing: -0.025em;
}

h1 {
  font-size: clamp(4rem, 6.25vw, 6rem);
  line-height: 0.98;
}

h2 {
  font-size: clamp(2.75rem, 3.7vw, 3.5rem);
  line-height: 1.02;
  margin-block-end: clamp(20px, 2vw, 32px);
}

h3 {
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.08;
}

h4 {
  font-size: clamp(1.375rem, 1.4vw, 1.625rem);
}

.eyebrow,
.section-kicker {
  font-size: max(0.8125rem, var(--type-size-1));
  line-height: 1.25;
  letter-spacing: 0.12em;
  color: var(--eyebrow-color, var(--color-accent));
  margin-block-end: 20px;
}

a {
  transition:
    color var(--motion-duration-fast) var(--motion-ease-standard),
    text-decoration-color var(--motion-duration-fast) var(--motion-ease-standard),
    opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

.cta {
  min-height: 54px;
  padding: 14px clamp(24px, 2vw, 30px);
  border-radius: 0;
  font-size: 1rem;
  line-height: 1;
  font-weight: var(--type-weight-semibold, 600);
  letter-spacing: 0.01em;
}

.cta--primary {
  background: var(--color-accent);
  color: var(--color-ground);
  border: 1px solid var(--color-accent);
}

.cta--primary:hover {
  background: var(--color-focus);
  border-color: var(--color-focus);
  color: var(--color-ground);
  filter: none;
}

.cta--secondary {
  background: transparent;
  color: inherit;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}

.cta--secondary:hover {
  border-color: currentColor;
}

/* Shared shell navigation. */
.site-header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 80;
  height: var(--header-height);
  border: 0;
  background: linear-gradient(180deg, rgba(8, 9, 10, 0.78), rgba(8, 9, 10, 0));
  color: var(--color-ink);
}

.site-header__inner {
  height: var(--header-height);
  align-items: center;
  padding-block: 0;
}

.brand-cluster {
  grid-column: 1 / span 3;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 22px);
  min-width: 0;
}

.brand {
  position: relative;
  grid-column: auto;
  justify-self: start;
  display: block;
  width: clamp(132px, 10vw, 154px);
  height: 64px;
  overflow: hidden;
  color: var(--color-ink);
}

.brand__wordmark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 116%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -55%);
}

.market-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  color: var(--color-ink);
  font-size: 0.9375rem;
  font-weight: var(--type-weight-medium, 500);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.market-switcher:hover {
  color: var(--color-accent);
}

.market-switcher__pin {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border: 1px solid currentColor;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.market-switcher__pin::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.market-switcher__label {
  min-width: max-content;
  overflow: visible;
  text-overflow: clip;
}

.market-switcher__chevron {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-inline-end: 1px solid currentColor;
  border-block-end: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.primary-nav {
  grid-column: 4 / span 6;
  justify-self: center;
}

.primary-nav__list {
  gap: clamp(24px, 2.5vw, 40px);
  flex-wrap: nowrap;
}

.primary-nav__list a {
  min-height: 48px;
  font-size: clamp(0.9375rem, 1vw, 1rem);
  font-weight: var(--type-weight-medium, 500);
  color: var(--color-ink);
  text-decoration: none;
}

.primary-nav__list a:hover,
.primary-nav__list a[aria-current="page"] {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.55em;
}

.header-actions {
  grid-column: 10 / -1;
  justify-self: end;
}

.header-actions .cta {
  min-height: 50px;
  padding-inline: clamp(20px, 2vw, 28px);
}

.site-menu {
  display: none;
}

.site-menu:not([open]) .site-menu__panel {
  display: none;
}

/* Central over-media legibility contract.

   Text shadow is deliberately secondary: it only separates letter edges from local detail. The
   direction-aware scrims below create the contrast field and protect readability when a selected
   photograph is bright, high-key, or visually busy. Components choose only the scrim geometry;
   color, strength, and type separation remain one shared system so a new crop cannot silently
   weaken one page family. Ordinary copy and image-only compositions never enter this contract. */
.media-overlay {
  --media-overlay-foreground: var(--color-ink);
  --media-overlay-muted: color-mix(in srgb, var(--color-ink) 88%, transparent);
  --media-overlay-type-shadow: 0 1px 1px rgba(0, 0, 0, 0.72), 0 4px 18px rgba(0, 0, 0, 0.42);
  --media-overlay-bottom-scrim: linear-gradient(
    0deg,
    rgba(6, 7, 8, 0.96) 0%,
    rgba(6, 7, 8, 0.76) 32%,
    rgba(6, 7, 8, 0.2) 72%,
    rgba(6, 7, 8, 0.02) 100%
  );
  --media-overlay-caption-scrim: linear-gradient(
    0deg,
    rgba(6, 7, 8, 0.96) 0%,
    rgba(6, 7, 8, 0.88) 54%,
    rgba(6, 7, 8, 0.7) 100%
  );
  --media-overlay-left-scrim: linear-gradient(
    90deg,
    rgba(6, 7, 8, 0.94) 0%,
    rgba(6, 7, 8, 0.74) 38%,
    rgba(6, 7, 8, 0.2) 68%,
    transparent 84%
  );
  --media-overlay-top-scrim: linear-gradient(180deg, rgba(6, 7, 8, 0.38) 0%, transparent 28%);
  --media-overlay-center-scrim: linear-gradient(
    0deg,
    rgba(6, 7, 8, 0.86) 0%,
    rgba(6, 7, 8, 0.2) 68%,
    rgba(6, 7, 8, 0.34) 100%
  );
  --media-overlay-mobile-scrim:
    linear-gradient(0deg, rgba(6, 7, 8, 0.82) 0%, rgba(6, 7, 8, 0.28) 64%, rgba(6, 7, 8, 0.2) 100%),
    linear-gradient(90deg, rgba(6, 7, 8, 0.4), transparent 82%);
  color: var(--media-overlay-foreground);
  text-shadow: var(--media-overlay-type-shadow);
}

.media-overlay--left {
  --media-overlay-scrim:
    var(--media-overlay-left-scrim), var(--media-overlay-bottom-scrim),
    var(--media-overlay-top-scrim);
}

.media-overlay--center {
  --media-overlay-scrim: var(--media-overlay-center-scrim);
}

.media-overlay--bottom {
  --media-overlay-scrim: var(--media-overlay-bottom-scrim);
}

/* Full-bleed commercial and compact utility heroes. */
.hero {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: clamp(720px, 92svh, 980px);
  padding: 0;
  overflow: hidden;
  text-align: left;
  background:
    radial-gradient(circle at 75% 25%, rgba(184, 148, 88, 0.16), transparent 36%),
    var(--color-ground);
}

.hero--utility {
  height: clamp(380px, 52svh, 520px);
  min-height: clamp(380px, 52svh, 520px);
  max-height: 520px;
}

.hero--utility .hero__inner {
  padding-block: calc(var(--header-height) + 20px) 40px;
}

.hero--utility .hero__content {
  grid-column: 1 / span 8;
  max-width: 60rem;
}

.hero--utility .hero__heading {
  max-width: none;
  margin-block-end: 20px;
  font-size: clamp(3.5rem, 4vw, 4rem);
}

.hero--utility .hero__lede {
  max-width: none;
  font-size: clamp(1.125rem, 1.25vw, 1.25rem);
}

.hero--utility .hero__actions {
  margin-block-start: 24px;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: var(--media-overlay-scrim, none);
}

.hero--center::after {
  background: var(--media-overlay-scrim, none);
}

.hero__media,
.hero__media-panel,
.hero__media-panel:has(.hero__media-image) {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  clip-path: none;
  background: var(--color-ground);
}

.hero__media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focal-point, center);
}

/* CSP-safe image presentation tokens. Generated markup carries inert data attributes instead of
   inline custom properties because production deliberately ships `style-src 'self'`. Keep this
   finite list synchronized with the admitted image-library focal points; the quality gate rejects
   every inline style so a future presentation value cannot silently weaken the CSP. */
.hero__media-panel[data-focal-point="50% 50%"] {
  --hero-focal-point: 50% 50%;
}

.hero__media-panel[data-focal-point="50% 44%"] {
  --hero-focal-point: 50% 44%;
}

.hero__media-panel[data-focal-point="55% 68%"] {
  --hero-focal-point: 55% 68%;
}

.hero__media-panel[data-focal-point="58% 50%"] {
  --hero-focal-point: 58% 50%;
}

.hero__media-panel[data-focal-point="62% 50%"] {
  --hero-focal-point: 62% 50%;
}

.hero__media-panel[data-focal-point="62% 54%"] {
  --hero-focal-point: 62% 54%;
}

.hero__media-panel[data-focal-point="66% 50%"] {
  --hero-focal-point: 66% 50%;
}

.hero__media-panel[data-focal-point-mobile="50% 40%"] {
  --hero-focal-point-mobile: 50% 40%;
}

.hero__media-panel[data-focal-point-mobile="50% 50%"] {
  --hero-focal-point-mobile: 50% 50%;
}

.hero__media-panel[data-focal-point-mobile="56% 55%"] {
  --hero-focal-point-mobile: 56% 55%;
}

.hero__media-panel[data-focal-point-mobile="58% 50%"] {
  --hero-focal-point-mobile: 58% 50%;
}

.hero__media-panel[data-focal-point-mobile="68% 50%"] {
  --hero-focal-point-mobile: 68% 50%;
}

.hero__media-panel[data-focal-point-mobile="70% 52%"] {
  --hero-focal-point-mobile: 70% 52%;
}

.hero__media-panel[data-focal-point-mobile="72% 55%"] {
  --hero-focal-point-mobile: 72% 55%;
}

.hero__media-panel[data-object-fit="cover"] {
  --hero-object-fit: cover;
}

.hero__media-panel[data-object-fit="contain"] {
  --hero-object-fit: contain;
}

.hero__media-panel[data-object-fit-mobile="cover"] {
  --hero-object-fit-mobile: cover;
}

.hero__media-panel[data-object-fit-mobile="contain"] {
  --hero-object-fit-mobile: contain;
}

.hero__inner {
  position: relative;
  z-index: 2;
  min-height: inherit;
  align-items: end;
  padding-block: calc(var(--header-height) + 72px) clamp(88px, 8vw, 128px);
}

.hero__content {
  grid-column: 1 / span 6;
  align-self: end;
  max-width: 47rem;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
}

.hero--center .hero__content {
  grid-column: 3 / span 8;
  justify-self: center;
  max-width: 60rem;
  text-align: center;
}

.hero--center .hero__actions {
  justify-content: center;
}

/* No character cap (owner rule 2026-09-17): the heading fills the hero content column; a 13ch
   measure wrapped real headings onto three and four lines. */
.hero__heading {
  max-width: none;
  margin-block-end: 28px;
  font-size: clamp(5rem, 6.25vw, 6rem);
  line-height: 0.96;
  color: var(--color-ink);
}

.hero--utility .hero__heading {
  max-width: none;
  margin-block-end: 20px;
  font-size: clamp(3.5rem, 4vw, 4rem);
}

.hero--center .hero__heading {
  margin-inline: auto;
}

/* No character cap (owner rule 2026-09-17): the lede fills the hero content column; a 42ch
   measure wrapped real ledes onto five lines. */
.hero__lede {
  max-width: none;
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  line-height: 1.45;
  color: var(--color-ink);
}

.hero--center .hero__lede {
  margin-inline: auto;
}

.hero__actions {
  gap: 28px;
  margin-block-start: 36px;
}

.hero__secondary-action {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: var(--type-weight-semibold, 600);
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.35em;
}

.hero__proof {
  max-width: 48ch;
  margin-block-start: 28px;
  font-size: 0.9375rem;
  color: var(--color-ink-muted);
}

.breadcrumb {
  padding-block: calc(var(--header-height) + 18px) 18px;
  background: var(--color-ground);
}

.breadcrumb__list {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
}

/* Concise footer. */
.site-footer {
  margin-block-start: 0;
  padding-block: clamp(88px, 8vw, 128px) 32px;
  border: 0;
  background: #08090a;
}

.site-footer__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  gap: 48px var(--grid-gap);
}

.footer-region:nth-child(1) {
  grid-column: 1 / span 4;
}

.footer-region:nth-child(2) {
  grid-column: 6 / span 2;
}

.footer-region:nth-child(3) {
  grid-column: 8 / span 3;
}

.footer-region:nth-child(4) {
  grid-column: 11 / span 2;
}

.site-footer__wordmark {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3vw, 3rem);
  font-weight: var(--type-weight-regular, 400);
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--color-ink);
}

.site-footer__statement {
  max-width: 25ch;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  line-height: 1.35;
}

.footer-region h2:not(.site-footer__wordmark) {
  margin-block-end: 20px;
  color: var(--color-ink-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
}

.footer-region ul {
  gap: 10px;
}

.footer-region a {
  color: var(--color-ink);
  font-size: 0.9375rem;
  text-decoration-color: transparent;
}

.site-footer__wordmark a {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-decoration: none;
}

.footer-region a:hover {
  text-decoration-color: var(--color-accent);
}

.site-footer__quote {
  font-size: 1.0625rem !important;
  font-weight: var(--type-weight-semibold, 600);
}

.site-footer__attribution {
  grid-column: 1 / -1;
  width: 100%;
  margin-block-start: 64px;
  padding-block-start: 24px;
  font-size: 0.8125rem;
}

/* Mobile menu and dominant conversion action. */
@media (max-width: 47.9375rem) {
  h1 {
    font-size: clamp(2.875rem, 13vw, 3.5rem);
  }

  h2 {
    font-size: clamp(2rem, 9vw, 2.375rem);
  }

  h3 {
    font-size: clamp(1.375rem, 6vw, 1.75rem);
  }

  .site-header__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .brand-cluster {
    grid-column: 1 / span 3;
    gap: 8px;
    max-width: 100%;
  }

  .brand {
    grid-column: auto;
    flex: 0 0 auto;
    width: 84px;
    height: 50px;
  }

  .market-switcher {
    flex: 1 1 auto;
    max-width: 100%;
    min-height: 44px;
  }

  .market-switcher__label {
    min-width: 0;
    line-height: 1.12;
    white-space: normal;
  }

  .primary-nav,
  .header-actions {
    display: none;
  }

  .site-menu {
    grid-column: 4;
    justify-self: end;
    display: block;
    margin-inline-start: auto;
  }

  .site-menu__toggle {
    position: relative;
    z-index: 102;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 48px;
    min-height: 48px;
    color: var(--color-ink);
    font-size: 0.9375rem;
    list-style: none;
    cursor: pointer;
  }

  .site-menu__toggle::-webkit-details-marker {
    display: none;
  }

  .site-menu__toggle-icon {
    position: relative;
    width: 22px;
    height: 16px;
  }

  .site-menu__toggle-icon span {
    position: absolute;
    inset-inline: 0;
    height: 1px;
    background: currentColor;
    transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .site-menu__toggle-icon span:first-child {
    inset-block-start: 4px;
  }

  .site-menu__toggle-icon span:last-child {
    inset-block-end: 4px;
  }

  .site-menu[open] .site-menu__toggle-icon span:first-child {
    inset-block-start: 8px;
    transform: rotate(45deg);
  }

  .site-menu[open] .site-menu__toggle-icon span:last-child {
    inset-block-end: 7px;
    transform: rotate(-45deg);
  }

  .site-menu__panel {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--header-height) + 48px) var(--page-gutter)
      max(40px, env(safe-area-inset-bottom));
    background: rgba(8, 9, 10, 0.985);
  }

  .site-menu__location {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 52px;
    margin-block-end: 20px;
    padding-block-end: 12px;
    border-block-end: 1px solid color-mix(in srgb, var(--color-accent) 46%, transparent);
    color: var(--color-ink);
    font-size: 0.9375rem;
    font-weight: var(--type-weight-semibold, 600);
    text-decoration: none;
  }

  .site-menu__nav ul {
    display: flex;
    flex-direction: column;
    list-style: none;
  }

  .site-menu__nav a {
    display: flex;
    align-items: center;
    min-height: 64px;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: clamp(2rem, 9vw, 2.5rem);
    line-height: 1.1;
    text-decoration: none;
  }

  .site-menu__nav a[aria-current="page"] {
    color: var(--color-accent);
  }

  .site-menu__quote {
    width: 100%;
    margin-block-start: 40px;
  }

  body:has(.site-menu[open]) {
    overflow: hidden;
  }

  .hero {
    min-height: clamp(680px, 92svh, 820px);
  }

  .hero--utility {
    min-height: clamp(380px, 62svh, 520px);
  }

  .hero.media-overlay::after,
  .hero.media-overlay.hero--center::after {
    background: var(--media-overlay-mobile-scrim);
  }

  .hero.media-overlay--mobile-disabled::after {
    background: none;
  }

  .hero.media-overlay--mobile-disabled {
    --media-overlay-foreground: var(--color-ink);
    --media-overlay-muted: var(--color-ink-muted);
    --media-overlay-type-shadow: none;
    color: var(--color-ink);
    text-shadow: none;
  }

  .hero__media-image {
    object-position: var(--hero-focal-point-mobile, var(--hero-focal-point, center));
  }

  .hero__inner {
    padding-block: calc(var(--header-height) + 48px) clamp(64px, 18vw, 88px);
  }

  .hero__content,
  .hero--center .hero__content {
    grid-column: 1 / -1;
    max-width: none;
    text-align: left;
  }

  .hero--center .hero__actions {
    justify-content: flex-start;
  }

  .hero__heading,
  .hero--utility .hero__heading,
  .hero--center .hero__heading {
    max-width: 12ch;
    margin-inline: 0;
    margin-block-end: 24px;
    font-size: clamp(2.875rem, 13vw, 3.5rem);
  }

  .hero__lede,
  .hero--center .hero__lede {
    max-width: 34ch;
    margin-inline: 0;
    font-size: clamp(1.125rem, 5vw, 1.25rem);
  }

  .hero__actions {
    align-items: stretch;
    gap: 20px;
    margin-block-start: 32px;
  }

  .hero__actions .cta {
    width: 100%;
  }

  .breadcrumb {
    padding-block: calc(var(--header-height) + 12px) 12px;
  }

  .site-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .footer-region:nth-child(1),
  .footer-region:nth-child(2),
  .footer-region:nth-child(3),
  .footer-region:nth-child(4) {
    grid-column: 1 / -1;
  }

  .footer-region:nth-child(3) ul,
  .footer-region:nth-child(4) ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
  }

  .site-footer__attribution {
    margin-block-start: 48px;
  }

  .mobile-action-bar {
    display: none;
    padding: 10px 12px;
    padding-block-end: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(16, 18, 20, 0.96);
    backdrop-filter: blur(16px);
    border-color: rgba(243, 239, 231, 0.14);
    gap: 8px;
  }

  .mobile-action-bar[data-enhanced="true"][data-visible="true"] {
    display: flex;
  }

  .mobile-action-bar__quote {
    flex: 1 1 auto;
  }

  .mobile-action-bar__call {
    flex: 0 0 auto;
    width: auto;
    min-width: 92px;
  }

  .mobile-action-bar .cta {
    min-height: 52px;
  }
}

@media (max-width: 22.5rem) {
  .brand-cluster {
    gap: 6px;
  }

  .brand {
    width: 78px;
  }

  .market-switcher {
    font-size: 0.875rem;
  }

  .market-switcher__pin,
  .market-switcher__chevron {
    display: none;
  }
}

/* ---------------------------------------------------------------------------------
   22. Editorial surfaces and reusable commercial components.
------------------------------------------------------------------------------------ */
.editorial-section--paper,
.home-editorial,
.home-cities,
.detail-intro--paper,
.detail-process,
.detail-specs,
.discovery-hub,
.policy-section {
  background: var(--color-paper);
  color: var(--color-paper-ink);
}

.editorial-section--dark,
.home-services,
.home-fleet,
.home-story,
.home-closing-cta,
.detail-showcase,
.detail-story,
.detail-media,
.detail-links,
.prefooter-cta {
  background: var(--color-ground);
  color: var(--color-ink);
}

:is(
    .editorial-section--paper,
    .home-editorial,
    .home-cities,
    .detail-intro--paper,
    .detail-process,
    .detail-specs,
    .discovery-hub,
    .policy-section
  )
  :is(h1, h2, h3, h4, p, dt, dd, label, legend) {
  color: inherit;
}

:is(
    .editorial-section--paper,
    .home-editorial,
    .home-cities,
    .detail-intro--paper,
    .detail-process,
    .detail-specs,
    .discovery-hub,
    .policy-section
  )
  a:not(.cta) {
  color: var(--color-paper-ink);
}

:is(
    .editorial-section--paper,
    .home-editorial,
    .home-cities,
    .detail-intro--paper,
    .detail-process,
    .detail-specs,
    .discovery-hub,
    .policy-section
  )
  :is(.meta, .hint, .eyebrow, .section-kicker) {
  color: var(--color-paper-muted);
}

.editorial-intro__layout,
.editorial-section > .section-shell {
  row-gap: clamp(32px, 4vw, 56px);
}

.editorial-section > .section-shell > .editorial-intro,
.discovery-hub__intro {
  grid-column: 1 / span 6;
}

.editorial-intro__heading {
  grid-column: 1 / span 5;
}

.editorial-intro__copy {
  grid-column: 7 / span 5;
  max-width: 42rem;
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
  line-height: 1.6;
}

.editorial-intro__layout > .editorial-intro__copy:only-child {
  grid-column: 1 / span 6;
}

.editorial-intro--compact {
  padding-block: var(--section-padding-compact);
}

.image-card,
.fleet-card,
.context-links__item,
.link-card {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--color-surface);
}

.image-card__media,
.fleet-card__media,
.context-links__media,
.link-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface-raised);
}

.image-card__image,
.fleet-card__image,
.context-links__image,
.link-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--motion-ease-standard);
}

.image-card:hover .image-card__image,
.fleet-card:hover .fleet-card__image,
.context-links__item:hover .context-links__image,
.link-card:hover .link-card__media img {
  transform: scale(1.03);
}

.image-card__content,
.fleet-card__content {
  padding: clamp(24px, 3vw, 36px);
}

.image-card__eyebrow,
.fleet-card__label {
  margin-block-end: 12px;
  color: var(--color-ink-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.image-card__title,
.fleet-card__title {
  margin: 0;
  font-size: clamp(1.5rem, 2vw, 2rem);
}

.image-card__body {
  margin-block-start: 16px;
  color: var(--color-ink-muted);
}

.image-card__link,
.fleet-card__link {
  display: block;
  height: 100%;
  color: var(--color-ink);
  text-decoration: none;
}

.image-card__arrow,
.fleet-card__arrow,
.context-links__arrow,
.link-card__arrow {
  display: inline-flex;
  margin-block-start: 24px;
  color: var(--color-accent);
}

.fact-rail,
.proof-rail,
.detail-rail,
.home-proof {
  padding-block: clamp(36px, 4vw, 56px);
  background: var(--color-surface-raised);
  color: var(--color-ink);
}

.fact-rail__layout,
.proof-rail__shell,
.detail-rail__inner,
.home-proof__inner {
  row-gap: 32px;
}

.fact-rail__heading {
  grid-column: 1 / span 4;
  margin: 0;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
}

.fact-rail__list,
.proof-rail__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0;
}

.fact-rail__heading + .fact-rail__list {
  grid-column: 5 / -1;
}

.fact-rail__item,
.proof-rail__item,
.detail-rail__item,
.home-proof__item {
  min-width: 0;
  padding-inline: clamp(20px, 2.5vw, 36px);
  border-inline-start: 1px solid rgba(243, 239, 231, 0.14);
}

.fact-rail__item:first-child,
.proof-rail__item:first-child,
.detail-rail__item:first-child,
.home-proof__item:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.detail-rail__item,
.home-proof__item {
  grid-column: span 3;
}

.fact-rail__label,
.proof-rail__label,
.detail-rail__label,
.home-proof__eyebrow {
  display: block;
  margin-block-end: 10px;
  color: var(--color-ink-muted);
  font-size: 0.8125rem;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fact-rail__value,
.proof-rail__value,
.detail-rail__value,
.home-proof__value {
  display: block;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: var(--type-weight-regular, 400);
  line-height: 1.05;
}

.fact-rail__date,
.proof-rail__detail,
.detail-rail__detail,
.home-proof__label {
  display: block;
  margin-block-start: 10px;
  color: var(--color-ink-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

.faq {
  background: var(--color-paper);
  color: var(--color-paper-ink);
}

/* Half the shell beside the accordion, never a 4-track sliver (owner rule 2026-09-17). */
.faq__heading {
  grid-column: 1 / span 6;
  align-self: start;
  position: sticky;
  inset-block-start: 32px;
}

.faq-list {
  grid-column: 7 / -1;
  gap: 0;
}

.faq-item {
  padding: 0;
  border: 0;
  border-block-end: 1px solid rgba(21, 22, 23, 0.18);
  border-radius: 0;
}

.faq-item:first-child {
  border-block-start: 1px solid rgba(21, 22, 23, 0.18);
}

.faq-item summary {
  min-height: 76px;
  padding-block: 20px;
  color: var(--color-paper-ink);
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
}

.faq-item summary::after {
  display: none;
}

.faq-item__icon {
  color: var(--color-paper-muted);
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.faq-item[open] .faq-item__icon {
  transform: rotate(180deg);
}

.faq-item__answer {
  max-width: 38rem;
  margin: 0;
  padding-block: 0 28px;
  color: var(--color-paper-muted);
}

.fleet-showcase__head,
.context-links__heading,
.place-story__heading {
  grid-column: 1 / span 6;
}

.fleet-showcase__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.fleet-card__facts {
  display: grid;
  gap: 14px;
  margin-block-start: 24px;
}

.fleet-card__fact {
  display: grid;
  grid-template-columns: minmax(5rem, 0.7fr) 1fr;
  gap: 12px;
}

.fleet-card__label,
.fleet-card__value {
  margin: 0;
}

.fleet-card__value {
  color: var(--color-ink-muted);
  font-size: 0.875rem;
}

.context-links__layout,
.place-story__layout {
  row-gap: clamp(32px, 4vw, 56px);
}

.context-links__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.context-links__link {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  color: var(--color-ink);
  text-decoration: none;
}

.context-links__label {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.1;
}

.context-links__context {
  margin-block-start: 16px;
  color: var(--color-ink-muted);
}

.place-story__copy {
  grid-column: 7 / span 6;
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
}

.place-story__facts {
  grid-column: 7 / span 6;
}

/* Homepage narrative. */
.home-editorial__copy {
  grid-column: 1 / span 6;
  align-self: center;
}

/* No character cap: the copy column is already half the shell at desktop and the full width
   below it, and an eleven-character measure wrapped this heading into five or six lines. */
.home-editorial__copy h2 {
  max-width: none;
}

.home-editorial__body {
  max-width: 36rem;
  margin-block-start: 28px;
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
}

.home-editorial__media {
  grid-column: 8 / -1;
  min-height: 35rem;
  overflow: hidden;
}

.home-editorial__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-services__inner,
.home-fleet__inner,
.home-story__inner,
.home-cities__inner {
  row-gap: clamp(40px, 5vw, 72px);
}

.home-services__head,
.home-fleet__head,
.home-story__head,
.home-cities__head {
  grid-column: 1 / span 6;
}

:is(.home-services__head, .home-fleet__head, .home-cities__head) > p:last-child {
  max-width: 38rem;
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  color: var(--color-ink-muted);
}

.home-service-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(15rem, auto);
  gap: var(--grid-gap);
}

.home-service-card {
  position: relative;
  grid-column: span 4;
  min-height: 18rem;
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
}

.home-service-card--feature {
  grid-column: span 7;
  grid-row: span 2;
  min-height: 38rem;
}

.home-service-card--compact:nth-child(2),
.home-service-card--compact:nth-child(3) {
  grid-column: span 5;
}

.home-service-card__media {
  position: absolute;
  inset: 0;
}

.home-service-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--media-overlay-scrim, none);
}

.home-service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--motion-ease-standard);
}

.home-service-card:hover .home-service-card__media img {
  transform: scale(1.03);
}

.home-service-card__content {
  position: relative;
  z-index: 1;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 3vw, 40px);
}

.home-service-card__title {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.75rem);
  line-height: 1.04;
}

.home-service-card__body {
  max-width: 34rem;
  margin-block-start: 14px;
  color: var(--color-ink-muted);
}

.home-service-card__arrow,
.home-city-card__arrow,
.home-fleet-card__arrow {
  margin-block-start: 22px;
  color: var(--color-accent);
  font-size: 1.25rem;
}

.home-fleet__cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.home-fleet-card {
  position: relative;
  min-height: 28rem;
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
}

.home-fleet-card__media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 34%, rgba(184, 148, 88, 0.1), transparent 42%),
    var(--color-surface-raised);
}

.home-fleet-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--media-overlay-scrim, none);
}

.home-fleet-card__media img {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: clamp(26px, 2.5vw, 42px) clamp(16px, 2vw, 30px) 9rem;
  object-fit: contain;
  object-position: center 38%;
  transition: transform 700ms var(--motion-ease-standard);
}

.home-fleet-card:hover .home-fleet-card__media img {
  transform: scale(1.03);
}

.home-fleet-card__content {
  position: relative;
  z-index: 1;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 2.5vw, 36px);
}

.home-fleet-card__capacity {
  color: var(--color-accent);
  font-size: 0.8125rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-fleet-card__title {
  margin-block-start: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.08;
}

.home-fleet-card__facts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-block-start: 16px;
  color: var(--color-ink-muted);
  font-size: 0.875rem;
}

.home-story__head {
  grid-column: 1 / span 7;
}

.home-story__media {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 10vw;
  gap: var(--grid-gap);
}

.home-story__frame {
  overflow: hidden;
}

.home-story__frame--1 {
  grid-column: 1 / span 7;
  grid-row: span 4;
}

.home-story__frame--2 {
  grid-column: 8 / span 5;
  grid-row: 2 / span 3;
}

.home-story__frame--3 {
  grid-column: 3 / span 4;
  grid-row: span 3;
}

.home-story__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-city-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.home-city-card {
  position: relative;
  min-height: 26rem;
  overflow: hidden;
  background: var(--color-paper-deep);
  color: var(--color-paper-ink);
  text-decoration: none;
}

.home-city-card__media {
  position: absolute;
  inset: 0;
}

.home-city-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--media-overlay-scrim, none);
}

.home-city-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--motion-ease-standard);
}

.home-city-card:hover .home-city-card__media img {
  transform: scale(1.03);
}

.home-city-card__content {
  position: relative;
  z-index: 1;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 4vw, 48px);
}

.home-city-card--image {
  color: var(--color-ink);
}

/* `.home-cities a:not(.cta)` deliberately makes ordinary links dark on the paper section. Image
   cards are the exception: their copy sits over a photographic scrim and must remain light. */
.home-cities a.home-city-card--image,
.home-cities a.home-city-card--image .home-city-card__body {
  color: var(--color-ink);
}

.home-city-card__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
}

.home-city-card__body {
  max-width: 34rem;
  margin-block-start: 16px;
  color: inherit;
  opacity: 0.78;
}

.home-closing-cta__copy {
  grid-column: 1 / span 7;
}

.home-closing-cta__copy p:last-child {
  max-width: 40rem;
  color: var(--color-ink-muted);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
}

.home-closing-cta__action {
  grid-column: 10 / -1;
  align-self: end;
  justify-self: stretch;
}

/* Service and vehicle detail compositions. */
.detail-intro__copy {
  grid-column: 1 / span 6;
}

.detail-intro__body {
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
}

.detail-showcase__head,
.detail-process__head,
.detail-media__head,
.detail-links__head,
.detail-specs__head {
  grid-column: 1 / span 6;
}

.detail-card-grid,
.detail-process__grid,
.detail-media__grid,
.detail-links__list,
.detail-specs__grid {
  grid-column: 1 / -1;
  margin-block-start: clamp(40px, 5vw, 72px);
}

.detail-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.detail-links__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.detail-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
}

.detail-card__media,
.detail-card__visual {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface-raised);
}

.detail-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--motion-ease-standard);
}

.detail-card--vehicle .detail-card__media {
  background:
    radial-gradient(circle at 50% 44%, rgba(184, 148, 88, 0.11), transparent 46%),
    var(--color-surface-raised);
}

.detail-card--vehicle .detail-card__media img {
  box-sizing: border-box;
  padding: clamp(14px, 1.8vw, 24px);
  object-fit: contain;
}

.detail-card:hover .detail-card__media img {
  transform: scale(1.03);
}

.detail-card__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-muted);
}

.detail-card__visual strong {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: var(--type-weight-regular, 400);
  color: var(--color-accent);
}

.detail-card__body {
  flex: 1;
  padding: clamp(24px, 2.5vw, 36px);
}

.detail-card__facts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-block-start: 18px;
  color: var(--color-ink-muted);
  font-size: 0.875rem;
}

.detail-card__link {
  display: inline-flex;
  gap: 8px;
  margin-block-start: 24px;
  color: var(--color-accent);
  font-size: 0.9375rem;
}

.detail-story__inner {
  align-items: center;
  row-gap: 40px;
}

.detail-story__media {
  grid-column: 1 / span 7;
  min-height: 36rem;
}

.detail-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-story__copy {
  grid-column: 9 / -1;
}

.detail-story__inner--text .detail-story__copy {
  grid-column: 1 / span 6;
}

.detail-process__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.detail-process__step {
  padding-block-start: 24px;
  border-block-start: 1px solid rgba(21, 22, 23, 0.2);
}

.detail-process__index {
  display: block;
  margin-block-end: 48px;
  color: var(--color-paper-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
}

.detail-process__step p {
  margin-block-start: 16px;
  color: var(--color-paper-muted);
}

.detail-media__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 11vw;
  gap: var(--grid-gap);
}

.detail-media__item {
  grid-column: span 5;
  grid-row: span 3;
  overflow: hidden;
}

.detail-media__item--feature {
  grid-column: span 7;
  grid-row: span 4;
}

.detail-media__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-card--link {
  min-height: 22rem;
}

.detail-links__list > li:nth-child(3):last-child {
  grid-column: 1 / -1;
}

.detail-links__list > li:nth-child(3):last-child .detail-card {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
  height: 34rem;
  min-height: 0;
}

.detail-links__list > li:nth-child(3):last-child .detail-card__media {
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

.detail-links__list > li:nth-child(3):last-child .detail-card__body {
  align-self: end;
}

.detail-specs__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.detail-specs__item {
  padding-block-start: 20px;
  border-block-start: 1px solid rgba(21, 22, 23, 0.18);
}

.detail-specs__item dt {
  color: var(--color-paper-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.detail-specs__item dd {
  margin-block-start: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 2rem);
}

/* The cabin list is the one spec whose value is a list. It lays out in as many columns as the row
   can hold, so an item never wraps into a narrow stack; one column at the narrowest widths. */
.detail-specs__amenities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 6px var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.detail-quote {
  background: var(--color-paper);
  color: var(--color-paper-ink);
}

/* Half the shell beside the reservation panel, never a 5-track sliver (owner rule 2026-09-17). */
.detail-quote__copy {
  grid-column: 1 / span 6;
  align-self: start;
}

.detail-quote__form {
  grid-column: 7 / -1;
}

/* Utility, policy, location, and discovery compositions. */
.city-directory,
.feature-grid,
.contact-paths,
.coverage-facts,
.link-cards {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--grid-gap);
}

.city-directory {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.city-directory .city-card {
  min-height: 32rem;
  background: var(--color-paper-deep);
}

.city-directory .city-card__link {
  display: flex;
  min-height: inherit;
  flex-direction: column;
}

.city-directory .city-card__media {
  flex: 1;
  aspect-ratio: 16 / 10;
}

.city-directory .city-card__content {
  background: var(--color-paper-deep);
  color: var(--color-paper-ink);
}

.city-directory .city-card__body {
  color: var(--color-paper-muted);
}

.feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-panel {
  min-height: 20rem;
  padding: clamp(28px, 4vw, 52px);
  background: var(--color-paper-deep);
}

.feature-panel p {
  max-width: 34rem;
  margin-block-start: 16px;
  color: var(--color-paper-muted);
}

.feature-panel a {
  display: inline-flex;
  margin-block-start: 24px;
  text-underline-offset: 0.3em;
}

.contact-paths {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-feature {
  background: var(--color-ground);
}

.contact-feature__inner {
  align-items: center;
  row-gap: clamp(36px, 5vw, 72px);
}

.contact-feature__media {
  position: relative;
  grid-column: 1 / span 7;
  min-height: clamp(34rem, 58vw, 48rem);
  overflow: hidden;
  background: var(--color-surface-raised);
}

.contact-feature__media picture,
.contact-feature__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.contact-feature__image {
  object-fit: cover;
}

.contact-feature__copy {
  grid-column: 9 / -1;
  max-width: 32rem;
}

.contact-feature__copy h2 {
  margin-block-start: 18px;
  font-size: clamp(2.75rem, 4.6vw, 4.75rem);
  line-height: 0.98;
}

.contact-feature__copy > p:not(.section-kicker) {
  margin-block-start: 24px;
  color: var(--color-ink-muted);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.65;
}

.contact-feature__copy .cta {
  margin-block-start: 32px;
}

.contact-path {
  position: relative;
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 4vw, 48px);
  background: var(--color-paper-deep);
  color: var(--color-paper-ink);
  text-decoration: none;
}

.contact-path__label {
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1.05;
}

.contact-path__meta {
  margin-block-start: 14px;
  color: var(--color-paper-muted);
}

.contact-path__arrow {
  position: absolute;
  inset-block-start: 28px;
  inset-inline-end: 28px;
  color: var(--color-accent);
  font-size: 1.5rem;
}

.coverage-story {
  align-items: center;
  row-gap: 48px;
}

.coverage-story__media {
  grid-column: 1 / span 7;
  min-height: 38rem;
  overflow: hidden;
}

.coverage-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coverage-story__content {
  grid-column: 9 / -1;
}

.coverage-story__content p:not(.section-kicker) {
  margin-block-start: 20px;
  color: var(--color-ink-muted);
}

.coverage-story--text-only .coverage-story__content {
  grid-column: 1 / span 6;
}

.coverage-story--text-only .coverage-facts {
  grid-column: 8 / -1;
}

.coverage-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.coverage-facts__item {
  padding-block-start: 20px;
  border-block-start: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.coverage-facts__item dt {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.66;
}

.coverage-facts__item dd {
  margin-block-start: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.12;
}

.link-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.link-card {
  min-height: 22rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 3vw, 40px);
  color: inherit;
  text-decoration: none;
}

.link-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.link-card__media picture,
.link-card__image {
  display: block;
  width: 100%;
  height: 100%;
}

.link-card__image {
  object-fit: cover;
  transition: transform 600ms var(--motion-ease-standard);
}

.link-card:hover .link-card__image {
  transform: scale(1.03);
}

.link-card:has(.link-card__media)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--media-overlay-scrim, none);
}

.link-card:has(.link-card__media) {
  color: var(--color-ink) !important;
}

.link-card__title,
.link-card__description,
.link-card__arrow,
.link-card__links {
  position: relative;
  z-index: 1;
}

.link-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.08;
}

.link-card__description {
  margin-block-start: 14px;
  color: inherit;
  opacity: 0.74;
}

.link-card__links {
  margin-block-start: 20px;
}

.link-card__links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.editorial-section--paper .link-card:not(:has(.link-card__media)) {
  background: var(--color-paper-deep);
  color: var(--color-paper-ink);
}

.editorial-section--dark .link-card {
  background: var(--color-surface);
  color: var(--color-ink);
}

.locations-showcase__card {
  grid-column: 1 / -1;
  min-height: clamp(26rem, 48vw, 42rem);
}

.policy-layout {
  align-items: start;
}

.policy-toc {
  grid-column: 1 / span 3;
  position: sticky;
  inset-block-start: 32px;
  padding-inline-end: 24px;
}

.policy-toc__title {
  margin-block-end: 18px;
  color: var(--color-paper-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.policy-toc ol {
  list-style: decimal-leading-zero;
  padding-inline-start: 2.5rem;
}

.policy-toc li + li {
  margin-block-start: 10px;
}

.policy-toc a {
  font-size: 0.9375rem;
  text-decoration-color: transparent;
}

.policy-document {
  grid-column: 5 / span 7;
  max-width: 46rem;
}

.policy-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 32px;
  padding-block: 24px;
  margin-block-end: clamp(48px, 6vw, 72px);
  border-block: 1px solid rgba(21, 22, 23, 0.18);
}

.policy-meta div {
  display: grid;
  grid-template-columns: minmax(6rem, 0.8fr) 1fr;
  gap: 16px;
}

.policy-meta dt {
  color: var(--color-paper-muted) !important;
  font-size: 0.8125rem;
}

.policy-document__section + .policy-document__section {
  margin-block-start: clamp(64px, 7vw, 96px);
}

.policy-document__section h2 {
  font-size: clamp(2rem, 3vw, 2.75rem);
}

.policy-section .table-wrap {
  border-color: rgba(21, 22, 23, 0.18);
}

.policy-section .data-table th,
.policy-section .data-table td {
  color: var(--color-paper-ink);
  border-color: rgba(21, 22, 23, 0.18);
}

.prefooter-cta__inner {
  align-items: end;
  row-gap: 28px;
}

.prefooter-cta__inner > .section-kicker {
  grid-column: 1 / span 4;
}

.prefooter-cta__heading {
  grid-column: 1 / span 7;
  margin: 0;
}

.prefooter-cta__copy {
  grid-column: 1 / span 6;
  color: var(--color-ink-muted);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
}

.prefooter-cta__inner > .cta {
  grid-column: 10 / -1;
  grid-row: 2 / span 2;
  align-self: end;
  justify-self: stretch;
}

.prefooter-cta .editorial-intro {
  grid-column: 1 / span 8 !important;
}

.prefooter-cta .editorial-intro .cluster {
  margin-block-start: 32px;
}

.quote-entry .reservation-cta {
  grid-column: 7 / -1;
  align-self: start;
}

.error-page {
  min-height: 100svh;
  background: var(--color-ground);
}

.error-page__action {
  position: relative;
  z-index: 3;
  margin-block-start: -120px;
  padding-block-end: 72px;
}

.error-page__action .cta {
  grid-column: 1 / span 3;
}

/* City service and fleet discovery hubs. */
.discovery-hub__intro {
  margin-block-end: clamp(48px, 6vw, 80px);
}

.discovery-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: var(--grid-gap);
}

.discovery-card {
  position: relative;
  grid-column: span 4;
  min-height: 22rem;
  overflow: hidden;
  background: #242423;
  color: var(--color-ink);
}

.discovery-card--feature {
  grid-column: span 7;
  grid-row: span 2;
  min-height: 46rem;
}

.discovery-card--supporting {
  grid-column: span 5;
  min-height: 22rem;
}

.discovery-grid--fleet .discovery-card {
  grid-column: span 6;
  min-height: 0;
  background: var(--color-surface-raised);
}

.discovery-grid--fleet .discovery-card__primary-link--stretched {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-rows: 18rem 1fr;
  min-height: 100%;
}

.discovery-grid--fleet .discovery-card__media {
  position: relative;
  inset: auto;
  height: 18rem;
}

.discovery-grid--fleet .discovery-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.discovery-grid--fleet .discovery-card__scrim {
  display: none;
}

.discovery-grid--fleet .discovery-card__body {
  position: relative;
  inset: auto;
  align-self: stretch;
  background: var(--color-surface-raised);
}

.discovery-card__primary-link--stretched {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: inherit;
  text-decoration: none;
}

.discovery-card__media,
.discovery-card__scrim {
  position: absolute;
  inset: 0;
  margin: 0;
}

.discovery-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--motion-ease-standard);
}

.discovery-grid--fleet .discovery-card {
  background:
    radial-gradient(circle at 50% 28%, rgba(184, 148, 88, 0.12), transparent 42%),
    var(--color-surface-raised);
}

.discovery-grid--fleet .discovery-card__image {
  box-sizing: border-box;
  padding: 0;
  object-fit: cover;
  object-position: center;
}

.discovery-card:hover .discovery-card__image {
  transform: scale(1.03);
}

.discovery-card__scrim {
  z-index: 1;
  background: var(--media-overlay-scrim, none);
}

.discovery-card--no-media .discovery-card__scrim {
  background:
    radial-gradient(circle at 85% 10%, rgba(184, 148, 88, 0.2), transparent 36%),
    linear-gradient(145deg, #262726, #151617);
}

.discovery-card__body {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  inset-block-end: 0;
  padding: clamp(28px, 3vw, 44px);
  pointer-events: none;
}

.discovery-card__title {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(1.75rem, 2.7vw, 2.75rem);
}

.discovery-card__primary-link {
  color: var(--color-ink);
  text-decoration: none;
  pointer-events: auto;
}

/* Paper sections make ordinary links dark. Discovery links sit over photographic scrims, so
   their foreground must retain the card's light-on-dark palette instead. */
.discovery-hub a.discovery-card__primary-link {
  color: var(--color-ink);
}

.discovery-card__description {
  max-width: 34rem;
  margin-block-start: 16px;
  color: var(--color-ink-muted) !important;
}

.discovery-card__capacity {
  margin-block-end: 12px;
  color: var(--color-accent) !important;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.discovery-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-block-start: 20px;
}

.discovery-card__facts div {
  display: grid;
  gap: 3px;
}

.discovery-card__facts dt {
  color: var(--color-ink-muted) !important;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.discovery-card__facts dd {
  color: var(--color-ink) !important;
  font-size: 0.875rem;
}

.discovery-card__arrow {
  display: block;
  margin-block-start: 20px;
  color: var(--color-accent);
}

.discovery-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-block-start: 20px;
  pointer-events: auto;
}

.discovery-card__links a {
  color: var(--color-ink) !important;
  font-size: 0.8125rem;
  text-underline-offset: 0.3em;
}

/* Editorial image sequences. */
.media-gallery {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(5rem, 7vw);
  gap: var(--grid-gap);
}

.media-item {
  position: relative;
  grid-column: span 4;
  grid-row: span 4;
  aspect-ratio: auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--color-surface);
}

.media-item:first-child {
  grid-column: span 7;
  grid-row: span 6;
}

.media-item:nth-child(2) {
  grid-column: span 5;
  grid-row: 2 / span 5;
}

.media-item__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.media-item .media-item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-focal-point, center);
}

.media-item__picture[data-focal-point="50% 50%"] {
  --media-focal-point: 50% 50%;
}

.media-item__picture[data-focal-point="50% 44%"] {
  --media-focal-point: 50% 44%;
}

.media-item__picture[data-focal-point="62% 50%"] {
  --media-focal-point: 62% 50%;
}

.media-item__picture[data-focal-point="66% 50%"] {
  --media-focal-point: 66% 50%;
}

.media-item__picture[data-focal-point-mobile="50% 40%"] {
  --media-focal-point-mobile: 50% 40%;
}

.media-item__picture[data-focal-point-mobile="50% 50%"] {
  --media-focal-point-mobile: 50% 50%;
}

.media-item__picture[data-focal-point-mobile="58% 50%"] {
  --media-focal-point-mobile: 58% 50%;
}

.media-item__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: clamp(24px, 3vw, 40px);
  background: var(--media-overlay-caption-scrim, var(--media-overlay-scrim, none));
  color: var(--media-overlay-foreground);
}

.media-item__title {
  margin: 0;
}

.media-item__text {
  margin-block-start: 10px;
  color: var(--media-overlay-muted);
}

.media-item__link {
  display: inline-flex;
  margin-block-start: 16px;
  color: var(--color-ink) !important;
}

/* Honour `[hidden]` globally — some controls (the analytics opt-out switch) ship hidden and are
   revealed by script only when they can work. */
[hidden] {
  display: none !important;
}

/* pages/quote.njk renders the reservation widget as the hero's `.hero__panel`, so the quote hero
   is the page: it grows to whatever the booking panel needs instead of holding the fixed utility
   height, and the photograph becomes a band behind the copy rather than a backdrop stretched over
   the whole panel. Stacked by default; the two-column split is a desktop-only rule below. */
.page-quote .hero,
.page-quote .hero--utility {
  --quote-hero-media: clamp(420px, 56svh, 620px);
  height: auto;
  min-height: 0;
  max-height: none;
}

.page-quote .hero .hero__media,
.page-quote .hero::after {
  inset-block-end: auto;
  height: var(--quote-hero-media);
}

.page-quote .hero .hero__media {
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}

.page-quote .hero__inner {
  align-items: start;
  padding-block: calc(var(--header-height) + 28px) clamp(56px, 6vw, 88px);
}

.page-quote .hero__content {
  align-self: start;
}

/* The panel holds a paper-coloured card inside a `media-overlay` section, which sets a type
   shadow on everything it contains. Text on cream needs it off. */
.hero__panel {
  grid-column: 1 / -1;
  align-self: start;
  margin-block-start: 32px;
  text-shadow: none;
}

/* The widget host is a paper card inside a `color-scheme: dark` hero, so the global `a` colour --
   ink, which is light -- would sit on this background unreadably. Links on this card take the
   paper ink instead, as the paper sections do. */
.reservation-widget {
  --link-color: var(--color-paper-ink);

  padding: clamp(28px, 2.4vw, 40px);
  background: #fffdf7;
  color: var(--color-paper-ink);
  box-shadow: 0 28px 60px rgba(6, 7, 8, 0.38);
  color-scheme: light;
}

/* The ORES loader swaps the anchor for a cross-origin iframe and iframeResizer grows it; width
   and a floor under the initial height are ours to give. */
.reservation-widget iframe {
  width: 100%;
  min-height: 420px;
  border: 0;
}

/* The "Online Reservations" panel that replaced the embedded quote form on service, vehicle,
   place, and article pages — the same paper card the form drew. */
.reservation-cta {
  padding: clamp(28px, 4vw, 48px);
  background: #fffdf7;
  color: var(--color-paper-ink);
  color-scheme: light;
}

/* Desktop only: copy left, reservation panel right. The 8- and 4-column grids below 80rem cannot
   hold a two-column panel beside a heading, so those breakpoints keep the stacked default. */
@media (min-width: 80rem) {
  .page-quote .hero__content {
    grid-column: 1 / span 5;
    max-width: none;
  }

  /* No character caps here: the copy already holds five of the twelve columns, and a `ch` cap
     inside that span wrapped the lede at two thirds of the width it had been given. */
  .page-quote .hero__heading {
    max-width: none;
    font-size: clamp(3rem, 3.2vw, 3.5rem);
  }

  .page-quote .hero__lede {
    max-width: none;
  }

  .hero__panel {
    grid-column: 7 / -1;
    margin-block-start: 0;
  }
}

.fallback-channels {
  background: var(--color-paper);
  color: var(--color-paper-ink);
}

.fallback-channels .cta--secondary {
  color: var(--color-paper-ink);
  border-color: rgba(21, 22, 23, 0.24);
}

.home-section-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-block-start: 22px;
  color: var(--color-ink);
  font-weight: var(--type-weight-semibold, 600);
  text-underline-offset: 0.35em;
  text-decoration-color: var(--color-accent);
}

.home-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.proof-rail > .section-shell > .proof-rail__item {
  grid-column: span 3;
}

.proof-rail__content .proof-rail__label {
  margin-block: 10px 0;
}

/* Tablet compositions: the shared shell becomes a real eight-column grid. */
@media (min-width: 48rem) and (max-width: 79.9375rem) {
  .site-header__inner {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .brand-cluster {
    grid-column: 1 / span 2;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .brand {
    grid-column: auto;
    width: 112px;
    height: 48px;
  }

  .market-switcher {
    max-width: 100%;
    min-height: 32px;
  }

  .primary-nav {
    grid-column: 3 / span 4;
  }

  .primary-nav__list {
    gap: 12px;
  }

  .primary-nav__list a {
    font-size: 0.9375rem;
  }

  .header-actions {
    grid-column: 7 / -1;
  }

  .header-actions .cta {
    padding-inline: 14px;
    font-size: 0.9375rem;
  }

  .hero__content {
    grid-column: 1 / span 5;
  }

  .hero--center .hero__content {
    grid-column: 2 / span 6;
  }

  .hero__heading {
    font-size: clamp(4rem, 8vw, 4.5rem);
  }

  .editorial-intro__heading,
  .editorial-section > .section-shell > .editorial-intro,
  .discovery-hub__intro,
  .home-services__head,
  .home-fleet__head,
  .home-story__head,
  .home-cities__head,
  .detail-showcase__head,
  .detail-process__head,
  .detail-media__head,
  .detail-links__head,
  .detail-specs__head,
  .fleet-showcase__head,
  .context-links__heading,
  .place-story__heading {
    grid-column: 1 / span 5;
  }

  .editorial-intro__copy,
  .place-story__copy,
  .place-story__facts {
    grid-column: 5 / -1;
  }

  .faq__heading {
    grid-column: 1 / span 4;
  }

  .faq-list {
    grid-column: 5 / -1;
  }

  .fleet-showcase__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .context-links__list,
  .link-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-rail__item,
  .home-proof__item,
  .proof-rail > .section-shell > .proof-rail__item {
    grid-column: span 2;
  }

  .home-editorial__copy {
    grid-column: 1 / span 4;
  }

  .home-editorial__media {
    grid-column: 5 / -1;
    min-height: 30rem;
  }

  .home-service-grid,
  .home-story__media,
  .detail-media__grid,
  .discovery-grid,
  .media-gallery {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .home-service-card {
    grid-column: span 4;
  }

  .home-service-card--feature {
    grid-column: span 5;
  }

  .home-service-card--compact:nth-child(2),
  .home-service-card--compact:nth-child(3) {
    grid-column: span 3;
  }

  .home-fleet__cards,
  .city-directory,
  .home-city-grid,
  .feature-grid,
  .contact-paths {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-story__frame--1 {
    grid-column: 1 / span 5;
  }

  .home-story__frame--2 {
    grid-column: 6 / span 3;
  }

  .home-story__frame--3 {
    grid-column: 2 / span 4;
  }

  .home-closing-cta__copy,
  .prefooter-cta__heading {
    grid-column: 1 / span 5;
  }

  .home-closing-cta__action,
  .prefooter-cta__inner > .cta {
    grid-column: 6 / -1;
  }

  .detail-card-grid,
  .detail-links__list,
  .detail-specs__grid,
  .coverage-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-story__media,
  .coverage-story__media {
    grid-column: 1 / span 5;
  }

  .detail-story__copy,
  .coverage-story__content {
    grid-column: 6 / -1;
  }

  .contact-feature__media {
    grid-column: 1 / span 5;
  }

  .contact-feature__copy {
    grid-column: 6 / -1;
  }

  .detail-story__inner--text .detail-story__copy,
  .coverage-story--text-only .coverage-story__content {
    grid-column: 1 / span 4;
  }

  .coverage-story--text-only .coverage-facts {
    grid-column: 5 / -1;
  }

  .detail-media__item {
    grid-column: span 3;
  }

  .detail-media__item--feature {
    grid-column: span 5;
  }

  .detail-quote__copy {
    grid-column: 1 / span 4;
  }

  .detail-quote__form,
  .quote-entry .reservation-cta {
    grid-column: 5 / -1;
  }

  .policy-toc {
    grid-column: 1 / span 2;
  }

  .policy-document {
    grid-column: 3 / -1;
  }

  .prefooter-cta__copy {
    grid-column: 1 / span 5;
  }

  .discovery-card {
    grid-column: span 4;
  }

  .discovery-card--feature {
    grid-column: span 5;
  }

  .discovery-card--supporting {
    grid-column: span 3;
  }

  .discovery-grid--fleet .discovery-card {
    grid-column: span 4;
  }

  .locations-showcase__card {
    width: 100%;
    max-width: 40rem;
    justify-self: center;
  }

  .media-item:first-child {
    grid-column: span 5;
  }

  .media-item:nth-child(2) {
    grid-column: span 3;
  }

  .media-item {
    grid-column: span 4;
  }

  .site-footer__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .footer-region:nth-child(1) {
    grid-column: 1 / span 4;
  }

  .footer-region:nth-child(2) {
    grid-column: 5 / span 2;
  }

  .footer-region:nth-child(3) {
    grid-column: 1 / span 4;
  }

  .footer-region:nth-child(4) {
    grid-column: 5 / span 3;
  }
}

/* Mobile compositions: a deliberate four-column system, never collapsed desktop tracks. */
@media (max-width: 47.9375rem) {
  .section-shell
    > :where(
      .editorial-intro,
      .editorial-intro__heading,
      .editorial-intro__copy,
      .faq__heading,
      .faq-list,
      .fleet-showcase__head,
      .fleet-showcase__grid,
      .context-links__heading,
      .context-links__list,
      .place-story__heading,
      .place-story__copy,
      .place-story__facts,
      .home-editorial__copy,
      .home-editorial__media,
      .home-services__head,
      .home-service-grid,
      .home-fleet__head,
      .home-fleet__cards,
      .home-story__head,
      .home-story__media,
      .home-cities__head,
      .home-city-grid,
      .home-closing-cta__copy,
      .home-closing-cta__action,
      .detail-intro__copy,
      .detail-showcase__head,
      .detail-card-grid,
      .detail-story__media,
      .detail-story__copy,
      .detail-process__head,
      .detail-process__grid,
      .detail-media__head,
      .detail-media__grid,
      .detail-links__head,
      .detail-links__list,
      .detail-specs__head,
      .detail-specs__grid,
      .detail-quote__copy,
      .detail-quote__form,
      .city-directory,
      .feature-grid,
      .contact-paths,
      .coverage-story__media,
      .coverage-story__content,
      .coverage-facts,
      .link-cards,
      .policy-toc,
      .policy-document,
      .prefooter-cta__heading,
      .prefooter-cta__copy,
      .prefooter-cta__inner > .cta,
      .reservation-cta,
      .discovery-hub__intro,
      .discovery-grid,
      .media-gallery
    ) {
    grid-column: 1 / -1;
  }

  .coverage-story--text-only .coverage-story__content,
  .coverage-story--text-only .coverage-facts,
  .detail-story__inner--text .detail-story__copy {
    grid-column: 1 / -1;
  }

  .hero:not(.hero--utility) {
    min-height: clamp(720px, 92svh, 980px);
  }

  .editorial-intro__heading + .editorial-intro__copy,
  .editorial-intro > .editorial-intro__copy {
    margin-block-start: 20px;
  }

  .faq__heading,
  .policy-toc {
    position: static;
  }

  .faq-list {
    margin-block-start: 36px;
  }

  .fleet-showcase__grid,
  .context-links__list,
  .home-fleet__cards,
  .home-city-grid,
  .detail-card-grid,
  .detail-links__list,
  .detail-process__grid,
  .detail-specs__grid,
  .city-directory,
  .feature-grid,
  .contact-paths,
  .coverage-facts,
  .link-cards {
    grid-template-columns: 1fr;
  }

  .detail-links__list > li:nth-child(3):last-child .detail-card {
    display: flex;
    height: auto;
    min-height: 22rem;
  }

  .detail-links__list > li:nth-child(3):last-child .detail-card__media {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .fact-rail__heading,
  .fact-rail__list {
    grid-column: 1 / -1 !important;
  }

  .fact-rail__list,
  .proof-rail__list {
    grid-template-columns: 1fr;
  }

  .fact-rail__item,
  .proof-rail__item,
  .detail-rail__item,
  .home-proof__item,
  .proof-rail > .section-shell > .proof-rail__item {
    grid-column: 1 / -1;
    padding: 20px 16px;
    border-block-start: 1px solid rgba(243, 239, 231, 0.14);
    border-inline-start: 0;
    overflow-wrap: anywhere;
  }

  .fact-rail__item,
  .proof-rail__item,
  .detail-rail__item,
  .home-proof__item {
    padding-inline-start: 0;
    padding-inline-end: 0;
    border-inline-start: 0;
  }

  .home-editorial__media,
  .detail-story__media,
  .coverage-story__media {
    min-height: 26rem;
    margin-block-start: 36px;
  }

  .home-service-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .home-service-card,
  .home-service-card--feature,
  .home-service-card--compact:nth-child(2),
  .home-service-card--compact:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
    min-height: 22rem;
  }

  .home-service-card--feature {
    min-height: 32rem;
  }

  .home-fleet-card {
    min-height: 30rem;
  }

  .home-story__media {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 22vw;
  }

  .home-story__frame--1 {
    grid-column: 1 / -1;
    grid-row: span 5;
  }

  .home-story__frame--2 {
    grid-column: 2 / -1;
    grid-row: span 4;
  }

  .home-story__frame--3 {
    grid-column: 1 / span 3;
    grid-row: span 4;
  }

  .home-city-card {
    min-height: 28rem;
  }

  .home-closing-cta__action,
  .prefooter-cta__inner > .cta {
    margin-block-start: 28px;
    justify-self: stretch;
  }

  .detail-card-grid,
  .detail-process__grid,
  .detail-media__grid,
  .detail-links__list,
  .detail-specs__grid {
    margin-block-start: 36px;
  }

  .detail-story__copy,
  .coverage-story__content {
    margin-block-start: 32px;
  }

  .detail-media__grid,
  .media-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 24vw;
  }

  .detail-media__item,
  .detail-media__item--feature,
  .media-item,
  .media-item:first-child,
  .media-item:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: span 4;
  }

  .detail-media__item--feature,
  .media-item:first-child {
    grid-row: span 5;
  }

  .media-item .media-item__image {
    object-position: var(--media-focal-point-mobile, var(--media-focal-point, center));
  }

  .policy-toc {
    margin-block-end: 48px;
    padding: 20px;
    background: var(--color-paper-deep);
  }

  .policy-meta,
  .policy-meta div {
    grid-template-columns: 1fr;
  }

  .policy-document__section + .policy-document__section {
    margin-block-start: 64px;
  }

  .prefooter-cta__inner > .section-kicker {
    grid-column: 1 / -1;
  }

  .discovery-grid {
    grid-template-columns: 1fr;
  }

  .discovery-card,
  .discovery-card--feature,
  .discovery-card--supporting,
  .discovery-grid--fleet .discovery-card {
    grid-column: 1;
    grid-row: auto;
    min-height: 30rem;
  }

  .discovery-card--compact {
    min-height: 23rem;
  }

  .page-quote .hero,
  .page-quote .hero--utility {
    --quote-hero-media: clamp(300px, 64vw, 380px);
  }

  .hero__panel {
    margin-block-start: 24px;
  }

  .reservation-widget {
    padding: 24px 20px;
  }

  .quote-entry .reservation-cta {
    margin-block-start: 32px;
  }

  .error-page__action {
    margin-block-start: -96px;
  }

  .error-page__action .cta {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------------------------
   23. Automatic city-pack media compositions.

   Page builders choose the photography; every page family shares this stable editorial grid.
   The first image is the visual anchor, with two smaller registers for a human moment, fleet
   scale, material detail, or a theme texture. No page-specific CSS or manual placement.
------------------------------------------------------------------------------------ */
.media-composition {
  position: relative;
  padding-block: clamp(104px, 10vw, 160px);
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(184, 148, 88, 0.09), transparent 30%),
    var(--color-ground);
}

.media-composition__inner {
  position: relative;
}

.media-composition__head {
  grid-column: 1 / span 6;
  max-width: 48rem;
  margin-block-end: clamp(44px, 5vw, 72px);
}

.media-composition__head h2 {
  max-width: 15ch;
  margin-block-start: 14px;
  font-size: clamp(3rem, 4.6vw, 4.75rem);
  line-height: 0.98;
}

.media-composition__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(15rem, 19vw, 20rem);
  gap: var(--grid-gap);
}

.media-composition__item {
  position: relative;
  grid-column: 9 / -1;
  margin: 0;
  overflow: hidden;
  background: var(--color-surface-raised);
}

.media-composition__item--lead {
  grid-column: 1 / span 8;
  grid-row: span 2;
}

.media-composition__item picture {
  display: block;
  width: 100%;
  height: 100%;
}

.media-composition__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--motion-ease-standard);
}

.media-composition__item:hover .media-composition__image {
  transform: scale(1.025);
}

.media-composition__item--detail .media-composition__image,
.media-composition__item--texture .media-composition__image {
  object-position: center;
}

.media-composition__item--texture::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(184, 148, 88, 0.24);
  pointer-events: none;
}

@media (max-width: 79.9375rem) {
  .media-composition__head {
    grid-column: 1 / span 7;
  }

  .media-composition__item {
    grid-column: 8 / -1;
  }

  .media-composition__item--lead {
    grid-column: 1 / span 7;
  }
}

@media (max-width: 47.9375rem) {
  .media-composition {
    padding-block: 80px;
  }

  .media-composition__head {
    grid-column: 1 / -1;
    margin-block-end: 36px;
  }

  .media-composition__head h2 {
    font-size: clamp(2.65rem, 12vw, 4rem);
  }

  .media-composition__grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }

  .media-composition__item,
  .media-composition__item--lead {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 1 / 1;
  }

  .media-composition__item--lead {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 5;
  }

  .home-fleet-card__media img {
    padding: 28px 18px 8rem;
  }

  .discovery-grid--fleet .discovery-card {
    min-height: 0;
  }

  .discovery-grid--fleet .discovery-card__primary-link--stretched {
    grid-template-rows: 14rem 1fr;
  }

  .discovery-grid--fleet .discovery-card__media {
    height: 14rem;
  }

  .discovery-grid--fleet .discovery-card__image {
    padding: 0;
  }
}

/* ---------------------------------------------------------------------------------
   24. Crop-aware hero presentation.

   Commercial heroes are intentionally always cover-cropped: their type is composed over the
   photograph and the authored desktop/mobile focal points protect the subject. Utility heroes
   may instead request a contained, framed plate. Keeping the framed treatment utility-only
   preserves the full-cover commercial contract while giving diagrams, square plates, and portrait
   utility artwork a deliberate no-crop presentation.
------------------------------------------------------------------------------------ */
.hero__media-image {
  object-fit: var(--hero-object-fit, cover);
}

.hero--commercial .hero__media-image {
  object-fit: cover;
}

@media (min-width: 48rem) {
  .hero--utility.hero--media-framed {
    --hero-frame-edge: max(var(--page-gutter), calc((100vw - 90rem) / 2));
    --hero-frame-top: calc(var(--header-height) + clamp(20px, 2.5vw, 36px));
    --hero-frame-bottom: clamp(24px, 3vw, 40px);
    background:
      radial-gradient(circle at 80% 45%, rgba(184, 148, 88, 0.12), transparent 32%),
      var(--color-ground);
  }

  .hero.media-overlay--desktop-disabled::after {
    background: none;
  }

  .hero.media-overlay--desktop-disabled {
    --media-overlay-foreground: var(--color-ink);
    --media-overlay-muted: var(--color-ink-muted);
    --media-overlay-type-shadow: none;
    color: var(--color-ink);
    text-shadow: none;
  }

  .hero--utility.hero--media-framed .hero__media,
  .hero--utility.hero--media-framed .hero__media-panel,
  .hero--utility.hero--media-framed .hero__media-panel:has(.hero__media-image) {
    inset: var(--hero-frame-top) var(--hero-frame-edge) var(--hero-frame-bottom) auto;
    width: min(42vw, 36rem);
    height: auto;
    padding: clamp(10px, 1.25vw, 18px);
    border: 1px solid color-mix(in srgb, var(--color-accent) 38%, transparent);
    background: color-mix(in srgb, var(--color-surface-raised) 92%, var(--color-accent));
    box-shadow:
      0 28px 72px rgba(0, 0, 0, 0.34),
      inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  }

  .hero--utility.hero--media-framed .hero__media-image {
    object-fit: var(--hero-object-fit, contain);
    background: var(--color-ground);
  }

  .hero--utility.hero--media-framed .hero__content {
    grid-column: 1 / span 5;
  }
}

@media (max-width: 47.9375rem) {
  .hero__media-image {
    object-fit: var(--hero-object-fit-mobile, var(--hero-object-fit, cover));
  }

  .contact-feature__media,
  .contact-feature__copy {
    grid-column: 1 / -1;
  }

  .contact-feature__media {
    min-height: 27rem;
  }

  .contact-feature__copy {
    max-width: none;
  }

  .hero--commercial .hero__media-image {
    object-fit: cover;
  }

  .hero--utility.hero--media-mobile-framed {
    --hero-mobile-frame-height: clamp(8.75rem, 24svh, 10.5rem);
    height: 520px;
    min-height: 520px;
    background:
      radial-gradient(circle at 50% 24%, rgba(184, 148, 88, 0.12), transparent 42%),
      var(--color-ground);
  }

  .hero--utility.hero--media-mobile-framed .hero__media,
  .hero--utility.hero--media-mobile-framed .hero__media-panel,
  .hero--utility.hero--media-mobile-framed .hero__media-panel:has(.hero__media-image) {
    inset: calc(var(--header-height) + 12px) var(--page-gutter) auto;
    width: auto;
    height: var(--hero-mobile-frame-height);
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--color-accent) 34%, transparent);
    background: var(--color-surface-raised);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
  }

  .hero--utility.hero--media-mobile-framed .hero__media-image {
    object-fit: var(--hero-object-fit-mobile, var(--hero-object-fit, contain));
    background: var(--color-ground);
  }

  .hero--utility.hero--media-mobile-framed .hero__inner {
    padding-block: calc(var(--header-height) + var(--hero-mobile-frame-height) + 32px) 28px;
  }

  .hero--utility.hero--media-mobile-framed .hero__heading {
    font-size: clamp(2.5rem, 11vw, 3rem);
  }
}

/* Authored homepage prose keeps the established editorial measure and gains a reliable cadence
   when a module carries more than one paragraph. */
.home-editorial__body,
.home-fleet__intro,
.home-story__copy,
.home-closing-cta__intro {
  max-width: 42rem;
}

.home-editorial__body > * + *,
.home-fleet__intro > * + *,
.home-story__copy > * + *,
.home-closing-cta__intro > * + * {
  margin-block-start: 18px;
}

/* Apply the centralized over-media type treatment after all component color rules. Keeping this
   consumer list explicit makes the contract auditable: a new text-over-photo component must join
   both this list and the rendered-output gate instead of inheriting an accidental shadow. */
:is(
  .hero.media-overlay .hero__lede,
  .hero.media-overlay .hero__proof,
  .home-service-card--image .home-service-card__body,
  .home-fleet-card--image .home-fleet-card__facts,
  .home-city-card--image .home-city-card__body,
  .link-card:has(.link-card__media) .link-card__description,
  .discovery-card--with-media .discovery-card__description,
  .discovery-card--with-media .discovery-card__facts dt,
  .media-item--with-caption .media-item__text
) {
  color: var(--media-overlay-muted) !important;
  opacity: 1;
}

:is(
  .hero.media-overlay .hero__heading,
  .hero.media-overlay .hero__eyebrow,
  .hero.media-overlay .hero__secondary-action,
  .home-service-card--image .home-service-card__title,
  .home-fleet-card--image .home-fleet-card__title,
  .home-city-card--image .home-city-card__title,
  .link-card:has(.link-card__media) .link-card__title,
  .discovery-card--with-media .discovery-card__primary-link,
  .discovery-card--with-media .discovery-card__facts dd,
  .discovery-card--with-media .discovery-card__links a,
  .media-item--with-caption .media-item__eyebrow,
  .media-item--with-caption .media-item__title,
  .media-item--with-caption .media-item__link
) {
  color: var(--media-overlay-foreground) !important;
}

/* Solid controls already create their own contrast field and should retain crisp, shadow-free
   labels even when they sit inside an over-media content container. */
:is(
    .hero.media-overlay,
    .home-service-card--image,
    .home-fleet-card--image,
    .home-city-card--image,
    .link-card:has(.link-card__media),
    .discovery-card--with-media,
    .media-item--with-caption
  )
  :is(.cta, button, input, select, textarea) {
  text-shadow: none;
}

/* Responsive card imagery uses the same finite, CSP-safe focal vocabulary as heroes and media
   galleries. This layer changes crop position only: every owning card/detail component retains
   its existing dimensions, overflow, and object-fit contract. */
.responsive-card-image > img {
  object-position: var(--responsive-card-focal-point, center);
}

.responsive-card-image[data-focal-point="50% 50%"] {
  --responsive-card-focal-point: 50% 50%;
}

.responsive-card-image[data-focal-point="50% 44%"] {
  --responsive-card-focal-point: 50% 44%;
}

.responsive-card-image[data-focal-point="55% 68%"] {
  --responsive-card-focal-point: 55% 68%;
}

.responsive-card-image[data-focal-point="58% 50%"] {
  --responsive-card-focal-point: 58% 50%;
}

.responsive-card-image[data-focal-point="62% 50%"] {
  --responsive-card-focal-point: 62% 50%;
}

.responsive-card-image[data-focal-point="62% 54%"] {
  --responsive-card-focal-point: 62% 54%;
}

.responsive-card-image[data-focal-point="66% 50%"] {
  --responsive-card-focal-point: 66% 50%;
}

.responsive-card-image[data-focal-point-mobile="50% 40%"] {
  --responsive-card-focal-point-mobile: 50% 40%;
}

.responsive-card-image[data-focal-point-mobile="50% 50%"] {
  --responsive-card-focal-point-mobile: 50% 50%;
}

.responsive-card-image[data-focal-point-mobile="56% 55%"] {
  --responsive-card-focal-point-mobile: 56% 55%;
}

.responsive-card-image[data-focal-point-mobile="58% 50%"] {
  --responsive-card-focal-point-mobile: 58% 50%;
}

.responsive-card-image[data-focal-point-mobile="68% 50%"] {
  --responsive-card-focal-point-mobile: 68% 50%;
}

.responsive-card-image[data-focal-point-mobile="70% 52%"] {
  --responsive-card-focal-point-mobile: 70% 52%;
}

.responsive-card-image[data-focal-point-mobile="72% 55%"] {
  --responsive-card-focal-point-mobile: 72% 55%;
}

@media (max-width: 47.9375rem) {
  .responsive-card-image > img {
    object-position: var(
      --responsive-card-focal-point-mobile,
      var(--responsive-card-focal-point, center)
    );
  }
}

/* Three contextual destinations form a deliberate city-home triptych. The unmodified
   `.home-city-grid` remains the two-column apex city directory. */
.home-city-grid--contextual {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 48rem) and (max-width: 79.9375rem) {
  .home-city-grid--contextual {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-city-grid--contextual > :nth-child(3):last-child {
    grid-column: 1 / -1;
    min-height: 24rem;
  }

  /* Keep the feature card on the full grid while respecting the truthful 1280px source at
     tablet DPR 2. The photograph is deliberately anchored to the trailing edge; the exposed
     near-black field becomes compositional space for the over-photo copy instead of narrowing
     the whole card and breaking the 2 + 1 editorial rhythm. */
  .home-city-grid--contextual > :nth-child(3):last-child .home-city-card__media {
    inset-inline: auto 0;
    width: 100%;
    max-width: 40rem;
  }
}

@media (max-width: 47.9375rem) {
  .home-city-grid--contextual {
    grid-template-columns: 1fr;
  }

  .home-city-grid--contextual > :nth-child(3):last-child {
    grid-column: 1;
  }
}

/* Desktop width contract.

   Reported defect: at desktop several sections set a column of type beside empty ground — the
   section head held six of the shell's twelve columns, or a `ch`/`rem` cap held a block well
   inside the cell it had already been given, so a nine-paragraph narrative ran down the left half
   of the page. The answer is layout width, not type size: a text block uses the width its layout
   gives it, and the layout uses the page. Prose with more than one paragraph flows in two columns,
   which keeps the editorial measure while filling the section.

   Desktop only, on purpose. The tablet (48–80rem) and mobile (<48rem) compositions above run their
   own column systems and are left exactly as they were. */
@media (min-width: 80rem) {
  /* Section heads and intros take the whole shell. */
  .home-services__head,
  .home-fleet__head,
  .home-story__head,
  .home-cities__head,
  .detail-intro__copy,
  .detail-showcase__head,
  .detail-process__head,
  .detail-media__head,
  .detail-links__head,
  .detail-specs__head,
  .media-composition__head,
  .editorial-section > .section-shell > .editorial-intro,
  .discovery-hub__intro {
    grid-column: 1 / -1;
  }

  /* An editorial intro that owns the shell reads as heading beside copy — the arrangement
     `.editorial-intro__layout` already uses when the intro is the shell itself. Anything that is
     neither heading nor copy (kicker, button cluster) keeps the full row. The prefooter call to
     action keeps its own eight-column block. */
  .editorial-section:not(.prefooter-cta) > .section-shell > .editorial-intro,
  .discovery-hub__intro {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: clamp(16px, 1.5vw, 24px);
    align-items: start;
  }

  :is(
      .editorial-section:not(.prefooter-cta) > .section-shell > .editorial-intro,
      .discovery-hub__intro
    )
    > :not(.editorial-intro__heading, .editorial-intro__copy) {
    grid-column: 1 / -1;
  }

  :is(
      .editorial-section:not(.prefooter-cta) > .section-shell > .editorial-intro,
      .discovery-hub__intro
    )
    > .editorial-intro__copy {
    grid-column: 7 / -1;
  }

  /* An intro that is only a heading has nothing to sit beside, so it takes the row rather than
     wrapping inside five columns. */
  :is(
      .editorial-section:not(.prefooter-cta) > .section-shell > .editorial-intro,
      .discovery-hub__intro
    ):not(:has(> .editorial-intro__copy))
    > .editorial-intro__heading {
    grid-column: 1 / -1;
  }

  /* Caps that held a block inside the cell it had already been given. */
  .media-composition__head,
  .media-composition__head h2,
  .home-editorial__body,
  .home-fleet__intro,
  .home-story__copy,
  .detail-intro__body,
  .editorial-intro__copy,
  .faq-item__answer,
  .discovery-card__title,
  .contact-feature__copy {
    max-width: none;
  }

  /* More than one paragraph reads as two columns of about the measure the single column had.
     A single paragraph is left alone: `columns` resolves to one column whenever the container
     cannot hold two of `column-width`. */
  :is(.home-story__copy, .home-fleet__intro, .detail-intro__body):has(> p + p) {
    columns: 32rem 2;
    column-gap: var(--grid-gap);
  }

  :is(.home-story__copy, .home-fleet__intro, .detail-intro__body) > * {
    break-inside: avoid;
  }

  /* Fact rails share the row instead of leaving the trailing columns empty when a vehicle or
     service publishes fewer facts than the grid has tracks. The shell keeps its twelve tracks --
     the geometry suite holds every section shell to them -- and one, two or three items divide
     them. Four or more keep the base three-column span. */
  :is(.detail-rail__item, .home-proof__item):only-child {
    grid-column: 1 / -1;
  }

  :is(.detail-rail__item, .home-proof__item):first-child:nth-last-child(2),
  :is(.detail-rail__item, .home-proof__item):first-child:nth-last-child(2) ~ * {
    grid-column: span 6;
  }

  :is(.detail-rail__item, .home-proof__item):first-child:nth-last-child(3),
  :is(.detail-rail__item, .home-proof__item):first-child:nth-last-child(3) ~ * {
    grid-column: span 4;
  }

  /* Fact values are sentences, not figures. The row holds as many tracks as leave a sentence a
     readable line, and the value is set a step down from the figure size it shares the row with. */
  .coverage-facts {
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  }

  .coverage-facts__item dd,
  .detail-specs__item--amenities dd {
    font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  }

  .detail-specs__item--amenities {
    grid-column: 1 / -1;
  }

  /* Copy set beside a photograph splits the shell evenly with it, instead of taking four columns
     next to a seven-column picture. */
  .detail-story__media,
  .coverage-story__media {
    grid-column: 1 / span 6;
  }

  .detail-story__copy,
  .coverage-story__content {
    grid-column: 7 / -1;
  }

  .contact-feature__copy {
    grid-column: 8 / -1;
  }
}

/* Tablet width contract (48–80rem).

   The same defect the desktop contract answers, one column system down: a section head held five
   of the tablet shell's eight columns, so its prose ran at 62% of the page with empty ground
   beside it, and a character cap held the media-composition heading to 37% on three lines. Heads
   and intros take the whole row. A single column is the right reading at this width, so the
   measure becomes one that still fills the row it was given — never under 85 characters, never
   under four fifths of the shell. The shell keeps its eight tracks: only what the children span
   changes. */
@media (min-width: 48rem) and (max-width: 79.9375rem) {
  .home-services__head,
  .home-fleet__head,
  .home-story__head,
  .home-cities__head,
  .detail-intro__copy,
  .detail-showcase__head,
  .detail-process__head,
  .detail-media__head,
  .detail-links__head,
  .detail-specs__head,
  .fleet-showcase__head,
  .context-links__heading,
  .editorial-section:not(.prefooter-cta) > .section-shell > .editorial-intro,
  .discovery-hub__intro {
    grid-column: 1 / -1;
  }

  .home-fleet__intro,
  .home-story__copy,
  .detail-intro__body,
  .editorial-intro__copy {
    max-width: max(85ch, 80%);
  }

  .media-composition__head,
  .media-composition__head h2 {
    max-width: none;
  }

  /* Fact rails divide the row in two instead of standing in a quarter of it, and an odd last fact
     takes the row — the arrangement the tablet city triptych already uses. */
  .detail-rail__item,
  .home-proof__item {
    grid-column: span 4;
  }

  :is(.detail-rail__item, .home-proof__item):nth-child(odd):last-child {
    grid-column: 1 / -1;
  }

  /* The cabin list is a list, not a figure: it takes the row and lays out in as many columns as
     the row holds, rather than running down one half of the spec grid. */
  .detail-specs__item--amenities {
    grid-column: 1 / -1;
  }

  /* Copy set beside a photograph splits the row with it, instead of taking three columns of eight
     next to a five-column picture. */
  .detail-story__media,
  .coverage-story__media,
  .contact-feature__media {
    grid-column: 1 / span 4;
  }

  .detail-story__copy,
  .coverage-story__content,
  .contact-feature__copy {
    grid-column: 5 / -1;
  }
}