/* ============================================================
   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 */
.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(4,6,12,.96),rgba(4,6,12,.82) 30%,rgba(4,6,12,.44) 58%,rgba(4,6,12,.64)),linear-gradient(180deg,rgba(4,6,12,.5),rgba(4,6,12,0) 24%,rgba(4,6,12,.5) 76%,#04060C)}
.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(4,6,12,.62),rgba(4,6,12,.35) 30%,rgba(4,6,12,.72) 74%,#04060C),linear-gradient(90deg,rgba(4,6,12,.4),transparent 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 */
  header.tp .btn{padding:9px 12px;font-size:.76rem}
}
@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}
  header.tp .btn{padding:10px 14px;font-size:.8rem}
}

/* 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)}
body.wc .hero-photo .hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(94deg,rgba(4,6,12,.94) 0%,rgba(4,6,12,.8) 30%,rgba(4,6,12,.4) 58%,rgba(4,6,12,.08) 82%),
  linear-gradient(180deg,rgba(4,6,12,.55),rgba(4,6,12,.1) 28%,rgba(4,6,12,.5) 78%,#04060C)}
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(4,6,12,.72),rgba(4,6,12,.32) 34%,rgba(4,6,12,.78) 78%,#04060C),linear-gradient(90deg,rgba(4,6,12,.5),transparent 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; }