/* site.css: the trade site's own layout and the style axis. Loads after lib/tokens.css and lib/components.css, before motion.css and accent.css.
   Type, buttons, fields, cards, accordion, sticky bar and the reset come from the library; this file carries the site's composition and the clean, editorial and warm layers. 2026-09-25.
   Balance pass 2026-09-25 (the balance audit, decisions 3 to 5): same-kind pairs only, section heads one column, explicit column counts with minmax(0,1fr) everywhere, notes inside their grids, every gap on the --s-* scale. */
@font-face{font-family:"Source Serif 4";src:url(/assets/fonts/source-serif-4.woff2) format("woff2");font-weight:200 900;font-display:swap}

:root{--paper:#eef1f4;--paper-2:#e3e8ed;--ink:#10202e;--graphite:#3b4a58;--mute:#5e6c79;--line:rgba(16,32,46,.14);--line-strong:rgba(16,32,46,.32);--accent:#a15826;--accent-on-dark:#b47b54;--accent-ink:#fff;--plate:#10202e;--plate-ink:#eef1f4;--radius:8px}
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
a{color:inherit}
[hidden]{display:none!important}
.showroom{background:var(--paper-2);color:var(--graphite);font-size:13.5px;line-height:1.45;padding:8px 14px;text-align:center;border-bottom:1px solid var(--line)}.showroom a{font-weight:700}
.util{background:var(--ink);color:var(--paper);font-size:13.5px}.util .wrap{display:flex;justify-content:space-between;gap:16px;min-height:36px;align-items:center}.util a{text-decoration:none;font-weight:600}
.top{position:sticky;top:0;z-index:20;background:#eef1f4;border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px}
.brand{font-family:"Source Serif 4",Georgia,serif;font-weight:700;font-size:22px;letter-spacing:-.01em;text-decoration:none;min-width:0;overflow-wrap:anywhere;line-height:1.15;display:inline-flex;align-items:center;min-height:44px}
.brand img{height:40px;width:auto}
.nav{display:flex;gap:var(--s-1);flex-wrap:wrap;justify-content:center;flex:1}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;color:var(--graphite);font-weight:600;border-radius:6px;font-size:15px}
.nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.hdr-actions{display:flex;gap:var(--s-3);align-items:center}
.phone{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:6px;border:1.5px solid var(--line-strong);font-weight:700;text-decoration:none;white-space:nowrap}
.phone.solid{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.kick{margin-bottom:var(--s-3)}
/* A kicker printed below a heading (the heading-order fix put it under the h1) keeps the --s-3 token of air above it, on every hero, at every width. */
h1+.kick{margin-top:var(--s-3)}
h1{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:clamp(38px,5.2vw,66px);line-height:1.02;letter-spacing:-.02em;max-width:16ch;text-wrap:balance}
h2{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:clamp(28px,3.4vw,42px);line-height:1.08;letter-spacing:-.015em;margin-bottom:12px;text-wrap:balance}
h3{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:22px;line-height:1.15;margin-bottom:6px}
.lead{line-height:1.55;max-width:56ch;margin-top:var(--s-4)}
.lead a{font-weight:600}
p+p{margin-top:12px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero.on-dark .btn.ghost{border-color:rgba(255,255,255,.5);color:#fff}
.rating{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin-top:22px;font-weight:600;color:var(--graphite)}
.rating .stars{color:var(--accent);letter-spacing:2px}
.hero.on-dark .rating{color:rgba(255,255,255,.85)}.hero.on-dark .rating .stars{color:var(--accent-on-dark)}
.badges{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);margin-top:26px;padding-top:22px;border-top:1px solid var(--line);color:var(--graphite);font-weight:600}
.badges li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--accent);margin-right:10px;vertical-align:middle}
.hero.on-dark .badges{border-top-color:rgba(255,255,255,.2);color:rgba(255,255,255,.85)}
/* hero: proof-first (full-bleed photo or color panel) */
.hero{position:relative;padding:72px 0 64px;border-bottom:1px solid var(--line)}
/* Hero headlines balance their lines so a short last word or a lone period never sits on its own line. */
.hero h1{text-wrap:balance}
.hero.on-dark{color:#fff;background:var(--ink);isolation:isolate;min-height:min(78vh,760px);display:flex;align-items:center}
.hero.on-dark .kick{color:var(--accent-on-dark)}.hero.on-dark .lead{color:rgba(255,255,255,.85)}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;display:block}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,32,46,.82) 0%,rgba(16,32,46,.55) 55%,rgba(16,32,46,.25) 100%)}
.hero-media video{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
.hero-media.playing video{opacity:1}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.hero-media.zoom img{transition:transform 14s linear}.hero:hover .hero-media.zoom img{transform:scale(1.05)}}
.hero-copy{max-width:640px}
/* hero: showcase split */
.hero.split{display:block;padding:56px 0} /* display:block undoes lib components.css .split (a two-column grid on the section itself), so the .wrap below gets the full width */
.hero.split .wrap{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--s-7);align-items:center}
.hero.split .hero-media{position:relative;inset:auto;z-index:0;border-radius:var(--radius);aspect-ratio:3/2}
.hero.split .hero-media::after{display:none}
.hero.split .phone-text{display:inline-block;margin-left:14px;font-weight:700;text-decoration:none;min-height:44px;line-height:44px}
/* hero: plate (photo-free) */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:var(--s-7);align-items:center}
.plate{background:var(--plate);color:var(--plate-ink);border-radius:10px;padding:26px 28px 24px;box-shadow:0 30px 60px -30px rgba(16,32,46,.55)}
.plate-kick{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-on-dark);font-weight:700;margin-bottom:14px}
.plate dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 var(--s-4)}
.plate dt{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--plate-ink) 78%,var(--plate));padding:11px 0;border-top:1px solid color-mix(in srgb,var(--plate-ink) 14%,transparent)}
.plate dd{font-family:"Source Serif 4",Georgia,serif;font-size:19px;padding:9px 0;border-top:1px solid color-mix(in srgb,var(--plate-ink) 14%,transparent);overflow-wrap:anywhere}
.plate dt:first-of-type,.plate dd:first-of-type{border-top:0}
.plate-call{display:flex;justify-content:center;align-items:center;min-height:52px;margin-top:18px;border-radius:6px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:19px;text-decoration:none}
/* booking strip */
.book{background:var(--accent);color:var(--accent-ink);padding:18px 0}
.book form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.8fr) auto;gap:var(--s-3);align-items:end}
.book label{display:flex;flex-direction:column;gap:var(--s-1);font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.book input,.book select{font:inherit;font-size:16px;min-height:48px;padding:0 12px;min-width:0;width:100%;border-radius:6px;border:1px solid rgba(255,255,255,.35);background:#fff;color:var(--ink)}
.book .btn{min-height:48px;background:var(--ink);color:#fff}
.book-phone{display:none}
section{padding:clamp(48px,7vw,80px) 0}
/* chrome wrappers are sections for the landmark, not for the rhythm: the showroom notice and the utility bar keep their own compact padding */
section.showroom-notice,section.util{padding:0}
/* Section heads are one column (balance audit 2026-09-25, decision 3): the h2, then the lead capped at 56ch. A heading beside a paragraph was never a same-kind pair. */
.head{margin-bottom:28px}.head .lead{margin-top:0;max-width:56ch}
/* services */
/* Every grid below names its column count with minmax(0,1fr): auto-fit can leave a 0px track and a bare 1fr can widen past the container (balance audit 2026-09-25). The renderer adds cols-N from the item count. :where() keeps the variants at one class of specificity so the width rules further down still win. */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.cards:where(.cols-1){grid-template-columns:minmax(0,1fr)}.cards:where(.cols-2){grid-template-columns:repeat(2,minmax(0,1fr))}.cards:where(.cols-3,.cols-6){grid-template-columns:repeat(3,minmax(0,1fr))}.cards:where(.cols-5){grid-template-columns:repeat(5,minmax(0,1fr))}
.card{background:#fff;border-radius:var(--radius);padding:22px;gap:0}
.card p{color:var(--graphite);margin-top:6px}
.card .link{display:inline-flex;align-items:center;min-height:24px;margin-top:10px}
.board{list-style:none;border-top:1px solid var(--line-strong);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-7)}.board>li:last-child:nth-child(odd){grid-column:1/-1}
.board li{padding:22px 0;border-bottom:1px solid var(--line)}
.board b{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:23px;line-height:1.15}
.board p{color:var(--graphite);margin-top:6px}
.svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6);padding:28px 0;border-top:1px solid var(--line)}.svc.solo{grid-template-columns:minmax(0,1fr)}.svc p{color:var(--graphite)}
/* steps, band, reviews, gallery */
.howto{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.three{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6)}
ol.three li{padding-top:14px;border-top:2px solid var(--ink)}
.three .n{font-family:"Source Serif 4",Georgia,serif;font-size:40px;line-height:1;color:var(--accent);display:block;margin-bottom:10px}
.three b{display:block;font-size:19px;margin-bottom:6px}.three p{color:var(--graphite)}
/* Reviews band, unpaired (decision 3): the reviews block is the section head and spans the row, the quotes sit under it, and Where we work is one full-row line under the quotes. */
.where{margin-top:40px}
.big{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(22px,2.4vw,30px);line-height:1.25}
.reviews .score{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(22px,2.4vw,30px);line-height:1.25;margin:0 0 10px}
.reviews .score b{font-size:1.25em;color:var(--accent)}
.reviews a{text-decoration:underline;text-underline-offset:3px;display:inline-block;min-height:24px;line-height:24px}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.quotes:where(.cols-1){grid-template-columns:minmax(0,1fr)}.quotes:where(.cols-2){grid-template-columns:repeat(2,minmax(0,1fr))}
.quotes blockquote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;font-size:17px}
.quotes cite{display:block;margin-top:12px;font-style:normal;color:var(--mute);font-size:14px}
.gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.gallery:where(.cols-1){grid-template-columns:minmax(0,1fr)}.gallery:where(.cols-2){grid-template-columns:repeat(2,minmax(0,1fr))}.gallery:where(.cols-3,.cols-6){grid-template-columns:repeat(3,minmax(0,1fr))}.gallery:where(.cols-5){grid-template-columns:repeat(5,minmax(0,1fr))}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pair figure{position:relative}.pair img{aspect-ratio:3/2;object-fit:cover;border-radius:6px}
.pair figcaption{position:absolute;left:10px;top:10px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:4px}
/* Portrait pair (decision 3): a picture beside copy, the text column centered on the picture. */
.portrait{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-6);align-items:center}.portrait>div{align-self:center}
.portrait img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius)}
/* estimate */
.estimate{background:var(--ink);color:var(--paper)}
.estimate .kick{color:var(--accent-on-dark)}.estimate .lead{color:color-mix(in srgb,var(--paper) 82%,var(--ink))}
/* Copy beside the form (decision 3): allowed, and both columns fill the row. */
.est-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7);align-items:stretch}
.form{display:flex;flex-direction:column;gap:var(--s-4)}
.form .field textarea{min-height:110px}.form .btn{align-self:flex-start;margin-top:4px}
.estimate .form .fine{color:color-mix(in srgb,var(--paper) 78%,var(--ink))}.form .consent a{color:inherit}
.sent{display:none;background:var(--paper);color:var(--ink);border-radius:var(--radius);padding:22px;margin-top:20px}.sent.show{display:block}
.contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6)}.contact.solo{grid-template-columns:minmax(0,1fr)}.contact .reach{margin:14px 0 22px}
.legal p,.legal li{color:var(--graphite)}.legal ul:not(.badges){margin:12px 0 12px 22px}.legal h2{margin-top:28px;font-size:24px}
.foot{border-top:1px solid var(--line);padding:40px 0 48px}
.footgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--s-6)}
.footcol .brand{font-size:20px;min-height:32px;margin-bottom:6px}.footcol p+p{margin-top:8px}
.foothead{font-size:var(--t-12);font-weight:800;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.footcol nav{display:flex;flex-direction:column;gap:var(--s-1)}.footcol nav a{text-decoration:none;font-weight:600;color:var(--graphite);min-height:28px;line-height:22px}
.footbottom{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px}
.footbottom nav{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4)}.footbottom nav a{font-weight:600;color:var(--graphite)}
/* body-text links get a 24px tap box. :where() keeps this at zero specificity so any classed link rule
   (the centered header's phone-text, the drawer rows, footer nav, the sticky bar) wins over it (B1, 2026-09-25) */
