/* ============================================================
   NEMT Kenya — shared stylesheet
   Tokens: color, type, spacing. See :root and theme overrides.
   Fonts are loaded via a <link rel="stylesheet"> in each page's <head>
   (with preconnect hints) rather than @import here, so the browser can
   fetch the font CSS in parallel with this file instead of discovering
   it only after this file has downloaded and parsed.
   ============================================================ */

:root{
  color-scheme: light;

  /* --- surfaces & ink --- */
  --bg: #FAFBFD;
  --bg-raised: #FFFFFF;
  --bg-sunken: #EEF3F8;
  --ink: #16232C;
  --ink-soft: #4C6070;
  --ink-faint: #5B6C78;
  --line: rgba(22,35,44,0.12);
  --line-strong: rgba(22,35,44,0.22);

  /* --- brand: clinical trust (navy + sky blue on white) --- */
  --teal-900: #0E3A5C;
  --teal-700: #1868A6;
  --teal-600: #2C86C6;
  --teal-100: #E3EEF8;
  --gold-600: #0E6FB0;
  --gold-500: #2B96DE;
  --gold-100: #DCEEFC;
  --green-600: #357768;
  --green-100: #E1F1EC;
  --psv-yellow: #F7C11A;

  /* semantic aliases */
  --brand: var(--teal-700);
  --brand-strong: var(--teal-900);
  --accent: var(--gold-500);
  --accent-strong: var(--gold-600);
  --ok: var(--green-600);

  /* Solid-fill button background, kept separate from --brand-strong: in dark
     mode the teal scale is deliberately lightened so it reads as text on a
     dark page, but that same light value used as a *fill* behind the
     button's hardcoded white text collapses contrast to ~2:1. This pair
     stays fixed, dark-enough-for-white-text hex values in both themes. */
  --btn-primary-bg: var(--brand-strong);
  --btn-primary-bg-hover: var(--teal-700);

  --shadow-1: 0 1px 2px rgba(14,35,55,0.07), 0 1px 1px rgba(14,35,55,0.05);
  --shadow-2: 0 12px 32px -16px rgba(14,35,55,0.26);

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  --content-max: 1180px;
  --measure: 62ch;

  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg: #0B1A24;
    --bg-raised: #142937;
    --bg-sunken: #0C1D28;
    --ink: #EAF3FA;
    --ink-soft: #A9C2D2;
    --ink-faint: #7690A2;
    --line: rgba(234,243,250,0.14);
    --line-strong: rgba(234,243,250,0.26);

    --teal-900: #0A2740;
    --teal-700: #4FA8E8;
    --teal-600: #7CC4F2;
    --teal-100: #12374C;
    --gold-600: #4FBEEA;
    --gold-500: #7ED4F5;
    --gold-100: #123A4E;
    --green-600: #6FC4AE;
    --green-100: #123326;

    --brand: var(--teal-700);
    --brand-strong: var(--teal-600);
    --accent: var(--gold-600);
    --accent-strong: var(--gold-500);
    --ok: var(--green-600);

    /* Fixed, not re-derived from the (now-lightened) teal scale — see the
       definition and comment in :root above. */
    --btn-primary-bg: #1868A6;
    --btn-primary-bg-hover: #124F7D;

    --shadow-1: 0 1px 2px rgba(0,0,0,0.35);
    --shadow-2: 0 20px 40px -20px rgba(0,0,0,0.6);
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0B1A24;
  --bg-raised: #142937;
  --bg-sunken: #0C1D28;
  --ink: #EAF3FA;
  --ink-soft: #A9C2D2;
  --ink-faint: #7690A2;
  --line: rgba(234,243,250,0.14);
  --line-strong: rgba(234,243,250,0.26);

  --teal-900: #0A2740;
  --teal-700: #4FA8E8;
  --teal-600: #7CC4F2;
  --teal-100: #12374C;
  --gold-600: #4FBEEA;
  --gold-500: #7ED4F5;
  --gold-100: #123A4E;
  --green-600: #6FC4AE;
  --green-100: #123326;

  --brand: var(--teal-700);
  --brand-strong: var(--teal-600);
  --accent: var(--gold-600);
  --accent-strong: var(--gold-500);
  --ok: var(--green-600);

  /* Fixed, not re-derived from the (now-lightened) teal scale — see the
     definition and comment in :root above. */
  --btn-primary-bg: #1868A6;
  --btn-primary-bg-hover: #124F7D;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 20px 40px -20px rgba(0,0,0,0.6);
}

*,*::before,*::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 17px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  padding-inline: max(16px, calc((100% - var(--content-max)) / 2 * 0));
}

img{ max-width: 100%; }
a{ color: var(--brand); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Skip link: hidden until focused, so keyboard and screen-reader users can
   jump straight past the header/nav instead of tabbing through every route
   on every single page. */
.skip-link{
  position: absolute; left: -999px; top: auto;
  background: var(--brand-strong); color: #FFFFFF;
  padding: 12px 18px; border-radius: var(--radius-s); z-index: 200;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus{ left: 16px; top: 16px; }

/* Visually hidden but present for screen readers — used to give a section
   a real programmatic heading (fixing skipped heading levels) without
   changing what's visible on screen. */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Native fieldset/legend reset: used to group related radio/checkbox
   options (see .vehicle-options) with a real programmatic group name,
   in place of a bare <label> that isn't announced as belonging to the
   group. Resets the default browser border/padding/min-width so it
   behaves like the .field div it replaces. */
fieldset{ border: 0; margin: 0; padding: 0; min-width: 0; }
legend{ padding: 0; width: 100%; font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); }

.wrap{
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (max-width: 620px){
  .wrap{ padding-inline: 16px; }
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0 0 0.4em;
  color: var(--ink);
}
h1{ font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); font-weight: 600; }
h2{ font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); }
.hero-h{ font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); font-weight: 600; }
h3{ font-size: 1.25rem; }
p{ margin: 0 0 1em; color: var(--ink-soft); max-width: var(--measure); }
.lede{ font-size: 1.15rem; color: var(--ink-soft); }
.eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 0.9em;
}
.eyebrow::before{
  content: ""; width: 18px; height: 1px;
  background: var(--accent); flex: none;
}
.mono{ font-family: var(--font-mono); }
strong{ color: var(--ink); }

