/* ==========================================================================
   DriveMe — site.css
   Design system for the generated content pages.

   Built on the project's premium-designer language (type scale, 8px grid,
   motion curves, WCAG 2.2 AA floor) with two deliberate brand overrides:

     · Palette — the default warm-neutral/forest system is replaced by
       DriveMe navy + blue. §12.1 of the growth strategy: "Keep the current
       premium dark-blue visual identity."
     · Radii — buttons and chips are pills rather than the 4px default, and
       cards sit at 14px. One tier per component class, never mixed.

   Two families only: Geist (sans, shared with the app surfaces) and
   Instrument Serif (italic accent phrases only).
   ========================================================================== */

:root{
  /* ---- surfaces & ink -------------------------------------------------- */
  --paper:#FBFCFD;              /* page ground — never pure white */
  --surface:#FFFFFF;            /* cards on paper */
  --surface-sunk:#F1F5F9;

  --ink-900:#0F1319;            /* primary text */
  --ink-700:#3C4450;            /* secondary text */
  --ink-500:#646C7B;            /* tertiary text, icons */
  --ink-300:#D7DDE5;            /* borders, dividers (decorative only) */
  --ink-100:#EDF1F6;            /* subtle fills, hover */

  /* ---- navy canvas ----------------------------------------------------- */
  --navy-900:#081524;           /* deepest sections */
  --navy-800:#0B1B2E;           /* hero */
  --navy-700:#132A42;           /* raised panels on navy */
  --navy-line:rgba(255,255,255,.13);
  --on-navy:#FFFFFF;
  --on-navy-2:#AFC3D8;          /* 8.8:1 on navy-800 */

  /* ---- accent (one only, ~5% of any screen) ---------------------------- */
  --brand:#0F63BD;              /* actions on light */
  --brand-deep:#0C4481;         /* hover / pressed */
  --brand-soft:#E7F0FF;         /* accent tint fills */
  --brand-on-navy:#5AA2F0;      /* accent text on navy — 6.9:1 */

  /* ---- semantic (meaning only, never decoration) ----------------------- */
  --positive:#1F7A4C;
  --positive-soft:#E6F4EC;
  --caution:#8A5F14;
  --caution-soft:#FBF3E4;
  --critical:#8C2F2F;
  --critical-soft:#F8EAEA;

  /* ---- type ------------------------------------------------------------ */
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;

  --t-display:clamp(2.6rem,1.9rem + 3.1vw,3.85rem);
  --t-h1:clamp(2.15rem,1.7rem + 2vw,3.05rem);
  --t-h2:clamp(1.75rem,1.45rem + 1.35vw,2.45rem);
  --t-h3:clamp(1.2rem,1.12rem + .35vw,1.4rem);
  --t-h4:1.06rem;
  --t-lead:clamp(1.06rem,1rem + .3vw,1.25rem);
  --t-body:1rem;
  --t-small:.9rem;
  --t-caption:.75rem;

  /* ---- space (8px grid) ------------------------------------------------ */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px;
  --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px;

  --wrap:1200px;
  --gutter:clamp(20px,5vw,40px);
  --section-y:clamp(48px,9vw,96px);

  /* ---- radii (one tier per component class) ---------------------------- */
  --r-pill:999px;               /* buttons, chips, language switch */
  --r-input:10px;               /* inputs, selects */
  --r-card:14px;                /* cards, callouts, fieldsets */
  --r-panel:20px;               /* hero media, quote strip, big surfaces */

  /* ---- elevation (two tiers, no more) ---------------------------------- */
  --shadow-1:0 1px 2px rgba(8,21,36,.06);
  --shadow-2:0 8px 28px rgba(8,21,36,.10);
  --shadow-dark:0 24px 60px rgba(4,10,20,.45);

  /* ---- motion ---------------------------------------------------------- */
  --swift:120ms cubic-bezier(.4,0,1,1);
  --standard:240ms cubic-bezier(.2,0,0,1);
  --entrance:400ms cubic-bezier(.16,1,.3,1);
}

/* ==========================================================================
   base
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  background:var(--paper);color:var(--ink-900);
  font-family:var(--sans);font-size:var(--t-body);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--brand-deep);text-decoration-thickness:1px;text-underline-offset:.2em;transition:color var(--swift)}
a:hover{color:var(--brand)}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;letter-spacing:-.012em;line-height:1.14;color:var(--ink-900)}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-.008em;line-height:1.25}
h4{font-size:var(--t-h4);letter-spacing:-.01em}
strong,b{font-weight:600}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
::selection{background:#CFE2F8;color:#0F1319}
section[id],div[id]{scroll-margin-top:120px}

/* The one serif in the system: italic accent phrases inside a sans heading.
   Optical size differs from the sans, so it is nudged up to sit on the same
   visual line. */
.serif{
  font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:0;font-size:1em;line-height:1.1;color:var(--brand);
}
.sec-navy h2 .serif,.hero h1 .serif,.page-head h1 .serif,.cta-band h2 .serif{color:var(--brand-on-navy)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:720px}
.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}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--surface);color:var(--brand-deep);padding:14px 20px;border-radius:0 0 var(--r-card) 0;font-weight:600}
.skip:focus{left:0}

.eyebrow{
  font-size:var(--t-caption);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand);margin-bottom:var(--s-4);
}
.sec-navy .eyebrow,.hero .eyebrow,.page-head .eyebrow{color:var(--brand-on-navy)}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--ink-700);max-width:62ch}

/* ==========================================================================
   header — utility bar + white nav
   ========================================================================== */
/* Above the phone menu's backdrop (z-index 99), like the header below it. */
.topbar{background:var(--navy-900);color:var(--on-navy-2);position:relative;z-index:100}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  min-height:40px;font-size:var(--t-caption);letter-spacing:.06em;text-transform:uppercase;
}
.topbar-note{font-weight:500}
.topbar-links{display:flex;align-items:center;gap:var(--s-6)}
.topbar-links a{
  display:inline-flex;align-items:center;gap:var(--s-2);
  color:var(--on-navy);text-decoration:none;font-weight:500;letter-spacing:.04em;
}
.topbar-links a:hover{color:var(--brand-on-navy)}
.topbar-links svg{width:14px;height:14px;fill:none;stroke:var(--brand-on-navy);stroke-width:1.6}

