/* ---- 00-base.css ---- */
/* ==========================================================================
   Capricorn Tours — design system
   Palette: forest green ink / bone / single gold accent. No second accent colour.
   ========================================================================== */

/* --- tokens -------------------------------------------------------------- */
:root {
  /* ink family — sampled from the logo's forest green (#003018).
     Every grey below is tinted with the same hue. */
  --ink-900: #03150c;
  --ink-800: #072616;
  --ink-700: #0d3621;
  --ink-600: #16472e;
  --ink-500: #245e3f;
  --ink-400: #3c6048;

  /* bone family — warm paper, the light surface */
  --bone-100: #fbf9f4;
  --bone-200: #f4f1e8;
  --bone-300: #e9e3d6;
  --bone-400: #d7cdba;

  /* the one accent — the amber of the logo's dotted arc (#d89018 / #f0c054) */
  --gold-600: #855a10;   /* text weight gold: 4.7:1 or better on every bone and gold-100 surface (WCAG AA) */
  --gold-500: #c9922b;
  --gold-400: #e8b955;
  --gold-100: #f6e7c5;

  /* text */
  --fg: var(--ink-800);
  --fg-soft: #3f5249;
  --fg-mute: #6b7d73;
  --on-ink: var(--bone-200);
  --on-ink-soft: #9db5a7;

  /* shadows carry the background hue rather than pure black */
  --sh-sm: 0 1px 2px rgba(3, 21, 12, .06), 0 2px 8px rgba(3, 21, 12, .05);
  --sh-md: 0 4px 12px rgba(3, 21, 12, .08), 0 16px 40px rgba(3, 21, 12, .08);
  --sh-lg: 0 8px 24px rgba(3, 21, 12, .11), 0 32px 80px rgba(3, 21, 12, .13);
  --sh-gold: 0 6px 20px rgba(168, 116, 27, .3);

  /* type */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* radii deliberately vary: tight inside, soft outside */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  /* layout */
  --page: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* z-scale — no magic 9999s anywhere in this file */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-grain: 400;
}

/* --- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bone-200);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
/* Any author `display` rule (.notice, [data-booking] ...) would otherwise beat
   the browser's own [hidden] style and leave "hidden" elements on screen. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
.on-ink :focus-visible, .footer :focus-visible, .actionbar :focus-visible,
.header--over :focus-visible, .hero :focus-visible, .cta-band :focus-visible,
.topbar :focus-visible, .hm-cta :focus-visible { outline-color: var(--gold-400); }

:focus-visible {
  outline: 2px solid var(--ink-700);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- typography ---------------------------------------------------------- */
.display, h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
}

h1, .t-hero  { font-size: clamp(2.6rem, 6vw, 5.25rem); }
h2, .t-xl    { font-size: clamp(2.25rem, 5.2vw, 4.25rem); }
h3, .t-lg    { font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.1; }
.t-md        { font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.25; }


.eyebrow {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold-600);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.on-ink .eyebrow { color: var(--gold-400); }

.lede {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 58ch;
  text-wrap: pretty;
}
.on-ink .lede { color: var(--on-ink-soft); }

p { max-width: 68ch; text-wrap: pretty; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* --- layout -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* bottom padding runs a little longer than top — optically this reads even */
.section { padding-block: clamp(4.5rem, 9vw, 8rem) clamp(5rem, 10vw, 9rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 5.5rem); }

.on-ink { background: var(--ink-800); color: var(--on-ink); }
.on-ink p { color: var(--on-ink-soft); }

.skip {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: var(--z-overlay);
  background: var(--ink-800);
  color: var(--bone-200);
  padding: .75rem 1.25rem;
  border-radius: var(--r-sm);
  transition: top .2s var(--ease);
}
.skip:focus { top: 1rem; }

/* fixed grain overlay — breaks the flatness of large colour fields */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .028;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink-800);
  --btn-fg: var(--bone-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: .9375rem 1.75rem;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s var(--ease),
              box-shadow .25s var(--ease), border-color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: var(--sh-sm); }

.btn--gold { --btn-bg: var(--gold-500); --btn-fg: var(--ink-900); }
.btn--gold:hover { --btn-bg: var(--gold-400); box-shadow: var(--sh-gold); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color: rgba(7, 38, 22, .22);
}
.btn--ghost:hover { --btn-bg: rgba(7, 38, 22, .04); border-color: rgba(7, 38, 22, .4); }

.on-ink .btn--ghost, .hero .btn--ghost, .drawer .btn--ghost {
  --btn-fg: var(--bone-100);
  border-color: rgba(244, 241, 232, .3);
}
.on-ink .btn--ghost:hover, .hero .btn--ghost:hover, .drawer .btn--ghost:hover {
  --btn-bg: rgba(244, 241, 232, .08);
  border-color: rgba(244, 241, 232, .55);
}

.btn--lg { padding: 1.125rem 2.25rem; font-size: 1rem; }

/* the tertiary style — stops every CTA pair being filled + ghost */
.link-arrow {
  display: inline-flex;
  justify-self: start;   /* as a grid item it would otherwise stretch its underline */
  width: fit-content;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--gold-600);
  padding-block: .25rem;
  border-bottom: 1px solid currentColor;
  transition: color .2s var(--ease);
}
/* the arrow moves, the text stays put: transform only, nothing reflows */
.link-arrow svg, .card-veh__more svg { transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { color: var(--ink-700); }
  .link-arrow:hover svg, .card-veh:hover .card-veh__more svg { transform: translateX(.375rem); }
}
.on-ink .link-arrow { color: var(--gold-400); }

/* --- header -------------------------------------------------------------- */
/* topbar + header travel together as one unit, so a floating header can never
   land on top of the phone numbers. */
.sitehead { position: sticky; top: 0; z-index: var(--z-header); }
/* A floating head only stays pinned once site.js is running (--live), because
   only site.js turns it solid on scroll. Without JS it scrolls away with the
   hero instead of hanging, transparent and unreadable, over the whole page. */
.sitehead--over { position: absolute; left: 0; right: 0; }
.sitehead--over.sitehead--live { position: fixed; }

.topbar {
  background: var(--ink-900);
  color: var(--on-ink-soft);
  font-size: .8125rem;
  border-bottom: 1px solid rgba(244, 241, 232, .07);
}
.topbar__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .625rem;
}
.topbar ul { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.topbar a { transition: color .2s var(--ease); }
.topbar a:hover { color: var(--gold-400); }
.topbar b { color: var(--bone-300); font-weight: 600; }
@media (max-width: 860px) { .topbar { display: none; } }

/* over a hero the topbar goes transparent with the rest of the head */
.sitehead--over .topbar { background: transparent; border-bottom-color: rgba(244, 241, 232, .18); }
.sitehead--over .topbar b { color: rgba(244, 241, 232, .9); }
.sitehead--over .topbar { color: rgba(244, 241, 232, .78); }
/* Once scrolled, the numbers collapse away and the header does the work.
   Only while floating: on an in-flow sticky head this would shift the page. */
.sitehead--over.sitehead--stuck .topbar { display: none; }

.header {
  background: rgba(251, 249, 245, .82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(7, 38, 22, .08);
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
/* over a hero image the header floats fully transparent until you scroll */
.header--over {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  color: var(--bone-100);
}
.sitehead--over .header__logo--light { opacity: 0; }
.sitehead--over .header__logo--dark { opacity: 1; }
.sitehead--stuck .header {
  background: rgba(251, 249, 245, .9);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(7, 38, 22, .09);
  box-shadow: 0 1px 24px rgba(3, 21, 12, .07);
  color: var(--fg);
}
.sitehead--stuck .header__logo--light { opacity: 1; }
.sitehead--stuck .header__logo--dark { opacity: 0; }

.header__in {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: .75rem;
}

.header__logo { transition: opacity .3s var(--ease); }
/* Two real files, cross-faded — no filter hack that would flatten the
   logo's green and amber into a single colour. */
.header__brand {
  position: relative;
  display: block;
  flex: none;
  width: 133px;
  height: 42px;
  transform-origin: left center;
  transition: transform .3s var(--ease);
}
.header__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
.header__logo--light { opacity: 1; }
.header__logo--dark { opacity: 0; }
/* condense with a transform: the box keeps its size, so nothing reflows */
.sitehead--stuck .header__brand { transform: scale(.86); }


.nav { display: flex; gap: clamp(.75rem, 2vw, 2rem); margin-left: auto; }
.nav a {
  position: relative;
  font-size: .9375rem;
  font-weight: 500;
  padding-block: .5rem;
  transition: color .2s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: .125rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--gold-600); }
.sitehead--over .nav a[aria-current="page"] { color: var(--gold-400); }
.sitehead--stuck .nav a[aria-current="page"] { color: var(--gold-600); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.header__cta { margin-left: .5rem; }

.burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--r-sm);
  opacity: .7;
  cursor: pointer;
  transition: opacity .2s var(--ease);
}
.burger:hover { opacity: 1; }
.burger span, .burger span::before, .burger span::after {
  content: "";
  display: block;
  width: 18px; height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span::before { transform: translateY(-6px); }
.burger span::after  { transform: translateY(4.5px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(0); }

@media (max-width: 980px) {
  .nav, .header__cta { display: none; }
  .burger { display: flex; }
}

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--ink-800);
  color: var(--on-ink);
  padding: 6rem var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .45s var(--ease), visibility .45s;
}
.drawer[data-open="true"] { transform: translateY(0); visibility: visible; }
.drawer > a {
  font-family: var(--serif);
  font-size: 2rem;
  padding-block: .625rem;
  border-bottom: 1px solid rgba(244, 241, 232, .1);
  transition: color .2s var(--ease), transform .25s var(--ease);
}
.drawer > a:hover,
.drawer > a[aria-current="page"] { color: var(--gold-400); transform: translateX(.5rem); }
.drawer__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .75rem; }
.drawer__close {
  position: absolute;
  top: 1.5rem; right: var(--gutter);
  width: 44px; height: 44px;
  background: none;
  border: 1px solid rgba(244, 241, 232, .25);
  border-radius: var(--r-sm);
  color: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* --- hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(92dvh, 900px);
  padding-block: 12rem clamp(3.5rem, 8vw, 6rem);
  color: var(--bone-100);
  overflow: hidden;
  isolation: isolate;
}
/* Inner pages carry a solid in-flow header, so the hero does not need to
   reserve room for one floating on top of it. */
.hero--short {
  min-height: min(56dvh, 540px);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.75rem, 5vw, 4rem);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  /* a slow drift keeps a still photo from feeling like a dead backdrop */
  animation: drift 26s var(--ease) infinite alternate;
}
@keyframes drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
}
/* scrim is two layers: a vertical fade for text, a radial to hold the corners */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(3, 21, 12, .82) 0%, rgba(3, 21, 12, .5) 42%, transparent 78%),
    linear-gradient(to top, rgba(3, 21, 12, .9) 0%, rgba(3, 21, 12, .5) 42%, rgba(3, 21, 12, .3) 72%, rgba(3, 21, 12, .62) 100%);
}

.hero__in { position: relative; display: grid; gap: 1.75rem; }
.hero h1 { max-width: 20ch; }
.hero .lede { color: rgba(244, 241, 232, .88); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; }
@media (max-width: 560px) {
  .hero__actions .btn { flex: 1 1 100%; }
}

/* trust row — real operational numbers, tabular so they align */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(244, 241, 232, .16);
}
.trust div { display: grid; gap: .1875rem; }
.trust dt, .trust b {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1;
  color: var(--gold-400);
}
.trust dd, .trust span {
  margin: 0;
  font-size: .8125rem;
  letter-spacing: .01em;
  color: rgba(244, 241, 232, .62);
}

.scroll-cue {
  position: absolute;
  left: 50%; bottom: 1.75rem;
  transform: translateX(-50%);
  width: 1px; height: 3rem;
  background: linear-gradient(to bottom, transparent, rgba(244, 241, 232, .6));
  overflow: hidden;
}
.scroll-cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-400);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
@media (max-width: 780px) { .scroll-cue { display: none; } }

/* --- quick quote bar ----------------------------------------------------- */
/* Deliberately overlaps the hero — the page's most important control should
   not wait politely for its own section. */
.qq {
  position: relative;
  z-index: var(--z-raised);
  margin-top: clamp(-5.5rem, -6vw, -3rem);
}
.qq__card {
  background: var(--bone-100);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 1.25rem;
}
.qq__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.25rem; }
.qq__head h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
.qq__head p { font-size: .9375rem; color: var(--fg-mute); margin: 0; }
.qq__grid {
  display: grid;
  gap: .875rem;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
}
@media (max-width: 900px) {
  .qq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qq__grid .btn { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .qq__grid { grid-template-columns: 1fr; } }

/* --- form controls ------------------------------------------------------- */
.field { display: grid; gap: .4375rem; }
.field > span, .label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--fg-soft);
}
.field .req { color: var(--gold-600); }

.input, .select, .textarea {
  width: 100%;
  padding: .8125rem 1rem;
  background: var(--bone-200);
  border: 1px solid var(--bone-400);
  border-radius: var(--r-sm);
  font-size: .9375rem;
  color: var(--fg);
  transition: border-color .2s var(--ease), background-color .2s var(--ease),
              box-shadow .2s var(--ease);
}
/* native date inputs refuse to shrink to their grid column without this */
.input[type=date] { min-width: 0; }
.input::placeholder, .textarea::placeholder { color: var(--fg-mute); }
.input:hover, .select:hover, .textarea:hover { border-color: #bdb296; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  background: var(--bone-100);
  border-color: var(--ink-700);   /* 3:1 or better on bone */
  box-shadow: 0 0 0 3px rgba(201, 146, 43, .18);
}
.textarea { min-height: 7rem; resize: vertical; }
.select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236b7d73' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

/* inline error state — never window.alert() */
.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] .textarea {
  border-color: #b4423c;
  background: #fdf6f4;
}
.error {
  display: none;
  font-size: .8125rem;
  color: #a03b35;
}
.field[data-invalid="true"] .error { display: block; }

/* --- cards / editorial grid ---------------------------------------------- */
.grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* Fleet groups hold 3, 4 and 5 vehicles. Each states its own column count so
   no row is left with a single orphaned card. */
.grid--fleet { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(.875rem, 1.6vw, 1.25rem); }
.grid--fleet .card-veh__body h3 { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); }
@media (max-width: 1180px) { .grid--fleet { grid-template-columns: repeat(min(var(--cols, 3), 3), minmax(0, 1fr)); } }
@media (max-width: 820px)  { .grid--fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .grid--fleet { grid-template-columns: 1fr; } }

/* Tours run on a deliberately uneven 6-col grid so no row reads as
   three identical cards. */
.tour-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.tour-grid > *:nth-child(1) { grid-column: span 4; --ratio: 16 / 10; }
.tour-grid > *:nth-child(2) { grid-column: span 2; --ratio: 3 / 4; }
.tour-grid > *:nth-child(3) { grid-column: span 2; --ratio: 3 / 4; }
.tour-grid > *:nth-child(4) { grid-column: span 4; --ratio: 16 / 10; }
.tour-grid > *:nth-child(5) { grid-column: span 3; --ratio: 4 / 3; }
.tour-grid > *:nth-child(6) { grid-column: span 3; --ratio: 4 / 3; }
@media (max-width: 860px) {
  .tour-grid { grid-template-columns: repeat(2, 1fr); }
  .tour-grid > * { grid-column: span 2 !important; --ratio: 16 / 10 !important; }
}

.card-tour {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-700);
  isolation: isolate;
}
.card-tour img {
  aspect-ratio: var(--ratio, 4 / 3);
  width: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease), filter .5s var(--ease);
}
.card-tour::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 21, 12, .9) 2%, rgba(3, 21, 12, .35) 45%, transparent 75%);
  transition: opacity .4s var(--ease);
}
.card-tour:hover img { transform: scale(1.055); }
.card-tour__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-base);
  padding: clamp(1.25rem, 2.2vw, 1.875rem);
  color: var(--bone-100);
  display: grid;
  gap: .375rem;
}
.card-tour__body h3 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); }
.card-tour__body p { font-size: .9375rem; color: rgba(244, 241, 232, .74); margin: 0; }
.card-tour__meta {
  display: flex;
  gap: .75rem;
  font-size: .75rem;
  letter-spacing: .01em;
  color: var(--gold-400);
}
/* a gold rule that draws itself in on hover, instead of a "Learn more →" button */
.card-tour__rule {
  height: 2px;
  width: 3.5rem;
  background: var(--gold-500);
  margin-top: .625rem;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease);
}
.card-tour:hover .card-tour__rule,
.card-tour:focus-visible .card-tour__rule { transform: scaleX(1); }

/* --- fleet rail ---------------------------------------------------------- */
.rail {
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 20rem);
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: .5rem 1.5rem;
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: thin;
  scrollbar-color: var(--bone-400) transparent;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--bone-400); border-radius: 99px; }

/* Vehicle cards are links. The studio cut-out from the old fleet page sits on
   a soft "showroom floor" so every vehicle reads at the same scale. */
.card-veh {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bone-100);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card-veh:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.card-veh:active { transform: translateY(-1px); }
.card-veh__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(60% 18% at 50% 88%, rgba(3, 21, 12, .16), transparent 70%),
    linear-gradient(180deg, var(--bone-200) 0%, var(--bone-300) 100%);
}
/* Absolutely placed so a tall vehicle can never stretch its stage: every card
   keeps the same 16:10 panel and the text lines up across the row. */
.card-veh__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 1rem 1.25rem .75rem;
  object-fit: contain;
  transition: transform .5s var(--ease-out);
}
.card-veh:hover .card-veh__stage img { transform: translateX(4px) scale(1.035); }
.card-veh__more {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  margin-top: .375rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--gold-600);
}
.card-veh__body { padding: 1.125rem 1.25rem 1.375rem; display: grid; gap: .4375rem; align-content: start; }
.card-veh__body h3 { font-size: 1.3125rem; }
.card-veh__seats {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--gold-600);
}
.card-veh__body p { font-size: .875rem; color: var(--fg-mute); margin: 0; }
.card-veh__specs {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .25rem;
}
.tag {
  font-size: .75rem;
  padding: .25rem .5625rem;
  background: var(--bone-300);
  border-radius: var(--r-xs);
  color: var(--fg-soft);
}

/* --- split / zigzag ------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split--reverse > *:first-child { order: 2; }
.split--top { align-items: start; }
.split--end { align-items: end; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse > *:first-child { order: 0; }
}
.split__media { position: relative; border-radius: var(--r-md); overflow: hidden; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* offset frame — creates depth without a drop shadow */
.split__media::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 146, 43, .5);
  border-radius: var(--r-md);
  transform: translate(1rem, 1rem);
  pointer-events: none;
  z-index: var(--z-base);
}
.split__copy { display: grid; gap: 1.25rem; align-content: start; }

/* --- numbered reason list ------------------------------------------------ */
.reasons { display: grid; gap: 0; }
.reason {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem 2rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--bone-400);
  transition: background-color .3s var(--ease);
}
.reason:last-child { border-bottom: 1px solid var(--bone-400); }
.reason::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: .7rem;
  border-radius: 50%;
  background: var(--gold-500);
}
.reason__body { display: grid; gap: .5rem; }
.reason h3 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); }
.reason p { color: var(--fg-soft); margin: 0; }
.on-ink .reason { border-color: rgba(244, 241, 232, .12); }
.on-ink .reason::before { background: var(--gold-400); }

/* --- itinerary / highlight lists ----------------------------------------- */
.ticks { display: grid; gap: .8125rem; }
.ticks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  font-size: .9688rem;
}
.ticks li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: .5rem;
  border-radius: 50%;
  border: 1.5px solid var(--gold-500);
}
.ticks--filled li::before { background: var(--gold-500); }

/* --- stats band ---------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.stat { display: grid; gap: .375rem; padding-left: 1.25rem; border-left: 2px solid var(--gold-500); }
.stat b {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: .875rem; color: var(--fg-mute); }
.on-ink .stat span { color: var(--on-ink-soft); }

/* --- CTA band ------------------------------------------------------------ */
.cta-band {
  position: relative;
  isolation: isolate;
  color: var(--bone-100);
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
  overflow: hidden;
}
.cta-band__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(3, 21, 12, .94) 22%, rgba(3, 21, 12, .68) 62%, rgba(3, 21, 12, .45) 100%);
}
.cta-band__in {
  display: grid;
  gap: 1.5rem;
  max-width: 42rem;
  background: none;   /* inherits .on-ink's text colours, not its surface */
}
.cta-band p { color: rgba(244, 241, 232, .82); }

/* --- FAQ (details, no JS accordion library) ------------------------------ */
.faq { display: grid; }
.faq details {
  border-top: 1px solid var(--bone-400);
  padding-block: 1.375rem;
}
.faq details:last-of-type { border-bottom: 1px solid var(--bone-400); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-600); }
.faq summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--gold-600);
  border-bottom: 1.5px solid var(--gold-600);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details p { margin-top: .875rem; color: var(--fg-soft); }

/* --- footer -------------------------------------------------------------- */
.footer { background: var(--ink-900); color: var(--on-ink-soft); font-size: .9375rem; }
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3.5rem, 6vw, 5rem);
}
@media (max-width: 900px) { .footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .footer__top { grid-template-columns: 1fr; } }
.footer h2.footer__h {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--bone-300);
  margin-bottom: 1.125rem;
}
.footer ul { display: grid; gap: .625rem; }
.footer a { transition: color .2s var(--ease); }
.footer a:hover { color: var(--gold-400); }
.footer__logo { height: 48px; width: auto; margin-bottom: 1.25rem; }
.footer__brand p { font-size: .9375rem; max-width: 30ch; }
.socials { display: flex; gap: .625rem; margin-top: 1.25rem; }
.socials a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244, 241, 232, .16);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), background-color .2s var(--ease),
              transform .2s var(--ease);
}
.socials a:hover {
  border-color: var(--gold-500);
  background: rgba(201, 146, 43, .12);
  transform: translateY(-2px);
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(244, 241, 232, .1);
  font-size: .8125rem;
}
.footer__legal ul { display: flex; gap: 1.5rem; }

/* --- mobile action bar --------------------------------------------------- */
/* On a phone, the two things a stranded traveller wants are "call" and
   "WhatsApp". They should never be more than a thumb away. */
.actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: none;
  background: rgba(3, 21, 12, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(244, 241, 232, .12);
  padding: .625rem .75rem calc(.625rem + env(safe-area-inset-bottom));
  gap: .5rem;
}
.actionbar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4375rem;
  padding: .8125rem .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--bone-100);
  border: 1px solid rgba(244, 241, 232, .2);
  border-radius: var(--r-sm);
  transition: transform .15s var(--ease);
}
.actionbar a:active { transform: scale(.97); }
.actionbar a.is-primary { background: var(--gold-500); color: var(--ink-900); border-color: transparent; }
@media (max-width: 980px) {
  .actionbar { display: flex; }
  body { padding-bottom: 4.5rem; }   /* the action bar's own height: no strip between footer and bar */
}

/* --- quote request form ------------------------------------------------- */
.book { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 940px) { .book { grid-template-columns: 1fr; } }

.book__panel {
  background: var(--bone-100);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}

