/* Oven Clean Direct v1: "The Oven Revolution".
   One oven, cleaned by scrolling. Carbon dark turns to stainless light across the climax.
   Scroll progress arrives as --p (0..1) on the pinned METHOD section from main.js; the header follows the ground, switching at two hard-line markers. */

@font-face {
  font-family: "Mona Sans";
  src: url("fonts/mona-sans-w120-latin.woff2") format("woff2");
  font-weight: 600 900;
  font-stretch: 120%;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* dark state: carbon and baked grease */
  --carbon: oklch(0.165 0.012 55);
  --carbon-2: oklch(0.205 0.014 55);
  --carbon-line: oklch(0.34 0.02 55);
  --ember: oklch(0.955 0.012 80);
  --ember-2: oklch(0.84 0.025 75);
  --amber: oklch(0.871 0.259 136.6); /* accent on dark: the logo green (was amber) */
  /* light state: stainless steel and glass */
  --steel: oklch(0.968 0.004 235);
  --logo-green: oklch(0.871 0.259 136.6); /* sampled from the logo's 'DIRECT' green, rgb(120 248 16) */
  --steel-2: oklch(0.938 0.006 235);
  --steel-3: oklch(0.905 0.008 235);
  --steel-line: oklch(0.83 0.01 235);
  --ink: oklch(0.22 0.014 250);
  --ink-2: oklch(0.43 0.016 250);
  /* heat: the one primary action */
  --heat: oklch(0.871 0.259 136.6); /* primary action = the logo green (owner, 2026-09-27; was heat-orange) */
  --heat-hover: oklch(0.82 0.245 137);
  --heat-ink: oklch(0.22 0.014 250); /* ink text on the green */
  --heat-l: oklch(0.871 0.259 136.6);
  --heat-l-hover: oklch(0.82 0.245 137);
  --heat-text: oklch(0.45 0.15 142); /* green that reads as text/focus on steel */
  --err: oklch(0.5 0.19 28);

  --bg: var(--steel);

  --font-d: "Mona Sans", "Public Sans", system-ui, sans-serif;
  --font-b: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --g: clamp(16px, 4.2vw, 56px);
  --bar-h: 64px;
  --dock-h: 60px;
  --max: 1280px;

  color-scheme: dark light;
  scrollbar-color: var(--carbon-line) var(--carbon);
}
@media (min-width: 900px) { :root { --bar-h: 76px; --dock-h: 0px; } }
html.is-light { scrollbar-color: var(--steel-line) var(--steel); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 12px); }
body {
  margin: 0; overflow-x: clip;
  background: var(--bg); color: var(--ember);
  font-family: var(--font-b); font-size: 1.0625rem; line-height: 1.6;
  font-variant-numeric: tabular-nums lining-nums;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  padding-bottom: var(--dock-h);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p, h1, h2, h3, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
strong { font-weight: 700; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--heat); color: var(--heat-ink); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
.light :focus-visible, .is-light .bar :focus-visible, .is-light .dock :focus-visible { outline-color: var(--heat-text); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; background: var(--ember); color: var(--carbon); font-weight: 700; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--g); }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Surfaces: dark sections carry carbon tokens, light sections steel tokens */
.s2 { background: var(--carbon); color: var(--ember); }
.result, .prices, .reviews, .book, .foot, .page { --fg: var(--ink); --fg-2: var(--ink-2); background: var(--steel); color: var(--ink); }
.result, .prices, .reviews, .book, .foot, .page { caret-color: var(--heat-text); }
.result :focus-visible, .prices :focus-visible, .reviews :focus-visible, .book :focus-visible, .foot :focus-visible, .page :focus-visible { outline-color: var(--heat-text); }

/* ---------- Type ---------- */
.h2 {
  font-family: var(--font-d); font-weight: 780; font-stretch: 120%;
  font-size: clamp(1.75rem, 1.1rem + 3vw, 3.5rem); line-height: 1.04; letter-spacing: -0.02em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 4px; cursor: pointer;
  font-family: var(--font-d); font-weight: 760; font-stretch: 120%; font-size: 1rem; letter-spacing: 0;
  white-space: nowrap; text-decoration: none;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.btn--heat { background: var(--heat); color: var(--heat-ink); }
/* secondary: an outline in the ground's own ink, clearly subordinate to the heat fill */
.btn--ghost { background: transparent; color: var(--ember); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--ghost:hover { background: oklch(0.955 0.012 80 / 0.1); }
.btn--ghost:active { transform: translateY(1px); }
.btn--ghost[aria-current="page"] { background: oklch(0.955 0.012 80 / 0.14); }
.hero .btn--ghost, .result .btn--ghost, .page .btn--ghost, .is-light .bar .btn--ghost { color: var(--ink); }
.hero .btn--ghost:hover, .result .btn--ghost:hover, .page .btn--ghost:hover, .is-light .bar .btn--ghost:hover, .is-light .bar .btn--ghost[aria-current="page"] { background: oklch(0.22 0.014 250 / 0.07); }
.btn--heat:hover { background: var(--heat-hover); }
.btn--heat:active { transform: translateY(1px); }
.hero .btn--heat, .result .btn--heat, .prices .btn--heat, .book .btn--heat, .page .btn--heat, .is-light .bar .btn--heat, .is-light .dock .dock__a--book { background: var(--heat-l); color: var(--heat-ink); }
.hero .btn--heat:hover, .result .btn--heat:hover, .book .btn--heat:hover, .page .btn--heat:hover, .is-light .bar .btn--heat:hover { background: var(--heat-l-hover); }

.tel {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  font-family: var(--font-d); font-weight: 720; font-stretch: 120%; font-size: 1.125rem; white-space: nowrap; text-decoration: none;
}
.tel:hover { text-decoration: underline; }
.tel .ico { width: 22px; height: 22px; }

/* ---------- Header ---------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--bar-h);
  background: oklch(0.14 0.01 55 / 0.94); color: var(--ember);
  border-bottom: 1px solid oklch(0.3 0.02 55 / 0.6);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.is-light .bar { background: oklch(0.968 0.004 235 / 0.97); color: var(--ink); border-bottom-color: var(--steel-line); }
.bar__in { height: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--g); display: flex; align-items: center; gap: 8px; }
.bar__logo { display: block; flex: none; margin-right: auto; }
.bar__img { width: 104px; height: auto; }
.bar__nav, .bar__tel, .bar__book { display: none; }
.bar__prices { min-height: 44px; padding: 0 14px; font-size: 0.9375rem; flex: none; }
.bar__contact-i, .bar__contact-s { display: none; }
/* narrow phones: Contact now compacts to icon + "Call now" (or "Call" where that can't fit) so logo, See Prices, the call button and the menu fit on one row */
@media (max-width: 459px) {
  .bar .bar__contact { flex-direction: row; align-items: center; gap: 5px; padding: 0 10px; }
  .bar__prices { padding: 0 12px; }
  .bar__contact-now { display: none; }
  .bar__contact-k, .bar__contact-n { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bar__contact-i { display: block; width: 18px; height: 18px; }
  .bar__contact-s { display: inline; font-family: var(--font-d); font-stretch: 120%; font-weight: 760; font-size: 0.875rem; }
  .bar__in { gap: 5px; }
  .bar__img { width: 92px; }
}
@media (min-width: 400px) and (max-width: 459px) { .bar__contact-now { display: inline; } }
@media (max-width: 379px) { .bar__in { padding-inline: 12px; } }
/* smallest phones: the call button drops to a 44px phone icon (its label stays for screen readers) */
@media (max-width: 359px) {
  .bar__in { padding-inline: 12px; }
  .bar__prices { padding: 0 12px; font-size: 0.875rem; }
  .bar .bar__contact { width: 44px; padding: 0; justify-content: center; }
  .bar__contact-s { display: none !important; }
  .bar__img { width: 84px; }
}
.bar__contact {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: 44px; padding: 3px 12px; border-radius: 4px; line-height: 1.15; text-decoration: none; white-space: nowrap;
  background: var(--ember); color: var(--carbon);
}
.is-light .bar__contact { background: var(--ink); color: var(--steel); }
.bar__contact-k { font-size: 0.75rem; font-weight: 650; }
.bar__contact-n { font-family: var(--font-d); font-stretch: 120%; font-weight: 760; font-size: 0.875rem; }
.burger { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid oklch(0.5 0.02 55 / 0.7); border-radius: 4px; background: transparent; cursor: pointer; }
.is-light .burger { border-color: var(--steel-line); }
.burger svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.burger path { transition: transform 0.3s var(--ease), opacity 0.2s; transform-origin: 12px 12px; }
.burger[aria-expanded="true"] .burger__t { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__m { opacity: 0; }
.burger[aria-expanded="true"] .burger__b { transform: translateY(-5px) rotate(-45deg); }

.menu {
  position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100svh - var(--bar-h)); overflow-y: auto;
  padding: 8px var(--g) 24px; background: var(--carbon-2); color: var(--ember);
  border-bottom: 1px solid var(--carbon-line); box-shadow: 0 18px 30px -12px oklch(0.1 0.01 55 / 0.55);
}
.is-light .menu { background: var(--steel); color: var(--ink); border-bottom-color: var(--steel-line); box-shadow: 0 18px 30px -12px oklch(0.3 0.02 250 / 0.25); }
.menu li a { display: flex; align-items: center; min-height: 52px; font-family: var(--font-d); font-stretch: 120%; font-weight: 720; font-size: 1.25rem; text-decoration: none; border-bottom: 1px solid oklch(0.5 0.02 55 / 0.3); }
.is-light .menu li a { border-bottom-color: var(--steel-line); }
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.menu__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.menu__tel { font-family: var(--font-d); font-stretch: 120%; font-weight: 720; font-size: 1.125rem; min-height: 48px; display: inline-flex; align-items: center; }

@media (min-width: 900px) {
  .bar__img { width: 150px; }
  .bar__in { gap: 20px; }
  .bar__nav { display: block; }
  .bar__nav ul { display: flex; gap: clamp(14px, 2vw, 30px); }
  .bar__nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; }
  .bar__nav a:hover, .bar__nav a[aria-current="page"] { text-decoration: underline; }
  .bar__tel { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-d); font-stretch: 120%; font-weight: 720; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; }
  .bar__tel:hover { text-decoration: underline; }
  .bar__book { display: inline-flex; min-height: 44px; }
  .bar__contact, .burger, .menu { display: none !important; }
}

/* ---------- Mobile dock ---------- */
.dock {
  position: fixed; inset: auto 0 0; z-index: 55; display: grid; grid-template-columns: 1fr 1fr 1.25fr;
  height: calc(var(--dock-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: oklch(0.14 0.01 55 / 0.97); color: var(--ember); border-top: 1px solid var(--carbon-line);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.is-light .dock { background: oklch(0.968 0.004 235 / 0.98); color: var(--ink); border-top-color: var(--steel-line); }
.dock__a { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 650; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; }
.dock__a + .dock__a { border-left: 1px solid oklch(0.5 0.02 55 / 0.35); }
.is-light .dock__a + .dock__a { border-left-color: var(--steel-line); }
.dock__a--book { background: var(--heat); color: var(--heat-ink); font-family: var(--font-d); font-stretch: 120%; font-weight: 760; }
@media (min-width: 900px) { .dock { display: none; } }


/* ================= Hero: clean and aspirational, on the steel-white ground (V2's layout, V1's type) ================= */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--steel); color: var(--ink); caret-color: var(--heat-text);
  min-height: min(100svh, 1000px); display: grid; grid-template-rows: 1fr auto;
}
.hero :focus-visible { outline-color: var(--heat-text); }
.hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: min(60%, 1100px); z-index: -1; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
/* the image's left edge dissolves into the white page: no dark shade, no painted glow */
.hero__fade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, var(--steel) 0%, oklch(0.968 0.004 235 / 0.85) 12%, oklch(0.968 0.004 235 / 0) 42%),
    linear-gradient(to top, var(--steel) 0%, oklch(0.968 0.004 235 / 0) 14%),
    linear-gradient(to bottom, oklch(0.968 0.004 235 / 0.7) 0%, oklch(0.968 0.004 235 / 0) calc(var(--bar-h) + 40px)); }
