/* ==========================================================================
   FreshWhips V2 — site styles
   --------------------------------------------------------------------------
   One typeface (Archivo, variable weight and width): expanded and heavy for
   headlines, like the lettering in the logo; normal width for reading.
   Black and charcoal for the cinematic parts, white "garage floor" sections
   for the parts people read carefully (steps, hours, questions). Electric
   blue is the logo's swoosh: buttons, the progress line, the wipe.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --black: #000000;
  --charcoal: #16181b;
  --graphite: #23262b;
  --line-dark: #2c3036;
  --steel: #8d949e;
  --white: #ffffff;
  --paint: #f3f4f6;
  --line-light: #dfe2e7;
  --slate: #5b636e;
  --ink: #0d0f12;
  --electric: #00a3fa;      /* the logo's blue: on dark, and under black text */
  --electric-hi: #36b9ff;
  --deep-blue: #0062c4;     /* the same blue, dark enough to read on white */
  --ok: #19c37d;
  --warn: #f5b84a;
  --bad: #ff6b5e;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wide: 125%;
  --semi: 87.5%;

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.25rem + 0.7vw, 1.8rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.6rem + 2.8vw, 3.9rem);
  --display: clamp(2.7rem, 1.2rem + 6.6vw, 7.4rem);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 82.5rem;
  --header-h: 4.25rem;
  --radius-s: .5rem;
  --radius-m: .875rem;
  --radius-l: 1.375rem;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Big screens: every size on the site is in rem, so the whole layout grows
   a little past 1600px wide (to 1.25x on a 2560px-wide 1440p monitor)
   instead of sitting small in the middle of the screen. Up to 1600px wide,
   1rem is the browser's 16px. */
html { font-size: clamp(100%, 58.333% + .41667vw, 125%); }
/* Past a laptop's width the content column keeps a laptop's proportions,
   92% of the screen (as 1320px is of 1440px), so a big monitor does not
   get wide empty bands down both sides. */
@media (min-width: 1441px) {
  :root { --max: min(92vw, 2400px); }
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.02; letter-spacing: -0.012em; }

.skip {
  position: fixed; left: .75rem; top: -3.75rem; z-index: 200;
  background: var(--electric); color: var(--black); padding: .625rem 1rem; border-radius: var(--radius-s);
  font-weight: 700; text-decoration: none; transition: top .2s;
}
.skip:focus-visible { top: .75rem; }

:focus-visible { outline: 3px solid var(--electric); outline-offset: 3px; border-radius: .25rem; }
.light :focus-visible, .panel :focus-visible, .book-page :focus-visible { outline-color: var(--deep-blue); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Display type: expanded and heavy, the voice of the logo. */
.display {
  font-size: var(--display);
  font-stretch: var(--wide);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.035em;
}
.h2 { font-size: var(--step-4); font-stretch: var(--wide); font-weight: 800; line-height: 0.98; letter-spacing: -0.025em; }
.h3 { font-size: var(--step-2); font-stretch: 112%; font-weight: 750; line-height: 1.1; }
.lede { font-size: var(--step-1); line-height: 1.5; color: #c8ccd2; max-width: 38ch; }
.light .lede { color: var(--slate); }
.muted { color: var(--steel); }
.light .muted { color: var(--slate); }
.small { font-size: var(--step--1); }

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

.btn {
  --bg: var(--electric); --fg: var(--black); --bd: var(--electric);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 3.25rem; padding: 0 1.4em;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  border-radius: 999px;
  font-weight: 700; font-stretch: 108%; font-size: var(--step-0); letter-spacing: .005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .25s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { --bg: var(--electric-hi); --bd: var(--electric-hi); }
.btn:active { transform: scale(.97); }
.btn.ghost { --bg: transparent; --fg: var(--white); --bd: rgba(255,255,255,.35); }
.btn.ghost:hover { --bd: var(--white); --bg: rgba(255,255,255,.06); }
.light .btn.ghost { --fg: var(--ink); --bd: rgba(13,15,18,.25); }
.light .btn.ghost:hover { --bd: var(--ink); --bg: rgba(13,15,18,.04); }
.btn.dark { --bg: var(--black); --fg: var(--white); --bd: var(--black); }
.btn.dark:hover { --bg: #1f2227; --bd: #1f2227; }
.btn.small { min-height: 2.625rem; padding: 0 1.1em; font-size: var(--step--1); }
.btn.block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn .spin { width: 1.125rem; height: 1.125rem; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.textlink {
  color: inherit; font-weight: 650; text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: .22em; text-decoration-color: var(--electric);
}
.light .textlink { text-decoration-color: var(--deep-blue); }
.textlink:hover { color: var(--electric); }
.light .textlink:hover { color: var(--deep-blue); }

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

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  transition: transform .45s var(--ease-out), background-color .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.site-header[data-transparent]:not(.is-solid)::before {
  content: ""; position: absolute; inset: 0 0 -2.5rem 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,0));
}
.site-header.is-solid { background: rgba(0,0,0,.82); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom-color: rgba(255,255,255,.08); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; margin-right: auto; }
.brand img { width: 2.375rem; height: 2.375rem; border-radius: 50%; }
.brand span { font-weight: 800; font-stretch: var(--wide); font-size: 1.05rem; letter-spacing: -.01em; }
.nav { display: flex; align-items: center; gap: .25rem; }
.nav a:not(.btn) {
  text-decoration: none; font-weight: 600; font-size: .95rem; padding: .625rem .875rem; border-radius: 999px;
  color: #d6d9de; transition: color .2s, background-color .2s;
}
.nav a:not(.btn):hover { color: var(--white); background: rgba(255,255,255,.07); }
.nav a[aria-current="page"] { color: var(--white); }
.nav a[aria-current="page"]::after { content: ""; display: block; height: 2px; background: var(--electric); border-radius: 2px; margin-top: 2px; }
.nav .btn { margin-left: .625rem; }
.nav-phone { font-variant-numeric: tabular-nums; }
.menu-btn {
  display: none; width: 2.875rem; height: 2.875rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: transparent; cursor: pointer; align-items: center; justify-content: center;
}
.menu-btn span { display: block; width: 1.125rem; height: 2px; background: currentColor; position: relative; transition: transform .3s var(--ease-out); }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; width: 1.125rem; height: 2px; background: currentColor; transition: transform .3s var(--ease-out); }
.menu-btn span::before { top: -.375rem; } .menu-btn span::after { top: .375rem; }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { transform: translateY(.375rem) rotate(45deg); }
.menu-open .menu-btn span::after { transform: translateY(-.375rem) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 45; background: var(--black);
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
  display: flex; flex-direction: column; gap: .375rem;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .55s var(--ease-in-out), visibility 0s linear .55s;
}
.menu-open .mobile-menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .55s var(--ease-in-out); }
.mobile-menu a.big {
  font-size: clamp(2.2rem, 11vw, 3.4rem); font-stretch: var(--wide); font-weight: 800; letter-spacing: -.03em;
  text-decoration: none; line-height: 1.12; opacity: 0; transform: translateY(1.125rem);
  transition: opacity .4s, transform .5s var(--ease-out);
}
.menu-open .mobile-menu a.big { opacity: 1; transform: none; }
.menu-open .mobile-menu a.big:nth-child(2) { transition-delay: .06s; }
.menu-open .mobile-menu a.big:nth-child(3) { transition-delay: .12s; }
.menu-open .mobile-menu a.big:nth-child(4) { transition-delay: .18s; }
.mobile-menu .menu-foot { margin-top: auto; display: grid; gap: .75rem; color: var(--steel); }
.mobile-menu .menu-foot a { color: var(--white); font-weight: 650; text-decoration: none; }

@media (max-width: 900px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .header-book { display: inline-flex; }
}
@media (min-width: 901px) {
  .header-book, .mobile-menu { display: none; }
}

/* -------------------------------------------------------------- sections */

.section { padding: clamp(4.5rem, 11vw, 9.375rem) 0; position: relative; }
.light { background: var(--white); color: var(--ink); color-scheme: light; }
.paint { background: var(--paint); color: var(--ink); color-scheme: light; }
.charcoal { background: var(--charcoal); }
.section-head { display: grid; gap: 1.125rem; margin-bottom: clamp(2.25rem, 6vw, 4.5rem); max-width: 53.75rem; }

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

.hero { position: relative; background: var(--black); height: 210vh; height: 210svh; }
.hero-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-rows: minmax(0, 1fr);
  container-type: inline-size;
}
/* The words line up with the logo above them. 100cqw is the stage's width,
   which leaves out a desktop scroll bar (100vw counts it, and would put the
   words half a scroll bar to the right of the logo on Windows). */
