/* Hallmark · shape: Narrative Workflow, swapped to a service desk (the job's "index of projects" cannot exist on a referral site, so the index is of door problems) · genre: editorial · theme: Ink recoloured at the owner's request: deep spruce bands, amber action, teal and rust state (deal 1/3, seed lead-gen-garage-door-repair-5a6a·6d6e04dd·2026-11-13·r0) · job: hire · draw: 4fda67
 * hero: Index · nav: banner over a sticky bar · footer: index columns · imagery: photographs, Wikimedia Commons, credited on /credits/ · signature: the safety triage, what the door is doing sorted into leave-it-closed and okay-with-care · ink: paper with deep bands
 * axes: light/grotesk-sans/chromatic-teal · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, the SEO pages run 500 to 900 words by brief, so gate 58 stays open on them (reported to the owner); prose held to 65ch beside a sticky aside, home and hubs kept to one idea a screen */
/* Hallmark · waive 77 · privacy and terms set a sticky head beside 65ch legal prose, 45% of the page width · terms and privacy text has no garage door photo to show, and longer lines would read worse */
/* Hallmark · dismissed 77 · contact, credits, legal, hubs, thank-you and 404 each do one job; six to nine sections there would be padding, and the home page carries seven */
/* Hallmark · waive 44c · privacy and terms heads are a title and a date, about 290px shorter than the photo beside them · stretching legal copy to match a garage door photo would add words nobody needs */
/* Hallmark · waive 49b · the six triage rows on the home page are full-width list links holding a symptom sentence, two lines at 320px · a garage door symptom cut to fit one line would stop saying what the door is doing */
/* Hallmark · dismissed F4 · only the amber call button is filled; the request-a-quote button beside it is an outline on a transparent ground (.on-deep .btn:not(.btn--primary)), checked on every garage door hero */

:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(98.6% 0.006 85); --color-paper-2: oklch(96.3% 0.01 85); --color-paper-3: oklch(93.4% 0.014 85); --color-sand: oklch(94.6% 0.02 80);
  --color-ink: oklch(21% 0.025 225); --color-ink-2: oklch(33% 0.022 225); --color-muted: oklch(46% 0.018 225);
  --color-rule: oklch(87.5% 0.013 85); --color-rule-2: oklch(92.5% 0.01 85);
  --color-deep: oklch(26% 0.042 215); --color-deep-2: oklch(20.5% 0.034 215); --color-deep-3: oklch(32.5% 0.048 215); --color-rule-deep: oklch(40% 0.045 215);
  --color-on-deep: oklch(97.5% 0.008 200); --color-on-deep-2: oklch(85% 0.022 205);
  --color-action: oklch(79% 0.155 72); --color-action-hover: oklch(84% 0.14 80); --color-action-ink: oklch(23% 0.04 60);
  --color-accent: oklch(50% 0.095 188); --color-accent-ink: oklch(99.5% 0.003 100); --color-accent-soft: oklch(93% 0.05 190); --color-accent-soft-ink: oklch(27% 0.045 190); --color-accent-on-deep: oklch(82% 0.1 185);
  --color-ok: oklch(47% 0.1 178); --color-stop: oklch(51% 0.17 32);
  --color-focus: oklch(50% 0.095 188); --color-focus-on-deep: oklch(79% 0.155 72);
  --font-display: "Epilogue", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display);
  --font-outlier: "IBM Plex Mono", ui-monospace, monospace;
  --radius-card: 12px; --radius-pill: 999px; --rule-hair: 1px;
  --shadow-card: 0 18px 40px -16px oklch(20% 0.03 215 / 0.28); --shadow-lift: 0 40px 70px -28px oklch(14% 0.03 215 / 0.55);
  --tracking-display: -0.04em; --display-weight: 700;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
/* photographs: near full color, a touch held back */
[data-slot] > img { filter: saturate(0.92); }