/* Group divider: a labelled hairline breaking a long page (like services.html)
   into a few named parts, without introducing a heading (avoids competing
   with each section's own h2, and avoids a heading-level skip). */
.group-divider{
  max-width: var(--content-max); margin: 8px auto 0; padding: 40px 24px 6px;
  display: flex; align-items: center; gap: 18px;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.group-divider::before, .group-divider::after{
  content: ""; flex: 1; height: 1px; background: var(--line-strong);
}
@media (max-width: 620px){ .group-divider{ padding-inline: 16px; font-size: 0.7rem; gap: 12px; } }

/* ---------- sample-content banner ---------- */
.sample-banner{
  background: var(--teal-900);
  color: #EAF3FA;
  font-size: 0.86rem;
  border-bottom: 1px solid var(--line-strong);
}
.sample-banner .wrap{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-block: 9px;
}
.sample-banner strong{ color: var(--psv-yellow); }
.sample-banner a{ color: #CFE3F0; text-decoration-color: rgba(207,227,240,0.5); }

/* ---------- header ---------- */
header.site{
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}

/* The header row deliberately does NOT use .wrap: it spans the full device
   width so the brand sits on the left edge and the CTA on the right edge,
   with only the gutter padding inside. */
.header-row{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap; gap: 10px 16px;
  padding-block: 14px; padding-inline: 24px;
}
@media (max-width: 620px){
  .header-row{ padding-inline: 16px; }
}
.brand{
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink); flex: none;
}
.brand-icon{ flex: none; display: block; }
.brand-icon .rim, .brand-icon .spoke{ stroke: var(--ink); }
.brand-icon .halo{ stroke: var(--accent); }
.brand-icon .hub{ fill: var(--accent); }
.brand-icon.on-dark .rim, .brand-icon.on-dark .spoke{ stroke: #EAF3FA; }
.wordmark{ display: flex; flex-direction: column; }
.wordmark .wm-text{
  font-family: var(--font-display); font-weight: 600; font-size: 1.4rem;
  line-height: 1; letter-spacing: 0.05em; color: var(--ink);
}
.wordmark .wm-kenya{
  display: flex; align-items: center; gap: 7px; margin-top: 5px;
}
.wordmark .wm-kenya span{
  font-family: var(--font-mono); font-weight: 600; font-size: 0.62rem;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--teal-700);
}
.wordmark .wm-rule{ width: 13px; height: 1px; background: var(--gold-500); display: inline-block; }
.wordmark .wm-tagline{
  display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: 0.58rem; letter-spacing: 0.13em; color: var(--ink-faint);
  text-transform: uppercase; margin-top: 5px;
}
/* The header row is nowrap so the menu button stays pinned to the right
   edge; on narrow screens the decorative tagline is the first thing to go
   rather than letting the brand push the button off the row. */
@media (max-width: 620px){
  .wordmark .wm-tagline{ display: none; }
}

/* margin-inline-start:auto pins the CTA to the right edge even if the row
   ever wraps or gains a third child, so it doesn't rely on space-between
   alone. */
.header-cta{ display: flex; align-items: center; gap: 14px; flex: none; margin-inline-start: auto; }
.header-cta .phone{
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-soft);
  line-height: 1.3;
}
.header-cta .phone b{ color: var(--ink); font-size: 1.02rem; }

@media (max-width: 1300px){
  .header-cta .phone{ display: none; }
}

/* ---------- menu toggle + full-screen site menu ----------
   Deliberately the *only* navigation pattern, at every screen width, rather
   than a horizontal pill-nav on desktop that collapses to a hamburger below
   some breakpoint. NEMT Kenya's visitors skew toward elderly and disabled
   users and the family/caregivers booking on their behalf, so the nav was
   redesigned around what that audience needs most:
   - one consistent control (logo + a always-visible, clearly-labelled
     "Menu" button) regardless of device, so a relative talking someone
     through the site over the phone can give the same instruction either way
   - no hover-triggered dropdowns/mega-menus — hover is unreliable on
     touchscreens and for anyone with reduced fine motor control
   - a full-viewport takeover with a short, linear list of large
     (64px-tall-minimum) tap targets instead of a dense multi-column dropdown
   - a "just call us" escape hatch (large call/WhatsApp buttons) right in the
     menu, for visitors who'd rather skip navigating entirely */