.hero-copy {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--header-h) + 4vh) var(--gutter) clamp(1.75rem, 6vh, 4rem);
  padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding-left: max(var(--gutter), calc((100cqw - var(--max)) / 2 + var(--gutter)));
}
.hero-title { margin: 0 0 clamp(1.125rem, 3vh, 2.125rem); font-size: min(var(--display), 10.4vh, 9.4vw); }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-title .line > span { display: block; }
.hero-title .line > .fresh { position: relative; display: inline-block; color: var(--white); }
.hero-title .fresh .ghost-text { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.35); }
/* The filled copy sits exactly over the outlined one and is uncovered left
   to right with the blade, so both lines fill in step with the photo. */
.hero-title .fresh .fill {
  position: absolute; inset: 0; color: var(--white);
  clip-path: inset(-10% calc((1 - var(--wipe, 0)) * 100%) -10% 0);
}
.hero-sub { max-width: 34ch; margin-bottom: clamp(1.25rem, 3.5vh, 2.125rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.hero-facts {
  margin-top: clamp(1.625rem, 5vh, 3.25rem); padding-top: 1.125rem; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: .625rem 2.25rem; color: #c8ccd2; font-size: var(--step--1);
}
.hero-facts dt { color: var(--steel); }
.hero-facts dd { margin: 2px 0 0; color: var(--white); font-weight: 650; font-size: var(--step-0); }
.open-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--steel); margin-right: .5rem; vertical-align: 1px; }
.open-dot.on { background: var(--ok); box-shadow: 0 0 0 .25rem rgba(25,195,125,.18); }

.hero-media { position: relative; overflow: hidden; background: #050607; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero-media .after { clip-path: inset(0 calc((1 - var(--wipe, 0)) * 100%) 0 0); }
.blade {
  position: absolute; top: 0; bottom: 0; width: 3px; left: calc(var(--wipe, 0) * 100%);
  transform: translateX(-50%); background: var(--electric); z-index: 2;
  /* At the very start the blade is tucked away, so nothing is uncovered. */
  opacity: clamp(0, calc(var(--wipe, 0) * 40), 1);
}
.blade::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 2.875rem; height: 2.875rem; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--electric);
}
.blade::before {
  content: ""; position: absolute; top: 50%; left: 50%; z-index: 1; width: 1.375rem; height: .625rem;
  transform: translate(-50%, -50%);
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1 2 5l4 4M16 1l4 4-4 4'/%3E%3C/svg%3E");
}
.hero-tag {
  position: absolute; bottom: 1.125rem; z-index: 3; padding: .4375rem .75rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; font-stretch: 105%; background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* The finished photo is uncovered from the left, so each tag only shows
   while there is enough of its own photo underneath it. */
.hero-tag.tag-l { left: 1.125rem; opacity: clamp(0, calc((var(--wipe, 0) - .16) * 12), 1); }
.hero-tag.tag-r { right: 1.125rem; opacity: clamp(0, calc((.84 - var(--wipe, 0)) * 12), 1); }
.hero-credit { position: absolute; top: calc(var(--header-h) + .875rem); right: 1.125rem; z-index: 3; font-size: .78rem; color: rgba(255,255,255,.75); background: rgba(0,0,0,.45); padding: .375rem .625rem; border-radius: 999px; }
.scroll-cue { display: inline-flex; align-items: center; gap: .625rem; color: var(--steel); font-size: var(--step--1); margin-left: .375rem; }
.scroll-cue i { display: block; width: 1.5px; height: 1.75rem; background: linear-gradient(var(--electric) 50%, transparent 50%) 0 0/100% 200%; animation: cue 1.6s var(--ease-in-out) infinite; }
@keyframes cue { from { background-position: 0 100%; } to { background-position: 0 -100%; } }

/* Wide screens: the photo starts at the middle of the screen, so the menu
   (at the right of the content column) always sits on the photo instead of
   across its edge, and the words keep the left half. */
@media (min-width: 1601px) {
  .hero-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* The headline is held to a size that breaks it in the words' column
     (half the content column) the same way as on a laptop: four lines. */
  .hero-title { font-size: min(var(--display), 10.4vh, calc((var(--max) / 2 - 2 * var(--gutter)) / 6.15)); max-width: 6.4em; }
  .hero-facts { column-gap: 2rem; }
  /* Tall screens have room to spare, so the words sit in the middle of the
     photo's height rather than at the foot of an empty column. */
  .hero-copy { justify-content: center; padding-bottom: var(--header-h); }
}

/* Phones: the photo on top, the words underneath on black, so the blade
   only ever crosses the car and never the text or the buttons. */
@media (max-width: 900px) {
  .hero { height: 180svh; }
  .hero-stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .hero-media { order: -1; }
  .hero-media img { object-position: 50% 68%; }
  .hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 80%, rgba(0,0,0,.6) 100%); }
  .hero-tag { bottom: .75rem; }
  .hero-credit { display: none; }
  .hero-copy { padding: 1.125rem var(--gutter) 1.375rem; justify-content: flex-start; }
  .hero-title { font-size: min(10.4vw, 6.2svh); margin-bottom: .75rem; }
  .hero-sub { font-size: var(--step-0); margin-bottom: 1rem; }
  .hero-facts { display: none; }
  .scroll-cue { display: none; }
  .hero-actions .btn { flex: 1 1 0; min-height: 3.125rem; }
}

/* --------------------------------------------------------------- the steps */

