/* ============================================================
   CARVIOO — Swiss editorial. Built from scratch; no reference
   site informs any value below.

   The system is rules, grid and type. Three consequences that
   hold everywhere and are the whole identity:

     1. NO CARDS. Content is separated by hairlines and by space,
        never by a floating box with a shadow. A box says "this is
        a widget"; a rule says "this is a column of a document".
     2. NO RADIUS. Every corner is square, including inputs and
        buttons. Rounding is the single fastest way to make a page
        read as a generic web app.
     3. NO SHADOW. Depth comes from contrast and alignment.

   Cobalt is the only brand colour. It clears 6.7:1 on bone as
   text and 7.6:1 against white as a fill, so the same value works
   for a link, a rule and a full-bleed field. There is no second
   accent to keep consistent.
   ============================================================ */
:root {
  color-scheme: light;

  /* ---- ground ---- */
  --paper: #FFFFFF;
  /* warm bone, the page */
  --paper-2: #FFFFFF;
  /* raised surfaces are white too; their borders define them */
  --sand: #F5F5F5;
  /* fill / wash */

  /* ---- ink ---- */
  --ink: #191919;
  /* headlines, body      15.6:1 on bone */
  --ink-2: #606060;
  /* secondary             6.2:1 on bone */
  --ink-3: #ABABAB;
  /* tertiary, >=18px only */

  /* ---- rules ---- */
  --rule: #DDDDDD;
  --rule-2: #EEEEEE;

  /* ---- brand ---- */
  --cobalt: #1A3A8F;
  /* deep royal. 9.0:1 on bone, 10.2:1 under white */
  --cobalt-d: #122A69;
  --cobalt-w: #E6EAF5;
  /* faint wash */

  --rust: #A8341C;
  /* errors only, never decorative */

  /* ---- type ---- */
  /* Two families. Inter does both display and reading: a neutral grotesque
     that stays even at 6rem and legible at 12px, which is why one face can
     carry the whole page. Geist Mono is kept for data only - licence plate,
     VIN and postal fields - where tabular figures actually help. */
  --display: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;   /* mono retired: one family for the whole page */

  --t--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --t-0: clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
  --t-1: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --t-2: clamp(1.5rem, 1.25rem + 1.1vw, 2.3rem);
  --t-3: clamp(1.75rem, 1.35rem + 1.5vw, 2.6rem);
  /* section headings ~42px, was 67px */
  --t-4: clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem);
  /* hero ~74px, was 96px */
  --t-5: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  /* figures. Was up to 8.5rem = 136px, which dwarfed everything around it. Only .stat b uses this. */

  --gut: clamp(1rem, 2.8vw, 2.25rem);
  /* 2.2vw only reached 31.7px at 1440, leaving the inset 4px short of Clutch's
     182 and 8px short at 1280. 2.8vw hits the 2.25rem cap at both. */
  /* was up to 2.75rem */
  --maxw: 1148px;
  /* Matched to Clutch. They run a 1076px content column, which measured as a
     182px inset at 1440 and 102px at 1280. Inset = (viewport - maxw)/2 + gut,
     and the gutter tops out at 2.25rem = 36px, so 1076 + 2x36 = 1148 lands on
     both of their numbers exactly. */
  /* Inset = (viewport - maxw)/2 + gut. At 1140/2.75rem that was 194px of empty
     margin each side on a 1440 screen and 108px on a 1280 laptop - close to
     Clutch's own 182/102, but wider than wanted here. 1280 + a 2.25rem gut
     brings it to 116px and 36px respectively. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Clutch leans on one small radius almost everywhere (8px, 28 uses on their
     homepage), a larger one for feature panels, and a pill for controls. */
  --r: 8px;
  --r-lg: 16px;
  --r-pill: 100px;
}

* {
  box-sizing: border-box;
}

/* keyboard users skip the announcement, nav and hero in one tab */
.skip {
  position: absolute;
  left: 0;
  top: -4rem;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.15rem;
  font-size: var(--t--1);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.16s var(--ease);
}

.skip:focus {
  top: 0;
}

.page {
  font-family: var(--sans);
  font-size: var(--t-0);
  line-height: 1.6;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* clip, never hidden: `hidden` computes the other axis to `auto`, making
     this a scroll container that every view() timeline would bind to */
  overflow-x: clip;
  position: relative;
}

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

h1,
h2,
h3,
h4 {
  /* Was 800 / -0.035em / 1.0 - a dramatic editorial setting that fought the
     clean light surface. Clutch sets headings 700, normal tracking, 1.25
     ratio; Geist takes a hair of negative tracking at display sizes. */
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}

/* the only small-caps label on the page besides the funnel's */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin: 0 0 1.4rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
  display: block;
}

.sect-h {
  font-size: var(--t-3);
  max-width: 24ch;
}

.sect-sub {
  color: var(--ink-2);
  max-width: 46ch;
  margin: 1.3rem 0 0;
  font-size: var(--t-1);
  line-height: 1.5;
}

/* ===== announcement ===== */
.announce {
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: var(--t--1);
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0.7rem 1rem;
}

.announce a {
  color: #9FB2E8;
  font-weight: 500;
  text-underline-offset: 3px;
}

/* ===== nav: a rule, not a floating bar ===== */
/* above .navmenu (60): with the panel open the burger becomes the X, so it
   has to stay visible and clickable or the only way out is the Escape key */
.nav {
  position: sticky;
  top: 0;
  z-index: 70;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 70px;
}

.nav__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--cobalt);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

.logo {
  font-family: var(--display);
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
}

/* An open C that doubles as a tire: the arc is the initial and the rim, the
   centre dot is the hub. Stroked rather than filled so it stays legible at
   16px in the nav, and it inherits colour so the footer copy goes white
   without a second rule. */
.logo__mark {
  width: 1.02em;
  height: 1.02em;
  display: inline-block;
  flex: none;
  color: var(--cobalt);
}

.nav__links {
  display: flex;
  gap: 1.9rem;
  font-family: var(--sans);
  font-size: var(--t--1);
  letter-spacing: 0.02em;
}

.nav__links a {
  color: var(--ink-2);
  text-decoration: none;
}

.nav__links a {
  position: relative;
  padding-bottom: 3px;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--cobalt);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.32s var(--ease);
}

.nav__links a:hover {
  color: var(--cobalt);
}

