/* ============================================================
   MAIN — Chandler layout. REPLACES engine/base/assets/css/main.css
   for this site only.

   Derived from three East Valley stucco sites (analysis in
   research/stucco-repair-chandler/competitors.md). The patterns
   taken are the ones corroborated across both independent design
   lineages, not an average of their visuals:

     · the phone number IS the brand mark, top-left, large
     · full-bleed photograph of stucco being troweled
     · plain "service + city" H1, no slogan
     · four-field form, at the fold
     · ONE saturated accent used hard, no gradients, no secondary
     · call CTA repeated in the body, not only the header

   The VISUAL LANGUAGE is direct response, not restraint. That
   distinction is the whole point of this file and the reason the
   first attempt was rejected: the structure was right and the
   treatment was wrong. Concretely, and everywhere:

     · heavy condensed poster type (--display) for every heading,
       label, number and button
     · outlined headline over the hero photo (-webkit-text-stroke
       + paint-order + a hard offset shadow)
     · thick borders — 3px to 6px — instead of soft shadows
     · ZERO border radius, anywhere
     · saturated red and yellow blocks, full-bleed

   Tokens only — no raw colours (hard rule #2). Class names
   site.js binds to are fixed and must not be renamed: #hdr/.stuck,
   [data-menu]/.menu/.open, #nav, #mnav, #burger, #close,
   .macc>button, .rv/.in, #quoteForm/#qSent/#qError/.on, .hp, .sticky
   ============================================================ */

/* Anton is a single-weight face. Declaring the range 100-900 tells the
   browser this file covers every weight, which SUPPRESSES SYNTHETIC BOLD —
   without it, the `font-weight:800` rules below produce a smeared faux-bold
   on an already-heavy poster face. See fonts/README.md for provenance and
   for why this is self-hosted rather than left to Impact. */
