/* ==========================================================================
   Tinkerdale Heating & Air: a handmade clay world (fictional demo company)
   Level 5, round 2.
   - One site, four pages: Home, Services, About us, Contact.
   - Sections meet on soft clay edges again (Level 4's dividers), smoothed
     out so they read as pressed clay, not torn paper. No spray-paint fades.
   - Each section has its own ground colour, so every hand-off is visible.
   - Every link and menu item eases its hover in 0.15 s.
   - Everything from Level 4 still moves, plus Spot the dog, Gus driving
     the vans, and the 2am house lights.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* brand palette from the brief */
  --cream: #F6EEDF;
  --navy: #23305E;
  --navy-2: #34457F;
  --orange: #F26B2A;
  --sky: #8EC5F2;
  --snow: #FFFFFF;
  --clay-tan: #D9B48F;
  --pine: #3E6B4E;

  /* working shades */
  --orange-ink: #B9450F;     /* filled orange buttons: white text passes AA (5.4:1) */
  --orange-ink-2: #A63C0B;
  --ink-soft: #3B4670;       /* secondary text, AA on every light ground */
  --ground-clay: #ECDFC8;    /* crew, reviews */
  --ground-sky: #E3EEF8;     /* service area */
  --night: #161D3B;          /* footer: a step darker than the navy 2am band */
  --ground-tan: #E9D8BA;     /* pricing (white cards sit on it) */
  --ground-snow: #FBF8F2;    /* how a visit works on the home page */
  --rule: #DCC7A6;
  --field-line: #8A7656;
  --error: #9E1F18;
  --shadow: 27 35 64;
  --band-orange-hi: #F9A676;
  --band-orange: #F38A53;    /* navy text on it passes AA (5:1+) */
  --band-orange-lo: #F2844A;
  --on-navy-soft: #D7DDEE;
  --focus-on-dark: #FFD27A;

  /* the clay edge between sections */
  --edge-h: clamp(30px, 3.6vw, 56px);
  /* every hover on a link or button */
  --hover: .15s;

  /* type */
  --font-display: "Fredoka", "Trebuchet MS", sans-serif;
  --font-body: "Nunito", "Segoe UI", sans-serif;
  --fs-body: 1.0625rem;
  --fs-lead: 1.1875rem;
  --fs-small: .9375rem;
  --fs-h1: clamp(2.2rem, 5vw, 4.3rem);
  --fs-h2: clamp(2.1rem, 4.2vw, 3.6rem);
  --fs-h3: 1.3rem;
  --fs-band: clamp(2.3rem, 5vw, 4.4rem);

  /* spacing */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 6.5rem;

  /* radii: uneven on purpose, so shapes look hand-pressed */
  --r-clay: 30px 36px 32px 38px / 36px 30px 38px 32px;
  --r-slab: 34px 42px 36px 44px / 42px 34px 44px 36px;
  --r-btn: 22px 26px 22px 28px / 26px 22px 28px 22px;
  --r-field: 16px 18px 16px 20px;
  --r-pill: 999px;

  /* layout */
  --container: 1180px;
  --header-h: 84px;

  /* motion */
  --press: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* clay grain: tiny dark specks, like thumbprints and tool marks */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .15 .55 0 0 0 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--cream); color: var(--navy);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  accent-color: var(--navy);
}
::selection { background: #FFD27A; color: var(--navy); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; margin: 0 0 var(--s4); text-wrap: balance; }
h1 { font-size: var(--fs-h1); letter-spacing: -.01em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.01em; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { margin: 0 0 var(--s4); text-wrap: pretty; }
a { color: var(--navy); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: rgba(185, 69, 15, .55);
    transition: color var(--hover) ease, text-decoration-color var(--hover) ease, background-color var(--hover) ease, opacity var(--hover) ease; }
a:hover { color: var(--orange-ink); text-decoration-color: currentColor; }
/* every phone number is a tap target: it never wraps, and inline ones get a taller hit area */
a[href^="tel:"] { white-space: nowrap; }
.tel-inline { display: inline-block; padding: .55rem .1rem; margin: -.55rem 0; font-weight: 800; }
:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--s4); top: -100px; z-index: 100; background: var(--navy); color: var(--snow); padding: var(--s3) var(--s5); border-radius: var(--r-pill); font-weight: 800; }
.skip-link:focus, .skip-link:hover { top: var(--s4); color: var(--snow); }
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.lead { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 46ch; }
.fine-print { font-size: var(--fs-small); color: var(--ink-soft); }
.scene { pointer-events: none; }

/* ---------- Sections, and how they hand off to each other ----------
   Round 2: no gradients between sections. Each section paints one ground
   colour, and the section below starts with a soft clay edge in its own
   colour (svg.edge, drawn from the #wave-* paths in each page's sprite):
   one gentle curve in exactly the section's own colour, overlapping it by
   a pixel so no seam can show. */
.section { position: relative; padding: var(--s9) 0; background: var(--base, var(--bg, var(--cream))); }
.section > .container { position: relative; z-index: 1; }
.section.pad-top-small { padding-top: var(--s7); }
.section.pad-top-none { padding-top: 0; }
.section-head { max-width: 42rem; margin-bottom: var(--s7); }
.section-head h2 { margin-bottom: var(--s3); }
.section-head .lead { margin: 0; }
/* grounds */
.on-clay { --bg: var(--ground-clay); }
.on-sky { --bg: var(--ground-sky); }
.on-tan { --bg: var(--ground-tan); }
.on-snow { --bg: var(--ground-snow); }

.edge {
  position: absolute; left: 0; width: 100%; height: var(--edge-h); top: calc(1px - var(--edge-h));
  z-index: 3; pointer-events: none; overflow: visible;
  color: var(--edge, var(--bg, var(--cream))); fill: currentColor;
  shape-rendering: geometricPrecision;
}
/* round 3: the light rim and the shadow read as a faint line along every edge, so both are gone;
   the edge is now one flat colour that is exactly the section's own ground */
.edge-lip { display: none; }
/* an edge at the bottom of a picture (interior page tops): the cream page laps over the photo */
.edge.edge-bottom { top: auto; bottom: -1px; z-index: 1; --edge: var(--cream); }

/* bold bands (orange and navy). The orange glow stays in the middle, so the band's top and
   bottom are one flat colour that matches its clay edge exactly. */
.band-orange {
  --bg: var(--band-orange-lo); --edge: var(--band-orange-lo);
  --base: radial-gradient(75% 60% at 30% 52%, var(--band-orange-hi) 0%, rgb(243 138 83 / .7) 50%, rgb(242 132 74 / 0) 100%) var(--band-orange-lo);
  color: var(--navy);
}
.navy { --bg: var(--navy); --base: linear-gradient(var(--navy), var(--navy)); color: var(--snow); }
.band-orange::after, .navy::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--grain); opacity: .16; mix-blend-mode: multiply;
  /* the grain starts just under the clay edge, so the edge and the band's top match */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 90px);
          mask-image: linear-gradient(180deg, transparent, #000 90px);
}
.navy::after { opacity: .22; }
.band-orange h2, .navy h2 { font-size: var(--fs-band); letter-spacing: -.015em; }
.navy h2, .navy h3 { color: var(--snow); }
.band-orange .lead { color: var(--navy); }
.band-orange a:not(.btn) { text-decoration-color: rgba(35, 48, 94, .6); }
.band-orange a:not(.btn):hover { color: var(--navy); }
.band-orange :focus-visible { outline-color: var(--navy); }
.navy :focus-visible { outline-color: var(--focus-on-dark); }
.navy a:not(.btn) { color: var(--snow); }