.steps-wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.steps-intro { position: sticky; top: calc(var(--header-h) + 2.5rem); }
.steps-intro .drop-note {
  margin-top: 1.75rem; padding: 1.125rem 1.25rem; border-radius: var(--radius-m); background: var(--paint);
  border-left: .25rem solid var(--deep-blue); max-width: 26.25rem;
}
.steps-intro .drop-note strong { display: block; font-stretch: 110%; margin-bottom: .25rem; }
.steps-track { position: relative; padding-left: 2.75rem; }
.steps-track::before { content: ""; position: absolute; left: .8125rem; top: .625rem; bottom: .625rem; width: 2px; background: var(--line-light); }
.steps-track .progress { position: absolute; left: .8125rem; top: .625rem; width: 2px; height: calc((100% - 1.25rem) * var(--p, 1)); background: var(--deep-blue); }
.js-motion .steps-track .progress { height: calc((100% - 1.25rem) * var(--p, 0)); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step { position: relative; padding: 0 0 clamp(2.75rem, 7vw, 5.5rem); }
.step:last-child { padding-bottom: 0; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: -2.75rem; top: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .85rem;
  border: 2px solid; transition: background-color .3s, border-color .3s, color .3s;
}
.step::before, .js-motion .step.is-on::before { background: var(--deep-blue); border-color: var(--deep-blue); color: var(--white); }
.js-motion .step:not(.is-on)::before { background: var(--white); border-color: var(--line-light); color: var(--slate); }
.step h3 { font-size: var(--step-3); font-stretch: var(--wide); font-weight: 800; letter-spacing: -.02em; margin-bottom: .75rem; }
.step p { color: var(--slate); max-width: 46ch; margin: 0; }
.step .meta { margin-top: .75rem; font-weight: 650; font-size: var(--step--1); color: var(--ink); }
@media (max-width: 900px) {
  .steps-wrap { grid-template-columns: 1fr; }
  .steps-intro { position: static; }
}

/* -------------------------------------------------------- services/prices */

.price-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.125rem; }
.sizes { display: inline-flex; padding: .3125rem; border-radius: 999px; background: var(--graphite); position: relative; }
.light .sizes, .paint .sizes { background: var(--paint); }
.sizes button {
  position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer;
  min-height: 2.875rem; padding: 0 1.25rem; border-radius: 999px; font-weight: 700; font-stretch: 105%;
  color: var(--steel); transition: color .25s;
}
.sizes button[aria-pressed="true"], .sizes button[aria-selected="true"] { color: var(--black); }
.sizes .pill { position: absolute; z-index: 0; top: .3125rem; bottom: .3125rem; border-radius: 999px; background: var(--electric); transition: left .45s var(--ease-out), width .45s var(--ease-out); }
.size-note { color: var(--steel); font-size: var(--step--1); margin-top: .625rem; min-height: 1.6em; }

.svc-list { border-top: 1px solid var(--line-dark); }
.svc {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.6fr) auto auto; gap: 1.5rem; align-items: center;
  padding: clamp(1.375rem, 3vw, 2.125rem) 0; border-bottom: 1px solid var(--line-dark);
}
.svc h3 { font-size: var(--step-2); font-stretch: 115%; font-weight: 800; letter-spacing: -.015em; }
.svc .sum { color: var(--steel); margin: .375rem 0 0; font-size: var(--step--1); }
.svc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem .5rem; }
.svc li { font-size: .82rem; padding: .3125rem .6875rem; border-radius: 999px; border: 1px solid var(--line-dark); color: #cfd3d8; }
.svc .time { color: var(--steel); font-size: var(--step--1); white-space: nowrap; text-align: right; }
.svc .price { font-size: var(--step-3); font-stretch: var(--wide); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-align: right; min-width: 4.2ch; }
.svc .price small { display: block; font-size: .78rem; font-stretch: 100%; font-weight: 600; letter-spacing: 0; color: var(--steel); }
.svc .go { grid-column: 4; }
.svc-row-actions { display: flex; align-items: center; gap: 1.125rem; justify-content: flex-end; }
.svc.featured h3::after {
  content: "Inside and out"; display: inline-block; vertical-align: middle; margin-left: .75rem;
  font-size: .72rem; font-stretch: 100%; font-weight: 700; letter-spacing: .01em;
  color: var(--black); background: var(--electric); padding: .25rem .625rem; border-radius: 999px;
}
@media (max-width: 980px) {
  .svc { grid-template-columns: 1fr auto; gap: .875rem 1.25rem; }
  .svc .inc { grid-column: 1 / -1; order: 3; }
  .svc .price { grid-row: 1; grid-column: 2; }
  .svc-row-actions { grid-column: 1 / -1; order: 4; justify-content: space-between; }
}
/* The monthly plan, between the services and the extras. */
.plan-band {
  display: grid; grid-template-columns: minmax(0, 3.1fr) auto auto; gap: 1.125rem 1.5rem; align-items: center;
  margin-top: clamp(1.375rem, 3vw, 2rem); padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--radius-l);
  border: 1px solid var(--electric); background: rgba(0, 163, 250, .07);
}
.plan-band h3 { font-size: var(--step-2); font-stretch: 115%; font-weight: 800; letter-spacing: -.015em; }
.plan-band p { margin: .375rem 0 0; color: var(--steel); font-size: var(--step--1); max-width: 58ch; }
.light .plan-band p, .paint .plan-band p { color: var(--slate); }
.plan-band .pb-price { text-align: right; font-size: var(--step-3); font-stretch: var(--wide); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.plan-band .pb-price small { display: block; font-size: .78rem; font-stretch: 100%; font-weight: 600; letter-spacing: 0; color: var(--steel); margin-top: .25rem; }
.plan-band .pb-was { font-weight: 500; }
.plan-band[hidden], .extras[hidden] { display: none; }
@media (max-width: 980px) {
  .plan-band { grid-template-columns: minmax(0, 1fr) auto; }
  .plan-band .pb-actions { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .plan-band { grid-template-columns: 1fr; }
  .plan-band .pb-price { text-align: left; }
}

/* Extras under the price list. */
.extras { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 3.2fr); gap: .625rem 1.5rem; margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.extras .x-head h3 { font-size: var(--step-2); font-stretch: 115%; font-weight: 800; letter-spacing: -.015em; }
.extras .x-head p { color: var(--steel); margin: .375rem 0 0; font-size: var(--step--1); }
.extras ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-dark); }
.extras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 1.25rem; padding: .875rem 0; border-bottom: 1px solid var(--line-dark); }
.extras .x-name { font-weight: 800; font-stretch: 108%; }
.extras .x-desc { grid-column: 1; color: var(--steel); font-size: var(--step--1); }
.extras .x-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--step-2); font-stretch: var(--wide); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .extras { grid-template-columns: 1fr; } }
.fine-print { margin-top: 1.625rem; color: var(--steel); font-size: var(--step--1); max-width: 70ch; }

/* ------------------------------------------------ what gets cleaned (3D) */
/* The car floats on the section itself (the stills are rendered on the same
   charcoal), so there is no box around it: the panel and tabs carry the
   structure. */

