/* City, service and pricing pages (generated by tools/pages/build.mjs) on design kit A.
   Loads after css/a-kit.css (chrome:head), css/kit-media.css and css/kit-sections.css.
   Kit tokens only: no raw colours, no new fonts. Page classes start with cs-; the call-back form keeps the class
   names js/city-callback.js and tests/city-callback.mjs rely on. Phone first (375px, safe down to 320px), widened
   at 640px and 1000px, where every band composes side by side. Motion only through the kit's data-enter and
   data-reveal (transform and opacity, gentler under reduced motion). Prices use tabular numerals and never move.

   Runtime hooks (js/pages/city-service.js follows this markup: it prices rows in place, so nothing jumps):
   - every page: <script type="application/json" id="cs-data"> first in <main> (tiles, cats, jobTypes, phone, tel);
     main[data-page="city|service|pricing"]
   - city: main[data-city][data-city-slug][data-city-id][data-state="open|closed"][data-lat][data-lng] (+ data-page-city
     and -id when built open) · [data-open-state] picker (nav.tiles empty when built closed) · [data-open-only] ·
     [data-closed-state] call-back card #callback with ul[data-nearest] (open pages: inert in template#cs-closed-tpl) ·
     [data-state-slot] (hero, where the runtime puts the card or a picker) · [data-cs-status] (sr-only live region) · ul[data-prices] >
     li[data-cat][data-api-name][data-cat-id] > .cs-prow (a, or span when built closed) > .cs-pname > .cs-pline gets
     the live "from" prices (span.cs-from > b.live, span.cs-sep between); li[hidden] = the city cannot book it (owner
     2026-10-14: not shown at all)
   - service: main[data-cat][data-api-name][data-cat-id] (+ data-city, data-page-city/-id on combo pages) ·
     h1.cs-h1(.is-city) [data-cs-city] · [data-inspection] · .cs-types a[data-job-type] (hidden per city) ·
     [data-price-table] > p.cs-pnote(.is-off)? + div.card.cs-pgroup[data-job-type] > h3 + ul.cs-prows > li > a >
     .cs-rname + .cs-pval (b.live) + svg · #repairs (stories rail) and #tips (care tips), trimmed to the appliance
   - pricing: button[data-pricing-city] > [data-pricing-city-label] · [data-pricing-note] · [data-pricing-sub] ·
     [data-pricing-list] > article.cs-pcard(.is-off)[data-cat][data-api-name][data-cat-id] > ul.cs-prows[data-rows]
     (rows rewritten: li > a > .cs-rname + .cs-pval "from" b.live + svg) + .cs-pcard-f (its Book link)
   - built fallback text: .cs-fb (small, grey) or "Price shown before you book"; live prices are b.live. */

main [hidden]{display:none !important} /* the state toggles: nothing below may re-show a hidden block */
main:not([data-state="closed"]) .cs-when-closed{display:none} /* a city page's closed-only words follow main[data-state] */
[data-state-slot]{display:contents} /* what the runtime puts here (the call-back card, a picker) sits in the hero grid itself */
/* A tile the kit hides after the first paint (the live list disagrees with coverage.json) keeps its cell: the other
   tiles stay where they were painted (no layout shift), and the rows never stretch into the height the kit pins. */
main .picker .tile[hidden]{display:flex !important;visibility:hidden}
.picker .tiles{align-content:start}