/* faint line doodles, kept to the margins of the bold bands */
.doodles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.doodle { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); rotate: var(--r); overflow: visible; }
.band-orange .doodle { color: #FFF4E6; opacity: .45; }
.navy .doodle { color: var(--sky); opacity: .22; }

/* ---------- Clay material ---------- */
.clay, .clay-slab {
  position: relative;
  background: radial-gradient(120% 90% at 28% 18%, #FFFBF3 0%, var(--cream) 45%, #EADFCB 100%);
  border-radius: var(--r-clay);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .75),
    inset 0 -6px 0 rgba(185, 143, 105, .28),
    0 10px 0 -2px rgba(var(--shadow) / .10),
    0 18px 34px rgba(var(--shadow) / .16);
}
.clay-slab { border-radius: var(--r-slab); }
.clay::after, .clay-slab::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--grain); opacity: .3; mix-blend-mode: multiply;
}

/* a photo pressed into the page like a soft clay tile (round 2: no faded, sprayed edges) */
.melt { border-radius: 40px 46px 42px 48px / 46px 40px 48px 42px; box-shadow: 0 0 0 6px rgba(255, 251, 243, .9), 0 18px 34px -10px rgba(120, 80, 40, .35); }

/* ---------- Buttons: squishy clay ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: .8rem 1.4rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.1;
  text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
  border-radius: var(--r-btn);
  transition: transform var(--hover) var(--press), background-color var(--hover) ease, color var(--hover) ease, box-shadow var(--hover) ease;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.28), inset 0 -5px 0 rgba(0,0,0,.18), 0 8px 18px rgba(var(--shadow) / .22);
}
.btn:hover, .btn:focus-visible { transform: scaleX(1.04) scaleY(.96); }
.btn:active { transform: scaleX(1.07) scaleY(.92); }
.btn-orange { background: var(--orange-ink); color: var(--snow); box-shadow: inset 0 4px 0 var(--orange), inset 0 -5px 0 rgba(0,0,0,.2), 0 8px 18px rgba(var(--shadow) / .22); }
.btn-orange:hover { color: var(--snow); background: var(--orange-ink-2); }
.btn-navy { background: var(--navy); color: var(--snow); }
.btn-navy:hover { color: var(--snow); background: var(--navy-2); }
.btn-ghost { background: var(--snow); color: var(--navy); box-shadow: inset 0 0 0 3px var(--navy), inset 0 -5px 0 rgba(35,48,94,.12), 0 6px 14px rgba(var(--shadow) / .12); }
.btn-ghost:hover { color: var(--navy); background: #FFF7EA; }
.btn-small { min-height: 44px; padding: .55rem 1rem; font-size: .98rem; }
.btn-big { min-height: 56px; padding: 1rem 1.7rem; font-size: 1.15rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* text links that act like buttons ("Ask about furnaces >") */
.ask {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px;
  color: var(--navy); font: 600 1.02rem var(--font-display);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: rgba(185, 69, 15, .55);
  transition: transform var(--hover) var(--press), color var(--hover) ease;
}
.ask::after { content: ""; width: .55em; height: .55em; border: solid currentColor; border-width: 3px 3px 0 0; border-radius: 2px; rotate: 45deg; }
.ask:hover { color: var(--orange-ink); transform: translateX(3px); }

/* green clay tick list */
.check-list { list-style: none; padding: 0; margin: 0 0 var(--s6); }
.check-list li { position: relative; padding-left: 2.2rem; margin-bottom: var(--s3); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 1.35rem; height: 1.35rem; border-radius: 45% 55% 50% 50%;
  background: radial-gradient(circle at 35% 30%, #6FA27F, var(--pine) 65%); box-shadow: inset 0 2px 0 rgba(255,255,255,.3);
}
.check-list li::after { content: ""; position: absolute; left: .45rem; top: .48em; width: .45rem; height: .7rem; border: solid var(--snow); border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: var(--cream);
  box-shadow: 0 4px 0 rgba(185, 143, 105, .22), 0 10px 24px rgba(var(--shadow) / .08);
}
.header-inner { height: 100%; width: min(100% - 2rem, 1320px); margin-inline: auto; display: flex; align-items: center; gap: var(--s6); }
/* the logo: flame, house and snowflake on their own (no circle), with room around the name */
.brand { display: flex; align-items: center; gap: 14px; padding: 6px 4px; margin-right: var(--s5); text-decoration: none; color: var(--navy); flex-shrink: 0; transition: transform var(--hover) var(--press), color var(--hover) ease; }
.brand:hover { color: var(--navy); transform: translateY(-1px); }
.brand-mark { width: auto; height: 50px; max-width: none; filter: drop-shadow(0 3px 3px rgba(27, 35, 64, .16)); }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1; letter-spacing: .005em; }
.brand-name span { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s2); }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); text-decoration: none; font-weight: 800; font-size: .98rem; border-radius: 12px;
  text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.site-nav a { transition: color var(--hover) ease, background-color var(--hover) ease, text-decoration-color var(--hover) ease; }
/* hover: a soft orange-tinted clay pill behind the word, no underline */
.site-nav a:hover { color: var(--orange-ink); background-color: rgba(242, 107, 42, .14); text-decoration-color: transparent; }
.site-nav a[aria-current="page"] { text-decoration-color: var(--orange); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s5); }
.header-phone { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--navy); font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; }
.header-phone:hover { color: var(--orange-ink); }
.header-call, .menu-toggle { display: none; }
.menu-toggle { width: 48px; height: 48px; border: 0; border-radius: 16px; background: var(--navy); cursor: pointer; place-items: center; flex-shrink: 0; }
.menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 22px; height: 3px; border-radius: 3px; background: var(--snow); position: relative; }
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -7px; } .menu-bars::after { top: 7px; }

/* ==========================================================================
   Home hero: the clay world, edge to edge, fading into the page
   ========================================================================== */