@font-face{font-family:'Anton';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/anton-latin.woff2) format('woff2')}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:.01em;margin:0}
h1,.h2{text-transform:uppercase}
a{color:inherit}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.wrap--narrow{max-width:840px}
.sec{padding-block:clamp(48px,6vw,84px)}
.sec--alt,.sec-alt{background:var(--cream)}
.secx,.head{max-width:66ch;margin-bottom:clamp(24px,3vw,40px)}
.eyebrow{font-family:var(--display);font-weight:400;font-size:clamp(15px,1.5vw,20px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 6px;line-height:1.1}
/* On every red or photographic surface the eyebrow flips to yellow. Red on red
   is invisible and red on a dark photo fails contrast — both were live before
   this rule existed, and neither shows up in a build or an audit. */
.eyebrow--onbrand,.hub .eyebrow,#areas .eyebrow,.svc-hero .eyebrow,.quote .eyebrow{color:var(--zest)}
.h2{font-size:clamp(30px,4.4vw,58px);line-height:1}
.lede{font-size:clamp(15.5px,1.4vw,17px);color:var(--muted);max-width:62ch;margin-top:10px}
.small{font-size:14px;color:var(--muted);line-height:1.55}
.center{text-align:center;margin-inline:auto}
.center .lede{margin-inline:auto}
.head .h2{margin-bottom:8px}

/* ══ BUTTONS — poster type, square, thick border, no transition blur ══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:400;font-size:clamp(19px,2vw,25px);letter-spacing:.04em;text-transform:uppercase;
  padding:12px 26px;border-radius:0;border:3px solid transparent;cursor:pointer;text-decoration:none;min-height:54px;
  line-height:1;transition:background .14s,color .14s,border-color .14s}
.btn svg{width:20px;height:20px;flex:none}
.btn--accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--accent:hover{background:var(--accent-dk);border-color:var(--accent-dk)}
.btn--brand{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn--brand:hover{background:var(--brand-dk);border-color:var(--brand-dk)}
/* the yellow call button — the loudest element on the page, on purpose */
.btn--zest{background:var(--zest);color:var(--zest-ink);border-color:var(--ink)}
.btn--zest:hover{background:var(--zest-dk);border-color:var(--ink)}
.btn--out{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--out:hover{background:var(--ink);color:#fff}
.btn--outw{background:transparent;border-color:#fff;color:#fff}
.btn--outw:hover{background:#fff;color:var(--ink)}
.btn--wide{width:100%}
:focus-visible{outline:3px solid var(--zest);outline-offset:2px}

/* ══ HEADER — phone as the brand mark, opaque, above the hero ══
   Fixed rather than absolute-over-the-photo: the references all put the number
   on a solid bar, and it is the single element the whole design is built around,
   so it stays on screen. .stuck (added by site.js at scrollY>90) therefore only
   adds separation — the position never changes, so there is no layout jump. */
.hdr{position:fixed;top:0;left:0;right:0;z-index:80;background:var(--bg);border-bottom:4px solid var(--brand)}
.hdr.stuck{box-shadow:0 6px 0 -3px rgba(var(--ink-rgb),.10)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:11px}

.phlogo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none;max-width:min(56vw,460px)}
.phlogo__m{width:30px;height:30px;display:grid;place-items:center;flex:none;color:var(--accent)}
.phlogo__m svg{width:30px;height:30px}
@media(max-width:700px){.phlogo__m{display:none}}
.phlogo__t{min-width:0}
.phlogo__t b{display:block;font-family:var(--display);font-size:clamp(27px,3.6vw,46px);font-weight:400;
  letter-spacing:.005em;line-height:.92;white-space:nowrap}
.phlogo__t>span{display:block;font-family:var(--display);font-weight:400;font-size:clamp(11px,1.15vw,13.5px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav{display:flex;align-items:center;gap:2px}
.nav>*{position:relative}
.nav a,.nav button.navlink{font-family:var(--display);font-weight:400;font-size:19px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;padding:9px 12px;border-radius:0;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:color .14s}
.nav a:hover,.nav button.navlink:hover{color:var(--accent)}
.nav a.langsw{color:var(--accent)}
.caret{width:9px;height:9px;opacity:.75;transition:transform .2s}
[aria-expanded="true"] .caret{transform:rotate(180deg)}

.menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:270px;
  background:var(--bg);border:3px solid var(--ink);border-radius:0;padding:6px;
  opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility .16s;z-index:90}
.menu.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.menu::before{content:"";position:absolute;left:0;right:0;top:-13px;height:13px}
.menu--wide{min-width:440px;display:grid;grid-template-columns:1fr 1fr;gap:0}
.menu a{display:block;color:var(--ink)!important;font-family:var(--sans);font-size:14px;font-weight:700;
  padding:9px 11px;white-space:normal;line-height:1.3;text-transform:none;letter-spacing:0}
.menu a:hover{background:var(--brand-lt)!important;color:var(--accent)!important}
.menu a em{display:block;font-style:normal;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
.menu .all{grid-column:1/-1;border-top:2px solid var(--ink);margin-top:4px;padding-top:9px;
  color:var(--accent)!important;font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:.04em;text-transform:uppercase}

.hdr__cta{display:flex;align-items:center;gap:10px;flex:none}
.hdr__btn{min-height:46px;padding:9px 20px;font-size:19px;border-radius:40px;border-color:var(--accent);
  background:transparent;color:var(--accent)}
.hdr__btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
@media(max-width:1150px){.nav{display:none}.hdr__btn{display:none}.burger{display:grid!important}}
.burger{display:none;background:none;border:3px solid var(--ink);border-radius:0;width:48px;height:48px;cursor:pointer;padding:0;place-items:center}
.burger i{display:block;width:20px;height:3px;background:var(--ink);position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:20px;height:3px;background:inherit}
.burger i::before{top:-7px}.burger i::after{top:7px}

/* mobile panel */
.mnav{position:fixed;inset:0;z-index:95;background:var(--paper);transform:translateY(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;display:none}
.mnav.on{transform:translateY(0)}
@media(max-width:1150px){.mnav{display:block}}
.mnav__top{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:4px solid var(--brand)}
.close{background:none;border:3px solid var(--ink);border-radius:0;width:48px;height:48px;font-size:26px;line-height:1;cursor:pointer;color:var(--ink)}
.mnav__body{padding:14px 24px 46px}
.macc{border-bottom:2px solid var(--line)}
.macc>button{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;padding:17px 0;
  font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);cursor:pointer;text-align:left}
.macc>button span{color:var(--accent)}
.macc__p{display:none;padding-bottom:12px}
.macc__p.on{display:block}
.macc__p a{display:block;padding:9px 0 9px 15px;border-left:3px solid var(--line);font-size:15.5px;color:var(--muted);text-decoration:none}
.macc__p a:hover{color:var(--accent);border-color:var(--accent)}
.mlink{display:block;padding:17px 0;border-bottom:2px solid var(--line);font-family:var(--display);font-weight:400;
  font-size:24px;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.mlink.langsw{color:var(--accent)}
.mnav__cta{display:grid;gap:11px;margin-top:26px}

/* ══ LEAD — full-bleed trowel photo, FORM LEFT, outlined headline right ══ */
.lead{position:relative;color:#fff;background:var(--brand-dk);padding-block:clamp(104px,11vw,138px) clamp(44px,5vw,72px);overflow:hidden}
.lead__media{position:absolute;inset:0;z-index:0}
.lead__img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus,70% 42%)}
/* Directional scrim, not a flat wash: heaviest on the form side, almost clear on
   the right so the photograph is still legible behind the headline. */
.lead__media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(var(--scrim-rgb),.66) 0%,rgba(var(--scrim-rgb),.42) 55%,rgba(var(--scrim-rgb),.18) 100%)}
.lead__g{position:relative;z-index:2;display:grid;gap:clamp(30px,3.4vw,52px);align-items:start}
/* Desktop puts the form on the LEFT, as both Duda-lineage references do. On
   phones the natural DOM order stands — headline first, so the visitor knows
   what the page is before being asked for their number. */
@media(min-width:1000px){
  .lead__g{grid-template-columns:minmax(0,450px) 1fr}
  .lead__copy{order:2}
  .lead__form{order:1}
}
/* THE signature move: white fill, dark stroke, hard offset shadow. paint-order
   keeps the stroke behind the fill so the letterforms stay crisp. */
.lead h1{font-size:clamp(40px,6vw,84px);line-height:.94;margin-bottom:16px;color:#fff;
  -webkit-text-stroke:2px rgba(0,0,0,.55);paint-order:stroke fill;text-shadow:4px 4px 0 rgba(0,0,0,.4)}
.lead__sub{font-size:clamp(16px,1.6vw,19px);color:#fff;max-width:46ch;margin-bottom:12px;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.lead__tag{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.3vw,27px);letter-spacing:.03em;
  color:var(--zest);margin-bottom:22px;text-shadow:2px 2px 0 rgba(0,0,0,.45)}
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--zest);color:var(--zest-ink);border:3px solid var(--ink);
  padding:7px 14px;font-family:var(--display);font-weight:400;font-size:16px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(var(--zest-rgb),.6);animation:pl 2.2s infinite}
@keyframes pl{70%{box-shadow:0 0 0 10px rgba(var(--zest-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--zest-rgb),0)}}
.lead__tel{display:inline-flex;align-items:center;gap:11px;background:var(--zest);color:var(--zest-ink);text-decoration:none;
  font-family:var(--display);font-weight:400;font-size:clamp(24px,2.9vw,38px);letter-spacing:.03em;
  border:4px solid var(--ink);padding:11px 26px;line-height:1.05}
.lead__tel:hover{background:var(--zest-dk)}
.lead__tel svg{width:26px;height:26px;flex:none}

/* the red nameplate above the hero form */
.plate{background:var(--bg);border:5px solid var(--brand);padding:16px 22px;text-align:center;margin-bottom:14px}
.plate b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(26px,3.2vw,42px);
  line-height:.96;color:var(--ink);letter-spacing:.01em;text-transform:uppercase}

/* ══ THE FORM CARD ══ */
.qf{background:var(--bg);color:var(--ink);border-radius:0;padding:clamp(20px,2.2vw,28px);border:3px solid var(--ink)}
.qf__h{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.8vw,34px);margin-bottom:4px;text-transform:uppercase;letter-spacing:.01em}
.qf__urgent{font-size:14px;color:var(--muted);margin-bottom:16px;line-height:1.5}
.qf__urgent a{color:var(--accent);font-weight:700}
/* label beside the input, as all three references do — it buys a shorter form */
.field{display:grid;grid-template-columns:82px 1fr;align-items:center;gap:10px;margin-bottom:12px}
.field:has(textarea){align-items:start}
.field:has(textarea) label{padding-top:10px}
@media(max-width:420px){.field{grid-template-columns:1fr;gap:4px}.field:has(textarea) label{padding-top:0}}
label{display:block;font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);margin:0}
input,select,textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--cream);
  border:1px solid var(--line);border-radius:0;padding:11px 13px;transition:border-color .14s,background .14s}
