/* Applicare design kit, direction A "warm family" (owner pick R66, round-2 picks R70/R71).
   Source of the look: CRM repo docs/audits/v2-booking-at-100/design-direction.md §11-16 and
   its prototypes (prototype-a-warm-family.html, a-city-ludhiana.html, a-service-ac-repair.html).

   Phone first: every rule is written for 375px, then widened at 1000px.

   A page that adopts the kit links ONLY this stylesheet (plus its own page CSS, e.g.
   css/pages/booking-v2.css). Do not combine it with design-system.css, applicare-v2.css or
   homepage-redesign.css: they style the same element names (.btn, .card, h1) differently.
   Scripts: js/a-kit.js (motion, city chip, clips) and js/animations.js (menu + account label;
   the kit deliberately does not bind the menu button, two listeners cancel each other out).

   Legacy hooks kept on purpose (tests/account-flow.mjs reads them, nothing here styles them):
   .header-v2-account, #header-hamburger, #header-mobile-menu, .mobile-bottom-nav, .mobile-nav-item,
   .nav-call/.nav-acct/.nav-book, .footer-v3.

   Porting a prototype page (a-city-ludhiana.html, a-service-ac-repair.html, a-booking.html) onto the kit:
   copy the header, dock and footer from index.html as they are; the clip button is .play (play and pause
   icons), not .play-hint; screen-reader text is .sr-only, not .sr; the steps' connector is .steps::after,
   so drop the <span class="fill">; the open-now line is .open-now; stagger delays live in the motion section
   below, never in style=""; below-the-fold pictures use data-lazy (js/a-kit.js loads them). */

/* ---------- fonts: self-hosted (no Google Fonts request) ----------
   All three files are subset to the characters the site writes (basic Latin, quotes, dashes, the
   ellipsis, the middle dot); anything else falls back to the size-matched fallback below.
   Plus Jakarta Sans: one variable file, weights 200-800.
   Applicare Serif: Source Serif 4 (Adobe, SIL OFL 1.1) with the optical-size axis pinned at 44 and the
   family renamed, as the licence's Reserved Font Name clause asks of a modified version. Two static
   files (600 roman, 500 italic, 29 KB together) replace a 107 KB variable pair.
   Fallback faces are sized to the web fonts' measured widths (canvas measureText over this page's own
   headings and body lines), so the swap does not reflow a headline: Georgia/Arial on Apple and Windows,
   Noto Serif/Roboto on Android. Re-measure if a font file changes. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AE,U+00B7,U+00D7,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2122}
@font-face{font-family:'Applicare Serif';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/applicare-serif-600.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AE,U+00B7,U+00D7,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2122}
@font-face{font-family:'Applicare Serif';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/applicare-serif-500-italic.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AE,U+00B7,U+00D7,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2122}
@font-face{font-family:'Serif Fallback';font-style:normal;font-weight:600;src:local('Georgia Bold'),local('Georgia-Bold');size-adjust:82.5%}
@font-face{font-family:'Serif Fallback';font-style:italic;font-weight:500;src:local('Georgia Italic'),local('Georgia-Italic');size-adjust:88.7%}
@font-face{font-family:'Serif Fallback N';font-style:normal;font-weight:600;src:local('Noto Serif Bold'),local('NotoSerif-Bold');size-adjust:83.7%}
@font-face{font-family:'Serif Fallback N';font-style:italic;font-weight:500;src:local('Noto Serif Italic'),local('NotoSerif-Italic');size-adjust:85.9%}
@font-face{font-family:'Sans Fallback';font-style:normal;font-weight:400;src:local('Arial'),local('ArialMT');size-adjust:105%}
@font-face{font-family:'Sans Fallback';font-style:normal;font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:100.4%}
@font-face{font-family:'Sans Fallback R';font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular');size-adjust:105.6%}
@font-face{font-family:'Sans Fallback R';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold');size-adjust:107.3%}

/* ---------- tokens ----------
   Canon names and values from css/design-system.css (the kit does not load that file, see the header);
   additions for direction A are marked (A). */
:root{
  --brand:#2D8783; --brand-light:#3BA39F; --brand-dark:#1F6461; --brand-deep:#0D4A46;
  --accent:#FF6B35; --accent-dark:#E85D2C; --warning:#F59E0B;
  --ink:#0E2A28; --ink-2:#3F5856; --ink-3:#5E7472;                    /* (A) teal ink, 3 steps (all >= 4.5:1 on paper) */
  --paper:#F3F5F1; --card:#FCFDFB; --tint:#E3EFEC; --plinth:#D9E9E5;  /* (A) sage paper, near-white cards, tile disc */
  --night:#0C3432; --on-night:#EEF5F3; --on-night-2:#B5CCC8;          /* (A) the founder-line panel */
  --on-accent:#1B0A02;                                                 /* (A) label on orange: 6.8:1 (white is 2.8:1) */
  --line:rgba(14,42,40,.10); --line-2:rgba(14,42,40,.16); --line-night:rgba(238,245,243,.18);
  --shadow-1:0 1px 2px rgba(13,74,70,.06),0 4px 12px -4px rgba(13,74,70,.10);
  --shadow-2:0 2px 4px rgba(13,74,70,.05),0 24px 48px -20px rgba(13,74,70,.28);
  --serif:'Applicare Serif','Serif Fallback','Serif Fallback N',Georgia,serif;            /* (A) display serif, headings only */
  --sans:'Plus Jakarta Sans','Sans Fallback','Sans Fallback R',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* type scale, perfect fourth (A) */
  --t-12:.75rem; --t-13:.8125rem; --t-14:.875rem; --t-15:.9375rem; --t-16:1rem; --t-18:1.125rem; --t-21:1.3125rem;
  --t-h2:clamp(1.75rem,1.15rem + 2.5vw,3rem);
  --t-h1:clamp(2rem,1.15rem + 3.9vw,4.4rem);
  /* radius: canon scale */
  --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:20px; --radius-pill:999px;
  /* motion tokens (A, design-direction.md §3) */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --d-press:120ms; --d-ui:200ms; --d-reveal:560ms; --d-enter:760ms;
  --hdr-h:64px; --dock-h:72px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 16px)}
