/* Thousand Oaks Carpet Cleaners: the Ceanothus theme (Claude Design, October 2026).
   Blue and white, an acorn mark, rooms seen through an arch, prices in big plain figures.
   Every class here is this site's own (design/class-inventory.txt); none is shared with a sister build.
   The live security policy allows no inline styles: everything visual lives in this file. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url(/assets/fonts/bricolage-grotesque-latin-wdth-normal.woff2) format('woff2-variations'), url(/assets/fonts/bricolage-grotesque-latin-wdth-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(/assets/fonts/figtree-latin-wght-normal.woff2) format('woff2-variations'), url(/assets/fonts/figtree-latin-wght-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-display: swap;
  font-weight: 300 900;
  src: url(/assets/fonts/figtree-latin-wght-italic.woff2) format('woff2-variations'), url(/assets/fonts/figtree-latin-wght-italic.woff2) format('woff2');
}

:root {
  --night: #17215A;
  --ceanothus: #2B47B8;
  --ceanothus-dark: #22399A;
  --focus: #4A63D8;
  --mist: #EEF1FB;
  --pale: #DDE4FB;
  --rule: #C9D2F0;
  --rule-mid: #9DAEEA;
  --on-blue: #DDE4FB;
  --on-blue-rule: #6F84D6;
  --ink: #1B1D26;
  --muted: #4F5466;
  --field: #6B7390;
  --error: #B3261E;
  --white: #FFFFFF;
  --head: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
:where(p, ul, ol, figure, dl, dd, blockquote) { margin: 0; }
:where(ul, ol) { padding: 0; }
:where(h1, h2, h3, h4) { margin: 0; font-family: var(--head); font-stretch: 92%; color: var(--night); text-wrap: balance; }
img, svg { max-width: 100%; }
a { color: var(--ceanothus); }
a:hover { color: var(--night); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: separate; border-spacing: 0; }
.to-main { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--night); color: var(--white); padding: 10px 16px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.to-main:focus { top: 12px; color: var(--white); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.keep { white-space: nowrap; }
.fill-in { background: #FFF06A; color: var(--ink); outline: 2px dashed var(--error); outline-offset: 1px; border-radius: 4px; padding: 0 4px; }

/* ---------- type ---------- */
.rim { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
.h1 { font-size: 54px; line-height: 1.04; font-weight: 720; letter-spacing: -0.02em; }
.h2 { font-size: 40px; line-height: 1.1; font-weight: 690; letter-spacing: -0.015em; }
.h3 { font-size: 23px; line-height: 1.24; font-weight: 660; letter-spacing: -0.01em; }
.lede-text { font-size: 19px; line-height: 1.45; color: var(--ink); max-width: 36em; }
.muted { color: var(--muted); }
.finetext { font-size: 15px; line-height: 1.5; color: var(--muted); }
.link { font-weight: 700; color: var(--ceanothus); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.link:hover { color: var(--night); }

/* ---------- buttons ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 2px solid transparent; font-family: var(--body); font-weight: 650; font-size: 17px; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; text-align: center; }
.pill svg { width: 20px; height: 20px; flex: none; }
.pill-blue { background: var(--ceanothus); color: var(--white); }
.pill-blue:hover, .pill-blue:focus-visible { background: var(--ceanothus-dark); color: var(--white); }
.pill-line { background: var(--white); color: var(--night); border-color: var(--ceanothus); }
.pill-line:hover, .pill-line:focus-visible { background: var(--mist); color: var(--night); }
.pill-white { background: var(--white); color: var(--night); }
.pill-white:hover, .pill-white:focus-visible { background: var(--pale); color: var(--night); }
.pill-small { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* ---------- header ---------- */
.top { position: relative; z-index: 20; background: var(--white); border-bottom: 1.5px solid var(--pale); }
.top-in { display: flex; align-items: center; gap: 24px; min-height: 84px; }
.logo-lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.logo-lockup svg { width: 46px; height: 46px; flex: none; }
.brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name b { font-family: var(--head); font-stretch: 92%; font-weight: 760; font-size: 22px; letter-spacing: -0.02em; color: var(--night); }
.brand-name span { font-weight: 650; font-size: 15px; color: var(--ceanothus); }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 17px; padding: 10px 14px; border-radius: 999px; }
.nav a:hover, .nav a[aria-current] { background: var(--mist); color: var(--night); }
.top-act { display: flex; align-items: center; gap: 18px; }
.call { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; color: var(--night); text-decoration: none; white-space: nowrap; }
.call svg { width: 20px; height: 20px; color: var(--ceanothus); }
.ibtns { display: none; margin-left: auto; gap: 8px; align-items: center; }
.ibtn { display: inline-flex; width: 48px; height: 48px; border-radius: 999px; border: 2px solid var(--pale); background: var(--white); color: var(--night); align-items: center; justify-content: center; padding: 0; cursor: pointer; list-style: none; }
.ibtn svg { width: 22px; height: 22px; }
.ibtn::-webkit-details-marker { display: none; }
.site-menu { position: static; }
.site-menu[open] .ibtn { border-color: var(--ceanothus); background: var(--mist); }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1.5px solid var(--pale); box-shadow: 0 18px 30px rgba(23, 33, 90, 0.08); padding: 10px 18px 22px; display: flex; flex-direction: column; }
.menu-panel a { display: block; padding: 13px 4px; border-bottom: 1.5px solid var(--mist); color: var(--night); font-weight: 650; font-size: 18px; text-decoration: none; }
.menu-panel .pill { margin-top: 16px; border-bottom: 0; color: var(--white); }