[data-booking] { display: grid; gap: 1.125rem; }

.form-head { display: grid; gap: .375rem; margin-bottom: .375rem; }
.form-head h2 { font-size: clamp(1.75rem, 3vw, 2.375rem); }
.form-head p { font-size: .9375rem; color: var(--fg-mute); margin: 0; }

.form-actions { display: flex; justify-content: flex-end; margin-top: .5rem; }
@media (max-width: 560px) { .form-actions .btn { width: 100%; } }

/* Honeypot. Moved off-screen rather than display:none, which some bots
   check for and skip. Unreachable by keyboard (tabindex -1) and hidden from
   screen readers (aria-hidden), so no real visitor ever meets it. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.125rem; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } }

@keyframes stepIn {
  from { opacity: 0; transform: translate3d(14px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* summary aside */
.summary { position: sticky; top: 7rem; display: grid; gap: 1.25rem; }
.summary__card { background: var(--ink-800); color: var(--on-ink); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2rem); display: grid; gap: 1rem; }
.summary__card h3 { font-size: 1.375rem; }
.summary dl { display: grid; gap: .75rem; margin: 0; }
.summary dl > div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid rgba(244, 241, 232, .1); font-size: .875rem; }
.summary dt { color: var(--on-ink-soft); }
.summary dd { margin: 0; text-align: right; font-weight: 600; color: var(--bone-100); }
.summary__note { font-size: .8125rem; color: var(--fg-mute); }
@media (max-width: 940px) { .summary { position: static; } }

/* success state */
.done { display: none; gap: 1.25rem; text-align: center; justify-items: center; padding-block: 2rem; }
.done[data-active="true"] { display: grid; animation: stepIn .5s var(--ease); }
.done__mark {
  width: 4.5rem; height: 4.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fdf7ea;
  border: 1.5px solid var(--gold-500);
}


/* --- misc ---------------------------------------------------------------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8125rem; color: rgba(244, 241, 232, .62); }
.breadcrumb a { display: inline-block; padding: .875rem .375rem; margin: -.875rem -.375rem; }
@media (hover: hover) and (pointer: fine) { .breadcrumb a:hover { color: var(--gold-400); } }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: .5rem; opacity: .5; }
.breadcrumb li { display: inline; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .875rem; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); }
.gallery a { display: block; border-radius: var(--r-sm); overflow: hidden; cursor: zoom-in; }
.gallery a img { transition: transform .5s var(--ease-out); }
.gallery a:hover img { transform: scale(1.04); }

.breadcrumb--dark { color: var(--fg-mute); }
.breadcrumb--dark a:hover { color: var(--gold-600); }

/* --- vehicle page -------------------------------------------------------- */
.veh-stage {
  padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(50% 14% at 30% 82%, rgba(3, 21, 12, .14), transparent 70%),
    linear-gradient(180deg, var(--bone-100) 0%, var(--bone-300) 100%);
}
.veh-stage__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 900px) { .veh-stage__grid { grid-template-columns: 1fr; } }
.veh-stage__media img { width: 100%; height: auto; max-height: 30rem; object-fit: contain; }
.veh-stage__copy { display: grid; gap: 1.125rem; align-content: start; }
.veh-specs {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 2rem;
  margin: .25rem 0 .5rem;
  padding-block: 1rem;
  border-block: 1px solid var(--bone-400);
}
.veh-specs div { display: grid; gap: .125rem; }
.veh-specs dt { font-size: .75rem; letter-spacing: .01em; color: var(--fg-mute); }
.veh-specs dd { margin: 0; font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; }
.ticks--features li b { font-weight: 600; }
.ticks--features li { color: var(--fg-soft); }

/* --- lightbox (native <dialog>: Esc and focus handling come free) --------- */
.lightbox {
  margin: auto;
  width: min(92vw, 1200px);
  max-height: 92dvh;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: var(--ink-900);
  overflow: visible;
}
.lightbox::backdrop { background: rgba(3, 21, 12, .86); backdrop-filter: blur(4px); }
.lightbox img { width: 100%; max-height: 86dvh; object-fit: contain; border-radius: var(--r-md); }
.lightbox button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(244, 241, 232, .3);
  border-radius: 50%;
  background: rgba(3, 21, 12, .6);
  color: var(--bone-100);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.lightbox button:hover { background: var(--gold-500); color: var(--ink-900); }
.lightbox [data-lb-close] { top: -.75rem; right: -.75rem; }
.lightbox [data-lb-prev] { left: .75rem; top: 50%; transform: translateY(-50%); }
.lightbox [data-lb-next] { right: .75rem; top: 50%; transform: translateY(-50%); }

.prose { display: grid; gap: 1.125rem; }
.prose p { color: var(--fg-soft); }

.notice {
  display: grid;
  gap: .375rem;
  padding: 1.125rem 1.375rem;
  background: #fdf7ea;
  border: 1px solid var(--gold-100);
  border-radius: var(--r-sm);
  font-size: .9375rem;
}
.notice b { font-weight: 700; }

/* ---- 10-motion.css ---- */
/* Motion layer. Pairs with assets/js/motion.js.
   Every pre-hide rule is scoped to html.has-motion, which only exists while
   the engine is running (see the head script in sitegen/core.py shell()).
   :where() keeps these at the specificity of a single attribute, so a
   component's own hover and transition rules still win once .is-in lands. */

body { overflow-x: clip; }

/* Lenis owns smooth scrolling when it runs; native smooth would fight it */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---- pre-hide until the engine animates each thing in --------------------- */
:where(.has-motion) [data-reveal]:where(:not(.is-in)) { opacity: 0; transform: translate3d(0, 28px, 0); }
:where(.has-motion) [data-stagger]:where(:not(.is-in)) > * { opacity: 0; transform: translate3d(0, 24px, 0); }
:where(.has-motion) [data-split]:where(:not(.is-in)) { visibility: hidden; }
:where(.has-motion) [data-mask]:where(:not(.is-in)) { clip-path: inset(100% 0 0 0); }

[data-mask] { overflow: hidden; }
[data-mask] img { transform-origin: 50% 60%; }

/* ---- scroll progress hairline ---------------------------------------------- */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: calc(var(--z-header) + 2);
  background: var(--gold-500);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* ---- header tuck ------------------------------------------------------------- */
.sitehead { transition: transform .45s var(--ease-out); }
.sitehead--tucked { transform: translate3d(0, -100%, 0); }

/* ---- marquee -------------------------------------------------------------- */
.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; }
.marquee__track[data-cloned] { animation: marquee var(--marquee-speed, 48s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---- sticky image swap ---------------------------------------------------- */
[data-swap-img] { opacity: 0; transition: opacity .7s var(--ease), transform 1.2s var(--ease-out); transform: scale(1.04); }
[data-swap-img].is-active { opacity: 1; transform: scale(1); }
/* without the engine, show the first picture and every text block at full strength */
html:not(.motion-ready) [data-swap-img]:first-of-type { opacity: 1; transform: none; }

/* ---- stacking cards ----------------------------------------------------------- */
[data-stack-card] { position: sticky; top: calc(7rem + var(--i, 0) * 1rem); transform-origin: 50% 0; }

/* ---- horizontal track: native swipe row until the engine pins it ---------- */
[data-horizontal-track] { display: flex; }
/* no engine (reduced motion or JS off): a swipe row at every width, never a clipped row */
html:not(.motion-ready) [data-horizontal-track] { overflow-x: auto; scroll-snap-type: x mandatory; }
@media (max-width: 980px) {
  [data-horizontal-track] { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  [data-horizontal-track] > * { scroll-snap-align: start; }
  [data-horizontal-track]::-webkit-scrollbar { display: none; }
}

/* ---- press feedback everywhere --------------------------------------------- */
.btn:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none !important; }
  .sitehead { transition: none; }
  [data-swap-img] { transition: none; }
}

/* ---- 20-home.css ---- */
/* ==========================================================================
   Home page (index.html). Cinematic and kinetic.
   Every class here starts with hm-. Shared classes are only ever restyled
   inside an hm- wrapper, never globally.
   ========================================================================== */

/* ---- hero: full bleed photo that settles, words over it ------------------ */
.hm-hero {
  min-height: max(40rem, 100svh);
  padding-block: clamp(8.5rem, 16vh, 12rem) clamp(7.5rem, 13vw, 11rem);
  background: var(--ink-900);
}
/* the first flat layer keeps the eyebrow and the H1 at AA over the bright
   mist in the photo (measured at 1440 and 390) */
.hm-hero::before {
  background:
    linear-gradient(rgba(3, 21, 12, .4), rgba(3, 21, 12, .4)),
    linear-gradient(to bottom, rgba(3, 21, 12, .66) 0%, rgba(3, 21, 12, .14) 24%, rgba(3, 21, 12, 0) 42%),
    linear-gradient(to top, rgba(3, 21, 12, .94) 0%, rgba(3, 21, 12, .6) 36%, rgba(3, 21, 12, .06) 72%),
    linear-gradient(to right, rgba(3, 21, 12, .5) 0%, rgba(3, 21, 12, 0) 62%);
}
.hm-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hm-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  transform-origin: 50% 64%;
  animation: hm-settle 3.2s var(--ease-out) both;
}
@keyframes hm-settle {
  from { transform: scale(1.2); }
  to   { transform: scale(1.02); }
}

.hm-hero__in { position: relative; display: grid; gap: clamp(1.125rem, 2.2vw, 1.75rem); }
.hm-hero__kicker {
  display: flex;
  align-items: center;
  gap: .875rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--bone-100);
  max-width: none;
}
.hm-hero__kicker::before { content: ""; flex: none; width: 2.5rem; height: 1px; background: var(--gold-400); }

.hm-hero .hm-hero__title {
  max-width: none;
  font-size: clamp(2.6rem, 7.3vw, 7.25rem);
  line-height: .96;
  letter-spacing: -.028em;
  color: var(--bone-100);
}

.hm-hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 36rem) auto;
  justify-content: space-between;
  align-items: end;
  gap: 1.5rem 3rem;
  margin-top: clamp(.75rem, 1.6vw, 1.25rem);
  padding-top: clamp(1.25rem, 2.4vw, 2rem);
  border-top: 1px solid rgba(244, 241, 232, .2);
}
.hm-hero__lede {
  margin: 0;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.55;
  color: rgba(244, 241, 232, .86);
  max-width: 44ch;
}
.hm-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 820px) {
  .hm-hero__foot { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .hm-hero__img { object-position: 64% 42%; }
}
@media (max-width: 560px) {
  .hm-hero__actions .btn { flex: 1 1 100%; }
  .hm-hero__kicker::before { width: 1.5rem; }
}

/* quick quote card rides up over the bottom of the hero */
.hm-qq .qq { margin-top: clamp(-6rem, -6.5vw, -3.5rem); }
.hm-qq .qq__card { border: 1px solid rgba(7, 38, 22, .06); }

/* focus rings come from 00-base.css (ink on light sections, gold-400 on the
   dark ones). The quick quote fields show focus with their border instead,
   and the shared gold-500 border is only about 2.6:1 on the card, so here
   it turns ink. */
.hm-qq .input:focus,
.hm-qq .select:focus { border-color: var(--ink-700); box-shadow: 0 0 0 1px var(--ink-700); }

/* ---- marquee: two rows of places and work, running opposite ways --------- */
.hm-marquee {
  display: grid;
  gap: clamp(.5rem, 1.2vw, 1rem);
  padding-block: clamp(4.5rem, 9vw, 8rem) clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
}
.hm-marquee__row { will-change: transform; }
.hm-marquee__list { display: flex; align-items: center; max-width: none; }
.hm-marquee__list li { display: flex; align-items: center; white-space: nowrap; }

.hm-marquee__row--places { --marquee-speed: 80s; }
.hm-marquee__row--places li {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 7.2vw, 6.75rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--ink-800);
}
.hm-marquee__row--places li:nth-child(even) { font-style: italic; color: var(--ink-500); }
.hm-marquee__row--places li::after {
  content: "";
  flex: none;
  width: .15em;
  height: .15em;
  margin-inline: .42em;
  border-radius: 50%;
  background: var(--gold-500);
}

.hm-marquee__row--work { --marquee-speed: 60s; }
.hm-marquee__row--work .marquee__track[data-cloned] { animation-direction: reverse; }
.hm-marquee__row--work li {
  font-size: clamp(.9375rem, 1.2vw, 1.0625rem);
  font-weight: 500;
  color: var(--fg-soft);
}
.hm-marquee__row--work li::after {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1px;
  margin-inline: 1.25rem;
  background: var(--gold-500);
}

/* pause control: home.js unhides it once the rows are moving */
.hm-marquee__ctl { display: flex; justify-content: flex-end; }
.hm-marquee__toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 1.125rem 0 .875rem;
  border: 1px solid var(--bone-400);
  border-radius: 99px;
  background: transparent;
  color: var(--fg-soft);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.hm-marquee__toggle[hidden] { display: none; }
.hm-marquee__toggle:active { transform: scale(.97); }
.hm-marquee__i { flex: none; }
.hm-marquee__i--play,
.hm-marquee.is-paused .hm-marquee__i--pause { display: none; }
.hm-marquee.is-paused .hm-marquee__i--play { display: block; }
.hm-marquee.is-paused .marquee__track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .hm-marquee__toggle:hover { border-color: var(--ink-800); color: var(--ink-800); }
}

/* ---- statement: one big paragraph that brightens as you read ------------- */
.hm-intro { padding-block: clamp(4rem, 8vw, 7rem) clamp(5.5rem, 10vw, 9rem); }
.hm-intro__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem) clamp(1rem, 2vw, 2rem);
}
.hm-intro__h {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .875rem;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  line-height: 1.2;
  color: var(--gold-600);
}
.hm-intro__h::before { content: ""; flex: none; width: 2.5rem; height: 1px; background: currentColor; }
.hm-intro__big {
  grid-column: 1 / -1;
  max-width: none;
  font-family: var(--serif);
  font-size: clamp(2.05rem, 4.9vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -.018em;
  color: var(--ink-800);
}
.hm-pill {
  display: inline-block;
  width: 2em;
  height: .82em;
  margin-inline: .06em;
  vertical-align: baseline;
  transform: translateY(.06em);
  border-radius: 99px;
  overflow: hidden;
  background: var(--bone-300);
}
.hm-pill img { width: 100%; height: 100%; object-fit: cover; }
.hm-pill--bus img { object-position: 50% 45%; transform: scale(1.35); }
.hm-pill--city img { object-position: 62% 55%; }
.hm-intro__side { grid-column: 1 / -1; display: grid; gap: 1.5rem; align-content: start; }
.hm-intro__side p { margin: 0; font-size: 1.0625rem; color: var(--fg-soft); max-width: 46ch; }
.hm-intro__side .link-arrow,
.hm-svc__aside .link-arrow,
.hm-fleet__ladderhead .link-arrow { position: relative; }
.hm-intro__side .link-arrow::before,
.hm-svc__aside .link-arrow::before,
.hm-fleet__ladderhead .link-arrow::before { content: ""; position: absolute; inset: -6px 0; }
@media (min-width: 900px) {
  .hm-intro__big { grid-column: 2 / -1; }
  .hm-intro__side { grid-column: 7 / span 5; }
}

/* ---- services: pinned row that slides sideways (desktop), swipe row (mobile) */
.hm-svc {
  --hm-edge: max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter)));
  --hm-gap: clamp(.875rem, 1.3vw, 1.25rem);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 4.5vh, 3rem);
  padding-block: clamp(5rem, 11vw, 7rem);
  background: var(--ink-800);
  overflow: hidden;
  overflow: clip;     /* not a scroll container, so focus can never scroll it sideways */
}
/* 981px up is where motion.js pins the section (the phone action bar shows up
   to 980px); below that the row is a native swipe row */
@media (min-width: 981px) {
  .hm-svc { min-height: 100vh; padding-block: clamp(5rem, 11vh, 7rem) clamp(2rem, 5vh, 3.5rem); }
}
.hm-svc__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
  align-items: end;
  gap: 1.25rem 3rem;
}
.hm-svc__title { font-size: clamp(2.5rem, 5.4vw, 5rem); color: var(--bone-100); }
.hm-svc__aside { display: grid; gap: 1rem; }
.hm-svc__aside p { margin: 0; font-size: 1rem; }
@media (max-width: 760px) { .hm-svc__head { grid-template-columns: 1fr; } }

.hm-svc__track {
  gap: var(--hm-gap);
  padding-block: .375rem;
  padding-inline-start: var(--hm-edge);
  scroll-padding-inline: var(--hm-edge);
}
/* end spacing as a flex item, so it counts in scrollWidth when the row slides */
.hm-svc__track::after { content: ""; flex: 0 0 max(1px, calc(var(--hm-edge) - var(--hm-gap))); }

.hm-svc__panel {
  position: relative;
  isolation: isolate;
  flex: 0 0 clamp(17.5rem, 25vw, 23rem);
  height: clamp(22rem, 60vh, 36rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-700);
  color: var(--bone-100);
  transition: transform .25s var(--ease);
}
.hm-svc__panel:active { transform: scale(.985); }
.hm-svc__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hm-svc__shift { position: absolute; inset: 0 -12%; }
.hm-svc__shift img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.hm-svc__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(3, 21, 12, .95) 0%, rgba(3, 21, 12, .66) 34%, rgba(3, 21, 12, .08) 66%, rgba(3, 21, 12, .2) 100%);
}
.hm-svc__body { display: grid; gap: .625rem; padding: clamp(1.25rem, 2vw, 1.75rem); }
.hm-svc__body h3 { font-size: clamp(1.625rem, 2.15vw, 2.125rem); line-height: 1.04; color: var(--bone-100); }
.hm-svc__body p { margin: 0; font-size: .9375rem; line-height: 1.5; color: rgba(244, 241, 232, .78); }
.hm-svc__go {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: .375rem;
  border: 1px solid rgba(244, 241, 232, .34);
  border-radius: 50%;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .hm-svc__panel:hover .hm-svc__shift img { transform: scale(1.06); }
  .hm-svc__panel:hover .hm-svc__go {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--ink-900);
    transform: translateX(.375rem);
  }
}

/* progress hairline under the row, only while the row is actually sliding */
.hm-svc__rail { display: none; }
.hm-svc__rail::before { content: ""; display: block; height: 1px; background: rgba(244, 241, 232, .14); }
.hm-svc__bar {
  display: block;
  height: 1px;
  margin-top: -1px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@media (min-width: 981px) { .motion-ready .hm-svc__rail { display: block; } }

/* without the engine (no JS, reduced motion) the row is a plain sideways
   scroller at every width, with a visible scrollbar on desktop */
html:not(.motion-ready) .hm-svc__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 241, 232, .28) transparent;
}
html:not(.motion-ready) .hm-svc__track > * { scroll-snap-align: start; }
/* a keyboard user tabbing along the static desktop row must not be snapped
   back to a panel that is only partly on screen */
@media (min-width: 981px) { html:not(.motion-ready) .hm-svc__track { scroll-snap-type: x proximity; } }
/* up to 980px the row is always a swipe row (10-motion.css), engine or not */
@media (max-width: 980px) {
  .hm-svc__panel { flex-basis: min(80vw, 21rem); height: auto; aspect-ratio: 3 / 4; }
}

/* ---- tours: a compact index of the five routes, a picture on the pointer --
   One line per tour. On desktop with a mouse (and motion on) one photo
   follows the pointer and changes per row; everywhere else each row keeps
   its own thumbnail. The big photo chapters belong to tours.html. */
.hm-tours { padding-block: clamp(5.5rem, 10vw, 9rem) clamp(5rem, 9vw, 8rem); overflow: clip; }
.hm-tours__head,
.hm-fleet__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  gap: 1.25rem clamp(2rem, 5vw, 5rem);
  margin-bottom: clamp(3.5rem, 7vw, 6.5rem);
}
.hm-tours__head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.hm-tours__head .lede,
.hm-fleet__head .lede { margin: 0; }
@media (max-width: 880px) {
  .hm-tours__head, .hm-fleet__head { grid-template-columns: 1fr; }
}

.hm-routes { position: relative; --hm-pic: clamp(15rem, 19vw, 18.5rem); }
.hm-routes__list { border-bottom: 1px solid var(--bone-400); }
.hm-route {
  position: relative;
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  grid-template-areas: "thumb name" "thumb meta" "thumb blurb";
  align-content: start;
  column-gap: 1.125rem;
  row-gap: .375rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--bone-400);
}
.hm-route__thumb {
  grid-area: thumb;
  align-self: start;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bone-300);
}
.hm-route__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hm-route__name {
  grid-area: name;
  font-size: clamp(1.75rem, 6.4vw, 2.5rem);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.hm-route__meta {
  grid-area: meta;
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--gold-600);
}
.hm-route__blurb { grid-area: blurb; margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--fg-soft); max-width: 46ch; }
.hm-route__go { display: none; grid-area: go; }
/* the name link stretches over the whole row, so the row is one link. Never
   transform the h3, the link or the row's other ancestors of the link: a
   transformed ancestor becomes the box the stretched ::after fills. Only
   .hm-route__txt, inside the link, moves. */
.hm-route__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-sm); }
.hm-route__link:focus-visible { outline: none; }
.hm-route__link:focus-visible::after { outline: 2px solid var(--ink-700); outline-offset: 3px; }
.hm-route__txt { display: inline-block; }

@media (min-width: 900px) {
  .hm-route {
    grid-template-columns: 8.5rem minmax(0, 5fr) minmax(0, 2fr) minmax(0, 3.4fr) 2rem;
    grid-template-areas: "thumb name meta blurb go";
    align-items: center;
    column-gap: clamp(1.25rem, 2.6vw, 2.75rem);
    padding-block: clamp(1.375rem, 2.2vw, 2rem);
  }
  .hm-route__thumb { aspect-ratio: 4 / 3; align-self: center; }
  .hm-route__name { font-size: clamp(2.5rem, 4.3vw, 4rem); line-height: 1; }
  /* the arrow rests .375rem in from the row's right edge, so its hover nudge
     ends flush with the edge and never leaves the clickable row */
  .hm-route__go {
    display: grid;
    place-items: center;
    justify-self: end;
    margin-right: .375rem;
    color: var(--ink-800);
    transition: transform .45s var(--ease-out);
  }
  /* the pointer picture takes over from the thumbnails. It gets a column of
     its own between the name and the blurb, so it never sits on any text;
     the meta moves under the name to give the name the room. */
  .hm-routes.is-live .hm-route {
    grid-template-columns: minmax(0, 1fr) var(--hm-pic) minmax(0, .8fr) 2rem;
    grid-template-areas: "name . blurb go" "meta . blurb go";
    row-gap: .5rem;
  }
  .hm-routes.is-live .hm-route__name { align-self: end; }
  .hm-routes.is-live .hm-route__meta { align-self: start; }
  .hm-routes.is-live .hm-route__thumb { display: none; }
}

.hm-routes__float { display: none; }
.hm-routes.is-live .hm-routes__float {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: var(--hm-pic);
  aspect-ratio: 4 / 5;
  pointer-events: none;
  opacity: 0;
}
.hm-routes__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-800);
  box-shadow: var(--sh-lg);
}
.hm-routes__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.14);
  transition: opacity .45s var(--ease), transform 1s var(--ease-out);
}
.hm-routes__frame img.is-on { opacity: 1; transform: scale(1); }