a:where(:not(.btn):not(.brand):not(.phone):not(.nav a):not(.plate-call)){display:inline-block;min-height:24px;padding:3px 0;line-height:18px}
/* The gallery stays two columns on phones (the 900px rule below): square tiles one per row made six 358px squares at 390, 2188px tall, where the live site had two 175px columns (balance verification, 2026-09-25). */
@media (max-width:900px){.hero-grid,.hero.split .wrap,.board,.est-grid,.svc,.contact,.portrait,.quotes{grid-template-columns:minmax(0,1fr)}.board>li:last-child:nth-child(odd){grid-column:auto}.three{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}.cards,.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.cards>:last-child:nth-child(odd),.gallery>:last-child:nth-child(odd){grid-column:1/-1}.book form{grid-template-columns:repeat(2,minmax(0,1fr))}.book .btn{grid-column:1/-1}.nav{display:none}.hero.split .wrap{display:flex;flex-direction:column-reverse}.footgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){html{scroll-padding-bottom:80px}.book form{grid-template-columns:minmax(0,1fr)}.book .btn{grid-column:auto}.ctabar{background:var(--ink);border-top:1px solid rgba(255,255,255,.15)}.hdr-actions .btn,.hdr-actions .phone,.hdr-actions .phone-text,.hdr-actions .phone-text.small{display:none}.hero{padding:44px 0 40px}.hero.on-dark{min-height:0}.util{display:none}.pair,.cards{grid-template-columns:minmax(0,1fr)}.footgrid{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}.footbottom{flex-direction:column;align-items:flex-start}}