/* ---------- openings (home, services, areas) ---------- */
.opener { padding: 16px 0 80px; }
.opener-svc { padding: 20px 0 72px; }
.opener-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 16px 56px; align-items: start; }
.opener-svc .opener-in { gap: 22px 56px; }
.hero-h1 { grid-column: 1 / -1; }
.hero-copy { display: flex; flex-direction: column; gap: 16px; }
.opener-svc .hero-copy { gap: 20px; }
.art-col { display: flex; flex-direction: column; gap: 28px; }
.art { display: flex; flex-direction: column; gap: 12px; }
.arch { border-radius: 999px 999px 30px 30px; overflow: hidden; background: var(--mist); aspect-ratio: 7 / 8; }
.arch svg { display: block; width: 100%; height: 100%; }
.cap { font-size: 15px; line-height: 1.45; color: var(--muted); padding: 0 8px; }

/* the home price check */
.quote { background: var(--mist); border-radius: 30px; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.q-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld-l { font-size: 15px; font-weight: 650; color: var(--ink); }
.opt-tag { font-weight: 500; color: var(--muted); }
.sel { position: relative; display: block; }
.sel select, .inp { display: block; width: 100%; min-height: 54px; border: 1.5px solid var(--field); border-radius: 16px; background: var(--white); font-family: var(--body); font-weight: 550; font-size: 17px; color: var(--ink); padding: 0 16px; }
.sel select { appearance: none; -webkit-appearance: none; padding-right: 44px; text-overflow: ellipsis; }
.sel svg { position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; pointer-events: none; color: var(--ceanothus); }
.sel select:focus-visible, .inp:focus-visible, .area:focus-visible { border-color: var(--ceanothus); outline: 3px solid var(--focus); outline-offset: 2px; }
.q-range { background: var(--white); border-radius: 22px; padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 2px; }
.q-label { font-size: 15px; font-weight: 550; color: var(--muted); }
.q-fig { font-weight: 820; font-size: clamp(34px, 3.4vw, 46px); line-height: 1.04; color: var(--night); letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.q-per { font-size: 0.46em; font-weight: 700; letter-spacing: 0; color: var(--night); }
.q-unit { font-size: 17px; color: var(--ink); }
.q-act, .open-act { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.q-act .pill, .open-act .pill { width: 100%; padding: 0 14px; }
.est { background: var(--pale); border-radius: 18px; padding: 12px 16px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.est b { color: var(--night); }
.partner { font-size: 15px; line-height: 1.45; color: var(--muted); }

/* the room estimator (service and area openings) */
.open-price { background: var(--mist); border-radius: 30px; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.op-range { background: var(--white); border-radius: 22px; padding: 14px 20px 16px; display: flex; flex-direction: column; gap: 2px; }
.calc { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 10px; margin-bottom: 8px; border-bottom: 1.5px dashed var(--rule); }
.calc-l { font-weight: 720; font-size: 17px; line-height: 1.3; color: var(--night); }
.ctl { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; background: var(--mist); border-radius: 999px; padding: 3px; }
.calc .ctl { width: 164px; flex: none; }
.ctl button { width: 44px; height: 44px; border-radius: 999px; border: 0; background: var(--white); color: var(--night); font-family: var(--body); font-weight: 700; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.ctl button:hover { background: var(--pale); }
.ctl input { width: 100%; min-width: 0; border: 0; background: transparent; text-align: center; font-family: var(--body); font-weight: 800; font-size: 21px; color: var(--night); font-variant-numeric: tabular-nums; padding: 0; -moz-appearance: textfield; appearance: textfield; }
.ctl input::-webkit-outer-spin-button, .ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* how it works */
.how { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 20px; padding-top: 24px; border-top: 1.5px solid var(--pale); }
.how li { display: flex; gap: 14px; align-items: flex-start; }
.num { flex: none; width: 38px; height: 44px; border-radius: 999px 999px 12px 12px; background: var(--ceanothus); color: var(--white); font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; padding-top: 4px; }
.how-b { display: block; font-weight: 750; font-size: 18px; color: var(--night); line-height: 1.3; }
.how-t { display: block; font-size: 16px; line-height: 1.45; color: var(--muted); margin-top: 2px; }

/* ---------- sections ---------- */
.sec { padding: 88px 0; }
.mist { background: var(--mist); }
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 36px; }
.head p { color: var(--muted); max-width: 32em; }
.head-solo { grid-template-columns: minmax(0, 1fr); gap: 14px; }

/* service cards */
.svcs { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.svc { background: var(--white); border: 1.5px solid var(--pale); border-radius: 28px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.svc-top { display: flex; align-items: center; gap: 14px; }
.arc { width: 48px; height: 56px; border-radius: 999px 999px 14px 14px; background: var(--mist); color: var(--ceanothus); display: flex; align-items: center; justify-content: center; flex: none; padding-top: 6px; }
.arc svg { width: 24px; height: 24px; }
.svc-isa { font-size: 17px; line-height: 1.5; }
.pl { margin-top: auto; padding-top: 16px; border-top: 1.5px dashed var(--rule); display: flex; flex-direction: column; gap: 5px; }
.pl-fig { font-weight: 780; font-size: 24px; line-height: 1.15; color: var(--night); font-variant-numeric: tabular-nums lining-nums; }
.pl-lab { font-size: 15px; color: var(--muted); }
.pl-est { font-size: 16px; line-height: 1.45; color: var(--ink); }
.pl-est b { color: var(--night); }

/* ---------- the visit builder ---------- */
.build { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 28px; align-items: start; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tile { background: var(--white); border: 1.5px solid var(--pale); border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.tile.on { border-color: var(--ceanothus); box-shadow: inset 0 0 0 1px var(--ceanothus); }
.tile-top { display: flex; gap: 12px; align-items: flex-start; }
.tile-ic { width: 36px; height: 42px; border-radius: 999px 999px 11px 11px; background: var(--mist); color: var(--ceanothus); display: flex; align-items: center; justify-content: center; flex: none; padding-top: 4px; }
.tile-ic svg { width: 21px; height: 21px; }
.tile-l { display: block; font-weight: 720; font-size: 17px; line-height: 1.25; color: var(--night); }
.tile-s { display: block; font-size: 15px; line-height: 1.35; color: var(--muted); margin-top: 2px; }
.tile .ctl { margin-top: auto; }
.tile.zero .ctl input { color: var(--muted); font-weight: 600; }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--mist); border-radius: 999px; padding: 3px; gap: 3px; border: 0; margin: 0; }
.seg label { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 999px; font-weight: 650; font-size: 15px; color: var(--muted); cursor: pointer; position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--white); color: var(--night); box-shadow: inset 0 0 0 1.5px var(--ceanothus); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.more-drawer { margin-top: 14px; background: var(--white); border: 1.5px solid var(--pale); border-radius: 24px; }
.more-drawer summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 14px 12px 20px; font-weight: 700; font-size: 17px; color: var(--night); cursor: pointer; min-height: 60px; }
.more-drawer summary::-webkit-details-marker { display: none; }
.more-drawer .tiles { padding: 0 14px 14px; }
.pm { flex: none; width: 36px; height: 36px; border-radius: 999px; background: var(--mist); color: var(--ceanothus); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; line-height: 1; }
.pm::before { content: '+'; }
details[open] > summary .pm::before { content: '\2212'; }
.seal-check { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink); min-height: 32px; }
.seal-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ceanothus); }
.total { position: sticky; top: 24px; background: var(--ceanothus); color: var(--white); border-radius: 30px; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.t-lab { font-size: 15px; color: var(--on-blue); }
.t-fig { font-weight: 820; font-size: 48px; line-height: 1.05; letter-spacing: -0.02em; color: var(--white); font-variant-numeric: tabular-nums lining-nums; }
.t-fig.t-empty { font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.t-lines { list-style: none; }
.t-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 11px 0; border-top: 1px solid var(--on-blue-rule); }
.t-w { font-weight: 650; font-size: 16px; color: var(--white); }
.t-n { font-size: 16px; color: var(--white); text-align: right; font-variant-numeric: tabular-nums; }
.t-m { grid-column: 1 / -1; font-size: 15px; color: var(--on-blue); }
.t-est { background: var(--white); color: var(--ink); border-radius: 18px; padding: 13px 16px; font-size: 16px; line-height: 1.45; }
.t-est b { color: var(--night); }
.t-notes { font-size: 15px; color: var(--on-blue); }
.total .pill { width: 100%; white-space: normal; padding: 10px 18px; }
.total .finetext { color: var(--on-blue); }
.total a:not(.pill) { color: var(--white); }

/* ---------- areas ---------- */
.area-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; border-top: 1.5px dashed var(--rule); }
.area-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1.5px dashed var(--rule); }
.area-list a { font-weight: 750; font-size: 20px; color: var(--night); text-decoration: none; }
.area-list a:hover { color: var(--ceanothus); text-decoration: underline; text-underline-offset: 4px; }
.area-list span { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.also { margin-top: 22px; font-size: 17px; line-height: 1.7; color: var(--muted); max-width: 52em; }
.also a { font-weight: 650; color: var(--ceanothus); }

/* ---------- water ---------- */
.water { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.water-copy { display: flex; flex-direction: column; gap: 18px; }
.wd { background: var(--white); border: 1.5px solid var(--pale); border-radius: 30px; padding: 28px; }
.wd-top { display: flex; gap: 14px; align-items: center; background: var(--ceanothus); border-radius: 22px; padding: 14px 20px; }
.wd-top .arc { background: var(--white); width: 42px; height: 48px; }
.wd-top .arc svg { width: 22px; height: 22px; }
.wd-b { display: block; font-weight: 750; font-size: 18px; color: var(--white); line-height: 1.3; }
.wd-s { display: block; font-size: 15px; color: var(--on-blue); }
.wd-lines { display: block; width: 100%; height: 40px; color: #7C91E0; }
.wd-mid { display: none; font-size: 15px; color: var(--muted); padding: 12px 4px 10px; }
.wd-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; }
.wd-n { background: var(--mist); border-radius: 18px; padding: 14px 10px; font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--night); min-height: 80px; display: flex; align-items: center; justify-content: center; text-align: center; }

/* ---------- reading lists ---------- */
.reads { list-style: none; border-top: 1.5px solid var(--rule); }
.reads li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: baseline; padding: 22px 0; border-bottom: 1.5px solid var(--rule); }
.reads a { color: var(--night); text-decoration: none; }
.reads a:hover { color: var(--ceanothus); text-decoration: underline; text-underline-offset: 4px; }
.reads p { font-size: 17px; line-height: 1.5; color: var(--ink); }
.reads-group { margin: 48px 0 14px; }
.reads-group:first-child { margin-top: 0; }

/* ---------- questions ---------- */
.faq-list { border-top: 1.5px solid var(--pale); max-width: 880px; }
.faq-list details { border-bottom: 1.5px solid var(--pale); }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 0; cursor: pointer; min-height: 68px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary h3 { font-family: var(--body); font-stretch: 100%; font-weight: 720; font-size: 20px; line-height: 1.3; color: var(--night); letter-spacing: 0; text-wrap: balance; }
.faq-a { padding: 0 56px 22px 0; display: flex; flex-direction: column; gap: 12px; }
.faq-more { margin-top: 22px; color: var(--muted); }

/* ---------- the request band ---------- */
.ask-band { background: var(--ceanothus); color: var(--white); padding: 88px 0; }
.band-in { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.ask-band .h2 { color: var(--white); }
.band-lede { font-size: 19px; line-height: 1.5; color: var(--white); max-width: 36em; }
.band-call { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 17px; color: var(--white); }
.band-call a { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 22px; color: var(--white); text-decoration: none; }
.band-call a:hover { text-decoration: underline; color: var(--white); }
.band-call a svg { width: 22px; height: 22px; }
.formc { background: var(--white); color: var(--ink); border-radius: 30px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.formc a { color: var(--ceanothus); }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.consent-card { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--field); border-radius: 18px; padding: 16px; font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--white); }
.consent-card input { width: 24px; height: 24px; flex: none; margin: 1px 0 0; accent-color: var(--ceanothus); }
.formc .pill-blue { width: 100%; }
.send-alert { display: flex; gap: 8px; align-items: center; border: 2px solid var(--error); border-radius: 16px; padding: 12px 14px; font-size: 16px; font-weight: 600; color: var(--error); background: var(--white); }
.send-alert[hidden] { display: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- service pages ---------- */
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.split-wide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.copy-col { display: flex; flex-direction: column; gap: 16px; max-width: 36em; }
.copy-col h3 { margin-top: 10px; }
.visit { list-style: none; display: flex; flex-direction: column; border-top: 1.5px solid var(--rule); }
.visit li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1.5px solid var(--rule); }
.v-b { display: block; font-weight: 750; font-size: 18px; line-height: 1.3; color: var(--night); }
.v-t { display: block; font-size: 17px; line-height: 1.5; color: var(--ink); margin-top: 2px; }
.ptable { width: 100%; background: var(--white); border: 1.5px solid var(--pale); border-radius: 24px; overflow: hidden; }
.ptable caption { caption-side: top; text-align: left; font-weight: 750; font-size: 17px; color: var(--night); padding: 0 0 12px; }
.ptable th, .ptable td { text-align: left; padding: 16px 22px; border-bottom: 1.5px solid var(--mist); font-size: 17px; line-height: 1.4; vertical-align: top; }
.ptable thead th { background: var(--pale); font-size: 15px; font-weight: 750; color: var(--night); }
.ptable tbody th { font-weight: 700; color: var(--night); }
.ptable tbody th a { color: var(--night); text-decoration: none; }
.ptable tbody th a:hover { color: var(--ceanothus); text-decoration: underline; }
.ptable .n { font-variant-numeric: tabular-nums lining-nums; font-weight: 750; color: var(--night); }
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: 0; }
.cell-note { display: block; font-size: 14px; line-height: 1.35; font-weight: 550; color: var(--muted); margin-bottom: 2px; }
.t-note { margin-top: 16px; max-width: 60em; }
.tbl-scroll { margin: 8px 0; overflow-x: auto; }
.ready-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 1.5px dashed var(--rule-mid); }
.ready-list li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; border-bottom: 1.5px dashed var(--rule-mid); font-size: 17px; line-height: 1.45; }
.ready-list svg { flex: none; width: 22px; height: 22px; color: var(--ceanothus); margin-top: 2px; }
.near { display: flex; flex-direction: column; gap: 10px; }
.links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.links a { display: inline-block; padding: 10px 0; font-weight: 700; font-size: 17px; color: var(--ceanothus); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.links a:hover { color: var(--night); }
.local-copy { display: flex; flex-direction: column; gap: 16px; }
.src-line { font-size: 15px; line-height: 1.5; color: var(--muted); }
.src-line a { color: var(--muted); }

/* ---------- area pages ---------- */
.col { display: flex; flex-direction: column; gap: 24px; }
.glance-list { border-top: 1.5px solid var(--rule); }
.glance-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1.5px solid var(--rule); }
.glance-row dt { font-weight: 750; font-size: 16px; line-height: 1.5; color: var(--night); }
.glance-row dd { font-size: 17px; line-height: 1.5; }
.side-card { background: var(--white); border-radius: 28px; padding: 28px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; }
.side-card-copy { display: flex; flex-direction: column; gap: 12px; }

