/* The Car Garage AU: "High Street Car Yard"
   Brand orange and black from the real logo, on sunny yard paper.
   Signature: prices written on the windscreen in white paint pen. */

:root {
  --orange: #EE5B26;
  --orange-deep: #B83D12;
  --orange-soft: #F1F2F4;
  --ink: #151413;
  --asphalt: #232220;
  --paper: #F4F5F6;
  --paper-2: #E8EAEC;
  --line: #D4D7DB;
  --muted: #52575D;
  --glass: #16191C;
  --white: #FFFFFF;

  --display: "Sora", "Arial", sans-serif;
  --body: "Geist", system-ui, sans-serif;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-1: 0 1px 2px rgba(20, 24, 28, .06), 0 4px 12px rgba(20, 24, 28, .06);
  --shadow-2: 0 2px 4px rgba(20, 24, 28, .07), 0 12px 28px rgba(20, 24, 28, .10), 0 28px 60px rgba(20, 24, 28, .08);
  --shadow-3: 0 4px 8px rgba(20, 24, 28, .08), 0 20px 44px rgba(20, 24, 28, .14), 0 44px 90px rgba(184, 61, 18, .08);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a { color: inherit; }
p { margin: 0 0 var(--s2); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; margin: 0; }
h1 { font-size: clamp(2.1rem, 9vw, 4.4rem); }
h2 { font-size: clamp(1.75rem, 5.4vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.45rem); }
.nw { white-space: nowrap; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--white); padding: 10px 16px; font-weight: 700; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 36em; }
.section { padding: var(--s5) 0; }
@media (min-width: 900px) { .section { padding: var(--s6) 0; } }

/* ---------- Road strip: asphalt with a moving lane line ---------- */
.road { position: relative; height: 12px; background: #26292C; overflow: hidden; pointer-events: none; }
.road__line {
  position: absolute; left: 0; top: 5px; height: 2px; width: calc(100% + 64px);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 32px, transparent 32px 64px);
  animation: lane 2.4s linear infinite;
  will-change: transform;
}
@keyframes lane { from { transform: translateX(0); } to { transform: translateX(-64px); } }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 2px solid var(--ink); }
.top__bar { display: flex; align-items: center; gap: var(--s2); min-height: 76px; padding-top: 6px; padding-bottom: 8px; }
.brand { display: flex; align-items: center; min-height: 48px; }
.brand img { width: 104px; height: auto; }
@media (min-width: 900px) { .brand img { width: 120px; } }
.nav { display: none; margin-left: auto; gap: 4px; }
.nav a {
  font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em;
  text-decoration: none; padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center;
  transition: color .25s var(--ease-out);
}
.nav a:hover { color: var(--orange-deep); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--orange); }
.top .top__call { display: none; }
.burger {
  margin-left: auto; width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); border: 0; border-radius: 6px; cursor: pointer;
  transition: transform .2s var(--ease-out);
}
.burger:hover { transform: translateY(-1px); }
.burger:active { transform: translateY(1px); }
@media (min-width: 900px) {
  .nav { display: flex; }
  .top .top__call { display: inline-flex; }
  .burger { display: none; }
}

/* ---------- Drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 60; pointer-events: none; visibility: hidden; transition: visibility 0s linear .45s; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(21, 20, 19, .55); opacity: 0; transition: opacity .3s var(--ease-in); }
.drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: 84%; max-width: 340px;
  background: var(--ink); color: var(--paper); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .4s var(--ease-out);
  box-shadow: -20px 0 60px rgba(0, 0, 0, .35);
}
.drawer.is-open { pointer-events: auto; visibility: visible; transition: none; }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(245, 241, 233, .15); }
.drawer__head img { width: 84px; }
.drawer__close { width: 48px; height: 48px; display: grid; place-items: center; background: transparent; color: var(--paper); border: 1px solid rgba(245, 241, 233, .3); border-radius: 6px; cursor: pointer; transition: transform .2s var(--ease-out); }
.drawer__close:active { transform: scale(.95); }
.drawer nav { display: flex; flex-direction: column; padding: 12px; }
.drawer nav a {
  font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em;
  text-decoration: none; padding: 10px 12px; min-height: 52px; display: flex; align-items: center; border-radius: 6px;
  transition: transform .25s var(--ease-out), opacity .25s var(--ease-out);
}
.drawer nav a:hover { transform: translateX(4px); }
.drawer nav a:active { opacity: .7; }
.drawer__foot { margin-top: auto; padding: 20px; border-top: 1px solid rgba(245, 241, 233, .15); display: grid; gap: 12px; }

/* ---------- Number-plate buttons (Victorian rego plate shape) ---------- */
.plate {
  --plate-bg: var(--white); --plate-fg: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 10px 24px;
  background: var(--plate-bg); color: var(--plate-fg);
  font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 2px solid var(--ink); border-radius: 7px;
  box-shadow: inset 0 0 0 3px var(--plate-bg), inset 0 0 0 4.5px currentColor, 0 4px 0 var(--ink);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.plate:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 3px var(--plate-bg), inset 0 0 0 4.5px currentColor, 0 6px 0 var(--ink); }