/* While the pointer is on the list, only the other rows' names step back, to
   .6 (about 4.2:1 on bone, fine at this display size). Their meta and blurb
   stay at full strength. */
@media (hover: hover) and (pointer: fine) {
  .hm-route__txt { transition: transform .6s var(--ease-out), opacity .4s var(--ease); }
  .hm-routes.is-live .hm-routes__list:hover .hm-route:not(:hover) .hm-route__txt { opacity: .6; }
  .hm-route:hover .hm-route__txt { transform: translateX(.75rem); }
  .hm-route:hover .hm-route__go { transform: translateX(.375rem); }
}

/* the open ended tour closes the chapter as one wide frame */
.hm-own {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(26rem, 60vh, 36rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-800);
  color: var(--bone-100);
}
.hm-own__media { position: absolute; inset: 0; z-index: -2; }
.hm-own__par { position: absolute; inset: 0; }
.hm-own__zoom { width: 100%; height: 100%; transition: transform 1.2s var(--ease-out); }
.hm-own__zoom img { width: 100%; height: 100%; object-fit: cover; }
.hm-own::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(3, 21, 12, .92) 0%, rgba(3, 21, 12, .45) 42%, rgba(3, 21, 12, 0) 72%),
    linear-gradient(to right, rgba(3, 21, 12, .6) 0%, rgba(3, 21, 12, 0) 60%);
}
.hm-own__copy { display: grid; gap: .875rem; max-width: 38rem; padding: clamp(1.5rem, 4.5vw, 4rem); }
.hm-own .hm-own__meta { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .01em; color: var(--bone-100); }
.hm-own h3 { font-size: clamp(2.75rem, 5.6vw, 5rem); line-height: .98; color: var(--bone-100); }
.hm-own p { margin: 0; color: rgba(244, 241, 232, .84); }
.hm-own__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--r-lg); }
.hm-own__link:focus-visible { outline: none; }
.hm-own__link:focus-visible::after { outline: 2px solid var(--gold-400); outline-offset: -5px; }
.hm-own__more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  margin-top: .375rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--bone-100);
}
.hm-own__more svg { transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .hm-own:hover .hm-own__zoom { transform: scale(1.045); }
  .hm-own:hover .hm-own__more svg { transform: translateX(.375rem); }
}

/* ---- fleet: the yard photo grows in, facts count up, vehicles drive in ---- */
.hm-fleet {
  padding-block: clamp(6.5rem, 13vw, 12rem) clamp(5rem, 10vw, 9rem);
  background: var(--bone-300);
  overflow: hidden;
  overflow: clip;
}
.hm-fleet__frame {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-800);
  transform-origin: 50% 100%;
}
.hm-fleet__photo { width: 100%; aspect-ratio: 2000 / 1017; object-fit: cover; }
.hm-fleet__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to top, rgba(3, 21, 12, .9) 0%, rgba(3, 21, 12, .55) 30%, rgba(3, 21, 12, 0) 58%);
  pointer-events: none;
}
.hm-fleet__facts {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 17rem));
  gap: 1.5rem clamp(1.25rem, 3vw, 2.5rem);
  margin: 0;
  padding: clamp(1.25rem, 3.2vw, 2.75rem);
  color: var(--bone-100);
}
.hm-fleet__facts > div { display: grid; gap: .5rem; align-content: start; padding-top: 1rem; border-top: 1px solid rgba(244, 241, 232, .32); }
.hm-fleet__facts dt {
  font-family: var(--serif);
  font-size: clamp(3rem, 6.4vw, 6rem);
  line-height: .86;
  letter-spacing: -.02em;
  color: var(--bone-100);
}
.hm-fleet__facts dd { margin: 0; font-size: .9375rem; line-height: 1.4; color: rgba(244, 241, 232, .8); }
@media (max-width: 760px) {
  .hm-fleet__photo { aspect-ratio: 4 / 3; }
  .hm-fleet__frame::after { display: none; }
  .hm-fleet__facts { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.25rem 1.25rem 1.5rem; }
}

.hm-fleet__ladderhead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem 2rem;
  margin-top: clamp(4.5rem, 9vw, 8rem);
}
.hm-fleet__ladderhead p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.625rem, 2.6vw, 2.375rem);
  line-height: 1.1;
  color: var(--ink-800);
}
.hm-fleet__ladderwrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.hm-ladder {
  display: flex;
  align-items: stretch;
  gap: clamp(.75rem, 1.8vw, 1.75rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.hm-veh { flex: var(--w, 1) 1 0; min-width: 0; }
.hm-veh a { display: flex; flex-direction: column; height: 100%; border-radius: var(--r-sm); }
.hm-veh__stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--bone-400);
}
.hm-veh__stage::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: .5rem;
  height: 14px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(3, 21, 12, .2), rgba(3, 21, 12, 0));
}
.hm-veh__stage img {
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 280;
  object-fit: contain;
  object-position: 50% 100%;
  transition: transform .7s var(--ease-out);
}
.hm-veh__seats { margin-top: .875rem; font-size: .8125rem; color: var(--fg-soft); }
.hm-veh__seats b {
  margin-right: .25rem;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 400;
  line-height: 1;
  color: var(--ink-800);
}
.hm-veh__name { margin-top: .25rem; font-size: .9375rem; font-weight: 600; line-height: 1.3; min-height: 2.6em; transition: color .25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .hm-veh a:hover .hm-veh__stage img { transform: translateX(-.5rem); }
  .hm-veh a:hover .hm-veh__name { color: var(--gold-600); }
}
@media (max-width: 760px) {
  .hm-fleet__ladderwrap { padding-inline: 0; }
  .hm-ladder {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    padding: .375rem var(--gutter) .5rem;
    scrollbar-width: none;
  }
  .hm-ladder::-webkit-scrollbar { display: none; }
  .hm-ladder::after { content: ""; flex: 0 0 1px; }
  .hm-veh { flex: 0 0 calc(var(--w, 1) * 14rem); scroll-snap-align: start; }
}

/* ---- what to expect: a dark, text only chapter ---------------------------- */
.hm-expect { padding-block: clamp(6.5rem, 13vw, 12rem) clamp(7rem, 14vw, 13rem); background: var(--ink-900); }
.hm-expect__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  align-items: end;
  gap: 1.5rem clamp(2rem, 6vw, 6rem);
}
.hm-expect__h { max-width: 15ch; font-size: clamp(2.5rem, 5.6vw, 5.25rem); color: var(--bone-100); }
.hm-expect__aside { margin: 0; padding-left: 1.25rem; border-left: 1px solid var(--gold-400); font-size: 1.0625rem; }
.hm-expect__aside a { color: var(--gold-400); white-space: nowrap; border-bottom: 1px solid rgba(232, 185, 85, .45); }
@media (max-width: 760px) { .hm-expect__head { grid-template-columns: minmax(0, 1fr); } }
.hm-expect__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 6vw, 5rem) clamp(2rem, 7vw, 7rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
}
.hm-expect__item { position: relative; display: grid; gap: 1rem; align-content: start; padding-top: 1.75rem; }
.hm-expect__item::before,
.hm-expect__item::after { content: ""; position: absolute; top: 0; left: 0; height: 1px; }
.hm-expect__item::before { right: 0; background: rgba(244, 241, 232, .14); }
.hm-expect__item::after {
  width: 4.5rem;
  background: var(--gold-400);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease-out) .15s;
}
:where(.has-motion) .hm-expect__grid:where(:not(.is-in)) .hm-expect__item::after { transform: scaleX(0); }
.hm-expect__item h3 { font-size: clamp(1.75rem, 2.8vw, 2.625rem); color: var(--bone-100); }
.hm-expect__item p { margin: 0; max-width: 42ch; font-size: 1.0625rem; }
@media (min-width: 761px) {
  .hm-expect__item:nth-child(even) { margin-top: clamp(3rem, 7vw, 6rem); }
}
@media (max-width: 760px) {
  .hm-expect__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- FAQ ------------------------------------------------------------------- */
.hm-faq { padding-block: clamp(6.5rem, 13vw, 12rem) clamp(6rem, 12vw, 11rem); }
.hm-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 2.5rem clamp(2rem, 6vw, 6rem);
}
.hm-faq__intro { display: grid; gap: 1.25rem; }
.hm-faq__intro .lede { margin: 0; }
.hm-faq__intro a { color: var(--gold-600); border-bottom: 1px solid currentColor; transition: color .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .hm-faq__intro a:hover { color: var(--ink-800); } }
@media (min-width: 900px) { .hm-faq__intro { position: sticky; top: 7.5rem; } }
@media (max-width: 899px) { .hm-faq__grid { grid-template-columns: minmax(0, 1fr); } }
.hm-faq__list details { padding-block: 1.25rem; }
.hm-faq__list summary { min-height: 44px; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.2; }

/* ---- closing call to action ---------------------------------------------- */
.hm-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(8rem, 18vw, 15rem) clamp(3.5rem, 6vw, 5rem);
  background: var(--ink-900);
  color: var(--bone-100);
}
.hm-cta__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hm-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.hm-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(3, 21, 12, .96) 8%, rgba(3, 21, 12, .6) 55%, rgba(3, 21, 12, .38) 100%),
    linear-gradient(to right, rgba(3, 21, 12, .45) 0%, rgba(3, 21, 12, 0) 70%);
}
.hm-cta__title {
  max-width: 11ch;
  font-size: clamp(3.25rem, 9.2vw, 9.25rem);
  line-height: .9;
  letter-spacing: -.035em;
  color: var(--bone-100);
}
.hm-cta__row {
  display: grid;
  grid-template-columns: minmax(0, 30rem) auto;
  justify-content: space-between;
  align-items: end;
  gap: 2rem 3rem;
  margin-top: clamp(2rem, 4vw, 3.25rem);
}
.hm-cta__text { margin: 0; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: rgba(244, 241, 232, .84); }
.hm-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.hm-magnet { display: inline-block; }
.hm-cta .btn--ghost { --btn-fg: var(--bone-100); border-color: rgba(244, 241, 232, .32); }
@media (hover: hover) and (pointer: fine) {
  .hm-cta .btn--ghost:hover { --btn-bg: rgba(244, 241, 232, .08); border-color: rgba(244, 241, 232, .6); }
}
.hm-cta__lines {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2.75rem;
  margin-top: clamp(4rem, 8vw, 6.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 241, 232, .16);
  font-size: .9375rem;
}
.hm-cta__lines span { margin-right: .5rem; color: rgba(244, 241, 232, .58); }
.hm-cta__lines a { color: var(--bone-100); transition: color .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .hm-cta__lines a:hover { color: var(--gold-400); } }
@media (max-width: 760px) {
  .hm-cta__row { grid-template-columns: minmax(0, 1fr); }
  .hm-cta__actions > * { flex: 1 1 100%; }
  .hm-magnet .btn { width: 100%; }
  .hm-cta__lines { flex-direction: column; gap: 0; }
  .hm-cta__lines a { display: inline-block; padding-block: .6875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-hero__img { animation: none; transform: scale(1.02); }
}

/* ---- 30-services.css ---- */
/* ==========================================================================
   Services family (sv-): services.html and services/<slug>.html
   Built by sitegen/pages_services.py, choreography in assets/js/pages/services.js.
   Every rule here is scoped to an sv- class; shared components are only ever
   adjusted underneath one of them.
   ========================================================================== */

/* ---- shared pieces ------------------------------------------------------- */
.sv-head {
  display: grid;
  gap: 1rem 3rem;
  margin-bottom: clamp(2.75rem, 5.5vw, 4.75rem);
}
.sv-head h2 { font-size: clamp(2.5rem, 5.4vw, 4.75rem); max-width: 14em; }
.sv-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: end; }
.sv-head--split > div, .sv-head--split > p { display: grid; gap: 1rem; justify-items: start; color: var(--fg-soft); }
.sv-head--split > .link-arrow { justify-self: end; }
@media (max-width: 820px) {
  .sv-head--split { grid-template-columns: minmax(0, 1fr); }
  .sv-head--split > .link-arrow { justify-self: start; }
}
/* 44px tall hit area for the family's text links. The underline is drawn as a
   background just under the text, so the link looks the same as before. */
.sv-head .link-arrow, .sv-how__aside .link-arrow, .sv-ix-trade__actions .link-arrow {
  min-height: 2.75rem;
  padding-block: 0;
  border-bottom: 0;
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + .75em) / 100% 1px no-repeat;
}
/* The index masthead and the closing band are ink but carry none of the
   shared dark classes, so the focus ring is switched to gold here too
   (ink-700 on ink-900 would be about 1.3:1). */
.sv-ix-mast :focus-visible, .sv-cta :focus-visible { outline-color: var(--gold-400); }
/* a phone number or address inside a sentence: kept on one line, with the
   hit area grown above and below the text (the padding moves nothing) */
.sv-inline-link {
  white-space: nowrap;
  color: var(--bone-100);
  font-weight: 600;
  padding-block: .75rem;
  text-decoration: underline;
  text-decoration-color: rgba(244, 241, 232, .45);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

/* ---- index: masthead ------------------------------------------------------- */
.sv-ix-mast {
  position: relative;
  background: var(--ink-900);
  color: var(--bone-100);
  padding-top: clamp(8.5rem, 15vw, 12rem);
  isolation: isolate;
}
/* the photo straddles the ink and the bone section below it */
.sv-ix-mast::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: clamp(6rem, 16vw, 14rem);
  background: var(--bone-200);
  z-index: -1;
}
.sv-ix-mast__in { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.sv-ix-mast .breadcrumb { color: rgba(244, 241, 232, .78); }
.sv-ix-mast__title {
  font-size: clamp(3rem, 7.4vw, 7.5rem);
  line-height: .96;
  letter-spacing: -.025em;
  max-width: 12.5em;
}
.sv-ix-mast__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem 4rem;
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid rgba(244, 241, 232, .14);
}
.sv-ix-mast .lede { color: var(--on-ink-soft); max-width: 52ch; }
.sv-ix-mast__actions { display: flex; flex-wrap: wrap; gap: .875rem; }
.sv-ix-mast .btn--ghost { --btn-fg: var(--bone-100); border-color: rgba(244, 241, 232, .3); }
.sv-ix-mast__media { margin-top: clamp(3rem, 6vw, 5rem); }
.sv-ix-mast__frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  transform-origin: 50% 100%;
  box-shadow: var(--sh-lg);
}
.sv-ix-mast__frame img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 820px) {
  .sv-ix-mast__foot { grid-template-columns: minmax(0, 1fr); }
  .sv-ix-mast__actions .btn { flex: 1 1 100%; }
  .sv-ix-mast__frame img { aspect-ratio: 4 / 3; }
}

/* ---- index: the seven services with a sticky picture ---------------------- */
.sv-ix { padding-block: clamp(5rem, 10vw, 8.5rem) clamp(5.5rem, 11vw, 9.5rem); }
.sv-ix__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  align-items: end;
  gap: 1.25rem 3rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sv-ix__head h2 { font-size: clamp(2.5rem, 5.4vw, 4.75rem); max-width: 11em; }
.sv-ix__head .lede { font-size: 1.0625rem; }
@media (max-width: 820px) { .sv-ix__head { grid-template-columns: minmax(0, 1fr); } }

.sv-ix__body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}
.sv-ix__list { border-bottom: 1px solid var(--bone-400); }
.sv-ix-row { border-top: 1px solid var(--bone-400); scroll-margin-top: 6rem; }
.sv-ix-row__link {
  position: relative;
  display: grid;
  gap: 1rem;
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
  transition: transform .5s var(--ease-out);
}
.sv-ix-row__link:active { transform: scale(.99); }
/* the gold rule that runs along the top of the row you are reading */
.sv-ix-row__link::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 100%; height: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .7s var(--ease-out);
}
.sv-ix-row.is-active .sv-ix-row__link::before { transform: scaleX(1); }
.sv-ix-row__pic { display: none; }
.sv-ix-row__name {
  font-size: clamp(2.25rem, 4.3vw, 3.75rem);
  line-height: 1;
  max-width: 13em;
}
.sv-ix-row__lede { color: var(--fg-soft); max-width: 50ch; }
.sv-ix-row__pts { display: flex; flex-wrap: wrap; gap: .5rem; }
.sv-ix-row__pts li {
  font-size: .8125rem;
  font-weight: 500;
  padding: .375rem .75rem;
  border: 1px solid var(--bone-400);
  border-radius: 99px;
  color: var(--fg-soft);
}
.sv-ix-row__more {
  display: inline-flex;
  align-items: center;
  gap: .875rem;
  margin-top: .5rem;
  font-weight: 600;
  font-size: .9375rem;
}
.sv-ix-row__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(7, 38, 22, .2);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease-out);
}
.sv-ix-row.is-active .sv-ix-row__arrow { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-900); }
.sv-ix-row__name { transition: color .3s var(--ease); }
/* The engine only toggles .is-active; the family styles it. Every row stays
   fully readable, and only the big name of the rows you are not on goes
   quieter (fg-mute is 3.9:1, fine at this size). */
@media (min-width: 900px) {
  .motion-ready .sv-ix-row:not(.is-active) .sv-ix-row__name { color: var(--fg-mute); }
}
@media (hover: hover) and (pointer: fine) {
  .sv-ix-row__link:hover .sv-ix-row__arrow { transform: translateX(6px); background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-900); }
  .sv-ix .sv-ix-row .sv-ix-row__link:hover .sv-ix-row__name { color: var(--ink-600); }
}

/* sticky picture column */
.sv-ix__media { position: sticky; top: 6rem; }
.sv-ix__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: calc(100vh - 8rem);
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-800);
  box-shadow: var(--sh-md);
}
.sv-ix__pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 899px) {
  .sv-ix__body { grid-template-columns: minmax(0, 1fr); }
  .sv-ix__media { display: none; }
  .sv-ix-row__pic {
    display: block;
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: .5rem;
  }
  .sv-ix-row__pic img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
  .sv-ix-row__link::before { display: none; }
}

/* ---- index: tour operators and trade ------------------------------------- */
.sv-ix-trade {
  background: var(--ink-800);
  padding-block: clamp(5.5rem, 11vw, 9rem);
  overflow: hidden;
}
.sv-ix-trade__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.sv-ix-trade__copy { display: grid; gap: 1.5rem; align-content: start; }
.sv-ix-trade__copy h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); max-width: 11em; }
.sv-ix-trade__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: .5rem; }
.sv-ix-trade__cars { display: grid; gap: 1.25rem; }
.sv-ix-trade__label { font-size: .8125rem; font-weight: 600; letter-spacing: .01em; color: var(--gold-400); }
.sv-ix-trade__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sv-ix-car {
  display: grid;
  gap: .25rem;
  padding: 1.25rem 1.25rem 1.5rem;
  border-radius: var(--r-md);
  background: rgba(244, 241, 232, .05);
  border: 1px solid rgba(244, 241, 232, .1);
  transition: transform .4s var(--ease-out), border-color .3s var(--ease), background-color .3s var(--ease);
}
.sv-ix-car:active { transform: scale(.98); }
.sv-ix-car__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  margin-bottom: .75rem;
  background: radial-gradient(55% 16% at 50% 90%, rgba(0, 0, 0, .45), transparent 70%);
}
.sv-ix-car__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease-out); }
.sv-ix-car__name { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; color: var(--bone-100); }
.sv-ix-car__seats { font-size: .8125rem; color: var(--on-ink-soft); }
@media (hover: hover) and (pointer: fine) {
  .sv-ix-car:hover { border-color: rgba(232, 185, 85, .45); background: rgba(244, 241, 232, .08); }
  .sv-ix-car:hover .sv-ix-car__stage img { transform: translateX(6px) scale(1.03); }
}
@media (max-width: 899px) { .sv-ix-trade__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .sv-ix-car { padding: 1rem; } .sv-ix-car__name { font-size: 1.25rem; } }

/* ---- index: what we need for a quote -------------------------------------- */
.sv-ix-need { padding-block: clamp(6rem, 12vw, 10rem); }
.sv-ix-need__h {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--gold-600);
  margin-bottom: 1.75rem;
}
.sv-ix-need__text {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 5.4vw, 5rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  max-width: 17em;
  text-wrap: balance;
}
.sv-ix-need__text em { font-style: italic; color: var(--gold-600); }
.sv-ix-need__notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.sv-ix-need__notes li {
  padding-top: 1.25rem;
  border-top: 1px solid var(--bone-400);
  color: var(--fg-soft);
  font-size: .9688rem;
}
@media (max-width: 820px) { .sv-ix-need__notes { grid-template-columns: minmax(0, 1fr); } }

/* ---- detail: hero ---------------------------------------------------------- */
.hero.sv-hero {
  align-items: center;
  min-height: min(100svh, 62rem);
  padding-block: clamp(9rem, 20vh, 12rem) clamp(5rem, 12vh, 8rem);
  text-align: center;
  background: var(--ink-900);
}
.hero.sv-hero::before {
  background:
    radial-gradient(44% 16% at 50% 27%, rgba(3, 21, 12, .66), transparent 75%),
    radial-gradient(70% 62% at 50% 56%, rgba(3, 21, 12, .8) 0%, rgba(3, 21, 12, .58) 55%, rgba(3, 21, 12, .3) 100%),
    linear-gradient(to bottom, rgba(3, 21, 12, .72) 0%, rgba(3, 21, 12, 0) 26%, rgba(3, 21, 12, 0) 70%, rgba(3, 21, 12, .82) 100%);
}
@media (max-width: 899px) {
  /* on a phone the words cover most of the photo, so the scrim is even */
  .hero.sv-hero::before {
    background:
      radial-gradient(90% 50% at 50% 50%, rgba(3, 21, 12, .45), transparent 80%),
      linear-gradient(to bottom, rgba(3, 21, 12, .8) 0%, rgba(3, 21, 12, .6) 30%, rgba(3, 21, 12, .6) 70%, rgba(3, 21, 12, .88) 100%);
  }
}
.sv-hero__media { position: absolute; inset: -4% 0 0; z-index: -2; overflow: hidden; }
.sv-hero__img { width: 100%; height: 100%; object-fit: cover; }
.sv-hero__in { justify-items: center; gap: clamp(1.25rem, 2.4vw, 1.75rem); }
.sv-hero .breadcrumb { justify-content: center; color: rgba(244, 241, 232, .86); }
.sv-hero .sv-hero__title {
  font-size: clamp(2.75rem, 6.6vw, 6.5rem);
  line-height: .98;
  letter-spacing: -.025em;
  max-width: 11.5em;
}
.sv-hero .lede { max-width: 50ch; margin-inline: auto; color: rgba(251, 249, 244, .95); }
.sv-hero__actions { justify-content: center; margin-top: .5rem; }

/* the split hero: title on ink at the left, a tall photo down the right */
.hero.sv-hero--split {
  text-align: left;
  align-items: center;
  min-height: min(100svh, 56rem);
  padding-block: clamp(9rem, 19vh, 11.5rem) clamp(4rem, 10vh, 6.5rem);
}
/* a clean vertical cut between the ink and the photo; the only shading is a
   band along the top that keeps the header readable over a bright sky */
