/* ===========================================================================
   Car Loan Connect - full site mockup, dark direction
   Shared stylesheet for index / about / contact.
   Radius lock: buttons pill, cards 20px, panels 24px, tiles 14px.
   Colour lock: #4d9fff for accent text on dark, #0067cf for fills under white
   text (5.46:1). The brand #007DFF is never used on text, it fails AA.
   Nothing is hidden in CSS: all entrances are gsap.from(), so a blocked CDN
   renders the site complete and static rather than blank.
   =========================================================================== */
:root{
  --bg:#0d1117; --bg-2:#141b23; --bg-3:#1b242e; --line:#26313d;
  --ink:#f2f5f8; --ink-2:#a9b6c4; --ink-3:#7d8b9a;
  --blue:#4d9fff; --blue-fill:#0067cf; --blue-fill-2:#1a84f0;
  --warm:#ffb347;
  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --s8:64px; --s9:96px; --s10:128px;
  --e-out:cubic-bezier(0.23,1,0.32,1);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:transparent;color:var(--ink);
  font:300 17.5px/1.62 "Outfit","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--s5)}
img{max-width:100%;display:block}

.flag{position:fixed;top:0;left:0;z-index:90;background:var(--warm);color:#3d2600;
  font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;padding:7px 11px;
  border-bottom-right-radius:8px}

/* fixed photo layer, behind everything, three frames crossfading */
.field{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.field img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.82) contrast(1.08) saturate(.88)}
/* The video sits above the poster still and below the scrim. If it never
   plays, the still is already there doing the job. */
.field video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;filter:brightness(.66) contrast(1.1) saturate(.8)}
@media (prefers-reduced-motion:reduce){ .field video{display:none} }
.field::after{content:"";position:absolute;inset:0;z-index:2;background:
  /* Lightened so the footage reads through and the scroll actually shows.
     Kept heaviest at the bottom, where body copy sits over the busiest frames. */
  linear-gradient(to bottom, rgba(13,17,23,.40) 0%, rgba(13,17,23,.55) 46%, rgba(13,17,23,.74) 100%),
  linear-gradient(to right, rgba(13,17,23,.58) 0%, rgba(13,17,23,.28) 48%, rgba(13,17,23,.08) 100%)}

/* Fixed banner. Sits above the fixed photo layer and stays put while the page
   moves under it. It gains a background only once you have scrolled, so over
   the hero it still reads as an overlay rather than a bar. */
header{position:fixed;top:0;left:0;right:0;z-index:40;
  transition:background-color 220ms var(--e-out),border-color 220ms var(--e-out),
             backdrop-filter 220ms var(--e-out)}
header{border-bottom:1px solid transparent}
header.stuck{background:rgba(13,17,23,.82);backdrop-filter:blur(14px) saturate(150%);
  border-bottom-color:var(--line)}
main,footer,.dock{position:relative;z-index:1}
.bar{height:80px;display:flex;align-items:center;gap:var(--s6)}
.brand{display:block}
/* No brightness(0) invert(1) here. That forced the lockup to pure white no matter
   what the file contained, which silently defeated every recolour of it. The PNG
   now carries its own colour: the car and the wordmark both #067FF1. */
.bar img{height:30px;width:auto}
nav{margin-left:auto;display:flex;align-items:center;gap:var(--s5)}
nav a{color:#cfdae6;text-decoration:none;font-size:15px;font-weight:400;
  transition:color 150ms var(--e-out)}
