/* =============================================================================
   The Car Liaison — public site
   ========================================================================== */

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

/* Fixed so the dark hero runs full-bleed underneath it. */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}

.hdr__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  height: var(--hdr-h);
}

/* Pages start beneath the header; dark headers reclaim that space. */
main { padding-top: var(--hdr-h); }

.hero, .phead {
  margin-top: calc(var(--hdr-h) * -1);
  padding-top: var(--hdr-h);
}

.hdr.is-stuck {
  background: rgba(242, 237, 227, .84);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  box-shadow: 0 1px 0 var(--line-soft), 0 14px 34px -28px rgba(12, 16, 21, .5);
}

/* Over the petrol hero the header inverts to sand. */
.hdr--over-dark:not(.is-stuck) { color: var(--beige); }
.hdr--over-dark:not(.is-stuck) .wordmark { color: var(--beige); }
.hdr--over-dark:not(.is-stuck) .nav a { color: rgba(220, 204, 180, .74); }
.hdr--over-dark:not(.is-stuck) .nav a:hover,
.hdr--over-dark:not(.is-stuck) .nav a.is-on { color: var(--beige); }
.hdr--over-dark:not(.is-stuck) .icon-btn { color: var(--beige); box-shadow: inset 0 0 0 1.5px var(--line-dark); }
.hdr--over-dark:not(.is-stuck) .burger { color: var(--beige); box-shadow: inset 0 0 0 1.5px var(--line-dark); }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }

.brand .wordmark {
  font-size: 13px;
  line-height: 1.08;
  transition: color .3s var(--ease);
}

/* Hairline rule between wordmark and mark, straight from the logo lockup. */
.brand__rule {
  width: 1px; height: 40px;
  background: currentColor;
  opacity: .35;
  flex: none;
}

.brand__mark {
  width: 92px;
  flex: none;
  color: var(--beige-3);          /* legible on the cream header */
  transition: color .3s var(--ease);
}

@media (max-width: 480px) { .brand__mark { width: 74px; } }

.hdr--over-dark:not(.is-stuck) .brand__mark { color: var(--beige); }

.nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }

.nav a {
  position: relative;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  transition: color .2s var(--ease);
}

.nav a::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}

.nav a:hover::after, .nav a.is-on::after { transform: scaleX(1); }
.nav a:hover, .nav a.is-on { color: var(--ink); }

.hdr__actions { display: flex; align-items: center; gap: 10px; flex: none; }

.icon-btn {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: all .25s var(--ease);
}
.icon-btn:hover { background: var(--wa); color: #fff; box-shadow: inset 0 0 0 1.5px var(--wa); }

.burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px var(--line);
  place-items: center;
}

@media (max-width: 1020px) {
  .nav { display: none; }
  .burger { display: grid; }
  .hdr__actions .btn:not(.btn--pill) { display: none; }
  .btn--pill { padding: 7px 14px; font-size: 12px; }
  :root { --hdr-h: 64px; }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-rows: 1fr;
  background: rgba(7, 29, 31, .6);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.drawer.is-open { opacity: 1; pointer-events: auto; }

.drawer__panel {
  position: absolute;
  inset: 10px 10px auto 10px;
  background: var(--paper);
  border-radius: 26px;
  padding: 18px;
  box-shadow: var(--sh-lg);
  transform: translateY(-14px);
  opacity: 0;
  transition: transform .38s var(--ease-out), opacity .3s var(--ease);
}
.drawer.is-open .drawer__panel { transform: none; opacity: 1; }

.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.drawer nav { display: grid; gap: 2px; margin-bottom: 16px; }
.drawer nav a {
  padding: 14px 12px;
  border-radius: 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.03em;
}
.drawer nav a:hover, .drawer nav a.is-on { background: var(--cream); }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  background: var(--teal-deep);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  /* Warm pool of light behind the vehicle. */
  content: '';
  position: absolute;
  right: -8%; top: -18%;
  width: 78%; aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%,
    rgba(220, 204, 180, .16) 0%, rgba(46, 102, 107, .26) 40%, transparent 70%);
  z-index: -1;
}

.hero__road {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  z-index: -1;
  opacity: .5;
  pointer-events: none;
}

.hero__wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
  grid-template-areas: 'copy stage' 'deal stage';
  align-items: center;
  column-gap: clamp(24px, 3vw, 56px);
  min-height: min(calc(90vh - var(--hdr-h)), 820px);
  padding-block: 48px 72px;
}

.hero__copy { grid-area: copy; align-self: end; padding-bottom: 26px; }
.hero__copy .eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.hero__copy .eyebrow::before {
  content: ''; width: 26px; height: 1.5px; background: var(--beige);
}
.hero__copy h1 { margin: 18px 0 20px; white-space: pre-line; }
.hero__copy .lede { color: rgba(220, 204, 180, .74); max-width: 42ch; }

.hero__deal {
  grid-area: deal;
  align-self: start;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
}
.hero__deal .hero__fromlbl { order: 1; margin-top: 0; }
.hero__deal .hero__price { order: 2; }
.hero__deal .hero__meta { order: 5; }
.hero__deal .hero__cta { order: 6; }

.hero__stage {
  grid-area: stage;
  position: relative;
  align-self: center;
  min-height: 340px;
}

.hero__ghost {
  position: absolute;
  left: 0; top: 2%;
  transform: none;
  font-family: var(--ghost);
  font-size: clamp(58px, 9.5vw, 150px);
  line-height: .969;
  letter-spacing: 0;
  /* A single word like EQUINOX has no break opportunity, so allow breaking
     inside it — that is exactly how the Figma frame sets EQU / INOX. */
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
  width: 100%;
  text-align: left;
  /* Deep, not light: the hero car is sand, so a light ghost would vanish. */
  color: rgba(255, 255, 255, .12);
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
}