.hero.sv-hero--split::before {
  background: linear-gradient(to bottom, rgba(3, 21, 12, .72) 0%, rgba(3, 21, 12, 0) 24%, rgba(3, 21, 12, 0) 82%, rgba(3, 21, 12, .35) 100%);
}
.sv-hero--split .sv-hero__media { inset: 0 0 0 auto; width: 47%; }
.sv-hero--split .sv-hero__in { justify-items: start; }
.sv-hero--split .breadcrumb { justify-content: flex-start; color: rgba(244, 241, 232, .78); }
.sv-hero--split .sv-hero__title { font-size: clamp(2.75rem, 5vw, 5.25rem); max-width: 8em; }
.sv-hero--split .lede { margin-inline: 0; max-width: min(32rem, 40vw); color: var(--on-ink-soft); }
.sv-hero--split .sv-hero__actions { justify-content: flex-start; }
.sv-hero--split .scroll-cue { display: none; }
@media (max-width: 899px) {
  /* stacked: the words on ink, then the photo straddling ink and bone */
  .hero.sv-hero--split {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-block: clamp(7.5rem, 22vw, 9rem) 0;
    background: linear-gradient(to bottom, var(--ink-900) calc(100% - 4.5rem), var(--bone-200) calc(100% - 4.5rem));
  }
  .hero.sv-hero--split::before { display: none; }
  .sv-hero--split .sv-hero__media {
    order: 2;
    position: relative;
    inset: auto;
    width: auto;
    margin: clamp(2.5rem, 7vw, 3.5rem) var(--gutter) 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
  }
  .sv-hero--split .lede { max-width: 46ch; }
}

/* ---- detail: intro ---------------------------------------------------------- */
.sv-intro { padding-block: clamp(6rem, 12vw, 10rem) clamp(5.5rem, 11vw, 9rem); }
.sv-intro__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.sv-intro__copy { grid-column: 1 / span 7; display: grid; gap: clamp(2rem, 4vw, 3rem); }
.sv-intro__lead {
  font-family: var(--serif);
  font-size: clamp(1.875rem, 3.1vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--fg);
  max-width: 17em;
  text-wrap: balance;
}
.sv-intro__more {
  columns: 2;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--bone-400);
  color: var(--fg-soft);
}
.sv-intro__more p + p { margin-top: 1.25rem; }
.sv-intro__media { grid-column: 9 / -1; position: relative; padding-bottom: clamp(4rem, 8vw, 6rem); margin-top: clamp(0rem, 4vw, 3rem); }
.sv-intro__frame { border-radius: var(--r-md); overflow: hidden; }
.sv-intro__frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sv-intro__inset {
  position: absolute;
  left: -30%;
  bottom: 0;
  width: 58%;
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: 0 0 0 8px var(--bone-200), var(--sh-md);
}
.sv-intro__inset img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 1100px) { .sv-intro__more { columns: 1; } }
@media (max-width: 899px) {
  .sv-intro__copy, .sv-intro__media { grid-column: 1 / -1; }
  .sv-intro__media { width: min(100%, 30rem); margin: 1rem 0 0 auto; padding-bottom: 3.5rem; }
  .sv-intro__frame img { aspect-ratio: 1; }
  .sv-intro__inset { left: -.25rem; width: 46%; box-shadow: 0 0 0 6px var(--bone-200), var(--sh-md); }
}

/* ---- detail: statement band ------------------------------------------------ */
.sv-statement { padding-block: clamp(6rem, 13vw, 11rem); position: relative; }
.sv-statement::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 1px; height: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(to bottom, transparent, var(--gold-500));
}
.sv-statement .sv-statement__text {
  font-family: var(--serif);
  font-size: clamp(2.125rem, 4.8vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  color: var(--bone-100);
  max-width: 19em;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}

.sv-statement--light { background: var(--gold-100); }
.sv-statement--light::before { background: linear-gradient(to bottom, transparent, var(--gold-600)); }
.sv-statement--light .sv-statement__text { color: var(--ink-800); }

/* ---- detail: who it's for (asymmetric panels) ------------------------------ */
.sv-who { padding-block: clamp(6rem, 12vw, 10rem) clamp(5rem, 10vw, 8rem); }
.sv-who__grid {
  --g: clamp(.75rem, 1.4vw, 1.25rem);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--g);
  align-items: stretch;
}
.sv-who__col { display: flex; flex-direction: column; gap: var(--g); }
.sv-who__col > :last-child { flex: 1 1 auto; }
.sv-who__panel {
  display: grid;
  align-content: start;
  gap: 1.125rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-radius: var(--r-md);
  background: var(--bone-100);
  box-shadow: var(--sh-sm);
}
.sv-who__panel h3 { font-size: clamp(1.625rem, 2.4vw, 2.25rem); max-width: 14em; }
.sv-who__panel p { color: var(--fg-soft); margin: 0; max-width: 58ch; }
.sv-who__panel--1 { background: var(--ink-800); box-shadow: none; padding-block: clamp(2.25rem, 4vw, 3.5rem); gap: 1.5rem; }
.sv-who__panel--1 h3 { font-size: clamp(2rem, 3.4vw, 3.25rem); color: var(--bone-100); }
.sv-who__panel--1 p { color: var(--on-ink-soft); font-size: 1.0625rem; }
.sv-who__panel--3 { background: var(--gold-100); box-shadow: none; }
.sv-who__pic { flex: none; border-radius: var(--r-md); overflow: hidden; background: var(--bone-300); }
/* square, so a 500px fleet photo is drawn at about its own size */
.sv-who__pic img { width: 100%; aspect-ratio: 1; object-fit: cover; }
/* alt: the lead panel goes light and the third one takes the ink */
.sv-who--alt .sv-who__panel--1 { background: var(--bone-100); box-shadow: var(--sh-sm); }
.sv-who--alt .sv-who__panel--1 h3 { color: var(--fg); }
.sv-who--alt .sv-who__panel--1 p { color: var(--fg-soft); }
.sv-who--alt .sv-who__panel--3 { background: var(--ink-800); }
.sv-who--alt .sv-who__panel--3 h3 { color: var(--bone-100); }
.sv-who--alt .sv-who__panel--3 p { color: var(--on-ink-soft); }
@media (max-width: 899px) {
  .sv-who__grid { grid-template-columns: minmax(0, 1fr); }
  .sv-who__pic img { aspect-ratio: 4 / 3; }
}
@media (min-width: 600px) and (max-width: 899px) {
  /* photo and last panel side by side, so the photo stays near its real size */
  .sv-who__col--side { flex-direction: row; }
  .sv-who__pic { width: 44%; }
  .sv-who__pic img { height: 100%; aspect-ratio: auto; min-height: 16rem; }
}

/* ---- detail: how booking works, the drawn line ------------------------------ */
.sv-how--line { background: var(--bone-100); padding-block: clamp(6rem, 12vw, 10rem); }
.sv-how__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.sv-how__aside { position: sticky; top: 7rem; display: grid; gap: 1.25rem; justify-items: start; }
.sv-how__aside h2 { font-size: clamp(2.5rem, 5.2vw, 4.5rem); max-width: 8em; }
.sv-how__aside p { color: var(--fg-soft); }
.sv-steps { position: relative; }
.sv-steps__line {
  position: absolute;
  left: calc(2.25rem - 2px);
  top: 3.25rem;
  width: 4px;
  height: calc(100% - 6.5rem);
}
.sv-line-base, .sv-line-ink { fill: none; stroke-linecap: butt; stroke-width: 2; }
.sv-line-base { stroke: rgba(7, 38, 22, .12); }
.sv-line-ink { stroke: var(--gold-500); }
.sv-step {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  padding-block: 1.5rem 2.75rem;
}
.sv-step__n {
  font-family: var(--serif);
  font-size: clamp(3rem, 4.6vw, 4.25rem);
  line-height: 1;
  text-align: center;
  padding-block: .375rem;
  background: var(--bone-100);
  color: var(--gold-500);
  transition: color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease);
}
/* numbers wait as outlines until the line reaches them (never hidden) */
:where(.has-motion) .sv-step:where(:not(.is-reached)) .sv-step__n {
  color: transparent;
  -webkit-text-stroke: 1px rgba(7, 38, 22, .35);
}
.sv-step__body { display: grid; gap: .625rem; padding-top: .875rem; }
.sv-step__body h3 { font-size: clamp(1.5rem, 2.3vw, 2rem); }
.sv-step__body p { color: var(--fg-soft); margin: 0; }
@media (max-width: 899px) {
  .sv-how__grid { grid-template-columns: minmax(0, 1fr); }
  .sv-how__aside { position: static; }
  .sv-step { grid-template-columns: 3rem minmax(0, 1fr); padding-block: 1rem 2rem; }
  .sv-steps__line { left: calc(1.5rem - 2px); }
  .sv-step__body { padding-top: .5rem; }
}

/* ---- detail: how booking works, the sideways rail ----------------------------- */
.sv-how--rail {
  background: var(--ink-900);
  padding-block: clamp(5rem, 10vw, 7rem);
  overflow: hidden;
}
@media (min-width: 981px) {
  /* sized to the screen, so the pinned rail fits in one view */
  .sv-how--rail {
    min-height: 100svh;
    padding-block: clamp(2.5rem, 7vh, 5rem);
    display: flex; flex-direction: column; justify-content: center;
  }
}
@media (min-width: 900px) and (max-width: 980px) {
  /* the fixed action bar still shows here: keep the sticky picture clear of it */
  .sv-ix__frame { max-height: calc(100vh - 8rem - 4.75rem); }
}
.sv-rail__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  align-items: end;
  gap: 1.25rem 3rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.sv-rail__head h2 { font-size: clamp(2.5rem, 5.2vw, 4.5rem); color: var(--bone-100); }
.sv-rail__aside { display: grid; gap: 1.25rem; }
.sv-rail__progress { display: none; height: 2px; background: rgba(244, 241, 232, .14); overflow: hidden; }
.sv-rail__progress span { display: block; height: 100%; background: var(--gold-400); transform-origin: 0 50%; }
/* Static by default: a grid that wraps, so every step is on screen with
   JS off, reduced motion and below 981px. The single sliding row only exists
   while the engine is running (.has-motion) and pins it, from 981px up. */
.sv-rail__track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 1.6vw, 1.25rem);
}
@media (min-width: 600px) and (max-width: 980px) {
  .sv-rail__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-rail__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 981px) {
  /* static: every step in one row (--n is the step count, set in the markup) */
  .sv-rail__track { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
  /* pinned: wide cards, so the row runs well past the screen and slides */
  .has-motion .sv-rail__track { display: flex; }
  .has-motion .sv-rail__card { width: clamp(21rem, 34vw, 29rem); }
}
.sv-rail__card {
  flex: none;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: .875rem;
  padding: clamp(1.75rem, 2.6vw, 2.5rem);
  border-radius: var(--r-md);
  background: var(--ink-800);
  border: 1px solid rgba(244, 241, 232, .08);
}
.sv-rail__card:last-child { background: var(--gold-500); border-color: var(--gold-500); }
.sv-rail__n {
  font-family: var(--serif);
  font-size: clamp(4.5rem, 7vw, 6.5rem);
  line-height: .8;
  color: var(--gold-400);
  margin-bottom: clamp(1.5rem, 4vw, 3.5rem);
}
.sv-rail__card h3 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); color: var(--bone-100); }
.sv-rail__card p { margin: 0; font-size: .9688rem; }
.sv-rail__card:last-child .sv-rail__n, .sv-rail__card:last-child h3 { color: var(--ink-900); }
.on-ink .sv-rail__card:last-child p { color: rgba(3, 21, 12, .78); }
@media (min-width: 981px) {
  .motion-ready .sv-rail__progress { display: block; }
}
@media (min-width: 981px) and (max-height: 820px) {
  .sv-rail__head { margin-bottom: 1.5rem; }
  .sv-rail__head h2 { font-size: clamp(2.5rem, 4.4vw, 3.5rem); }
  .sv-rail__n { font-size: 3.25rem; margin-bottom: .75rem; }
  .sv-rail__card { padding: 1.5rem; }
}
@media (max-width: 980px) {
  /* the wrapped grid, not the shared swipe row: every step stays in view */
  .sv-rail__head { grid-template-columns: minmax(0, 1fr); }
  .sv-how--rail .sv-rail__track { overflow: visible; scroll-snap-type: none; }
  .sv-rail__n { font-size: 3.5rem; margin-bottom: .75rem; }
}

/* ---- detail: what's included (gapless hairline grid) ----------------------- */
.sv-inc { padding-block: clamp(6rem, 12vw, 10rem); }
.sv-inc__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 1px;
  background: var(--bone-400);
  border: 1px solid var(--bone-400);
  border-radius: var(--r-md);
  overflow: hidden;
}
.sv-inc__cell {
  display: grid;
  align-content: start;
  gap: .75rem;
  padding: clamp(1.75rem, 2.8vw, 2.5rem);
  background: var(--bone-100);
  min-height: 13rem;
}
.sv-inc__cell h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); }
.sv-inc__cell h3::before {
  content: "";
  display: block;
  width: 1.75rem; height: 2px;
  background: var(--gold-500);
  margin-bottom: 1.25rem;
}
.sv-inc__cell p { color: var(--fg-soft); margin: 0; font-size: .9688rem; }
.sv-inc__cell--lead { background: var(--ink-800); }
.sv-inc__cell--lead h3 { color: var(--bone-100); font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
.sv-inc__cell--lead h3::before { background: var(--gold-400); }
.sv-inc__cell--lead p { color: var(--on-ink-soft); font-size: 1.0625rem; max-width: 46ch; }
.sv-inc__cell--w3 { grid-column: span 2; }
@media (max-width: 980px) {
  .sv-inc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-inc__cell--w3 { grid-column: auto; }
  .sv-inc__cell--w2 { grid-column: span 2; }
}
@media (max-width: 600px) {
  .sv-inc__grid { grid-template-columns: minmax(0, 1fr); }
  .sv-inc__cell--w2 { grid-column: auto; }
  .sv-inc__cell { min-height: 0; }
}

/* ---- detail: good to know ---------------------------------------------------- */
.sv-know { padding-block: clamp(5rem, 10vw, 8rem) clamp(5.5rem, 11vw, 9rem); background: var(--bone-300); }
.sv-know__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 2rem clamp(3rem, 7vw, 7rem);
  align-items: start;
}
.sv-know__aside { position: sticky; top: 7rem; display: grid; gap: 1rem; }
.sv-know__aside h2 { font-size: clamp(2.5rem, 5vw, 4.25rem); }
.sv-know__aside p { color: var(--fg-soft); }
.sv-know__list li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  padding-block: 1.375rem;
  border-top: 1px solid rgba(7, 38, 22, .14);
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.55;
}
.sv-know__list li:last-child { border-bottom: 1px solid rgba(7, 38, 22, .14); }
.sv-know__list li::before {
  content: "";
  width: .5rem; height: .5rem;
  margin-top: .6rem;
  border-radius: 50%;
  background: var(--gold-500);
}
@media (max-width: 899px) {
  .sv-know__grid { grid-template-columns: minmax(0, 1fr); }
  .sv-know__aside { position: static; }
}

/* ---- detail: vehicles (a showroom line up) ----------------------------------- */
.sv-veh { padding-block: clamp(6rem, 12vw, 10rem) clamp(5rem, 10vw, 8rem); }
.sv-veh__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.75rem, 1.2vw, 1rem); }
.sv-car {
  display: grid;
  gap: .375rem;
  height: 100%;
  align-content: start;
  padding: 1rem 1.125rem 1.375rem;
  border-radius: var(--r-md);
  background: var(--bone-100);
  box-shadow: var(--sh-sm);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.sv-car:active { transform: scale(.98); }
.sv-car__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: 0 -.25rem .75rem;
  border-radius: var(--r-sm);
  background:
    radial-gradient(60% 16% at 50% 88%, rgba(3, 21, 12, .18), transparent 70%),
    linear-gradient(180deg, var(--bone-200) 0%, var(--bone-300) 100%);
}
.sv-car__stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: .75rem .875rem .5rem;
  object-fit: contain;
  transition: transform .6s var(--ease-out);
}
.sv-car__seats { font-size: .8125rem; font-weight: 600; letter-spacing: .01em; color: var(--gold-600); }
.sv-car__name { font-size: clamp(1.1875rem, 1.5vw, 1.375rem); line-height: 1.12; }
.sv-car__more {
  display: inline-flex; align-items: center; gap: .4375rem;
  margin-top: .5rem;
  font-size: .8125rem; font-weight: 600; color: var(--fg-soft);
  transition: color .2s var(--ease);
}
.sv-car__more svg { transition: transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .sv-car:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
  .sv-car:hover .sv-car__stage img { transform: translateX(6px) scale(1.04); }
  .sv-car:hover .sv-car__more { color: var(--gold-600); }
  .sv-car:hover .sv-car__more svg { transform: translateX(.375rem); }
}
@media (max-width: 1100px) and (min-width: 821px) {
  .sv-veh__row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sv-veh__row > li { grid-column: span 2; }
  .sv-veh__row > li:nth-child(4) { grid-column: 2 / span 2; }
}
/* phones: a swipe row that runs to both edges of the screen */
@media (max-width: 820px) {
  .sv-veh__row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(72%, 17rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding: .25rem var(--gutter) 1.25rem;
    scrollbar-width: none;
  }
  .sv-veh__row::-webkit-scrollbar { display: none; }
  .sv-veh__row > li { scroll-snap-align: start; }
}

/* ---- detail: related tours ------------------------------------------------------ */
.sv-tours { padding-block: clamp(4rem, 8vw, 6rem) clamp(6rem, 12vw, 10rem); }
.sv-tours__grid { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem); }
.sv-tours__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-tours__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-tour { display: grid; gap: 1.125rem; }
.sv-tour__pic { display: block; border-radius: var(--r-md); overflow: hidden; background: var(--ink-700); }
.sv-tour__pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s var(--ease-out); }
.sv-tours__grid--2 .sv-tour__pic img { aspect-ratio: 16 / 9; }
.sv-tour__body { display: grid; gap: .4375rem; }
.sv-tour__meta { font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--gold-600); }
.sv-tour h3 { font-size: clamp(1.625rem, 2.4vw, 2.125rem); transition: color .3s var(--ease); }
.sv-tour__blurb { color: var(--fg-soft); font-size: .9688rem; max-width: 42ch; }
.sv-tour:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
  .sv-tour:hover .sv-tour__pic img { transform: scale(1.05); }
  .sv-tour:hover h3 { color: var(--gold-600); }
}
@media (max-width: 899px) {
  .sv-tours__grid--3, .sv-tours__grid--2 { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .sv-tour { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: 1rem; }
  .sv-tour__pic img, .sv-tours__grid--2 .sv-tour__pic img { aspect-ratio: 1; }
  .sv-tour h3 { font-size: 1.5rem; }
  .sv-tour__blurb { font-size: .875rem; }
}

/* ---- detail: FAQs ------------------------------------------------------------------- */
.sv-faq { padding-block: clamp(6rem, 12vw, 10rem); background: var(--bone-100); }
.sv-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem clamp(3rem, 7vw, 7rem);
  align-items: start;
}
.sv-faq__aside { position: sticky; top: 7rem; display: grid; gap: 1.25rem; }
.sv-faq__aside h2 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); }
.sv-faq__aside p { color: var(--fg-soft); }
.sv-faq__aside a {
  color: var(--gold-600);
  padding-block: .75rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.sv-faq__aside a[href^="tel:"] { white-space: nowrap; }
.sv-faq__item { border-top: 1px solid var(--bone-400); }
.sv-faq__item:last-child { border-bottom: 1px solid var(--bone-400); }
.sv-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 44px;
  padding-block: 1.5rem;
  cursor: pointer;
  list-style: none;
}
.sv-faq__item summary::-webkit-details-marker { display: none; }
.sv-faq__q {
  font-family: var(--serif);
  font-size: clamp(1.3125rem, 1.9vw, 1.625rem);
  line-height: 1.2;
  transition: color .2s var(--ease);
}
.sv-faq__icon {
  position: relative;
  flex: none;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--bone-400);
  transition: transform .4s var(--ease-out), background-color .25s var(--ease), border-color .25s var(--ease);
}
.sv-faq__icon::before, .sv-faq__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: .8125rem; height: 1.5px;
  margin: -.75px 0 0 -.40625rem;
  background: var(--ink-800);
  transition: transform .4s var(--ease-out);
}
.sv-faq__icon::after { transform: rotate(90deg); }
.sv-faq__item[open] .sv-faq__icon { background: var(--gold-500); border-color: var(--gold-500); transform: rotate(180deg); }
.sv-faq__item[open] .sv-faq__icon::after { transform: rotate(0deg); }
.sv-faq__a { padding: 0 3.5rem 1.75rem 0; }
.sv-faq__a p { color: var(--fg-soft); max-width: 60ch; }
/* the answer settles in as it opens: opacity and a short rise, nothing else */
.sv-faq__item[open] .sv-faq__a { animation: svFaqIn .5s var(--ease-out) both; }
@keyframes svFaqIn {
  from { opacity: 0; transform: translate3d(0, -.5rem, 0); }
  to   { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  .sv-faq__item summary:hover .sv-faq__q { color: var(--gold-600); }
  .sv-faq__item summary:hover .sv-faq__icon { border-color: var(--gold-500); }
}
@media (max-width: 899px) {
  .sv-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .sv-faq__aside { position: static; }
  .sv-faq__a { padding-right: 0; }
}

/* ---- CTA (index and detail) -------------------------------------------------------- */
.sv-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--bone-100);
  background: var(--ink-900);
  padding-block: clamp(7rem, 15vw, 12rem);
}
.sv-cta__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.sv-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(3, 21, 12, .94) 18%, rgba(3, 21, 12, .76) 58%, rgba(3, 21, 12, .58) 100%),
    linear-gradient(to top, rgba(3, 21, 12, .6), transparent 40%);
}
.sv-cta__in {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem clamp(3rem, 6vw, 6rem);
  align-items: end;
}
.sv-cta__title { font-size: clamp(3rem, 7vw, 6.5rem); line-height: .96; letter-spacing: -.025em; max-width: 9em; }
.sv-cta__side { display: grid; gap: 1.75rem; }
.sv-cta__side p { color: rgba(244, 241, 232, .82); margin: 0; }
.sv-cta__actions { display: flex; flex-wrap: wrap; gap: .875rem; }
.sv-cta .btn--ghost { --btn-fg: var(--bone-100); border-color: rgba(244, 241, 232, .3); }
.sv-cta .sv-cta__lines { font-size: .875rem; color: rgba(244, 241, 232, .82); }
.sv-cta__line { white-space: nowrap; }
.sv-cta__lines a { display: inline-block; padding-block: .75rem; color: var(--bone-100); font-weight: 600; margin-left: .25rem; }
@media (hover: hover) and (pointer: fine) {
  .sv-cta__lines a:hover, .sv-inline-link:hover { color: var(--gold-400); }
}
.sv-cta__sep { display: inline-block; width: 1px; height: .875rem; margin: 0 .875rem; vertical-align: -.125rem; background: rgba(244, 241, 232, .28); }
@media (max-width: 899px) {
  .sv-cta__in { grid-template-columns: minmax(0, 1fr); }
  .sv-cta__actions .btn { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .sv-cta__sep { display: block; width: 0; height: 0; margin: 0; }
}

/* ---- detail: other services ------------------------------------------------------------ */
.sv-others { padding-block: clamp(5rem, 10vw, 8rem); }
.sv-others .sv-head h2 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); }
.sv-others__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
}
.sv-other {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding-block: 1.125rem;
  border-top: 1px solid var(--bone-400);
  transition: transform .4s var(--ease-out);
}
.sv-other:active { transform: scale(.98); }
.sv-other__pic { width: 4.5rem; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--ink-700); }
.sv-other__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.sv-other__name { font-family: var(--serif); font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.12; transition: color .25s var(--ease); }
.sv-other__arrow { color: var(--gold-600); transition: transform .4s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .sv-other:hover .sv-other__name { color: var(--gold-600); }
  .sv-other:hover .sv-other__arrow { transform: translateX(5px); }
  .sv-other:hover .sv-other__pic img { transform: scale(1.08); }
}
@media (max-width: 980px) { .sv-others__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sv-others__list { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .sv-ix-row__link::before { transition: none; }
}

/* ---- 40-tours.css ---- */
/* ==========================================================================
   Tours family: tours.html and tours/<slug>.html
   Concept: a travel magazine you read like a route. The index is a contents
   page where each tour is a chapter; each tour page lays its stops along a
   line that draws itself as you scroll.
   Every class here starts with tr-. Shared classes are only ever styled
   underneath a tr- wrapper.
   ========================================================================== */

/* ---- layout primitives --------------------------------------------------- */
.tr-wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A full bleed grid: 12 content columns, plus one flexible track each side so
   an image can run off the edge of the screen while text stays on the grid.
   The 12 columns add up to exactly the width of the site's .wrap (--page less
   the gutters), so text lines up with the header and footer at every width. */