.hero__body { align-self: center; width: 100%; max-width: 1440px; margin: 0 auto; padding: calc(var(--bar-h) + 56px) var(--g) 24px; }
.hero__title {
  font-family: var(--font-d); font-stretch: 120%; font-weight: 850;
  font-size: clamp(2.1rem, 1rem + 4.3vw, 4.6rem); line-height: 1.0; letter-spacing: -0.03em;
  max-width: 11.5ch; text-wrap: balance;
}
.hero__em { color: inherit; padding: 0 0.06em; margin: 0 -0.06em; position: relative; isolation: isolate; } /* logo-green squeegee swipe behind the word; the word stays ink */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; margin-top: clamp(22px, 3vw, 36px); }
.hero__text { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.hero__price { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-weight: 650; color: var(--ink); white-space: nowrap; }
.hero__price:hover, .hero__text:hover { text-decoration-thickness: 2px; }
.hero__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; margin-top: 14px; }
.hero .rate { color: var(--ink); }
.hero .rate__n { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); font-weight: 850; letter-spacing: -0.03em; line-height: 1; }
.hero .rate__c { color: var(--ink-2); }
.hero .stars { font-size: 1.125rem; background: linear-gradient(90deg, var(--ink) var(--g-fill), var(--steel-line) var(--g-fill)); }
.hero__quote { margin: 0; padding-left: 20px; border-left: 1px solid var(--steel-line); max-width: 22rem; }
.hero__quote blockquote { font-weight: 500; line-height: 1.4; }
.hero__quote figcaption { margin-top: 4px; font-size: 0.875rem; color: var(--ink-2); }
.hero__lede { margin-top: 18px; max-width: 32rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.2rem); color: var(--ink-2); }
.hero__meta { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--g) clamp(22px, 3vw, 40px);
  display: flex; flex-wrap: wrap; align-items: center; font-size: 0.9375rem; color: var(--ink-2); }
.hero__meta .dot, .hero__price .dot { opacity: 0.7; }
@media (min-width: 900px) {
  .hero__body { padding-top: calc(var(--bar-h) + 72px); }
}
@media (max-width: 899px) {
  .hero { min-height: 0; display: block; padding-top: var(--bar-h); }
  .hero__media { position: relative; width: 100%; height: 40svh; min-height: 230px; }
  .hero__img { object-position: 64% 50%; }
  .hero__fade { background:
      linear-gradient(to top, var(--steel) 0%, oklch(0.968 0.004 235 / 0.8) 16%, oklch(0.968 0.004 235 / 0) 42%); }
  .hero__body { position: relative; margin-top: -56px; padding: 0 var(--g) 12px; }
  .hero__actions { gap: 4px 22px; margin-top: 18px; }
  .hero__text { display: none; }
  .hero__quote { display: none !important; }
  .hero__rating { margin-top: 6px; }
  .hero__lede { margin-top: 10px; }
  .hero__meta { padding-bottom: 28px; font-size: 0.875rem; }
}

/* ---------- Shared: rating line, star meter, dot separator ---------- */
.rate { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--ember); }
.rate:hover .rate__c { text-decoration: underline; }
.rate__n { font-family: var(--font-d); font-stretch: 120%; font-weight: 800; font-size: 1.375rem; }
.rate__c { font-size: 0.9375rem; color: var(--ember-2); }

.stars {
  --g-fill: 94%;
  display: inline-block; width: 5.4em; height: 1em; flex: none;
  background: linear-gradient(90deg, var(--amber) var(--g-fill), oklch(0.5 0.02 70 / 0.55) var(--g-fill));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.95 6.3 6.85.8-5.1 4.7 1.4 6.8L12 17.4l-6.1 3.4 1.4-6.8-5.1-4.7 6.85-.8z'/%3E%3C/svg%3E") 0 0 / 1.08em 1em repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.95 6.3 6.85.8-5.1 4.7 1.4 6.8L12 17.4l-6.1 3.4 1.4-6.8-5.1-4.7 6.85-.8z'/%3E%3C/svg%3E") 0 0 / 1.08em 1em repeat-x;
}
.reviews .stars { background: linear-gradient(90deg, var(--ink) var(--g-fill), var(--steel-line) var(--g-fill)); }
.dot { width: 4px; height: 4px; margin: 0 10px; border-radius: 50%; background: currentColor; }

/* placeholder frames (how it works): composed, quiet, intentionally temporary */
.ph { position: relative; margin: 0; width: 100%; border-radius: 3px; overflow: hidden;
  background: linear-gradient(160deg, oklch(0.285 0.012 62), oklch(0.2 0.012 55) 52%, oklch(0.24 0.012 60));
  box-shadow: 0 0 0 1px oklch(0.37 0.015 62) inset, 0 1px 0 oklch(0.5 0.015 70 / 0.45) inset; }
.ph__frame { position: relative; aspect-ratio: 4 / 3; }
.ph__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, oklch(0.9 0.02 80 / 0) 30%, oklch(0.9 0.02 80 / 0.07) 44%, oklch(0.9 0.02 80 / 0) 58%); }
.ph__cap { position: absolute; left: 18px; right: 18px; bottom: 16px; font-size: 0.9375rem; line-height: 1.35; font-weight: 500; color: var(--ember-2); }
.ph.is-real { background: none; box-shadow: none; overflow: visible; }
.ph.is-real .ph__frame::after { display: none; }
.ph.is-real img { width: 100%; height: 100%; object-fit: cover; }
.ph.is-real .ph__cap { position: static; margin-top: 8px; }