html.motion{scroll-behavior:smooth} /* in-page links (the founder chip, the nav) glide; instant under reduced motion */
body{margin:0;font-family:var(--sans);font-size:var(--t-16);line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img,video,svg{display:block;max-width:100%}
figure,blockquote,p,h1,h2,h3{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
a.sr-only:focus-visible{position:fixed;z-index:70;left:12px;top:12px;width:auto;height:auto;clip:auto;clip-path:none;padding:12px 16px;border-radius:var(--radius-md);background:var(--card);box-shadow:var(--shadow-2);font-weight:700}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nowrap{white-space:nowrap}
.touch-only{display:inline}.mouse-only{display:none}
@media (hover:hover) and (pointer:fine){.touch-only{display:none}.mouse-only{display:inline}}
html:not(.js) [data-needs-js]{display:none} /* built by the kit's scripts: without them there is nothing to show */
.city-only{display:none}.has-city .city-only{display:inline}.has-city .no-city{display:none}
.phone-only{display:inline}.desk-only{display:none}.desk-block{display:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
@media (min-width:1000px){.phone-only{display:none}.desk-only{display:inline}.desk-block{display:block}}

/* ---------- buttons: one filled orange per viewport (design-direction.md §2) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--radius-pill);border:1.5px solid transparent;font:700 var(--t-16)/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform var(--d-press) var(--ease-out),background-color var(--d-ui) ease,color var(--d-ui) ease,border-color var(--d-ui) ease,box-shadow var(--d-ui) ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 20px -8px rgba(232,93,44,.65)}
.btn-primary .i{transition:transform var(--d-ui) var(--ease-out)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-light{background:transparent;color:var(--on-night);border-color:var(--line-night)}
.btn[aria-disabled="true"]{background:var(--tint);color:var(--ink-3);box-shadow:none;pointer-events:none}
/* Book a repair asks for attention now and then (owner R85 #8): a soft light sweeps across the orange every 7 s.
   Motion only (never under reduced motion), transform only, and it rests while hovered or focused. */
.motion .btn-primary,.motion .docked .hdr-cta{position:relative;overflow:hidden;isolation:isolate}
.motion .btn-primary::after,.motion .docked .hdr-cta::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:38%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 100%);transform:translateX(-120%) skewX(-18deg);animation:k-shine 7s var(--ease-out) 2.4s infinite}
.motion .btn-primary:hover::after,.motion .btn-primary:focus-visible::after,.motion .docked .hdr-cta:hover::after{animation-play-state:paused}
.dock-away .dock .btn-primary::after{animation:none}
@keyframes k-shine{0%,78%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--accent-dark)}
  .btn-primary:hover .i{transform:translateX(3px)}
  .btn-ghost:hover{border-color:var(--brand);color:var(--brand-deep)}
  .btn-light:hover{border-color:var(--on-night)}
}
.link{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-weight:700;color:var(--brand-deep);text-decoration:none;white-space:nowrap}
.link .i{width:16px;height:16px;transition:transform var(--d-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.link:hover{text-decoration:underline;text-underline-offset:3px}.link:hover .i{transform:translateX(2px)}}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:30;background:rgba(243,245,241,.9);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color var(--d-ui) ease}
.scrolled .hdr{border-bottom-color:var(--line)}
.hdr-bar{display:flex;align-items:center;gap:8px;height:var(--hdr-h)}
.logo{display:flex;align-items:center;min-height:44px;flex:none}
.logo img{height:28px;width:auto}
.nav{display:none}
.nav a{font-size:var(--t-14);font-weight:500;color:var(--ink-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.nav a[aria-current="page"]{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--brand)}
.mnav a[aria-current="page"]{color:var(--brand-deep)}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:2px;min-width:0}
.hdr-tel,.hdr-acct{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;font-size:var(--t-14);font-weight:600;color:var(--brand-deep);text-decoration:none}
.hdr-tel span,.hdr-acct{display:none}
.hdr-cta{display:none;min-height:42px;padding:0 18px;font-size:var(--t-14);background:transparent;color:var(--brand-deep);border-color:var(--brand);box-shadow:none}
.docked .hdr-cta{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.dock-away .hdr-cta{background:transparent;border-color:var(--brand);color:var(--brand-deep)} /* an in-page orange is on screen */
.menu-btn{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:transparent;color:var(--ink);cursor:pointer}
.menu-btn .i{width:24px;height:24px}
.menu-btn .x,.menu-btn.open .bars{display:none}
.menu-btn.open .x{display:block}
/* phone menu (animations.js toggles .open on #header-mobile-menu) */
.mnav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;padding:8px 20px 20px;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow-1)}
.mnav.open{display:flex}
.mnav a{display:flex;align-items:center;justify-content:space-between;min-height:48px;font-size:var(--t-16);font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mnav a:nth-last-child(2){border-bottom:0}
.mnav a.mnav-book{margin-top:12px;justify-content:center;border:1.5px solid var(--brand);border-radius:var(--radius-pill);color:var(--brand-deep)}
@media (min-width:1000px){
  :root{--hdr-h:68px}
  .hdr-bar{gap:28px}
  .logo img{height:30px}
  .nav{display:flex;gap:26px;margin-left:18px}
  .hdr-right{gap:16px}
  .hdr-tel{color:var(--ink)}
  .hdr-tel span,.hdr-acct{display:inline-flex}
  .hdr-acct{color:var(--ink-2);font-weight:500}
  .hdr-acct .i{width:16px;height:16px}
  .hdr-cta{display:inline-flex}
  .menu-btn,.mnav,.mnav.open{display:none}
}
/* six nav links (Join us, 2026-10-14): a narrow desktop tightens the gaps so no link or the phone number wraps */
.nav a,.hdr-tel span{white-space:nowrap}
@media (min-width:1000px) and (max-width:1199px){
  .hdr-bar{gap:12px}
  .nav{gap:14px;margin-left:4px}
  .hdr-right{gap:6px}
}

/* ---------- city chip + city sheet (js/a-kit.js; hidden without JS) ---------- */
.city-chip{display:none;align-items:center;gap:5px;min-width:0;min-height:44px;max-width:148px;padding:0 6px;border:0;background:transparent;font:600 var(--t-14)/1.2 var(--sans);color:var(--brand-deep);cursor:pointer;border-radius:var(--radius-md)}
.js .city-chip{display:inline-flex}
.city-chip .i{width:16px;height:16px}
.city-chip .chev{width:14px;height:14px;transition:transform var(--d-ui) var(--ease-out)}
.city-chip [data-city-label]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.city-chip:not(.is-set) [data-city-label]{color:var(--ink-2);font-weight:500}
.city-chip[aria-expanded="true"] .chev{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.city-chip:hover{background:var(--tint)}}
@media (min-width:1000px){.city-chip{max-width:200px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--radius-pill);min-height:40px}}

