/* Template: trades (renovation, solar, air-conditioning). Mood: confident, practical, on-site. */
:root{
  --font-head:"Roboto Slab",Georgia,serif; --font-body:"Inter",system-ui,sans-serif;
  --bg:#F5F5F2; --surface:#FFFFFF; --surface-2:#EBEBE6; --text:#15171C; --muted:#545862; --line:#DADAD3;
  --brand:#15171C; --brand-ink:#fff; --accent:#FFC629; --ink:#15171C;
  --radius:6px; --radius-sm:4px; --head-weight:800; --head-tracking:-.025em;
  --shadow:0 2px 0 rgba(21,23,28,.08),0 20px 40px -20px rgba(21,23,28,.35);
  --stripe:repeating-linear-gradient(-45deg,var(--accent) 0 14px,var(--ink) 14px 28px);
}
body{font-weight:400}
h1,h2{text-transform:none}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:800 .74rem var(--font-body);letter-spacing:.16em;color:var(--text)}
.eyebrow::before{content:"";width:22px;height:8px;background:var(--stripe)}
.btn{border-radius:var(--radius-sm);font-weight:800;padding:1em 1.5em;border-width:2px}
.btn--y{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn--y:hover{box-shadow:0 0 0 4px rgba(255,198,41,.35)}
.btn svg{width:1.1em;height:1.1em}
.section{padding:100px 0}
@media (max-width:700px){.section{padding:64px 0}}
.dark{background:var(--ink);color:#E8E9EC}
.dark h2,.dark h3{color:#fff}
.dark .lead,.dark .muted{color:#A9ADB6}
.dark .eyebrow{color:#fff}

/* Top strip + header */
.topstrip{background:var(--ink);color:#C9CCD3;font-size:.82rem}
.topstrip .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.topstrip a{color:#fff;font-weight:700;text-decoration:none}
.topstrip span{display:inline-flex;align-items:center;gap:8px}
.topstrip i{width:8px;height:8px;border-radius:50%;background:#3DDC84;display:inline-block}
.site-header{background:#fff;border-bottom:4px solid var(--accent)}
.brand{font:800 1.3rem var(--font-head);letter-spacing:-.02em}
.brand svg{color:var(--ink)}
.nav a{color:var(--text);font-weight:600}
.nav a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--accent)}
.site-header .btn{background:var(--accent);border-color:var(--accent);color:var(--ink)}

/* Hero */
.tr-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.tr-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.tr-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,23,28,.95) 0%,rgba(21,23,28,.75) 45%,rgba(21,23,28,.15) 100%)}
.tr-hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-top:88px;padding-bottom:96px}
.tr-hero h1{color:#fff;font-size:clamp(2.6rem,6vw,5rem);line-height:1;margin-bottom:.35em}
.tr-hero .lead{color:#D4D7DD;font-size:1.18rem}
.ticks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:center;font-weight:600}
.ticks svg{width:20px;height:20px;color:var(--accent);flex:none}
.quick{background:#fff;color:var(--text);border-radius:var(--radius);padding:26px;box-shadow:0 30px 60px rgba(0,0,0,.4);border-top:8px solid transparent;border-image:var(--stripe) 8}
.quick h2{font-size:1.5rem;margin-bottom:.2em}
.quick p{color:var(--muted);font-size:.92rem}
.svc-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}
.svc-pick a{display:flex;align-items:center;gap:10px;border:2px solid var(--line);border-radius:var(--radius-sm);padding:12px;text-decoration:none;color:var(--text);font-weight:700;font-size:.92rem;transition:border-color .15s,background .15s}
.svc-pick a:hover{border-color:var(--ink);background:#FFFBEA}
.svc-pick svg{width:22px;height:22px;flex:none}
@media (max-width:900px){.tr-hero .wrap{grid-template-columns:1fr;padding-top:56px;padding-bottom:56px}.tr-hero::before{background:rgba(21,23,28,.82)}}

/* Proof bar */
.proof{background:var(--accent);color:var(--ink)}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:26px;padding-bottom:26px}
.proof b{display:block;font:800 2.2rem/1 var(--font-head)}
.proof span{font-weight:600;font-size:.88rem}
@media (max-width:760px){.proof .wrap{grid-template-columns:1fr 1fr}}

/* Services */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc a{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.svc a:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.svc img{aspect-ratio:16/10;object-fit:cover;width:100%}
.svc .b{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.svc h3{font-size:1.25rem;margin:0}
.svc p{color:var(--muted);margin:0;font-size:.95rem}
.svc .meta{display:flex;justify-content:space-between;margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);font-size:.88rem;font-weight:700}
.svc .meta span:last-child{color:var(--muted);font-weight:600}
@media (max-width:900px){.svc{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svc{grid-template-columns:1fr}}

/* Guarantees */
.gtee{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gtee div{border:2px solid #2B2E35;border-radius:var(--radius);padding:28px}
.gtee svg{width:34px;height:34px;color:var(--accent);margin-bottom:14px}
.gtee h3{font-size:1.3rem}
.gtee p{color:#A9ADB6;margin:0}
@media (max-width:860px){.gtee{grid-template-columns:1fr}}

/* Steps */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;list-style:none;padding:0;margin:0}
.steps4 li{counter-increment:s;padding:0 24px 0 0;position:relative}
.steps4 li::before{content:counter(s,decimal-leading-zero);font:800 3.4rem/1 var(--font-head);color:var(--text);display:block;margin-bottom:10px}
.steps4 li::after{content:"";position:absolute;top:26px;left:76px;right:20px;height:4px;background:var(--stripe);opacity:.9}
.steps4 li:last-child::after{display:none}
.steps4 h3{font-size:1.15rem}
.steps4 p{color:var(--muted);font-size:.95rem}
@media (max-width:860px){.steps4{grid-template-columns:1fr 1fr;gap:28px}.steps4 li::after{display:none}}

/* Before/after block */
.ba-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center}
.ba-note{font-size:.82rem;color:var(--muted);margin-top:10px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}
.kpis div{background:var(--surface-2);border-radius:var(--radius-sm);padding:14px}
.kpis b{display:block;font:800 1.5rem var(--font-head)}
.kpis span{font-size:.8rem;color:var(--muted);font-weight:600}
@media (max-width:900px){.ba-grid{grid-template-columns:1fr}}

/* Reviews */
.rv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rv figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.rv .stars{color:#E0A800;letter-spacing:3px}
.rv blockquote{margin:10px 0 14px;font-weight:500}
.rv figcaption{font-size:.88rem;color:var(--muted)}
.rv figcaption b{color:var(--text)}
@media (max-width:860px){.rv{grid-template-columns:1fr}}

/* Areas */
.areas{display:flex;flex-wrap:wrap;gap:8px}
.areas span{border:2px solid #2B2E35;border-radius:999px;padding:.4em 1em;font-weight:600;color:#E8E9EC}

/* Page head */
.page-head{background:var(--ink);color:#fff;padding:72px 0 64px;position:relative}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--stripe)}
.page-head h1{color:#fff;font-size:clamp(2.4rem,5.4vw,4.2rem);max-width:16ch}
.page-head .lead{color:#C9CCD3}
.page-head .eyebrow{color:#fff}

/* Service detail rows */
.sd{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;padding:64px 0;border-bottom:1px solid var(--line);align-items:center}
.sd img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.sd .facts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.sd .facts span{background:var(--surface-2);border-radius:999px;padding:.35em .9em;font-size:.85rem;font-weight:700}
.sd ul{padding-left:1.1em;color:var(--muted)}
@media (max-width:900px){.sd{grid-template-columns:1fr;gap:24px;padding:48px 0}}

/* Quote wizard page */
.qwrap{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;padding:56px 0 100px;align-items:start}
.wiz .choice span svg{width:30px;height:30px}
.wiz input[type=range]{width:100%;accent-color:var(--ink);margin:10px 0}
.big-val{font:800 2.6rem/1 var(--font-head)}
.side{background:var(--ink);color:#E8E9EC;border-radius:var(--radius);padding:28px;position:sticky;top:96px}
.side h2{color:#fff;font-size:1.3rem}
.side li{margin-bottom:10px}
.side ul{padding-left:1.1em;color:#C9CCD3}
.result{text-align:left}
.result .range{font:800 clamp(2.2rem,5vw,3.4rem)/1 var(--font-head);margin:.2em 0}
.result .next{background:var(--surface-2);border-radius:var(--radius-sm);padding:16px 18px;margin:18px 0}
@media (max-width:960px){.qwrap{grid-template-columns:1fr}.side{position:static}}

/* Solar calculator */
.sol{display:grid;grid-template-columns:1fr 1.2fr;gap:36px;padding:56px 0 100px;align-items:start}
.sol-in{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.sol-in label{font-weight:700;display:block;margin-bottom:6px}
.sol-in input[type=range]{width:100%;accent-color:var(--ink)}
.seg{display:flex;border:2px solid var(--ink);border-radius:var(--radius-sm);overflow:hidden;margin:8px 0 20px}
.seg label{flex:1;margin:0;text-align:center;padding:10px;cursor:pointer;font-weight:700;font-size:.9rem}
.seg input{position:absolute;opacity:0}
.seg label:has(input:checked){background:var(--ink);color:#fff}
.seg label:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:-3px}
.sol-out{background:var(--ink);color:#E8E9EC;border-radius:var(--radius);padding:28px}
.sol-out h2{color:#fff;font-size:1.3rem}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.tiles div{background:#1F2228;border-radius:var(--radius-sm);padding:16px}
.tiles b{display:block;font:800 1.9rem/1.1 var(--font-head);color:#fff}
.tiles b.y{color:var(--accent)}
.tiles span{font-size:.82rem;color:#A9ADB6;font-weight:600}
.chart{width:100%;height:auto;margin-top:8px}
.sol-note{font-size:.8rem;color:var(--muted);margin-top:16px}
@media (max-width:960px){.sol{grid-template-columns:1fr}}

/* Footer */
.site-footer{background:#0E0F12;border-top:10px solid transparent;border-image:var(--stripe) 10}
.site-footer h2{font-family:var(--font-head);text-transform:none;letter-spacing:0;font-size:1.1rem}