/* ---------- shared ---------- */
.cs-main{min-width:0}
.cs-small{margin-top:12px;font-size:var(--t-13);line-height:1.5;color:var(--ink-3)}
.cs-small a{font-weight:700;color:var(--brand-deep)}
.cs-notes{display:grid;gap:10px;margin-top:20px}
.cs-notes .note{margin:0}
.cs-fb{display:inline-block;font-size:var(--t-12);font-weight:600;line-height:1.35;color:var(--ink-3)}
.live{font-variant-numeric:tabular-nums}
.band-card .card{background:var(--paper)} /* a card on a card-coloured band keeps its edge */
.cs-pic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 50% 38%,var(--tint) 0,var(--plinth) 72%)}
.cs-pic img{width:32px;height:32px;object-fit:contain}
.cs-pic .la{width:24px;height:24px;color:var(--brand-deep)}
/* the runtime's note over a price table: "Prices vary by city" / "Not open for online booking here yet" */
.cs-pnote{grid-column:1/-1;margin:0;padding:12px 14px;border-radius:var(--radius-lg);background:var(--tint);font-size:var(--t-14);line-height:1.45;color:var(--ink-2)}
.cs-pnote a{font-weight:700;color:var(--brand-deep);white-space:nowrap}
@media (min-width:1000px){
  .cs-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:64px;align-items:start}
  .cs-split>.head{position:sticky;top:calc(var(--hdr-h) + 32px);margin-bottom:0}
  .cs-split.cs-mid{align-items:center}
  .cs-split.cs-mid>.head{position:static}
  .cs-split>.fline{margin-top:0}
  .cs-notes{grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
}

/* ---------- city hero: the kit's hero (lead after the picker), plus the call-back card in the picker's place ---------- */
.cs-callback{grid-area:picker;margin-top:18px;padding:18px 16px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-2xl);box-shadow:var(--shadow-1)}
.cs-cb-h{font:700 var(--t-18)/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.cs-cb-sub{margin-top:6px;font-size:var(--t-14);color:var(--ink-2)}
.cs-cb-near{margin-top:16px;font-size:var(--t-12);font-weight:700;letter-spacing:.02em;color:var(--ink-3)}
.cs-near{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0;padding:0;list-style:none}
.cs-near:empty{display:none}
.cs-cb-call{width:100%;margin-top:14px}
.city-callback{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
@media (min-width:1000px){
  /* the copy column stacks from the top; the clips' extra height collects under the proof line, not between rows */
  .cs-hero .hero-grid{grid-template-rows:auto auto auto auto 1fr}
  .cs-hero .proof{align-self:start}
  .cs-callback{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:40px;margin-top:40px;padding:28px 32px}
  .cs-cb-h{font-size:var(--t-21)}
  .cs-cb-call{display:none} /* desktop: Call sits in the hero's button row */
  .city-callback{margin-top:0;padding:0 0 0 40px;border-top:0;border-left:1px solid var(--line)}
}

/* the call-back form: the same field look as the contact form (css/pages/company.css .fld) */
.city-callback-form{display:grid;gap:16px}
.city-callback-appliances{display:flex;flex-wrap:wrap;gap:8px;min-width:0;margin:0;padding:0;border:0}
.city-callback-appliances legend{float:left;width:100%;margin-bottom:8px;padding:0;font-size:var(--t-14);font-weight:700;color:var(--ink)}
.city-callback-chip{position:relative;display:inline-flex}
.city-callback-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.city-callback-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--line-2);border-radius:var(--radius-pill);background:var(--card);font-size:var(--t-14);font-weight:600;color:var(--ink-2);
  transition:border-color var(--d-ui) ease,background-color var(--d-ui) ease,color var(--d-ui) ease,transform var(--d-press) var(--ease-out)}
.city-callback-chip input:checked+span{border-color:var(--brand);background:var(--tint);color:var(--brand-deep)}
.city-callback-chip input:focus-visible+span{outline:3px solid var(--brand);outline-offset:3px}
.city-callback-chip:active span{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.city-callback-chip:hover span{border-color:var(--brand)}}
.city-callback-form .form-group{display:grid;gap:6px}
.city-callback-form label[for]{font-size:var(--t-14);font-weight:700;color:var(--ink)}
.city-callback-form input[type="text"],.city-callback-form input[type="tel"]{width:100%;min-height:52px;margin:0;padding:0 16px;border:1.5px solid var(--line-2);border-radius:var(--radius-lg);background:var(--paper);
  font:500 var(--t-16)/1.4 var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none;transition:border-color var(--d-ui) ease,background-color var(--d-ui) ease,box-shadow var(--d-ui) ease}