.sheet-scrim{position:fixed;inset:0;z-index:50;background:rgba(6,30,28,.42);opacity:0;transition:opacity 240ms ease}
.sheet{position:fixed;z-index:51;left:0;right:0;bottom:0;max-height:min(86dvh,640px);display:flex;flex-direction:column;background:var(--card);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;box-shadow:0 -20px 48px -20px rgba(6,30,28,.4);
  transform:translateY(100%);transition:transform 320ms var(--ease-drawer);padding-bottom:env(safe-area-inset-bottom)}
.sheet-open .sheet-scrim{opacity:1}
.sheet-open .sheet{transform:none}
.sheet[hidden],.sheet-scrim[hidden]{display:none}
.sheet-grip{width:40px;height:4px;border-radius:2px;background:var(--line-2);margin:10px auto 0}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px 4px 20px}
.sheet-head h2{font:700 var(--t-18)/1.3 var(--sans)}
.sheet-x{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;border-radius:50%;cursor:pointer;color:var(--ink-2)}
.sheet-x .i{width:22px;height:22px}
.sheet-sub{padding:0 20px;font-size:var(--t-13);color:var(--ink-3)}
.sheet-search{position:relative;margin:12px 20px 4px}
.sheet-search .i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
.sheet-search input{width:100%;min-height:48px;padding:0 14px 0 42px;border:1.5px solid var(--line-2);border-radius:var(--radius-lg);background:var(--paper);font:500 var(--t-16) var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none}
.sheet-search input:focus{outline:none;border-color:var(--brand);background:var(--card)}
.sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:8px 20px 20px}
.sheet-body h3{margin:10px 0 8px;font-size:var(--t-12);font-weight:700;letter-spacing:.02em;color:var(--ink-3)}
.city-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.city-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);font:600 var(--t-15)/1.25 var(--sans);color:var(--ink);text-align:left;cursor:pointer;
  transition:border-color var(--d-ui) ease,background-color var(--d-ui) ease,transform var(--d-press) var(--ease-out)}
.city-opt:active{transform:scale(.97)}
.city-opt[aria-current="true"]{border-color:var(--brand);background:var(--tint);color:var(--brand-deep)}
.city-opt .i{width:16px;height:16px;color:var(--brand-deep)}
@media (hover:hover) and (pointer:fine){.city-opt:hover{border-color:var(--brand)}}
.sheet-note{margin:0;padding:14px 16px;border-radius:var(--radius-lg);background:var(--tint);font-size:var(--t-14);color:var(--ink-2)}
.sheet-note .row{display:flex;gap:8px;margin-top:10px}
.sheet-note .btn{min-height:46px;flex:1;font-size:var(--t-14);padding:0 12px}
.sheet-foot{margin:14px 0 0;font-size:var(--t-12);color:var(--ink-3)}
@media (min-width:1000px){
  .sheet{left:auto;right:max(20px,calc((100vw - 1200px) / 2));top:calc(var(--hdr-h) + 8px);bottom:auto;width:420px;max-height:min(70dvh,560px);border-radius:var(--radius-2xl);transform:translateY(-8px);opacity:0;transition:transform 220ms var(--ease-out),opacity 180ms ease;padding-bottom:0}
  .sheet-open .sheet{opacity:1}
  .sheet-grip{display:none}
  .sheet-head{padding-top:14px}
  .sheet-scrim{background:rgba(6,30,28,.18)}
}

/* ---------- type ---------- */
h1,.h1{font-family:var(--serif);font-weight:600;font-size:var(--t-h1);line-height:1.02;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
h1 em,.h2 em{font-style:italic;font-weight:500;color:var(--brand-deep)}
.h2{font-family:var(--serif);font-weight:600;font-size:var(--t-h2);line-height:1.08;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.sub{margin-top:10px;max-width:38rem;font-size:var(--t-15);color:var(--ink-2)}
.lead{font-size:var(--t-15);color:var(--ink-2);max-width:34rem}
.stars{color:var(--warning);letter-spacing:1px}
@media (min-width:1000px){.sub{margin-top:12px;font-size:var(--t-16)}}

/* ---------- founder chip ---------- */
.fchip{display:flex;align-items:center;gap:12px;font-size:var(--t-14);font-weight:500;line-height:1.35;color:var(--ink-2)}
.fchip b{color:var(--ink);font-weight:700}
a.fchip{justify-self:start;min-height:44px;padding-right:8px;text-decoration:none;border-radius:var(--radius-pill);-webkit-tap-highlight-color:transparent} /* R85 #9: opens the family section */
.fchip-go{width:16px;height:16px;flex:none;color:var(--brand);transition:transform var(--d-ui) var(--ease-out)}
a.fchip:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
@media (hover:hover) and (pointer:fine){a.fchip:hover b{text-decoration:underline;text-underline-offset:3px}a.fchip:hover .fchip-go{transform:translateX(3px)}}
.fchip img,.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--accent)}

/* ---------- hero: one DOM, two compositions ----------
   phone: chip / headline + real clip (right) / review card bridging them / lead / picker
   desktop: copy left, clip stack + review right, picker bar across the bottom */
