/* ============================================================
   Precision Detailing, Vanessa ON

   The shop is a bright concrete bay, not a black box. The page is
   built on that: swept-floor grey, warm near-black type, chrome
   hairlines, and the logo red used to mark structure rather than to
   glow. Two dark bands break the rhythm where photographs need to
   carry the weight.

   Type echoes the captions burned into their own photos: condensed
   uppercase signage over a technical body face.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

:root {
  /* grounds, lightest surface sits highest */
  --ground:    #E8E6E1;   /* swept concrete, the page itself */
  --ground-2:  #DEDBD6;   /* alternating band */
  --ground-3:  #F2F1EE;   /* cards, the paper on the bench */
  --ground-4:  #FFFFFF;   /* the one surface above everything */

  /* the inverted bands, where photographs do the talking */
  --dark:      #14100F;
  --dark-2:    #1E1918;
  --dark-type: #E8E6E1;   /* 15.16:1 on dark */
  --meta-dark: #9EA1A7;   /* 7.30:1 on dark */

  /* type */
  --type:      #14100F;   /* 15.16:1 on ground */
  --type-2:    #3A3432;   /*  9.81:1 on ground */
  --meta:      #54575C;   /*  5.82:1 on ground, 5.25 on ground-2 */

  /* logo red. --red fills, --red-dk for small text on light,
     --red-lt for small text on the dark bands */
  --red:       #D40000;   /* white on it: 5.53:1 */
  --red-dk:    #B00000;   /*  5.92:1 on ground */
  --red-lt:    #FF3B2B;   /*  5.32:1 on dark. dark surfaces alias --red-dk to this */

  --chrome:    #7C7F85;   /* hairlines and rules. never text */
  --line:      rgba(20,16,15,.14);
  --line-hi:   rgba(20,16,15,.28);
  --line-dark: rgba(232,230,225,.16);

  /* scrims and lifts, tokenised so the two grounds stay consistent */
  --scrim:      rgba(20,16,15,.72);
  --scrim-deep: rgba(20,16,15,.94);
  --lift-sm:   0 1px 2px rgba(20,16,15,.08), 0 2px 8px rgba(20,16,15,.06);
  --lift:      0 2px 4px rgba(20,16,15,.07), 0 12px 28px -10px rgba(20,16,15,.22);
  --lift-lg:   0 4px 8px rgba(20,16,15,.08), 0 28px 60px -24px rgba(20,16,15,.38);

  --display: 'Big Shoulders Display', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --body:    'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad-y:  clamp(70px, 8vw, 116px);
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 2px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--type);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--red-dk); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--red); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ground-2); }
::-webkit-scrollbar-thumb { background: var(--ground-4); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--red-dk); }

/* ---------- layout ---------- */

.wrap { width: min(1240px, 100% - (var(--gutter) * 2)); margin-inline: auto; }
.wrap--tight { width: min(940px, 100% - (var(--gutter) * 2)); }

.band { padding-block: var(--pad-y); position: relative; }
.band + .band { border-top: 1px solid var(--line); }
.band--sunk { background: var(--ground-2); }
section[id] { scroll-margin-top: 78px; }

.band--dark {
  background: var(--dark);
  --type: var(--dark-type);
  --type-2: #C9C6C1;
  --meta: var(--meta-dark);
  --line: var(--line-dark);
  --line-hi: rgba(232,230,225,.30);
  --ground-2: var(--dark-2);
  --ground-3: var(--dark-2);
  --ground-4: #262020;
  --red-lt: #FF3B2B;
  color: var(--type);
  --red-dk: var(--red-lt);
}

/* A pale card sitting inside a dark band has to put the light-ground type
   tokens back. Without this it inherits the band's light-on-dark text and
   the card's own contents disappear against its white paper. */
.band--dark .pkg--pick,
.band--dark .q-result,
.band--dark .form-card {
  --type: #14100F;
  --type-2: #3A3432;
  --meta: #54575C;
  --line: rgba(20,16,15,.14);
  --line-hi: rgba(20,16,15,.28);
  --ground-3: #F2F1EE;
  --ground-4: #FFFFFF;
  --red-lt: var(--red-dk);
  color: var(--type);
}

/* The closing call to action lays type over a photograph behind a dark
   scrim, so it needs the dark band's tokens even though it is not one. */
.cta {
  --type: var(--dark-type);
  --type-2: #C9C6C1;
  --meta: var(--meta-dark);
  --line: var(--line-dark);
  --line-hi: rgba(232,230,225,.30);
  --red-lt: #FF3B2B;
  color: var(--type);
  --red-dk: var(--red-lt);
}