.city-callback-form input::placeholder{color:var(--ink-3);opacity:1}
.city-callback-form input:focus{outline:none;border-color:var(--brand);background:var(--card);box-shadow:0 0 0 3px var(--plinth)}
.city-callback-form input[aria-invalid="true"]{border-color:var(--accent-dark)}
.city-callback-error{font-size:var(--t-13);font-weight:600;line-height:1.4;color:var(--ink)}
.city-callback-error:empty{display:none}
.city-callback-error::before{content:"!";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:50%;background:var(--accent-dark);color:var(--card);font-size:12px;font-weight:800;vertical-align:1px}
.form-consent-line{font-size:var(--t-13);line-height:1.5;color:var(--ink-2)}
.form-consent-line a{font-weight:700;color:var(--brand-deep)}
.city-callback-submit{width:100%}
.city-callback-submit:disabled{background:var(--tint);color:var(--ink-3);box-shadow:none;cursor:progress}
.city-callback-form-error{font-size:var(--t-14);font-weight:600;color:var(--ink)}
.city-callback-form-error:empty{display:none}
.city-callback-note{font-size:var(--t-13);line-height:1.5;color:var(--ink-3)}
.city-callback-done{padding:18px;border-radius:var(--radius-lg);background:var(--tint)}
.city-callback-done:focus{outline:none}
.city-callback-done:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.city-callback-done h3{font:700 var(--t-18)/1.3 var(--sans);color:var(--brand-deep)}
.city-callback-done p{margin-top:6px;font-size:var(--t-14);color:var(--ink-2)}
.city-callback-done strong{color:var(--ink);font-variant-numeric:tabular-nums}
@media (min-width:1000px){.city-callback-submit{width:auto;justify-self:start;min-width:220px}}

/* ---------- city: prices, one small card per appliance: two across on a phone, three from 640px, four on desktop ----------
   Each card: the name, then one live "from" price per line (the product picture joins from 640px). */
.cs-plist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.cs-plist>li{display:flex;min-width:0}
.cs-plist>li[hidden]{display:none}
.cs-prow{position:relative;display:flex;align-items:flex-start;gap:12px;width:100%;min-height:78px;padding:12px 14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--ink);text-decoration:none;
  transition:transform var(--d-press) var(--ease-out),border-color var(--d-ui) ease,background-color var(--d-ui) ease}