@font-face{font-family:"Epilogue";src:url(../fonts/epilogue-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{--header-h:76px;--banner-h:40px;--radius-control:10px;--control-h:48px;--measure:65ch;--bar-accent:4px}

/* type helpers */
.lead{color:var(--color-ink-2)}
small,.small{font-size:var(--text-sm)}
p,li,dd{color:var(--color-ink-2)}
strong{color:var(--color-ink);font-weight:600}
a{font-weight:600;color:var(--color-ink);transition:text-decoration-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
a:hover{text-decoration-color:var(--color-accent);color:var(--color-accent)}
a:active{color:var(--color-accent-soft-ink)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;transition:none}

/* dark surfaces: one rule set, used by the header, hero, bands, cards and footer */
.on-deep,.bar,.banner,.site-footer,.mcall{--color-focus:var(--color-focus-on-deep)}
.band-deep{background:var(--color-deep);color:var(--color-on-deep)}
.band-sand{background:var(--color-sand)}
.band-paper{background:var(--color-paper-2)}
.on-deep :is(h1,h2,h3,strong,dt,th){color:var(--color-on-deep)}
.on-deep :is(p,li,dd,td,caption,.lead){color:var(--color-on-deep-2)}
.on-deep a{color:var(--color-on-deep)}
.on-deep a:hover{color:var(--color-accent-on-deep);text-decoration-color:var(--color-accent-on-deep)}

/* skip link */
.skip{position:absolute;left:var(--space-md);top:calc(-1 * var(--space-4xl));z-index:var(--z-toast);background:var(--color-action);color:var(--color-action-ink);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-control)}
.skip:focus-visible{top:var(--space-sm);color:var(--color-action-ink)}

/* buttons: an amber action and a quiet partner */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);min-height:var(--control-h);padding:var(--space-xs) var(--space-lg);border-radius:var(--radius-control);border:var(--rule-hair) solid var(--color-ink-2);background:transparent;color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-md);font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.btn:hover{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary,.on-deep .btn--primary{background:var(--color-action);border-color:var(--color-action);color:var(--color-action-ink)}
.btn--primary:hover,.on-deep .btn--primary:hover{background:var(--color-action-hover);border-color:var(--color-action-hover);color:var(--color-action-ink)}
.on-deep .btn:not(.btn--primary),.bar .btn,.mcall .btn:not(.btn--primary){border-color:var(--color-rule-deep);color:var(--color-on-deep);background:transparent}
.on-deep .btn:not(.btn--primary):hover,.bar .btn:hover,.mcall .btn:not(.btn--primary):hover{background:var(--color-deep-3);border-color:var(--color-on-deep-2);color:var(--color-on-deep)}
.bar .bar-call{background:var(--color-action);border-color:var(--color-action);color:var(--color-action-ink)}
.bar .bar-call:hover{background:var(--color-action-hover);border-color:var(--color-action-hover);color:var(--color-action-ink)}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-sm)}

