/* ============================================================
   Staffy Homes — "HEAT AS A MATERIAL"
   A cold house waking up warm. High-end craft/trade magazine
   lit by the glow of a boiler at night.

   Fraunces (display, opsz 9..144 + SOFT/WONK axes)
   Hanken Grotesk (body) · IBM Plex Mono (stamped hard facts)

   ember #e35d25 · flame #f6a33c · ink #161009 · paper #f9f2e3
   cold  #48657a (the "before" temperature — used as a signature
   cool→warm gradient device, never as a brand colour)

   Contrast notes (AA):
   - --ember is for LARGE type & graphics only on paper.
     Small text on paper uses --ember-text (#a63a10, 5.8:1).
   - btn-ember uses dark ink text on the flame gradient (5.8:1+)
     — white fails on ember, so we stamp dark into hot brass.
   ============================================================ */
:root{
  --ink:#161009; --ink-2:#211711; --ink-3:#2b1e13;
  --paper:#f9f2e3; --paper-2:#f0e5cf; --paper-3:#e7d9bd;
  --ember:#e35d25; --ember-text:#a63a10; --ember-deep:#8a2a0a;
  --flame:#f6a33c; --copper:#b96a35; --gold:#f2c368;
  --cold:#48657a; --cold-deep:#17272f; --cold-2:#2b4050;
  --danger:#c2331f; --danger-deep:#4d100b;
  --ok:#3e7d4e; --ok-text:#2f6a3f;
  --steel:#655c4d; --steel-2:#a3968a;
  --line:rgba(22,16,9,.14); --line-d:rgba(249,242,227,.15);
  /* warm-tinted shadows — never grey */
  --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;
  --disp:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;
  --tap:48px;
  /* ONE vertical rhythm, site-wide (homepage, flow, town pages):
     --sp-slab between sections · --sp-head between a section head and its body */
  --sp-slab:clamp(72px,10vw,124px);
  --sp-head:clamp(34px,5vw,54px);
  /* the type scale — dramatic display-to-body contrast */
  --fs-hero:clamp(3.6rem,9vw,8.25rem);
  --fs-h2:clamp(2.1rem,4.6vw,3.9rem);
  --fs-lede:clamp(1.15rem,2.1vw,1.5rem);
  /* 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;
  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}
button{font-family:var(--body)}
::selection{background:var(--ember);color:#fff8ef}
.wrap{width:min(1220px,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}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* paper grain — the physical layer over everything */
.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>")}

/* visible keyboard focus — everywhere */
:focus-visible{outline:2.5px solid var(--ember);outline-offset:3px;border-radius:4px}
.hero :focus-visible,.dark :focus-visible,.finale :focus-visible,footer :focus-visible,
.scr-danger :focus-visible,.scr-emergency :focus-visible{outline-color:var(--gold)}

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

/* ---------- buttons ---------- */
.btn{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)}
/* hot brass: dark stamped text on the flame gradient (AA-safe, unlike white) */
.btn-ember{background:linear-gradient(120deg,var(--ember) 8%,#ef7f2e 52%,var(--flame) 100%);color:#2a1503;
  position:relative;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)}