nav a:hover,nav a[aria-current]{color:#fff}
.tel{font-family:"IBM Plex Mono",monospace;font-size:14px;color:#fff}
.dealer-login{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.34);
  border-radius:999px;padding:8px 14px;font-size:14px;font-weight:400;color:#fff !important;
  transition:background-color 150ms var(--e-out),border-color 150ms var(--e-out)}
.dealer-login:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* Phone menu. A <details> element, so it opens and closes with zero JS; the only
   script involvement is closing it after a tap, which is a nicety not a dependency.
   Hidden on desktop, where the inline links exist. */
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid rgba(255,255,255,.34);border-radius:999px;color:#fff}
/* The three lines are drawn here rather than as markup: one bar plus two box-shadow
   copies. CSS cannot be re-serialised by the build or half-updated by a cache the way
   an inline SVG can, which is how the icon once reached a phone as something else. */
.mnav summary{padding:0}
.mnav summary::after{content:none}
.mnav summary::before{content:"";position:static;width:18px;height:2px;border-radius:2px;background:#fff;
  box-shadow:0 6px 0 #fff, 0 12px 0 #fff;transform:translateY(-6px)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::marker{content:none}
.mnav[open] summary{background:rgba(255,255,255,.1)}
/* The button sits at the far LEFT of the bar, so the panel drops from the left. */
.mnav-panel{position:absolute;left:0;top:calc(100% + 10px);min-width:210px;z-index:80;
  background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:8px;
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
.mnav-panel a{display:block;padding:13px 16px;border-radius:10px;color:var(--ink);
  text-decoration:none;font-size:15.5px}
.mnav-panel a:active{background:var(--bg-3)}
@keyframes mnavDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mnav[open] .mnav-panel{animation:mnavDrop .18s var(--e-out)}

/* The dock never covers the form it points at. */
.dock.dock-hidden{display:none !important}
/* Anchor jumps to the form land clear of the fixed header. */
.embed{scroll-margin-top:76px}
/* Grow-only floor so the self-resizing iframe cannot collapse and shift the page. */
#clc-apply{min-height:480px;color-scheme:light}

/* ---- Replica of the live /apply iframe ----------------------------------
   The real site embeds apply.carloanconnect.ca in an iframe. This is a static
   visual stand-in built to the real form's spec so the page can be judged with
   the form in place. It is NOT the live form and nothing here submits.

   Rebuilt dark 2026-08-20 alongside the form itself: the previous white-card
   replica is no longer what the iframe renders. Tokens mirror LeadForm.tsx -
   card #141b23, tiles #1b242e, hairline #26313d, accent #4d9fff - and the
   vehicle art is the same nine files the form serves.

   Deliberately absent: any step counter or progress bar. Showing the length of
   a 16-question form is a deterrent, and the real form shows neither.
   ------------------------------------------------------------------------- */
.embed{padding:var(--s9) 0}
.embed-head{max-width:52ch;margin:0 auto var(--s6);text-align:center}
.embed-head h2{margin:0 auto var(--s3);max-width:22ch}
.embed-head p{margin:0;color:var(--ink-2);font-weight:300}
.frame{max-width:532px;margin:0 auto;background:#141b23;border:1px solid #26313d;
  border-radius:20px;overflow:hidden;box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
  font-family:Roboto,"Segoe UI",Arial,sans-serif;position:relative}
.frame-tag{position:absolute;top:10px;right:10px;z-index:3;background:var(--warm);color:#3d2600;
  font:500 9.5px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;padding:5px 7px;border-radius:3px}
.frame-head{padding:24px 20px 4px;text-align:center}
.frame-logo{height:34px;width:auto;margin:0 auto}
.frame-tag-line{margin:16px auto 0;max-width:24ch;color:#f2f5f8;
  font:700 17px/1.35 Roboto,sans-serif}
.frame-body{padding:16px 20px 24px}
.frame-body .q{margin:0 0 14px;color:#f2f5f8;font:600 15px/1.35 Roboto,sans-serif}
.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
/* The vehicles are white cutouts and three of them are largely black, so each
   tile carries a pool of light behind the subject. Without it the motorcycle's
   tyres and the ATV's plastics sink into the tile. */
.vcard{border:1px solid #26313d;border-radius:14px;cursor:pointer;padding:6px 6px 10px;
  background:radial-gradient(ellipse 68% 52% at 50% 60%, rgba(255,255,255,.15), rgba(255,255,255,0) 70%), #1b242e;
  font:600 12.5px/1.2 Roboto,sans-serif;color:#dbe3ec;text-align:center;
  transition:border-color 150ms var(--e-out),color 150ms var(--e-out)}
.vcard img{width:100%;aspect-ratio:16/9;object-fit:contain;display:block}
.vcard span{display:block;margin-top:2px}
.vcard:hover{border-color:#3d5063}
.vcard[aria-pressed="true"]{border-color:#4d9fff;box-shadow:0 0 0 1px #4d9fff;color:#4d9fff}
.embed-note{max-width:532px;margin:var(--s4) auto 0;font:400 12.5px/1.55 "IBM Plex Mono",monospace;
  color:var(--ink-3);text-align:center}
@media (max-width:620px){ .frame{max-width:none} }

.cta{display:inline-flex;align-items:center;gap:var(--s3);background:var(--blue-fill);
  color:#fff;border:0;border-radius:999px;padding:15px 15px 15px 28px;cursor:pointer;
  text-decoration:none;font:500 16.5px/1 "Outfit",sans-serif;will-change:transform;
  transition:background-color 160ms var(--e-out)}
.cta .knob{width:30px;height:30px;border-radius:999px;background:rgba(255,255,255,.2);
  display:grid;place-items:center;transition:transform 200ms var(--e-out)}
.cta:active{transform:scale(.98)}
.cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cta.sm{padding:10px 10px 10px 18px;font-size:14.5px}
.cta.sm .knob{width:24px;height:24px}
@media (hover:hover) and (pointer:fine){
  .cta:hover{background:var(--blue-fill-2)}
  .cta:hover .knob{transform:translateX(3px)}
}

.hero{position:relative;z-index:1;min-height:min(84vh,760px);display:flex;
  align-items:center;padding:var(--s10) 0 var(--s8)}
/* Copy left, form right. The old single narrow column left the entire right
   half of a wide screen empty and wrapped the headline to seven lines. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 532px;gap:var(--s8);
  align-items:center;width:100%}
/* Single centred column. The three steps used to sit in the right column and made the
   hero very tall; they now live beside the map lower down, so the hero can just be the
   proposition and the call to action. */
.hero-grid.one-col{grid-template-columns:minmax(0,760px);justify-content:center;text-align:center}
.hero-grid.one-col .hero-copy{margin:0 auto}
.hero-grid.one-col .hero-actions{justify-content:center}
.hero-grid.one-col .hero-note{margin-left:auto;margin-right:auto}
.hero-grid.one-col h1,.hero-grid.one-col .lede{max-width:none}
.hero-form{position:relative}
.hero.short{min-height:auto;padding:calc(var(--s10) + 20px) 0 var(--s7)}
.hero .wrap{position:relative;z-index:3;width:100%}
.hero-copy{max-width:min(100%,20ch)}
.hero-grid .hero-copy{max-width:none}
.hero.short .hero-copy{max-width:46ch}
.hero.short h1{font-size:clamp(34px,3.6vw,48px);max-width:22ch}
.eyebrow,.temp{display:inline-flex;margin:0 0 var(--s5);
  font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;color:var(--warm)}
h1{margin:0 0 var(--s5);font:600 clamp(38px,4.6vw,62px)/1.04 "Outfit",sans-serif;
  letter-spacing:-.035em;text-wrap:balance;max-width:16ch}
/* Brand name in the brand blue. #007DFF is safe here because at display size this
   counts as large text, needing 3:1, and it measures 3.65:1. It would fail on body
   copy, which is why --blue-ink exists for anything smaller. */
h1 b{font-weight:600;color:#007dff}
.lede{margin:0 0 var(--s6);font-size:19px;color:var(--ink-2);max-width:46ch;font-weight:300}
.hero-actions{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.tiny{font-size:14.5px;color:var(--ink-3)}
/* The hero note is a short paragraph, not the one-line reassurance that used to sit
   beside the button, so it gets its own line under the CTA row. Capped in ch rather
   than px so the measure stays readable rather than tracking the column width. */
.hero-note{margin:var(--s4) 0 0;max-width:60ch;line-height:1.55}

.picker{margin-top:calc(var(--s7) * -1);position:relative;z-index:5}
.picker-card{background:rgba(20,27,35,.88);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:24px;padding:var(--s6);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.9)}
.mono-head{margin:0 0 var(--s5);font:500 15px/1 "IBM Plex Mono",monospace;
  letter-spacing:.1em;color:var(--ink-3)}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s3)}
.tile{background:var(--bg-3);border:1px solid var(--line);border-radius:14px;
  padding:var(--s4) var(--s3);cursor:pointer;color:var(--ink);text-align:center;
  font:500 15px/1.2 "Outfit",sans-serif;
  transition:background-color 170ms var(--e-out),border-color 170ms var(--e-out)}
.tile svg{display:block;width:40px;height:24px;margin:0 auto var(--s2);color:var(--ink-3);
  transition:color 170ms var(--e-out)}
.tile:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .tile:hover{background:#22303d;border-color:#35485c}
  .tile:hover svg{color:var(--ink-2)}
}
.tile[aria-pressed="true"]{background:var(--blue-fill);border-color:var(--blue-fill)}
.tile[aria-pressed="true"] svg{color:#fff}
.picker-note{margin:var(--s5) 0 0;font-size:14.5px;color:var(--ink-3)}

.facts{padding:var(--s9) 0 var(--s8)}
/* The left cell spans the full height and is taller than the two on the right.
   With two auto rows the browser split its excess between them, so each right cell
   sat at the top of an over-tall row and left ~100px of dead space underneath.
   Two content-sized rows plus a 1fr spacer row puts all the slack at the bottom,
   where it belongs, and the two cells sit adjacent. */
/* Stretch, NOT start. The two cards in a row have different content lengths, and
   with align-items:start the shorter one ended early and left a ragged gap before
   the next row. Equal-height cards put that slack inside the card, where it reads
   as padding instead of a hole. */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:stretch}
.cell{background:rgba(20,27,35,.88);border:1px solid var(--line);border-radius:20px;padding:var(--s6)}
.cell:first-child{display:flex;flex-direction:column;justify-content:flex-start}
.cell h3{margin:0 0 var(--s3);font:500 22px/1.25 "Outfit",sans-serif;letter-spacing:-.015em}
.cell p{margin:0;color:var(--ink-2);font-size:17.5px;line-height:1.6;font-weight:300}
.cell .big{font:600 clamp(38px,5vw,58px)/1 "Outfit",sans-serif;letter-spacing:-.04em;
  margin:0 0 var(--s4);color:var(--blue)}
.cell .map{margin:var(--s6) auto 0;max-height:300px;width:auto;opacity:.92}

/* horizontal pinned pan */
.mech{position:relative;overflow:hidden}
.mech-track{display:flex;height:100dvh;align-items:center;width:max-content}
.mech-panel{width:100vw;flex:none;display:flex;align-items:center}
.mech-inner{max-width:1240px;margin:0 auto;padding:0 var(--s5);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:center;width:100vw}
.mech-panel .idx{font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;
  color:var(--blue);margin:0 0 var(--s4)}
.mech-panel h3{margin:0 0 var(--s4);font:500 clamp(26px,3.4vw,40px)/1.16 "Outfit",sans-serif;
  letter-spacing:-.028em;max-width:16ch}
.mech-panel p{margin:0;color:var(--ink-2);font-weight:300;max-width:46ch}
.mech-panel .art{background:rgba(20,27,35,.88);border:1px solid var(--line);
  border-radius:20px;padding:var(--s6);min-height:200px;display:flex;align-items:center}
.mech-panel .stack{width:100%;display:grid;gap:var(--s2)}
.mech-panel .line{height:38px;border-radius:9px;background:var(--bg-3);display:flex;
  align-items:center;padding:0 var(--s4);font:400 13px/1 "IBM Plex Mono",monospace;color:var(--ink-3)}
.mech-panel .line.hit{background:rgba(0,103,207,.22);border:1px solid var(--blue-fill);color:var(--blue)}
.mech-prog{position:absolute;left:0;bottom:0;height:2px;background:var(--blue-fill);width:0;z-index:4}

.say{padding:var(--s9) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.say p{margin:0;font:300 clamp(26px,3.6vw,42px)/1.24 "Outfit",sans-serif;
  letter-spacing:-.028em;max-width:24ch;color:var(--ink)}
.say p b{font-weight:600}

.need{padding:var(--s9) 0}
.need-in{max-width:820px}
.need .sub{margin:0 0 var(--s7);color:var(--ink-2);font-weight:300;max-width:56ch}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.ticks li{padding:var(--s5) 0 var(--s5) var(--s7);border-bottom:1px solid var(--line);
  position:relative;font-size:17px;color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:var(--s3);top:50%;width:9px;height:9px;
  border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:translateY(-70%) rotate(-45deg)}

h2{margin:0 0 var(--s6);font:600 clamp(26px,3.2vw,38px)/1.14 "Outfit",sans-serif;
  letter-spacing:-.03em;max-width:20ch;text-wrap:balance}

.faq{padding:var(--s9) 0}
.faq-in{max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:var(--s5) 44px var(--s5) 0;position:relative;
  font:400 18px/1.45 "Outfit",sans-serif;transition:color 150ms var(--e-out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue)}
.faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.faq summary::after{content:"";position:absolute;right:10px;top:50%;width:11px;height:2px;
  background:var(--ink-3);transform:translateY(-50%)}
.faq summary::before{content:"";position:absolute;right:15px;top:50%;width:2px;height:11px;
  background:var(--ink-3);transform:translateY(-50%);
  transition:transform 220ms var(--e-out),opacity 220ms var(--e-out)}
.faq details[open] summary::before{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq details p{margin:0 0 var(--s5);color:var(--ink-2);max-width:66ch;font-weight:300}

/* about page */
.team{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);padding-bottom:var(--s9)}
.person{background:rgba(20,27,35,.9);border:1px solid var(--line);border-radius:20px;
  padding:var(--s7)}
.person .role{font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;
  color:var(--blue);margin:0 0 var(--s4)}
.person h3{margin:0 0 var(--s4);font:600 26px/1.2 "Outfit",sans-serif;letter-spacing:-.02em}
.person p{margin:0 0 var(--s4);color:var(--ink-2);font-weight:300;font-size:16.5px}
.person p:last-child{margin-bottom:0}
.prose{max-width:64ch;padding-bottom:var(--s8)}
.prose p{color:var(--ink-2);font-weight:300;margin:0 0 var(--s5)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:500}
.placeholder{border-left:2px solid var(--warm);padding:var(--s3) 0 var(--s3) var(--s5);
  margin:var(--s6) 0 0;font:400 14px/1.55 "IBM Plex Mono",monospace;color:var(--warm);
  max-width:60ch}

/* contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);padding-bottom:var(--s9);align-items:start}
.ccard{background:rgba(20,27,35,.9);border:1px solid var(--line);border-radius:20px;padding:var(--s7)}
.ccard h3{margin:0 0 var(--s4);font:500 20px/1.25 "Outfit",sans-serif}
.ccard p{margin:0 0 var(--s3);color:var(--ink-2);font-weight:300}
.ccard a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(77,159,255,.35)}
.ccard a:hover{border-bottom-color:var(--blue)}
/* Removing the Phone card left three cards in a two-column grid, so one sat alone
   on the second row. The long card spans the full width instead, which gives a
   complete top row and no orphan. It collapses to a single column below 900px,
   where every card is full width anyway. */
.ccard.wide{grid-column:1/-1}
.ccard-map{margin:var(--s5) auto 0;max-height:200px;width:auto;opacity:.92}
.ccard-shot{margin:var(--s5) 0 0;width:100%;border-radius:14px;display:block}

/* About: image beside the vision/mission copy. Same 20px card radius as everywhere
   else, and it stacks below 900px like the rest of the two-column blocks. */
.purpose{padding:0 0 var(--s8)}
.purpose-grid{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:var(--s7);align-items:start}
.purpose-shot{width:100%;border-radius:20px;border:1px solid var(--line);display:block}
.purpose h2{margin:0 0 var(--s4);font-size:clamp(24px,2.6vw,32px)}
.purpose h3{margin:var(--s6) 0 var(--s3);font:500 19px/1.3 "Outfit",sans-serif}
.purpose p{margin:0;color:var(--ink-2);font-weight:300;max-width:60ch}

.close{padding:var(--s8) 0 var(--s9)}
.close h2{margin:0 0 var(--s5);font-size:clamp(30px,4vw,46px);max-width:16ch}

footer{border-top:1px solid var(--line);padding:var(--s7) 0 var(--s6);background:rgba(20,27,35,.9)}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s6);margin-bottom:var(--s7)}
.foot h4{margin:0 0 var(--s3);font:500 11px/1 "IBM Plex Mono",monospace;
  letter-spacing:.14em;color:var(--ink-3)}
.foot p{margin:0 0 6px;font-size:15px;color:var(--ink-2);font-weight:300}
.foot a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.foot a:hover{border-bottom-color:var(--ink-3)}
.legal{border-top:1px solid var(--line);padding-top:var(--s5);font-size:13px;
  line-height:1.6;color:var(--ink-3)}

.dock{display:none}
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s7)}
  .hero{align-items:flex-end}
  .hero-form{max-width:532px}
}
@media (max-width:1000px){
  .tiles{grid-template-columns:repeat(3,1fr)}
  .bento,.team,.contact-grid,.purpose-grid{grid-template-columns:1fr}
  .cell:first-child{grid-row:auto}
  .bento{grid-template-rows:auto}
  .mech-track{display:block;height:auto;width:auto}
  .mech-panel{width:auto;display:block;padding:var(--s7) 0;border-top:1px solid var(--line)}
  .mech-inner{grid-template-columns:1fr;gap:var(--s5);width:auto;padding:0 var(--s4);max-width:none}
  .mech-prog{display:none}
  .foot{grid-template-columns:1fr 1fr}
  .hero{min-height:auto;padding:var(--s10) 0 var(--s7)}
  .facts,.faq,.close,.say,.need{padding:var(--s7) 0}
  .picker-card,.person,.ccard{padding:var(--s5)}
  nav .hide-sm{display:none}
  body{padding-bottom:78px}
  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(20,27,35,.96);border-top:1px solid var(--line);
    padding:12px var(--s4) calc(12px + env(safe-area-inset-bottom));gap:var(--s3);align-items:center}
  .dock small{flex:1;font-size:12.5px;line-height:1.35;color:var(--ink-3)}
}
@media (max-width:620px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .wrap{padding:0 var(--s4)}
  .foot{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }





/* ---- Scroll-scrubbed drive-in. The clip does not autoplay or loop; its
   currentTime is driven by scroll position, so the vehicle arrives exactly as
   fast as the visitor scrolls. Under reduced motion it shows a single frame. */
/* The clip is scrubbed across (section height - sticky stage height) of scroll, so
   this number IS the playback speed. At 200vh the 4s clip ran over a single
   viewport of scroll. 320vh was still too fast. 400vh keeps the drive comfortably slower than the
   1,850px that read as too fast, while cutting the total scroll to get past it, since a
   sticky stage showing a static frame reads as the page having frozen. */
.drivein{position:relative;padding:0;border-top:1px solid var(--line);min-height:400vh}
/* The stage is sticky and full-height; the copy sits on top of the footage
   rather than above it, with its own scrim so the type stays readable. */
.drivestage{position:sticky;top:0;height:100vh;overflow:hidden}
.drivestage video{width:100%;height:100%;object-fit:cover}
.drivestage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* Left-side scrim. The copy sits on the left and the vehicle is brightest through
       the middle, so without this the type is read against a lit car door. */
    linear-gradient(to right, rgba(13,17,23,.94) 0%, rgba(13,17,23,.78) 32%, rgba(13,17,23,.12) 58%, rgba(13,17,23,0) 100%),
    linear-gradient(to bottom, rgba(13,17,23,.70) 0%, rgba(13,17,23,.20) 42%, rgba(13,17,23,.50) 100%)}