.hero {
  position: relative; width: 100%; margin: 0; overflow: hidden;
  height: calc(100svh - var(--header-h)); min-height: 600px;
  display: flex; align-items: center;
}
.hero-media { position: absolute; inset: 0; overflow: hidden; container-type: size; background: #9FCBF2; }
.hero-stage {
  /* the stage keeps the picture's 2560:1429 shape and covers the hero (plus room for parallax),
     so the van, the chimney and the puffs drawn on top always line up with the picture */
  --sw: max(100cqw, 112cqh * 1.7915);
  --fx: .5; --fy: .62;
  position: absolute; width: var(--sw); height: calc(var(--sw) * .5582);
  left: calc((100cqw - var(--sw)) * var(--fx));
  top: calc((100cqh - var(--sw) * .5582) * var(--fy));
  will-change: transform;
}
.hero-still, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.hero-video { opacity: 0; transition: opacity .6s ease; }
.hero.has-video .hero-video { opacity: 1; }
.hero.has-video .still-fx { display: none; }
/* until the video plays, the still moves on its own: the parked van idles, steam puffs from the chimney */
.still-fx { position: absolute; inset: 0; pointer-events: none; }
.van-rock {
  position: absolute; inset: 0;
  background: url("images/web/hero-start.webp") 0 0 / 100% 100% no-repeat;
  clip-path: polygon(63% 50%, 98.8% 48.5%, 100% 53%, 100% 86%, 95% 91%, 64% 92%, 53.5% 85%, 53.5% 75%, 55.5% 68.5%, 60% 63.5%, 61.5% 56%);
  animation: idle 1.2s steps(12, end) infinite;
}
@keyframes idle { 0%, 50%, 100% { translate: 0 0; } 25% { translate: 0 -.14%; } 75% { translate: 0 -.22%; } }
.fx-puff { position: absolute; aspect-ratio: 1; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 35% 30%, #FFFFFF, #E3EAF4); }
.fx-puff.ex { left: 97%; top: 86%; width: 1.1%; animation: puff-ex 1.6s steps(16, end) infinite; }
.fx-puff.e2 { animation-delay: -.8s; }
@keyframes puff-ex { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 20% { opacity: .85; } 100% { transform: translate(160%, -220%) scale(2.2); opacity: 0; } }
.fx-puff.st { left: 86%; top: 9.5%; width: 1.5%; animation: puff-st 3s steps(30, end) infinite; }
.fx-puff.s2 { animation-delay: -1s; } .fx-puff.s3 { animation-delay: -2s; }
@keyframes puff-st { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 20% { opacity: .85; } 100% { transform: translate(60%, -380%) scale(1.8); opacity: 0; } }

/* a clay pine in the foreground, planted on the snow (no longer clipped at the hero's edge) */
.hero-near { position: absolute; inset: 0; overflow: hidden; z-index: 2; pointer-events: none; }
.near-pine { position: absolute; left: -2vw; bottom: 3%; height: 34%; width: auto; max-width: none; filter: drop-shadow(0 12px 14px rgba(27, 35, 64, .22)); }

.hero-slab {
  position: relative; z-index: 3; margin-left: max(1.25rem, calc((100vw - var(--container)) / 2));
  width: min(600px, calc(100% - 2.5rem)); padding: var(--s7) var(--s6) var(--s6);
}
.hero-sub { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 40ch; }

/* snow: clay flakes drifting down in held frames (timing set per flake in script.js) */
.snow { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.flake {
  position: absolute; top: -20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF, #E3EAF4); box-shadow: 0 2px 3px rgba(var(--shadow) / .15);
  animation: fall linear infinite;
}
@keyframes fall { to { transform: translate(var(--sway, 30px), calc(100svh + 40px)); } }

/* ---------- The crew in their poses: a base picture plus the moving part ---------- */
.fig { position: relative; overflow: visible; max-width: none; pointer-events: none; transform-origin: 50% 100%; animation: sway 2.4s steps(24, end) infinite; filter: drop-shadow(0 14px 12px rgba(27, 35, 64, .22)); }
@keyframes sway { 50% { transform: scaleY(1.014) scaleX(.995); } }
.fig img { display: block; width: 100%; height: auto; max-width: none; }
.fig .fig-part { position: absolute; left: 0; top: 0; }
/* a soft contact shadow under each standing figure, so it stands on the ground instead of floating */
.fig::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: -2%; height: 6%; border-radius: 50%; background: rgba(var(--shadow) / .2); filter: blur(4px); }
/* Gus: the raised arm swings from the shoulder */
.fig-gus .fig-base { clip-path: polygon(0 0, 69.4% 0, 69.4% 29.2%, 62.5% 35.4%, 86.1% 45.6%, 100% 44.2%, 100% 100%, 0 100%); }
.fig-gus .fig-part { clip-path: polygon(69.4% 0, 100% 0, 100% 45.2%, 86.1% 46.6%, 62% 36.3%, 69.4% 29.2%); transform-origin: 70.8% 39.4%; animation: wave4 1.4s steps(14, end) infinite; }
@keyframes wave4 { 0%, 100% { rotate: 0deg; } 30% { rotate: -7deg; } 65% { rotate: 4deg; } }
/* Walt: the wrench hand turns at the wrist */
.fig-walt .fig-base { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 47%, 31% 47%, 31% 21%, 0 21%); }
.fig-walt .fig-part { clip-path: polygon(0 21%, 31% 21%, 31% 47.6%, 0 47.6%); transform-origin: 17.5% 46.5%; animation: turn4 1.6s steps(16, end) infinite; }
@keyframes turn4 { 0%, 100% { rotate: 0deg; } 50% { rotate: 9deg; } }

/* Hero Gus stands right at the front of the snow, his boots on the ground just above the clay edge */
.fig-hero::before { left: 16%; right: 16%; bottom: -1%; height: 5%; background: rgba(27, 35, 64, .38); filter: blur(3px); }
.fig-hero::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -3%; height: 9%; border-radius: 50%; background: rgba(27, 35, 64, .14); filter: blur(8px); z-index: -1; }
.fig-hero {
  position: absolute; z-index: 4; bottom: calc(var(--edge-h) * .35);
  left: calc(max(1.25rem, (100vw - var(--container)) / 2) + min(600px, 100vw - 2.5rem) + 1.25rem);
  width: clamp(190px, 19vw, 300px);
}

/* ==========================================================================
   Interior page heroes: a picture that fades into the page, words on a clay slab
   ========================================================================== */
.page-hero { position: relative; overflow: hidden; padding-bottom: var(--s7); }
.page-hero-pic { position: relative; height: clamp(300px, 56svh, 600px); overflow: hidden; }
.page-hero-pic img {
  position: absolute; inset: -6% 0 0; width: 100%; height: 106%; object-fit: cover; max-width: none; will-change: transform;
}
.page-about .page-hero-pic img { object-position: 50% 18%; }
.page-contact .page-hero-pic img { object-position: 50% 45%; }
.page-hero .snow { z-index: 1; }
.page-slab { position: relative; z-index: 2; margin-top: -150px; max-width: 660px; padding: var(--s6); }
.page-slab h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); margin-bottom: var(--s3); }
.page-slab p { font-size: var(--fs-lead); color: var(--ink-soft); }
.slab-phone { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--navy); text-decoration: none; display: inline-flex; align-items: center; min-height: 52px; }
.slab-phone:hover { color: var(--orange-ink); }

/* Services: a winter sky with Walt fixing the furnace, no photo needed */
.page-hero.sky {
  padding: var(--s8) 0 calc(var(--s7) + var(--edge-h));
  background: linear-gradient(180deg, #CFE6FA 0%, var(--ground-sky) 70%);
}
.sky-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr minmax(260px, 420px); gap: var(--s7); align-items: end; }
.sky-inner .page-slab { margin-top: 0; align-self: center; }

/* Walt beside the clay furnace, his wrench turning, the flame flickering */
.maint-scene { position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; max-width: 420px; margin-inline: auto; }
.maint-scene::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 4px; height: 26px; border-radius: 50%; background: rgba(var(--shadow) / .16); filter: blur(6px); z-index: -1; }
.furnace { position: relative; width: 40%; margin-right: -2%; filter: drop-shadow(0 12px 12px rgba(27, 35, 64, .2)); }
.furnace img { display: block; width: 100%; height: auto; }
.furnace-glow {
  position: absolute; left: 36%; top: 57.5%; width: 30%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 90, .65), rgba(255, 140, 40, 0) 68%);
  mix-blend-mode: screen; animation: glow .8s steps(8, end) infinite;
}
@keyframes glow { 0%, 100% { opacity: .6; scale: 1; } 50% { opacity: 1; scale: 1.14; } }
.maint-scene .fig-walt { width: 46%; }
.maint-scene .fig::before { display: none; }

/* ==========================================================================
   Home: "What's going on?" picker (orange band, Nina pointing)
   ========================================================================== */
.picker { padding-top: calc(var(--s8) + var(--s2)); }
.picker-title { text-align: center; margin-bottom: var(--s6); }
/* Nina in the middle, her bubble on her left at the height of her mouth, Spot on her right */
.picker-stage {
  --nina-w: clamp(170px, 17vw, 236px);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--nina-w) minmax(0, 1fr);
  column-gap: var(--s5); align-items: start; margin-bottom: var(--s6);
}
/* the figures hang from the top of the row, so a taller answer bubble never moves Nina away from it.
   Nina (round 3): five clay poses stacked, script.js shows one; she points down at a card or smiles at you */