/* ---------- Handover: a short fade from the hero's steel into METHOD's carbon ---------- */
/* both ground changes are hard lines (owner, 2026-09-27): the .handover elements are zero-height markers the header uses to switch exactly at each edge */
.handover { height: 0; }

/* ================= PIN C: method, the glass clears ================= */
.s2 { position: relative; }
.s2__stage { padding: 64px var(--g) 72px; max-width: 1440px; margin-inline: auto; display: grid; gap: 28px; }
/* the glass pair sits in a plain steel hairline frame: no drawn hardware */
.door { position: relative; }
.s2__frame { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px oklch(0.5 0.01 240 / 0.8); }
.s2__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 100%; }
.s2__cap { margin-top: 12px; font-size: 0.875rem; color: var(--ember-2); }
.s2__copy { display: grid; gap: 18px; align-content: center; max-width: 36rem; }
.s2__lede { color: var(--ember-2); }
.ticks { display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
.tick { width: 22px; height: 22px; flex: none; margin-top: 1px; fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.motion .s2 { height: calc(100svh + 30svh); }
@media (min-width: 900px) { .motion .s2 { height: calc(100vh + 120vh); } }
.motion .s2__stage {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  padding: calc(var(--bar-h) + 14px) var(--g) calc(var(--dock-h) + 16px);
  grid-template-rows: minmax(0, 1fr) auto; gap: 16px;
}
.motion .s2__glass { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.motion .door { min-height: 0; display: flex; flex-direction: column; }
.motion .s2__frame { display: block; flex: 1; min-height: 0; }
.motion .s2__img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; transform: scale(calc(1.14 - 0.06 * var(--p, 0))); transform-origin: 60% 90%; }
.motion .s2__after {
  -webkit-mask-image: linear-gradient(118deg, #000 calc(var(--p, 0) * 150% - 30%), transparent calc(var(--p, 0) * 150% - 12%));
          mask-image: linear-gradient(118deg, #000 calc(var(--p, 0) * 150% - 30%), transparent calc(var(--p, 0) * 150% - 12%));
}
.motion .ticks li { --k: clamp(0, calc((var(--p, 0) - var(--s)) * 7), 1); }
.motion .tick { clip-path: inset(0 calc((1 - var(--k)) * 100%) 0 0); }
@media (max-width: 899px) {
  .motion .s2__copy { gap: 10px; }
  .motion .s2__lede { display: none; }
  .motion .s2 .h2 { font-size: clamp(1.6rem, 1rem + 3vw, 2.2rem); }
  .motion .ticks { gap: 6px; }
  .motion .ticks li { font-size: 1rem; }
  .motion .s2__cap { font-size: 0.875rem; margin-top: 6px; }
}
@media (min-width: 900px) {
  .s2__stage { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
  .motion .s2__stage { grid-template-rows: none; padding-bottom: 40px; }
  .motion .s2__glass { height: min(80vh, 740px); }
  .s2__lede { display: block; }
}

/* ================= Results: the before/after stage (V2's structure, V1's language) ================= */
.stage { background: var(--steel); color: var(--ink); padding: 24px 0 64px; }
.stage__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.stage__text { display: grid; gap: 12px; align-content: start; }
.stage__h { font-size: clamp(1.45rem, 7.8vw, 2.2rem); }
.stage__h .ln { display: block; white-space: nowrap; }
.stage__lede { color: var(--ink-2); max-width: 30rem; }
.stage__caption { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--steel-line); max-width: 30rem; }
.stage__job { font-family: var(--font-d); font-stretch: 120%; font-weight: 780; font-size: 1.375rem; line-height: 1.2; }
.stage__caption p { margin-top: 4px; color: var(--ink-2); }
/* the comparison: a contained, square frame; the seam is driven by a native range input for keyboard and assistive tech */
.ba {
  position: relative; aspect-ratio: 1; width: 100%; overflow: hidden; border-radius: 4px; background: var(--steel-3);
  box-shadow: 0 0 0 1px var(--steel-line); user-select: none; -webkit-user-select: none;
}
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__line { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--steel); box-shadow: 0 0 0 1px oklch(0.2 0.01 250 / 0.25); pointer-events: none; }
.ba__grip { position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--steel); color: var(--ink); box-shadow: 0 4px 12px -2px oklch(0.2 0.01 250 / 0.4); }
.ba__grip svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ba__tag { position: absolute; z-index: 2; top: 10px; padding: 3px 8px; border-radius: 3px; font-size: 0.875rem; font-weight: 650; pointer-events: none; }
.ba__tag--before { left: 10px; background: oklch(0.16 0.012 55 / 0.86); color: var(--ember); }
.ba__tag--after { right: 10px; background: oklch(0.97 0.004 235 / 0.92); color: var(--ink); }
.ba__range { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.ba:has(.ba__range:focus-visible) { outline: 2px solid var(--heat-text); outline-offset: 3px; }
.ba:has(.ba__range:focus-visible) .ba__grip { background: var(--ink); color: var(--steel); }
/* one gentle hint on the seam the first time the stage comes into view */
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.ba.is-hint { animation: seam-hint 1.3s var(--ease) 0.2s 1 both; }
@keyframes seam-hint { 0% { --pos: 50%; } 40% { --pos: 36%; } 100% { --pos: 50%; } }
@media (prefers-reduced-motion: reduce) { .ba.is-hint { animation: none; } }
/* the job picker */
.jobs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.job { flex: 0 0 28%; scroll-snap-align: start; appearance: none; background: none; border: 0; padding: 0; text-align: left; color: var(--ink-2); font: inherit; font-size: 0.875rem; font-weight: 650; cursor: pointer; }
.job img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--steel-line); transition: box-shadow 0.2s var(--ease); }
.job span { display: block; margin-top: 6px; padding-top: 6px; border-top: 2px solid transparent; white-space: nowrap; }
.job:hover { color: var(--ink); }
.job:hover img { box-shadow: 0 0 0 1px var(--ink-2); }
.job[aria-pressed="true"] { color: var(--ink); }
.job[aria-pressed="true"] img { box-shadow: 0 0 0 2px var(--ink); }
.job[aria-pressed="true"] span { border-top-color: var(--heat-l); }
.job:focus-visible { outline: 2px solid var(--heat-text); outline-offset: 3px; border-radius: 3px; }
@media (min-width: 560px) { .jobs { overflow: visible; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .job { flex: none; } }
@media (min-width: 900px) {
  .stage { padding: 56px 0 112px; }
  .stage__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
  .stage__h { font-size: clamp(2rem, 3vw, 3.4rem); }
  .stage__viewer { justify-self: end; width: min(100%, 56vw, 560px); }
  .stage__grid { max-width: 1180px; }
}

/* ================= Result ================= */
/* inverted block: the footer sits on carbon with light text */
.foot { background: var(--carbon); color: var(--ember);
  --ink: var(--ember); --ink-2: var(--ember-2); --fg: var(--ember); --fg-2: var(--ember-2);
  --heat-text: var(--amber); --steel-line: var(--carbon-line); caret-color: var(--amber); }
.foot :focus-visible { outline-color: var(--amber); }
.foot ::selection { background: var(--amber); color: var(--carbon); }
.foot { border-top-color: var(--carbon-line); }
.result { padding: 56px 0 72px; }
.result__in { display: grid; gap: 28px; }
.result__lead { display: grid; gap: 20px; align-content: start; }
.result__h { font-family: var(--font-d); font-weight: 820; font-stretch: 120%; font-size: clamp(2rem, 1rem + 4.4vw, 4.75rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 14ch; text-wrap: balance; }
.result__body { display: grid; gap: 28px; max-width: 46rem; }
.proof { margin: 0; border-bottom: 1px solid var(--steel-line); }
.proof__row { display: grid; gap: 4px 32px; padding: 18px 0; border-top: 1px solid var(--steel-line); }
.proof dt { font-family: var(--font-d); font-weight: 760; font-stretch: 110%; font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1.15; letter-spacing: -0.01em; }
.proof dt { text-wrap: balance; }
.nb { white-space: nowrap; }
.proof dd { margin: 0; color: var(--ink-2); max-width: 60ch; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.result__guy { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; max-width: 26rem; margin: 0; }
.result__guy img { width: 96px; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.result__guy figcaption { font-size: 0.9375rem; color: var(--ink-2); }
@media (min-width: 640px) { .proof__row { grid-template-columns: minmax(11rem, 14rem) 1fr; align-items: baseline; } }
@media (min-width: 900px) {
  .result { padding: 104px 0 112px; }
  .result__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 112px); align-items: stretch; }
  /* Both columns share one height: the first rule lines up with the cap-height of the heading, the buttons with the bottom of Guy's photo. */
  .result__lead { gap: 36px; justify-content: space-between; }
  .result__h { text-box: trim-start cap alphabetic; }
  .result__body { display: flex; flex-direction: column; max-width: none; }
  .proof { flex: 1; display: flex; flex-direction: column; }
  .proof__row { flex: 1; align-content: center; }
  .result__guy { position: relative; grid-template-columns: 1fr; max-width: 250px; gap: 0; }
  .result__guy figcaption { position: absolute; top: 100%; left: 0; right: 0; margin-top: 10px; }
  .result__guy img { width: 100%; }
}

/* ================= Prices: the clean oven is the index; a steel spec plate ================= */
.prices { padding: 32px 0 72px; }
.prices__in { display: grid; gap: 24px; }
.prices__head { display: grid; gap: 12px; }
.prices__intro { color: var(--ink-2); max-width: 36rem; }
.prices__side { display: none; }
/* brushed-steel hairline: the rule system of the light half */
.plate, .form { --brushed: linear-gradient(90deg, oklch(0.74 0.01 240), oklch(0.93 0.004 240) 20%, oklch(0.7 0.012 240) 46%, oklch(0.9 0.005 240) 72%, oklch(0.75 0.01 240)); }
.plate { position: relative; padding: 2px 0 0; overflow: clip; }
.plate::before, .plate::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.plate::before { top: 0; height: 2px; background: var(--brushed); }
/* one controlled light sweep across the plate the first time it comes into view */
.plate::after { top: 0; bottom: 0; width: 40%; background: linear-gradient(100deg, oklch(1 0 0 / 0), oklch(1 0 0 / 0.75) 50%, oklch(1 0 0 / 0)); opacity: 0; transform: translateX(-100%); }
.plate.is-lit::after { animation: sheen 1.6s var(--ease) 0.15s 1 both; }
@keyframes sheen { 0% { opacity: 0; transform: translateX(-100%); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(260%); } }
.pg { padding: 18px 0 14px; border-bottom: 1px solid var(--steel-line); scroll-margin-top: calc(var(--bar-h) + 16px); }
.pg__h { font-family: var(--font-d); font-stretch: 120%; font-weight: 760; font-size: 1.125rem; line-height: 1.2; margin-bottom: 6px; }
.pl li { display: grid; grid-template-columns: auto minmax(12px, 1fr) auto; align-items: baseline; column-gap: 8px; padding: 7px 0; }
.pl li::after { content: ""; grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 0.4em; border-bottom: 1px dotted oklch(0.55 0.015 250); }
.pl__n { grid-column: 1; grid-row: 1; font-weight: 650; }
.pl__v { grid-column: 3; grid-row: 1; font-family: var(--font-d); font-stretch: 120%; font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.pl__v--ask { font-family: var(--font-b); font-weight: 650; font-size: 0.9375rem; color: var(--ink-2); }
.pl__from { font-family: var(--font-b); font-weight: 500; font-size: 0.875rem; color: var(--ink-2); }
.pl__i { grid-column: 1 / -1; font-size: 0.9375rem; line-height: 1.4; color: var(--ink-2); max-width: 44ch; }
.pg__note { font-size: 0.9375rem; color: var(--ink-2); }
.plate__foot { position: relative; padding: 16px 0 14px; font-weight: 650; }
.plate__foot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brushed); }
.pg:target .pg__h { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
@media (min-width: 700px) {
  .plate { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .pg--wide, .plate__foot { grid-column: 1 / -1; }
}

/* the index: the clean oven with hairline callouts into the price groups */
.index { margin: 0; }
.index__above { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; padding-bottom: 6px; color: var(--ink-2); font-size: 0.9375rem; }
.index__above a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); }
.index__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 1px var(--steel-line); }
.index__img img { width: 100%; height: 100%; object-fit: cover; }
.co { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; min-height: 44px; transform: translateY(-50%); text-decoration: none; }
.co::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--heat-l); box-shadow: 0 0 0 2px var(--steel), 0 0 0 3px oklch(0.2 0.01 250 / 0.4); }
.co__line { width: 28px; height: 1px; background: var(--steel); box-shadow: 0 1px 0 oklch(0.2 0.01 250 / 0.35); }
.co__label { padding: 4px 9px; border-radius: 2px; background: var(--steel); color: var(--ink); font-size: 0.875rem; font-weight: 650; white-space: nowrap; box-shadow: 0 2px 8px -3px oklch(0.2 0.01 250 / 0.45); }
.co:hover .co__label, .co:focus-visible .co__label { text-decoration: underline; }
.index__cap { margin-top: 10px; font-size: 0.9375rem; color: var(--ink-2); }
@media (min-width: 1100px) {
  .prices { padding: 48px 0 112px; }
  .prices__in { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); column-gap: clamp(40px, 5vw, 88px); row-gap: 40px; align-items: start; }
  .prices__head { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 88px); align-items: end; }
  .prices__side { display: block; }
}