/* ---------- type ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red-dk);
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--red); flex: none; }
.eyebrow--center { justify-content: center; }

/* The display face is condensed signage: it wants to be set large, tight
   and uppercase, the way the captions on their own photos are set. Small
   headings drop back to the body face, where it would just look shouty. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: .92;
  letter-spacing: .004em;
  text-transform: uppercase;
  text-wrap: balance;
}
.h-xl { font-size: clamp(58px, 9vw, 132px); font-weight: 900; }
.h-lg { font-size: clamp(42px, 6.4vw, 88px); }
.h-md { font-size: clamp(28px, 3.4vw, 44px); }
.h-sm {
  font-family: var(--body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  text-transform: none;
}

.lede { font-size: clamp(16.5px, 1.5vw, 18.5px); color: var(--type-2); line-height: 1.62; max-width: 56ch; }
.copy { color: var(--type-2); max-width: 62ch; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.section-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(40px, 5vw, 66px); max-width: 62ch; }
.section-head--center { align-items: center; text-align: center; margin-inline: auto; }
.section-head--center .lede { text-align: center; }

/* ---------- buttons ---------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--type);
  --btn-bd: var(--line-hi);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  padding: 15px 26px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn svg { flex: none; transition: transform .2s ease; }
.btn:hover svg { transform: translateX(3px); }

.btn--red { --btn-bg: var(--red); --btn-fg: #fff; --btn-bd: var(--red); }
.btn--red:hover { --btn-bg: #F51100; --btn-bd: #F51100; box-shadow: 0 8px 22px -10px rgba(212,0,0,.55); }
.btn--ghost:hover { --btn-bd: var(--red); --btn-fg: var(--red-dk); }
.btn--sm { padding: 11px 18px; font-size: 11px; }
.btn--block { width: 100%; }

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

.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--red); color: #fff; padding: 12px 20px; font-family: var(--mono); font-size: 12px; }
.skip:focus { left: 12px; top: 12px; }

.site-head { position: fixed; inset: 0 0 auto; z-index: 100; transition: background .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
.site-head.is-stuck { background: rgba(232,230,225,.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--line); }
.head-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 12px; }

.logo { display: flex; align-items: center; }
.logo img { height: 68px; width: auto; transition: height .3s ease; }
.site-head.is-stuck .logo img { height: 54px; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--type-2); padding-block: 4px; position: relative; transition: color .2s ease; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--red); transition: right .28s ease; }
.nav a:hover { color: var(--type); }
.nav a:hover::after { right: 0; }
.nav a[aria-current="page"] { color: var(--type); }
.nav a[aria-current="page"]::after { right: 0; }

.head-actions { display: flex; align-items: center; gap: 14px; }
.head-phone { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.head-phone:hover { color: var(--red-dk); }

.burger { display: none; background: none; border: 1px solid var(--line-hi); border-radius: var(--radius); width: 42px; height: 42px; place-items: center; cursor: pointer; }
.burger span { display: block; width: 16px; height: 2px; background: var(--type); transition: transform .28s ease, opacity .2s ease; }
.burger span + span { margin-top: 4px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.drawer { display: none; background: rgba(232,230,225,.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); padding: 8px var(--gutter) 24px; }
.drawer.is-open { display: block; }
.drawer a { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--type-2); padding: 15px 0; border-bottom: 1px solid var(--line); }
.drawer a[aria-current="page"] { color: var(--red-dk); }
.drawer .btn { margin-top: 20px; }

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

.hero { position: relative; padding: 124px 0 0; overflow: hidden; }
/* Concrete under fluorescent tube light: a faint cool sheen down the page
   rather than a coloured glow, which on a light ground would read as a stain. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), transparent 42%),
    radial-gradient(ellipse 80% 50% at 50% -8%, rgba(255,255,255,.7), transparent 60%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; position: relative; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; padding-bottom: clamp(40px, 6vw, 72px); }
/* The slogan is theirs, so it stays, but it is set in one colour and let
   to be big. Red is spent on the rule beneath it and on the buttons, not
   on shouting half the sentence. */
.hero-copy h1 { position: relative; }
.hero-copy h1 em { font-style: normal; color: inherit; }
.hero-copy h1::after {
  content: "";
  display: block;
  width: 132px;
  height: 7px;
  margin-top: clamp(18px, 2vw, 26px);
  background: var(--red);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-figure { position: relative; }
.hero-figure img { width: 100%; aspect-ratio: 4 / 5; max-height: min(62vh, 560px); object-fit: cover; object-position: center 62%; border-radius: var(--radius); }
.hero-plate { position: absolute; left: -18px; bottom: 26px; background: var(--red); color: #fff; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; padding: 9px 14px; border-radius: 2px; }

.creds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: clamp(28px, 4vw, 44px); }
.cred { padding: 20px 24px 22px 0; display: flex; flex-direction: column; gap: 3px; }
.cred + .cred { border-left: 1px solid var(--line); padding-left: 24px; }
.cred b { font-family: var(--display); font-size: clamp(26px, 2.6vw, 32px); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.cred span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--meta); }