.nina { grid-column: 2; grid-row: 1; width: var(--nina-w); position: relative; }
.nina-body { position: relative; transform-origin: 50% 100%; animation: sway 2.4s steps(24, end) infinite; filter: drop-shadow(0 14px 12px rgba(120, 40, 10, .22)); }
.nina-body::before { content: ""; position: absolute; left: 10%; right: 6%; bottom: 1.5%; height: 5%; border-radius: 50%; background: rgba(var(--shadow) / .22); filter: blur(4px); z-index: -1; }
.nina-frame { display: block; width: 100%; height: auto; max-width: none; visibility: hidden; }
.nina-frame + .nina-frame { position: absolute; left: 0; top: 0; }
.nina[data-pose="far-left"] .f-far-left, .nina[data-pose="near-left"] .f-near-left, .nina[data-pose="near-right"] .f-near-right,
.nina[data-pose="far-right"] .f-far-right, .nina[data-pose="smile"] .f-smile { visibility: visible; }
/* a tiny settle each time she changes pose, like a clay figure being re-posed */
.nina.is-shift .nina-body { animation: nina-shift .32s steps(4, end); }
@keyframes nina-shift { 0% { scale: 1 1; } 40% { scale: 1.02 .975; } 100% { scale: 1 1; } }
/* the card she is pointing at lifts a little */
.pick.is-pointed:not([aria-pressed="true"]) { transform: translateY(-5px); box-shadow: inset 0 3px 0 rgba(255,255,255,.75), inset 0 -6px 0 rgba(185, 143, 105, .28), 0 14px 0 -2px rgba(120, 40, 10, .18), 0 24px 34px rgba(120, 40, 10, .26); }
.pick { transition: transform .3s var(--press), box-shadow .3s ease; }
.pick:hover { transition-duration: var(--hover); }
.bubble {
  position: relative; margin: 0; max-width: 30rem; padding: var(--s5) var(--s6);
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.35; color: var(--navy);
  background: radial-gradient(120% 90% at 28% 18%, #FFFBF3 0%, var(--cream) 55%, #EFE3CE 100%);
  border-radius: var(--r-slab);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.75), inset 0 -5px 0 rgba(185, 143, 105, .25), 0 12px 24px rgba(120, 40, 10, .2);
}
.bubble::after { content: ""; position: absolute; right: -20px; bottom: 26px; width: 34px; height: 30px; background: #F2E6D2; clip-path: polygon(0 0, 100% 62%, 0 100%); }
/* the bubble's tail sits at Nina's mouth (about 21% down her picture), and the bubble grows down from there */
.picker-bubble {
  grid-column: 1; grid-row: 1; justify-self: end; align-self: start; width: min(100%, 27rem);
  margin-top: max(0px, calc(var(--nina-w) * 1.4533 * .235 - 36px)); margin-right: 4px;
  padding: 0; font-size: 1.15rem;
}
.picker-bubble::after { top: 22px; bottom: auto; background: #F3E8D5; }
.bubble-clip { overflow: hidden; border-radius: inherit; transition: height .38s var(--ease-out); }
.bubble-body { padding: var(--s5) var(--s6); transition: opacity .3s ease, transform .3s var(--ease-out); }
.bubble-body.is-out { opacity: 0; transform: translateY(6px); transition-duration: .16s; }
.bubble-body p { margin: 0; }
.bubble-title { font-size: 1.3rem; margin: 0 0 var(--s2); color: var(--orange-ink); }
.bubble-text { font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; line-height: 1.5; }
.bubble-cta { margin-top: var(--s4); gap: var(--s2); }
.bubble-cta .btn { min-height: 46px; padding: .6rem 1rem; font-size: 1rem; }

/* Spot the clay dog: five poses stacked; script.js shows one at a time, like stop-motion frames */
.spot { grid-column: 3; grid-row: 1; justify-self: start; position: relative; width: calc(var(--nina-w) * .76); margin-left: -10px;
  margin-top: calc(var(--nina-w) * (1.4533 - .76 * 1.1587) - 4px); }   /* his paws on the same floor as Nina's boots */
.spot-body { position: relative; transform-origin: 50% 100%; animation: spot-breathe 2.2s steps(22, end) infinite; filter: drop-shadow(0 12px 10px rgba(120, 40, 10, .22)); }
.spot-body::before { content: ""; position: absolute; left: 14%; right: 12%; bottom: 0; height: 7%; border-radius: 50%; background: rgba(var(--shadow) / .22); filter: blur(4px); z-index: -1; }
@keyframes spot-breathe { 50% { scale: 1.01 1.025; } }
.spot-frame { display: block; width: 100%; height: auto; max-width: none; }
.spot-frame + .spot-frame { position: absolute; left: 0; top: 0; }
.spot-frame { visibility: hidden; }
.spot[data-pose="watch"] .f-watch, .spot[data-pose="wag"] .f-wag, .spot[data-pose="look"] .f-look,
.spot[data-pose="bark"] .f-bark, .spot[data-pose="down"] .f-down, .spot[data-pose="bark-you"] .f-bark-you,
.spot[data-pose="look-wag"] .f-look-wag { visibility: visible; }
/* his moves */
.spot.is-hop .spot-body { animation: spot-hop .5s steps(6, end); }
@keyframes spot-hop { 0%, 100% { translate: 0 0; } 40% { translate: 0 -14px; } 70% { translate: 0 -4px; } }
.spot.is-tilt .spot-body { animation: spot-tilt 1s steps(10, end); }
@keyframes spot-tilt { 0%, 100% { rotate: 0deg; } 30%, 70% { rotate: -5deg; } }
.spot.is-wiggle .spot-body { animation: spot-wiggle .6s steps(8, end) 2; }
@keyframes spot-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: 3deg; } 75% { rotate: -3deg; } }
.spot-woof {
  position: absolute; left: -6%; top: -4%; z-index: 2; padding: .15rem .65rem; border-radius: var(--r-pill);
  font: 700 1rem/1.4 var(--font-display); color: var(--navy); background: var(--snow); box-shadow: 0 4px 0 rgba(120, 40, 10, .18);
  opacity: 0; transform: scale(.6) rotate(-8deg); transition: opacity .12s ease, transform .2s var(--press);
}
.spot.is-barking .spot-woof { opacity: 1; transform: scale(1) rotate(-8deg); }

.picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.pick {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3);
  min-height: 190px; padding: var(--s6) var(--s4); border: 0; cursor: pointer; color: var(--navy);
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.2; text-align: center;
  transition: transform var(--hover) var(--press), box-shadow var(--hover) ease;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.75), inset 0 -6px 0 rgba(185, 143, 105, .28), 0 10px 0 -2px rgba(120, 40, 10, .18), 0 18px 30px rgba(120, 40, 10, .22);
}
.pick img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(27, 35, 64, .16)); }
.pick:hover, .pick:focus-visible { transform: scaleX(1.04) scaleY(.96); }
.pick[aria-pressed="true"] {
  background: radial-gradient(120% 90% at 28% 18%, #FFFBF3 0%, #FFE9D6 100%);
  box-shadow: inset 0 0 0 4px var(--orange-ink), inset 0 -6px 0 rgba(185, 69, 15, .25), 0 6px 0 -2px rgba(var(--shadow) / .12), 0 10px 20px rgba(var(--shadow) / .14);
  transform: translateY(4px) scaleY(.98);
}

/* ==========================================================================
   Home: Pricing and Plans, three white cards that climb like stairs on a tan ground
   ========================================================================== */
.price-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); align-items: start; counter-reset: step; }
.price-step { padding: var(--s6) var(--s5) var(--s5); display: flex; flex-direction: column; }
/* white clay on tan: the cards stand clear of the ground now */
.prices .clay {
  background: radial-gradient(120% 90% at 28% 16%, #FFFFFF 0%, #FFFDF9 55%, #F8F1E5 100%);
  box-shadow: inset 0 3px 0 #FFFFFF, inset 0 -6px 0 rgba(185, 143, 105, .22), 0 0 0 2px rgba(185, 143, 105, .18),
              0 12px 0 -2px rgba(120, 80, 40, .14), 0 22px 38px rgba(120, 80, 40, .2);
}
.price-step:nth-child(1) { margin-top: 96px; }
.price-step:nth-child(2) { margin-top: 48px; }
.step-top { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.step-num {
  display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--snow);
  background: radial-gradient(circle at 35% 30%, #FF9A5C, var(--orange-ink) 62%, #8F3209);
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%; box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 4px 0 -1px rgba(var(--shadow) / .25);
}
.price-step h3 { margin: 0; font-size: 1.55rem; }
.price-step .step-icon { width: 64px; height: 64px; object-fit: contain; margin-bottom: var(--s3); filter: drop-shadow(0 5px 5px rgba(27, 35, 64, .15)); }
.price { margin: 0 0 var(--s3); font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1.15; }
.price-step p { color: var(--ink-soft); }
.price-step ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); }
.price-step li { margin-bottom: var(--s1); }
.price-note { max-width: 62ch; margin: var(--s5) 0 0; }
.plan-strip { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s7); padding: var(--s4) var(--s6); max-width: 900px; }
.plan-strip img { width: 46px; height: 64px; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(27, 35, 64, .15)); }
.plan-strip p { margin: 0; flex: 1 1 22rem; color: var(--ink-soft); }
.plan-strip strong { color: var(--navy); }

/* the clay crew breathing in place (crew cards, reviews) */
@keyframes breathe4 { 50% { scale: .99 1.02; } }

/* ==========================================================================
   Home: the 2am band (navy, a night scene): house lights on and off, Gus driving over
   ========================================================================== */
.emergency { padding: var(--s9) 0 calc(var(--s9) + var(--s4)); }
.emergency-scene { position: absolute; left: 0; right: 0; bottom: 0; top: 0; overflow: hidden; }
.night-set {
  position: absolute; right: 0; bottom: 0; height: 100%; width: min(64%, 920px); overflow: hidden;
  /* the picture melts into the band on the left and at the top, so words always sit on plain navy */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, transparent 0%, #000 26%, #000 84%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, transparent 0%, #000 26%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* the picture keeps its shape (2200:933), pinned to the bottom right, so the lit windows line up */
.night-pic { position: absolute; right: 0; bottom: 0; height: 100%; aspect-ratio: 2200 / 933; }
.night-house { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.win {
  position: absolute; inset: 0; pointer-events: none;
  background: url("images/web/night-house-lit.webp") 0 0 / 100% 100% no-repeat;
  clip-path: inset(var(--t) var(--r) var(--b) var(--l));
  opacity: 0; transition: opacity .45s ease;
}
.win.on { opacity: 1; }

/* Gus drives over, stops, waves from the driver's seat, then drives on to the house (16 s loop) */
.night-van { position: absolute; left: 30%; bottom: 7%; width: 21%; z-index: 1; animation: night-drive 16s linear infinite; }
@keyframes night-drive {
  0% { translate: -170% 0; opacity: 0; }
  4% { opacity: 1; }
  26%, 52% { translate: 0 0; opacity: 1; }
  78% { translate: 150% 0; opacity: 1; }
  86%, 100% { translate: 170% 0; opacity: 0; }
}
.night-van img { filter: brightness(.7) saturate(.85); }
.night-van .van-wave { animation: night-wave 16s steps(1, end) infinite; }
.night-van .van-drive { animation: night-eyes 16s steps(1, end) infinite; }
@keyframes night-wave { 0% { opacity: 0; } 30% { opacity: 1; } 48% { opacity: 0; } }
@keyframes night-eyes { 0% { opacity: 1; } 30% { opacity: 0; } 48% { opacity: 1; } }
.night-van .beam {
  position: absolute; left: 96%; bottom: 22%; width: 95%; height: 52%; z-index: -1;
  background: linear-gradient(90deg, rgba(255, 231, 168, .5), rgba(255, 231, 168, 0));
  clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 62%);
  animation: beam 1.2s steps(12, end) infinite;
}
@keyframes beam { 50% { opacity: .5; } }
.emergency-inner { position: relative; z-index: 1; }
.emergency h2 { max-width: 13ch; margin-bottom: var(--s4); }
.emergency p { color: var(--on-navy-soft); font-size: var(--fs-lead); max-width: 30ch; }

/* ==========================================================================
   Services page
   ========================================================================== */
.service-list { list-style: none; margin: 0; padding: 0; max-width: 1060px; }
.service {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 260px; gap: var(--s6); align-items: center;
  padding: var(--s6) 0; border-top: 2px solid var(--rule);
}
.service:last-child { border-bottom: 2px solid var(--rule); }
.service-icon { width: 64px; height: 64px; object-fit: contain; align-self: start; filter: drop-shadow(0 5px 5px rgba(27, 35, 64, .15)); }
.service-text h3 { font-size: 1.45rem; margin-bottom: var(--s2); }
.service-text p { color: var(--ink-soft); max-width: 52ch; margin-bottom: var(--s2); }
/* the photos sit in the row softly: big rounded corners, a warm shadow, no white frame */
.svc-photo {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 46% 42% 40% 44% / 30% 32% 28% 34%;
  box-shadow: 0 16px 30px -10px rgba(120, 80, 40, .35);
}

/* How a visit works: the van's route on the night band */
.route { position: relative; --road-y: 78px; }
.route-road {
  position: absolute; left: 0; right: 0; top: var(--road-y); height: 30px; border-radius: 16px; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 12px, rgba(255,255,255,.85) 12px 34px, transparent 34px) 0 50% / 46px 4px repeat-x,
    radial-gradient(120% 140% at 30% 20%, #8C97AE, #6B7690);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.25), 0 6px 0 -1px rgba(0,0,0,.3);
}
.route-van { position: absolute; left: 0; bottom: 3px; z-index: 3; width: 132px; height: auto; max-width: none; will-change: transform; }
/* pointing at a step: the van drives there on its own instead of following the scroll */
.route-van.is-steering { transition: transform .9s var(--ease-out); }
/* the vans with Gus at the wheel: two clay frames, eyes on the road or waving */
/* (each van is already absolutely placed, so the waving frame lines up on top of the driving one) */
.van-gus img { display: block; width: 100%; height: auto; max-width: none; }
.van-gus img + img { position: absolute; left: 0; bottom: 0; }
/* four frames: driving or waving, facing the way it came or the way back. One shows at a time. */
.van-gus img { opacity: 0; }
.van-gus .van-drive { opacity: 1; }
.van-gus.is-waving .van-drive, .van-gus.is-back .van-drive { opacity: 0; }
.van-gus.is-waving:not(.is-back) .van-wave { opacity: 1; }
.van-gus.is-back:not(.is-waving) .van-drive-back { opacity: 1; }
.van-gus.is-back.is-waving .van-wave-back { opacity: 1; }
/* the home page version sits on snow, so the words are navy */
.how.on-snow .stop p { color: var(--ink-soft); }
.how.on-snow .route-road { box-shadow: inset 0 3px 0 rgba(255,255,255,.25), 0 6px 0 -1px rgba(27, 35, 64, .18); }
.how.on-snow .stop { cursor: default; }
.stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6); position: relative; }
.stop { padding-top: calc(var(--road-y) + 58px); position: relative; }
.stop-num {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 56px; height: 56px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--snow);
  background: radial-gradient(circle at 35% 30%, #FF9A5C, var(--orange-ink) 62%, #8F3209);
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 6px 0 -1px rgba(0,0,0,.3);
}
.stop-num::after { content: ""; position: absolute; left: 50%; top: 100%; width: 6px; height: calc(var(--road-y) - 56px + 4px); translate: -50% 0; background: #C9A27E; border-radius: 3px; z-index: -1; }
.stop h3 { margin-bottom: var(--s2); }
.stop p { color: var(--on-navy-soft); margin: 0; }
.how { padding: var(--s9) 0; }

/* the vans: one clay cut-out, idling with a small squash */
.route-van, .road-van { transform-origin: 50% 100%; animation: squash 1.2s steps(12, end) infinite; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .25)); }
@keyframes squash { 0%, 50%, 100% { scale: 1 1; } 25% { scale: 1.01 .97; } 75% { scale: 1 .98; } }