input:focus,select:focus,textarea:focus{background:var(--bg);border-color:var(--accent);outline:none}
textarea{min-height:92px;resize:vertical}
.consent{display:flex;gap:11px;align-items:flex-start;margin:10px 0 16px}
.consent input{width:20px;height:20px;flex:none;margin-top:3px;accent-color:var(--accent)}
.consent label{font-weight:400;font-size:13px;color:var(--muted);line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent{display:none;text-align:center;padding:26px 6px}
.sent--err h3{color:var(--accent)}
.sent.on{display:block;animation:fd .35s ease both}
.sent h3{font-size:26px;margin-bottom:8px;text-transform:uppercase}
@keyframes fd{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ══ URGENCY STRIP — the yellow band under the hero ══
   Same `stats` data the other sites render as a four-column bar; here it is a
   single centred run of label/detail pairs, which is what carries urgency. */
.trustbar{background:var(--zest);color:var(--zest-ink);border-block:4px solid var(--ink);padding-block:14px}
.trustbar ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:8px 26px}
.trustbar li{display:flex;align-items:baseline;gap:8px;padding:0}
.trustbar b{font-family:var(--display);font-weight:400;font-size:clamp(17px,1.9vw,24px);letter-spacing:.03em;
  text-transform:uppercase;color:var(--zest-ink);white-space:nowrap}
.trustbar span{font-size:14.5px;font-weight:700;color:var(--zest-ink);line-height:1.3}

/* ══ GRIDS / CARDS ══ */
.grid{display:grid;gap:18px}
@media(min-width:680px){.g2,.g4{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1050px){.g4{grid-template-columns:repeat(4,1fr)}}

.pain{background:var(--bg);border:1px solid var(--line);border-top:6px solid var(--brand);border-radius:0;padding:22px 20px}
.sec--alt .pain{background:var(--bg)}
.pain__i{display:none}
.pain h3{font-size:clamp(21px,2.1vw,25px);margin-bottom:8px;line-height:1.05}
.pain p{font-size:15px;color:var(--muted);line-height:1.55;margin:0}

/* ══ SERVICES AS NUMBERED ROWS ══
   No new markup. The engine's service card is
     a.svc > span.svc__i(svg) + h3 + p + span.more
   and :has() lets the row treatment apply only to grids that actually hold
   service cards, so the area/`.acard` grids elsewhere keep their own layout.
   The 01-08 numbers are a CSS counter rendered into .svc__i, which is already
   there to hold the icon; the icon itself is hidden rather than removed,
   because it is generated from config and other sites still use it. */
.grid:has(>.svc){grid-template-columns:1fr!important;gap:0;counter-reset:svc;border-top:3px solid var(--ink)}
.svc{counter-increment:svc;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:15px 2px;
  display:grid;grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"n t a" "n d a";
  column-gap:8px;align-items:center;text-decoration:none;color:inherit;transition:background .14s}
.svc:hover{background:var(--cream);transform:none}
.svc__i{grid-area:n;width:auto;height:auto;background:none;border-radius:0;margin:0;display:block;
  font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,36px);color:var(--accent);line-height:1;letter-spacing:.02em}
.svc__i svg{display:none}
.svc__i::before{content:counter(svc,decimal-leading-zero)}
.svc h3,.svc__h{grid-area:t;font-size:clamp(20px,2.1vw,26px);margin:0;line-height:1.1}
.svc p{grid-area:d;font-size:15px;color:var(--muted);line-height:1.5;margin:2px 0 0}
.more{grid-area:a;align-self:center;margin:0;font-family:var(--display);font-weight:400;font-size:22px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--accent);white-space:nowrap;padding-left:14px}
@media(max-width:560px){
  .svc{grid-template-columns:46px minmax(0,1fr);grid-template-areas:"n t" "n d"}
  .more{display:none}
}