.btn-xl{font-size:17px;padding:17px 30px;min-height:56px}
.btn-paper{background:var(--paper);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)}
/* the living CTA — a slow warm breath. Killed under reduced motion. */
.btn-live{animation:ctabreathe 3.8s ease-in-out infinite}
@keyframes ctabreathe{
  0%,100%{box-shadow:0 10px 26px -12px rgba(180,60,10,.7),0 0 0 0 rgba(227,93,37,.0)}
  50%{box-shadow:0 12px 30px -12px rgba(200,70,14,.8),0 0 34px -4px rgba(227,93,37,.5)}
}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--paper) 86%,transparent);border-bottom:1px solid var(--line)}
nav:after{content:"";display:block;height:2px;background:var(--temp);opacity:.85}
.navrow{display:flex;align-items:center;gap:22px;padding:12px 0;width:min(1220px,92vw);margin-inline:auto}
.brand{font-family:var(--disp);font-weight:600;font-size:22px;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.brand .fl,.fl{width:22px;height:26px;filter:drop-shadow(0 3px 7px rgba(227,93,37,.45))}
.brand img{height:36px;width:auto;display:block}
.brand img.mk{height:30px}
.navlinks{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:600;color:var(--steel)}
.navlinks a{position:relative;padding:12px 0}
.navlinks a:after{content:"";position:absolute;left:0;bottom:6px;width:0;height:2px;background:var(--temp);transition:width .3s}
.navlinks a:hover{color:var(--ink)}.navlinks a:hover:after{width:100%}
.navcall{display:flex;align-items:center;gap:14px;margin-left:auto}
.navlinks + .navcall{margin-left:0}
.navphone{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;min-height:var(--tap);padding:6px 4px;font-family:var(--mono);letter-spacing:.02em}
.navphone svg{width:17px;height:17px;color:var(--ember)}

/* ============================================================
   HERO — the lit wall IS the room. One full-bleed photograph,
   floor-to-ceiling; the copy stands in its firelight.
   WATERMARK CROP: 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 to it.
   ============================================================ */
.hero{position:relative;z-index:2;background:var(--ink);color:var(--paper);overflow:hidden;
  min-height:100vh;min-height:100svh;display:flex;align-items:flex-end}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{position:absolute;top:0;left:0;width:100%;height:115%;object-fit:cover;object-position:50% 0}
/* the scrim — one lit scene, not a graphic on a picture:
   bottom gradient grounds the copy AND buries the watermark zone;
   the diagonal wash holds AA behind the text column;
   the top radial continues the lamp glow the photo already has */
.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%)}
/* the breathing ember bloom — screened INTO the photo's own hotspot,
   so the glow and the stone read as one light source */
.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-copy{max-width:740px;padding:calc(72px + 2vh) 0 clamp(28px,4.5vh,52px)}

.kicker{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);font-weight:500}
.kicker:before{content:"";width:34px;height:2px;background:var(--temp);flex:none;border-radius:2px}
.kicker .dot{display:none}

.masthead{font-family:var(--disp);font-weight:560;font-size:var(--fs-hero);line-height:.88;letter-spacing:-.035em;
  margin:18px 0 0;font-variation-settings:'SOFT' 0,'WONK' 0;font-optical-sizing:auto}
.masthead 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;
  padding-right:.06em /* keep the italic f's swash inside the paint box */}
.masthead-sub{display:block;font-family:var(--mono);font-weight:500;font-size:clamp(10.5px,1.2vw,12.5px);
  line-height:1.5;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-2);margin-top:18px}
.lede{font-family:var(--disp);font-weight:400;font-size:var(--fs-lede);line-height:1.42;max-width:36ch;
  color:var(--paper-2);margin-top:16px;font-variation-settings:'SOFT' 60}

/* the instrument panel — diagnose card */
.diagnose-card{margin-top:26px;background:linear-gradient(155deg,#241812,var(--ink-2) 55%,#1c130c);
  border:1px solid rgba(242,195,104,.22);border-radius:var(--rad-lg);
  padding:24px;max-width:540px;box-shadow:var(--shadow),inset 0 1px 0 rgba(242,195,104,.14);position:relative;overflow:hidden}
.diagnose-card:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 110% at 100% 0,rgba(246,163,60,.16),transparent 55%)}
.diagnose-card:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--temp);opacity:.9}
.dc-head{display:flex;gap:15px;align-items:flex-start;margin-bottom:18px;position:relative}
.dc-flame{width:27px;height:32px;flex:none;margin-top:3px;filter:drop-shadow(0 0 10px rgba(246,163,60,.55))}
.dc-head strong{font-family:var(--disp);font-size:clamp(21px,2.4vw,25px);font-weight:600;display:block;line-height:1.12;letter-spacing:-.01em}
.dc-head span{font-size:14px;color:var(--steel-2);display:block;margin-top:6px;line-height:1.5;max-width:40ch}
.diagnose-card .btn{width:100%;position:relative}
.emergency-link{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:12px;background:none;border:0;cursor:pointer;
  color:var(--gold);font-size:14px;font-weight:600;min-height:var(--tap);border-radius:12px;position:relative;transition:color .2s;text-align:center;line-height:1.4;padding:4px 8px}
