/* ============================================================
   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; }
}

/* BUILD 5 — Night studio. Shared finish across every route. */
:root {
 --ground:#090b0e; --ground-2:#101318; --ground-3:#171b21; --ground-4:#20252e;
 --dark:#06080b; --dark-2:#14181e; --type:#f4f5f7; --type-2:#bfc5cd; --meta:#a2aab7;
 --dark-type:#f4f5f7; --red:#d82028; --red-dk:#ff696f; --red-lt:#ff696f;
 --line:rgba(218,229,247,.13); --line-hi:rgba(218,229,247,.27);
 --scrim:rgba(5,8,12,.65); --scrim-deep:rgba(5,8,12,.95);
 --lift-lg:0 35px 80px -24px #000; --lift:0 20px 45px -20px #000;
 --radius:8px; --pad-y:clamp(80px,10vw,150px);
}
body { background:#090b0e; }
.wrap { width:min(1400px,100% - var(--gutter)*2); }
.site-head,.site-head.is-stuck { background:rgba(9,11,14,.88); border-bottom:1px solid var(--line); backdrop-filter:blur(22px); }
.head-inner { padding-block:10px; gap:18px; }
.logo img { height:58px; }
.nav { gap:22px; }
.nav a { font-size:13px; letter-spacing:.055em; }
.head-phone { font-size:13px; }
.btn { min-height:48px; border-radius:4px; font-size:14px; letter-spacing:.06em; position:relative; isolation:isolate; }
.btn--sm { font-size:13px; padding:12px 16px; }
.btn--red { background:linear-gradient(125deg,#d82028,#ac111b); border-color:#eb4149; box-shadow:inset 0 1px 0 #ffffff30,0 8px 24px #d8202820; }
.btn--red:hover { background:linear-gradient(125deg,#ee343c,#bf1721); box-shadow:0 10px 36px #d8202840; }
.btn--ghost { background:#ffffff04; border-color:#ffffff3a; }
.btn--ghost:hover { color:#fff; background:#ffffff0d; }
.drawer,.callbar { background:rgba(12,15,20,.97); }
.drawer a { font-size:14px; }
.drawer { max-height:calc(100dvh - 90px); overflow:auto; }
.motion-toggle { width:36px; height:36px; flex:none; background:transparent; border:1px solid var(--line-hi); color:var(--type); border-radius:50%; cursor:pointer; font-size:16px; }
.motion-toggle:hover { border-color:var(--red-dk); }
.hero { padding:150px 0 0; isolation:isolate; background:radial-gradient(ellipse at 76% 45%,#24303f66,transparent 52%),#090b0e; }
.hero::before { display:none; }
.hero-atmosphere { position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(105deg,#090b0e 10%,transparent 60%),linear-gradient(0deg,#090b0e,transparent 45%); }
.finish-field { position:absolute; inset:0; width:100%; height:100%; z-index:-2; opacity:.7; pointer-events:none; }
.hero-grid { grid-template-columns:1.04fr 1fr; min-height:650px; gap:2vw; align-items:center; }
.hero-copy { position:relative; z-index:3; padding-bottom:70px; gap:26px; }
.eyebrow { font-size:13px; letter-spacing:.18em; color:var(--meta); }
.eyebrow::before { width:36px; background:var(--red-dk); }
.hero-copy h1 { font-size:clamp(82px,9.8vw,148px); letter-spacing:-.035em; line-height:.94; font-weight:900; text-transform:uppercase; }
.hero-copy h1 em { display:block; font-size:.8em; line-height:1.12; background:linear-gradient(170deg,#fff 10%,#d8e0e9 36%,#7f8d9d 48%,#f0f4fa 57%,#9ca8b8 88%); background-clip:text; -webkit-background-clip:text; color:transparent; }
.hero-copy h1::after { display:none; }
.hero-copy .lede { max-width:46ch; color:#bac3cf; font-size:17px; }
.hero-showcase { position:relative; perspective:1500px; height:580px; transform:translateY(var(--showcase-y,0px)); }
.hero-figure { position:absolute; inset:10% 0 7% 0; width:100%; margin:0; transform:rotateX(var(--rx,0deg)) rotateY(calc(-9deg + var(--ry,0deg))) rotateZ(-3deg); transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.hero-figure img { width:100%; height:100%; max-height:none; aspect-ratio:auto; object-position:center 62%; border-radius:12px; border:1px solid #d8e8ff55; box-shadow:0 45px 70px #0009; }
.hero-figure::before { inset:-20px; border:1px solid #bccbdd25; border-radius:14px; background:none; filter:none; transform:translateZ(-45px); }
.hero-figure .gloss { border-radius:12px; }
.hero-figure .hero-plate { left:24px; bottom:25px; font-size:12px; background:#080b10dc; border:1px solid #d4e2f344; padding:12px 18px; backdrop-filter:blur(12px); box-shadow:8px 8px 0 #d82028; }
.showcase-back { position:absolute; inset:8% 7% 13%; border:1px solid #dce8fa30; overflow:hidden; border-radius:12px; pointer-events:none; box-shadow:0 20px 40px #0006; transition:transform .8s ease; }
.showcase-back img { width:100%; height:100%; object-fit:cover; opacity:.65; }
.showcase-back--one { transform:translate(36px,-36px) rotate(9deg) scale(.93); }
.showcase-back--two { transform:translate(-30px,40px) rotate(-12deg) scale(.95); }
.hero-showcase:hover .showcase-back--one { transform:translate(44px,-54px) rotate(13deg) scale(.93); }
.hero-showcase:hover .showcase-back--two { transform:translate(-40px,54px) rotate(-15deg) scale(.95); }
.creds { margin-top:20px; border-bottom:0; background:linear-gradient(90deg,#ffffff04,transparent); }
.cred { padding-block:28px; gap:10px; }
.cred b { font-size:30px; font-weight:700; }
.cred span { font-size:12px; letter-spacing:.07em; }
.h-lg { font-size:clamp(44px,5.7vw,86px); line-height:1.04; letter-spacing:-.025em; }
.page-head { background:radial-gradient(ellipse at 90% 30%,#26314466,transparent 50%),#0e1117; padding-bottom:70px; overflow:hidden; }
.page-head::before { content:""; position:absolute; width:50vw; height:100%; right:-12%; top:0; border:1px solid #ffffff0d; transform:skewX(-28deg); background:linear-gradient(90deg,transparent,#ffffff04); pointer-events:none; }
.page-head .h-xl { font-size:clamp(58px,8vw,116px); line-height:1; }
.section-head { max-width:760px; gap:20px; }
.band--sunk { background:linear-gradient(145deg,#13171e,#0c0f14); }
.quote-band { border-top:1px solid #ffffff1a; }
.quote { grid-template-columns:minmax(0,1fr) minmax(0,.84fr); gap:clamp(30px,7vw,110px); }
.q-set legend,.q-opt-sub,.q-time,.q-total-label,.q-out-bar,.q-note,.rate-note,.pkg-note,.pkg-flag,.pkg-price span,.express-dur,.field label,.contact-row span,.foot-col h4 { font-size:13px; letter-spacing:.065em; }
.q-cars { gap:18px; }
.q-car { border-radius:8px; }
.q-car img { aspect-ratio:16/9; }
.q-car span { font-size:16px; }
.q-opt { border-radius:6px; padding:16px 18px; background:#ffffff03; }
.q-opt:has(input:checked) { background:linear-gradient(110deg,#d820281c,#ffffff05); border-color:#f36369; box-shadow:inset 3px 0 #f36369; }
.q-result { background:linear-gradient(145deg,#222832,#11161d); border:1px solid #7f8a9a66; box-shadow:0 30px 70px #0007; border-radius:12px; overflow:hidden; transform:perspective(1400px) rotateY(-3deg); }
.q-out-bar { background:#d82028; padding:17px 26px; }
.q-out-body { padding:32px; }
.q-price b { font-size:clamp(72px,8vw,112px); letter-spacing:-.04em; }
.grid-services { gap:22px; background:none; border:0; }
.svc { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:linear-gradient(150deg,#1a1f27,#101319); }
.svc-shot { aspect-ratio:1.2; }
.svc-shot img { transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter 1.2s; filter:saturate(.75); }
.svc:hover .svc-shot img { transform:scale(1.08); filter:saturate(1.1); }
.svc-body { padding:28px 28px 5px; }
.svc p,.step p,.tick-list li,.faq p { font-size:16px; }
.svc-idx { font-size:13px; }
.svc-long { gap:7vw; padding-block:60px; }
.svc-long-media { perspective:1200px; }
.svc-long img { border:1px solid var(--line-hi); box-shadow:20px 25px 0 #ffffff04; transition:transform .8s; }
.svc-long:hover img { transform:rotateY(4deg) rotateX(2deg); }
.grid-gallery { gap:22px; }
.shot { border-radius:9px; border:1px solid var(--line); }
.wall-band { background:radial-gradient(ellipse at center,#26313d 0%,#080b10 70%); }
.wall-band .section-head { max-width:800px; }
.wall { height:clamp(450px,75vh,760px); }
.wall-shot { border-radius:10px; border:1px solid #e0eaff3b; box-shadow:0 30px 60px #000b; }
.wall-hint { font-size:12px; padding:12px 20px; letter-spacing:.08em; }
.area-card { border:1px solid var(--line); border-top:2px solid #d82028; background:linear-gradient(135deg,#1a2029,#0d1117); padding:32px; border-radius:8px; }
.area-card h3 { font-family:var(--display); font-size:34px; text-transform:uppercase; }
.area-card p { font-size:16px; }
.area-towns,.area-card .more { font-size:13px; }
.pkg { background:linear-gradient(150deg,#1c222b,#10141a); border-radius:12px; padding:34px 28px; }
.pkg--pick,.band--dark .pkg--pick,.band--dark .q-result,.band--dark .form-card { --type:#f4f5f7; --type-2:#bfc5cd; --meta:#a2aab7; --line:#dbe7ff25; --line-hi:#dbe7ff45; --ground-3:#171b21; --ground-4:#20252e; color:var(--type); background:linear-gradient(145deg,#29232a,#151a22); }
.pkg--pick { border-color:#f36369; }
.pkg-name { font-size:38px; }
.pkg-price b { font-size:60px; }
.express-card,.quote-card,.form-card { border-radius:10px; background:linear-gradient(145deg,#1b2028,#12161d); }
.field input,.field select,.field textarea { font-size:16px; min-height:50px; background:#0b1017; }
.story-figure { perspective:1200px; }
.story-figure .shot-main { border:1px solid var(--line-hi); box-shadow:0 40px 80px #0008; }
.story-figure .shot-inset { box-shadow:0 25px 70px #000b; border:6px solid #090b0e; transform:rotate(5deg); }
.step { background:linear-gradient(155deg,#ffffff05,transparent); padding:28px; border:1px solid var(--line); border-radius:8px; }
.step::before { font-size:24px; color:var(--red-dk); }
.faq { max-width:100%; }
.faq summary { font-size:18px; padding-block:26px; }
.cta { padding-block:clamp(100px,12vw,180px); }
.cta-media img { opacity:.45; object-position:center 60%; }
.cta-inner .h-lg { font-size:clamp(52px,7vw,106px); max-width:900px; }
.site-foot { background:#06080c; }
.foot-col a,.foot-col li,.foot-brand p { font-size:14px; }
.foot-bottom { font-size:12px; }
.js .reveal.is-in { transition-duration:1s; }
@media(min-width:1100px) { .grid-services .svc:nth-child(3n+2) { margin-top:36px; margin-bottom:-36px; } .grid-services { padding-bottom:36px; } }
@media(prefers-reduced-motion:no-preference) {
 .hero-copy { animation:studio-enter 1.1s cubic-bezier(.16,1,.3,1) both; }
 .hero-showcase { animation:studio-enter 1.4s .1s cubic-bezier(.16,1,.3,1) both; }
 .hero-figure::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 30%,#fff2 45%,transparent 60%); background-size:300% 100%; animation:light-pass 7s ease-in-out infinite; border-radius:12px; }
}
@keyframes studio-enter { from { opacity:0; translate:0 30px; } to { opacity:1; translate:0 0; } }
@keyframes light-pass { 0%,20% { background-position:150% 0; } 75%,100% { background-position:-100% 0; } }
@media(max-width:1200px) { .head-phone { display:none; } .nav { gap:16px; } .hero-grid { min-height:580px; } .hero-showcase { height:490px; } }
@media(max-width:940px) {
 .hero { padding-top:125px; } .hero-grid { grid-template-columns:1fr; gap:28px; }
 .hero-copy { padding-bottom:0; max-width:700px; }
 .hero-copy h1 { font-size:clamp(76px,14vw,124px); }
 .hero-copy .lede { max-width:58ch; }
 .hero-showcase { width:min(640px,90%); margin:0 auto; height:490px; }
 .hero-figure { max-width:none; }
 .quote { grid-template-columns:1fr; } .q-result { transform:none; }
 .creds { margin-top:30px; } .cred b { font-size:26px; }
 .cred span { letter-spacing:0; }
 .story-figure .shot-inset { transform:none; }
 .page-head { padding-top:130px; }
}
@media(max-width:640px) {
 :root { --gutter:22px; --pad-y:76px; }
 .head-inner { gap:12px; } .logo img { height:44px; } .head-actions { gap:8px; }
 .head-actions .btn { font-size:12px; padding:10px; min-height:42px; }
 .motion-toggle { width:30px; height:30px; }
 .hero { padding-top:108px; } .hero-copy { gap:22px; }
 .hero-copy h1 { font-size:clamp(65px,15.5vw,96px); }
 .hero-copy .lede { font-size:16px; }
 .hero-showcase { height:360px; width:94%; }
 .showcase-back--one { transform:translate(12px,-16px) rotate(7deg) scale(.93); }
 .showcase-back--two { transform:translate(-10px,20px) rotate(-8deg) scale(.95); }
 .hero-figure { inset:6% 0 7%; transform:rotateY(-5deg) rotateZ(-2deg); }
 .hero-figure .hero-plate { left:16px; bottom:16px; font-size:12px; padding:8px 12px; }
 .creds { grid-template-columns:1fr; margin-top:0; }
 .cred { padding:18px 0; flex-direction:row; align-items:center; justify-content:space-between; gap:16px; }
 .cred b { font-size:24px; } .cred dt { max-width:52%; text-align:right; line-height:1.4; }
 .cred + .cred { padding-left:0; border-left:0; }
 .q-out-body { padding:24px; } .q-out-bar { flex-wrap:wrap; gap:8px; }
 .q-opt { padding:14px; } .q-opt-sub { font-size:12px; }
 .svc-long img { box-shadow:8px 12px 0 #ffffff04; }
 .area-card { padding:26px; } .wall-hint { max-width:90%; width:max-content; text-align:center; }
 .grid-gallery { gap:12px; } .shot-tag { font-size:12px; }
 .cta-actions,.hero-cta { gap:10px; } .foot-top { padding-top:40px; }
}
html.effects-paused *,html.effects-paused *::before,html.effects-paused *::after { animation:none!important; transition:none!important; }
html.effects-paused .reveal { opacity:1!important; transform:none!important; }
html.effects-paused [data-tilt],html.effects-paused .tilt { transform:none!important; }
html.effects-paused .hero-showcase { transform:none!important; }
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation:none!important; transition:none!important; }
 .hero-showcase,.hero-figure,.q-result,.story-figure .shot-inset { transform:none!important; }
}
/* Keep the receipt readable at narrow widths and enlarged text sizes. */
.q-total { align-items:flex-start; flex-direction:column; gap:14px; }
.q-price { flex-wrap:wrap; }
.q-price b { font-family:var(--display); font-size:clamp(64px,7vw,104px); }
.q-opt { flex-wrap:wrap; gap:4px 14px; }
.head-actions { flex-shrink:0; }
html.effects-paused .showcase-back--one { transform:translate(12px,-16px) rotate(7deg) scale(.93); }
html.effects-paused .showcase-back--two { transform:translate(-10px,20px) rotate(-8deg) scale(.95); }
@media(max-width:370px) { .head-actions .btn { display:none; } }
@media(forced-colors:active) { .hero-copy h1 em { color:CanvasText; background:none; } }


/* Vehicle condition & service policy */
.policy-intro { padding-top:clamp(70px,9vw,132px); }
.policy-layout { display:grid; grid-template-columns:minmax(230px,.42fr) minmax(0,1fr); gap:clamp(38px,9vw,150px); align-items:start; }
.policy-rail { position:sticky; top:118px; display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding:28px; border:1px solid var(--line); border-top:2px solid var(--red); border-radius:10px; background:linear-gradient(145deg,#1a2029,#0d1117); }
.policy-rail > p:not(.eyebrow) { color:var(--type-2); font-size:16px; line-height:1.65; }
.policy-content { border-top:1px solid var(--line); }
.policy-block { display:grid; grid-template-columns:74px minmax(0,1fr); gap:clamp(18px,3vw,46px); padding:clamp(34px,5vw,62px) 0; border-bottom:1px solid var(--line); }
.policy-number { font-family:var(--mono); font-size:14px; color:var(--red-dk); letter-spacing:.12em; padding-top:8px; }
.policy-block > div { display:flex; flex-direction:column; gap:15px; }
.policy-block .h-md { font-size:clamp(31px,4vw,52px); line-height:.98; }
.policy-block p:not(.policy-number) { max-width:68ch; color:var(--type-2); font-size:17px; line-height:1.75; }
.policy-close { text-align:center; }
.policy-close .h-lg { max-width:16ch; margin:16px auto 22px; }
.policy-close .lede { margin-inline:auto; text-align:center; }
.policy-close .cta-actions { justify-content:center; margin-top:28px; }
.form-foot a { color:var(--red-lt); text-decoration:underline; text-underline-offset:3px; }
.policy-ack { margin:4px 0 18px; padding:16px 17px; border:1px solid var(--line); border-left:3px solid var(--red); border-radius:6px; background:#ffffff04; }
.policy-ack > p:first-child { color:var(--type-2); font-size:14px; line-height:1.55; }
.policy-ack a { color:var(--red-lt); text-decoration:underline; text-underline-offset:3px; }
.policy-ack label { display:flex; align-items:flex-start; gap:10px; margin-top:12px; font-size:14px; font-weight:600; line-height:1.45; cursor:pointer; }
.policy-ack input { width:17px; height:17px; margin-top:2px; accent-color:var(--red); flex:none; }
.policy-ack .err { margin-top:8px; }
.policy-ack.is-bad { border-color:var(--red-dk); background:rgba(216,32,40,.1); }
@media(max-width:940px) { .policy-layout { grid-template-columns:1fr; gap:36px; } .policy-rail { position:static; } }
@media(max-width:640px) { .policy-rail { padding:24px; } .policy-block { grid-template-columns:48px minmax(0,1fr); gap:14px; } .policy-block p:not(.policy-number) { font-size:16px; } .policy-number { font-size:12px; } }