.nav__links a:hover::after {
  transform: scaleX(1);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav__signin {
  font-family: var(--sans);
  font-size: var(--t--1);
  color: var(--ink-2);
  text-decoration: none;
}

.nav__signin:hover {
  color: var(--cobalt);
}

@media (max-width: 940px) {

  .nav__links,
  .nav__signin {
    display: none;
  }
}

/* ===== buttons: square, flat, decisive ===== */
.btn {
  font-family: var(--display);
  font-size: var(--t-0);
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 1px solid var(--cobalt);
  border-radius: var(--r);
  padding: 1rem 1.6rem;
  cursor: pointer;
  background: var(--cobalt);
  color: #fff;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.1s var(--ease);
  text-decoration: none;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  touch-action: manipulation;
}

.btn:hover {
  background: var(--cobalt-d);
  border-color: var(--cobalt-d);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.btn[disabled] {
  background: var(--rule-2);
  border-color: var(--rule-2);
  color: var(--paper-2);
  cursor: not-allowed;
  transform: none;
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn--sm {
  padding: 0.7rem 1.15rem;
  font-size: var(--t--1);
}

/* no nested icon discs: a Swiss button is a rectangle with a word in it */
.btn--go::after {
  content: none;
}

/* ===== hero: flush left, photo bleeds right ===== */
.hero {
  border-bottom: 1px solid var(--ink);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  overflow: clip;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero .photo {
  margin-right: calc(50% - 50vw);
}

@media (max-width: 940px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero .photo {
    margin-right: calc(-1 * var(--gut));
  }
}

.hero h1 {
  font-size: var(--t-4);
  max-width: 12ch;
  margin-block: 0 1.3rem;
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero__copy>* {
    opacity: 0;
    animation: heroIn 0.85s var(--ease) forwards;
  }

  .js .hero__copy>*:nth-child(1) {
    animation-delay: 0.05s;
  }

  .js .hero__copy>*:nth-child(2) {
    animation-delay: 0.15s;
  }

  .js .hero__copy>*:nth-child(3) {
    animation-delay: 0.25s;
  }

  .js .hero__copy>*:nth-child(4) {
    animation-delay: 0.35s;
  }

  .js .hero__copy>*:nth-child(5) {
    animation-delay: 0.45s;
  }

  .js .hero .photo {
    opacity: 0;
    animation: heroIn 1s var(--ease) 0.2s forwards;
  }

  @keyframes heroIn {
    from {
      opacity: 0;
      transform: translateY(18px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}

.hero h1 em {
  font-style: normal;
  color: var(--cobalt);
}

.hero__lede {
  max-width: 38ch;
  color: var(--ink-2);
  font-size: var(--t-1);
  line-height: 1.5;
  margin: 0 0 2.2rem;
}

.hero__hint {
  font-family: var(--sans);
  font-size: var(--t--1);
  color: var(--ink-2);
  margin: 1rem 0 0;
}

.hero__hint button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--cobalt);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero__hint button:hover {
  color: var(--ink);
}

/* ===== plate: a rectangle with a rule under the jurisdiction ===== */
.plate-rig {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
}

.plate {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  border-right: 0;
  padding: 0.45rem 1rem 0.6rem;
  min-width: min(280px, 100%);
  flex: 1 1 250px;
}

@media (max-width: 520px) {
  .plate {
    border-right: 1px solid var(--ink);
  }

  .plate-rig .btn {
    width: 100%;
  }
}

.plate__jur {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  display: block;
}

.plate input {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.1rem 0 0;
}

.plate input::placeholder {
  color: var(--ink-3);
}

.plate input:focus {
  outline: none;
}

.plate:focus-within {
  border-color: var(--cobalt);
  box-shadow: inset 0 0 0 1px var(--cobalt);
}

/* ===== trust strip ===== */
.trustband {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.trustrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 3rem;
  padding-block: 1rem;
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t--1);
  color: var(--ink-2);
}

.trustrow b {
  color: var(--ink);
  font-weight: 500;
}

/* ===== kinetic band =====
   The page's only marquee. Slow enough to read, paused for anyone who asks
   for reduced motion, and duplicated so the loop is seamless. ===== */
.marquee {
  background: var(--ink);
  color: var(--paper);
  overflow: clip;
  border-bottom: 1px solid var(--ink);
}

.marquee__track {
  display: flex;
  width: max-content;
}

.marquee__set {
  display: flex;
  align-items: center;
  padding-block: 0.95rem;
  font-family: var(--mono);
  font-size: var(--t--1);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.marquee__set span {
  padding-inline: 2rem;
}

.marquee__set b {
  color: #fff;
  font-weight: 500;
}

.marquee__set i {
  width: 5px;
  height: 5px;
  background: var(--cobalt);
  flex: none;
}

@media (prefers-reduced-motion: no-preference) {
  .marquee__track {
    animation: marquee 38s linear infinite;
  }

  .marquee:hover .marquee__track {
    animation-play-state: paused;
  }
}

@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ===== stats: figures on a ruled grid ===== */
.stats {
  border-bottom: 1px solid var(--ink);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.stat {
  padding: 0 clamp(1rem, 2.5vw, 2rem);
  border-left: 1px solid var(--rule);
}

.stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.stat b {
  display: block;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-5);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.05;
  white-space: nowrap;
}

.stat span {
  display: block;
  font-size: var(--t--1);
  color: var(--ink-2);
  margin-top: 0.6rem;
  line-height: 1.45;
  max-width: 20ch;
}

@media (max-width: 860px) {
  .stats__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 0;
  }

  .stat:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

/* ===== sections ===== */
.sect {
  padding-block: clamp(3.5rem, 9vw, 7rem);
  scroll-margin-top: 4.5rem;
}

/* White throughout. The band used to alternate onto --sand; the hairline
   border-block it already carried is now what separates one section from the
   next, which is how Clutch does it - white page, bordered content. */
.sect--alt {
  background: var(--paper);
  border-block: 1px solid var(--rule);
}

/* ===== inspection: a ruled block, not a card ===== */
.cert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: start;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}

.cert h3 {
  font-size: var(--t-2);
  margin-bottom: 0.8rem;
  max-width: 20ch;
}

.cert p {
  margin: 0;
  color: var(--ink-2);
  max-width: 56ch;
}

.cert__badge {
  width: clamp(40px, 5vw, 56px);
  height: auto;
}

.cert__badge path {
  stroke: var(--cobalt);
}

@media (max-width: 820px) {
  .cert {
    grid-template-columns: 1fr;
  }
}

/* ===== how it works: three ruled columns ===== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

.stepcard {
  padding: 1.75rem clamp(1rem, 2.2vw, 2rem) 0;
  border-top: 2px solid var(--ink);
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.stepcard:first-child {
  padding-left: 0;
  border-left: 0;
}

@media (max-width: 900px) {
  .stepcard {
    border-left: 0;
    padding-left: 0;
    padding-bottom: 2rem;
  }
}

.stepcard__n {
  font-family: var(--sans);
  font-size: var(--t--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cobalt);
}

.glyph {
  width: 40px;
  height: auto;
}

.glyph * {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.glyph .soft {
  stroke: var(--ink-3);
}

.stepcard h3 {
  font-size: var(--t-1);
  max-width: 18ch;
}

.stepcard p {
  margin: 0;
  color: var(--ink-2);
}

.stepcard .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* ===== comparison: the table is the Swiss form ===== */
.compare-scroll {
  overflow-x: auto;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--t-0);
}

.compare th,
.compare td {
  text-align: left;
  padding: 1.15rem 1.35rem 1.15rem 0;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}

.compare thead th {
  font-family: var(--sans);
  font-size: var(--t--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.8rem;
}

.compare thead th.us {
  color: var(--cobalt);
}

.compare tbody th {
  font-weight: 700;
  color: var(--ink);
  width: 26%;
}

.compare .them {
  color: var(--ink-3);
}

.compare td.us {
  color: var(--ink);
  padding-left: 1.35rem;
  border-left: 1px solid var(--rule);
}

.compare thead th.us {
  padding-left: 1.35rem;
  border-left: 1px solid var(--rule);
}

.mk {
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  margin-right: 0.55rem;
  vertical-align: -0.12em;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mk--yes {
  stroke: var(--cobalt);
}

.mk--no {
  stroke: var(--ink-3);
}

/* ===== vehicles: photo, rule, caption. no frame. ===== */
/* the row is a track, not a grid: it is deliberately wider than the viewport
   so a pinned ScrollTrigger has something to pan across. Without JS, or under
   reduced motion, it stays a normal horizontally scrollable row. */
/* Was a horizontally scrolling track pinned by ScrollTrigger. Four cards at
   330px plus gaps need 1428px inside a 1256px container, so the fourth was
   permanently sliced through the middle - it read as broken rather than
   scrollable. A grid fits them exactly and is what Clutch does. */
.fleet-wrap {
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.js .fleet-wrap.is-panning {
  overflow: clip;
}

.fleet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
  width: auto;
}

@media (max-width: 1080px) {
  .fleet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .fleet {
    grid-template-columns: 1fr;
  }
}

.fleet .vcard {
  width: auto;
}

/* 78vw here was left over from when .fleet was a horizontally scrolling
   track and each card had to peek the next one. It is a grid now (see the
   note above .fleet-wrap), so that width just pinned every card to 78% of
   the viewport inside a single-column grid and left a 22vw gutter. */

.vcard {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 0;
  overflow: clip;
  display: flex;
  flex-direction: column;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), border-color 0.25s var(--ease);
}

.vcard:hover {
  border-color: var(--ink);
}

.vcard__art {
  position: relative;
  background: var(--cobalt);
  line-height: 0;
  overflow: clip;
}

.vcard__art .photo img {
  transition: opacity 0.45s var(--ease);
}

.vcard:hover .vcard__art .photo img {
  opacity: 0.82;
}

.vcard:hover .vcard__body {
  border-top-color: var(--cobalt);
}

.vcard__body {
  transition: border-color 0.3s var(--ease);
}

.vcard__art .photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

.vcard__art .photo__fallback {
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-family: var(--sans);
  font-size: var(--t--1);
  color: var(--ink-2);
  background: var(--sand);
}

.vcard__body {
  padding: 1rem clamp(0.9rem, 1.6vw, 1.15rem) 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  border-top: 1px solid var(--rule);
  margin-top: 0;
}

.vcard__body h3 {
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.25;
}

.vcard__meta {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t--1);
  color: var(--ink-2);
}

.vcard__price {
  margin: auto 0 0;
  padding-top: 0.8rem;
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--cobalt);
  font-variant-numeric: tabular-nums;
}

.vcard__price span {
  display: block;
  font-family: var(--sans);
  font-size: var(--t--1);
  font-weight: 500;
  color: var(--ink-2);
  margin-top: 0.15rem;
}

.disclose {
  font-family: var(--sans);
  font-size: var(--t--1);
  color: var(--ink-3);
  margin: 1.5rem 0 0;
}

/* ===== cobalt field: the one saturated block ===== */
.band {
  background: var(--cobalt);
  color: #fff;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: end;
}

@media (max-width: 860px) {
  .band__grid {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.75rem;
  }
}

.band h2 {
  font-size: var(--t-3);
  max-width: 21ch;
  color: #fff;
}

.band p {
  margin: 1.2rem 0 0;
  max-width: 40ch;
  color: #D3DAF8;
  font-size: var(--t-1);
  line-height: 1.5;
}

.band__cta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.band .btn {
  background: #fff;
  color: var(--cobalt);
  border-color: #fff;
}

.band .btn:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.band__note {
  font-family: var(--sans);
  font-size: var(--t--1);
  color: #C2CBF5;
  margin: 0;
  max-width: 34ch;
  line-height: 1.55;
}

/* ===== how we price it: the engine, made legible ===== */
.pricing {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  counter-reset: step;
}

@media (max-width: 900px) {
  .pricing {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .pricing {
    grid-template-columns: 1fr;
  }
}

.price-step {
  padding: 1.5rem clamp(1rem, 2vw, 1.75rem) 1.5rem;
  border-top: 2px solid var(--ink);
  border-left: 1px solid var(--rule);
}

.price-step:first-child {
  padding-left: 0;
  border-left: 0;
}

@media (max-width: 900px) {
  .price-step:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .price-step {
    padding-left: 0;
    border-left: 0;
  }
}

.price-step b {
  display: block;
  font-family: var(--sans);
  font-size: var(--t--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin-bottom: 0.9rem;
}

.price-step h3 {
  font-size: var(--t-1);
  margin-bottom: 0.5rem;
}

.price-step p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t--1);
  line-height: 1.6;
}

/* ===== coverage ===== */
.coverage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 900px) {
  .coverage {
    grid-template-columns: 1fr;
  }
}

.cities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

@media (max-width: 520px) {
  .cities {
    grid-template-columns: 1fr;
  }
}

.cities li {
  border-top: 1px solid var(--rule);
}

.cities a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.95rem 1rem 0.95rem 0;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s var(--ease), padding-left 0.25s var(--ease);
}

.cities a:hover {
  color: var(--cobalt);
  padding-left: 0.5rem;
}

.cities em {
  font-style: normal;
  font-family: var(--sans);
  font-size: var(--t--1);
  color: var(--ink-3);
}

.cities a:hover em {
  color: var(--cobalt);
}

/* ===== faq: native disclosure, ruled ===== */
.faq {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 2px solid var(--ink);
  max-width: 900px;
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 3rem 1.35rem 0;
  position: relative;
  font-family: var(--display);
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: -0.42rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231B3FD8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 2v12M2 8h12'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(135deg);
}

.faq details p {
  margin: 0 0 1.4rem;
  color: var(--ink-2);
  max-width: 68ch;
  line-height: 1.65;
}

/* the drawn SUV: line art in the page's own stroke language */
.carsvg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.carsvg .body {
  fill: var(--paper-2);
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}

.carsvg .glass {
  fill: #DDE3F6;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.carsvg .lamp {
  fill: var(--cobalt);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.carsvg .plate {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2.5;
}

.carsvg .tyre {
  fill: var(--ink);
  stroke: none;
}

.carsvg .line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.carsvg .ground {
  fill: none;
  stroke: var(--rule-2);
  stroke-width: 2;
  stroke-linecap: round;
}

/* ============================================================
   SCROLL VOCABULARY (technique borrowed from the Porsche build,
   nothing else). Their bundle uses GSAP + Lenis:

     chars   y:30 -> 0, autoAlpha, stagger 0.02, power2.out
     words   stagger 0.03
     groups  stagger 0.15, duration 1.8, expo.out
     scrub   start "top bottom" -> end "bottom top"

   Reproduced here without GSAP: the per-character stagger is a
   CSS transition-delay driven by a --i index, and the scrub is a
   native scroll timeline whose `entry 0% -> exit 100%` range is
   the exact equivalent of top-bottom -> bottom-top.
   ============================================================ */
:root {
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* expo.out */
  --power2: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* power2.out */
}

.split {
  display: inline;
}

/* word boxes keep line breaking at word boundaries; without this, inline-block
   characters let the browser break a line anywhere at all */
.split .wd {
  display: inline-block;
  white-space: nowrap;
}

/* The per-character reveal is off. At a 20ms stagger a 36-character heading
   spent ~1.6s visibly half-drawn - the first words black, the last still grey -
   which is what made every section heading look broken on the way past. The
   block-level fade-up below is kept; it reveals the heading as one piece.
   The JS still wraps characters, which is harmless: .wd word boxes continue to
   hold line breaks at word boundaries. */
.split .ch {
  display: inline-block;
  white-space: pre;
  opacity: 1;
  transform: none;
}

.is-in .split .ch,
.split.is-in .ch {
  opacity: 1;
  transform: none;
}

/* a headline that has been split no longer animates as a block */
.js .sect-h.has-split,
.js .funnel h2.has-split {
  opacity: 1;
  transform: none;
}

/* group cascades pick up their expo.out feel */
.js .stepcard,
.js .vcard,
.js .quote,
.js .stat {
  transition: opacity 1.1s var(--expo), transform 1.1s var(--expo);
}

/* ===== banners =====
   Full-bleed interruptions. Swiss keeps them typographic: a rule, a claim at
   display size, and nothing else competing. The dark one is the page's second
   saturated field, so it is ink rather than blue - two full-width blue bands
   is what made the palette shout. ===== */
.banner {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-block: 1px solid var(--ink);
}

.banner--ink {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.banner--ink h2 {
  color: #fff;
}

.banner__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: end;
}

@media (max-width: 860px) {
  .banner__grid {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.5rem;
  }
}

.banner h2 {
  font-size: var(--t-3);
  max-width: 17ch;
}

.banner__meta {
  font-family: var(--sans);
  font-size: var(--t--1);
  line-height: 1.7;
  color: #9BA0A7;
  margin: 0;
}

.banner--ink .banner__meta b {
  color: var(--cobalt-w);
  font-weight: 500;
}

.banner__rule {
  height: 3px;
  background: var(--cobalt);
  width: clamp(80px, 12vw, 160px);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* slim notice strip */
.notice {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.notice__in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  padding-block: 0.9rem;
  font-family: var(--sans);
  font-size: var(--t--1);
  color: var(--ink-2);
}

.notice__in b {
  color: var(--ink);
  font-weight: 500;
}

.notice__in a {
  color: var(--cobalt);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== funnel: the car arrives and becomes the form ===== */
.funnel {
  position: relative;
  overflow: clip;
}

/* the road is a lane of its own in normal flow, not an overlay. As an
   absolutely positioned layer it cut straight through the headline and the
   car disappeared behind the form card, which read as a z-index bug rather
   than as a hand-off. */
.funnel__grid {
  position: relative;
  z-index: 1;
}



/* the form's top rule is a pseudo-element so it can draw itself without the
   card ever depending on an animation to be visible */
.card {
  position: relative;
  border-top-width: 1px;
}

.card::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -3px;
  height: 3px;
  background: var(--cobalt);
}


/* ===== funnel (layout) ===== */
.funnel {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 9vw, 7rem);
  scroll-margin-top: 4.5rem;
  border-bottom: 1px solid var(--rule);
}

.funnel__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.funnel__intro {
  position: sticky;
  top: 6.5rem;
}

@media (max-width: 1000px) {
  .funnel__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .funnel__intro {
    position: static;
  }
}

.funnel h2 {
  font-size: var(--t-3);
  max-width: 20ch;
}

.funnel .sect-sub {
  max-width: 38ch;
}

.reassure {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 40ch;
}

.reassure li {
  position: relative;
  padding: 0.8rem 0 0.8rem 2rem;
  font-size: var(--t-0);
  color: var(--ink-2);
  line-height: 1.5;
  border-top: 1px solid var(--rule);
}

.reassure li:last-child {
  border-bottom: 1px solid var(--rule);
}

.reassure li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 0.9rem;
  height: 0.9rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231B3FD8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.3 3.3L13 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the form is the one raised surface on the page, and it is raised by a
   2px rule and a lighter ground rather than by a shadow */
.card {
  background: var(--paper-2);
  border: 1px solid var(--ink);
  border-top-width: 3px;
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 720px;
  box-shadow: none;
}

.progress {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--sans);
  font-size: var(--t--1);
  color: var(--ink-2);
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
}

.pips {
  display: flex;
  gap: 4px;
}

.pip {
  width: 28px;
  height: 3px;
  border-radius: var(--r);
  background: var(--rule-2);
  transition: background 0.35s var(--ease);
}

.pip.on {
  background: var(--cobalt);
}

.step {
  display: none;
}

.step.is-active {
  display: block;
  animation: stepIn 0.4s var(--ease);
}

@keyframes stepIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.q {
  font-family: var(--display);
  font-size: var(--t-2);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 0.5rem;
}

.hint {
  color: var(--ink-2);
  font-size: var(--t--1);
  margin: 0 0 1.6rem;
  max-width: 56ch;
  line-height: 1.6;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.3rem;
}

.field label {
  font-family: var(--sans);
  font-size: var(--t--1);
  letter-spacing: 0.04em;
  color: var(--ink);
}

.field input,
.field select {
  font-family: var(--sans);
  font-size: var(--t-0);
  padding: 0.85rem 0.9rem;
  border-radius: var(--r);
  border: 1px solid var(--rule-2);
  background: #fff;
  color: var(--ink);
  width: 100%;
}

.field input::placeholder {
  color: var(--ink-3);
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: inset 0 0 0 1px var(--cobalt);
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 560px) {
  .grid2 {
    grid-template-columns: 1fr;
  }
}

.tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--ink);
  margin-bottom: 1.5rem;
  max-width: 320px;
}

.tab {
  flex: 1;
  font-family: var(--sans);
  font-size: var(--t--1);
  padding: 0.65rem 0.5rem;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  touch-action: manipulation;
}

.tab+.tab {
  border-left: 1px solid var(--ink);
}

.tab:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: -3px;
}

.tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* chips select by inverting to ink. The accent stays reserved for actions. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  font-family: var(--sans);
  font-size: var(--t--1);
  font-weight: 500;
  padding: 0.65rem 1rem;
  border-radius: var(--r);
  border: 1px solid var(--rule-2);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), color 0.16s var(--ease);
  touch-action: manipulation;
}

.chip:hover {
  border-color: var(--ink);
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 600;
}

.chip:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}

.chipgroup {
  margin-bottom: 1.6rem;
}

.chips--stack {
  flex-direction: column;
  align-items: stretch;
}

.chips--stack .chip {
  padding: 0.8rem 1rem;
}

.chip em {
  display: block;
  font-style: normal;
  margin-top: 0.2rem;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.4;
}

.chip[aria-pressed="true"] em {
  color: #C9CDD3;
}

.chips[data-multi] .chip {
  padding-left: 2.2rem;
  position: relative;
}

.chips[data-multi] .chip::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 0.9rem;
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--rule-2);
  background: #fff;
}

.chips[data-multi] .chip[aria-pressed="true"]::before {
  border-color: var(--paper);
  background: transparent;
}

.chips[data-multi] .chip[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 1.13rem;
  top: 1.1rem;
  width: 0.25rem;
  height: 0.48rem;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.chipgroup>span {
  display: block;
  font-family: var(--sans);
  font-size: var(--t--1);
  color: var(--ink);
  margin-bottom: 0.7rem;
}

.vehicle-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 1rem 0;
  border-block: 1px solid var(--rule);
  margin-bottom: 1.6rem;
}

.vehicle-card strong {
  font-size: var(--t-1);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.vehicle-card span {
  font-family: var(--sans);
  font-size: var(--t--1);
  color: var(--ink-2);
}

.v-specs {
  flex-basis: 100%;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-2);
  line-height: 1.55;
}

.autofill {
  margin: -1rem 0 1.5rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cobalt-w);
  border-left: 3px solid var(--cobalt);
}

.form-error {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--r);
  font-size: var(--t--1);
  line-height: 1.5;
  color: var(--ink);
  background: #F6E3DF;
  border-left: 3px solid var(--rust);
}

.field input.is-invalid,
.field select.is-invalid {
  border-color: var(--rust);
  box-shadow: inset 0 0 0 1px var(--rust);
}

.consent input.is-invalid {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}

.consent {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--t--1);
  color: var(--ink-2);
  margin-bottom: 1.6rem;
  line-height: 1.55;
}

.consent input {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--cobalt);
  flex: none;
}

.actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.result__label {
  font-family: var(--sans);
  font-size: var(--t--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 1rem;
}

.odo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(2rem, 8vw, 3.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--cobalt);
}

.odo__dash {
  color: var(--ink-3);
}

.odo__num {
  display: flex;
}

.odo__cur {
  color: var(--ink-2);
  font-size: 0.5em;
  align-self: flex-start;
  margin-top: 0.35em;
}

.digit {
  --d: 0;
  width: 0.62em;
  height: 1.15em;
  overflow: hidden;
  position: relative;
}

.digit.comma {
  width: 0.34em;
}

.digit__strip {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(calc(var(--d) * -1.15em));
  transition: transform 1.05s var(--ease);
}

.digit__strip>i {
  font-style: normal;
  height: 1.15em;
  line-height: 1.15em;
}

.result__note {
  margin: 1.6rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 2px solid var(--ink);
  font-size: var(--t--1);
  line-height: 1.6;
  color: var(--ink-2);
}

.result__note strong {
  color: var(--ink);
}

.result__note.decline {
  border-top-color: var(--rust);
}

.nextsteps {
  list-style: none;
  padding: 0;
  margin: 1.8rem 0 0;
  display: grid;
  gap: 0;
}

.nextsteps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  font-size: var(--t--1);
  color: var(--ink-2);
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
}

.ns-arrow {
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.2rem;
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== photo slots =====
   The image always renders and the fallback sits behind it. Hiding the img
   until it loads deadlocks against loading="lazy" and leaves it boxless, so
   its scroll timeline can never attach. */
.photo {
  position: relative;
  margin: 0;
}

.photo img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: var(--r);
}

.photo__fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.photo.has-photo .photo__fallback {
  display: none;
}

.photo video {
  display: none;
  width: 100%;
  height: auto;
}

.photo.has-video video {
  display: block;
}

.photo.has-video img,
.photo.has-video .photo__fallback {
  display: none;
}

.hero .photo img,
.hero .photo video {
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.hero .photo__fallback {
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  background: var(--sand);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t--1);
}

.avatar-slot {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
}

.avatar-slot img {
  display: none;
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.avatar-slot.has-photo img {
  display: block;
}

.avatar-slot.has-photo .avatar {
  display: none;
}

.avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: none;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink);
  background: var(--sand);
}

/* ===== testimonials: ruled columns ===== */
.quotes {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 0;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  align-items: start;
}

@media (max-width: 900px) {
  .quotes {
    grid-template-columns: 1fr;
  }
}

.quote {
  margin: 0;
  padding: 1.5rem clamp(1rem, 2.2vw, 2rem) 0;
  border-top: 2px solid var(--ink);
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: none;
}

.quotes>.quote:first-child {
  padding-left: 0;
  border-left: 0;
}

.quotes>.quote:first-child p {
  font-size: var(--t-1);
  line-height: 1.45;
}

@media (max-width: 900px) {
  .quote {
    border-left: 0;
    padding-left: 0;
    padding-bottom: 1.5rem;
  }
}

.quote__stars {
  display: block;
  width: 84px;
  height: 15px;
}

.quote__stars .on {
  fill: var(--cobalt);
}

.quote__stars .off {
  fill: var(--rule-2);
}

.quote p {
  margin: 0;
  color: var(--ink);
  line-height: 1.55;
}

.quote__who {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 1rem;
}

.quote__who span {
  font-family: var(--sans);
  font-size: var(--t--1);
  color: var(--ink-2);
  line-height: 1.45;
}

/* ===== footer ===== */
.foot {
  background: var(--ink);
  color: #9BA0A7;
  padding-block: clamp(3rem, 7vw, 4.5rem);
  font-size: var(--t--1);
}

.foot .logo {
  color: #fff;
}

.foot .logo__mark {
  background: var(--cobalt);
}

.foot h4 {
  font-family: var(--sans);
  font-size: var(--t--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1.1rem;
}

.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.foot a {
  color: #9BA0A7;
  text-decoration: none;
}

.foot a:hover {
  color: #fff;
}

.foot__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 900px) {
  .foot__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .foot__grid {
    grid-template-columns: 1fr;
  }
}

.buildstamp {
  color: var(--cobalt);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.foot__legal {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2A2E34;
  font-family: var(--sans);
  line-height: 1.7;
}

/* ============================================================
   MOTION — MOTION_INTENSITY 4

   Reveals run on IntersectionObserver so a failure leaves content
   VISIBLE. Scrubbed motion runs on CSS scroll timelines so it
   costs no main-thread work. There is no scroll listener on this
   page. Nothing inside .card moves: a form that shifts while you
   fill it is hostile.
   ============================================================ */
.js .stepcard,
.js .vcard,
.js .sect-h,
.js .sect-sub,
.js .funnel h2,
.js .stat,
.js .quote {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.is-in {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .nav__progress {
      animation: navProgress linear both;
      animation-timeline: scroll(root block);
    }

    @keyframes navProgress {
      from {
        transform: scaleX(0);
      }

      to {
        transform: scaleX(1);
      }
    }
  }

  @supports (animation-timeline: view()) {

    [data-parallax] img,
    [data-parallax] video {
      will-change: transform;
      animation: heroDrift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    @keyframes heroDrift {
      from {
        transform: translate3d(0, -12px, 0) scale(1.04);
      }

      to {
        transform: translate3d(0, 12px, 0) scale(1.04);
      }
    }

    .vcard__art .photo img {
      animation: cardDrift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    @keyframes cardDrift {
      from {
        transform: translate3d(0, -8px, 0) scale(1.05);
      }

      to {
        transform: translate3d(0, 8px, 0) scale(1.05);
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  .stepcard,
  .vcard,
  .sect-h,
  .sect-sub,
  .funnel h2,
  .stat,
  .quote {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* a hero for interior pages: no photograph, no form, just the proposition.
   The homepage hero carries the plate field; repeating it here would put two
   competing entry points above the fold on a page whose whole job is the form
   further down. */
.hero--compact {
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
}

.hero--compact h1 {
  font-size: var(--t-2);
  max-width: 22ch;
  margin-block: 0 0.9rem;
}

.hero--compact .hero__lede {
  max-width: 58ch;
  margin-bottom: 0;
  font-size: var(--t-0);
}

/* ===== image banners =====
   Full-bleed photography without upscaling. The source photos are 800px wide;
   stretched across a 1440px viewport they go soft, so the strip runs FOUR of
   them edge to edge instead - each lands near its native width and stays
   sharp. The split banner caps its image column for the same reason. */
.imgstrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--ink);
}

.imgstrip figure {
  margin: 0;
  position: relative;
  overflow: clip;
  line-height: 0;
}

.imgstrip img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  filter: grayscale(0.15);
  transition: filter 0.5s var(--ease), transform 0.8s var(--ease);
}

.imgstrip figure:hover img {
  filter: grayscale(0);
  transform: scale(1.03);
}

.imgstrip figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.7rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: #fff;
  background: linear-gradient(to top, rgba(20, 22, 26, 0.88), rgba(20, 22, 26, 0));
}

@media (max-width: 900px) {
  .imgstrip {
    grid-template-columns: 1fr 1fr;
  }
}

.stripbar {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--ink);
}

.stripbar__in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 2rem;
  padding-block: 1rem;
  font-family: var(--sans);
  font-size: var(--t--1);
  color: #9BA0A7;
}

.stripbar__in b {
  color: #fff;
  font-weight: 500;
}

/* split: photograph against a solid panel */
.splitban {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--ink);
  border-block: 1px solid var(--ink);
}

@media (max-width: 900px) {
  .splitban {
    grid-template-columns: 1fr;
  }
}

/* An explicit ratio, because the source is 820x700: at a 720px column its
   intrinsic proportions drove a 615px row while the text panel beside it
   only needed 382px. min-height could not shrink it - height:100% on the
   img let the natural aspect win. */
.splitban__media {
  line-height: 0;
  overflow: clip;
  aspect-ratio: 16 / 9;
}

.splitban__media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
}

.splitban__panel {
  padding: clamp(2rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  color: var(--paper);
}

.splitban__panel h2 {
  color: #fff;
  font-size: var(--t-2);
  max-width: 16ch;
}

.splitban__panel p {
  margin: 0;
  color: #9BA0A7;
  max-width: 44ch;
  line-height: 1.65;
}

.splitban__panel .btn {
  align-self: flex-start;
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

.splitban__panel .btn:hover {
  background: var(--cobalt);
  color: #fff;
  border-color: var(--cobalt);
}

/* when the panel comes first in source order, the photograph still leads on
   mobile - a wall of text above the fold reads as an interstitial, not a banner */
@media (max-width: 900px) {
  .splitban {
    grid-template-columns: 1fr;
  }

  .splitban .splitban__media {
    order: -1;
  }
}

/* ===== hero lookup bar =====
   The pattern: mode toggle, the two fields that identify a vehicle, and the
   action, all on one line under an image. Built with its own ids (h-*) and
   handed off to the funnel below, because duplicating the funnel's ids in the
   hero would break every getElementById on the page. */
/* Two columns: a large photograph, and the fields beside it. Raised off the
   page with a HARD tonal offset rather than a blurred shadow — nothing in this
   system has a soft shadow or a rounded corner, so a blur would read as
   borrowed from another design language. */
/* The one lifted surface on the page. Three stacked shadows rather than a
   single large blur: a tight contact shadow anchors the card to the page, a
   mid shadow gives it body, and a wide ambient one carries the lift. One big
   blur alone reads as a grey smear rather than an object above a surface.
   overflow:clip is what makes the photograph's corners follow the radius. */
.lookup {
  border: 1px solid var(--ink);
  background: var(--paper-2);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
  border-radius: 20px;
  overflow: clip;
  box-shadow:
    0 1px 2px rgba(20, 22, 26, 0.05),
    0 8px 16px rgba(20, 22, 26, 0.07),
    0 24px 48px rgba(20, 22, 26, 0.11);
  transition: box-shadow 0.35s var(--ease);
}

/* Focusing any field lifts the card further and rings it in the brand wash, so
   the highlight answers the user instead of shouting permanently. */
.lookup:focus-within {
  box-shadow:
    0 0 0 3px var(--cobalt-w),
    0 2px 4px rgba(20, 22, 26, 0.06),
    0 14px 28px rgba(20, 22, 26, 0.10),
    0 34px 68px rgba(20, 22, 26, 0.14);
}

/* The photograph runs the full width of the card, landscape, with real height.
   Splitting the card into image-left / fields-right forced the three fields to
   stack down a narrow column and stretch to fill it - which is how each one
   ended up 167px tall. Full-width media keeps the fields on one short row. */
.lookup__media {
  line-height: 0;
  border-bottom: 1px solid var(--ink);
  overflow: clip;
}

.lookup__media img {
  width: 100%;
  height: clamp(190px, 23vw, 300px);
  /* cover, not fill. fill stretches the image to the box and distorts it -
     a 402x497 portrait squeezed into a 300px-tall landscape box makes every
     car look narrowed. cover preserves the aspect ratio and crops instead,
     which is why object-position matters again below. */
  object-fit: cover;
  object-position: 50% 45%;
  display: block;
}

.lookup__body {
  display: block;
  min-width: 0;
}

.lookup__tabs {
  display: flex;
  border-bottom: 1px solid var(--rule);
}

.lookup__tab {
  font-family: var(--mono);
  font-size: var(--t--1);
  letter-spacing: 0.04em;
  padding: 0.8rem 1.5rem;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  touch-action: manipulation;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.lookup__tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--cobalt);
}

.lookup__tab:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: -3px;
}