.tr-grid {
  --tr-gap: clamp(1rem, 2vw, 2rem);
  display: grid;
  column-gap: var(--tr-gap);
  grid-template-columns:
    [full-start] minmax(max(0px, calc(var(--gutter) - var(--tr-gap))), 1fr)
    [content-start] repeat(12, [col] minmax(0, calc((var(--page) - 2 * var(--gutter) - 11 * var(--tr-gap)) / 12)))
    [content-end] minmax(max(0px, calc(var(--gutter) - var(--tr-gap))), 1fr) [full-end];
}
@media (max-width: 899px) {
  .tr-grid {
    column-gap: 0;
    grid-template-columns: [full-start] var(--gutter) [content-start] minmax(0, 1fr) [content-end] var(--gutter) [full-end];
  }
  .tr-grid > * { grid-column: content-start / content-end; }
}

/* a frame that clips, a layer that drifts, a layer that zooms on hover.
   Three elements so the mask reveal, the parallax and the hover never fight
   over the same transform. */
.tr-par { position: absolute; inset: 0; }
.tr-par > .tr-zoom, .tr-par > img { position: absolute; inset: 0; }
.tr-zoom { display: block; width: 100%; height: 100%; }
.tr-zoom img, .tr-par img { width: 100%; height: 100%; object-fit: cover; }
.tr-zoom { transition: transform 1.1s var(--ease-out); }

.tr-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
@media (max-width: 560px) {
  .tr-actions .btn { flex: 1 1 100%; }
}

/* SplitText wraps each line of a [data-split] heading in a clipping div. Our
   display type runs at a line height under 1, so give each mask room below
   the baseline (and take it back with a negative margin) or the descenders
   of y, p and g get cut off. */
:is(.tr-mast__title, .tr-chap__name, .tr-how__title, .tr-close__title,
    .tr-hero__title, .tr-route__title, .tr-details__title) > div {
  padding-bottom: .18em;
  margin-bottom: -.18em;
}

/* the drawn line: a faint track underneath, gold ink drawn over it */
.tr-line-base, .tr-line-ink { fill: none; stroke-linecap: butt; }
.tr-line-base { stroke: rgba(7, 38, 22, .14); stroke-width: 2; }
.tr-line-ink { stroke: var(--gold-500); stroke-width: 2; }
.on-ink .tr-line-base { stroke: rgba(244, 241, 232, .16); }
.on-ink .tr-line-ink { stroke: var(--gold-400); }


/* ==========================================================================
   INDEX: tours.html
   ========================================================================== */

/* ---- masthead: the title pins while the cover photo slides over it ------- */
.tr-cover { position: relative; }
.tr-mast {
  background: var(--bone-200);
  padding-block: clamp(2rem, 4.5vw, 4rem) clamp(2.5rem, 5vw, 4.5rem);
}
.tr-mast__in { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); transform-origin: 50% 0; }
.tr-mast .breadcrumb--dark { color: var(--fg-soft); }
.tr-mast__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: 2rem;
  align-items: end;
}
.tr-mast__title {
  grid-column: 1 / span 8;
  font-size: clamp(3.25rem, 8.6vw, 9.25rem);
  line-height: .9;
  letter-spacing: -.035em;
  text-wrap: initial;
}
.tr-mast__title em { font-style: italic; color: var(--gold-600); padding-right: .04em; }
.tr-mast__aside { grid-column: 9 / -1; display: grid; gap: 1.5rem; padding-bottom: .5rem; }
.tr-mast__lede {
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 34ch;
}
/* contents: jump straight to a tour */
.tr-mast__toc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--bone-400);
}
.tr-mast__toc li { border-bottom: 1px solid var(--bone-400); }
.tr-mast__toc li:nth-child(odd) { border-right: 1px solid var(--bone-400); }
.tr-mast__toc a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .75rem;
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.1;
  transition: color .2s var(--ease);
}
.tr-mast__toc li:nth-child(odd) a { padding-left: 0; }
@media (max-width: 899px) {
  .tr-mast__title, .tr-mast__aside { grid-column: 1 / -1; }
  .tr-mast__lede { max-width: 46ch; }
}

.tr-coverimg {
  position: relative;
  z-index: 1;
  height: clamp(24rem, 78vh, 54rem);
  overflow: hidden;
  background: var(--ink-800);
}
.tr-coverimg img { animation: tr-settle 2.2s var(--ease-out) both; }
@media (max-width: 899px) { .tr-coverimg { height: clamp(20rem, 62vh, 34rem); } }

/* The pin itself is plain CSS: the masthead sticks and everything after it
   (opaque, one layer up) slides over. Desktop only, and never with reduced motion. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .tr-mast { position: sticky; top: 0; z-index: 0; }
}
.tr-chapters, .tr-how, .tr-close { position: relative; z-index: 1; }

@keyframes tr-settle {
  from { transform: scale(1.1); }
  to   { transform: scale(1); }
}

/* ---- chapters -------------------------------------------------------------- */
.tr-chapters {
  background: var(--bone-200);
  padding-block: clamp(5rem, 11vw, 10rem) clamp(6rem, 12vw, 11rem);
  display: grid;
  row-gap: clamp(6rem, 12vw, 11rem);
}
.tr-chap { scroll-margin-top: 5rem; }
.tr-chap__link { color: inherit; align-items: start; }
.tr-chap__media {
  position: relative;
  grid-row: 1;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-700);
}
.tr-chap__text {
  grid-row: 1;
  display: grid;
  gap: 1.125rem;
  align-content: start;
}
@media (min-width: 900px) { .tr-chap__text { align-self: center; } }
.tr-chap__kicker {
  display: flex;
  align-items: center;
  gap: .875rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--gold-600);
}
.tr-chap__kicker::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  flex: none;
}
.tr-chap__name {
  font-size: clamp(3rem, 5.6vw, 6rem);
  line-height: .92;
  letter-spacing: -.03em;
  transition: color .3s var(--ease);
}
.tr-chap__blurb {
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 36ch;
}
.tr-chap__go {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  width: fit-content;
  min-height: 44px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink-800);
  border-bottom: 1px solid var(--gold-500);
  transition: color .2s var(--ease), transform .16s var(--ease-out);
}
.tr-chap__go svg { color: var(--gold-600); transition: transform .35s var(--ease-out); }

/* the first stops of the tour, on a short gold line that draws itself */
.tr-chap__route { position: relative; margin-block: .25rem .375rem; }
.tr-chap__line {
  position: absolute;
  left: 4px;
  top: .5rem;
  width: 2px;
  height: calc(100% - .5rem);
  pointer-events: none;
}
.tr-chap__stops { position: relative; display: grid; }
.tr-chap__stops li {
  position: relative;
  padding: 0 0 .625rem 1.75rem;
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 1.35vw, 1.3125rem);
  line-height: 1.2;
  color: var(--ink-800);
}
.tr-chap__stops li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 4px var(--bone-200);
}
/* the last stop hides the tail of the line below its dot */
.tr-chap__stops li:last-child { padding-bottom: 0; }
.tr-chap__stops li:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(.3em + 10px);
  bottom: 0;
  width: 10px;
  background: var(--bone-200);
}
.tr-chap__link:active .tr-chap__go { transform: scale(.97); }

@media (min-width: 900px) {
  /* image left, bleeding off the left edge */
  .tr-chap--l .tr-chap__media { grid-column: full-start / col 8; }
  .tr-chap--l .tr-chap__text  { grid-column: col 9 / content-end; }
  /* image right, bleeding off the right edge */
  .tr-chap--r .tr-chap__media { grid-column: col 6 / full-end; }
  .tr-chap--r .tr-chap__text  { grid-column: content-start / col 5; }
}
@media (max-width: 899px) {
  .tr-chap__link { row-gap: 0; }
  .tr-chap__link > .tr-chap__media { grid-column: full-start / full-end; aspect-ratio: 5 / 4; }
  .tr-chap__link > .tr-chap__text { grid-row: 2; padding-top: 2rem; gap: 1rem; }
  .tr-chap__name { font-size: clamp(2.75rem, 12vw, 4.5rem); }
}

@media (hover: hover) and (pointer: fine) {
  .tr-mast__toc a:hover { color: var(--gold-600); }
  .tr-chap__link:hover .tr-zoom { transform: scale(1.045); }
  .tr-chap__link:hover .tr-chap__name { color: var(--ink-500); }
  .tr-chap__link:hover .tr-chap__go svg { transform: translateX(.5rem); }
}
.tr-chap__link:focus-visible { outline: none; }
.tr-chap__link:focus-visible .tr-chap__media { outline: 3px solid var(--gold-500); outline-offset: -3px; }
.tr-chap__link:focus-visible .tr-chap__go { outline: 2px solid var(--gold-500); outline-offset: 4px; }

/* ---- how a tour day works: four stops along one line --------------------- */
.tr-how {
  background: var(--ink-800);
  padding-block: clamp(5.5rem, 11vw, 10rem) clamp(6rem, 12vw, 11rem);
  overflow: hidden;
}
.tr-how__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: 1.5rem;
  align-items: end;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}
.tr-how__title { grid-column: 1 / span 7; font-size: clamp(2.75rem, 6vw, 6rem); line-height: .95; color: var(--bone-100); }
.tr-how__lede { grid-column: 9 / -1; font-size: 1.125rem; }
.tr-how__route { position: relative; --tr-steps-gap: clamp(1.25rem, 3vw, 3rem); }
.tr-how__line { position: absolute; pointer-events: none; }
/* four equal columns: the last dot's centre sits at 75% of the row plus three
   quarters of one gap plus half a dot, and the line stops there */
.tr-how__line--h { left: 0; top: 7px; width: calc(75% + .75 * var(--tr-steps-gap) + 7px); height: 4px; }
.tr-how__line--v { display: none; }
.tr-how__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tr-steps-gap);
}
.tr-how__step { display: grid; gap: .75rem; align-content: start; padding-top: 3rem; position: relative; }
.tr-how__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink-800);
  border: 2px solid var(--gold-400);
}
.tr-how__step h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); color: var(--bone-100); line-height: 1.05; }
.tr-how__step p { font-size: .9688rem; margin: 0; max-width: 30ch; }
@media (max-width: 899px) {
  .tr-how__title, .tr-how__lede { grid-column: 1 / -1; }
  .tr-how__line--h { display: none; }
  .tr-how__line--v { display: block; left: 6px; top: 8px; bottom: 8px; width: 4px; height: calc(100% - 16px); }
  .tr-how__steps { grid-template-columns: 1fr; gap: 2.25rem; }
  .tr-how__step { padding-top: 0; padding-left: 2.5rem; }
  .tr-how__step::before { top: .45rem; }
  .tr-how__step:last-child::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(.45rem + 16px);
    bottom: -8px;
    width: 16px;
    background: var(--ink-800);
  }
}

/* ---- close ------------------------------------------------------------------ */
.tr-close {
  background: var(--bone-300);
  padding-block: clamp(5.5rem, 11vw, 10rem);
}
.tr-close__in {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: 2rem;
  align-items: end;
}
.tr-close__title {
  grid-column: 1 / span 8;
  font-size: clamp(3rem, 7.4vw, 8rem);
  line-height: .92;
  letter-spacing: -.03em;
}
.tr-close__title em { font-style: italic; color: var(--gold-600); }
.tr-close__side { grid-column: 9 / -1; display: grid; gap: 1.5rem; padding-bottom: .75rem; }
.tr-close__side p { font-size: 1.125rem; color: var(--fg-soft); }
.tr-close .tr-actions .btn { flex: 1 1 auto; }
@media (max-width: 899px) {
  .tr-close__title, .tr-close__side { grid-column: 1 / -1; }
}


/* ==========================================================================
   TOUR PAGES: tours/<slug>.html
   ========================================================================== */

/* ---- hero: full screen photo, film title, the header floats over it ----- */
.tr-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(100svh, 1000px);
  padding-block: 11rem clamp(3rem, 6vw, 5rem);
  background: var(--ink-900);
  color: var(--bone-100);
  overflow: hidden;
}
.tr-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.tr-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: tr-settle 2.4s var(--ease-out) both;
}
.tr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(3, 21, 12, .72) 0%, rgba(3, 21, 12, .3) 16%, rgba(3, 21, 12, 0) 32%),
    linear-gradient(to top, rgba(3, 21, 12, .92) 0%, rgba(3, 21, 12, .62) 34%, rgba(3, 21, 12, .12) 70%),
    linear-gradient(to right, rgba(3, 21, 12, .5) 0%, rgba(3, 21, 12, 0) 60%),
    /* a soft pool of shade under the title block, so the small breadcrumb and
       kicker hold AA on the brightest photos (the white rail on the City one) */
    radial-gradient(ellipse 55% 50% at 12% 62%, rgba(3, 21, 12, .5) 0%, rgba(3, 21, 12, 0) 100%);
}
.tr-hero__in { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.tr-hero .breadcrumb { color: rgba(244, 241, 232, .9); }
/* small text over a photo: a soft shadow keeps it clear of bright detail
   (the tram's white lettering, surf) that the scrim alone can't flatten */
.tr-hero .breadcrumb, .tr-hero .tr-hero__kicker { text-shadow: 0 1px 12px rgba(3, 21, 12, .6); }
/* the crumbs are 15px of text: pad the tap area out to 44px without moving anything */
:is(.tr-hero, .tr-mast) .breadcrumb a { display: inline-block; padding-block: .875rem; margin-block: -.875rem; }
.tr-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: 2rem;
  align-items: end;
}
.tr-hero__head { grid-column: 1 / span 7; display: grid; gap: 1.25rem; }
.tr-hero__kicker {
  display: flex;
  align-items: center;
  gap: .875rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .03em;
}
/* two classes, so the base .on-ink p colour (one class, one element) can't win */
.tr-hero .tr-hero__kicker, .tr-card .tr-card__kicker, .tr-next .tr-next__kicker { color: var(--gold-400); }
.tr-hero__kicker::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; flex: none; }
.tr-hero__title {
  font-size: clamp(3.5rem, 10.2vw, 10.5rem);
  line-height: .88;
  letter-spacing: -.035em;
  color: var(--bone-100);
  text-wrap: initial;
}
.tr-hero__title em { font-style: italic; color: var(--bone-200); padding-right: .05em; }
.tr-hero__aside { grid-column: 8 / -1; display: grid; gap: 1.75rem; padding-bottom: .5rem; justify-self: end; max-width: 33rem; }
.tr-hero .tr-hero__lede { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.6; color: rgba(244, 241, 232, .86); max-width: 40ch; }
@media (max-width: 1099px) {
  .tr-hero__head { grid-column: 1 / -1; }
  .tr-hero__aside { grid-column: 1 / span 9; justify-self: start; }
}
@media (max-width: 699px) {
  .tr-hero { padding-block: 8.5rem 2.5rem; }
  .tr-hero__aside { grid-column: 1 / -1; gap: 1.5rem; }
}
@media (max-width: 1099px) {
  /* once the lede drops below the title the text block fills most of the
     screen, so the dark scrim has to reach up to the breadcrumb and kicker,
     not just the buttons */
  .tr-hero::before {
    background:
      linear-gradient(to bottom, rgba(3, 21, 12, .72) 0%, rgba(3, 21, 12, .3) 16%, rgba(3, 21, 12, 0) 32%),
      linear-gradient(to top, rgba(3, 21, 12, .94) 0%, rgba(3, 21, 12, .8) 45%, rgba(3, 21, 12, .68) 72%, rgba(3, 21, 12, .5) 100%);
  }
}
/* the mobile action bar sits over the bottom of the screen */
@media (max-width: 980px) {
  .tr-hero { padding-bottom: calc(clamp(2.5rem, 6vw, 4rem) + 4.5rem); }
}

/* ---- body: story, route, gallery, details beside a sticky booking card --- */
.tr-body {
  background: var(--bone-100);
  padding-block: clamp(5rem, 10vw, 9rem) clamp(5.5rem, 11vw, 10rem);
  row-gap: clamp(6rem, 12vw, 11rem);
}
@media (min-width: 1100px) {
  .tr-story   { grid-column: col 1 / col 9; grid-row: 1; }
  .tr-route   { grid-column: col 1 / col 9; grid-row: 2; }
  .tr-gallery { grid-column: full-start / col 9; grid-row: 3; }
  .tr-details { grid-column: col 1 / col 9; grid-row: 4; }
  .tr-aside   { grid-column: col 10 / content-end; grid-row: 1 / span 4; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .tr-body > * { grid-column: content-start / content-end; }
  .tr-gallery { grid-column: full-start / full-end; }
}
@media (max-width: 899px) {
  .tr-body > .tr-gallery { grid-column: full-start / full-end; }
}

/* the story */
.tr-story { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-content: start; }
.tr-story__stand {
  font-size: clamp(2.125rem, 3.9vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  max-width: 22ch;
}
.tr-story__meta {
  display: grid;
  gap: .375rem;
  align-content: start;
  padding-top: 1rem;
  border-top: 2px solid var(--gold-500);
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.15;
  color: var(--ink-800);
}
.tr-story__copy { display: grid; gap: 1.25rem; }
.tr-story__copy p { color: var(--fg-soft); font-size: 1.0938rem; line-height: 1.72; max-width: 60ch; }
.tr-story__first::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 4.9em;
  line-height: .8;
  padding: .06em .12em 0 0;
  color: var(--gold-600);
}
@media (min-width: 900px) {
  .tr-story { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--tr-gap); }
  .tr-story__stand { grid-column: 1 / -1; }
  .tr-story__meta  { grid-column: 1 / span 2; gap: 0; padding-top: .25rem; }
  /* two facts, ruled apart so a long one that wraps doesn't run into the next */
  .tr-story__meta li { padding-block: .75rem; }
  .tr-story__meta li + li { border-top: 1px solid var(--bone-400); }
  .tr-story__copy  { grid-column: 3 / -1; }
}
@media (max-width: 899px) {
  .tr-story__meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: 1.25rem; }
}

/* the booking card */
.tr-aside { position: relative; }
.tr-card {
  position: sticky;
  top: 6.5rem;
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--ink-800);
  color: var(--on-ink);
  box-shadow: var(--sh-lg);
}
.tr-card__kicker { font-size: .8125rem; font-weight: 600; letter-spacing: .03em; margin: 0; }
.tr-card__title { font-size: clamp(1.625rem, 2.1vw, 2rem); line-height: 1.05; color: var(--bone-100); }
.tr-card .tr-card__text { font-size: .9375rem; line-height: 1.55; margin: 0; }
.tr-card__actions { display: grid; gap: .625rem; margin-top: .25rem; }
.tr-card__actions .btn { width: 100%; }
.tr-card__phones { margin-top: .25rem; border-top: 1px solid rgba(244, 241, 232, .12); }
.tr-card__phones li { border-bottom: 1px solid rgba(244, 241, 232, .12); }
.tr-card__phones li:last-child { border-bottom: 0; }
.tr-card__phones a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  font-size: .875rem;
  color: var(--on-ink-soft);
  transition: color .2s var(--ease);
}
.tr-card__phones b { font-weight: 600; color: var(--bone-100); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .tr-card__phones a:hover, .tr-card__phones a:hover b { color: var(--gold-400); }
}
@media (max-width: 1099px) {
  .tr-card { position: static; }
}
@media (min-width: 640px) and (max-width: 1099px) {
  .tr-card { grid-template-columns: 1fr 1fr; column-gap: 2rem; align-items: start; }
  .tr-card > * { grid-column: 1; }
  .tr-card__actions { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .tr-card__phones { grid-column: 1 / -1; }
}

/* the route: stops along a line that draws itself */
.tr-route { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-content: start; }
.tr-route__head { display: grid; gap: 1rem; }
.tr-route__title { font-size: clamp(2.5rem, 5vw, 4.75rem); line-height: .95; letter-spacing: -.03em; }
.tr-route__lede { color: var(--fg-soft); font-size: 1.0625rem; max-width: 50ch; }
.tr-route__track { position: relative; --rail: 3.25rem; }
.tr-route__svg {
  position: absolute;
  left: 0;
  top: .5rem;
  width: 20px;
  height: calc(100% - .5rem);
  pointer-events: none;
}
.tr-route__list { position: relative; display: grid; }
.tr-stop {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: 0;
  row-gap: .375rem;
  padding-bottom: clamp(2rem, 3.6vw, 3rem);
}
.tr-stop__dot {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 14px;
  height: 14px;
  margin: .55rem 0 0 3px;
  border-radius: 50%;
  border: 2px solid var(--gold-500);
  background: var(--gold-500);
  box-shadow: 0 0 0 6px var(--bone-100);
  transition: background-color .4s var(--ease), transform .5s var(--ease-out);
}
.tr-stop--start .tr-stop__dot, .tr-stop--end .tr-stop__dot {
  width: 20px;
  height: 20px;
  margin: .4rem 0 0 0;
  border-color: var(--ink-800);
  background: var(--ink-800);
  box-shadow: 0 0 0 6px var(--bone-100), inset 0 0 0 4px var(--bone-100);
}
.tr-stop__name {
  grid-column: 2;
  font-size: clamp(1.625rem, 2.5vw, 2.375rem);
  line-height: 1.05;
  letter-spacing: -.015em;
}
.tr-stop__text { grid-column: 2; color: var(--fg-soft); font-size: 1rem; line-height: 1.6; margin: 0; max-width: 46ch; }
.tr-stop--start .tr-stop__name, .tr-stop--end .tr-stop__name { font-style: italic; color: var(--ink-500); }
/* the last stop hides the tail of the line below its dot */
.tr-stop--end { padding-bottom: 0; }
.tr-stop--end::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.9rem;
  bottom: 0;
  width: 20px;
  background: var(--bone-100);
}
.tr-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: .75rem;
  padding: .1875rem .5rem;
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--gold-600);
  border: 1px solid rgba(201, 146, 43, .5);
  border-radius: var(--r-xs);
  transform: translateY(-.2em);
}
/* a stretch of the day, written on the line */
.tr-leg {
  position: relative;
  padding: .25rem 0 clamp(1.75rem, 3vw, 2.5rem) var(--rail);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
  color: var(--gold-600);
}
.tr-leg::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .95rem;
  width: 12px;
  height: 1px;
  background: var(--gold-500);
}
.tr-route__note {
  padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--gold-500);
  background: var(--bone-200);
  color: var(--fg-soft);
  font-size: 1rem;
  max-width: 62ch;
}
@media (min-width: 900px) {
  .tr-route__track { --rail: 4rem; }
  .tr-leg { padding-left: calc(var(--rail) + 2rem); }
  .tr-stop { grid-template-columns: var(--rail) minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; }
  .tr-stop__name { grid-column: 2; grid-row: 1; }
  .tr-stop__text { grid-column: 3; grid-row: 1; padding-top: .35rem; }
}
/* With the engine running, each dot waits hollow until the line reaches it.
   Without it (no JS, reduced motion) every dot shows filled. */