/* banner over the bar, both dark */
.banner{background:var(--color-deep-2);font-size:var(--text-sm)}
.banner .container{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);min-height:var(--banner-h)}
.banner p{color:var(--color-on-deep-2)}
.banner a{white-space:nowrap;color:var(--color-on-deep)}
.banner a:hover{color:var(--color-action)}
.bar{position:sticky;top:0;z-index:var(--z-sticky-nav);background:var(--color-deep);border-bottom:var(--bar-accent) solid var(--color-action)}
.bar .container{display:flex;align-items:center;gap:var(--space-lg);min-height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:var(--space-sm);text-decoration:none;color:var(--color-on-deep);margin-right:auto;font-weight:700;letter-spacing:-0.02em;line-height:1.1}
.brand:hover{color:var(--color-on-deep)}
.brand svg{width:38px;height:38px;flex:none}
.brand svg rect:first-child{fill:var(--color-action)}
.brand svg g{stroke:var(--color-deep)}
.brand span{font-size:var(--text-lg);max-width:16ch}
.nav ul{list-style:none;margin:0;padding:0}
.menu{display:flex;align-items:center;gap:var(--space-2xs)}
.menu>li{position:relative}
.menu a,.sub-btn{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:44px;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-control);font-size:var(--text-md);font-weight:600;color:var(--color-on-deep);text-decoration:none;background:none;border:0;cursor:pointer;font-family:var(--font-body);transition:background-color var(--dur-micro) var(--ease-out)}
.menu a:hover,.sub-btn:hover{background:var(--color-deep-3);color:var(--color-on-deep)}
.sub-btn:active,.menu a:active{background:var(--color-deep-2)}
.menu a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--color-action);text-decoration-thickness:2px;text-underline-offset:.35em}
.caret{width:10px;height:10px;transition:transform var(--dur-short) var(--ease-out)}
.sub{--color-focus:var(--color-accent);display:none;position:absolute;top:100%;left:0;min-width:300px;background:var(--color-paper);border-radius:var(--radius-card);box-shadow:var(--shadow-lift);padding:var(--space-xs);z-index:var(--z-dropdown)}
.sub a{display:flex;width:100%;font-weight:400;color:var(--color-ink)}
.sub a:hover{background:var(--color-paper-2);color:var(--color-ink)}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{display:block}
.has-sub.open .caret{transform:rotate(180deg)}
.bar-actions{display:flex;align-items:center;gap:var(--space-xs)}
.nav-toggle{display:none}
@media (max-width:68rem){
 .nav-toggle{display:inline-flex}
 .nav{position:absolute;left:0;right:0;top:100%;background:var(--color-deep);border-bottom:var(--bar-accent) solid var(--color-action);display:none;max-height:calc(100dvh - var(--header-h));overflow:auto}
 .nav.open{display:block}
 .menu{flex-direction:column;align-items:stretch;padding:var(--space-sm) var(--gutter) var(--space-lg)}
 .menu a,.sub-btn{width:100%;justify-content:space-between;min-height:48px}
 .sub{position:static;box-shadow:none;background:transparent;border-left:var(--rule-hair) solid var(--color-rule-deep);border-radius:0;min-width:0;margin:0 0 var(--space-xs) var(--space-sm);padding:0}
 .sub{--color-focus:var(--color-focus-on-deep)}
 .sub a{color:var(--color-on-deep)}
 .sub a:hover{background:var(--color-deep-3);color:var(--color-on-deep)}
 .has-sub:hover .sub,.has-sub:focus-within .sub{display:none}.has-sub.open .sub{display:block}
 .bar-call{display:none}
}
@media (max-width:40rem){.banner .container{justify-content:flex-start}.banner .banner-area{display:none}.brand span{font-size:var(--text-md)}}

/* sections */
.section{padding-block:var(--section-gap)}
.section--flush{padding-top:0}
.head{display:grid;gap:var(--space-md);margin-bottom:var(--space-2xl);max-width:48rem}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-2xl) var(--gap-columns)}

.photo{margin:0;display:grid;gap:var(--space-xs)}
.photo img{border-radius:var(--radius-card);filter:saturate(.92);width:100%;height:auto;background:var(--color-paper-3);box-shadow:var(--shadow-card)}
.photo figcaption{font-size:var(--text-sm);color:var(--color-muted)}

/* home hero: a deep panel beside the city, bled to the edge */
.hero{background:var(--color-deep);color:var(--color-on-deep)}
.hero-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (min-width:60.01rem){.hero-in{min-height:calc(100svh - var(--header-h) - var(--banner-h) - var(--bar-accent))}}
.hero-panel{display:grid;align-content:center;padding:var(--space-3xl) var(--space-xl) var(--space-3xl) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)))}
.hero-copy{display:grid;gap:var(--space-lg)}
.hero h1{font-size:clamp(2.5rem,3.7vw + 1rem,4.75rem);line-height:.96;max-width:none}
@media (min-width:100rem){.hero-in{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}}
.hero .lead{color:var(--color-on-deep-2);max-width:30ch}
.hero-media,.page-hero .photo{position:relative;margin:0}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 55%;filter:saturate(.95)}
.hero-media figcaption,.page-hero .photo figcaption{position:absolute;left:var(--space-md);bottom:var(--space-md);max-width:calc(100% - var(--space-xl));background:var(--color-deep-2);color:var(--color-on-deep-2);font-size:var(--text-xs);padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-control)}
@media (max-width:60rem){
 .hero-in{grid-template-columns:minmax(0,1fr)}
 .hero-panel{padding:var(--space-xl) var(--gutter) var(--space-xl)}
 .hero-media{aspect-ratio:4/3}
 .hero h1{max-width:14ch}
}