.site-head{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--ink-100)}
.head-inner{
  display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;
  align-items:center;gap:var(--s-6);min-height:76px;
}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex:none}
/* max-width:none overrides the global img rule: without it the mark is
   squeezed horizontally while its height stays fixed, distorting the artwork
   rather than scaling it. */
.brand img{height:40px;width:auto;max-width:none;flex:none}
.site-nav{min-width:0}
.site-nav>ul{display:flex;justify-content:center;gap:var(--s-1);list-style:none}
.site-nav>ul>li>a{
  display:block;padding:10px 14px;border-radius:var(--r-pill);white-space:nowrap;
  font-size:var(--t-small);font-weight:500;color:var(--ink-700);text-decoration:none;
  transition:background var(--swift),color var(--swift);
}
.site-nav>ul>li>a:hover{background:var(--ink-100);color:var(--ink-900)}
.site-nav>ul>li>a[aria-current="page"]{color:var(--brand-deep);font-weight:600;background:var(--brand-soft)}
.head-actions{display:flex;align-items:center;gap:var(--s-3);justify-self:end}

.lang{display:inline-flex;border:1px solid var(--ink-300);border-radius:var(--r-pill);overflow:hidden;background:var(--surface)}
.lang a{
  padding:8px 13px;font-size:var(--t-caption);font-weight:600;letter-spacing:.08em;
  color:var(--ink-500);text-decoration:none;transition:background var(--swift),color var(--swift);
}
.lang a:hover{background:var(--ink-100);color:var(--ink-900)}
.lang a[aria-current="true"]{background:var(--navy-800);color:#fff}

.nav-toggle{
  display:none;align-items:center;gap:var(--s-2);min-height:44px;padding:10px 16px;
  background:var(--surface);border:1px solid var(--ink-300);border-radius:var(--r-pill);
  font:inherit;font-size:var(--t-small);font-weight:600;color:var(--ink-900);cursor:pointer;
}

/* ---------- services drop-down ------------------------------------------ */
.site-nav li.has-menu{position:static}
.nav-trigger{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 14px;border:0;border-radius:var(--r-pill);background:transparent;
  font:inherit;font-size:var(--t-small);font-weight:500;color:var(--ink-700);
  cursor:pointer;white-space:nowrap;
  transition:background var(--swift),color var(--swift);
}
.nav-trigger:hover,.nav-trigger[aria-expanded="true"]{background:var(--ink-100);color:var(--ink-900)}
.nav-trigger[data-current="true"]{color:var(--brand-deep);font-weight:600;background:var(--brand-soft)}
.nav-trigger .chev{width:15px;height:15px;flex:none;transition:transform var(--standard)}
.nav-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}

.nav-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  width:min(var(--wrap),calc(100vw - 32px));z-index:120;
  background:var(--surface);border:1px solid var(--ink-300);border-radius:var(--r-panel);
  box-shadow:var(--shadow-2);margin-top:8px;overflow:hidden;
}
/* Gutter padding, so the menu columns line up with the page content. */
.nav-menu-inner{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:var(--s-6) var(--s-8);padding:var(--s-8) var(--gutter)}
.menu-col h2{
  font-size:var(--t-caption);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-500);margin-bottom:var(--s-4);
}
.menu-col-end{border-left:1px solid var(--ink-100);padding-left:var(--s-8)}
.menu-list{list-style:none;display:grid;gap:2px}
.menu-list-2{grid-template-columns:1fr 1fr;gap:2px var(--s-4)}
.menu-list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  padding:9px 10px;margin-inline:-10px;border-radius:var(--r-input);text-decoration:none;
  transition:background var(--swift);
}
.menu-list a:hover{background:var(--brand-soft)}
.mi-name{font-size:var(--t-small);font-weight:500;color:var(--ink-900)}
.mi-price{font-size:var(--t-caption);font-weight:600;color:var(--brand-deep);white-space:nowrap}
.mi-tag{
  font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:var(--caution);background:var(--caution-soft);padding:2px 7px;border-radius:var(--r-pill);
  white-space:nowrap;
}
.menu-links{list-style:none;display:grid;gap:var(--s-2);margin-top:var(--s-6)}
.menu-links a{font-size:var(--t-small);font-weight:600;text-decoration:none}
.menu-col-end .btn{margin-top:var(--s-6);width:100%}
/* Phone-menu actions and the dimmed page behind the open menu; both exist
   only below the desktop breakpoint. */
.nav-sheet-actions{display:none}
.nav-backdrop{position:fixed;inset:0;z-index:99;background:rgba(8,21,36,.48);touch-action:none;animation:backdrop-in var(--standard) both}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}