/* ---------- Style axis (CATALOG.md). clean is the default above; set data-style on <html>. Same layers as demo.css, mapped to the site's selectors. ---------- */
[data-style="editorial"]{--paper:#f4f1ea;--paper-2:#ebe6dc;--ink:#151719;--graphite:#3a3d42;--mute:#63666c;--line:rgba(21,23,25,.16);--line-strong:rgba(21,23,25,.55);--plate:#151719;--plate-ink:#f4f1ea;--radius:0px}
[data-style="editorial"] .top{background:#f4f1ea}
[data-style="editorial"] .brand{font-weight:500;font-size:20px}
[data-style="editorial"] .nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--ink)}
[data-style="editorial"] .phone,[data-style="editorial"] .btn,[data-style="editorial"] .plate-call,[data-style="editorial"] .card img,[data-style="editorial"] .gallery img,[data-style="editorial"] .portrait img,[data-style="editorial"] .hero.split .hero-media,[data-style="editorial"] .form input,[data-style="editorial"] .form textarea,[data-style="editorial"] .quotes blockquote,[data-style="editorial"] .card{border-radius:0}
[data-style="editorial"] .btn.solid,[data-style="editorial"] .plate-call,[data-style="editorial"] .phone.solid{background:var(--ink);color:var(--paper)}
[data-style="editorial"] .btn.ghost{border-color:var(--ink)}
[data-style="editorial"] .kick{color:var(--ink);font-size:12px;letter-spacing:.24em;margin-bottom:22px}
[data-style="editorial"] h1{font-weight:300;font-size:clamp(44px,6.4vw,92px);line-height:.98;letter-spacing:-.035em;max-width:13ch}
[data-style="editorial"] h2{font-weight:400;font-size:clamp(32px,4vw,56px);letter-spacing:-.025em;line-height:1.02}
[data-style="editorial"] h3{font-weight:400;font-size:24px;letter-spacing:-.015em}
[data-style="editorial"] .lead{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(19px,1.6vw,23px);line-height:1.45;max-width:44ch}
[data-style="editorial"] .hero.split{padding:72px 0 64px;border-bottom:0}
[data-style="editorial"] .hero.split .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7);align-items:end}
[data-style="editorial"] .hero.split .hero-media{aspect-ratio:4/3}
[data-style="editorial"] .rating{color:var(--graphite)}[data-style="editorial"] .rating .stars{color:var(--accent)}
[data-style="editorial"] .card{background:transparent;border:0;border-top:1px solid var(--ink);padding:18px 0 0}
[data-style="editorial"] .cards{gap:var(--s-6)}
[data-style="editorial"] .howto{border:0}[data-style="editorial"] ol.three li{border-top:1px solid var(--ink);padding-top:18px}[data-style="editorial"] .three .n{font-weight:300;font-size:60px;color:var(--ink)}
[data-style="editorial"] .big,[data-style="editorial"] .reviews .score{font-weight:400;font-size:clamp(24px,2.8vw,36px);letter-spacing:-.02em}
[data-style="editorial"] .reviews .score b{color:var(--accent);font-weight:400}
[data-style="editorial"] .quotes blockquote{background:transparent;border:0;border-top:1px solid var(--ink);padding:18px 0 0;font-family:"Source Serif 4",Georgia,serif;font-size:19px}
[data-style="editorial"] .gallery{gap:8px}
[data-style="editorial"] .estimate .kick{color:rgba(244,241,234,.7)}
[data-style="editorial"] .estimate .form .btn.solid{background:var(--paper);color:var(--ink)}
[data-style="editorial"] .foot{border-top:1px solid var(--ink)}
[data-style="editorial"] .faq summary{font-family:"Source Serif 4",Georgia,serif;font-weight:500;font-size:20px}
[data-style="editorial"] a:focus-visible,[data-style="editorial"] button:focus-visible,[data-style="editorial"] input:focus-visible,[data-style="editorial"] textarea:focus-visible,[data-style="editorial"] summary:focus-visible{outline-color:var(--ink)}
@media (max-width:900px){[data-style="editorial"] .hero.split .wrap{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}[data-style="editorial"] .hero.split .hero-media{aspect-ratio:3/2}[data-style="editorial"] h1{font-size:clamp(40px,11vw,64px)}}
[data-style="warm"]{--paper:#f8f3ec;--paper-2:#f0e7da;--ink:#2a221c;--graphite:#4d423a;--mute:#72655a;--line:rgba(42,34,28,.14);--line-strong:rgba(42,34,28,.32);--plate:#2f2621;--plate-ink:#f8f3ec;--radius:16px}
[data-style="warm"] .top{background:#f8f3ec}
[data-style="warm"] .phone,[data-style="warm"] .btn,[data-style="warm"] .plate-call,[data-style="warm"] .book .btn{border-radius:999px}
[data-style="warm"] .card img,[data-style="warm"] .form input,[data-style="warm"] .form textarea,[data-style="warm"] .book input,[data-style="warm"] .book select{border-radius:12px}
[data-style="warm"] h1{font-weight:700;letter-spacing:-.025em}
[data-style="warm"] .card{transition:transform .18s ease,box-shadow .18s ease}
[data-style="warm"] .howto{border:0}[data-style="warm"] ol.three li{border-top:0;background:#fff;border-radius:16px;padding:22px 24px;transition:transform .18s ease,box-shadow .18s ease}[data-style="warm"] .three .n{font-size:34px}
[data-style="warm"] .quotes blockquote{border-radius:16px}
@media (hover:hover){[data-style="warm"] .card:hover,[data-style="warm"] ol.three li:hover{transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(42,34,28,.5)}}
@media (prefers-reduced-motion:reduce){[data-style="warm"] .card,[data-style="warm"] ol.three li{transition:none;transform:none}}

/* fence picker */
/* Preview beside the picker form (decision 3): both columns fill the row. */
.cfg-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s-6);align-items:stretch}
.cfg-view{position:relative;background:var(--paper-2);border-radius:var(--radius);overflow:hidden;min-height:280px}
.cfg-view canvas{display:block;width:100%}
.cfg-controls{display:flex;flex-direction:column;gap:var(--s-4)}
.cfg-controls label{display:flex;flex-direction:column;gap:var(--s-2);font-weight:600;font-size:14.5px}
.cfg-controls select{font:inherit;font-size:16px;min-height:50px;padding:0 12px;border:1px solid var(--line-strong);border-radius:6px;background:#fff;color:var(--ink)}
.cfg-turn{display:flex;gap:var(--s-3)}
.cfg-out{font-family:"Source Serif 4",Georgia,serif;font-size:20px}
@media (max-width:900px){.cfg-grid{grid-template-columns:minmax(0,1fr)}}
.reviews+.quotes{margin-top:40px}
.pair+.pair{margin-top:12px}
/* ---- Composition axis, 2026-09-22. Fonts first. ---- */
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-700.woff2) format("woff2");font-weight:700;font-display:optional}
@font-face{font-family:"Manrope";src:url(/assets/fonts/manrope-var.woff2) format("woff2");font-weight:200 800;font-display:optional}
@font-face{font-family:"Nunito";src:url(/assets/fonts/nunito-var.woff2) format("woff2");font-weight:200 1000;font-display:optional}
/* type families: the display face changes, the body stays Manrope (tokens.css) */
[data-type="condensed"] h1,[data-type="condensed"] h2,[data-type="condensed"] h3,[data-type="condensed"] .brand,[data-type="condensed"] .three .n,[data-type="condensed"] .plate dd{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-weight:700;letter-spacing:.01em;text-transform:uppercase}
[data-type="condensed"] h1{font-size:clamp(44px,6.4vw,84px);line-height:.94;max-width:19ch}
[data-type="condensed"] h2{font-size:clamp(30px,4vw,50px)}
[data-type="condensed"] .brand{font-size:26px}
[data-type="geometric"] h1,[data-type="geometric"] h2,[data-type="geometric"] h3,[data-type="geometric"] .brand,[data-type="geometric"] .three .n,[data-type="geometric"] .plate dd,[data-type="geometric"] .reviews .score,[data-type="geometric"] .big{font-family:"Manrope",system-ui,sans-serif;font-weight:800;letter-spacing:-.03em}
[data-type="geometric"] h1.giant{font-size:clamp(60px,13vw,168px);line-height:.9;max-width:none;letter-spacing:-.045em}
[data-type="rounded"] h1,[data-type="rounded"] h2,[data-type="rounded"] h3,[data-type="rounded"] .brand,[data-type="rounded"] .three .n,[data-type="rounded"] .plate dd,[data-type="rounded"] .big,[data-type="rounded"] .reviews .score{font-family:"Nunito",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em}
[data-type="rounded"] .btn,[data-type="rounded"] .phone,[data-type="rounded"] .card,[data-type="rounded"] .tiles li,[data-type="rounded"] .form input,[data-type="rounded"] .form textarea,[data-type="rounded"] .cfg-view,[data-type="rounded"] .quotes blockquote{border-radius:18px}
[data-type="rounded"] .btn{border-radius:999px}
/* dark scheme: near-black paper, light ink; every white surface follows the paper */
[data-scheme="dark"]{--paper:#111214;--paper-2:#1a1c20;--ink:#f2f2ee;--graphite:#d6d6d0;--mute:#a6a6a0;--line:rgba(255,255,255,.14);--line-strong:rgba(255,255,255,.42);--plate:#f2f2ee;--plate-ink:#111214}
[data-scheme="dark"] .top{background:#111214}
[data-scheme="dark"] .card,[data-scheme="dark"] .quotes blockquote,[data-scheme="dark"] .form input,[data-scheme="dark"] .form textarea,[data-scheme="dark"] .cfg-controls select,[data-scheme="dark"] .book input,[data-scheme="dark"] .book select{background:var(--paper-2);color:var(--ink);border-color:var(--line-strong)}
[data-scheme="dark"] .btn.solid{background:var(--accent);color:#111214}
[data-scheme="dark"] .btn.ghost{color:var(--ink);border-color:var(--line-strong)}
[data-scheme="dark"] .kick{color:var(--accent)}
[data-scheme="dark"] .util{background:var(--paper-2);color:var(--ink)}
[data-scheme="dark"] .ctabar{background:#000}
/* navigation: a button in the header bar (up to 1211px) and a drawer that site.js opens, traps focus in, and closes on Escape */
.menu-btn{display:none;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 12px;border:1.5px solid var(--line-strong);border-radius:var(--r-2);background:transparent;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.menu-bars{display:block;width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.menu-btn[aria-expanded="true"] .menu-bars{background:transparent;box-shadow:0 0 0 currentColor}
.drawer{position:fixed;inset:0;z-index:40;background:rgba(16,32,46,.55)}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);background:var(--paper);color:var(--ink);padding:16px 20px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s-4);box-shadow:var(--sh-xl);animation:drawer-in var(--d-base) var(--e-out)}
@keyframes drawer-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.drawer-title{font-weight:700;overflow-wrap:anywhere}
.menu-close{min-height:44px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-2);background:transparent;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.drawer-nav{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.drawer .drawer-nav a{display:flex;align-items:center;min-height:52px;padding:0 4px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:600;font-size:var(--t-16);line-height:1.3}
.drawer .drawer-nav a[aria-current]{color:var(--accent)}
.drawer-actions{display:flex;flex-direction:column;gap:var(--s-3)}.drawer-actions .btn{width:100%}
html.drawer-open{overflow:hidden}
@media (max-width:900px){.menu-btn{display:inline-flex}}
/* The nav shows only once the container is at its full width (Saturn B2, 2026-09-26): 1180px plus two 16px gutters, so 1212px. Below
   that the menu takes over on every brand. Five to seven links beside the brand and the header actions wrapped to two rows between
   901 and 1100px on three showrooms, and at 1101 on the realty fixture after a first fix at 1100; a fixed width guessed per header
   keeps missing one. From 1212 up the header is the same layout as at 1920, so the widths the layout gate already runs (1280, 1440,
   1920) cover it, and layout.mjs probes 1212 as well. A centered header keeps its own nav row. */
@media (max-width:1211px){.top:not(.centered) .nav{display:none}.top:not(.centered) .menu-btn{display:inline-flex}}
/* below 640 the header holds the brand, the phone and the menu; the menu goes icon-only so the brand keeps its width */
@media (max-width:640px){.menu-btn{padding:0;width:44px;justify-content:center}.menu-text{display:none}.brand{font-size:18px}[data-type="condensed"] .brand{font-size:22px}}
/* headers */
.top.centered .brandrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:64px;gap:12px}
.top.centered .brandrow .brand{justify-self:center;text-align:center}
.top.centered .brandrow .phone-text{justify-self:start;text-decoration:none;font-weight:700;min-height:44px;line-height:44px}
.top.centered .brandrow .btn.small{justify-self:end;min-height:44px;padding:0 16px;font-size:14.5px}
.top.centered .nav{display:flex;justify-content:center;gap:var(--s-5);border-top:1px solid var(--line);min-height:44px;align-items:center}
.top.minimal .bar{min-height:76px}
.phone-text.small{font-size:14.5px;color:var(--graphite);text-decoration:none;font-weight:600;min-height:44px;display:inline-flex;align-items:center;line-height:1.3}
/* hero: photo below-copy (one big picture, words under it) */
.hero.photo-below{padding:28px 0 56px;border-bottom:0}
.hero.photo-below .hero-media.still{position:relative;inset:auto;z-index:0;aspect-ratio:21/9;border-radius:var(--radius);overflow:hidden;margin-bottom:34px}
.hero.photo-below .hero-media.still::after{display:none}
.hero.photo-below .hero-copy{max-width:760px}
.hero.photo-below h1{font-size:clamp(40px,5.6vw,72px)}
/* hero: statement (a sentence, no photo) */
.hero.statement{padding:96px 0 72px;border-bottom:0}
.hero.statement h1{font-size:clamp(34px,4.6vw,60px);font-weight:500;max-width:22ch;line-height:1.12;letter-spacing:-.015em}
.hero.statement .lead{max-width:60ch;margin-top:18px}
.projects{padding-top:0}
.projgrid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.projgrid li img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;border-radius:var(--radius);margin-bottom:10px}
.projgrid b{display:block;font-size:18px}
.projgrid span{color:var(--mute);font-size:14.5px}
/* hero: metrics (giant words, a bar of numbers) */
.hero.metrics-hero{padding:72px 0 56px;border-bottom:0}
/* The giant headline spans the container: .hero-copy is capped at 640px for every other hero, and inside that cap "handled." at 168px broke into a third line with the period alone (Saturn round 3, finding 1). The lead keeps its own 56ch cap. */
.hero.metrics-hero .hero-copy{max-width:none}
.hero.metrics-hero .lead{max-width:56ch;margin-top:20px}
/* Figures row (decision 4): an explicit count with minmax(0,1fr), so no figure can widen a track past the container; the sample note is an item of the list spanning every column, so it belongs to all the figures. */
.metrics{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px;border-top:1px solid var(--line-strong);padding-top:22px}.metrics:where(.cols-1){grid-template-columns:minmax(0,1fr)}.metrics:where(.cols-2){grid-template-columns:repeat(2,minmax(0,1fr))}.metrics:where(.cols-3){grid-template-columns:repeat(3,minmax(0,1fr))}.metrics .metrics-note{grid-column:1/-1;margin-top:var(--s-2);padding-top:var(--s-3);border-top:1px solid var(--line-strong)}
.metrics b{display:block;font-size:clamp(30px,4vw,52px);line-height:1;font-variant-numeric:tabular-nums}
.metrics span{display:block;color:var(--mute);font-size:14px;margin-top:6px}
/* hero: picker (the words, then the 3D fence directly under) */
.hero.picker-hero{padding:56px 0 24px;border-bottom:0}
.hero.picker-hero h1{font-size:clamp(40px,5.6vw,72px)}
.tiles-sec{padding-top:0}
.tiles{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
/* A note under a figures row lives inside the grid and spans every column (decision 4). */
.grid-note{grid-column:1/-1}.tiles li.grid-note{background:transparent;border:0;border-radius:0;padding:var(--s-2) 0 0}
.tiles li{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.tiles b{display:block;font-size:18px}
.tiles .per{display:block;color:var(--accent);font-weight:800;font-size:22px;margin:6px 0 4px}
.tiles .per small{color:var(--mute);font-weight:600;font-size:13px}
.tiles p{color:var(--graphite);font-size:14.5px}
/* hero: tiers (price form left, ladder right) */
.hero.tiers-hero{padding:48px 0 40px}
/* Tiers hero (decision 3): copy paired with the price ladder, centered on each other. */
.split2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s-7);align-items:center}
.ladder{list-style:none;display:grid;gap:12px;margin-top:8px}
.ladder li{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:baseline}
.ladder li.feat{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.ladder b{font-size:19px}
.ladder .price{font-weight:800;font-size:22px;color:var(--accent);font-variant-numeric:tabular-nums}
.ladder p{grid-column:1/-1;color:var(--graphite);font-size:14.5px}
.season{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.seasonlist{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:8px}
.seasonlist b{display:block;color:var(--accent);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.seasonlist span{font-size:15px;color:var(--graphite)}
/* process rail */
.rail{padding-top:0}
.railsteps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-4);counter-reset:none}
.railsteps li{border-top:2px solid var(--ink);padding-top:12px}
.railsteps .n{display:block;font-family:"Source Serif 4",Georgia,serif;font-size:30px;color:var(--accent);line-height:1;margin-bottom:8px}
.railsteps b{display:block;font-size:16.5px;margin-bottom:4px}
.railsteps p{color:var(--graphite);font-size:14.5px}
@media (max-width:900px){.projgrid,.tiles,.railsteps{grid-template-columns:repeat(2,minmax(0,1fr))}.railsteps>li:last-child:nth-child(odd){grid-column:1/-1}.metrics,.seasonlist{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics:where(.cols-3){grid-template-columns:repeat(3,minmax(0,1fr))}.split2{grid-template-columns:minmax(0,1fr)}.top.centered .brandrow{grid-template-columns:1fr auto auto}.top.centered .brandrow .brand{justify-self:start;text-align:left}.top.centered .brandrow .phone-text{display:none}.top.centered .nav{display:none}}
/* phones: the centered header stacks, brand and Menu on the first row, the button on its own row beneath (B1, 2026-09-25) */
@media (max-width:640px){.top.centered .brandrow{grid-template-columns:1fr auto;padding:10px 0}.top.centered .brandrow .btn.small{grid-column:1/-1;justify-self:start;order:1}}
@media (max-width:640px){.projgrid,.tiles,.railsteps{grid-template-columns:minmax(0,1fr)}.hero.photo-below .hero-media.still{aspect-ratio:4/3}[data-type="geometric"] h1.giant{font-size:clamp(48px,15vw,84px)}[data-type="condensed"] h1{font-size:clamp(42px,12vw,64px)}}
[data-scheme="dark"] .ctabar a.go{color:#111214}
[data-scheme="dark"] .ctabar a{color:#f2f2ee}
[data-scheme="dark"] .estimate .kick{color:var(--plate-ink)}

/* every grid and flex child in this stylesheet may shrink below its content, so one long word,
   one wide image or one long email address can never push a column past the viewport */
.hero-grid>*,.hero.split .wrap>*,.head>*,.board>*,.est-grid>*,.svc>*,.contact>*,.portrait>*,.cards>*,.three>*,.gallery>*,.quotes>*,.pair>*,.split2>*,.projgrid>*,.tiles>*,.railsteps>*,.metrics>*,.ladder>*,.seasonlist>*,.cfg-grid>*{min-width:0}

/* Rating directly under the hero headline (2026-09-25): the proof sits in the first screen. */
h1 + .rating { margin-top: var(--s-3); }
.rating + .kick { margin-top: var(--s-3); }
/* Controls inherit the face; the desktop photo-below hero keeps its headline in the first screen (Saturn 2026-09-25). */
button,input,select,textarea{font:inherit}
@media (min-width:900px){.hero.photo-below .hero-media.still{aspect-ratio:auto;max-height:40vh}.hero.photo-below .hero-media.still img{height:100%;object-fit:cover}}
/* Every in-page landing (#estimate, #pay, #book) clears the sticky header (Saturn 2026-09-25: the money button landed a decapitated form). */
html{scroll-padding-top:128px}
@media (max-width:640px){html{scroll-padding-top:136px}}

/* The quote band and the plate take their text colours from the scheme tokens (2026-09-26, Saturn: on the dark scheme the band
   turns light and the hard-coded near-white lead and consent lines read 1.01:1). */
/* The step list rules are scoped to ol.three (2026-09-26): the reviews pattern uses the library grid ul.grid.three, which met them. */
/* Phase 2 compendium sections (2026-09-26). compendium.css loads before this file, so the rules below are the site's layer over the
   components: spacing the old markup had, and the style axis (editorial, warm, rounded, dark) carried onto the new classes. */
.metrics-hero .stats{margin-top:44px;border-top:1px solid var(--line-strong);padding-top:22px}
.metrics-hero .stats b{font-size:clamp(30px,4vw,52px)}
.badges li.badge::before{content:none}
.hero.on-dark .badges li.badge{color:var(--ink)}
.reviews .review-card{background:#fff}
.estimate .lead-form{padding-block:0}
section.booking{padding:var(--s-6) 0}
.booking .wrap>h2+.form{margin-top:var(--s-4)}
.legal-toc a{display:inline-flex;align-items:center;min-height:44px}
.price-band .tiers-list{margin-top:0}
[data-style="editorial"] .review-card{background:transparent;border:0;border-top:1px solid var(--ink);border-radius:0;padding:18px 0 0}
[data-style="editorial"] .review-quote p{font-family:"Source Serif 4",Georgia,serif;font-size:19px}
[data-style="editorial"] .tier,[data-style="editorial"] .booking input,[data-style="editorial"] .booking select{border-radius:0}
[data-style="warm"] .review-card,[data-style="warm"] .tier{border-radius:16px}
[data-style="warm"] .booking input,[data-style="warm"] .booking select{border-radius:12px}
[data-type="rounded"] .review-card,[data-type="rounded"] .tier{border-radius:18px}
[data-scheme="dark"] .review-card,[data-scheme="dark"] .tier{background:var(--paper-2);color:var(--ink);border-color:var(--line-strong)}
/* the booking strip sits on --paper-2, where --mute misses 4.5:1 on the clean palette (axe on a scratch booking site, 2026-09-26) */
.booking .help,.booking .fine{color:var(--graphite)}
/* Reassurance under the quote form (2026-09-26, operating-system review item 1): the facts a visitor doubts before sending, as badges on the dark form band. */
.lead-form-proof{margin-top:var(--s-4)}
.estimate .lead-form-proof .badge{color:var(--paper);background:transparent;border:1px solid color-mix(in srgb,var(--paper) 45%,var(--ink))}
/* Team Desk template (2026-09-26, Phase 3; structure from Studio/reference/kw-rp): brokerage bar with socials, area-name header, one button. */
.team-util .wrap{min-height:36px}
.team-socials{display:flex;gap:var(--s-1);align-items:center}
a.social{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-1);color:inherit}
a.social:hover{background:color-mix(in srgb,currentColor 14%,transparent)}
a.social:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.team-top .bar{gap:var(--s-4)}
.team-area{display:block;width:1px;align-self:stretch;margin-block:18px;background:var(--line-strong)}
.team-area-name{font-size:17px;font-weight:600;color:var(--graphite);white-space:nowrap;margin-right:auto}
.team-hero .hero-copy{max-width:36rem}
.team-numbers,.team-listings,.team-media,.team-vendors,.team-office{padding-block:var(--s-8)}
.team-numbers h2,.team-listings h2,.team-media h2,.team-vendors h2,.team-office h2{margin-bottom:var(--s-5)}
.team-vendors .badges{margin-top:var(--s-4)}
.team-listings .card h3 a,.team-media .card h3 a{color:inherit;text-underline-offset:3px}
.team-office-socials{display:flex;gap:var(--s-2);margin-top:var(--s-3)}
.team-office-socials a.social{width:40px;height:40px;border:1px solid var(--line)}
.float-mark{position:fixed;left:16px;bottom:16px;z-index:15;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:13px;font-weight:600;text-decoration:none;box-shadow:0 6px 20px -8px rgba(0,0,0,.45)}
.float-mark:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:1100px){.team-area,.team-area-name{display:none}}
@media (max-width:900px){.float-mark{display:none}}
/* Tablet header (2026-09-26, belt proof defect 1): between 641 and 900px the brand, the phone, the action and Menu share one row.
   The phone keeps its place as "Call" (the sticky call bar appears only at 640 and below) and no control wraps. */
@media (max-width:900px){.hdr-actions .phone .num{display:none}.hdr-actions .phone,.hdr-actions .btn,.menu-btn{white-space:nowrap;flex-shrink:0}}

/* The sticky header is a solid colour (2026-09-26): the frosted blur was the gate's own 'glass card' tell on every site the belt built. */
/* Tablet header, second rule (2026-09-26, five module lanes and a 33-character name): between 641 and 900px the action button leaves
   the header (the hero and the menu drawer carry it; the sticky bar takes over at 640) so the business name keeps one line. */
@media (min-width:641px) and (max-width:900px){.hdr-actions .btn.solid{display:none}.bar .brand{white-space:nowrap}}
/* A long business name (over 20 characters, body data-brand="long", 2026-09-26): on a phone the name sets a size smaller. The menu
   used to take over up to 1180px for these names only; the rule above now does it up to 1211px for every name. */
@media (max-width:640px){[data-brand="long"] .bar .brand{font-size:16px;line-height:1.2}}
/* Review disclosures (2026-09-26, FTC 16 CFR 255.2(b) and 255.5): the typical-results line and a reviewer's connection sit under the quote. */
.review-typical,.review-connection{margin-top:var(--s-2);font-size:var(--t-14);color:var(--graphite)}

/* page module careers */
.car-block{padding-block:var(--s-7) 0}
.car-block .fine{margin-top:var(--s-2)}
.car-col>*{max-width:760px}
.car-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-7);align-items:center}
.car-split>*{min-width:0}
.car-list{list-style:none;padding:0;margin:var(--s-4) 0 0;display:grid;gap:var(--s-2)}
.car-list li{padding-left:1.4em;position:relative}
.car-list li::before{content:"";position:absolute;left:0;top:.62em;width:.55em;height:2px;background:var(--accent)}
.car-photo{margin:0}
.car-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-2)}
.car-jobs{list-style:none;padding:0;margin:var(--s-4) 0 0;display:grid;gap:0}
.car-job{padding-block:var(--s-5);border-top:1px solid var(--line)}
.car-job:last-child{border-bottom:1px solid var(--line)}
.car-job h3{font-size:var(--t-24);line-height:var(--lh-snug)}
.car-job .car-pay{font-weight:700;font-size:var(--t-20);margin-top:var(--s-2)}
.car-job .car-meta{color:var(--mute);font-size:var(--t-14);margin-top:var(--s-1)}
.car-job p+p{margin-top:var(--s-2)}
.car-job .link-standalone{margin-top:var(--s-1)}
.car-steps{list-style:none;padding:0;margin:var(--s-4) 0 0;display:grid;gap:var(--s-4)}
.car-steps li{padding-top:var(--s-3);border-top:1px solid var(--line)}
.car-steps .n{display:block;font-family:"Source Serif 4",Georgia,serif;font-size:28px;line-height:1;color:var(--accent);margin-bottom:var(--s-2)}
.car-steps b{display:block}
.car-steps p{color:var(--graphite);margin-top:var(--s-1)}
.car-hero .breadcrumb{margin-bottom:var(--s-4)}
.car-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;gap:var(--s-2) var(--s-5);margin:var(--s-5) 0 0;padding-top:var(--s-4);border-top:1px solid var(--line);max-width:56ch}
.car-facts dt{font-weight:700;color:var(--mute);font-size:var(--t-14);line-height:var(--lh-body)}
.car-facts dd{margin:0;min-width:0}
.car-facts dd.car-pay{font-weight:700}
.car-block p+p{margin-top:var(--s-3)}
.car-apply{padding-bottom:var(--s-7)}
.car-apply .actions{margin-top:var(--s-5)}
.car-apply .actions+p{margin-top:var(--s-5)}
.car-dates{margin-top:var(--s-5);color:var(--graphite)}
@media (max-width:900px){.car-split{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}}
@media (max-width:640px){.car-job h3{font-size:var(--t-20)}.car-facts{grid-template-columns:minmax(0,1fr);gap:0}.car-facts dd+dt{margin-top:var(--s-2)}}