/* is it safe to use the door: triage */
.triage-sec{background:var(--color-paper-2)}
.triage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-xl) var(--gap-columns);align-items:stretch}
.triage-head{grid-column:1 / span 4;display:grid;gap:var(--space-lg);align-self:start}
.triage-head .photo img{aspect-ratio:4/3;object-fit:cover}
.triage-col{grid-column:span 4;background:var(--color-paper);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--space-xl);border-top:var(--bar-accent) solid var(--color-ok);display:grid;gap:var(--space-md);align-content:start}
.triage-col--stop{border-top-color:var(--color-stop)}
.triage-col h3{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-title)}
.triage-col h3::before{content:"";width:14px;height:14px;border-radius:var(--radius-pill);background:var(--color-ok);flex:none}
.triage-col--stop h3::before{background:var(--color-stop);border-radius:3px}
.triage-col ul{list-style:none;margin:0;padding:0;border-top:var(--rule-hair) solid var(--color-rule)}
.triage-col li{border-bottom:var(--rule-hair) solid var(--color-rule)}
.triage-col a{display:block;padding-block:var(--space-md);text-decoration:none;font-size:var(--text-lg);line-height:1.3;letter-spacing:-0.01em}
.triage-col a:hover{color:var(--color-accent)}
.triage-col--stop a:hover{color:var(--color-stop)}
@media (max-width:68rem){.triage-head{grid-column:1 / -1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}.triage-col{grid-column:span 6}}
@media (max-width:40rem){.triage-head{grid-template-columns:minmax(0,1fr)}.triage-col{grid-column:1 / -1}}

/* tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
caption{caption-side:bottom;text-align:left;font-size:var(--text-sm);color:var(--color-muted);padding-top:var(--space-md);max-width:var(--measure)}
th,td{text-align:left;padding:var(--space-md) var(--space-lg) var(--space-md) 0;border-bottom:var(--rule-hair) solid var(--color-rule);vertical-align:top}
thead th{font-size:var(--text-sm);font-weight:600;color:var(--color-muted);border-bottom:var(--rule-hair) solid var(--color-ink);white-space:nowrap}
tbody th{font-weight:600;color:var(--color-ink);font-size:var(--text-lg);letter-spacing:-0.01em}
td.num{white-space:nowrap;font-weight:700;color:var(--color-ink)}
@media (max-width:40rem){
 .stack thead{display:none}
 .stack tr{display:grid;gap:var(--space-2xs);padding-block:var(--space-md);border-bottom:var(--rule-hair) solid var(--color-rule)}
 .stack th,.stack td{border:0;padding:0}
}

/* the cost card: a feature block on deep */
.cost-feature{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-xl) var(--gap-columns);align-items:center}
.cost-head{grid-column:1 / span 4;display:grid;gap:var(--space-lg)}
.cost-feature .price-card{grid-column:6 / span 7}
@media (max-width:60rem){.cost-head,.cost-feature .price-card{grid-column:1 / -1}}
.price-card{background:var(--color-deep-3);color:var(--color-on-deep);border-radius:var(--radius-card);padding:var(--space-lg) var(--space-xl) var(--space-xl);box-shadow:var(--shadow-lift)}
.price-card :is(th,td){border-bottom-color:var(--color-rule-deep);color:var(--color-on-deep-2)}
.price-card thead th{color:var(--color-on-deep-2);border-bottom-color:var(--color-on-deep-2)}
.price-card tbody th,.price-card tbody th a{color:var(--color-on-deep)}
.price-card td.num{font-variant-numeric:tabular-nums;color:var(--color-action);font-size:var(--text-xl);letter-spacing:-0.02em}
.price-card a{color:var(--color-on-deep)}
.price-card caption{color:var(--color-on-deep-2)}
.prose .price-card{margin-block:var(--space-md)}
@media (max-width:40rem){.price-card{padding:var(--space-md) var(--space-lg) var(--space-lg)}.price-card .stack tr{border-bottom-color:var(--color-rule-deep)}}

