/* ============ RESET & BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --blue:#3CB2E1;
  --blue-dark:#1E8FC0;
  --blue-tint:#D6EFFA;
  --green:#44A762;
  --green-dark:#287140;
  --green-tint:#DCF2E3;
  --red:#D9534F;
  --red-dark:#B33A3A;
  --red-tint:#F8DCDC;
  --ink:#20262B;
  --text:#20262B;
  --gray:#6E6E6E;
  --gray-light:#96A0A5;
  --bg:#FFFFFF;
  --bg-soft:#E7EEF1;
  --card-bg:#FFFFFF;
  --border:#D2DADD;
  --radius:14px;
  --shadow:0 4px 20px rgba(32,38,43,0.08);
  --shadow-lg:0 12px 40px rgba(32,38,43,0.14);
  --maxw:1160px;
  --brand-gradient:linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
  font-size:16px;
}
/* ============ DARK THEME ============ */
[data-theme="dark"]{
  --blue-dark:#5FC3EA;
  --green-dark:#8FCB94;
  --blue-tint:rgba(60,178,225,0.16);
  --green-tint:rgba(123,179,128,0.18);
  --red-dark:#F0A7A7;
  --red-tint:rgba(217,83,79,0.16);
  --text:#EAEDEF;
  --gray:#A7B0B5;
  --gray-light:#828C92;
  --bg:#14181C;
  --bg-soft:#1A1F24;
  --card-bg:#1D2227;
  --border:#2C3339;
  --shadow:0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:0 16px 44px rgba(0,0,0,0.55);
}
[data-theme="dark"] .btn-outline{color:var(--text);}
[data-theme="dark"] .hero-visual .badge-float{background:rgba(29,34,39,0.97);}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease, color .2s ease;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;cursor:pointer;border:none;background:none;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
h1,h2,h3,h4{line-height:1.15;font-weight:800;letter-spacing:-0.01em;}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:14px;}
h3{font-size:1.2rem;margin-bottom:8px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.78rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--blue-dark);background:var(--blue-tint);
  padding:6px 14px;border-radius:100px;margin-bottom:16px;
}
.eyebrow.green{color:var(--green-dark);background:var(--green-tint);}
.section{padding:88px 0;}
.section-soft{
  background:
    radial-gradient(circle at 95% 0%, rgba(60,178,225,0.16) 0%, transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(68,167,98,0.18) 0%, transparent 45%),
    var(--bg-soft);
}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head p{color:var(--gray);font-size:1.05rem;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:100px;font-weight:700;font-size:0.95rem;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(60,178,225,0.35);}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--border);}
.btn-outline:hover{border-color:var(--text);transform:translateY(-2px);}
.btn-white{background:#fff;color:var(--ink);}
.btn-white:hover{transform:translateY(-2px);}
.btn-sm{padding:10px 18px;font-size:0.85rem;}

/* ============ HEADER / NAV ============ */
header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
}
[data-theme="dark"] header{background:rgba(20,24,28,0.85);}
header::before{content:"";display:block;height:4px;background:var(--brand-gradient);}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;max-width:var(--maxw);margin:0 auto;}
.logo-link{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.logo-link img{height:52px;width:auto;flex-shrink:0;}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-links a{
  padding:10px 16px;border-radius:100px;font-weight:600;font-size:0.94rem;color:var(--text);
  transition:background .15s ease,color .15s ease;
}
.nav-links a:hover{background:var(--bg-soft);}
.nav-links a.active{background:var(--blue-tint);color:var(--blue-dark);}
.nav-cta{display:flex;align-items:center;gap:18px;}

/* Services dropdown (desktop) */
.nav-dropdown{position:relative;}
.nav-dropdown-trigger{display:inline-flex;align-items:center;gap:5px;}
.nav-dropdown-trigger .chevron{transition:transform .18s ease;flex-shrink:0;}
.nav-dropdown:hover .nav-dropdown-trigger .chevron,
.nav-dropdown:focus-within .nav-dropdown-trigger .chevron{transform:rotate(180deg);}
.nav-dropdown-menu{
  /* top:100% with no added gap — a gap here creates a dead zone the mouse has
     to cross before reaching the menu, which breaks :hover and makes the
     menu vanish while moving the cursor down from the trigger. */
  position:absolute;top:100%;left:0;padding-top:8px;min-width:220px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .15s ease, visibility .15s ease;
  z-index:150;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity:1;visibility:visible;pointer-events:auto;
}
.nav-dropdown-menu-inner{
  background:var(--card-bg);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow-lg);padding:8px;
  transform:translateY(-6px);transition:transform .18s ease;
}
.nav-dropdown:hover .nav-dropdown-menu-inner,
.nav-dropdown:focus-within .nav-dropdown-menu-inner{
  transform:translateY(0);
}
.nav-dropdown-menu a{
  display:block;padding:11px 14px;border-radius:9px;font-weight:600;font-size:0.9rem;color:var(--text);
}
.nav-dropdown-menu a:hover{background:var(--bg-soft);}
.nav-phone{display:flex;align-items:center;gap:8px;font-weight:700;font-size:0.92rem;color:var(--text);}
.nav-phone svg{flex-shrink:0;}
.theme-toggle{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--border);color:var(--text);
  transition:background .15s ease, border-color .15s ease;
}
.theme-toggle:hover{background:var(--bg-soft);}
.theme-toggle .icon-moon{display:none;}
[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
[data-theme="dark"] .theme-toggle .icon-moon{display:block;}
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;}
.hamburger span{width:24px;height:2.5px;background:var(--text);border-radius:2px;}