.menu-toggle{
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 10px 18px 10px 14px;
  border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--bg-raised); color: var(--ink);
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  cursor: pointer;
}
.menu-toggle:hover{ border-color: var(--brand); color: var(--brand); }
.menu-toggle-icon{ display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 20px; flex: none; }
.menu-toggle-icon span{
  display: block; height: 2px; border-radius: 1px; background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(2){ opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 460px){
  .menu-toggle-label{ display: none; }
  .menu-toggle{ padding: 13px; }
}

body.menu-open{ overflow: hidden; }

/* The open menu is drawn as a route map: each page is a stop on one line,
   and the page you're on is marked "You are here". Wayfinding language that
   fits a transport company and that older visitors already know from
   signage. Colours are fixed (not theme tokens) because the menu is always
   navy, in light and dark mode alike. */
.site-menu{
  --m-bg: #0E3A5C;
  --m-ink: #FFFFFF;
  --m-soft: #B9CEDC;
  --m-faint: #8FAEC2;
  --m-line: rgba(234,243,250,0.16);
  --m-accent: #7ED4F5;
  --m-card: rgba(255,255,255,0.055);
  position: fixed; inset: 0; z-index: 100;
  background: var(--m-bg); color: var(--m-soft);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  animation: menu-in 0.18s ease-out both;
}
:root[data-theme="dark"] .site-menu{ --m-bg: #0A2740; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .site-menu{ --m-bg: #0A2740; }
}
.site-menu[hidden]{ display: none; }
.site-menu :focus-visible{ outline: 3px solid var(--m-accent); outline-offset: 3px; }

/* Top bar mirrors the site header exactly (same padding, full width) so the
   Close button lands where the Menu button was: open and close are one spot. */
.site-menu-top{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: max(14px, env(safe-area-inset-top)) 24px 14px;
  border-bottom: 1px solid var(--m-line);
}
.site-menu-top .brand{ color: var(--m-ink); }
.site-menu-top .wordmark .wm-text{ color: var(--m-ink); }
.site-menu-top .wordmark .wm-kenya span{ color: var(--m-accent); }
.site-menu-top .wordmark .wm-rule{ background: var(--m-accent); }
.menu-close{
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 10px 18px 10px 14px; flex: none;
  border-radius: 999px; border: 1px solid rgba(234,243,250,0.34);
  background: transparent; color: var(--m-ink);
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.menu-close svg{ width: 20px; height: 20px; }
.menu-close:hover{ background: rgba(234,243,250,0.1); border-color: rgba(234,243,250,0.6); }

.site-menu-body{
  max-width: var(--content-max); margin-inline: auto;
  padding: 28px 24px 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "nav" "help" "info" "actions";
}
.site-menu-nav{ grid-area: nav; }
.site-menu-actions{ grid-area: actions; }
.site-menu-help{ grid-area: help; }
.site-menu-info{ grid-area: info; }

.site-menu-kicker{
  margin: 0 0 14px; max-width: none;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--m-faint);
}

/* --- the route --- */
.route{ position: relative; list-style: none; margin: 0; padding: 0; }
/* The line runs from the first stop's centre to the last stop's centre. */
.route::before{
  content: ""; position: absolute; left: 10px; width: 3px; border-radius: 2px;
  top: 34px; bottom: 34px;
  background: rgba(234,243,250,0.22);
  transform-origin: top; animation: route-draw 0.5s cubic-bezier(.3,.7,.2,1) 0.05s both;
}
.route li{ animation: stop-in 0.32s ease-out both; }
.route li:nth-child(2){ animation-delay: 0.04s; }
.route li:nth-child(3){ animation-delay: 0.08s; }
.route li:nth-child(4){ animation-delay: 0.12s; }
.route li:nth-child(5){ animation-delay: 0.16s; }
.route li:nth-child(6){ animation-delay: 0.20s; }
.route li:nth-child(7){ animation-delay: 0.24s; }
.route li:nth-child(8){ animation-delay: 0.28s; }

.route a{
  position: relative;
  display: grid; grid-template-columns: 23px minmax(0, 1fr);
  align-items: center; column-gap: 20px;
  min-height: 68px; padding: 10px 12px 10px 0;
  border-radius: var(--radius-m);
  color: var(--m-ink); text-decoration: none;
}
.route .stop{
  position: relative; z-index: 1; justify-self: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--m-bg); border: 3px solid rgba(234,243,250,0.55);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.route-text{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.route-name{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem); line-height: 1.1;
  transition: color 0.15s ease;
}
.route-desc{ font-size: 0.95rem; line-height: 1.35; color: var(--m-soft); }
.route .here{
  display: inline-block; vertical-align: 0.3em; margin-left: 12px;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: var(--m-bg); background: var(--m-accent);
  padding: 4px 9px; border-radius: 999px; line-height: 1.3;
}

.route a:hover .route-name, .route a:focus-visible .route-name{ color: var(--m-accent); }
.route a:hover .stop, .route a:focus-visible .stop{ border-color: var(--m-accent); transform: scale(1.15); }
.route a[aria-current="page"] .route-name{ color: var(--m-accent); }
.route a[aria-current="page"] .stop{
  background: var(--m-accent); border-color: var(--m-accent);
  box-shadow: 0 0 0 5px rgba(126,212,245,0.22);
}

/* --- "talk to a person" --- */
.site-menu-help{ padding-top: 28px; }
.help-kicker{
  margin: 0 0 6px; max-width: none;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--m-faint);
}
.help-number{
  display: block; margin: 0 0 6px;
  font-family: var(--font-display); font-weight: 600; color: var(--m-ink);
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.35rem); line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em; white-space: nowrap;
}
.help-line{ margin: 0; max-width: none; color: var(--m-soft); font-size: 1rem; }
.help-info{
  margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--m-line);
  display: grid; gap: 12px;
}
.site-menu-info{ padding-bottom: 32px; }
.help-info div{ display: grid; gap: 2px; }
.help-info dt{
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-faint);
}
.help-info dd{ margin: 0; color: var(--m-soft); font-size: 0.98rem; line-height: 1.45; }
.help-info a{ color: var(--m-ink); text-decoration-color: rgba(234,243,250,0.4); text-underline-offset: 3px; }
.help-info a:hover{ text-decoration-color: var(--m-accent); }