/* ══ WHY ══ */
.why__g{display:grid;gap:clamp(28px,3.6vw,56px);align-items:center}
@media(min-width:940px){.why__g{grid-template-columns:1fr 1fr}}
.why__list{display:grid;gap:0;margin-top:22px;border-top:1px solid var(--line)}
.why__it{padding:14px 0;border-bottom:1px solid var(--line)}
.why__it dt{font-family:var(--display);font-weight:400;font-size:clamp(19px,2vw,24px);letter-spacing:.01em;margin-bottom:3px}
.why__it dd{font-size:15px;color:var(--muted);margin:0;line-height:1.5}
/* .tick is the engine home template's check bullet. This site's forked home.html
   uses dl/dt/dd and never renders one, but the service-page sidebar does — so it
   is styled, not hidden. Hiding it here would silently strip the promise list. */
.tick{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none;margin-top:2px}
.tick svg{width:13px;height:13px}
.frame,.img-card{border-radius:0;overflow:hidden;border:5px solid var(--ink)}
.frame img,.img-card img{width:100%;height:auto;display:block}
.img-card{margin:32px 0}

/* ══ PROCESS — kept; the engine already counts these ══ */
.steps{display:grid;gap:0;counter-reset:st;border-top:3px solid var(--ink)}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr);gap:0 26px}}
.st{border-top:0;border-bottom:1px solid var(--line);padding:16px 0}
@media(min-width:900px){.st{border-bottom:0;border-top:6px solid var(--brand);padding-top:18px}}
.st__n{counter-increment:st;display:block;width:auto;height:auto;background:none;border-radius:0;
  font-family:var(--display);font-weight:400;font-size:32px;color:var(--accent);line-height:1;margin-bottom:8px}