.emergency-link:hover{color:#fff}
.emergency-link.on-dark{width:auto;margin:24px auto 0;color:rgba(249,242,227,.9)}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--ember);flex:none;box-shadow:0 0 0 0 rgba(227,93,37,.55);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(227,93,37,0)}100%{box-shadow:0 0 0 0 rgba(227,93,37,0)}}
.noscript-note{margin-top:16px;font-size:14px;color:var(--gold)}
.noscript-note a{text-decoration:underline}

/* hero stats — hard facts on a temperature rail */
.herofoot{display:flex;gap:clamp(20px,3vw,40px);flex-wrap:wrap;margin-top:28px;padding-top:20px;position:relative}
.herofoot:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--temp);opacity:.55;border-radius:2px}
.hf b{font-family:var(--disp);font-size:clamp(24px,2.6vw,31px);font-weight:560;line-height:1;display:block;letter-spacing:-.02em}
.hf span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-2);display:block;margin-top:7px}
.hf-reg b{font-family:var(--mono);font-weight:600;letter-spacing:.1em;font-size:clamp(20px,2.2vw,26px);
  color:var(--gold);text-shadow:0 1px 0 rgba(0,0,0,.6),0 -1px 0 rgba(242,195,104,.25) /* stamped into the metal */}

/* ---------- trust band — four planks on warm paper ---------- */
.trustband{position:relative;z-index:2;background:var(--paper-2);border-bottom:1px solid var(--line)}
.trustband:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--temp);opacity:.55}
.trustgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.5vw,34px);padding:30px 0}
.trust{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:13px;align-items:start}
.trust svg{grid-row:1/3;width:30px;height:30px;color:var(--ember-text);margin-top:2px}
.trust b{font-size:15px;line-height:1.3;font-family:var(--disp);font-weight:600;letter-spacing:-.005em}
.trust span{grid-column:2;font-size:13px;color:var(--steel);line-height:1.45;margin-top:3px}
.trust span .stamp{font-size:12px;color:var(--ember-text)}

/* ---------- section shells ----------
   THE HELD LOGIC, site-wide: DARK sections are the firm at work by
   the boiler's light (hero, why-us workshop, finale, footer, the
   featured repair row, the flow's takeovers). WARM PAPER sections are
   the plain honest deal (trust band, price ledger, reviews, FAQ, the
   flow's triage). Every dark passage opens on the same 2px
   temperature hairline — cold→ember→flame — so crossing between the
   two always reads as the same house, lit or unlit. */
section{position:relative;z-index:2}
.slab{padding:var(--sp-slab) 0}
.slab.dark{background:var(--ink);color:var(--paper);
  background-image:radial-gradient(80vw 50vw at 110% 8%,rgba(227,93,37,.14),transparent 58%),
    radial-gradient(60vw 40vw at -10% 100%,rgba(72,101,122,.16),transparent 55%)}
.slab.dark:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--temp);opacity:.55}
.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:21ch;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:16.5px;color:var(--steel);max-width:58ch;margin-top:16px;line-height:1.6}
.dark .sub{color:var(--steel-2)}

/* ============================================================
   SERVICES — a ledger, not cards. Six entries set like a
   price list stamped in a workshop office: big numerals,
   Fraunces names, mono prices on the right rail.
   ============================================================ */