/* one short row: identify, locate, act */
.lookup__row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr auto;
  align-items: stretch;
}

.lookup__field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.85rem clamp(1.1rem, 2vw, 1.5rem);
  border-right: 1px solid var(--rule);
  min-width: 0;
}

.lookup__field label {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.lookup__field input {
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: var(--t-1);
  color: var(--ink);
  padding: 0;
  width: 100%;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lookup__field input::placeholder {
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
}

.lookup__field input:focus {
  outline: none;
}

.lookup__field:focus-within {
  box-shadow: inset 3px 0 0 var(--cobalt);
}

/* Inset rather than flush. This button stretches to fill a full-height grid
   cell that ends at the card's rounded, clipped corner - so a radius on the
   button left a sliver where the two curves crossed, and no radius left a hard
   square corner against a rounded card. A margin lifts it clear of the edge so
   its own 8px radius reads cleanly on all four corners. */
.lookup__row .btn {
  border-radius: var(--r);
  border: 0;
  padding: 0 clamp(1.25rem, 3vw, 2.25rem);
  margin: 0.55rem 0.55rem 0.55rem 0;
  align-self: stretch;
}

.lookup__note {
  margin: 0;
  padding: 0.8rem clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.71rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.lookup__note b {
  color: var(--ink);
  font-weight: 500;
}

.lookup__err {
  margin: 0;
  padding: 0.7rem clamp(1.1rem, 2vw, 1.5rem) 0;
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--rust);
}

.lookup__err:empty {
  display: none;
}

@media (max-width: 820px) {
  .lookup__row {
    grid-template-columns: 1fr;
  }

  .lookup__field {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .lookup__row .btn {
    width: auto;
    margin: 0 0.55rem 0.55rem;
    padding-block: 1.05rem;
  }

  .lookup__media img {
    height: clamp(160px, 34vw, 230px);
  }
}

/* Below 900px the two columns collapse to one, so the photograph goes back on
   top — but capped, because now it IS stacked above the fields and the comment
   at the top of this block applies again. */
/* Was left over from an earlier two-column version: it still carried the only
   border-radius and box-shadow on .lookup, so mobile rendered a rounded lifted
   card while desktop rendered a flat square one. Both now come from the base
   rule; this only scales them down for the narrower viewport. The old
   grid-template-columns and border-right were inert once .lookup stopped
   being a grid. */
@media (max-width: 900px) {
  .lookup {
    border-radius: 16px;
    box-shadow:
      0 1px 2px rgba(20, 22, 26, 0.05),
      0 6px 14px rgba(20, 22, 26, 0.08),
      0 18px 34px rgba(20, 22, 26, 0.10);
  }

  .lookup__media img {
    height: clamp(190px, 40vw, 290px);
  }

  .lookup__row .btn {
    padding-block: 1.05rem;
  }
}

/* ===== certification steps =====
   Clutch's version ends each stage with a turntable render of the car as a
   looping .webm. We have no turntable footage, so the media slot takes a video
   if one is present and otherwise shows the drawn SUV on a rotating platform.
   Drop demo/video/certified.webm in and the video takes over automatically:
   the same video > photo > drawing ladder the hero already uses. */
.cstep {
  border-top: 2px solid var(--ink);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.cstep__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 900px) {
  .cstep__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.cstep--flip .cstep__media {
  order: -1;
}

@media (max-width: 900px) {
  .cstep--flip .cstep__media {
    order: 0;
  }
}

.cstep__n {
  font-family: var(--sans);
  font-size: var(--t--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cobalt);
  display: block;
  margin-bottom: 1rem;
}

.cstep h2 {
  font-size: var(--t-3);
  max-width: 20ch;
}

.cstep p {
  color: var(--ink-2);
  max-width: 46ch;
  margin: 1.2rem 0 0;
  line-height: 1.65;
  font-size: var(--t-1);
}

.cstep__list {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  max-width: 44ch;
}

.cstep__list li {
  border-top: 1px solid var(--rule);
  padding: 0.75rem 0;
  font-family: var(--sans);
  font-size: var(--t--1);
  color: var(--ink-2);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
}

.cstep__list li:last-child {
  border-bottom: 1px solid var(--rule);
}

.cstep__list b {
  color: var(--cobalt);
  font-weight: 500;
}

/* the turntable */
.turn {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--sand);
  border: 1px solid var(--rule);
  overflow: clip;
}

.turn video {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.turn.has-video video {
  display: block;
}

.turn.has-video .turn__stage {
  display: none;
}

.turn__stage {
  position: relative;
  width: 72%;
  display: grid;
  place-items: center;
}

.turn__disc {
  position: absolute;
  bottom: 6%;
  left: 50%;
  width: 86%;
  aspect-ratio: 3 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--cobalt) 45%, transparent);
}

.turn__disc::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.turn .carsvg {
  width: 62%;
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .turn__disc {
    animation: turntable 9s linear infinite;
  }

  .turn .carsvg {
    animation: hover 4.5s ease-in-out infinite;
  }

  @keyframes turntable {
    from {
      transform: translateX(-50%) rotate(0deg);
    }

    to {
      transform: translateX(-50%) rotate(360deg);
    }
  }

  @keyframes hover {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-2.5%);
    }
  }
}

.turn__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.72rem;
  padding: 0.55rem 0.9rem;
}

/* hero mode toggle: the homepage plate field doubles as a VIN field, so it
   needs the same two tabs the interior lookup card has */
.hero__tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
  max-width: 340px;
}

.hero__tab {
  font-family: var(--mono);
  font-size: var(--t--1);
  letter-spacing: 0.04em;
  padding: 0.55rem 1.15rem 0.6rem;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  touch-action: manipulation;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.hero__tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--cobalt);
}

.hero__tab:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: -3px;
}

/* in VIN mode the field is long, so it needs the room the plate never did */
.plate.is-vin input {
  font-size: clamp(0.95rem, 2.1vw, 1.2rem);
  letter-spacing: 0.06em;
}

/* the hero card carries the photograph, so it gets more of it than an
   interior page does */
/* more clearance than a flat block needed: the card is lifted now, and its
   ambient shadow reaches into whatever sits above it */