/* rows: head beside */
.rows{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-xl) var(--gap-columns);align-items:start}
.rows-head{grid-column:1 / span 4;display:grid;gap:var(--space-lg);position:sticky;top:calc(var(--header-h) + var(--space-lg))}
.rows-head .photo img{aspect-ratio:4/3;object-fit:cover}
.rows-body{grid-column:6 / span 7}
.rows-body dl{margin:0;border-top:2px solid var(--color-ink)}
.rows-body dl>div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--space-xs) var(--space-lg);padding-block:var(--space-lg);border-bottom:var(--rule-hair) solid var(--color-rule)}
.rows-body dt{font-weight:700;color:var(--color-ink);font-size:var(--text-lg);letter-spacing:-0.01em;line-height:1.3}
.rows-body dd{margin:0}
.rows-body.prose{max-width:var(--measure)}
@media (max-width:60rem){.rows-head,.rows-body{grid-column:1 / -1;position:static}.rows-body dl>div{grid-template-columns:minmax(0,1fr)}}

/* index of places, under a full-bleed photo */
.bleed{margin:0 0 var(--space-2xl)}
.bleed img{width:100%;height:clamp(240px,34vw,520px);object-fit:cover;object-position:50% 60%;filter:saturate(.92)}
.places{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-xl) var(--gap-columns)}
.places .head{grid-column:1 / -1;margin-bottom:0}
.places .ruled{grid-column:1 / -1;columns:2;column-gap:var(--space-2xl);list-style:none;margin:0;padding:0}
.places .ruled>li{break-inside:avoid;border-top:var(--rule-hair) solid var(--color-rule)}
.place{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--space-lg);padding:var(--space-md) var(--space-sm);text-decoration:none;color:var(--color-ink);font-weight:400;border-radius:var(--radius-control)}
.place:hover{color:var(--color-ink);background:var(--color-paper)}
.place strong{font-size:var(--text-lg);letter-spacing:-0.01em}
.place:hover strong{text-decoration:underline;text-decoration-color:var(--color-action);text-decoration-thickness:2px}
.place span{font-size:var(--text-sm);color:var(--color-ink-2)}
@media (max-width:60rem){.places .ruled{columns:1}}

/* faq: cards that open */
.faq{display:grid;gap:var(--space-sm)}
.faq details{background:var(--color-paper);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);transition:box-shadow var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
.faq details[open]{box-shadow:var(--shadow-card);border-color:var(--color-paper)}
.faq summary{display:flex;justify-content:space-between;gap:var(--space-lg);align-items:center;padding:var(--space-lg) var(--space-lg) var(--space-lg) var(--space-xl);cursor:pointer;list-style:none;font-weight:600;font-size:var(--text-lg);color:var(--color-ink);letter-spacing:-0.01em;line-height:1.3;min-height:var(--control-h)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--color-accent)}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-pill);background:var(--color-paper-3);color:var(--color-ink);font-weight:400;font-size:var(--text-lg);transition:background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
.faq details[open] summary::after{content:"\2212";background:var(--color-deep);color:var(--color-on-deep)}
.faq details>div{padding:0 var(--space-xl) var(--space-lg);display:grid;gap:var(--space-sm)}
.faq details:not([open])>div{display:none}

