@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/dmsans-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/dmsans-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/dmsans-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/dmsans-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/sora-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/sora-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

/* ===================================================================
   MUFT BIJLI MP - public website
   Deep forest green and Malwa orange on a warm cream page.
   Rounded, card-based layout: an arched hero photograph (a nod to the
   arches of Indore fort), floating panels, pill buttons and generous
   white space. Mobile first, no framework, nothing loaded but fonts.
   =================================================================== */
:root{
  /* Muft Bijli MP: deep indigo-navy where the reference build used green, and
     the warmer Malwa orange. Website > Theme overrides --g, --g-900 and --sun. */
  --g-950:#021026; --g-900:#010F26; --g-800:#01173A; --g-700:#011E4C; --g:#012967; --g-600:#023B8C;
  --g-500:#0A4FB0; --g-200:#BDCFE9; --g-100:#DCE7F5; --g-50:#EFF3FA;
  --sun:#F7941D; --sun-600:#DD7407; --sun-400:#FFAE52; --sun-200:#FFD9AA; --sun-100:#FFECD2; --sun-50:#FFF6EA;
  /* The leaf in the logo, which the palette had nothing to answer with. It is
     the third brand colour, not a decoration: it carries the savings figures,
     the ticks and anything that means "this is the part that pays you back". */
  --leaf-900:#0C3F18; --leaf-700:#19702A; --leaf:#2E9B3C; --leaf-500:#46B04C;
  --leaf-200:#BFE6C2; --leaf-100:#DBF2DC; --leaf-50:#EEF9EF;
  --cream:#FAF8F3; --sand:#F1ECE3;

  /* names the page templates use inline */
  --brand:var(--g); --brand-50:var(--g-50); --brand-700:var(--g-700);
  --ok:var(--leaf); --ok-50:var(--leaf-50);

  --ink:#0C1526; --ink-2:#39445C; --ink-3:#6A7488; --ink-4:#9BA3B4;
  --line:#E6E1D7; --line-2:#F0EBE2;
  --bg:#FFFFFF;

  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:34px; --maxw:1220px;
  --shadow-sm:0 1px 3px rgba(2,19,47,.06);
  --shadow:0 14px 38px rgba(2,19,47,.09);
  --shadow-lg:0 30px 70px rgba(2,19,47,.18);
  /* Self-hosted, so the site never waits on Google and the CSP stays closed. */
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Sora',var(--font);
  --navh:74px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--g);text-decoration:none}
svg{width:18px;height:18px;flex:0 0 auto}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.02em;line-height:1.1;color:var(--ink);font-weight:700}
h1{font-size:clamp(2.4rem,5.2vw,4.3rem);font-weight:800}
h2{font-size:clamp(1.85rem,3.4vw,2.9rem)}
h3{font-size:1.2rem;line-height:1.3;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sec{padding:100px 0}
.sec-sm{padding:56px 0}
.soft{background:var(--cream)}
.sand{background:var(--sand)}
.dark{background:var(--g-900);color:#C3D2E6}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark p{color:#AFC2DC}
.muted{color:var(--ink-3)}
.small{font-size:13.6px}
::selection{background:rgba(242,140,27,.25)}

/* -------------------------------------------------------- small labels */
.kicker,.chapter,.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sun-600);margin-bottom:14px;
  background:var(--sun-50);border:1px solid var(--sun-100);padding:6px 14px;border-radius:999px}
.kicker::before,.chapter::before,.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sun)}
.dark .kicker,.cta-band .chapter,.on-dark .kicker{background:rgba(242,140,27,.14);border-color:rgba(242,140,27,.3);color:var(--sun-400)}
.numeral{display:none}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------------------------------------------------------------- top strip */
.topbar-thin{background:var(--g-950);color:#A8BDD9;font-size:13px}
.topbar-thin .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;min-height:40px}
.topbar-thin a{color:#D3DEEF}
.topbar-thin a:hover{color:#fff}
.topbar-thin .tb-left,.topbar-thin .tb-right{display:flex;gap:20px;align-items:center}
.topbar-thin svg{width:14px;height:14px;vertical-align:-2px;margin-right:6px;color:var(--sun)}
.topbar-thin .tb-pill{background:var(--sun);color:#fff;border-radius:999px;padding:3px 12px;font-weight:700;font-size:12px}

/* ------------------------------------------------------------------ header */
header.site{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line-2);
  transition:box-shadow .25s}
header.site.scrolled{box-shadow:0 8px 30px rgba(2,19,47,.08)}
.nav{display:flex;align-items:center;gap:14px;height:var(--navh);min-width:0;max-width:1400px}
/* The menu is what gives way first when the row is short, and it may not run
   under the buttons beside it. */
.menu{flex:0 1 auto}
.nav-cta{flex:0 0 auto}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;min-width:0}
.brand img{max-height:52px;width:auto}
.brand-mark{width:42px;height:42px;border-radius:12px;background:var(--g);display:grid;place-items:center;color:var(--sun)}
.brand-mark svg{width:22px;height:22px}
.brand b{display:block;font-family:var(--display);font-size:18px;font-weight:800;color:var(--g);line-height:1.1}
.brand span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sun-600);font-weight:700}
.menu{display:flex;gap:2px;margin-left:auto;align-items:center;min-width:0}
.menu .nav-cta{display:none}
.menu>a{padding:9px 12px;border-radius:999px;color:var(--ink-2);font-weight:600;font-size:14.5px;white-space:nowrap;
  transition:background .18s,color .18s}
.menu>a:hover{background:var(--g-50);color:var(--g)}
.menu>a.on{background:var(--g);color:#fff}
.nav-cta{display:flex;gap:8px;align-items:center;flex:0 0 auto;margin-left:10px}
.call-chip{display:flex;align-items:center;gap:10px;color:var(--ink);padding-right:6px}
.call-chip i{width:40px;height:40px;border-radius:50%;background:var(--sun-50);color:var(--sun-600);display:grid;place-items:center;
  border:1px solid var(--sun-100)}
.call-chip small{display:block;font-size:11px;color:var(--ink-3);line-height:1.2}
.call-chip b{font-family:var(--display);font-size:15px;line-height:1.2;color:var(--g)}
.call-chip span{display:none}.call-chip{padding-right:0}
@media (max-width:1400px){.menu>a{padding:8px 10px;font-size:14px}.menu{gap:0}}
@media (max-width:1680px){.menu>a{padding:8px 9px;font-size:14px}.nav{gap:10px}.nav-cta{margin-left:8px}}
@media (max-width:1520px){.menu>a{padding:7px 7px;font-size:13.6px}.call-chip{display:none}}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;
  align-items:center;justify-content:center;cursor:pointer;margin-left:auto}
.burger svg{width:22px;height:22px;color:var(--g)}