@media (max-width:1180px){
  /* The first row keeps its own 66px. min-height on the whole grid only held
     while the header had one row: with the panel open the grid is taller, the
     first row shrank to its content and the logo and buttons jumped up. */
  .head-inner{grid-template-columns:auto auto;grid-template-rows:minmax(66px,auto);min-height:66px}
  .nav-toggle{display:inline-flex}
  /* Without an explicit row, opening the nav panel re-runs auto-placement for
     every header child and shoves this row down below the panel, so the
     language switch and Menu button appear to jump to a different spot each
     time it opens. Pinning it to row 1 keeps it beside the logo always. */
  /* Both axes must be pinned together: a row-only constraint jumps ahead of
     the brand mark in the browser's placement order and lands in column 1
     instead, swapping the two sides of the header. */
  .head-actions{grid-row:1;grid-column:2}
  /* The open menu is a sheet laid over the page just below the header bar,
     not a block that grows the header. Growing the sticky header changed the
     page height above the fold, so the browser shifted the scroll position to
     compensate and the header row jumped, or the menu slid off screen when it
     was opened part-way down a page. As an overlay nothing around it moves;
     site.js sizes it to the rest of the screen and it scrolls inside itself. */
  .site-nav{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:110;
    background:var(--surface);border-top:1px solid var(--ink-100);
    border-radius:0 0 var(--r-card) var(--r-card);
    box-shadow:0 18px 40px -12px rgba(8,21,36,.35);
    padding:var(--s-2) var(--gutter) var(--s-6);
  }
  .site-nav.open{display:block;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .site-nav>ul{flex-direction:column;justify-content:flex-start;gap:2px}
  .site-nav>ul>li>a{padding:13px 14px;font-size:var(--t-body)}
  .nav-trigger{width:100%;justify-content:space-between;padding:13px 14px;font-size:var(--t-body)}
  /* No overlay on a touch device: the panel expands in place inside the menu. */
  .nav-menu{
    position:static;transform:none;width:auto;margin:0 0 var(--s-2);
    border-radius:var(--r-card);box-shadow:none;background:var(--paper);
  }
  .nav-menu-inner{grid-template-columns:1fr;gap:var(--s-6);padding:var(--s-6)}
  .menu-col-end{border-left:0;padding-left:0;border-top:1px solid var(--ink-300);padding-top:var(--s-6)}
  .menu-list-2{grid-template-columns:1fr}
  .nav-sheet-actions{display:grid;gap:var(--s-3);margin-top:var(--s-3);padding-top:var(--s-5,20px);border-top:1px solid var(--ink-100)}
  .nav-sheet-actions .btn{width:100%}
  /* The sheet already ends with this button; a second copy inside the expanded
     Services list would repeat it a few lines above. */
  .menu-col-end .btn{display:none}
}
@media (max-width:640px){
  .topbar-note{display:none}
  .topbar-inner{justify-content:center;gap:var(--s-4)}
  .topbar-links{gap:var(--s-4)}
  .brand img{height:30px}
  .head-actions{gap:var(--s-2)}
  .head-actions .btn-cta{display:none}
}

/* ==========================================================================
   buttons — pill tier
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:52px;padding:14px 28px;border:1px solid transparent;border-radius:var(--r-pill);
  font-family:var(--sans);font-size:var(--t-small);font-weight:600;letter-spacing:.01em;line-height:1.2;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--swift),border-color var(--swift),color var(--swift),transform var(--swift),box-shadow var(--standard);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy-800);color:#fff}
.btn-primary:hover{background:var(--brand);color:#fff}
.btn-accent{background:var(--brand);color:#fff}
.btn-accent:hover{background:var(--brand-deep);color:#fff}
.btn-ghost{background:transparent;border-color:var(--ink-300);color:var(--ink-900)}
.btn-ghost:hover{border-color:var(--navy-800);background:var(--ink-100);color:var(--ink-900)}
.btn-light{background:#fff;color:var(--navy-800)}
.btn-light:hover{background:var(--brand-soft);color:var(--brand-deep)}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.10);color:#fff}
.btn-sm{min-height:44px;padding:11px 20px;font-size:var(--t-caption);letter-spacing:.04em}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

/* Surface inversion. A navy-on-navy primary button is invisible, so any
   button placed on a dark surface flips to the light pair automatically —
   a rule about the surface, not a patch on one page. */
.page-head .btn-primary,.sec-navy .btn-primary{background:#fff;color:var(--navy-800)}
.page-head .btn-primary:hover,.sec-navy .btn-primary:hover{background:var(--brand-soft);color:var(--brand-deep)}
.page-head .btn-ghost,.sec-navy .btn-ghost{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.page-head .btn-ghost:hover,.sec-navy .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.10);color:#fff}
.page-head a:not(.btn),.sec-navy a:not(.btn):not(.card a){color:#fff}
.page-head .callout,.sec-navy .callout{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);border-left-color:var(--brand-on-navy)}
.page-head .callout p,.sec-navy .callout p{color:var(--on-navy-2)}
.page-head .callout h3,.sec-navy .callout h3{color:#fff}
.btn .arrow{transition:transform var(--standard)}
.btn:hover .arrow{transform:translateX(3px)}

/* ==========================================================================
   hero — copy left, media right, nothing buried under a scrim
   ========================================================================== */
.hero{background:var(--navy-800);color:var(--on-navy);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 460px at 88% 6%,rgba(46,127,212,.22),transparent 68%);
}
.hero>*{position:relative;z-index:1}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
  gap:clamp(32px,5vw,64px);align-items:center;
  padding-block:clamp(48px,7vw,88px) clamp(40px,6vw,72px);
}
.hero h1{font-size:var(--t-display);color:#fff;font-weight:400;letter-spacing:-.015em;line-height:1.14;max-width:16ch}
 /* Hero text sits on moving footage, not on the solid navy these tokens were
    picked for, so it is lifted here rather than darkening the reel further.
    The shadow does the rest: the copy area is mostly dark, but the reel throws
    isolated bright specks (window reflections, sky through branches) that a
    glyph edge can land on. A soft shadow restores contrast exactly there,
    instead of veiling the whole frame for a handful of pixels. */
.hero-copy{text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 14px rgba(0,0,0,.45)}
.hero-copy .btn{text-shadow:none}
.hero h1 .accent{color:#9CC8FF;font-weight:700;display:block}
.hero .eyebrow{color:#E9F2FF}
.hero .lead{color:#DFE8F3;margin-top:var(--s-6);max-width:46ch}
.hero .trust-strip li{color:#DFE8F3}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-8)}

/* Full-bleed reel behind the whole hero. */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg video{width:100%;height:100%;object-fit:cover;display:block}
/* Weighted to the left: the copy column needs 4.5:1 against white text, the
   right stays light enough that the footage still reads. */
.hero-scrim{
  position:absolute;inset:0;
  /* Neutral black, not navy: black darkens for legibility without tinting the
     footage, so the reel keeps its own colour. It clears completely past the
     copy column, where nothing needs contrast protection. */
  background:linear-gradient(90deg,
    rgba(0,0,0,.44) 0%,
    rgba(0,0,0,.54) 20%,
    rgba(0,0,0,.64) 40%,
    rgba(0,0,0,.46) 56%,
    rgba(0,0,0,.14) 70%,
    transparent 82%);
}

/* Trust bar — full width across the foot of the hero, over the reel. */
.trust-bar{
  position:relative;z-index:1;
  background:rgba(8,21,36,.74);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--navy-line);
}
.trust-bar-inner{
  list-style:none;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.34fr);
  max-width:1520px;margin-inline:auto;
}
.trust-bar li{
  display:flex;align-items:center;justify-content:center;gap:var(--s-3);
  min-width:0;text-wrap:balance;
  padding:var(--s-4) var(--s-3);min-height:64px;
  border-left:1px solid var(--navy-line);
  font-size:var(--t-small);font-weight:600;color:#fff;text-align:left;
}
.trust-bar li:first-child{border-left:0}
.trust-bar svg{width:20px;height:20px;flex:none;color:var(--brand-on-navy)}

/* The five labels need ~1430px to sit on one line each; above that, hold them
   on one line, below it let them wrap rather than overflow. */
@media (min-width:1460px){
  .trust-bar li{white-space:nowrap}
}
@media (max-width:1459px){
  .trust-bar li{font-size:var(--t-caption);gap:var(--s-2);padding-inline:var(--s-2)}
  .trust-bar svg{width:18px;height:18px}
}
@media (max-width:900px){
  .trust-bar-inner{grid-template-columns:repeat(2,1fr)}
  .trust-bar li{justify-content:flex-start;padding-inline:var(--gutter);border-top:1px solid var(--navy-line)}
  .trust-bar li:nth-child(-n+2){border-top:0}
  .trust-bar li:nth-child(odd){border-left:0}
  /* An odd count leaves the last cell alone on its row — let it span. */
  .trust-bar li:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:560px){
  .trust-bar-inner{grid-template-columns:1fr}
  .trust-bar li{border-left:0;border-top:1px solid var(--navy-line);min-height:56px}
  .trust-bar li:first-child{border-top:0}
}

@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s-8)}
  .hero h1{max-width:18ch}
  /* One column: the scrim has to darken the whole frame, not just one side. */
  .hero-scrim{background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.72) 55%,rgba(0,0,0,.80) 100%)}
}