.hero{position:relative;overflow:hidden;padding:14px 0 24px}
.hero::before{content:"";position:absolute;right:-240px;top:-200px;width:620px;height:620px;border-radius:50%;background:radial-gradient(closest-side,rgba(45,135,131,.18),rgba(45,135,131,0));pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 118px;column-gap:14px;align-items:start;
  grid-template-areas:"chip chip" "h1 clip" "rev clip" "lead lead" "picker picker" "cta cta" "proof proof"}
.hero .fchip,.hero .pchip{grid-area:chip;margin-bottom:14px}
.hero h1{grid-area:h1;min-height:3.06em} /* phone: the 3 lines the web font needs are reserved, so the swap cannot push the hero down */
.hero .clip{grid-area:clip}
.hero .rev-float{grid-area:rev}
.hero .lead{grid-area:lead;margin-top:16px}
.hero .picker{grid-area:picker}
.hero .cta-row{grid-area:cta}
.hero .proof{grid-area:proof}
.hero .clip-back{display:none}
.hero .facts{grid-area:rev}
.lead-after .hero-grid{grid-template-areas:"chip chip" "h1 clip" "rev clip" "picker picker" "lead lead" "cta cta" "proof proof"}
.hero.lead-after .lead{font-size:var(--t-13);color:var(--ink-3)}

/* real job clip card */
.clip{position:relative;overflow:hidden;aspect-ratio:9/16;margin-top:2px;border:3px solid var(--card);border-radius:18px;background:var(--brand-deep);box-shadow:var(--shadow-2);transform:rotate(2.5deg)}
.clip img,.clip video,.frame img,.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clip video,.frame video{opacity:0;transition:opacity 400ms ease}
.clip video.playing,.frame video.playing{opacity:1}
/* the hero clip's sound button (R85 #7): a round button on phones, a labelled chip on desktop; off until tapped */
.clip-snd{position:absolute;right:8px;bottom:8px;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-pill);background:rgba(6,30,28,.6);color:#F4F8F7;font:700 var(--t-13)/1 var(--sans);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.clip-snd[hidden]{display:none}
.clip-snd svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.clip-snd span,.clip-snd .on,.clip-snd[aria-pressed="true"] .off{display:none}
.clip-snd[aria-pressed="true"] .on{display:block}
.motion .clip.is-playing .clip-snd[aria-pressed="false"]{animation:k-snd-hint 2.4s var(--ease-out) 1.2s 2}
@keyframes k-snd-hint{0%,100%{box-shadow:0 0 0 0 rgba(244,248,247,0)}40%{box-shadow:0 0 0 7px rgba(244,248,247,.28)}}
@media (min-width:1000px){.clip-snd{top:66px;right:12px;bottom:auto;padding:0 16px 0 12px} /* under the caption: the review card covers the bottom corner */
  .clip-snd span{display:inline}.clip-snd[aria-pressed="true"] span{display:none}.clip-snd[aria-pressed="true"]{padding:0}}
.clip-cap{position:absolute;inset:0 0 auto 0;padding:9px 10px 30px;color:#F4F8F7;background:linear-gradient(to bottom,rgba(6,30,28,.82),rgba(6,30,28,0));font-size:var(--t-12);line-height:1.3;pointer-events:none}
.clip-cap b{display:block;font-size:var(--t-12)}
.clip-cap>span{opacity:.9}
.play{position:absolute;left:8px;bottom:8px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:rgba(6,30,28,.55);color:#F4F8F7;cursor:pointer;transition:background-color var(--d-ui) ease}
.play::before{content:"";position:absolute;inset:-6px} /* 44px tap area */
.play svg{width:12px;height:12px;fill:currentColor;stroke:none}
.play .pz,.is-playing .play .pl{display:none}
.is-playing .play .pz{display:block}
.is-playing .play{background:rgba(6,30,28,.32)}

/* review card */
.rev-float{position:relative;z-index:2;align-self:end;margin:10px -30px 0 0;padding:11px 12px 10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-2)}
.rev-float p{margin:4px 0 6px;font-size:var(--t-13);line-height:1.45;color:var(--ink)}
.rev-float small{display:block;font-size:var(--t-12);line-height:1.35;color:var(--ink-3)}
.rev-float small a{color:var(--ink-2)}
.rev-float .stars{font-size:12px}
.rev-float .more{display:none}

/* picker: the booking entry */
.picker{margin-top:18px;padding:14px 10px 8px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-2xl);box-shadow:var(--shadow-1)}
.picker-head{display:flex;flex-direction:column;gap:4px;padding:0 4px 10px}
.picker-head h2{font-size:var(--t-21);line-height:1.2;letter-spacing:-.01em}
.picker-head p{font-size:var(--t-14);line-height:1.45;color:var(--ink-3)}
.picker-head .price-live{color:var(--ink);font-weight:600}
@media (max-width:999px){.has-city .picker-head p{min-height:2.9em}} /* the city's price line needs two lines */
.open-now{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-13);font-weight:600;color:var(--brand-deep);white-space:nowrap} /* not .open: js/animations.js toggles .open on the menu */
.open-now .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
.motion .open-now.is-open .dot{animation:pulse 2.4s ease-out infinite}
.open-now.is-closed{color:var(--ink-3)}
.open-now.is-closed .dot{background:var(--ink-3)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:80px;padding:8px 3px 7px;border:1px solid transparent;border-radius:var(--radius-lg);background:var(--paper);text-align:center;text-decoration:none;font-size:var(--t-13);font-weight:600;line-height:1.2;color:var(--ink);
  transition:transform var(--d-press) var(--ease-out),border-color var(--d-ui) ease,background-color var(--d-ui) ease,box-shadow var(--d-ui) ease}