/* Fill the sticky stage and centre the copy in it. Previously the block was pinned
   16vh from the top, which left most of the stage empty underneath and read as bad
   padding rather than as a deliberate composition. */
.drivein .wrap{position:absolute;top:0;bottom:0;left:0;right:0;margin:0 auto;
  z-index:2;max-width:1240px;padding:0 var(--s5);
  display:flex;flex-direction:column;justify-content:center}
.drivein h2{max-width:16ch}
.drivein p{color:var(--ink-2);font-weight:300;max-width:44ch;margin:0}

/* Two messages hand over as you scroll the clip. Default, with no JS, they simply sit
   one after the other and both read normally. Only once the script confirms it is
   running does it stack them for the slide, so a failure degrades to plain copy rather
   than to one message invisible on top of another. */
.drivetext + .drivetext{margin-top:var(--s6)}
/* Bounded to the left half, which is where the scrim is heaviest. Unbounded, the
   44ch paragraph ran across the middle of the frame and sat on the lit vehicle. */
/* Top-left, not vertically centred. The vehicle occupies the middle and lower band of
   the frame as it arrives, so centred copy sat right on it. The upper left is the one
   area the car never reaches. */
.drivein.js-drive .drivetext{position:absolute;top:0;bottom:0;left:var(--s5);
  width:min(44%, 500px);
  display:flex;flex-direction:column;justify-content:flex-start;padding-top:13vh}
