/* ============================================================
   Staffy Homes — local area pages · "THE NIGHT CALL", one step
   down in scale from the homepage. Each page opens as the cold
   house at 11pm — a deep night ground, cold moonlight falling
   from the top-right, the warm ember bloom breathing over the
   hearth photo, an ember head glowing on the temperature rail —
   then DAWN ARRIVES at the first paper section, because these
   are pages people actually read: long-form prose stays on warm
   paper (ink text, AA+), and every ink↔paper crossing opens on
   the 2px cold→ember→flame temperature hairline so night and
   morning always read as the same house. Fraunces 560 display
   (SOFT/WONK italics) + Hanken body + IBM Plex Mono stamps ·
   outline numerals on the fault ledger · one vertical rhythm.
   ============================================================ */
:root{
  --ink:#161009; --ink-2:#211711; --paper:#f9f2e3; --paper-2:#f0e5cf; --paper-3:#e7d9bd;
  --ember:#e35d25; --ember-text:#a63a10; --ember-deep:#8a2a0a;
  --flame:#f6a33c; --copper:#b96a35; --gold:#f2c368;
  --cold:#48657a; --danger-deep:#4d100b;
  /* the night itself — the homepage hero's ground, verbatim */
  --night-hi:#1b1209; --night-deep:#120c06; --moon:#d6e6f0;
  --steel:#655c4d; --steel-2:#a3968a; --line:rgba(22,16,9,.14); --line-d:rgba(249,242,227,.15);
  --shadow:0 30px 70px -30px rgba(64,24,4,.55); --shadow-soft:0 14px 34px -18px rgba(64,24,4,.4);
  --glow-ember:0 0 44px -8px rgba(227,93,37,.55);
  --rad:16px; --rad-lg:28px; --tap:48px;
  /* nav gutter + floating-dock height — shared with the homepage */
  --gutter:20px; --dock-h:78px;
  --disp:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;
  /* one vertical rhythm, shared with the homepage */
  --sp-slab:clamp(64px,9vw,110px);
  --sp-head:clamp(30px,4.5vw,48px);
  --fs-h2:clamp(1.9rem,4.2vw,3.3rem);
  /* the signature temperature gradient: cold → ember → flame */
  --temp:linear-gradient(90deg,var(--cold) 0%,#7d6a55 34%,var(--copper) 55%,var(--ember) 78%,var(--flame) 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:calc(var(--dock-h) + 14px + env(safe-area-inset-bottom));
  background-image:radial-gradient(120% 70% at 85% -10%,rgba(242,195,104,.12),transparent 60%)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1080px,92vw);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px}
:focus-visible{outline:2.5px solid var(--ember);outline-offset:3px;border-radius:4px}
.dark :focus-visible,footer :focus-visible,.ctaband :focus-visible{outline-color:var(--gold)}
::selection{background:var(--ember);color:#fff8ef}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.45;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>")}

/* ---------- the stamp — hard facts pressed into metal ---------- */
.stamp{font-family:var(--mono);font-weight:500;letter-spacing:.08em}

/* ---------- buttons — identical to the homepage ---------- */
.btn{font-family:var(--body);font-weight:700;font-size:15px;border:0;cursor:pointer;border-radius:999px;padding:12px 24px;min-height:var(--tap);
  background:var(--ink);color:var(--paper);transition:transform .2s,box-shadow .25s;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;box-shadow:var(--shadow-soft)}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(64,24,4,.6)}
.btn:active{transform:translateY(0)}
.btn-ember{background:linear-gradient(120deg,var(--ember) 8%,#ef7f2e 52%,var(--flame) 100%);color:#2a1503;box-shadow:0 10px 26px -12px rgba(180,60,10,.7)}
.btn-ember:hover{box-shadow:0 16px 36px -12px rgba(200,70,14,.75),var(--glow-ember)}
/* the XL primary — the flow's CTAs render `btn btn-ember btn-xl`, but the
   XL treatment lives only in staffy.css, which the town/area pages never
   load. Mirrored here (per the homepage-dep precedent below) so the primary
   action keeps full size on the area pages, not just its 56px min-height. */
.btn-xl{font-size:17px;padding:17px 30px;min-height:56px}
@media(max-width:640px){.btn-xl{font-size:16px}}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn-ghost:hover{border-color:var(--ink)}
.btn-outline-paper{background:transparent;color:var(--paper);border:1.5px solid rgba(249,242,227,.45);box-shadow:none}
.btn-outline-paper:hover{border-color:var(--paper)}

/* ---------- nav — the homepage's night bar: the page is framed
   by the dark even once you've scrolled onto morning paper ---------- */
/* NAV — one slim fixed bar: logo · call · menu (the homepage bar,
   ported verbatim; only the row keeps the subpages' wider column). */
nav{position:fixed;top:0;left:0;right:0;z-index:40;
  padding-top:env(safe-area-inset-top);
  background:linear-gradient(180deg,rgba(18,12,7,.88),rgba(18,12,7,.72));
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid rgba(242,195,104,.14);transition:background .4s,border-color .4s}
nav:after{content:"";display:block;height:2px;background:var(--temp);opacity:.75}
nav :focus-visible{outline-color:var(--gold)}
.navrow{display:flex;align-items:center;gap:10px;padding:10px 0;width:min(1080px,92vw);margin-inline:auto}
.brand{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.brand .fl{width:20px;height:24px;filter:drop-shadow(0 3px 7px rgba(227,93,37,.45))}
.brand img{height:30px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.95;transition:filter .4s,opacity .4s}
.brand img.mk{height:28px}
.navspring{flex:1}
.navbtn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(242,195,104,.32);background:rgba(249,242,227,.06);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--paper);flex:none;
  transition:transform .15s,background .3s,color .4s,border-color .4s}
.navbtn:active{transform:scale(.92)}
.navbtn svg{width:19px;height:19px}
.navbtn.call svg{color:var(--flame)}
/* burger — three coals that become an X */
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s,opacity .3s}
.burger span+span{margin-top:4.5px}
.burger{flex-direction:column}
body.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* once you scroll onto paper, the bar turns to paper too */
body.on-paper nav{background:color-mix(in srgb,var(--paper) 88%,transparent);border-bottom-color:var(--line)}
body.on-paper .brand img{filter:none;opacity:1}
body.on-paper .navbtn{color:var(--ink);border-color:var(--line);background:rgba(22,16,9,.03)}
body.on-paper .navbtn.call svg{color:var(--ember-text)}
body.menu-open nav{background:transparent;border-bottom-color:transparent}
body.menu-open nav:after{opacity:0}
body.menu-open .brand img{filter:brightness(0) invert(1);opacity:.95}
body.menu-open .navbtn{color:var(--paper);border-color:rgba(242,195,104,.32);background:rgba(249,242,227,.06)}