.tile .disc{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#E6F1EE 0,var(--plinth) 70%);box-shadow:inset 0 -2px 0 rgba(13,74,70,.06)}
.tile img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(13,74,70,.28)) drop-shadow(0 0 .6px rgba(13,74,70,.5));transition:transform 320ms var(--ease-out)}
.tile:active{transform:scale(.95);box-shadow:0 0 0 3px rgba(45,135,131,.35);transition-duration:60ms}
.tile[hidden]{display:none}
.tiles.six{grid-template-columns:repeat(3,1fr)}
.tile.more{display:none;justify-content:center;background:transparent;border:1px dashed var(--line-2)}
.tile.more b{font-size:var(--t-21);line-height:1;color:var(--brand-deep)}
@media (hover:hover) and (pointer:fine){
  .tile:hover{background:var(--card);border-color:var(--brand)}
  .tile:hover img{transform:translateY(-3px) scale(1.06)}
}
.picker-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 4px 0;font-size:var(--t-13);line-height:1.35;color:var(--ink-3)}
.picker-foot b{color:var(--ink)}
.cta-row{display:none;gap:10px;margin-top:16px}
.proof{display:none;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:14px;font-size:var(--t-14);color:var(--ink-3)}
.proof a{font-weight:700;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}

@media (min-width:1000px){
  .hero{padding:40px 0 56px}
  .hero::before{right:-120px;top:-160px;width:900px;height:900px;background:radial-gradient(closest-side,rgba(45,135,131,.16),rgba(45,135,131,0))}
  .hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-content:start;
    grid-template-areas:"chip media" "h1 media" "lead media" "cta media" "proof media" "picker picker"}
  .hero h1{min-height:0}
  .lead-after .hero-grid{grid-template-areas:"chip media" "h1 media" "lead media" "cta media" "proof media" "picker picker"}
  .hero .fchip,.hero .pchip{align-self:end;margin:32px 0 14px}
  .hero.lead-after .lead{font-size:var(--t-16);color:var(--ink-2)}
  .hero .facts{grid-area:proof;margin-top:22px;font-size:var(--t-14);gap:10px}
  .hero .lead{margin-top:20px;font-size:var(--t-18)}
  .hero .clip,.hero .clip-back,.hero .rev-float{grid-area:media}
  .hero .clip{justify-self:end;width:292px;margin-right:96px;transform:none;border:0;border-radius:22px;z-index:1}
  .hero .clip-back{display:block;justify-self:end;align-self:start;width:220px;margin:64px -8px 0 0;transform:rotate(5deg);opacity:.92;border:0;z-index:0}
  .clip-cap{padding:14px 16px 48px;font-size:var(--t-12)}
  .clip-cap b{font-size:var(--t-14)}
  .play{left:14px;bottom:14px;width:36px;height:36px}
  .hero .rev-float{justify-self:start;align-self:end;width:300px;margin:0 0 6px -28px;padding:16px 18px}
  .rev-float p{margin:6px 0 10px;font-size:var(--t-14)}
  .rev-float small{font-size:var(--t-12)}
  .rev-float .more{display:inline}
  .rev-float .stars{font-size:inherit}
  .cta-row{display:flex;margin-top:28px}
  .cta-row .btn{min-height:56px;padding:0 28px;font-size:var(--t-18)}
  .proof{display:flex;margin-top:18px}
  .picker{margin-top:40px;display:grid;grid-template-columns:230px 1fr;align-items:center;gap:24px;padding:18px 18px 18px 26px}
  .picker-head{padding:0}
  .picker-head p{font-size:var(--t-14)}
  .tiles{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
  .tile{min-height:100px;padding:12px 4px 10px;gap:6px}
  .tile .disc{width:52px;height:52px}
  .tile img{width:42px;height:42px}
  .tile.more{display:flex}
  .picker-foot{display:none}
}