.hero .lookup {
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

.hero .lookup__media img {
  height: clamp(220px, 26vw, 360px);
}

.hero .lookup__media .photo {
  margin: 0;
}

.hero .lookup__media .photo__fallback {
  display: grid;
  place-items: center;
  background: var(--sand);
  font-family: var(--sans);
  font-size: var(--t--1);
  color: var(--ink-2);
}

.lookup__note button {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 0.4rem;
  font: inherit;
  color: var(--cobalt);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lookup__note button:hover {
  color: var(--ink);
}

/* homepage hero: copy left, lookup card right. Stacked, the 4.7rem headline
   alone pushes the CTA past 1000px, i.e. below the fold on every laptop. */
.hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

@media (max-width: 1000px) {
  .hero__split {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* Removed: `.hero .lookup { margin-top: 0 }` and a 250px cap on the media.
   Both belonged to the split hero, where the card sat BESIDE the copy and was
   vertically centred, so it needed no top margin. That layout is gone — no page
   uses .hero__split any more — but the selectors were scoped to .hero rather
   than .hero__split, so they kept overriding the two rules above and flattened
   the sell-or-trade card against its lede. */
/* in a narrow column the two fields share a row and the action takes its own,
   rather than three cramped cells */
.lookup--narrow .lookup__row {
  grid-template-columns: 1fr 1fr;
}

.lookup--narrow .lookup__row .btn {
  grid-column: 1 / -1;
  width: 100%;
  padding-block: 0.95rem;
}

.lookup--narrow .lookup__field:nth-child(2) {
  border-right: 0;
}

.lookup--narrow .lookup__field {
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 1000px) {
  .lookup--narrow .lookup__media img {
    height: clamp(200px, 30vw, 300px);
  }
}

/* ===== film hero ===== */
.herofilm {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #000;
  color: #fff;
  min-height: clamp(340px, 46vh, 520px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3.5rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--ink);
}

.herofilm__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.herofilm__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* the film is dark but not uniformly, so the copy gets its own guaranteed
   ground rather than trusting the frame behind it */
.herofilm::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(95deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.6) 42%, rgba(0, 0, 0, 0.15) 100%);
}

.herofilm__inner {
  position: relative;
  width: 100%;
}

.herofilm h1 {
  color: #fff;
  font-size: var(--t-4);
  max-width: 12ch;
  margin-block: 0 1.1rem;
}

.herofilm h1 em {
  color: #9FB2E8;
  font-style: normal;
}

.lookup--wide .lookup__row {
  grid-template-columns: 1.15fr 0.85fr auto;
}

@media (max-width: 820px) {
  .lookup--wide .lookup__row {
    grid-template-columns: 1fr;
  }

}

@media (prefers-reduced-motion: reduce) {

  /* never autoplay for someone who asked for stillness: the poster is the hero */
  .herofilm__video {
    display: none;
  }

  .herofilm__media {
    background: #000 url("video/hero-poster.jpg") center / cover no-repeat;
  }
}

/* ===== mobile navigation =====
   Below 940px the links used to be display:none with nothing in their place,
   which left phones with no navigation at all. The panel is built from the
   existing nav in JS so there is one implementation for every page. */
.nav__burger {
  display: none;
}

@media (max-width: 940px) {
  .nav__burger {
    display: grid;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    touch-action: manipulation;
  }

  .nav__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    transition: transform 0.32s var(--ease), opacity 0.2s var(--ease);
  }

  .nav__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .nav__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav__burger:focus-visible {
    outline: 3px solid var(--cobalt);
    outline-offset: -2px;
  }
}

.navmenu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  padding: calc(70px + 1.5rem) var(--gut) 2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.navmenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (min-width: 941px) {
  .navmenu {
    display: none;
  }
}

.navmenu a {
  font-family: var(--display);
  font-size: var(--t-2);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}

.navmenu a:last-of-type {
  border-bottom: 1px solid var(--rule);
}

.navmenu a[aria-current="page"] {
  color: var(--cobalt);
}

.navmenu .btn {
  margin-top: 1.75rem;
  width: 100%;
  font-size: var(--t-0);
}

.navmenu__sign {
  font-family: var(--sans) !important;
  font-size: var(--t--1) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  color: var(--ink-2) !important;
}

body.nav-open {
  overflow: hidden;
}

/* with the panel open the only control in the bar should be the X: the panel
   carries its own call to action */
body.nav-open .nav__right .btn {
  display: none;
}

body.nav-open .nav {
  border-bottom-color: var(--rule);
}

/* ============================================================
   TYPOGRAPHIC TUNING

   Two things the base rules got wrong, both visible in a measured
   audit of the rendered page:

   1. OPTICAL LINE-HEIGHT. A single `line-height: 1.0` on h1-h4 was
      tuned for the 93px hero and applied to a 22px card heading,
      where lines then touch. Leading has to loosen as type shrinks.
   2. OPTICAL TRACKING. Same story: -0.035em is right at 93px and
      far too tight at 22px. Tracking tightens as type grows, and
      goes to zero (or positive) at small sizes.

   Also collapses four near-identical small steps (11.2 / 11.4 /
   11.8 / 13.4px) into two that actually do different jobs.
   ============================================================ */

/* ---- a spacing scale, so vertical rhythm is chosen not accidental ---- */
:root {
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --t--2: clamp(0.7rem, 0.68rem + 0.1vw, 0.75rem);
  /* the one micro step */
}

/* ---- display: tight leading, tight tracking ---- */
.herofilm h1,
.hero h1 {
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.sect-h,
.funnel h2,
.band h2,
.banner h2,
.cstep h2 {
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.q,
.cert h3,
.splitban__panel h2 {
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.stepcard h3,
.price-step h3,
.faq summary,
.navmenu a {
  line-height: 1.22;
  letter-spacing: -0.015em;
}

.vcard__body h3,
.vehicle-card strong {
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ---- reading text: measure and leading ---- */
.hero__lede {
  line-height: 1.5;
  max-width: 44ch;
}

.sect-sub {
  line-height: 1.5;
  max-width: 52ch;
}

.cert p,
.cstep p,
.band p,
.splitban__panel p {
  line-height: 1.6;
  max-width: 56ch;
}

/* these were running at 41-45ch, which is below a comfortable measure and
   makes a three-line paragraph feel like a column of fragments */
.stepcard p,
.price-step p {
  line-height: 1.6;
  max-width: 54ch;
}

.faq details p {
  line-height: 1.65;
  max-width: 68ch;
}

.quote p {
  line-height: 1.5;
}

/* small text needs MORE leading, not less: it was running at 1.46 */
.stat span,
.vcard__meta,
.lookup__note,
.banner__meta,
.cstep__list li,
.reassure li,
.hint,
.disclose {
  line-height: 1.6;
}

/* ---- buttons had `line-height: normal`, which varies by family ---- */
.btn {
  line-height: 1.2;
}

/* ---- mono labels: tracking opens up as size drops ---- */
.eyebrow {
  letter-spacing: 0.14em;
}

.cstep__n,
.stepcard__n,
.price-step b {
  letter-spacing: 0.12em;
}

.lookup__field label,
.field label,
.chipgroup>span {
  letter-spacing: 0.04em;
}

.lookup__note,
.disclose,
.foot__legal {
  letter-spacing: 0.01em;
}

/* ---- collapse the drifted micro sizes onto one step ---- */
.lookup__note,
.lookup__field label,
.imgstrip figcaption,
.turn__tag,
.vcard__price span {
  font-size: var(--t--2);
}

/* ---- vertical rhythm on the spacing scale ---- */
.sect {
  padding-block: clamp(var(--s-7), 8vw, var(--s-9));
}

.sect-sub {
  margin-top: var(--s-4);
}

.stepcard {
  gap: var(--s-3);
}

.cstep p {
  margin-top: var(--s-4);
}

.cstep__list {
  margin-top: var(--s-5);
}

.price-step h3 {
  margin-bottom: var(--s-2);
}

.band p,
.splitban__panel p {
  margin-top: var(--s-4);
}

/* chips and any other control that inherited `line-height: normal`, which
   resolves differently per family and made a row of chips sit unevenly */
.chip,
.tab,
.lookup__tab,
.hero__tab,
.nav__links a,
.nav__signin,
.navmenu__sign {
  line-height: 1.35;
}

.chip em {
  line-height: 1.45;
}

/* ===== menu typography =====
   The nav is the first type a visitor reads and it was running at the default
   mono size with no optical tuning. Desktop keeps the mono voice (it is the
   system's label language) but gets a proper size, tracking and active state;
   the mobile panel gets display type with editorial leading. */
.nav__links {
  gap: clamp(1.4rem, 2.4vw, 2.4rem);
}

.nav__links a {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--ink-2);
  transition: color 0.22s var(--ease);
}

.nav__links a[aria-current="page"] {
  color: var(--ink);
}

.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav__signin {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.nav .btn--sm {
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  padding: 0.72rem 1.2rem;
}

/* -0.055em crushed the letters together at weight 800 - the i collided with
   the v and the two o's merged. Normal-ish tracking at 700 keeps it legible. */
.logo {
  font-size: 1.24rem;
  letter-spacing: -0.015em;
}

/* the panel is a full-screen menu, so it can carry real display type */
.navmenu a {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
  padding: var(--s-4) 0;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  transition: color 0.22s var(--ease), padding-left 0.28s var(--ease);
}

.navmenu a:hover,
.navmenu a:focus-visible {
  color: var(--cobalt);
  padding-left: var(--s-2);
}

/* a mono index against the display type: the pairing the rest of the page uses */
.navmenu a::before {
  content: counter(navitem, decimal-leading-zero);
  counter-increment: navitem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--cobalt);
  line-height: 1;
  position: relative;
  top: -0.9em;
  flex: none;
}

.navmenu {
  counter-reset: navitem;
}

.navmenu__sign::before {
  content: none !important;
}

.navmenu__sign {
  font-size: var(--t--1) !important;
  padding-top: var(--s-5) !important;
}

/* the cloned CTA is an <a> inside .navmenu, so it picked up the display-item
   rules and lost its centring */
.navmenu a.btn {
  display: block;
  text-align: center;
  font-family: var(--display);
  font-size: var(--t-0);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  padding: 1.05rem 1.5rem;
  margin-top: var(--s-5);
}

.navmenu a.btn::before {
  content: none;
}

.navmenu a.btn:hover {
  padding-left: 1.5rem;
  color: #fff;
}

/* ============================================================
   TIGHTER RHYTHM
   This block's heading used to claim Bricolage Grotesque ran the
   whole page; the declaration under it said Inter and always had.
   The type stack is now set once, in the consolidated HERO block at
   the end of this file. Only the spacing scale lives here.
   ============================================================ */
:root {
  /* tighter rhythm across the board */
  --s-1: 0.2rem;
  --s-2: 0.4rem;
  --s-3: 0.6rem;
  --s-4: 0.8rem;
  --s-5: 1.15rem;
  --s-6: 1.5rem;
  --s-7: 2.1rem;
  --s-8: 2.9rem;
  --s-9: 4rem;
}

/* the optical-size axis: let the face adapt rather than scaling one master */
h1,
h2,
h3,
h4,
.q,
.logo,
.btn {
  font-variation-settings: "opsz" 42;
}

.stat b,
.odo,
.vcard__price {
  font-variation-settings: "opsz" 60;
}

body,
p,
li,
label,
input,
.chip {
  font-variation-settings: "opsz" 14;
}

/* ---- spacing: pulled in roughly a third ---- */
.sect {
  padding-block: clamp(2.1rem, 5.5vw, 4rem);
}

.stats {
  padding-block: clamp(2rem, 5vw, 3.4rem);
}

.hero--compact {
  padding-block: clamp(1.25rem, 2.5vw, 2.1rem);
}

.band,
.banner {
  padding-block: clamp(2.4rem, 5.5vw, 4rem);
}

.funnel {
  padding-block: clamp(1.75rem, 4vw, 3rem) clamp(2.4rem, 6vw, 4.4rem);
}

.cstep {
  padding-block: clamp(1.75rem, 4vw, 3rem);
}

.foot {
  padding-block: clamp(2.1rem, 5vw, 3.2rem);
}

.sect-sub {
  margin-top: var(--s-3);
}

.steps,
.pricing,
.fleet,
.quotes,
.faq,
.compare-scroll {
  margin-top: clamp(1.5rem, 3.5vw, 2.4rem);
}

.stepcard,
.price-step {
  padding-top: var(--s-5);
}

.cstep__list {
  margin-top: var(--s-4);
}

.reassure {
  margin-top: var(--s-5);
}

.lookup {
  margin-top: var(--s-4);
}

/* ---- no scrollbar ----
   The nav's progress line already reports scroll position, which is the
   affordance a hidden scrollbar takes away. Scrolling itself is untouched:
   wheel, trackpad, keyboard and touch all behave normally. */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.compare-scroll {
  scrollbar-width: none;
}

.compare-scroll::-webkit-scrollbar {
  display: none;
}

/* ===== menu items in the display face =====
   The nav was the last thing still speaking in mono. Bricolage at a medium
   weight keeps the character of the rest of the page; the mono voice stays
   where it earns its keep - figures, plate fields and small labels. */
.nav__links a {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.3;
  font-variation-settings: "opsz" 16;
}

.nav__links a[aria-current="page"] {
  font-weight: 600;
}

.nav__signin {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.3;
  font-variation-settings: "opsz" 16;
}

.navmenu__sign {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  font-size: 1rem !important;
}

/* ===== menu items: the supplied spec =====
   16px / 400 / line-height 1 / letter-spacing 0 / #606060.
   Circular is proprietary, so the metrics are applied to the display face
   this site already loads rather than pulling in a licensed font. */
.nav__links a,
.nav__signin {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  color: #606060;
  margin: 0;
  padding: 0 0 3px;
  font-style: normal;
  font-variation-settings: "opsz" 16;
}

.nav__links a:hover,
.nav__signin:hover {
  color: var(--ink);
}

.nav__links a[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}

/* ===== entry cards =====
   Two large doors into the funnel, side by side. Borders rather than shadows
   so they sit in the same flat register as the rest of the page; the arrow
   fills with brand colour on hover so the whole card reads as one target. */
.sect--entry {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.entryrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
}

@media (max-width: 820px) {
  .entryrow {
    grid-template-columns: 1fr;
  }
}

.entry {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: clip;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s var(--ease);
}

.entry:hover {
  border-color: var(--ink);
}

.entry:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}

.entry__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: clamp(1.25rem, 2.4vw, 1.85rem);
}

.entry__head h2 {
  font-size: var(--t-1);
  margin: 0 0 0.45rem;
}

.entry__head p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-0);
  line-height: 1.5;
  max-width: 34ch;
}

.entry__go {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background 0.25s var(--ease);
}

.entry__go svg {
  width: 16px;
  height: 16px;
  display: block;
}

.entry:hover .entry__go {
  background: var(--cobalt);
}

.entry__media {
  line-height: 0;
  aspect-ratio: 16 / 10;
  margin-top: auto;
}

.entry__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}

.entry:hover .entry__media img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .entry:hover .entry__media img {
    transform: none;
  }
}

/* ============================================================
   CARD BOXES — matching Clutch
   Clutch encloses everything: a 4-up row sits inside ONE bordered
   box with internal dividers ("Pay less / More cars / ..."), and
   comparison columns are three SEPARATE bordered cards. This page
   was built the Swiss way instead - hairline border-top/border-left
   rules with no enclosure - so nothing read as a box. These rules
   convert each grid to one of those two Clutch shapes.
   ============================================================ */

/* --- one box, internal dividers: stats, pricing, coverage, faq --- */
.stats__grid,
.pricing,
.cities,
.faq {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper);
  overflow: clip;
}

.stats__grid {
  padding: 0;
}

.stat {
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
  border-left: 1px solid var(--rule);
}

.stat:first-child {
  padding-left: clamp(1.25rem, 2.4vw, 1.9rem);
  border-left: 0;
}