.svc-ledger{margin-top:var(--sp-head);border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:minmax(72px,110px) 1fr minmax(150px,220px);gap:clamp(14px,3vw,40px);
  align-items:baseline;padding:clamp(24px,3.4vw,38px) clamp(4px,1vw,14px);border-bottom:1px solid var(--line);
  position:relative;transition:background .3s;text-align:left}
.svc-row:hover{background:linear-gradient(90deg,transparent,rgba(227,93,37,.05) 30%,rgba(246,163,60,.07) 70%,transparent)}
.svc-num{font-family:var(--mono);font-weight:600;font-size:clamp(24px,3.4vw,44px);letter-spacing:.04em;line-height:1;
  color:var(--paper-3);-webkit-text-stroke:1px var(--copper);text-stroke:1px var(--copper);
  transition:color .3s}
.svc-row:hover .svc-num{color:var(--flame)}
.svc-main h3{font-family:var(--disp);font-weight:600;font-size:clamp(23px,2.8vw,33px);letter-spacing:-.015em;line-height:1.05}
.svc-main p{font-size:15px;color:var(--steel);line-height:1.6;margin-top:10px;max-width:62ch}
.svc-price{font-family:var(--mono);font-weight:600;font-size:clamp(15px,1.7vw,19px);letter-spacing:.03em;color:var(--ink);
  text-align:right;justify-self:end}
.svc-price small{display:block;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-top:6px}
.svc-cta{margin-top:16px;background:none;border:0;cursor:pointer;color:var(--ember-text);font-weight:700;font-size:15px;
  min-height:var(--tap);display:inline-flex;align-items:center;gap:8px;padding:0}
.svc-cta:hover{text-decoration:underline;text-underline-offset:4px}
/* subtle crawlable link to the dedicated service page (SEO equity, not the flow) */
.svc-seo{display:block;margin-top:12px;font-size:13.5px;font-weight:600;letter-spacing:.005em;
  color:var(--ember-text);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:2px;width:fit-content;transition:.2s}
.svc-seo:hover{color:var(--ember-deep);border-color:var(--ember)}
.svc-row.svc-hot .svc-seo{color:var(--gold);border-color:var(--line-d)}
.svc-row.svc-hot .svc-seo:hover{color:var(--flame);border-color:var(--flame)}
/* the featured entry — boiler repair, lit from within */
.svc-row.svc-hot{background:linear-gradient(135deg,var(--ink-2),var(--ink) 70%);color:var(--paper);
  border-radius:var(--rad-lg);border-bottom:0;margin:18px 0;box-shadow:var(--shadow);overflow:hidden;
  padding:clamp(28px,4vw,46px) clamp(20px,3vw,40px)}
.svc-row.svc-hot:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 130% at 100% 0,rgba(246,163,60,.2),transparent 55%)}
.svc-row.svc-hot:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--temp)}
.svc-row.svc-hot .svc-num{color:transparent;-webkit-text-stroke:1px var(--flame)}
.svc-row.svc-hot .svc-main p{color:var(--steel-2)}
.svc-row.svc-hot .svc-price{color:var(--gold);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.svc-row.svc-hot .svc-price small{color:var(--steel-2)}
.svc-row.svc-hot .svc-cta{color:var(--flame)}

/* ---------- craft / why us (dark, workshop-lit) ---------- */
.craftgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:center}
.craft-photo{border-radius:var(--rad-lg);overflow:hidden;box-shadow:var(--shadow),0 0 60px -18px rgba(227,93,37,.35);position:relative;
  outline:1px solid rgba(242,195,104,.22);outline-offset:-1px;transform:rotate(-1deg)}
.craft-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.craft-photo:hover img{transform:scale(1.035)}
.craft-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 14px;font-size:12.5px;color:var(--paper-2);
  background:linear-gradient(transparent,rgba(22,16,9,.85))}