/* page module case-study */
.cs-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s-6);align-items:center}
.cs-hero-grid>*{min-width:0}
.cs-hero-media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-2);display:block}
.cs-hero .breadcrumb{margin-bottom:var(--s-4)}
.cs-hero .fine{margin-top:var(--s-3)}
.cs-block{padding-block:var(--s-7) 0}
.cs-words{margin:var(--s-4) 0 0;padding-left:var(--s-4);border-left:3px solid var(--accent);font-family:"Source Serif 4",Georgia,serif;font-size:var(--t-20);line-height:1.45}
.cs-words+.fine{margin-top:var(--s-2)}
.cs-list{list-style:none;padding:0;margin:var(--s-4) 0 0}
.cs-list li{padding:var(--s-3) 0;border-top:1px solid var(--line)}
.cs-list b{display:block}
.cs-list p{color:var(--graphite);margin-top:var(--s-1)}
.cs-did li{padding-left:1.4em;position:relative}
.cs-did li::before{content:"";position:absolute;left:0;top:calc(var(--s-3) + .62em);width:.55em;height:2px;background:var(--accent)}
.cs-timeline{list-style:none;padding:0;margin:var(--s-4) 0 0 6px;border-left:2px solid var(--line-strong)}
.cs-timeline li{position:relative;padding:0 0 var(--s-5) var(--s-5)}
.cs-timeline li:last-child{padding-bottom:0}
.cs-timeline li::before{content:"";position:absolute;left:-7px;top:.4em;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.cs-timeline time{display:block;font-weight:700}
.cs-timeline p{color:var(--graphite);margin-top:2px}
.cs-stats{margin-top:var(--s-5)}
.cs-source{margin-top:var(--s-2)}
.cs-photos{padding-bottom:0}
.cs-photos .fine{margin-bottom:var(--s-4)}
.cs-stage+.cs-stage{margin-top:var(--s-6)}
.cs-stage h3{margin-bottom:var(--s-3)}
.cs-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-4)}
.cs-grid>li{grid-column:span 2;min-width:0}
.cs-grid>li.w3{grid-column:span 3}
.cs-grid>li.w6{grid-column:1/-1}
.cs-grid img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-2);display:block}
.cs-grid>li.w6 img{aspect-ratio:2/1}
.cs-grid .lightbox-trigger{display:block}
.cs-said .grid{margin-top:var(--s-4)}
.cs-rel{list-style:none;padding:0;margin:var(--s-3) 0 0;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5)}
.cs-related{padding-bottom:var(--s-7)}
.cs-index h2{margin-bottom:var(--s-5)}
.cs-cards{gap:var(--s-6) var(--s-5)}
.cs-card{display:flex;flex-direction:column}
.cs-card h3{margin-top:var(--s-3);line-height:1.25}
.cs-card h3 a{text-underline-offset:3px;text-decoration-thickness:1px}
.cs-stats b,.cs-stats span{overflow-wrap:normal;word-break:normal;hyphens:manual}
.cs-card p{color:var(--graphite);margin-top:var(--s-1)}
.cs-card .cs-meta{margin-top:auto;padding-top:var(--s-2);color:var(--mute);font-size:var(--t-14)}
@media (max-width:900px){.cs-hero-grid{grid-template-columns:minmax(0,1fr)}.cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-grid>li,.cs-grid>li.w3{grid-column:auto}.cs-grid>li.wl,.cs-grid>li.w6{grid-column:1/-1}}
@media (max-width:640px){.cs-grid{grid-template-columns:minmax(0,1fr)}.cs-grid>li.wl{grid-column:auto}.cs-grid>li.w6 img{aspect-ratio:3/2}}

