/* ============================================================
   Shared stylesheet for the niche trade pages
   (roofers / plumbers / landscapers / auto-repair)
   Extends the site design system. Main site pages remain self-contained.
   ============================================================ */

:root{
  --bg:#050505;--bg-alt:#0C0C0C;--navy:#152442;--card:#111A30;--card-2:#0E1628;
  --azure:#2E6BFF;--azure-2:#4F9BFF;--azure-soft:rgba(46,107,255,.13);
  --teal:#2EE6D6;--teal-2:#7FF0E4;--teal-soft:rgba(46,230,214,.13);
  --gold:#E0B43A;--gold-soft:rgba(224,180,58,.14);--bad:#FF6B6B;--warn:#FF9A5B;
  --heading:#9BBEFF;--subhead:#B6C0D0;--ink:#EAF0FB;--body:#A6B2CC;--faint:#7C8AAB;
  --line:rgba(255,255,255,.09);--line-soft:rgba(255,255,255,.05);
  --grad:linear-gradient(135deg,#1E47A0 0%,#2E6BFF 55%,#4F9BFF 100%);
  --grad-scan:linear-gradient(135deg,#3BF0A4,#10DCCB 46%,#2E9BFF);
  --grad-gold:linear-gradient(120deg,#F7DC93,#E0B43A 52%,#CC9B2C);
  --grad-ice:linear-gradient(135deg,#8FD4FF,#4F9BFF 45%,#1E47A0);
  --grad-fix:linear-gradient(90deg,#2E6BFF,#3E8BFF,#3FE0D2);
  --radius:22px;--radius-sm:14px;--maxw:1080px;
  --ease:cubic-bezier(.22,.8,.26,1);
  --shadow-card:0 30px 70px -36px rgba(0,0,0,.8);
  --shadow-lift:0 48px 96px -44px rgba(46,107,255,.55);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
body{font-family:'Figtree',sans-serif;background:var(--bg);color:var(--body);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
h1,h2,h3,h4{font-family:'Montserrat',sans-serif;line-height:1.12;letter-spacing:-.025em;font-weight:700;color:var(--heading);-webkit-text-stroke:.85px rgba(4,9,22,.62);paint-order:stroke fill}
/* section titles: match the site-wide gradient sheen (hero h1 keeps its legibility stroke) */
section h2{-webkit-text-fill-color:transparent;color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(96deg,#EAF3FF 4%,#8FD4FF 48%,#46E0CF);-webkit-text-stroke:0;letter-spacing:-.022em}
h1{color:#EEF3FF}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:var(--azure);color:#fff;padding:9px 16px;border-radius:8px;z-index:99}
:focus-visible{outline:2px solid var(--azure-2);outline-offset:3px;border-radius:4px}


/* ---------- header ---------- */
header.tp{position:sticky;top:0;z-index:50;padding:14px 0;background:rgba(10,15,30,.72);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid var(--line);transition:box-shadow .3s}
header.tp.scrolled{box-shadow:0 18px 40px -28px rgba(0,0,0,.85)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-family:'Montserrat';font-weight:800;font-size:1.2rem;color:var(--ink)}
.brand .mk{width:36px;height:36px;border-radius:10px;flex:none}
.brand .ai{background:linear-gradient(100deg,#4F9BFF,#2EE6D6);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-right{display:flex;align-items:center;gap:12px}
.back{font-size:.88rem;font-weight:600;color:var(--body);display:inline-flex;align-items:center;gap:7px;padding:10px 16px;min-height:44px;border:1px solid var(--line);border-radius:60px;transition:border-color .25s,background .25s,color .25s}
.back:hover{border-color:rgba(79,155,255,.45);background:rgba(46,107,255,.08);color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Montserrat';font-weight:700;font-size:.95rem;padding:13px 26px;min-height:46px;border-radius:60px;cursor:pointer;border:none;white-space:nowrap;position:relative;overflow:hidden;transition:transform .2s var(--ease),box-shadow .25s,filter .2s;will-change:auto}
.btn-primary{color:#fff;background:var(--grad);box-shadow:0 14px 30px -14px rgba(46,107,255,.65)}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.06);box-shadow:0 20px 44px -16px rgba(46,107,255,.85)}
.btn-scan{background:linear-gradient(rgba(11,18,38,.96),rgba(11,18,38,.96)) padding-box,var(--grad-scan) border-box;border:1.5px solid transparent;color:#fff;box-shadow:0 10px 26px -16px rgba(25,222,182,.6),0 0 16px -9px rgba(60,235,205,.42)}
.btn-scan::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-20deg);transition:left .6s;pointer-events:none}
.btn-scan:hover::after{left:130%}
.btn-scan:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 36px -15px rgba(25,222,182,.82),0 0 22px -8px rgba(60,235,205,.55)}
.btn-ghost{background:rgba(46,107,255,.07);color:var(--ink);border:1px solid rgba(79,155,255,.42)}
.btn-ghost:hover{transform:translateY(-2px) scale(1.02);border-color:rgba(46,230,214,.6);background:rgba(46,107,255,.14)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:78px 0 64px;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 50% -8%,rgba(46,107,255,.2),transparent 58%);pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
/* optional cinematic photo backdrop (per-page image via .hero-media markup); heavy left + bottom scrim so copy stays legible and the photo dissolves into the page.
   The copy column is capped at 660px and left-aligned, so on a 1180 wrap it runs to
   roughly 56% of the frame. The old trough (.44 at 58%) opened up exactly under the
   end of the sub and the last meta chip: measured 2.74 to 3.53 against a 4.5 bar on
   roofers, auto-repair and the roofing package. The scrim now holds past the copy
   before it releases. Scrim colour is the page --bg (#050505); the old #04060C
   seamed against it at the bottom edge. */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:74% center}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.97) 0%,rgba(5,5,5,.93) 30%,rgba(5,5,5,.84) 48%,rgba(5,5,5,.66) 62%,rgba(5,5,5,.4) 80%,rgba(5,5,5,.52) 100%),linear-gradient(180deg,rgba(5,5,5,.5),rgba(5,5,5,0) 24%,rgba(5,5,5,.5) 76%,#050505)}
.hero:has(.hero-media)::before{display:none}
@media(max-width:760px){.hero-media img{object-position:68% center}.hero-media::after{background:linear-gradient(180deg,rgba(5,5,5,.7),rgba(5,5,5,.5) 30%,rgba(5,5,5,.78) 74%,#050505),linear-gradient(90deg,rgba(5,5,5,.45),rgba(5,5,5,.1) 60%)}}
.eyebrow{font-family:'Montserrat';font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--azure-2)}
.hero .eyebrow{display:inline-block;margin-bottom:18px;padding:7px 14px;border:1px solid rgba(79,155,255,.32);border-radius:40px;background:rgba(46,107,255,.08)}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.15rem);letter-spacing:-.04em;line-height:1.07;margin-bottom:18px;max-width:600px}
.hero .sub{font-size:clamp(1.02rem,1.8vw,1.15rem);color:#C2CCDB;max-width:540px;margin-bottom:26px;line-height:1.65}
.hero-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.hero-meta span{font-family:'Montserrat';font-weight:600;font-size:.88rem;color:var(--body)}
.hero-meta i{width:1px;height:14px;background:var(--line)}
.hero-ctas{display:flex;gap:13px;flex-wrap:wrap}

/* hero sample-audit widget */
.tilt{perspective:900px}
.tw-card{position:relative;border-radius:var(--radius);min-height:372px;padding:24px 24px 20px;background:linear-gradient(168deg,rgba(22,32,56,.72),rgba(12,18,34,.82)) padding-box,linear-gradient(150deg,rgba(143,180,255,.3),rgba(143,180,255,.04) 48%,rgba(46,230,214,.2)) border-box;border:1px solid transparent;box-shadow:var(--shadow-card);transform-style:preserve-3d;transition:box-shadow .35s}
.tw-card.lit{box-shadow:var(--shadow-card),0 0 46px -18px rgba(46,107,255,.5)}
.tw-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.tw-head b{font-family:'Montserrat';font-size:.92rem;color:var(--ink);font-weight:700}
.tw-badge{font-family:'Montserrat';font-weight:700;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);padding:4px 10px;border:1px solid rgba(46,230,214,.35);border-radius:30px;background:rgba(46,230,214,.08)}
.tw-top{display:flex;gap:22px;align-items:center;margin-bottom:16px}
.gauge{position:relative;width:118px;height:118px;flex:none;transform:translateZ(26px)}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge .gtrack{fill:none;stroke:rgba(255,255,255,.08);stroke-width:9}
.gauge .gfill{fill:none;stroke:url(#twg);stroke-width:9;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset 1.5s var(--ease) .3s}
.tw-card.in .gauge .gfill{stroke-dashoffset:var(--gd)}
.gnum{position:absolute;inset:0;display:grid;place-items:center;font-family:'Montserrat';font-weight:800;font-size:1.9rem;color:var(--ink)}
.gnum small{position:absolute;bottom:24px;font-size:.56rem;font-weight:700;letter-spacing:.12em;color:var(--faint)}
.tw-bars{flex:1;display:grid;gap:11px}
.twb{display:grid;gap:5px}
.twb .l{display:flex;justify-content:space-between;font-size:.78rem;font-weight:600;color:var(--body)}
.twb .l b{color:var(--ink);font-family:'Montserrat';font-weight:700}
.twb .t{height:6px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.twb .f{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--c),var(--c2));transition:width 1.2s var(--ease)}
.tw-card.in .twb .f{width:var(--w)}
.tw-leaks{display:grid;gap:8px;transform:translateZ(16px)}
.twl{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(9,14,28,.55);border:1px solid var(--line-soft);font-size:.82rem;color:var(--body)}
.twl svg{flex:none;color:var(--warn)}
.twl.crit svg{color:var(--bad)}
.twl span{flex:1;line-height:1.4}
.tw-note{margin-top:14px;font-size:.7rem;color:var(--faint);text-align:right}

/* severity chips (report design system) */
.chip{display:inline-flex;align-items:center;gap:4px;font-family:'Montserrat';font-size:.6rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border-radius:6px;flex:none}
.twl span.chip{flex:none}
.chip.crit{color:var(--bad);background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.3)}
.chip.high{color:var(--warn);background:rgba(255,154,91,.12);border:1px solid rgba(255,154,91,.3)}
.chip.mod{color:var(--gold);background:rgba(224,180,58,.12);border:1px solid rgba(224,180,58,.32)}

/* ---------- sections ---------- */
.sec{padding:72px 0}
.sec.alt{background:linear-gradient(180deg,transparent,rgba(11,18,36,.55) 18% 82%,transparent)}
.intro{max-width:660px;margin-bottom:38px}
.intro .eyebrow{margin-bottom:14px;position:relative;display:inline-block}
.intro .eyebrow::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--grad-fix);border-radius:2px;transition:width .8s var(--ease) .25s}
.intro.in .eyebrow::after{width:38px}
.intro h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin-bottom:12px}
.intro p{font-size:1.04rem;color:var(--subhead)}

/* glass cards + leaks grid */
.glass{position:relative;border-radius:18px;background:linear-gradient(168deg,rgba(22,32,56,.58),rgba(12,18,34,.66)) padding-box,linear-gradient(150deg,rgba(143,180,255,.24),rgba(143,180,255,.03) 48%,rgba(46,230,214,.15)) border-box;border:1px solid transparent;box-shadow:0 34px 70px -46px rgba(2,8,24,.9)}
.leaks{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.leak{padding:26px 28px;transition:transform .4s var(--ease),box-shadow .4s}
.leak:hover{transform:translateY(-5px);box-shadow:0 44px 88px -48px rgba(46,107,255,.6),0 0 0 1px rgba(122,166,255,.14)}
.leak h3{font-size:1.1rem;margin-bottom:7px;color:var(--ink);transition:transform .35s var(--ease)}
.leak:hover h3{transform:translateY(-2px)}
.leak p{font-size:.95rem;color:var(--body);line-height:1.55}

/* .glow clips its content and nothing else. */
.glow{position:relative;overflow:hidden}

/* what we check */
.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.check{display:flex;gap:14px;align-items:flex-start;padding:20px 20px;border-radius:16px;background:rgba(17,26,48,.5);border:1px solid var(--line-soft);transition:transform .35s var(--ease),border-color .3s,box-shadow .35s}
.check:hover{transform:translateY(-3px);border-color:rgba(122,166,255,.28);box-shadow:0 26px 54px -38px rgba(46,107,255,.55)}
.check .ci{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;color:var(--teal);background:rgba(46,230,214,.08);border:1px solid rgba(46,230,214,.22)}
.check b{display:block;font-family:'Montserrat';font-size:.95rem;color:var(--ink);margin-bottom:3px;font-weight:700}
.check p{font-size:.86rem;line-height:1.5;color:var(--body)}

/* sample findings strip */
.finds{display:grid;gap:12px}
.find{display:flex;align-items:center;gap:16px;padding:17px 20px;border-radius:15px;background:rgba(13,20,38,.62);border:1px solid var(--line-soft);border-left:3px solid var(--sev,var(--warn));transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
.find:hover{transform:translateY(-3px);box-shadow:0 30px 60px -42px rgba(46,107,255,.55)}
.find.crit{--sev:var(--bad)}.find.high{--sev:var(--warn)}.find.mod{--sev:var(--gold)}
.find .fnum{font-family:'Montserrat';font-weight:800;font-size:.78rem;color:var(--faint);flex:none;width:22px}
.find .ftx{flex:1;min-width:0}
.find .ftx b{display:block;font-family:'Montserrat';font-size:.97rem;color:var(--ink);font-weight:700;margin-bottom:2px}
.find .ftx p{font-size:.86rem;color:var(--body);line-height:1.5}
.finds-note{margin-top:14px;font-size:.8rem;color:var(--faint)}

/* what you get */
.get{display:grid;gap:13px;list-style:none}
.get li{position:relative;padding-left:32px;font-size:1.02rem;color:var(--body);line-height:1.5}
.get li svg{position:absolute;left:0;top:2px;color:var(--teal)}
.get b{color:var(--ink);font-weight:700}

/* outcomes band */
.outcome{padding:40px 38px}
.outcome-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:38px;align-items:center}
.outcome h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:12px}
.outcome .op{color:var(--subhead);font-size:1.02rem;margin-bottom:10px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{padding:18px 20px;border-radius:15px;background:rgba(9,14,28,.55);border:1px solid var(--line-soft);text-align:left}
.stat b{display:block;font-family:'Montserrat';font-weight:800;font-size:1.7rem;color:var(--ink);line-height:1.1}
.stat b .u{color:var(--azure-2);font-size:1.05rem;font-weight:700}
.stat>span{font-size:.8rem;color:var(--faint);line-height:1.4;display:block;margin-top:4px}
.stat b span{display:inline}

/* pricing (site plan recipe) */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{position:relative;border-radius:24px;padding:1.5px;background:linear-gradient(160deg,rgba(91,141,239,.5),rgba(91,141,239,.06) 55%,rgba(91,141,239,.22));transition:transform .3s var(--ease),box-shadow .3s var(--ease);display:flex}
.plan.fix{background:linear-gradient(160deg,rgba(46,230,214,.55),rgba(46,230,214,.05) 55%,rgba(62,139,255,.3))}
.plan.full{background:linear-gradient(160deg,rgba(143,212,255,.65),rgba(79,155,255,.12) 50%,rgba(30,71,160,.5))}
.plan:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.plan-in{border-radius:22.5px;background:linear-gradient(173deg,#121D38,#0C1428 68%);padding:26px 24px 24px;display:flex;flex-direction:column;width:100%}
.plan-tag{position:absolute;top:14px;right:14px;background:var(--grad-gold);color:#3A2B06;font-family:'Montserrat';font-weight:700;font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:30px;box-shadow:0 8px 18px -10px rgba(224,180,58,.5),0 0 12px -5px rgba(247,220,147,.5);border:1px solid rgba(247,220,147,.5);animation:goldGlow 3.2s ease-in-out infinite}
@keyframes goldGlow{0%,100%{box-shadow:0 8px 18px -10px rgba(224,180,58,.5),0 0 12px -5px rgba(247,220,147,.5)}50%{box-shadow:0 8px 22px -9px rgba(224,180,58,.7),0 0 20px -4px rgba(247,220,147,.75)}}
.tname{font-family:'Montserrat';font-weight:700;font-size:1.04rem;color:var(--ink);margin-bottom:8px}
.tprice{font-family:'Montserrat';font-weight:800;font-size:2rem;color:var(--ink);line-height:1}
.tprice small{display:block;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.tdeliv{font-size:.8rem;font-weight:600;color:var(--azure-2);margin:10px 0 2px}
.tsub{font-size:.86rem;color:var(--subhead);margin-bottom:8px}
.tblurb{font-size:.88rem;color:var(--body);line-height:1.55;flex:1}
.plan .btn{width:100%;margin-top:18px;color:#fff}
.plan.mini .btn{background:linear-gradient(135deg,#3D5A94,#5B8DEF)}
.plan.full .btn{background:var(--grad-ice);color:#06162E;font-weight:800}
.plan.fix .btn{background:var(--grad-fix)}
.imp-note{margin-top:16px;font-size:.8rem;color:var(--faint)}

/* FAQ */
.faq{display:grid;gap:11px;max-width:760px}
.fq{border:1px solid var(--line-soft);border-radius:14px;background:rgba(15,23,42,.5);transition:border-color .3s}
.fq[open]{border-color:rgba(122,166,255,.3)}
.fq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 20px;min-height:48px;font-family:'Montserrat';font-weight:600;font-size:.98rem;color:var(--ink)}
.fq summary::-webkit-details-marker{display:none}
.fq .pm{position:relative;width:18px;height:18px;flex:none}
.fq .pm::before,.fq .pm::after{content:"";position:absolute;background:var(--azure-2);border-radius:2px;transition:transform .3s var(--ease)}
.fq .pm::before{left:0;top:8px;width:18px;height:2px}
.fq .pm::after{left:8px;top:0;width:2px;height:18px}
.fq[open] .pm::after{transform:scaleY(0)}
.fq p{padding:0 20px 18px;font-size:.93rem;color:var(--body);line-height:1.6;max-width:640px}

/* final CTA */
.cta{text-align:center;padding:50px 30px}
.cta h2{font-size:clamp(1.6rem,3.2vw,2.1rem);margin-bottom:12px}
.cta p{max-width:480px;margin:0 auto 26px;color:var(--subhead);font-size:1.02rem}
.btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* footer */
footer.site{border-top:1px solid var(--line);padding:32px 0;color:var(--faint);font-size:.85rem;margin-top:20px}
footer.site .frow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:flex-start}
footer.site a{color:var(--faint)}footer.site a:hover{color:#fff}
.addr{font-size:.82rem;margin-top:7px}
.mini-links a{margin-left:14px;display:inline-block;padding:6px 0}.mini-links a:first-child{margin-left:0}

/* sticky mobile CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(8,12,26,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .4s var(--ease)}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .btn{flex:1;min-height:48px;font-size:.92rem;padding:12px 10px}
@media(max-width:820px){.sticky-cta{display:flex}body{padding-bottom:76px}}

/* reveals */
html.tfx .reveal:not(.in){opacity:0}
/* The engine owns the ramp. A host still being scrubbed must not ALSO run its
   own transform transition (.leak and friends declare one for hover): the
   applied translate then lags the value the engine believes it applied, the
   engine measures stale geometry, and two cards in the same row settle at
   visibly different opacities. Transitions come back the moment .in lands, so
   hover is untouched. */
html.tfx .reveal:not(.in){transition:none}
.reveal.in{opacity:1;transform:none}
/* click-stability: reveals holding interactive elements fade in place so hit areas never move mid-entry */

/* ---------- responsive ---------- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero h1,.hero .sub{max-width:none}
  .checks{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .outcome-grid{grid-template-columns:1fr;gap:26px}
}
@media(max-width:720px){
  .sec{padding:56px 0}
  .leaks{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .hero{padding:56px 0 48px}
}
@media(max-width:380px){
  .wrap{padding:0 18px}
  .stats{grid-template-columns:1fr}
  .hero-ctas .btn{width:100%}
  .back{display:none} /* brand already links home; keeps the header inside 320px */
}
@media(max-width:560px){
  /* header must fit a 320px viewport: back link collapses to an icon-only 44px target,
     brand and scan pill compact like the main-site header */
  .nav-right{gap:8px}
  .back{font-size:0;gap:0;padding:0;width:44px;height:44px;justify-content:center}
  .back svg{width:17px;height:17px}
  .brand{font-size:.98rem;gap:8px}
  .brand .mk{width:32px;height:32px;border-radius:9px}
}

/* sticky-bar call CTA (tap-to-call, the thing these pages preach) */
.btn-call{background:linear-gradient(120deg,#1E9E6A,#27C07F);color:#F2FFF9;border:none;box-shadow:0 10px 26px -16px rgba(39,192,127,.7)}
.btn-call:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-call svg{flex:none}

/* receptionist widget: sit above the sticky CTA bar while it is visible.
   body-prefixed to outrank the widget's own head-injected stylesheet. */
@media(max-width:820px){body .llw-btn{bottom:96px}body .llw-panel{bottom:166px}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .reveal.in{opacity:1}
  .tw-card.in .gauge .gfill{stroke-dashoffset:var(--gd);transition:none}
  .tw-card.in .twb .f{width:var(--w);transition:none}
  .leak:hover,.check:hover,.find:hover,.plan:hover,.btn:hover{transform:none}
}


/* ============================================================
   PHOTO TREATMENT
   Scoped to body.wc. roofers.html is the proof page; to roll out,
   add class="wc" to a trade body + wire assets/photos/<page>-hero.
   ============================================================ */
/* Editorial serif display headings: contrast the sans body, one family everywhere */
body.wc h1,
body.wc h2{font-family:'Playfair Display',Georgia,serif;font-weight:600;letter-spacing:-.005em;text-wrap:balance}
body.wc .sub,body.wc .intro p,body.wc .photoband p,body.wc .sb-copy p{text-wrap:pretty}
body.wc h2{-webkit-text-fill-color:#EEF3FF;color:#EEF3FF;background:none;background-image:none}
body.wc .intro h2,
body.wc .scoreband h2{font-size:clamp(1.95rem,3.8vw,2.9rem);line-height:1.1}
body.wc em{font-style:normal;color:inherit;font-weight:inherit}

/* ---- Photo-forward hero ---- */
body.wc .hero.hero-photo{padding:0;min-height:clamp(580px,84vh,780px);display:flex;align-items:center;border-bottom:1px solid var(--line)}
body.wc .hero-photo .hero-media{z-index:0}
body.wc .hero-photo .hero-media img{object-position:70% center;transform:scale(1.02)}
/* This is the scrim the four trade pages and the roofing package actually get:
   it outranks the base .hero-media::after above. The copy column is capped at
   660px and left-aligned, so on a 1180 wrap it runs to about 56% of the frame,
   and the old trough (.4 at 58%, .08 at 82%) opened up right under the end of
   the sub and the last meta chip. Measured against a 4.5 bar: roofers sub 4.47
   and last chip 3.53, auto-repair h1 2.74 and sub 4.46, plumbers h1 2.85,
   roofing package last chip 3.23. The scrim now holds until the copy ends.
   Colour is the page --bg (#050505); the old #04060C seamed against it. */
body.wc .hero-photo .hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(94deg,rgba(5,5,5,.96) 0%,rgba(5,5,5,.92) 30%,rgba(5,5,5,.85) 48%,rgba(5,5,5,.68) 62%,rgba(5,5,5,.3) 82%,rgba(5,5,5,.12) 100%),
  linear-gradient(180deg,rgba(5,5,5,.55),rgba(5,5,5,.1) 28%,rgba(5,5,5,.5) 78%,#050505)}
body.wc .hero-photo .hero-grid{grid-template-columns:1fr;gap:0;max-width:660px;margin-right:auto}
body.wc .hero-photo .eyebrow{margin-bottom:20px}
body.wc .hero-photo h1{font-size:clamp(2.6rem,5.6vw,4.15rem);line-height:1.03;letter-spacing:-.018em;margin-bottom:22px;max-width:15ch;color:#F6F9FF;text-shadow:0 2px 34px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5)}
body.wc .hero-photo .sub{font-size:clamp(1.02rem,1.4vw,1.16rem);max-width:500px;color:#D3DCEC;text-shadow:0 1px 12px rgba(0,0,0,.7)}
body.wc .hero-photo .hero-meta{text-shadow:0 1px 8px rgba(0,0,0,.7)}

/* ---- Relocated sample scorecard band ---- */
body.wc .scoreband{border-top:1px solid var(--line)}
body.wc .scoreband .sb-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
body.wc .scoreband .sb-copy{max-width:460px}
body.wc .scoreband .sb-copy p{color:var(--body,#A6B2CC);margin-top:14px}

/* ---- Section photo band ---- */
body.wc .photoband{position:relative;overflow:hidden;padding:clamp(96px,15vw,168px) 0;border-block:1px solid var(--line)}
body.wc .photoband .pb-media{position:absolute;inset:0;z-index:0;pointer-events:none}
body.wc .photoband .pb-media img{width:100%;height:100%;object-fit:cover;object-position:60% center}
body.wc .photoband .pb-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(92deg,rgba(4,6,12,.92) 0%,rgba(4,6,12,.66) 44%,rgba(4,6,12,.22) 78%),
  linear-gradient(180deg,#04060C,transparent 26%,transparent 72%,#04060C)}
body.wc .photoband .wrap{position:relative;z-index:1}
body.wc .photoband h2{font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.06;max-width:16ch;margin-bottom:8px}
body.wc .photoband p{max-width:44ch;color:#C6D0E0;font-size:1.06rem;margin:14px 0 26px}
body.wc .photoband .pb-copy{max-width:540px}
body.wc .photoband.pb-right .pb-copy{margin-left:auto}
body.wc .photoband.pb-right .pb-media img{object-position:34% center}
body.wc .photoband.pb-right .pb-media::after{background:linear-gradient(268deg,rgba(4,6,12,.92) 0%,rgba(4,6,12,.66) 44%,rgba(4,6,12,.22) 78%),linear-gradient(180deg,#04060C,transparent 26%,transparent 72%,#04060C)}

/* ---- Responsive ---- */
@media (max-width:820px){
  body.wc .scoreband .sb-grid{grid-template-columns:1fr;gap:34px}
  body.wc .hero-photo .hero-media img{object-position:64% center}
  body.wc .hero-photo .hero-media::after{background:linear-gradient(180deg,rgba(5,5,5,.78),rgba(5,5,5,.48) 34%,rgba(5,5,5,.82) 78%,#050505),linear-gradient(90deg,rgba(5,5,5,.5),rgba(5,5,5,.12) 66%)}
}
@media (max-width:560px){
  body.wc .hero.hero-photo{min-height:auto;padding:118px 0 54px}
  body.wc .hero-photo h1{font-size:clamp(2.2rem,9vw,2.95rem)}
}


/* ---- Ultra-premium button system: outlined glass pills (the Free Scan nav-button look), distinct gradient outline per button ---- */
body.wc .btn{font-weight:700;letter-spacing:.012em;font-size:.95rem;padding:14px 30px;min-height:52px;border-radius:56px;color:#fff;border:1.5px solid transparent;
  background:linear-gradient(rgba(11,18,38,.95),rgba(11,18,38,.95)) padding-box, var(--grad) border-box;
  box-shadow:0 12px 28px -16px rgba(46,107,255,.5),0 0 16px -10px rgba(79,155,255,.38)}
body.wc .btn:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 18px 40px -16px rgba(46,107,255,.75),0 0 24px -8px rgba(79,155,255,.52)}
body.wc .btn:active{transform:translateY(0)}
body.wc .btn::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;pointer-events:none;background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .6s}
body.wc .btn:hover::after{left:130%}
@media (prefers-reduced-motion:reduce){body.wc .btn::after{display:none}}
body.wc .btn-primary{background:linear-gradient(rgba(11,18,38,.95),rgba(11,18,38,.95)) padding-box, var(--grad-scan) border-box;box-shadow:0 14px 32px -14px rgba(25,222,182,.6),0 0 22px -8px rgba(60,235,205,.5)}
body.wc .btn-primary:hover{box-shadow:0 20px 46px -14px rgba(25,222,182,.85),0 0 30px -7px rgba(60,235,205,.68)}
body.wc .btn-ghost{background:linear-gradient(rgba(11,18,38,.9),rgba(11,18,38,.9)) padding-box, linear-gradient(150deg,#6E82A8,#39496E) border-box;box-shadow:0 8px 20px -16px rgba(0,0,0,.7)}
body.wc .btn-ghost:hover{box-shadow:0 13px 28px -16px rgba(110,130,168,.42)}
body.wc .btn-scan{background:linear-gradient(rgba(11,18,38,.95),rgba(11,18,38,.95)) padding-box, var(--grad-scan) border-box;box-shadow:0 12px 28px -16px rgba(25,222,182,.55),0 0 16px -9px rgba(60,235,205,.42)}
body.wc .btn-scan:hover{box-shadow:0 18px 40px -15px rgba(25,222,182,.8),0 0 22px -8px rgba(60,235,205,.58)}
body.wc .plan .btn{color:#fff;font-weight:700;width:100%;margin-top:18px}
body.wc .plan.mini .btn{background:linear-gradient(rgba(11,18,38,.95),rgba(11,18,38,.95)) padding-box, linear-gradient(135deg,#6E9CF5,#3D5A94) border-box;box-shadow:0 12px 26px -16px rgba(91,141,239,.5),0 0 14px -10px rgba(110,156,245,.4)}
body.wc .plan.full .btn{background:linear-gradient(rgba(11,18,38,.95),rgba(11,18,38,.95)) padding-box, var(--grad-ice) border-box;box-shadow:0 12px 30px -15px rgba(143,212,255,.6),0 0 18px -9px rgba(143,212,255,.5)}
body.wc .plan.fix .btn{background:linear-gradient(rgba(11,18,38,.95),rgba(11,18,38,.95)) padding-box, var(--grad-fix) border-box;box-shadow:0 12px 28px -16px rgba(63,224,210,.5),0 0 16px -9px rgba(63,224,210,.42)}
/* badge straddles the top edge instead of overlapping the heading */
body.wc .plan{overflow:visible}
body.wc .plan-tag{top:-13px;right:18px}

/* leak-card visualizations (content-relevant mini-diagrams) */
body.wc .leak-ico{display:block;width:52px;height:52px;object-fit:contain;margin:0 0 16px;filter:drop-shadow(0 3px 8px rgba(46,107,255,.28));transition:transform .4s var(--ease)}
body.wc .leak:hover .leak-ico{transform:translateY(-3px) scale(1.05)}

/* Tap targets: the trade pages do not load footer-compact.css, so the same
   24px floor (WCAG 2.5.8 AA) is applied here to the controls they do have. */
.foot-links2 a,
.foot-panel > a,
.foot-grid .foot-col a:not(.brand) {
  min-height: 24px;
  display: flex;
  align-items: center;
}
.foot-grid .foot-col button.fh { min-height: 24px; }
.mini-links a { padding-block: 5px; }
nav.navlinks > a, nav.tp-nav > a {
  min-height: 24px;
  display: flex;
  align-items: center;
}

/* Figures must not change width between rows. */
.price, .stat-n, .score, .num, [data-count], time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
/* A gradient on a sentence is a generated-site tell; headings go solid. */
section h2 {
  background-image: none;
  -webkit-text-fill-color: #EAF3FF;
  color: #EAF3FF;
}
h1 { font-optical-sizing: auto; }
@media (min-width: 900px) { h1 { letter-spacing: -0.022em; } }
blockquote { hanging-punctuation: first last; }

/* ---- The compact header, restored ----------------------------------------
   These five pages carried a 13px document overflow at 320 because the compact
   header rules written for that width had been dead for months: `body.wc .btn`
   (0,2,0, and outside any media query) outranks `header.tp .btn` (0,1,1), so
   the button kept its 14px/30px padding and 52px min-height at every width.
   The rebrand did the same to the mark, whose live class is now `.mark` around
   an `img.bcmark`, not the `.mk` the old rules targeted.
   Measured at 320 before: brand 155px + button 142px inside 284px of content.
   These live at the end of the file, after body.wc, and in ascending-specificity
   order so the narrower breakpoint wins where both match. */
@media(max-width:560px){
  body.wc header.tp .btn,header.tp .btn{padding:10px 15px;font-size:.8rem;min-height:44px}
  header.tp .brand .mark{width:34px;height:34px}
  header.tp .brand .bcword{font-size:1rem}
}
@media(max-width:380px){
  body.wc header.tp .btn,header.tp .btn{padding:9px 12px;font-size:.76rem;min-height:40px}
  header.tp .brand .mark{width:30px;height:30px}
  header.tp .brand .bcword{font-size:.92rem}
}