.st__n::before{content:counter(st,decimal-leading-zero)}
.st h3{font-size:21px;margin-bottom:6px;line-height:1.08}
.st p{font-size:15px;color:var(--muted);margin:0;line-height:1.5}

/* ══ SERVICE AREAS — white chips on a full red block ══ */
#areas{background:var(--brand);color:#fff}
#areas .lede,#areas .small{color:var(--on-brand-dim)}
.tiles{display:flex;flex-wrap:wrap;gap:10px;background:none;border:0;border-radius:0;overflow:visible}
.tiles a{display:block;background:none;border:3px solid #fff;padding:7px 18px;text-decoration:none;color:#fff;
  font-family:var(--display);font-weight:400;font-size:clamp(18px,1.9vw,23px);letter-spacing:.02em;
  text-transform:uppercase;transition:background .14s,color .14s}
.tiles a:hover{background:#fff;color:var(--brand)}
.tiles b{display:block;font-weight:400}
.tiles span{display:none}          /* county line — the references show city only */
.tiles__note{margin-top:22px}

/* ══ FAQ ══ */
.faq{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:16px 46px 16px 0;position:relative;
  font-family:var(--display);font-weight:400;font-size:clamp(20px,2vw,25px);line-height:1.12;letter-spacing:.01em}
summary::-webkit-details-marker{display:none}
/* A hard square +/- rather than the engine's animated one. The reference sites
   draw no marker at all, but a FAQ with no affordance is a real usability
   regression, so this is kept and rebuilt in the same flat language. */
summary::after,summary::before{content:"";position:absolute;background:var(--accent)}
summary::after{right:6px;top:calc(50% - 1.5px);width:16px;height:3px}
summary::before{right:12.5px;top:calc(50% - 8px);width:3px;height:16px}
details[open] summary::before{opacity:0}
.ans{padding:0 46px 18px 0;font-size:15.5px;color:var(--muted);line-height:1.6}

/* ══ QUOTE SECTION (inner pages) ══ */
.quote{background:var(--brand);color:#fff;padding-block:clamp(48px,5.6vw,80px)}
.quote__g{display:grid;gap:clamp(28px,3.4vw,52px);align-items:start}
@media(min-width:980px){.quote__g{grid-template-columns:.95fr 1.05fr}}
.quote .h2{margin-bottom:10px}
.quote__lede{color:var(--on-brand);font-size:16.5px;max-width:52ch}
.qlist{margin:22px 0 0;border-top:2px solid rgba(255,255,255,.35)}
.qlist li{padding:11px 0 11px 24px;border-bottom:2px solid rgba(255,255,255,.35);font-size:15px;color:var(--on-brand-dim);position:relative}
.qlist li::before{content:"";position:absolute;left:0;top:20px;width:14px;height:3px;background:var(--zest)}
.quote__tel{margin-top:22px}
.quote__tel a{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.4vw,30px);letter-spacing:.03em;
  text-transform:uppercase;color:var(--zest);text-decoration:none}
.quote__tel a:hover{text-decoration:underline}

/* ══ CTA BAND — last thing on the page, centred, dark ══ */
.band{position:relative;color:#fff;overflow:hidden;padding-block:clamp(52px,6vw,86px);background:var(--ink);text-align:center}
.band__media{display:none}                       /* the engine's decorative SVG */
.band__in{position:relative;z-index:2;max-width:820px;margin-inline:auto}
.band h2{font-size:clamp(32px,5vw,62px);margin-bottom:10px;text-transform:uppercase;line-height:1}
.band p{color:var(--on-brand-dim);font-size:17px}
.band__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;justify-content:center}
.band .btn--zest{border-color:#fff;padding-inline:34px}

/* ══ INNER PAGE HEADS (engine templates: .svc-hero / .hub) ══ */
.hub{background:var(--brand);color:#fff;padding-block:clamp(112px,11vw,150px) clamp(34px,4.6vw,52px)}
.hub .lede{color:var(--on-brand-dim);max-width:62ch}
.hub__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.crumbs{font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-brand-fade);margin-bottom:12px}
.crumbs a{color:var(--on-brand-dim);text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.7;margin-inline:6px}
/* the service/city photo hero — same outlined treatment as the home page, one
   step lighter so it stays a page head rather than competing with it */
.svc-hero h1{color:#fff;-webkit-text-stroke:1.5px rgba(0,0,0,.5);paint-order:stroke fill;text-shadow:3px 3px 0 rgba(0,0,0,.35)}
.svc-hero .crumbs{color:var(--on-brand-mute)}

/* ══ ENGINE SERVICE / CITY PAGE FURNITURE ══ */
.svc-box{background:var(--bg);border:3px solid var(--ink);border-radius:0;padding:20px}
.svc-box h3{font-family:var(--display);font-weight:400;font-size:19px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px}
.facts .k{color:var(--muted)}
.how-long{border-left:6px solid var(--accent);background:var(--cream);padding:15px 20px;border-radius:0;margin:26px 0}
.acard{background:var(--bg);border:1px solid var(--line);border-left:6px solid var(--brand);border-radius:0;padding:14px 18px;
  text-decoration:none;color:inherit;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:background .14s}
.acard:hover{background:var(--cream)}
.acard b{display:block;font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:.01em}
.acard span{display:block;font-size:13px;color:var(--muted)}
.acard svg{color:var(--accent);flex:none}
.content h2,.svc-main h2{margin:34px 0 12px;font-size:clamp(24px,2.7vw,34px)}
.content h2:first-child,.svc-main h2:first-child{margin-top:0}
.why-both{background:var(--bg);border:3px solid var(--ink);border-radius:0;padding:22px;margin:26px 0}
.why-both h3{margin:0 0 12px;color:var(--accent);font-size:22px;text-transform:uppercase}
.why-both ul{margin:14px 0 0;padding-left:20px}
.why-both ul li{margin:8px 0;color:var(--muted);list-style:disc}
.warn-box{background:var(--zest-lt);border-left:6px solid var(--zest);padding:18px 22px;border-radius:0;margin:28px 0}
.warn-box strong{font-family:var(--display);font-weight:400;color:var(--zest-ink);display:block;margin-bottom:8px;font-size:21px;text-transform:uppercase}
.mini li{color:var(--muted);font-size:14px;padding:5px 0}
.fcard{background:var(--bg);color:var(--ink);border-radius:0;padding:clamp(20px,2.2vw,26px);border:3px solid var(--ink)}
.fcard h3{font-size:24px;margin-bottom:6px;text-transform:uppercase}
.f2{display:grid;gap:14px}
@media(min-width:560px){.f2{grid-template-columns:1fr 1fr}}
.ptab{background:var(--bg);border:3px solid var(--ink);border-radius:0;overflow:hidden;max-width:840px;margin-inline:auto}
.prow{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--line);background:var(--bg)}
.prow:last-child{border-bottom:0}
.prow .amt{font-family:var(--display);font-weight:400;font-size:22px;color:var(--accent);white-space:nowrap}
.tcard{background:var(--bg);border:1px solid var(--line);border-top:6px solid var(--brand);border-radius:0;padding:22px 20px}
.stars{color:var(--zest);letter-spacing:2px}

/* ══ STICKY MOBILE BAR ══ */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--paper);border-top:4px solid var(--ink)}
.sticky .btn{flex:1;min-height:54px;font-size:20px;padding-inline:8px}
@media(max-width:820px){.sticky{display:flex}body{padding-bottom:82px}}

/* ══ REVEAL ══ */
.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}