/* ---------- interior page banner ---------- */

.page-head { padding: 152px 0 clamp(44px, 5vw, 68px); border-bottom: 1px solid var(--line); position: relative; background: var(--ground-2); }
.page-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: clamp(90px, 12vw, 160px); height: 3px; background: var(--red); }
.page-head-inner { display: flex; flex-direction: column; gap: 18px; }
.page-head .lede { max-width: 60ch; }

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

.grid-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.svc { background: var(--ground); padding-bottom: 30px; display: flex; flex-direction: column; transition: background .3s ease; }
a.svc:hover, .svc:hover { background: var(--ground-3); }
.svc-shot { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.svc-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.svc:hover .svc-shot img { transform: scale(1.05); }
.svc-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--scrim), transparent 58%); }
.svc-body { padding: 24px 26px 0; display: flex; flex-direction: column; gap: 10px; }
.svc-idx { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; color: var(--red-dk); font-variant-numeric: tabular-nums; }
.svc p { font-size: 14.5px; color: var(--type-2); line-height: 1.68; }

/* long-form service entries on the services page */
.svc-long { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; padding-block: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line); }
.svc-long:first-of-type { border-top: 0; padding-top: 0; }
.svc-long img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.svc-long-text { display: flex; flex-direction: column; gap: 14px; }
.svc-long-text p { color: var(--type-2); }
.svc-long:nth-child(even) .svc-long-media { order: 2; }
.tick-list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.tick-list li { display: flex; gap: 11px; font-size: 14.5px; color: var(--type-2); line-height: 1.55; }
.tick-list svg { flex: none; margin-top: 4px; color: var(--red); }

/* ---------- process ---------- */

.grid-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); row-gap: clamp(36px, 4vw, 54px); counter-reset: step; }
.step { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); position: relative; }
.step::before { counter-increment: step; content: "0" counter(step); font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: .12em; color: var(--red-dk); }
.step::after { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--red); transition: width .6s cubic-bezier(.22,.61,.36,1); }
.step.is-in::after { width: 40px; }
.step p { font-size: 14.5px; color: var(--type-2); line-height: 1.68; }

/* ---------- pricing ---------- */

.switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line-hi); border-radius: 999px; margin-inline: auto; }
.switch button {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 22px; border: 0; border-radius: 999px; background: transparent; color: var(--type-2); cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.switch button[aria-selected="true"] { background: var(--red); color: #fff; }
.switch button:hover:not([aria-selected="true"]) { color: var(--type); }

.rate-note { text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--meta); margin-top: 16px; }

.grid-pkg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; margin-top: clamp(36px, 4vw, 52px); }
.pkg { background: var(--ground-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px 28px; display: flex; flex-direction: column; gap: 20px; transition: border-color .25s ease, transform .25s ease; }
.pkg:hover { border-color: var(--line-hi); transform: translateY(-3px); }
.pkg--pick { border-color: var(--red); background: #fff; position: relative; box-shadow: 0 24px 60px -32px rgba(22,20,20,.5); }
.pkg-flag { position: absolute; top: 0; right: 22px; transform: translateY(-50%); background: var(--red); color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 12px; border-radius: 2px; }
.pkg-top { display: flex; flex-direction: column; gap: 6px; }
.pkg-name { font-family: var(--display); font-size: 32px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.pkg-note { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--meta); }
.pkg-price { display: flex; align-items: baseline; gap: 7px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.pkg-price b { font-family: var(--display); font-size: 42px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.pkg-price span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--meta); }
.pkg .tick-list { flex: 1; }
.pkg .tick-list svg { color: var(--red-dk); }

.express { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.express-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--ground-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.express-card h4 { font-size: 17px; }
.express-card p { font-size: 13.5px; color: var(--type-2); margin-top: 4px; max-width: 42ch; }
.express-price { font-family: var(--mono); font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.express-dur { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--meta); text-align: right; }

.quote-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.quote-card { background: var(--ground-3); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: var(--radius); padding: 24px 26px; }
.quote-card h4 { font-size: 18px; margin-bottom: 6px; }
.quote-card p { font-size: 14px; color: var(--type-2); }
.quote-card .express-dur { text-align: left; margin-top: 10px; }

/* ---------- story ---------- */

.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 84px); align-items: center; }
.story-figure { position: relative; padding-bottom: 70px; padding-right: 52px; }
.story-figure img { border-radius: var(--radius); }
.story-figure .shot-main { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; }
.story-figure .shot-inset { position: absolute; right: 0; bottom: 0; width: 55%; aspect-ratio: 4 / 3; object-fit: cover; border: 8px solid var(--ground); border-radius: var(--radius); }
.story-text { display: flex; flex-direction: column; gap: 20px; }
.story-text p { font-size: 15.5px; color: var(--type-2); line-height: 1.72; }

.reasons { display: grid; margin-top: 10px; }
.reason { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.reason svg { flex: none; color: var(--red); margin-top: 2px; }
.reason b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; margin-bottom: 3px; }
.reason p { font-size: 13.5px; color: var(--type-2); line-height: 1.6; }

/* ---------- gallery ---------- */

.grid-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.shot { position: relative; overflow: hidden; border-radius: var(--radius); border: 0; padding: 0; background: var(--ground-3); cursor: zoom-in; aspect-ratio: 3 / 4; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.shot::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: var(--radius); transition: border-color .25s ease; }
.shot:hover img, .shot:focus-visible img { transform: scale(1.05); }
.shot:hover::after, .shot:focus-visible::after { border-color: var(--red); }
.shot-tag { position: absolute; left: 12px; bottom: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.shot:hover .shot-tag, .shot:focus-visible .shot-tag { opacity: 1; transform: none; }

/* margin:auto is what the UA stylesheet uses to centre a modal dialog.
   The `* { margin: 0 }` reset above wipes it out, so put it back here
   or the lightbox pins itself to the top left corner of the screen. */
dialog.lightbox { border: 0; padding: 0; margin: auto; background: transparent; max-width: min(720px, 92vw); max-height: 92vh; color: var(--type); }
dialog.lightbox::backdrop { background: rgba(20,16,15,.97); backdrop-filter: blur(10px); }
.lightbox img { width: 100%; max-height: 76vh; object-fit: contain; border-radius: var(--radius); }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; }
.lightbox-bar p { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--type-2); }
.lightbox-nav { display: flex; gap: 8px; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; background: var(--ground-4); border: 1px solid var(--line-hi); border-radius: var(--radius); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.icon-btn:hover { background: rgba(222,0,0,.2); border-color: var(--red); }

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

.cta { position: relative; overflow: hidden; isolation: isolate; text-align: center; }
.cta-media { position: absolute; inset: 0; z-index: -2; }
.cta-media img { width: 100%; height: 100%; object-fit: cover; opacity: .26; }
.cta-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, var(--scrim-deep), var(--scrim), var(--scrim-deep)); }
.cta-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cta-inner .lede { text-align: center; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- contact ---------- */

.contact { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 76px); }
.contact-list { display: flex; flex-direction: column; margin-top: 10px; }
.contact-row { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.contact-row:last-child { border-bottom: 1px solid var(--line); }
.contact-row svg { flex: none; color: var(--red); margin-top: 3px; }
.contact-row span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--meta); margin-bottom: 3px; }
.contact-row b { font-size: 15px; font-weight: 500; }
.contact-row a:hover { color: var(--red-dk); }

.form-card { background: var(--ground-3); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 3vw, 36px); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--meta); }
.field input, .field select, .field textarea { background: var(--ground-4); border: 1px solid var(--line-hi); border-radius: var(--radius); padding: 13px 14px; font-size: 14.5px; width: 100%; transition: border-color .2s ease, background .2s ease; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--chrome); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); background: var(--ground-4); }
.field ::placeholder { color: var(--meta); }
.field select option { background: var(--ground-3); color: var(--type); }
.field.is-bad input, .field.is-bad select { border-color: var(--red); }
.err { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--red-dk); display: none; }
.field.is-bad .err { display: block; }
.form-foot { font-size: 12.5px; color: var(--meta); margin-top: 14px; text-align: center; }
.hp { position: absolute; left: -9999px; }

.sent { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 42px 8px; }
.sent-mark { width: 62px; height: 62px; border-radius: 50%; border: 2px solid var(--red); color: var(--red-dk); display: grid; place-items: center; }

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

.site-foot {
  background: #0B0908;
  border-top: 1px solid var(--line-dark);
  --type: var(--dark-type);
  --type-2: #C9C6C1;
  --meta: var(--meta-dark);
  --line: var(--line-dark);
  --line-hi: rgba(232,230,225,.28);
  --red-dk: var(--red-lt);
  color: var(--type);
}
.foot-top { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 34px; padding-block: 58px 40px; }
.foot-brand img { height: 74px; width: auto; }
.foot-brand p { font-size: 13.5px; color: var(--meta); line-height: 1.7; margin-top: 16px; max-width: 32ch; }
.socials { display: flex; gap: 8px; margin-top: 20px; }
.socials a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); color: var(--type-2); transition: color .2s ease, border-color .2s ease, background .2s ease; }
.socials a:hover { color: #fff; border-color: var(--red); background: rgba(212,0,0,.35); }
.foot-col h4 { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--red-dk); margin-bottom: 18px; }
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.foot-col li, .foot-col a { font-size: 13.5px; color: var(--meta); transition: color .2s ease; }
.foot-col a:hover { color: var(--type); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 20px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--meta); }
.foot-bottom nav { display: flex; gap: 22px; }