:where(.has-motion) .tr-stop:where(:not(.is-reached)) .tr-stop__dot { background: var(--bone-100); transform: scale(.8); }
:where(.has-motion) .tr-stop--start:where(:not(.is-reached)) .tr-stop__dot,
:where(.has-motion) .tr-stop--end:where(:not(.is-reached)) .tr-stop__dot { background: var(--bone-100); }

/* the gallery: three photos, one wide, two offset below it */
.tr-gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.5rem);
  align-items: start;
}
.tr-shot {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink-700);
  cursor: zoom-in;
}
.tr-shot img { width: 100%; height: 100%; object-fit: cover; }
.tr-shot--1 { grid-column: 1 / -1; aspect-ratio: 21 / 10; }
.tr-shot--2 {
  z-index: 1;
  grid-column: 2 / span 5;
  aspect-ratio: 4 / 5;
  margin-top: clamp(-7rem, -7vw, -3rem);
  border: clamp(5px, .6vw, 9px) solid var(--bone-100);
}
.tr-shot--3 { grid-column: 7 / -1; aspect-ratio: 4 / 3; margin-top: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 899px) {
  .tr-shot--1 { aspect-ratio: 4 / 3; }
  .tr-shot--2 { grid-column: 1 / span 6; margin-left: calc(var(--gutter) - 6px); margin-top: -2.5rem; }
  .tr-shot--3 { grid-column: 7 / -1; margin-top: 1.5rem; margin-right: var(--gutter); aspect-ratio: 3 / 4; }
}
@media (hover: hover) and (pointer: fine) {
  .tr-shot:hover .tr-zoom { transform: scale(1.05); }
}

/* the details, set like a spec sheet */
.tr-details { display: grid; align-content: start; }
.tr-details__title { font-size: clamp(2.5rem, 5vw, 4.75rem); line-height: .95; letter-spacing: -.03em; margin-bottom: clamp(2rem, 4vw, 3rem); }
.tr-spec {
  display: grid;
  gap: 1rem 2rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--bone-400);
}
.tr-spec:last-child { border-bottom: 1px solid var(--bone-400); }
.tr-spec h3 { font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1.1; }
.tr-spec__list { display: grid; gap: .75rem; }
.tr-spec__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fg-soft);
}
.tr-spec__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-500);
}
.tr-spec--in .tr-spec__list li { color: var(--ink-800); font-weight: 500; }
.tr-spec--in .tr-spec__list li::before { background: var(--gold-500); }
.tr-spec--opt .tr-spec__list li::before { border-radius: 0; width: 9px; height: 1.5px; border: 0; background: var(--gold-500); top: .72em; }
@media (min-width: 900px) {
  .tr-details { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--tr-gap); }
  .tr-details__title { grid-column: 1 / -1; }
  .tr-spec { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .tr-spec h3 { grid-column: 1 / span 3; }
  .tr-spec__list { grid-column: 4 / -1; }
  .tr-spec__list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}

/* ---- next tour, then the others ------------------------------------------ */
.tr-next { padding-block: clamp(5rem, 10vw, 8.5rem) clamp(3.5rem, 7vw, 5.5rem); }
.tr-next__label {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--gold-400);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .875rem;
}
.tr-next__label::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; }
.tr-next__card {
  position: relative;
  display: grid;
  isolation: isolate;
  border-radius: var(--r-md);
  overflow: hidden;
  grid-template-rows: minmax(clamp(24rem, 40vw, 36rem), auto);
  color: var(--bone-100);
  transition: transform .16s var(--ease-out);
}
.tr-next__card:active { transform: scale(.99); }
.tr-next__media { position: relative; grid-area: 1 / 1; z-index: -2; overflow: hidden; }
.tr-next__card::after {
  content: "";
  grid-area: 1 / 1;
  z-index: -1;
  /* dark enough behind the kicker (13px gold) to hold AA over any of the photos */
  background:
    linear-gradient(to top, rgba(3, 21, 12, .9) 0%, rgba(3, 21, 12, .76) 42%, rgba(3, 21, 12, .5) 64%, rgba(3, 21, 12, .08) 88%),
    linear-gradient(to right, rgba(3, 21, 12, .45) 0%, rgba(3, 21, 12, 0) 60%);
  pointer-events: none;
}
.tr-next__text {
  grid-area: 1 / 1;
  align-self: end;
  display: grid;
  gap: .75rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  padding-right: clamp(5rem, 12vw, 10rem);
}
.tr-next__kicker { font-size: .8125rem; font-weight: 600; letter-spacing: .03em; margin: 0; }
.tr-next .tr-next__name {
  font-family: var(--serif);
  font-size: clamp(3rem, 8vw, 8.5rem);
  line-height: .9;
  letter-spacing: -.035em;
  color: var(--bone-100);
  margin: 0;
  max-width: none;
}
.tr-next .tr-next__blurb { color: rgba(244, 241, 232, .8); font-size: 1.0625rem; margin: 0; max-width: 46ch; }
.tr-next__arrow {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: end;
  margin: clamp(1.5rem, 4vw, 3.5rem);
  display: grid;
  place-items: center;
  width: clamp(3.5rem, 6vw, 5rem);
  height: clamp(3.5rem, 6vw, 5rem);
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--ink-900);
  transition: transform .5s var(--ease-out);
}
.tr-next__arrow svg { width: 24px; height: 24px; }

.tr-more { margin-top: clamp(4rem, 8vw, 6.5rem); }
.tr-more__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
}
.tr-more__title { font-size: clamp(2rem, 3.6vw, 3rem); color: var(--bone-100); }
.tr-more__head .link-arrow { min-height: 44px; }
.tr-more__list { border-top: 1px solid rgba(244, 241, 232, .14); }
.tr-more__list li { border-bottom: 1px solid rgba(244, 241, 232, .14); }
.tr-more__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-block: 1rem;
  color: var(--bone-100);
}
.tr-more__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-sm); }
.tr-more__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.tr-more__name { font-family: var(--serif); font-size: clamp(1.625rem, 3vw, 2.75rem); line-height: 1; transition: color .25s var(--ease), transform .5s var(--ease-out); }
.tr-more__kicker { font-size: .875rem; color: var(--on-ink-soft); }
.tr-more__arrow { color: var(--gold-400); transition: transform .4s var(--ease-out); }
.tr-more__row:active .tr-more__name { transform: scale(.98); }
@media (max-width: 699px) {
  .tr-more__row { grid-template-columns: 4.5rem minmax(0, 1fr) auto; row-gap: .25rem; }
  .tr-more__thumb { grid-row: 1 / span 2; }
  .tr-more__name { grid-column: 2; }
  .tr-more__kicker { grid-column: 2; grid-row: 2; }
  .tr-more__arrow { grid-column: 3; grid-row: 1 / span 2; }
}
@media (hover: hover) and (pointer: fine) {
  .tr-next__card:hover .tr-zoom { transform: scale(1.04); }
  .tr-next__card:hover .tr-next__arrow { transform: translateX(6px); }
  .tr-more__row:hover .tr-more__name { color: var(--gold-400); transform: translateX(8px); }
  .tr-more__row:hover .tr-more__thumb img { transform: scale(1.08); }
  .tr-more__row:hover .tr-more__arrow { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .tr-hero__img, .tr-coverimg img { animation: none; }
  .tr-zoom { transition: none; }
}

/* ---- 50-fleet.css ---- */
/* ==========================================================================
   Fleet: fleet.html and fleet/<slug>.html. Every class here starts with fl-.
   A showroom that scales up: bone stages, the studio cut outs parked on a
   floor, big serif numbers. The dark chapters (the help band, the photo wall,
   the close) are the same showroom after hours.
   ========================================================================== */

.fl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- headings that rise word by word ------------------------------------
   Pure CSS, so the hero never waits on the animation libraries to paint.
   The mask keeps the line box at the heading's own line height. */
.fl-w {
  display: inline-block;
  overflow: clip;
  vertical-align: top;
  padding: 0 .06em .16em 0;
  margin: 0 -.06em -.16em 0;
}
.fl-w > span {
  display: inline-block;
  animation: fl-rise 1.05s var(--ease-out) both;
  animation-delay: calc(90ms + var(--i, 0) * 55ms);
}
.fl-w em { font-style: italic; }
@keyframes fl-rise { from { transform: translate3d(0, 110%, 0); } }

/* interim (FL_MIRRORED in pages_fleet.py): a mirrored cut out turned back the
   right way round. The individual scale property sits outside transform, so it
   mirrors every transform the image already has: the drive in and the hover
   nudge carry it forward, the way it now faces. */
.fl-flip { scale: -1 1; }

.fl-crumbs { position: relative; z-index: var(--z-base); color: var(--fg-soft); }
/* 44px tall tap targets; the negative margin keeps the row at its text height */
.fl-crumbs a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -14px; }

/* ==========================================================================
   fleet.html
   ========================================================================== */

/* ---- hero: the statement, then the smallest and the biggest on one floor */
.fl-hero {
  position: relative;
  overflow: clip;
  background: linear-gradient(180deg, var(--bone-200) 0%, var(--bone-100) 58%, var(--bone-300) 100%);
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.fl-hero__in { display: grid; }
.fl-hero .fl-crumbs { margin-bottom: clamp(2rem, 4.5vw, 3.5rem); }
.fl-hero__title {
  font-size: clamp(2.75rem, 7.2vw, 6.6rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}
@media (min-width: 900px) {
  .fl-hero__title .fl-line { display: block; }
}
.fl-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: end;
  gap: 2.75rem clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2rem, 4vw, 3.25rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.fl-hero__copy { display: grid; gap: 1.75rem; padding-bottom: 2.6rem; }
.fl-hero__lede { max-width: 42ch; }
.fl-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
/* the text link is 34px tall; its hit area reaches 44px without moving the line */
.fl-hero__actions .link-arrow,
.fl-v-more__head .link-arrow { position: relative; }
.fl-hero__actions .link-arrow::before,
.fl-v-more__head .link-arrow::before { content: ""; position: absolute; inset: -5px 0; }

/* the floor: the smallest and the biggest parked side by side */
.fl-hero__floor {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1.5fr) minmax(0, 5.5fr);
  align-items: end;
  gap: clamp(.75rem, 1.6vw, 1.5rem);
}
/* the edge of the showroom floor, at wheel height, running off the page */
.fl-hero__floor::before {
  content: "";
  position: absolute;
  left: -3rem; right: -50vw;
  bottom: 2.6rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bone-400) 3rem);
}
.fl-hero__veh { position: relative; display: grid; gap: 1rem; justify-items: start; }
.fl-hero__veh img {
  position: relative;
  width: 100%;
  height: auto;
  animation: fl-drive 1.5s var(--ease-out) both;
  transition: transform .6s var(--ease-out);
}
.fl-hero__veh--small img { animation-delay: .35s; }
.fl-hero__veh--big img { animation-delay: .55s; }
/* each vehicle drives out from the dimension line between them: the small
   one is clipped at its right edge, the big one at its left (a turned back
   cut out drives in from the left). The 8px keeps the focus ring whole. */
.fl-hero__veh--small { clip-path: inset(-100vh -8px -100vh -100vw); }
.fl-hero__veh--big { clip-path: inset(-100vh -100vw -100vh -8px); }
.fl-hero__veh::before {
  content: "";
  position: absolute;
  left: 6%; right: 6%;
  bottom: 2.1rem;
  height: 16%;
  background: radial-gradient(closest-side, rgba(3, 21, 12, .2), transparent);
}
.fl-hero__cap {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  min-height: 1.6rem;
  font-size: .875rem;
  line-height: 1.3;
  color: var(--fg-soft);
}
.fl-hero__cap b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1;
  color: var(--ink-800);
}
@keyframes fl-drive { from { transform: translate3d(65%, 0, 0); } }

/* a dimension line between the two, like a drawing of the floor */
.fl-hero__dim {
  align-self: center;
  margin-bottom: 2.6rem;
  height: 11px;
  border-inline: 1px solid var(--ink-400);
  position: relative;
  animation: fl-dim 1.2s var(--ease-out) .9s both;
  transform-origin: 0 50%;
}
.fl-hero__dim span {
  position: absolute;
  left: 0; right: 0; top: 5px;
  height: 1px;
  background: var(--ink-400);
}
@keyframes fl-dim { from { transform: scaleX(0); } }

@media (hover: hover) and (pointer: fine) {
  .fl-hero__veh:hover img { transform: translate3d(-4%, 0, 0); }
  .fl-hero__veh:hover .fl-hero__cap { color: var(--gold-600); }
}
@media (max-width: 899px) {
  .fl-hero__row { grid-template-columns: 1fr; }
  .fl-hero__copy { padding-bottom: 0; }
}
@media (max-width: 560px) {
  .fl-hero__actions .btn { flex: 1 1 100%; }
  .fl-hero__floor { grid-template-columns: minmax(0, 4fr) minmax(0, 1fr) minmax(0, 6fr); }
  .fl-hero__cap { flex-direction: column; gap: .25rem; font-size: .8125rem; min-height: 3.75rem; }
  .fl-hero__floor::before { bottom: 4.75rem; }
  .fl-hero__veh::before { bottom: 4.25rem; }
  .fl-hero__dim { margin-bottom: 4.75rem; }
}

/* ---- the size scale --------------------------------------------------------
   Without the engine (phones, reduced motion, no JavaScript) this is a ruled
   table of seat counts, no pictures: each rule is drawn in gold to the share
   of the biggest coach's seats (--r), so the table itself is the scale. From
   900px up, fleet.js adds .is-pinned and it becomes a pinned stage. */
.fl-scale {
  position: relative;
  background: var(--bone-100);
  padding-block: clamp(4.5rem, 9vw, 8rem);
}
.fl-scale__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: 1rem 3rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.fl-scale__title { font-size: clamp(2.25rem, 5vw, 4.25rem); }
.fl-scale__head p { color: var(--fg-soft); max-width: 40ch; }
@media (max-width: 760px) { .fl-scale__head { grid-template-columns: 1fr; } }

.fl-scale__stage, .fl-scale__track { display: none; }

.fl-scale__list { border-top: 1px solid var(--bone-400); }
/* the link fills the row, so its gold rule sits on the row's own border even
   when the other column makes the row taller */
.fl-rung { display: flex; border-bottom: 1px solid var(--bone-400); }
.fl-rung a {
  flex: 1;
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 44px;
  padding-block: 1.125rem;
}
/* the rule under each row, drawn to scale */
.fl-rung a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--gold-500);
  transform: scaleX(var(--r, 1));
  transform-origin: 0 50%;
}
.fl-rung__num {
  font-family: var(--serif);
  font-size: calc(1.75rem + 2rem * var(--k));
  line-height: 1;
  letter-spacing: -.02em;
}
.fl-rung__txt { display: grid; gap: .1875rem; }
.fl-rung__name { font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.15; }
.fl-rung__short { display: none; }
.fl-rung__note { font-size: .875rem; color: var(--fg-soft); }
@media (hover: hover) and (pointer: fine) {
  .fl-rung a:hover .fl-rung__num { color: var(--gold-600); }
}
/* two columns read top to bottom, smallest first */
@media (min-width: 700px) {
  .fl-scale:not(.is-pinned) .fl-scale__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    column-gap: clamp(2rem, 5vw, 4.5rem);
    border-top: 0;
  }
  .fl-scale:not(.is-pinned) .fl-rung:nth-child(1),
  .fl-scale:not(.is-pinned) .fl-rung:nth-child(6) { border-top: 1px solid var(--bone-400); }
}
@media (max-width: 640px) {
  .fl-rung a { grid-template-columns: 3.75rem minmax(0, 1fr); gap: .875rem; padding-block: .875rem; }
  .fl-rung__num { font-size: calc(1.5rem + 1.25rem * var(--k)); }
  .fl-rung__name { font-size: 1.125rem; }
  .fl-rung__note { font-size: .8125rem; line-height: 1.45; }
}

/* pinned stage, 900px and up, only once fleet.js has taken over */
.fl-scale.is-pinned {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  padding-block: clamp(5.5rem, 13vh, 7.5rem) clamp(1.75rem, 4vh, 2.75rem);
  overflow: clip;
}
/* 900 to 980px: the fixed action bar (4.75rem) still shows, so the ruler sits above it */
@media (max-width: 980px) {
  .fl-scale.is-pinned { padding-bottom: calc(4.75rem + clamp(1.75rem, 4vh, 2.75rem)); }
}
.fl-scale.is-pinned .fl-scale__head { margin-bottom: 0; }
.fl-scale.is-pinned .fl-scale__head p { font-size: .9375rem; justify-self: end; max-width: 34ch; }
.fl-scale.is-pinned .fl-scale__title { font-size: clamp(2rem, 3.4vw, 3rem); }
.fl-scale.is-pinned .fl-scale__stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  align-items: stretch;
  gap: 2rem;
}
.fl-scale__read { display: flex; flex-direction: column; justify-content: center; }
.fl-scale__upto, .fl-scale__unit {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--gold-600);
  transition: opacity .25s var(--ease);
}
/* mid move the number is only counting, so it never reads as a seat count no vehicle has */
.fl-scale__read.is-moving .fl-scale__upto,
.fl-scale__read.is-moving .fl-scale__unit { opacity: .15; }
.fl-scale__num {
  font-family: var(--serif);
  font-size: min(19rem, 21vw, 34vh);
  line-height: .82;
  letter-spacing: -.045em;
  color: var(--ink-800);
  margin: .25rem 0 .5rem -.04em;
}
.fl-scale__names { position: relative; margin-top: 1.75rem; min-height: 5.5rem; }
.fl-scale__name { position: absolute; left: 0; top: 0; display: grid; gap: .3rem; max-width: 24rem; }
.fl-scale__name b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; }
.fl-scale__name span { font-size: .9375rem; color: var(--fg-soft); }

.fl-scale__floor { position: relative; min-height: 0; }
.fl-scale__floor::before {
  content: "";
  position: absolute;
  left: -8%; right: -50vw;
  bottom: 9%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bone-400) 18%);
}
.fl-scale__floor::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%;
  bottom: 5%;
  height: 11%;
  background: radial-gradient(closest-side, rgba(3, 21, 12, .2), transparent);
  transform: scaleX(var(--fl-shadow, .6));
}
/* cars drive in from the right wing and off into the left one */
.fl-scale__cars {
  position: absolute;
  inset: 0 0 7% 0;
  display: grid;
  align-items: end;
  justify-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 93%, transparent);
}
.fl-scale__car {
  grid-area: 1 / 1;
  width: min(100%, 26.5rem);
  max-height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  transform-origin: 50% 100%;
}

.fl-scale.is-pinned .fl-scale__rail { position: relative; margin-top: clamp(1rem, 3vh, 2rem); }
.fl-scale.is-pinned .fl-scale__list {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  border: 0;
}
.fl-scale.is-pinned .fl-rung { border: 0; }
.fl-scale.is-pinned .fl-rung a {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
  padding: 1.125rem .5rem .25rem 0;
}
.fl-scale.is-pinned .fl-rung a::before {
  content: "";
  position: absolute;
  left: 0; top: -5px;
  width: 1px; height: 11px;
  background: var(--bone-400);
}
.fl-scale.is-pinned .fl-rung a::after { display: none; }
.fl-scale.is-pinned .fl-rung__num { font-size: 1.625rem; color: var(--fg-mute); }
.fl-scale.is-pinned .fl-rung__note { display: none; }
.fl-scale.is-pinned .fl-rung__name {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.fl-scale.is-pinned .fl-rung__short {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--fg-soft);
}
.fl-scale.is-pinned .fl-rung.is-active .fl-rung__num { color: var(--ink-800); }
.fl-scale.is-pinned .fl-rung.is-active .fl-rung__short { color: var(--gold-600); }
.fl-scale.is-pinned .fl-rung.is-active a::before { background: var(--gold-500); }
.fl-scale.is-pinned .fl-scale__track {
  display: block;
  position: absolute;
  top: 0;
  left: var(--gutter);
  width: calc((100% - 2 * var(--gutter)) * 8 / 9);
  height: 1px;
  background: var(--bone-400);
}
.fl-scale__fill {
  display: block;
  height: 2px;
  margin-top: -.5px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---- help: you don't have to choose ------------------------------------- */
.fl-help {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--ink-900);
  color: var(--bone-100);
  padding-block: clamp(6rem, 13vw, 11rem);
}
.fl-help__photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.fl-help__photo img { width: 100%; height: 100%; object-fit: cover; }
.fl-help::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(3, 21, 12, .96) 28%, rgba(3, 21, 12, .82) 58%, rgba(3, 21, 12, .6) 100%),
    linear-gradient(to top, rgba(3, 21, 12, .6), transparent 40%);
}
.fl-help__in {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.5vw, 2rem);
  row-gap: clamp(2rem, 4vw, 3.25rem);
}
.fl-help__title { grid-column: 1 / span 9; font-size: clamp(2.5rem, 6vw, 5.5rem); color: var(--bone-100); }
.fl-help__lede {
  grid-column: 1 / span 8;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.7vw, 2.375rem);
  line-height: 1.24;
  letter-spacing: -.01em;
  color: var(--bone-100);
  max-width: 34ch;
}
.fl-help__std {
  grid-column: 9 / -1;
  align-self: end;
  border-top: 1px solid rgba(244, 241, 232, .22);
  padding-top: 1.25rem;
}
.fl-help__std-h { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--gold-400); margin-bottom: .5rem; }
.fl-help__std li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: .75rem;
  padding-block: .6875rem;
  border-bottom: 1px solid rgba(244, 241, 232, .12);
  color: rgba(244, 241, 232, .86);
}
.fl-help__std-note { margin-top: 1rem; font-size: .9375rem; color: rgba(244, 241, 232, .86); }
.fl-help__std li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-400);
  transform: translateY(-.15em);
}
@media (max-width: 900px) {
  .fl-help__title, .fl-help__lede, .fl-help__std { grid-column: 1 / -1; }
}

