/* ============================================================
   site.css - Historic Coast Pressure Washing design layer, loaded AFTER base.css.

   LIGHT COASTAL THEME. base.css is the engine's dark-first baseline; this
   layer re-points its tokens (the engine names its accent --amber, so the
   accent tokens below carry that name even though the colour is deep
   ocean) and then builds this site's own components on top.

   Its own brand (not the Historic Coast Cleaning look): cool mist
   neutrals, deep navy ink, pressure blue as the primary and coral as the
   second accent, Oswald condensed headings over Inter. Token NAMES
   (--ocean, --sage) are the template's, so the components are unchanged.
   Every text/background pair below passes WCAG AA; bin/contrast.js checks
   the pairs on `npm test`.
   ============================================================ */

:root{
  /* ---- cool mist neutrals ---- */
  --bg:#f4f7f9;
  --surface:#ffffff;
  --surface-2:#e8eef2;
  --surface-3:#dce4ea;
  --border:#d5dee5;
  --border-2:#bcc9d3;
  --text:#0d1b2a;
  --muted:#44525f;
  --muted-2:#51606d;

  /* ---- pressure blue (primary; token name shared with the template) ---- */
  --ocean:#0a4c86;
  --ocean-2:#1663a6;
  --ocean-3:#083a68;
  --ocean-soft:rgba(10,76,134,.08);
  --ocean-glow:rgba(10,76,134,.28);

  /* ---- coral (second accent; token name shared with the template) ---- */
  --sage:#f26b3a;
  --sage-text:#b4421a;        /* AA as text on mist and white */
  --sage-soft:rgba(242,107,58,.13);

  /* ---- re-point the engine's accent tokens ---- */
  --amber:var(--ocean);
  --amber-hover:var(--ocean-3);
  --on-amber:#ffffff;

  /* ---- on the ink estimate card and CTA band ---- */
  --on-ink:#cad5df;
  --on-ink-dim:#93a6b7;
  --accent-on-ink:#ffb08a;    /* discount lines and ticks on ink */

  --field-border:#7d8b97;     /* 3:1+ on white - clears 1.4.11 for UI */
  --ring:#1663a6;

  --radius:10px;
  --radius-lg:16px;
  --max:1180px;
  --wrap:1180px;
  --ease:cubic-bezier(.16,.84,.44,1);

  --sh-sm:0 1px 2px rgba(13,27,42,.06), 0 2px 10px rgba(13,27,42,.05);
  --sh-md:0 16px 40px -18px rgba(13,27,42,.30);
  --sh-lg:0 36px 80px -30px rgba(13,27,42,.42);

  /* Display face: Oswald (OFL, self-hosted, @font-face in base.css). */
  --font-display:"Oswald", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html{background:var(--bg);}
body{background:var(--bg);color:var(--muted);font-size:17px;}
h1,h2,h3,h4{color:var(--text);font-family:var(--font-display);letter-spacing:-0.025em;}
/* Oswald is condensed and bold: no negative tracking, a touch of positive on h1/h2. */
h1,h2{letter-spacing:.005em;font-weight:700;}
h3,h4{font-family:"Inter",system-ui,sans-serif;letter-spacing:-0.015em;}
h1{font-weight:800;font-size:clamp(2.2rem,5.4vw,3.8rem);line-height:1.02;}
h2{font-weight:800;font-size:clamp(1.65rem,3.6vw,2.5rem);line-height:1.08;}
h3{font-weight:700;}
a{color:var(--ocean);}
.eyebrow{color:var(--sage-text);letter-spacing:.16em;}
.lede{color:var(--muted);}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;}
::selection{background:var(--ocean);color:#fff;}

/* ---------------- buttons ---------------- */
.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.45rem;font-weight:700;border-radius:999px;transition:background .18s var(--ease),border-color .18s,transform .08s,box-shadow .2s;}
.btn-primary{background:var(--ocean);color:#fff;box-shadow:0 10px 24px -12px var(--ocean-glow);}
.btn-primary:hover{background:var(--ocean-3);color:#fff;box-shadow:0 14px 30px -12px var(--ocean-glow);}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-2);}
.btn-ghost:hover{border-color:var(--ocean);color:var(--ocean);background:#fff;}
.btn-sage{background:var(--sage-soft);color:var(--sage-text);border-color:transparent;}
.btn-sage:hover{background:var(--sage-text);color:#fff;}
.btn-lg{min-height:56px;padding:1rem 1.9rem;font-size:1.05rem;}
.btn-block{width:100%;}

/* ---------------- header ---------------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(244,247,249,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,background .2s;}
.site-header.is-scrolled{border-bottom-color:var(--border);background:rgba(244,247,249,.96);}
.header-inner{min-height:72px;}
.brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--text);font-weight:800;letter-spacing:-0.02em;font-size:1.15rem;}
.brand img,.brand svg{height:52px;width:auto;display:block;}
.brand-word{display:flex;flex-direction:column;line-height:1;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:1.2rem;}
.brand-word small{font-family:"Inter",system-ui,sans-serif;}
.brand-word small{font-weight:600;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-text);margin-top:.22rem;}
.site-nav a{color:var(--text);font-weight:600;}
.site-nav a:hover{color:var(--ocean);text-decoration:none;}
.site-nav .nav-cta{color:#fff;}
.nav-burger span{background:var(--text);}
.header-phone{display:none;font-weight:700;color:var(--text);}
@media (min-width:1000px){.header-phone{display:inline-flex;align-items:center;gap:.4rem;margin-right:.6rem;}}
@media (max-width:820px){
  .site-header .site-nav{background:var(--bg);border-top:1px solid var(--border);}
  .site-header .site-nav a{color:var(--text);}
}

/* ---------------- hero ---------------- */
.hero{background:none;padding:clamp(2.6rem,7vw,5.5rem) 0 clamp(2rem,5vw,3.5rem);position:relative;overflow:hidden;}
.hero-x{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center;}
@media (min-width:960px){.hero-x{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}}
.hero-copy h1{max-width:16ch;}
.hero-copy .lede{max-width:52ch;font-size:clamp(1.05rem,1.6vw,1.25rem);}
.hero-points{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin:1.2rem 0 0;padding:0;list-style:none;color:var(--text);font-weight:600;font-size:.95rem;}
.hero-points li{display:inline-flex;align-items:center;gap:.45rem;}
.hero-points svg{width:18px;height:18px;color:var(--sage-text);flex:none;}
.hero-art{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/3;background:linear-gradient(160deg,#dfe9ec 0%,#f3efe6 55%,#cfdcdc 100%);}
.hero-art img,.hero-art picture{width:100%;height:100%;object-fit:cover;display:block;}
.hero-art .art-badge{position:absolute;left:1rem;bottom:1rem;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:999px;padding:.5rem .9rem;font-weight:700;color:var(--text);font-size:.85rem;display:inline-flex;align-items:center;gap:.5rem;box-shadow:var(--sh-sm);}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;height:48px;color:var(--surface-2);pointer-events:none;}
.hero-wave svg{width:100%;height:100%;display:block;}

/* ---------------- sections ---------------- */
.section{padding:clamp(2.6rem,6.5vw,5rem) 0;}
.tone-raise{background:var(--surface-2);}
.tone-cta{background:var(--ocean);color:#d9e4e8;}
.tone-cta h2,.tone-cta p{color:#fff;}
.tone-cta .eyebrow{color:#b9d3c3;}
.tone-cta .btn-primary{background:#fff;color:var(--ocean);}
.tone-cta .btn-primary:hover{background:var(--surface-2);color:var(--ocean-3);}
.tone-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4);}
.tone-cta .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff;}
.section-head{max-width:62ch;margin-bottom:clamp(1.4rem,3vw,2.4rem);}
.section-head.is-center{margin-inline:auto;text-align:center;}
.section-title{max-width:none;}
.section-lead{font-size:1.08rem;color:var(--muted);}

/* ---------------- trust bar ---------------- */
.trust-bar{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:clamp(1.4rem,3vw,2rem);}
@media (min-width:760px){.trust-bar{grid-template-columns:repeat(4,1fr);}}
.trust-item{display:flex;gap:.7rem;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1rem;}
.trust-item svg{width:22px;height:22px;flex:none;color:var(--ocean);margin-top:.1rem;}
.trust-item b{display:block;color:var(--text);font-size:.95rem;}
.trust-item span{font-size:.84rem;color:var(--muted);line-height:1.4;}

/* ---------------- cards ---------------- */
.card,.card-x{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--sh-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s;}
.card:hover,.card-x:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--border-2);}
.card .card-title,.card h3{color:var(--text);}
.card p{color:var(--muted);}
.card-link{color:var(--ocean);}
.service-card{display:flex;flex-direction:column;gap:.6rem;}
.service-card .svc-icon{width:44px;height:44px;border-radius:12px;background:var(--ocean-soft);color:var(--ocean);display:grid;place-items:center;}
.service-card .svc-icon svg{width:22px;height:22px;}
.service-card .svc-from{margin-top:auto;display:flex;align-items:baseline;gap:.4rem;color:var(--text);font-weight:700;}
.service-card .svc-from small{color:var(--muted);font-weight:500;}
.grid-3{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.grid-2{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}

/* ---------------- steps ---------------- */
.steps-x{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:step;}
.step-x{position:relative;padding:1.4rem 1.4rem 1.4rem 1.4rem;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);}
.step-x::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ocean);color:#fff;font-weight:800;margin-bottom:.8rem;}
.step-x h3{margin-bottom:.3rem;font-size:1.1rem;}
.step-x p{margin:0;font-size:.95rem;}

/* ---------------- reviews ---------------- */
.quote-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.quote{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin:0;position:relative;}
.quote .stars{color:#c8962e;letter-spacing:.1em;font-size:.95rem;margin-bottom:.5rem;}
.quote p{color:var(--text);font-size:1.02rem;}
.quote cite{display:block;color:var(--muted);font-style:normal;font-weight:600;font-size:.9rem;}
.quote cite span{font-weight:500;color:var(--muted-2);}

/* ---------------- areas ---------------- */
.area-chips{display:flex;flex-wrap:wrap;gap:.55rem;}
.area-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .95rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-weight:600;font-size:.92rem;transition:border-color .15s,background .15s;}
.area-chip:hover{border-color:var(--ocean);text-decoration:none;background:var(--ocean-soft);}
.area-chip svg{width:14px;height:14px;color:var(--sage-text);}
.area-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.area-card h3{font-size:1.15rem;margin-bottom:.3rem;}
.area-card .hoods{color:var(--muted-2);font-size:.9rem;margin:.4rem 0 .8rem;}

/* ---------------- FAQ ---------------- */
.faq-x{display:grid;gap:.6rem;max-width:820px;}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:0 1.2rem;}
.faq-item summary{cursor:pointer;list-style:none;padding:1.05rem 2.2rem 1.05rem 0;font-weight:700;color:var(--text);position:relative;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"";position:absolute;right:.2rem;top:50%;width:10px;height:10px;border-right:2px solid var(--ocean);border-bottom:2px solid var(--ocean);transform:translateY(-70%) rotate(45deg);transition:transform .2s;}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq-a{padding:0 0 1.1rem;color:var(--muted);}

/* ---------------- CTA band ---------------- */
/* Vertical padding only: .cta-band sits on the same element as .wrap, and a
   bare `padding:0` here wiped the wrapper's side gutters, so the text and
   buttons ran into the screen edge. */
.cta-band{display:grid;gap:1.2rem;align-items:center;text-align:left;padding-top:0;padding-bottom:0;}
/* base.css also sets `.cta-band { padding: X 0 }`, after .wrap, so restore
   the gutter explicitly where the two classes meet. */
.wrap.cta-band{padding-inline:clamp(1rem,4vw,2rem);}
@media (min-width:860px){.cta-band{grid-template-columns:minmax(0,1fr) auto;gap:2rem;}}
.cta-band h2{margin:0 0 .3rem;}
.cta-band p{margin:0;}
.cta-band .cta-row{margin-top:0;justify-content:flex-start;}

/* ---------------- forms ---------------- */
.lead-form{background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-sm);}
.lead-form label{color:var(--text);}
.lead-form input,.lead-form textarea,.lead-form select,.q-field input,.q-field select,.q-field textarea{background:#fff;color:var(--text);border:1px solid var(--field-border);border-radius:12px;padding:.85rem .95rem;font-size:16px;width:100%;min-height:48px;font-family:inherit;}
.lead-form input:focus,.lead-form textarea:focus,.lead-form select:focus,.q-field input:focus,.q-field select:focus,.q-field textarea:focus{border-color:var(--ring);outline:3px solid var(--ring);outline-offset:1px;}
.notice{border-radius:var(--radius);}
.notice-ok{border-color:#9bc3a9;background:var(--sage-soft);color:var(--sage-text);}
.notice-err{border-color:#e0a1a1;background:rgba(190,60,60,.08);color:#8a2626;}
.field-hint{font-size:.84rem;color:var(--muted-2);margin:.3rem 0 0;}
.legal-agree{margin-top:.6rem;}

/* ---------------- footer ---------------- */
.site-footer{background:var(--surface-2);border-top:1px solid var(--border);color:var(--muted);}
.site-footer a{color:var(--text);}
.site-footer a:hover{color:var(--ocean);}
.footer-brand{color:var(--text);font-weight:800;}
.footer-badge{display:block;width:118px;height:auto;margin:0 0 .9rem;}
.footer-heading{color:var(--text);}
.footer-bottom{color:var(--muted-2);border-top:1px solid var(--border);}

/* ---------------- sticky mobile call / text / quote bar ---------------- */
/* Phone action bar: a light tray holding real buttons. Call / Text are
   outlined secondary buttons; the quote is a solid, raised pill with an
   arrow so it reads unmistakably as the thing to tap. */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;gap:.5rem;align-items:center;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--border);box-shadow:0 -8px 24px -12px rgba(13,27,42,.25);}
.mobile-bar a{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:48px;padding:0 .9rem;border-radius:999px;border:1.5px solid var(--border-2);background:#fff;color:var(--text);font-weight:700;font-size:.92rem;text-decoration:none;white-space:nowrap;}
.mobile-bar a svg{width:18px;height:18px;color:var(--ocean);flex:none;}
.mobile-bar a:active{transform:translateY(1px);}
.mobile-bar a.mb-icon{width:48px;padding:0;flex:none;}
.mobile-bar a.mb-icon svg{width:20px;height:20px;}
.mobile-bar a.is-primary{flex:1;min-width:0;border-color:var(--ocean);background:var(--ocean);color:#fff;font-size:1rem;box-shadow:0 8px 18px -8px var(--ocean-glow);}
.mobile-bar a.is-primary svg{color:#fff;}
.mobile-bar a.is-primary .mb-arrow{width:18px;height:18px;margin-left:.1rem;}
.mobile-bar a.is-primary span{overflow:hidden;text-overflow:ellipsis;}
.mobile-bar .mb-short{display:none;}
@media (max-width:380px){.mobile-bar a.is-primary .mb-spark{display:none;}}
@media (max-width:359px){.mobile-bar .mb-long{display:none;}.mobile-bar .mb-short{display:inline;}}
@media (min-width:821px){.mobile-bar{display:none;}}
@media (max-width:820px){body.has-mobile-bar{padding-bottom:calc(72px + env(safe-area-inset-bottom));}}

/* ---------------- reveal (progressive, failsafe in layout.js) ---------------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease);}
.reveal.is-in,html:not(.js) .reveal{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}.card:hover,.card-x:hover{transform:none;}}

/* ============================================================
   INSTANT QUOTE  (/quote and the homepage module)
   ============================================================ */
.quote-shell{display:grid;gap:clamp(1.2rem,3vw,2rem);align-items:start;}
@media (min-width:960px){.quote-shell{grid-template-columns:minmax(0,1fr) 360px;}}
.q-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--sh-sm);padding:clamp(1.2rem,3vw,1.8rem);}
.q-progress{display:flex;gap:.5rem;align-items:center;margin:0 0 1.2rem;padding:0;list-style:none;font-size:.82rem;font-weight:700;color:var(--muted-2);}
.q-progress li{display:flex;align-items:center;gap:.45rem;}
.q-progress li::before{content:attr(data-n);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--border-2);font-size:.75rem;}
.q-progress li.is-done::before{background:var(--sage-text);border-color:var(--sage-text);color:#fff;content:"\2713";}
.q-progress li.is-current{color:var(--text);}
.q-progress li.is-current::before{border-color:var(--ocean);color:var(--ocean);}
.q-progress li+li{margin-left:.2rem;}
.q-progress .q-sep{flex:1;height:2px;background:var(--border);}
.q-step{display:none;}
.q-step.is-active{display:block;}
html:not(.js) .q-step{display:block;}
.q-step h2{font-size:1.45rem;margin-bottom:.25rem;}
.q-step .q-sub{margin:0 0 1.2rem;color:var(--muted);}
.q-field{margin-bottom:1.1rem;}
.q-field>label,.q-field>.q-label{display:block;font-weight:700;color:var(--text);margin-bottom:.45rem;font-size:.95rem;}
.q-field .opt{font-weight:500;color:var(--muted-2);}
.q-row{display:grid;gap:.9rem;grid-template-columns:1fr;}
@media (min-width:560px){.q-row{grid-template-columns:1fr 1fr;}.q-row.q-row-3{grid-template-columns:repeat(3,1fr);}}
.seg{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));}
.seg label{position:relative;display:flex;flex-direction:column;gap:.15rem;padding:.9rem 1rem;border:1.5px solid var(--border-2);border-radius:14px;cursor:pointer;background:#fff;min-height:56px;justify-content:center;transition:border-color .15s,background .15s,box-shadow .15s;}
.seg label:hover{border-color:var(--ocean-2);}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;}
.seg label b{color:var(--text);font-size:.98rem;}
.seg label small{color:var(--muted-2);font-size:.82rem;line-height:1.3;}
.seg label .badge{position:absolute;top:-.55rem;right:.7rem;background:var(--sage-text);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .5rem;border-radius:999px;}
.seg label:has(input:checked){border-color:var(--ocean);background:var(--ocean-soft);box-shadow:0 0 0 1px var(--ocean) inset;}
.seg label:has(input:focus-visible){outline:3px solid var(--ring);outline-offset:2px;}
.seg.seg-icons{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));}
.seg.seg-icons label{flex-direction:row;align-items:center;gap:.8rem;}
.seg.seg-icons svg{width:26px;height:26px;color:var(--ocean);flex:none;}
.sqft-wrap{display:grid;gap:.6rem;}
.sqft-wrap .sqft-input{display:flex;align-items:center;gap:.6rem;}
.sqft-wrap input[type=number]{max-width:170px;font-weight:700;font-size:1.15rem;}
.sqft-wrap input[type=range]{width:100%;accent-color:var(--ocean);height:32px;}
.sqft-presets{display:flex;flex-wrap:wrap;gap:.4rem;}
.sqft-presets button{border:1px solid var(--border-2);background:#fff;border-radius:999px;padding:.4rem .75rem;font-size:.82rem;font-weight:600;color:var(--text);cursor:pointer;min-height:36px;}
.sqft-presets button:hover{border-color:var(--ocean);}
.counter{display:inline-flex;align-items:center;border:1px solid var(--field-border);border-radius:12px;overflow:hidden;background:#fff;}
.counter button{width:48px;height:48px;border:0;background:transparent;font-size:1.3rem;color:var(--ocean);cursor:pointer;}
.counter button:hover{background:var(--ocean-soft);}
.counter input{width:56px;text-align:center;border:0;min-height:46px;padding:0;font-weight:700;}
.addon-list{display:grid;gap:.55rem;grid-template-columns:1fr;}
@media (min-width:600px){.addon-list{grid-template-columns:1fr 1fr;}}
.addon{display:flex;align-items:center;gap:.8rem;padding:.75rem .9rem;border:1.5px solid var(--border);border-radius:12px;background:#fff;cursor:pointer;min-height:56px;}
.addon input[type=checkbox]{width:22px;height:22px;min-height:0;padding:0;accent-color:var(--ocean);flex:none;margin:0;}
.addon .addon-name{flex:1;color:var(--text);font-weight:600;font-size:.95rem;}
.addon .addon-price{color:var(--muted);font-weight:600;font-size:.9rem;white-space:nowrap;}
.addon:has(input:checked){border-color:var(--ocean);background:var(--ocean-soft);}
.addon .counter{margin-left:auto;transform:scale(.85);transform-origin:right center;}
.addon .counter button{width:40px;height:40px;}
.q-nav{display:flex;gap:.7rem;justify-content:space-between;align-items:center;margin-top:1.4rem;flex-wrap:wrap;}
.q-nav .q-back{color:var(--muted);font-weight:600;background:none;border:0;cursor:pointer;padding:.6rem .2rem;min-height:44px;}
.q-nav .q-back:hover{color:var(--ocean);}
.q-save{font-size:.82rem;color:var(--muted-2);display:inline-flex;align-items:center;gap:.35rem;min-height:24px;}
.q-save.is-saving{color:var(--muted-2);}
.q-save.is-saved{color:var(--sage-text);}
.q-save.is-err{color:#8a2626;}
.q-consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.86rem;color:var(--muted);}
.q-consent input{width:20px;height:20px;margin-top:.1rem;accent-color:var(--ocean);flex:none;}
.q-addr-list{position:absolute;left:0;right:0;top:100%;z-index:20;background:#fff;border:1px solid var(--border-2);border-radius:12px;box-shadow:var(--sh-md);margin:.3rem 0 0;padding:.3rem;list-style:none;max-height:260px;overflow:auto;}
.q-addr-list li{padding:.7rem .8rem;border-radius:8px;cursor:pointer;color:var(--text);font-size:.95rem;}
.q-addr-list li:hover,.q-addr-list li.is-hot{background:var(--ocean-soft);}
.q-addr-wrap{position:relative;}

/* estimate card */
.est-card{position:sticky;top:88px;background:var(--text);color:var(--on-ink);border-radius:var(--radius-lg);padding:1.4rem;box-shadow:var(--sh-lg);}
.est-card .est-kicker{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-dim);font-weight:700;margin:0 0 .4rem;}
.est-card .est-total{font-size:clamp(2rem,4vw,2.6rem);font-weight:800;color:#fff;letter-spacing:-0.03em;line-height:1;margin:0;}
.est-card .est-range{color:#b9c8d0;font-size:.95rem;margin:.35rem 0 0;}
.est-card .est-per{color:var(--on-ink-dim);font-size:.85rem;margin:.1rem 0 0;}
.est-card .est-monthly{margin:.9rem 0 0;padding:.65rem .8rem;border-radius:10px;background:rgba(255,255,255,.07);font-size:.9rem;color:#dfe7eb;}
.est-card .est-lines{margin:1.1rem 0 0;padding:1rem 0 0;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:.45rem;font-size:.9rem;}
.est-card .est-line{display:flex;justify-content:space-between;gap:1rem;}
.est-card .est-line span:first-child{color:var(--on-ink);}
.est-card .est-line span:last-child{color:#fff;font-weight:600;white-space:nowrap;}
.est-card .est-line.is-discount span:last-child{color:var(--accent-on-ink);}
.est-card .est-line.is-market span{color:var(--on-ink-dim);text-decoration:line-through;}
.est-card .est-note{font-size:.82rem;color:var(--on-ink-dim);margin:.9rem 0 0;line-height:1.45;}
.est-card .est-warn{font-size:.84rem;color:#f3d9a4;margin:.7rem 0 0;line-height:1.45;}
.est-card .est-cta{margin-top:1.1rem;}
.est-card .btn-primary{background:#fff;color:var(--ocean);}
.est-card .btn-primary:hover{background:var(--surface-2);}
.est-card .est-trust{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.35rem;font-size:.82rem;color:#b9c8d0;}
.est-card .est-trust li{display:flex;gap:.45rem;align-items:center;}
.est-card .est-trust svg{width:14px;height:14px;color:var(--accent-on-ink);flex:none;}
@media (max-width:959px){
  .est-card{position:static;}
  .est-desk{display:none;}
}
/* mobile sticky estimate bar */
.est-bar{position:fixed;left:0;right:0;bottom:0;z-index:36;background:var(--text);color:#fff;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:1rem;box-shadow:0 -10px 30px rgba(0,0,0,.18);}
.est-bar .est-bar-k{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-dim);font-weight:700;}
.est-bar .est-bar-v{font-size:1.35rem;font-weight:800;line-height:1.05;}
.est-bar .est-bar-s{font-size:.78rem;color:#b9c8d0;}
.est-bar button{background:#fff;color:var(--ocean);border:0;border-radius:999px;padding:.75rem 1.1rem;font-weight:800;min-height:46px;cursor:pointer;}
@media (min-width:960px){.est-bar{display:none;}}
body.has-est-bar{padding-bottom:calc(84px + env(safe-area-inset-bottom));}
.est-sheet{position:fixed;inset:auto 0 0 0;z-index:37;background:var(--text);color:var(--on-ink);border-radius:22px 22px 0 0;padding:1.2rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));max-height:70vh;overflow:auto;transform:translateY(105%);transition:transform .3s var(--ease);box-shadow:var(--sh-lg);}
.est-sheet.is-open{transform:none;}
.est-sheet .est-close{position:absolute;right:.8rem;top:.6rem;background:transparent;border:0;color:#fff;font-size:1.6rem;cursor:pointer;width:44px;height:44px;}
@media (min-width:960px){.est-sheet{display:none;}}

/* homepage mini quote module */
.q-mini{display:grid;gap:.8rem;}
.q-mini .q-row{grid-template-columns:1fr;}
@media (min-width:560px){.q-mini .q-row{grid-template-columns:1fr 1fr;}}
.q-mini .btn{margin-top:.2rem;}
.q-mini-est{display:flex;align-items:baseline;gap:.5rem;color:var(--text);font-weight:700;}
.q-mini-est .big{font-size:1.6rem;font-weight:800;letter-spacing:-0.02em;}
.q-mini-est small{color:var(--muted);font-weight:500;}

/* thank-you */
.thanks-card{max-width:720px;margin:0 auto;}
.thanks-card .big-check{width:64px;height:64px;border-radius:50%;background:var(--sage-soft);color:var(--sage-text);display:grid;place-items:center;margin-bottom:1rem;}
.thanks-card .big-check svg{width:32px;height:32px;}
.resume-link{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;}
.resume-link input{flex:1;min-width:200px;font-size:.9rem;}

/* article pages (privacy, terms) */
.article{padding:clamp(2rem,6vw,4rem) 0;max-width:820px;}
.article h2{font-size:1.4rem;margin-top:2rem;}
.article-body{color:var(--muted);}
.legal .legal-updated{font-size:.9rem;color:var(--muted);margin-bottom:1.2rem;}
.legal .legal-identity{color:var(--text);}
.legal .legal-callout{padding:.9rem 1rem;border:1.5px solid var(--border-2);border-radius:12px;background:var(--surface-2);color:var(--text);}
.legal .article-body h2{scroll-margin-top:5rem;}
.legal .article-body li{margin-bottom:.45rem;}
.legal .article-body .footer-consent{min-height:0;display:inline;color:var(--ocean);}

/* service detail */
.svc-hero{display:grid;gap:2rem;align-items:start;}
@media (min-width:900px){.svc-hero{grid-template-columns:1.1fr .9fr;}}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;}
.check-list li{display:flex;gap:.65rem;align-items:flex-start;color:var(--text);}
.check-list svg{width:20px;height:20px;color:var(--sage-text);flex:none;margin-top:.15rem;}
.price-from{display:inline-flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.2rem 1.4rem;}
.price-from small{color:var(--muted-2);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;}
.price-from b{font-size:2rem;color:var(--text);letter-spacing:-0.02em;}
.price-from span{color:var(--muted);font-size:.9rem;}

/* skip link colour on light */
.skip-link{background:var(--ocean);color:#fff;}
.est-sheet .est-card{position:static;box-shadow:none;padding:.4rem 0 0;}

/* ---------------- surfaces: checkbox cards with their own fields ---------------- */
.surface-list{display:grid;gap:.6rem;}
.surface{border:1.5px solid var(--border);border-radius:14px;background:#fff;transition:border-color .15s,background .15s;}
.surface.is-on{border-color:var(--ocean);background:var(--ocean-soft);}
.surface-head{display:flex;align-items:center;gap:.8rem;padding:.8rem .95rem;cursor:pointer;min-height:60px;}
.surface-head input[type=checkbox]{width:22px;height:22px;min-height:0;padding:0;accent-color:var(--ocean);flex:none;margin:0;}
.surface-icon{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--sage-soft);color:var(--ocean);}
.surface-icon svg{width:22px;height:22px;}
.surface-text{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1;}
.surface-text b{color:var(--text);font-size:.98rem;line-height:1.2;}
.surface-text small{color:var(--muted-2);font-size:.82rem;line-height:1.35;}
.surface-price{flex:none;font-weight:800;color:var(--text);white-space:nowrap;}
.surface-body{padding:0 .95rem .95rem;display:grid;gap:.55rem;}
.surface-body .q-label{margin:.2rem 0 0;}
.surface-body .seg{margin:0;}
.surface-body .sqft-input input{max-width:170px;font-weight:700;font-size:1.1rem;}
.surface-body .sqft-presets button small{color:var(--muted-2);font-weight:600;margin-left:.2rem;}
.photo-drop{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.1rem;border:1.5px dashed var(--border-2);border-radius:12px;background:#fff;color:var(--ocean);font-weight:700;cursor:pointer;min-height:48px;}
.photo-drop:hover{border-color:var(--ocean);}
.photo-drop input{position:absolute;width:1px;height:1px;opacity:0;}
.photo-drop svg{width:20px;height:20px;}
.photo-list{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 0;}
.photo-thumb{position:relative;margin:0;width:88px;height:88px;border-radius:10px;overflow:hidden;border:1px solid var(--border);}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-thumb button{position:absolute;top:2px;right:2px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(13,27,42,.8);color:#fff;font-size:1rem;cursor:pointer;line-height:1;}
/* Option cards: the text block (b + small) stacks; icons sit to the left of it. */
.seg label>span:not(.badge){display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1;}
.seg label b{line-height:1.2;}
.seg label small{line-height:1.35;}
.seg.seg-icons label{padding:.85rem .95rem;}
.seg.seg-icons label>svg{flex:none;}

/* ---------------- client billing: /pay/<token> and /c/<token> ---------------- */
.pay-body{background:var(--bg);}
.pay-section{padding-top:clamp(1.5rem,5vw,3rem);}
.pay-wrap{max-width:560px;}
.portal-wrap{max-width:880px;}
.pay-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(1.2rem,4vw,1.8rem);box-shadow:var(--sh-sm);margin-bottom:1rem;}
.pay-card h1{font-size:clamp(1.6rem,4.5vw,2.2rem);margin:.1rem 0 .2rem;}
.pay-card h2{font-size:1.15rem;margin:0 0 .7rem;}
.inv-table{width:100%;border-collapse:collapse;margin:1rem 0 1.2rem;font-size:.98rem;}
.inv-table td,.inv-table th{padding:.6rem 0;border-bottom:1px solid var(--border);color:var(--text);text-align:left;vertical-align:top;}
.inv-table th{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.inv-table .num{text-align:right;white-space:nowrap;padding-left:1rem;}
.inv-table tr.sub td{color:var(--muted);}
.inv-table tr.tot td{font-weight:800;font-size:1.08rem;border-bottom:0;}
.pay-form label{display:block;font-weight:700;color:var(--text);font-size:.9rem;margin-bottom:.9rem;}
.pay-form input{display:block;width:100%;margin-top:.3rem;background:#fff;color:var(--text);border:1px solid var(--field-border);border-radius:12px;padding:.8rem .9rem;font-size:16px;min-height:50px;font-family:inherit;}
.pay-form input:focus{outline:3px solid var(--ring);outline-offset:1px;border-color:var(--ring);}
.pay-row{display:grid;grid-template-columns:1fr 1fr;gap:0 .7rem;}
@media (min-width:480px){.pay-row{grid-template-columns:1fr 1fr 1fr;}}
.pay-error{color:#8a2626;background:rgba(190,60,60,.08);border-radius:10px;padding:.7rem .9rem;font-weight:600;font-size:.92rem;}
.pay-done{text-align:center;padding:.5rem 0 .2rem;}
.pay-done .big-check{width:60px;height:60px;border-radius:50%;background:var(--sage-soft);color:var(--sage-text);display:grid;place-items:center;margin:0 auto .8rem;}
.notice-warn{border-color:#e3cf9a;background:#fff9e8;color:#5c3f0c;}
.muted{color:var(--muted);} .small{font-size:.88rem;} .center{text-align:center;}
.portal-due{background:#fff;border:2px solid var(--ocean);border-radius:var(--radius-lg);padding:1.1rem 1.2rem;margin:1rem 0;}
.portal-due h2{font-size:1.1rem;margin:0 0 .6rem;}
.portal-inv{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 0;border-top:1px solid var(--border);color:var(--text);text-decoration:none;}
.portal-inv:hover{text-decoration:none;}
.portal-amt{display:flex;align-items:center;gap:.7rem;font-weight:800;font-size:1.1rem;white-space:nowrap;}
.portal-grid{display:grid;gap:1rem;margin:1rem 0;}
@media (min-width:760px){.portal-grid{grid-template-columns:1fr 1fr;}}
.portal-grid .pay-card{margin:0;}
.portal-list{list-style:none;padding:0;margin:0 0 .8rem;display:grid;gap:.7rem;color:var(--text);}
.portal-table td a{font-weight:700;}
.pill{display:inline-block;padding:.22rem .6rem;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;}
.pill-open,.pill-inv-open,.pill-processing,.pill-inv-processing{background:rgba(200,150,46,.18);color:#7a5410;}
.pill-paid,.pill-inv-paid{background:var(--sage-soft);color:var(--sage-text);}
.pill-void,.pill-inv-void,.pill-refunded,.pill-inv-refunded{background:rgba(13,27,42,.08);color:var(--muted);}
@media print{.site-header,.site-footer,.no-print,.announce,#hcc-consent,[data-consent]{display:none !important;}.pay-card{box-shadow:none;border:0;}body{background:#fff;}}
.inv-table th+th,.inv-table td+td{padding-left:.9rem;}
.portal-table td:last-child,.portal-table th:last-child{text-align:right;}
.autopay-consent{margin:.2rem 0 1rem;padding:.8rem .9rem;border:1.5px solid var(--border-2);border-radius:12px;background:var(--surface-2);line-height:1.45;}
.autopay-consent:has(input:checked){border-color:var(--ocean);background:var(--ocean-soft);}
.pay-form .autopay-consent{display:flex;gap:.7rem;align-items:flex-start;font-weight:500;}
.pay-form .autopay-consent input{display:inline-block;flex:none;width:22px;height:22px;min-height:0;margin:.1rem 0 0;padding:0;accent-color:var(--ocean);}
.pay-form .autopay-consent b{font-weight:800;}
.sub-row{padding:.6rem 0;border-bottom:1px solid var(--border);color:var(--text);}

/* Long addresses (hello@historiccoastpressurewashing.com) must wrap on a 360px phone. */
a[href^="mailto:"]{overflow-wrap:anywhere;}
/* Stripe Payment Element host (pay page) */
.stripe-element{min-height:7.5rem;margin:.4rem 0 1rem;}
.stripe-element [data-stripe-loading]{padding:1rem 0;}

/* ---------------- "What do you need done?" (quote-needs.js) ----------------
   Without JS every section shows and the picker is hidden; with it, a
   section shows only while one of its tiles is picked. */
.needs:not(.is-js) .need-pick,.needs:not(.is-js) .need-suggest,.needs:not(.is-js) .need-all{display:none;}
.needs.is-js [data-need-for]:not(.is-need-on){display:none;}
.need-pick{margin-bottom:1rem;}
.need-search{display:flex;align-items:center;gap:.6rem;padding:0 .9rem;border:1.5px solid var(--border-2);border-radius:14px;background:#fff;margin-bottom:.8rem;}
.need-search:focus-within{border-color:var(--ocean);box-shadow:0 0 0 3px var(--ocean-glow);}
.need-search svg{width:20px;height:20px;color:var(--muted-2);flex:none;}
.need-search input{flex:1;min-width:0;border:0;background:transparent;min-height:52px;font-size:1rem;padding:0;outline:none;box-shadow:none;}
.need-tiles{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));}
.need-tile{display:flex;align-items:flex-start;gap:.7rem;text-align:left;padding:.85rem .95rem;border:1.5px solid var(--border-2);border-radius:14px;background:#fff;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,background .15s,box-shadow .15s;}
.need-tile:hover{border-color:var(--ocean-2);}
.need-tile:focus-visible{outline:3px solid var(--ring);outline-offset:2px;}
.need-tile svg{width:24px;height:24px;color:var(--ocean);flex:none;margin-top:.1rem;}
.need-tile b{display:block;color:var(--text);font-size:.95rem;line-height:1.25;}
.need-tile small{display:block;color:var(--muted-2);font-size:.8rem;line-height:1.35;margin-top:.15rem;}
.need-tile.is-on{border-color:var(--ocean);background:var(--ocean-soft);box-shadow:0 0 0 1px var(--ocean) inset;}
.need-tile.is-dim{display:none;}
.need-empty{margin:.8rem 0 0;color:var(--muted);font-size:.92rem;}
.need-suggest{margin:1rem 0 .4rem;padding:.85rem .95rem;border-radius:14px;background:var(--sage-soft);}
.need-suggest .q-label{display:block;font-weight:700;color:var(--text);margin-bottom:.5rem;font-size:.95rem;}
.need-chips{display:flex;flex-wrap:wrap;gap:.45rem;}
.need-chip{display:inline-flex;align-items:center;gap:.35rem;min-height:40px;padding:.4rem .8rem;border:1px solid var(--border-2);border-radius:999px;background:#fff;color:var(--text);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;}
.need-chip svg{width:16px;height:16px;color:var(--ocean);flex:none;}
.need-chip span{color:var(--muted-2);font-weight:700;}
.need-chip:hover{border-color:var(--ocean);}
.need-chip[hidden]{display:none;}
.need-chip-svc{border-style:dashed;}
.need-all{margin:.6rem 0 0;padding:.4rem 0;border:0;background:none;color:var(--ocean);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.need-all[hidden]{display:none;}
.is-flash{animation:needflash 1.2s ease;}
@keyframes needflash{0%{box-shadow:0 0 0 3px var(--ocean-glow);}100%{box-shadow:none;}}
@media (prefers-reduced-motion:reduce){.is-flash{animation:none;}}
.needs.has-picks .need-tiles{display:flex;flex-wrap:wrap;gap:.4rem;}
.needs.has-picks .need-tile{align-items:center;gap:.4rem;padding:.45rem .8rem;border-radius:999px;min-height:40px;}
.needs.has-picks .need-tile svg{width:18px;height:18px;margin:0;}
.needs.has-picks .need-tile b{font-size:.86rem;}
.needs.has-picks .need-tile small{display:none;}

/* Step error line (accessibility sweep 2026-11-03): said in words, not just an outline. */
.q-error{margin:.6rem 0 0;color:#9a3412;font-weight:700;font-size:.92rem;}
.q-error:empty{display:none;}