.site-menu-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.site-menu-actions .btn{ min-height: 56px; padding: 14px 18px; font-size: 1.05rem; border-radius: 12px; }
.site-menu-actions .btn-outline{ border-color: rgba(234,243,250,0.4); color: var(--m-ink); }
.site-menu-actions .btn-outline:hover{ border-color: #FFFFFF; color: #FFFFFF; }

/* Phones: Call / WhatsApp stay docked at the bottom of the screen while the
   route scrolls, so "just call us" is never more than one tap away. */
@media (max-width: 899px){
  .site-menu-actions{
    position: sticky; bottom: 0; z-index: 2; align-self: end;
    margin-inline: -24px; margin-top: 18px;
    padding: 12px 24px max(12px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--m-bg) 92%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--m-line);
  }
}
@media (max-width: 620px){
  .site-menu-top{ padding-inline: 16px; }
  .site-menu-body{ padding: 20px 16px 0; }
  .site-menu-actions{ margin-inline: -16px; padding-inline: 16px; }
  .route a{ column-gap: 16px; min-height: 64px; }
}
@media (max-width: 460px){
  .menu-close-label{ display: none; }
  .menu-close{ padding: 13px; }
}

/* Wide screens: route on the left, the call panel as a card on the right,
   both visible without scrolling. */
@media (min-width: 900px){
  .site-menu-body{
    padding-top: 40px; padding-bottom: 48px;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "nav help" "nav actions" "nav info" "nav .";
    column-gap: clamp(40px, 6vw, 96px);
  }
  .site-menu-nav{ max-width: 620px; }
  .site-menu-help, .site-menu-actions, .site-menu-info{ background: var(--m-card); padding-inline: 28px; }
  .site-menu-help{ padding-block: 28px 0; border-radius: var(--radius-l) var(--radius-l) 0 0; margin-top: 30px; }
  .site-menu-actions{ padding-block: 22px 0; grid-template-columns: 1fr; }
  .site-menu-info{ padding-block: 4px 28px; border-radius: 0 0 var(--radius-l) var(--radius-l); }
  .route a{ padding-right: 16px; }
  .route a:hover{ background: rgba(234,243,250,0.05); }
}

@keyframes menu-in{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes route-draw{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } }
@keyframes stop-in{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
  .site-menu, .route::before, .route li{ animation: none; }
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.96rem;
  letter-spacing: 0.01em;
  padding: 13px 22px; border-radius: 7px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--btn-primary-bg); color: #FFFFFF; box-shadow: none; }