/* ================= Reviews ================= */
.reviews { padding: 64px 0 72px; border-top: 1px solid var(--steel-line); }
.reviews__head { display: grid; gap: 18px; margin-bottom: 32px; }
.score { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; justify-self: start; min-height: 44px; }
.score__n { font-family: var(--font-d); font-stretch: 120%; font-weight: 850; font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: 1; letter-spacing: -0.03em; }
.score__meta { display: grid; gap: 4px; font-size: 0.9375rem; color: var(--ink-2); }
.score__meta .stars { font-size: 1.25rem; }
.score:hover .score__meta > span:last-child { text-decoration: underline; }
.lead { max-width: 52rem; margin-bottom: 40px; }
.lead__q { font-family: var(--font-d); font-stretch: 120%; font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.9vw, 2.4rem); line-height: 1.22; letter-spacing: -0.015em; }
.lead__q::before { content: "\201C"; } .lead__q::after { content: "\201D"; }
.lead__who { margin-top: 14px; color: var(--ink-2); }
.rlist { display: grid; gap: 28px; }
.rv { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--steel-line); }
.rv__stars { font-size: 0.9375rem; }
.rv blockquote p { line-height: 1.55; }
.rv__who { font-size: 0.9375rem; color: var(--ink-2); }
.rv__who a { font-weight: 650; color: var(--ink); }
.rv__who a:not([href]) { text-decoration: none; }
.more { display: inline-block; padding-block: 11px; line-height: 22px; font-weight: 650; color: var(--heat-text); white-space: nowrap; }
.ico--arrow { display: inline-block; width: 18px; height: 18px; margin-left: 6px; vertical-align: -4px; }
.reviews__fallback { margin-bottom: 8px; }
.g-reviews-live .reviews__fallback { display: none; }
.reviews__foot { display: grid; gap: 6px; margin-top: 32px; }
.reviews__links { display: flex; flex-wrap: wrap; gap: 0 28px; }
.reviews__attr { font-size: 0.875rem; color: var(--ink-2); }
@media (min-width: 900px) {
  .reviews { padding: 104px 0 112px; }
  .reviews__head { grid-template-columns: 1fr auto; align-items: end; margin-bottom: 48px; }
  .rlist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
}

/* ================= Book: the final scene ================= */
.book { padding: 72px 0 80px; background: var(--logo-green); color: var(--ink);
  --ink-2: oklch(0.3 0.03 140); --err: oklch(0.4 0.17 28); --heat-text: var(--ink); }
/* whole final scene on the logo's green: ink text (12.8:1), ink primary (orange on this green vibrates) */
.book ::selection { background: var(--ink); color: var(--logo-green); }
.book .btn--heat { background: var(--ink); color: var(--steel); }
.book .btn--heat:hover { background: oklch(0.32 0.016 250); }
.book :focus-visible { outline-color: var(--ink); }
.book__in { display: grid; gap: 40px; }
.book__copy { display: grid; gap: 14px; align-content: start; max-width: 36rem; }
.book__h { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4rem); max-width: 10ch; }
.book__fact { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3rem); color: var(--ink); }
.book__lede { color: var(--ink-2); }
.book__tel { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; justify-self: start; font-family: var(--font-d); font-stretch: 120%; font-weight: 820; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); text-decoration: none; white-space: nowrap; }
.book__tel .ico { width: 28px; height: 28px; }
.book__tel:hover { text-decoration: underline; }
.book__hours { font-size: 0.9375rem; color: var(--ink-2); }