.hero__car {
  position: relative;
  width: 112%;
  height: clamp(230px, 40vh, 430px);
  max-width: none;
  margin-left: -3%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 42px 42px rgba(0, 0, 0, .45));
  transform: translate(var(--ix), var(--iy)) scale(var(--is));
  transform-origin: bottom center;
  animation: carIn 1.1s var(--ease-out) both;
}

@keyframes carIn {
  from { opacity: 0; transform: translate(calc(var(--ix) + 52px), var(--iy)) scale(calc(var(--is) * .97)); }
  to   { opacity: 1; transform: translate(var(--ix), var(--iy)) scale(var(--is)); }
}

/* Used where the vehicle is placed by exact coordinates and must not be scaled. */
@keyframes carInFlat {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: none; }
}

/* Featured deal lockup */
.hero__name {
  font-family: var(--display);
  font-size: clamp(16px, 1.6vw, 19px);
  letter-spacing: -.005em;
  line-height: 1.15;
  color: var(--beige);
  order: 3;
}

.hero__class {
  order: 4;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(220, 204, 180, .55);
  margin-top: 8px;
}

.hero__fromlbl {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .51);
  margin-top: 18px;
}

.hero__price { margin: 2px 0 4px; font-size: clamp(46px, 6vw, 72px); color: var(--paper); }
.hero__price .price__cur { color: var(--paper); opacity: .75; }
.hero__price .price__per { color: rgba(255, 255, 255, .7); }

.hero__meta {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 13.5px;
  color: rgba(220, 204, 180, .68);
  margin-bottom: 26px;
}

.hero__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(220,204,180,.4); }

.hero__states { display: flex; gap: 6px; flex-wrap: wrap; }
.hero__states span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(220, 204, 180, .11);
  color: rgba(220, 204, 180, .92);
}

.hero__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero__cta .tlink { color: rgba(220, 204, 180, .85); }
.hero__cta .tlink:hover { color: var(--beige); }

/* Deal switcher */
.hero__switch {
  position: absolute;
  left: var(--gut); bottom: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 3;
}

.hero__switch button {
  width: 34px; height: 4px;
  border-radius: 4px;
  background: rgba(220, 204, 180, .26);
  transition: background-color .3s var(--ease), width .3s var(--ease);
}
.hero__switch button[aria-current='true'] { background: var(--beige); width: 52px; }

@media (max-width: 1020px) {
  .hero__wrap {
    grid-template-columns: 1fr;
    grid-template-areas: 'copy' 'stage' 'deal';
    min-height: 0;
    padding-block: 34px 96px;
    row-gap: 4px;
  }
  .hero__copy { padding-bottom: 0; }
  .hero__copy .lede { font-size: 15.5px; max-width: 34ch; }
  .hero__stage { min-height: 0; margin-block: 6px -6px; }
  /* Bleed off one edge only — clipping both bumpers reads as a mistake. */
  .hero__ghost { font-size: clamp(46px, 13vw, 116px); top: 0; }
  .hero__car { width: 116%; margin-left: 0; height: clamp(190px, 30vh, 300px); }
  .hero__deal { padding-top: 8px; }
  .hero__price { font-size: clamp(46px, 15vw, 64px); margin: 12px 0 10px; }
  .hero__switch { left: 50%; transform: translateX(-50%); bottom: 34px; }
  .hero__cta { gap: 14px; }
  .hero__cta .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------------ quick browse */

.quick {
  position: relative;
  background: var(--cream);
  padding-block: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--line-soft);
}

.quick__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.quick__head h2 {
  font-size: clamp(17px, 2vw, 21px);
  letter-spacing: -.02em;
}

.quick__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1100px) {
  .quick__grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block: 4px;
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut);
  }
  .quick__grid::-webkit-scrollbar { display: none; }
  .quick__grid > * { scroll-snap-align: start; flex: none; }
}

.qchip {
  display: grid;
  gap: 2px;
  padding: 14px 20px 13px;
  min-width: 132px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--sh-sm);
  text-align: left;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.qchip:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.qchip__label { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.qchip__ico svg { display: block; }
.qchip__from { font-family: var(--mono); font-size: 11px; color: var(--slate); letter-spacing: .04em; }
.qchip__ico { color: var(--beige-3); margin-bottom: 6px; }
.qchip:hover .qchip__ico { color: var(--teal); }

/* -------------------------------------------------------------- deal cards */

.grid-deals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

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

.dcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.dcard:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }

.dcard__stage {
  position: relative;
  margin: 10px 10px 0;
  border-radius: 17px;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(22, 63, 66, .10), transparent 62%),
    linear-gradient(165deg, #F3F0E9, #D2D8DA);
  overflow: visible;
}

/* Per-deal image placement from the admin. The element carries --ixd/--ixm
   pairs; these rules pick the set for the current breakpoint. */
.dcard__img, .hero__car, .dstage__img, .promo__stage img {
  --ix: var(--ixd, 0%); --iy: var(--iyd, 0%); --is: var(--isd, 1);
}

@media (max-width: 860px) {
  .dcard__img, .hero__car, .dstage__img, .promo__stage img {
    --ix: var(--ixm, 0%); --iy: var(--iym, 0%); --is: var(--ism, 1);
  }
}

.dcard__img {
  position: absolute;
  left: -8%;
  bottom: -7%;
  width: 116%;
  height: auto;
  transform: translate(var(--ix), var(--iy)) scale(var(--is));
  transform-origin: bottom center;
  transition: transform .45s var(--ease);
}