/* ============ HERO ============ */
.hero{
  padding:72px 0 64px;
  background:radial-gradient(circle at 88% 8%, rgba(60,178,225,0.16) 0%, transparent 50%),
             radial-gradient(circle at 8% 95%, rgba(123,179,128,0.20) 0%, transparent 48%),
             radial-gradient(circle at 50% 40%, rgba(60,178,225,0.05) 0%, transparent 60%);
}
.hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin-bottom:14px;}
.hero h1 .accent,.page-hero h1 .accent{background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p.lead{font-size:1.15rem;color:var(--gray);max-width:520px;margin-bottom:32px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px;}
.trust-strip{display:flex;flex-wrap:wrap;gap:22px;}
.trust-item{display:flex;align-items:center;gap:8px;font-size:0.86rem;font-weight:700;color:var(--gray);}
.trust-item .dot{width:6px;height:6px;border-radius:50%;background:var(--green);}
.hero-visual{
  position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1/1;
  background:var(--ink);
  display:flex;align-items:flex-end;padding:28px;box-shadow:var(--shadow-lg);
}
.hero-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* This used to carry a full-photo dark gradient so overlaid text stayed
   legible, back when the review badge spanned the full width translucently.
   The badge is now a small opaque card (see .badge-float), so it no longer
   needs the photo behind it darkened - removing the gradient keeps the
   team photo at full, undimmed brightness. */
.hero-visual::before{content:none;}
.hero-visual .badge-float{
  position:relative;z-index:4;background:rgba(255,255,255,0.97);border-radius:14px;padding:14px 18px;
  box-shadow:var(--shadow-lg);width:auto;max-width:240px;margin-left:auto;
}
.hero-visual a.badge-float{display:block;text-decoration:none;color:inherit;transition:transform .15s ease, box-shadow .15s ease;}
.hero-visual a.badge-float:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,0.2);}
.hero-visual .badge-float .stars{color:#F5A623;letter-spacing:2px;font-size:0.9rem;}
.hero-visual .badge-float strong{font-size:1.15rem;}

/* ============ STATS / WHY US STRIP ============ */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.stat-card{background:var(--card-bg);padding:32px 24px;text-align:center;}
.stat-card:nth-child(odd){background:var(--blue-tint);}
.stat-card:nth-child(even){background:var(--green-tint);}
.stat-card .num{font-size:2.1rem;font-weight:800;display:block;margin-bottom:6px;}
.stat-card:nth-child(odd) .num{color:var(--blue-dark);}
.stat-card:nth-child(even) .num{color:var(--green-dark);}
.stat-card .label{font-size:0.88rem;color:var(--gray);font-weight:600;}

/* ============ SERVICE CARDS ============ */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.service-card{
  background:var(--card-bg);border:1px solid var(--border);border-top:3px solid transparent;border-radius:var(--radius);padding:28px 24px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.service-card.blue{border-top-color:var(--blue);}
.service-card.green{border-top-color:var(--green);}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.service-card .icon{
  width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.service-card .icon.blue{background:var(--blue);color:#fff;}
.service-card .icon.green{background:var(--green);color:#fff;}
.service-card p{color:var(--gray);font-size:0.94rem;margin-bottom:14px;}
.service-card .link-arrow{font-size:0.86rem;font-weight:700;color:var(--blue-dark);display:inline-flex;align-items:center;gap:4px;}

/* A 2-up "pick a brand" row (currently used on the EV Charging page for
   myenergi vs Sig Energy). Flex + flex-basis so it reflows to a single
   column on narrow screens without needing its own media query. */
.option-cards-row{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;}
.option-cards-row .service-card{flex:1 1 300px;max-width:340px;}

/* ============ PROJECTS ============ */
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.project-card{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--card-bg);transition:transform .18s ease, box-shadow .18s ease;}
.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.project-thumb{
  aspect-ratio:12/7;display:flex;align-items:flex-end;justify-content:flex-end;color:#fff;font-weight:700;
  position:relative;overflow:hidden;background:var(--bg-soft);
}
.project-thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .3s ease;}
.project-card:hover .project-thumb img{transform:scale(1.05);}
.project-thumb span.kw{position:relative;margin:12px;background:rgba(255,255,255,0.92);color:var(--ink);font-size:0.72rem;padding:4px 10px;border-radius:100px;font-weight:800;}
.project-info{padding:14px 16px;}
.project-info .loc{font-size:0.78rem;color:var(--gray-light);font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.project-info .name{font-weight:700;font-size:0.95rem;margin-top:2px;}

/* ============ REVIEWS ============ */
.reviews-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:36px;}
.rating-badge{display:flex;align-items:center;gap:16px;}
a.rating-badge{text-decoration:none;color:inherit;transition:opacity .15s ease;}
a.rating-badge:hover{opacity:0.75;}
.see-reviews{font-size:0.82rem;font-weight:700;color:var(--blue-dark);margin-top:4px;}
a:hover .see-reviews{text-decoration:underline;}
.rating-badge .score{font-size:2.6rem;font-weight:800;}
.rating-badge .stars{color:#F5A623;font-size:1.2rem;letter-spacing:2px;}
.rating-badge .count{color:var(--gray);font-size:0.9rem;}
#google-reviews-widget{min-height:60px;}
.reviews-scroll{
  overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.reviews-track{
  display:flex;gap:20px;width:max-content;
  animation:reviews-scroll 52s linear infinite;
}
.reviews-track:hover{animation-play-state:paused;}
@keyframes reviews-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .reviews-track{animation:none;overflow-x:auto;}
}
.review-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:24px;
  flex:0 0 340px;width:340px;
}
.review-card .stars{color:#F5A623;letter-spacing:2px;margin-bottom:10px;}
.review-card p{font-size:0.92rem;color:var(--text);margin-bottom:14px;}
.review-card .who{font-size:0.82rem;font-weight:700;color:var(--gray);}
.reviews-note{
  margin-top:20px;font-size:0.82rem;color:var(--gray-light);text-align:center;
  border:1px dashed var(--border);border-radius:10px;padding:10px 16px;
}

/* ============ PARTNER LOGOS ============ */
/* Flex (not grid) so a partial last row - e.g. 7 logos wrapping to a row of
   3 - centers itself instead of sitting left-aligned with an empty gap on
   the right, which is what a grid does with leftover cells. */
.partners-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:20px;
  max-width:900px;margin:0 auto;
}
.partners-row .partner-chip{flex:0 0 calc((100% - 40px) / 3);}
.partner-chip{
  padding:16px 20px;border:1px solid var(--border);border-radius:16px;
  background:#fff;display:flex;align-items:center;justify-content:center;
  height:88px;transition:box-shadow .18s ease, transform .18s ease;
}
.partner-chip:hover{box-shadow:var(--shadow);transform:translateY(-2px);}
.partner-chip img{height:40px;width:auto;max-width:100%;object-fit:contain;}
/* Text-only variant for brand partners we don't have a logo file for yet —
   same card size as the image chips so the row still lines up, just a bold
   name instead of artwork. Swap in a real logo image as soon as one's supplied. */
.partner-chip-text{font-weight:800;font-size:0.92rem;color:var(--gray);text-align:center;letter-spacing:0.01em;line-height:1.25;}
/* Small white "plate" for standalone brand logos placed outside the .partner-chip
   grid — e.g. a logo sitting directly on the page background rather than in a
   Trusted Brands row. Several vendor logo files are opaque JPGs/PNGs with a white
   background baked in (not real transparency), and a couple of transparent ones
   use a muted colour that's too low-contrast to read on a dark surface. Wrapping
   them in this fixed white plate — same idea as .partner-chip, just sized to fit
   its content instead of a fixed grid cell — keeps them looking correct in dark
   mode without needing a redesigned/transparent version of every logo file. */
.logo-plate{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 16px;line-height:0;}
.logo-plate img{display:block;}

/* ============ FINANCE / CTA BAND ============ */
.cta-band{
  background:
    radial-gradient(circle at 90% 100%, rgba(123,179,128,0.35) 0%, transparent 55%),
    radial-gradient(circle at 5% 0%, rgba(60,178,225,0.35) 0%, transparent 50%),
    linear-gradient(120deg,var(--ink) 0%, #2C3A40 100%);
  border-radius:24px;padding:56px;color:#fff;display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;
  position:relative;overflow:hidden;
}
.cta-band h2{color:#fff;margin-bottom:10px;}
.cta-band p{color:rgba(255,255,255,0.75);font-size:1rem;}
.cta-band-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:rgba(255,255,255,0.7);padding:64px 0 28px;margin-top:40px;border-top:4px solid transparent;border-image:var(--brand-gradient);border-image-slice:1;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;margin-bottom:48px;}
.footer-col h4{color:#fff;font-size:0.9rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;}
.footer-col ul li{margin-bottom:10px;font-size:0.9rem;}
.footer-col ul li a:hover{color:#fff;}
.footer-logo{height:48px;margin-bottom:16px;display:inline-block;}
.footer-col p{font-size:0.88rem;line-height:1.7;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:0.8rem;color:rgba(255,255,255,0.45);}
.social-row{display:flex;gap:10px;margin-top:16px;}
.social-row a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;}
.social-row a:hover{background:var(--blue);}

/* ============ PAGE HERO (sub-page banner) ============ */
.page-hero{
  padding:56px 0 40px;text-align:left;
  background:
    radial-gradient(circle at 92% 0%, rgba(60,178,225,0.14) 0%, transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(123,179,128,0.16) 0%, transparent 45%),
    var(--bg-soft);
}
.page-hero h1{font-size:clamp(2rem,4vw,2.8rem);}
.page-hero p{color:var(--gray);max-width:600px;margin-top:14px;font-size:1.05rem;}
.breadcrumb{font-size:0.82rem;color:var(--gray-light);margin-bottom:14px;}

/* ============ SERVICE DETAIL SECTIONS ============ */
.service-detail{padding:64px 0;border-bottom:1px solid var(--border);}
.service-detail:last-child{border-bottom:none;}
.service-detail-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:start;}
.service-detail-visual{
  position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:5/4;color:#fff;
  box-shadow:var(--shadow);background:var(--ink);
}
.service-detail-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.service-detail-visual .visual-badge{
  position:absolute;bottom:18px;left:18px;width:58px;height:58px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,0.25);
}
.service-detail-visual .visual-badge svg{width:30px;height:30px;}

/* ============ MURAL CIRCLES (Why Us - team photo cluster) ============ */
/* Echoes the winding-line-and-circles graphic on the In Series office wall:
   a handful of photos as overlapping circle cutouts joined by a brand-
   gradient line, instead of one single rectangular photo. Circle sizes are
   width/height pairs chosen so each renders as a true circle against this
   container's fixed 4:5 aspect ratio (height% = width% * 0.8). */
.mural-circles{position:relative;width:100%;height:100%;border-radius:var(--radius);overflow:hidden;background:var(--bg-soft);}
.mural-circles .mural-line{position:absolute;inset:0;width:100%;height:100%;}
.mural-circles .m-circle{
  position:absolute;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 6px var(--bg),0 10px 24px rgba(0,0,0,0.2);
}
.mural-circles .m-circle img{width:100%;height:100%;object-fit:cover;display:block;}
.mural-circles .m-badge{
  position:absolute;border-radius:50%;background:#fff;box-sizing:border-box;padding:12px;
  box-shadow:0 0 0 6px var(--bg),0 10px 24px rgba(0,0,0,0.2);
}
.mural-circles .m-badge img{width:100%;height:100%;object-fit:contain;display:block;}
@media (max-width:560px){
  .mural-circles .m-circle,.mural-circles .m-badge{box-shadow:0 0 0 4px var(--bg),0 6px 16px rgba(0,0,0,0.2);}
  .mural-circles .m-badge{padding:8px;}
}

.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.tag{background:var(--bg-soft);border:1px solid var(--border);border-radius:100px;padding:5px 14px;font-size:0.78rem;font-weight:700;color:var(--gray);}
.check-list li{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;font-size:0.95rem;}
.check-list li svg{flex-shrink:0;margin-top:3px;color:var(--green-dark);}

/* ============ CREDENTIALS GRID (why us) ============ */
.cred-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.cred-card{display:flex;gap:16px;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.cred-card .icon{width:44px;height:44px;border-radius:10px;background:var(--blue-tint);color:var(--blue-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cred-card .icon.green{background:var(--green-tint);color:var(--green-dark);}
.timeline{border-left:2px solid var(--border);padding-left:28px;margin-left:6px;}
.timeline-item{position:relative;padding-bottom:32px;}
.timeline-item::before{content:"";position:absolute;left:-33px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--blue);border:3px solid var(--blue-tint);}
.timeline-item .year{font-weight:800;color:var(--blue-dark);font-size:0.85rem;}

/* ============ PHOTO BANNER (contact page + any other page that needs a
   wide photo banner under the page-hero, e.g. EV Charging) ============ */
.contact-banner, .photo-banner{
  position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:21/6;
  background:var(--ink);box-shadow:var(--shadow);margin-bottom:44px;
  display:flex;align-items:flex-end;
}
.contact-banner img, .photo-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;z-index:0;}
.contact-banner::before, .photo-banner::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(0deg, rgba(15,18,21,0.85) 0%, rgba(15,18,21,0.55) 35%, rgba(15,18,21,0) 65%),
  linear-gradient(90deg, rgba(32,38,43,0.7) 0%, rgba(32,38,43,0.2) 55%, rgba(32,38,43,0.05) 100%);}
/* Plain modifier: banner is just a photo with no overlaid caption text, so
   skip the darkening gradient that existed purely for text legibility. */
.contact-banner--plain{margin-bottom:20px;}
.contact-banner--plain::before{display:none;}
.banner-caption{color:var(--gray);font-size:1.02rem;max-width:100%;margin-bottom:44px;}
.contact-banner .banner-text, .photo-banner .banner-text{position:relative;z-index:2;color:#fff;padding:28px 34px;max-width:460px;text-shadow:0 1px 3px rgba(0,0,0,0.45);}
.contact-banner .banner-text h3, .photo-banner .banner-text h3{font-size:1.25rem;margin-bottom:6px;}
.contact-banner .banner-text p, .photo-banner .banner-text p{font-size:0.9rem;opacity:0.96;}
.contact-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:stretch;}
.contact-left{display:flex;flex-direction:column;}
.contact-info-card{background:var(--bg-soft);border-radius:var(--radius);padding:32px;}
.contact-info-row{display:flex;gap:14px;margin-bottom:22px;align-items:flex-start;}
.contact-info-row .icon{width:40px;height:40px;border-radius:10px;background:var(--card-bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--blue-dark);}
.contact-info-row .label{font-size:0.78rem;color:var(--gray-light);text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
.contact-info-row .value{font-weight:700;}
.map-embed{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);margin-top:24px;flex:1;display:flex;}
.map-embed iframe{width:100%;height:100%;min-height:220px;border:0;display:block;}
.form-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:0.85rem;font-weight:700;margin-bottom:6px;}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font:inherit;color:var(--text);
  transition:border-color .15s ease;background:var(--card-bg);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--blue);}