/* ==========================================================================
   quote strip — the first three fields of the request, riding the seam
   ========================================================================== */
/* The request card sits in the hero, over the reel. */
.quick-start{
  position:relative;z-index:1;
  background:var(--surface);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-panel);
  box-shadow:var(--shadow-dark);padding:var(--s-8) var(--s-6);
}
.quick-start h2{font-size:var(--t-h3);font-weight:600;line-height:1.2}
.qs-from{
  display:flex;align-items:baseline;gap:7px;margin-top:var(--s-2);
  font-size:var(--t-small);color:var(--ink-500);
}
.qs-from b{font-size:1.5rem;color:var(--brand-deep);font-weight:600;letter-spacing:-.02em}
.qs-field{display:grid;gap:6px;min-width:0;margin-top:var(--s-4)}
.qs-field label{font-size:var(--t-caption);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.quick-start .btn{width:100%;margin-top:var(--s-6)}
.qs-foot{margin-top:var(--s-4);display:grid;gap:var(--s-2)}
.qs-note{font-size:var(--t-caption);color:var(--ink-500);line-height:1.5}
.qs-alt{font-size:var(--t-small);font-weight:600}
@media (max-width:640px){
  .quick-start{padding:var(--s-6);border-radius:var(--r-card)}
}

/* ==========================================================================
   sections
   ========================================================================== */
.sec{padding-block:var(--section-y)}
.sec-raised{background:var(--surface-sunk)}
.sec-navy{background:var(--navy-900);color:var(--on-navy-2)}
.sec-navy h2,.sec-navy h3{color:#fff}
.sec-navy .lead{color:var(--on-navy-2)}
.sec-head{max-width:60ch;margin-bottom:var(--s-12)}
.sec-head p{margin-top:var(--s-4);color:var(--ink-700);font-size:var(--t-lead);line-height:1.55}
.sec-navy .sec-head p{color:var(--on-navy-2)}

.page-head{background:var(--navy-800);color:var(--on-navy);position:relative;overflow:hidden}
.page-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 380px at 92% 0%,rgba(46,127,212,.20),transparent 70%);
}
.page-head>*{position:relative;z-index:1}
.page-head-inner{padding-block:clamp(32px,6vw,64px)}
.page-head h1{color:#fff;max-width:19ch;font-weight:700;letter-spacing:-.012em}
.page-head .lead{color:var(--on-navy-2);margin-top:var(--s-6)}
.service-hero{background:#15191d}
.service-hero .service-hero-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.service-hero::before{z-index:1;background:linear-gradient(90deg,rgba(10,14,18,.92),rgba(10,14,18,.82) 32%,rgba(10,14,18,.25) 62%,transparent 82%)}
.service-hero .page-head-inner{min-height:610px;display:flex;align-items:center;padding-block:40px}
.service-hero-copy{width:46%;max-width:560px}
.service-hero h1{font-size:42px;letter-spacing:0;max-width:22ch}
.service-hero .lead{font-size:18px;color:#f0f2f4}
.service-hero .meta-row{color:#e1e5e9;gap:12px 24px}
.service-hero-right::before{background:linear-gradient(270deg,rgba(10,14,18,.92),rgba(10,14,18,.82) 32%,rgba(10,14,18,.20) 62%,transparent 82%)}
.service-hero-right .service-hero-copy{margin-left:auto}
@media (max-width:940px){
  /* Phones and tablets keep the desktop composition: the photo stays behind
     the copy. The side gradient becomes a top-to-bottom veil, so the upper
     part of the photo shows through above the headline and the text below
     sits on a ground dark enough to read. */
  .service-hero::before,
  .service-hero-right::before{background:linear-gradient(180deg,rgba(10,14,18,.30) 0%,rgba(10,14,18,.62) 22%,rgba(10,14,18,.86) 46%,rgba(10,14,18,.93) 100%)}
  .service-hero .page-head-inner{min-height:0;align-items:flex-end;padding-block:clamp(150px,34vw,260px) 40px}
  .service-hero-copy,
  .service-hero-right .service-hero-copy{width:100%;max-width:none;margin-left:0}
  .service-hero-copy{text-shadow:0 1px 2px rgba(0,0,0,.45)}
  .service-hero-copy .btn{text-shadow:none}
  .service-hero h1{font-size:32px;max-width:28ch}
  .service-hero .lead{font-size:17px}
  .service-hero-passenger .service-hero-photo{object-position:90% top}
}
.crumbs{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;font-size:var(--t-small);color:var(--on-navy-2);margin-bottom:var(--s-6)}
.crumbs li+li::before{content:"/";margin-right:var(--s-2);color:rgba(255,255,255,.35)}
.crumbs a{color:var(--on-navy-2)}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:#fff}

/* ==========================================================================
   the two paths
   ========================================================================== */
.paths{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.path{
  background:var(--surface);border:1px solid var(--ink-300);border-radius:var(--r-card);
  padding:var(--s-8);display:flex;flex-direction:column;gap:var(--s-4);
  transition:transform var(--standard),box-shadow var(--standard),border-color var(--standard);
}
.path:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--brand)}
.path h2{font-size:var(--t-h3)}
.path p{color:var(--ink-700)}
.path .btn{align-self:flex-start;margin-top:auto}
.path .more{font-size:var(--t-small);font-weight:600}
/* .path is a column flexbox, so a stretched pill read as a disabled input. */
.path .pill{align-self:flex-start}

/* ==========================================================================
   split section — copy one side, photograph the other
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split-copy>*+*{margin-top:var(--s-6)}
.split-copy .lead{max-width:46ch}
.split-copy .btn{margin-top:var(--s-2)}
.split-media{margin:0;border-radius:var(--r-panel);overflow:hidden;box-shadow:var(--shadow-2)}
.split-media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.sec-navy .split-media{border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow-dark)}
/* Alternate which side the photograph falls on, so the page does not become a
   column of identical rows. */
.split-flip .split-media{order:-1}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:var(--s-8)}
  .split-flip .split-media{order:0}
  .split-media img{aspect-ratio:16/10}
}

/* ==========================================================================
   cards
   ========================================================================== */
.cards{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fill,minmax(290px,1fr));list-style:none}
.card{
  position:relative;background:var(--surface);border:1px solid var(--ink-300);
  border-radius:var(--r-card);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);
  transition:transform var(--standard),box-shadow var(--standard),border-color var(--standard);
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--brand)}
.card h3{font-size:var(--t-h4);font-weight:600}
.card p{font-size:var(--t-small);color:var(--ink-700);line-height:1.55}
.card .from{margin-top:auto;padding-top:var(--s-3);font-size:var(--t-small);font-weight:600;color:var(--brand-deep)}
.card a{text-decoration:none;color:inherit}
.card a::after{content:"";position:absolute;inset:0}
.card .icon{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--brand-soft);
  background:var(--brand-soft);color:var(--brand-deep);display:grid;place-items:center;margin-bottom:var(--s-1);
}
.card .icon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.5}
.card .tag{
  position:absolute;top:var(--s-4);right:var(--s-4);
  font-size:var(--t-caption);letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:var(--caution);background:var(--caution-soft);padding:5px 11px;border-radius:var(--r-pill);
}