.dcard:hover .dcard__img {
  transform: translate(var(--ix), calc(var(--iy) - 8px)) scale(calc(var(--is) * 1.03));
}

.dcard__badges {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 2;
}

.dcard__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 30px 22px 22px;
  flex: 1;
}

.dcard__class {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--slate);
}

.dcard__name {
  font-size: 22px;
  letter-spacing: -.028em;
  margin-top: 6px;
}

.dcard__name .or { font-family: var(--body); font-weight: 500; font-size: 14px; color: var(--slate); letter-spacing: 0; display: block; margin-top: 3px; }

.dcard__facts {
  display: grid;
  gap: 7px;
  margin: 16px 0 18px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.dcard__facts li { display: flex; gap: 9px; align-items: flex-start; }
.dcard__facts svg { flex: none; margin-top: 2px; color: var(--slate-2); }

.dcard__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.dcard__price { display: grid; gap: 2px; }
.dcard__price .from {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
}
.dcard__price .price { font-size: 34px; }

/* Horizontal featured rail on mobile. */
.rail .dcard { width: min(84vw, 340px); }

/* ------------------------------------------------------------- promo strip */

.promo {
  position: relative;
  background: var(--teal);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}

.promo::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 120% at 82% 40%, rgba(220, 204, 180, .20), transparent 62%),
    linear-gradient(100deg, var(--teal-deep) 0%, var(--teal) 58%, var(--teal-3) 100%);
  z-index: -1;
}

.promo__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(20px, 4vw, 60px);
  padding-block: clamp(48px, 6vw, 84px);
}

.promo__title {
  font-size: clamp(38px, 6.6vw, 92px);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.04em;
  margin: 16px 0 18px;
}

.promo__price {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 26px;
}
.promo__price .price { font-size: clamp(40px, 5vw, 60px); color: var(--beige); }
.promo__price .note { font-size: 14px; color: rgba(220,204,180,.68); }

.promo__stage { position: relative; }
.promo__stage img {
  width: 116%;
  margin-left: -8%;
  filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .5));
}

@media (max-width: 900px) {
  .promo__wrap { grid-template-columns: 1fr; }
  .promo__stage { order: -1; }
  .promo__stage img { width: 118%; margin-left: -9%; }
}

/* ----------------------------------------------------------- compare states */

.compare {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

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

.cmp-card {
  background: var(--paper);
  border-radius: var(--r-panel);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--sh-md);
}

.cmp-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cmp-row:last-of-type { border-bottom: 0; }

.cmp-row__code {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--cream);
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.02em;
}

.cmp-row__name { display: block; font-weight: 700; font-size: 15.5px; }
.cmp-row__bar {
  display: block;
  height: 6px;
  border-radius: 4px;
  background: var(--cream-2);
  margin-top: 8px;
  overflow: hidden;
}
.cmp-row__bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--beige-3), var(--teal-3));
  border-radius: 4px;
  transition: width .8s var(--ease-out);
}

.cmp-row__price { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -.03em; }

.cmp-row.is-best .cmp-row__code { background: var(--teal); color: var(--beige); }
.cmp-row.is-best .cmp-row__bar i { background: linear-gradient(90deg, var(--beige-3), var(--teal)); }
.cmp-row.is-best .cmp-row__price { color: var(--teal); }

.cmp-save {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--cream-3);
}
.cmp-save strong {
  font-family: var(--display); font-weight: 800;
  font-size: 26px; letter-spacing: -.03em; color: var(--teal);
}

/* ------------------------------------------------------------ how it works */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  position: relative;
}

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

.step { position: relative; }

.step__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

/* thin connecting line between steps */
.step__num::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
}
.step:last-child .step__num::after { background: none; }

@media (max-width: 860px) { .step__num::after { display: none; } }

.step__ico {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--sh-sm);
  color: var(--ink);
  margin-bottom: 18px;
}

.step h3 { font-size: 24px; letter-spacing: -.026em; margin-bottom: 10px; }
.step p { color: var(--ink-2); font-size: 15.5px; max-width: 34ch; }

/* ---------------------------------------------------------------- benefits */

.bens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line-dark-soft);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.ben {
  background: var(--teal);
  padding: clamp(24px, 3vw, 36px);
  display: grid;
  align-content: start;
  gap: 12px;
  transition: background-color .35s var(--ease);
}
.ben:hover { background: var(--teal-2); }

.ben__ico { color: var(--beige); margin-bottom: 8px; }
.ben h3 { font-size: 19px; letter-spacing: -.022em; }
.ben p { font-size: 14.5px; color: rgba(220, 204, 180, .66); line-height: 1.55; }

/* ------------------------------------------------------------------ states */

.grid-states {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: 16px;
}

.scard {
  position: relative;
  display: grid;
  /* start, not space-between — otherwise uneven blurbs misalign the names. */
  align-content: start;
  gap: 26px;
  min-height: 190px;
  padding: 22px;
  border-radius: var(--r-card);
  background: var(--paper);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.scard:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }

.scard__code {
  font-family: var(--display);
  font-weight: 800;
  font-size: 62px;
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--beige);
  transition: color .35s var(--ease);
}
.scard:hover .scard__code { color: var(--teal); }

.scard__name { display: block; font-weight: 700; font-size: 17px; letter-spacing: -.018em; }
.scard__from { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--slate); margin-top: 4px; letter-spacing: .04em; }
.scard__blurb { display: block; font-size: 13px; color: var(--slate); margin-top: 8px; }

/* --------------------------------------------------------- trust + reviews */

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.quote {
  background: var(--paper);
  border-radius: var(--r-card);
  padding: 26px 24px;
  box-shadow: var(--sh-sm);
  display: grid;
  gap: 16px;
  align-content: start;
}
.quote p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.quote__who { display: flex; align-items: center; gap: 11px; }
.quote__av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--teal); color: var(--beige);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 13px;
}
.quote__nm { font-weight: 700; font-size: 14px; }
.quote__loc { font-size: 12.5px; color: var(--slate); }

.trustbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 34px;
  padding: 26px;
  border-radius: var(--r-panel);
  background: var(--paper);
  box-shadow: var(--sh-sm);
}
.trustbar div { display: grid; gap: 4px; }
.trustbar dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.trustbar dd { font-weight: 700; font-size: 16px; }

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

.faq { display: grid; gap: 10px; max-width: 900px; }

.faq details {
  background: var(--paper);
  border-radius: 18px;
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: box-shadow .3s var(--ease);
}
.faq details[open] { box-shadow: var(--sh-md); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  cursor: pointer;
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -.015em;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '';
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--cream-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 1v8M1 5h8' stroke='%2310262A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .35s var(--ease), background-color .25s;
}
.faq details[open] summary::after { transform: rotate(135deg); background-color: var(--beige); }

.faq .ans { padding: 0 22px 22px; color: var(--ink-2); font-size: 15.5px; max-width: 68ch; }

/* ------------------------------------------------------------- whatsapp cta */

.wacta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: linear-gradient(120deg, var(--teal-dark), var(--teal) 58%, #14413A);
  color: var(--paper);
  padding: clamp(30px, 4.5vw, 58px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
}
.wacta::before {
  content: '';
  position: absolute; right: -60px; top: -60px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 211, 102, .28), transparent 66%);
}
.wacta h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -.03em; margin-bottom: 12px; }
.wacta p { color: rgba(220, 204, 180, .72); max-width: 46ch; font-size: 15.5px; }

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

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

.foot {
  background: var(--teal-deep);
  color: rgba(220, 204, 180, .66);
  padding-block: clamp(48px, 6vw, 76px) 32px;
}

.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 34px;
  padding-bottom: 42px;
  border-bottom: 1px solid var(--line-dark-soft);
}

@media (max-width: 900px) { .foot__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__top { grid-template-columns: 1fr; gap: 26px; } }

.foot h4 {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(220, 204, 180, .45);
  margin-bottom: 16px;
}
.foot li + li { margin-top: 10px; }
.foot a { font-size: 14.5px; transition: color .2s; }
.foot a:hover { color: var(--beige); }

.foot__legal {
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: rgba(220, 204, 180, .42);
}
.foot__note { max-width: 70ch; font-size: 12.5px; color: rgba(220,204,180,.42); margin-top: 22px; line-height: 1.6; }

/* --------------------------------------------------------- floating whatsapp */

.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 54px;
  padding: 0 15px;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: #05291a;
  box-shadow: 0 12px 30px -10px rgba(18, 140, 74, .55);
  transition: gap .35s var(--ease-out), padding .35s var(--ease-out), transform .3s var(--ease);
}
.wa-float span {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 700;
  font-size: 15px;
  transition: max-width .4s var(--ease-out);
}
.wa-float:hover { gap: 10px; padding-right: 20px; transform: translateY(-2px); }
.wa-float:hover span { max-width: 160px; }

@media (max-width: 860px) {
  .wa-float { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); height: 52px; }
  body.has-sticky-cta .wa-float { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* ================================================================== fleet */

.fleet {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}

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

.filters {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 24px;
  padding: 24px;
  border-radius: var(--r-panel);
  background: var(--paper);
  box-shadow: var(--sh-sm);
}

.fgroup { display: grid; gap: 11px; }
.fgroup h3 {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--slate);
}
.fgroup .opts { display: flex; flex-wrap: wrap; gap: 7px; }

.fopt {
  padding: 8px 13px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--cream);
  transition: all .2s var(--ease);
}
.fopt:hover { background: var(--cream-2); }
.fopt.is-on { background: var(--teal); color: var(--beige); }

.fleet__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.search {
  position: relative;
  flex: 1 1 260px;
}
.search input { padding-left: 44px; }
.search svg {
  position: absolute; left: 15px; top: 50%;
  transform: translateY(-50%);
  color: var(--slate-2);
  pointer-events: none;
}

.count { font-family: var(--mono); font-size: 12px; color: var(--slate); letter-spacing: .04em; }

.filter-btn { display: none; }
@media (max-width: 1020px) {
  .filters { display: none; }
  .filter-btn { display: inline-flex; }
}

.empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
  padding: clamp(40px, 7vw, 84px) 24px;
  border-radius: var(--r-panel);
  background: var(--paper);
  box-shadow: var(--sh-sm);
}
.empty h3 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.03em; }
.empty p { color: var(--ink-2); max-width: 44ch; }

/* ================================================================= detail */

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

/* Mobile order: vehicle, then price and pickers, then the reference details. */
@media (max-width: 980px) {
  /* align-items:start carries over from the grid rule and would collapse the
     vehicle stage, whose children are all absolutely positioned. */
  .detail { display: flex; flex-direction: column; gap: 22px; align-items: stretch; }
  .detail > div:first-child { display: contents; }
  .dstage  { order: 1; }
  .dthumbs { order: 2; margin-top: 0 !important; }
  .dinfo   { order: 3; }
  .specs   { order: 4; margin-top: 0 !important; }
  .detail > .lede, .detail p.lede { order: 5; margin-top: 0 !important; }
}