/* the form sits directly on the green section: no panel */
.form { position: relative; display: grid; gap: 16px; padding: 26px 0 8px; }
.form::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); opacity: 0.85; }
.form__note::before { background: oklch(0.3 0.03 140 / 0.35); }
.form__h { font-family: var(--font-d); font-stretch: 120%; font-weight: 780; font-size: 1.375rem; line-height: 1.2; }
.form__req { font-size: 0.875rem; color: var(--ink-2); margin-top: -8px; }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { font-weight: 650; font-size: 0.9375rem; padding: 0; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"] {
  width: 100%; min-height: 50px; padding: 10px 14px; border-radius: 2px; color: var(--ink);
  background: linear-gradient(180deg, oklch(0.985 0.003 240), oklch(0.995 0.002 240));
  border: 1px solid oklch(0.62 0.015 250); box-shadow: 0 1px 2px oklch(0.3 0.01 250 / 0.12) inset;
  caret-color: var(--heat-text); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:hover { border-color: var(--ink-2); }
.field input:focus-visible { outline: 2px solid var(--heat-text); outline-offset: 1px; border-color: var(--ink); }
.field input:disabled { opacity: 0.55; cursor: not-allowed; }
.field.is-error input { border-color: var(--err); box-shadow: 0 0 0 1px var(--err) inset; }
.field__err { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9375rem; font-weight: 600; color: var(--err); }
.field__err::before { content: ""; width: 4px; height: 4px; margin-top: 0.62em; flex: none; border-radius: 50%; background: currentColor; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 2px; border: 1px solid oklch(0.62 0.015 250); background: oklch(0.99 0.002 240); font-weight: 600; cursor: pointer; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); }
.choice:hover span { border-color: var(--ink-2); }
.choice input:checked + span { background: var(--ink); color: var(--steel); border-color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--heat-text); outline-offset: 2px; }
.field--choice.is-error .choice span { border-color: var(--err); }
.form__submit { justify-self: start; margin-top: 4px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form__note { position: relative; padding: 14px 0 0; color: var(--ink); font-weight: 500; }
.form__note::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--steel-line); }
.form__note a { font-weight: 700; white-space: nowrap; }
@media (min-width: 900px) {
  .book { padding: 120px 0 128px; }
  .book__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
}

/* ================= Footer ================= */
.foot { padding: 36px 0 18px; border-top: 1px solid var(--steel-line); font-size: 0.9375rem; }
.foot__in { display: grid; gap: 24px; align-items: start; }
.foot__brand { display: grid; gap: 6px; align-content: start; }
.foot__logo { width: 156px; margin-bottom: 4px; }
.foot address { font-style: normal; }
.foot__tel { font-family: var(--font-d); font-stretch: 120%; font-weight: 760; font-size: 1.125rem; white-space: nowrap; }
.foot__brand a, .foot__nav a { display: inline-flex; align-items: center; min-height: 40px; }
.foot__txt { display: grid; gap: 8px; align-content: start; color: var(--ink-2); max-width: 38rem; }
.foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.foot__h { margin-bottom: 2px; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.foot__nav ul { display: grid; gap: 0; }
.foot__nav a { min-height: 34px; }
.foot__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; margin-top: 18px; padding-top: 8px; border-top: 1px solid var(--carbon-line); }
.foot__c { color: var(--ink-2); }
@media (min-width: 900px) { .foot__in { grid-template-columns: 1fr 1.3fr 1.1fr; gap: 48px; } }

/* ================= Inner pages (how it works, FAQ): the clean state ================= */
.page { padding-top: var(--bar-h); }
.page-head { padding: 48px 0 32px; }
.page-head .wrap { display: grid; gap: 14px; }
.page-h1 { font-family: var(--font-d); font-stretch: 120%; font-weight: 840; font-size: clamp(2.2rem, 1.1rem + 5vw, 5.25rem); line-height: 1; letter-spacing: -0.03em; max-width: 14ch; }
.page-lede { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3rem); color: var(--ink-2); max-width: 40rem; }
.toc { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 6px; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; color: var(--heat-text); white-space: nowrap; }
.sec { padding: 48px 0; border-top: 1px solid var(--steel-line); }
.sec__in { display: grid; gap: 22px; }
.sec h2 { scroll-margin-top: calc(var(--bar-h) + 16px); }
.sec__prose { display: grid; gap: 14px; max-width: 42rem; }
.sec__prose p { color: var(--ink-2); }
.sec__prose p.strong { color: var(--ink); font-size: 1.1875rem; }
.visit { display: grid; gap: 0; counter-reset: v; max-width: 48rem; }
.visit li { display: grid; grid-template-columns: 2.4rem 1fr; column-gap: 12px; padding: 16px 0; border-top: 1px solid var(--steel-line); counter-increment: v; }
.visit li::before { content: counter(v); grid-row: 1 / span 2; font-family: var(--font-d); font-stretch: 120%; font-weight: 800; font-size: 1.5rem; line-height: 1.1; color: var(--heat-text); font-variant-numeric: tabular-nums; }
.visit h3 { font-family: var(--font-d); font-stretch: 120%; font-weight: 760; font-size: 1.125rem; line-height: 1.3; }
.visit p { color: var(--ink-2); }
.facts { display: grid; gap: 0; max-width: 48rem; }
.facts div { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--steel-line); }
.facts dt { font-weight: 700; }
.facts dd { color: var(--ink-2); }
.split { display: grid; gap: 28px; }
.still img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.still figcaption { margin-top: 8px; font-size: 0.9375rem; color: var(--ink-2); }
.page .ph { width: 100%; margin: 0; }
.page .ph__cap { color: var(--ember-2); }
.page .ticks li { font-weight: 600; }
.page .tick { stroke: var(--heat-text); }
.close { padding: 56px 0 72px; background: var(--steel-2); border-top: 1px solid var(--steel-line); }
.close__in { display: grid; gap: 18px; }
.close__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
@media (min-width: 900px) {
  .page-head { padding: 88px 0 48px; }
  .sec { padding: 80px 0; }
  .sec__in { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
  .split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .close { padding: 88px 0 104px; }
  .close__in { grid-template-columns: 1fr auto; align-items: end; }
}

/* FAQ */
.qa-list { max-width: 52rem; border-bottom: 1px solid var(--steel-line); }
.qa { border-top: 1px solid var(--steel-line); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 0;
  cursor: pointer; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary h2 { font-family: var(--font-d); font-stretch: 120%; font-weight: 740; font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.35rem); line-height: 1.3; }
.qa summary:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.pm { position: relative; width: 44px; height: 44px; flex: none; border-radius: 4px; border: 1px solid var(--steel-line); background: var(--steel); }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: var(--ink); border-radius: 1px; transition: transform 0.3s var(--ease); }
.pm::after { transform: rotate(90deg); }
.qa[open] .pm::after { transform: rotate(0deg); }
.qa__a { padding: 0 0 22px; max-width: 44rem; color: var(--ink-2); }
.qa__a a { color: var(--heat-text); font-weight: 650; }

/* ---------- Reduced motion: stills, no transitions ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.split--ph { grid-template-columns: 1fr 1fr; gap: 14px; }
@media (min-width: 900px) { .split--ph { grid-column: 2; } }
@media (max-width: 479px) { .split--ph { grid-template-columns: 1fr; } }

/* ---------- Phone density: keep the whole story within about a dozen screens ---------- */
@media (max-width: 699px) {
  .result { padding: 40px 0 44px; }
  .result__in { gap: 20px; }
  .result__body { gap: 20px; }
  .proof__row { padding: 14px 0; }
  .result__guy { grid-template-columns: 64px 1fr; }
  .result__guy img { width: 64px; }
  .prices { padding: 8px 0 44px; }
  .prices__in { gap: 16px; }
  .plate { padding: 2px 0 0; }
  .pg { padding: 10px 0 6px; }
  .pg__h { margin-bottom: 2px; }
  .pl li { padding: 3px 0; }
  .book__hours { display: none; }
  .field input[type="text"], .field input[type="email"], .field input[type="tel"] { min-height: 46px; }
  .pl__i { font-size: 0.875rem; }
  .plate__foot { padding-top: 12px; font-size: 0.9375rem; }
  .reviews { padding: 44px 0 44px; }
  .reviews__head { margin-bottom: 20px; gap: 10px; }
  .lead { margin-bottom: 24px; }
  .lead__q { font-size: 1.25rem; }
  .rlist { gap: 18px; }
  .rv { padding-top: 14px; gap: 6px; }
  .rv blockquote p { font-size: 1rem; }
  .reviews__foot { margin-top: 18px; }
  .book__copy { gap: 10px; }
  .form { gap: 10px; }
  .field input[type="text"], .field input[type="email"], .field input[type="tel"] { min-height: 48px; }
  .foot { padding: 36px 0 28px; }
  .foot__in { gap: 18px; }
  .foot__txt p:last-child { display: none; }
  .foot__logo { width: 140px; margin-bottom: 0; }
  .foot__brand { gap: 2px; }
  .book { padding: 48px 0 52px; }
  .book__in { gap: 28px; }
}
.nw { white-space: nowrap; }
@media (max-width: 359px) {
  .hero .rate { gap: 8px; }
  .hero .rate__n { font-size: 1.75rem; }
  .hero .stars { font-size: 0.95rem; }
  .hero .rate__c { font-size: 0.875rem; }
}