.pricing {
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.price-step {
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
  border-top: 0;
  border-left: 1px solid var(--rule);
}

.price-step:first-child {
  padding-left: clamp(1.25rem, 2.4vw, 1.9rem);
  border-left: 0;
}

.cities li {
  border-top: 1px solid var(--rule);
}

.cities li:nth-child(-n+2) {
  border-top: 0;
}

.cities li:nth-child(odd) {
  border-right: 1px solid var(--rule);
}

.cities a {
  padding: 0.95rem clamp(1rem, 2vw, 1.4rem);
}

.cities a:hover {
  padding-left: clamp(1.35rem, 2.4vw, 1.8rem);
}

.faq {
  border-top: 1px solid var(--rule);
}

.faq details:last-child {
  border-bottom: 0;
}

.faq summary {
  padding-inline: clamp(1.1rem, 2.2vw, 1.75rem) 3rem;
}

.faq details p {
  padding-inline: clamp(1.1rem, 2.2vw, 1.75rem);
}

.faq summary::after {
  right: clamp(1.1rem, 2.2vw, 1.75rem);
}

/* --- separate bordered cards: steps and testimonials --- */
.steps,
.quotes {
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
}

.stepcard,
.quote {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: clamp(1.35rem, 2.6vw, 2rem);
  transition: border-color 0.25s var(--ease), opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.stepcard {
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}

.stepcard:hover,
.quote:hover {
  border-color: var(--ink);
}

.quote {
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  padding-bottom: clamp(1.35rem, 2.6vw, 2rem);
}

.quotes>.quote:first-child {
  padding-left: clamp(1.35rem, 2.6vw, 2rem);
  border-left: 1px solid var(--rule);
}

@media (max-width: 900px) {
  .quote {
    border-left: 1px solid var(--rule);
    padding-left: clamp(1.35rem, 2.6vw, 2rem);
    padding-bottom: clamp(1.35rem, 2.6vw, 2rem);
  }

  .stepcard {
    border-left: 1px solid var(--rule);
    padding-left: clamp(1.35rem, 2.6vw, 2rem);
  }
}

/* ============================================================
   UX PASS
   Four measured problems, not stylistic preferences.
   ============================================================ */

/* 1. Heading hierarchy. Ten section headings render at 41.6px and two at
      35.84px - close enough to read as a mistake rather than a deliberate
      level. Both of these head full-width sections, so they join the others. */
.cert h3,
.splitban__panel h2 {
  font-size: var(--t-3);
}

/* 2. The certified row's text column measured 896px while the paragraph inside
      capped at 56ch = 599px, leaving a 297px void inside the box. Letting the
      copy run to 72ch fills the column it was given. */
.cert p {
  max-width: 72ch;
}

.cert h3 {
  max-width: 26ch;
}

/* 3. Tap targets. These links were 18-19px tall - the text height, with no
      vertical padding - against a 24px WCAG 2.2 minimum and 44px on touch.
      Padding is added without shifting layout, using negative margins where a
      row's alignment depends on the old box. */
.announce a,
.lookup__note button,
.nav__links a,
/* This sets a larger tap target, but it was unmediated and sits after the
   `@media (max-width: 940px) { .nav__signin { display: none } }` further up
   - same specificity, later in the file, so it won it back and Sign in
   reappeared on phones, wrapping to two lines beside the burger. It is
   already in the mobile panel, so it is only wanted on desktop. */
@media (min-width: 941px) {
  .nav__signin {
    display: inline-block;
    padding-block: 0.6rem;
    margin-block: -0.6rem;
  }
}

@media (hover: none) {

  /* on touch, give them the full 44px rather than 24px */
  .announce a,
  .lookup__note button,
  .cities a {
    padding-block: 0.85rem;
    margin-block: -0.85rem;
  }
}

/* 4. The micro step rendered at 11.84px. Nudged over the 12px floor; it still
      reads as the smallest thing on the page. */
:root {
  --t--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
}

/* Footer and notice links were missed by the pass above: still 16px and 22px
   tall, inline with no padding. The footer list already has a 0.55rem row gap,
   so padding here is additive rather than negative-margined - it grows the
   column slightly, which a footer can afford. */
.foot a {
  display: inline-block;
  padding-block: 0.4rem;
}

.foot ul {
  gap: 0.15rem;
}

.notice__in a {
  display: inline-block;
  padding-block: 0.5rem;
  margin-block: -0.5rem;
}

/* The eyebrow was hard-coded at 0.74rem = 11.84px, below the 12px floor and
   the only thing on the page ignoring the type scale. Uppercase at 0.16em
   tracking needs the size less than body copy does, but not that little. */
.eyebrow {
  font-size: 0.8rem;
}

/* Narrow phones. The type-scale nudge above widened the nav CTA enough to push
   the burger off-screen at 360px as well as 320 - the bar needs logo + CTA +
   burger + gutters in a space that cannot hold them at full size. Shrinking the
   CTA recovers the room; below 340px it gives way entirely and the burger
   carries the same action. */
@media (max-width: 420px) {
  .nav__inner {
    gap: 0.5rem;
  }

  .nav__right {
    gap: 0.5rem;
  }

  .nav__right .btn {
    padding-inline: 0.7rem;
    font-size: 0.78rem;
    letter-spacing: 0;
  }
}

@media (max-width: 340px) {
  .nav__right .btn {
    display: none;
  }
}

/* The certified row was the one block the card pass missed. It kept the old
   Swiss treatment - a 2px black rule across the top and no enclosure - while
   every other section on the page became a 1px bordered box at 8px radius, so
   it read as a leftover from the previous design. Now it matches, and the
   badge and button centre against the copy instead of hanging from the top. */
.cert {
  border-top: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper);
  padding: clamp(1.35rem, 2.6vw, 2rem);
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
  transition: border-color 0.25s var(--ease);
}

.cert:hover {
  border-color: var(--ink);
}

.cert h3 {
  margin-bottom: 0.6rem;
}

@media (max-width: 820px) {

  /* stack: the ghost button beside a 26ch heading leaves nothing usable */
  .cert {
    grid-template-columns: auto 1fr;
  }

  .cert .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
/* ============================================================
   BOXED-GRID PADDING REPAIR
   Three media queries still zeroed padding-left so a wrapped cell
   would align to the page edge. That was right when these grids had
   no enclosure. Inside a bordered box it strands the content against
   the border - visible on the stats at 2 columns, where "7 / Days
   your offer stays locked" sat flush to the frame. Padding restored,
   and a row divider added where cells now wrap onto a second line.
   ============================================================ */
@media (max-width: 860px) {
  .stats__grid { gap: 0; }
  .stat:nth-child(3) { padding-left: clamp(1.25rem, 2.4vw, 1.9rem); border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 900px) {
  .stepcard { border-left: 1px solid var(--rule); padding-left: clamp(1.35rem, 2.6vw, 2rem); padding-bottom: clamp(1.35rem, 2.6vw, 2rem); }
  .price-step:nth-child(3) { padding-left: clamp(1.25rem, 2.4vw, 1.9rem); border-left: 0; }
  .price-step:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 560px) {
  .price-step { padding-left: clamp(1.25rem, 2.4vw, 1.9rem); border-left: 0; }
  .price-step:nth-child(n+2) { border-top: 1px solid var(--rule); }
}

/* .stepcard:first-child and .price-step:first-child zero the left padding at
   every width, not just in a media query, and :first-child outranks the plain
   .stepcard rule on specificity no matter which comes later. Same cause as the
   stats: correct when the grid had no frame, wrong now the card has one. */
.stepcard:first-child { padding-left: clamp(1.35rem, 2.6vw, 2rem); border-left: 1px solid var(--rule); }
.price-step:first-child { padding-left: clamp(1.25rem, 2.4vw, 1.9rem); }
.quotes > .quote:first-child { padding-left: clamp(1.35rem, 2.6vw, 2rem); }

/* ============================================================
   COMPARISON TABLE -> CARD
   The last grid still wearing the Swiss treatment: cells padded to
   zero on the left, a 2px black rule under the head, and no frame.
   Now a bordered box with internal dividers, like every other
   section and like Clutch's own comparison columns.
   ============================================================ */
.compare-scroll {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper);
  overflow: hidden;      /* clips the corners; the inner wrapper scrolls */
  overflow-x: auto;
}
.compare th,
.compare td {
  /* was padded to 0 on the left so the first column met the page edge */
  padding: 1.15rem clamp(0.9rem, 1.6vw, 1.35rem);
}
.compare thead th {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);   /* was a 2px black rule */
  padding-block: 0.9rem;
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
/* the highlighted column reads as a lane through the card, the way Clutch
   marks "The Clutch way" against the two either side of it */
.compare thead th.us,
.compare td.us {
  border-left: 1px solid var(--rule);
  background: color-mix(in srgb, var(--cobalt-w) 45%, transparent);
}
.compare thead th.us { background: var(--cobalt-w); }

/* ============================================================
   SMOKE-WHITE PAGE
   The page ground goes to whitesmoke while every card surface stays
   pure white. That separation is what gives Clutch its depth: the
   boxes read as raised because they are lighter than what they sit
   on, not because of a shadow. Until now --paper served as both the
   page and the card, so the two could not differ.
   ============================================================ */
:root { --page: #F5F5F5; }
body, .page { background: var(--page); }

/* sections stop painting white over the smoke ground; the hairline
   border-block they carry still separates one from the next */
.sect--alt { background: transparent; }
.trustband, .notice { background: transparent; }

/* card surfaces stay pure white so they lift off the ground */
.stats__grid, .pricing, .cities, .faq,
.stepcard, .quote, .vcard, .cert, .entry,
.compare-scroll, .lookup, .card { background: #FFFFFF; }
.compare thead th { background: #FAFAFA; }

/* The film-hero overrides that lived here are superseded by the
   consolidated HERO block at the end of this file. */

/* ============================================================
   BLUE, NOT BLACK
   Every dark band moves off --ink onto the brand. The footer takes
   the deeper shade so the page still lands on something heavier than
   the bands above it, rather than one flat blue from top to bottom.
   ============================================================ */
.announce { background: var(--cobalt-d); }
.banner--ink { background: var(--cobalt); }
.splitban { background: var(--cobalt); border-block-color: var(--cobalt); }
.stripbar { background: var(--cobalt); border-bottom-color: var(--cobalt); }
.foot { background: var(--cobalt-d); }
.foot__legal { border-top-color: rgba(255, 255, 255, 0.18); }
.foot .logo__mark { color: #fff; }

/* ============================================================
   CENTRED SECTION HEADINGS
   ============================================================ */
.sect-h, .sect-sub { text-align: center; margin-inline: auto; }
.sect-h { max-width: 26ch; }
.sect-sub { max-width: 58ch; }
/* two-column sections keep their heading beside the content it introduces -
   centring inside a half-width column reads as a mistake, not a choice */
.coverage .sect-h, .coverage .sect-sub,
.funnel h2, .funnel .sect-sub,
.cert h3, .cert p { text-align: left; margin-inline: 0; }

/* The two feature bands ran a two-column grid: heading left, supporting text
   right. Centring the heading inside half a row reads as a mistake, so the
   grid collapses to one centred column instead - which suits a full-bleed
   band better than a split ever did. */
.banner__grid, .band__grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.banner h2, .band h2 { text-align: center; margin-inline: auto; max-width: 22ch; }
.banner__meta, .band p, .band__note { text-align: center; margin-inline: auto; }
.band__cta { align-items: center; }
.banner__rule { margin-inline: auto; }

/* Footer stays dark. It grounds the page, and a blue band at the very bottom
   after the blue CTA band directly above it read as one long block of colour. */
.foot { background: var(--ink); }
.foot__legal { border-top-color: #2A2E34; }

/* ============================================================
   BLUE BANDS -> CARDS
   These ran full-bleed edge to edge while everything around them
   had become an inset box. Now they sit on the smoke ground at the
   same left edge as every other card: width is the container minus
   two gutters, which is exactly where .stats__grid and friends start.
   ============================================================ */
.band, .banner--ink, .splitban, .stripbar {
  width: min(calc(100% - var(--gut) * 2), calc(var(--maxw) - var(--gut) * 2));
  margin-inline: auto;
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--r-lg);
  overflow: clip;
  border: 0;
}
/* their inner wrap was adding the page gutter a second time; now it is simply
   the card's own padding */
.band > .wrap, .banner--ink > .wrap, .stripbar > .wrap {
  max-width: none;
  padding-inline: clamp(1.5rem, 4vw, 3.25rem);
}
.splitban { border-block: 0; }


/* ============================================================
   HERO - consolidated. Single source of truth.

   Five separate override blocks had accumulated for .herofilm,
   each partly undoing the last, so the rendered hero was an
   accident of cascade order rather than a decision. They are
   gone; everything below this comment is the hero.

   Three changes carry the whole thing:

     1. ONE OBJECT. The film was a rounded page-card and the plate
        field was a second white card with a three-layer drop
        shadow overlapping it. Two widgets, not a hero. The film
        now runs full bleed and the field is a glass bar flush to
        its lower edge - same panel, two materials, one hairline.
     2. THE FOOTAGE IS VISIBLE. Two stacked scrims at 0.90 and
        0.58 had reduced a 299KB video to a navy rectangle with a
        smudge in it. One directional scrim instead: dense on the
        left where the copy needs a ground, clear on the right
        where the car actually is.
     3. NO TINTED ACCENT WORD. "driveway" was #9FB2E8, which made
        the one word the page is built around the lowest-contrast
        text in the hero. Emphasis is italic of the same family.
   ============================================================ */

/* ---- type ----
   Set once in the token block at the top of this file. Nothing here. */

/* ---- the panel ---- */
.herofilm {
  position: relative;
  isolation: isolate;
  overflow: clip;

  /* full bleed. No card, no radius, no margin - see rule 1 above. */
  width: auto;
  max-width: none;
  margin: 0;
  border-radius: 0;
  border-bottom: 0;

  /* announcement bar + nav come to ~118px, so the hero fills the rest
     of the first screen exactly and the plate field lands just above
     the fold rather than below it. Capped so it does not become a
     letterbox on a tall monitor. */
  min-height: min(720px, calc(100dvh - 118px));
  padding: 0;

  background: #06102B;
  color: #fff;
}

.herofilm__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* The footage is graded very dark - on a bright monitor the car reads,
   on anything else it disappeared entirely once the scrim went over it.
   Lifted here rather than by thinning the scrim, so the copy keeps its
   contrast ground. */
.herofilm__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 47%;
  display: block;
  filter: brightness(1.5) contrast(1.06) saturate(0.92);
}

/* One scrim, directional. Dense at the left edge where the headline
   sits (white on this clears 14:1), clearing to nothing by 70% across
   so the car is lit where the light in the frame already is. The
   second layer is a short bottom anchor for the glass bar. */
.herofilm::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(6, 16, 43, 0.93) 0%,
      rgba(6, 16, 43, 0.86) 22%,
      rgba(6, 16, 43, 0.52) 48%,
      rgba(6, 16, 43, 0.14) 72%,
      rgba(6, 16, 43, 0.04) 100%),
    linear-gradient(to bottom,
      rgba(6, 16, 43, 0.34) 0%,
      rgba(6, 16, 43, 0) 24%,
      rgba(6, 16, 43, 0) 44%,
      rgba(6, 16, 43, 0.30) 74%,
      rgba(6, 16, 43, 0.52) 100%);
}

/* ---- copy ---- */
/* Anchored to the lower third rather than centred. A film panel reads as a
   poster, and a poster sets its type off the bottom edge: the empty upper
   half is the frame doing its job, not a gap. Centring left 165px above the
   kicker against 70px under the lede, which looks like a mistake either way. */
.herofilm__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.75rem, 5.5vw, 4.25rem);
}

.herofilm__copy {
  width: 100%;
}

/* Was a mono all-caps label at 0.22em tracking with a rule under it -
   the small-caps eyebrow every generated page ships. Sentence case in
   the reading face says the same thing without the costume. */
.herofilm__kicker {
  font-family: var(--sans);
  font-size: clamp(0.82rem, 0.78rem + 0.14vw, 0.92rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.80);
  border: 0;
  padding: 0;
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.7rem);
}

.herofilm h1 {
  font-family: var(--display);
  font-size: clamp(2.55rem, 1.35rem + 4.6vw, 5.25rem);
  font-weight: 600;
  /* 1.1 is the floor for display italic carrying a descender: the y in
     "driveway" clips at anything tighter. The padding is real reserve
     under the second line so it cannot touch the lede either. */
  line-height: 1.1;
  letter-spacing: -0.032em;
  color: #fff;
  max-width: 14ch;
  margin: 0 0 clamp(1.2rem, 2.4vw, 1.9rem);
  padding-bottom: 0.06em;
  text-wrap: balance;
}

/* Same family, same colour, same weight. Only the angle changes. */
.herofilm h1 em {
  font-style: italic;
  font-weight: 600;
  color: inherit;
}