.dstage {
  position: relative;
  border-radius: var(--r-panel);
  background:
    radial-gradient(110% 80% at 50% 106%, rgba(22, 63, 66, .12), transparent 60%),
    linear-gradient(160deg, #F3F0E9, #D2D8DA);
  aspect-ratio: 16 / 11;
  overflow: hidden;
  isolation: isolate;
}

.dstage__ghost {
  position: absolute;
  left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  font-family: var(--ghost);
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: .969; letter-spacing: 0;
  color: rgba(22, 63, 66, .10);
  white-space: nowrap;
  user-select: none;
}

.dstage__img {
  position: absolute;
  inset: 6% 2% 6% 2%;
  width: 96%;
  height: 88%;
  object-fit: contain;
  transform-origin: bottom center;
  animation: carIn .9s var(--ease-out) both;
}

.dthumbs { display: flex; gap: 10px; margin-top: 14px; }
.dthumb {
  width: 84px; aspect-ratio: 16/11;
  border-radius: 12px;
  background: var(--cream-2);
  padding: 4px;
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: box-shadow .2s;
}
.dthumb.is-on { box-shadow: inset 0 0 0 2px var(--teal); }
.dthumb img { width: 100%; height: 100%; object-fit: contain; }

.dinfo { display: grid; gap: 22px; }

.dinfo__head h1 {
  font-size: clamp(32px, 4.4vw, 50px);
  letter-spacing: -.033em;
  margin: 14px 0 8px;
}
.dinfo__or { font-size: 15px; color: var(--slate); }

.dprice {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px 24px;
  border-radius: var(--r-card);
  background: var(--teal);
  color: var(--paper);
}
.dprice .price { font-size: clamp(40px, 5vw, 54px); color: var(--beige); }
.dprice .price__per { color: rgba(220,204,180,.6); }
.dprice__side { text-align: right; display: grid; gap: 3px; }
.dprice__side .k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(220,204,180,.5); }
.dprice__side .v { font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: var(--beige-2); }

.dprice .price.is-changing { animation: priceFlip .45s var(--ease-out); }

@keyframes priceFlip {
  0%   { opacity: .25; transform: translateY(9px); }
  100% { opacity: 1; transform: none; }
}

.picker { display: grid; gap: 13px; }
.picker__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.picker h2 { font-size: 19px; letter-spacing: -.022em; }
.picker__hint { font-size: 12.5px; color: var(--slate); }

.states-list { display: grid; gap: 8px; }

.state-opt {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px 12px 12px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line);
  text-align: left;
  transition: all .25s var(--ease);
}
.state-opt:hover { box-shadow: inset 0 0 0 1.5px var(--slate); }
.state-opt.is-on { box-shadow: inset 0 0 0 2px var(--teal); background: var(--cream); }

.state-opt__code {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--cream-2);
  font-family: var(--display); font-weight: 800;
  font-size: 14px; letter-spacing: -.02em;
}
.state-opt.is-on .state-opt__code { background: var(--teal); color: var(--beige); }
.state-opt__name { display: block; font-weight: 700; font-size: 15.5px; }
.state-opt__tag { display: block; font-size: 12px; color: var(--slate); }
.state-opt__price { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -.03em; }
/* No accent hue to spend, so the cheapest row is marked with a beige edge. */
.state-opt.is-cheapest { box-shadow: inset 4px 0 0 var(--beige-3), inset 0 0 0 1.5px var(--line); }
.state-opt.is-cheapest.is-on { box-shadow: inset 4px 0 0 var(--beige-3), inset 0 0 0 2px var(--teal); }
.state-opt.is-cheapest .state-opt__price { color: var(--teal); }

.terms { display: flex; flex-wrap: wrap; gap: 8px; }
.term {
  min-width: 62px;
  padding: 11px 10px;
  border-radius: 13px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-weight: 700;
  font-size: 14.5px;
  text-align: center;
  transition: all .2s var(--ease);
}
.term small { display: block; font-weight: 500; font-size: 10.5px; color: var(--slate); letter-spacing: .04em; }
.term:hover { box-shadow: inset 0 0 0 1.5px var(--slate); }
.term.is-on { background: var(--teal); color: var(--beige); box-shadow: inset 0 0 0 1.5px var(--teal); }
.term.is-on small { color: rgba(220,204,180,.65); }
.term[disabled] { opacity: .32; pointer-events: none; }

.specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-radius: 18px;
  overflow: hidden;
}
.specs > div { background: var(--paper); padding: 16px 18px; display: grid; gap: 3px; }
.specs dt { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--slate); }
.specs dd { font-weight: 700; font-size: 15px; }

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

.notice {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--cream-3);
  color: var(--teal);
  font-size: 14px;
  line-height: 1.55;
}
.notice svg { flex: none; margin-top: 2px; color: var(--teal-3); }

.notice--quiet { background: var(--cream-2); color: var(--ink-2); }
.notice--quiet svg { color: var(--slate); }

/* Sticky mobile CTA on the detail page */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 88;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 248, 241, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 -1px 0 var(--line-soft), 0 -18px 40px -30px rgba(12,16,21,.6);
}
.sticky-cta .price { font-size: 27px; }
.sticky-cta .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }

@media (max-width: 980px) {
  .sticky-cta { display: flex; }
  body.has-sticky-cta { padding-bottom: 80px; }
}

/* =============================================================== page head */

.phead {
  background: var(--teal-deep);
  color: var(--paper);
  padding-block: clamp(40px, 6vw, 76px) clamp(36px, 5vw, 64px);
  padding-top: calc(var(--hdr-h) + clamp(40px, 6vw, 76px));
  position: relative;
  overflow: hidden;
}
.phead::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(80% 130% at 88% 10%, rgba(220,204,180,.16), transparent 62%);
}
.phead .wrap { position: relative; }
.phead h1 { font-size: clamp(34px, 5.6vw, 66px); letter-spacing: -.034em; margin: 16px 0 14px; }
.phead .lede { color: rgba(220,204,180,.72); }