/* ==========================================================================
   numbered steps
   ========================================================================== */
.steps{list-style:none;counter-reset:step;display:grid;gap:var(--s-8)}
.steps.cols{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s-8) var(--s-6)}
.steps li{counter-increment:step;display:grid;gap:var(--s-3);align-content:start}
.steps li::before{
  content:counter(step);
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--ink-300);background:var(--surface);
  font-size:var(--t-h4);font-weight:600;color:var(--brand);
}
.step-body{display:grid;gap:6px;min-width:0}
.steps h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.2rem;letter-spacing:0;line-height:1.3}
.steps p{color:var(--ink-700);font-size:var(--t-small);line-height:1.6;max-width:40ch}
.sec-navy .steps li::before{border-color:rgba(255,255,255,.22);background:var(--navy-700);color:var(--brand-on-navy)}
.sec-navy .steps p{color:var(--on-navy-2)}
/* Two columns for long sequences, so a ten-step journey does not run down one
   edge of an otherwise empty page. */
.steps.two{grid-template-columns:repeat(auto-fit,minmax(430px,1fr));column-gap:var(--s-12)}
.ticks.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));column-gap:var(--s-12)}
@media (max-width:760px){
  .steps.two,.ticks.two{grid-template-columns:1fr}
}

/* Inline variant for service pages: number beside the text, not above it. */
.steps.rows{gap:var(--s-6)}
.steps.rows li{grid-template-columns:52px minmax(0,1fr);align-items:start;column-gap:var(--s-4);row-gap:6px}
.steps.rows p{max-width:72ch}

/* ==========================================================================
   fact lists
   ========================================================================== */