.herofilm__lede {
  font-family: var(--sans);
  font-size: clamp(1.02rem, 0.94rem + 0.42vw, 1.22rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 44ch;
  margin: 0;
}

/* ---- the action bar ----
   Removed. The plate row was a translucent glass bar across the foot of
   the panel; it is now a solid capsule inside the copy column. See the
   CAPSULE CONTROLS block at the end of this file. */

/* ---- entry ----
   MOTION_INTENSITY 4. One staggered lift on load, nothing perpetual.
   It exists to establish reading order on a panel that has no other
   hierarchy cue: kicker, then headline, then lede, then the bar. */
@media (prefers-reduced-motion: no-preference) {
  .js .herofilm__kicker,
  .js .herofilm h1,
  .js .herofilm__lede,
  .js .herofilm__copy .lookup {
    animation: herorise 0.85s var(--ease) backwards;
  }

  .js .herofilm__kicker { animation-delay: 0.05s; }
  .js .herofilm h1      { animation-delay: 0.13s; }
  .js .herofilm__lede   { animation-delay: 0.24s; }
  .js .herofilm__copy .lookup { animation-delay: 0.34s; }

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

/* ---- small screens ----
   The row stacks below 820px, which makes the bar tall. The panel stops
   trying to fill the viewport and lets the film keep a fixed slice
   while the bar flows underneath it. */
@media (max-width: 900px) {
  .herofilm {
    min-height: 0;
  }

  .herofilm__video,
  .herofilm__media {
    object-position: 64% 54%;
    background-position: 64% 54%;
  }

  .herofilm__inner {
    min-height: clamp(300px, 44vh, 400px);
    padding-block: clamp(2.5rem, 8vw, 3.5rem) clamp(2rem, 6vw, 3rem);
  }

  .herofilm h1 {
    max-width: 100%;
  }

  .herofilm::after {
    background:
      linear-gradient(to top,
        rgba(6, 16, 43, 0.94) 0%,
        rgba(6, 16, 43, 0.72) 45%,
        rgba(6, 16, 43, 0.40) 78%,
        rgba(6, 16, 43, 0.24) 100%);
  }
}

@media (max-width: 820px) {
  .lookup--onfilm .lookup__field {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-left: 0;
  }

  .lookup--onfilm .lookup__field + .lookup__field {
    padding-left: 0;
  }

  .lookup--onfilm .btn--go {
    margin: 1rem 0;
    width: 100%;
    padding-block: 0.95rem;
  }
}

/* the poster is the hero for anyone who asked for stillness */
@media (prefers-reduced-motion: reduce) {
  .herofilm__video {
    display: none;
  }

  .herofilm__media {
    background: #06102B url("../video/hero-poster.jpg") 54% 47% / cover no-repeat;
  }
}

/* These were 64px top and bottom - 128px of empty vertical space wrapped
   around 235px of content. That reads as generous on a full-bleed band that
   spans the viewport; on an inset card it just looks hollow. Scaled to what
   a card of this size actually needs. */
.banner, .band { padding-block: clamp(1.75rem, 3.2vw, 2.75rem); }

/* Bar trim. Three stacked rows (tabs, fields, note) came to 179px, a quarter
   of the panel, which made the film read as a strip above a form rather than
   a hero with a field in it. Same three rows, tighter. */
.lookup--onfilm .lookup__tab {
  padding-block: 0.55rem;
}

.lookup--onfilm .lookup__field {
  padding-block: 0.85rem;
}

.lookup--onfilm .lookup__note {
  padding-block: 0.7rem;
  font-size: 0.7rem;
}

.lookup--onfilm .btn--go {
  margin-block: 0.6rem;
}

/* The frame is a long silhouette receding to the right. At 62% the nose ran
   off the edge; this seats the whole car inside the clear half of the scrim. */
.herofilm__video {
  object-position: 48% 52%;
}

@media (prefers-reduced-motion: reduce) {
  .herofilm__media {
    background-position: 48% 52%;
  }
}

/* One blue everywhere: #1A3A8F. The announce bar and the hero were on the
   deeper --cobalt-d, which made three different blues on one page. The hero
   scrim is tinted with the same value rather than a separate navy. */
.announce { background: var(--cobalt); }
.herofilm { background: var(--cobalt); }
.herofilm::after {
  background:
    linear-gradient(to top, rgba(26, 58, 143, 0.92) 0%, rgba(26, 58, 143, 0.60) 38%, rgba(26, 58, 143, 0.16) 72%, rgba(26, 58, 143, 0) 100%),
    linear-gradient(to right, rgba(12, 26, 66, 0.62) 0%, rgba(12, 26, 66, 0.22) 45%, rgba(12, 26, 66, 0) 80%);
}

/* The 16/9 ratio here was added to stop a 820x700 source forcing a 615px row
   when the text panel only needed 382px. The panel has since grown to 435px,
   so the ratio inverted: it now caps the image at 303px and leaves 133px of
   blue under it. The panel governs the height either way, so the media simply
   stretches to the row and crops - with a min-height for the stacked case,
   where there is no panel beside it to set one. */
.splitban { align-items: stretch; }
.splitban__media { aspect-ratio: auto; height: 100%; }
.splitban__media img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; }
@media (max-width: 900px) {
  /* stacked: no panel beside it to set the height, so the source's own 3:2
     would run to 565px at tablet and dominate the card. Fixed band instead. */
  .splitban__media { height: clamp(200px, 30vw, 300px); min-height: 0; }
}

/* ============================================================
   THE BLUE PANELS - .banner--ink, .band, .splitban

   All three were built when these panels were --ink (#191919) and
   were never retuned when the BLUE, NOT BLACK pass moved them onto
   --cobalt. Four things followed from that, plus one specificity
   bug that had nothing to do with the colour change:

     1. Secondary copy stayed #9BA0A7, a grey picked to sit on
        near-black. On cobalt it measures 3.90:1 and fails AA.
     2. .banner__rule is a cobalt bar. It has been sitting on a
        cobalt panel, invisible, ever since.
     3. .band__note is a <p> inside .band, so `.band p` (0,0,1,1)
        outranks `.band__note` (0,0,1,0) and the footnote has been
        rendering at 22.4px - identical to the lede above it, which
        inverts the hierarchy of the page's closing CTA.
     4. 44px of vertical padding on a 1076px panel carrying a 42px
        headline reads as cramped rather than generous.
   ============================================================ */

/* One scale for text on cobalt, so no panel invents its own grey
   again. Every value is measured against #1A3A8F:
     -2  7.2:1   secondary copy
     -3  5.9:1   footnotes and quiet meta
   Both clear AA at the sizes they are used at. */
.banner--ink,
.band,
.splitban__panel {
  --on-cobalt-2: rgba(255, 255, 255, 0.82);
  --on-cobalt-3: rgba(255, 255, 255, 0.72);
}

/* ---- room ----
   Was clamp(1.75rem, 3.2vw, 2.75rem): 44px top and bottom. These are
   the two feature panels on the page and they were the tightest
   things on it. */
.banner,
.band {
  padding-block: clamp(2.5rem, 4.5vw, 3.75rem);
}

/* ---- banner: the guarantee ---- */

/* A cobalt bar on a cobalt panel. Reduced to a short centred tick in
   white, which is what a rule above a centred headline is for. */
.banner--ink .banner__rule {
  width: 44px;
  height: 2px;
  background: rgba(255, 255, 255, 0.45);
  margin-bottom: clamp(1rem, 2vw, 1.35rem);
}

.banner--ink h2 {
  margin-block: 0;
}

/* The three guarantees, as a row rather than three centred lines of
   different lengths. Hairlines between them, not boxes - the panel
   already is the box. */
.banner__points {
  list-style: none;
  display: grid;
  /* not equal thirds: the three qualifiers run 50, 41 and 34 characters,
     so equal columns left the first wrapping to three lines and the last
     to one. Weighted to the copy, all three land on two. */
  grid-template-columns: 1.18fr 1fr 0.92fr;
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
  width: 100%;
  max-width: 900px;
  margin: clamp(0.25rem, 1vw, 0.75rem) auto 0;
  padding: 0;
  text-align: left;
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--on-cobalt-2);
}

.banner__points li {
  margin: 0;
  padding-left: clamp(1.25rem, 2.6vw, 2.25rem);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.banner__points li:first-child {
  padding-left: 0;
  border-left: 0;
}

/* the claim leads, the qualifier follows */
.banner__points b {
  display: block;
  color: #fff;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

@media (max-width: 780px) {
  .banner__points {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 34rem;
  }

  .banner__points li {
    padding-left: 0;
    padding-top: 1rem;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
  }

  .banner__points li:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

/* ---- band: the closing CTA ---- */

.band h2 {
  margin-block: 0;
}

.band .band__grid > div:first-child > p {
  margin: clamp(0.85rem, 1.6vw, 1.15rem) auto 0;
  color: var(--on-cobalt-2);
}

.band__cta {
  gap: clamp(1rem, 2vw, 1.35rem);
  margin-top: clamp(0.5rem, 1.4vw, 1rem);
}

/* More presence. This is the last CTA on the page and it was a 180px
   button under a 42px headline on a 1076px panel. */
.band .btn--go {
  padding: 1.05rem 2.25rem;
  font-size: 1rem;
  font-weight: 600;
}

/* The specificity fix. `.band p` was winning, so this footnote has
   been rendering at 22.4px - the same size as the lede - which read
   as a second sentence of the pitch rather than as a footnote. */
.band .band__note {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--on-cobalt-3);
  max-width: 42ch;
  margin: 0 auto;
}

/* ---- splitban ---- */

/* the same near-black grey, the same 3.90:1 */
.splitban__panel p {
  color: var(--on-cobalt-2);
}

/* ============================================================
   CAPSULE CONTROLS + FORM LEGIBILITY

   Two problems, one pass.

   LEGIBILITY. Placeholder text is --ink-3 (#ABABAB) on white,
   which measures 2.30:1 and fails AA on every form on the site.
   Input borders are --rule-2 (#EEEEEE) at 1.16:1, so the fields
   themselves barely read as fields. In the hero it was worse
   again: the plate row was translucent white text on a glass bar
   over moving footage, so its legibility depended on which frame
   happened to be behind it. Solid surfaces and real contrast
   below; the hero row is now ink on white and cannot be
   undermined by the video at all.

   SHAPE. Controls become capsules: the tab pairs are segmented
   pills, inputs and buttons take the pill radius. The rule for
   the page is now explicit and applies everywhere:
       controls (tabs, inputs, buttons)  -> --r-pill
       panels and cards                  -> --r-lg
   ============================================================ */

:root {
  /* 5.10:1 on white. --ink-3 stays what it is for large non-essential
     text; it was never a safe value for placeholders. */
  --placeholder: #6E6E6E;
  /* 3.03:1 on white, which is the non-text minimum for a control
     boundary. --rule-2 at 1.16:1 was decorative, not a border. */
  --field-line: #949494;
}

/* ---- segmented capsule: the funnel's .tabs ---- */
.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--sand);
  max-width: none;
  width: fit-content;
}

.tab {
  flex: 0 0 auto;
  padding: 0.55rem 1.25rem;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-weight: 500;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

/* the divider belonged to a boxed pair; a segmented pill has none */
.tab + .tab {
  border-left: 0;
}

.tab:hover {
  color: var(--ink);
}

.tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
}

.tab:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

/* ---- segmented capsule: .lookup__tabs on interior pages ---- */
.lookup__tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: clamp(0.9rem, 2vw, 1.15rem);
  margin-bottom: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--sand);
  width: fit-content;
}

.lookup__tab {
  padding: 0.5rem 1.15rem;
  border-radius: var(--r-pill);
  border-bottom: 0;
  margin-bottom: 0;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-2);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.lookup__tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
  border-bottom-color: transparent;
}

.lookup__tab:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

/* ---- capsule fields, site wide ---- */
.field input,
.field select {
  border-radius: var(--r-pill);
  border-color: var(--field-line);
  padding: 0.85rem 1.15rem;
}

.field input::placeholder {
  color: var(--placeholder);
}

.field input:focus,
.field select:focus {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px var(--cobalt-w);
}

/* ---- the hero capsule ---- */

.herofilm__copy .lookup {
  max-width: 46rem;
  margin: clamp(1.75rem, 3.4vw, 2.6rem) 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.herofilm__copy .lookup:focus-within {
  box-shadow: none;
}

/* dark-ground segmented pill, so it reads as part of the film */
.lookup--onfilm .lookup__tabs {
  margin: 0 0 0.85rem;
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.24);
}

.lookup--onfilm .lookup__tab {
  color: rgba(255, 255, 255, 0.82);
}

.lookup--onfilm .lookup__tab[aria-selected="true"] {
  background: #fff;
  color: var(--cobalt-d);
}

.lookup--onfilm .lookup__tab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* One white capsule. Ink on white is 17.6:1 and owes nothing to the
   frame behind it, which is the entire point of the change. */
.lookup--onfilm .lookup__row {
  background: #fff;
  border-radius: var(--r-pill);
  padding: 0.45rem 0.45rem 0.45rem clamp(1.1rem, 2.2vw, 1.6rem);
  grid-template-columns: 1.05fr 0.8fr auto;
  align-items: center;
  gap: 0;
}

.lookup--onfilm .lookup__field {
  border-right: 1px solid var(--rule);
  padding: 0.35rem clamp(0.9rem, 1.8vw, 1.35rem) 0.35rem 0;
  gap: 0.1rem;
}

.lookup--onfilm .lookup__field + .lookup__field {
  padding-left: clamp(0.9rem, 1.8vw, 1.35rem);
}