/* page hero: deep band, a big photo that hangs into the page */
.page-hero{background:var(--color-deep);color:var(--color-on-deep);padding-block:var(--space-2xl)}
.page-hero .grid{align-items:center;row-gap:var(--space-xl)}
.ph-text{grid-column:1 / span 6;display:grid;gap:var(--space-lg)}
.ph-text h1{font-size:clamp(2.25rem,2.8vw + 1.25rem,4.25rem)}
.page-hero .photo{grid-column:7 / span 6}
.page-hero .photo img{aspect-ratio:5/4;object-fit:cover;box-shadow:var(--shadow-lift)}
@media (min-width:60.01rem){
 .page-hero{min-height:calc(100svh - var(--header-h) - var(--banner-h) - var(--bar-accent));display:grid;align-content:center}
 .page-hero .photo{margin-bottom:calc(-1 * var(--space-4xl))}
 .page-hero + .section{padding-top:calc(var(--section-gap) + var(--space-3xl))}
 .page-hero:last-child .photo{margin-bottom:0}
}
@media (max-width:60rem){.ph-text,.page-hero .photo{grid-column:1 / -1}}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-xs);font-size:var(--text-sm)}
.crumbs li{color:var(--color-on-deep-2)}
.crumbs li+li::before{content:"/";margin-right:var(--space-xs);color:var(--color-rule-deep)}
.crumbs a{font-weight:400;color:var(--color-on-deep-2)}

/* article + aside */
.article{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-2xl) var(--gap-columns);align-items:start}
.prose{grid-column:1 / span 7;display:grid;gap:var(--space-md);max-width:var(--measure)}
.prose>h2{font-size:var(--text-section);line-height:1.05;margin-bottom:var(--space-xs)}
.prose .intro{font-size:var(--text-xl);line-height:1.4;color:var(--color-ink);font-weight:400;letter-spacing:-0.01em;border-left:var(--bar-accent) solid var(--color-action);padding-left:var(--space-lg)}
.prose h3{font-size:var(--text-xl);margin-top:var(--space-md)}
.prose p,.prose li{line-height:1.7}
.prose ul,.prose ol{margin:0;padding-left:var(--space-lg);display:grid;gap:var(--space-xs)}
.prose .photo{margin-block:var(--space-lg)}
.prose .photo img{aspect-ratio:3/2;object-fit:cover}
.prose .table-wrap{margin-block:var(--space-xs)}
.sec-open{display:grid;gap:var(--space-md)}
.pullout{background:var(--color-deep);color:var(--color-on-deep);border-radius:var(--radius-card);padding:var(--space-xl);margin-block:var(--space-md);box-shadow:var(--shadow-card);border-left:var(--bar-accent) solid var(--color-stop)}
.pullout p{color:var(--color-on-deep);font-size:var(--text-lg);font-weight:600;line-height:1.5}
.aside{grid-column:9 / span 4;position:sticky;top:calc(var(--header-h) + var(--space-lg));display:grid;gap:var(--space-xl)}
@media (max-width:60rem){.prose,.aside{grid-column:1 / -1;position:static}}
.help-card{background:var(--color-deep);color:var(--color-on-deep);border-radius:var(--radius-card);padding:var(--space-xl);box-shadow:var(--shadow-lift);display:grid;gap:var(--space-md)}
.help-card .help-h{font-size:var(--text-title);font-weight:700;color:var(--color-on-deep);letter-spacing:-0.02em}
.help-card .btn{width:100%}
.small-h{font-size:var(--text-title);margin-bottom:var(--space-sm)}
.side-list{display:grid}
.links{list-style:none;margin:0;padding:0;border-top:2px solid var(--color-ink)}
.links li{border-bottom:var(--rule-hair) solid var(--color-rule)}
.links a{display:flex;justify-content:space-between;gap:var(--space-md);padding-block:var(--space-sm);text-decoration:none;font-weight:600;white-space:nowrap}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.chips a,.chips li:not(:has(a)){display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-md);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-pill);text-decoration:none;font-weight:600;font-size:var(--text-sm);background:var(--color-paper);color:var(--color-ink)}
.chips a:hover{border-color:var(--color-ink);color:var(--color-ink)}
.chips a:active{background:var(--color-paper-2)}