.craft-list{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:18px}
.craft-list li{display:flex;gap:14px;align-items:flex-start}
.craft-list svg{width:22px;height:22px;flex:none;color:var(--flame);margin-top:2px}
.craft-list b{font-size:16px;display:block;font-family:var(--disp);font-weight:600;letter-spacing:-.005em}
.craft-list span{font-size:14px;color:var(--steel-2);display:block;margin-top:3px;line-height:1.55}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px;padding-top:28px;position:relative}
.stat-grid:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--temp);opacity:.55;border-radius:2px}
.stat b{font-family:var(--disp);font-weight:560;font-size:clamp(36px,5vw,58px);line-height:.92;display:block;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--flame),var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-2);display:block;margin-top:8px;line-height:1.5}

/* ---------- reviews — honest empty frames, waiting for real words ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:var(--sp-head)}
.rev-slot{border:1.5px dashed var(--copper);border-radius:var(--rad);padding:28px 24px;min-height:210px;
  display:flex;flex-direction:column;justify-content:space-between;background:rgba(240,229,207,.35);position:relative}
.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}
.rev-note{font-size:13.5px;color:var(--steel);margin-top:22px;max-width:62ch;line-height:1.6}

/* ---------- faq ---------- */
.faq{margin-top:var(--sp-head);border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;font-family:var(--disp);font-weight:600;font-size:clamp(18px,2.2vw,21px);
  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 24px;color:var(--steel);font-size:15.5px;max-width:70ch;line-height:1.65}
.faq p b{color:var(--ink)}

/* ---------- finale — the warm room at the end ---------- */
.finale{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;position:relative;overflow:hidden}
.finale:before{content:"";position:absolute;inset:0;opacity:.15;mix-blend-mode:overlay;
  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)'/></svg>")}
.finale:after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--temp);opacity:.85}
.finale-inner{position:relative;text-align:center;padding:clamp(70px,10vw,110px) 0}
.finale-h{font-family:var(--disp);font-weight:560;font-size:clamp(2.6rem,7vw,5.4rem);line-height:.94;letter-spacing:-.03em}
.finale-h em{font-style:italic;font-weight:480;font-variation-settings:'SOFT' 100,'WONK' 1;color:var(--gold)}
.finale-sub{margin-top:18px;font-size:clamp(16px,1.8vw,19px);font-weight:600;max-width:44ch;margin-inline:auto;line-height:1.55}
.finale-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.finale .btn-paper{box-shadow:0 16px 40px -16px rgba(38,10,0,.8)}
.finale .emergency-link.on-dark{color:#fff}
.finale .pulse{background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.5)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--paper);z-index:2;position:relative;padding:68px 0 36px;
  background-image:radial-gradient(60vw 30vw at 8% 0%,rgba(227,93,37,.09),transparent 60%)}
footer:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--temp);opacity:.55}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.foot-brand .brand{color:var(--paper);font-size:26px}
/* Footer uses the full Staffy logo lockup (not the serif wordmark). The logo
   art is dark ink for the cream header, so it's whitened here to read on the
   near-black footer — a clean monochrome footer mark. */
