/* MPS Installs — v4 "Bright Side"
   The UK consumer-solar pattern (Heatable, Sunsave, Octopus) done with restraint: white, one saturated flat brand
   colour, big rounded photo cards, trust strip near the top, product photos, friendly plain copy, chunky CTA.
   No gradients, no glass, no glow. Headline: Urbanist · Body: Karla. Brand colour: a warm sun yellow on black type. */
@import url("style.css");
:root{
  --bg:#FFFFFF; --bg-2:#F6F7F4; --ink:#0F1A14;
  --sun:#FFD23F; --sun-2:#F2C230; --sun-soft:#FFF4C2;
  --cell:#1E6B4A; --cell-soft:#E3F1E9;
  --line:rgba(15,26,20,.12);
  --glass:#fff; --glass-strong:#fff; --radius:24px; --radius-sm:14px;
  --shadow:0 2px 6px rgba(15,26,20,.05), 0 20px 40px -24px rgba(15,26,20,.25);
  --h:"Urbanist",ui-sans-serif,system-ui,sans-serif; --b:"Karla",ui-sans-serif,system-ui,sans-serif;
}
body{background:#fff;color:var(--ink);font-size:17.5px}
body::before,body::after{display:none}
p{opacity:1;color:#3B4A42}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.025em;opacity:1;font-variation-settings:normal}
h1{font-size:clamp(2.6rem,6.4vw,4.6rem);line-height:1.02}
h2{font-size:clamp(1.8rem,3.8vw,2.8rem);line-height:1.08}
h3{font-size:1.3rem}
.hl{background:linear-gradient(transparent 62%,var(--sun) 62%);padding:0 .1em} /* highlighter, the only "device" */
.grad-text{background:none;-webkit-text-fill-color:currentColor;color:var(--cell)}
.eyebrow{font-family:var(--b);font-weight:700;color:var(--cell);opacity:1;letter-spacing:.1em;font-size:.76rem}
.eyebrow::before{display:none}
section{padding:clamp(48px,7vw,88px) 0}

.nav{background:rgba(255,255,255,.92);border-bottom:1px solid var(--line)}
.nav .wrap{height:72px}
.logo{font-weight:800;letter-spacing:-.03em}
.logo .mark{background:var(--sun);box-shadow:none;border-radius:10px}
.logo .mark svg{stroke:#0F1A14}
.logo small{opacity:.55;letter-spacing:.1em}
.nav-links{font-weight:600;font-size:.95rem}
.nav-links a{opacity:.75}.nav-links a[aria-current]{opacity:1}
.mobile-menu{background:#fff}
.burger{background:#fff;border-radius:12px}

.btn{border-radius:999px;font-family:var(--b);font-weight:700;padding:16px 26px}
.btn-sun{background:var(--sun);color:var(--ink);box-shadow:none}
.btn-sun::after{display:none}
.btn-sun:hover{background:var(--sun-2);transform:none;box-shadow:0 8px 20px -10px rgba(0,0,0,.35)}
.btn-ghost{background:#fff;border:2px solid var(--ink);color:var(--ink);opacity:1}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-sm{padding:10px 18px}

/* hero */
.hero4{padding:clamp(28px,5vw,64px) 0 0}
.hero4-grid{display:grid;gap:28px;align-items:center}
@media(min-width:960px){.hero4-grid{grid-template-columns:1fr 1.05fr;gap:48px}}
.hero4 h1{margin-bottom:.4em}
.hero4 .lede{font-size:1.15rem;max-width:32em}
.ticks{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-weight:600;color:var(--ink)}
.ticks li::before{content:"";flex:0 0 22px;height:22px;border-radius:50%;background:var(--sun) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1A14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center/14px no-repeat;margin-top:1px}
.hero4 .hero-ctas{margin:0 0 14px}
.hero4 .fine{font-size:.85rem;color:#6B7A72;margin:0}
.photo-card{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.photo-card img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;display:block}
.pill{position:absolute;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 10px 30px -10px rgba(0,0,0,.35);font-size:.85rem;line-height:1.3}
.pill b{display:block;font-family:var(--h);font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.pill.tl{top:18px;left:18px}.pill.br{bottom:18px;right:18px}
.pill .up{color:var(--cell);font-weight:700}

/* trust strip */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:center;padding:18px 16px;font-size:.88rem;color:#3B4A42}
.trust .badge4{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px dashed rgba(15,26,20,.3);border-radius:10px;font-weight:600;color:#6B7A72;background:#fff}
.trust .stars{color:#F2A900;letter-spacing:1px}

/* steps */
.steps{display:grid;gap:16px;counter-reset:s}
@media(min-width:800px){.steps{grid-template-columns:repeat(4,1fr)}}
.stepc{background:var(--bg-2);border-radius:var(--radius-sm);padding:22px}
.stepc .n{width:36px;height:36px;border-radius:50%;background:var(--sun);display:grid;place-items:center;font-family:var(--h);font-weight:800;margin-bottom:14px}
.stepc h4{margin-bottom:6px}
.stepc p{margin:0;font-size:.95rem}
.stepc .when{font-size:.75rem;font-weight:700;color:var(--cell);letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:6px}

/* product cards */
.prod{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.prod img{width:100%;aspect-ratio:4/3;object-fit:cover}
.prod .in{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod .price{font-family:var(--h);font-size:2.2rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.prod .price small{font-family:var(--b);font-size:.8rem;font-weight:500;color:#6B7A72;display:block;margin-top:4px;letter-spacing:0}
.prod .spec{font-size:.92rem;color:#3B4A42;margin:6px 0 10px}
.prod .btn{margin-top:auto}
.prod.popular{border:2px solid var(--ink)}
.prod .tag4{align-self:flex-start;background:var(--sun);border-radius:999px;padding:4px 10px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* sizer card */
.sizer4{background:var(--bg-2);border-radius:var(--radius);padding:clamp(20px,3vw,36px);display:grid;gap:24px}
@media(min-width:900px){.sizer4{grid-template-columns:1fr 1fr;gap:40px}}
.sizer4 .ctrl label{opacity:1;font-weight:600;color:var(--ink)}
.sizer4 .ctrl label b{color:var(--cell)}
input[type=range]{background:linear-gradient(90deg,var(--ink) var(--pct,50%),rgba(15,26,20,.15) var(--pct,50%))}
input[type=range]::-webkit-slider-thumb{border-color:var(--ink)}
input[type=range]::-moz-range-thumb{border-color:var(--ink)}
.seg{background:#fff;border-color:var(--line);border-radius:999px}
.seg button{border-radius:999px;opacity:.6;color:var(--ink)}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff;opacity:1;box-shadow:none}
.toggle{opacity:1;font-weight:600}
.switch{background:rgba(15,26,20,.2)}.switch[aria-checked=true]{background:var(--cell)}
.sizer4 .readout{grid-template-columns:1fr 1fr;gap:10px;margin:0}
.sizer4 .readout div{background:#fff;border:0;border-radius:14px;padding:14px}
.sizer4 .readout small{opacity:.6}
.sizer4 .readout b{font-family:var(--h);font-weight:800;color:var(--ink)}
.sizer4 .readout b.sun{color:var(--ink)}.sizer4 .readout b.cell{color:var(--cell)}
.sizer4 .btn{width:100%;margin-top:12px}
.sizer4 .star-foot{color:#6B7A72;font-size:.78rem;margin:10px 0 0}

/* reviews */
.reviews{display:grid;gap:16px}
@media(min-width:800px){.reviews{grid-template-columns:repeat(3,1fr)}}
.rev{border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px;background:#fff}
.rev .stars{color:#F2A900;letter-spacing:2px;margin-bottom:10px}
.rev p{margin:0 0 12px;color:var(--ink)}
.rev small{color:#6B7A72}

/* areas chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{padding:9px 14px;border-radius:999px;border:1px solid var(--line);font-weight:600;font-size:.92rem;background:#fff}
.chips a:hover{border-color:var(--ink)}

.card::before{display:none}
details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm)}
summary{opacity:1;font-family:var(--b);font-weight:700}
summary::after{border-color:var(--ink)}
.band{background:var(--sun);color:var(--ink);border:0;border-radius:var(--radius);text-align:left}
.band::before{display:none}
.band h2{color:var(--ink)}.band p{color:#3B3200;margin:0 0 22px}
.band .hero-ctas{justify-content:flex-start}
.band .btn-sun{background:var(--ink);color:#fff}
.band .btn-ghost{border-color:var(--ink);background:transparent}
footer{background:var(--bg-2);border-top:1px solid var(--line);color:#3B4A42}
footer h4{color:var(--ink);opacity:1}
footer .logo .mark{background:var(--sun)}
.foot-bottom{color:#6B7A72;opacity:1}
.mobile-cta{background:rgba(255,255,255,.95)}
.form-card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.field input,.field select,.field textarea{background:#fff;border:1px solid rgba(15,26,20,.25);color:var(--ink);border-radius:12px}
.field input:focus{border-color:var(--ink)}
.field select option{background:#fff}
.form-ok{background:var(--cell-soft);border-color:var(--cell)}
.strip{border:0;background:var(--bg-2)}
.strip b{font-family:var(--h);font-weight:800;color:var(--ink)}
.strip p{color:#3B4A42}
.page-hero p{color:#3B4A42}
.local-facts div{background:var(--bg-2);border:0;border-radius:14px}
.local-facts b{color:var(--ink)}
.map{border-radius:var(--radius);border-color:var(--line)}
.map iframe{filter:none}
.region-h{color:var(--cell);opacity:1;font-weight:700}
.crumbs{color:#6B7A72;opacity:1}
.pkg .price{color:var(--ink)}.pkg .spec b{color:var(--ink)}
.timeline .step{background:var(--bg-2);border:0;border-radius:var(--radius-sm)}
.step .when{color:var(--cell)}
.split li{color:var(--ink)}
.card p{color:#3B4A42}
.prose h2,.prose h3{color:var(--ink)}
.reveal{opacity:1;transform:none}

.vatbar{background:var(--ink);color:#fff}.vatbar a{color:var(--sun)}.progress i.on{background:var(--cell)}
@media(min-width:900px){.nav-links{font-size:.88rem;gap:16px}}.nav-cta .btn{white-space:nowrap}