/* ---------- mobile call bar ---------- */

.callbar { display: none; position: fixed; inset: auto 0 0; z-index: 90; background: rgba(232,230,225,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); gap: 10px; }
.callbar .btn { flex: 1; }

/* ---------- reveal ---------- */

.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }

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

/* ---------- responsive ---------- */

@media (max-width: 1120px) {
  .nav { gap: 18px; }
  .nav a { font-size: 11px; letter-spacing: .09em; }
  .head-phone { display: none; }
}

@media (max-width: 1080px) {
  .grid-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-top { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
}

@media (max-width: 940px) {
  .nav { display: none; }
  .burger { display: grid; }
  .hero { padding-top: 116px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-copy { padding-bottom: 0; }
  .hero-figure { max-width: 460px; margin-inline: auto; width: 100%; }
  .hero-plate { left: 12px; }
  .page-head { padding-top: 128px; }
  .story { grid-template-columns: 1fr; }
  .story-figure { padding-bottom: 0; padding-right: 0; max-width: 500px; }
  .story-figure .shot-inset { position: static; width: 100%; border: 0; margin-top: 10px; aspect-ratio: 16/9; }
  .svc-long { grid-template-columns: 1fr; gap: 24px; }
  .svc-long:nth-child(even) .svc-long-media { order: 0; }
  .contact { grid-template-columns: 1fr; }
  .grid-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-pkg { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .express, .quote-row { grid-template-columns: 1fr; }
  .callbar { display: flex; }
  body { padding-bottom: 72px; }
}

@media (max-width: 640px) {
  .grid-services { grid-template-columns: 1fr; }
  .grid-process { grid-template-columns: 1fr; }
  .creds { grid-template-columns: 1fr; }
  .cred + .cred { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .cred { padding-right: 0; }
  .field-pair { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; text-align: center; }
  .logo img { height: 44px; }
  .switch { display: flex; width: 100%; }
  .switch button { flex: 1; padding: 11px 8px; }
  .express-card { justify-content: flex-start; }
}

/* ---------- form failure state ---------- */

.sent--bad .sent-mark { border-color: var(--red); }
.sent--bad .cta-actions { flex-wrap: wrap; justify-content: center; }
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--meta); font-size: 12.5px;
  text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--type); }

/* ============================================================
   Depth: pointer-driven 3D. All of it collapses to flat and
   static under prefers-reduced-motion, at the end of this file.
   ============================================================ */

.tilt-stage { perspective: 1200px; perspective-origin: 50% 50%; }
.tilt {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.tilt.is-live { transition: transform .08s linear; }

/* the specular sweep that tracks the pointer across the hero photo */
.hero-figure .gloss {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background:
    radial-gradient(38% 46% at var(--gx, 50%) var(--gy, 40%),
      rgba(255,255,255,.34) 0%, rgba(255,255,255,.10) 34%, transparent 68%);
  mix-blend-mode: screen;
}
.hero-figure:hover .gloss, .hero-figure:focus-within .gloss { opacity: 1; }
.hero-figure .plate-3d { transform: translateZ(46px); }
.hero-figure img { transform: translateZ(0); }

/* service cards get a shallower version of the same idea */
.svc { transform-style: preserve-3d; }
.svc .svc-body { transform: translateZ(0); transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.svc:hover .svc-body { transform: translateZ(30px); }
.svc:hover { box-shadow: var(--lift-lg); }

/* ---------- areas we cover ---------- */

.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.area-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--ground-3); border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: var(--radius); padding: 26px 26px 24px;
  transition: transform .25s ease, border-color .25s ease;
}
.area-card:hover { transform: translateY(-4px); border-color: var(--line-hi); border-left-color: var(--red); }
.area-card h3 { font-size: 20px; }
.area-card p { font-size: 13.5px; color: var(--type-2); line-height: 1.6; }
.area-towns { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--meta); line-height: 1.7; }
.area-card .more { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--red-dk); margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: 0; max-width: 62rem; }
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-size: 16.5px; font-weight: 600; letter-spacing: -.005em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq p { color: var(--type-2); font-size: 14.5px; padding: 0 40px 20px 0; max-width: 68ch; }

/* ---------- town chips ---------- */

.towns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.towns span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  border: 1px solid var(--line-hi); border-radius: 999px;
  padding: 6px 13px; color: var(--type-2);
}

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