/* Maintenance plans */
.maint-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s8); align-items: center; }
.maint-copy h3 { margin-top: var(--s6); margin-bottom: var(--s3); }
.maint-pic { margin: 0; }
.maint-pic img { width: 100%; height: auto; }

/* FAQ: questions on rolled-clay lines */
.faq-inner { max-width: 860px; }
.faq h2 { margin-bottom: var(--s6); }
.acc-item { border-top: 2px solid var(--rule); }
.acc-item:last-child { border-bottom: 2px solid var(--rule); }
.acc-item h3 { margin: 0; }
.acc-btn {
  width: 100%; min-height: 64px; text-align: left; background: none; border: 0; cursor: pointer; color: var(--navy);
  font: 600 1.2rem/1.3 var(--font-display); padding: var(--s5) 3.6rem var(--s5) 0; position: relative;
}
.acc-btn:hover { color: var(--orange-ink); }
.acc-btn::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 44px; height: 44px; margin-top: -22px;
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  background:
    linear-gradient(var(--snow), var(--snow)) center / 18px 4px no-repeat,
    linear-gradient(var(--snow), var(--snow)) center / 4px 18px no-repeat,
    radial-gradient(circle at 35% 30%, #4A5C99, var(--navy) 65%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 4px 0 -1px rgba(var(--shadow) / .2);
  transition: rotate .35s var(--press);
}
.acc-btn[aria-expanded="true"]::after {
  rotate: 180deg;
  background: linear-gradient(var(--snow), var(--snow)) center / 18px 4px no-repeat, radial-gradient(circle at 35% 30%, #4A5C99, var(--navy) 65%);
}
.acc-panel { padding: 0 3.6rem var(--s5) 0; color: var(--ink-soft); }
.acc-panel p { margin: 0; max-width: 62ch; }

/* a short "still not sure?" call strip at the end of a page */
.call-strip { text-align: center; padding-bottom: var(--s8); }
.call-strip h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.call-strip .lead { margin-inline: auto; }
.call-strip .cta-row { justify-content: center; }

/* ==========================================================================
   About page
   ========================================================================== */
.about-inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--s8); align-items: center; }
.about-copy h3 { margin-top: var(--s6); margin-bottom: var(--s3); }
.about-real { margin: 0; }
.about-real img { width: 100%; height: auto; }
.about-real figcaption { text-align: center; font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); margin-top: var(--s4); }

/* the crew: clay figure standing in front of the real person */
.crew-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s7); }
.crew-card { text-align: center; }
.crew-frame { position: relative; aspect-ratio: 4 / 5; }
.crew-photo {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 50% 50% 22px 26px / 36% 36% 22px 26px;  /* an arched doorway */
  box-shadow: 0 0 0 6px #C9A27E, 0 14px 26px rgba(var(--shadow) / .16);
  background: #D7C3A3;
}
.crew-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.crew-clay {
  position: absolute; left: -8%; bottom: -7%; z-index: 2;
  height: 88%; width: auto; max-width: none; display: block;
  filter: drop-shadow(0 12px 10px rgba(27, 35, 64, .28));
  transform-origin: 50% 100%; transition: transform .9s steps(9, end);
  animation: breathe4 2.4s steps(24, end) infinite;
}
/* pointing at a card (mouse only): the clay steps into the corner so the whole face shows */
@media (hover: hover) {
  .crew-frame:hover .crew-clay { transform: translate(-26%, 4%) scale(.55); }
}
.crew-card h3 { font-size: 1.7rem; margin: var(--s7) 0 0; }
.crew-card p { color: var(--ink-soft); margin: 0; }
.crew-note { text-align: center; margin: var(--s6) 0 0; }

/* sample reviews */
.review-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.review { display: flex; flex-direction: column; padding: var(--s6); }
.review-pics { position: relative; height: 196px; margin-bottom: var(--s5); }
.review-photo {
  position: absolute; left: 62px; top: 0; width: 156px; height: 156px; object-fit: cover;
  border-radius: 28px 34px 30px 36px; box-shadow: 0 10px 20px rgba(var(--shadow) / .16);
}
.review-clay {
  position: absolute; left: 0; bottom: 0; height: 186px; width: auto; max-width: none; z-index: 1;
  filter: drop-shadow(0 8px 7px rgba(27, 35, 64, .26));
  transform-origin: 50% 100%; animation: breathe4 2.4s steps(24, end) infinite;
  transition: translate .5s steps(5, end);
}
.review:hover .review-clay { translate: 0 -8px; }
.review blockquote { margin: 0 0 var(--s4); }
.review blockquote p { font-size: 1.08rem; margin: 0; }
.review-who { margin: auto 0 0; }
.review-who span { display: block; font-size: var(--fs-small); color: var(--ink-soft); }

/* ==========================================================================
   Contact page
   ========================================================================== */
.area-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s8); align-items: center; }
.area-map { position: relative; max-width: 620px; }
.map-img { width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgba(27, 35, 64, .16)); }
.pin { position: absolute; left: var(--x); top: var(--y); width: clamp(24px, 3.2vw, 38px); transform: translate(-50%, -100%); animation: hop 1.8s steps(18, end) infinite; }
.pin:nth-child(2) { animation-delay: -.4s; } .pin:nth-child(3) { animation-delay: -.8s; }
.pin:nth-child(4) { animation-delay: -1.2s; } .pin:nth-child(5) { animation-delay: -1.5s; }
@keyframes hop { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -6px; } }
.pin img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 3px rgba(27, 35, 64, .25)); }
.pin b {
  position: absolute; left: 50%; top: 100%; translate: -50% 4px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(.85rem, 1.3vw, 1.05rem); color: var(--navy);
  background: var(--cream); padding: .05rem .55rem; border-radius: var(--r-pill); box-shadow: 0 3px 0 rgba(185, 143, 105, .35);
}
.town-list { list-style: none; padding: 0; margin: var(--s5) 0 var(--s6); columns: 2; column-gap: var(--s6); }
.town-list li { position: relative; padding-left: 1.6rem; margin-bottom: var(--s2); font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.4; break-inside: avoid; }
.town-list li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: .85rem; height: .85rem; border-radius: 50% 50% 50% 0; rotate: -45deg;
  background: radial-gradient(circle at 35% 30%, #FF9A5C, var(--orange) 60%, #C24A12);
}
.area-call { font-size: var(--fs-lead); }

