/* ============================================================
   ODYSSEY CONNECTIONS: shared site layer (templated pages)
   Loads after main.css. Adds the utility bar, six-item navigation
   with large menus, the sticky enquiry bar, the footer, and the
   section styles used by hub pages.
   ============================================================ */

:root {
  --util-h: 34px;
  --main-h: 74px;
  --nav-h: calc(var(--util-h) + var(--main-h));
  --panel: rgba(8, 12, 19, 0.94);
}

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--champagne); color: var(--ink); padding: 10px 16px; border-radius: 3px;
  font-size: 0.8rem; transition: top 0.2s;
}
.skip-link:focus { top: 12px; }
.anchor { display: block; height: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */

.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  transition: transform 0.5s var(--ease-lux), background-color 0.4s;
  background: linear-gradient(180deg, rgba(6, 9, 15, 0.9) 0%, rgba(6, 9, 15, 0.62) 58%, rgba(6, 9, 15, 0) 100%);
  padding-bottom: 26px; margin-bottom: -26px;
}
.site-head.is-solid, .site-head.is-open, .site-head.menu-open {
  background: var(--panel);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.site-head.is-solid, .site-head.is-open, .site-head.menu-open { padding-bottom: 0; }
.site-head.is-solid { border-bottom: 1px solid var(--hairline); }
.site-head.is-compact { transform: translateY(calc(var(--util-h) * -1)); }

.util {
  height: var(--util-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 clamp(18px, 3vw, 42px);
  border-bottom: 1px solid var(--hairline);
  color: var(--muted); font-size: 0.62rem;
}
.util a { transition: color 0.3s; }
.util a:hover { color: var(--champagne); }
.util-left, .util-right, .util-clocks { display: flex; align-items: center; gap: 22px; }
.util-clocks { color: var(--faint); }
.util-clocks b { color: var(--muted); font-weight: 400; margin-left: 4px; }
.util-ops { display: inline-flex; align-items: center; gap: 8px; color: var(--faint); }
.util-ops .dot { width: 6px; height: 6px; border-radius: 50%; background: #6fcf8f; box-shadow: 0 0 0 0 rgba(111, 207, 143, 0.6); animation: ops-pulse 2.6s infinite; }
@keyframes ops-pulse { 0% { box-shadow: 0 0 0 0 rgba(111, 207, 143, 0.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(111, 207, 143, 0); } }

.mainnav {
  height: var(--main-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 clamp(18px, 3vw, 42px);
}
.menu { flex: 1; display: flex; justify-content: center; }
.menu-list { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 34px); }
.menu-top {
  display: inline-block; padding: 26px 0; position: relative;
  font-size: 0.78rem; letter-spacing: 0.06em; color: var(--porcelain); opacity: 0.86;
  transition: opacity 0.3s, color 0.3s; white-space: nowrap;
}
.menu-top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 19px; height: 1px;
  background: var(--champagne); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-lux);
}
.menu-item.is-open .menu-top, .menu-top:hover, .menu-top[aria-current="page"] { opacity: 1; color: var(--champagne); }
.menu-item.is-open .menu-top::after, .menu-top[aria-current="page"]::after { transform: scaleX(1); }

.nav-cta { display: flex; align-items: center; gap: 12px; flex: none; }
.nav-cta .btn-pill { padding: 0.72em 1.4em; font-size: 0.66rem; }
/* seven menu items since the Journal joined (15 Oct 2026): on narrow desktops the row needs the room the account
   button took, so it steps out between the burger breakpoint and 1340 px (the enquiry bar and the menu still offer it) */
@media (min-width: 1181px) and (max-width: 1340px) { .nav-cta .btn-pill--ghost { display: none; } .menu-list { gap: clamp(14px, 1.6vw, 30px); } }
.btn-pill--ghost { background: rgba(6, 9, 15, 0.25); }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--panel);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.3s, transform 0.4s var(--ease-lux), visibility 0s 0.3s;
}
.menu-item.is-open .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega-inner {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(220px, 280px);
  gap: clamp(24px, 3vw, 56px);
  padding: 38px clamp(18px, 3vw, 42px) 44px; max-width: 1500px; margin: 0 auto;
}
.mega-col--wide { grid-column: span 2; }
.mega-col h3 { color: var(--champagne); margin: 0 0 14px; font-weight: 400; }
.mega-col h3:not(:first-child) { margin-top: 28px; }
.mega-links { display: grid; gap: 9px; }
.mega-links--2 { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 56px); }
.mega-links a { font-size: 0.92rem; color: var(--porcelain); opacity: 0.8; transition: opacity 0.25s, color 0.25s, padding 0.35s var(--ease-lux); }
.mega-links a:hover { opacity: 1; color: var(--champagne); padding-left: 6px; }
.mega-feature { display: block; grid-column: 4; }
.mega-feature figure { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; border: 1px solid var(--hairline); margin-bottom: 12px; }
.mega-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-lux); }
.mega-feature:hover img { transform: scale(1.06); }
.mega-feature .mono { color: var(--champagne); display: block; margin-bottom: 4px; }
.mega-feature strong { font-family: 'Fraunces', serif; font-weight: 450; font-size: 1.15rem; }

[data-soon] { cursor: default; }

.burger { display: none; width: 44px; height: 44px; background: none; border: 1px solid var(--champagne-dim); border-radius: 50%; position: relative; cursor: pointer; }
.burger i { position: absolute; left: 13px; right: 13px; height: 1px; background: var(--porcelain); transition: transform 0.4s var(--ease-lux), top 0.4s var(--ease-lux); }
.burger i:first-child { top: 18px; } .burger i:last-child { top: 25px; }
.site-head.is-open .burger i:first-child { top: 21px; transform: rotate(45deg); }
.site-head.is-open .burger i:last-child { top: 21px; transform: rotate(-45deg); }

/* ---------- hub hero + light chapters ---------- */

.page-hub .hero-scrim {
  background:
    linear-gradient(180deg, rgba(6,9,15,0.6) 0%, rgba(6,9,15,0) 34%),
    linear-gradient(180deg, rgba(6,9,15,0) 36%, rgba(6,9,15,0.86) 100%);
}
.hero-title--hub { font-size: clamp(3.4rem, 7.4vw, 9rem); letter-spacing: 0; }
.page-hub .hero-body { bottom: 15svh; max-width: 1500px; }
.page-hub .hero-sub { justify-content: flex-start; align-items: flex-end; gap: clamp(28px, 5vw, 90px); margin-top: 2.4vh; }
[data-split] .word { display: inline-block; white-space: nowrap; }
.page-hub .hero-over { text-shadow: var(--halo-sm), 0 1px 12px rgba(0,0,0,0.9); }
.page-hub .hero-title { text-shadow: var(--halo), 0 2px 40px rgba(0,0,0,0.55); }
.page-hub .hero-kicker { text-shadow: var(--halo-sm), 0 2px 40px rgba(0,0,0,0.55); }
.page-hub .hero-kicker em { text-shadow: var(--halo); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-kicker em { display: inline-block; font-size: 1.5em; line-height: 1.2; margin-bottom: 0.2em; }
.page-hub .hero-kicker { max-width: 34ch; }

.chapter--light::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 46% at 86% 40%, rgba(6,9,15,0.72) 0%, rgba(6,9,15,0) 100%),
    linear-gradient(180deg, rgba(6,9,15,0) 52%, rgba(6,9,15,0.78) 100%);
}
.chapter--light .chapter-word { font-size: clamp(3rem, 7.2vw, 8.6rem); }
.chapter--light .chapter-leg { text-shadow: var(--halo-sm), 0 1px 14px rgba(0,0,0,0.9); }
.chapter--light .chapter-line { top: 32vh; }
.chapter--light .chapter-copy { top: 40vh; max-width: 360px; pointer-events: auto; }
.chapter-link {
  display: block; margin-top: 14px; color: var(--champagne); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.chapter-link::after, .text-link::after { content: '\2192'; display: inline-block; margin-left: 10px; transition: transform 0.4s var(--ease-lux); }
.chapter-link:hover::after, .text-link:hover::after, a:hover > .text-link::after { transform: translateX(6px); }
.text-link { color: var(--champagne); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }

.film-hud { pointer-events: auto; }
.film-skip { color: var(--muted); transition: color 0.3s; white-space: nowrap; }
.film-skip:hover { color: var(--champagne); }

/* ---------- trust strip ---------- */

.trust { padding: clamp(36px, 4.4vw, 64px) var(--pad-x) clamp(28px, 3.4vw, 48px); border-bottom: 1px solid var(--hairline); }
.trust-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 56px); }
.trust-list li { display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--hairline); padding-left: 22px; }
.trust-list b { font-family: 'Fraunces', serif; font-weight: 350; font-size: clamp(1.8rem, 2.8vw, 2.9rem); color: var(--champagne); line-height: 1; }
.trust-list span { color: var(--muted); font-size: 0.9rem; max-width: 24ch; }
.trust-partners { margin-top: clamp(24px, 3vw, 44px); color: var(--faint); text-align: center; }

/* ---------- intro ---------- */

.intro { padding: var(--sec-y) var(--pad-x); }
.intro-grid, .assurance-grid, .quote-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.intro .section-title, .assurance .section-title, .quote .section-title { margin-bottom: 0; font-size: clamp(2.2rem, 4.2vw, 4.4rem); text-transform: none; line-height: 1.04; }
.intro-copy p, .assurance-copy p, .quote-intro p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.2em; max-width: 56ch; }

/* ---------- two ways ---------- */