.car3d-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.125rem 3rem; align-items: end; margin-bottom: clamp(1.75rem, 4vw, 3.25rem); }
.car3d-head .lede { margin: 0; }
.car3d-grid {
  display: grid; grid-template-columns: minmax(18.75rem, 23.75rem) minmax(0, 1fr);
  grid-template-areas: "tabs stage" "panel stage"; grid-template-rows: auto 1fr;
  gap: 1.875rem clamp(1.75rem, 4vw, 4rem); align-items: start;
}
.car3d-tabs { grid-area: tabs; justify-self: start; }
.car3d-tabs button { padding: 0 1rem; white-space: nowrap; }
.car3d-tabs button[hidden] { display: none; }
.car3d { grid-area: stage; position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.car3d-poster, .car3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.car3d-poster { object-fit: cover; transition: opacity .6s var(--ease-out); }
.car3d-canvas { display: block; opacity: 0; transition: opacity .7s var(--ease-out); touch-action: pan-y; cursor: grab; }
.car3d.is-live .car3d-canvas { opacity: 1; }
.car3d.is-live .car3d-poster { opacity: 0; pointer-events: none; }
.car3d.is-dragging .car3d-canvas { cursor: grabbing; }
.car3d-hint {
  position: absolute; left: 50%; bottom: .625rem; transform: translateX(-50%); margin: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: .625rem; white-space: nowrap;
  font-size: var(--step--1); font-weight: 600; color: var(--steel); transition: opacity .5s;
}
.car3d-hint::before {
  content: ""; width: 1.625rem; height: .75rem; flex: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10' fill='none' stroke='%2300a3fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1 2 5l4 4M16 1l4 4-4 4M2 5h18'/%3E%3C/svg%3E");
}
.car3d.has-turned .car3d-hint { opacity: 0; }
.car3d-panel { grid-area: panel; position: relative; z-index: 1; }   /* above the car as it drifts */
.car3d-panel > * { transition: opacity .2s, transform .35s var(--ease-out); }
.car3d-panel.is-swapping > * { opacity: 0; transform: translateY(.375rem); }
.car3d-panel h3 { font-size: var(--step-2); font-stretch: 115%; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }
.car3d-panel .sum { color: var(--steel); margin: .5rem 0 1.25rem; }
.car3d-panel ul { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem .5rem; }
.car3d-panel li { font-size: .82rem; padding: .3125rem .6875rem; border-radius: 999px; border: 1px solid var(--line-dark); color: #cfd3d8; }
.car3d-buy { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.375rem; border-top: 1px solid var(--line-dark); }
.car3d-price { margin: 0; font-size: var(--step-3); font-stretch: var(--wide); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.car3d-price .from { font-size: .42em; font-stretch: 100%; font-weight: 700; letter-spacing: 0; margin-right: .3em; color: #cfd3d8; }
.car3d-price small { display: block; margin-top: .375rem; font-size: .78rem; font-stretch: 100%; font-weight: 600; letter-spacing: 0; color: var(--steel); }
.car3d-credit { margin: 1.625rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--steel); max-width: 92ch; }
.car3d-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.car3d-credit a:hover { color: var(--white); }
@media (max-width: 900px) {
  .car3d-head { grid-template-columns: 1fr; }
  .car3d-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "stage" "panel"; gap: 1.375rem; row-gap: 1.375rem; }
  .car3d-panel { margin-top: 1.125rem; }   /* room for the car to drift into */
  .car3d-tabs { justify-self: stretch; display: flex; }
  .car3d-tabs button { flex: 1 1 auto; padding: 0 .75rem; }
  .car3d { aspect-ratio: 3 / 2; margin: 0 calc(var(--gutter) * -1); }
}

/* --------------------------------------------------------- before / after */

.compare {
  position: relative; overflow: hidden; border-radius: var(--radius-l); background: #050607;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
  --pos: 50%;
}
.compare img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare .c-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.compare .c-before { position: relative; }
.compare .c-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; transform: translateX(-50%);
  background: var(--electric); pointer-events: none;
}
.compare .c-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--electric) no-repeat center/1.5rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1 2 5l4 4M16 1l4 4-4 4'/%3E%3C/svg%3E");
}
.compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; }
.compare input[type="range"]:focus-visible + .c-handle::after { outline: 3px solid var(--white); outline-offset: 3px; }
.compare .c-label {
  position: absolute; top: .875rem; z-index: 2; padding: .375rem .75rem; border-radius: 999px;
  font-size: .78rem; font-weight: 800; letter-spacing: .02em; background: rgba(0,0,0,.66); color: var(--white);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none;
}
.compare .c-label.l { left: .875rem; }
.compare .c-label.r { right: .875rem; background: var(--electric); color: var(--black); }

.work-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 5vw, 4.5rem); align-items: center; }
.work-grid .compare { aspect-ratio: 3 / 4; max-height: 82vh; }
.work-copy .h2 { margin-bottom: 1.125rem; }
/* The car picker: each pick swaps its comparison into the stage. */
.compare-stage { position: relative; width: min(100%, calc(82vh * .75)); aspect-ratio: 3 / 4; }
.work-grid .compare-stage > .compare { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; }
.compare-stage .compare.is-incoming { z-index: 2; clip-path: inset(0 0 0 100%); }
.picks { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.875rem 0 1.75rem; }
.pick {
  position: relative; width: clamp(6.5rem, 30%, 10.5rem); aspect-ratio: 3 / 4; padding: 0; border: 0;
  border-radius: var(--radius-m); overflow: hidden; background: var(--graphite); cursor: pointer; color: var(--white);
  transition: box-shadow .25s, transform .25s var(--ease-out);
}
.pick img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out), opacity .25s; opacity: .72; }
.pick:hover img, .pick[aria-pressed="true"] img { opacity: 1; }
.pick:hover img { transform: scale(1.05); }
.pick span {
  position: absolute; left: .5rem; bottom: .5rem; max-width: calc(100% - 1rem); padding: .25rem .5625rem; border-radius: 999px;
  background: rgba(0,0,0,.66); font-size: .74rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pick[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--electric); }
.pick[aria-pressed="true"] span { background: var(--electric); color: var(--black); }
@media (max-width: 900px) { .work-grid { grid-template-columns: 1fr; } .work-grid .compare { max-height: none; } .compare-stage { width: 100%; } .pick { width: clamp(7.75rem, 36%, 10.5rem); } }

/* ------------------------------------------------------------ where/when */