.foot-brand .foot-logo{gap:0}
.foot-brand .foot-logo img{height:40px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.94}
.foot-brand>p{color:var(--steel-2);font-size:14px;margin-top:14px;max-width:44ch;line-height:1.6}
.foot-privacy{font-size:12.5px !important;line-height:1.6;border-left:2px solid var(--copper);padding-left:13px;margin-top:16px}
.foot-privacy b{color:var(--paper-2)}
.foot-col h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:15px;font-weight:500}
.foot-col a,.foot-col p{display:block;color:var(--paper-2);font-size:14px;margin-bottom:9px;line-height:1.5}
.foot-col a{min-height:32px}
.foot-col a:hover{color:#fff}
.foot-bar{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-top:50px;padding-top:22px;
  border-top:1px solid var(--line-d);font-size:12.5px;color:var(--steel-2)}
.foot-bar .stamp{font-size:11.5px;color:var(--steel-2)}
.foot-gas a{color:var(--gold)}
.anvul-credit{display:inline-flex;align-items:center;gap:7px;color:var(--steel-2)}
.anvul-credit b{color:var(--paper-2);font-weight:600}

/* ---------- entrances ---------- */
.rise{opacity:0;transform:translateY(22px);animation:rise .8s cubic-bezier(.2,.7,.25,1) forwards}
.d1{animation-delay:.1s}.d2{animation-delay:.22s}.d3{animation-delay:.34s}.d4{animation-delay:.48s}
@keyframes rise{to{opacity:1;transform:none}}
.flame-live{transform-origin:center bottom;animation:flick 2.8s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1) rotate(0)}45%{transform:scale(1.06,.96) rotate(-1.6deg)}70%{transform:scale(.97,1.04) rotate(1.2deg)}}
.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}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .hero-copy{padding-top:calc(64px + 5vh)}
  .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 3:1 */
  .masthead em{background:var(--flame);-webkit-background-clip:text;background-clip:text}
  .trustgrid{grid-template-columns:1fr 1fr;gap:20px}
  .svc-row{grid-template-columns:minmax(52px,64px) 1fr}
  .svc-price{grid-column:2;justify-self:start;text-align:left;margin-top:14px}
  .svc-price small{display:inline;margin-left:8px}
  .rev-grid{grid-template-columns:1fr 1fr}
  .craftgrid{grid-template-columns:1fr}
  .craft-photo{max-height:440px;transform:none}
  .craft-photo img{aspect-ratio:auto;height:440px}
  .foot-top{grid-template-columns:1fr 1fr}
  .navlinks{display:none}
}
@media(max-width:640px){
  .rev-grid,.trustgrid,.foot-top,.f-row{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .navrow{gap:12px}
  .brand{font-size:18.5px;white-space:nowrap;gap:8px}
  .brand .fl{width:18px;height:21px}
  .brand img{height:31px}
  .brand img.mk{height:26px}
  .navcall{gap:8px}
  .navcall .btn{font-size:13.5px;padding:10px 15px;white-space:nowrap}
  .navcall .btn svg{width:14px;height:14px}
  .kicker:before{display:none}
  .kicker{font-size:9.5px;letter-spacing:.15em;line-height:1.7}
  .navphone span{display:none}
  .navphone{width:44px;min-height:44px;padding:0;justify-content:center;border:1px solid var(--line);border-radius:50%}
  .navphone svg{width:19px;height:19px}
  /* the masthead sized so "Stafford boilers," holds ONE line at 390px —
     two lines total, and the emergency door climbs back toward the fold */
  .masthead{font-size:clamp(2.6rem,11.6vw,4.2rem);letter-spacing:-.03em;line-height:.92}
  .masthead-sub{letter-spacing:.15em;font-size:10px;margin-top:14px}
  .lede{font-size:1.07rem;line-height:1.52;margin-top:13px}
  .hero-copy{padding-top:calc(48px + 2vh)}
  .diagnose-card{margin-top:22px;padding:20px 18px 18px;border-radius:22px}
  .dc-head{margin-bottom:15px;gap:13px}
  .dc-head span{font-size:13px}
  .dc-note{font-size:12px}
  .hero-promise{font-size:13.5px}
  .herofoot{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
  .herofoot .hf:nth-child(2n){border-left:1px solid rgba(249,242,227,.16);padding-left:16px}
  .btn-xl{font-size:16px}
  .svc-row.svc-hot{margin:14px -4vw;border-radius:0}
  .rev-slot{min-height:170px}
}
/* ============================================================
   CONVERSION FURNITURE (2026-08 pass) — same tokens, same
   dark-vs-paper logic. Placeholder facts are visibly marked
   with .ph-mark so they read as intentional, never invented.
   ============================================================ */

/* the 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)}
.hero .ph-mark,.dark .ph-mark,.svc-hot .ph-mark,.team-verify .ph-mark{color:var(--gold);border-color:rgba(242,195,104,.55);background:rgba(242,195,104,.08)}
.svc-hot .ph-mark{margin-top:12px}

/* hero — the emergency CTA promoted to co-equal; diagnose stays strong */
.btn-ember .pulse{background:#2a1503;box-shadow:0 0 0 0 rgba(42,21,3,.35)}
.btn-night{background:rgba(22,16,9,.55);color:var(--paper);border:1.5px solid rgba(242,195,104,.55);box-shadow:none}
.btn-night:hover{border-color:var(--gold);box-shadow:0 0 26px -8px rgba(242,195,104,.4)}
.diagnose-card .btn + .dc-note{margin-top:9px}
.dc-note{font-size:12.5px;color:var(--steel-2);line-height:1.5;position:relative}
.dc-note b{color:var(--paper-2)}
.dc-note + .btn{margin-top:16px}
.hero-promise{margin-top:18px;font-size:14px;font-weight:600;color:var(--paper-2);max-width:540px;line-height:1.6}
.hero-promise .ph-mark{margin-left:6px}
.hero-price{margin-top:10px;font-size:13.5px;color:var(--steel-2);max-width:540px;line-height:1.6}
.hero-price .stamp{color:var(--gold);font-size:14px}

/* sticky mobile reach dock — call + WhatsApp, one tap, always in thumb
   range. A floating brass-edged dock rather than a flat bar: it reads as
   an instrument, not chrome. Body gets matching bottom padding below so
   it never covers content; it slides up once on load (killed under
   reduced motion). */
.callbar{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:30;display:none;gap:8px;
  background:rgba(25,17,10,.9);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(242,195,104,.2);border-radius:22px;overflow:hidden;padding:8px;
  box-shadow:0 22px 48px -18px rgba(22,16,9,.7),0 6px 18px -8px rgba(22,16,9,.5),inset 0 1px 0 rgba(242,195,104,.1)}
.callbar:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--temp);opacity:.8}
.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}}
@media(max-width:860px){
  .callbar{display:flex;animation:cb-in .55s cubic-bezier(.2,.7,.25,1) .35s backwards}
  body{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  /* the hero is 100svh with its trust rail at the bottom edge — clear the dock */
  .hero-copy{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media(max-width:479px){
  .cb small{display:none}
  .cb b{font-size:14px}
}

/* services — the itemised "everything included" install bundle */
.bundle{list-style:none;margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;max-width:560px}
.bundle li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--steel);line-height:1.45}
.bundle li svg{width:15px;height:15px;flex:none;color:var(--ember-text);margin-top:3px}
.bundle li b{color:var(--ink);font-weight:600}
.bundle li.ph{grid-column:1/-1}
@media(max-width:640px){.bundle{grid-template-columns:1fr}}

/* our engineers — the own-engineers promise beside the big verifiable reg */
.verify-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);margin-top:var(--sp-head);align-items:start}
.verify-copy .sub b{color:var(--ink)}
.team-verify{border-radius:var(--rad-lg);padding:26px 24px;background:linear-gradient(150deg,#241812,var(--ink) 70%);color:var(--paper);
  position:relative;overflow:hidden;border:1px solid rgba(242,195,104,.2);box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:10px}
.team-verify:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 100% 0,rgba(246,163,60,.18),transparent 55%)}
.team-verify:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--temp)}
.tv-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:500;position:relative}
.tv-reg{font-family:var(--mono);font-weight:600;font-size:clamp(34px,4vw,46px);letter-spacing:.08em;line-height:1;color:var(--gold);position:relative;
  text-shadow:0 1px 0 rgba(0,0,0,.6),0 -1px 0 rgba(242,195,104,.25)}