/* Transitions are enabled only AFTER the initial state has been painted. Otherwise
   adding .js-drive makes the second message animate from visible to hidden, and in a
   throttled tab that transition never advances, so it just sits there fully visible on
   top of the first one. The resting states must not depend on an animation running. */
.drivein.js-drive.anim .drivetext{
  transition:opacity .45s var(--e-out), transform .65s var(--e-out)}
@media (max-width:1000px){ .drivein.js-drive .drivetext{width:auto;right:var(--s5)} }
.drivein.js-drive .drivetext + .drivetext{margin-top:0}
/* The swap is a class, not a scrubbed tween. A scrubbed opacity can be parked at any
   value, which is how the first line ended up permanently half-invisible; this can only
   ever be one state or the other. */
.drivein.js-drive #driveB{opacity:0;transform:translateX(7%)}
.drivein.js-drive.swapped #driveA{opacity:0;transform:translateX(-7%)}
.drivein.js-drive.swapped #driveB{opacity:1;transform:translateX(0)}
/* The stage must fit the viewport exactly. With height:auto it took the clip's own
   aspect ratio, came out ~70px taller than the screen, and because it is sticky at
   top:0 that surplus sat below the fold, cutting the bottom off the arriving car.
   Fixed height plus object-fit:cover crops a sliver top and bottom instead, so the
   whole vehicle stays on screen. */