@media (prefers-reduced-motion: reduce) {
  .tilt { transform: none !important; transition: none; }
  .hero-figure .gloss { display: none; }
  .svc:hover .svc-body { transform: none; }
}

.follow { margin-top: 18px; font-size: 14px; color: var(--type-2); }
.follow a { color: var(--red-dk); text-decoration: underline; text-underline-offset: 3px; }
.follow a:hover { color: var(--type); }

/* the pointer hint only makes sense where the shader actually runs */
@media (hover: none), (max-width: 760px), (prefers-reduced-motion: reduce) {
}

/* ============================================================
   Progressive enhancements. Every one of these is wrapped in
   @supports or a media query, so older browsers get the plain
   site rather than a broken one.
   ============================================================ */

/* --- cross-document view transitions ---
   A multi-page static site normally flashes white between pages.
   Two declarations make navigation cross-fade instead, with the
   header and footer held in place. No JavaScript, no router. */
@view-transition { navigation: auto; }

.site-head { view-transition-name: site-head; }
.site-foot { view-transition-name: site-foot; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .22s ease both; }
  ::view-transition-new(root) { animation: vt-in .32s ease both; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* --- scroll-linked progress bar ---
   Driven by the scroll timeline, so it runs off the compositor
   rather than a scroll listener. Stays invisible where the
   timeline is unsupported. */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 101;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--red), #FF5347);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-progress {
      animation: progress-grow linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes progress-grow { to { transform: scaleX(1); } }

/* --- scroll-linked parallax on the story images ---
   Same idea: the view() timeline ties the drift to the element's
   own passage through the viewport, no scroll handler involved. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 941px) {
    .story-figure .shot-main {
      animation: drift-up linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes drift-up { from { transform: translateY(22px); } to { transform: translateY(-22px); } }

/* --- magnetic primary buttons --- */
.btn--red { transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .35s cubic-bezier(.22,.61,.36,1); }
.btn--red.is-pulled { transition: transform .08s linear, box-shadow .2s ease; }


/* ============================================================
   Depth on the card grids. Each grid is the perspective root,
   so cards tilt toward the pointer within a shared vanishing
   point rather than each having its own.
   ============================================================ */

.areas, .grid-gallery, .grid-pkg, .grid-services { perspective: 1400px; }

[data-tilt] {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .45s cubic-bezier(.22,.61,.36,1), border-color .25s ease, box-shadow .3s ease;
  will-change: transform;
}
[data-tilt].is-live { transition: transform .08s linear, border-color .25s ease, box-shadow .3s ease; }

/* area cards: the heading and the arrow lift off the surface */
.area-card h3 { transform: translateZ(28px); }
.area-card .more { transform: translateZ(20px); }
.area-card:hover { box-shadow: var(--lift-lg), 0 0 0 1px rgba(212,0,0,.35); }

/* gallery tiles: the caption floats above the photo */
.shot[data-tilt] .shot-tag { transform: translateZ(34px); }
.shot[data-tilt]:hover { box-shadow: var(--lift); }

/* package cards: name, price and button on separate planes */
.pkg[data-tilt] .pkg-name { transform: translateZ(26px); }
.pkg[data-tilt] .pkg-price { transform: translateZ(18px); }
.pkg[data-tilt] .btn { transform: translateZ(22px); }
.pkg[data-tilt] .pkg-flag { transform: translateY(-50%) translateZ(38px); }

@media (prefers-reduced-motion: reduce) {
  [data-tilt] { transform: none !important; }
  .area-card h3, .area-card .more, .shot[data-tilt] .shot-tag,
  .pkg[data-tilt] .pkg-name, .pkg[data-tilt] .pkg-price, .pkg[data-tilt] .btn { transform: none; }
  .pkg[data-tilt] .pkg-flag { transform: translateY(-50%); }
}

/* touch devices get the flat card, no phantom hover state */
@media (hover: none) {
  [data-tilt] { transform: none !important; }
}

/* ============================================================
   More depth. All CSS or plain transforms, nothing here needs
   WebGL, so it behaves the same on every machine.
   ============================================================ */

/* --- hero: separate planes, so moving the pointer parallaxes them
       against each other instead of tilting one flat picture --- */
.hero-figure img { transform: translateZ(0) scale(1.02); }
.hero-figure .gloss { transform: translateZ(30px); }
.hero-figure .plate-3d { transform: translateZ(60px); }
.hero-figure::before {
  content: "";
  position: absolute;
  inset: -8% -6% -12% -6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(212,0,0,.16), transparent 72%);
  transform: translateZ(-70px);
  filter: blur(18px);
  pointer-events: none;
}