.crumbs {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(220,204,180,.5);
}
.crumbs a:hover { color: var(--beige); }

/* =================================================================== sheet */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 29, 31, .62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--ease);
}
.sheet.is-open { opacity: 1; pointer-events: auto; }

.sheet__panel {
  position: relative;
  width: min(680px, 100%);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 28px;
  box-shadow: var(--sh-lg);
  overflow: hidden;
  transform: translateY(18px) scale(.985);
  opacity: 0;
  transition: transform .4s var(--ease-out), opacity .3s var(--ease);
}
.sheet.is-open .sheet__panel { transform: none; opacity: 1; }

.sheet__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.sheet__title { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.028em; }
.sheet__sub { font-size: 12.5px; color: var(--slate); margin-top: 2px; }

.sheet__body { padding: 22px; overflow-y: auto; flex: 1; }
.sheet__foot {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
}

.close-btn {
  margin-left: auto;
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--cream);
  color: var(--ink-2);
  flex: none;
  transition: background-color .2s;
}
.close-btn:hover { background: var(--cream-2); }

@media (max-width: 720px) {
  .sheet { padding: 0; place-items: end stretch; }
  .sheet__panel {
    width: 100%;
    max-height: 94vh;
    border-radius: 26px 26px 0 0;
    transform: translateY(24px);
  }
  .sheet__panel::before {
    content: '';
    position: absolute; left: 50%; top: 8px;
    transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 4px;
    background: var(--cream-3);
  }
  .sheet__head { padding-top: 24px; }
}

/* Progress rail inside the request flow */
.steps-rail { display: flex; gap: 6px; padding: 0 22px 16px; }
.steps-rail i {
  flex: 1; height: 3px; border-radius: 3px;
  background: var(--cream-2);
  transition: background-color .35s var(--ease);
}
.steps-rail i.is-done { background: var(--beige-3); }
.steps-rail i.is-on { background: var(--teal); }

.step-head { margin-bottom: 20px; }
.step-head h3 { font-size: 24px; letter-spacing: -.028em; margin: 8px 0 6px; }
.step-head p { font-size: 14.5px; color: var(--slate); }

.form-grid { display: grid; gap: 16px; }
@media (min-width: 560px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }

.opt-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.opt-card {
  padding: 14px 16px;
  border-radius: 15px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line);
  text-align: left;
  font-weight: 600;
  font-size: 14.5px;
  transition: all .2s var(--ease);
}
.opt-card small { display: block; font-weight: 500; font-size: 12px; color: var(--slate); margin-top: 3px; }
.opt-card:hover { box-shadow: inset 0 0 0 1.5px var(--slate); }
.opt-card.is-on { background: var(--teal); color: var(--beige); box-shadow: inset 0 0 0 1.5px var(--teal); }
.opt-card.is-on small { color: rgba(220,204,180,.65); }

/* Review summary */
.review {
  border-radius: 20px;
  background: var(--cream);
  padding: 20px;
  display: grid;
  gap: 2px;
}
.review__car {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 16px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.review__car img { width: 96px; flex: none; }
.review__car h4 { font-size: 18px; letter-spacing: -.024em; }
.review__car span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }

.rrow { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 14.5px; }
.rrow dt { color: var(--slate); }
.rrow dd { font-weight: 700; text-align: right; }
.rrow--total {
  margin-top: 10px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  align-items: baseline;
}
.rrow--total dd { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.03em; }

.wa-explain {
  display: flex; gap: 12px;
  margin-top: 16px; padding: 15px 16px;
  border-radius: 16px;
  background: rgba(37, 211, 102, .12);
  font-size: 13.5px;
  line-height: 1.55;
  color: #0C4527;
}
.wa-explain svg { flex: none; margin-top: 1px; color: var(--wa-deep); }

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

.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translate(-50%, 16px);
  z-index: 200;
  padding: 13px 20px;
  border-radius: var(--r-pill);
  background: var(--teal);
  color: var(--beige);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--sh-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .35s var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------- footer brand block */

.foot__brand { display: grid; gap: 18px; align-content: start; }

.foot__logo {
  display: grid;
  gap: 16px;
  padding: 20px 22px 22px;
  border: 1.5px solid var(--line-dark);
  border-radius: 20px;
  max-width: 260px;
}

.foot__logo .wordmark { font-size: clamp(21px, 2vw, 25px); }
.foot__logo .brand__mark { width: 100%; color: var(--beige); }

/* Full-bleed sand line drawing used as section punctuation. */
.mark-rule {
  display: block;
  width: min(420px, 62%);
  margin-inline: auto;
  color: var(--beige);
  opacity: .5;
}

/* ===================================================== deal card (Figma) ===

   Landscape, deep teal, vehicle bleeding off the right edge — the card from
   the Figma homepage rather than the light portrait card it replaces.
   ======================================================================== */

.dcard {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44%;
  align-items: stretch;
  min-height: 178px;
  background: var(--teal);
  color: var(--beige);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.dcard:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }

.dcard__stage {
  position: relative;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
  background: none;
  /* The vehicle stays in its own column. Without this a per-deal scale of
     1.38 grew the image past the card's midline and sat on the price and the
     "Pickup available in" line. The card still clips the right edge, so the
     car reads as bleeding off it exactly as the design intends. */
  overflow: hidden;
}

.dcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  /* Per-deal nudges are fine-tuning, not free rein: a stray scale would
     otherwise crop the vehicle down to a fender. */
  transform: translate(var(--ix), var(--iy))
             scale(clamp(0.7, var(--is, 1), 1.18));
  transform-origin: center;
}