.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.way { background: var(--ink); padding: clamp(40px, 6vw, 96px) var(--pad-x); display: flex; flex-direction: column; }
.way--account { background: linear-gradient(160deg, #0d131d 0%, var(--ink) 70%); }
.way-over { color: var(--champagne); margin-bottom: 18px; }
.way h2 { font-family: 'Fraunces', serif; font-weight: 480; font-size: clamp(2.2rem, 3.6vw, 3.8rem); line-height: 1; margin-bottom: 18px; }
.way-lead { font-size: 1.1rem; color: var(--porcelain); opacity: 0.9; max-width: 40ch; margin-bottom: 28px; }
.ticks { display: grid; gap: 12px; margin-bottom: 40px; }
.ticks li { position: relative; padding-left: 28px; color: var(--muted); font-size: 0.97rem; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 14px; height: 1px; background: var(--champagne); }
.way-actions { margin-top: auto; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* ---------- services index ---------- */

.services { padding: var(--sec-y) var(--pad-x); }
.services .section-title { margin-bottom: var(--head-gap); }
.svc-group { display: grid; grid-template-columns: minmax(160px, 0.32fr) 1fr; gap: clamp(20px, 3vw, 56px); border-top: 1px solid var(--hairline); padding: 34px 0 22px; }
.svc-head { color: var(--champagne); font-weight: 400; padding-top: 6px; }
.svc-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 72px); }
.svc-list a { display: block; padding: 0 0 26px; }
.svc-list strong { display: block; font-family: 'Fraunces', serif; font-weight: 450; font-size: 1.28rem; line-height: 1.2; margin-bottom: 6px; transition: color 0.3s; }
.svc-list strong::after { content: '\2192'; display: inline-block; margin-left: 10px; color: var(--champagne); opacity: 0; transform: translateX(-8px); transition: opacity 0.3s, transform 0.4s var(--ease-lux); }
.svc-list a:hover strong { color: var(--champagne); }
.svc-list a:hover strong::after { opacity: 1; transform: none; }
.svc-list span { color: var(--muted); font-size: 0.93rem; max-width: 44ch; display: block; }

/* ---------- fleet ---------- */

.fleet { padding: var(--sec-y) var(--pad-x); }
.fleet-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 120px); align-items: end; margin-bottom: var(--head-gap); }
.fleet-head .section-title { margin-bottom: 0; }
.fleet-intro { color: var(--muted); font-size: 1.05rem; line-height: 1.7; max-width: 52ch; }
.fleet-cards { display: grid; grid-template-columns: 1.2fr 1.2fr 0.8fr; gap: clamp(18px, 2.4vw, 40px); }
.fleet-cards--3 { grid-template-columns: repeat(3, 1fr); }
.grounds-more { margin-top: var(--head-gap); }
.fleet-card a { display: block; height: 100%; }
.fleet-card figure { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px; border: 1px solid var(--hairline); background: var(--ink-2); margin-bottom: 20px; }
.fleet-card img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease-lux); }
.fleet-card a:hover img { transform: scale(1.08); }
.fleet-card h3 { font-family: 'Fraunces', serif; font-weight: 480; font-size: clamp(1.4rem, 1.9vw, 2rem); margin-bottom: 8px; }
.fleet-card .mono { color: var(--champagne); margin-bottom: 10px; }
.fleet-card p { color: var(--muted); font-size: 0.95rem; max-width: 42ch; }
.fleet-card--more a { border: 1px solid var(--hairline); border-radius: 3px; padding: clamp(24px, 2.4vw, 40px); display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; transition: border-color 0.4s, background-color 0.4s; }
.fleet-card--more a:hover { border-color: var(--champagne-dim); background: rgba(201, 168, 106, 0.05); }

/* ---------- coverage ---------- */

