/* Eco Solar Australia - global stylesheet. Every page uses this one file.
   Colours, type and spacing follow the live ecosolar.com.au brand: navy #032B44, green #9CCB3B, Centra No2. */
@font-face{font-family:"Centra No2"; src:url("../fonts/CentraNo2-Book.woff2") format("woff2"), url("../fonts/CentraNo2-Book.woff") format("woff"); font-weight:100 400; font-style:normal; font-display:swap}
/* the live site sets every heading, label and button in Medium, so all heavier weights map to it */
@font-face{font-family:"Centra No2"; src:url("../fonts/CentraNo2-Medium.woff2") format("woff2"), url("../fonts/CentraNo2-Medium.woff") format("woff"); font-weight:500 900; font-style:normal; font-display:swap}
:root{
  --bg:#FFFFFF; --surface:#F4F6F8; --surface-2:#E8EDF0; --ink:#032B44; --text:#5C6F7B; --muted:#687985;
  --brand:#032B44; --brand-deep:#032B44; --on-brand:#FFFFFF; --sun:#9CCB3B; --on-sun:#032B44;
  --line:#DCE3E8; --focus:#6FA01E; --danger:#B3261E;
  --on-dark:#C9D6DE;
  --f-display:"Centra No2", Arial, sans-serif;
  --f-body:"Centra No2", Arial, sans-serif;
  --wrap:1360px;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 100px)}
body{margin:0; background:var(--bg); color:var(--text); font:400 1.125rem/1.6 var(--f-body); -webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--brand); text-underline-offset:3px; transition:color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:4px}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:500; color:var(--ink); line-height:1.15; margin:0 0 .5em; letter-spacing:-.02em}
h1{font-size:clamp(2.5rem,5.6vw,4rem); line-height:1.1; letter-spacing:-.028em}
h2{font-size:clamp(2rem,3.8vw,3rem)}
h3{font-size:1.5rem; line-height:1.2}
p{margin:0 0 1em; max-width:68ch}
.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute; left:1rem; top:-4rem; background:var(--sun); color:var(--on-sun); padding:.6rem 1rem; z-index:100; font-weight:500}
.skip:focus{top:1rem}