/* full-screen only where it helps (owner, 2026-09-27): the hero and the before/after stage fill a screen;
   METHOD is a taller pinned scroll; text sections (result, reviews, booking) and the footer keep their natural height. */
.hero { min-height: 100vh; min-height: 100svh; }
.stage { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }

/* AREAS: visible service area (local SEO) */
.areas { padding: 64px 0; background: var(--steel); color: var(--ink); --fg: var(--ink); --fg-2: var(--ink-2); border-top: 1px solid var(--steel-line); }
.areas__in { display: grid; gap: 18px; }
.areas__lede { max-width: 42rem; color: var(--ink-2); }
.areas__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.areas__list li { padding: 8px 14px; border: 1px solid var(--steel-line); border-radius: 999px; background: #fff; font-weight: 500; }
.areas__more { color: var(--ink-2); }
.areas__more a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Browsers without text-box-trim: nudge the right column down by the heading's half-leading so its first rule still meets the cap-height. */
@media (min-width: 900px) {
  @supports not (text-box: trim-start cap alphabetic) {
    .result__body { padding-top: calc(clamp(2rem, 1rem + 4.4vw, 4.75rem) * 0.17); }
  }
}

/* Reviews score: the same squeegee swipe as the hero's "without". */
.score__n { padding: 0 0.06em; position: relative; isolation: isolate; }
.hero__em::before, .score__n::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 54%; bottom: 4%;
  background: var(--logo-green);
  /* a wiped stripe: slanted blade edge on the left, a slightly uneven top, streaky tail on the right */
  clip-path: polygon(0 24%, 3.5% 0, 30% 5%, 62% 1%, 100% 6%, 96.5% 28%, 100% 47%, 95% 66%, 99% 100%, 58% 94%, 26% 99%, 2% 100%, 4.5% 62%);
}

/* Footer social icons */
.foot__bar .foot__social { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 2px; margin: 0 0 0 -10px; }
.foot__social .social__a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; color: inherit; border-radius: 4px; }
.foot__social .social__a:hover { background: oklch(0.955 0.012 80 / 0.14); }
.social__ico { width: 22px; height: 22px; fill: currentColor; }

/* Area chips that link to a town page */
.areas__list li a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--logo-green); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Town pages open on the homepage hero, so no header offset */
.page--hero { padding-top: 0; }

/* Prices page hero: the homepage hero system, shorter, with the AGA photo */
/* tall enough that the 3:2 photo is shown whole, whatever the window height */
.hero--page { min-height: calc(var(--bar-h) + min(59vw, 1100px) / 1.5); }
.hero--page .hero__media { width: min(59%, 1100px); }
.hero--page .hero__img--aga { object-position: 58% 52%; }
.hero--page .hero__title { max-width: 12ch; }
@media (min-width: 900px) {
  /* a shorter dissolve than the homepage: the whole AGA stays visible */
  .hero--page .hero__fade { background:
    linear-gradient(to right, var(--steel) 0%, oklch(0.968 0.004 235 / 0.8) 5%, oklch(0.968 0.004 235 / 0) 22%),
    linear-gradient(to top, var(--steel) 0%, oklch(0.968 0.004 235 / 0) 6%),
    linear-gradient(to bottom, oklch(0.968 0.004 235 / 0.9) 0%, oklch(0.968 0.004 235 / 0) 36px); }
  /* the photo starts below the header so the top of the AGA (hotplate lids, flue) isn't cropped */
  .hero--page .hero__media { top: var(--bar-h); }
  .hero--page .hero__img--aga { object-position: 58% 0%; }
}
.hero--page .hero__lede { margin-top: 20px; max-width: 30rem; }
.hero--page .hero__actions { margin-top: 24px; }
@media (max-width: 899px) {
  .hero--page { min-height: 0; }
  .hero--page .hero__media { width: 100%; height: 36svh; min-height: 210px; }
  .hero--page .hero__img--aga { object-position: 50% 50%; }
  .hero--page .hero__title { max-width: none; }
}

/* Price lines slide in from the right on scroll, one after another (main.js adds .reveal-x, then .is-in) */
@media (prefers-reduced-motion: no-preference) {
  .reveal-x { opacity: 0; transform: translateX(48px); transition: opacity 0.5s var(--ease), transform 0.65s var(--ease); }
  .reveal-x.is-in { opacity: 1; transform: none; }
}

/* Before/after: a green squeegee-wipe seam, bigger tags, price chip, auto-cycle progress */
.ba__line { width: 9px; margin-left: -4.5px; background: var(--logo-green); box-shadow: none;
  clip-path: polygon(34% 0, 100% 3%, 62% 12%, 100% 24%, 58% 36%, 100% 49%, 64% 61%, 100% 74%, 60% 87%, 100% 100%, 0 100%, 38% 91%, 2% 79%, 40% 66%, 0 53%, 42% 41%, 4% 28%, 40% 16%, 0 6%); }
.ba__grip { background: var(--logo-green); color: var(--ink); }
.ba__tag { padding: 5px 11px; font-size: 0.9375rem; top: 12px; }
.ba__tag--before { left: 12px; }
.ba__tag--after { right: 12px; }
.stage__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.stage__chip { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--steel-line); font-weight: 650; font-size: 0.9375rem; }
.stage__more { font-weight: 650; color: var(--heat-text); text-decoration: underline; text-underline-offset: 3px; }
.job span { position: relative; }
.job[aria-pressed="true"] span::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.is-cycling .job[aria-pressed="true"] span::after { animation: jobbar 1.4s linear forwards; }
@keyframes jobbar { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .is-cycling .job[aria-pressed="true"] span::after { animation: none; } }

/* Job changes: the old photos dissolve over the new ones (a crossfade), and the caption lines lift out and float back in one by one */
.ba__ghost { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
.ba__ghost.is-out { opacity: 0; }
.stage__caption > * { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.stage__caption > :nth-child(2) { transition-delay: 0.08s; }
.stage__caption > :nth-child(3) { transition-delay: 0.16s; }
.is-text-out .stage__caption > * { opacity: 0; transform: translateY(10px); transition-duration: 0.28s; transition-delay: 0s; }
.job span { transition: border-top-color 0.3s var(--ease); }
@media (prefers-reduced-motion: reduce) { .ba__ghost, .stage__caption > *, .job span { transition: none; } }

/* "Professional oven cleaning" section motion */
/* proof rows: the divider lines draw themselves left to right before each row slides in */
.proof__row { position: relative; }
.proof__row.reveal-x { border-top-color: transparent; }
.proof__row.reveal-x::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--steel-line); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease) var(--d, 0ms); }
.proof__row.reveal-x.is-in::before { transform: scaleX(1); }
.proof:has(.proof__row.reveal-x) { border-bottom-color: transparent; }
.proof__row.reveal-x:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--steel-line); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease) calc(var(--d, 0ms) + 200ms); }
.proof__row.reveal-x.is-in:last-child::after { transform: scaleX(1); }

/* the green squeegee wipe behind "hassle" (same shape as the hero), swept in on view */
.result__em { position: relative; isolation: isolate; padding: 0 0.06em; margin: 0 -0.06em; }
.result__em::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 54%; bottom: 4%; background: var(--logo-green);
  clip-path: polygon(0 24%, 3.5% 0, 30% 5%, 62% 1%, 100% 6%, 96.5% 28%, 100% 47%, 95% 66%, 99% 100%, 58% 94%, 26% 99%, 2% 100%, 4.5% 62%); }
.rv-wipe .result__em::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s; }
.rv-wipe.is-wiped .result__em::before { transform: scaleX(1); }

/* Guy's photo: a soft rise into place, the caption following */
.rv-up img { opacity: 0; transform: translateY(32px) scale(0.97); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); }
.rv-up figcaption { opacity: 0; transition: opacity 0.8s var(--ease) 0.45s; }
.rv-up.is-up img { opacity: 1; transform: none; }
.rv-up.is-up figcaption { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .proof__row.rv::before, .proof__row.rv::after, .rv-wipe .result__em::before, .rv-up img, .rv-up figcaption { transition: none; } }