/* --- process steps: each card swings up out of the page as it
       scrolls in, driven by the view() timeline --- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 641px) {
    .grid-process { perspective: 1200px; }
    .step {
      animation: step-swing linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
      transform-origin: 50% 100%;
    }
  }
}
@keyframes step-swing {
  from { opacity: 0; transform: rotateX(26deg) translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* --- service cards lift toward the reader on hover --- */
.svc { transition: background .3s ease, transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease; }
.svc:hover { transform: translateY(-4px); box-shadow: var(--lift-lg); }


@media (prefers-reduced-motion: reduce) {
  .hero-figure::before { display: none; }
  .svc:hover { transform: none; }
}

.hero-figure .plate-3d { transform: translateZ(60px) translate(var(--shift-x, 0), var(--shift-y, 0)); }
.hero-figure::before { transform: translateZ(-70px) translate(calc(var(--shift-x, 0px) * -1.6), calc(var(--shift-y, 0px) * -1.6)); }


/* ============================================================
   Instant quote. Two radio groups and a result card.
   With JavaScript off every combination renders as a plain
   price list, so nothing is hidden behind a script.
   ============================================================ */

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

.q-set { border: 0; margin-bottom: 26px; }
.q-set legend {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--meta); margin-bottom: 14px; padding: 0;
}

/* vehicle cards */
.q-cars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.q-car { position: relative; cursor: pointer; display: block; border-radius: var(--radius); overflow: hidden; }
.q-car input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
.q-car img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  filter: grayscale(.55) brightness(.6);
  transition: filter .3s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.q-car span {
  position: absolute; left: 12px; bottom: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.9);
}
.q-car::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  border: 2px solid transparent; transition: border-color .25s ease;
  pointer-events: none;
}
.q-car:hover img { filter: grayscale(.2) brightness(.78); }
.q-car:has(input:checked) img { filter: none; transform: scale(1.03); }
.q-car:has(input:checked)::after { border-color: var(--red); }
.q-car:has(input:focus-visible)::after { border-color: var(--red-dk); outline: 2px solid var(--red-dk); outline-offset: 2px; }

/* package rows */
.q-opts { display: flex; flex-direction: column; gap: 8px; }
.q-opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 14px 16px; cursor: pointer;
  background: var(--ground-3); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.q-opt input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
.q-opt-name { font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; }
.q-opt-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--meta); }
.q-opt:hover { border-color: var(--line-hi); background: var(--ground-4); }
.q-opt:has(input:checked) {
  border-color: var(--line-hi);
  background: var(--ground-4);
  box-shadow: inset 4px 0 0 var(--red), var(--lift-sm);
  transform: none;
}
.q-opt:has(input:checked) .q-opt-name { font-weight: 700; }
.q-opt:has(input:focus-visible) { outline: 2px solid var(--red-dk); outline-offset: 2px; }

.q-note { font-size: 13px; color: var(--meta); line-height: 1.6; max-width: 46ch; }

/* the result card */
/* ---- the work order ----
   A detailing shop hands you a slip: what you booked, how long it sits in
   the bay, what gets done to it, and the total. The picker fills one in.
   This is the one loud element on the page; everything around it is quiet. */
.q-result {
  background: var(--ground-4);
  border: 1px solid var(--line-hi);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  position: sticky;
  top: 96px;
  overflow: hidden;
}
.q-out { display: flex; flex-direction: column; }

.q-out-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--red);
  color: #fff;
  padding: 11px clamp(20px, 2.4vw, 30px);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.q-out-bar span:last-child { opacity: .88; }

.q-out-body {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(22px, 2.8vw, 32px);
}
.q-out-name { font-size: clamp(30px, 3.6vw, 42px); margin-bottom: -6px; }
.q-time {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--meta);
}
.q-time svg { flex: none; }

/* the tear-off line above the total */
.q-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  border-top: 2px dashed var(--line-hi);
  padding-top: 18px;
  margin-top: 2px;
}
.q-total-label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--meta);
}