/* MENU — a full-screen warm room (homepage, verbatim). On the wider
   subpage viewports the column centres itself so it never sprawls. */
.menu{position:fixed;inset:0;z-index:35;background:var(--ink);color:var(--paper);
  padding:calc(88px + env(safe-area-inset-top)) var(--gutter) calc(24px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s;
  background-image:
    radial-gradient(120% 60% at 50% -12%,rgba(246,163,60,.24),rgba(227,93,37,.08) 46%,transparent 68%),
    radial-gradient(70% 40% at 8% 108%,rgba(72,101,122,.18),transparent 60%)}
body.menu-open .menu{visibility:visible;opacity:1;transition:opacity .35s}
.menu-greet{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  font-weight:500;opacity:0;transform:translateY(12px);transition:opacity .4s .04s,transform .4s .04s}
body.menu-open .menu-greet{opacity:1;transform:none}
.menu-links{display:flex;flex-direction:column;margin-top:14px}
.menu-links a{font-family:var(--disp);font-weight:560;font-size:clamp(2rem,9.5vw,3rem);letter-spacing:-.025em;line-height:1.05;
  padding:14px 2px;display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line-d);
  opacity:0;transform:translateY(18px);transition:opacity .45s cubic-bezier(.2,.7,.25,1),transform .45s cubic-bezier(.2,.7,.25,1)}
.menu-links a i{font-family:var(--mono);font-style:normal;font-weight:500;font-size:11px;letter-spacing:.2em;color:var(--copper)}
.menu-links a em{font-style:normal;margin-left:auto;color:var(--copper);font-size:.55em;transform:translateX(-6px);opacity:0;transition:transform .3s,opacity .3s}
.menu-links a:active em{transform:none;opacity:1}
body.menu-open .menu-links a{opacity:1;transform:none}
body.menu-open .menu-links a:nth-child(1){transition-delay:.08s}
body.menu-open .menu-links a:nth-child(2){transition-delay:.15s}
body.menu-open .menu-links a:nth-child(3){transition-delay:.22s}
body.menu-open .menu-links a:nth-child(4){transition-delay:.29s}
.menu-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(14px);
  transition:opacity .45s .34s,transform .45s .34s}
body.menu-open .menu-foot{opacity:1;transform:none}
.menu-foot .btn{width:100%}
.menu-call{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;font-family:var(--mono);
  font-weight:600;font-size:16px;letter-spacing:.04em;color:var(--gold);border:1.5px solid rgba(242,195,104,.4);border-radius:18px}
.menu-hours{text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-2)}
.menu-strip{height:3px;border-radius:3px;background:var(--temp);opacity:.7;margin-top:4px}
@media(min-width:760px){
  .menu{align-items:center}
  .menu-greet,.menu-links,.menu-foot{width:100%;max-width:600px;margin-inline:auto}
  .menu-links a{font-size:clamp(2.4rem,5vw,3.2rem)}
}

/* ---------- hero — the same lit wall as the homepage (promoted 2026-08).
   One full-bleed warmth photograph, town H1 standing in its firelight.
   WATERMARK CROP preserved exactly as on the homepage: the frame clips
   (overflow:hidden) and the img is 115% of the frame height pinned to
   the TOP — the stock watermark in the source's bottom-right ~10% can
   never enter the frame, and the bottom scrim buries the approach. ---------- */
.hero{position:relative;z-index:2;color:var(--paper);overflow:hidden;
  background:linear-gradient(180deg,var(--night-hi) 0%,var(--ink) 55%,var(--night-deep) 100%);
  display:flex;align-items:flex-end;
  min-height:min(78vh,760px);min-height:min(78svh,760px);
  padding:clamp(56px,8vh,88px) 0 clamp(34px,4.5vh,52px)}
.hero-media{position:absolute;inset:0;z-index:0}
/* the warmth photo, seen at 11pm — dimmed into the dark so the
   hearth reads as the room's only warm light source */
.hero-media img{position:absolute;top:0;left:0;width:100%;height:115%;object-fit:cover;object-position:50% 0;
  filter:brightness(.74) saturate(1.06)}
/* the NIGHT layer over the scene (above the photo, below the copy):
   cold moonlight falling from the top-right — the homepage's moonlit
   window, felt rather than drawn — and the pilot's warm pool on the
   floor of the room */
.hero:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(215deg,rgba(214,230,240,.16) 0%,rgba(120,160,185,.1) 22%,rgba(72,101,122,.05) 45%,transparent 66%),
  radial-gradient(62% 46% at 50% 104%,rgba(227,93,37,.22),transparent 72%)}