.drivestage{margin-top:0;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);background:#0a0f15;height:100dvh}
.drivestage video{display:block;width:100%;height:100%;object-fit:cover;
  filter:brightness(.86) contrast(1.05) saturate(.9)}
@media (max-width:1000px){ .drivein{padding-top:var(--s7)} }

/* Team headshots. Circular, sized to match, and the object-position keeps faces
   centred whatever the source crop is. */
.person .shot{width:132px;height:132px;border-radius:999px;object-fit:cover;
  object-position:50% 22%;margin:0 auto var(--s5);display:block;
  border:1px solid var(--line);background:var(--bg-3)}


/* Steps beside the map. Smaller type and tighter rows than the hero version so the two
   cells finish at a similar height instead of one towering over the other. */
.steps-cell .steprail{border-top:0}
.steprail.compact li{grid-template-columns:34px 1fr;gap:var(--s3);padding:var(--s4) 0}
.steprail.compact li:last-child{border-bottom:0;padding-bottom:0}
.steprail.compact h3{font-size:16px;margin-bottom:3px}
.steprail.compact p{font-size:14.5px;line-height:1.55;max-width:none}
.steprail.compact .when{margin-top:5px;font-size:11.5px}
.steps-cell>h3{margin:0 0 var(--s3)}

/* ===========================================================================
   MOBILE (<=768px). Deliberately its own treatment, not a squeezed desktop one.
   =========================================================================== */