/* ---- showroom: groups of vehicles, filter chips ------------------------- */
.fl-show {
  background: var(--bone-200);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(5rem, 10vw, 9rem);
}
.fl-show__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--bone-400);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.fl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.fl-chips__label { font-size: .8125rem; font-weight: 600; color: var(--fg-soft); margin-right: .5rem; }
.fl-chip {
  min-height: 44px;
  padding: .5rem 1.125rem;
  border: 1px solid rgba(7, 38, 22, .18);
  border-radius: 999px;
  background: transparent;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  transition: transform .16s var(--ease-out);
}
.fl-chip[aria-pressed="true"] { background: var(--ink-800); border-color: var(--ink-800); color: var(--bone-100); }
.fl-chip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .fl-chip:hover { border-color: rgba(7, 38, 22, .5); }
  .fl-chip[aria-pressed="true"]:hover { border-color: var(--ink-800); }
}
.fl-show__status { margin: 0; font-size: .875rem; font-weight: 500; color: var(--fg-soft); }
@media (max-width: 640px) {
  .fl-chips__label { flex: 1 1 100%; }
  .fl-chip { padding-inline: .9375rem; font-size: .875rem; }
}

.fl-group + .fl-group { margin-top: clamp(5rem, 10vw, 9rem); }
.fl-group__head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: end;
  gap: 1.25rem clamp(2rem, 5vw, 5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.fl-group__range { display: grid; gap: .5rem; margin: 0; max-width: none; }
.fl-group__nums {
  font-family: var(--serif);
  font-size: clamp(4rem, 9vw, 8.5rem);
  line-height: .82;
  letter-spacing: -.045em;
  color: var(--ink-800);
  white-space: nowrap;
}
.fl-group__nums i {
  font-size: .34em;
  letter-spacing: 0;
  color: var(--gold-600);
  margin-inline: .3em;
  vertical-align: .9em;
}
.fl-group__unit { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--fg-soft); }
.fl-group__copy { display: grid; gap: .625rem; padding-bottom: .25rem; }
.fl-group__title { font-size: clamp(2rem, 3.8vw, 3.25rem); }
.fl-group__copy p { color: var(--fg-soft); }
@media (max-width: 760px) {
  .fl-group__head { grid-template-columns: 1fr; }
}

.fl-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(.75rem, 1.4vw, 1.25rem);
}
/* the biggest coach gets a double stage; with only three showing it goes wide */
.fl-grid--bento > .fl-card--feature { grid-column: 3 / 5; grid-row: 1 / 3; }
.fl-grid--bento:not([data-n="5"]) > .fl-card--feature { grid-column: span 2; grid-row: auto; }
@media (max-width: 1099px) {
  .fl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-grid--bento > .fl-card--feature,
  .fl-grid--bento:not([data-n="5"]) > .fl-card--feature { grid-column: 1 / -1; grid-row: auto; }
}

/* ---- the vehicle card ------------------------------------------------------ */
.fl-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: var(--bone-100);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  transition: transform .5s var(--ease-out);
}
/* the lift shadow fades in, so only opacity and transform ever animate */
.fl-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--sh-lg);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
}
.fl-card__stage {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background:
    radial-gradient(56% 13% at 50% 86%, rgba(3, 21, 12, .17), transparent 70%),
    linear-gradient(180deg, var(--bone-100) 0%, var(--bone-200) 55%, var(--bone-300) 100%);
}
.fl-card__stage::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 13%;
  height: 1px;
  background: rgba(7, 38, 22, .06);
}
.fl-card__stage img {
  position: absolute;
  left: 7%; top: 9%;
  width: 86%;
  height: 80%;
  object-fit: contain;
  object-position: 50% 100%;
  transition: transform .7s var(--ease-out);
}
.fl-card__body { display: grid; gap: .375rem; align-content: start; flex: 1; padding: 1.125rem 1.25rem 1.25rem; }
.fl-card__name { font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.1; }
.fl-card__meta { font-size: .8125rem; font-weight: 600; line-height: 1.45; color: var(--gold-600); }
.fl-card__note { font-size: .875rem; line-height: 1.5; color: var(--fg-soft); }
.fl-card__more {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  margin-top: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-700);
}
.fl-card__more svg { transition: transform .4s var(--ease-out); }
/* "View vehicle" sits on one line across a row, however long the note runs */
@media (min-width: 600px) {
  .fl-card__body { grid-template-rows: auto auto 1fr auto; }
  .fl-card__more { align-self: end; }
}
.fl-card:active { transform: scale(.985); transition-duration: .16s; }
.fl-card:focus-visible { outline-offset: 4px; border-radius: var(--r-md); }
@media (hover: hover) and (pointer: fine) {
  .fl-card:hover { transform: translate3d(0, -6px, 0); }
  .fl-card:hover::after { opacity: 1; }
  /* the vehicles face left, so forward is left */
  .fl-card:hover .fl-card__stage img { transform: translate3d(-4%, 0, 0) scale(1.04); }
  .fl-card:hover .fl-card__more svg { transform: translate3d(4px, 0, 0); }
  .fl-card:hover .fl-card__more { color: var(--gold-600); }
}

.fl-card--feature .fl-card__stage { flex: 1; aspect-ratio: auto; min-height: 15rem; }
.fl-card--feature .fl-card__stage img { left: 10%; width: 80%; top: 10%; height: 78%; }
/* never wider than the cut out's own file (--fl-w, set in pages_fleet.py) */
@media (min-width: 600px) {
  .fl-card--feature .fl-card__stage img { left: 0; right: 0; margin-inline: auto; width: min(80%, var(--fl-w, 80%)); }
}
.fl-card--feature .fl-card__body { flex: none; padding: 1.5rem 1.75rem 1.625rem; }
.fl-card--feature .fl-card__name { font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
.fl-card--feature .fl-card__note { font-size: .9375rem; }

/* phones: the showroom becomes a clean list, picture left, words right */
@media (max-width: 599px) {
  .fl-grid { grid-template-columns: 1fr; gap: .625rem; }
  .fl-grid .fl-card { flex-direction: row; align-items: stretch; }
  .fl-grid .fl-card__stage,
  .fl-grid .fl-card--feature .fl-card__stage {
    flex: 0 0 40%;
    aspect-ratio: auto;
    min-height: 8rem;
    border-radius: var(--r-md) 0 0 var(--r-md);
  }
  .fl-grid .fl-card__stage img,
  .fl-grid .fl-card--feature .fl-card__stage img { left: 6%; width: 88%; top: 12%; height: 74%; }
  .fl-grid .fl-card__body,
  .fl-grid .fl-card--feature .fl-card__body { flex: 1 1 auto; min-width: 0; padding: .875rem 1rem .9375rem; gap: .25rem; align-content: center; }
  .fl-grid .fl-card__name,
  .fl-grid .fl-card--feature .fl-card__name { font-size: 1.1875rem; }
  .fl-grid .fl-card__note { font-size: .8125rem; line-height: 1.45; }
  .fl-grid .fl-card__more { margin-top: .25rem; font-size: .8125rem; }
}

/* ---- the close: the showroom after hours ---------------------------------- */
.fl-close {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(52% 64% at 76% 82%, rgba(201, 146, 43, .13), transparent 70%),
    var(--ink-800);
  color: var(--bone-100);
  padding-block: clamp(5rem, 10vw, 8.5rem) clamp(3.5rem, 7vw, 5.5rem);
}
.fl-close__in {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: end;
  gap: 3rem clamp(2rem, 5vw, 4.5rem);
}
.fl-close__copy { display: grid; gap: 1.5rem; padding-bottom: clamp(0rem, 2vw, 1.5rem); }
.fl-close__title { font-size: clamp(2.5rem, 5.2vw, 4.75rem); color: var(--bone-100); }
.fl-close__copy p { color: rgba(244, 241, 232, .78); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); max-width: 42ch; }
.fl-close__actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: .5rem; }
.fl-close .btn--ghost { --btn-fg: var(--bone-100); border-color: rgba(244, 241, 232, .3); }
@media (hover: hover) and (pointer: fine) {
  .fl-close .btn--ghost:hover { --btn-bg: rgba(244, 241, 232, .08); border-color: rgba(244, 241, 232, .55); }
}
@media (max-width: 560px) { .fl-close__actions .btn { flex: 1 1 100%; } }

.fl-close__stage { position: relative; display: flex; align-items: flex-end; justify-content: flex-end; padding-bottom: 1.5rem; }
.fl-close__stage::before {
  content: "";
  position: absolute;
  left: -12%; right: -50vw;
  bottom: calc(1.5rem + 4%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 241, 232, .16) 20%);
}
.fl-close__car { position: relative; width: min(100%, 29rem); height: auto; }
/* a vehicle page closes on a real photo of the vehicle, framed */
.fl-close__stage--photo { padding-bottom: 0; }
.fl-close__stage--photo::before { display: none; }
.fl-close__frame {
  display: block;
  width: min(100%, 30rem);
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, .32);
}
.fl-close__frame img { width: 100%; height: 100%; object-fit: cover; }
/* three in a row: the smallest leads, the rest queue behind it */
.fl-close__stage--3 .fl-close__car { flex: none; width: 42%; z-index: calc(3 - var(--k)); }
.fl-close__stage--3 .fl-close__car + .fl-close__car { margin-left: -13%; }
.fl-close__stage--3 .fl-close__car:nth-child(1) { width: 36%; }
.fl-close__stage--3 .fl-close__car:nth-child(3) { width: 50%; }
@media (max-width: 860px) {
  .fl-close__in { grid-template-columns: 1fr; }
  .fl-close__stage { justify-content: center; }
}

/* ==========================================================================
   fleet/<slug>.html
   ========================================================================== */

/* ---- hero: the name, then the vehicle drives onto the stage --------------- */
.fl-v-hero {
  position: relative;
  overflow: clip;
  background: linear-gradient(180deg, var(--bone-100) 0%, var(--bone-200) 52%, var(--bone-300) 100%);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem) clamp(3rem, 6vw, 5rem);
}
.fl-v-hero .fl-crumbs { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.fl-v-hero__kicker { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--gold-600); margin-bottom: .875rem; }
.fl-v-hero__name {
  font-size: clamp(2.75rem, 6.2vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.fl-v-hero__name .fl-v-make { display: block; font-style: italic; color: var(--ink-500); }
.fl-v-hero__name em { font-style: normal; color: var(--ink-400); }
.fl-v-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 2rem clamp(2rem, 5vw, 5rem);
  margin-top: clamp(.5rem, 1.5vw, 1.25rem);
}
.fl-v-hero__copy { position: relative; z-index: var(--z-base); display: grid; gap: 0; }
.fl-v-hero__lede { max-width: 34ch; }
.fl-v-hero__actions { display: flex; flex-wrap: wrap; gap: .875rem; }

.fl-specs {
  display: flex;
  flex-wrap: wrap;
  margin: 1.5rem 0 1.75rem;
  border-block: 1px solid var(--bone-400);
}
.fl-specs > div { padding: 1rem clamp(1rem, 2vw, 1.75rem) 1.125rem 0; }
.fl-specs > div + div { padding-left: clamp(1rem, 2vw, 1.75rem); border-left: 1px solid var(--bone-400); }
.fl-specs dt { font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--fg-soft); }
.fl-specs dd {
  display: flex;
  align-items: flex-end;
  gap: .35rem;
  margin: .5rem 0 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 2.625rem);
  line-height: 1;
  white-space: nowrap;
}
.fl-spec__w { font-family: var(--sans); font-size: .8125rem; font-weight: 600; line-height: 1; color: var(--fg-soft); padding-bottom: .3em; }

/* odometer digits (fleet.js builds these; the plain number is the fallback) */
.fl-odo { display: inline-flex; }
.fl-odo__col { position: relative; display: inline-block; height: 1em; overflow: hidden; }
.fl-odo__size { visibility: hidden; }
.fl-odo__reel { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; }
.fl-odo__reel span { display: block; height: 1em; }

.fl-v-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: clamp(14rem, 27vw, 24rem);
}
.fl-v-stage__num {
  position: absolute;
  right: -1%;
  top: -4%;
  font-family: var(--serif);
  font-size: clamp(11rem, 27vw, 24rem);
  line-height: .74;
  letter-spacing: -.06em;
  color: var(--bone-400);
  pointer-events: none;
  user-select: none;
  animation: fl-num 1.6s var(--ease-out) both;
}
@keyframes fl-num { from { opacity: 0; transform: translate3d(0, 10%, 0); } }
/* --fl-w is the file's own width (pages_fleet.py), so no cut out is enlarged */
.fl-v-stage__car {
  position: relative;
  width: min(100%, 29rem, var(--fl-w, 29rem));
  height: auto;
  animation: fl-drive 1.6s var(--ease-out) .15s both;
}
.fl-v-stage__shadow {
  position: absolute;
  right: 3%;
  bottom: -3%;
  width: min(94%, 29rem, var(--fl-w, 29rem));
  height: 18%;
  background: radial-gradient(closest-side, rgba(3, 21, 12, .24), transparent);
  animation: fl-drive 1.6s var(--ease-out) .15s both;
}
@media (max-width: 899px) {
  .fl-v-hero__grid { grid-template-columns: 1fr; }
  .fl-v-stage { order: -1; justify-content: center; min-height: 0; padding-top: 1rem; }
  .fl-v-stage__shadow { left: 0; right: 0; margin-inline: auto; }
  .fl-v-stage__num { right: 50%; top: auto; bottom: 22%; transform: translateX(50%); }
  @keyframes fl-num-m { from { opacity: 0; } }
  .fl-v-stage__num { animation-name: fl-num-m; }
}
/* a turned back cut out faces right, so its shadow drives in from the left with it */
.fl-v-stage--flip .fl-v-stage__shadow { scale: -1 1; }
@media (max-width: 560px) {
  .fl-v-hero__actions .btn { flex: 1 1 100%; }
  .fl-specs dd { font-size: 1.875rem; }
}

/* ---- about ---------------------------------------------------------------- */
.fl-v-about { background: var(--bone-200); padding-block: clamp(5rem, 10vw, 9rem); }
.fl-v-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 2rem clamp(2rem, 5vw, 5rem);
}
.fl-v-about__h {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  line-height: 1.1;
  padding-top: 1rem;
  border-top: 1px solid var(--ink-800);
  align-self: start;
}
.fl-v-about__h--board { margin-top: clamp(2rem, 5vw, 4rem); }
.fl-v-about__text { display: grid; gap: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--bone-400); }
.fl-v-about__lead {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink-800);
  max-width: 32ch;
}
.fl-v-about__text p:not(.fl-v-about__lead) { color: var(--fg-soft); max-width: 60ch; }
.fl-v-board {
  align-self: start;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--bone-400);
}
.fl-v-board li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  padding-block: 1rem;
  border-bottom: 1px solid var(--bone-400);
}
.fl-v-board svg { color: var(--gold-600); margin-top: .2rem; }
@media (max-width: 760px) {
  .fl-v-about__grid { grid-template-columns: 1fr; }
  .fl-v-about__h--board, .fl-v-board { margin-top: 1rem; }
  .fl-v-board { grid-template-columns: 1fr; }
}

/* ---- photos: the showroom after hours, a gapless wall -------------------- */
.fl-v-gal { background: var(--ink-900); color: var(--bone-100); padding-block: clamp(5rem, 10vw, 8.5rem); }
.fl-v-gal__in { container-type: inline-size; }
.fl-v-gal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.fl-v-gal__title { font-size: clamp(2.75rem, 6.5vw, 5.5rem); color: var(--bone-100); }
.fl-v-gal__head p { margin: 0; color: var(--on-ink-soft); }
/* always four columns (two on phones): every file is 500px square, so the
   big 2 by 2 photo tops out near its own size and nothing is cropped wide */
.fl-gal {
  --cols: 4;
  --g: clamp(.5rem, 1vw, .875rem);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: calc((100cqw - (var(--cols) - 1) * var(--g)) / var(--cols));
  grid-auto-flow: dense;
  gap: var(--g);
}
.fl-gal__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--ink-700);
  cursor: zoom-in;
}
.fl-gal__zoom { display: block; width: 100%; height: 100%; transition: transform .9s var(--ease-out); }
.fl-gal__zoom img { width: 100%; height: 100%; object-fit: cover; }
.fl-gal__big { grid-column: span 2; grid-row: span 2; }
/* the last row's empty cells: one bone tile that asks for the vehicle */
.fl-gal__ask {
  grid-column: span var(--span, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.625rem);
  border-radius: var(--r-sm);
  background: var(--bone-200);
  color: var(--ink-800);
}
.fl-gal__ask-t {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.2vw, 2rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  max-width: 11ch;
}
.fl-gal__ask-go {
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--ink-900);
}
.fl-gal__ask-go svg { transition: transform .4s var(--ease-out); }
/* two or three cells: the words sit low on one line, the seat count set big behind */
.fl-gal__ask-n { display: none; }
@media (min-width: 700px) {
  .fl-gal__ask--wide {
    position: relative;
    overflow: hidden;
    flex-direction: row;
    align-items: flex-end;
  }
  .fl-gal__ask--wide .fl-gal__ask-t { position: relative; max-width: none; font-size: clamp(1.75rem, 3vw, 2.75rem); }
  .fl-gal__ask--wide .fl-gal__ask-go { position: relative; }
  .fl-gal__ask-n {
    display: block;
    position: absolute;
    right: clamp(1rem, 2vw, 1.625rem);
    top: clamp(.5rem, 1vw, .875rem);
    font-family: var(--serif);
    font-size: clamp(5.5rem, 11cqw, 9.5rem);
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--bone-400);
    pointer-events: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .fl-gal__item:hover .fl-gal__zoom { transform: scale(1.05); }
  .fl-gal__ask:hover .fl-gal__ask-go svg { transform: translate3d(4px, 0, 0); }
}
@media (min-width: 700px) {
  .fl-gal__ask--no-desk { display: none; }
}
@media (max-width: 699px) {
  .fl-gal { --cols: 2; }
  .fl-gal__ask { grid-column: auto; }
  .fl-gal__ask--no-phone { display: none; }
}
/* a single photo sits beside its heading */
.fl-v-gal--one .fl-v-gal__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  align-items: end;
  gap: 2rem clamp(2rem, 5vw, 4rem);
}
.fl-v-gal--one .fl-v-gal__head { margin: 0; display: grid; }
.fl-v-gal--one .fl-gal { grid-template-columns: 1fr; grid-auto-rows: auto; }
.fl-v-gal--one .fl-gal__item { aspect-ratio: 1; }
@media (max-width: 760px) {
  .fl-v-gal--one .fl-v-gal__in { grid-template-columns: 1fr; }
}

/* ---- more from the same group ----------------------------------------------- */
.fl-v-more { background: var(--bone-200); padding-block: clamp(5rem, 10vw, 8.5rem); }
.fl-v-more__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.fl-v-more__title { font-size: clamp(2.25rem, 4.6vw, 4rem); max-width: 18ch; }
.fl-strip {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: clamp(.75rem, 1.4vw, 1.25rem);
}
/* below 900px a native swipe row, bleeding to the screen edges */
@media (max-width: 899px) {
  .fl-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding: .5rem var(--gutter) 1.25rem;
    scrollbar-width: none;
  }
  .fl-strip::-webkit-scrollbar { display: none; }
  .fl-strip > .fl-card { flex: 0 0 min(78vw, 20rem); scroll-snap-align: start; }
}

/* ---- reduced motion ----------------------------------------------------------
   The global rule shortens durations but keeps delays, which would leave the
   hero words and vehicles parked off stage for up to a second. Drop them. */
@media (prefers-reduced-motion: reduce) {
  .fl-w > span,
  .fl-hero__veh img,
  .fl-hero__dim,
  .fl-v-stage__num,
  .fl-v-stage__car,
  .fl-v-stage__shadow { animation: none; }
}

/* ---- 60-company.css ---- */
/* ==========================================================================
   Company family: about.html and contact.html
   Every class starts with co-. Shared classes are only ever adjusted inside
   a co- wrapper, never globally.
   ========================================================================== */

/* ---- shared within the family -------------------------------------------- */
/* small label: ink text passes AA on bone and on gold-100, the gold lives in
   the marker. On ink the text itself can be gold. */
.co-tag {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-500);
}
.co-tag::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-500);
}
.on-ink .co-tag { color: var(--gold-400); }

/* focus ring: the shared gold ring is too faint on bone (about 2.4:1), so on
   light surfaces it is ink, and on ink it stays gold */
.co-about :focus-visible, .co-contact :focus-visible { outline-color: var(--ink-700); }
.co-about .on-ink :focus-visible, .co-contact .on-ink :focus-visible { outline-color: var(--gold-400); }

/* visually hidden, still read out */
.co-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* a phone number or email address inside running copy */
.co-tel {
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

/* breadcrumbs: a 44px tall tap area without moving the line */
.co-about .breadcrumb a, .co-contact .breadcrumb a {
  display: inline-block;
  padding: .875rem .375rem;
  margin: -.875rem -.375rem;
}
.co-about .breadcrumb--dark { color: var(--fg-soft); }

.co-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

/* the shared arrow link is only ~30px tall: give it a 44px tap area here
   without moving its underline */
.co-about .link-arrow, .co-contact .link-arrow { position: relative; }
.co-about .link-arrow::after, .co-contact .link-arrow::after {
  content: "";
  position: absolute;
  inset: -.5rem -.25rem;
}

/* section heading: title on the left, lede sitting on its baseline to the right */
.co-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}
.co-head h2 { grid-column: 1 / span 7; }
.co-head .lede { grid-column: 8 / -1; }
@media (max-width: 860px) {
  .co-head h2, .co-head .lede { grid-column: 1 / -1; }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */

/* ---- quiet typographic hero ---------------------------------------------- */
.co-hero { padding-top: clamp(2.25rem, 4.5vw, 4rem); }
.co-hero .breadcrumb { margin-bottom: clamp(2.25rem, 5vw, 4.5rem); }

/* keeps the place name on one line; a non breaking space alone doesn't
   survive the line split the motion engine runs on headings */
.co-nowrap { white-space: nowrap; }

.co-hero__title {
  font-size: clamp(2.625rem, 6.3vw, 6.25rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  text-wrap: balance;
}

.co-hero__foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.co-hero__lede { grid-column: 1 / span 6; display: grid; gap: 2rem; }
.co-hero__lede .lede {
  font-size: clamp(1.1875rem, 1.7vw, 1.5rem);
  color: var(--fg);
  max-width: 34ch;
}
.co-colophon {
  grid-column: 8 / -1;
  margin: 0;
  border-top: 1px solid var(--bone-400);
  font-size: .9375rem;
}
.co-colophon div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: .8125rem;
  border-bottom: 1px solid var(--bone-400);
}
.co-colophon dt { font-size: .8125rem; color: var(--fg-soft); padding-top: .0625rem; }
.co-colophon dd { margin: 0; font-weight: 500; color: var(--fg); }

.co-hero__photo { margin-top: clamp(3.5rem, 7vw, 6rem); }
.co-hero__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 2000 / 880;
  background: var(--ink-700);
}
.co-hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.co-hero__photo figcaption {
  margin-top: .875rem;
  font-size: .8125rem;
  color: var(--fg-soft);
}