/* ================= Reviews motion ================= */
/* stars fill from 0 to their rating via a registered custom property */
@property --sf { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
.reviews .stars { background: linear-gradient(90deg, var(--ink) min(var(--g-fill, 100%), var(--sf)), var(--steel-line) min(var(--g-fill, 100%), var(--sf))); }

/* rating: the stars fill, the green wipe sweeps in */
.rv-count .stars { --sf: 0%; transition: --sf 1.4s var(--ease) 0.1s; }
.rv-count.is-counting .stars { --sf: 100%; }
.rv-count .score__n::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1) 0.15s; }
.rv-count.is-counting .score__n::before { transform: scaleX(1); }

/* review cards rise in one after another; their stars fill as they arrive */
.card-rise { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease) var(--cd, 0ms), transform 0.9s var(--ease) var(--cd, 0ms); }
.card-rise.is-in { opacity: 1; transform: none; }
.card-rise .rv__stars { --sf: 0%; transition: --sf 1.1s var(--ease) calc(var(--cd, 0ms) + 350ms); }
.card-rise.is-in .rv__stars { --sf: 100%; }

/* lead quote: a soft crossfade between reviews, with dots (the active dot fills while it waits) */
.lead blockquote, .lead__who { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.lead__who { transition-delay: 0.08s; }
.lead.is-fading blockquote, .lead.is-fading .lead__who { opacity: 0; transform: translateY(10px); transition-duration: 0.3s; transition-delay: 0s; }
/* the card that swaps with the lead fades the same way */
.rlist .rv blockquote, .rlist .rv .rv__who { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.rlist .rv .rv__stars { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), --sf 1.1s var(--ease) calc(var(--cd, 0ms) + 350ms); }
.rlist .rv.is-fading blockquote, .rlist .rv.is-fading .rv__who, .rlist .rv.is-fading .rv__stars { opacity: 0; transform: translateY(8px); transition-duration: 0.3s; }
.lead__dots { display: flex; margin-top: 10px; margin-left: -6px; }
.lead__dot { position: relative; width: 38px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.lead__dot::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--steel-line); }
.lead__dot::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.lead__dot[aria-current="true"]::after { transform: scaleX(1); }
.lead.is-auto .lead__dot[aria-current="true"]::after { animation: leadbar 7s linear forwards; }
@keyframes leadbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lead__dot:focus-visible { outline: 2px solid var(--heat-text); outline-offset: -2px; border-radius: 3px; }

/* phones: the review cards become a swipe row with a peek of the next card */
@media (max-width: 899px) {
  .rlist { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--g)); padding: 4px var(--g) 8px; scroll-padding-inline: var(--g); overscroll-behavior-x: contain; }
  .rlist::-webkit-scrollbar { display: none; }
  .rlist .rv { flex: 0 0 82%; scroll-snap-align: start; align-content: start; padding: 16px 16px 18px; background: #fff; border: 1px solid var(--steel-line); border-radius: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-count .stars, .rv-count .score__n::before, .card-rise, .card-rise .rv__stars, .lead blockquote, .lead__who { transition: none; }
  .lead.is-auto .lead__dot[aria-current="true"]::after { animation: none; }
}

@media (max-width: 899px) { .foot__nav a, .foot__brand a { min-height: 44px; } .foot__bar { margin-top: 10px; } }

/* ================= FAQ: search, call panel, smooth accordion, slide-in ================= */
.faq { display: grid; gap: 28px; }
.faq__main { min-width: 0; }
@media (min-width: 900px) {
  .faq { grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(32px, 5vw, 72px); align-items: start; }
  .faq-call { position: sticky; top: 96px; }
}

.faq-search { position: relative; max-width: 52rem; margin-bottom: 18px; }
.faq-search input { width: 100%; min-height: 56px; padding: 0 56px 0 52px; border: 1px solid var(--steel-line); border-radius: 4px; background: oklch(0.995 0.002 235); color: var(--ink); font: inherit; font-size: 1.0625rem; }
.faq-search input::placeholder { color: var(--ink-2); opacity: 0.85; }
.faq-search input::-webkit-search-cancel-button { appearance: none; display: none; }
.faq-search input:focus { border-color: var(--heat-text); }
.faq-search__i { position: absolute; left: 16px; top: 16px; width: 24px; height: 24px; fill: none; stroke: var(--ink-2); stroke-width: 1.75; stroke-linecap: round; pointer-events: none; }
.faq-search__x { position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: var(--ink); cursor: pointer; }
.faq-search__x[hidden] { display: none; }
.faq-search__x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.faq-search__x:hover { background: var(--steel); }
.faq-search__n { min-height: 1.5em; margin-top: 8px; font-size: 0.9375rem; color: var(--ink-2); }
.faq-none { max-width: 52rem; margin-top: 18px; padding: 18px 20px; border: 1px dashed var(--steel-line); border-radius: 4px; color: var(--ink-2); }
.faq-none[hidden] { display: none; }
.faq-none a { color: var(--heat-text); font-weight: 650; }

.faq-call { display: grid; gap: 12px; padding: 24px 22px 26px; background: var(--steel-2); border: 1px solid var(--steel-line); border-top: 4px solid var(--logo-green); border-radius: 4px; }
.faq-call__k { font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.faq-call__h { font-family: var(--font-d); font-stretch: 120%; font-weight: 800; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.75rem); line-height: 1.15; letter-spacing: -0.01em; }
.faq-call p { color: var(--ink-2); }
.faq-call .btn { width: 100%; justify-content: center; margin-top: 4px; }
.faq-call__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--heat-text); font-weight: 650; text-decoration: underline; text-underline-offset: 0.2em; }
.faq-call__hrs { font-size: 0.9375rem; }

/* accordion rows: green rule + open state */
.qa { position: relative; background-image: linear-gradient(var(--logo-green), var(--logo-green)); background-repeat: no-repeat; background-position: 0 0; background-size: 4px 0; transition: background-size 0.5s var(--ease); }
.qa[open] { background-size: 4px 100%; }
.qa summary h2 { transition: transform 0.45s var(--ease); }
.qa[open] summary h2 { transform: translateX(14px); }
.qa summary:hover h2 { text-decoration: none; }
.qa__t { background: linear-gradient(var(--logo-green), var(--logo-green)) 0 100% / 0% 0.52em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.08s; }
.qa[open] .qa__t { background-size: 100% 0.52em; }
.qa summary:hover .qa__t { background-size: 100% 0.12em; }
.qa[open] summary:hover .qa__t { background-size: 100% 0.52em; }
.pm { transition: transform 0.45s var(--ease), background-color 0.3s, border-color 0.3s; }
.qa summary:hover .pm { border-color: var(--heat-text); }
.qa[open] .pm { background: var(--logo-green); border-color: var(--logo-green); }
.qa[open] .pm::before { transform: rotate(45deg); }
.qa[open] .pm::after { transform: rotate(135deg); }
.qa__a { padding-left: 14px; }
.qa[open] .qa__a { animation: qaIn 0.55s var(--ease) both; }
@keyframes qaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* questions slide in one by one, their divider lines drawing first */
@media (prefers-reduced-motion: no-preference) {
  .qa.reveal-x { transition: opacity 0.5s var(--ease), transform 0.65s var(--ease), background-size 0.5s var(--ease); transition-delay: var(--d, 0ms), var(--d, 0ms), 0s !important; border-top-color: transparent; }
  .qa.reveal-x::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--steel-line); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease) var(--d, 0ms); }
  .qa.reveal-x.is-in::before { transform: scaleX(1); }
  .qa-list:has(.qa.reveal-x) { border-bottom-color: transparent; }
  .qa.reveal-x:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--steel-line); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease) calc(var(--d, 0ms) + 200ms); }
  .qa.reveal-x.is-in:last-child::after { transform: scaleX(1); }
  .qa-list.is-filtering:has(.qa.reveal-x) { border-bottom-color: var(--steel-line); }
  .qa-list.is-filtering .qa.reveal-x::after { display: none; }
}