@media (max-width:768px){

  /* Header was too small to read or hit. 30px logo in an 80px bar left the brand
     tiny next to two pill buttons. Taller bar, bigger mark, comfortable targets. */
  .bar{height:64px;gap:var(--s3)}
  .dealer-login{padding:9px 13px;font-size:13.5px}
  .cta.sm{padding:10px 14px;font-size:14px}
  nav{gap:var(--s3)}

  /* The facts grid (map plus the three cards) is removed on mobile per Peter.
     Everything it said is already covered by the steps, the FAQ and the hero note,
     so this is duplication that cost a lot of scrolling on a phone. */
  .facts{display:none}

  /* Same functionality as desktop, shrunk (Peter, 2026-08-21). The background clip
     stays VISIBLE on phones; it plays as a slow loop instead of being scroll-scrubbed,
     because scrubbing ties playback to a thumb flick. The static-poster version was
     rejected as not looking good. */

  /* Drive-in: compact 16:9 stage, clip plays on its own, and the copy sits ON the
     footage exactly like desktop, swapping late. The earlier mobile version pushed the
     text below the video, which read as "the text isn't in the car animation". */
  .drivein{min-height:0;padding:var(--s7) var(--s4)}
  .drivestage{position:relative;height:auto;aspect-ratio:16/9}
  .drivestage video{height:100%}
  .drivein .wrap{position:absolute;inset:0;max-width:none;padding:0;display:block}
  .drivein.js-drive .drivetext{top:auto;left:var(--s4);right:var(--s4);bottom:var(--s4);
    width:auto;padding-top:0;justify-content:flex-end}
  .drivein h2{font-size:22px;margin-bottom:6px}
  .drivein p{font-size:13.5px;line-height:1.5}

  /* The bar cannot fit a 38px logo plus two text pills at 375px: flex shrank the
     buttons, their labels wrapped, and the pills stretched to the full 64px bar,
     which is the "stretched header, oversized buttons" complaint. Nothing may wrap. */
  .bar img{height:34px}
  .dealer-login,.cta.sm{white-space:nowrap}
  /* The inline About/Contact links are hidden at this width and there was NOTHING in
     their place, so phones had no way to reach those pages except the footer. */
  .mnav{display:block}
}

@media (max-width:520px){
  .bar img{height:32px}
  /* Icon-only dealer login. The label is still announced via aria-label. */
  .dealer-login{font-size:0;gap:0;padding:13px;line-height:0}
  .dealer-login svg{width:16px;height:16px;display:block}
  .cta.sm{padding:10px 14px;font-size:13.5px}
}