.team-verify>span{font-size:13.5px;color:var(--steel-2);line-height:1.55;position:relative}
.tv-link{margin-top:auto;position:relative;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:var(--flame);
  min-height:var(--tap);text-decoration:underline;text-underline-offset:4px}
.tv-link:hover{color:var(--gold)}
@media(max-width:860px){.verify-grid{grid-template-columns:1fr}}

/* straight dealing — one firm not four, CCR in plain sight */
.straight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,34px);margin-top:var(--sp-head)}
.sd{padding-top:18px;position:relative}
.sd:before{content:"";position:absolute;top:0;left:0;width:44px;height:2px;background:var(--temp);border-radius:2px}
.sd b{font-family:var(--disp);font-weight:600;font-size:17px;line-height:1.3;letter-spacing:-.005em;display:block}
.sd span{display:block;font-size:14px;color:var(--steel);line-height:1.55;margin-top:8px}
@media(max-width:860px){.straight-grid{grid-template-columns:1fr}}

/* ============================================================
   MOBILE CRAFT PASS (2026-08) — the phone-first refinement layer.
   Same tokens, same dark-vs-paper logic; no copy, no structure.
   ============================================================ */

/* touch feel — no grey tap flash, no double-tap zoom on controls,
   a real press on every button */
html{-webkit-tap-highlight-color:transparent}
button,.btn,.cb,.svc-cta,.emergency-link,summary{touch-action:manipulation}
.btn{transition:transform .18s,box-shadow .25s,filter .2s}
.btn:active{transform:translateY(0) scale(.975)}
.btn-ember:active{filter:saturate(1.08)}

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