a.cs-prow:active{transform:scale(.98)}
.cs-prow .cs-pic{display:none}
.cs-prow>.i{position:absolute;top:14px;right:10px;width:16px;height:16px;color:var(--brand)}
.cs-pname{flex:1;min-width:0;font-size:var(--t-15);font-weight:700;line-height:1.25}
.cs-prow .cs-pname{padding-right:18px} /* the chevron sits beside the name only: the price lines below use its column */
.cs-prow .cs-pline{margin-right:-18px}
.cs-pline{display:block;margin-top:4px;font-size:var(--t-13);font-weight:500;line-height:1.45;color:var(--ink-3)}
.cs-from{display:block}
.cs-sep{display:none}
.cs-pline .live{font-weight:700;color:var(--ink)}
@media (hover:hover) and (pointer:fine){a.cs-prow:hover{border-color:var(--brand);background:var(--card)}}
@media (max-width:339px){.cs-plist{grid-template-columns:1fr}}
@media (min-width:640px){
  .cs-plist{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cs-prow{padding:12px 32px 12px 12px}
  .cs-prow .cs-pname{padding-right:0}
  .cs-prow .cs-pline{margin-right:0}
  .cs-prow .cs-pic{display:grid;width:40px;height:40px}
  .cs-prow .cs-pic img{width:30px;height:30px}
  .cs-prow>.i{top:50%;margin-top:-8px;right:12px}
}
@media (min-width:1000px){.cs-plist{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}

/* ---------- city: the team and the areas ---------- */
.cs-team-grid{display:grid;gap:14px}
.cs-card{padding:18px}
.cs-card-h{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.cs-card-h .la{width:34px;height:34px;flex:none;color:var(--brand)}
.cs-card h3{font-size:var(--t-16);line-height:1.3}
.cs-office address{font-style:normal;font-size:var(--t-15);line-height:1.55;color:var(--ink)}
.cs-meta{margin-top:8px;font-size:var(--t-14);color:var(--ink-2)}
.cs-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cs-actions .btn{flex:1 1 auto;min-height:48px;padding:0 16px;font-size:var(--t-15)}
.cs-areas .chips{margin-top:4px}
@media (min-width:1000px){
  .cs-team-grid{grid-template-columns:1fr 1fr;gap:22px}
  .cs-team-grid.one{grid-template-columns:1fr}
  .cs-card{padding:24px}
}

/* ---------- service hero: chip, headline, scene + clip, the booking card (price + what you need) ---------- */
.cs-svc .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"chip" "h1" "media" "book" "lead"}
.cs-svc h1{min-height:0}
.cs-h1-in{display:none}
.cs-h1.is-city .cs-h1-in{display:inline}
main .cs-h1.is-city .cs-h1-in[hidden]{display:inline !important} /* hidden = the no-CSS fallback; the runtime toggles only .is-city */
.cs-h1:not(.is-city) .cs-h1-door{font-style:italic;font-weight:500;color:var(--brand-deep)} /* no city: "at your door." carries the accent */
.cs-visual{grid-area:media;position:relative;margin:18px 0 34px}
.cs-scene{overflow:hidden;aspect-ratio:16/10;border-radius:var(--radius-2xl);background:var(--tint);box-shadow:var(--shadow-1)}
.cs-scene img{width:100%;height:100%;object-fit:cover}
.cs-svc .cs-visual .clip{position:absolute;right:12px;bottom:-26px;width:104px;margin:0;transform:rotate(3deg)}
/* the homepage hero's floating review (or the live rating where this appliance has no tagged review), opposite the clip */
.cs-svc .cs-visual .rev-float{position:absolute;left:12px;bottom:-26px;width:calc(100% - 144px);max-width:300px;margin:0}
.cs-svc .cs-visual:not(:has(.clip)) .rev-float{width:auto;right:auto;max-width:calc(100% - 24px)}
.cs-rev-rate p{margin:4px 0 2px}
.cs-svc .lead{grid-area:lead;margin-top:18px}
.cs-war{grid-area:war;display:none}
.cs-book{grid-area:book;padding:14px 12px 10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-2xl);box-shadow:var(--shadow-1)}
.cs-pricecard{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l l" "n v";align-items:center;column-gap:12px;row-gap:2px;padding:2px 4px 14px;border-bottom:1px solid var(--line)}
.cs-pc-l{display:contents} /* its label and note join the card's grid: the label takes the whole first line */
.cs-pc-l b{grid-area:l}
.cs-pc-l small{grid-area:n}
.cs-pc-v{grid-area:v}
.cs-pc-l b{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--t-16);line-height:1.3} /* one line: the city the kit adds cannot move the card */
.cs-pc-l small{display:block;margin-top:2px;font-size:var(--t-12);line-height:1.4;color:var(--ink-3)}
/* the inspection charge: one line with a fixed height, so the live price (or the call line) lands without moving anything */
.cs-pc-v{display:flex;align-items:center;justify-content:flex-end;gap:.25em;min-height:1.25em;white-space:nowrap;font:800 var(--t-21)/1.1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.cs-pc-v .live{font-weight:800}
.cs-pc-v a{font-size:var(--t-15);color:var(--brand-deep)}
.cs-types{padding:12px 4px 4px}
.cs-types-h{margin-bottom:8px;font:700 var(--t-15)/1.3 var(--sans);color:var(--ink)}
.cs-types-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cs-types-grid>:only-child{grid-column:1/-1}
.cs-type{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:58px;padding:8px 10px 8px 14px;border:1px solid var(--line-2);border-radius:var(--radius-lg);background:var(--paper);color:var(--ink);text-decoration:none;
  transition:transform var(--d-press) var(--ease-out),border-color var(--d-ui) ease,background-color var(--d-ui) ease}
.cs-type>span{min-width:0}
.cs-type b{display:block;font-size:var(--t-15);line-height:1.2}
.cs-type small{display:block;margin-top:2px;font-size:var(--t-13);line-height:1.3;color:var(--ink-3)}
.cs-type .i{width:16px;height:16px;color:var(--brand)}
.cs-type:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.cs-type:hover{border-color:var(--brand);background:var(--card)}}
.cs-book-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding:10px 4px 2px;font-size:var(--t-12);line-height:1.35;color:var(--ink-3)}
.cs-book-foot b{color:var(--ink)}
@media (max-width:359px){.cs-types-grid{grid-template-columns:1fr}}
@media (min-width:1000px){
  .cs-svc .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" "war media" "book book"}
  .cs-svc .lead{margin-top:20px}
  .cs-visual{align-self:center;margin:24px 0 36px 32px}
  .cs-scene{aspect-ratio:1/1}
  .cs-svc .cs-visual .clip{left:auto;right:-20px;top:-28px;bottom:auto;width:150px;border:3px solid var(--card);border-radius:18px;transform:rotate(4deg)}
  .cs-svc .cs-visual .rev-float{left:-40px;bottom:32px;width:300px;max-width:none;padding:16px 18px}
  .cs-war{display:flex;align-items:flex-start;gap:10px;max-width:34rem;margin-top:18px;font-size:var(--t-13);line-height:1.5;color:var(--ink-2)}
  .cs-war .la{width:24px;height:24px;flex:none;color:var(--brand)}
  .cs-book{display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-areas:"price types" "foot types";column-gap:28px;align-items:start;margin-top:36px;padding:20px 20px 20px 26px}
  .cs-pricecard{grid-area:price;grid-template-columns:minmax(0,1fr);grid-template-areas:"l" "n" "v";align-items:start;row-gap:4px;padding:0;border:0}
  .cs-pc-v{justify-content:flex-start;margin-top:6px;font-size:1.75rem}
  .cs-pc-v .cs-fb{font-size:var(--t-14)}
  .cs-types{grid-area:types;padding:0 0 0 28px;border-left:1px solid var(--line)}
  .cs-types-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cs-types-grid>:only-child{grid-column:auto}
  .cs-book-foot{grid-area:foot;flex-direction:column;align-self:end;padding:12px 0 0}
}
@media (min-width:1000px) and (max-width:1199px){ /* a narrow desktop: the card and the clip keep clear of each other and of the edge */
  .cs-svc .cs-visual .clip{right:-8px;width:124px}
  .cs-svc .cs-visual .rev-float{width:240px}
  .cs-svc .cs-visual .rev-float .more{display:none} /* first sentence only, as on a phone */
}