/* ---------- sections ---------- */
.band{padding:56px 0}
.band-card{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.head{margin-bottom:22px}
@media (min-width:1000px){.band{padding:104px 0}.head{margin-bottom:40px}}

/* rails: phone swipes with a peeking card and dots; desktop is a grid */
.rail,.revs{display:grid;grid-auto-flow:column;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 8px;scroll-padding-inline:20px;scrollbar-width:none;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar,.revs::-webkit-scrollbar{display:none}
.rail{grid-auto-columns:70%}
.revs{grid-auto-columns:84%;gap:12px;padding-top:2px;padding-bottom:6px}
.rail>*,.revs>*{scroll-snap-align:start}
.dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
.dots i{width:6px;height:6px;border-radius:3px;background:var(--line-2);transition:width 260ms var(--ease-out),background-color var(--d-ui) ease}
.dots i.on{width:18px;background:var(--brand)}
@media (min-width:1000px){
  .rail,.revs{grid-auto-flow:unset;overflow:visible;margin:0;padding:0}
  .rail{grid-template-columns:repeat(4,1fr);gap:22px}
  .revs{grid-template-columns:1fr 1fr}
  .dots{display:none}
}

/* real job clips */
.frame{position:relative;overflow:hidden;aspect-ratio:9/16;border-radius:18px;background:var(--brand-deep);box-shadow:var(--shadow-1)}
.frame .play{left:12px;top:12px;bottom:auto}
.rcard figcaption{padding:12px 2px 0}
.rcard figcaption b{display:block;font-size:var(--t-16)}
.rcard figcaption span{display:block;margin-top:4px;font-size:var(--t-14);line-height:1.45;color:var(--ink-2)}

/* what we fix: all 16 appliances in their in-home scenes (square crops; no people, no logos; never captioned as a job).
   Phone: a two-row swipe rail, the next column peeking, a bar under it for how far along; tablet: four across;
   desktop: two rows of eight. Each card books its appliance; the line under the name is the city's live price. */
.fix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} /* phone: all 16 at once, three across (R85 #6) */
.fcard{display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);color:inherit;text-decoration:none;transition:transform var(--d-press) var(--ease-out),box-shadow var(--d-ui) ease,border-color var(--d-ui) ease}
.fcard:active{transform:scale(.98)}
.fcard[hidden]{display:none}
.fcard .ph-img{aspect-ratio:1;overflow:hidden;background:#EAE3D6}
.fcard .ph-img img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
.fcard .ph-img.lart{display:grid;place-items:center;background:var(--tint)}
.fcard .ph-img.lart .la{width:88px;height:88px;color:var(--brand-deep)}
.fcard .body{flex:1;padding:10px 12px 12px}
.fcard b{display:block;font-size:var(--t-14);line-height:1.25}
.fcard .go{display:flex;align-items:flex-start;gap:4px;margin-top:4px;font-size:var(--t-12);font-weight:600;line-height:1.35;color:var(--brand-deep)}
.fcard .go .i{display:none;width:13px;height:13px;margin-top:2px}
.fcard .go .amt{font-weight:800;color:var(--ink)}
/* not offered online in the chosen city: greyed, and the card calls (never hidden, never counted: D5) */
.fcard.is-off .ph-img img,.fcard.is-call .ph-img img{filter:grayscale(1) contrast(.92);opacity:.6}
.fcard.is-off b,.fcard.is-call b{color:var(--ink-2)}
.fcard.is-off .go,.fcard.is-call .go{color:var(--ink-3)}
.k-fix-city{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px;padding:12px 12px 12px 14px;border-radius:var(--radius-lg);background:var(--tint)}
.k-fix-city>.i{color:var(--brand);flex:none}
.k-fix-city p{flex:1 1 12rem;margin:0;font-size:var(--t-14);color:var(--ink-2)}
.k-fix-city b{color:var(--ink)}
.k-fix-city .btn{min-height:44px;padding:0 18px;font-size:var(--t-14);background:var(--card)}
.motion .k-fix-city b{display:inline-block;animation:fade 420ms var(--ease-out) both}
@media (hover:hover) and (pointer:fine){.fcard:hover{box-shadow:var(--shadow-2);border-color:var(--line-2)}.fcard:hover .ph-img img{transform:scale(1.05)}}
.k-railbar{position:relative;width:88px;height:3px;margin:10px auto 0;border-radius:2px;background:var(--line-2);overflow:hidden}
.k-railbar i{position:absolute;left:0;top:0;bottom:0;width:30%;border-radius:2px;background:var(--brand);transform-origin:left}
@media (max-width:639px){.fcard .ph-img{aspect-ratio:4/3}.fcard .body{padding:8px 9px 10px}.fcard b{font-size:var(--t-14)}.fcard .go{font-size:var(--t-13)}}
@media (min-width:640px){
  .fix{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .fcard b{font-size:var(--t-15)}
  .fcard .go .i{display:block}
  .k-fix-city{display:inline-flex;max-width:100%}
}
@media (min-width:1000px){
  .fix{grid-template-columns:repeat(8,minmax(0,1fr));gap:18px}
  .fcard .body{padding:12px 12px 14px}
}
.more-fix{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.more-fix span{font-size:var(--t-14);color:var(--ink-3);margin-right:4px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--radius-pill);background:var(--tint);color:var(--brand-deep);font-size:var(--t-14);font-weight:600;text-decoration:none;transition:background-color var(--d-ui) ease,color var(--d-ui) ease}
@media (hover:hover) and (pointer:fine){.chip:hover{background:var(--brand-deep);color:var(--on-night)}}

/* how the bill works: steps with a connector that draws */
.steps{position:relative;display:grid;gap:18px;margin:0;padding:0;list-style:none}
.steps::before,.steps::after{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--line-2)}
.steps::after{background:var(--brand);transform-origin:top}
.step{position:relative;display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start;align-content:start}
.step .n{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--card);border:2px solid var(--line-2);color:var(--brand-deep);font:800 var(--t-16)/1 var(--sans);font-variant-numeric:tabular-nums;
  transition:background-color 300ms ease,color 300ms ease,border-color 300ms ease;transition-delay:calc(var(--d,0) * 1ms)}
.step.lit .n{background:var(--brand-deep);border-color:var(--brand-deep);color:var(--on-night)}
.step h3{margin:10px 0 4px;font-size:var(--t-16);line-height:1.3}
.step p{font-size:var(--t-14);color:var(--ink-2)}
.step p b{color:var(--ink)}
.note{display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:14px 16px;border-radius:var(--radius-lg);background:var(--tint);font-size:var(--t-14);color:var(--ink-2)}
.note .la{width:28px;height:28px;flex:none;color:var(--brand-deep)}
.note b{color:var(--ink)}
@media (min-width:1000px){
  .steps.row{grid-template-columns:repeat(var(--cols,3),1fr);gap:28px}
  .steps.row::before,.steps.row::after{left:24px;right:calc(100% / var(--cols,3) - 24px);top:23px;bottom:auto;width:auto;height:2px}
  .steps.row::after{transform-origin:left}
  .steps.row .step{grid-template-columns:1fr;gap:6px}
  .steps.row .step h3{margin-top:14px}
  .note{margin-top:36px;max-width:760px}
}

/* founders + the founder-line panel (A's signature moment) */
.family-grid{display:grid;gap:22px}
.portrait{position:relative;overflow:hidden;aspect-ratio:5/4;border-radius:var(--radius-2xl);background:#EFE3CF;box-shadow:var(--shadow-1)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.portrait figcaption{position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:var(--radius-md);background:rgba(252,253,251,.92);font-size:var(--t-12);font-weight:600;color:var(--ink-2)}
.fline{position:relative;isolation:isolate;overflow:hidden;margin-top:24px;padding:26px 22px 22px;border-radius:var(--radius-2xl);background:var(--night);color:var(--on-night);box-shadow:var(--shadow-2)}
.fline .pattern{position:absolute;inset:0;z-index:-1;width:100%;height:100%;opacity:.09}
.fline::after{content:"";position:absolute;z-index:-1;right:-160px;top:-180px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(59,163,159,.32),rgba(59,163,159,0))}
.fline :focus-visible{outline-color:var(--on-night)}
.fline .qmark{display:block;height:34px;font-family:var(--serif);font-size:74px;line-height:.62;color:var(--accent);transform-origin:left bottom}
.fline blockquote{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.5rem,1.05rem + 1.9vw,2.35rem);line-height:1.22;letter-spacing:-.01em;color:#F4F8F7;text-wrap:pretty}
.fline .by{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:var(--t-14);color:var(--on-night-2)}
.fline .by img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--night),0 0 0 3.5px var(--accent)}
.fline .by b{display:block;color:var(--on-night)}
.fline .sig{display:block;width:112px;height:2px;margin-top:16px;border-radius:2px;background:var(--accent);transform-origin:left}
.door{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-night);font-size:var(--t-14);color:var(--on-night-2)}
.door .row{display:flex;gap:8px;width:100%;margin-top:6px}
.door .btn{flex:1;min-height:48px;padding:0 14px;font-size:var(--t-14)}
.others{margin-top:28px}
.others h3{margin-bottom:12px;font-size:var(--t-14);font-weight:700;color:var(--ink-2)}
.rev{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);padding:16px 18px}
.rev p{margin:6px 0 10px;font-size:var(--t-14);line-height:1.55}
.rev small{font-size:var(--t-12);color:var(--ink-3)}
.rev small a{color:var(--ink-2)}
.rating-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:14px;font-size:var(--t-14);color:var(--ink-2)}
.rating-line strong{font-size:var(--t-21);color:var(--ink);font-variant-numeric:tabular-nums}
@media (min-width:1000px){
  .family-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
  .portrait{position:sticky;top:96px;aspect-ratio:4/5}
  .fline{padding:40px 44px 34px}
  .door .row{width:auto;margin-top:0}
  .door .btn{flex:none}
}