.facts{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.fact{background:var(--surface);border:1px solid var(--ink-300);border-radius:var(--r-card);padding:var(--s-8) var(--s-6)}
.fact h3{font-size:var(--t-h4);margin-bottom:var(--s-4)}
.ticks{list-style:none;display:grid;gap:var(--s-3)}
.ticks li{position:relative;padding-left:30px;font-size:var(--t-small);color:var(--ink-700);line-height:1.55}
.ticks li::before{position:absolute;left:0;top:0;font-weight:700}
.ticks.check li::before{content:"✓";color:var(--positive)}
.ticks.cross li::before{content:"×";color:var(--critical);font-size:1.2em;line-height:1.1}
.ticks.plain li::before{content:"—";color:var(--brand)}
.list-note{margin-top:var(--s-4);font-size:var(--t-caption);color:var(--ink-500);line-height:1.5}

/* ==========================================================================
   callouts
   ========================================================================== */
.callout{
  border:1px solid var(--brand-soft);border-left:3px solid var(--brand);
  background:var(--brand-soft);padding:var(--s-6);border-radius:var(--r-card);
}
.callout h3{font-size:var(--t-h4);margin-bottom:var(--s-2)}
.callout p{color:var(--ink-700);font-size:var(--t-small);line-height:1.6}
.callout.warn{border-color:#EFE0C2;border-left-color:var(--caution);background:var(--caution-soft)}
.callout.stop{border-color:#EED6D6;border-left-color:var(--critical);background:var(--critical-soft)}
.callout.ok{border-color:#D6EADF;border-left-color:var(--positive);background:var(--positive-soft)}

/* ==========================================================================
   tables
   ========================================================================== */
.table-scroll{overflow-x:auto;border:1px solid var(--ink-300);border-radius:var(--r-card);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--t-small)}
th,td{text-align:left;padding:var(--s-4) var(--s-6);border-bottom:1px solid var(--ink-100);vertical-align:top}
thead th{
  background:var(--navy-900);color:#fff;font-size:var(--t-caption);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;border-bottom:0;white-space:nowrap;
}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody tr:nth-child(even){background:var(--paper)}
td .price{font-weight:600;color:var(--brand-deep);white-space:nowrap}
.table-note{margin-top:var(--s-3);font-size:var(--t-caption);color:var(--ink-500)}

/* ==========================================================================
   faq
   ========================================================================== */
.faq{display:grid;gap:var(--s-3);max-width:860px}
.faq details{
  border:1px solid var(--ink-300);border-radius:var(--r-card);background:var(--surface);
  transition:border-color var(--swift);
}
.faq details:hover{border-color:var(--ink-500)}
.faq details[open]{border-color:var(--brand)}
.faq summary{
  cursor:pointer;padding:var(--s-6);font-size:var(--t-h4);font-weight:600;line-height:1.35;
  display:flex;justify-content:space-between;gap:var(--s-6);align-items:flex-start;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:11px;height:11px;margin-top:6px;
  border-right:1.5px solid var(--brand);border-bottom:1.5px solid var(--brand);
  transform:rotate(45deg);transition:transform var(--standard);
}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq .answer{padding:0 var(--s-6) var(--s-6);color:var(--ink-700);font-size:var(--t-small);line-height:1.65;max-width:72ch}

/* ==========================================================================
   status rail, gates, misc blocks
   ========================================================================== */
.rail{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none}
.rail li{
  background:var(--surface);border:1px solid var(--ink-300);border-radius:var(--r-pill);
  padding:9px 16px;font-size:var(--t-small);color:var(--ink-700);display:flex;align-items:center;gap:var(--s-2);
}
.rail li span{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}
.rail li:last-child span{background:var(--positive)}

.gates{display:grid;gap:var(--s-4)}
.gate{
  border:1px solid var(--ink-300);border-left:3px solid var(--caution);
  border-radius:var(--r-card);padding:var(--s-6);background:var(--surface);
}
.gate.cleared{border-left-color:var(--positive)}
.gate h3{font-size:var(--t-h4);display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.gate p{font-size:var(--t-small);color:var(--ink-700);margin-top:var(--s-2);line-height:1.6}
.badge{
  font-size:var(--t-caption);letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  padding:5px 11px;border-radius:var(--r-pill);background:var(--caution-soft);color:var(--caution);
}
.badge.ok{background:var(--positive-soft);color:var(--positive)}

.prose{max-width:70ch}
.prose p{color:var(--ink-700);line-height:1.7}
.prose p+p{margin-top:var(--s-4)}
.legal{
  font-size:var(--t-small);color:var(--ink-700);line-height:1.7;
  background:var(--surface);border:1px solid var(--ink-300);border-radius:var(--r-card);padding:var(--s-8);
}
.legal p+p{margin-top:var(--s-4)}

.meta-row{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-8);font-size:var(--t-small);color:var(--on-navy-2);margin-top:var(--s-6)}
.meta-row b{color:#fff;font-weight:600}
.pill{
  display:inline-flex;align-items:center;gap:var(--s-2);background:var(--brand-soft);color:var(--brand-deep);
  border-radius:var(--r-pill);padding:7px 15px;font-size:var(--t-caption);font-weight:600;letter-spacing:.04em;
}
.linkset{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;margin-top:var(--s-2)}
.linkset a{
  display:inline-block;border:1px solid var(--ink-300);border-radius:var(--r-pill);
  padding:10px 18px;font-size:var(--t-small);text-decoration:none;color:var(--ink-700);background:var(--surface);
  transition:border-color var(--swift),color var(--swift),background var(--swift);
}
.linkset a:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-soft)}
.stack>*+*{margin-top:var(--s-12)}
.stack-sm>*+*{margin-top:var(--s-4)}

/* ==========================================================================
   closing cta
   ========================================================================== */
.cta-band{background:var(--navy-800);color:#fff;position:relative;overflow:hidden}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 320px at 84% 50%,rgba(46,127,212,.26),transparent 70%);
}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{color:#fff;max-width:18ch}
.cta-inner{
  padding-block:var(--section-y);display:flex;flex-wrap:wrap;gap:var(--s-8);
  align-items:center;justify-content:space-between;
}
.cta-inner p{color:var(--on-navy-2);max-width:50ch;margin-top:var(--s-4)}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* ==========================================================================
   footer
   ========================================================================== */
.site-foot{background:var(--navy-900);color:var(--on-navy-2);padding-block:var(--s-16) var(--s-8);font-size:var(--t-small)}
.foot-grid{display:grid;gap:var(--s-8);grid-template-columns:minmax(240px,1.3fr) repeat(auto-fit,minmax(160px,1fr))}
.foot-grid h3{font-size:var(--t-caption);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-on-navy);margin-bottom:var(--s-4);font-weight:600}
.foot-grid ul{list-style:none;display:grid;gap:var(--s-3)}
.foot-grid a{color:var(--on-navy-2);text-decoration:none}
.foot-grid a:hover{color:#fff;text-decoration:underline}
/* driveme-navbar-dark.png is the negative of the supplied mark: the black ink
   becomes white, the gold stays gold. It sits straight on the footer — no
   plate, no filter. Regenerate it if the source logo changes (see README). */
.foot-brand img{height:36px;width:auto;max-width:none}
.foot-brand p{margin-top:var(--s-4);max-width:36ch;line-height:1.65}
/* Labelled contact lines: a small caps label over each value, so two email
   addresses read as two purposes rather than a repeated line. */
.foot-contact{margin:var(--s-6) 0 0;display:grid;gap:var(--s-4)}
.foot-contact dt,.contact-list dt{font-size:var(--t-caption);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.foot-contact dt{color:var(--on-navy-2);opacity:.8}
.foot-contact dd,.contact-list dd{margin:2px 0 0}
.foot-contact a{color:#fff;font-weight:600;overflow-wrap:anywhere}
.foot-area{margin-top:var(--s-6)}
.foot-bottom{
  margin-top:var(--s-12);padding-top:var(--s-6);border-top:1px solid var(--navy-line);
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-8);justify-content:space-between;
  font-size:var(--t-caption);color:#8296AC;
}
.foot-note{max-width:76ch;color:#8296AC;line-height:1.65;font-size:var(--t-caption)}
@media (max-width:700px){.foot-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
@media (max-width:430px){.foot-grid{grid-template-columns:1fr}}

/* ==========================================================================
   floating request button — appears once the hero CTA is out of view
   ========================================================================== */
.float-cta{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:90;
  box-shadow:var(--shadow-2);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--standard),transform var(--standard),visibility var(--standard);
}
.float-cta.on{opacity:1;visibility:visible;transform:none}
@media (max-width:640px){
  /* Full desktop pill padding on a small screen reads as an oversized banner
     sitting on top of the content it is meant to float politely beside. */
  .float-cta{min-height:44px;padding:11px 20px;font-size:var(--t-caption);gap:6px}
  .float-cta .arrow{display:none}
}

/* ==========================================================================
   forms — request flow
   ========================================================================== */
.form-shell{display:grid;gap:var(--s-8);grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);align-items:start}
/* Gated service: keep the path choice and its notice, drop the request fields,
   the service picker and the whole indicative price, and turn the side panel
   into contact details. A class, not `hidden` on each node, so booking.js's
   per-service visibility survives switching back. */
#gate-contact{display:none}
.form-shell.is-gated .fieldset:not(:first-of-type),
.form-shell.is-gated .form-required-note,
.form-shell.is-gated #service-field,
.form-shell.is-gated #quote-title,
.form-shell.is-gated #quote-amount,
.form-shell.is-gated #quote-lines,
.form-shell.is-gated #quote-note,
.form-shell.is-gated #quote-call,
.form-shell.is-gated #submit-btn,
.form-shell.is-gated #submit-hint{display:none}
.form-shell.is-gated #gate-contact{display:block}
.req{color:var(--critical);margin-left:3px;font-weight:700}
.form-required-note{font-size:var(--t-small);color:var(--ink-500);margin-bottom:var(--s-4)}
.field.has-error>label{color:var(--critical)}
/* The wrapper class carries the red as well as aria-invalid: same result,
   but it survives browsers that are lazy about attribute-selector repaints. */
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:var(--critical);box-shadow:0 0 0 3px rgba(140,47,47,.12);
}

#submit-hint{margin-top:var(--s-3)}
#submit-hint strong{display:block;color:var(--ink-700);font-weight:600}
#submit-hint ul{margin-top:var(--s-2);padding-left:18px;list-style:disc}
#submit-hint li{margin-top:2px}
#submit-hint a{color:var(--brand)}
#submit-btn[disabled]{opacity:.5;cursor:not-allowed}

/* The notice replaces the form, so it needs the air a fieldset would have given it. */
#gate-warning:not([hidden]){margin-top:var(--s-6)}
.gate-contact-line{margin-top:var(--s-2);font-weight:600}
.gate-contact-line a{color:var(--brand)}
@media (max-width:940px){.form-shell{grid-template-columns:1fr}}
.fieldset{border:1px solid var(--ink-300);border-radius:var(--r-card);padding:var(--s-8) var(--s-6);background:var(--surface);margin-bottom:var(--s-6)}
.fieldset>legend{font-size:var(--t-h4);font-weight:600;padding-inline:var(--s-2);margin-left:-8px}
.fieldset .hint{font-size:var(--t-small);color:var(--ink-500);margin-top:var(--s-2);line-height:1.55}
.grid-2{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.field{display:grid;gap:6px;margin-top:var(--s-4)}
.field>label{font-weight:600;font-size:var(--t-small)}
.field .help{font-size:var(--t-caption);color:var(--ink-500);line-height:1.5}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],input[type=number],select,textarea{
  width:100%;min-height:52px;padding:14px 16px;border:1px solid var(--ink-300);border-radius:var(--r-input);
  font:inherit;font-size:var(--t-body);color:var(--ink-900);background:var(--surface);
  transition:border-color var(--swift),box-shadow var(--swift);
}
textarea{min-height:104px;resize:vertical;line-height:1.6}
input::placeholder,textarea::placeholder{color:var(--ink-500)}
input:hover,select:hover,textarea:hover{border-color:var(--ink-500)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,99,189,.15)}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--critical);box-shadow:0 0 0 3px rgba(140,47,47,.12)}
.err{color:var(--critical);font-size:var(--t-caption);font-weight:600}
.choice-grid{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:var(--s-4)}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice span{
  display:flex;flex-direction:column;gap:4px;height:100%;cursor:pointer;
  border:1px solid var(--ink-300);border-radius:var(--r-card);padding:var(--s-4);
  font-size:var(--t-small);font-weight:600;background:var(--surface);
  transition:border-color var(--swift),background var(--swift),box-shadow var(--swift);
}
.choice span:hover{border-color:var(--ink-500)}
.choice small{font-weight:400;color:var(--ink-500);font-size:var(--t-caption);line-height:1.5}
.choice input:checked+span{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.choice input:focus-visible+span{outline:2px solid var(--brand);outline-offset:3px}
.checks{display:grid;gap:var(--s-3);margin-top:var(--s-4)}
.form-check{display:grid;grid-template-columns:22px 1fr;gap:var(--s-3);align-items:start;font-size:var(--t-small);color:var(--ink-700);line-height:1.55;cursor:pointer}
.form-check input{width:20px;height:20px;margin-top:2px;accent-color:var(--brand);cursor:pointer}

.quote{
  position:sticky;top:104px;border:1px solid var(--ink-300);border-radius:var(--r-panel);
  background:var(--surface);padding:var(--s-8) var(--s-6);box-shadow:var(--shadow-2);
}
.quote h2{font-size:var(--t-h4)}
.quote .amount{font-size:2.4rem;font-weight:600;letter-spacing:-.03em;color:var(--brand-deep);margin-top:var(--s-3);line-height:1.05}
.quote .amount small{display:block;font-size:var(--t-caption);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);margin-bottom:4px}
.quote-lines{list-style:none;display:grid;gap:var(--s-3);margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--ink-100);font-size:var(--t-small)}
.quote-lines li{display:flex;justify-content:space-between;gap:var(--s-4);color:var(--ink-700)}
.quote-lines b{color:var(--ink-900);white-space:nowrap;font-weight:600}
.quote .note{margin-top:var(--s-6);font-size:var(--t-caption);color:var(--ink-500);line-height:1.6}
.quote .btn{width:100%;margin-top:var(--s-6)}
.summary-box{border:1px solid var(--critical);background:var(--critical-soft);border-radius:var(--r-card);padding:var(--s-6);margin-bottom:var(--s-6)}
.summary-box h2{font-size:var(--t-h4);color:var(--critical)}
.summary-box ul{margin-top:var(--s-2);padding-left:var(--s-6);font-size:var(--t-small)}
.summary-box a{color:var(--critical);font-weight:600}
.done{border:1px solid var(--positive);background:var(--positive-soft);border-radius:var(--r-panel);padding:var(--s-12) var(--s-8);max-width:720px}
.done h2{color:var(--positive);font-size:var(--t-h2)}
.done p{margin-top:var(--s-4);color:var(--ink-700);max-width:56ch}
.done .ref{font-size:2rem;font-weight:600;letter-spacing:.06em;color:var(--ink-900);margin-top:var(--s-6)}