/* ---------- service bands ---------- */
.cs-probs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cs-prob{padding:14px}
.cs-prob h3{margin-bottom:4px;font-size:var(--t-15);line-height:1.3}
.cs-prob p{font-size:var(--t-13);line-height:1.45;color:var(--ink-2)}
@media (max-width:359px){.cs-probs{grid-template-columns:1fr}}
@media (min-width:1000px){.cs-probs{grid-template-columns:repeat(3,1fr);gap:16px}.cs-prob{padding:20px 22px}.cs-prob p{font-size:var(--t-14)}}

/* price rows (service groups and pricing cards): divided lines, each a Book link where it has a price */
.cs-prows{margin:0;padding:0;list-style:none}
.cs-prows li{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 0;border-top:1px solid var(--line);font-size:var(--t-14)}
.cs-prows li:first-child{border-top:0}
.cs-prows li>a{position:relative;flex:1;display:flex;align-items:center;gap:10px;align-self:stretch;margin:-6px 0;padding:6px 24px 6px 0;color:inherit;text-decoration:none}
.cs-prows li>a>.i{position:absolute;right:0;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--brand)}
.cs-prows .cs-rname,.cs-prows li>span:first-child{flex:1;min-width:0;font-weight:600}
.cs-pval{flex:none;max-width:60%;text-align:right;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cs-pval .live{font-size:var(--t-15);font-weight:700;color:var(--ink)}
.cs-pval .cs-fb{white-space:nowrap}
@media (hover:hover) and (pointer:fine){.cs-prows li>a:hover .cs-rname{color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px}}

.cs-ptable{display:grid;gap:12px}
.cs-pgroup{padding:14px 16px 6px}
.cs-pgroup h3{margin-bottom:2px;font-size:var(--t-16);line-height:1.3}
@media (min-width:640px){.cs-ptable{grid-template-columns:1fr 1fr;align-items:start}}

.cs-steps{--cols:5}
.cs-steps.cs-steps4{--cols:4}
.cs-steps .step:nth-child(1){--d:200}.cs-steps .step:nth-child(2){--d:450}.cs-steps .step:nth-child(3){--d:700}.cs-steps .step:nth-child(4){--d:950}.cs-steps .step:nth-child(5){--d:1200}
.cs-steps .k-slots{margin-top:10px}
@media (min-width:1000px){.cs-steps .k-slots li{flex-direction:column;row-gap:0}.cs-steps .k-slots b{min-width:0}} /* five narrow columns: every slot on two lines, not some */

/* a service page's stories rail has one to three clips (its appliance only): on desktop the band composes side by
   side, heading left and clips right, instead of one card in a row built for six */
@media (min-width:1000px){
  [data-page="service"] #repairs .wrap:has(>.k-stories>:first-child):not(:has(>.k-stories>:nth-child(4))){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:64px;align-items:center}
  [data-page="service"] #repairs .wrap:has(>.k-stories>:first-child):not(:has(>.k-stories>:nth-child(4)))>.head{margin-bottom:0}
  [data-page="service"] #repairs .wrap:has(>.k-stories>:first-child):not(:has(>.k-stories>:nth-child(4)))>.k-stories{grid-column:2;grid-row:1;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:230px}
}

.cs-brandlist{margin:0}
.cs-brandlist li{padding:10px 14px;font-size:var(--t-14)}
.cs-indep{max-width:44rem;margin-top:16px;font-size:var(--t-13);line-height:1.55;color:var(--ink-3)}

.cs-faq2 .fline{margin-top:28px}
@media (min-width:1000px){
  .cs-faq2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head faq" "line faq";column-gap:64px;align-items:start}
  .cs-faq2>.head{grid-area:head}
  .cs-faq2>.faq{grid-area:faq}
  .cs-faq2>.fline{grid-area:line;margin-top:0}
}

.cs-citychips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cs-near-you .chips{margin:0 0 16px}

/* ---------- pricing ---------- */
.cs-phero-grid{position:relative;display:grid;gap:20px}
.cs-phero .pchip{margin-bottom:14px}
.cs-phero h1{min-height:0}
.cs-phero .lead{margin-top:14px}
.cs-pcity{align-self:end;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-2xl);box-shadow:var(--shadow-1)}
.cs-pcity-l{font-size:var(--t-12);font-weight:700;letter-spacing:.02em;color:var(--ink-3)}
.cs-citybtn{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin-top:8px;padding:0 16px;border:1.5px solid var(--brand);border-radius:var(--radius-pill);background:var(--card);
  font:700 var(--t-16)/1.2 var(--sans);color:var(--brand-deep);cursor:pointer;transition:background-color var(--d-ui) ease,transform var(--d-press) var(--ease-out)}