/* the £39 price stamp — a small brass plate, pressed, not typed */
.hero-price .stamp{display:inline-block;padding:5px 11px;border:1px solid rgba(242,195,104,.5);border-radius:9px;
  background:rgba(242,195,104,.09);box-shadow:inset 0 1px 0 rgba(242,195,104,.2);margin:2px 8px 4px 0}

/* 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}}

/* svc links — full tap height for thumbs (flex = still its own line;
   bottom-aligned so the hairline underline keeps hugging the words) */
.svc-seo{min-height:44px;display:flex;align-items:flex-end}

@media(max-width:640px){
  /* trust band — one calm ledger column with hairline rules, no dead air */
  .trustgrid{gap:0;padding:10px 0 14px}
  .trust{padding:15px 0}
  .trust + .trust{border-top:1px solid var(--line)}
  .trust svg{width:26px;height:26px}

  /* the service ledger goes single-column: the numeral becomes a small
     stamped index on its own rule, and the copy takes the full measure */
  .svc-row{grid-template-columns:1fr;gap:8px;padding:26px 2px}
  .svc-num{display:flex;align-items:center;gap:12px;font-size:14px;letter-spacing:.22em;
    -webkit-text-stroke:0;text-stroke:0;color:var(--copper)}
  .svc-num:after{content:"";flex:1;height:1px;background:var(--line)}
  .svc-row:hover .svc-num{color:var(--ember-text)}
  .svc-main p{font-size:14.5px}
  /* the price becomes a proper tag — the ledger total, stamped on a plate */
  .svc-price{grid-column:1;justify-self:start;text-align:left;margin-top:14px;
    display:inline-block;background:var(--paper-2);border:1px solid var(--line);border-radius:11px;
    padding:9px 13px 8px;font-size:14.5px}
  .svc-price small{display:block;margin:5px 0 0}
  .svc-row.svc-hot{padding:26px 6vw 28px}
  .svc-row.svc-hot .svc-num{color:var(--flame)}
  .svc-row.svc-hot .svc-num:after{background:var(--line-d)}
  .svc-row.svc-hot .svc-price{background:rgba(242,195,104,.08);border-color:rgba(242,195,104,.3)}

  /* workshop stats — smaller stamp, tighter labels, no ragged wrap */
  .stat b{font-size:clamp(26px,7.5vw,40px)}
  .stat span{font-size:9px;letter-spacing:.1em}

  /* finale — both doors full-width, one thumb */
  .finale-cta{flex-direction:column;gap:12px}
  .finale-cta .btn{width:100%}
}

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

/* ---------- reduced motion: everything still, instantly ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none !important;transition:none !important}
  .rise,.io-rise{opacity:1;transform:none}
  .hero-bloom{opacity:.85}
}