/* the scrim — one lit scene, not a graphic on a picture: the bottom
   gradient grounds the copy AND buries the watermark zone; the diagonal
   wash holds AA behind the text column; the top radial keeps the lamp glow */
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(0deg,var(--ink) 0%,rgba(22,16,9,.88) 12%,rgba(22,16,9,.56) 34%,rgba(22,16,9,.2) 56%,transparent 74%),
  linear-gradient(102deg,rgba(22,16,9,.88) 0%,rgba(22,16,9,.7) 40%,rgba(22,16,9,.42) 62%,rgba(22,16,9,.14) 80%,transparent 92%),
  linear-gradient(180deg,rgba(22,16,9,.5) 0%,transparent 30%)}
.hero-bloom{position:absolute;top:-16%;left:50%;transform:translateX(-44%);width:76vw;height:76vw;
  max-width:1100px;max-height:1100px;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 44%,rgba(246,163,60,.42),rgba(227,93,37,.2) 42%,rgba(227,93,37,.06) 62%,transparent 72%);
  filter:blur(18px);animation:bloom 8.5s ease-in-out infinite;transform-origin:center}
@keyframes bloom{0%,100%{opacity:.72}50%{opacity:1}}
.hero .wrap{position:relative;z-index:2}
.hero :focus-visible{outline-color:var(--gold)}
.crumbs{font-size:13px;color:var(--steel-2);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs a:hover{color:var(--paper);text-decoration:underline}
.crumbs .sep{color:rgba(249,242,227,.45)}
h1{font-family:var(--disp);font-weight:560;font-size:clamp(38px,7vw,74px);line-height:.98;letter-spacing:-.03em;margin:16px 0 14px;max-width:16ch;font-optical-sizing:auto}
h1 em{font-style:italic;font-weight:480;letter-spacing:-.02em;font-variation-settings:'SOFT' 100,'WONK' 1;
  background:linear-gradient(115deg,var(--ember) 8%,#f08432 46%,var(--flame) 94%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px rgba(227,93,37,.35)) /* the word itself holds a little of the pilot's light */;
  padding-right:.06em /* keep the italic swash inside the paint box */}
.lede{font-family:var(--disp);font-weight:400;font-size:clamp(19px,2.6vw,25px);line-height:1.35;max-width:34ch;color:var(--paper-2);font-variation-settings:'SOFT' 60}
.herocta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero .btn-ghost{color:var(--paper);border-color:rgba(249,242,227,.45)}
.hero .btn-ghost:hover{border-color:var(--paper)}
/* the trust rail — chips standing on the temperature hairline, the
   homepage herofoot's grammar */
.truststrip{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;padding-top:20px;position:relative}
.truststrip:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--temp);opacity:.55;border-radius:2px}
/* the ember head — the homepage warming-bar's glowing tip, resting at
   the hot end of the rail. Breathes gently; stills under reduced motion. */
.truststrip:after{content:"";position:absolute;top:-3.5px;right:-2px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 50% 32%,#fff0d2,var(--flame) 45%,var(--ember) 82%);
  box-shadow:0 0 10px 3px rgba(246,163,60,.55);animation:emberhead 4.5s ease-in-out infinite}
@keyframes emberhead{0%,100%{box-shadow:0 0 10px 3px rgba(246,163,60,.55)}50%{box-shadow:0 0 15px 5px rgba(246,163,60,.75)}}
.chip{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.04em;border:1px solid rgba(242,195,104,.26);border-radius:999px;padding:8px 14px;
  background:rgba(22,16,9,.5);color:var(--paper-2);display:inline-flex;align-items:center;gap:7px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.chip .d{width:6px;height:6px;border-radius:50%;background:var(--flame);flex:none}

/* entrance — the homepage's rise reveal, applied structurally so the
   pages need no per-element classes (no-JS still animates; reduced
   motion resets at the bottom of this file) */
@keyframes rise{to{opacity:1;transform:none}}
.crumbs,.hero h1,.hero .lede,.herocta,.truststrip{opacity:0;transform:translateY(22px);animation:rise .8s cubic-bezier(.2,.7,.25,1) forwards}
.hero h1{animation-delay:.1s}
.hero .lede{animation-delay:.22s}
.herocta{animation-delay:.34s}
.truststrip{animation-delay:.48s}

@media(max-width:1020px){
  .hero-bloom{width:120vw;height:120vw;top:-12%}
  .hero-scrim{background:
    radial-gradient(150% 48% at 26% 22%,rgba(22,16,9,.52),transparent 72%),
    linear-gradient(0deg,var(--ink) 0%,rgba(22,16,9,.9) 10%,rgba(22,16,9,.74) 34%,rgba(22,16,9,.62) 58%,rgba(22,16,9,.54) 80%,rgba(22,16,9,.48) 100%)}
  /* on the narrow crop the italic sits over brighter stone — solid flame holds contrast */
  h1 em{background:var(--flame);-webkit-background-clip:text;background-clip:text}
}

/* ---------- sections — same shells, same hairline grammar ---------- */
section{position:relative;z-index:2}
.slab{padding:var(--sp-slab) 0}
/* DAWN — the first paper section after the night hero. The crossing
   opens on the temperature hairline, and the paper is warmest right
   under the dark, cooling to plain page as you read down: first light
   on the kitchen wall. Long-form prose stays ink-on-paper (AA+). */
.hero+.slab{background:linear-gradient(180deg,var(--paper-2) 0,var(--paper) 320px)}
.hero+.slab:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--temp);opacity:.7}
.slab.dark{color:var(--paper);overflow:hidden;
  background-image:radial-gradient(80vw 50vw at 110% 8%,rgba(227,93,37,.16),transparent 58%),
    radial-gradient(60vw 40vw at -10% 100%,rgba(72,101,122,.18),transparent 55%),
    linear-gradient(180deg,var(--night-hi) 0%,var(--ink) 55%,var(--night-deep) 100%)}