/* ==========================================================================
   motion — entrance reveal
   trigger: element enters viewport · property: opacity + translateY
   from/to: 0/14px → 1/0 · 400ms · entrance curve
   purpose: establishes reading order on first paint, once per element
   ========================================================================== */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity var(--entrance),transform var(--entrance)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .card:hover,.path:hover{transform:none}
}

@media print{
  .site-head,.topbar,.site-foot,.cta-band,.btn,.float-cta,.quote-strip{display:none}
  body{font-size:11pt;background:#fff}
}

/* ==========================================================================
   Driver First (13 Sep 2026): hero trust line, offer prices, the two-stage
   request form and the discreet passenger-interest link.
   ========================================================================== */
.hero-trust{margin-top:var(--s-4);font-size:var(--t-small);font-weight:600;letter-spacing:.01em;color:#E9F2FF}
.path .path-price{font-weight:600;color:var(--brand-deep)}

.fieldset .field-label{margin-top:var(--s-6);font-weight:600;font-size:var(--t-small);color:var(--ink-700)}
.fieldset .field-label+.choice-grid{margin-top:var(--s-3)}
.form-passenger{margin-top:var(--s-4);font-size:var(--t-small);color:var(--ink-500)}
.form-passenger a{color:var(--brand);font-weight:600}
#business-note{margin-bottom:var(--s-4)}
.auth-field{margin-top:var(--s-6)}

.more-details{border:1px solid var(--ink-300);border-radius:var(--r-card);background:var(--surface);margin-bottom:var(--s-6)}
.more-details>summary{cursor:pointer;padding:var(--s-6);font-size:var(--t-h4);font-weight:600}
.more-details>summary small{display:block;margin-top:2px;font-size:var(--t-small);font-weight:400;color:var(--ink-500)}
.more-details[open]>summary{border-bottom:1px solid var(--ink-300)}
.more-details>summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-card)}
.more-details-body{padding:var(--s-4) var(--s-6) var(--s-6)}