/* ---------- plain pages, guides, hubs ---------- */
.top-band { padding-top: 36px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 16px; }
.top-band .lede-text { font-size: 20px; line-height: 1.5; max-width: 38em; }
.plain { max-width: 760px; display: flex; flex-direction: column; gap: 18px; padding-bottom: 88px; }
.plain h2 { font-size: 30px; line-height: 1.15; font-weight: 690; letter-spacing: -0.01em; margin-top: 18px; }
.plain h3 { font-size: 21px; line-height: 1.3; font-weight: 660; margin-top: 6px; }
.plain ul, .plain ol, .story-part ul, .story-part ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; }
.plain .ready-list { padding-left: 0; }
.mail-block { font-style: normal; line-height: 1.6; }

.story-top { padding: 36px 0 40px; background: var(--mist); }
.story-top-in { max-width: 860px; display: flex; flex-direction: column; gap: 16px; }
.story-dek { font-size: 20px; line-height: 1.5; color: var(--ink); max-width: 38em; }
.story-meta { font-size: 15px; color: var(--muted); }
.answer-box { background: var(--white); border-radius: 26px; padding: 20px 24px; border-left: 6px solid var(--ceanothus); display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.answer-box h2 { font-family: var(--body); font-stretch: 100%; font-size: 16px; font-weight: 750; letter-spacing: 0; color: var(--ceanothus); }
.answer-box p { font-size: 18px; line-height: 1.55; }
.story-body { max-width: 860px; padding-top: 48px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 40px; }
.in-this { background: var(--white); border: 1.5px solid var(--pale); border-radius: 24px; padding: 18px 24px; }
.in-this h2 { font-family: var(--body); font-stretch: 100%; font-size: 16px; font-weight: 750; letter-spacing: 0; margin-bottom: 8px; }
.in-this ol { padding-left: 1.3em; columns: 2; column-gap: 32px; }
.in-this li { padding: 3px 0; break-inside: avoid; }
.story-part { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 24px; }
.story-part h2 { font-size: 32px; line-height: 1.12; font-weight: 690; letter-spacing: -0.012em; }
.story-part h3 { font-size: 21px; line-height: 1.3; font-weight: 660; }
.cite-list { padding-left: 1.4em; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.cite-list a { color: var(--muted); }
.aside-ask { background: var(--ceanothus); color: var(--white); border-radius: 28px; padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.aside-ask h2 { color: var(--white); font-size: 24px; }
.aside-ask p { color: var(--white); }
.note-line { font-size: 15px; line-height: 1.5; color: var(--muted); }
.chart-fig { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; }
.chart-fig img { display: block; width: 100%; height: auto; border: 1.5px solid var(--pale); border-radius: 22px; background: var(--white); }
.chart-fig figcaption { font-size: 15px; line-height: 1.45; color: var(--muted); }
.lone-col { max-width: 880px; }

/* ---------- request page ---------- */
.req { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 40px; align-items: start; padding-bottom: 96px; }
.formc-full { border: 1.5px solid var(--pale); padding: 32px; gap: 22px; }
.f-h { font-family: var(--body); font-stretch: 100%; font-size: 19px; font-weight: 750; color: var(--night); letter-spacing: 0; }
.span2 { grid-column: 1 / -1; }
.area { display: block; width: 100%; min-height: 150px; border: 1.5px solid var(--field); border-radius: 16px; background: var(--white); font-family: var(--body); font-size: 16px; line-height: 1.5; color: var(--ink); padding: 14px 16px; resize: vertical; }
.from-b { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ceanothus); font-weight: 650; }
.from-b[hidden] { display: none; }
.from-b svg { width: 18px; height: 18px; }
.group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.group legend { padding: 0; margin: 0 0 8px; font-size: 15px; font-weight: 650; color: var(--ink); }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 14px; border: 1.5px solid var(--field); border-radius: 999px; font-weight: 600; font-size: 16px; color: var(--ink); background: var(--white); cursor: pointer; }
.choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--ceanothus); }
.choice:has(input:checked) { border-color: var(--ceanothus); background: var(--mist); box-shadow: inset 0 0 0 1px var(--ceanothus); color: var(--night); }
.rule { border: 0; border-top: 1.5px solid var(--mist); margin: 0; }
.aside { position: sticky; top: 24px; background: var(--mist); border-radius: 30px; padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.next-steps { list-style: none; display: flex; flex-direction: column; border-top: 1.5px solid var(--rule); }
.next-steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1.5px solid var(--rule); }
.sb { display: block; font-weight: 750; font-size: 17px; color: var(--night); line-height: 1.3; }
.st { display: block; font-size: 16px; line-height: 1.45; color: var(--ink); margin-top: 2px; }
.a-call { display: flex; flex-direction: column; gap: 6px; }
.call-big { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 24px; color: var(--night); text-decoration: none; }
.call-big svg { width: 24px; height: 24px; color: var(--ceanothus); }