.slab.dark:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--temp);opacity:.55}
/* the night slab breathes the same ember bloom as the hero — screened
   into its top corner, gently; stilled under reduced motion */
.slab.dark:after{content:"";position:absolute;top:-18%;right:-14%;width:56vw;height:56vw;max-width:680px;max-height:680px;
  border-radius:50%;pointer-events:none;mix-blend-mode:screen;filter:blur(20px);
  background:radial-gradient(circle at 50% 44%,rgba(246,163,60,.2),rgba(227,93,37,.1) 44%,transparent 70%);
  animation:bloom 8.5s ease-in-out infinite}
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:var(--ember-text)}
.eyebrow:before{content:"";width:34px;height:2px;background:var(--temp);flex:none;border-radius:2px}
.eyebrow.lite{color:var(--gold)}
.h2{font-family:var(--disp);font-weight:560;font-size:var(--fs-h2);line-height:.99;letter-spacing:-.025em;margin:18px 0 0;max-width:22ch;font-optical-sizing:auto}
.h2 em{font-style:italic;font-weight:480;font-variation-settings:'SOFT' 100,'WONK' 1;color:var(--ember-text)}
.dark .h2 em{background:linear-gradient(115deg,var(--flame),var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:16px;color:var(--steel);max-width:56ch;margin-top:14px;line-height:1.6}
.dark .sub{color:var(--steel-2)}
.prose{margin-top:22px;max-width:68ch;display:flex;flex-direction:column;gap:16px}
.prose p{font-size:16px;color:var(--ink-2);line-height:1.65}
.dark .prose p{color:var(--paper-2)}
.prose strong{font-weight:700}
.split{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start;margin-top:8px}

/* photo — cropped so the frame stays clean (watermark off-frame) */
.photo{border-radius:var(--rad-lg);overflow:hidden;box-shadow:var(--shadow),var(--glow-ember);aspect-ratio:4/5;position:relative;
  outline:1px solid rgba(242,195,104,.28);outline-offset:-1px}
.photo img{width:112%;height:112%;object-fit:cover;object-position:20% 12%}
.photo .cap{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 14px;font-size:12.5px;color:var(--paper-2);
  background:linear-gradient(transparent,rgba(22,16,9,.85));letter-spacing:.02em}

/* fault list — the ledger again: outline numerals, same as home services */
.faults{margin-top:var(--sp-head);border-top:1px solid var(--line);list-style:none;counter-reset:f}
.faults li{display:grid;grid-template-columns:minmax(56px,84px) 1fr;gap:clamp(14px,3vw,32px);align-items:baseline;
  padding:clamp(20px,3vw,30px) clamp(4px,1vw,14px);border-bottom:1px solid var(--line);counter-increment:f;transition:background .3s}
.faults li:hover{background:linear-gradient(90deg,transparent,rgba(227,93,37,.05) 30%,rgba(246,163,60,.07) 70%,transparent)}
.faults li:before{content:"0" counter(f);grid-row:1/3;font-family:var(--mono);font-weight:600;font-size:clamp(22px,3vw,36px);letter-spacing:.04em;line-height:1;
  color:var(--paper-3);-webkit-text-stroke:1px var(--copper)}
.faults li b,.faults li p{grid-column:2}
.faults li:hover:before{color:var(--flame)}
.faults li b{font-family:var(--disp);font-weight:600;font-size:clamp(18px,2.2vw,23px);letter-spacing:-.01em;display:block;margin-bottom:6px}
.faults li p{font-size:14.5px;color:var(--steel);line-height:1.55;max-width:62ch}

/* price cards — the number, stamped in mono like everywhere else */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:var(--sp-head)}
.price-card{border:1px solid var(--line-d);border-radius:var(--rad);padding:22px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#241812,var(--ink-2) 70%)}
.price-card:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--temp);opacity:.9}
.price-card b{font-family:var(--disp);font-weight:600;font-size:19px;display:block}
.price-card .amt{font-family:var(--mono);font-weight:600;font-size:clamp(16px,1.8vw,20px);letter-spacing:.03em;margin:12px 0 8px;color:var(--gold);
  text-shadow:0 1px 0 rgba(0,0,0,.6),0 -1px 0 rgba(242,195,104,.25)}
.price-card p{font-size:14px;color:var(--steel-2);line-height:1.5}

/* coverage chips */
.covergrid{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-head)}
.coverchip{font-size:14px;font-weight:500;border:1px solid var(--line);border-radius:999px;padding:8px 16px;background:var(--paper)}
.coverchip.pc{background:var(--ink);color:var(--paper);font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.08em}

/* reviews — honest empty frame, waiting for real words (same as home) */
.rev-grid{margin-top:var(--sp-head);max-width:640px}
.rev-slot{border:1.5px dashed var(--copper);border-radius:var(--rad);padding:28px 24px;min-height:180px;
  display:flex;flex-direction:column;justify-content:space-between;background:rgba(240,229,207,.35)}
.rev-slot:before{content:"\201C";font-family:var(--disp);font-style:italic;font-weight:500;font-size:64px;line-height:.6;
  color:var(--paper-3);display:block;font-variation-settings:'SOFT' 100}
.rev-slot .pending{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--steel);margin-top:18px}
.rev-slot .rule{height:2px;width:44px;background:var(--temp);opacity:.45;border-radius:2px;margin-top:20px}