/* quote band: a paper form card on deep */
.quote{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-2xl) var(--gap-columns);align-items:center}
.quote-text{grid-column:1 / span 5;display:grid;gap:var(--space-lg)}
.form-card{grid-column:7 / span 6;background:var(--color-paper);border-radius:var(--radius-card);padding:var(--space-xl);box-shadow:var(--shadow-lift);border-top:var(--bar-accent) solid var(--color-action)}
@media (max-width:60rem){.quote-text,.form-card{grid-column:1 / -1}}
@media (max-width:40rem){.form-card{padding:var(--space-lg)}}
.on-deep .form-card :is(h3,label,strong){color:var(--color-ink)}
.on-deep .form-card :is(p,li){color:var(--color-ink-2)}
.on-deep .form-card a{color:var(--color-ink)}
.on-deep .form-card .err,.on-deep .form-card .form-alert{color:var(--color-error)}
.on-deep .form-card .fine{color:var(--color-muted)}
.on-deep .form-card{--color-focus:var(--color-accent)}
.form{display:grid;gap:var(--space-md)}
.form h2,.form h3{font-size:var(--text-xl)}
.field{display:grid;gap:var(--space-2xs)}
.field label{font-size:var(--text-sm);font-weight:600;color:var(--color-ink);padding:0}
.field .opt{font-weight:400;color:var(--color-muted)}
.field input,.field select,.field textarea{width:100%;min-height:var(--control-h);padding:var(--space-sm) var(--space-md);border:var(--rule-hair) solid var(--color-muted);border-radius:var(--radius-control);background:var(--color-paper);color:var(--color-ink);font-size:var(--text-md);font-family:var(--font-body);transition:border-color var(--dur-micro) var(--ease-out)}
.field textarea{min-height:88px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--color-ink)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}
.field input:disabled,.field select:disabled,.field textarea:disabled{opacity:.55;cursor:not-allowed}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--color-error)}
.err{min-height:1lh;font-size:var(--text-sm);color:var(--color-error);visibility:hidden}
.field.invalid .err{visibility:visible}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)}
@media (max-width:40rem){.row2{grid-template-columns:minmax(0,1fr)}}
.hp{display:none}
.form .btn{width:100%}
.fine{font-size:var(--text-sm);color:var(--color-muted)}
.form-alert{font-size:var(--text-sm);color:var(--color-error);font-weight:600}
.form-alert:empty{display:none}

/* footer: index columns on the deepest band */
.site-footer{background:var(--color-deep-2);color:var(--color-on-deep);padding-block:var(--space-3xl) var(--space-xl);border-top:var(--bar-accent) solid var(--color-action)}
.ft{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-xl) var(--gap-columns)}
.ft-brand{grid-column:1 / span 4;display:grid;gap:var(--space-lg);align-content:start}
.ft .btn{border-color:var(--color-rule-deep);color:var(--color-on-deep)}
.ft .btn:hover{background:var(--color-deep-3);color:var(--color-on-deep)}
.ft-col{grid-column:span 2;display:grid;gap:var(--space-sm);align-content:start}
.ft-col--wide{grid-column:span 4}
.ft-col h2{font-size:var(--text-sm);font-weight:600;color:var(--color-on-deep-2);letter-spacing:0;max-width:none}
.ft-col h2 a{font-weight:600;color:var(--color-on-deep-2)}
.ft-col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-xs)}
.ft-2col{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-lg)}
.ft-col a{font-weight:400;text-decoration:none;font-size:var(--text-sm);white-space:nowrap;color:var(--color-on-deep)}
.ft-col a:hover{text-decoration:underline;color:var(--color-action)}
.ft-legal{grid-column:1 / -1;border-top:var(--rule-hair) solid var(--color-rule-deep);padding-top:var(--space-lg);display:grid;gap:var(--space-xs);font-size:var(--text-sm)}
.ft-legal p{color:var(--color-on-deep-2);max-width:none}
.ft-legal a{color:var(--color-on-deep)}
@media (max-width:60rem){.ft-brand{grid-column:1 / -1}.ft-col,.ft-col--wide{grid-column:span 6}}
@media (max-width:40rem){.ft-col--wide{grid-column:1 / -1}}

/* mobile call bar */
.mcall{display:none}
@media (max-width:40rem){
 body{padding-bottom:calc(var(--control-h) + var(--space-lg))}
 .mcall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xs);position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);padding:var(--space-xs) var(--space-md) calc(var(--space-xs) + env(safe-area-inset-bottom));background:var(--color-deep);border-top:var(--bar-accent) solid var(--color-action)}
}