.lookup--onfilm .lookup__field label {
  color: var(--ink-2);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.lookup--onfilm .lookup__field input {
  color: var(--ink);
  font-size: 1.05rem;
}

.lookup--onfilm .lookup__field input::placeholder {
  color: var(--placeholder);
}

.lookup--onfilm .lookup__field:focus-within {
  box-shadow: none;
}

.lookup--onfilm .lookup__field:focus-within label {
  color: var(--cobalt);
}

.lookup--onfilm .btn--go {
  background: var(--cobalt);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  margin: 0;
  padding: 0.95rem 1.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.lookup--onfilm .btn--go:hover {
  background: var(--cobalt-d);
  color: #fff;
}

.lookup--onfilm .btn--go:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* the note stays on the film, so it stays light */
.lookup--onfilm .lookup__note {
  border-top: 0;
  padding: 0.85rem 0 0;
  color: rgba(255, 255, 255, 0.80);
  font-size: 0.78rem;
}

.lookup--onfilm .lookup__note b {
  color: #fff;
  font-weight: 600;
}

.lookup--onfilm .lookup__note button {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.lookup--onfilm .lookup__err {
  color: #FFC4B7;
  padding: 0.6rem 0 0;
}

/* ---- hero copy ----
   The subheading was 0.82 white. It sits over the part of the frame
   with the most light in it, so it goes to near-solid. */
.herofilm__lede {
  color: rgba(255, 255, 255, 0.94);
}

.herofilm__kicker {
  color: rgba(255, 255, 255, 0.88);
}

/* the panel no longer has a bottom bar to hold, so it is a plain
   column again rather than a two-row grid */
.herofilm {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.herofilm__inner {
  flex: 1 1 auto;
}

/* ---- small screens ----
   A stacked column inside a full pill looks like a mistake, so the
   container relaxes to the panel radius and each control keeps its
   own capsule. */
/* ---- small screens ----
   The row kept its desktop `1.05fr 0.8fr auto` here, because the mobile
   block below never overrode grid-template-columns - so three tracks were
   crushed into 390px, the labels wrapped to three lines each and the
   inputs truncated to "CV8 ." and "V6".

   The two fields stay side by side, which is what the capsule is for, and
   the CTA takes the full width underneath them inside the same capsule. */
@media (max-width: 820px) {
  .lookup--onfilm .lookup__row {
    grid-template-columns: 1fr 1fr;
    border-radius: var(--r-lg);
    padding: 0.5rem 0.5rem 0.5rem 1.05rem;
    row-gap: 0.5rem;
  }

  .lookup--onfilm .lookup__field {
    padding-block: 0.4rem;
  }

  /* the second field now ends at the capsule edge, so it needs no divider */
  .lookup--onfilm .lookup__field + .lookup__field {
    border-right: 0;
  }

  .lookup--onfilm .lookup__field label {
    font-size: 0.68rem;
  }

  .lookup--onfilm .lookup__field input {
    font-size: 1rem;
  }

  .lookup--onfilm .btn--go {
    grid-column: 1 / -1;
    width: 100%;
    padding-block: 0.95rem;
  }
}

/* Controls are capsules, and that has to include buttons or the rule is
   not a rule: pill tabs and pill inputs around an 8px button reads as an
   unfinished pass. Panels and cards keep --r-lg; only controls are pills. */
.btn,
.btn--sm,
.btn--ghost,
.chip {
  border-radius: var(--r-pill);
}

/* car2 is a portrait shot with the car in the lower third and a blossoming
   tree filling the top. A centred crop in a 4:3 card gives most of the frame
   to the tree, so the focal point moves down to where the vehicle is. */
.vcard__art img[src*="car2"] { object-position: 50% 78%; }
/* car1 is portrait too, but the Range Rover sits mid-frame and centres well;
   a small nudge keeps the roofline off the top edge. */
.vcard__art img[src*="car1"] { object-position: 50% 58%; }

/* The FAQ was capped at 900px from the days when it was a bare ruled list and
   a long answer needed a comfortable measure. It is a bordered card now, sitting
   in a 1076px column beside full-width cards, and the cap left it visibly
   narrower than everything around it. The answer text keeps its own 68ch
   measure, so line length is unaffected by the card going full width. */
.faq { max-width: none; }





/* Steps 1 and 2 now carry photographs where the .turn placeholder used to sit.
   They take the same frame the placeholder had - 4:3, bordered, rounded - so
   the row still lines up with step 3, which is still on the drawn placeholder. */
.cstep__media img {
  width: 100%;
  /* height:auto is load-bearing. The markup carries height="1122" for layout
     reservation, and a definite width AND height makes the browser ignore
     aspect-ratio entirely - the image rendered 506x1122 instead of 506x380. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--r);
}

/* ============================================================
   ANIMATION REMOVED
   Everything below is the off switch. The reveals were driven by
   IntersectionObserver adding .is-in to elements that started at
   opacity:0 - so if the observer never fired, the content stayed
   invisible. The car slid in on a CSS scroll timeline. Lenis and
   GSAP are gone from the markup entirely.
   Content is simply visible now, with nothing to go wrong.
   ============================================================ */
.js .stepcard, .js .vcard, .js .sect-h, .js .sect-sub,
.js .funnel h2, .js .stat, .js .quote,
.split .ch, .split .wd, .split {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* the car that drove in along the road, and every other scroll timeline */
.funnel__car, .funnel__road, .herofilm__video,
.hero .photo img, .vcard__art .photo img {
  animation: none !important;
  animation-timeline: none !important;
  transform: none !important;
}
.funnel__road { display: none; }

/* marquee kept still as well - it was the last thing moving */
.marquee__track { animation: none !important; transform: none !important; }

/* Wordmark set as the brand draws it: uppercase, tight, with the check-in-circle
   mark sized to the cap height beside it. */
.logo {
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-weight: 800;
}
.logo__mark { width: 1.15em; height: auto; flex: none; }

/* [hidden] sets display:none at the UA level, which any class carrying its own
   display beats on specificity - .grid2 is display:grid, so the conditional
   lender block rendered even while hidden. This restores the attribute's
   meaning for every such block, not just that one. */
[hidden] { display: none !important; }

/* ===== logo lockup =====
   The real brand asset replaces the drawn mark and the type-set wordmark.
   It is a fixed cobalt PNG, so it cannot follow currentColor the way the SVG
   did - and the footer sits on near-black, where cobalt has too little
   contrast. brightness(0) crushes it to solid black, invert(1) flips that to
   pure white, which is what the footer had before. */
.logo__img {
  display: block;
  width: auto;
  /* the nav bar is 70px tall; this lands the lockup at ~38px, matching the
     visual weight of the mark-plus-wordmark it replaced */
  height: 2.4em;
  flex: none;
}
.foot .logo__img { filter: brightness(0) invert(1); }
/* the wordmark is part of the image now, so the text rules no longer apply */
.logo { gap: 0; letter-spacing: normal; font-size: 1rem; }

/* ============================================================
   STEPPER PAGE — self-contained, no page scroll
   Steps 2 to 4 run 981-1506px against roughly 737px of usable
   viewport, so the page had to scroll while you filled the form.
   The card becomes a fixed-height panel instead: progress pinned
   at the top, actions pinned at the foot, and only the questions
   between them scroll. The flow no longer moves under you.
   ============================================================ */
.funnel--page { padding-block: clamp(1rem, 2vw, 1.75rem); }
.funnel--page .funnel__grid { align-items: start; }

.funnel--page .card {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 71px - 3.5rem);   /* viewport less the nav and the band above */
  max-height: none;
  padding: 0;                              /* padding moves to the panes below */
  overflow: hidden;
}
.funnel--page .progress {
  flex: none;
  margin: 0;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--rule);
}
.funnel--page .step {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;            /* stops the page taking over at the ends */
  padding: clamp(1.25rem, 2.4vw, 2rem);
  padding-bottom: 0;
}
/* the buttons ride the foot of the scrolling pane rather than sliding away */
.funnel--page .step .actions {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 1rem 0 clamp(1.25rem, 2.4vw, 2rem);
  background: linear-gradient(to bottom, transparent, var(--paper) 22%);
}
/* the intro column beside it scrolls with the page, not the form */
@media (max-width: 900px) {
  .funnel--page .card { height: calc(100dvh - 71px - 2rem); }
}

/* On the stepper the footer is a slim legal strip rather than a sitemap: the
   whole point of the page is one task, and a full footer forced a page scroll
   underneath a form that already fits. The disclaimer stays - it is the part
   that has to be there. */
.page--stepper .foot { padding-block: 0.9rem; }
.page--stepper .foot__grid { display: none; }
.page--stepper .foot__legal { margin-top: 0; padding-top: 0; border-top: 0; font-size: var(--t--2, 0.75rem); }
.page--stepper .foot__legal br { display: none; }
.page--stepper .buildstamp { display: none; }

/* with the footer slim, the card is sized so the page itself never scrolls */
.funnel--page .card { height: calc(100dvh - 71px - 3.5rem - 5.5rem); }
@media (max-width: 900px) {
  .funnel--page .card { height: auto; max-height: none; }
  .page--stepper .foot { padding-block: 1.25rem; }
}

/* The page is a grid whose rows are: announce, nav, form, footer. Giving the
   form row 1fr means it takes exactly what the other three leave, at any
   viewport, with no pixel arithmetic to drift out of date - the earlier
   calc() versions kept missing something (first the footer, then the announce
   bar). The skip link is position:absolute so it claims no row. */
.page--stepper {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: 100dvh;
  overflow: hidden;
}
.page--stepper .funnel--page {
  min-height: 0;
  padding-block: clamp(0.75rem, 1.6vw, 1.25rem);
  overflow: hidden;
}
.page--stepper .funnel--page > .wrap { height: 100%; }
.page--stepper .funnel__grid { height: 100%; align-items: stretch; }
.funnel--page .card { height: 100%; max-height: 100%; }

@media (max-width: 900px) {
  /* the pitch column lives on the pages that link here; the phone gets the form */
  .page--stepper .funnel__intro { display: none; }
  .page--stepper .funnel__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SELECTS — Material outlined variant
   Native selects render their own chevron and their own control
   chrome, which differs on every platform. Suppressing the
   appearance and drawing the chevron ourselves is what makes the
   six dropdowns look like one component instead of six.
   ============================================================ */
.field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 56px;                 /* Material's outlined control height */
  padding: 1rem 3rem 1rem 0.95rem;  /* room on the right for the chevron */
  border-radius: 4px;               /* Material uses 4px, not the page's 8px */
  border: 1px solid var(--rule-2);
  background-color: #fff;
  /* the chevron, drawn rather than inherited from the platform */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 20px 20px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  cursor: pointer;
}
.field select:hover { border-color: var(--ink-2); }
/* Material thickens the outline to 2px on focus rather than adding a ring.
   Done with an inset shadow so the box does not shift by a pixel. */
.field select:focus {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: inset 0 0 0 1px var(--cobalt);
}
.field select:focus-visible { outline: none; }
/* the placeholder option reads as a label until something is chosen */
.field select:has(option[value=""]:checked) { color: var(--ink-3); }
.field select option { color: var(--ink); }
.field select optgroup { font-weight: 600; color: var(--ink-2); }

/* the label above it takes Material's caption treatment */
.field label {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  margin-bottom: 0.35rem;
}
.field:focus-within label { color: var(--cobalt); }

/* inputs match, or the two controls sit side by side looking unrelated */
.field input {
  min-height: 56px;
  border-radius: 4px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field input:hover { border-color: var(--ink-2); }

/* ============================================================
   FORM CONTROLS — one Material idiom
   Scoped to the questionnaire card. The marketing pages keep
   their pill CTAs; inside the form every control now shares the
   same 4px geometry, the same 1px outline, and the same focus
   behaviour, so a chip, a select and a button read as one family.
   ============================================================ */

/* --- selection chips: Material ToggleButton --- */
.card .chip {
  border-radius: 4px;
  border: 1px solid var(--rule-2);
  padding: 0.75rem 1rem;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.card .chip:hover { background: color-mix(in srgb, var(--cobalt) 5%, #fff); border-color: var(--ink-2); }
/* selected reads as a tinted, primary-outlined state rather than a black fill -
   Material marks selection with colour, not inversion */
.card .chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--cobalt) 9%, #fff);
  border-color: var(--cobalt);
  color: var(--cobalt-d);
}
.card .chip[aria-pressed="true"] em { color: var(--cobalt-d); opacity: 0.8; }
.card .chip:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }

/* --- the stacked option cards keep more room, same geometry --- */
.card .chips--stack .chip { padding: 0.9rem 1.1rem; }

/* --- tabs: Material's underline indicator, not a filled pill --- */
.card .tabs { border-bottom: 1px solid var(--rule); gap: 0; }
.card .tab {
  border-radius: 0;
  background: none;
  padding: 0.85rem 1.1rem;
  color: var(--ink-2);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.card .tab:hover { color: var(--ink); background: none; }
.card .tab[aria-selected="true"] {
  background: none;
  color: var(--cobalt);
  border-bottom-color: var(--cobalt);
}

/* --- buttons: Material contained + outlined --- */
.card .btn {
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.01em;
  min-height: 44px;
  box-shadow: 0 1px 2px rgba(20,22,26,.10), 0 1px 3px rgba(20,22,26,.08);
  transition: background-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.card .btn:hover { box-shadow: 0 2px 4px rgba(20,22,26,.14), 0 3px 8px rgba(20,22,26,.10); }
.card .btn--ghost {
  box-shadow: none;
  border: 1px solid var(--rule-2);
  color: var(--cobalt);
}
.card .btn--ghost:hover {
  background: color-mix(in srgb, var(--cobalt) 6%, #fff);
  border-color: var(--cobalt);
  color: var(--cobalt-d);
}

/* --- consent checkbox --- */
.card .consent input[type="checkbox"] {
  appearance: none;
  width: 20px; height: 20px;
  border: 2px solid var(--rule-2);
  border-radius: 3px;
  flex: none;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.card .consent input[type="checkbox"]:hover { border-color: var(--ink-2); }
.card .consent input[type="checkbox"]:checked {
  background: var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E") center / 15px no-repeat;
  border-color: var(--cobalt);
}
.card .consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }

/* --- the progress pips read as a Material stepper connector --- */
.card .pip { height: 4px; border-radius: 2px; }

/* ===== legal pages ===== */
.legal__body { max-width: 68ch; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.legal__body h2 {
  font-size: var(--t-1);
  margin: clamp(2rem, 4vw, 2.75rem) 0 0.75rem;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--rule);
}
.legal__body h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.5rem; }
.legal__body p { margin: 0 0 1rem; color: var(--ink-2); line-height: 1.7; }
.legal__body ul { margin: 0 0 1.25rem; padding-left: 1.15rem; color: var(--ink-2); line-height: 1.7; }
.legal__body li { margin-bottom: 0.6rem; }
.legal__body b { color: var(--ink); font-weight: 600; }
.legal__body a { color: var(--cobalt); text-underline-offset: 3px; }
.legal__meta {
  font-size: var(--t--1);
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1rem;
}