.coverage { position: relative; overflow: hidden; padding: calc(var(--sec-y) * 1.25) var(--pad-x); }
.coverage-media, .coverage-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coverage-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,9,15,0.95) 0%, rgba(6,9,15,0.82) 48%, rgba(6,9,15,0.5) 100%), linear-gradient(180deg, var(--ink) 0%, rgba(6,9,15,0) 22%, rgba(6,9,15,0) 78%, var(--ink) 100%); }
.coverage-body { position: relative; }
.coverage .section-title { margin-bottom: var(--head-gap); max-width: 16ch; }
.coverage-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 72px); margin-bottom: var(--head-gap); max-width: 1200px; }
.coverage-cols h3 { color: var(--champagne); font-weight: 400; margin-bottom: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips a { display: inline-block; border: 1px solid var(--hairline); border-radius: 999px; padding: 0.55em 1.1em; font-size: 0.85rem; color: var(--porcelain); background: rgba(6, 9, 15, 0.5); transition: border-color 0.3s, color 0.3s; }
.chips a:hover { border-color: var(--champagne); color: var(--champagne); }

/* ---------- how / assurance ---------- */

.page-hub .how { padding: var(--sec-y) var(--pad-x); }
/* hub sections that run on without a rule between them share one gap */
.services + .fleet, .fleet + .services, .page-hub .how + .assurance { padding-top: 0; }
.page-hub .how .section-title { margin-bottom: 0; }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.assurance { padding: var(--sec-y) var(--pad-x); }
.assurance-grid { border-top: 1px solid var(--hairline); padding-top: var(--sec-y); }
.assurance-links { display: flex; flex-direction: column; gap: 14px; margin-top: 2.4em; }

/* ---------- quote form ---------- */

.quote { padding: var(--sec-y) var(--pad-x); background: linear-gradient(180deg, #0a1018 0%, var(--ink) 100%); border-top: 1px solid var(--hairline); }
.quote-intro .section-title { margin-bottom: 28px; }
.quote-direct a { color: var(--champagne); }
.quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: 'IBM Plex Mono', monospace; font-weight: 300; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.field label span { color: var(--faint); text-transform: none; letter-spacing: 0.04em; }
.field input, .field select, .field textarea {
  width: 100%; background: rgba(242, 237, 227, 0.04); color: var(--porcelain);
  border: 1px solid var(--hairline); border-radius: 3px; padding: 14px 16px;
  font: inherit; font-size: 0.98rem; transition: border-color 0.3s, background-color 0.3s; color-scheme: dark;
}
.field select option { background: #0a1018; color: var(--porcelain); }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--champagne); background: rgba(242, 237, 227, 0.07); }
.field .is-invalid { border-color: #d98a7a; }
.quote-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.quote-actions .btn-pill { cursor: pointer; background-color: transparent; font-family: inherit; }
.quote-actions .btn-pill--gold { background: var(--champagne); }
.form-error { color: #e5a596; }
.form-note { color: var(--faint); font-size: 0.82rem; }

/* ---------- faq ---------- */

.faq { padding: var(--sec-y) var(--pad-x); }
.faq .section-title { margin-bottom: var(--head-gap); }
.faq-list { max-width: 980px; border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { list-style: none; cursor: pointer; padding: 26px 48px 26px 0; position: relative; font-family: 'Fraunces', serif; font-weight: 430; font-size: clamp(1.15rem, 1.6vw, 1.5rem); transition: color 0.3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--champagne); }
.faq summary::before, .faq summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 16px; height: 1px; background: var(--champagne); transition: transform 0.4s var(--ease-lux); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { color: var(--muted); max-width: 66ch; padding: 0 0 28px; line-height: 1.7; }

.finale--hub { min-height: 92svh; align-items: flex-end; justify-content: flex-start; }
.finale--hub .finale-scrim { background: linear-gradient(180deg, var(--ink) 0%, rgba(6,9,15,0.1) 22%, rgba(6,9,15,0.05) 45%, rgba(6,9,15,0.9) 100%), linear-gradient(90deg, rgba(6,9,15,0.7) 0%, rgba(6,9,15,0) 55%); }
.finale--hub .finale-body { text-align: left; padding: 0 var(--pad-x) 13vh; width: 100%; }
.finale--hub .finale-title { font-size: clamp(2.6rem, 5.6vw, 6.4rem); }
.finale--hub .finale-actions { justify-content: flex-start; margin-top: 4vh; }

/* ---------- enquiry bar ---------- */

.enquiry-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 78;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 12px clamp(18px, 3vw, 42px);
  background: var(--panel); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--hairline);
  transform: translateY(102%); transition: transform 0.6s var(--ease-lux);
}
.enquiry-bar.is-visible { transform: none; }
.enquiry-line { color: var(--faint); }
.enquiry-actions { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 28px); }
.enquiry-link { font-size: 0.9rem; color: var(--porcelain); transition: color 0.3s; white-space: nowrap; }
.enquiry-link .mono { color: var(--champagne); margin-right: 8px; }
.enquiry-link:hover { color: var(--champagne); }
.enquiry-bar .btn-pill { padding: 0.72em 1.4em; font-size: 0.66rem; }

/* ---------- footer ---------- */

.sitefoot { border-top: 1px solid var(--hairline); padding: var(--sec-y) var(--pad-x) calc(var(--sec-y) * 0.5 + 70px); }
.sitefoot-top { display: grid; grid-template-columns: minmax(240px, 0.9fr) 2fr; gap: clamp(32px, 6vw, 120px); }
.sitefoot-brand p { color: var(--muted); max-width: 36ch; margin-top: 14px; font-size: 0.95rem; }
.sitefoot-brand .mono { color: var(--faint); }
.sitefoot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sitefoot-cols h3 { color: var(--champagne); font-weight: 400; margin-bottom: 16px; }
.sitefoot-cols a { display: block; color: var(--muted); font-size: 0.92rem; padding: 5px 0; transition: color 0.3s; }
.sitefoot-cols a:hover { color: var(--champagne); }
.sitefoot-base { margin-top: calc(var(--sec-y) * 0.75); padding-top: 24px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; color: var(--faint); }

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 96px; z-index: 120; transform: translate(-50%, 20px);
  background: var(--porcelain); color: var(--ink); padding: 12px 20px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity 0.35s, transform 0.45s var(--ease-lux);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- reveals ---------- */



/* ---------- reduced motion ---------- */

body.reduced .site-head { position: sticky; background: var(--panel); }
body.reduced .film-hero .hero-body { padding-top: 2vh; }
body.reduced .chapter--light .chapter-copy { pointer-events: auto; }

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  :root { --main-h: 66px; }
  .menu { position: absolute; left: 0; right: 0; top: 100%; height: calc(100dvh - var(--nav-h)); display: block; overflow-y: auto; background: #080c13; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 10px clamp(18px, 3vw, 42px) 140px; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s 0.35s; overscroll-behavior: contain; }
  .site-head.is-open .menu { opacity: 1; visibility: visible; transition-delay: 0s; }
  .site-head.is-open { transform: none; }
  .menu-list { display: block; }
  .menu-item { border-bottom: 1px solid var(--hairline); }
  .menu-top { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 22px 0; font-family: 'Fraunces', serif; font-size: 1.5rem; letter-spacing: 0; opacity: 1; }
  .menu-top::after { content: '+'; position: static; background: none; transform: none; height: auto; color: var(--champagne); font-family: 'Archivo', sans-serif; font-weight: 300; transition: transform 0.4s var(--ease-lux); }
  .menu-item.is-open .menu-top::after { transform: rotate(45deg); }
  .mega { position: static; background: none; border: 0; opacity: 1; visibility: visible; transform: none; display: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-item.is-open .mega { display: block; }
  .mega-inner { display: block; padding: 0 0 26px; }
  .mega-col h3:not(:first-child), .mega-col + .mega-col h3:first-child { margin-top: 24px; }
  .mega-links--2 { grid-template-columns: 1fr; }
  .mega-links a { font-size: 1rem; padding: 3px 0; }
  .mega-feature { display: block; margin-top: 22px; }
  .mega-feature figure, .mega-feature .mono { display: none; }
  .mega-feature strong { font-family: 'Archivo', sans-serif; font-weight: 400; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--champagne); }
  .mega-feature strong::after { content: '\2192'; margin-left: 10px; }
  .burger { display: block; }
  .nav-cta .btn-pill--ghost { display: none; }
  .fleet-cards { grid-template-columns: 1fr 1fr; }
  .fleet-card--more { grid-column: 1 / -1; }
  .steps--4 { grid-template-columns: 1fr 1fr; }
  .svc-group { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 820px) {
  :root { --util-h: 32px; --main-h: 60px; }
  .util-clocks, .util-ops, .util-right a { display: none; }
  .util { justify-content: center; } .util-left { gap: 26px; }
  .nav-word { display: block; font-size: 0.82rem; }
  .nav-mark { width: 34px; height: 34px; }
  .nav-cta .btn-pill { padding: 0.66em 1.1em; font-size: 0.6rem; }

  .hero-title--hub { font-size: clamp(2.8rem, 13.5vw, 6.4rem); line-height: 0.95; }
  .page-hub .hero-body { bottom: calc(9svh + 64px); }
  .page-hub .hero-sub { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-actions { width: 100%; } .hero-actions .btn-pill { flex: 1; text-align: center; }
  /* phones: the film is a 16:9 strip near the top, words sit underneath it */
  .page-hub .film-video, .page-hub .hero-media img { object-fit: contain; object-position: 50% 0; top: calc(var(--nav-h) + 8px); height: calc(100% - var(--nav-h) - 8px); transform: none !important; }
  .page-hub .hero-scrim { background: linear-gradient(180deg, rgba(6,9,15,0) 30%, rgba(6,9,15,0.9) 46%); }
  .page-hub .film-vignette, .chapter--light::before { display: none; }
  .chapter--light { display: block; padding: calc(var(--nav-h) + 56.25vw + 34px) var(--pad-x) 0; }
  .chapter--light .chapter-word { font-size: clamp(2.6rem, 11.5vw, 5rem); margin-top: 10px; }
  .chapter--light .chapter-line { position: static; text-align: left; margin-top: 18px; }
  .chapter--light .chapter-copy { position: static; text-align: left; max-width: 100%; margin-top: 8px; font-size: 0.95rem; }
  .page-hub .film-hud { bottom: calc(2vh + 64px); }

  .trust-list { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .trust-list li { padding-left: 16px; }
  .intro-grid, .assurance-grid, .quote-grid, .fleet-head, .sitefoot-top { grid-template-columns: 1fr; }
  .ways { grid-template-columns: 1fr; }
  .svc-list { grid-template-columns: 1fr; }
  .fleet-cards { grid-template-columns: 1fr; }
  .coverage-cols { grid-template-columns: 1fr; }
  .coverage-scrim { background: linear-gradient(180deg, var(--ink) 0%, rgba(6,9,15,0.86) 20%, rgba(6,9,15,0.86) 80%, var(--ink) 100%); }
  .steps--4 { grid-template-columns: 1fr; }
  .quote-form { grid-template-columns: 1fr; }
  .finale--hub .finale-body { padding-bottom: calc(9vh + 64px); }
  .finale--hub .finale-scrim { background: linear-gradient(180deg, var(--ink) 0%, rgba(6,9,15,0.1) 18%, rgba(6,9,15,0.22) 38%, rgba(6,9,15,0.72) 60%, rgba(6,9,15,0.92) 100%); }
  .finale--hub .finale-actions { align-items: stretch; } .finale--hub .finale-actions .btn-pill { text-align: center; }
  .sitefoot-cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; }

  /* on phones the enquiry bar is always there: call, WhatsApp, quote */
  .enquiry-bar { transform: none; padding: 10px 14px; gap: 10px; }
  .enquiry-line, .enquiry-bar .btn-pill--ghost { display: none; }
  .enquiry-actions { width: 100%; justify-content: space-between; gap: 8px; }
  /* font-size 0 hides the number, so the padding is in rem or the pill collapses; 44px is the tap-target floor */
  .enquiry-link { font-size: 0; border: 1px solid var(--champagne-dim); border-radius: 999px; padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; text-align: center; }
  .enquiry-link .mono { font-size: 0.7rem; margin: 0; color: var(--porcelain); }
  /* "Open an account" and "Get a quote" as a matched pair (owner, 11 Oct 2026): same width, size, tracking and inner
     space, each on two lines; light-on-dark reads heavier than dark-on-gold, so the outlined one is a step lighter */
  .enquiry-bar .btn-pill { flex: 1 1 0; min-width: 0; text-align: center; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.62rem; letter-spacing: 0.1em; line-height: 1.25; font-weight: 500; }
  .enquiry-bar .btn-pill--ghost { font-weight: 400; }
  .toast { bottom: 84px; white-space: nowrap; }
}

/* tablets (601 to 820): all four enquiry buttons the same size across the bar (owner, 12 Oct 2026: "just make the
   buttons equal sizes across the bottom"). Call and WhatsApp keep their mono labels; one line each. */
@media (min-width: 601px) and (max-width: 820px) {
  .enquiry-actions { width: 100%; gap: 10px; }
  .enquiry-actions > * { flex: 1 1 0; min-width: 0; }
  .enquiry-link { padding: 0 10px; }
  .enquiry-bar .btn-pill { padding: 0 10px; font-size: 0.66rem; line-height: 1; white-space: nowrap; }
}

/* ---------- portrait phones and tablets up to 1024 wide: the vertical clip fills the screen ----------
   js/hub.js loads the 9:16 encode and adds body.film-vert (owner, 11 Oct 2026: "make the video work in portrait
   orientation like mobile so it fills the whole screen"). Cover, no top offset, no contain; the words sit at the
   foot of the screen over a dark fade. */
body.film-vert.page-hub .film-video, body.film-vert.page-hub .hero-media img { object-fit: cover; object-position: 50% 50%; top: 0; height: 100%; }
body.film-vert.page-hub .hero-scrim { background: linear-gradient(180deg, rgba(6,9,15,0.6) 0%, rgba(6,9,15,0) 20%, rgba(6,9,15,0) 38%, rgba(6,9,15,0.78) 62%, rgba(6,9,15,0.94) 100%); }
body.film-vert.page-hub .film-vignette { display: block; }
body.film-vert .chapter--light { display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--nav-h) + 20px) var(--pad-x) calc(4vh + 72px); }
/* iOS Safari (owner, 12 Oct 2026): keep the chapter copy above the expanding address bar and drop the letterbox strip
   on the vertical cut (see the same note in css/main.css) */
body.film-vert .letterbox { display: none; }
@supports (height: 100svh) { body.film-vert .chapter--light { padding-bottom: calc(100lvh - 100svh + 4vh + 72px); } }
body.film-vert .chapter--light::before { display: block; background: linear-gradient(180deg, rgba(6,9,15,0.5) 0%, rgba(6,9,15,0) 18%, rgba(6,9,15,0) 40%, rgba(6,9,15,0.82) 70%, rgba(6,9,15,0.94) 100%); }
body.film-vert .chapter--light .chapter-word { align-self: auto; margin-top: 10px; }
body.film-vert .chapter--light .chapter-line { position: static; text-align: left; margin-top: 18px; }
body.film-vert .chapter--light .chapter-copy { position: static; text-align: left; max-width: 52ch; margin-top: 8px; }

/* ============================================================
   STANDARD PAGES (rendered from src/content by build/render.py)
   ============================================================ */

.page-std .site-head { background: var(--panel); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding-bottom: 0; margin-bottom: 0; }
.page-std .letterbox { display: none; }

.phero { position: relative; min-height: min(78svh, 760px); display: flex; align-items: flex-end; overflow: hidden; padding: calc(var(--nav-h) + 9vh) var(--pad-x) 9vh; }
.phero--plain { min-height: 0; padding-bottom: 7vh; background: linear-gradient(180deg, #0a1018 0%, var(--ink) 100%); border-bottom: 1px solid var(--hairline); }
.phero-media, .phero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,9,15,0.72) 0%, rgba(6,9,15,0.2) 34%, rgba(6,9,15,0.55) 66%, rgba(6,9,15,0.92) 100%), linear-gradient(90deg, rgba(6,9,15,0.8) 0%, rgba(6,9,15,0.25) 50%, rgba(6,9,15,0) 72%); }
.phero-body { position: relative; max-width: 980px; }
.phero-title { font-family: 'Fraunces', serif; font-weight: 520; font-variation-settings: 'opsz' 144; font-size: clamp(2.6rem, 5.6vw, 6rem); line-height: 0.98; letter-spacing: -0.01em; margin: 0.35em 0 0.4em; text-shadow: var(--halo); }
.phero-lead { font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.6; color: var(--porcelain); opacity: 1; max-width: 60ch; margin-bottom: 1.8em; text-shadow: var(--halo-sm); }
.phero .hero-over { margin-bottom: 0; text-shadow: var(--halo-sm), 0 1px 12px rgba(0,0,0,0.9); }
.phero--plain .phero-title, .phero--plain .phero-lead { text-shadow: none; }
.crumbs { color: var(--champagne); margin-bottom: 0; }
.crumbs::before { content: '←'; margin-right: 0.7em; }
.crumbs a { color: var(--champagne); transition: color 0.3s; } .crumbs a:hover { color: var(--porcelain); } .crumbs span { margin: 0 0.5em; }

.blk { padding: var(--sec-y) var(--pad-x); }
/* sweep fix: one distance at every section boundary. Two open sections in a row share it (the second drops its top);
   sections with their own background or rule (quote, coverage, ways, trust) keep it inside their edges */
.blk + .blk { padding-top: 0; }
.page-std .section-title { font-size: clamp(2rem, 3.8vw, 4rem); text-transform: none; line-height: 1.05; margin-bottom: var(--head-gap); }
.page-std .intro .section-title { margin-bottom: 0; }
.blk-note { color: var(--faint); font-size: 0.88rem; margin-top: 2.2em; max-width: 80ch; }
.intro-copy a, .step p a, .blk-note a, .faq details p a, .callout-box p a, .tbl td a, .tbl th a, .ticks li a, .facts-grid small a, .facts-grid b a, .way-lead a { color: var(--champagne); border-bottom: 1px solid var(--champagne-dim); }

.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 3px; overflow: hidden; }
.facts-grid li { background: var(--ink); padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.facts-grid .mono { color: var(--champagne); }
.facts-grid b { font-family: 'Fraunces', serif; font-weight: 420; font-size: clamp(1.25rem, 1.7vw, 1.7rem); line-height: 1.15; }
.facts-grid small { color: var(--muted); font-size: 0.86rem; line-height: 1.5; }

.ticks-blk .ticks { margin: 0; gap: 16px; } .ticks-blk .ticks li { font-size: 1.02rem; }
.ticks-blk .section-title { margin-bottom: calc(var(--head-gap) * 0.7); }

.tbl-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 3px; }
.tbl table { width: 100%; border-collapse: collapse; min-width: 560px; }
.tbl th, .tbl td { text-align: left; padding: 18px 22px; border-bottom: 1px solid var(--hairline); font-size: 0.97rem; vertical-align: top; }
.tbl thead th { font-family: 'IBM Plex Mono', monospace; font-weight: 300; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne); background: rgba(242,237,227,0.03); }
.tbl tbody th { font-family: 'Fraunces', serif; font-weight: 450; font-size: 1.08rem; color: var(--porcelain); }
.tbl td { color: var(--muted); } .tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }

.callout-box { border: 1px solid var(--champagne-dim); border-radius: 3px; padding: clamp(28px, 4vw, 64px); background: linear-gradient(160deg, rgba(201,168,106,0.07), rgba(201,168,106,0) 60%); max-width: 1100px; }
.callout-box .section-title { font-size: clamp(1.6rem, 2.6vw, 2.6rem); margin-bottom: 0.6em; }
.callout-box p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; max-width: 64ch; margin-bottom: 1.8em; }

/* ---------- "tell me when the dates are announced" (dates_signup block, js/site.js) ---------- */
.signup-box { border: 1px solid var(--champagne-dim); border-radius: 3px; padding: clamp(28px, 4vw, 56px); max-width: 1100px;
  background: linear-gradient(160deg, rgba(201,168,106,0.07), rgba(201,168,106,0) 60%);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px 56px; align-items: end; }
.signup-box .section-title { font-size: clamp(1.6rem, 2.6vw, 2.6rem); margin-bottom: 0.5em; }
.signup-text { color: var(--muted); font-size: 1.05rem; line-height: 1.7; max-width: 56ch; }
.signup-form { display: grid; grid-template-columns: 1fr auto; gap: 14px 12px; align-items: end; position: relative; }
.signup-form .btn-pill { cursor: pointer; font-family: inherit; }
.signup-form .form-error, .signup-form .form-note { grid-column: 1 / -1; margin: 0; }
.signup-form[hidden], .signup-done[hidden] { display: none; }
.signup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.signup-done { color: var(--porcelain); font-family: 'Fraunces', serif; font-size: 1.25rem; line-height: 1.5; border-left: 2px solid var(--champagne); padding-left: 18px; outline: none; }
@media (max-width: 860px) { .signup-box { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .signup-form { grid-template-columns: 1fr; } .signup-form .btn-pill { justify-self: start; } }

.figure-blk figure { margin: 0; position: relative; }
.figure-blk img { width: 100%; max-height: 82svh; object-fit: cover; }
.figure-blk figcaption { position: absolute; left: var(--pad-x); bottom: 22px; color: var(--porcelain); text-shadow: 0 1px 10px rgba(0,0,0,0.9); }

.coverage--plain { padding: var(--sec-y) var(--pad-x); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: #080c13; }
.fleet-cards--2 { grid-template-columns: repeat(2, 1fr); } .fleet-cards--4 { grid-template-columns: repeat(4, 1fr); }
.fleet-card--text > div, .fleet-card--text > a { border: 1px solid var(--hairline); border-radius: 3px; padding: clamp(22px, 2.2vw, 36px); height: 100%; display: block; transition: border-color 0.4s, background-color 0.4s; }
.fleet-card--text > a:hover { border-color: var(--champagne-dim); background: rgba(201,168,106,0.05); }
.related { padding-bottom: var(--sec-y); } .related .chips a { background: none; }

@media (max-width: 1180px) { .facts-grid { grid-template-columns: repeat(2, 1fr); } .fleet-cards--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) {
  .phero { min-height: 72svh; padding-bottom: calc(6vh + 20px); }
  /* phones and tablets: the words cover most of the picture, so the lower two thirds go darker */
  .phero-scrim { background: linear-gradient(180deg, rgba(6,9,15,0.7) 0%, rgba(6,9,15,0.38) 26%, rgba(6,9,15,0.74) 52%, rgba(6,9,15,0.9) 74%, rgba(6,9,15,0.95) 100%); }
  .phero-lead { font-weight: 460; }
  .facts-grid, .fleet-cards--2, .fleet-cards--3, .fleet-cards--4 { grid-template-columns: 1fr; }
  .facts-grid li { padding: 20px; }
  /* tables become stacked cards on phones, so nothing scrolls sideways */
  .tbl table { min-width: 0; } .tbl thead { display: none; }
  .tbl tr { display: block; padding: 20px 18px; border-bottom: 1px solid var(--hairline); } .tbl tbody tr:last-child { border-bottom: 0; }
  .tbl th, .tbl td { display: block; padding: 0; border: 0; }
  .tbl tbody th { font-size: 1.2rem; margin-bottom: 12px; }
  .tbl td { margin-top: 12px; font-size: 0.95rem; }
  .tbl td::before { content: attr(data-label); display: block; font-family: 'IBM Plex Mono', monospace; font-weight: 300; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne); margin-bottom: 4px; }
}

/* ==========================================================================
   EVENT CALENDAR (block kind "calendar", js/calendar.js)
   ========================================================================== */
.cal-controls { display: grid; gap: 14px; margin: 3.2em 0 1.4em; }
.cal-filter, .cal-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-chip, .cal-mon { font: inherit; cursor: pointer; border: 1px solid var(--hairline); border-radius: 999px; padding: 0.5em 1.05em; font-size: 0.82rem; color: var(--porcelain); background: rgba(6, 9, 15, 0.5); transition: border-color 0.3s, color 0.3s, background 0.3s; }
.cal-chip:hover, .cal-mon:hover:not(:disabled) { border-color: var(--champagne); color: var(--champagne); }
.cal-chip.is-on, .cal-mon.is-on { background: var(--champagne); border-color: var(--champagne); color: var(--ink); }
.cal-chip:focus-visible, .cal-mon:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }
.cal-strip { padding-top: 14px; border-top: 1px solid var(--hairline); }
.cal-mon { font-family: 'IBM Plex Mono', monospace; font-weight: 300; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 3px; padding: 0.7em 0.9em; }
.cal-mon:disabled { opacity: 0.28; cursor: default; }
.cal-count { color: var(--muted); font-size: 0.62rem; margin-bottom: 0.6em; }
.cal-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hairline); }
.cal-month { color: var(--champagne); font-size: 0.66rem; padding: 3.2em 0 1.1em; border-bottom: 1px solid var(--hairline); }
.cal-month:first-child { padding-top: 1.4em; }
.cal-item { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: clamp(18px, 3vw, 44px); align-items: center; padding: 26px 0; border-bottom: 1px solid var(--hairline); }
.cal-item:last-child { border-bottom: 0; }
.cal-item[hidden], .cal-month[hidden] { display: none; }
.cal-day { text-align: center; border: 1px solid var(--hairline); border-radius: 3px; padding: 12px 6px 10px; background: var(--ink-2); }
.cal-day b { display: block; font-family: 'Fraunces', serif; font-weight: 300; font-size: 2rem; line-height: 1; color: var(--porcelain); }
.cal-day span { display: block; margin-top: 6px; font-family: 'IBM Plex Mono', monospace; font-weight: 300; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cal-name { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.15; }
.cal-name a { color: var(--porcelain); transition: color 0.3s; }
.cal-name a:hover { color: var(--champagne); }
.cal-when { color: var(--porcelain); font-size: 0.98rem; margin-top: 6px; }
.cal-meta { color: var(--muted); font-size: 0.6rem; margin-top: 8px; }
.cal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cal-tags:empty { display: none; }
.cal-tag { font-size: 0.74rem; border-radius: 999px; padding: 0.25em 0.8em; border: 1px solid var(--hairline); color: var(--muted); }
.cal-tag--now { border-color: var(--champagne); background: var(--champagne); color: var(--ink); }
.cal-tag--soon { border-color: var(--champagne); color: var(--champagne); }
.cal-note { color: var(--muted); font-size: 0.86rem; margin-top: 8px; max-width: 60ch; }
.cal-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cal-actions .btn-pill { white-space: nowrap; cursor: pointer; font-family: inherit; }
.cal-actions button.btn-pill:not(.btn-pill--gold) { background-color: transparent; }
.cal-item.is-past .cal-day, .cal-item.is-past .cal-main { opacity: 0.55; }
.cal-empty { color: var(--muted); padding: 2.4em 0; }
.cal-past-toggle { margin-top: 1.6em; }
.cal .form-note { margin-top: 1.6em; max-width: 80ch; }
@media (max-width: 860px) {
  .cal-item { grid-template-columns: 70px minmax(0, 1fr); align-items: start; }
  .cal-day b { font-size: 1.6rem; }
  .cal-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .cal-strip { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-right: calc(var(--pad-x) * -1); padding-right: var(--pad-x); scrollbar-width: none; }
  .cal-strip::-webkit-scrollbar { display: none; }
  .cal-mon { flex: 0 0 auto; }
}

/* ---------- phone and tablet pass (22 Sep 2026): readable small type, comfortable tap targets ---------- */
@media (max-width: 860px) {
  .section-over, .hero-over, .field label, .tbl thead th, .tbl td::before, .cal-count, .cal-meta, .cal-month,
  .step-num, .trust-partners, .facts-grid .mono, .fleet-card .mono, .cal-item .mono, .form-error, .form-note,
  .finale-over, .way-over, .cal-day span, main span.mono, main p.mono, .btn-pill, .cal-tag { font-size: 0.7rem; }
  .cal-chip, .cal-mon { min-height: 44px; display: inline-flex; align-items: center; }
  .cal-actions .btn-pill, .btn-pill { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .chips a, .chip { min-height: 40px; display: inline-flex; align-items: center; }
  .util { font-size: 0.68rem; }
}

/* ---------- consent bar for advertising measurement (js/tracking.js shows it only when ids are set) ---------- */
.consent { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 0); z-index: 60; width: min(92vw, 640px); background: rgba(10, 16, 24, 0.96); border: 1px solid var(--hairline); border-radius: 4px; padding: 16px 18px; display: none; gap: 14px; align-items: center; flex-wrap: wrap; }
.consent.is-on { display: flex; }
.consent p { flex: 1 1 260px; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.consent p a { color: var(--champagne); }
.consent .btn-pill { padding: 0.75em 1.3em; font-size: 0.64rem; }
@media (max-width: 860px) { .consent { bottom: 78px; } }

/* ---------- picture under a two-column heading (owner's request, 7 Oct 2026) ---------- */
.intro--fig .intro-head { display: flex; flex-direction: column; }
.intro-fig { flex: 1 1 auto; min-height: 240px; margin: 28px 0 0; border-radius: 4px; overflow: hidden; background: var(--ink-2); }
.intro-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .intro-fig { flex: none; aspect-ratio: 16 / 10; min-height: 0; margin: 18px 0 6px; } }

/* ---------- trip calculator and range-ring maps (js/trip.js, build/trip_blocks.py) ---------- */
.trip-head, .rmap-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 120px); align-items: end; margin-bottom: var(--head-gap); }
.trip-head .section-title, .rmap-head .section-title { margin-bottom: 0; }
.trip-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 0.6fr) auto; gap: 18px 20px; align-items: end; }
.trip-field { position: relative; }
.trip-go .btn-pill { cursor: pointer; font-family: inherit; min-height: 50px; white-space: nowrap; }
.trip-error { grid-column: 1 / -1; margin: 0; }
.trip-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; max-height: 330px; overflow-y: auto; overscroll-behavior: contain;
  background: #0a1018; border: 1px solid var(--champagne-dim); border-radius: 3px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.trip-list li { padding: 12px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid var(--hairline); }