.form-note{font-size:0.78rem;color:var(--gray-light);margin-top:10px;}
.form-success{display:none;background:var(--green-tint);border:1px solid var(--green);color:var(--green-dark);padding:16px 18px;border-radius:10px;font-weight:700;margin-bottom:16px;}
.form-success.show{display:block;}
.form-error{display:none;background:var(--red-tint);border:1px solid var(--red);color:var(--red-dark);padding:16px 18px;border-radius:10px;font-weight:700;margin-bottom:16px;}
.form-error.show{display:block;}

/* ============ MISC ============ */
.divider-lg{height:1px;background:var(--border);margin:0;}
.badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
  /* The phone number/icon AND the Contact Us button in the header both get
     crowded against the logo on narrow screens, which was squishing it
     (flex was compressing its width while height stayed fixed). The mobile
     drawer already has both a "Contact" link and a "Call" link, so drop
     both here instead of shrinking the logo out of shape. */
  .nav-phone{display:none;}
  .nav-cta .btn-primary{display:none;}
  .logo-link img{height:46px;}
  .hero-grid,.service-detail-grid,.contact-grid{grid-template-columns:1fr !important;}
  .hero-visual{order:-1;aspect-ratio:16/9;}
  /* The floating "5.0 out of 5 / 156 Google reviews" review card is sized
     for the taller 4/5 desktop image. On the shorter 16/9 mobile image it
     covers most of the photo and looks cramped. The same rating already
     appears in the trust strip above the image and in the stats row below,
     so it's safe to just hide the overlay here rather than lose the photo.
     Needs to match "a.badge-float" specifically, not just ".badge-float" -
     the base rule at .hero-visual a.badge-float{display:block} is more
     specific than a plain ".hero-visual .badge-float", so it was winning
     over this and the card never actually hid on real phone widths. */
  .hero-visual .badge-float,
  .hero-visual a.badge-float{display:none;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .cards-grid{grid-template-columns:repeat(2,1fr);}
  .projects-grid{grid-template-columns:repeat(2,1fr);}
  .review-card{flex-basis:280px;width:280px;}
  .cred-grid{grid-template-columns:1fr;}
  .cta-band{grid-template-columns:1fr;padding:36px 28px;}
  .cta-band-actions{justify-content:flex-start;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  .section{padding:56px 0;}
  .contact-banner, .photo-banner{aspect-ratio:16/9;}
  .map-embed{flex:none;}
  .map-embed iframe{height:220px;}
}
@media (max-width: 560px){
  .cards-grid,.projects-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .partners-row{max-width:360px;}
  .partners-row .partner-chip{flex:0 0 calc(50% - 10px);}
  .contact-banner, .photo-banner{aspect-ratio:4/5;}
  .contact-banner .banner-text, .photo-banner .banner-text{max-width:none;}
}
@media (max-width: 400px){
  /* Smallest phones (e.g. iPhone SE at 320px) — trim the header further so
     logo + theme toggle + hamburger fit without overflowing. */
  .navbar{padding:12px 14px;}
  .nav-cta{gap:10px;}
  .logo-link img{height:40px;}
}

/* mobile nav drawer */
.mobile-nav{
  position:fixed;inset:0;background:var(--bg);z-index:200;display:none;flex-direction:column;padding:24px;overflow-y:auto;
}
.mobile-nav.open{display:flex;}
.mobile-nav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;flex-shrink:0;}
.mobile-nav a{display:block;padding:16px 4px;font-size:1.2rem;font-weight:700;border-bottom:1px solid var(--border);flex-shrink:0;}