/* simple pages */
.credits td,.credits th{font-size:var(--text-sm)}
.credits tbody th{font-size:var(--text-sm)}
.credits a,tbody th a{white-space:nowrap}
.hero-links{list-style:none;margin:0;padding:var(--space-md) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-xs);border-top:var(--rule-hair) solid var(--color-rule-deep)}
.hero-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-md);border-radius:var(--radius-pill);background:var(--color-deep-3);color:var(--color-on-deep);font-size:var(--text-sm);font-weight:600;text-decoration:none;white-space:nowrap}
.hero-links a:hover{background:var(--color-deep-2);color:var(--color-action)}
@media (max-width:60rem){.hero-links{display:none}}
/* folded guide (only when LONGFORM_COLLAPSED is on in config.py) */
.guide{display:grid;gap:var(--space-sm);margin-top:var(--space-md)}
.guide details{background:var(--color-paper);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card)}
.guide summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-lg);padding:var(--space-lg) var(--space-xl);cursor:pointer;list-style:none}
.guide summary::-webkit-details-marker{display:none}
.guide summary h3{margin:0;font-size:var(--text-title)}
.guide summary::after{content:"+";font-size:var(--text-title);color:var(--color-muted)}
.guide details[open] summary::after{content:"\2212"}
.guide-body{display:grid;gap:var(--space-md);padding:0 var(--space-xl) var(--space-xl)}
.guide details:not([open])>.guide-body{display:none}

/* v3: honest trust strip under the home hero, slim line on inner heroes */
.trust{background:var(--color-deep-2);border-top:var(--rule-hair) solid var(--color-deep-3);padding-block:var(--space-lg)}
.trust-list{list-style:none;margin-block:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md) var(--gap-columns)}
.trust-list li,.trust-slim li{display:flex;gap:var(--space-sm);align-items:baseline;color:var(--color-on-deep);font-weight:600}
.trust-list li::before,.trust-slim li::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--color-action);flex:none}
@media (max-width:60rem){.trust-list{grid-template-columns:repeat(2,minmax(0,1fr));font-size:var(--text-sm)}}
.trust-slim{list-style:none;padding:0;margin:var(--space-lg) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-lg);font-size:var(--text-sm)}
.trust-slim li{font-weight:400;color:var(--color-on-deep-2)}
.trust-slim li::before{width:8px;height:8px}

/* v3: triage, both cards span the right side; symptoms sit two across so the cards balance */
.triage-head{grid-row:1 / span 2}
.triage-col{grid-column:5 / span 8}
.triage-col ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-xl);border-top:0}
.triage-col li{border-top:var(--rule-hair) solid var(--color-rule);border-bottom:0}
.triage-note{border-left:var(--bar-accent) solid var(--color-ok);padding-left:var(--space-md);color:var(--color-ink-2);max-width:60ch}
@media (max-width:68rem){.triage-head{grid-row:auto}.triage-col{grid-column:1 / -1}}
@media (max-width:40rem){.triage-col ul{grid-template-columns:minmax(0,1fr)}}

/* v3: tighter bands, flat second aside, split services index on city pages */
.section--tight{padding-block:var(--space-3xl)}
.aside--flat{position:static}
.places--split .head{grid-column:1 / span 4;align-self:start;display:grid;gap:var(--space-sm)}
.places--split .head h2{margin-bottom:var(--space-md)}
.places--split .ruled{grid-column:5 / -1;columns:1}
@media (max-width:60rem){.places--split .head,.places--split .ruled{grid-column:1 / -1}}

/* v3: white-background product shots show whole, never cropped into blank strips */
.photo.photo--cutout img,.prose .photo.photo--cutout img{aspect-ratio:auto;object-fit:contain}

/* v4: city-specific local facts, set apart from the guide copy */
.prose .local{border-left:var(--bar-accent) solid var(--color-accent);padding:var(--space-md) 0 var(--space-md) var(--space-lg);margin-block:var(--space-lg);display:grid;gap:var(--space-sm)}
.prose .local .src{font-size:var(--text-sm);color:var(--color-muted)}