/* ---------- footer ---------- */
.foot { background: var(--mist); padding: 64px 0 36px; }
.path-crumbs { padding-bottom: 22px; margin-bottom: 40px; border-bottom: 1.5px solid var(--rule); }
.path-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; color: var(--muted); }
.path-crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--muted); }
.path-crumbs a { color: var(--muted); }
.path-crumbs a:hover { color: var(--night); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.nap { font-style: normal; }
.foot-brand { display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.5; }
.fh { font-family: var(--body); font-stretch: 100%; font-size: 16px; font-weight: 750; color: var(--night); margin: 0 0 12px; letter-spacing: 0; }
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.foot ul a { color: var(--night); text-decoration: none; font-size: 16px; display: inline-block; padding: 4px 0; }
.foot ul a:hover { text-decoration: underline; }
.foot-base { margin-top: 40px; padding-top: 24px; border-top: 1.5px solid var(--rule); }
.foot-disc { font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 72em; }
.foot-low { margin-top: 14px; font-size: 15px; color: var(--muted); }

/* ---------- the analytics notice ---------- */
.ga-card { position: fixed; bottom: 24px; right: 24px; width: 560px; max-width: calc(100% - 48px); background: var(--white); border: 1.5px solid var(--night); border-radius: 22px; padding: 12px 12px 12px 18px; display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 1.45; color: var(--ink); z-index: 40; box-shadow: 0 12px 30px rgba(23, 33, 90, 0.12); }
.ga-card[hidden] { display: none; }
.ga-card p { flex: 1; }
.nb { display: flex; gap: 8px; }

/* ---------- additions for the built pages ---------- */
.svc-link { color: var(--night); text-decoration: none; }
.svc-link:hover { color: var(--ceanothus); text-decoration: underline; text-underline-offset: 4px; }
.calc .sel { width: 210px; flex: none; }
.local-side { display: flex; flex-direction: column; gap: 16px; }
.local-side .reads li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.faq-list + .src-line, .faq-more + .src-line { margin-top: 18px; max-width: 880px; }
.near .h3 + .links { margin-top: -4px; }
.near .links + .h3 { margin-top: 18px; }
.build-tiles { min-width: 0; }
.prices .src-line { margin-top: 8px; }
.story-part .ptable caption { font-size: 16px; }
.plain .next-steps { padding-left: 0; }
.wd-n { overflow-wrap: anywhere; }

/* ---------- tablets: the header folds below 1000px ---------- */
@media (max-width: 1000px) {
  .nav, .top-act { display: none; }
  .ibtns { display: flex; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .build { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* ---------- phones ---------- */
@media (max-width: 720px) {
  body { font-size: 17px; }
  .rim { padding: 0 18px; }
  .h1 { font-size: 32px; line-height: 1.08; }
  .h2 { font-size: 28px; line-height: 1.14; }
  .h3 { font-size: 21px; }
  .lede-text { font-size: 17px; }
  .top-in { min-height: 64px; gap: 10px; }
  .logo-lockup svg { width: 38px; height: 38px; }
  .brand-name b { font-size: 19px; }
  .brand-name span { font-size: 14px; }
  .opener { padding: 14px 0 44px; }
  .opener-svc { padding: 14px 0 44px; }
  .opener-in, .opener-svc .opener-in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hero-copy, .opener-svc .hero-copy { gap: 14px; }
  .hero-copy .quote, .hero-copy .open-price { order: 1; }
  .hero-copy .lede-text { order: 2; }
  .hero-copy .after-tool { order: 3; }
  .quote { padding: 14px; border-radius: 24px; gap: 12px; }
  .quote .fld-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .q-fields { gap: 10px; }
  .sel select { min-height: 52px; font-size: 16px; padding: 0 38px 0 14px; }
  .q-range { padding: 12px 14px 14px; border-radius: 18px; }
  .q-fig { font-size: clamp(28px, 9vw, 36px); }
  .q-unit { font-size: 16px; }
  .q-act, .open-act { gap: 10px; }
  .q-act .pill, .open-act .pill { font-size: 16px; padding: 0 10px; }
  .est { font-size: 15px; padding: 10px 14px; }
  .open-price { padding: 14px; border-radius: 24px; gap: 12px; }
  .op-range { padding: 12px 14px 14px; border-radius: 18px; }
  .open-price .q-fig { font-size: clamp(26px, 8.6vw, 34px); }
  .calc { gap: 12px; }
  .calc-l { font-size: 16px; }
  .calc .ctl { width: 140px; }
  .calc .sel { width: 160px; }
  .art .arch { max-width: 340px; width: 100%; margin: 0 auto; }
  .how { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 12px; padding-top: 20px; }
  .sec { padding: 56px 0; }
  .head { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 24px; }
  .svcs { grid-template-columns: minmax(0, 1fr); }
  .svc { padding: 20px; border-radius: 24px; }
  .build { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tile { display: grid; grid-template-columns: minmax(0, 1fr) 142px; grid-template-areas: "top ctl" "seg seg"; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 20px; }
  .tile-top { grid-area: top; align-items: center; }
  .tile .ctl { grid-area: ctl; margin-top: 0; }
  .tile .seg { grid-area: seg; }
  .tile .seal-check { grid-column: 1 / -1; }
  .total { position: static; padding: 22px; border-radius: 26px; }
  .t-fig { font-size: 40px; }
  .area-list { grid-template-columns: minmax(0, 1fr); }
  .water { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .wd { padding: 16px; border-radius: 24px; }
  .wd-lines { display: none; }
  .wd-mid { display: block; }
  .wd-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .reads li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; }
  .ask-band { padding: 56px 0; }
  .band-in { gap: 18px; }
  .formc { padding: 18px; border-radius: 24px; }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .foot-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faq-list summary h3 { font-size: 18px; }
  .faq-a { padding-right: 0; }
  .split, .split-wide { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ptable thead { display: none; }
  .ptable, .ptable tbody { display: block; }
  .ptable tbody tr { display: block; padding: 14px 16px; border-bottom: 1.5px solid var(--mist); }
  .ptable tbody tr:last-child { border-bottom: 0; }
  .ptable tbody th { display: block; padding: 0 0 6px; border: 0; font-size: 17px; }
  .ptable tbody td { display: block; padding: 4px 0; border: 0; font-size: 16px; text-align: left; }
  .ptable tbody td::before { content: attr(data-label); display: block; font-size: 15px; font-weight: 550; color: var(--muted); }
  .ptable caption { display: block; }
  .cell-note { display: none; }
  .ready-list { grid-template-columns: minmax(0, 1fr); }
  .glance-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; }
  .side-card { padding: 18px; border-radius: 24px; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .top-band { padding-top: 14px; padding-bottom: 20px; gap: 12px; }
  .top-band .lede-text { font-size: 17px; }
  .plain { padding-bottom: 56px; }
  .plain h2 { font-size: 25px; }
  .story-top { padding: 18px 0 26px; }
  .story-dek { font-size: 17px; }
  .story-body { padding-top: 32px; padding-bottom: 48px; gap: 32px; }
  .story-part h2 { font-size: 26px; }
  .in-this ol { columns: 1; }
  .answer-box { padding: 16px 18px; }
  .answer-box p { font-size: 17px; }
  .req { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-bottom: 56px; }
  .formc-full { padding: 18px; border-radius: 24px; gap: 18px; }
  .aside { position: static; padding: 20px; border-radius: 24px; }
  .area { min-height: 200px; }
  .choices { gap: 8px; }
  .choice { min-height: 44px; padding: 0 14px 0 12px; gap: 8px; font-size: 15px; }
  .choice input { width: 18px; height: 18px; }
  .ga-card { left: 0; right: 0; bottom: 0; width: auto; max-width: none; border-radius: 20px 20px 0 0; border-width: 1.5px 0 0 0; padding: 12px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .nb { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .top, .ga-card, .ask-band, .quote, .open-price, .build { display: none !important; }
}