/* Total Roof Renewal — sporty design system (v5) */
:root{
  --ink:#11151c;
  --ink-2:#2b323d;
  --paper:#ffffff;
  --grey:#f4f5f7;
  --line:#e4e6eb;
  --signal:#ff4d1c;
  --signal-deep:#e03b00;
  --muted:#5b6470;
  --aqua:#0e7c86;
  --shadow:0 2px 4px rgba(17,21,28,.06),0 16px 40px rgba(17,21,28,.10);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.55;font-size:16.5px;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,.disp{font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1.05;letter-spacing:-0.025em;}
.container{max-width:1180px;margin:0 auto;padding:0 28px;}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(17,21,28,0.96);color:#fff;border-bottom:1px solid rgba(255,255,255,0.08);}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:68px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{width:34px;height:34px;background:var(--signal);color:#fff;display:grid;place-items:center;font-family:'Space Grotesk';font-weight:800;font-size:15px;transform:rotate(-3deg);}
.brand-name{font-family:'Space Grotesk';font-weight:700;font-size:19px;letter-spacing:-0.02em;}
.brand-sub{font-size:11px;color:rgba(255,255,255,0.55);letter-spacing:1px;text-transform:uppercase;font-weight:600;}
.nav{display:none;gap:26px;font-size:14px;font-weight:600;color:rgba(255,255,255,0.8);align-items:center;}
.nav a:hover{color:#fff;}
.nav a.btn-nav{background:var(--signal);color:#fff;padding:9px 20px;font-weight:700;transition:background .15s;font-size:13.5px;text-transform:uppercase;letter-spacing:.3px;}
.nav a.btn-nav:hover{background:var(--signal-deep);}
@media(min-width:900px){.nav{display:flex;}}

/* hero */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;}
.hero-clip{position:absolute;right:-5%;top:0;width:60%;height:120%;background:linear-gradient(115deg,var(--signal) 0%,var(--signal) 2.5%,transparent 2.6%,transparent 50%);opacity:0.06;transform:rotate(-6deg);}
.hero-rule{position:absolute;left:0;bottom:0;width:100%;height:5px;background:linear-gradient(90deg,var(--signal),var(--signal) 55%,transparent 55%);}
.hero-inner{position:relative;z-index:1;padding:92px 0 84px;max-width:820px;}
.kicker{font-size:12.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#ff8a66;display:flex;align-items:center;gap:12px;margin-bottom:22px;}
.kicker::before{content:"";width:40px;height:4px;background:var(--signal);}
.hero h1{font-size:clamp(40px,6vw,66px);color:#fff;}
.hero h1 .hl{color:#ff7a52;}
.hero-sub{font-size:clamp(17px,2.2vw,20px);color:rgba(255,255,255,0.78);max-width:50ch;margin-top:20px;font-weight:400;line-height:1.55;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center;}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:800;border:none;cursor:pointer;font-family:inherit;transition:all .15s;letter-spacing:.2px;text-transform:uppercase;font-size:13.5px;text-decoration:none;}
.btn-lg{height:56px;padding:0 34px;font-size:14px;}
.btn-solid{background:var(--signal);color:#fff;}
.btn-solid:hover{background:var(--signal-deep);transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,77,28,.35);}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.35);}
.btn-ghost:hover{border-color:#fff;}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{background:#000;}

/* sections */
section{padding:84px 0;}
.section-head{max-width:660px;margin-bottom:44px;}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--signal);display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.eyebrow i{width:40px;height:4px;background:var(--signal);display:block;font-style:normal;}
.section-title{font-size:clamp(30px,3.8vw,46px);color:var(--ink);}
.section-lead{font-size:17.5px;color:var(--muted);max-width:60ch;margin-top:14px;font-weight:400;}
.strip{background:var(--grey);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* cards */
.grid3{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:880px){.grid3{grid-template-columns:repeat(3,1fr);}}
.card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--signal);padding:30px 28px;transition:transform .15s,box-shadow .15s;}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.card h3{font-size:19px;font-weight:700;margin-bottom:10px;}
.card p{font-size:15px;color:var(--muted);line-height:1.6;}

/* chemistry */
.chemistry{background:var(--ink);color:#fff;}
.chemistry .section-title{color:#fff;}
.chemistry .section-lead{color:rgba(255,255,255,0.7);}
.chem-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:48px;}
@media(min-width:880px){.chem-grid{grid-template-columns:repeat(3,1fr);}}
.chem-cell{border:1px solid rgba(255,255,255,0.14);padding:30px;transition:background .15s;}
.chem-cell:hover{background:rgba(255,255,255,0.04);}
.chem-cell .num{font-family:'Space Grotesk';font-size:38px;font-weight:800;color:var(--signal);line-height:1;}
.chem-cell h4{font-family:'Space Grotesk';font-size:19px;font-weight:700;color:#fff;margin:14px 0 10px;}
.chem-cell p{font-size:14.5px;color:rgba(255,255,255,0.72);line-height:1.6;}
.chem-fine{margin-top:36px;font-size:12.5px;color:rgba(255,255,255,0.45);max-width:72ch;line-height:1.65;}

/* scope */
.scope-two{display:grid;grid-template-columns:1fr;gap:14px;margin-top:44px;}
@media(min-width:880px){.scope-two{grid-template-columns:1fr 1fr;}}
.scope-box{background:#fff;border:1px solid var(--line);padding:34px 30px;}
.scope-box h3{font-size:19px;font-weight:700;margin-bottom:16px;}
.scope-box ul{list-style:none;}
.scope-box li{font-size:15.5px;color:var(--ink-2);padding:9px 0;display:flex;gap:11px;align-items:flex-start;border-bottom:1px solid #eef0f3;}
.scope-box li:last-child{border-bottom:none;}
.scope-box li::before{font-weight:800;font-size:16px;}
.scope-box.ok li::before{content:"✓";color:var(--aqua);}
.scope-box.no li::before{content:"✕";color:var(--signal);}
.scope-note{margin-top:14px;font-size:13.5px;color:var(--muted);line-height:1.6;}

/* guarantee */
.guarantee{background:var(--ink);color:#fff;padding:50px;position:relative;border-top:4px solid var(--signal);}
.guarantee h2{font-size:clamp(25px,3.2vw,36px);color:#fff;max-width:24ch;}
.guarantee p{font-size:15.5px;color:rgba(255,255,255,0.85);max-width:64ch;margin-top:16px;line-height:1.65;}
.guarantee .g-rule{margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.18);}
.guarantee .g-rule h4{font-family:'Space Grotesk';font-size:17px;font-weight:700;color:#ff8a66;margin-bottom:6px;}
.guarantee .g-rule p{font-size:13.5px;color:rgba(255,255,255,0.72);margin-top:0;}

/* proof */
.proof .card{border-left:4px solid var(--aqua);}
.proof .card .num{font-family:'Space Grotesk';font-size:44px;font-weight:800;color:var(--ink);line-height:1;}
.proof .card .num em{color:var(--signal);font-style:normal;}
.proof .card .lbl{font-weight:800;font-size:15.5px;margin-top:6px;color:var(--ink);}
.proof .card p{font-size:13.5px;margin-top:8px;color:var(--muted);line-height:1.5;}
.proof .grid3 .card{border-left:3px solid var(--signal);}

/* process */
.process-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:44px;}
@media(min-width:880px){.process-grid{grid-template-columns:repeat(4,1fr);}}
.pstep{border-left:3px solid var(--line);padding:4px 0 4px 20px;}
.pstep .n{font-family:'Space Grotesk';font-size:26px;font-weight:800;color:var(--signal);}
.pstep h4{font-weight:800;font-size:15.5px;margin:6px 0 4px;}
.pstep p{font-size:13.5px;color:var(--muted);line-height:1.5;}

/* qualify */
.qualify{background:var(--ink);color:#fff;padding:clamp(30px,5vw,52px);margin-top:60px;}
.qualify h2{color:#fff;font-size:clamp(26px,3.2vw,36px);}
.qualify .sub{font-size:15.5px;color:rgba(255,255,255,0.7);margin:14px 0 28px;max-width:58ch;}
.q-step{border:1px solid rgba(255,255,255,0.18);padding:16px 20px;margin-bottom:12px;background:rgba(255,255,255,0.03);}
.q-step .q{font-weight:700;font-size:15.5px;color:#fff;}
.q-step .q small{display:block;font-weight:500;color:rgba(255,255,255,0.6);font-size:13px;margin-top:2px;}
.q-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px;}
.qchip{border:1px solid rgba(255,255,255,0.28);padding:12px 22px;font-size:13.5px;font-weight:700;background:rgba(255,255,255,0.04);cursor:pointer;color:rgba(255,255,255,0.9);transition:all .13s;text-transform:uppercase;letter-spacing:.3px;}
.qchip:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,0.08);}
.qchip.sel{border-color:var(--signal);background:var(--signal);color:#fff;}
.q-progress{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:8px;}
.qualify-cta{margin-top:24px;}
.q-note{font-size:12.5px;color:rgba(255,255,255,0.55);margin-top:14px;}

/* areas */
.area-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.area-chip{border:1px solid var(--line);padding:8px 15px;font-size:13px;font-weight:700;color:var(--ink-2);background:#fff;text-transform:uppercase;letter-spacing:.3px;}

/* faq / content pages */
.text-block{max-width:720px;}
.text-block h2{font-size:clamp(26px,3vw,34px);margin:44px 0 16px;}
.text-block p{font-size:16.5px;color:var(--ink-2);line-height:1.7;margin-bottom:16px;}
.text-block ul,.text-block ol{margin:0 0 18px 22px;color:var(--ink-2);font-size:16.5px;line-height:1.7;}
.text-block li{margin-bottom:8px;}
.text-block strong{color:var(--ink);}
.faq-item{border:1px solid var(--line);margin-bottom:12px;background:#fff;}
.faq-item summary{cursor:pointer;padding:22px 26px;font-weight:700;font-size:16.5px;display:flex;justify-content:space-between;align-items:center;}
.faq-item summary::after{content:"+";font-size:22px;color:var(--signal);font-weight:700;}
.faq-item[open] summary::after{content:"–";}
.faq-item .a{padding:0 26px 22px;color:var(--muted);font-size:15.5px;line-height:1.7;}

/* comparison table */
table.cmp{width:100%;border-collapse:collapse;margin-top:28px;background:#fff;font-size:15px;}
table.cmp th,table.cmp td{border:1px solid var(--line);padding:14px 16px;text-align:left;vertical-align:top;color:var(--ink-2);}
table.cmp th{background:var(--ink);color:#fff;font-weight:700;font-family:'Space Grotesk';font-size:14px;}
table.cmp tr.hl td{background:#fff5f1;color:var(--ink);font-weight:700;}
@media(max-width:700px){table.cmp{font-size:13.5px;}table.cmp th,table.cmp td{padding:10px;}}

/* footer */
footer{background:#0b0e14;color:rgba(255,255,255,0.66);padding:60px 0 40px;}
footer .foot-grid{display:grid;grid-template-columns:1fr;gap:30px;}
@media(min-width:880px){footer .foot-grid{grid-template-columns:repeat(4,1fr);}}
footer h4{font-family:'Space Grotesk';color:#fff;font-size:16px;font-weight:700;margin-bottom:12px;}
footer li{list-style:none;font-size:13.5px;padding:5px 0;color:rgba(255,255,255,0.6);}
footer a:hover{color:#fff;}
footer .foot-bottom{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.12);font-size:12px;color:rgba(255,255,255,0.45);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}