/* buttons - pill shape, green glow and navy hover as on the live site */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font:500 1.125rem/1 var(--f-body); padding:1.1rem 2.3rem; border-radius:30px; border:2px solid transparent; text-decoration:none; cursor:pointer; white-space:nowrap; transition:all .3s ease-in}
.btn-sun{background:var(--sun); border-color:var(--sun); color:#fff; box-shadow:0 10px 40px -5px rgba(156,203,59,.7)}
.btn-sun:hover{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 10px 40px -5px rgba(3,43,68,.6); text-decoration:none}
.btn-line{border-color:currentColor; color:var(--ink); background:transparent}
.btn-line:hover{background:var(--brand); border-color:var(--brand); color:#fff !important; text-decoration:none}
.btn-brand{background:var(--brand); color:var(--on-brand)}
.btn-brand:hover{background:var(--sun); color:#fff; text-decoration:none}
.btn svg{width:18px; height:18px}

/* utility bar */
.util{background:var(--brand-deep); color:var(--on-dark); font-size:.9rem}
.util .wrap{display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0; flex-wrap:wrap}
.util a{color:#fff; font-weight:600; text-decoration:none}
.util span + span{margin-left:1.25rem}

/* header */
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:61; background:var(--bg)}
header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:60; background:var(--bg); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:1.5rem; height:96px}
.logo{display:flex; align-items:center; text-decoration:none; margin-right:auto; flex-shrink:0}
.logo img{display:block; height:56px; width:auto}
.menu{display:flex; gap:.25rem; list-style:none; margin:0; padding:0}
.menu > li{position:relative}
.menu > li > a, .menu > li > button{display:block; white-space:nowrap; padding:.6rem .75rem; color:var(--ink); font:500 1.0625rem/1 var(--f-body); text-decoration:none; background:none; border:0; cursor:pointer; border-radius:8px; transition:color .2s ease-in-out}
.menu > li > a:hover, .menu > li > button:hover, .menu > li > button[aria-current]{color:var(--sun)}
.menu > li > button::after{content:""; display:inline-block; width:.4em; height:.4em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); margin-left:.45em}
.drop{position:absolute; top:100%; left:0; min-width:270px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:.6rem; box-shadow:0 18px 40px -18px rgba(3,43,68,.35); display:none; list-style:none; margin:0}
.drop a{display:block; padding:.55rem .75rem; border-radius:8px; color:var(--ink); text-decoration:none; font-size:1rem}
.drop a:hover{background:var(--surface)}
.drop a span{display:block; color:var(--muted); font-size:.85rem}
.menu > li:hover .drop, .menu > li:focus-within .drop, .menu > li.open .drop{display:block}
.drop.wide{display:none; grid-template-columns:1fr 1fr; min-width:480px; gap:0 .5rem; left:auto; right:0}
.menu > li:hover .drop.wide, .menu > li:focus-within .drop.wide, .menu > li.open .drop.wide{display:grid}
.nav-cta{display:flex; gap:1rem; align-items:center}
.nav-cta .btn{padding:.95rem 1.8rem; font-size:1rem}
.burger{display:none; background:none; border:2px solid var(--line); border-radius:10px; width:46px; height:46px; color:var(--ink); cursor:pointer}
.mobile-panel{display:none}

/* hero */
.hero{position:relative; overflow:hidden; background:linear-gradient(180deg,var(--surface) 0%, var(--bg) 100%)}
.hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; padding:5.5rem 0 5rem; position:relative; z-index:1}
.sun-arc{position:absolute; inset:auto 0 0 0; width:100%; height:100%; pointer-events:none; z-index:0}
.sun-arc .path{stroke:var(--sun); stroke-width:2; fill:none; stroke-dasharray:6 8; opacity:.75}
.sun-arc .sun{fill:var(--sun)}
.sun-arc .night{fill:var(--brand); opacity:.6}
.lede{font-size:1.125rem; line-height:1.6; color:var(--text); max-width:56ch}
.hero-points{list-style:none; padding:0; margin:1.6rem 0 2rem; display:grid; gap:.6rem}
.hero-points li{display:flex; gap:.6rem; align-items:flex-start; color:var(--ink); font-weight:500}
.tick{flex:0 0 22px; height:22px; border-radius:50%; background:var(--sun); color:#fff; display:grid; place-items:center; margin-top:2px}
.tick svg{width:13px; height:13px}
.hero-actions{display:flex; gap:.75rem; flex-wrap:wrap}
.badges{display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin-top:2rem; color:var(--muted); font-size:.93rem}
.badges b{color:var(--ink)}

/* quote card */
.quote{background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:2rem; box-shadow:0 10px 40px -5px rgba(3,43,68,.25); align-self:start}
.quote h2{font-size:1.55rem; margin-bottom:.25rem}
.quote .sub{color:var(--muted); font-size:.95rem; margin-bottom:1.1rem}
.progress{display:flex; gap:6px; margin-bottom:1.1rem}
.progress i{flex:1; height:5px; border-radius:5px; background:var(--surface-2)}
.progress i.on{background:var(--sun)}
.step{display:none; border:0; padding:0; margin:0}
.step.active{display:block}
.step legend{font:700 1.02rem/1.3 var(--f-body); color:var(--ink); margin-bottom:.7rem; padding:0}
.choices{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
.choice input{position:absolute; opacity:0}
.choice span{display:block; padding:.8rem .85rem; border:2px solid var(--line); border-radius:12px; font-weight:600; color:var(--ink); cursor:pointer; font-size:.95rem; line-height:1.25}
.choice input:checked + span{border-color:var(--sun); background:var(--surface)}
.choice input:focus-visible + span{outline:3px solid var(--focus); outline-offset:2px}
.field{margin-bottom:.8rem}
.field label{display:block; font-weight:600; color:var(--ink); margin-bottom:.3rem; font-size:.95rem}
.field input,.field select{width:100%; padding:.8rem .9rem; border:1px solid #BCC9D0; border-radius:4px; font:400 1rem var(--f-body); background:var(--bg); color:var(--ink)}
.field input:focus,.field select:focus{border-color:var(--sun); box-shadow:0 0 0 3px rgba(156,203,59,.3); outline:none}
.err{color:var(--danger); font-size:.88rem; margin:.4rem 0 0; min-height:1.2em}
.step-nav{display:flex; justify-content:space-between; gap:.6rem; margin-top:1rem}
.step-nav .btn{flex:1}
.back{background:none; border:0; color:var(--muted); font:600 .95rem var(--f-body); cursor:pointer; padding:.6rem}
.fine{font-size:.82rem; color:var(--muted); margin:.9rem 0 0}
.done{display:none; text-align:center; padding:1.5rem .5rem}
.done.show{display:block}

/* proof strip */
.proof{background:var(--brand); color:var(--on-dark)}
.proof ul{list-style:none; margin:0 auto; padding:1.6rem 0; display:grid; grid-template-columns:repeat(5,1fr); gap:1rem}
.proof li{text-align:center; padding:0 1rem}
.proof li + li{border-left:2px solid rgba(255,255,255,.25)}
.proof strong{display:block; font:500 1.875rem/1.1 var(--f-display); color:var(--sun)}
.proof span{font-size:.93rem; opacity:.9}

section.block{padding:clamp(4rem,8vw,6.25rem) 0}
.intro{max-width:760px; margin-bottom:2.5rem}
.intro p{color:var(--text)}

/* services */
.svc{display:grid; grid-template-columns:1.25fr 1fr; gap:1.25rem}
.svc-feature{background:var(--surface); border-radius:14px; padding:2rem; display:flex; flex-direction:column; justify-content:space-between; min-height:260px}
.svc-block{background:var(--surface)}
.svc-block .svc-feature:not(.dark){background:var(--bg)}
.svc-feature.dark{background:var(--brand-deep); color:var(--on-dark)}
.svc-feature.dark h3, .svc-feature.dark a{color:#fff}
.svc-feature h3{font-size:1.6rem}
.svc-feature .go{font-weight:700; text-decoration:none; display:inline-flex; gap:.4rem; align-items:center; margin-top:1rem}
.svc-features{display:grid; gap:1.25rem}
.svc-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.svc-list li{border-bottom:1px solid var(--line)}
.svc-list a{display:grid; grid-template-columns:1fr auto; gap:.2rem 1rem; padding:1.15rem .25rem; text-decoration:none; color:var(--ink)}
.svc-list a:hover h3{text-decoration:underline; text-underline-offset:4px}
.svc-list h3{margin:0; font-size:1.15rem}
.svc-list p{grid-column:1; margin:0; color:var(--muted); font-size:.97rem}
.svc-list .arrow{grid-row:1 / span 2; align-self:center; color:var(--brand)}

/* packages */
.pk{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.pk a{display:block; padding:1.5rem; border:2px solid var(--line); border-radius:18px; text-decoration:none; color:var(--text); background:var(--bg)}
.pk a:hover{border-color:var(--sun); box-shadow:0 10px 40px -5px rgba(3,43,68,.18)}
.pk .size{font:800 2.1rem/1 var(--f-display); color:var(--ink); letter-spacing:-.02em}
.pk .kind{font-weight:500; color:var(--sun); margin:.35rem 0 .8rem}
.pk p{font-size:.95rem; margin-bottom:1rem}
.pk .cta{font-weight:700; color:var(--ink)}
.pk a.hl{border-color:var(--sun); background:var(--surface)}
.pk .flag{display:inline-block; background:var(--sun); color:var(--on-sun); font-weight:500; font-size:.8rem; padding:.2rem .6rem; border-radius:999px; margin-bottom:.8rem}

/* rebates */
.rebate{background:var(--surface)}
.rebate .wrap{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center}
.rebate-links{list-style:none; margin:0; padding:0; display:grid; gap:.75rem}
.rebate-links a{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem 1.25rem; background:var(--bg); border-radius:14px; text-decoration:none; color:var(--ink); font-weight:700; border:1px solid var(--line)}
.rebate-links a span{font-weight:400; color:var(--muted); display:block; font-size:.92rem}
.rebate-links a:hover{border-color:var(--brand)}

/* why */
.why{display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem 2rem}
.why div{border-top:3px solid var(--sun); padding-top:1rem}
.why h3{font-size:1.15rem}
.why p{font-size:.98rem; margin:0}

/* process */
.process{background:var(--brand-deep); color:var(--on-dark)}
.process h2,.process h3{color:#fff}
.process .intro p{color:var(--on-dark)}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; counter-reset:s}
.steps li{counter-increment:s; position:relative; padding-top:3.4rem}
.steps li::before{content:counter(s); position:absolute; top:0; left:0; width:2.5rem; height:2.5rem; border-radius:50%; background:var(--sun); color:#fff; font:800 1.15rem/2.5rem var(--f-display); text-align:center}
.steps li:not(:last-child)::after{content:""; position:absolute; top:1.25rem; left:3.25rem; right:-.75rem; border-top:2px dashed rgba(156,203,59,.5)}
.steps p{font-size:.97rem; color:var(--on-dark)}

/* founder */
.founder .wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:3rem; align-items:center}
.founder-card{background:var(--surface); border-radius:24px; padding:2rem; aspect-ratio:4/5; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden}
.founder-card svg{position:absolute; inset:0; width:100%; height:100%}
.founder-card p{position:relative; font-size:.9rem; color:var(--muted); margin:0}
blockquote{margin:0 0 1.25rem; font:600 clamp(1.25rem,2.2vw,1.6rem)/1.35 var(--f-display); color:var(--ink); letter-spacing:-.01em}

/* brands + areas */
.brands{display:flex; flex-wrap:wrap; gap:.6rem}
.brands a{padding:.65rem 1.1rem; border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--ink); font-weight:600; background:var(--bg)}
.brands a:hover{border-color:var(--brand)}
.brand-group{margin-bottom:1.5rem}
.brand-group h3{font-size:1rem; color:var(--muted); font-family:var(--f-body); font-weight:500; margin-bottom:.8rem}
.areas{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2rem}
.areas h3{font-size:1.15rem}
.areas ul{list-style:none; margin:0 0 1.25rem; padding:0; columns:2; column-gap:1.5rem}
.areas li{margin-bottom:.4rem; break-inside:avoid}
.areas .soon{color:var(--muted); font-size:.95rem}
.area-search{display:flex; gap:.5rem; margin-top:1.5rem; max-width:520px}
.area-search input{flex:1; padding:.8rem .9rem; border:2px solid var(--line); border-radius:12px; font:400 1rem var(--f-body); background:var(--bg); color:var(--ink)}
#area-result{min-height:1.5em; margin-top:.6rem; font-weight:600}

/* reviews */
.trust{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}
.trust > div{border:1px solid var(--line); border-radius:20px; padding:2rem; background:var(--bg)}

/* faq */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:1.3rem 2.5rem 1.3rem 0; font:500 1.25rem/1.35 var(--f-display); color:var(--ink); position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:.25rem; top:1.1rem; font-size:1.6rem; color:var(--sun); font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:1.1rem; margin:0}

/* guides */
.guides{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.guides a{text-decoration:none; color:var(--ink); display:block; border-top:1px solid var(--line); padding-top:1rem}
.guides a:hover h3{text-decoration:underline; text-underline-offset:4px}
.guides small{color:var(--brand); font-weight:500}
.guides p{color:var(--muted); font-size:.96rem}

/* final cta */
.final{background:var(--brand); color:var(--on-dark); border-bottom:10px solid var(--sun)}
.final .wrap{display:grid; grid-template-columns:1.3fr 1fr; gap:2rem; align-items:center; padding:5rem 0}
.final h2{color:#fff}
.final p{color:var(--on-dark)}
.final .acts{display:flex; gap:.75rem; flex-wrap:wrap; justify-content:flex-end}
.final .btn-dark{background:var(--sun); color:#fff; box-shadow:0 10px 40px -5px rgba(156,203,59,.7)}
.final .btn-dark:hover{background:#fff; color:var(--brand); text-decoration:none}
.final .btn-outline{border-color:#fff; color:#fff}
.final .btn-outline:hover{background:#fff; color:var(--brand); text-decoration:none}

/* footer */
footer.site{background:var(--brand-deep); color:#A9BAC5; font-size:1rem; line-height:1.6; padding:4rem 0 2rem}
footer.site a{color:#fff; text-decoration:none}
footer.site a:hover{color:var(--sun); text-decoration:underline}
.f-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:2rem}
footer.site h3{color:var(--sun); font-size:1.125rem; font-family:var(--f-body); font-weight:500; letter-spacing:0; margin-bottom:.9rem}
footer.site ul{list-style:none; margin:0; padding:0}
footer.site li{margin-bottom:.5rem}
footer.site .logo img{height:52px}
.nap{margin-top:1.25rem; font-style:normal; line-height:1.7}
.f-sub{border-top:1px solid rgba(255,255,255,.12); margin-top:3rem; padding-top:1.5rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.88rem}
.f-sub ul{display:flex; gap:1.25rem; flex-wrap:wrap}
.f-sub li{margin:0}
.f-suburbs{margin-top:2.5rem; font-size:.9rem}
.f-suburbs a{color:#A9BAC5}

/* sticky mobile bar */
.mbar{display:none}

/* six menus only just fit: tighten the header on small desktops so it never runs off the page */
@media (min-width:1081px) and (max-width:1360px){
  .nav{gap:.75rem}
  .logo img{height:46px}
  .menu{gap:0}
  .menu > li > a, .menu > li > button{padding:.6rem .45rem; font-size:.95rem}
  .nav > .btn{padding-left:1.1rem; padding-right:1.1rem; font-size:.95rem}
}
@media (min-width:1081px) and (max-width:1180px){
  .logo img{height:42px}
  .menu > li > a, .menu > li > button{padding:.6rem .4rem; font-size:.9rem}
}
@media (max-width:1080px){
  .menu{display:none}
  .burger{display:grid; place-items:center}
  .mobile-panel.open{display:block; border-top:1px solid var(--line); max-height:calc(100vh - 140px); overflow:auto; padding:1rem 0 1.5rem}
  .mobile-panel details{border-bottom:1px solid var(--line)}
  .mobile-panel summary{padding:.9rem 0; font-weight:700; color:var(--ink); cursor:pointer}
  .mobile-panel ul{list-style:none; margin:0 0 .8rem; padding:0 0 0 .5rem}
  .mobile-panel li a{display:block; padding:.45rem 0; color:var(--ink); text-decoration:none}
  .mobile-panel .solo{display:block; padding:.9rem 0; font-weight:700; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line)}
  .f-top{grid-template-columns:1fr 1fr 1fr}
  .f-top > div:first-child{grid-column:1 / -1}
}
@media (max-width:900px){
  .hero .wrap, .rebate .wrap, .founder .wrap, .final .wrap{grid-template-columns:1fr}
  .hero .wrap{padding:3rem 0}
  .svc{grid-template-columns:1fr}
  .pk{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .steps li::after{display:none}
  .proof ul{grid-template-columns:repeat(3,1fr)}
  .areas{grid-template-columns:1fr}
  .trust,.guides{grid-template-columns:1fr}
  .final .acts{justify-content:flex-start}
  .founder-card{aspect-ratio:16/10}
}
@media (max-width:620px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .util .hide-sm{display:none}
  .nav-cta .btn{display:none}
  .pk,.why,.steps{grid-template-columns:1fr}
  .proof ul{grid-template-columns:1fr 1fr}
  .choices{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr 1fr}
  section.block{padding:3.75rem 0}
  .mbar{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--bg); border-top:1px solid var(--line); padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom,0px))}
  .mbar .btn{padding:.85rem .5rem}
}
@media (prefers-reduced-motion:no-preference){
  .sun-arc .path{stroke-dashoffset:900; animation:draw 2.4s ease-out .2s forwards}
  .sun-arc .sun{opacity:0; animation:rise .8s ease-out 1.4s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes rise{to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- inner pages ---- */
.crumbs{font-size:.92rem; color:var(--muted); padding:1rem 0 0}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; gap:.5rem; flex-wrap:wrap}
.crumbs li + li::before{content:"/"; margin-right:.5rem; color:var(--line)}
.crumbs a{color:var(--muted)}
.hero.inner .wrap{padding:2.5rem 0 4rem}
.facts{border:2px solid var(--brand); border-radius:22px; padding:2rem; background:var(--bg); display:grid; grid-template-columns:1fr 1.4fr; gap:2rem}
.facts h2{font-size:1.6rem}
.facts dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.65rem 1.25rem}
.facts dt{font-weight:700; color:var(--ink)}
.facts dd{margin:0}
.toc{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem}
.toc a{padding:.5rem .9rem; border-radius:999px; background:var(--surface); color:var(--ink); text-decoration:none; font-weight:600; font-size:.93rem}
.toc a:hover{background:var(--surface-2)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start}
.benefits{list-style:none; margin:0; padding:0; display:grid; gap:1.1rem}
.benefits li{padding-left:1.4rem; border-left:3px solid var(--sun)}
.benefits b{display:block; color:var(--ink); font-family:var(--f-display); font-size:1.1rem}
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:18px}
table.sizes{width:100%; border-collapse:collapse; min-width:720px; font-size:.98rem}
table.sizes caption{text-align:left; padding:1rem 1.25rem; color:var(--muted); font-size:.9rem; caption-side:bottom; border-top:1px solid var(--line)}
table.sizes th, table.sizes td{padding:1rem 1.25rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
table.sizes thead th{background:var(--surface); color:var(--ink); font-weight:700}
table.sizes tbody th{font:800 1.2rem/1.2 var(--f-display); color:var(--ink)}
table.sizes tr:last-child td, table.sizes tr:last-child th{border-bottom:0}
.logos{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.logo-tile{border:1px solid var(--line); border-radius:18px; padding:1.5rem; text-decoration:none; color:var(--text); background:var(--bg); display:flex; flex-direction:column; gap:.75rem}
.logo-tile:hover{border-color:var(--brand)}
.logo-tile .mark{height:64px; display:grid; place-items:center; background:#FFFFFF; border-radius:12px; border:1px solid var(--line); padding:.5rem}
.logo-tile .mark img{max-height:44px; width:auto}
.logo-tile .mark span{font:500 1.3rem/1 var(--f-body); color:var(--ink); letter-spacing:.01em}
.logo-tile h3{margin:0; font-size:1.1rem}
.logo-tile p{margin:0; font-size:.94rem}
.logo-tile .more{font-weight:700; color:var(--brand); font-size:.94rem}
.inv{margin-top:1.5rem; color:var(--muted)}
.inv a{font-weight:600}
.cost{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}
.cost > div{border-radius:20px; padding:1.75rem; background:var(--surface)}
.cost ul{margin:0; padding-left:1.1rem}
.cost li{margin-bottom:.45rem}
.rb-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:1rem}
.rb-card{background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:1.75rem}
.rb-card .amt{font:500 2.4rem/1 var(--f-display); color:var(--sun); margin-bottom:.4rem}
.rb-card ul{padding-left:1.1rem; margin:0 0 1rem}
.rb-note{font-size:.88rem; color:var(--muted); margin-top:1.25rem}
.alert{border-left:4px solid var(--sun); background:var(--bg); padding:1rem 1.25rem; border-radius:0 12px 12px 0; margin-top:1.25rem; color:var(--ink)}
.more-svc{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.more-svc a{display:block; padding:1.4rem; border-radius:18px; border:1px solid var(--line); text-decoration:none; color:var(--text)}
.more-svc a:hover{border-color:var(--brand)}
.more-svc h3{font-size:1.1rem; margin-bottom:.35rem}
.more-svc p{margin:0; font-size:.95rem}
.biz{display:grid; grid-template-columns:1.3fr 1fr; gap:2rem; align-items:center; background:var(--brand-deep); color:var(--on-dark); border-radius:16px; padding:clamp(2rem,6vw,4.5rem)}
.biz h2{color:#fff}
.biz a.btn{justify-self:start}
.mid-cta{display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; background:var(--surface); border-radius:22px; padding:1.75rem 2rem; margin-top:2.5rem}
.mid-cta p{margin:0; font:700 1.25rem/1.3 var(--f-display); color:var(--ink)}
.mid-cta div{display:flex; gap:.6rem; flex-wrap:wrap}
.updated{font-size:.88rem; color:var(--muted)}
@media (max-width:900px){
  .facts,.two,.cost,.rb-grid,.biz{grid-template-columns:1fr}
  .logos{grid-template-columns:1fr 1fr}
  .more-svc{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .logos,.more-svc{grid-template-columns:1fr}
  .facts dl{grid-template-columns:1fr}
  .facts dt{margin-top:.4rem}
}


/* ---- /brands/ additions ---- */
.pair-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem}
.pair{border:1px solid var(--line); border-radius:20px; padding:1.75rem; background:var(--bg)}
.pair.hl{border:2px solid var(--sun); background:var(--surface)}
.pair .stack{font:700 1.08rem/1.45 var(--f-display); color:var(--ink)}
.pair .stack a{color:var(--brand)}
.pair .stack span{color:var(--muted); margin:0 .25rem}
.pref{font-style:normal; font:700 .75rem/1 var(--f-body); background:var(--sun); color:var(--on-sun); padding:.25rem .5rem; border-radius:999px; vertical-align:middle; margin-left:.35rem}
.tile-cta{border-style:dashed; justify-content:center; background:var(--surface)}
.why-dark div{border-top-color:var(--sun)}
.why-dark p{color:var(--on-dark)}
@media (max-width:900px){.pair-grid{grid-template-columns:1fr}}

/* ---- prices page additions ---- */
.deadline{background:var(--sun); color:var(--on-sun)}
.deadline p{margin:0; padding:.7rem 0; max-width:none; font-size:.98rem}
.deadline a{color:var(--on-sun); font-weight:500}
.price-tbl .price{font:500 1.35rem/1 var(--f-display); color:var(--brand); white-space:nowrap}
.price-tbl tbody th a{color:var(--ink)}
.price-tbl td:last-child{text-align:right}
.btn-sm{padding:.6rem 1rem; font-size:.92rem}
.hl-row{background:var(--surface)}
.rb-grid.three{grid-template-columns:repeat(3,1fr)}
.steps.five{grid-template-columns:repeat(5,1fr)}
table.compare{min-width:0}
table.compare tbody th{font:600 1rem/1.3 var(--f-body)}
@media (max-width:900px){.rb-grid.three{grid-template-columns:1fr}.steps.five{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.steps.five{grid-template-columns:1fr}}

/* ---- solar batteries additions ---- */
.seg{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}
.seg-card{display:block; padding:2rem; border-radius:24px; background:var(--surface); text-decoration:none; color:var(--text); border:2px solid transparent}
.seg-card:hover{border-color:var(--brand)}
.seg-card h3{font-size:1.5rem}
.seg-card .more{font-weight:700; color:var(--brand)}
.seg-card.dark{background:var(--brand-deep); color:var(--on-dark)}
.seg-card.dark h3{color:#fff}
.seg-card.dark .more{color:var(--sun)}
@media (max-width:900px){.seg{grid-template-columns:1fr}}

/* ---- suburb page additions ---- */
.local-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
.local-card{border:1px solid var(--line); border-radius:20px; padding:1.6rem; background:var(--bg); display:flex; flex-direction:column}
.local-card h3{font-size:1.15rem}
.local-card p{font-size:.98rem; flex:1}
.local-card > a{font-weight:700}
.region-back{display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; background:var(--bg); border:2px solid var(--brand); border-radius:22px; padding:1.75rem 2rem}
.region-back h2{margin-bottom:.35rem}
.region-back p{margin:0}
@media (max-width:900px){.local-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.local-grid{grid-template-columns:1fr}}

/* ---- suburb page extras ---- */
.trust-split{display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center}
.proof-list{list-style:none; margin:1.25rem 0 1.75rem; padding:0; display:grid; gap:.6rem}
.proof-list li{padding-left:1.6rem; position:relative}
.proof-list li::before{content:""; position:absolute; left:0; top:.45em; width:.8rem; height:.8rem; border-radius:50%; background:var(--sun)}
.proof-list b{color:var(--ink)}
.ill-fig,.chart-fig{margin:0}
.ill{display:block; width:100%; height:auto; border-radius:22px}
.ill-fig figcaption,.chart-fig figcaption,.gallery figcaption{font-size:.9rem; color:var(--muted); margin-top:.6rem}
.climate-split{display:grid; grid-template-columns:1.2fr 1fr; gap:2.5rem; align-items:start}
.chart-fig{background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:1.25rem}
.chart{width:100%; height:auto; display:block}
.chart .ax{font:600 12px var(--f-body); fill:var(--muted)}
.chart .vl{font:700 11px var(--f-body); fill:var(--ink)}
.chart .gl{stroke:var(--line); stroke-width:1}
.climate-dl{margin:0; display:grid; gap:1rem}
.climate-dl dt{font:700 1.05rem/1.2 var(--f-display); color:var(--ink)}
.climate-dl dd{margin:.25rem 0 0}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
.gallery figure{margin:0}
.gallery figcaption a{font-weight:700}
.final-rich .wrap{grid-template-columns:1.2fr .8fr; padding:4rem 0}
.cta-points{list-style:none; padding:0; margin:0 0 1.5rem; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; font-weight:700}
.cta-points li::before{content:"\2713"; margin-right:.4rem}
.cta-ill{margin:0}
.cta-ill svg{width:100%; height:auto; border-radius:22px; box-shadow:0 24px 50px -24px rgba(3,43,68,.5)}
@media (max-width:900px){.trust-split,.climate-split,.final-rich .wrap{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}.cta-ill{display:none}}
@media (max-width:620px){.gallery{grid-template-columns:1fr}}

/* ---- service areas additions ---- */
.finder{margin:1.75rem 0 0; max-width:560px}
.finder label{display:block; font-weight:700; color:var(--ink); margin-bottom:.45rem}
.finder-row{display:flex; gap:.6rem}
.finder-row input{flex:1; min-width:0; padding:.95rem 1.25rem; border:2px solid var(--brand); border-radius:30px; font:400 1.05rem var(--f-body); background:var(--bg); color:var(--ink)}
.finder-status{font-size:.92rem; color:var(--muted); margin:.5rem 0 0}
.hubs{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.hub-card{border:1px solid var(--line); border-radius:20px; padding:1.5rem; background:var(--bg)}
.hub-card h3 a{color:var(--ink); text-decoration:none}
.hub-card h3 a:hover{text-decoration:underline}
.hub-card p{font-size:.96rem}
.hub-card ul{list-style:none; margin:0; padding:0}
.hub-card li{padding:.35rem 0; border-top:1px solid var(--line); font-size:.95rem}
.hub-card.dark{background:var(--brand-deep); color:var(--on-dark); border-color:transparent}
.hub-card.dark h3 a, .hub-card.dark a{color:#fff}
.hub-card.dark li{border-top-color:rgba(255,255,255,.15)}
.area-groups{display:grid; gap:1.25rem; margin-top:1.5rem}
.area-group{background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:1.5rem 1.75rem}
.ag-head{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:.75rem; margin-bottom:1rem}
.ag-head h3{margin:0}
.ag-head h3 a{color:var(--ink)}
.count{color:var(--muted); font-size:.92rem}
.sub-list{list-style:none; margin:0; padding:0; columns:4 180px; column-gap:1.5rem}
.sub-list li{padding:.22rem 0; break-inside:avoid; font-size:.97rem}
.sub-list .pc{color:var(--muted); font-size:.85rem}
.no-match{background:var(--bg); border:2px dashed var(--brand); border-radius:20px; padding:1.75rem; margin-top:1.25rem}
@media (max-width:1080px){.hubs{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.hubs{grid-template-columns:1fr}.finder-row,.area-search{flex-direction:column}}

/* ---- photos (global/data/images.php, es_image()) ---- */
img.ill{object-fit:cover; background:var(--surface-2)}
.ill-fig img.ill{aspect-ratio:520/380}
.gallery img.ill{aspect-ratio:400/260}
.cta-ill img{display:block; width:100%; height:auto; aspect-ratio:520/380; object-fit:cover; border-radius:22px; box-shadow:0 24px 50px -24px rgba(3,43,68,.5)}
.photo-fig{margin:0}
.photo-fig img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:22px}
.photo-fig figcaption{font-size:.9rem; color:var(--muted); margin-top:.6rem}
.why-intro{align-items:center; margin-bottom:2.5rem}
.why-intro .intro{margin-bottom:0}

/* ---- brand header sizing on small screens ---- */
@media (max-width:620px){
  .nav{height:76px}
  .logo img{height:44px}
  html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px)}
}

/* ---- solar revolution banner (home, from the live ecosolar.com.au homepage) ---- */
.eco-banner{position:relative; overflow:hidden; padding:clamp(4rem,8vw,6.25rem) 0 clamp(3rem,6vw,5rem); text-align:center}
.eco-banner .wrap{position:relative; z-index:1}
.eb-rings{position:absolute; z-index:0; left:50%; top:clamp(1rem,4vw,3rem); width:min(1100px,130vw); aspect-ratio:1; translate:-50% 0; border-radius:50%;
  background:radial-gradient(circle closest-side, #C7EBEF 0 32%, #D3EFF2 32% 49%, #DCF2F5 49% 66%, #E7F6F9 66% 83%, #F2FAFC 83% 100%, transparent 100%);
  animation:eb-breathe 9s ease-in-out infinite}
.eb-text{max-width:672px; margin:0 auto}
.eb-text h2{font-size:clamp(2.25rem,5vw,4rem); line-height:1.1; letter-spacing:-.028em; margin-bottom:0}
.eb-text p{color:var(--text); margin:1.25rem auto 1.9rem}
.eb-more svg{transition:translate .3s ease}
.eb-more:hover svg, .eb-more:focus-visible svg{translate:5px 0}
.eb-art{max-width:1170px; margin:clamp(2rem,5vw,3.5rem) auto 0}
.eb-art img{display:block; width:100%; height:auto; animation:eb-float 7s ease-in-out infinite; transition:scale .5s ease, filter .5s ease}
.eb-art:hover img{scale:1.025; filter:saturate(1.15)}
.eb-circles{position:relative; max-width:1000px; aspect-ratio:1203/501; margin:clamp(1.5rem,4vw,3rem) auto 0}
.eb-connectors{display:block; width:100%; height:100%}
.eb-circle{position:absolute; width:27.93%; aspect-ratio:1; border-radius:50%; transition:scale .4s cubic-bezier(.3,1.4,.5,1), filter .4s ease}
.eb-circle img{display:block; width:100%; height:100%}
.eb-circle.res{left:1%; top:-1.6%}
.eb-circle.com{left:35.91%; top:19.76%}
.eb-circle.utl{left:70.82%; top:-1.6%}
.eb-circle:hover, .eb-circle:focus-visible{scale:1.09; z-index:2; filter:drop-shadow(0 16px 22px rgba(3,43,68,.22)) saturate(1.1)}
.eb-circle:focus-visible{outline-offset:-24px}

/* scroll reveal - site.js adds .js to <html> and .in once an element scrolls into view */
.js .reveal{opacity:0; transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s)}
.js .reveal[data-anim="down"]{transform:translateY(-32px)}
.js .reveal[data-anim="up"]{transform:translateY(32px)}
.js .reveal[data-anim="rise"]{transform:translateY(90px)}
.js .reveal.in{opacity:1; transform:none}
.eb-text .reveal:nth-child(2){--d:.15s}
.eb-text .reveal:nth-child(3){--d:.3s}
.js .eb-circles.in .eb-circle{animation:eb-pop .7s cubic-bezier(.3,1.5,.5,1) backwards}
.js .eb-circles.in .res{animation-delay:.6s}
.js .eb-circles.in .com{animation-delay:.8s}
.js .eb-circles.in .utl{animation-delay:1s}
@keyframes eb-float{0%,100%{translate:0 0} 50%{translate:0 -12px}}
@keyframes eb-breathe{0%,100%{scale:1} 50%{scale:1.04}}
@keyframes eb-pop{from{opacity:0; scale:.55}}
@media (max-width:620px){
  .eb-circles{aspect-ratio:auto; display:flex; flex-direction:column; align-items:center}
  .eb-connectors{display:none}
  .eb-circle{position:static; width:min(250px,75%)}
  .eb-circle + .eb-circle{margin-top:-1.5rem}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
  .eb-rings, .eb-art img, .js .eb-circles.in .eb-circle{animation:none}
}

/* ---- location pages: region hubs + city hubs (approved designs "South East Melbourne" and "Melbourne") ---- */
.council-desc{font-size:1rem; color:var(--text); margin:-.25rem 0 1rem; max-width:none}
.area-group.council .sub-list{columns:4 170px}
.sub-list li.p1 > a:first-child{font-weight:500}
.batt-link{font-size:.8rem; font-weight:500; background:var(--sun); color:#fff; padding:.1rem .5rem; border-radius:30px; text-decoration:none; margin-left:.25rem}
.batt-strip{margin-top:2rem; padding:1.5rem 1.75rem; border-radius:14px; background:var(--surface)}
.batt-strip h3{font-size:1.125rem; margin-bottom:.4rem}
.batt-strip p{margin:0; max-width:none}
#suburbs .finder, .rebate .finder{margin:0 0 1.5rem}
.reg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
.reg-card{background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:1.5rem; transition:border-color .2s ease, box-shadow .2s ease}
.reg-card:hover{border-color:var(--sun); box-shadow:0 10px 40px -5px rgba(3,43,68,.15)}
.reg-card h3{font-size:1.125rem; margin-bottom:.2rem}
.reg-card h3 a{color:var(--ink); text-decoration:none}
.reg-card h3 a:hover{color:var(--sun)}
.reg-card .count{margin:0}
.reg-card ul{list-style:none; margin:.6rem 0 .8rem; padding:0; display:flex; flex-wrap:wrap; gap:.35rem .9rem; font-size:.95rem; color:var(--text)}
.reg-card .more{font-weight:500}
.benefit-list{list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:1.1rem}
.benefit-list li{display:flex; gap:1rem; align-items:flex-start}
.benefit-list b{display:block; color:var(--ink); font-family:var(--f-display); font-weight:500; font-size:1.125rem}
.b-ico{flex:0 0 44px; height:44px; border-radius:50%; background:var(--sun); color:#fff; display:grid; place-items:center; font:500 1.2rem/1 var(--f-display)}
.svc-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem}
.svc-card{display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; color:var(--text); transition:border-color .2s ease, box-shadow .3s ease, translate .3s ease}
.svc-card:hover{border-color:var(--sun); box-shadow:0 10px 40px -5px rgba(3,43,68,.2); translate:0 -4px}
.svc-card figure{margin:0}
.svc-card .ill{display:block; width:100%; height:auto; aspect-ratio:400/240; object-fit:cover; border-radius:0}
.svc-body{padding:1.25rem 1.25rem 1.4rem; display:flex; flex-direction:column; flex:1}
.svc-body h3{font-size:1.125rem; margin-bottom:.4rem}
.svc-body p{font-size:1rem; flex:1}
.svc-body .more{font-weight:500; color:var(--brand)}
.svc-card:hover .more{color:var(--sun)}
.calc{display:grid; grid-template-columns:1.1fr .9fr; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 10px 40px -5px rgba(3,43,68,.15)}
.calc-in{padding:2rem; background:var(--bg)}
.calc-in input[type=range]{width:100%; accent-color:var(--sun); height:2rem}
.calc-in output{font:500 1.25rem var(--f-display); color:var(--ink)}
.seg-field{border:0; padding:0; margin:0 0 1.25rem; display:flex; flex-wrap:wrap; gap:.5rem}
.seg-field legend{width:100%; font-weight:500; color:var(--ink); margin-bottom:.5rem; padding:0}
.seg-field label{position:relative}
.seg-field input{position:absolute; opacity:0}
.seg-field span{display:block; padding:.65rem 1.1rem; border:1px solid #BCC9D0; border-radius:30px; font-weight:500; color:var(--ink); cursor:pointer; font-size:1rem; transition:all .2s ease}
.seg-field span:hover{border-color:var(--sun)}
.seg-field input:checked + span{border-color:var(--sun); background:var(--sun); color:#fff}
.seg-field input:focus-visible + span{outline:3px solid var(--focus); outline-offset:2px}
.adv summary{cursor:pointer; font-weight:500; color:var(--brand)}
.adv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-top:.75rem}
.calc-out{background:var(--brand); color:var(--on-dark); padding:2rem; display:flex; flex-direction:column}
.calc-kicker{text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; font-weight:500; color:var(--sun); margin:0 0 .5rem}
.res-main span,.res-batt span{display:block; font:500 3rem/1 var(--f-display); color:#fff; letter-spacing:-.02em}
.res-main small,.res-batt small{color:var(--on-dark)}
.res-batt{margin-top:.75rem}
.res-batt span{font-size:2rem}
.res-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.5rem 0}
.res-grid dt{font-size:.875rem; color:var(--on-dark)}
.res-grid dd{margin:.2rem 0 0; font:500 1.4rem/1 var(--f-display); color:#fff}
.bar{height:10px; border-radius:10px; background:rgba(255,255,255,.12); overflow:hidden}
.bar i{display:block; height:100%; width:0; background:var(--sun); transition:width .3s ease}
.bar-label{margin:.5rem 0 1.25rem; font-weight:500; color:#fff}
.calc-cta{align-self:flex-start}
.calc-note{font-size:.8rem; color:var(--on-dark); margin:1rem 0 0}
.cta-ill img{display:block; width:100%; height:auto; aspect-ratio:520/380; object-fit:cover; border-radius:16px}
@media (max-width:1080px){.svc-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.calc{grid-template-columns:1fr}.reg-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.svc-cards,.reg-grid,.adv-grid{grid-template-columns:1fr}}

/* ---- brand logos (images/brands/, es_brand_logo) ---- */
.brand-logos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:1rem}
.brand-logos a{display:grid; place-items:center; height:96px; padding:1rem 1.25rem; background:#fff; border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--ink); font-weight:500; transition:border-color .2s ease, box-shadow .3s ease, translate .3s ease}
.brand-logos a:hover, .brand-logos a:focus-visible{border-color:var(--sun); box-shadow:0 10px 40px -5px rgba(3,43,68,.18); translate:0 -3px}
.brand-logos img{display:block; width:100%; height:44px; object-fit:contain; transition:scale .3s ease}
.brand-logos a:hover img{scale:1.05}
.logo-tile .mark img{width:100%; height:44px; object-fit:contain}
.tbl-brand{display:flex; align-items:center; gap:.85rem; font:500 1.05rem/1.2 var(--f-body)}
.tbl-brand img{flex:0 0 auto; width:96px; height:28px; object-fit:contain; object-position:left center}
.hero-logo{display:inline-grid; place-items:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:.9rem 1.4rem; margin-bottom:1.25rem; box-shadow:0 10px 40px -5px rgba(3,43,68,.12)}
.hero-logo img{display:block; width:200px; height:52px; object-fit:contain}
@media (max-width:620px){.brand-logos{grid-template-columns:repeat(2,1fr)}.brand-logos a{height:80px}.tbl-brand img{width:72px}}

/* ---- service, commercial and rebate pages (approved designs: cleaning, commercial solar, rebates Victoria) ---- */
.punch{background:var(--brand); color:var(--on-dark); position:relative; overflow:hidden}
.punch::after{content:""; position:absolute; right:-80px; top:-80px; width:260px; height:260px; border-radius:50%; background:var(--sun); opacity:.22; pointer-events:none}
.punch .wrap{display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; padding:3.5rem 0; position:relative; z-index:1}
.punch h2{color:#fff; font-size:clamp(1.9rem,3.6vw,2.8rem); margin-bottom:.35rem; max-width:24ch}
.punch p{color:var(--on-dark); margin:0}
.punch-kicker{text-transform:uppercase; letter-spacing:.1em; font-size:.82rem; font-weight:500; color:var(--sun)!important; margin-bottom:.5rem!important}
.punch-acts{display:flex; gap:.75rem; flex-wrap:wrap}
.btn-ghost{border-color:#fff; color:#fff; background:transparent}
.btn-ghost:hover{background:#fff; color:var(--brand); text-decoration:none}
.ind-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.ind{display:flex; gap:1rem; align-items:flex-start; padding:1.25rem; background:var(--bg); border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--text); font-size:1rem; transition:border-color .2s ease, box-shadow .3s ease, translate .3s ease}
a.ind:hover{border-color:var(--sun); box-shadow:0 10px 40px -5px rgba(3,43,68,.15); translate:0 -3px}
.ind b{display:block; color:var(--ink); font-family:var(--f-display); font-weight:500; font-size:1.1rem; margin-bottom:.2rem}
.ind-ico{flex:0 0 52px; height:52px; border-radius:50%; background:var(--surface); color:var(--brand); display:grid; place-items:center; transition:background .2s ease, color .2s ease}
a.ind:hover .ind-ico{background:var(--sun); color:#fff}
.opt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2rem}
.opt-card{display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; color:var(--text); transition:border-color .2s ease, box-shadow .3s ease, translate .3s ease}
.opt-card:hover{border-color:var(--sun); box-shadow:0 10px 40px -5px rgba(3,43,68,.2); translate:0 -4px}
.opt-card figure{margin:0}
.opt-card .ill{display:block; width:100%; height:auto; aspect-ratio:400/240; object-fit:cover; border-radius:0}
.opt-card:hover .more{color:var(--sun)}
.feature-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:2rem}
.feature-row > div{border-top:3px solid var(--sun); padding-top:1rem}
.feature-row h3{font-size:1.125rem}
.feature-row p{font-size:1rem; margin:0}
.trust-docs{margin-top:2.5rem; background:var(--surface); border-radius:14px; padding:1.75rem 2rem}
.trust-docs h3{margin-bottom:.8rem; font-size:1.25rem}
.trust-docs ul{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem 1.5rem}
.trust-docs li{padding-left:1.6rem; position:relative; color:var(--ink)}
.trust-docs li::before{content:"\2713"; position:absolute; left:0; color:var(--sun); font-weight:500}
.rb-card ul{margin:.25rem 0 1rem; padding-left:1.1rem}
.rb-card li{margin-bottom:.35rem}
.timeline{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; position:relative}
.timeline::before{content:""; position:absolute; left:0; right:0; top:14px; border-top:3px solid var(--line)}
.timeline li{position:relative; padding-top:2.4rem}
.timeline li::before{content:""; position:absolute; top:4px; left:0; width:22px; height:22px; border-radius:50%; background:var(--bg); border:4px solid var(--line)}
.timeline li.past::before{background:var(--brand); border-color:var(--brand)}
.timeline li.next::before{background:var(--sun); border-color:var(--sun); box-shadow:0 0 0 6px rgba(156,203,59,.3)}
.timeline time{font:500 1rem/1.2 var(--f-display); color:var(--muted)}
.timeline li.next time{color:var(--ink)}
.timeline h3{font-size:1.05rem; margin:.35rem 0 .3rem}
.timeline p{font-size:.95rem; margin:0}
.checklist{list-style:none; padding:0; margin:1rem 0; display:grid; gap:.6rem}
.checklist li{padding-left:2.1rem; position:relative}
.checklist li::before{content:"\2713"; position:absolute; left:0; top:.1rem; width:1.45rem; height:1.45rem; border-radius:50%; background:var(--sun); color:#fff; font-size:.85rem; display:grid; place-items:center}
.claim-cols{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}
.claim-col{border-radius:16px; padding:1.75rem 2rem}
.claim-col ol{margin:0; padding-left:1.2rem; display:grid; gap:.55rem}
.claim-col.us{background:var(--brand); color:var(--on-dark)}
.claim-col.us h3{color:#fff}
.claim-col.us li::marker{color:var(--sun)}
.claim-col.you{background:var(--surface)}
.sources{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.sources li{background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.25rem}
.sources a{font-weight:500}
.sources span{display:block; font-size:.95rem; color:var(--muted); margin-top:.3rem}
.wait{color:#fff; background:rgba(156,203,59,.16); border-left:3px solid var(--sun); padding:.7rem .9rem; border-radius:0 10px 10px 0; margin:0 0 1.25rem}
.wait:empty{display:none}
table.compare td{color:var(--text)}
@media (max-width:1080px){.feature-row{grid-template-columns:1fr 1fr}.timeline{grid-template-columns:repeat(3,1fr); row-gap:2rem}.timeline::before{display:none}}
@media (max-width:900px){.ind-grid,.opt-grid{grid-template-columns:1fr 1fr}.trust-docs ul{grid-template-columns:1fr 1fr}.claim-cols,.sources{grid-template-columns:1fr}.punch .wrap{padding:3rem 0}}
@media (max-width:620px){.ind-grid,.opt-grid,.feature-row,.trust-docs ul{grid-template-columns:1fr}.timeline{grid-template-columns:1fr 1fr}}
.process .mid-cta p{color:#fff}
/* grid columns may hold wide tables: let them shrink so the table scrolls inside .tbl-wrap instead of the page */
.two > *, .trust-split > *, .climate-split > *, .hero .wrap > *, .rebate .wrap > *{min-width:0}
@media (max-width:620px){
  .btn{white-space:normal; text-align:center; padding:1rem 1.5rem}
  .mid-cta div, .punch-acts{width:100%}
  .mid-cta .btn, .punch-acts .btn{flex:1 1 100%}
}
/* keep absolutely-positioned helpers (sr-only text, hidden radio inputs) inside their box */
.tbl-wrap, .choice{position:relative}