.plate:active { transform: translateY(3px); box-shadow: inset 0 0 0 3px var(--plate-bg), inset 0 0 0 4.5px currentColor, 0 1px 0 var(--ink); }
.plate--orange { --plate-bg: var(--orange); --plate-fg: var(--ink); }
.plate--ink { --plate-bg: var(--ink); --plate-fg: var(--paper); border-color: var(--ink); }
.plate--sm { min-height: 46px; font-size: .9rem; padding: 8px 16px; }
.plate svg { width: 20px; height: 20px; flex: none; }
.on-dark .plate { border-color: var(--paper); box-shadow: inset 0 0 0 3px var(--plate-bg), inset 0 0 0 4.5px currentColor, 0 4px 0 rgba(0, 0, 0, .5); }
.btn-row { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 560px) { .btn-row { flex-direction: row; flex-wrap: wrap; } }
.btn-row .plate { width: 100%; }
@media (min-width: 560px) { .btn-row .plate { width: auto; } }

.textlink { font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 5px; display: inline-flex; align-items: center; min-height: 44px; transition: color .2s var(--ease-out); }
.textlink:hover { color: var(--orange-deep); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: var(--s4) 0 var(--s5); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 85% 20%, rgba(255, 255, 255, .9), transparent 70%),
    radial-gradient(40% 40% at 10% 90%, rgba(21, 20, 19, .05), transparent 70%);
}
.hero__grid { position: relative; display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: var(--s5); } }
.hero h1 { font-size: clamp(2rem, 9.4vw, 4.4rem); max-width: 11em; }
@media (min-width: 960px) { .hero h1 { font-size: clamp(2.8rem, 4.6vw, 4.4rem); } }
.hero h1 em { font-style: normal; color: var(--orange-deep); }
.hero .lede { margin-top: var(--s3); }
.hero .btn-row { margin-top: var(--s3); }
.hero__stock { margin-top: var(--s4); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero__stock p { margin: 0; font-weight: 600; max-width: 18em; line-height: 1.4; }
.hero__photo { position: relative; }
.hero__frame { position: relative; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-3); aspect-ratio: 4 / 3; background: var(--paper-2); }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(21, 20, 19, .35)); mix-blend-mode: multiply; }
.sticker {
  position: absolute; right: -6px; bottom: -22px; z-index: 2;
  background: var(--ink); color: var(--white); text-decoration: none;
  padding: 14px 18px 16px; border: 2px solid var(--ink); border-radius: 8px;
  transform: none; box-shadow: var(--shadow-2);
  transition: transform .3s var(--ease-out);
  min-width: 170px;
}
.sticker:hover { transform: translateY(-4px); }
.sticker b { display: block; font-family: var(--display); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #B9BEC4; }
.sticker span { display: block; font-family: var(--display); font-weight: 800; font-size: 1.9rem; letter-spacing: -0.03em; line-height: 1.15; color: var(--orange); }
.sticker small { display: block; font-size: 0.95rem; font-weight: 600; }
@media (min-width: 960px) { .sticker { right: -20px; bottom: -26px; } }

/* ---------- Odometer ---------- */
.odo { display: inline-flex; gap: 3px; padding: 6px; background: var(--ink); border-radius: 6px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); }
.odo__d { width: 30px; height: 44px; overflow: hidden; background: linear-gradient(180deg, #2c2a27, #0e0d0c 50%, #2c2a27); border-radius: 3px; position: relative; }
.odo__d:last-child { background: linear-gradient(180deg, #ffffff, #e3e6e9 50%, #ffffff); }
.odo__d:last-child .odo__strip { color: var(--ink); }
.odo__strip { display: flex; flex-direction: column; color: var(--paper); font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 44px; text-align: center; transition: transform 1.8s var(--ease-out); will-change: transform; }
.odo--sm { padding: 4px; gap: 2px; }
.odo--sm .odo__d { width: 20px; height: 30px; }
.odo--sm .odo__strip { font-size: 17px; line-height: 30px; }

/* ---------- Windscreen car cards (the signature) ---------- */
.cars { display: grid; gap: var(--s4) var(--s3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.car {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  background: var(--white); border: 2px solid var(--ink); border-radius: 10px; overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.car:hover { transform: translateY(-5px); box-shadow: var(--shadow-3); }
.car:active { transform: translateY(-1px); }
.car__photo { aspect-ratio: 4 / 3; background: var(--paper-2); position: relative; }
.car__photo img { width: 100%; height: 100%; object-fit: cover; }
.car__glass {
  position: relative; overflow: hidden;
  background: var(--glass);
  color: var(--white); padding: 16px 18px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 16px;
  border-top: 2px solid var(--ink);
}
.car__price { font-family: var(--display); font-weight: 800; font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.car__scrawl { font-size: .95rem; line-height: 1.45; color: #C3C8CD; text-align: right; }
.car__foot { padding: 14px 18px 18px; display: grid; gap: 2px; }
.car__name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.2; }
.car__var { color: var(--muted); font-size: 1rem; line-height: 1.4; }
.car__note { color: var(--muted); font-size: 1rem; }

/* ---------- Plates used as "browse by shape" links ---------- */
.shapes { display: flex; flex-wrap: wrap; gap: 14px; }
.shapes .plate b { color: var(--orange-deep); margin-left: 2px; }

/* ---------- Logbook (every car's prep) ---------- */
.logbook {
  position: relative; background: var(--white); border: 2px solid var(--ink); border-radius: 6px;
  box-shadow: 8px 8px 0 var(--ink);
  padding: 0;
}
.logbook__head { display: grid; grid-template-columns: minmax(0, 1fr); padding: 18px 20px; border-bottom: 2px solid var(--ink); background: var(--paper-2); }
.logbook__head strong { font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.02em; }
.logbook__head span { color: var(--muted); }
.logbook ol { list-style: none; margin: 0; padding: 0; }
.logbook li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 16px 20px; border-bottom: 1px dashed var(--line); }
@media (min-width: 720px) { .logbook li { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: baseline; } }
.logbook li b { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.logbook li span { line-height: 1.55; }
.stamp {
  position: absolute; right: 14px; top: -34px; width: 132px; height: 132px; border-radius: 50%;
  border: 4px double var(--orange-deep); color: var(--orange-deep); display: grid; place-items: center; text-align: center;
  font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: .05em;
  transform: rotate(-14deg); background: rgba(255, 255, 255, .9);
  mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0, 0, 0, .75) 61%);
}
.stamp span { display: block; font-size: 1.15rem; }
.stamp small { display: block; font-size: .7rem; margin-top: 4px; }
@media (min-width: 720px) { .stamp { right: 34px; top: -44px; width: 150px; height: 150px; } }

/* ---------- Yard check: the five pre-yard checks as a stretch of road ---------- */
.yardcheck { position: relative; background: var(--ink); color: var(--paper); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-3); }
.yardcheck__photo { position: relative; aspect-ratio: 2.5 / 1; overflow: hidden; }
.yardcheck__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.yardcheck__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 20, 19, 0) 35%, rgba(21, 20, 19, .92) 100%); }
.yardcheck__tag {
  position: absolute; left: 20px; bottom: 14px; z-index: 1;
  font-family: var(--display); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--white);
}
.yardcheck .stamp--dark {
  top: auto; right: 16px; width: 112px; height: 112px;
  bottom: auto; margin-top: -78px; position: absolute;
  background: var(--ink); color: var(--orange); border-color: var(--orange); z-index: 2;
}
.yardcheck .stamp--dark span { font-size: 1rem; }
.yardcheck .stamp--dark small { font-size: .62rem; }
.yardcheck__body { padding: 18px 22px 26px; }
.yardcheck__kicker { margin: 0; font-family: var(--display); font-weight: 700; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.yardcheck__title { color: var(--white); font-size: clamp(1.5rem, 5.6vw, 2rem); margin: 6px 0 24px; max-width: 12em; }
.yardcheck__road { position: relative; list-style: none; margin: 0; padding: 0 0 0 64px; }
.yardcheck__road::before {
  content: ""; position: absolute; left: 19px; top: 10px; bottom: 30px; width: 10px; border-radius: 3px;
  background: #2E3134 repeating-linear-gradient(180deg, rgba(255, 255, 255, .8) 0 10px, transparent 10px 20px) center / 2px 100% no-repeat;
  transform-origin: top; transition: transform 1.1s var(--ease-out) .15s;
}
.yardcheck__road li { position: relative; padding: 0 0 20px; min-height: 48px; }
.yardcheck__road li:last-child { padding-bottom: 0; }
.yardcheck__road i {
  position: absolute; left: -64px; top: 0; width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--paper); color: var(--ink); border-radius: 10px; box-shadow: 0 0 0 4px var(--ink);
  font-family: var(--display); font-style: normal; font-weight: 800; font-size: 1rem; letter-spacing: -0.02em;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease-out);
}
.yardcheck__road li.is-last i { background: var(--orange); color: var(--ink); }
.yardcheck__road b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--white); padding-top: 2px; }
.yardcheck__road span { display: block; color: #B9BEC4; font-size: .98rem; line-height: 1.5; }
.js .reveal:not(.in) .yardcheck__road::before { transform: scaleY(0); }
.js .reveal:not(.in) .yardcheck__road i { transform: scale(.6); opacity: 0; }
.yardcheck__road li:nth-child(2) i { transition-delay: .12s; }
.yardcheck__road li:nth-child(3) i { transition-delay: .24s; }
.yardcheck__road li:nth-child(4) i { transition-delay: .36s; }
.yardcheck__road li:nth-child(5) i { transition-delay: .48s; }
@media (min-width: 720px) {
  .yardcheck__body { padding: 22px 32px 32px; }
  .yardcheck .stamp--dark { right: 28px; width: 128px; height: 128px; margin-top: -88px; }
}
@media (prefers-reduced-motion: reduce) {
  .yardcheck__road::before, .yardcheck__road i { transition: none; }
  .js .reveal:not(.in) .yardcheck__road::before, .js .reveal:not(.in) .yardcheck__road i { transform: none; opacity: 1; }
}

/* ---------- Dark band ---------- */
.band { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
.band .lede, .band p { color: #CDD1D6; }
.band h2 em { font-style: normal; color: var(--orange); }
.split { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: center; } }

/* Warranty "30 days" sign, written like a yard banner */
.banner-sign {
  background: var(--white); color: var(--ink); border-radius: 10px; padding: 28px 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
}
.banner-sign strong { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 13vw, 5.5rem); letter-spacing: -0.05em; line-height: .95; color: var(--orange-deep); }
.banner-sign span { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 3.6vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.2; margin-top: 10px; }

/* ---------- Key tags (sell or trade steps) ---------- */
.keys { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); margin-top: var(--s4); }
@media (min-width: 800px) { .keys { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.key { position: relative; padding-top: 54px; }
.key__ring { position: absolute; top: 0; left: 34px; width: 46px; height: 46px; border-radius: 50%; border: 5px solid #9C9A94; box-shadow: inset 0 0 0 2px #C9C6BE; }
.key__tag {
  position: relative; background: var(--white); border: 2px solid var(--ink); border-radius: 8px 8px 8px 34px;
  padding: 26px 22px 22px; box-shadow: var(--shadow-2); transform: rotate(-1.5deg);
  transform-origin: 57px -30px; transition: transform .5s var(--ease-out);
}
.key:nth-child(2) .key__tag { transform: rotate(1.2deg); background: var(--orange-soft); }
.key:nth-child(3) .key__tag { transform: rotate(-.8deg); }
.key:hover .key__tag { transform: rotate(0deg) translateY(-3px); }
.key__tag::before { content: ""; position: absolute; top: 12px; left: 46px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.key__tag b { display: block; font-family: var(--display); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--orange-deep); margin: 18px 0 6px; }
.key__tag h3 { font-size: 1.25rem; margin-bottom: 8px; }
.key__tag p { margin: 0; }

/* ---------- Reviews ---------- */
.reviews { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .reviews { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.quote-big { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 3.2vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.3; margin: 0; }
.quote-big::before { content: "\201C"; color: var(--orange); }
.quote-big::after { content: "\201D"; color: var(--orange); }
.who { margin-top: 14px; font-weight: 700; }
.who span { font-weight: 400; color: var(--muted); }
.quotes { display: grid; gap: var(--s3); }
.quotes blockquote { margin: 0; padding: 0 0 var(--s3); border-bottom: 2px solid var(--line); }
.quotes blockquote:last-child { border-bottom: 0; }
.quotes p { margin: 0; }
.rating { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: var(--s3); }
.rating__num { font-family: var(--display); font-weight: 800; font-size: 2.8rem; letter-spacing: -0.04em; line-height: 1; }
.rating p { margin: 0; max-width: 20em; }

/* ---------- Visit ---------- */
.visit { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .visit { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; } }
.hours { margin: var(--s3) 0; display: grid; gap: 0; max-width: 420px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hours div.is-today { font-weight: 700; }
.status { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 6px; background: var(--white); }
.status::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #9C9A94; }
.status.is-open::before { background: #1F9D55; box-shadow: 0 0 0 4px rgba(31, 157, 85, .2); }
.map { border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; min-height: 320px; box-shadow: var(--shadow-2); background: var(--paper-2); }
.map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* ---------- Page heads ---------- */
.pagehead { padding: var(--s4) 0 var(--s3); }
.pagehead h1 { font-size: clamp(1.9rem, 8vw, 3.6rem); }
.pagehead .lede { margin-top: var(--s2); }

/* ---------- Stock filters ---------- */
.filters { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px; background: var(--white); border: 2px solid var(--ink); border-radius: 10px; box-shadow: var(--shadow-1); }
@media (min-width: 900px) { .filters { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field > .label, .field > label { font-weight: 700; font-size: 1rem; }
label.field { cursor: pointer; }
.field select, .field input, .field textarea {
  width: 100%; min-height: 50px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); border-radius: 6px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input[type="file"] { padding: 10px; background: var(--white); }
.field--wide { grid-column: 1 / -1; }
@media (min-width: 900px) { .filters .field--wide { grid-column: auto; } }
.count { margin: var(--s3) 0; font-weight: 700; font-size: 1.1rem; }
.empty { padding: var(--s4); border: 2px dashed var(--ink); border-radius: 10px; text-align: center; }

/* ---------- Car detail ---------- */
.detail { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); padding-top: var(--s3); }
@media (min-width: 960px) { .detail { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
.gallery__main { aspect-ratio: 4 / 3; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.thumbs button { padding: 0; border: 2px solid var(--line); border-radius: 6px; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; background: var(--paper-2); min-height: 44px; transition: transform .2s var(--ease-out); }
.thumbs button:hover { transform: translateY(-2px); }
.thumbs button[aria-pressed="true"] { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.detail__glass { border-radius: 10px; border: 2px solid var(--ink); margin: var(--s3) 0; }
.detail__glass .car__price { font-size: 2.3rem; }
.specs { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 0 var(--s3); border-top: 2px solid var(--ink); }
.specs div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.specs dt { font-weight: 700; }
.specs dd { margin: 0; text-align: right; }
.detail .btn-row { flex-direction: column; }
.detail .btn-row .plate { width: 100%; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); background: var(--white); border: 2px solid var(--ink); border-radius: 10px; padding: 22px; box-shadow: 8px 8px 0 var(--ink); }
@media (min-width: 720px) { .form { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 32px; } }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.form legend { font-weight: 700; padding: 0; margin-bottom: 6px; font-size: 1rem; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 8px 16px; border: 2px solid var(--ink); border-radius: 6px;
  font-weight: 600; cursor: pointer; background: var(--paper);
  transition: transform .2s var(--ease-out);
}
.choice span:hover { transform: translateY(-1px); }
.choice input:checked + span { background: var(--ink); color: var(--paper); }
.choice input:checked + span::before { content: ""; width: 10px; height: 10px; margin-right: 10px; border-radius: 2px; background: var(--orange); }
.choice input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.form .plate { justify-self: start; }
.form small, .form .hint { color: var(--muted); font-size: 1rem; }
.form h3 { grid-column: 1 / -1; font-size: 1.6rem; margin-top: 6px; }
.hp { display: none; }

/* ---------- Warranty calculator ---------- */
.calc { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .calc { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }
.policy { background: var(--white); border: 2px solid var(--ink); border-radius: 8px; box-shadow: var(--shadow-2); }
.policy__head { padding: 16px 20px; border-bottom: 2px solid var(--ink); background: var(--paper-2); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.policy__head strong { font-family: var(--display); font-size: 1.05rem; letter-spacing: -0.02em; }
.plans { display: grid; }
.plan { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); cursor: pointer; transition: opacity .25s var(--ease-out); }
.plan:last-child { border-bottom: 0; }
.plan { position: relative; }
.plan input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plan__dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); display: grid; place-items: center; }
.plan input:checked ~ .plan__dot::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--orange-deep); }
.plan input:checked ~ span b { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.plan input:focus-visible ~ .plan__dot { outline: 3px solid var(--orange); outline-offset: 2px; }
.plan b { font-family: var(--display); font-size: 1.05rem; display: block; line-height: 1.2; }
.plan span { color: var(--muted); font-size: 1rem; display: block; line-height: 1.4; }
.plan .plan__price { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; white-space: nowrap; color: var(--ink); }
.plan.is-out { opacity: .45; cursor: not-allowed; }
.plan.is-out .plan__price::after { content: "Not eligible"; display: block; font-size: .95rem; font-family: var(--body); font-weight: 600; white-space: normal; text-align: right; }
.total { padding: 20px; border-top: 2px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 0 0 6px 6px; display: grid; gap: 6px; }
.total strong { font-family: var(--display); font-size: 2.1rem; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.total p { margin: 0; color: #CDD1D6; }
.terms { display: flex; gap: 10px; flex-wrap: wrap; }
.table-wrap { overflow-x: auto; border: 2px solid var(--ink); border-radius: 8px; background: var(--white); max-width: 100%; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 1rem; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
thead th { background: var(--ink); color: var(--paper); font-family: var(--display); font-size: .9rem; font-weight: 600; }
tbody th { font-weight: 600; }
tr.group th { background: var(--paper-2); font-family: var(--display); font-size: .9rem; font-weight: 700; }

/* ---------- FAQs (an open list, two columns on desktop) ---------- */
.faqs { display: grid; gap: 0 var(--s5); grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 2px solid var(--ink); }
@media (min-width: 900px) { .faqs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.faqs > div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.faqs dt { font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 8px; }
.faqs dd { margin: 0; }

/* ---------- Footer ---------- */
.foot { background: var(--ink); color: var(--paper); padding-bottom: var(--s4); }
.foot__grid { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); padding-top: var(--s4); }
@media (min-width: 800px) { .foot__grid { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); } }
.foot img { width: 110px; }
.foot p { color: #CDD1D6; }
.foot h3 { font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; color: var(--orange); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; transition: color .2s var(--ease-out); }
.foot li a:hover { color: var(--orange); }
.foot .hours div { border-color: rgba(245, 241, 233, .15); }
.foot .status { color: var(--ink); }
.foot__base { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid rgba(245, 241, 233, .15); color: #AEB3B9; font-size: 1rem; }

/* ---------- Reveal motion ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.from-unwrap .reveal, .from-unwrap .word { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Small phones: long button labels wrap instead of pushing the page wide */
@media (max-width: 380px) {
  .plate { white-space: normal; text-align: center; max-width: 100%; padding-left: 16px; padding-right: 16px; }
}