/* Services dropdown (mobile drawer) */
.mobile-dropdown-trigger{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:16px 4px;font-size:1.2rem;font-weight:700;color:var(--text);
  border-bottom:1px solid var(--border);background:none;text-align:left;
  flex-shrink:0;
}
.mobile-dropdown-trigger .chevron{transition:transform .2s ease;flex-shrink:0;}
.mobile-dropdown-trigger.open .chevron{transform:rotate(180deg);}
.mobile-dropdown-menu{max-height:0;overflow:hidden;transition:max-height .25s ease;flex-shrink:0;}
.mobile-dropdown-menu.open{max-height:300px;}
.mobile-dropdown-menu a{padding:14px 4px 14px 18px;font-size:1.02rem;font-weight:600;border-bottom:1px solid var(--border);}

/* ============ SERVICES SUB-PAGES (solar / battery / electrical) ============ */
.service-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.service-hub-card{
  display:block;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:transform .18s ease, box-shadow .18s ease;
}
.service-hub-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.service-hub-thumb{aspect-ratio:4/3;overflow:hidden;background:var(--bg-soft);}
.service-hub-thumb img{width:100%;height:100%;object-fit:cover;}
.service-hub-body{padding:22px 22px 26px;}
.service-hub-body p{color:var(--gray);font-size:0.92rem;margin:10px 0 16px;}