/* a receipt figure, not a marketing number */
.q-price { display: flex; align-items: baseline; gap: 5px; }
.q-price .q-cur { font-family: var(--mono); font-size: 12.5px; color: var(--meta); letter-spacing: .06em; }
.q-price b {
  font-family: var(--mono);
  font-size: clamp(30px, 3.6vw, 40px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* JavaScript on: one at a time, with a small entrance */
.js .q-out { display: none; }
.js .q-out.is-on { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .js .q-out.is-on { animation: q-in .32s cubic-bezier(.22,.61,.36,1) both; }
}
@keyframes q-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* JavaScript off: every combination reads as a list */
.no-js .q-result { display: grid; gap: 28px; position: static; }
.no-js .q-out { border-top: 1px solid var(--line); padding-top: 20px; }
.no-js .q-out:first-child { border-top: 0; padding-top: 0; }

@media (max-width: 940px) {
  .quote { grid-template-columns: 1fr; }
  .q-result { position: static; }
}
@media (max-width: 520px) {
  .q-cars { grid-template-columns: 1fr; }
  .q-opt { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ============================================================
   The wall. Their photographs suspended at different depths in
   a real 3D scene you can drag. CSS transforms only, so it runs
   on the compositor and needs no WebGL.
   ============================================================ */

.wall-band { overflow: hidden; }

.wall {
  position: relative;
  height: clamp(420px, 62vh, 640px);
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

/* The mask lives on this inner layer, not on .wall, so that the hint below
   sits outside it and does not get faded away with the photos. */
.wall-view {
  position: absolute;
  inset: 0;
  perspective: 1100px;
  perspective-origin: 50% 50%;
  /* Fade all four edges so photos leave the scene rather than being sliced
     off against the container. Two gradients intersected: the sides pull in
     harder than the top and bottom, which are only there to soften the cut. */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.wall.is-grabbing { cursor: grabbing; }

.wall-stage {
  position: absolute;
  inset: 0;
  /* Pitch sits above the photo size below, so the grid breathes instead of
     the tiles butting into each other. Depth still overlaps some of them,
     which is the point, but nothing is buried. */
  --gx: clamp(168px, 17.5vw, 262px);   /* column pitch, photo is 140 to 210 */
  --gy: clamp(232px, 24vw, 336px);     /* row pitch, photo is 187 to 280 */
  transform-style: preserve-3d;
  transform:
    translate3d(var(--px, 0px), var(--py, 0px), -120px)
    rotateX(var(--rx, 5deg))
    rotateY(var(--ry, -14deg));
  will-change: transform;
}

/* Registering these makes the computed value resolve to real pixels, which
   is what the script reads to work out how far the wall may be dragged.
   Without registration a browser hands back the clamp() text and the script
   falls back to its own defaults. */
@property --gx { syntax: '<length>'; inherits: true; initial-value: 200px; }
@property --gy { syntax: '<length>'; inherits: true; initial-value: 260px; }

.wall-shot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(140px, 15vw, 210px);
  aspect-ratio: 3 / 4;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 0;
  padding: 0;
  background: var(--ground-3);
  cursor: pointer;
  transform-style: preserve-3d;
  /* laid out on a six by four grid, then pushed to its own depth */
  transform:
    translate3d(
      calc((var(--c) - 2.5) * var(--gx) - 50%),
      calc((var(--r) - 1.5) * var(--gy) - 50%),
      var(--z)
    );
  transition: filter .3s ease, box-shadow .3s ease;
  box-shadow: var(--lift);
}
.wall-shot img { width: 100%; height: 100%; object-fit: cover; }
.wall-shot::after {
  content: "";
  position: absolute; inset: 0;
  border: 2px solid transparent;
  border-radius: var(--radius);
  transition: border-color .25s ease;
}
.wall-shot:hover { filter: brightness(1.12); z-index: 2; }
.wall-shot:hover::after, .wall-shot:focus-visible::after { border-color: var(--red); }
.wall-shot .shot-tag { opacity: 0; transition: opacity .25s ease; }
.wall-shot:hover .shot-tag, .wall-shot:focus-visible .shot-tag { opacity: 1; }

/* Photos drift under this, so it carries its own backing rather than
   relying on whatever happens to be behind it. */
.wall-hint {
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--dark-type);
  padding: 7px 14px;
  border: 1px solid rgba(232,230,225,.24);
  border-radius: 999px;
  background: rgba(20,16,15,.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity .3s ease;
}
.wall.is-grabbing .wall-hint { opacity: 0; }

/* the wall is a flourish; without scripting it becomes a plain grid */
.no-js .wall { height: auto; cursor: auto; }
.no-js .wall-view { position: static; perspective: none; mask-image: none; -webkit-mask-image: none; }
.no-js .wall-stage { position: static; transform: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.no-js .wall-shot { position: static; transform: none; width: auto; box-shadow: none; }
.no-js .wall-hint { display: none; }

@media (max-width: 700px) {
  .wall { height: 400px; }
  .no-js .wall-stage { grid-template-columns: repeat(2, 1fr); }
  /* twelve across, two down, so a sideways drag alone reaches every photo */
  .wall-shot {
    transform:
      translate3d(
        calc((var(--mc) - 5.5) * var(--gx) - 50%),
        calc((var(--mr) - 0.5) * var(--gy) - 50%),
        var(--z)
      );
  }
}

@media (prefers-reduced-motion: reduce) {
  /* The drift and the throw are switched off in the script, but dragging
     is still the visitor's own hand and still works, so the hint stays. */
  .wall-stage { transition: none; }
}