.cs-citybtn span{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}
.cs-citybtn:active{transform:scale(.98)}
/* the cold price table's own city button (service pages): span the 2-col grid like the note above it */
.cs-ptable .cs-citybtn{grid-column:1/-1;margin-top:0}
.cs-pcity-n{margin-top:10px;font-size:var(--t-13);color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){.cs-citybtn:hover{background:var(--tint)}}

/* jump links: a swipe rail with an edge fade on phones (it says it scrolls); the grid shows everything on desktop */
.cs-jump{display:flex;gap:8px;overflow-x:auto;margin:0 -20px 16px;padding:2px 20px 6px;scrollbar-width:none;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,var(--ink) 16px,var(--ink) calc(100% - 44px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,var(--ink) 16px,var(--ink) calc(100% - 44px),transparent 100%)}
.cs-jump::-webkit-scrollbar{display:none}
.cs-jump a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--paper);font-size:var(--t-13);font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.cs-jump a:hover{border-color:var(--brand);color:var(--brand-deep)}}

/* the 16 cards, two across on a phone, where each price row stacks its label over its price */
.cs-pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cs-pcard{display:flex;flex-direction:column;min-width:0;padding:12px 12px 2px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-xl)}
.cs-pcard-h{display:flex;align-items:center;gap:10px;margin-bottom:4px;font-size:var(--t-15);line-height:1.25}
.cs-pcard-h .cs-pic{width:36px;height:36px}
.cs-pcard-h .cs-pic img{width:28px;height:28px}
.cs-pcard .cs-prows{flex:1}
.cs-pcard .cs-prows li{flex-direction:column;align-items:stretch;justify-content:center;gap:0;font-size:var(--t-13)}
.cs-pcard .cs-prows li>a{flex-direction:column;align-items:flex-start;justify-content:center;gap:0}
.cs-pcard .cs-pval{max-width:none;text-align:left}
.cs-pcard-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;border-top:1px solid var(--line)}
.cs-pcard-f .link{min-width:0;font-size:var(--t-14);white-space:normal} /* "Book washing machine" wraps in a two-across card */
.cs-pcard-more{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-13);color:var(--ink-3)}
.cs-pcard.is-off{background:transparent;border-style:dashed}
.cs-pcard.is-off .cs-pcard-h{color:var(--ink-2)}
.cs-pcard.is-off .cs-pic img{opacity:.55;filter:grayscale(1)}
@media (max-width:339px){.cs-pgrid{grid-template-columns:1fr}}
@media (min-width:640px){
  .cs-pcard{padding:16px 16px 2px}
  .cs-pcard .cs-prows li{flex-direction:row;align-items:center;gap:10px;font-size:var(--t-14)}
  .cs-pcard .cs-prows li>a{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px}
  .cs-pcard .cs-pval{text-align:right}
}
@media (min-width:1000px){
  .cs-phero-grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:64px;align-items:end}
  .cs-pcity{padding:22px 24px}
  .cs-jump{display:none}
  .cs-pgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
}

/* ---------- motion: the kit's choreography, extended to these pages' own hero parts ----------
   The scene and the booking card paint in the first frame and only settle (transform), like the kit's picker;
   under reduced motion they do not move at all. */
.hero .cs-visual{--d:100}.hero .cs-book,.hero .cs-callback{--d:180}.hero .cs-war{--d:280}
.motion .cs-visual[data-enter],.motion .cs-book[data-enter]{animation-name:settle}
.rm .cs-visual[data-enter],.rm .cs-book[data-enter]{animation:none}

/* The homepage's founder chip above the page's own chip (where the team is / which appliance): both share the hero's
   chip row, stacked, so neither the phone nor the desktop grid gains a row. */
.hero .hero-chips{grid-area:chip;display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:14px} /* the founder chip and the badge read as two things (owner 2026-10-14) */
.hero .hero-chips>.fchip,.hero .hero-chips>.pchip{margin:0;align-self:flex-start} /* a-kit.css desktop sets align-self:end on both (grid rule) */
@media (min-width:1000px){.hero .hero-chips{align-self:end;gap:20px;margin:32px 0 14px}}