/* request form */
.request { padding-bottom: calc(var(--s9) + var(--s4)); }
.request-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s8); align-items: start; }
.request-head { position: sticky; top: calc(var(--header-h) + var(--s6)); }
.request-hurry { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.35; margin-top: var(--s5); }
.request .clay-slab { box-shadow: inset 0 3px 0 rgba(255,255,255,.75), inset 0 -6px 0 rgba(185, 143, 105, .28), 0 10px 0 -2px rgba(120, 40, 10, .14), 0 22px 40px rgba(120, 40, 10, .24); }
.request-form, .form-done { padding: var(--s6); }
.form-about { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin-bottom: var(--s5); }
.form-about::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); box-shadow: inset 0 2px 0 rgba(255,255,255,.4); }
.field { margin: 0 0 var(--s5); border: 0; padding: 0; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
label, legend { display: block; font-weight: 800; margin-bottom: var(--s2); }
legend { padding: 0; }
.req { color: var(--orange-ink); }
.optional { font-weight: 600; color: var(--ink-soft); }
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; font: inherit; color: var(--navy); background: var(--snow);
  border: 3px solid var(--field-line); border-radius: var(--r-field); padding: .75rem .9rem; min-height: 52px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(185, 69, 15, .35); }
[aria-invalid="true"] { border-color: #B3261E !important; }
.field-error { color: var(--error); font-weight: 800; font-size: .95rem; margin: var(--s2) 0 0; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--s4); }
.radio-row { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.check { display: flex; align-items: center; gap: var(--s3); font-weight: 600; margin: 0; cursor: pointer; min-height: 44px; }
.check input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; }
.form-send { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s6); }
.form-send .fine-print { margin: 0; }
.form-summary { background: #FDE7E4; color: #7D1912; border-radius: 16px; padding: var(--s4) var(--s5); margin-bottom: var(--s5); font-weight: 600; scroll-margin-top: calc(var(--header-h) + 24px); }
.form-summary ul { margin: var(--s2) 0 0; padding-left: 1.2rem; }
.form-summary a { color: #7D1912; }
.form-done h3 { font-size: 1.6rem; }
.done-recap { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.flash { animation: flash 1.2s steps(12, end); }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 6px rgba(242, 107, 42, .55); } 100% { box-shadow: 0 0 0 0 rgba(242, 107, 42, 0); } }

/* ==========================================================================
   The road: a little van drives down the page as you scroll (wide screens).
   Level 5: it waits until you're past the top picture, so it never sits on the hero van.
   ========================================================================== */
.road {
  position: fixed; right: 20px; top: calc(var(--header-h) + 24px); bottom: 24px; width: 30px; z-index: 40; pointer-events: none; display: none;
  border-radius: 16px;
  background:
    linear-gradient(180deg, transparent 0 12px, rgba(255,255,255,.85) 12px 30px, transparent 30px) 50% 0 / 4px 44px repeat-y,
    radial-gradient(140% 120% at 30% 20%, #8C97AE, #6B7690);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.25), 0 6px 14px rgba(var(--shadow) / .16);
  transition: opacity .5s var(--ease-out), translate .5s var(--ease-out);
}
.road-van { position: absolute; left: 50%; top: 0; width: 64px; height: auto; max-width: none; translate: -50% 0; rotate: 90deg; transition: opacity .4s var(--ease-out); }
.van-on-route .road-van { opacity: 0; }
.in-top .road { opacity: 0; translate: 40px 0; }
@media (min-width: 1360px) { .road { display: block; } }

/* ==========================================================================
   Footer: the night sky every page ends in
   ========================================================================== */
.site-footer {
  position: relative; color: #E8ECF6; padding: calc(var(--s7) + 150px) 0 var(--s6);
  background: var(--night); --edge: var(--night);
}
.site-footer a { color: var(--snow); }
.site-footer a:not(.btn):hover { color: #FFD9BF; }
.site-footer :focus-visible { outline-color: var(--focus-on-dark); }
.footer-gus {
  position: absolute; z-index: 3; top: var(--s5);
  left: max(1.25rem, calc((100vw - var(--container)) / 2));
  display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; gap: var(--s3); pointer-events: none;
}
.fig-footer { width: 112px; }
.fig-footer::before { background: rgba(0, 0, 0, .35); }
.bubble-small { font-size: 1.05rem; padding: var(--s3) var(--s5); margin-top: var(--s2); white-space: nowrap; box-shadow: 0 10px 20px rgba(0,0,0,.25); }
.bubble-small::after { right: auto; left: -18px; bottom: 14px; width: 26px; height: 22px; clip-path: polygon(100% 0, 0 62%, 100% 100%); }
/* five columns: the company, then four groups of links, each with its own heading */
.footer-inner { display: grid; grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); gap: var(--s6) var(--s6); padding-top: var(--s5); }
.brand-footer { color: var(--snow); margin-right: 0; }
.brand-footer:hover { color: var(--snow); }
.brand-footer .brand-name span { color: #C9D2EA; }
.footer-phone { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; margin-top: var(--s4); }
.footer-hours { color: #C9D2EA; margin-bottom: var(--s4); }
.footer-head {
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: .02em; color: #FFC9A3;
  margin: var(--s2) 0 var(--s3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; color: #DCE2F2; }
.footer-col a:hover { color: #FFC9A3; }
.footer-phone, .brand-footer { text-decoration: none; }
/* social icons: round clay buttons */
.social { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s3); }
.social a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  color: var(--snow); background: rgba(255, 255, 255, .09); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), inset 0 -3px 0 rgba(0, 0, 0, .2);
  transition: background-color var(--hover) ease, transform var(--hover) var(--press), color var(--hover) ease;
}
.social a:hover { background: var(--orange-ink); color: var(--snow); transform: scale(1.08); }
.social svg { width: 22px; height: 22px; fill: currentColor; }
.demo-note { margin-top: var(--s7); font-size: var(--fs-small); color: #AEB8D6; }

/* phone: the sticky call bar */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; gap: var(--s3); padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--cream); box-shadow: 0 -4px 0 rgba(185, 143, 105, .25), 0 -6px 20px rgba(var(--shadow) / .14);
  transform: translateY(110%); transition: transform .35s var(--press);
}
.mobile-bar .btn { min-height: 52px; padding-inline: 1rem; }
.mobile-bar .btn-orange { flex: 1.5; }
.mobile-bar .btn-navy { flex: 1; }
.mobile-bar.is-visible { transform: translateY(0); }

/* ==========================================================================
   Press-in: pieces land like clay being placed
   ========================================================================== */
.js .reveal { opacity: 0; transform: scale(.92) translateY(14px); }
.js .reveal.is-in { animation: press-in .7s var(--press) both; }
@keyframes press-in {
  0% { opacity: 0; transform: scale(.92) translateY(14px); }
  60% { opacity: 1; transform: scaleX(1.03) scaleY(.97) translateY(0); }
  100% { opacity: 1; transform: none; }
}
.js .pick.reveal.is-in[aria-pressed="true"] { animation: none; opacity: 1; transform: translateY(4px) scaleY(.98); }
.is-paused, .is-paused * { animation-play-state: paused !important; }
/* a piece that is landing always finishes landing, even if its scene is paused */
.is-paused .reveal.is-in { animation-play-state: running !important; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .header-inner { gap: var(--s4); }
  .site-nav a { padding: 0 var(--s2); }
  .header-actions { gap: var(--s4); }
}
@media (max-width: 1100px) {
  .footer-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); }
  .footer-brand p { margin: 0; }
  .footer-phone { margin-top: 0; }
}
@media (max-width: 1024px) {
  .picker-grid { grid-template-columns: repeat(2, 1fr); }
  .pick { min-height: 160px; }
  .request-inner, .maint-inner, .area-inner, .about-inner { grid-template-columns: 1fr; gap: var(--s6); }
  .request-head { position: static; }
  .crew-row { gap: var(--s5); }
  .review-row { grid-template-columns: 1fr; max-width: 560px; }
  .service { grid-template-columns: 56px minmax(0, 1fr) 210px; gap: var(--s5); }
  .price-steps { grid-template-columns: 1fr; max-width: 620px; }
  .price-step:nth-child(1), .price-step:nth-child(2) { margin-top: 0; }
  .price-step:nth-child(2) { margin-left: 5%; }
  .price-step:nth-child(3) { margin-left: 10%; }
  .maint-pic { max-width: 520px; }
  .about-real { max-width: 640px; }
  .footer-gus { left: auto; right: max(1.25rem, 4vw); flex-direction: row; }
  .bubble-small::after { left: auto; right: -18px; clip-path: polygon(0 0, 100% 62%, 0 100%); }
}
@media (max-width: 900px) {
  :root { --header-h: 70px; }
  .brand { margin-right: 0; }
  .brand-mark { height: 42px; }
  .header-phone, .header-request { display: none; }
  .header-call { display: inline-flex; }
  .menu-toggle { display: grid; }
  .site-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--cream);
    box-shadow: 0 14px 24px rgba(var(--shadow) / .14); padding: var(--s3) var(--s5) var(--s5); display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: flex; min-height: 48px; font-size: 1.1rem; padding: 0 var(--s3); margin-inline: calc(var(--s3) * -1); }
  .site-nav a[aria-current="page"] { text-underline-offset: 6px; }

  /* phone hero: the slab at the top, the house, van and Gus below it, Gus standing above the clay edge */
  .hero { height: auto; min-height: 88svh; align-items: flex-start; padding: var(--s4) 0 clamp(250px, 64vw, 330px); }
  .hero-slab { margin-inline: auto; padding: var(--s5); width: calc(100% - 2rem); }
  .hero-stage { --fx: .72; --fy: .7; }
  .near-pine { display: none; }
  .fig-hero { left: 4%; bottom: calc(var(--edge-h) * .35); width: clamp(118px, 30vw, 180px); }
  .mobile-bar { display: flex; }

  .sky-inner { grid-template-columns: 1fr; gap: var(--s5); }
  .sky-inner .maint-scene { max-width: 300px; }

  /* the route turns vertical: the road runs down the left, the stops beside it */
  .route { --road-x: 26px; }
  .route-road { left: calc(var(--road-x) - 15px); right: auto; top: 0; bottom: 0; width: 30px; height: auto;
    background:
      linear-gradient(180deg, transparent 0 12px, rgba(255,255,255,.85) 12px 34px, transparent 34px) 50% 0 / 4px 46px repeat-y,
      radial-gradient(140% 120% at 30% 20%, #8C97AE, #6B7690); }
  .route-van { left: 50%; top: 0; bottom: auto; width: 92px; translate: -50% 0; rotate: 90deg; transform-origin: 50% 50%; }
  .stops { grid-template-columns: 1fr; gap: var(--s6); padding-left: 84px; }
  .stop { padding-top: 0; }
  .stop-num { left: -84px; top: -8px; width: 52px; height: 52px; z-index: 2; }
  .stop-num::after { display: none; }

  .crew-row { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; gap: var(--s7); }
}
/* the picker on narrower screens: Nina and Spot side by side, the bubble right under them (tail up to Nina) */
@media (max-width: 960px) {
  .picker-stage { --nina-w: clamp(124px, 34vw, 170px); grid-template-columns: minmax(0, 1fr) var(--nina-w) minmax(0, 1fr); row-gap: var(--s4); }
  .picker-bubble { grid-column: 1 / -1; grid-row: 2; justify-self: center; width: 100%; max-width: 32rem; margin: 6px 0 0; }
  .picker-bubble::after { top: -20px; right: auto; left: 50%; width: 30px; height: 24px; translate: -50% 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #FBF5EA; }
}
@media (max-width: 700px) {
  .hero-stage { --fx: .86; --fy: .78; }
}
@media (max-width: 640px) {
  .section { padding: var(--s8) 0; }
  .section-head { margin-bottom: var(--s6); }
  .picker-title { margin-bottom: var(--s5); }
  .bubble-body { padding: var(--s4) var(--s5); }
  .picker-bubble { font-size: 1.05rem; }
  .bubble-cta .btn { flex: 1 1 100%; }
  .band-orange h2, .navy h2 { font-size: clamp(2.1rem, 10vw, 2.7rem); }
  .doodles { display: none; }
  .picker-grid { gap: var(--s3); }
  .pick { min-height: 140px; padding: var(--s5) var(--s3); font-size: 1.08rem; }
  .pick img { width: 58px; height: 58px; }
  .cta-row .btn { flex: 1 1 100%; }
  .btn-big { min-height: 54px; font-size: 1.08rem; }
  .brand { gap: 10px; padding: 4px 0; }
  .brand-name { font-size: 1.18rem; }
  .brand-name span { font-size: .64rem; letter-spacing: .12em; margin-top: 4px; }
  .brand-mark { height: 38px; }
  .header-inner { gap: var(--s3); }
  .header-actions { gap: var(--s3); }

  .page-hero-pic { height: clamp(220px, 58vw, 300px); }
  .page-slab { margin-top: -90px; width: calc(100% + .5rem); padding: var(--s5); }
  .page-hero.sky { padding-top: var(--s6); }

  .price-step:nth-child(2), .price-step:nth-child(3) { margin-left: 0; }
  .price-step { padding: var(--s5); }
  .price { font-size: 1.7rem; }

  .emergency { padding-bottom: 200px; }
  .emergency-scene { top: auto; height: 200px; }
  .night-set { width: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 84%, transparent 100%); }
  .night-pic { right: -12%; }
  .night-van { left: 8%; width: 32%; bottom: 6%; }
  .emergency h2 { max-width: none; }
  .emergency .btn { width: 100%; }

  .service { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s3) var(--s4); }
  .service-icon { width: 44px; height: 44px; }
  .service .svc-photo { grid-column: 2; width: min(100%, 240px); }
  .service-text h3 { font-size: 1.3rem; }
  .town-list li { font-size: 1.3rem; }
  .acc-btn { font-size: 1.1rem; }
  .acc-panel { padding-right: 0; }

  .field-row, .check-grid { grid-template-columns: 1fr; }
  .request-form, .form-done { padding: var(--s5); }
  .review { padding: var(--s5); }
  .crew-clay { left: -1%; }

  .site-footer { padding-bottom: 6.5rem; }
  .fig-footer { width: 96px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s5); }
  .footer-brand { display: block; }
  .footer-brand p { margin: 0 0 var(--s3); }
  .footer-col a { min-height: 44px; }
  .plan-strip { padding: var(--s4) var(--s5); }
}
@media (max-width: 380px) {
  .brand-name span { display: none; }
  .mobile-bar .btn { font-size: .98rem; padding-inline: .7rem; }
}

/* ==========================================================================
   Reduced motion: everything still, all content visible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  .route-van { transform: none !important; }
  .fx-puff { display: none; }
  .flake { top: var(--y, 40%); }
}