.trip-list li:last-child { border-bottom: 0; }
.trip-list li b { font-weight: 400; color: var(--porcelain); font-size: 0.95rem; }
.trip-list li .mono { color: var(--muted); text-transform: none; letter-spacing: 0.06em; }
.trip-list li[aria-selected="true"], .trip-list li:hover { background: rgba(201, 168, 106, 0.12); }
.trip-out { margin-top: var(--head-gap); }
.trip-route { color: var(--champagne); margin-bottom: 18px; text-transform: none; letter-spacing: 0.08em; font-size: 0.78rem; }
.trip-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 3px; overflow: hidden; }
.trip-sum li { background: var(--ink); padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.trip-sum .mono { color: var(--champagne); }
.trip-sum b { font-family: 'Fraunces', serif; font-weight: 420; font-size: clamp(1.3rem, 1.9vw, 1.9rem); line-height: 1.15; }
.trip-sum small { color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.trip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-top: 5vh; }
.trip-h { color: var(--champagne); margin-bottom: 10px; }
.trip-row a { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 14px 10px; border-bottom: 1px solid var(--hairline); transition: background 0.3s; }
.trip-row a:hover { background: rgba(242, 237, 227, 0.04); }
.trip-row strong { font-family: 'Fraunces', serif; font-weight: 420; font-size: 1.06rem; }
.trip-verdict { font-size: 0.88rem; color: var(--porcelain); text-align: right; }
.trip-meta { grid-column: 2 / -1; color: var(--muted); text-transform: none; letter-spacing: 0.05em; }
.trip-dot { width: 10px; height: 10px; border-radius: 50%; align-self: center; border: 1px solid var(--champagne); }
.trip-row--yes .trip-dot { background: var(--champagne); }
.trip-row--some .trip-dot { background: linear-gradient(90deg, var(--champagne) 50%, transparent 50%); }
.trip-row--marginal .trip-dot { border-style: dashed; }
.trip-row--stop .trip-dot, .trip-row--seats .trip-dot { border-color: var(--faint); }
.trip-row--stop a, .trip-row--seats a { opacity: 0.55; }
.trip-row--stop .trip-verdict, .trip-row--seats .trip-verdict { color: var(--muted); }
.trip-row.is-here a { background: rgba(201, 168, 106, 0.07); box-shadow: inset 2px 0 0 var(--champagne); }
.trip-notes { color: var(--muted); margin-top: 3vh; max-width: 80ch; line-height: 1.6; }
.trip-notes a { color: var(--champagne); border-bottom: 1px solid var(--champagne-dim); }
.trip-cta { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; margin-top: 4vh; }
.trip-cta .btn-pill { cursor: pointer; font-family: inherit; }
.trip-cta .form-note { max-width: 46ch; }

.rmap-controls { display: flex; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.rmap-controls .trip-field { width: min(440px, 100%); }
.rmap-switch { display: flex; gap: 8px; flex-wrap: wrap; }
.rmap-fig { margin: 0; }
.rmap-canvas { border: 1px solid var(--hairline); border-radius: 3px; overflow: hidden; background: var(--ink); min-height: 120px; }
.rmap-canvas svg { display: block; width: 100%; height: auto; }
.rmap--failed .rmap-canvas { display: none; }
.rm-sea { fill: var(--ink); }
.rm-grat { fill: none; stroke: rgba(242, 237, 227, 0.06); }
.rm-coast { fill: none; stroke: rgba(242, 237, 227, 0.34); stroke-linejoin: round; }
.rm-land { fill: #10151d; stroke: none; }
.rm-fill { fill: rgba(201, 168, 106, 0.08); stroke: none; }
.rm-ring { fill: none; stroke: var(--champagne); stroke-linejoin: round; }
.rm-ring--dash { stroke: rgba(201, 168, 106, 0.85); }
.rm-place circle { fill: rgba(242, 237, 227, 0.35); }
.rm-place--in circle { fill: var(--champagne); }
.rm-place--edge circle { fill: rgba(201, 168, 106, 0.55); }
.rm-place text { fill: rgba(242, 237, 227, 0.6); font-family: 'IBM Plex Mono', monospace; font-weight: 300; letter-spacing: 0.04em; }
.rm-dep { fill: var(--champagne); stroke: var(--ink); }
.rm-dep-halo { fill: none; stroke: rgba(201, 168, 106, 0.55); }
.rmap-fig figcaption { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.rmap-legend { color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.rmap-legend { gap: 8px 22px; }
.rmap-legend > span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.rmap-key { display: inline-block; width: 26px; height: 0; border-top: 2px solid var(--champagne); }
.rmap-key--dash { border-top-style: dashed; }
.rmap-cap { color: var(--faint); font-size: 0.88rem; line-height: 1.6; max-width: 90ch; }

@media (max-width: 1000px) {
  .trip-form { grid-template-columns: 1fr 1fr; }
  .trip-cols { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .trip-head, .rmap-head { grid-template-columns: 1fr; gap: 18px; }
  .trip-sum { grid-template-columns: 1fr; }
  .trip-sum li { padding: 20px; }
}
@media (max-width: 560px) {
  .trip-form { grid-template-columns: 1fr; }
  .trip-go .btn-pill { width: 100%; justify-content: center; }
  .trip-row a { grid-template-columns: 14px minmax(0, 1fr); }
  .trip-verdict { grid-column: 2; text-align: left; }
  .trip-list li { min-height: 48px; justify-content: center; }
}

/* ==========================================================================
   SECTIONS WIRED FROM THE OWNER'S MOCK-UPS (8 Oct 2026; build/render.py block styles, js/site.js)
   Moved here from css/mock.css with their class names, so the /mock pages and the live pages share them.
   ========================================================================== */
.mk-panel[hidden], .mk-acc[hidden], .mk-mag-row[hidden], .mk-empty[hidden], [data-item][hidden] { display: none !important; }
.mk-map-grid > *, .mk-side-grid > *, .mk-film-cols > *, .mk-feature > * { min-width: 0; }
.mk-group-head { color: var(--champagne); font-weight: 400; margin-bottom: 22px; display: flex; align-items: center; gap: 12px; }
.mk-group-head span { color: var(--faint); }
.mk-group-head::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }
/* list row with a small picture (used inside svc-list and elsewhere) */
.mk-thumbs a.mk-thumbrow { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: center; padding: 0 0 22px; }
.mk-thumb { display: block; width: 76px; height: 76px; border-radius: 3px; overflow: hidden; border: 1px solid var(--hairline); background: var(--ink-2); }
.mk-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-lux); }
.mk-thumbrow:hover .mk-thumb img { transform: scale(1.1); }
.mk-thumbtext strong { display: block; font-family: 'Fraunces', serif; font-weight: 450; font-size: 1.2rem; line-height: 1.2; margin-bottom: 4px; transition: color 0.3s; }
.mk-thumbrow:hover strong { color: var(--champagne); }
.mk-thumbtext > span { display: block; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
/* picture panels: caption over the picture */
.mk-panel-fig::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,9,15,0) 35%, rgba(6,9,15,0.85) 100%), linear-gradient(90deg, rgba(6,9,15,0.55) 0%, rgba(6,9,15,0) 60%); }
.mk-panel-fig figcaption { position: absolute; left: clamp(18px, 3vw, 44px); bottom: clamp(16px, 3vw, 40px); right: 18px; z-index: 1; }
.mk-panel-fig .mono { color: var(--champagne); text-shadow: 0 1px 10px rgba(0,0,0,0.9); }
.mk-panel-fig h3 { font-family: 'Fraunces', serif; font-weight: 480; font-size: clamp(1.8rem, 3.6vw, 3.6rem); line-height: 1.02; margin-top: 8px; text-shadow: 0 2px 30px rgba(0,0,0,0.6); }
/* ---------- 1C map-like switcher ---------- */
.mk-map-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.mk-map { width: 100%; height: auto; display: block; border: 1px solid var(--hairline); border-radius: 4px; background: radial-gradient(ellipse at 50% 40%, #0d1420 0%, #080c13 100%); }
.mk-grat line { stroke: rgba(242, 237, 227, 0.07); stroke-width: 1; }
.mk-pin { fill: rgba(242, 237, 227, 0.22); stroke: none; cursor: pointer; transition: fill 0.35s, r 0.35s; }
.mk-pin.is-on { fill: var(--champagne); r: 9; filter: drop-shadow(0 0 6px rgba(201, 168, 106, 0.7)); }
.mk-pin--edge { fill: rgba(242, 237, 227, 0.3); }
.mk-pin--edge.is-on { fill: var(--champagne); }
.mk-maplabel { fill: var(--champagne); font-family: 'IBM Plex Mono', monospace; font-size: 22px; letter-spacing: 0.06em; opacity: 0; transition: opacity 0.4s; pointer-events: none; paint-order: stroke; stroke: #080c13; stroke-width: 5px; }
.mk-maplabel.is-on { opacity: 1; }
.mk-map-note { color: var(--faint); margin: 14px 0 10px; }
.mk-tablist { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.mk-tablist button { font: inherit; text-align: left; cursor: pointer; background: none; color: var(--porcelain); border: 0; border-bottom: 1px solid var(--hairline);
  padding: 16px 4px 16px 18px; display: flex; justify-content: space-between; gap: 16px; align-items: center; position: relative; font-family: 'Fraunces', serif; font-size: 1.12rem; transition: color 0.3s, background 0.3s; }
.mk-tablist button::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--champagne); transform: scaleY(0); transition: transform 0.4s var(--ease-lux); }
.mk-tablist button b { color: var(--faint); font-weight: 300; font-size: 0.66rem; }
.mk-tablist button:hover, .mk-tablist button.is-on { color: var(--champagne); }
.mk-tablist button.is-on { background: rgba(201, 168, 106, 0.05); }
.mk-tablist button.is-on::before { transform: scaleY(1); }
.mk-tablist button:focus-visible, .mk-itin-tabs button:focus-visible { outline: 2px solid var(--champagne); outline-offset: -2px; }
.mk-panel-fig { position: relative; margin: 0 0 26px; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--ink-2); }
.mk-panel-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-panel-fig h3 { font-size: clamp(1.6rem, 2.6vw, 2.6rem); }
.mk-panel-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.mk-panel-list a { display: block; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.mk-panel-list strong { display: block; font-family: 'Fraunces', serif; font-weight: 450; font-size: 1.05rem; transition: color 0.3s; }
.mk-panel-list span { display: block; color: var(--muted); font-size: 0.85rem; line-height: 1.45; margin-top: 3px; }
.mk-panel-list a:hover strong { color: var(--champagne); }
/* ---------- 2B and 5B accordions ---------- */
.mk-acc-wrap { border-top: 1px solid var(--hairline); max-width: 1180px; }
.mk-acc { border-bottom: 1px solid var(--hairline); }
.mk-acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 128px minmax(0, 1fr) auto 28px; gap: clamp(14px, 2.4vw, 32px); align-items: center; padding: 18px 0; }
.mk-acc summary::-webkit-details-marker { display: none; }
.mk-acc summary::after { content: '+'; color: var(--champagne); font-size: 1.6rem; font-weight: 300; text-align: center; transition: transform 0.4s var(--ease-lux); }
.mk-acc[open] summary::after { transform: rotate(45deg); }
.mk-acc-fig { display: block; width: 128px; aspect-ratio: 16 / 10; border-radius: 3px; overflow: hidden; border: 1px solid var(--hairline); background: var(--ink-2); }
.mk-acc-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-lux); }
.mk-acc summary:hover .mk-acc-fig img { transform: scale(1.08); }
.mk-acc-title { font-family: 'Fraunces', serif; font-weight: 460; font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.1; transition: color 0.3s; }
.mk-acc summary:hover .mk-acc-title, .mk-acc[open] .mk-acc-title { color: var(--champagne); }
.mk-acc-over { display: block; color: var(--muted); margin-top: 8px; }
.mk-acc-n { color: var(--faint); white-space: nowrap; }
.mk-acc-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); padding: 12px 0 18px; }
.mk-faq-inner { padding: 0 0 18px; margin-left: calc(128px + clamp(14px, 2.4vw, 32px)); border-top: 1px solid var(--hairline); }
.mk-faq-inner details { border-bottom: 1px solid var(--hairline); }
.mk-faq-inner details:last-child { border-bottom: 0; }
.mk-faq-inner summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-family: 'Fraunces', serif; font-weight: 430; font-size: clamp(1.05rem, 1.4vw, 1.3rem); transition: color 0.3s; }
.mk-faq-inner summary::-webkit-details-marker { display: none; }
.mk-faq-inner summary:hover { color: var(--champagne); }
.mk-faq-inner summary::before, .mk-faq-inner summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 14px; height: 1px; background: var(--champagne); transition: transform 0.4s var(--ease-lux); }
.mk-faq-inner summary::after { transform: rotate(90deg); }
.mk-faq-inner details[open] summary::after { transform: rotate(0deg); }
.mk-faq-inner p { color: var(--muted); max-width: 66ch; padding: 0 0 22px; line-height: 1.7; }
.mk-faq-inner p a { color: var(--champagne); border-bottom: 1px solid var(--champagne-dim); }
.mk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.mk-count { color: var(--muted); margin: 0 0 22px; }
.mk-row a, .mk-mag-row a { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.mk-row-fig { display: block; aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden; border: 1px solid var(--hairline); background: var(--ink-2); }
.mk-row-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-lux); }
.mk-row a:hover .mk-row-fig img, .mk-mag-row a:hover .mk-row-fig img { transform: scale(1.08); }
.mk-row-body { display: flex; flex-direction: column; gap: 5px; }
.mk-row-body .mono { color: var(--champagne); }
.mk-row-body strong { font-family: 'Fraunces', serif; font-weight: 460; font-size: 1.2rem; line-height: 1.2; transition: color 0.3s; }
.mk-row a:hover strong, .mk-mag-row a:hover strong { color: var(--champagne); }
.mk-row-body > span:not(.mono):not(.mk-post-tags) { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
/* ---------- 3B stepped cards ---------- */
.mk-stepcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); align-items: start; }
.mk-stepcard:nth-child(2) { margin-top: 48px; } .mk-stepcard:nth-child(3) { margin-top: 96px; } .mk-stepcard:nth-child(4) { margin-top: 144px; }
.mk-stepcard figure { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; border: 1px solid var(--hairline); margin: 0 0 18px; background: var(--ink-2); }
.mk-stepcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-lux); }
.mk-stepcard:hover img { transform: scale(1.06); }
.mk-stepnum { position: absolute; left: 14px; top: 14px; font-family: 'Fraunces', serif; font-weight: 300; font-size: 2.6rem; line-height: 1; color: var(--porcelain); text-shadow: 0 2px 18px rgba(0,0,0,0.8); }
.mk-stepcard h3 { font-family: 'Fraunces', serif; font-weight: 480; font-size: clamp(1.3rem, 1.7vw, 1.7rem); margin-bottom: 10px; }
.mk-stepcard p { color: var(--muted); line-height: 1.65; font-size: 0.95rem; }
/* ---------- overlay panels (4 how-it-works B, 10 helicopter B) ---------- */
.mk-ov-list { display: flex; gap: clamp(12px, 1.6vw, 22px); height: clamp(460px, 62vh, 620px); }
.mk-ov { flex: 1 1 0; min-width: 0; transition: flex-grow 0.8s var(--ease-lux); }
.mk-ov:hover { flex-grow: 1.7; }
.mk-ov a { position: relative; display: block; height: 100%; border-radius: 4px; overflow: hidden; border: 1px solid var(--hairline); background: var(--ink-2); }
.mk-ov img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-lux); }
.mk-ov a:hover img { transform: scale(1.05); }
.mk-ov a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,9,15,0) 30%, rgba(6,9,15,0.92) 100%); }
.mk-ov-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(20px, 2.4vw, 36px); }
.mk-ov-body .mono { color: var(--champagne); margin-bottom: 10px; text-shadow: 0 1px 10px rgba(0,0,0,0.9); }
.mk-ov-body h3 { font-family: 'Fraunces', serif; font-weight: 480; font-size: clamp(1.6rem, 2.4vw, 2.4rem); line-height: 1.05; margin-bottom: 12px; text-shadow: 0 2px 24px rgba(0,0,0,0.6); }
.mk-ov-body p { color: var(--porcelain); opacity: 0.85; font-size: 0.95rem; line-height: 1.6; max-width: 44ch; margin-bottom: 16px; }
.mk-side-grid > * { min-width: 0; }
.mk-side-grid { display: grid; grid-template-columns: minmax(220px, 0.27fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.mk-side { position: sticky; top: calc(var(--nav-h) + 20px); max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--champagne-dim) transparent; }
.mk-side-list { display: flex; flex-direction: column; }
.mk-side-part { color: var(--champagne); margin: 18px 0 8px; }
.mk-side-part:first-child { margin-top: 0; }
.mk-side-list a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 8px 14px; border-left: 1px solid var(--hairline); color: var(--muted); font-size: 0.92rem; transition: color 0.3s, border-color 0.3s; }
.mk-side-list a span { color: var(--faint); font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; }
.mk-side-list a:hover, .mk-side-list a.is-on { color: var(--porcelain); }
.mk-side-list a.is-on { border-left: 2px solid var(--champagne); padding-left: 13px; color: var(--champagne); }
.mk-side-group { padding-top: calc(var(--head-gap) * 0.8); margin-bottom: calc(var(--head-gap) * 0.8); border-top: 1px solid var(--hairline); }
.mk-side-group:first-child { padding-top: 0; border-top: 0; }
.mk-side-group > .mono { color: var(--faint); margin-bottom: 6px; }
.mk-side-group h3 { font-family: 'Fraunces', serif; font-weight: 460; font-size: clamp(1.5rem, 2.2vw, 2.2rem); margin-bottom: 24px; }
.mk-side-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.mk-side-items .mk-thumb { width: 64px; height: 64px; }
.mk-side-items a.mk-thumbrow { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; }
.mk-side-items .mk-thumbtext strong { font-size: 1.05rem; }
.mk-side-items .mk-thumbtext > span { font-size: 0.85rem; }
/* ---------- 7B fleet bands ---------- */
.mk-band-list { display: grid; gap: 14px; }
.mk-band a { position: relative; display: flex; align-items: center; min-height: clamp(200px, 22vw, 300px); border-radius: 4px; overflow: hidden; border: 1px solid var(--hairline); background: var(--ink-2); }
.mk-band figure { position: absolute; inset: 0; margin: 0; }
.mk-band img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-lux); }
.mk-band a:hover img { transform: scale(1.04); }
.mk-band a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,9,15,0.9) 0%, rgba(6,9,15,0.55) 45%, rgba(6,9,15,0) 80%); }
.mk-band-body { position: relative; z-index: 1; padding: clamp(22px, 3vw, 48px); max-width: 640px; }
.mk-band h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(2rem, 4.4vw, 4.4rem); line-height: 1; margin-bottom: 14px; text-shadow: 0 2px 30px rgba(0,0,0,0.6); }
.mk-band p { color: var(--porcelain); opacity: 0.88; max-width: 46ch; line-height: 1.6; }
.mk-film-intro p, .mk-film-outro { color: var(--muted); font-size: 1.05rem; line-height: 1.7; max-width: 80ch; }
.mk-film-intro { margin-bottom: var(--head-gap); }
.mk-film-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-bottom: var(--head-gap); }
.mk-film-col figure { aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; border: 1px solid var(--hairline); margin: 0 0 22px; background: var(--ink-2); }
.mk-film-col img { width: 100%; height: 100%; object-fit: cover; }
.mk-film-col .mono { color: var(--champagne); margin-bottom: 10px; }
.mk-film-col h3 { font-family: 'Fraunces', serif; font-weight: 480; font-size: clamp(1.6rem, 2.4vw, 2.4rem); margin-bottom: 14px; }
.mk-film-col p:not(.mono) { color: var(--muted); line-height: 1.7; }
.mk-search { display: flex; flex-direction: column; gap: 8px; max-width: 560px; margin-bottom: 18px; }
.mk-search label { color: var(--muted); }
.mk-search input { width: 100%; background: rgba(242, 237, 227, 0.04); color: var(--porcelain); border: 1px solid var(--hairline); border-radius: 999px; padding: 14px 22px; font: inherit; font-size: 1rem; color-scheme: dark; transition: border-color 0.3s; }
.mk-search input:focus { outline: none; border-color: var(--champagne); }
.mk-search input::placeholder { color: var(--faint); }
.mk-post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mk-tagpill { font-size: 0.74rem; border: 1px solid var(--hairline); border-radius: 999px; padding: 0.25em 0.8em; color: var(--muted); }
.mk-empty { color: var(--muted); padding: 3em 0; }
.mk-feature { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-bottom: var(--sec-y); }
.mk-feature figure { margin: 0; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; border: 1px solid var(--hairline); background: var(--ink-2); }
.mk-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-lux); }
.mk-feature:hover img { transform: scale(1.04); }
.mk-feature-body .mono { color: var(--champagne); margin-bottom: 14px; }
.mk-feature h3 { font-family: 'Fraunces', serif; font-weight: 480; font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.04; margin-bottom: 16px; transition: color 0.3s; }
.mk-feature:hover h3 { color: var(--champagne); }
.mk-feature-body > p:not(.mono):not(.mk-post-tags) { color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.mk-mag-list { border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); }
.mk-mag-row .mk-post-tags { margin-top: 6px; }
.mk-day-pic img, .mk-day-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-lux); }
.mk-day-pic::after, .mk-day-tile::after { content: ''; position: absolute; inset: 0; background: rgba(6, 9, 15, 0.52); }
.mk-day-pic b, .mk-day-pic span, .mk-day-tile b, .mk-day-tile span { position: relative; z-index: 1; text-shadow: 0 1px 10px rgba(0,0,0,0.9); }
.mk-day-pic span, .mk-day-tile span { color: var(--porcelain); }
.cal-item:hover .mk-day-pic img, .cal-item:hover .mk-day-tile img { transform: scale(1.08); }
.mk-cal-b .cal-item { grid-template-columns: 168px minmax(0, 1fr) auto; position: relative; }
.mk-day-tile { position: relative; overflow: hidden; aspect-ratio: 4 / 3; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; padding: 12px 14px; border-color: var(--champagne-dim); }
.mk-day-tile::after { background: linear-gradient(180deg, rgba(6,9,15,0) 20%, rgba(6,9,15,0.85) 100%); }
.mk-day-tile b { font-size: 2.3rem; }
.mk-row-wash { position: absolute; top: 0; bottom: 0; left: 0; width: min(56%, 720px); z-index: -1; opacity: 0.22; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0) 100%); transition: opacity 0.6s; }
.mk-row-wash img { width: 100%; height: 100%; object-fit: cover; }
.mk-cal-b .cal-item:hover .mk-row-wash { opacity: 0.38; }
.mk-cal-b { position: relative; z-index: 0; }
@media (max-width: 1180px) {
  .mk-stepcards { grid-template-columns: 1fr 1fr; }
  .mk-stepcard:nth-child(n) { margin-top: 0; }
  .mk-stepcard:nth-child(even) { margin-top: 56px; }
  .mk-panel-list { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .mk-thumbs a.mk-thumbrow { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .mk-thumb { width: 64px; height: 64px; }
  .mk-map-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-tablist { flex-direction: row; overflow-x: auto; border-top: 0; gap: 8px; padding-bottom: 6px; margin-right: calc(var(--pad-x) * -1); padding-right: var(--pad-x); scrollbar-width: none; }
  .mk-tablist::-webkit-scrollbar { display: none; }
  .mk-tablist button { flex: 0 0 auto; border: 1px solid var(--hairline); border-radius: 999px; padding: 0 16px; min-height: 44px; font-family: 'Archivo', sans-serif; font-size: 0.86rem; white-space: nowrap; }
  .mk-tablist button::before { display: none; }
  .mk-tablist button.is-on { background: var(--champagne); border-color: var(--champagne); color: var(--ink); }
  .mk-tablist button.is-on b { color: var(--ink); }
  .mk-pin { r: 9; } .mk-pin.is-on { r: 12; }
  .mk-acc summary { grid-template-columns: 84px minmax(0, 1fr) 24px; gap: 14px; }
  .mk-acc-fig { width: 84px; }
  .mk-acc-n { grid-column: 2; grid-row: 2; margin-top: -8px; }
  .mk-acc summary::after { grid-column: 3; grid-row: 1 / span 2; }
  .mk-acc-list { grid-template-columns: 1fr; }
  .mk-faq-inner { margin-left: 0; }
  .mk-mag-list { grid-template-columns: 1fr; }
  .mk-row a, .mk-mag-row a { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
  .mk-row-body strong { font-size: 1.08rem; }
  .mk-stepcards { grid-template-columns: 1fr; gap: 34px; }
  .mk-stepcard:nth-child(n) { margin-top: 0; }
  .mk-stepcard figure { aspect-ratio: 16 / 10; }
  .mk-ov-list { flex-direction: column; height: auto; }
  .mk-ov, .mk-ov:hover { flex: none; }
  .mk-ov a { height: auto; aspect-ratio: 4 / 5; }
  .mk-side-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mk-side { top: calc(var(--main-h) + 0px); z-index: 5; max-height: none; overflow: visible; background: var(--ink); margin: 0 calc(var(--pad-x) * -1) 3vh; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
  .mk-side-list { flex-direction: row; overflow-x: auto; gap: 8px; padding: 0 var(--pad-x); scrollbar-width: none; }
  .mk-side-list::-webkit-scrollbar { display: none; }
  .mk-side-part { display: none; }
  .mk-side-list a { flex: 0 0 auto; border: 1px solid var(--hairline); border-radius: 999px; padding: 0 14px; min-height: 40px; align-items: center; white-space: nowrap; font-size: 0.84rem; }
  .mk-side-list a.is-on { border: 1px solid var(--champagne); background: var(--champagne); color: var(--ink); padding-left: 14px; }
  .mk-side-list a.is-on span { color: var(--ink); }
  .mk-side-items { grid-template-columns: 1fr; }
  .mk-band a { min-height: 240px; align-items: flex-end; }
  .mk-band a::after { background: linear-gradient(180deg, rgba(6,9,15,0) 10%, rgba(6,9,15,0.9) 100%); }
  .mk-band h3 { font-size: 2rem; }
  .mk-film-cols { grid-template-columns: 1fr; }
  .mk-feature { grid-template-columns: 1fr; gap: 20px; }
  .mk-cal-b .cal-item { grid-template-columns: 120px minmax(0, 1fr); }
  .mk-day-tile b { font-size: 1.8rem; }
  .mk-row-wash { width: 100%; opacity: 0.16; }
}
.mk-map--land { background: radial-gradient(ellipse at 50% 40%, #0b1320 0%, #070a10 100%); }
.mk-map--land .mk-grat line { stroke: rgba(242, 237, 227, 0.05); }
.mk-land { fill: #141d2b; stroke: rgba(201, 168, 106, 0.42); stroke-width: 1.1; stroke-linejoin: round; }
/* yacht by type, option C: the size ladder and kind chips */
.mk-ladder { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: end; border-bottom: 1px solid var(--hairline); }
.mk-ladder li a { display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; padding: 0 0 22px; color: var(--porcelain); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.4s; }
.mk-ladder li a:hover { border-color: var(--champagne); }
.mk-ladder svg { display: block; height: auto; margin-bottom: 18px; fill: rgba(242, 237, 227, 0.14); stroke: var(--champagne); stroke-width: 1.3; stroke-linejoin: round; transition: fill 0.4s; }
.mk-ladder li a:hover svg { fill: rgba(201, 168, 106, 0.35); }
.mk-ladder-m { color: var(--champagne); font-size: 0.72rem; letter-spacing: 0.12em; }
.mk-ladder strong { font-family: 'Fraunces', serif; font-weight: 480; font-size: clamp(1.2rem, 1.8vw, 1.6rem); margin: 6px 0 4px; }
.mk-ladder li a > span:last-child { color: rgba(242, 237, 227, 0.65); font-size: 0.9rem; }
@media (max-width: 820px) { .mk-ladder { grid-template-columns: 1fr; gap: 0; } .mk-ladder li a { flex-direction: row; align-items: center; gap: 16px; min-height: 0; padding: 14px 0; border-bottom: 1px solid var(--hairline); } .mk-ladder svg { width: 34% !important; margin: 0; flex: none; } .mk-ladder strong { margin: 0; display: block; } }
/* destinations option C, take two: region hotspots */
.mk-dot2 { fill: rgba(242, 237, 227, 0.35); transition: fill 0.3s, r 0.3s; }
.mk-dot2.is-on { fill: var(--champagne); r: 4.5; }
.mk-hot { cursor: pointer; outline: none; }
.mk-hot-ring { fill: rgba(201, 168, 106, 0.08); stroke: rgba(201, 168, 106, 0.55); stroke-width: 1.2; transition: fill 0.3s, stroke 0.3s, r 0.3s; }
.mk-hot-core { fill: var(--champagne); }
.mk-hot-label { fill: var(--porcelain); font-family: 'Fraunces', serif; font-size: 21px; paint-order: stroke; stroke: #070a10; stroke-width: 5px; }
.mk-hot-n { fill: var(--champagne); font-size: 11px; letter-spacing: 0.12em; paint-order: stroke; stroke: #070a10; stroke-width: 4px; }
.mk-hot:hover .mk-hot-ring, .mk-hot:focus-visible .mk-hot-ring { fill: rgba(201, 168, 106, 0.22); stroke: var(--champagne); }
.mk-hot.is-on .mk-hot-ring { fill: rgba(201, 168, 106, 0.3); stroke: var(--champagne); r: 19; }
.mk-hot.is-on .mk-hot-label { fill: var(--champagne); }
@media (max-width: 820px) { .mk-hot-label { font-size: 30px; } .mk-hot-n { font-size: 15px; } .mk-hot-ring { r: 22; } }
/* yacht option C, take two: the scale drawing and the kind cards */
.mk-ladder--scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-ladder-svg { grid-column: 1 / -1; }
.mk-ladder--scale li:not(.mk-ladder-svg) a { min-height: 0; padding: 0 0 22px; }
.mk-scale { width: 100%; height: auto; display: block; margin-bottom: 10px; }
.mk-scale .mk-ship path { fill: rgba(242, 237, 227, 0.12); stroke: var(--champagne); stroke-width: 1.4; stroke-linejoin: round; transition: fill 0.35s; }
.mk-scale .mk-ship:hover path { fill: rgba(201, 168, 106, 0.4); }
.mk-scale .mk-ship text { fill: var(--champagne); font-size: 12px; letter-spacing: 0.14em; }
.mk-ruler { stroke: rgba(242, 237, 227, 0.25); stroke-width: 1; }
.mk-ruler-tick { stroke: rgba(242, 237, 227, 0.25); stroke-width: 1; }
.mk-group-head span { color: var(--faint); margin-left: 10px; font-weight: 300; }
.mk-kindcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mk-kindcards li a { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border: 1px solid var(--hairline); border-radius: 6px; color: var(--porcelain); text-decoration: none; transition: border-color 0.3s, background 0.3s; }
.mk-kindcards li a:hover { border-color: var(--champagne); background: rgba(201, 168, 106, 0.06); }
.mk-kindcards img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.mk-kind-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mk-kind-body strong { font-family: 'Fraunces', serif; font-weight: 480; font-size: 1.05rem; }
.mk-kind-body span { color: rgba(242, 237, 227, 0.62); font-size: 0.84rem; line-height: 1.45; }
@media (max-width: 820px) { .mk-ladder--scale { grid-template-columns: 1fr; } .mk-kindcards { grid-template-columns: 1fr; } .mk-ladder--scale li:not(.mk-ladder-svg) a { flex-direction: column; align-items: flex-start; gap: 2px; } }
/* yacht charter hub: the Guides group follows the size scale and kind cards in the same section */
.services .mk-ladder-wrap + .svc-group { margin-top: var(--sec-y); }
/* phones: the scale drawing keeps the full width (the older ladder rule above shrinks a ladder svg to a third) */
@media (max-width: 820px) { .mk-ladder--scale .mk-ladder-svg svg { width: 100% !important; margin-bottom: 6px; } .mk-ladder--scale .mk-ladder-svg { border-bottom: 0; } }

/* yacht charter sizes: the scale drawing on wide screens, one drawing per row on phones, never both (owner, 11 Oct 2026) */
@media (min-width: 601px) { .mk-ladder--scale .mk-scale-row { display: none; } }
@media (max-width: 600px) { .mk-ladder--scale .mk-ladder-svg { display: none; } }

/* aircraft tables with style "swipe": the table on wide screens, swipe cards on tablets and phones (option B, 11 Oct 2026) */
.sw { display: none; position: relative; }
@media (max-width: 1180px) {
  .tbl--swipe .tbl-wrap { display: none; }
  .sw { display: block; padding: 0 44px; }
  .sw-track { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .sw-track::-webkit-scrollbar { display: none; }
  .sw-card { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; padding: 0 6px; }
  .sw-card a, .sw-card > div { display: block; color: var(--porcelain); text-decoration: none; border: 1px solid var(--hairline); border-radius: 6px; padding: 14px; transition: border-color 0.3s; }
  .sw-card a:hover, .sw-card a:focus-visible { border-color: var(--champagne); }
  .sw-card figure { margin: 0 0 14px; aspect-ratio: 16 / 10; border-radius: 3px; overflow: hidden; background: var(--ink-2); }
  .sw-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .sw-card h3 { font-family: 'Fraunces', serif; font-weight: 480; font-size: 1.35rem; line-height: 1.15; margin: 0 0 10px; }
  .sw-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--hairline); padding-top: 10px; margin: 0; }
  .sw-card dt { color: var(--champagne); font-size: 0.66rem; margin-bottom: 4px; }
  .sw-card dd { margin: 0; font-size: 0.95rem; }
  .sw-open { display: block; margin-top: 12px; color: var(--champagne); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
  .sw-arrow { position: absolute; top: 34%; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--champagne); background: rgba(6, 9, 15, 0.7); color: var(--champagne); font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; }
  .sw-arrow--prev { left: 0; } .sw-arrow--next { right: 0; }
  .sw-arrow:hover { background: var(--champagne); color: var(--ink); }
  .sw-dots { display: flex; justify-content: center; gap: 2px; margin-top: 10px; }
  .sw-dots button { width: 28px; height: 28px; border: 0; background: none; cursor: pointer; position: relative; padding: 0; }
  .sw-dots button::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--hairline); transition: background 0.3s, transform 0.3s; }
  .sw-dots button.is-on::after { background: var(--champagne); transform: scale(1.4); }
  .sw-hint { text-align: center; color: var(--faint); font-size: 0.64rem; letter-spacing: 0.1em; margin-top: 6px; }
}