/* ----------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:999px;
  font-weight:700;font-size:15px;border:1.5px solid transparent;cursor:pointer;font-family:inherit;
  transition:background .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s;white-space:nowrap;line-height:1.2}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--g);color:#fff}
.btn-primary:hover{background:var(--g-800);color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px rgba(1,41,103,.25)}
.btn-accent{background:var(--sun);color:#fff}
.btn-accent:hover{background:var(--sun-600);color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px rgba(242,140,27,.32)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--g);color:var(--g)}
.btn-light{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.35)}
.btn-light:hover{background:#fff;color:var(--g)}
.btn-wa{background:#1FAF55;color:#fff}
.btn-wa:hover{background:#178F45;color:#fff;transform:translateY(-2px)}
.btn-sm{padding:9px 17px;font-size:14px}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-block{width:100%}

/* =================================================================== HOME HERO */
.hero{position:relative;background:var(--g-900);color:#CCD9EA;overflow:hidden;padding:70px 0 120px}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 520px at 88% 12%,rgba(242,140,27,.22),transparent 60%),
             radial-gradient(700px 500px at 0% 100%,rgba(27,122,94,.35),transparent 65%)}
.hero .dots{position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1.4px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 55%);mask-image:linear-gradient(90deg,#000,transparent 55%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#FCD3A1}
.hero h1{color:#fff;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--sun);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.02em;height:.14em;border-radius:99px;
  background:linear-gradient(90deg,var(--sun),rgba(242,140,27,0))}
@media (max-width:520px){.hero h1 em{white-space:normal}}
.hero p.lead{font-size:18.5px;color:#C3D2E6;max-width:32em;margin-bottom:30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.hero-ticks{display:flex;gap:10px 22px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.hero-ticks li{display:flex;gap:8px;align-items:center;font-size:14.5px;color:#DCEBE4;font-weight:600}
.hero-ticks li i{width:22px;height:22px;border-radius:50%;background:rgba(242,140,27,.18);color:var(--sun);display:grid;place-items:center}
.hero-ticks li svg{width:13px;height:13px}

/* the arched photograph */
.hero-visual{position:relative;padding:0 0 40px 30px}
.arch{position:relative;border-radius:260px 260px 28px 28px;overflow:hidden;aspect-ratio:4/4.6;
  border:8px solid rgba(255,255,255,.06);box-shadow:var(--shadow-lg);background:var(--g-700)}
.arch img{width:100%;height:100%;object-fit:cover;object-position:60% 55%}
.arch::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,19,47,0) 55%,rgba(2,19,47,.55))}
.sun-disc{position:absolute;right:-18px;top:6%;width:120px;height:120px;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 38% 36%,#FFD08A,var(--sun) 60%,var(--sun-600));box-shadow:0 0 0 14px rgba(242,140,27,.12),0 0 90px rgba(242,140,27,.5);
  animation:sunFloat 7s ease-in-out infinite}
@keyframes sunFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.float-badge{position:absolute;left:-26px;top:22%;z-index:4;background:#fff;border-radius:18px;padding:12px 16px;
  box-shadow:var(--shadow);display:flex;gap:12px;align-items:center;color:var(--ink)}
.float-badge i{width:42px;height:42px;border-radius:12px;background:var(--g-50);color:var(--g);display:grid;place-items:center}
.float-badge b{display:block;font-family:var(--display);font-size:18px;color:var(--g);line-height:1.1}
.float-badge span{font-size:12px;color:var(--ink-3)}

/* the estimate card, overlapping the arch */
.hero-card{position:absolute;left:-40px;bottom:0;z-index:5;width:min(360px,92%);background:#fff;color:var(--ink);
  border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-lg);border-top:5px solid var(--sun)}
.hero-card h3{font-size:18px;margin-bottom:3px}
.hero-card p{font-size:13.4px;color:var(--ink-3);margin-bottom:14px}
.mini-calc .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini-calc label{font-size:12px;color:var(--ink-3);font-weight:700;display:block;margin-bottom:5px}
.mini-calc input,.mini-calc select{width:100%;height:44px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--cream);color:var(--ink);padding:0 12px;font-family:inherit;font-size:15px;outline:none;font-weight:600}
.mini-calc input:focus,.mini-calc select:focus{border-color:var(--g);background:#fff;box-shadow:0 0 0 4px rgba(1,41,103,.12)}
.mini-out{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.mini-out div{background:var(--g-50);border-radius:12px;padding:10px 6px;text-align:center}
.mini-out b{display:block;font-family:var(--display);font-size:17px;color:var(--g)}
.mini-out span{font-size:10.5px;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.trust{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.trust span{background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:12px;color:var(--ink-2);font-weight:600}

/* key facts, pulled up over the hero's bottom edge */
.kpi-wrap{position:relative;z-index:6;margin-top:-64px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);
  border:1px solid var(--line-2);overflow:hidden}
.kpis>div{padding:26px 24px;display:flex;gap:14px;align-items:center;border-right:1px solid var(--line-2);min-width:0}
.kpis>div:last-child{border-right:0}
.kpis i{width:50px;height:50px;border-radius:14px;flex:0 0 50px;display:grid;place-items:center;background:var(--sun-50);color:var(--sun-600)}
.kpis>div:nth-child(even) i{background:var(--g-50);color:var(--g)}
.kpis i svg{width:24px;height:24px}
.kpis b{display:block;font-family:var(--display);font-size:24px;font-weight:800;color:var(--ink);line-height:1.1}
.kpis span{font-size:13.2px;color:var(--ink-3);line-height:1.35;display:block}

/* ------------------------------------------------------- section headings */
.sec-head{max-width:720px;margin:0 auto 52px;text-align:center}
.sec-head.left{margin-left:0;text-align:left}
.sec-head p{color:var(--ink-3);font-size:17px;margin:16px 0 0}
.sec-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.sec-row .sec-head{margin:0}

/* ------------------------------------------------------------ Muft Bijli MP numbers */
.rates{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rate{background:#fff;border-radius:var(--r);padding:22px;border:1px solid var(--line);position:relative;overflow:hidden}
.rate::after{content:"";position:absolute;right:-26px;top:-26px;width:80px;height:80px;border-radius:50%;background:var(--sun-50)}
.rate small{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);position:relative;z-index:1}
.rate b{display:block;font-family:var(--display);font-size:26px;color:var(--g);margin-top:6px;position:relative;z-index:1;line-height:1.15}
.rate span{font-size:13px;color:var(--ink-3);position:relative;z-index:1}

/* ------------------------------------------------------------------ cards */
.cards{display:grid;gap:22px}
.cards>*,.split>*,.calc-wrap>*,.foot-grid>*,.stat-band>*{min-width:0}
.c1{grid-template-columns:1fr}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;padding:30px 28px;border-radius:var(--r-lg);border:1px solid var(--line);position:relative;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s,border-color .25s;display:block;color:inherit}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.soft .card,.sand .card{border-color:transparent;box-shadow:var(--shadow-sm)}
.card .ico{width:54px;height:54px;border-radius:16px;background:var(--g-50);color:var(--g);display:grid;place-items:center;
  margin-bottom:20px;transition:background .25s,color .25s,transform .35s cubic-bezier(.34,1.3,.5,1)}
.card:hover .ico{background:var(--sun);color:#fff;transform:rotate(-6deg)}
.card .ico svg{width:25px;height:25px}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-3);font-size:15px;margin:0}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:700;font-size:14.4px;color:var(--g)}
.card .more svg{width:15px;height:15px;transition:transform .18s}
.card:hover .more svg{transform:translateX(4px)}
.card .idx{position:absolute;right:24px;top:22px;font-family:var(--display);font-weight:800;font-size:40px;color:var(--line-2);line-height:1}
.feat-list{list-style:none;padding:0;margin:16px 0 0}
.feat-list li{position:relative;padding-left:28px;margin-bottom:10px;font-size:15px;color:var(--ink-2)}
.feat-list li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--leaf-50)}
.feat-list li::after{content:"";position:absolute;left:6px;top:8px;width:6px;height:3.5px;border-left:2px solid var(--leaf);
  border-bottom:2px solid var(--leaf);transform:rotate(-45deg)}