.form-shell.is-gated .more-details,
.form-shell.is-gated .form-passenger{display:none}

.foot-grid .foot-quiet a{font-size:var(--t-caption);color:var(--on-navy-2);opacity:.85}

.path h3{font-size:var(--t-h3)}
.card .typical{display:block;margin-top:2px;font-size:var(--t-small);color:var(--ink-500)}

.contact-list{margin:var(--s-4) 0 0;display:grid;gap:var(--s-4)}
.contact-list dt{color:var(--ink-500)}
.contact-list a{color:var(--brand);font-weight:600;overflow-wrap:anywhere}
.contact-cta{margin-top:var(--s-6);font-weight:600}
.contact-cta a{color:var(--brand)}

/* ==========================================================================
   service mosaic under the homepage hero (after cleava.fi's service grid)
   ========================================================================== */
.svc-mosaic-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-6) var(--s-12);align-items:end;margin-bottom:var(--s-8)}
.svc-mosaic-head p{color:var(--on-navy-2);font-size:var(--t-small);line-height:1.65;max-width:52ch}
.svc-mosaic-link{margin-top:var(--s-3)}
.svc-mosaic-link a{color:var(--brand-on-navy);font-weight:600;text-decoration:none}
.svc-mosaic-link a:hover{color:#fff}

.svc-mosaic{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:230px;gap:var(--s-4)}
.svc-tile-lead{grid-column:span 2;grid-row:span 2}
.svc-tile a{
  position:relative;isolation:isolate;display:flex;align-items:flex-end;height:100%;overflow:hidden;
  border-radius:var(--r-card);border:1px solid rgba(255,255,255,.10);background:var(--navy-800);
  color:#fff;text-decoration:none;transition:border-color var(--standard);
}
.svc-tile img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform 600ms cubic-bezier(.2,0,0,1)}
/* Clear at the top so the photo reads, dark at the foot where the text sits. */
.svc-tile a::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,21,36,.08) 0%,rgba(8,21,36,.42) 36%,rgba(8,21,36,.86) 70%,rgba(8,21,36,.94) 100%)}
.svc-tile-body{display:grid;gap:6px;text-shadow:0 1px 3px rgba(0,0,0,.45);padding:var(--s-6) calc(var(--s-6) + 44px) var(--s-6) var(--s-6);max-width:46ch}
.svc-tile-title{font-size:var(--t-h4);font-weight:600;line-height:1.25;color:#fff;letter-spacing:0}
.svc-tile-lead .svc-tile-title{font-size:var(--t-h3)}
.svc-tile-text{font-size:var(--t-caption);line-height:1.5;color:#D7E2EE}
.svc-tile-lead .svc-tile-text{font-size:var(--t-small)}
.svc-tile-price{
  justify-self:start;text-shadow:none;margin-top:4px;padding:4px 12px;border:1px solid rgba(90,162,240,.55);border-radius:var(--r-pill);
  background:rgba(8,21,36,.40);font-size:var(--t-caption);font-weight:600;color:#9CC8FF;white-space:nowrap;
}
.svc-tile-arrow{
  position:absolute;right:var(--s-6);bottom:var(--s-6);display:grid;place-items:center;width:36px;height:36px;
  border:1px solid rgba(255,255,255,.30);border-radius:50%;font-size:15px;color:#fff;
  transition:background var(--swift),border-color var(--swift),transform var(--standard);
}
.svc-tile a:hover{border-color:rgba(90,162,240,.65)}
.svc-tile a:hover img{transform:scale(1.04)}
.svc-tile a:hover .svc-tile-arrow{background:var(--brand);border-color:var(--brand);transform:translateX(2px)}
.svc-tile a:focus-visible{outline:2px solid var(--brand-on-navy);outline-offset:3px}

.svc-mosaic-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-6);margin-top:var(--s-8);padding-top:var(--s-6);
  border-top:1px solid var(--navy-line);font-size:var(--t-small);color:var(--on-navy-2);
}
.svc-mosaic-label{font-size:var(--t-caption);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-on-navy)}
.svc-mosaic-foot a{margin-left:auto;color:#fff;font-weight:600;text-decoration:none}
.svc-mosaic-foot a:hover{color:var(--brand-on-navy)}

@media (max-width:940px){
  .svc-mosaic-head{grid-template-columns:1fr;align-items:start}
  .svc-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:220px}
  .svc-tile-lead{grid-column:1 / -1}
}
@media (max-width:560px){
  .svc-mosaic{grid-template-columns:1fr;grid-auto-rows:minmax(200px,auto);gap:var(--s-3)}
  .svc-tile-lead{grid-row:auto}
  .svc-tile-lead a{min-height:280px}
  .svc-tile-body{padding:20px 64px 20px 20px}
  .svc-tile-arrow{right:20px;bottom:20px}
  .svc-mosaic-foot a{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.svc-tile img{transition:none}}