/* faq — identical treatment to home */
.faq{margin-top:var(--sp-head);border-top:1px solid var(--line);max-width:760px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;font-family:var(--disp);font-weight:600;font-size:clamp(17.5px,2.1vw,20px);
  display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:var(--tap);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{flex:none;width:22px;height:22px;position:relative;transition:transform .3s}
.faq summary .pl:before,.faq summary .pl:after{content:"";position:absolute;background:var(--ember);border-radius:2px}
.faq summary .pl:before{top:10px;left:2px;right:2px;height:2px}
.faq summary .pl:after{left:10px;top:2px;bottom:2px;width:2px}
.faq details[open] summary .pl{transform:rotate(45deg)}
.faq p{padding:0 0 22px;color:var(--steel);font-size:15px;max-width:66ch;line-height:1.6}

/* CTA band — a small finale: same warm-room gradient as the homepage end */
.ctaband{background:
    radial-gradient(120% 130% at 50% -30%,rgba(246,163,60,.32),transparent 55%),
    linear-gradient(150deg,var(--danger-deep) -30%,var(--ember-deep) 30%,#b8470f 72%,#d05a17 115%);
  color:#fff;border-radius:var(--rad-lg);padding:40px 36px;position:relative;overflow:hidden;
  display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:var(--shadow)}
.ctaband:after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--temp);opacity:.85}
.ctaband h2{font-family:var(--disp);font-weight:560;font-size:clamp(24px,3.6vw,36px);line-height:1.04;letter-spacing:-.02em;max-width:20ch;position:relative}
.ctaband .acts{display:flex;gap:14px;flex-wrap:wrap;position:relative}
.ctaband .ph{font-size:13.5px;color:rgba(255,248,239,.85);margin-top:10px;position:relative}
.ctaband .ph a{color:var(--gold);font-weight:600;font-family:var(--mono);letter-spacing:.02em}
.ctaband .btn-outline-paper{border-color:rgba(255,255,255,.45);color:#fff}
.ctaband .btn-outline-paper:hover{border-color:#fff}

/* nearby */
.nearby{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.nearby a{font-size:14px;font-weight:600;border:1.5px solid var(--line);border-radius:999px;padding:11px 18px;min-height:var(--tap);display:inline-flex;align-items:center;transition:.2s}
.nearby a:hover{border-color:var(--ember);color:var(--ember-text)}

/* areas hub grid */
.areagrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:var(--sp-head)}
.areacard{border:1px solid var(--line);border-radius:var(--rad);padding:24px;background:var(--paper);transition:transform .25s,box-shadow .25s,border-color .25s;display:block}
.areacard:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:var(--copper)}
.areacard h3{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.01em;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.areacard h3 .pc{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--copper)}
.areacard p{font-size:14.5px;color:var(--steel);margin-top:8px;line-height:1.55}
.areacard .go{margin-top:14px;font-size:13.5px;font-weight:700;color:var(--ember-text);display:inline-flex;align-items:center;gap:7px}

/* ---------- footer — compact, warm-dark, honest (the homepage
   footer, ported verbatim; a centred column on the wider pages) ---------- */
footer{background:var(--ink);color:var(--paper);z-index:2;position:relative;padding:52px 0 30px;margin-top:var(--sp-slab);
  background-image:radial-gradient(70vw 34vw at 8% 0%,rgba(227,93,37,.1),transparent 60%),
    linear-gradient(180deg,var(--ink) 0%,var(--night-deep) 100%)}
footer:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--temp);opacity:.55}
footer .wrap{width:min(680px,92vw)}
.foot-logo img{height:36px;width:auto;filter:brightness(0) invert(1);opacity:.94}
.foot-tag{color:var(--steel-2);font-size:13.5px;margin-top:12px;line-height:1.6;max-width:40ch}
.foot-h{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  margin:30px 0 10px;font-weight:500}
.foot-links a{display:flex;align-items:center;min-height:46px;color:var(--paper-2);font-size:14.5px;border-bottom:1px solid rgba(249,242,227,.08)}
.foot-links a:after{content:"→";margin-left:auto;color:var(--copper);font-size:13px}
.foot-links a:hover{color:#fff}
.areas{display:flex;flex-wrap:wrap;gap:8px}
.areas a{display:inline-flex;align-items:center;min-height:40px;padding:7px 14px;border:1px solid var(--line-d);border-radius:99px;
  font-size:13px;color:var(--paper-2)}
.areas a:hover{color:#fff;border-color:rgba(242,195,104,.4)}
.foot-contact{margin-top:6px}
.foot-contact a,.foot-contact p{display:flex;align-items:center;min-height:44px;color:var(--paper-2);font-size:15px;gap:10px}
.foot-contact a:hover{color:#fff}
.foot-contact .stamp{font-size:14px;color:var(--gold)}
.foot-privacy{font-size:12px;line-height:1.6;border-left:2px solid var(--copper);padding-left:12px;margin-top:26px;color:var(--steel-2)}
.foot-privacy b{color:var(--paper-2)}
.foot-gas{margin-top:22px;padding:14px 15px;border:1px solid rgba(242,195,104,.25);border-radius:14px;
  font-size:13px;color:var(--paper-2);line-height:1.55;background:rgba(242,195,104,.05)}
.foot-gas a{color:var(--gold);font-weight:700}
.foot-bar{margin-top:26px;padding-top:18px;border-top:1px solid var(--line-d);font-size:11.5px;color:var(--steel-2);
  display:flex;flex-direction:column;gap:6px}
.foot-bar .stamp{font-family:var(--mono);font-weight:500;letter-spacing:.06em;font-size:11.5px}

@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .photo{max-width:440px;aspect-ratio:5/4}
  .prices{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .navlinks{display:none}
}
@media(max-width:560px){
  .prices,.areagrid,.foot-top{grid-template-columns:1fr}
  .faults li{grid-template-columns:44px 1fr;gap:12px}
  .brand{font-size:18.5px;white-space:nowrap;gap:8px}
  .brand img{height:30px}
  .brand img.mk{height:25px}
  .navcall .btn{font-size:13.5px;padding:10px 15px;white-space:nowrap}
}
/* ============================================================
   CONVERSION FURNITURE (2026-08 pass) — mirrors the homepage:
   sticky reach bar + the assure (price / own-engineers / verify)
   block. Same tokens, same grammar.
   ============================================================ */

/* visible placeholder mark — a real-world fact Ali must supply */
.ph-mark{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;
  color:var(--ember-text);border:1.5px dashed var(--copper);border-radius:8px;padding:3px 9px;vertical-align:middle;
  background:rgba(240,229,207,.4)}

/* the reach dock — call + WhatsApp + diagnose, one tap each. Always in the
   thumb's reach (the homepage dock behaviour): a floating brass-edged bar on
   every viewport, centred as a strip on desktop. Body carries matching bottom
   padding so it never covers content. The diagnose entry is a <button>, so the
   UA button chrome is explicitly zeroed. */
.callbar{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:30;display:flex;gap:8px;
  animation:cb-in .55s cubic-bezier(.2,.7,.25,1) .3s backwards;
  transition:transform .35s cubic-bezier(.2,.7,.25,1),opacity .3s;
  background:rgba(25,17,10,.92);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(242,195,104,.22);border-radius:22px;overflow:hidden;padding:8px;
  box-shadow:0 22px 48px -18px rgba(22,16,9,.75),0 6px 18px -8px rgba(22,16,9,.5),inset 0 1px 0 rgba(242,195,104,.1)}
/* the menu covers the page — the dock slides out of its way */
body.menu-open .callbar{transform:translateY(calc(100% + 30px));opacity:0;pointer-events:none}
/* while the real flow is open (opaque overlay) the dock steps aside */
body:has(#flow:not([hidden])) .callbar{opacity:0;pointer-events:none}
.callbar:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--temp);opacity:.8}
.callbar button{background:none;cursor:pointer;font-family:var(--body)}
.cb{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;min-height:54px;border-radius:15px;
  font-weight:700;padding:6px 10px;text-align:left;transition:transform .15s ease}
.cb:active{transform:scale(.96)}
.cb svg{width:21px;height:21px;flex:none}
.cb span{display:block;line-height:1.15}
.cb b{display:block;font-size:15px}
.cb small{display:block;font-weight:500;font-size:10.5px;letter-spacing:.02em;margin-top:2px}
.cb-call{background:linear-gradient(120deg,var(--ember) 8%,#ef7f2e 52%,var(--flame) 100%);color:#2a1503;
  box-shadow:0 8px 20px -10px rgba(200,70,14,.8)}
.cb-call small{color:#4d2a0c}
.cb-wa{border:1.5px solid rgba(249,242,227,.4);color:var(--paper)}
.cb-wa svg{color:#7fd6a4}
.cb-wa small{color:var(--steel-2)}
.cb-diag{border:1.5px solid rgba(242,195,104,.5);color:var(--gold)}
.cb-diag small{color:var(--steel-2)}
@keyframes cb-in{from{transform:translateY(calc(100% + 26px))}to{transform:none}}
/* the hero's trust rail sits at its bottom edge — always clear the floating dock */
.hero{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
footer{margin-bottom:0}
/* desktop & small-tablet — the dock centres as one warm strip, like the homepage */
@media(min-width:700px){
  .callbar{left:50%;right:auto;transform:translateX(-50%);width:min(560px,calc(100% - 24px))}
  body.menu-open .callbar{transform:translateX(-50%) translateY(calc(100% + 30px))}
  @keyframes cb-in{from{transform:translateX(-50%) translateY(calc(100% + 26px))}to{transform:translateX(-50%)}}
}
@media(max-width:560px){
  .cb small{display:none}
  .cb b{font-size:14px}
  .cb{gap:7px;padding:6px 6px}
}

/* the assure block — price certainty · own engineers · verifiable reg.
   Now wears the homepage trust band's clothes: icon plank layout on the
   temperature hairline, same 30px ember iconography (tag · house ·
   shield-check), CSS-only via nth-child so no page markup changes. */
.assure{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,34px);margin-top:var(--sp-head);position:relative;padding-top:28px}
.assure:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--temp);opacity:.55;border-radius:2px}
.as{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:13px;align-items:start}
.as:before{content:"";grid-row:1/3;width:30px;height:30px;margin-top:2px;background-position:center;background-repeat:no-repeat;background-size:contain}
.as:nth-child(1):before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a63a10' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M20.6 13.4 12 22 2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8Z'/><circle cx='7.5' cy='7.5' r='1.6'/></svg>")}
.as:nth-child(2):before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a63a10' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11 12 3l9 8'/><path d='M5 10v10h14V10'/><path d='M9 20v-6h6v6'/></svg>")}
.as:nth-child(3):before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a63a10' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2 4 5v6c0 5 3.5 8.5 8 11 4.5-2.5 8-6 8-11V5Z'/><path d='M9 12l2 2 4-4'/></svg>")}
.as b{font-family:var(--disp);font-weight:600;font-size:16px;line-height:1.3;letter-spacing:-.005em;display:block}
.as b.stamp{font-family:var(--mono);font-weight:600;letter-spacing:.08em;font-size:15px;color:var(--ember-text)}
.as span{grid-column:2;display:block;font-size:14px;color:var(--steel);line-height:1.55;margin-top:6px}
.as a{color:var(--ember-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.as a:hover{color:var(--ember-deep)}
@media(max-width:860px){
  .assure{grid-template-columns:1fr;gap:0;padding-top:14px}
  .as{padding:15px 0}
  .as + .as{border-top:1px solid var(--line)}
  .as:before{width:26px;height:26px}
}

/* ============================================================
   MOBILE CRAFT PASS (2026-08) — phone-first refinement layer,
   mirrored from the homepage. Same tokens, no copy, no structure.
   ============================================================ */

/* touch feel — no grey tap flash, honest press states */
html{-webkit-tap-highlight-color:transparent}
button,.btn,.cb,summary,.nearby a,.areacard{touch-action:manipulation}
.btn{transition:transform .18s,box-shadow .25s,filter .2s}
.btn:active{transform:translateY(0) scale(.975)}

/* balanced display lines; anchors clear the sticky nav */
h1,.h2,.ctaband h2{text-wrap:balance}
.lede,.sub{text-wrap:pretty}
section[id]{scroll-margin-top:84px}

/* gentle scroll-reveals (class added by flow.js; no-JS pages stay visible) */
.io-rise{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.2,.7,.25,1),transform .75s cubic-bezier(.2,.7,.25,1)}
.io-rise.in{opacity:1;transform:none}

/* faq — warm hover, and the answer settles in rather than snapping */
@media(hover:hover){.faq summary:hover{color:var(--ember-text)}}
.faq details[open]>p{animation:faqin .38s cubic-bezier(.2,.7,.25,1)}
@keyframes faqin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

@media(max-width:560px){
  /* the hero's two doors — full-width, one thumb each */
  .herocta{flex-direction:column;gap:11px}
  .herocta .btn{width:100%}
  .truststrip{gap:8px;margin-top:20px}
  .chip{font-size:11px;padding:7px 12px}

  /* fault ledger — tighter index column, full-measure copy */
  .faults li b{font-size:17.5px}
  .faults li p{font-size:14px}

  /* CTA band — the small finale stacks, both doors full-width */
  .ctaband{padding:30px 22px;flex-direction:column;align-items:stretch;text-align:left}
  .ctaband .acts{flex-direction:column;width:100%;gap:11px}
  .ctaband .acts .btn{width:100%}

  /* footer links become true 44px tap rows */
  .foot-col a{min-height:44px;display:flex;align-items:center;margin-bottom:0}
}

/* ============================================================
   NIGHT CALL COHESION PASS (2026-08) — pulls the reading body up
   to the homepage's art direction so homepage → town page reads
   as one continuous world. Three moves:
   1) THE DAWN ARC runs the whole page: the paper ground itself
      warms as you read down — dawn-cream right under the night
      hero, golden by the finale — the homepage's night→dawn
      scroll, carried through the long-form body.
   2) THE SIGNATURE everywhere: the cold→ember→flame gradient is
      the one recurring device — section crossings, the fault
      ledger's rule, the FAQ's rule, the eyebrow rules, the reach
      bar — never a plain grey line at a threshold.
   3) THE LIVING WARMTH: small breathing ember glows (eyebrow
      rule tips, the price plates, the finale band, the reach
      bar hairline) built as box-shadow pulses FROM A VISIBLE
      BASE STATE, so the global reduced-motion rule below stills
      them to a lit-but-calm room, never to nothing.
   Readability is the wall: running prose stays ink-on-cream
   (≈13.8:1 at the warmest point of the arc); steel sub/meta
   stays ≥5:1. Everything here is class-scoped — nothing reaches
   into #flow (its screens share .btn via flow.js markup, so the
   button upgrades are scoped to nav/main only).
   ============================================================ */
:root{
  --paper-dawn:#f0e2c6;  /* first light, right under the dark */
  --paper-warm:#f3e2c0;  /* the golden end of the page */
  --card-lit:#fffdf7;    /* the homepage's warm-white card stock */
  --temp-soft:linear-gradient(90deg,rgba(72,101,122,.5) 0%,rgba(125,106,85,.45) 34%,rgba(185,106,53,.5) 55%,rgba(227,93,37,.55) 78%,rgba(246,163,60,.6) 100%);
}

/* the dawn arc — the body ground warms as you descend, and two soft
   pools of morning gold sit on the wall like light through glass */
body{background-image:
  radial-gradient(120% 70% at 85% -10%,rgba(242,195,104,.12),transparent 60%),
  radial-gradient(52% 30% at 8% 66%,rgba(242,195,104,.09),transparent 70%),
  linear-gradient(180deg,var(--paper) 0%,var(--paper) 44%,#f6e9cf 78%,var(--paper-warm) 100%)}

/* first light — the paper is warmest right under the night hero and
   melts into the day, morning gold spilling in from the hero's edge */
.hero+.slab{background:
  radial-gradient(90% 340px at 78% 0,rgba(246,163,60,.16),transparent 70%),
  linear-gradient(180deg,var(--paper-dawn) 0,var(--paper-2) 180px,rgba(249,242,227,0) 560px)}
.hero+.slab:before{opacity:.75;box-shadow:0 0 16px rgba(227,93,37,.3)}

/* every ink↔paper crossing opens on the temperature hairline —
   including the step back OUT of the dark prices slab into morning */
.slab.dark+.slab:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--temp);opacity:.5}

/* section headers — letterpress on paper (homepage .slab.paper .h2)
   + a breathing ember resting at the hot end of every eyebrow rule */
.slab:not(.dark) .h2{text-shadow:0 1px 0 rgba(255,255,255,.55)}
.eyebrow:before{box-shadow:8px 0 12px -4px rgba(227,93,37,.4);animation:rulebreathe 5.5s ease-in-out infinite}
.eyebrow.lite:before{box-shadow:8px 0 12px -4px rgba(246,163,60,.45)}
@keyframes rulebreathe{0%,100%{box-shadow:8px 0 12px -4px rgba(227,93,37,.35)}50%{box-shadow:8px 0 18px -3px rgba(246,163,60,.6)}}

/* the ledger and the FAQ open on the signature, not a plain grey rule,
   and their row rules are ember-tinted rather than neutral */
.faults{border-top:2px solid;border-image:var(--temp-soft) 1}
.faults li{border-bottom-color:rgba(185,106,53,.25)}
.faq{border-top:2px solid;border-image:var(--temp-soft) 1}
.faq details{border-bottom-color:rgba(185,106,53,.25)}
/* the answer settles in on an ember rule — the homepage FAQ's device */
.faq p{border-left:2px solid rgba(227,93,37,.35);padding-left:16px}

/* inline "60-second diagnose" text-buttons carry an inline ember color;
   on paper the reading-safe accent is ember-text (5.8:1) — homepage grammar */
.slab .sub button[data-open-flow]{color:var(--ember-text) !important}

/* card stock — the homepage's lifted warm-white cards, ember-lit edges */
.coverchip{background:var(--card-lit);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 8px -6px rgba(64,24,4,.35)}
.coverchip.pc{background:linear-gradient(150deg,#241812,var(--ink) 70%);color:var(--gold);border-color:rgba(242,195,104,.4);
  box-shadow:inset 0 1px 0 rgba(242,195,104,.18),0 2px 8px -6px rgba(64,24,4,.4);
  text-shadow:0 1px 0 rgba(0,0,0,.5)}
.nearby a{background:var(--card-lit);box-shadow:0 2px 8px -6px rgba(64,24,4,.3)}
.areacard{background:var(--card-lit);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 12px -8px rgba(64,24,4,.3)}
.rev-slot{background:rgba(255,253,247,.55)}

/* the prices slab — each plate catches the room's firelight: a warm
   radial falling from its top corner + a faint standing ember glow */
.price-card{box-shadow:0 0 38px -18px rgba(227,93,37,.3),inset 0 1px 0 rgba(242,195,104,.1)}
.price-card:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0,rgba(246,163,60,.16),transparent 55%)}
.price-card b,.price-card .amt,.price-card p{position:relative}

/* the finale band breathes its hearth-glow, exactly like the homepage's
   hot card — base state already lit, so reduced motion holds it warm */
.ctaband{box-shadow:var(--shadow),0 0 46px -14px rgba(227,93,37,.4);animation:bandbreathe 5.2s ease-in-out infinite}
@keyframes bandbreathe{0%,100%{box-shadow:var(--shadow),0 0 40px -16px rgba(227,93,37,.32)}50%{box-shadow:var(--shadow),0 0 62px -10px rgba(227,93,37,.5)}}

/* the reach bar's temperature hairline holds a breath of ember light */
.callbar:before{box-shadow:0 0 9px rgba(227,93,37,.38);animation:hairglow 4.5s ease-in-out infinite}
@keyframes hairglow{0%,100%{box-shadow:0 0 8px rgba(227,93,37,.32)}50%{box-shadow:0 0 15px rgba(246,163,60,.55)}}

/* buttons — the homepage's 18px doors. The ember gradient + glow already
   carry the page; the old perpetual brass sheen was a third emphasis sweeping
   forever, so it was removed. Scoped to nav/main so the #flow overlay (which
   renders its own .btn markup via flow.js) is untouched. */
nav .btn,main .btn{border-radius:18px}

/* ---------- symptom doors (plumber pages, 2026-08-21) — the homepage's
   svc-door grammar carried into the area pages' daylight palette: the
   four ways a house's water goes wrong, each opening the shared flow
   overlay's plumbing lane (data-open-flow="plumbing"). ---------- */
.symdoors{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.symdoor{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:13px;position:relative;overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--rad);padding:16px 18px;min-height:var(--tap);
  font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.symdoor:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--temp);opacity:.85}
.symdoor:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.symdoor:active{transform:scale(.985)}
.symdoor .si{width:40px;height:40px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(227,93,37,.09);border:1px solid rgba(227,93,37,.25);color:var(--ember-text)}
.symdoor .si svg{width:20px;height:20px}
.symdoor .st b{font-family:var(--disp);font-weight:600;font-size:17.5px;letter-spacing:-.012em;line-height:1.12;display:block}
.symdoor .st small{display:block;font-size:12.5px;color:var(--steel);line-height:1.45;margin-top:3px}
.symdoor .sp{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--copper)}

/* ---------- "We also do" — the cross-sell strip (2026-08-21).
   One quiet row above the footer on every area page: the other two
   trades at their honest prices, each opening its own lane in the
   shared flow overlay (data-open-flow="plumbing" / "bathrooms" /
   "repair"). Deliberately compact — a strip, not a section — so each
   page keeps its single keyword intent. Inserted by script; markup
   identical on every page. ---------- */
.xsell{padding:26px 0 34px;border-top:1px solid var(--line);background:var(--paper)}
.xsell .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px}
.xsell-k{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);flex:none;margin-right:2px}
.xsell-item{display:inline-flex;align-items:baseline;gap:9px;background:none;border:0;padding:8px 0;font:inherit;cursor:pointer;color:var(--ink);text-align:left;text-decoration:none}
.xsell-item b{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--ember-text);white-space:nowrap}
.xsell-item b:after{content:" →";color:var(--copper);font-family:var(--body);font-size:14px}
.xsell-item small{font-size:12.5px;color:var(--steel);line-height:1.4}
.xsell-item:hover b,.xsell-item:focus-visible b{color:var(--ember)}
@media(max-width:560px){
  .xsell .wrap{flex-direction:column;align-items:flex-start;gap:2px}
  .xsell-k{margin-bottom:4px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none !important;transition:none !important}
  .io-rise{opacity:1;transform:none}
  /* the hero's rise entrances resolve instantly, nothing left hidden */
  .crumbs,.hero h1,.hero .lede,.herocta,.truststrip{opacity:1;transform:none}
  .hero-bloom{opacity:.85}
}