.where { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); }
.hours { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.hours th, .hours td { text-align: left; padding: .875rem 0; border-bottom: 1px solid var(--line-light); }
.hours th { font-weight: 600; color: var(--slate); }
.hours td { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.today th, .hours tr.today td { color: var(--ink); }
.hours tr.today th::after { content: "Today"; margin-left: .625rem; font-size: .74rem; font-weight: 700; color: var(--white); background: var(--deep-blue); padding: 3px .5rem; border-radius: 999px; vertical-align: 1px; }
.status-line { display: flex; align-items: center; gap: .25rem; font-weight: 700; margin: 0 0 1.375rem; }
.contact-list { list-style: none; padding: 0; margin: 1.625rem 0 0; display: grid; gap: .875rem; }
.contact-list a { font-weight: 700; text-decoration: none; font-size: var(--step-1); font-stretch: 108%; }
.contact-list a:hover { color: var(--deep-blue); }
.contact-list span { display: block; font-size: var(--step--1); color: var(--slate); }
@media (max-width: 900px) { .where { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- questions */

.faq { border-top: 1px solid var(--line-light); max-width: 56.25rem; }
.faq details { border-bottom: 1px solid var(--line-light); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.375rem 3rem 1.375rem 0; position: relative;
  font-size: var(--step-1); font-weight: 700; font-stretch: 108%;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .375rem; top: 50%; width: .875rem; height: .875rem; margin-top: -.4375rem;
  background: linear-gradient(currentColor, currentColor) center/.875rem 2px no-repeat,
              linear-gradient(currentColor, currentColor) center/2px .875rem no-repeat;
  transition: transform .35s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq .answer { padding: 0 3rem 1.5rem 0; color: var(--slate); max-width: 68ch; }

/* ---------------------------------------------------------------- CTA band */

.cta-band { background: var(--electric); color: var(--black); color-scheme: light; padding: clamp(4rem, 9vw, 7.5rem) 0; overflow: hidden; }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.75rem; }
.cta-band h2 { font-size: var(--step-4); font-stretch: var(--wide); font-weight: 800; letter-spacing: -.03em; max-width: 14ch; }
.cta-band p { margin: .875rem 0 0; font-weight: 600; max-width: 42ch; }

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

.site-footer { background: var(--black); border-top: 1px solid var(--line-dark); padding: 4rem 0 2rem; color: var(--steel); font-size: var(--step--1); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.25rem; }
.footer-grid h2 { font-size: .9rem; font-weight: 700; color: var(--white); margin: 0 0 .875rem; font-stretch: 105%; letter-spacing: 0; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.footer-grid a { text-decoration: none; color: #c8ccd2; }
.footer-grid a:hover { color: var(--white); }
.footer-brand p { margin: .875rem 0 0; max-width: 30ch; }
.footer-base { margin-top: 3rem; padding-top: 1.375rem; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: .875rem 1.75rem; justify-content: space-between; }
.footer-base nav { display: flex; gap: 1.25rem; }
.footer-base a { color: var(--steel); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

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

/* Breadcrumbs: where this page sits, above its heading. */
.crumbs ol { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; font-size: var(--step--1); color: var(--steel); }
.crumbs li + li::before { content: "/"; margin-right: .375rem; opacity: .6; }
.crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.crumbs a:hover { color: var(--white); }
.crumbs [aria-current] { color: var(--white); }
.book-page .crumbs ol { color: var(--slate); }
.book-page .crumbs a:hover, .book-page .crumbs [aria-current] { color: var(--ink); }
.page-hero { padding: calc(var(--header-h) + clamp(2.5rem, 8vw, 6.875rem)) 0 clamp(2.25rem, 6vw, 4.375rem); }
.page-hero .display { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 6rem); margin-bottom: 1.125rem; }
.crumb { color: var(--steel); font-size: var(--step--1); margin-bottom: 1.125rem; display: inline-flex; gap: .5rem; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--white); }

/* ------------------------------------------------------------ reveals */

/* Content is visible without JavaScript. Only when motion is allowed and
   the script has started does an element begin hidden. */
.js-motion [data-reveal] { opacity: 0; }
.js-motion [data-reveal="clip"] { opacity: 1; clip-path: inset(100% 0 0 0); }

/* ------------------------------------------------------ micro-interactions */
/* Things you press give a little and spring back; a choice settles into
   place with a small overshoot. Text fields are left alone. All of it is
   switched off for reduced motion by the block below. */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); --spring-soft: cubic-bezier(.25, 1.35, .4, 1); }
.btn { transition: background-color .2s, color .2s, border-color .2s, transform .5s var(--spring); }
.btn:active { transform: scale(.95); transition-duration: .2s, .2s, .2s, .08s; }
.sizes .pill { transition: left .6s var(--spring-soft), width .6s var(--spring-soft); }
.sizes button { transition: color .25s, transform .45s var(--spring); }
.sizes button:active { transform: scale(.93); transition-duration: .25s, .08s; }
.chip { transition: background-color .2s, color .2s, border-color .2s, transform .45s var(--spring); }
.chip:active { transform: scale(.94); transition-duration: .2s, .2s, .2s, .08s; }
.pick { transition: box-shadow .25s, transform .5s var(--spring); }
.pick:active { transform: scale(.95); transition-duration: .25s, .08s; }
.g-tile { transition: transform .5s var(--spring); }
.g-tile:active { transform: scale(.97); transition-duration: .08s; }
.tile { transition: border-color .2s, box-shadow .2s, background-color .2s, transform .45s var(--spring); }
.tile:active { transform: scale(.985); transition-duration: .2s, .2s, .2s, .08s; }
.tile-input:checked + .tile .check { animation: fw-pop .5s var(--spring); }
@keyframes fw-pop { from { transform: scale(.3); } to { transform: scale(1); } }
.faq summary::after { transition: transform .5s var(--spring); }
.car3d-panel li { transition: border-color .2s, color .2s; }
.car3d-panel:not(.is-swapping) li { animation: fw-chip-in .5s var(--ease-out) backwards; }
.car3d-panel li:nth-child(2) { animation-delay: .03s; } .car3d-panel li:nth-child(3) { animation-delay: .06s; }
.car3d-panel li:nth-child(4) { animation-delay: .09s; } .car3d-panel li:nth-child(5) { animation-delay: .12s; }
.car3d-panel li:nth-child(6) { animation-delay: .15s; } .car3d-panel li:nth-child(7) { animation-delay: .18s; }
.car3d-panel li:nth-child(n+8) { animation-delay: .21s; }
@keyframes fw-chip-in { from { opacity: 0; transform: translateY(.375rem); } }

/* ------------------------------------------------------- page transitions */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .35s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in .55s var(--ease-out) both; }
@keyframes vt-out { to { opacity: .2; transform: translateX(-2%); } }
@keyframes vt-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .hero { height: auto; }
  .hero-stage { position: relative; height: auto; min-height: 100svh; }
}

/* ----------------------------------------------------- legal and prose */

.prose { max-width: 72ch; }
.prose h2 { font-size: var(--step-2); font-stretch: 112%; margin: 2em 0 .6em; }
.prose h3 { font-size: var(--step-1); margin: 1.6em 0 .5em; }
.prose p, .prose li { color: var(--slate); }
.prose ul { padding-left: 1.2em; }
.prose a { color: var(--deep-blue); }

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

.g-featured { padding: 0 0 clamp(1.5rem, 4vw, 3rem); }
.g-featured .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.g-featured .compare { aspect-ratio: 3 / 4; max-height: 78vh; }
.g-featured h2 { font-size: var(--step-3); font-stretch: var(--wide); font-weight: 800; letter-spacing: -.02em; margin-bottom: .875rem; }
.g-featured .g-note { margin-top: 1.125rem; padding: .875rem 1rem; border-left: 3px solid var(--electric); background: var(--charcoal); border-radius: 0 var(--radius-s) var(--radius-s) 0; color: #c8ccd2; font-size: var(--step--1); max-width: 46ch; }
@media (max-width: 900px) { .g-featured .wrap { grid-template-columns: 1fr; } .g-featured .compare { max-height: none; } }

.g-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.chip {
  border: 1px solid var(--line-dark); background: transparent; color: #d6d9de; cursor: pointer;
  min-height: 2.625rem; padding: 0 1rem; border-radius: 999px; font-weight: 650; font-size: .92rem;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: #565c66; color: var(--white); }
.chip[aria-pressed="true"] { background: var(--white); color: var(--black); border-color: var(--white); }
.chip .n { color: var(--steel); font-weight: 600; margin-left: .375rem; }
.chip[aria-pressed="true"] .n { color: var(--slate); }

.g-list { display: grid; gap: clamp(3.5rem, 8vw, 6.875rem); }
.g-list > * { min-width: 0; }
.g-car { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.g-car-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1.5rem; align-items: end; margin-bottom: 1.125rem; }
.g-car h2 { font-size: var(--step-3); font-stretch: var(--wide); font-weight: 800; letter-spacing: -.02em; }
.g-car .g-sub { color: var(--steel); margin: .5rem 0 0; }
.g-car .g-desc { color: #c8ccd2; margin: .625rem 0 0; max-width: 60ch; }
.g-stages { display: flex; flex-wrap: wrap; gap: .375rem; margin: .25rem 0 1rem; }
.g-stages .chip { min-height: 2.25rem; padding: 0 .8125rem; font-size: .85rem; }
.g-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(11.25rem, 23vw, 18.75rem); gap: .625rem;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: .75rem;
  scrollbar-width: thin; scrollbar-color: #3a3f46 transparent;
}
.g-row::-webkit-scrollbar { height: .375rem; }
.g-row::-webkit-scrollbar-thumb { background: #3a3f46; border-radius: .375rem; }
.g-tile {
  position: relative; scroll-snap-align: start; aspect-ratio: 3 / 4; border-radius: var(--radius-m); overflow: hidden;
  background: var(--graphite); border: 0; padding: 0; cursor: zoom-in;
}
.g-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out), opacity .4s; }
.g-tile:hover img { transform: scale(1.04); }
.g-tile .tag {
  position: absolute; left: .625rem; bottom: .625rem; padding: .25rem .625rem; border-radius: 999px; font-size: .74rem; font-weight: 700;
  background: rgba(0,0,0,.66); color: var(--white); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.g-tile .tag.finished { background: var(--electric); color: var(--black); }
.g-tile .play {
  position: absolute; top: 50%; left: 50%; width: 3.375rem; height: 3.375rem; margin: -1.6875rem 0 0 -1.6875rem; border-radius: 50%;
  background: rgba(0,0,0,.6) no-repeat 56% 50%/1.125rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z' fill='%23fff'/%3E%3C/svg%3E");
  border: 1.5px solid rgba(255,255,255,.7);
}
.g-tile.is-hidden { display: none; }
.g-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr)); gap: .75rem; margin-bottom: .875rem; }
.g-pairs .compare { aspect-ratio: 3 / 4; }
.g-empty { padding: 2.5rem 0; color: var(--steel); }