/* service tiles on the home page: one large photo tile + small ones */
.svc-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-auto-rows:minmax(230px,auto);gap:20px}
.svc-feature{grid-row:span 2;border-radius:var(--r-lg);overflow:hidden;position:relative;color:#fff;display:flex;
  flex-direction:column;justify-content:flex-end;padding:30px;min-height:480px;background:var(--g-800)}
.svc-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.svc-feature::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(2,19,47,.05) 30%,rgba(2,19,47,.92))}
.svc-feature>*:not(img){position:relative;z-index:2}
.svc-feature:hover img{transform:scale(1.05)}
.svc-feature h3{color:#fff;font-size:1.6rem;margin-bottom:8px}
.svc-feature p{color:#D3E4DC;margin-bottom:16px}
.svc-feature .price-tag{align-self:flex-start;margin-bottom:14px}

/* ------------------------------------------------------------------ process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative;counter-reset:st}
.steps::before{content:"";position:absolute;left:10%;right:10%;top:34px;border-top:2px dashed var(--sun-200)}
.step{text-align:center;position:relative;padding:0 8px}
.step .no{width:68px;height:68px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;background:#fff;
  border:2px solid var(--sun);color:var(--sun-600);font-family:var(--display);font-size:24px;font-weight:800;position:relative;z-index:1;
  box-shadow:0 0 0 8px var(--cream)}
.step:hover .no{background:var(--sun);color:#fff}
.step h3{font-size:18px;margin-bottom:8px}
.step p{font-size:14.8px;color:var(--ink-3);margin:0}

/* -------------------------------------------------------------- why us split */
.why-pic{position:relative}
.why-pic .pic{border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 120px}
.why-pic .pic img{aspect-ratio:5/5.2}
.why-badge{position:absolute;right:-14px;bottom:34px;background:var(--sun);color:#fff;border-radius:22px;padding:18px 22px;
  box-shadow:0 18px 40px rgba(242,140,27,.35);max-width:220px}
.why-badge b{display:block;font-family:var(--display);font-size:30px;line-height:1}
.why-badge span{font-size:13.5px;font-weight:600;opacity:.95}
.why-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;margin-top:28px}
.why-list>div{display:flex;gap:14px}
.why-list i{flex:0 0 44px;height:44px;border-radius:13px;background:var(--g);color:var(--sun);display:grid;place-items:center}
.why-list h3{font-size:16.5px;margin-bottom:4px}
.why-list p{font-size:14.2px;color:var(--ink-3);margin:0;line-height:1.55}

/* ----------------------------------------------------------- subsidy band */
.subsidy{background:linear-gradient(120deg,var(--sun) 0%,#F7A541 100%);border-radius:var(--r-xl);padding:52px;color:#fff;
  display:grid;grid-template-columns:1fr 1.25fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.subsidy::before{content:"";position:absolute;left:-80px;bottom:-120px;width:320px;height:320px;border-radius:50%;
  border:50px solid rgba(255,255,255,.12)}
.subsidy>*{position:relative;z-index:1}
.subsidy h2{color:#fff}
.subsidy p{color:#FFF3E3;margin:12px 0 0}
.slabs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.slab{background:#fff;border-radius:20px;padding:22px 18px;text-align:center;color:var(--ink)}
.slab small{display:block;font-weight:700;color:var(--ink-3);font-size:13px}
.slab b{display:block;font-family:var(--display);font-size:28px;color:var(--g);margin:4px 0}
.slab span{font-size:12.4px;color:var(--ink-3)}

/* ------------------------------------------------------------------ stats */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat-band div{background:#fff;border-radius:var(--r);padding:24px;border:1px solid var(--line)}
.stat-band b{display:block;font-family:var(--display);font-size:22px;color:var(--g);margin-bottom:4px;font-weight:700}
.stat-band span{font-size:13.6px;color:var(--ink-3);line-height:1.5;display:block}

/* ---------------------------------------------------------------- projects */
.proj{border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line);display:block;color:inherit;
  transition:transform .25s,box-shadow .25s}
.proj:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.proj .ph{aspect-ratio:16/11;background:var(--g-50);position:relative;overflow:hidden}
.proj .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.proj:hover .ph img{transform:scale(1.06)}
.proj .ph .kw{position:absolute;left:14px;top:14px;background:var(--sun);color:#fff;border-radius:999px;padding:5px 13px;
  font-weight:800;font-size:13px;font-family:var(--display)}
.proj .bd{padding:20px 22px 24px}
.proj h3{font-size:17px;margin-bottom:5px}
.proj .meta{font-size:13.2px;color:var(--ink-3);font-weight:600}
.proj p{font-size:14.4px;color:var(--ink-3);margin:10px 0 0}

/* ------------------------------------------------------------------ pricing */
.price-tag{display:inline-block;background:var(--sun-50);border:1px solid var(--sun-200);color:var(--sun-600);
  padding:5px 13px;border-radius:999px;font-weight:800;font-size:13px}

/* -------------------------------------------------------------- calculator */
.calc-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:30px;align-items:start}
.calc-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow-sm)}
.calc-box .field{margin-bottom:18px}
.calc-box label{display:block;font-size:13.6px;font-weight:700;color:var(--ink-2);margin-bottom:7px}
.calc-box input,.calc-box select{width:100%;height:52px;border:1.5px solid var(--line);border-radius:14px;background:var(--cream);
  padding:0 16px;font-family:inherit;font-size:16px;color:var(--ink);outline:none;font-weight:600}
.calc-box input:focus,.calc-box select:focus{border-color:var(--g);background:#fff;box-shadow:0 0 0 4px rgba(1,41,103,.12)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{display:block;margin:0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;text-align:center;padding:12px 10px;border:1.5px solid var(--line);border-radius:14px;
  font-weight:700;font-size:14.6px;color:var(--ink-2);cursor:pointer;transition:.15s;background:#fff}
.seg input:checked + span{border-color:var(--g);background:var(--g);color:#fff}
.result{background:var(--g-900);border-radius:var(--r-lg);padding:32px;color:#CCD9EA;position:relative;overflow:hidden}
.result::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:rgba(242,140,27,.18)}
.result>*{position:relative;z-index:1}
.result h3{font-size:20px;margin-bottom:6px;color:#fff}
.result .sub{color:#A8BDD9;font-size:14px;margin-bottom:22px}
.result .muted{color:#AFC2DC}
.res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.res-grid>*{min-width:0}
.res-grid.res-3{grid-template-columns:repeat(3,1fr)}
.res-grid div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px 18px}
.res-grid div div{background:none;border:0;padding:0;border-radius:0}
.res-grid .lb{font-size:11px;color:#A8BDD9;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.res-grid .vl{font-family:var(--display);font-size:25px;margin-top:4px;color:#fff;font-weight:700}
.res-grid .vl.amber{color:var(--sun-400)}
.res-grid .vl.green{color:#7FD8B0}
.res-note{font-size:13px;color:#A8BDD9;margin-top:18px;line-height:1.6}

/* ------------------------------------------------------------- testimonial */
.quote{background:#fff;border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-sm);position:relative}
.quote::before{content:"\201C";position:absolute;right:24px;top:6px;font-family:Georgia,serif;font-size:90px;line-height:1;color:var(--sun-100)}
.stars{color:var(--sun);font-size:16px;letter-spacing:3px;margin-bottom:12px}
.quote p{font-size:15.4px;color:var(--ink-2);line-height:1.7}
.quote .by{display:flex;align-items:center;gap:12px;margin-top:18px}
.quote .av{width:44px;height:44px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:14px;font-family:var(--display)}
.quote .by b{display:block;font-size:15px}
.quote .by span{font-size:13px;color:var(--ink-3)}

/* ---------------------------------------------------------------------- faq */
.faq-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}
.faq-aside{position:sticky;top:calc(var(--navh) + 24px)}
.help-card{margin-top:26px;background:var(--g);border-radius:var(--r-lg);padding:26px;color:#CCD9EA}
.help-card h3{color:#fff;margin-bottom:6px}
.help-card p{font-size:14.6px;margin-bottom:16px}
.faq{background:#fff;border:1px solid var(--line);border-radius:18px;margin-bottom:12px;transition:border-color .2s,box-shadow .2s}
.faq[open]{border-color:transparent;box-shadow:var(--shadow)}
.faq summary{padding:20px 22px;font-weight:700;font-size:16.4px;cursor:pointer;list-style:none;display:flex;
  gap:16px;align-items:center;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;flex:0 0 32px;height:32px;border-radius:50%;background:var(--g-50);color:var(--g);
  display:grid;place-items:center;font-size:20px;font-weight:600;line-height:1}
.faq[open] summary::after{content:"\2212";background:var(--sun);color:#fff}
.faq .ans{padding:0 22px 22px;color:var(--ink-3);font-size:15.2px}

/* --------------------------------------------------------------------- form */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-sm)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.fgrid .full{grid-column:1/-1}
.field{margin-bottom:18px}
/* Nothing on this website is black. A form control with no colour of its own
   would fall back to the browser's black, so the text colour is set once here
   for every control on every page. */
input,select,textarea,button{color:var(--ink)}
.field label{display:block;font-size:13.6px;font-weight:700;color:var(--ink-2);margin-bottom:7px}
.field .req{color:#DC2626}
.field input,.field select,.field textarea{width:100%;height:50px;border:1.5px solid var(--line);border-radius:14px;
  padding:0 15px;font-family:inherit;font-size:15.4px;color:var(--ink);outline:none;background:var(--cream)}
.field textarea{height:auto;min-height:120px;padding:13px 15px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--g);background:#fff;box-shadow:0 0 0 4px rgba(1,41,103,.12)}
.field .hint{font-size:12.8px;color:var(--ink-3);margin-top:6px}
.alert{padding:14px 16px;border-radius:14px;font-size:14.8px;margin-bottom:22px;display:flex;gap:10px;line-height:1.55}
.alert svg{width:19px;height:19px;flex:0 0 19px;margin-top:2px}
.alert-ok{background:var(--g-50);border:1px solid var(--g-100);color:var(--g-700)}
.alert-bad{background:#FEF4F4;border:1px solid #F3CDCD;color:#98211F}
.field input.bad,.field select.bad,.field textarea.bad,
.calc-box input.bad,.calc-box select.bad,
.mini-calc input.bad,.mini-calc select.bad{border-color:#DC2626;background:#FEF6F6}
.fmsg{font-size:12.6px;color:#B91C1C;margin-top:6px;display:flex;gap:6px;align-items:flex-start;line-height:1.45}
.fmsg::before{content:"!";flex:0 0 15px;width:15px;height:15px;border-radius:50%;background:#DC2626;color:#fff;
  font-size:10px;font-weight:700;display:grid;place-items:center;margin-top:1px}

/* --------------------------------------------------------------------- misc */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.pic{border-radius:var(--r-lg);overflow:hidden;background:var(--g-50)}
.pic img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card-photo{border-radius:16px;overflow:hidden;background:var(--g-50);margin-bottom:18px;max-height:290px}
.card-photo img{display:block;width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.card:hover .card-photo img{transform:scale(1.04)}
.card-photo.is-empty{display:grid;place-items:center;aspect-ratio:16/10;max-height:290px;
  background:linear-gradient(140deg,var(--g-50),var(--sun-50));border:2px dashed var(--g-100)}
.card-photo.is-empty svg{width:36px;height:36px;color:var(--g);opacity:.45}

.cta-band{background:var(--g);border-radius:var(--r-xl);padding:54px 50px;color:#fff;
  display:grid;grid-template-columns:1.4fr auto;gap:34px;align-items:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;
  background:url('../img/photos/array-sky.jpg') center 58%/cover no-repeat;opacity:.16;mix-blend-mode:luminosity}
.cta-band::after{content:"";position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,var(--sun) 0,rgba(242,140,27,.35) 45%,transparent 70%);opacity:.6}
.cta-band>*{position:relative;z-index:2}
.cta-band h2{color:#fff;margin-bottom:10px}
.cta-band p{color:#D3DEEF;margin:0;max-width:44em}
.cta-band .acts{display:flex;gap:10px;flex-wrap:wrap}
.logos{display:flex;gap:30px;flex-wrap:wrap;align-items:center;justify-content:center}
.logos span{font-family:var(--display);font-weight:700;color:var(--ink-4);font-size:18px}

/* -------------------------------------------------------- inner page banner */
.breadcrumbs{background:var(--g-900);padding:84px 0 96px;position:relative;overflow:hidden;text-align:center;
  border-radius:0 0 var(--r-xl) var(--r-xl)}
.breadcrumbs::after{content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,140,27,.55),rgba(242,140,27,0) 70%);pointer-events:none}
.breadcrumbs>.wrap{position:relative;z-index:2}
.breadcrumbs h1{font-size:clamp(2.1rem,4.4vw,3.4rem);margin:0 auto 14px;color:#fff;max-width:18em}
.breadcrumbs p{color:#C3D2E6;font-size:17.5px;max-width:46em;margin:0 auto;line-height:1.6}
.breadcrumbs.has-photo{background-position:center 60%;background-size:cover}
.breadcrumbs.has-photo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,26,17,.88) 0%,rgba(2,19,47,.82) 60%,rgba(2,19,47,.92) 100%)}
.crumb-links{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:600;color:#D3DEEF;margin-bottom:18px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 16px}
.crumb-links a{color:var(--sun-400)}
.crumb-links a:hover{color:#fff}

/* ----------------------------------------------------------------- footer */
.pre-foot{position:relative;z-index:2;margin-bottom:-70px}
.pre-foot .inner{background:var(--sun);border-radius:var(--r-xl);padding:34px 40px;display:flex;gap:24px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;color:#fff;box-shadow:0 24px 50px rgba(242,140,27,.28)}
.pre-foot h3{color:#fff;font-size:clamp(1.3rem,2.4vw,1.8rem)}
.pre-foot p{margin:4px 0 0;color:#FFF3E3}
.pre-foot .acts{display:flex;gap:10px;flex-wrap:wrap}
.pre-foot .btn-primary{background:var(--g-900)}
footer.site{background:var(--g-950);color:#A8BDD9;padding:130px 0 0}
footer.site h4{color:#fff;font-family:var(--display);font-size:17px;margin-bottom:18px;font-weight:600}
footer.site a{color:#A8BDD9;font-size:14.6px}
footer.site a:hover{color:var(--sun-400)}
footer.site a.btn,footer.site a.btn:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:50px}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:11px}
.foot-grid li a::before{content:"\203A";margin-right:8px;color:var(--sun)}
.foot-brand p{font-size:14.4px;color:#8FB0A1;margin-top:18px;line-height:1.7}
.foot-brand .trust span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#D3DEEF}
.brand-foot img{max-height:70px;width:auto}
.foot-contact div{display:flex;gap:12px;margin-bottom:15px;font-size:14.4px;align-items:flex-start}
.foot-contact svg{width:17px;height:17px;color:var(--sun);flex:0 0 17px;margin-top:3px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding:22px 0;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:13.2px;color:#7FA090}
.foot-bottom .credit{text-align:center}
.foot-bottom .credit a{color:#D3DEEF;font-weight:700;font-size:13.2px}
.foot-bottom .credit a:hover{color:var(--sun-400)}
@media (max-width:860px){.foot-bottom{justify-content:center;text-align:center}.foot-bottom .credit{order:3;width:100%}}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:70;width:56px;height:56px;border-radius:50%;
  background:#1FAF55;display:grid;place-items:center;box-shadow:0 10px 26px rgba(31,175,85,.4)}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #1FAF55;animation:waPing 2.4s ease-out infinite}
@keyframes waPing{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.wa-float svg{width:28px;height:28px;color:#fff}
.to-top{position:fixed;right:24px;bottom:86px;z-index:69;width:44px;height:44px;border-radius:50%;background:var(--g);color:#fff;
  display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;transform:translateY(10px);border:0;cursor:pointer}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top svg{transform:rotate(-90deg)}

/* ---------------------------------------------------------------- marquee */
.marquee{overflow:hidden;background:var(--g);padding:16px 0}
.marquee-track{display:flex;width:max-content;animation:marq 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;gap:14px;padding:0 26px;font-size:15px;color:#fff;
  white-space:nowrap;font-weight:700;font-family:var(--display);letter-spacing:.01em}
.marquee-track span::after{content:"\2600";color:var(--sun);font-size:16px}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =================================================================== MOTION
   Nothing is hidden until motion.js has marked the document, so a blocked
   script leaves a complete page. Everything switches off for reduced motion. */
#progBar{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--sun),var(--sun-400));
  transform:scaleX(0);transform-origin:left;z-index:90;pointer-events:none}
.js .reveal,.js .stagger > *{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js .reveal.in,.js .stagger > *.in{opacity:1;transform:none}
.js .hero .hero-copy>*{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
.js.entered .hero .hero-copy>*{opacity:1;transform:none}
.js.entered .hero .hero-copy>*:nth-child(2){transition-delay:.08s}
.js.entered .hero .hero-copy>*:nth-child(3){transition-delay:.16s}
.js.entered .hero .hero-copy>*:nth-child(4){transition-delay:.24s}
.js.entered .hero .hero-copy>*:nth-child(5){transition-delay:.32s}
.js .hero-visual{opacity:0;transform:translateX(30px);transition:opacity 1s ease .15s,transform 1s cubic-bezier(.22,.61,.36,1) .15s}
.js.entered .hero-visual{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .stagger > *,.js .hero .hero-copy>*,.js .hero-visual{opacity:1;transform:none;transition:none}
  .marquee-track,.sun-disc,.wa-float::before{animation:none}
  html{scroll-behavior:auto}
}

/* ============================================================== RESPONSIVE */
/* Below this the row is put away behind the burger. Tightened as above, the nine
   items measure about 710 px, which with the logo and the two buttons leaves
   roughly 70 px of air at 1,260 px - enough that a wider text rendering on
   another machine still cannot push the last item under the Free quote button,
   which is what it was doing. */
@media (max-width:1259px){
  .menu{position:fixed;inset:var(--navh) 0 auto;background:#fff;flex-direction:column;align-items:stretch;gap:4px;
    padding:14px 22px 22px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none;
    max-height:calc(100vh - var(--navh));overflow-y:auto}
  body.menu-open .menu{display:flex}
  .menu>a{padding:13px 16px;border-radius:14px;font-size:16px}
  .nav-cta{margin-left:auto;order:2}
  .call-chip{display:none}
  .burger{display:inline-flex;margin-left:10px;order:3}
  .menu .nav-cta{display:flex;margin:12px 0 0;width:100%;flex-direction:column;gap:10px}
  .menu .nav-cta .btn{width:100%;height:48px}
}
/* Same treatment at any width, for a menu that has simply grown too long. The
   class is set by the header script when it measures an overflow. */
body.nav-packed .menu{position:fixed;inset:var(--navh) 0 auto;background:#fff;flex-direction:column;
  align-items:stretch;gap:4px;padding:14px 22px 22px;border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);display:none;max-height:calc(100vh - var(--navh));overflow-y:auto}
body.nav-packed.menu-open .menu{display:flex}
body.nav-packed .menu>a{padding:13px 16px;border-radius:14px;font-size:16px}
body.nav-packed .call-chip{display:none}
body.nav-packed .burger{display:inline-flex;margin-left:10px;order:3}
body.nav-packed .nav-cta{margin-left:auto;order:2}
body.nav-packed .menu .nav-cta{display:flex;margin:12px 0 0;width:100%;flex-direction:column;gap:10px}
body.nav-packed .menu .nav-cta .btn{width:100%;height:48px}
@media (max-width:1024px){
  .hero-grid,.calc-wrap,.split,.faq-split,.subsidy{grid-template-columns:1fr;gap:40px}
  .hero{padding:56px 0 110px}
  .hero-visual{max-width:520px;margin:0 auto;width:100%;padding:0 0 0 0}
  .hero-card{position:relative;left:auto;bottom:auto;width:100%;margin-top:-80px;margin-left:auto;margin-right:auto;max-width:440px}
  .float-badge{left:-10px}
  .c4,.kpis,.rates,.steps{grid-template-columns:repeat(2,1fr)}
  .kpis>div:nth-child(2){border-right:0}
  .kpis>div:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
  .steps::before{display:none}
  .steps{row-gap:36px}
  .svc-grid{grid-template-columns:1fr 1fr}
  .svc-feature{grid-column:1/-1;grid-row:auto;min-height:380px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .cta-band{grid-template-columns:1fr;padding:40px 32px}
  .faq-aside{position:static}
  .subsidy{padding:40px 32px}
  .wrap[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .wrap[style*="grid-template-columns"]>*{min-width:0}
}
@media (max-width:860px){
  .c3,.c2,.stat-band{grid-template-columns:1fr 1fr}
  .sec{padding:72px 0}
  .topbar-thin .tb-left{display:none}
  .topbar-thin .wrap{justify-content:center}
  .why-list{grid-template-columns:1fr}
}
@media (max-width:600px){
  :root{--navh:66px}
  .brand img{max-height:42px}
  .nav-cta{display:none}
  .burger{margin-left:auto}
  .c3,.c2,.c4,.stat-band,.fgrid,.rates,.svc-grid,.slabs{grid-template-columns:1fr}
  .res-grid,.res-grid.res-3{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:1fr}
  .kpis>div{border-right:0;border-bottom:1px solid var(--line-2)}
  .kpis>div:last-child{border-bottom:0}
  .steps{grid-template-columns:1fr}
  .mini-calc .row2{grid-template-columns:1fr}
  .wrap{padding:0 16px}
  .card{padding:24px 22px}
  .cta-band,.subsidy{padding:30px 22px}
  .breadcrumbs{padding:60px 0 70px}
  .topbar-thin .tb-right a[href^="mailto"]{display:none}
  .why-badge{right:10px}
  .pre-foot .inner{padding:28px 22px}
  .hero-card{margin-top:-60px}
  .float-badge{display:none}
  .sun-disc{width:84px;height:84px;right:6px}
}

/* long e-mail addresses wrap instead of pushing the page sideways on a phone */
.foot-contact span,.form-card a[href^="mailto"]{min-width:0;overflow-wrap:anywhere}

/* ========================================================================
   BRAND PARTNERS - one row, logos only
   A maker's logo is the thing a buyer stops at, so the row is given space
   and nothing else: no card, no border, no name under it. Each logo is
   greyed back until the eye reaches it, which keeps eight different brand
   palettes from fighting each other and the page.
   ===================================================================== */
.brandrow{padding:56px 0 48px;background:var(--cream);border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2)}
.brandrow-head{text-align:center;margin-bottom:30px}
.brandrow-head p{color:var(--ink-3);font-size:15.6px;margin:12px auto 0;max-width:620px}
.brandrow-strip{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#fff 6%,#fff 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#fff 6%,#fff 94%,transparent)}
.brandrow-track{display:flex;align-items:center;justify-content:center;gap:46px;width:max-content;
  min-width:100%}
/* Only when the logos are wider than the screen does the row start moving, and
   it stops the moment somebody reaches for one. */
.brandrow-strip.is-marquee .brandrow-track{justify-content:flex-start;
  animation:brandglide var(--brand-dur,38s) linear infinite}
.brandrow-strip.is-marquee:hover .brandrow-track,
.brandrow-strip.is-marquee:focus-within .brandrow-track{animation-play-state:paused}
@keyframes brandglide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.brandrow-item{display:grid;place-items:center;height:62px;padding:4px 2px;
  filter:grayscale(1);opacity:.62;transition:filter .25s ease,opacity .25s ease,transform .25s ease}
.brandrow-item img{max-height:52px;max-width:168px;width:auto;height:auto;object-fit:contain;display:block}
.brandrow-item:hover,.brandrow-item:focus-visible{filter:none;opacity:1;transform:translateY(-2px)}
a.brandrow-item:focus-visible{outline:2px solid var(--g);outline-offset:6px;border-radius:8px}
/* Nothing moves for a visitor who asked for stillness; the row simply scrolls
   by hand instead. */
@media (prefers-reduced-motion:reduce){.brandrow-item{transition:none}
  .brandrow-item:hover,.brandrow-item:focus-visible{transform:none}
  .brandrow-strip.is-marquee .brandrow-track{animation:none}
  .brandrow-strip.is-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch}}
@media (max-width:860px){.brandrow{padding:44px 0 38px}.brandrow-track{gap:30px}
  .brandrow-item{height:50px}.brandrow-item img{max-height:42px;max-width:128px}}
@media (max-width:480px){.brandrow-track{gap:22px}
  .brandrow-item{height:42px}.brandrow-item img{max-height:34px;max-width:104px}}

/* ========================================================================
   THE TEAM
   ===================================================================== */
.team-grid{display:grid;gap:22px;grid-template-columns:repeat(4,minmax(0,1fr))}
.team-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 20px;
  text-align:center;box-shadow:var(--shadow-sm)}
.team-pic{width:104px;height:104px;margin:0 auto 16px;border-radius:50%;overflow:hidden;
  background:linear-gradient(140deg,var(--g),var(--sun));display:grid;place-items:center}
.team-pic img{width:100%;height:100%;object-fit:cover;display:block}
.team-initials{color:#fff;font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:.01em}
.team-card h3{font-size:16.4px;margin:0}
.team-role{color:var(--brand);font-weight:650;font-size:13.6px;margin-top:3px}
.team-card p{color:var(--ink-3);font-size:14.2px;margin:10px 0 0;line-height:1.6}
.team-links{display:flex;justify-content:center;gap:9px;margin-top:14px}
.team-links a{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);display:grid;
  place-items:center;color:var(--ink-2);transition:.18s}
.team-links a:hover{border-color:var(--g);color:var(--g);background:var(--g-50)}
.team-links svg{width:16px;height:16px}
@media (max-width:1024px){.team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .team-pic{width:84px;height:84px}}
@media (max-width:420px){.team-grid{grid-template-columns:1fr}}

/* the "take the working away with you" row under a calculator result */
.res-actions{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-2);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.res-actions-note{font-size:13.4px;color:var(--ink-3);max-width:40em;line-height:1.5}
@media (max-width:620px){.res-actions .btn{width:100%}}

/* social marks and the service-area line in the footer */
.foot-social{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.foot-social a{width:38px;height:38px;border-radius:11px;border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;color:#D7E1F1;transition:.18s}
.foot-social a:hover{background:#fff;color:var(--g);border-color:#fff;transform:translateY(-2px)}
.foot-social svg{width:18px;height:18px}
.foot-areas{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;font-size:13.6px;color:#A8BDD9}
.foot-areas b{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.09em;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.foot-social a:hover{transform:none}}

/* the districts we cover, and the social row on the contact page */
.area-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.area-chips span{border:1px solid var(--line);background:var(--cream);border-radius:999px;
  padding:6px 13px;font-size:13.2px;font-weight:600;color:var(--ink-2)}
.social-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.social-row a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;
  padding:9px 14px;font-size:13.6px;font-weight:650;color:var(--ink-2);transition:.18s}
.social-row a:hover{border-color:var(--g);color:var(--g);background:var(--g-50)}
.social-row svg{width:17px;height:17px}
.social-feed{margin-top:16px;border:1px solid var(--line);border-radius:14px;overflow:hidden}

/* =====================================================================
   WHERE WE WORK
   Two boards, twenty-nine districts. The job of this block is to let a
   visitor find their own town in about a second, so the districts are set
   as chips rather than prose - the eye scans a grid far faster than it
   reads a comma-separated sentence, and a list this long as running text
   reads as filler nobody checks.
   ===================================================================== */
.sec.areas{background:var(--cream)}
.area-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.area-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 26px 22px;
  box-shadow:0 1px 2px rgba(12,21,38,.04)}
.area-top{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--line-2)}
.area-ico{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--sun-50);
  border:1px solid var(--sun-100);color:var(--sun-600);display:grid;place-items:center}
.area-ico svg{width:21px;height:21px}
.area-top h3{font-size:17px;line-height:1.3}
.area-top span{display:block;font-size:13px;color:var(--ink-3);margin-top:3px;font-weight:600;
  letter-spacing:.02em}

.area-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.area-chips li{font-size:14px;font-weight:600;color:var(--g-700);background:var(--g-50);
  border:1px solid var(--g-100);border-radius:999px;padding:7px 14px;line-height:1.3}

.area-foot{margin:28px 0 0;text-align:center;color:var(--ink-3);font-size:15.5px}
.area-foot a{color:var(--g);font-weight:700;border-bottom:1px solid var(--g-200)}

@media (max-width:860px){
  .area-grid{grid-template-columns:1fr;gap:18px}
  .area-card{padding:22px 20px 20px}
  .area-chips li{font-size:13.5px;padding:6px 12px}
}

/* =====================================================================
   JAN SAMPARK PARTNER
   A recruitment page, not a sales page, so it reads differently: the
   offer is loud at the top, the "this is not a government job" block is
   deliberately plain and unmissable, and the form is quiet. The leaf
   green already in the palette carries the money and the ticks - the
   same job it does on the savings figures elsewhere.
   ===================================================================== */
.pt-hero{background:linear-gradient(160deg,var(--g-900),var(--g-700) 70%);color:#fff;padding:68px 0 76px;
  position:relative;overflow:hidden}
.pt-hero::after{content:"";position:absolute;right:-120px;top:-120px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(247,148,29,.22),transparent 65%)}
.pt-hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;position:relative;z-index:2}
.pt-badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);
  color:#FFD9AA;padding:7px 15px;border-radius:999px;margin-bottom:20px}
.pt-badge svg{width:15px;height:15px}
.pt-hero h1{color:#fff;font-size:clamp(34px,5vw,54px);line-height:1.06;margin-bottom:22px}
.pt-pay{display:inline-flex;flex-direction:column;background:linear-gradient(100deg,var(--sun),var(--sun-600));
  color:#fff;border-radius:14px;padding:14px 24px;box-shadow:0 12px 30px rgba(221,116,7,.3)}
.pt-pay b{font-size:clamp(22px,3.1vw,31px);font-family:var(--display);letter-spacing:-.01em;line-height:1.1}
.pt-pay span{font-size:13.5px;opacity:.95;margin-top:2px}
.pt-tc{font-size:13px;color:#A8BDD9;margin:10px 0 0}
.pt-where{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:22px 0 0;font-size:15px;color:#C3D2E6}
.pt-where svg{width:17px;height:17px;color:var(--sun-400);flex:0 0 auto}
.pt-where b{color:#fff;font-weight:700}
.pt-cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 0}
.pt-hero .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.08)}
.pt-hero .btn-ghost:hover{background:#fff;color:var(--g);border-color:#fff}
.pt-scarce{display:flex;align-items:center;gap:8px;margin:20px 0 0;font-size:14px;color:#FFD9AA}
.pt-scarce svg{width:16px;height:16px;flex:0 0 auto}
.pt-scarce b{color:#fff}

.pt-hero-card{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative;z-index:2}
.pt-stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:14px;
  padding:18px 16px;display:flex;flex-direction:column;gap:9px}
.pt-stat>span{width:38px;height:38px;border-radius:10px;background:rgba(247,148,29,.18);color:var(--sun-400);
  display:grid;place-items:center}
.pt-stat>span svg{width:19px;height:19px}
.pt-stat div{font-size:12.6px;color:#A8BDD9;line-height:1.45}
.pt-stat b{display:block;font-family:var(--display);font-size:21px;color:#fff;letter-spacing:-.01em}

/* ------------------------------------------------------------ mission */
.pt-role{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pt-role>div{border:1px solid var(--line);border-radius:16px;padding:26px 26px 22px;background:#fff}
.pt-role-us{background:var(--g-50);border-color:var(--g-100)}
.pt-role h3{display:flex;align-items:center;gap:10px;font-size:17px;color:var(--g);margin-bottom:14px}
.pt-role h3 svg{width:20px;height:20px;color:var(--sun-600)}
.pt-role ul{margin:0;padding-left:20px;color:var(--ink-2);font-size:15.2px;line-height:1.75}
.pt-role li{margin-bottom:6px}

/* -------------------------------------------------- what this is NOT */
.pt-not{padding-top:0}
.pt-not-box{background:#FFF5EC;border:1px solid #FCD9B0;border-radius:18px;padding:30px 30px 26px}
.pt-not-box h2{display:flex;align-items:center;gap:11px;font-size:20px;color:#92400E;margin-bottom:18px}
.pt-not-box h2 svg{width:22px;height:22px;flex:0 0 auto}
.pt-not-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pt-not-grid>div{background:#fff;border:1px solid #FCD9B0;border-radius:12px;padding:16px 18px}
.pt-not-grid b{display:block;color:#92400E;font-size:15.5px;margin-bottom:5px}
.pt-not-grid span{font-size:14px;color:var(--ink-2);line-height:1.6}

/* ------------------------------------------------------------- payout */
.pt-pay-sec{background:var(--cream)}
.pt-terms,.pt-provide{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px 22px;
  margin-bottom:18px}
.pt-terms h3,.pt-provide h3{font-size:16.5px;color:var(--g);margin-bottom:14px;display:flex;align-items:center;gap:9px}
.pt-provide h3 svg{width:19px;height:19px;color:var(--leaf)}
.pt-terms ol{margin:0;padding-left:20px;color:var(--ink-2);font-size:15.2px;line-height:1.8}
.pt-terms li{margin-bottom:7px}
.pt-provide-row{display:flex;flex-wrap:wrap;gap:10px}
.pt-provide-row span{background:var(--leaf-50);border:1px solid var(--leaf-200);color:var(--leaf-700);
  border-radius:999px;padding:8px 16px;font-size:14.2px;font-weight:650}

/* --------------------------------------------------------- who can apply */
.pt-who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pt-who-card{border:1px solid var(--line);border-radius:14px;padding:20px 18px;background:#fff}
.pt-who-card>span{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:var(--g-50);color:var(--g);margin-bottom:12px}
.pt-who-card>span svg{width:20px;height:20px}
.pt-who-card b{display:block;font-size:15px;color:var(--ink);margin-bottom:5px;line-height:1.35}
.pt-who-card p{margin:0;font-size:13.6px;color:var(--ink-3);line-height:1.55}
.pt-elig{margin:24px 0 0;padding:16px 20px;background:var(--g-50);border-left:3px solid var(--g);
  border-radius:8px;font-size:15px;color:var(--ink-2);line-height:1.7}

/* ----------------------------------------------------------- coverage */
.pt-cover{background:var(--cream)}
.pt-dists{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.pt-dists li{background:#fff;border:1px solid var(--line);border-radius:11px;padding:13px 15px}
.pt-dists b{display:block;font-size:14.8px;color:var(--ink)}
.pt-dists span{font-size:12.6px;color:var(--ink-3)}

/* --------------------------------------------------------------- form */
.pt-apply-wrap{max-width:860px}
.pt-form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 32px 32px;
  box-shadow:0 2px 6px rgba(12,21,38,.05)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pt-steps{display:flex;gap:10px;margin-bottom:12px}
.pt-steps span{flex:1;font-size:13.4px;font-weight:700;color:var(--ink-4);letter-spacing:.01em}
.pt-steps span.on{color:var(--g)}
.pt-bar{height:5px;border-radius:999px;background:var(--g-100);overflow:hidden;margin-bottom:26px}
.pt-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--g-500),var(--leaf));
  border-radius:999px;transition:width .35s ease}
/* Without JavaScript both pages show; with it, one at a time. */
.pt-form.js .pt-page{display:none}
.pt-form.js .pt-page.on{display:block}
.pt-form.js .pt-steps,.pt-form.js .pt-bar{display:flex}
.pt-form:not(.js) .pt-steps,.pt-form:not(.js) .pt-bar{display:none}

.pt-sec{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--g);margin:26px 0 14px;
  padding-bottom:10px;border-bottom:1px solid var(--line-2)}
.pt-page>.pt-sec:first-child{margin-top:0}
.pt-sec svg{width:19px;height:19px;color:var(--sun-600)}
.pt-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.pt-f{display:flex;flex-direction:column;margin-bottom:16px}
.pt-grid .pt-f{margin-bottom:0}
.pt-f label{font-size:14px;font-weight:650;color:var(--ink-2);margin-bottom:7px}
.pt-f label i{color:#C2410C;font-style:normal}
.pt-opt{font-weight:400;color:var(--ink-4)}
.pt-f input[type=text],.pt-f input[type=tel],.pt-f input[type=url],.pt-f select,.pt-f textarea{
  font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;width:100%}
.pt-f input:focus,.pt-f select:focus,.pt-f textarea:focus{outline:none;border-color:var(--g-500);
  box-shadow:0 0 0 3px var(--g-50)}
.pt-f input[type=file]{font-size:14px;padding:12px 14px;border:1px dashed var(--g-200);border-radius:10px;
  background:var(--g-50);width:100%}
.pt-hint{font-size:12.8px;color:var(--ink-3);margin-top:6px;line-height:1.55}
.pt-note{font-size:13.6px;color:var(--ink-3);margin:-6px 0 14px}
.pt-phone{display:flex;align-items:stretch}
.pt-phone span{display:grid;place-items:center;padding:0 13px;background:var(--g-50);border:1px solid var(--line);
  border-right:0;border-radius:10px 0 0 10px;font-size:14.6px;font-weight:650;color:var(--ink-2)}
.pt-phone input{border-radius:0 10px 10px 0 !important}

.pt-toggle{display:flex;align-items:flex-start;gap:13px;margin:16px 0 0;cursor:pointer}
.pt-toggle input{position:absolute;opacity:0;width:0;height:0}
.pt-sw{flex:0 0 auto;width:46px;height:27px;border-radius:999px;background:var(--line);position:relative;
  transition:background .2s;margin-top:2px}
.pt-sw::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.pt-toggle input:checked + .pt-sw{background:var(--leaf)}
.pt-toggle input:checked + .pt-sw::after{transform:translateX(19px)}
.pt-toggle input:focus-visible + .pt-sw{box-shadow:0 0 0 3px var(--leaf-100)}
.pt-tl{font-size:14px;color:var(--ink-3);line-height:1.55}
.pt-tl b{display:block;color:var(--ink);font-size:14.8px;margin-bottom:2px}

.pt-pick{display:flex;gap:8px;flex-wrap:wrap}
.pt-pick label{margin:0;cursor:pointer}
.pt-pick input{position:absolute;opacity:0;width:0;height:0}
.pt-pick span{display:block;border:1px solid var(--line);border-radius:999px;padding:10px 18px;
  font-size:14.2px;font-weight:650;color:var(--ink-2);background:#fff;transition:.15s}
.pt-pick input:checked + span{background:var(--leaf-50);border-color:var(--leaf);color:var(--leaf-700)}
.pt-pick input:focus-visible + span{box-shadow:0 0 0 3px var(--leaf-100)}

.pt-free{background:var(--leaf-50);border:1px solid var(--leaf-200);border-radius:12px;padding:16px 20px;
  margin:20px 0 0;display:flex;flex-direction:column;gap:7px}
.pt-free b,.pt-free span{display:flex;align-items:flex-start;gap:9px;font-size:14.4px;color:var(--leaf-700);
  line-height:1.5}
.pt-free b{font-size:15px;color:var(--leaf-900)}
.pt-free svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px;color:var(--leaf)}

.pt-nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.pt-agree{font-size:12.8px;color:var(--ink-4);margin:14px 0 0;text-align:center}
.pt-err{display:flex;align-items:flex-start;gap:11px;background:#FEF2F2;border:1px solid #FECACA;
  color:#991B1B;border-radius:12px;padding:15px 18px;margin-bottom:20px;font-size:14.6px;line-height:1.6}
.pt-err svg{width:19px;height:19px;flex:0 0 auto;margin-top:1px}

/* ---------------------------------------------------------- submitted */
.pt-done{background:#fff;border:1px solid var(--leaf-200);border-radius:18px;padding:46px 36px;text-align:center;
  box-shadow:0 10px 34px rgba(46,155,60,.12)}
.pt-done-tick{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;margin:0 auto 22px;
  border:3px solid var(--leaf);color:var(--leaf)}
.pt-done-tick svg{width:38px;height:38px;stroke-width:2.4}
.pt-done h2{font-size:26px;margin-bottom:12px}
.pt-done p{color:var(--ink-2);font-size:16px;line-height:1.7;max-width:520px;margin:0 auto}
.pt-done-no{margin-top:10px !important;font-size:15px !important}
.pt-done-band{display:block;width:fit-content;max-width:100%;background:var(--leaf-50);
  border:1px solid var(--leaf-200);color:var(--leaf-700);border-radius:10px;padding:12px 20px;
  margin:24px auto;font-size:14.6px;font-weight:650;line-height:1.6}

/* -------------------------------------------------------- disclaimer */
.pt-disc{background:var(--g-900);color:#A8BDD9}
.pt-disc h3{color:#fff;font-size:16px;margin-bottom:10px}
.pt-disc p{margin:0;font-size:14.2px;line-height:1.8;max-width:900px}

@media (max-width:980px){
  .pt-hero-grid{grid-template-columns:1fr;gap:32px}
  .pt-who-grid{grid-template-columns:repeat(2,1fr)}
  .pt-dists{grid-template-columns:repeat(3,1fr)}
  .pt-not-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .pt-hero{padding:48px 0 54px}
  .pt-hero-card{grid-template-columns:1fr 1fr;gap:11px}
  .pt-role,.pt-grid{grid-template-columns:1fr}
  .pt-who-grid{grid-template-columns:1fr}
  .pt-dists{grid-template-columns:repeat(2,1fr)}
  .pt-form{padding:22px 18px 26px;border-radius:14px}
  .pt-done{padding:34px 20px}
  .pt-cta .btn,.pt-nav .btn{flex:1 1 100%;justify-content:center}
}