/* page module service-area-town */
.town-hero .breadcrumb{margin-bottom:var(--s-4)}
.town-block{padding-block:var(--s-7) 0}
.town-measure{max-width:760px}
.town-block h2+.cards,.town-block h2+.town-jobs,.town-block h2+.town-grid,.town-block h2+.fine{margin-top:var(--s-4)}
.town-block .fine+.town-jobs,.town-block .fine+.town-grid{margin-top:var(--s-3)}
.town-jobs,.town-grid{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-4);grid-template-columns:repeat(2,minmax(0,1fr))}
.town-jobs.n3,.town-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.town-jobs.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.town-grid.c1{grid-template-columns:minmax(0,1fr)}
.town-grid.c1 .town-card{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.town-grid.c1 .town-card-media picture{display:block;height:100%}
.town-grid.c1 .town-card-media img{height:100%;min-height:220px}
.town-grid.c1 .town-card-copy{align-self:center}
.town-jobs figure{margin:0}
.town-jobs img,.town-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.town-jobs img{border-radius:var(--r-2)}
.town-jobs figcaption{margin-top:var(--s-2);font-size:15px;line-height:1.45;color:var(--graphite)}
.town-job-where{display:block;font-weight:600;color:var(--ink)}
.town-card{background:#fff;border-radius:var(--r-2);overflow:hidden;display:flex;flex-direction:column}
.town-card-copy{padding:var(--s-4) var(--s-5) var(--s-5)}
.town-card-copy p{color:var(--graphite);margin-top:var(--s-1)}
.town-card h3,.town-block .card h3{line-height:1.25}
.town-card h3 a,.town-block .card h3 a{text-underline-offset:3px;text-decoration-thickness:1px}
.town-facts{margin:var(--s-4) 0 0;border-top:1px solid var(--line)}
.town-facts>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-4);padding-block:var(--s-3);border-bottom:1px solid var(--line)}
.town-facts dt{font-weight:600}
.town-facts dd{margin:0}
.town-notes p{margin-top:var(--s-4);max-width:68ch}
.town-links{list-style:none;padding:0;margin:var(--s-4) 0 0;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5)}
.town-others p{margin-top:var(--s-4)}
.town-end{padding-bottom:var(--s-7)}
.town-block+.estimate,.town-others+.estimate{margin-top:0}
.town-review .grid.one{grid-template-columns:minmax(0,1fr)}
[data-scheme="dark"] .town-card{background:var(--paper-2)}
@media (max-width:900px){.town-jobs.n4{grid-template-columns:repeat(2,minmax(0,1fr))}.town-grid.c3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.town-jobs,.town-jobs.n3,.town-jobs.n4,.town-grid.c2{grid-template-columns:minmax(0,1fr)}.town-grid.c1 .town-card{display:flex}.town-grid.c1 .town-card-media img{height:auto;min-height:0}.town-facts>div{grid-template-columns:minmax(0,1fr);gap:var(--s-1)}}