@media (max-width: 860px) {
  .co-hero__lede, .co-colophon { grid-column: 1 / -1; }
  .co-hero__frame { aspect-ratio: 4 / 3.4; border-radius: var(--r-md); }
}
@media (max-width: 480px) {
  .co-hero__lede .co-actions .btn { flex: 1 1 100%; }
}

/* ---- who we drive for: a short intro that holds still beside a roster ----- */
.co-story { padding-block: clamp(6rem, 13vw, 12rem); }
.co-story__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3rem 2rem;
  align-items: start;
}
.co-story__intro { grid-column: 1 / span 5; display: grid; gap: 1.5rem; }
.co-story__title { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.co-story__lede {
  margin-top: .5rem;
  font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
  line-height: 1.5;
  color: var(--fg);
  max-width: 30ch;
}
.co-story__note { color: var(--fg-soft); max-width: 40ch; }
@media (min-width: 900px) {
  .co-story__intro { position: sticky; top: 8rem; }
}

/* each row is one link into the service page for that kind of client */
.co-roster { grid-column: 6 / -1; border-top: 1px solid var(--bone-400); }
.co-roster li { border-bottom: 1px solid var(--bone-400); }
.co-roster__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 15rem) 2.75rem;
  gap: .25rem 1.5rem;
  align-items: center;
  padding-block: 1.125rem 1.25rem;
}
.co-roster__who {
  font-family: var(--serif);
  font-size: clamp(1.625rem, 2.3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--fg);
  transition: transform .5s var(--ease-out);
}
.co-roster__what { font-size: .9375rem; line-height: 1.45; color: var(--fg-soft); text-align: right; text-wrap: balance; }
.co-roster__go {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--bone-400);
  color: var(--ink-700);
}
.co-roster__go::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: var(--gold-500);
  opacity: 0;
  transform: scale(.4);
  transition: transform .45s var(--ease-out), opacity .25s var(--ease);
}
.co-roster__go svg { position: relative; width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .co-roster__row:hover .co-roster__who { transform: translateX(.375rem); }
  .co-roster__row:hover .co-roster__go::before { opacity: 1; transform: scale(1); }
  .co-roster__row:hover .co-roster__go svg { transform: translateX(.1875rem); }
}
.co-roster__row:focus-visible { outline-offset: 2px; border-radius: var(--r-sm); }
.co-roster__row:focus-visible .co-roster__go::before { opacity: 1; transform: scale(1); }
.co-roster__row:active .co-roster__who { transform: translateX(.25rem); }

@media (max-width: 860px) {
  .co-story__intro, .co-roster { grid-column: 1 / -1; }
}
/* once the roster column gets narrow, the detail drops under the name and the
   arrow sits to the right of both */
@media (max-width: 1100px) {
  .co-roster__row {
    grid-template-columns: minmax(0, 1fr) 2.75rem;
    grid-template-areas: "who go" "what go";
    column-gap: 1rem;
    padding-block: 1rem 1.0625rem;
  }
  .co-roster__who { grid-area: who; }
  .co-roster__what { grid-area: what; text-align: left; }
  .co-roster__go { grid-area: go; }
}

/* ---- the less obvious work: a dark chapter, sticky picture, scrolling points */
.co-how { background: var(--ink-900); padding-block: clamp(6rem, 12vw, 11rem); }

/* heading on the left, then one plain statement stepping down to the right, read as you scroll */
.co-how__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem;
  margin-bottom: clamp(4rem, 8vw, 7rem);
}
.co-how__head h2 { grid-column: 1 / span 8; }
.co-how__stance {
  grid-column: 5 / -1;
  max-width: 30ch;
  margin-top: clamp(.5rem, 2vw, 1.75rem);
  font-family: var(--serif);
  font-size: clamp(1.625rem, 2.9vw, 2.75rem);
  line-height: 1.16;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.co-how .co-how__stance { color: var(--bone-100); }   /* beats the shared .on-ink p */
.co-how__stance::before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-bottom: 1.5rem;
  background: var(--gold-500);
}
@media (max-width: 860px) {
  .co-how__head h2, .co-how__stance { grid-column: 1 / -1; }
}

.co-swap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem;
}
.co-swap__media { grid-column: 1 / span 7; }
.co-swap__frame {
  position: sticky;
  top: 6.5rem;
  /* the photos are 1400 to 2000px wide, so the frame stays short enough that
     none of them is enlarged much past its real size */
  height: min(calc(100vh - 10rem), 34rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-800);
}
.co-swap__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.co-swap__list { grid-column: 8 / -1; padding-left: clamp(0rem, 2.5vw, 2.5rem); }
.co-swap__item {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding-block: 2.5rem;
}
.co-swap__item h3 { font-size: clamp(2rem, 3.1vw, 3rem); line-height: 1.04; }
.co-swap__text { color: var(--on-ink-soft); max-width: 44ch; }
.co-swap__item .link-arrow { align-self: flex-start; margin-top: .25rem; }
.co-swap__item .co-tel { color: var(--bone-100); overflow-wrap: anywhere; white-space: normal; }
.co-swap__item .co-tel[href^="tel"] { white-space: nowrap; }
.co-swap__inline { display: none; }

@media (max-width: 899px) {
  .co-swap { grid-template-columns: 1fr; }
  .co-swap__media { display: none; }
  .co-swap__list { grid-column: 1 / -1; display: grid; gap: clamp(3rem, 9vw, 4.5rem); padding-left: 0; }
  .co-swap__item { min-height: 0; padding: 0; gap: .875rem; }
  .co-swap__inline {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-md);
    margin-bottom: .5rem;
  }
  /* no sticky picture on a phone, so every point stays at full strength */
  .co-swap [data-swap-item]:not(.is-active) { opacity: 1; }
}
/* Without the motion engine (reduced motion, JavaScript off, a slow CDN) the
   sticky frame could only ever show its first photo beside every point, so on
   desktop each point shows its own photo instead, two to a row. */
@media (min-width: 900px) {
  html:not(.has-motion) .co-swap__media { display: none; }
  html:not(.has-motion) .co-swap__list {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4.5rem 2rem;
    padding-left: 0;
  }
  html:not(.has-motion) .co-swap__item { min-height: 0; padding: 0; justify-content: flex-start; }
  html:not(.has-motion) .co-swap__inline {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--r-md);
    margin-bottom: .5rem;
  }
}

/* ---- how a booking works: cards that pile up ----------------------------- */
.co-steps { padding-block: clamp(6rem, 12vw, 11rem) clamp(4rem, 8vw, 7rem); }
.co-stack { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }

.co-card {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem;
  min-height: clamp(20rem, 31vw, 25rem);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  background: var(--bone-100);
  top: calc(7rem + var(--i, 0) * 1.25rem);
}
/* The engine fades the card underneath to half opacity, which lets the text of
   every earlier card show through a translucent pile. Here the cards stay
   solid (important beats the inline style GSAP writes) and company.js dims a
   shade layer instead, so the pile reads as depth, never as ghosting. */
.co-stack [data-stack-card] { opacity: 1 !important; }
.co-card__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: var(--ink-900);
  opacity: 0;
  pointer-events: none;
}
.co-card--2 { background: var(--gold-100); }
.co-card--3 { background: var(--ink-700); }
.co-card--4 { background: var(--ink-800); }
.co-card__main { grid-column: 1 / span 7; display: grid; grid-template-rows: auto 1fr auto; gap: 1.25rem; }
.co-card__main h3 { font-size: clamp(2rem, 4vw, 3.75rem); line-height: 1; max-width: 16ch; }
/* the step number fills the gap between label and title; the list itself is
   an ol, so this is decoration and hidden from screen readers */
.co-card__n {
  align-self: center;
  font-family: var(--serif);
  font-size: clamp(5rem, 9vw, 8.5rem);
  line-height: .8;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
}
.co-card.on-ink .co-card__n { color: var(--gold-400); }
.co-card__side { grid-column: 9 / -1; display: grid; gap: 1.5rem; align-content: end; }
.co-card__side p { color: var(--fg-soft); font-size: 1rem; }
.co-card.on-ink .co-card__side p { color: var(--on-ink-soft); }
.co-card .ticks { padding-top: 1.25rem; border-top: 1px solid rgba(7, 38, 22, .14); gap: .5rem; }
.co-card .ticks li { font-size: .9375rem; }
.co-card .co-tel { color: inherit; }
.co-card.on-ink .ticks { border-top-color: rgba(244, 241, 232, .16); }
.co-card--2 .ticks li::before { background: var(--gold-600); border-color: var(--gold-600); }

/* Below 900px the cards are a plain column: nothing sticks, nothing shrinks,
   so every list is readable on a short phone. Important beats the inline
   transform the engine's scale tween writes. */
@media (max-width: 899px) {
  .co-stack [data-stack-card] { position: relative; top: auto; transform: none !important; }
}

@media (max-width: 860px) {
  .co-card {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    min-height: 0;
  }
  .co-card__main, .co-card__side { grid-column: 1 / -1; }
  .co-card__main { grid-template-rows: none; padding-right: 3.5rem; }
  .co-card__main h3 { font-size: clamp(1.875rem, 8vw, 2.5rem); }
  .co-card__n {
    position: absolute;
    top: clamp(1.25rem, 4vw, 1.75rem);
    right: clamp(1.5rem, 4vw, 1.75rem);
    font-size: 3.5rem;
  }
  .co-card__side { gap: 1rem; }
  .co-card .ticks { padding-top: 1rem; }
}

/* ---- next: fleet and tours ------------------------------------------------- */
.co-next { padding-bottom: clamp(6rem, 12vw, 10rem); }
.co-next__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.co-next__card {
  position: relative;
  display: grid;
  min-height: clamp(26rem, 40vw, 36rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s var(--ease);
}
.co-next__card:active { transform: scale(.99); }
.co-next__body { display: grid; gap: .75rem; align-content: end; padding: clamp(1.5rem, 3vw, 2.5rem); }
.co-next__body h2 { font-size: clamp(1.75rem, 2.8vw, 2.625rem); line-height: 1.05; max-width: 18ch; }

.co-next__fleet {
  grid-template-rows: 1fr auto;
  background: linear-gradient(180deg, var(--bone-100) 0%, var(--bone-300) 100%);
}
.co-sizes {
  align-self: start;
  display: grid;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) 0;
}
.co-sizes li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
  padding-block: .75rem .875rem;
  border-bottom: 1px solid rgba(7, 38, 22, .14);
  transition: transform .6s var(--ease-out);
  transition-delay: calc(var(--n) * 40ms);
}
/* each range is set a little larger than the one before, so the column reads
   as small, medium and large at a glance */
.co-sizes b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(clamp(2.25rem, 4.2vw, 3.75rem) * (1 + var(--n) * .14));
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--ink-800);
  white-space: nowrap;
}
.co-sizes span {
  padding-bottom: .375rem;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--fg-soft);
  text-align: right;
}
/* on the narrowest phones the label drops under its range */
@media (max-width: 400px) {
  .co-sizes li { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .co-sizes span { text-align: left; padding-bottom: 0; }
}
.co-next__tours { color: var(--bone-100); background: var(--ink-800); }
.co-next__tours img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-out);
}
.co-next__tours::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(3, 21, 12, .92) 0%, rgba(3, 21, 12, .8) 42%, rgba(3, 21, 12, .3) 70%, rgba(3, 21, 12, 0) 90%);
}
/* over a photo the label stays bone; the gold lives in its marker line */
.co-next__tours .co-tag { color: var(--bone-100); }
.co-next__tours .link-arrow { color: var(--gold-400); }

.co-next__card .link-arrow { margin-top: .5rem; }
.co-next__card .link-arrow svg { transition: transform .35s var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .co-next__fleet:hover .co-sizes li { transform: translateX(.5rem); }
  .co-next__tours:hover img { transform: scale(1.045); }
  .co-next__card:hover .link-arrow svg { transform: translateX(.25rem); }
}
.co-next__card:focus-visible { outline-offset: 4px; }

@media (max-width: 860px) {
  .co-next__grid { grid-template-columns: 1fr; }
  .co-next__card { min-height: 0; }
  .co-next__tours { min-height: 26rem; }
}

/* ---- sign off ------------------------------------------------------------------ */
.co-close { padding-block: clamp(6rem, 12vw, 10.5rem) clamp(4rem, 7vw, 6rem); }
.co-close__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  align-items: end;
}
.co-close__title {
  grid-column: 1 / span 7;
  font-size: clamp(3.25rem, 8.4vw, 8.25rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--bone-100);
}
.co-close__copy { grid-column: 8 / -1; display: grid; gap: 1.75rem; }
@media (max-width: 980px) {
  .co-close__grid { grid-template-columns: minmax(0, 1fr); }
  .co-close__title, .co-close__copy { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .co-close__copy .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

/* ---- dark opening chapter, header floats over it ------------------------ */
.co-chero { padding-block: clamp(7.5rem, 12vw, 11rem) clamp(5rem, 10vw, 8.5rem); }
.co-chero .breadcrumb { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.co-chero__title {
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 1;
  letter-spacing: -.028em;
  color: var(--bone-100);
  max-width: 21ch;
}
.co-chero__title em { font-style: italic; color: var(--gold-400); }
.co-chero__lede { margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: 44ch; }

.co-reach {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 7rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
  align-items: start;
}

.co-ways__group {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 2.75rem 0 .5rem;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  color: var(--gold-400);
}
.co-ways__group:first-child { margin-top: 0; }
.co-ways__group svg { width: 15px; height: 15px; }
.co-ways__list { border-top: 1px solid rgba(244, 241, 232, .14); }
.co-ways__list > li { border-bottom: 1px solid rgba(244, 241, 232, .14); }

/* one tactile row per way to reach us: the whole row is the link */
.co-way {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label disc" "value disc" "note disc";
  column-gap: 1.5rem;
  row-gap: .3125rem;
  padding-block: 1.5rem 1.625rem;
  transition: transform .2s var(--ease);
}
.co-way::before {
  content: "";
  position: absolute;
  inset: 0 -1rem;
  z-index: -1;
  border-radius: var(--r-sm);
  background: rgba(244, 241, 232, .055);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--ease-out);
}
.co-way__label { grid-area: label; font-size: .875rem; font-weight: 600; color: var(--on-ink-soft); }
.co-way--flag .co-way__label { color: var(--gold-400); }
.co-way__value {
  grid-area: value;
  font-family: var(--serif);
  font-size: clamp(2.125rem, 4.2vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.012em;
  color: var(--bone-100);
  transition: transform .5s var(--ease-out);
}
.co-way__value--mail { font-size: clamp(1.4rem, 2.7vw, 2.375rem); overflow-wrap: anywhere; }
.co-way__note { grid-area: note; font-size: .9375rem; color: var(--on-ink-soft); max-width: 46ch; }

.co-way__disc {
  grid-area: disc;
  align-self: center;
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 232, .24);
  color: var(--bone-100);
}
.co-way__disc::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: var(--gold-500);
  opacity: 0;
  transform: scale(.4);
  transition: transform .45s var(--ease-out), opacity .25s var(--ease);
}
.co-way__ico { grid-area: 1 / 1; position: relative; transition: opacity .25s var(--ease), transform .45s var(--ease-out); }
.co-way__ico svg { width: 20px; height: 20px; }
.co-way__ico--on { color: var(--ink-900); opacity: 0; transform: scale(.8); }

@media (hover: hover) and (pointer: fine) {
  .co-way:hover::before { transform: scaleX(1); }
  .co-way:hover .co-way__value { transform: translateX(.375rem); }
  .co-way:hover .co-way__disc::before { opacity: 1; transform: scale(1); }
  .co-way:hover .co-way__ico { opacity: 0; }
  .co-way:hover .co-way__ico--on { opacity: 1; transform: scale(1); }
}
.co-way:focus-visible { outline: none; }
.co-way:focus-visible::before { transform: scaleX(1); box-shadow: inset 0 0 0 2px var(--gold-400); }
.co-way:focus-visible .co-way__disc::before { opacity: 1; transform: scale(1); }
.co-way:focus-visible .co-way__ico { opacity: 0; }
.co-way:focus-visible .co-way__ico--on { opacity: 1; transform: scale(1); }
.co-way:active { transform: scale(.985); }

/* ---- aside: where, when, socials ------------------------------------------------ */
.co-aside { display: grid; gap: 1.75rem; }
.co-aside__photo { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 10; background: var(--ink-700); }
.co-aside__photo img { width: 100%; height: 100%; object-fit: cover; }
.co-aside__block { display: grid; gap: .5rem; padding-top: 1.5rem; border-top: 1px solid rgba(244, 241, 232, .14); }
.co-aside__block h2 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  color: var(--gold-400);
}
.co-aside__block h2 svg { width: 15px; height: 15px; }
.co-aside__block p { font-size: 1rem; }
.co-aside .socials { margin-top: .25rem; }
.co-aside .socials a { width: 44px; height: 44px; }
@media (hover: hover) and (pointer: fine) {
  .co-aside .socials a:hover { transform: translateY(-2px); }
}
@media (min-width: 900px) and (min-height: 760px) {
  .co-aside { position: sticky; top: 6.5rem; }
}

@media (max-width: 899px) {
  .co-reach { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .co-way { column-gap: 1rem; padding-block: 1.25rem 1.375rem; }
  .co-way::before { inset: 0 -.75rem; }
  .co-way__disc { width: 2.75rem; height: 2.75rem; }
  .co-way__ico svg { width: 18px; height: 18px; }
  .co-way__value { font-size: clamp(1.875rem, 9vw, 2.25rem); }
  .co-way__value--mail { font-size: clamp(1.1875rem, 5.3vw, 1.5rem); }
}

/* ---- how far we go: a drawn route ------------------------------------------ */
.co-route { padding-block: clamp(6rem, 12vw, 10.5rem); }
.co-route__track { position: relative; }
.co-route__track::before,
.co-route__line {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: .4375rem;
  height: 2px;
}
.co-route__track::before { background: var(--bone-400); }
.co-route__line { background: var(--gold-500); transform-origin: 0 50%; }

.co-route__stops {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1.5rem;
}
.co-route__stops li { position: relative; display: grid; gap: .5rem; align-content: start; padding-top: 2.5rem; }
.co-route__stops li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--bone-200);
  border: 2px solid var(--gold-500);
}
.co-route__stops li:first-child::before { background: var(--gold-500); box-shadow: 0 0 0 5px rgba(201, 146, 43, .18); }
.co-route__stops h3 { font-size: clamp(1.25rem, 1.55vw, 1.5rem); line-height: 1.1; }
.co-route__stops p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--fg-soft); }

/* 861 to 1200px: seven columns are too narrow for the notes, so the route
   runs downwards in the right half while the heading holds still on the left */
@media (min-width: 861px) and (max-width: 1200px) {
  .co-route .wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: start;
  }
  .co-route .co-head {
    grid-column: 1 / span 5;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-bottom: 0;
    position: sticky;
    top: 7rem;
  }
  .co-route .co-head h2, .co-route .co-head .lede { grid-column: 1 / -1; }
  .co-route__track { grid-column: 7 / -1; }
}
@media (max-width: 1200px) {
  .co-route__track::before,
  .co-route__line { left: .4375rem; right: auto; top: .5rem; bottom: .5rem; width: 2px; height: auto; }
  .co-route__line { transform-origin: 50% 0; }
  .co-route__stops { grid-template-columns: 1fr; gap: 2rem; padding-left: 2.75rem; }
  .co-route__stops li { padding-top: 0; gap: .25rem; }
  .co-route__stops li::before { left: -2.75rem; top: .25rem; }
  .co-route__stops p { font-size: .9375rem; }
}
@media (min-width: 861px) and (max-width: 1200px) {
  .co-route__stops { gap: 2.25rem; }
  .co-route__stops h3 { font-size: 1.75rem; }
  .co-route__stops li::before { top: .5625rem; }
  .co-route__track::before, .co-route__line { top: 1rem; }
}

/* ---- the route into the quote form ----------------------------------------- */
.co-quote { background: var(--bone-300); padding-block: clamp(5.5rem, 11vw, 9.5rem); }
.co-quote__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  align-items: center;
}
.co-quote__copy { grid-column: 1 / span 5; display: grid; gap: 1.5rem; }
.co-quote__form {
  grid-column: 7 / -1;
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--bone-100);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
.co-quote__head { display: grid; gap: .375rem; }
.co-quote__head h3 { font-size: clamp(1.625rem, 2.4vw, 2.125rem); }
.co-quote__head p { margin: 0; font-size: .9375rem; color: var(--fg-soft); }
/* service gets its own row, date and passengers share the next, so no field
   is ever too narrow for its value */
.co-quote__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .875rem;
}
.co-quote__fields .field:first-child { grid-column: 1 / -1; }
.co-quote__fields .field, .co-quote__fields .input, .co-quote__fields .select { min-width: 0; }
/* the shared field label colour is 4.15:1 on bone-100; fg-soft is about 8:1 */
.co-quote__form .field > span { color: var(--fg-soft); }
.co-quote__go { justify-self: start; }
.co-quote__go svg { transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .co-quote__go:hover svg { transform: translateX(.25rem); }
}
@media (max-width: 1200px) and (min-width: 861px) {
  .co-quote__copy { grid-column: 1 / span 5; }
  .co-quote__form { grid-column: 6 / -1; }
}
@media (max-width: 860px) {
  .co-quote__copy, .co-quote__form { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .co-quote__fields { grid-template-columns: 1fr; }
  .co-quote__go { justify-self: stretch; white-space: normal; }
}

/* ---- urgent: the 24 hour number, as big as it can be ------------------------- */
.co-urgent { background: var(--ink-800); padding-block: clamp(5.5rem, 11vw, 9rem); }
.co-urgent__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  gap: 1.25rem 2.5rem;
  align-items: end;
}
.co-urgent h2 { grid-column: 1 / -1; font-size: clamp(1.75rem, 3vw, 2.625rem); color: var(--bone-200); }
.co-urgent__note { display: grid; gap: 1.25rem; padding-bottom: clamp(.5rem, 1.5vw, 1.5rem); }
.co-urgent__note p { margin: 0; }
@media (max-width: 860px) {
  .co-urgent__in { grid-template-columns: 1fr; }
}
.co-urgent__num {
  justify-self: start;
  font-family: var(--serif);
  font-size: clamp(3.25rem, 13vw, 12rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--gold-400);
  white-space: nowrap;
  transition: transform .5s var(--ease-out);
}
.co-urgent p { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); }
@media (hover: hover) and (pointer: fine) {
  .co-urgent__num:hover { transform: translateX(.5rem); }
}
.co-urgent__num:active { transform: scale(.98); }

/* ==========================================================================
   PHONES AND SMALL TABLETS
   Kept last so it beats every grid definition above. Below 860px each
   twelve column grid drops to a single track: twelve tracks with eleven 2rem
   gaps can't be narrower than 352px, wider than a 360px phone's content.
   ========================================================================== */
@media (max-width: 860px) {
  .co-head, .co-hero__foot, .co-story__grid, .co-how__head, .co-quote__grid, .co-card {
    grid-template-columns: minmax(0, 1fr);
  }
}