/* the FAQ's and the map's small print */
.cities-note{margin-top:16px;font-size:var(--t-14);color:var(--ink-3)}
.cities-note a{color:var(--brand-deep);font-weight:700}

/* final band: the dock slides away while it is on screen, so one orange shows */
.final{background:var(--card);border-top:1px solid var(--line)}
.final .inner{display:grid;gap:18px;align-items:center}
.final .h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)}
.final .sub{margin-top:8px}
.final .row{display:flex;flex-wrap:wrap;gap:10px}
.final .btn{min-height:56px}
@media (max-width:999px){.final .btn{flex:1 1 100%}}
@media (min-width:1000px){.final .inner{grid-template-columns:1fr auto;gap:40px}}

/* ---------- shared blocks for the city, service and booking pages (waves D2-D4; see the prototypes) ---------- */
.pchip{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-14);font-weight:600;color:var(--brand-deep)}
.pchip .la{width:22px;height:22px;color:var(--brand)}
.facts{display:grid;gap:8px;align-self:end;margin:12px 0 0;padding:0;list-style:none;font-size:var(--t-13);font-weight:600;color:var(--ink-2)}
.facts li{display:flex;align-items:center;gap:8px;line-height:1.3}
.facts .la{width:22px;height:22px;flex:none;color:var(--brand)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);padding:18px}
.grid2{display:grid;gap:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.chips li{padding:8px 12px;border-radius:var(--radius-pill);background:var(--tint);color:var(--brand-deep);font-size:var(--t-13);font-weight:600}
.prices{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.prices li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);font-size:var(--t-14)}
.prices li span:first-child{font-weight:600}
.prices small{display:block;margin-top:2px;font-size:var(--t-12);font-weight:500;color:var(--ink-3)}
.live{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)} /* a price from the catalogue API; never animated */
.faq{display:grid;gap:10px}
.faq details{padding:0 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;list-style:none;cursor:pointer;font-size:var(--t-15);font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 22px/1 var(--sans);color:var(--brand);transition:transform var(--d-ui) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 16px;font-size:var(--t-14);color:var(--ink-2)}
.motion .faq details[open] p{animation:fade 240ms ease-out both}
@media (min-width:1000px){.grid2{grid-template-columns:1fr 1fr;gap:22px}.tiles.six{grid-template-columns:none}}

/* ---------- footer ---------- */
.foot{padding:32px 0 calc(var(--dock-h) + 28px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line)}
.foot-line{display:flex;gap:12px;align-items:flex-start;padding-bottom:20px;border-bottom:1px solid var(--line)}
.foot-line img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.foot-line blockquote{font-family:var(--serif);font-style:italic;font-weight:500;font-size:var(--t-18);line-height:1.35;color:var(--brand-deep)}
.foot-line small{display:block;margin-top:8px;font-size:var(--t-13);color:var(--ink-2)}
.foot-door{font-size:var(--t-13);color:var(--ink-2)}
.foot-door a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--ink)}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px;margin:24px 0}
.foot-cols h2{margin-bottom:6px;font:700 var(--t-12)/1.3 var(--sans);letter-spacing:.02em;color:var(--ink-3)}
.foot-cols ul{margin:0;padding:0;list-style:none}
.foot-cols a{display:inline-flex;align-items:center;min-height:36px;font-size:var(--t-14);color:var(--ink-2);text-decoration:none}
.foot-cols a[href^="tel:"],.foot-cols a[href*="wa.me/"]{min-height:44px;font-weight:700;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.foot-cols a:hover{color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px}}
.social{display:flex;flex-wrap:wrap;gap:0 4px;margin:-8px 0 16px -12px}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink-2)}
.social svg{width:18px;height:18px;fill:currentColor}
.fine{padding-top:18px;border-top:1px solid var(--line);font-size:var(--t-13);line-height:1.6;color:var(--ink-3)}
.fine p+p{margin-top:6px}
.fine a{color:inherit}
@media (min-width:1000px){
  .foot{padding:48px 0 40px}
  .foot-line>div{max-width:760px}
  .foot-cols{grid-template-columns:repeat(4,1fr);gap:32px;margin:32px 0}
}

/* ---------- phone dock: the one orange CTA on phones, present from the first paint ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(252,253,251,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  transition:transform 360ms var(--ease-drawer),box-shadow var(--d-ui) ease}
.scrolled .dock{box-shadow:0 -10px 24px -16px rgba(13,74,70,.35)}
.dock-away .dock{transform:translateY(110%)}
.dock .btn{min-height:50px}
.dock .sq{width:50px;padding:0;border-color:var(--line-2);color:var(--brand-deep)}
/* Call · Reviews · Book repair (owner 2026-10-14): Book stays the one orange but no longer takes the whole row */
.dock .nav-acct{flex:none}
.dock .nav-acct .i{width:20px;height:20px}
.dock .btn-primary{flex:1 1 0;min-width:0;padding:0 10px}
@media (max-width:359px){.dock .btn-primary{font-size:var(--t-14)}}
/* Book repair in the dock: the kit's own light sweep (k-shine above) on a 5.5 s cycle (78% to 100% = 1.2 s). Motion
   only, transform and opacity only, rests while the dock is away; hidden (not paused, so it never freezes mid-button)
   while the button is pressed, hovered or focused. Nothing under reduced motion. */