/* ================= How it works: glance strip, sticky contents bar, timeline, area chips, call panel ================= */
.strip { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; margin-top: 14px; max-width: 62rem; }
.strip li { display: grid; gap: 2px; align-content: start; padding-top: 10px; border-top: 3px solid var(--logo-green); }
.strip b { font-family: var(--font-d); font-stretch: 120%; font-weight: 800; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem); line-height: 1.15; letter-spacing: -0.01em; }
.strip span { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.35; }
@media (min-width: 760px) { .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

.page-head { padding-bottom: 28px; }
.tocbar { position: sticky; top: var(--bar-h); z-index: 40; background: oklch(0.968 0.004 235 / 0.97); border-top: 1px solid var(--steel-line); border-bottom: 1px solid var(--steel-line); }
.tocbar .toc { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin-top: 0; gap: 0 26px; scrollbar-width: none; }
.tocbar .toc::-webkit-scrollbar { display: none; }
.tocbar .toc a { color: var(--ink-2); box-shadow: inset 0 -3px 0 transparent; transition: color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.tocbar .toc a:hover { color: var(--ink); }
.tocbar .toc a[aria-current="true"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--logo-green); }
.page .sec { scroll-margin-top: calc(var(--bar-h) + 44px); }
.page .sec h2 { scroll-margin-top: calc(var(--bar-h) + 60px); }

.hiw { display: grid; gap: 0; }
.hiw__main { min-width: 0; }
.hiw .sec__in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.hiw__main .sec:first-child { border-top: 0; }
.hiw__aside { margin: 4px 0 48px; }
@media (min-width: 1100px) {
  .hiw { grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(32px, 4vw, 64px); align-items: start; }
  .hiw__aside { position: sticky; top: calc(var(--bar-h) + 76px); margin: 80px 0 0; }
}

/* the visit as a timeline: each step's marker fills green and the line draws down to the next one */
.visit { max-width: 46rem; }
.visit li { position: relative; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 18px; padding: 0 0 30px; border-top: 0; }
.visit li:last-child { padding-bottom: 0; }
.visit li::before { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--heat-l); background: var(--heat-l); color: var(--heat-ink); font-size: 1.1875rem; line-height: 1; transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease); }
.visit li::after { content: ""; position: absolute; left: calc(1.375rem - 1px); top: calc(2.75rem + 4px); bottom: 4px; width: 2px; background: linear-gradient(var(--heat-text), var(--heat-text)) 0 0 / 100% 100% no-repeat, var(--steel-line); transition: background-size 0.7s var(--ease); }
.visit li:last-child::after { display: none; }
.visit li h3 { padding-top: 8px; }
.visit li.reveal-x:not(.is-in)::before { background-color: var(--steel); border-color: var(--steel-line); color: var(--ink-2); }
.visit li.reveal-x:not(.is-in)::after { background-size: 100% 0%; }
.visit li.reveal-x::before { transition-delay: calc(var(--d, 0ms) + 250ms); }
.visit li.reveal-x::after { transition-delay: calc(var(--d, 0ms) + 450ms); }

/* areas as chips */
.chips { display: grid; gap: 4px; max-width: 48rem; margin-top: 6px; }
.chips__g { display: grid; gap: 10px; padding: 16px 0 14px; border-top: 1px solid var(--steel-line); }
.chips__k { font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.chips ul { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 15px; border: 1px solid var(--steel-line); border-radius: 999px; background: oklch(0.995 0.002 235); font-weight: 600; line-height: 1.2; }
a.chip { min-height: 44px; border-color: var(--heat-text); color: var(--heat-text); transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); }
a.chip::after { content: "\2192"; margin-left: 7px; transition: transform 0.25s var(--ease); }
a.chip:hover { background: var(--heat-l); border-color: var(--heat-l); color: var(--heat-ink); }
a.chip:hover::after { transform: translateX(3px); }
/* the photo row used to sit in column 2 of a two-column section; the how-it-works sections are single-column now */
.hiw .split--ph { grid-column: auto; }

/* How it works: price card in the steps, open-now pill, insurance card, since-2012, review band */
.visit .pricecard { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; padding: 12px 16px; max-width: 30rem; border: 1px solid var(--steel-line); border-left: 4px solid var(--logo-green); border-radius: 4px; background: oklch(0.995 0.002 235); color: var(--ink); transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease); }
.pricecard__i { color: var(--ink-2); font-size: 0.9375rem; }
.pricecard__i b { margin-left: 4px; font-family: var(--font-d); font-stretch: 120%; font-weight: 800; font-size: 1.25rem; color: var(--ink); }
.pricecard__go { margin-left: auto; font-weight: 650; color: var(--heat-text); }
.pricecard__go i { display: inline-block; font-style: normal; transition: transform 0.25s var(--ease); }
.pricecard:hover { background: var(--steel-2); }
.pricecard:hover .pricecard__go i { transform: translateX(4px); }

.open { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 8px 16px 8px 14px; border-radius: 999px; background: oklch(0.995 0.002 235); border: 1px solid var(--steel-line); font-weight: 650; }
.open[hidden] { display: none; }
.open__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: oklch(0.62 0.02 250); }
.open.is-open .open__dot { background: var(--heat-text); box-shadow: 0 0 0 0 oklch(0.45 0.15 142 / 0.5); animation: openPulse 2.4s ease-out infinite; }
.open--s { margin-top: 2px; font-size: 0.9375rem; padding: 6px 14px 6px 12px; }
@keyframes openPulse { 70% { box-shadow: 0 0 0 9px oklch(0.45 0.15 142 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.45 0.15 142 / 0); } }
@media (prefers-reduced-motion: reduce) { .open.is-open .open__dot { animation: none; } }

.trust { display: flex; gap: 16px; align-items: flex-start; max-width: 34rem; margin-top: 8px; padding: 20px 22px; background: var(--steel-2); border: 1px solid var(--steel-line); border-left: 4px solid var(--logo-green); border-radius: 4px; }
.trust__i { flex: none; width: 44px; height: 44px; fill: none; stroke: var(--heat-text); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.trust p { margin: 0; }
.sec__prose .trust p { color: var(--ink-2); }
.sec__prose .trust .trust__k { font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.sec__prose .trust .trust__h { margin: 4px 0 6px; font-family: var(--font-d); font-stretch: 120%; font-weight: 800; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.2; color: var(--ink); }

.since { display: grid; gap: 4px; margin-top: 18px; padding-top: 14px; border-top: 3px solid var(--logo-green); }
.since b { font-family: var(--font-d); font-stretch: 120%; font-weight: 850; font-size: clamp(3rem, 2rem + 4vw, 4.75rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.since span { color: var(--ink-2); }

.rvband { padding: 56px 0; border-top: 1px solid var(--steel-line); background: var(--steel); }
.rvband__in { display: grid; gap: 24px; }
.rvband .stars { background: linear-gradient(90deg, var(--ink) var(--g-fill), var(--steel-line) var(--g-fill)); }
.rvband .score__meta .stars { font-size: 1.25rem; }
.rvband .lead { margin-bottom: 0; }
@media (min-width: 900px) {
  .rvband { padding: 80px 0; }
  .rvband__in { grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
  .rvband .lead { max-width: 46rem; }
}

/* Town pages: glance strip under the hero, three-step cards, before/after and reviews reused from the other pages */
.stripbar { padding: 36px 0 10px; background: var(--steel); }
.steps3 { display: grid; gap: 14px; max-width: 60rem; counter-reset: s; }
.steps3 li { display: grid; gap: 6px; align-content: start; padding: 18px 20px 20px; background: var(--steel-2); border: 1px solid var(--steel-line); border-top: 3px solid var(--logo-green); border-radius: 4px; }
.steps3__n { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--heat-l); color: var(--heat-ink); font-family: var(--font-d); font-stretch: 120%; font-weight: 800; font-size: 1.0625rem; line-height: 1; }
.steps3 h3 { margin-top: 6px; font-family: var(--font-d); font-stretch: 120%; font-weight: 760; font-size: 1.125rem; line-height: 1.3; }
.steps3 p { color: var(--ink-2); }
.steps3 a { color: var(--heat-text); font-weight: 650; text-decoration: underline; text-underline-offset: 0.2em; }
.steps3__more { margin-top: 14px; }
.steps3__more a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 760px) { .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

/* Privacy page, form note and footer link */
.sec__prose .bullets { display: grid; gap: 8px; padding-left: 1.25rem; list-style: disc; color: var(--ink-2); }
.page--privacy .sec__prose a { color: var(--heat-text); font-weight: 650; text-decoration: underline; text-underline-offset: 0.2em; }
.form__priv { margin: 4px 0 2px; font-size: 0.9375rem; color: var(--ink-2); }
.form__priv a { color: var(--heat-text); font-weight: 650; text-decoration: underline; text-underline-offset: 0.2em; }
.foot__c .dot { display: inline-block; vertical-align: middle; }
.foot__c a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

/* spam trap: invisible to people, tempting to bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* optional message box on the booking form */
.field textarea { width: 100%; min-height: 104px; padding: 12px 14px; border-radius: 2px; color: var(--ink); font: inherit; resize: vertical;
  background: linear-gradient(180deg, oklch(0.985 0.003 240), oklch(0.995 0.002 240));
  border: 1px solid oklch(0.62 0.015 250); box-shadow: 0 1px 2px oklch(0.3 0.01 250 / 0.12) inset;
  caret-color: var(--heat-text); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.field textarea::placeholder { color: var(--ink-2); opacity: 0.85; }
.field textarea:hover { border-color: var(--ink-2); }
.field textarea:focus-visible { outline: 2px solid var(--heat-text); outline-offset: 1px; border-color: var(--ink); }