.dcard:hover .dcard__img {
  transform: translate(var(--ix), calc(var(--iy) - 5px))
             scale(calc(clamp(0.7, var(--is, 1), 1.18) * 1.03));
}

/* Copy always sits above the artwork, whatever the placement values say. */
.dcard__body { z-index: 2; }

/* In flow, so two badges can wrap without landing on the title. */
.dcard__badges {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.dcard__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 0 18px 18px;
  z-index: 1;
}

.dcard__class { color: rgba(220, 204, 180, .62); }

.dcard__name {
  font-size: 19px;
  letter-spacing: -.01em;
  margin-top: 4px;
  color: var(--paper);
}
.dcard__name .or { color: rgba(220, 204, 180, .55); font-size: 12.5px; }

.dcard__facts { display: none; }

.dcard__foot {
  display: block;
  margin-top: auto;
  padding-top: 12px;
  border: 0;
}

.dcard__price { display: block; margin-bottom: 12px; }
.dcard__price .from {
  display: block;
  color: rgba(255, 255, 255, .51);
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: none;
  margin-bottom: 2px;
}
.dcard__price .price { font-size: 30px; color: var(--paper); }
.dcard__price .price__cur { color: var(--paper); opacity: .8; }
.dcard__price .price__per { color: rgba(255, 255, 255, .7); }

.dcard__where {
  display: block;
  font-size: 12px;
  color: rgba(220, 204, 180, .6);
  margin: -6px 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 420px) {
  .dcard { grid-template-columns: minmax(0, 1fr) 40%; }
  .dcard__body { padding: 42px 0 16px 16px; }
  .dcard__name { font-size: 17px; }
  .dcard__price .price { font-size: 26px; }
}

/* Outlined "Message Us" pill from the design's header. */
.btn--pill {
  --btn-bg: transparent;
  --btn-fg: var(--beige);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 2px var(--beige);
  padding: 9px 18px;
  font-size: 13px;
}
.btn--pill:hover { --btn-bg: rgba(220, 204, 180, .12); box-shadow: inset 0 0 0 2px var(--beige); }

.hdr:not(.hdr--over-dark) .btn--pill,
.hdr.is-stuck .btn--pill {
  --btn-fg: var(--teal);
  box-shadow: inset 0 0 0 2px var(--teal);
}
.hdr.is-stuck .btn--pill:hover { --btn-bg: rgba(22, 63, 66, .08); }

/* ============================================== fleet / process wayfinding ==

   The second band of the Figma frame. Exact mobile geometry lives in
   exact-mobile.css; these are the defaults it refines.
   ========================================================================= */

.wayfind {
  position: relative;
  background: var(--cream-2);
  padding: clamp(56px, 7vw, 100px) 0;
  overflow: hidden;
  isolation: isolate;
}

.wayfind__ghost {
  position: absolute;
  left: var(--gut);
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  font-family: var(--ghost);
  font-size: clamp(90px, 12vw, 176px);
  line-height: .767;
  color: rgba(22, 63, 66, .09);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.wayfind__ghost span { display: block; font-size: .86em; line-height: .83; }

.wayfind__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 5vw, 80px);
}

.wayfind__col { display: grid; align-content: start; justify-items: start; }

.wayfind__h {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--teal);
  margin: 0 0 clamp(16px, 2vw, 26px);
}

.wayfind__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 156px;
  padding: 11px 18px;
  border-radius: var(--r-btn);
  background: var(--teal);
  color: var(--beige);
  font-family: var(--display);
  font-size: 13px;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}

.wayfind__pill:hover { background: var(--teal-deep); transform: translateY(-2px); }

/* ==================================================== homepage contact cards */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.ccard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'k go' 'v go';
  align-items: center;
  gap: 2px 14px;
  padding: 20px 20px;
  border-radius: var(--r-card);
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line);
  text-align: left;
  font: inherit;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease),
              transform .25s var(--ease);
}

.ccard__k {
  grid-area: k;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
}

.ccard__v {
  grid-area: v;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: -.005em;
  color: var(--teal);
  overflow-wrap: anywhere;
}

.ccard__go { grid-area: go; color: var(--slate-2); display: flex; }

a.ccard:hover, button.ccard:hover {
  transform: translateY(-3px);
  background: var(--cream-2);
  box-shadow: inset 0 0 0 1.5px var(--teal);
}
a.ccard:hover .ccard__go, button.ccard:hover .ccard__go { color: var(--teal); }

.ccard--wa { background: var(--teal); box-shadow: none; }
.ccard--wa .ccard__k { color: rgba(220, 204, 180, .6); }
.ccard--wa .ccard__v { color: var(--beige); }
.ccard--wa .ccard__go { color: var(--wa); }
.ccard--wa:hover { background: var(--teal-deep); box-shadow: none; }
.ccard--wa:hover .ccard__v { color: var(--beige); }

.ccard--find { background: var(--beige); box-shadow: none; cursor: pointer; }
.ccard--find .ccard__k { color: rgba(22, 63, 66, .55); }
.ccard--find .ccard__v,
.ccard--find .ccard__go { color: var(--teal-dark); }
.ccard--find:hover { background: #E9DCC6; box-shadow: none; }

.contact__note {
  margin-top: 26px;
  max-width: 74ch;
  font-size: 13px;
  color: var(--slate);
  line-height: 1.6;
}

/* ------------------------------------------------------------ boot state -- */

/* Shown for the moment between load and the catalogue arriving. */
.boot {
  min-height: 60vh;
  display: grid;
  place-items: center;
  background: var(--cream);
}

.boot__dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--teal);
  animation: bootspin .7s linear infinite;
}

@keyframes bootspin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .boot__dot { animation: none; border-top-color: var(--line); }
}