.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.96); display: grid;
  grid-template-rows: auto 1fr; color: var(--white); touch-action: none;
}
.lightbox[hidden] { display: none; }
.lb-top { display: flex; align-items: center; gap: 1rem; padding: .75rem clamp(.75rem, 3vw, 1.5rem); }
.lb-caption { margin: 0 auto 0 0; font-weight: 650; }
.lb-count { color: var(--steel); font-variant-numeric: tabular-nums; font-size: var(--step--1); }
.lb-stage { position: relative; display: grid; place-items: center; padding: 0 clamp(.5rem, 6vw, 5.5rem) 1.5rem; min-height: 0; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: calc(100svh - 6rem); object-fit: contain; border-radius: var(--radius-s); user-select: none; -webkit-user-drag: none; }
.lb-btn {
  width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: var(--white);
}
.lb-btn:hover { background: rgba(255,255,255,.16); }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: clamp(.5rem, 2vw, 1.5rem); } .lb-next { right: clamp(.5rem, 2vw, 1.5rem); }
@media (max-width: 640px) { .lb-prev, .lb-next { top: auto; bottom: 1.125rem; transform: none; } }

/* ---------------------------------------------------------------- reviews */
.empty-reviews { max-width: 40rem; padding: clamp(1.75rem, 5vw, 3rem); border: 1px solid var(--line-dark); border-radius: var(--radius-l); }
.review-list { display: grid; gap: 1.125rem; grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr)); }
.review { padding: 1.625rem; border-radius: var(--radius-l); background: var(--charcoal); }
.review blockquote { margin: 0 0 1rem; font-size: var(--step-1); line-height: 1.45; }
.review .who { font-weight: 700; }
.review .stars { color: var(--electric); letter-spacing: 2px; margin-bottom: .625rem; }

/* Space between a section heading and the line under it. */
.h2 + .lede, .display + .lede { margin-top: 1rem; }
.price-head .h2 + .lede { margin-bottom: 0; }

/* ================================================================ booking */

.book-page { background: var(--paint); color: var(--ink); color-scheme: light; }
.book-page .site-header { background: var(--black); }
.book-main { padding: calc(var(--header-h) + clamp(1.25rem, 4vw, 2.75rem)) 0 clamp(4rem, 8vw, 6.875rem); min-height: 100vh; }
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22.5rem; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 980px) { .book-grid { grid-template-columns: 1fr; } }

.book-title { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); font-stretch: var(--wide); font-weight: 800; letter-spacing: -.03em; line-height: .95; margin: 0 0 .625rem; }
.book-intro { color: var(--slate); margin: 0 0 1.625rem; max-width: 56ch; }
.book-intro strong { color: var(--ink); }

.progress-steps { list-style: none; margin: 0 0 1.375rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .375rem; }
.progress-steps li { min-width: 0; }
.progress-steps button {
  width: 100%; text-align: left; border: 0; background: transparent; padding: 0; cursor: default;
  display: grid; gap: .5rem; color: var(--slate); font-weight: 650; font-size: .86rem;
}
.progress-steps button::before { content: ""; display: block; height: .25rem; border-radius: .25rem; background: var(--line-light); transition: background-color .3s; }
.progress-steps .done button { cursor: pointer; color: var(--ink); }
.progress-steps .done button::before { background: var(--ink); }
.progress-steps .current button { color: var(--ink); }
.progress-steps .current button::before { background: var(--deep-blue); }
.progress-steps .done button:hover span { text-decoration: underline; }
.progress-steps span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-steps .n { color: var(--slate); font-weight: 600; margin-right: .25rem; }

.panel { background: var(--white); border-radius: var(--radius-l); padding: clamp(1.25rem, 3.4vw, 2.125rem); box-shadow: 0 1px 0 rgba(13,15,18,.04), 0 1.25rem 3.125rem -1.875rem rgba(13,15,18,.25); }
.panel h2 { font-size: var(--step-2); font-stretch: 112%; font-weight: 800; letter-spacing: -.015em; margin: 0 0 .375rem; }
.panel .hint { color: var(--slate); margin: 0 0 1.25rem; font-size: var(--step--1); }
.panel + .panel { margin-top: .875rem; }
.step-view[hidden] { display: none; }
.step-view:focus { outline: none; }