.btn-primary:hover{ background: var(--btn-primary-bg-hover); }
.btn-outline{ background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-outline:hover{ border-color: var(--brand); color: var(--brand); }
.btn-quiet{ background: var(--bg-raised); color: var(--ink); border-color: var(--line); }
.btn-sm{ padding: 9px 15px; font-size: 0.88rem; }

/* ---------- sections & hero ---------- */
section{ padding-block: 56px; }
section.tight{ padding-block: 36px; }
.section-head{ max-width: 42rem; margin-bottom: 34px; }
.bg-raised{ background: var(--bg-raised); }
.bg-sunken{ background: var(--bg-sunken); border-block: 1px solid var(--line); }
.bg-brand{ background: var(--teal-900); color: #DCEAF3; }
.bg-brand h1, .bg-brand h2, .bg-brand h3{ color: #FFFFFF; }
.bg-brand p{ color: #D7E6F0; }
.bg-brand .eyebrow{ color: var(--gold-500); }

/* .btn-primary's default fill (--btn-primary-bg, in light mode resolving to
   var(--brand-strong) = var(--teal-900)) is the exact same navy as .bg-brand
   and .cta-banner's own background (both `background: var(--teal-900)`), so
   a primary button sitting on either renders with no visible fill at all —
   just floating white text with no button-shaped affordance. Found by
   script (comparing a .btn-primary's computed background to its nearest
   ancestor's) across 10+ sections site-wide while QA-ing the new full-
   screen menu, which had the identical issue. Override to a light fill
   that's actually distinguishable from the navy behind it. */
.bg-brand .btn-primary, .cta-banner .btn-primary, .site-menu .btn-primary{ background: #FFFFFF; color: var(--teal-900); }
.bg-brand .btn-primary:hover, .cta-banner .btn-primary:hover, .site-menu .btn-primary:hover{ background: #DCEAF3; }
/* Some .bg-brand sections nest a light `.card` (e.g. the Tiba Bundle price
   card on services.html/index.html) — a .btn-primary inside one of those
   was already fine (navy on the card's own light background) and the
   white-fill override above would turn it white-on-white. Higher
   specificity (3 classes) restores the normal navy fill for that case. */
.bg-brand .card .btn-primary, .cta-banner .card .btn-primary{ background: var(--btn-primary-bg); color: #FFFFFF; }
.bg-brand .card .btn-primary:hover, .cta-banner .card .btn-primary:hover{ background: var(--btn-primary-bg-hover); }

/* manifesto (About page) */
.manifesto-list{ display:grid; gap:24px; margin-top:36px; max-width:56rem; }
.manifesto-item{ display:grid; grid-template-columns:52px 1fr; gap:18px; align-items:baseline; }
.manifesto-item .num{
  font-family: var(--font-mono); font-size:0.95rem; font-weight:600; color: var(--gold-500);
  line-height:1.5;
}
.manifesto-item p{
  font-family: var(--font-display); font-size:1.3rem; font-weight:500; line-height:1.45;
  color:#FFFFFF; margin:0;
}
.manifesto-signoff{
  margin-top:34px; padding-top:22px; border-top:1px solid rgba(237,244,243,0.18);
  font-family: var(--font-mono); font-size:0.85rem; letter-spacing:0.02em; color: #A9CFE3;
}
@media (max-width:620px){
  .manifesto-item{ grid-template-columns:34px 1fr; }
  .manifesto-item p{ font-size:1.1rem; }
}

.hero{ padding-block: 44px 34px; }
.hero-grid{ display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
@media (max-width: 860px){ .hero-grid{ grid-template-columns: 1fr; } }
.hero .art{ background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 10px; box-shadow: var(--shadow-1); }
.hero .art img{ width:100%; display:block; border-radius: calc(var(--radius-l) - 4px); object-fit: cover; aspect-ratio: 4/3; }
.wide-photo{ border-radius: var(--radius-l); overflow:hidden; box-shadow: var(--shadow-1); border:1px solid var(--line); }
.wide-photo img{ width:100%; display:block; object-fit:cover; }
.photo-caption{ font-size:0.92rem; color: var(--ink-soft); margin-top:10px; }
.hero-ctas{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.trust-strip{ display: flex; gap: 26px; flex-wrap: wrap; }
.trust-strip .item{ display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--ink-soft); }
.trust-strip svg{ flex: none; color: var(--ok); }

/* Hero slider */
.hero-slide-stack{ position: relative; }
.hero-slide-stack .hero-slide{ display: none; }
.hero-slide-stack .hero-slide.is-active{ display: grid; }
.hero-slide .art{ position: relative; }
.art-badge{
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-raised); color: var(--ink);
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 7px 12px 7px 8px; border-radius: 999px; box-shadow: var(--shadow-1);
  border: 1px solid var(--line);
}
.art-badge.badge-tag{ padding: 7px 13px; color: var(--teal-700); }
.art-badge.badge-top-left{ top: 20px; left: 20px; }
.art-badge.badge-top-right{ top: 20px; right: 20px; }
.art-badge .dot-icon{ width: 17px; height: 17px; border-radius: 50%; background: var(--teal-700); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.art-badge .dot-icon svg{ width: 9px; height: 9px; }

.hero-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.hero-chips span{
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft);
}

.hero-bottom{ display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 32px; flex-wrap: wrap; padding-inline: 0; }
.slider-nav{ display: flex; align-items: center; gap: 12px; }
.slider-arrow{
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-raised);
  color: var(--teal-700); display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 1.15rem; line-height: 1; transition: background 0.15s ease, border-color 0.15s ease; flex: none;
}
.slider-arrow:hover{ background: var(--teal-100); border-color: var(--teal-700); }
.slider-dots{ display: flex; align-items: center; gap: 7px; }
.slider-dots button{
  width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--line); cursor: pointer; padding: 0;
  transition: background 0.15s ease, width 0.15s ease;
}
.slider-dots button.is-active{ background: var(--gold-500); width: 22px; border-radius: 5px; }

@media (max-width: 860px){
  .hero-bottom{ justify-content: center; }
  .hero-slide .art{ display: flex; flex-direction: column; gap: 8px; }
  .art-badge{ position: static; align-self: flex-start; font-size: 0.62rem; padding: 6px 10px 6px 7px; }
}

/* page header used on non-home pages */
.page-header{ padding-block: 40px 8px; }
.page-header h1{ margin-bottom: 0.3em; }

/* ---------- stats ---------- */
.stat-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-m);
  overflow: hidden;
}
@media (max-width: 720px){ .stat-grid{ grid-template-columns: repeat(2, 1fr); } }
.stat{ background: var(--bg-raised); padding: 22px 20px; }
.stat .n{ font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
.stat .l{ font-size: 0.82rem; color: var(--ink-faint); margin-top: 4px; }

/* ---------- card grids ---------- */
.grid{ display: grid; gap: 20px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .grid-3, .grid-4, .grid-2{ grid-template-columns: 1fr; } }
/* A handful of sections set their own two-column split with an inline
   grid-template-columns (e.g. "0.9fr 1.1fr" image/text pairs). Those have
   no responsive rule of their own, so force every .grid to one column
   below 620px regardless of what's written inline. */
@media (max-width: 620px){ .grid{ grid-template-columns: 1fr !important; } }

/* Grid items default to min-width:auto, so a wide <select>, <table> or price
   list inside one can force its column (and the page) wider than the
   viewport even when the grid is nominally one column. This resets that
   sitewide instead of patching each grid separately. */
.grid > *, .hero-grid > *, .contact-grid > *, .cert-grid > *, .values > *,
.mv-grid > *, .roster > *, .field-row > *, .foot-grid > *, .step > *,
ul.specs > li{ min-width: 0; }

.card{
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px;
  padding: 24px; box-shadow: none;
  display: flex; flex-direction: column; gap: 10px;
}
.card .icon{
  width: 46px; height: 46px; border-radius: var(--radius-s);
  background: var(--teal-100); color: var(--brand);
  display: flex; align-items: center; justify-content: center; flex: none;
  margin-bottom: 6px;
}
.card h3{ margin-bottom: 2px; }
.card p{ margin-bottom: 0; font-size: 0.94rem; }
.card .foot{ margin-top: auto; padding-top: 10px; }
.bundle-price-row{
  margin-top: auto; padding-top: 14px; display:flex; align-items:center;
  justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.bundle-price{ font-family: var(--font-display); font-size:1.5rem; font-weight:600; color: var(--brand); line-height:1; }
.bundle-price small{ font-family: var(--font-body); font-size:0.78rem; font-weight:500; color: var(--ink-soft); }
.bundle-tag{
  display:inline-block; font-family: var(--font-mono); font-size:0.78rem; font-weight:600;
  letter-spacing:0.03em; color: var(--ink-soft); margin-bottom:2px;
}

/* vehicle spec card */
.vcard{ background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: none; display:flex; flex-direction:column; }
.vcard .vart{ background: var(--teal-100); padding: 22px; display:flex; align-items:center; justify-content:center; aspect-ratio: 16/10; min-height: 0; overflow: hidden; }
.vcard .vart.photo{ padding: 10px; }
.vcard .vart.photo .shot{ width:100%; height:100%; object-fit:cover; border-radius: 9px; display:block; }
.vcard .vart.photo .shot-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 6px; width:100%; height:100%; min-height:0; }
.vcard .vart.photo .shot-grid img{ width:100%; height:100%; min-height:0; object-fit:cover; border-radius:9px; display:block; }
.vcard .vart.photo.small-src{ background: var(--bg-sunken); }
.vcard .vbody{ padding: 20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.vcard .tag{ align-self:flex-start; }
ul.specs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap:6px 14px; font-size:0.94rem; }
ul.specs li{ display:flex; justify-content:space-between; gap:6px; border-bottom:1px dashed var(--line); padding-bottom:4px; color:var(--ink-soft); }
ul.specs li b{ color:var(--ink); font-family: var(--font-mono); font-weight:600; font-size:0.9rem; }
.vcard .vfoot{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.bg-brand .card{ color: var(--ink); background: var(--bg-raised); }
.bg-brand .card p{ color: var(--ink-soft); }

.tag{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  background: var(--green-100); color: var(--ok);
}
.tag.sample{ background: var(--gold-100); color: var(--accent-strong); }
.tag.neutral{ background: var(--bg-sunken); color: var(--ink-soft); }

/* roster / team */
.roster{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
@media (max-width: 900px){ .roster{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .roster{ grid-template-columns: 1fr; } }
.person{ background: var(--bg-raised); border:1px solid var(--line); border-radius: 10px; padding:22px; text-align:left; box-shadow: none; }
.person .avatar{
  width: 56px; height:56px; border-radius:50%;
  background: linear-gradient(155deg, var(--teal-700), var(--teal-900));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:600; font-size:1.15rem;
  margin-bottom: 14px;
}
.person h3{ margin-bottom:1px; font-size:1.06rem; }
.person .role{ color: var(--accent-strong); font-size:0.92rem; font-weight:600; margin-bottom:10px; display:block; }
.person p{ font-size: 0.98rem; margin-bottom: 10px; }

/* certificate / credential card */
.cert{
  background: var(--bg-raised); border:1px solid var(--line); border-radius: 10px;
  padding: 22px; box-shadow: none;
  display:grid; grid-template-columns: 46px 1fr; gap: 14px;
}
.cert .cicon{ width:46px; height:46px; border-radius:10px; background:var(--teal-100); color:var(--brand); display:flex; align-items:center; justify-content:center; }
.cert h3{ font-size:1rem; margin-bottom:2px; }
.cert .issuer{ font-size:0.92rem; color: var(--ink-soft); margin-bottom:8px; }
.cert .ref{ font-family: var(--font-mono); font-size:0.86rem; color: var(--ink-soft); background: var(--bg-sunken); padding:3px 8px; border-radius:6px; display:inline-block; }
.cert-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:18px; }
@media (max-width: 720px){ .cert-grid{ grid-template-columns: 1fr; } }

/* credentials checklist */
.checklist-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; }
@media (max-width: 620px){ .checklist-grid{ grid-template-columns: 1fr; } }
.check-item{
  display:flex; align-items:center; gap:14px;
  background: var(--bg-raised); border:1px solid var(--line); border-radius: var(--radius-s);
  padding: 20px 22px;
  font-family: var(--font-display); font-weight:600; font-size:1.05rem; color: var(--ink);
}
.check-item svg{ flex:none; color: var(--ok); }

/* values list */
.values{ display:grid; grid-template-columns: repeat(5,1fr); gap:16px; }
@media (max-width: 980px){ .values{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 620px){ .values{ grid-template-columns: repeat(2,1fr); } }
.value{ text-align:left; }
.value .icon{ width:40px; height:40px; border-radius:10px; background:var(--gold-100); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.value h3{ font-size:0.98rem; margin-bottom:4px; }
.value p{ font-size:0.95rem; margin-bottom:0; }

/* mission/vision */
.mv-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
@media (max-width: 720px){ .mv-grid{ grid-template-columns: 1fr; } }
.mv-card{ border:1px solid var(--line); border-radius: var(--radius-l); padding:30px; background: var(--bg-raised); box-shadow: var(--shadow-1); position:relative; overflow:hidden; }
.mv-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background: var(--accent); }
.mv-card.vision::before{ background: var(--brand); }
.mv-card .eyebrow{ margin-bottom: 14px; }

/* process steps */
.steps{ counter-reset: step; display:grid; gap: 16px; }
.step{ display:grid; grid-template-columns: 44px 1fr; gap:16px; align-items:flex-start; }
.step .num{
  counter-increment: step; width:44px; height:44px; border-radius:50%;
  background: var(--teal-900); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight:600; font-size:0.95rem;
}
.step .num::before{ content: counter(step, decimal-leading-zero); }
.step h3{ font-size:1.02rem; margin-bottom:3px; }
.step p{ font-size:0.9rem; margin-bottom:0; }

/* table */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius-m); background: var(--bg-raised); }
table{ border-collapse: collapse; width:100%; min-width: 420px; font-size:0.92rem; }
th, td{ text-align:left; padding: 12px 16px; border-bottom:1px solid var(--line); }
th{ font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--ink-faint); }
tr:last-child td{ border-bottom:none; }
td.n{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* contact / form */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items:start; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label{ font-size:0.95rem; font-weight:600; color: var(--ink-soft); }
.field input, .field textarea, .field select{
  font: inherit; font-size: 1rem; padding: 12px 14px; border-radius: var(--radius-s);
  border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--ink);
}
.field textarea{ resize: vertical; min-height: 100px; }
.form-note{ font-size:0.9rem; color: var(--ink-soft); margin-top: 10px; }
/* Spam trap on the contact form: off-screen, never seen or tabbed to. */
.hp-field{ position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:480px){ .field-row{ grid-template-columns:1fr; } }

.vehicle-options{ display:flex; flex-direction:column; gap:10px; }
.vehicle-option{ display:flex; align-items:flex-start; gap:11px; padding:12px 14px; border:1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--bg-raised); cursor:pointer; transition: border-color 0.15s; }
.vehicle-option:hover{ border-color: var(--brand); }
.vehicle-option input{ margin-top:4px; accent-color: var(--brand); flex-shrink:0; }
.vehicle-option .vo-text{ display:flex; flex-direction:column; gap:2px; }
.vehicle-option .vo-text b{ font-size:1rem; color:var(--ink); }
.vehicle-option .vo-text span{ font-size:0.9rem; color:var(--ink-soft); }

.area-list{ display:flex; flex-wrap:wrap; gap:8px; }
.area-list span{ background: var(--bg-sunken); border:1px solid var(--line); padding:6px 12px; border-radius:999px; font-size:0.92rem; color: var(--ink-soft); }

/* map placeholder */
.map-art{ border:1px solid var(--line); border-radius: var(--radius-l); overflow:hidden; background: var(--teal-100); }

/* CTA banner */
.cta-banner{
  background: var(--teal-900); color:#fff; border-radius: var(--radius-l);
  padding: 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-banner h2{ color:#fff; margin-bottom:6px; }
.cta-banner p{ color:#D7E6F0; margin-bottom:0; }
.cta-submit{ flex-shrink:0; }
@media (max-width: 620px){
  .cta-banner{ padding: 24px; }
}
@media (max-width: 480px){
  .cta-submit{ flex-shrink:1; flex-basis:100%; width:100%; white-space:normal; text-align:center; }
}

/* footer */
footer.site{ background: var(--teal-900); color: #D7E6F0; margin-top: 60px; }
footer.site a{ color:#DCEAF3; }
.foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding-block: 46px 26px; }
@media (max-width: 860px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px){ .foot-grid{ grid-template-columns: 1fr; } }
footer.site h3{ font-family: var(--font-mono); font-size:0.74rem; letter-spacing:0.09em; text-transform:uppercase; color:#7FA8C2; margin-bottom:14px; }
footer.site ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:0.9rem; }
footer.site ul a{ text-decoration:none; }
footer.site ul a:hover{ text-decoration:underline; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,0.12); padding-block:18px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:0.78rem; color:#7FA8C2; }
.foot-brand-word{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); color:#fff; font-size:1.2rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; }
.foot-desc{ font-size:0.95rem; max-width:32ch; color:#B9D2E3; }
.social-links{ display:flex; gap:10px; margin-top:16px; }
.social-links a{
  width:36px; height:36px; border-radius:999px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.22); color:#DCEAF3;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.social-links a:hover, .social-links a:focus-visible{
  border-color: var(--accent); color: var(--accent); background: rgba(255,255,255,0.06);
}

/* FAQ */
.faq-list{ display:flex; flex-direction:column; gap:12px; max-width:52rem; }
.faq-item{
  background: var(--bg-raised); border:1px solid var(--line); border-radius:10px;
  padding: 4px 22px;
}
.faq-item summary{
  cursor:pointer; list-style:none; padding:18px 0;
  font-family: var(--font-display); font-weight:600; font-size:1.08rem; color: var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family: var(--font-body); font-weight:400; font-size:1.4rem;
  color: var(--accent-strong); flex:none; line-height:1;
}
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item p{ margin: 0 0 18px; font-size:1rem; }

/* testimonial */
.testimonial{
  max-width: 680px; margin: 0 auto; text-align:center;
  background: var(--bg-raised); border:1px solid var(--line); border-radius: 14px;
  padding: 40px 36px;
}
.testimonial .stars{ color: var(--gold-500); font-size:1.1rem; letter-spacing:2px; margin-bottom:16px; }
.testimonial blockquote{
  margin:0 0 18px; font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); line-height:1.45; color: var(--ink);
}
.testimonial cite{ font-style:normal; font-size:0.9rem; color: var(--ink-soft); display:block; }
.testimonial cite a{ color: var(--ink-faint); text-decoration: underline; }

/* review-collection links (contact page) */
.review-links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

/* contact form: progressive disclosure */
.form-more{
  background: var(--bg-raised); border:1px solid var(--line); border-radius:10px;
  padding: 4px 20px; margin: 6px 0 20px;
}
.form-more summary{
  cursor:pointer; list-style:none; padding:16px 0;
  font-family: var(--font-display); font-weight:600; font-size:1rem; color: var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.form-more summary::-webkit-details-marker{ display:none; }
.form-more summary::after{
  content:"+"; font-family: var(--font-body); font-weight:400; font-size:1.4rem;
  color: var(--accent-strong); flex:none; line-height:1;
}
.form-more[open] summary::after{ content:"\2212"; }
.form-more-hint{
  font-family: var(--font-body); font-weight:400; font-size:0.85rem; color: var(--ink-faint);
}
.form-more-body{ padding-bottom:18px; }
.form-more-body .field:last-child{ margin-bottom:0; }
@media (max-width:480px){
  .form-more summary{ flex-wrap:wrap; }
  .form-more-hint{ flex-basis:100%; }
}

/* cost calculator: destination lookup vs distance mode toggle */
.calc-mode-toggle{ display:inline-flex; gap:4px; padding:4px; background:var(--bg-sunken); border:1px solid var(--line); border-radius:999px; margin-bottom:26px; }
.calc-mode-btn{ font:inherit; font-size:0.9rem; font-weight:600; padding:9px 18px; border-radius:999px; border:none; background:transparent; color:var(--ink-soft); cursor:pointer; transition:background 0.15s ease, color 0.15s ease; }
.calc-mode-btn:hover{ color:var(--ink); }
.calc-mode-btn.is-active{ background:var(--bg-raised); color:var(--brand); box-shadow:var(--shadow-1); }
@media (max-width:480px){ .calc-mode-toggle{ display:flex; width:100%; } .calc-mode-btn{ flex:1; } }

/* collapsible detailed rate lists (services pricing) */
.rate-accordion{
  background: var(--bg-raised); border:1px solid var(--line); border-radius:10px;
  padding: 4px 22px;
}
.rate-accordion summary{
  cursor:pointer; list-style:none; padding:18px 0;
  font-family: var(--font-display); font-weight:600; font-size:1.05rem; color: var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.rate-accordion summary::-webkit-details-marker{ display:none; }
.rate-accordion summary::after{
  content:"+"; font-family: var(--font-body); font-weight:400; font-size:1.4rem;
  color: var(--accent-strong); flex:none; line-height:1;
}
.rate-accordion[open] summary::after{ content:"\2212"; }
.rate-accordion-hint{ font-family: var(--font-body); font-weight:400; font-size:0.85rem; color: var(--ink-faint); }
.rate-accordion-body{ padding-bottom:20px; }
@media (max-width:480px){ .rate-accordion-hint{ flex-basis:100%; } }

/* hotel picker inside accommodation-package accordions */
.hotel-pick-list{ display:grid; grid-template-columns:1fr 1fr; gap:2px 24px; }
.hotel-pick{
  display:flex; align-items:center; gap:9px; padding:8px 4px;
  border-bottom:1px dashed var(--line); font-size:0.88rem; color:var(--ink-soft); cursor:pointer;
}
.hotel-pick:hover{ color:var(--ink); }
.hotel-pick input{ accent-color: var(--brand); flex-shrink:0; margin:0; }
@media (max-width:620px){ .hotel-pick-list{ grid-template-columns:1fr; } }

/* services page jump-nav */
.services-jump{
  position: sticky; top: 96px; z-index: 30;
  display:flex; gap:8px; flex-wrap:nowrap;
  max-width: var(--content-max); margin-inline:auto; padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
  /* scroll-shadow cue: two "local" gradients fade the row to the page background
     and travel with the content (so they vanish at each true end); two "scroll"
     gradients sit fixed under them and only peek out while there's more to scroll. */
  background-image:
    linear-gradient(to right, var(--bg) 0%, transparent 24px),
    linear-gradient(to left, var(--bg) 0%, transparent 24px),
    linear-gradient(to right, var(--line-strong), transparent 10px),
    linear-gradient(to left, var(--line-strong), transparent 10px);
  background-repeat: no-repeat;
  background-color: var(--bg);
  background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-position: left, right, left, right;
  background-attachment: local, local, scroll, scroll;
}
@media (max-width: 620px){ .services-jump{ padding-inline: 16px; } }
.services-jump::-webkit-scrollbar{ display:none; }
.services-jump a{
  flex: none;
  display:inline-block; font-size:0.85rem; font-weight:500; color: var(--ink-soft);
  background: var(--bg-raised); border:1px solid var(--line); border-radius:999px;
  padding:6px 14px; text-decoration:none; white-space:nowrap;
}
.services-jump a:hover{ color: var(--accent-strong); border-color: var(--accent-strong); }
.services-jump a.is-priority{ color: var(--brand); border-color: var(--brand); font-weight:600; }

/* sticky mobile call/whatsapp bar */
.mobile-cta-bar{ display:none; }
@media (max-width: 760px){
  .mobile-cta-bar{
    display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background: var(--bg-raised); border-top:1px solid var(--line);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 18px rgba(20,30,28,0.1);
  }
  .mobile-cta-bar a{ flex:1; text-align:center; }
  body{ padding-bottom: 66px; }
}

/* floating WhatsApp button */
.whatsapp-float{
  position: fixed; right: 22px; bottom: 22px; z-index: 55;
  display: flex; align-items: center; gap: 10px;
  background: var(--accent); color: #0E2A3D; text-decoration: none;
  border-radius: 999px; padding: 12px; line-height: 1;
  box-shadow: 0 10px 26px rgba(20,30,28,0.28);
  transition: box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.whatsapp-float:hover, .whatsapp-float:focus-visible{
  background: var(--accent-strong); box-shadow: 0 12px 30px rgba(20,30,28,0.34); transform: translateY(-2px);
}
.whatsapp-float svg{ flex: none; width: 26px; height: 26px; }
.whatsapp-float-label{ display: flex; flex-direction: column; gap: 1px; white-space: nowrap; padding-right: 6px; }
.whatsapp-float-label b{ font-size: 0.86rem; font-weight: 700; }
.whatsapp-float-label span{ font-family: var(--font-mono); font-size: 0.76rem; opacity: 0.85; }
@media (max-width: 760px){
  .whatsapp-float{ right: 16px; bottom: 82px; padding: 14px; }
  .whatsapp-float-label{ display: none; }
}

/* utility */
.center{ text-align:center; }
.mt-0{ margin-top:0; }
.section-head.center{ margin-inline:auto; }

.link-btn{
  font: inherit; font-size:0.82rem; font-weight:600; color:inherit; text-decoration:underline;
  background:none; border:none; padding:0; cursor:pointer;
}
.link-btn:hover{ opacity:0.85; }

/* hotel picker: no-match state for the type-ahead filter */
.hotel-filter-empty{
  font-size:0.9rem; color: var(--ink-soft); background: var(--bg-sunken);
  border-radius: var(--radius-s); padding:14px 16px; margin: 8px 0 20px;
}