/* Hero with nothing published yet. */
.hero__wrap--bare {
  display: block;
  min-height: min(60vh, 520px);
  padding-block: 90px 60px;
}

/* ------------------------------------------------- vehicle image placeholder

   A deal can be published before its photograph is uploaded. Rather than a
   broken image and its alt text, the slot shows the category silhouette.
   ========================================================================= */

.vehicle-ph {
  display: grid;
  place-items: center;
  color: var(--slate-2);
  opacity: .5;
  transform: none !important;
  animation: none !important;
}

.vehicle-ph svg { width: 46%; max-width: 150px; height: auto; }

.hero__car.vehicle-ph { color: var(--beige); opacity: .35; }
.hero__car.vehicle-ph svg { width: 42%; }

/* ============================================================ preview mode ==

   Applied only when the site is embedded in the admin's preview pane. The
   outline marks whichever element the field you are editing controls.
   ========================================================================= */

.is-preview .wa-float { display: none; }

.pv-hit {
  outline: 2px solid var(--ember, #C4552C);
  outline-offset: 4px;
  border-radius: 4px;
  animation: pvpulse 1.4s var(--ease) 1;
}

@keyframes pvpulse {
  0%   { outline-color: rgba(196, 85, 44, 0); }
  25%  { outline-color: rgba(196, 85, 44, 1); }
  100% { outline-color: rgba(196, 85, 44, .85); }
}

@media (prefers-reduced-motion: reduce) {
  .pv-hit { animation: none; }
}

/* ============================================================ deal carousel =

   The homepage deals row swipes at every width. Arrows appear for pointer
   devices, where there is nothing to swipe with.
   ========================================================================= */

.rail { position: relative; }

.sec-deals .grid-deals {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* See exact-mobile.css: the axis must be clipped or the row scrolls
     vertically wherever a card image breaks out of its box. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding-block: 30px;
  margin-block: -26px;
}
.sec-deals .grid-deals::-webkit-scrollbar { display: none; }

/* Widths are scoped to 561px and up so the mobile frame in exact-mobile.css
   keeps its own 381px card — these selectors are more specific and were
   silently halving it. */
@media (min-width: 1021px) {
  .sec-deals .grid-deals > .dcard {
    flex: none;
    width: calc((100% - 28px) / 3);
    scroll-snap-align: start;
  }
}

@media (min-width: 561px) and (max-width: 1020px) {
  .sec-deals .grid-deals > .dcard {
    flex: none;
    width: calc((100% - 14px) / 2);
    min-width: 320px;
    scroll-snap-align: start;
  }
}

@media (max-width: 560px) {
  .sec-deals .grid-deals > .dcard { scroll-snap-align: center; }
}

/* Cards in a horizontal rail must not animate on vertical scroll: off-screen
   siblings would sit translated down and pop up mid-swipe. */
.sec-deals .grid-deals > .dcard[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none;
}

/* Lift on hover only where a real pointer exists — on touch the state sticks. */
@media (hover: none) {
  .dcard:hover { transform: none; box-shadow: none; }
  .dcard:hover .dcard__img { transform: translate(var(--ix), var(--iy)) scale(var(--is)); }
}

.rail__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: none;
  width: 44px; height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--teal);
  box-shadow: var(--sh-md);
  transition: opacity .2s var(--ease), background-color .2s var(--ease);
}

.rail.has-overflow .rail__arrow { display: grid; }

.rail__arrow--prev { left: -14px; }
.rail__arrow--prev svg { transform: rotate(180deg); }
.rail__arrow--next { right: -14px; }

.rail__arrow:hover { background: var(--teal); color: var(--beige); }
.rail__arrow[disabled] { opacity: .3; pointer-events: none; }

/* Touch devices swipe; the hint below already says so. */
@media (hover: none), (max-width: 700px) {
  .rail__arrow, .rail.has-overflow .rail__arrow { display: none; }
}

/* The swipe hint belongs to touch only. */
.swipe-hint { display: none; }
@media (hover: none), (max-width: 700px) {
  .rail.has-overflow ~ .swipe-hint,
  .sec-deals .swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-family: var(--display);
    font-size: 11px;
    color: rgba(22, 63, 66, .54);
  }
}

/* ================================================================== logo ===
   The supplied artwork, sized by height so the lockup keeps its proportions.
   ======================================================================== */

.logo { display: block; width: auto; height: auto; max-width: 100%; }

.logo--hdr { height: 38px; }
@media (max-width: 700px) { .logo--hdr { height: 30px; } }

.logo--foot { height: 132px; }
@media (max-width: 700px) { .logo--foot { height: 104px; } }

/* The lockup carries its own rule and spacing, so the composed pieces go. */
.brand__rule { display: none; }

/* The header rides over the dark hero on some routes and over cream on
   others. Raster artwork cannot inherit currentColor, so both variants ship
   and the cascade picks one. */
.logo--ondark { display: none; }

.hdr--over-dark:not(.is-stuck) .logo--onlight { display: none; }
.hdr--over-dark:not(.is-stuck) .logo--ondark { display: block; }

/* ================================================================= legal ===
   Long-form policy text: one readable column, generous rhythm.
   ======================================================================== */

.legal { max-width: 68ch; }

.legal h2 {
  margin: 38px 0 12px;
  font-size: clamp(19px, 2vw, 23px);
  letter-spacing: -.01em;
}
.legal h2:first-child { margin-top: 0; }

.legal p { margin: 0 0 14px; line-height: 1.72; color: var(--ink-2); }

.legal__list { margin: 0 0 16px; padding-left: 20px; }
.legal__list li {
  margin-bottom: 8px;
  line-height: 1.68;
  color: var(--ink-2);
  list-style: disc;
}

.legal__updated {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-3);
}