/* choice tiles: car size and service */
.size-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; margin-bottom: 1.625rem; }
.tile-input { position: absolute; opacity: 0; pointer-events: none; }
.tile {
  position: relative; display: grid; gap: .25rem; padding: 1rem; border-radius: var(--radius-m);
  border: 1.5px solid var(--line-light); background: var(--white); cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.tile:hover { border-color: #b9bfc8; }
.tile-input:checked + .tile { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tile-input:focus-visible + .tile { outline: 3px solid var(--deep-blue); outline-offset: 2px; }
.tile strong { font-stretch: 108%; font-size: var(--step-0); }
.tile .ex { color: var(--slate); font-size: .82rem; line-height: 1.35; }
.tile .check {
  position: absolute; top: .75rem; right: .75rem; width: 1.375rem; height: 1.375rem; border-radius: 50%;
  border: 1.5px solid var(--line-light); display: grid; place-items: center; transition: background-color .2s, border-color .2s;
}
.tile-input:checked + .tile .check { background: var(--ink); border-color: var(--ink); }
.tile-input:checked + .tile .check::after { content: ""; width: .5625rem; height: .3125rem; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
@media (max-width: 560px) {
  .size-tiles { grid-template-columns: 1fr; }
  .size-tiles .tile { grid-template-columns: 5.5em minmax(0, 1fr); align-items: center; padding-right: 3rem; }
  .svc-tile .s-name { font-size: var(--step-0); }
}
.tile strong { white-space: nowrap; }

/* Car sizes: a side view of each, drawn to the same scale, so the sizes
   compare at a glance. The chosen one turns blue and settles on its wheels. */
.size-tile .car-art { display: block; width: 100%; height: auto; margin: 1.25rem 0 .625rem; overflow: visible; }
.car-art .paint { fill: #2a2f36; transition: fill .3s; }
.car-art .pillar path { stroke: #2a2f36; stroke-width: 4; transition: stroke .3s; }
.car-art .glass { fill: #cfd8e2; }
.car-art .well { fill: #14171b; }
.car-art .tyre { fill: #0d0f12; }
.car-art .rim { fill: #b8c0ca; }
.car-art .hub { fill: #5b636e; }
.car-art .lamp { fill: #eef3f8; }
.car-art .tail { fill: #ff5a4e; }
.car-art .shadow { fill: rgba(13, 15, 18, .1); }
.car-art .car-body { transform-box: fill-box; }
.tile-input:checked + .size-tile .paint { fill: var(--electric); }
.tile-input:checked + .size-tile .pillar path { stroke: var(--electric); }
.tile-input:checked + .size-tile .car-body { animation: fw-settle .7s var(--spring); }
@keyframes fw-settle { from { transform: translateY(-.25rem); } to { transform: none; } }
@media (max-width: 560px) {
  .size-tiles .size-tile { grid-template-columns: 7rem minmax(0, 1fr); column-gap: .875rem; row-gap: 2px; }
  .size-tile .car-art { grid-row: 1 / span 2; grid-column: 1; margin: 0; align-self: center; }
  .size-tile strong, .size-tile .ex { grid-column: 2; }
  .size-tile strong { align-self: end; }
  .size-tile .ex { align-self: start; }
}

/* Extras: tick boxes under the services. */
.extras-pick { margin-top: 1.625rem; }
.extra-tiles { display: grid; gap: .625rem; }
.extra-tile { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.125rem; padding: .875rem 1rem .875rem 3.25rem; align-items: center; }
.extra-tile .x-name { font-weight: 800; font-stretch: 108%; }
.extra-tile .x-desc { grid-column: 1; color: var(--slate); font-size: .86rem; line-height: 1.4; }
.extra-tile .x-price { grid-column: 2; grid-row: 1 / span 2; font-weight: 800; font-stretch: 112%; font-size: var(--step-1); font-variant-numeric: tabular-nums; }
.extra-tile .check { left: 1rem; right: auto; top: 50%; margin-top: -.6875rem; border-radius: .375rem; }

.svc-tiles { display: grid; gap: .625rem; }
.svc-tile { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.125rem; padding: 1.125rem 1.125rem 1.125rem 1.125rem; }
.svc-tile .s-name { font-size: var(--step-1); font-stretch: 112%; font-weight: 800; letter-spacing: -.01em; padding-right: 1.875rem; }
.svc-tile .s-sum { color: var(--slate); font-size: .9rem; }
.svc-tile .s-inc { grid-column: 1 / -1; margin: .625rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .375rem; }
.svc-tile .s-inc li { font-size: .8rem; padding: .25rem .625rem; border-radius: 999px; background: var(--paint); color: #39414b; }
.svc-tile .s-price { grid-row: 1 / span 2; grid-column: 2; align-self: start; text-align: right; font-size: var(--step-2); font-stretch: var(--wide); font-weight: 800; letter-spacing: -.02em; padding-top: 1.375rem; }
.svc-tile .s-price small { display: block; font-size: .78rem; font-stretch: 100%; font-weight: 600; letter-spacing: 0; color: var(--slate); }
.svc-tile .check { top: 1.125rem; }

/* One time or every month. */
.mode-pick { margin-bottom: 1.625rem; }
.mode-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.mode-tile { padding: 1rem 3rem 1rem 1rem; }
.mode-tile strong { font-size: var(--step-1); font-weight: 800; letter-spacing: -.01em; }
@media (max-width: 420px) { .mode-tiles { grid-template-columns: 1fr; } }

/* The monthly plan, in place of the service list. */
.plan-card { border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 1px var(--ink); border-radius: var(--radius-m); padding: 1.125rem; background: var(--white); }
.plan-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1.125rem; align-items: start; }
.plan-top .p-name { display: block; font-size: var(--step-1); font-stretch: 112%; font-weight: 800; letter-spacing: -.01em; }
.plan-top .p-sub { display: block; color: var(--slate); font-size: .9rem; margin-top: 2px; }
.plan-top .p-price { text-align: right; }
.plan-top .p-price b { display: block; font-size: var(--step-2); font-stretch: var(--wide); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.plan-top .p-price small { display: block; font-size: .78rem; font-weight: 600; color: var(--slate); }
.plan-points { margin: .875rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.plan-points li { position: relative; padding-left: 1.625rem; font-size: .92rem; color: #2d3540; line-height: 1.45; }
.plan-points li::before { content: ""; position: absolute; left: .25rem; top: .42em; width: .5625rem; height: .3125rem; border: 2px solid var(--deep-blue); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.plan-card .s-inc { margin: .875rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .375rem; }
.plan-card .s-inc li { font-size: .8rem; padding: .25rem .625rem; border-radius: 999px; background: var(--paint); color: #39414b; }
.plan-note { margin: -.5rem 0 1.125rem; padding: .75rem .875rem; border-radius: var(--radius-m); background: #eef4ff; color: #2d3540; font-size: .9rem; line-height: 1.5; }
.plan-rule { margin: 1.125rem 0 0; padding-top: .875rem; border-top: 1px solid var(--line-light); color: #2d3540; font-size: .92rem; line-height: 1.5; }
.plan-rule strong { color: var(--ink); }

/* calendar */
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.125rem, 3vw, 2rem); }
@media (max-width: 760px) { .cal-wrap { grid-template-columns: 1fr; } }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .625rem; }
.cal-head strong { font-stretch: 110%; font-size: var(--step-1); }
.cal-nav { display: flex; gap: .375rem; }
.icon-btn {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1.5px solid var(--line-light); background: var(--white);
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
}
.icon-btn:hover:not([disabled]) { border-color: var(--ink); }
.icon-btn[disabled] { opacity: .35; cursor: not-allowed; }
.cal { width: 100%; border-collapse: separate; border-spacing: .25rem; table-layout: fixed; }
.cal th { font-size: .74rem; font-weight: 650; color: var(--slate); padding-bottom: .25rem; }
.cal td { padding: 0; }
.day {
  width: 100%; aspect-ratio: 1; border-radius: .75rem; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; position: relative;
  color: var(--ink); transition: background-color .15s, color .15s;
}
.day.open { background: var(--paint); }
.day.open:hover { background: #e3e7ec; }
.day.open::after { content: ""; position: absolute; bottom: .4375rem; width: .25rem; height: .25rem; border-radius: 50%; background: var(--deep-blue); }
.day[disabled] { color: #b4bac3; cursor: not-allowed; font-weight: 500; }
.day.full { text-decoration: line-through; text-decoration-color: #c4c9d0; }
.day.today { box-shadow: inset 0 0 0 1.5px var(--line-light); }
.day[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.day[aria-pressed="true"]::after { background: var(--electric); }
.cal-legend { display: flex; flex-wrap: wrap; gap: .375rem 1rem; margin-top: .625rem; color: var(--slate); font-size: .8rem; }
.cal-legend span::before { content: ""; display: inline-block; width: .625rem; height: .625rem; border-radius: 3px; margin-right: .375rem; vertical-align: -1px; background: var(--paint); box-shadow: inset 0 0 0 1px var(--line-light); }
.cal-legend .l-sel::before { background: var(--ink); box-shadow: none; }

.times h3 { font-size: var(--step-0); font-weight: 800; font-stretch: 108%; margin: 0 0 .25rem; }
.times .sub { color: var(--slate); font-size: .86rem; margin: 0 0 .875rem; }
.time-group { margin-bottom: .875rem; }
.time-group h4 { font-size: .78rem; font-weight: 650; color: var(--slate); margin: 0 0 .5rem; }
.time-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); gap: .5rem; }
.time {
  min-height: 2.875rem; border-radius: .625rem; border: 1.5px solid var(--line-light); background: var(--white);
  font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--ink);
  transition: border-color .15s, background-color .15s, color .15s;
}
.time:hover { border-color: var(--ink); }
.time[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.times-empty { color: var(--slate); padding: 1.125rem; border-radius: var(--radius-m); background: var(--paint); }
.skeleton { background: linear-gradient(90deg, #eef0f3 25%, #e2e6ea 37%, #eef0f3 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: .75rem; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* form */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem .875rem; }
.field { display: grid; gap: .375rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
@media (max-width: 620px) { .fields { grid-template-columns: 1fr; } }
.field label { font-weight: 700; font-size: .92rem; }
.field label .opt { color: var(--slate); font-weight: 500; }
.field .help { color: var(--slate); font-size: .8rem; margin: 0; }
.input {
  width: 100%; min-height: 3.25rem; padding: .75rem .875rem; border-radius: .75rem; border: 1.5px solid var(--line-light);
  background: var(--white); color: var(--ink); font: inherit; font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
textarea.input { min-height: 6rem; resize: vertical; line-height: 1.5; }
.input:hover { border-color: #b9bfc8; }
.input:focus { outline: none; border-color: var(--deep-blue); box-shadow: 0 0 0 3px rgba(0,98,196,.18); }
.field.invalid .input { border-color: #c4352b; }
.field .err { color: #b3261e; font-size: .84rem; font-weight: 600; margin: 0; display: none; }
.field.invalid .err { display: block; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; padding: .875rem; border-radius: .75rem; background: var(--paint); cursor: pointer; }
.consent input { width: 1.25rem; height: 1.25rem; margin: 2px 0 0; accent-color: var(--ink); }
.consent span { font-size: .9rem; color: #39414b; }
.consent small { display: block; color: var(--slate); margin-top: 2px; }
.agree { margin: 0 0 1rem; }
.agree .consent { border: 1.5px solid transparent; transition: border-color .15s, background-color .15s; }
.agree .consent:has(input:checked) { background: #eaf6ee; }
.agree.invalid .consent { border-color: #c4352b; background: #fdf0ee; }
.agree .err { color: #b3261e; font-size: .84rem; font-weight: 600; margin: .5rem 2px 0; }
.agree .err:empty { display: none; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* review */
.review-block { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-light); }
.review-block:first-of-type { padding-top: .25rem; }
.review-block h3 { font-size: .8rem; font-weight: 700; color: var(--slate); margin: 0 0 .25rem; }
.review-block p { margin: 0; font-weight: 650; }
.review-block .sub { color: var(--slate); font-weight: 500; font-size: .92rem; }
.edit { align-self: start; border: 0; background: transparent; color: var(--deep-blue); font-weight: 700; cursor: pointer; padding: .375rem 2px; text-decoration: underline; text-underline-offset: 3px; }
.total { display: flex; align-items: baseline; justify-content: space-between; padding: 1.125rem 0 .375rem; }
.total strong { font-size: var(--step-3); font-stretch: var(--wide); font-weight: 800; letter-spacing: -.02em; }
.pay-note { color: var(--slate); font-size: .88rem; margin: 0 0 1.125rem; }
.instructions { margin: 0 0 1.25rem; padding: 1rem 1.125rem; border-radius: var(--radius-m); background: #eef4ff; border-left: .25rem solid var(--deep-blue); }
.instructions h3 { font-size: .95rem; font-weight: 800; margin: 0 0 .5rem; }
.instructions ul { margin: 0; padding-left: 1.1em; color: #2d3540; font-size: .92rem; }
.legal-note { color: var(--slate); font-size: .82rem; margin: .875rem 0 0; text-align: center; }

.step-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.375rem; }
.back { border: 0; background: transparent; font-weight: 700; color: var(--ink); cursor: pointer; padding: .75rem .25rem; display: inline-flex; align-items: center; gap: .375rem; }
.back:hover { text-decoration: underline; text-underline-offset: 3px; }
.book-page .btn { --bg: var(--ink); --fg: var(--white); --bd: var(--ink); }
.book-page .btn:hover { --bg: #23272d; --bd: #23272d; }
.book-page .btn.go { --bg: var(--electric); --fg: var(--black); --bd: var(--electric); }
.book-page .btn.go:hover { --bg: var(--electric-hi); --bd: var(--electric-hi); }
.book-page .site-header .btn { --bg: var(--electric); --fg: var(--black); --bd: var(--electric); }

.alert { padding: .875rem 1rem; border-radius: .75rem; margin: 0 0 1rem; font-weight: 600; display: grid; grid-template-columns: auto 1fr; gap: .625rem; }
.alert::before { content: "!"; width: 1.375rem; height: 1.375rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8rem; }
.alert.error { background: #fdecea; color: #8c1d18; }
.alert.error::before { background: #b3261e; color: #fff; }
.alert.info { background: #eef4ff; color: #0b3a75; }
.alert.info::before { content: "i"; background: var(--deep-blue); color: #fff; }
.alert[hidden] { display: none; }

/* summary card */
.summary { position: sticky; top: calc(var(--header-h) + 1.5rem); background: var(--black); color: var(--white); border-radius: var(--radius-l); padding: 1.5rem; color-scheme: dark; }
.summary h2 { font-size: .9rem; font-weight: 700; color: var(--steel); margin: 0 0 .875rem; }
.summary dl { margin: 0; display: grid; gap: .875rem; }
.summary dt { font-size: .78rem; color: var(--steel); }
.summary dd { margin: 2px 0 0; font-weight: 650; }
.summary dd.empty { color: #5d636c; font-weight: 500; }
.summary .sum-total { margin-top: 1.125rem; padding-top: 1rem; border-top: 1px solid var(--line-dark); display: flex; justify-content: space-between; align-items: baseline; }
.summary .sum-total strong { font-size: var(--step-3); font-stretch: var(--wide); font-weight: 800; letter-spacing: -.02em; }
.summary .drop { margin-top: 1rem; font-size: .84rem; color: #c8ccd2; }
.summary .help-line { margin-top: 1rem; font-size: .84rem; color: var(--steel); }
.summary .help-line a { color: var(--white); font-weight: 650; }
@media (max-width: 980px) { .summary { display: none; } }

/* phone bar */
.mobile-bar { display: none; }
@media (max-width: 980px) {
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: .75rem;
    padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom)); background: var(--white);
    border-top: 1px solid var(--line-light); box-shadow: 0 -.625rem 1.875rem -1.25rem rgba(0,0,0,.4);
  }
  .mobile-bar .mb-info { flex: 1; min-width: 0; line-height: 1.25; }
  .mobile-bar .mb-info strong { display: block; font-size: var(--step-1); font-stretch: 112%; font-weight: 800; }
  .mobile-bar .mb-info span { display: block; font-size: .8rem; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-bar .btn { min-height: 3.125rem; }
  .book-main { padding-bottom: 7.5rem; }
  .step-actions .btn.next-inline { display: none; }
}

/* success */
.done-view { text-align: left; }
.done-mark { width: 4rem; height: 4rem; border-radius: 50%; background: var(--electric); display: grid; place-items: center; margin-bottom: 1.125rem; }
.done-mark svg { width: 1.875rem; height: 1.875rem; }
.done-mark path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .6s .15s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done-view .book-title { margin-bottom: .75rem; }
.done-actions { display: flex; flex-wrap: wrap; gap: .625rem; margin: 1.375rem 0 .375rem; }
.next-steps { list-style: none; margin: 1.125rem 0 0; padding: 0; counter-reset: ns; display: grid; gap: .75rem; }
.next-steps li { counter-increment: ns; display: grid; grid-template-columns: 1.875rem 1fr; gap: .625rem; color: #2d3540; }
.next-steps li::before { content: counter(ns); width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--paint); display: grid; place-items: center; font-weight: 800; font-size: .82rem; color: var(--ink); }

/* Fixes */
[hidden] { display: none !important; }
.site-header { color: var(--white); }
.skip { top: -7.5rem; }
.book-page .btn.ghost { --bg: transparent; --fg: var(--ink); --bd: rgba(13,15,18,.25); }
.book-page .btn.ghost:hover { --bg: rgba(13,15,18,.04); --bd: var(--ink); }
.is-done .summary { display: none; }
.is-done .book-grid { grid-template-columns: minmax(0, 47.5rem); }