.property-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.property-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;}
.property-card h4{font-size:0.98rem;margin-bottom:4px;}
.property-card p{font-size:0.85rem;color:var(--gray);margin:0;}

.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.step-card{position:relative;}
.step-num{
  width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:16px;flex-shrink:0;
}
.step-card p{color:var(--gray);font-size:0.92rem;}

.benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.benefit-item{display:flex;gap:14px;align-items:flex-start;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;}
.benefit-item .icon{width:38px;height:38px;border-radius:10px;background:var(--green-tint);color:var(--green-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.benefit-item h4{font-size:0.95rem;margin-bottom:3px;}
.benefit-item p{font-size:0.85rem;color:var(--gray);margin:0;}

/* ============ FEATURE POINTS (Why Us - In Series. In House.) ============ */
/* Vertical list of icon + heading + paragraph, used where a stacked
   column reads better than the 2-up benefit-grid card treatment (e.g.
   sitting beside a photo in a narrower half-width column). */
.feature-points{display:flex;flex-direction:column;gap:22px;}
.feature-point{display:flex;gap:14px;align-items:flex-start;}
.feature-point .icon{width:40px;height:40px;border-radius:10px;background:var(--blue-tint);color:var(--blue-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.feature-point .icon.green{background:var(--green-tint);color:var(--green-dark);}
.feature-point h4{font-size:1rem;margin-bottom:4px;}
.feature-point p{font-size:0.9rem;color:var(--gray);margin:0;line-height:1.65;}

.callout-box{background:var(--blue-tint);border:1px solid var(--blue);border-radius:var(--radius);padding:22px 26px;display:flex;gap:16px;align-items:flex-start;}
.callout-box .icon{color:var(--blue-dark);flex-shrink:0;margin-top:2px;}
.callout-box p{font-size:0.92rem;color:var(--text);margin:0;}
.callout-box a{font-weight:700;color:var(--blue-dark);text-decoration:underline;}

.subservice{padding:64px 0;border-bottom:1px solid var(--border);}
.subservice:last-of-type{border-bottom:none;}
.subservice-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:center;}
.subservice-visual{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:5/4;}
.subservice-visual img{width:100%;height:100%;object-fit:cover;display:block;}
.brand-row{display:flex;gap:10px;align-items:center;margin-top:20px;flex-wrap:wrap;}
.brand-chip{padding:9px 18px;border:1px solid var(--border);border-radius:100px;font-weight:700;font-size:0.85rem;color:var(--gray);background:var(--bg-soft);}

.diagram-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;}
.diagram-row figure{margin:0;}
.diagram-row img{border-radius:var(--radius);border:1px solid var(--border);width:100%;background:#fff;}
.diagram-row figcaption{text-align:center;font-size:0.82rem;color:var(--gray);font-weight:700;margin-top:10px;}

/* Flexbox (not CSS grid) so a row that doesn't divide evenly by the column
   count - e.g. 11 logos at 5 per row - has its short last row centred
   instead of left-stuck with a single orphaned logo trailing on its own line. */
.partners-row-sm{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:1080px;margin:0 auto;}
.partners-row-sm .partner-chip{flex:0 0 calc((100% - 4*16px)/5);}
/* Modifier for longer logo rows (11 logos) where 5-per-row leaves a single
   orphan on the last line even when centred - 4-per-row instead gives a
   balanced 4 / 4 / 3 split. Scoped to min-width:901px only, so it can't
   out-specificity the 3-col/2-col responsive rules below at narrower sizes. */
@media (min-width: 901px){
  .partners-row-sm.partners-4col .partner-chip{flex:0 0 calc((100% - 3*16px)/4);}
}
/* Same idea as .partners-row-sm, but for rows of exactly 4 logos (e.g. Why Us) —
   a dedicated class instead of an inline grid-template-columns override, so it
   still responds properly to the breakpoints below instead of getting stuck at
   4 cramped columns on mobile (inline styles can't be overridden by a media query). */
.partners-row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:860px;margin:0 auto;}

@media (max-width: 900px){
  .service-hub-grid{grid-template-columns:1fr;}
  .property-grid{grid-template-columns:repeat(2,1fr);}
  .step-grid{grid-template-columns:1fr;}
  .benefit-grid{grid-template-columns:1fr;}
  .subservice-grid{grid-template-columns:1fr;}
  .diagram-row{grid-template-columns:1fr;}
  .partners-row-sm .partner-chip{flex:0 0 calc((100% - 2*16px)/3);}
  .partners-row-4{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 560px){
  .property-grid{grid-template-columns:1fr;}
  .partners-row-sm .partner-chip{flex:0 0 calc((100% - 16px)/2);}
  .partners-row-4{grid-template-columns:repeat(2,1fr);}
}

/* ============ BACK TO TOP ============ */
.back-to-top{
  position:fixed;right:26px;bottom:26px;width:46px;height:46px;border-radius:50%;
  background:var(--blue);color:#fff;border:none;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);cursor:pointer;z-index:140;
  opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease, transform .2s ease, background .18s ease;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.back-to-top:hover{background:var(--blue-dark);}
@media (max-width: 560px){
  .back-to-top{right:16px;bottom:16px;width:42px;height:42px;}
}
@media (prefers-reduced-motion: reduce){
  .back-to-top{transition:opacity .2s ease, visibility .2s ease;transform:none;}
}


/* ============ TASSIE BANNER (index only) ============ */
/* Slim full-width ribbon under the hero, using the white Tasmania wordmark
   logo. Its background is the same blue as --blue, so this background is
   just a seamless edge fallback behind the logo's own transparency. This is
   a wide horizontal wordmark (not the compact square badge used elsewhere
   on the site), so it's sized much shorter than that badge would be. */
.tassie-banner{background:var(--blue);text-align:center;line-height:0;padding:18px 0;}
.tassie-banner img{height:60px;width:auto;max-width:100%;display:inline-block;}
@media (max-width:560px){
  .tassie-banner{padding:12px 0;}
  .tassie-banner img{height:44px;}
}

/* ============ TASSIE SEAL (footer) ============ */
/* Trust-seal treatment for the Tasmania logo badge, sitting quietly in the
   footer next to the logo/blurb instead of as a full-width bar. The badge
   is a flat icon (not a photo), so it sits on a white plate with
   object-fit:contain rather than being cropped to fill a circle. */
.footer-seal{display:flex;align-items:center;margin-top:18px;}
.footer-seal img{width:132px;height:132px;border-radius:50%;object-fit:contain;background:#fff;padding:12px;box-sizing:border-box;box-shadow:0 0 0 3px rgba(255,255,255,0.1);flex-shrink:0;}

/* ============ TASSIE SEAL (photo overlay) ============ */
/* Larger version of the same seal, stamped onto a hero/section photo on
   pages where we want more presence than the footer gives it (Why Us,
   Contact). Sits inside a position:relative photo container, same corner-
   badge idiom as .visual-badge elsewhere on the site. White plate + ring +
   shadow keeps it legible regardless of what's directly behind it in the
   photo, and object-fit:contain (rather than cover) shows the whole badge
   icon instead of cropping it like the old photographic seal. */
/* Higher-specificity selectors are needed here (not just .photo-seal) so
   this beats the container's own "img{width:100%;height:100%;inset:0}"
   rules, which otherwise stretch this badge to fill the whole photo. */
.service-detail-visual .photo-seal,
.contact-banner .photo-seal,
.photo-banner .photo-seal{
  position:absolute;top:auto;right:auto;bottom:18px;left:auto;
  width:88px;height:88px;border-radius:50%;object-fit:contain;background:#fff;padding:10px;box-sizing:border-box;
  box-shadow:0 6px 18px rgba(0,0,0,0.35),0 0 0 4px rgba(255,255,255,0.95);
  z-index:3;
}
.photo-seal.bl{left:18px;}
.photo-seal.br{right:18px;}
@media (max-width:560px){
  .service-detail-visual .photo-seal,
  .contact-banner .photo-seal,
  .photo-banner .photo-seal{
    width:64px;height:64px;bottom:12px;padding:7px;
    box-shadow:0 4px 12px rgba(0,0,0,0.35),0 0 0 3px rgba(255,255,255,0.95);
  }
  .photo-seal.bl{left:12px;}
  .photo-seal.br{right:12px;}
  /* On the photo-banner (e.g. Solar page), the caption text below expands
     to the full card width at this size (.banner-text max-width:none),
     which runs right under the bottom-right badge. Move it up to the clear
     sky area at the top of the photo instead of overlapping the text.
     (Contact page no longer needs this - its caption now sits below the
     photo entirely, not overlaid on it.) */
  .photo-banner .photo-seal.br{
    bottom:auto;top:12px;
  }
}