.motion .dock .btn-primary::after{animation-duration:5.5s;animation-delay:0s}
.motion .dock .btn-primary:is(:hover,:focus-visible,:active)::after{animation-play-state:running;opacity:0}
@media (min-width:1000px){.dock{display:none}}

/* ---------- line art: 16 glyphs, one stroke weight, drawn in one stroke on reveal ---------- */
.la{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.motion .la-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1000ms var(--ease-io);transition-delay:calc(var(--d,0) * 1ms)}
.motion .in .la-draw,.motion .la-draw.in{stroke-dashoffset:0}

/* ---------- motion ----------
   .motion = level 5 (owner pick R70) · .rm = reduced motion (short fades) · no class = no JS, all visible.
   The H1, picker, tiles, Book button and hero clip are painted in the first frame: they settle 10px,
   transform only, opacity stays 1. Prices, ratings and counts never move. */
@keyframes rise{from{opacity:0;transform:translate3d(0,14px,0)}}
@keyframes settle{from{transform:translate3d(0,10px,0)}}
@keyframes clip-in{from{transform:rotate(6deg) translate3d(14px,18px,0) scale(.94)}}
@keyframes clip-in-d{from{transform:translate3d(0,24px,0) scale(.97)}}
@keyframes back-in{from{opacity:0;transform:rotate(1deg) translate3d(-30px,10px,0)}}
@keyframes rev-in{from{opacity:0;transform:translate3d(-14px,10px,0)}}
@keyframes fade{from{opacity:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(45,135,131,.45)}70%,100%{box-shadow:0 0 0 8px rgba(45,135,131,0)}}
@keyframes q-in{from{opacity:0;transform:scale(.8) translate3d(0,8px,0)}}
/* choreography: each element's delay (ms) lives here, not in the markup */
.hero h1{--d:40}.hero .clip{--d:100}.hero .lead{--d:160}.hero .picker{--d:180}.hero .cta-row{--d:240}
.hero .clip-back{--d:260}.hero .proof{--d:320}.hero .rev-float{--d:420}
.tiles>:nth-child(1){--d:200}.tiles>:nth-child(2){--d:230}.tiles>:nth-child(3){--d:260}.tiles>:nth-child(4){--d:290}.tiles>:nth-child(5){--d:320}
.tiles>:nth-child(6){--d:350}.tiles>:nth-child(7){--d:380}.tiles>:nth-child(8){--d:410}.tiles>:nth-child(9){--d:440}
[data-rail]>:nth-child(2){--d:60}[data-rail]>:nth-child(3){--d:120}[data-rail]>:nth-child(4){--d:180}[data-rail]>:nth-child(5){--d:240}[data-rail]>:nth-child(6){--d:300}
.head+[data-reveal],[data-reveal]+[data-reveal].sub{--d:80}
.steps .step:nth-child(1){--d:250}.steps .step:nth-child(2){--d:650}.steps .step:nth-child(3){--d:1050}
.fix>:nth-child(2){--d:30}.fix>:nth-child(3){--d:60}.fix>:nth-child(4){--d:90}.fix>:nth-child(5){--d:120}.fix>:nth-child(6){--d:150}.fix>:nth-child(7){--d:180}.fix>:nth-child(8){--d:210}
.fix>:nth-child(9){--d:240}.fix>:nth-child(10){--d:270}.fix>:nth-child(11){--d:300}.fix>:nth-child(12){--d:330}.fix>:nth-child(13){--d:360}.fix>:nth-child(14){--d:390}.fix>:nth-child(15){--d:420}.fix>:nth-child(16){--d:450}
.motion [data-enter]{animation:rise var(--d-enter) var(--ease-expo) both;animation-delay:calc(var(--d,0) * 1ms)}
.motion h1[data-enter],.motion .picker[data-enter],.motion .tile[data-enter],.motion .cta-row[data-enter]{animation-name:settle}
.motion .hero .clip[data-enter]{animation-name:clip-in;animation-duration:1000ms}
.motion .hero .clip-back[data-enter]{animation-name:back-in;animation-duration:1000ms}
.motion .hero .rev-float[data-enter]{animation-name:rev-in}
@media (min-width:1000px){.motion .hero .clip:not(.clip-back)[data-enter]{animation-name:clip-in-d}}
.rm [data-enter]{animation:fade 240ms ease-out both}
.rm h1[data-enter],.rm .picker[data-enter],.rm .tile[data-enter],.rm .cta-row[data-enter],.rm .hero .clip[data-enter]{animation:none}
.motion [data-reveal]{opacity:0;transform:translate3d(0,20px,0);transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-expo);transition-delay:calc(var(--d,0) * 1ms)}
.motion [data-reveal].in{opacity:1;transform:none}
.rm [data-reveal]{opacity:0;transition:opacity 240ms ease-out}
.rm [data-reveal].in{opacity:1}
.motion .fline .sig{transform:scaleX(0);transition:transform 900ms var(--ease-io) 350ms}
.motion .fline.in .sig{transform:none}
.motion .fline .qmark{opacity:0}
.motion .fline.in .qmark{opacity:1;animation:q-in 700ms var(--ease-expo) 120ms both}
.motion .steps::after{transform:scaleY(0);transition:transform 1100ms var(--ease-io) 200ms}
.motion .steps.in::after{transform:none}
@media (min-width:1000px){.motion .steps.row::after{transform:scaleX(0)}.motion .steps.row.in::after{transform:none}}
.rm .steps .step .n{transition:none}
.rm .sheet,.rm .sheet-scrim{transition:opacity 160ms ease}
.rm .sheet{transform:none;opacity:0}
.rm .sheet-open .sheet{opacity:1}