/* ==========================================================================
   QUALITY POWER CONTROLS — Monochrome Editorial System
   ========================================================================== */

:root{
  --c-000:#000000;
  --c-111:#111111;
  --c-222:#222222;
  --c-3a:#3A3A3A;
  --c-66:#666666;
  --c-bd:#BDBDBD;
  --c-e5:#E5E5E5;
  --c-f7:#F7F7F7;
  --c-fff:#FFFFFF;

  --bg: var(--c-fff);
  --bg-soft: var(--c-f7);
  --ink: var(--c-000);
  --ink-soft: var(--c-3a);
  --muted: var(--c-66);
  --line: rgba(0,0,0,0.12);
  --line-strong: rgba(0,0,0,0.22);
  --line-invert: rgba(255,255,255,0.22);

  /* Premium black/white contrast tokens */
  --premium-black: #000000;
  --premium-white: #FFFFFF;
  --premium-border-light: rgba(255,255,255,0.25);
  --premium-border-dark: rgba(0,0,0,0.20);

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --shadow-sm: 0 2px 10px rgba(0,0,0,0.06);
  --shadow-md: 0 20px 60px rgba(0,0,0,0.12);
  --shadow-lg: 0 30px 80px rgba(0,0,0,0.22);

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --font-head: 'Manrope', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .25s;
  --dur-med: .5s;
  --dur-slow: .9s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--bg);
  padding:12px 20px; z-index:999; font-weight:700;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- Typography ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:.75rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--muted); display:inline-block; }
.eyebrow.on-dark{ color:var(--c-bd); }
.eyebrow.on-dark::before{ background:var(--c-bd); }

.display-1{
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(2.6rem, 7vw, 6.4rem);
  line-height:.98;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:0;
}
.display-2{
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(2.2rem, 5.4vw, 4.4rem);
  line-height:1.02;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin:0;
}
h2.section-title{
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(1.8rem, 3.6vw, 3rem);
  line-height:1.05;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0;
}
h3.card-title{
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(1.2rem, 2vw, 1.6rem);
  text-transform:uppercase;
  letter-spacing:-.005em;
  margin:0 0 10px;
}
.lede{
  font-size:clamp(1.05rem, 1.6vw, 1.35rem);
  line-height:1.55;
  color:var(--ink-soft);
  max-width:56ch;
}
.body-copy{ font-size:1rem; line-height:1.7; color:var(--ink-soft); max-width:60ch; }
.on-dark{ color:var(--premium-white); }
.on-dark .body-copy, .on-dark p{ color:var(--premium-white); }

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px;
  font-weight:700; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--ink); border-radius:2px;
  background:var(--ink); color:var(--bg);
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn::before{
  content:''; position:absolute; inset:0; background:var(--bg);
  transform:translateY(101%); transition:transform var(--dur-fast) var(--ease); z-index:-1;
}
.btn:hover::before, .btn:focus-visible::before{ transform:translateY(0); }
.btn:hover, .btn:focus-visible{ color:var(--ink); }

.btn-ghost{
  background:transparent; color:var(--ink); border:1px solid var(--line-strong);
}
.btn-ghost::before{ background:var(--ink); }
.btn-ghost:hover, .btn-ghost:focus-visible{ color:var(--bg); }

.btn-invert{
  background:var(--bg); color:var(--ink); border:1px solid var(--bg);
}
.btn-invert::before{ background:var(--ink); }
.btn-invert:hover, .btn-invert:focus-visible{ color:var(--bg); }

.btn-invert-ghost{
  background:transparent; color:var(--bg); border:1px solid var(--line-invert);
}
.btn-invert-ghost::before{ background:var(--bg); }
.btn-invert-ghost:hover, .btn-invert-ghost:focus-visible{ color:var(--ink); }

.btn-sm{ padding:12px 22px; font-size:.75rem; }

.btn .arrow{ display:inline-block; transition:transform var(--dur-fast) var(--ease); }
.btn:hover .arrow, .btn:focus-visible .arrow{ transform:translateX(3px); }

.btn:active{ transform:scale(.98); }
.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.btn-invert:focus-visible, .btn-invert-ghost:focus-visible{ outline-color:var(--bg); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; pointer-events:none; }

/* ---------- Glow CTA (premium energy accent) ---------- */
.glow-wrap{ position:relative; display:inline-flex; isolation:isolate; }
.glow-wrap::before{
  content:'';
  position:absolute;
  inset:-3px;
  z-index:-1;
  border-radius:4px;
  background:conic-gradient(from 0deg, #7dd3fc, #fef08a, #fda4af, #a5b4fc, #7dd3fc);
  filter:blur(14px);
  opacity:.55;
  transform:scale(.92);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  animation:glow-shift 3s linear infinite;
}
.glow-wrap:hover::before, .glow-wrap:focus-within::before{ opacity:.85; transform:scale(1.04); }
.glow-wrap .btn{ position:relative; z-index:1; }
@keyframes glow-shift{
  0%{ filter:blur(14px) hue-rotate(0deg); }
  100%{ filter:blur(14px) hue-rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .glow-wrap::before{ animation:none; }
}

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  background:transparent;
  transition:background var(--dur-fast) var(--ease), padding var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-solid{
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(10px);
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.site-header.is-light{
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(10px);
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{
  font-family:var(--font-head); font-weight:800; text-transform:uppercase;
  font-size:1rem; letter-spacing:.02em; color:var(--bg);
  display:flex; flex-direction:column; line-height:1.15;
}
.site-header.is-light .brand{ color:var(--ink); }
.brand small{ font-family:var(--font-body); font-weight:500; font-size:.6rem; letter-spacing:.18em; color:var(--c-bd); text-transform:uppercase; }
.site-header.is-light .brand small{ color:var(--muted); }

.primary-nav{ display:flex; align-items:center; gap:38px; }
.primary-nav a{
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c-bd); position:relative; padding:6px 0;
}
.site-header.is-light .primary-nav a{ color:var(--muted); }
.primary-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform var(--dur-fast) var(--ease);
}
.primary-nav a:hover, .primary-nav a:focus-visible{ color:var(--bg); }
.site-header.is-light .primary-nav a:hover, .site-header.is-light .primary-nav a:focus-visible{ color:var(--ink); }
.primary-nav a:hover::after, .primary-nav a.active::after{ transform:scaleX(1); }
.primary-nav a.active{ color:var(--bg); }
.site-header.is-light .primary-nav a.active{ color:var(--ink); }

.header-cta{ display:flex; align-items:center; gap:14px; }
.header-cta .btn{ padding:12px 22px; font-size:.72rem; }
.site-header.is-light .header-cta .btn-invert-ghost{ color:var(--ink); border-color:var(--line-strong); }
.site-header.is-light .header-cta .btn-invert-ghost::before{ background:var(--ink); }
.site-header.is-light .header-cta .btn-invert-ghost:hover, .site-header.is-light .header-cta .btn-invert-ghost:focus-visible{ color:var(--bg); }

.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--line-invert); border-radius:2px;
  background:transparent; cursor:pointer; position:relative; padding:0;
}
.site-header.is-light .nav-toggle{ border-color:var(--line-strong); }
.nav-toggle .bar{
  position:absolute; left:12px; right:12px; height:1px; background:var(--bg);
  transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.site-header.is-light .nav-toggle .bar{ background:var(--ink); }
.nav-toggle .bar-1{ top:15px; }
.nav-toggle .bar-2{ top:21px; }
.nav-toggle .bar-3{ top:27px; }
.nav-toggle.is-open .bar-2{ opacity:0; }
.nav-toggle.is-open .bar-1{ transform:translateY(6px) rotate(45deg); }
.nav-toggle.is-open .bar-3{ transform:translateY(-6px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:99; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; padding:32px var(--gutter);
  transform:translateY(-100%); transition:transform var(--dur-med) var(--ease);
}
.mobile-nav.is-open{ transform:translateY(0); }
.mobile-nav a{
  font-family:var(--font-head); font-weight:800; text-transform:uppercase;
  font-size:clamp(2rem,9vw,3rem); color:var(--bg); padding:14px 0; border-bottom:1px solid var(--line-invert);
}
.mobile-nav a.active{ color:var(--c-bd); }
.mobile-nav .mnav-foot{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
.mobile-nav .mnav-foot a{ font-family:var(--font-body); font-size:.85rem; padding:16px 30px; border-bottom:none; }
.mobile-nav a.btn-invert{ color:var(--ink); }
.mobile-nav a.btn-invert-ghost{ color:var(--bg); }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  background:var(--ink); color:var(--bg); overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.08) saturate(1.05) brightness(.92);
  transform:scale(1.06);
}
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.4) 40%, rgba(0,0,0,.94) 100%);
}
.hero-inner{ position:relative; z-index:1; width:100%; padding:190px 0 76px; }
.hero-kicker{ margin-bottom:22px; }
.hero-title{ max-width:16ch; }
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line span{ display:block; transform:translateY(110%); }
.hero-sub{ margin-top:26px; max-width:46ch; color:var(--c-bd); font-size:clamp(1rem,1.6vw,1.2rem); line-height:1.6; }
.hero-actions{ margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; }
.hero-simple{ min-height:64vh; align-items:flex-end; }
.hero-simple .hero-inner{ padding:170px 0 60px; }

/* ---------- Trust strip ---------- */
.trust-strip{
  background:var(--ink); color:var(--bg); border-top:1px solid var(--line-invert);
  padding:20px 0;
}
.trust-strip ul{ display:flex; flex-wrap:wrap; gap:14px 40px; justify-content:space-between; }
.trust-strip li{
  font-family:var(--font-head); font-weight:700; letter-spacing:.14em; font-size:.78rem; text-transform:uppercase; color:var(--c-bd);
  display:flex; align-items:center; gap:10px;
}
.trust-strip li::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--bg); }

/* ---------- Sections ---------- */
.section{ padding:clamp(70px,10vw,140px) 0; }
.section-black{ background:var(--premium-black); color:var(--premium-white); }
.section-black .eyebrow{ color:var(--premium-white); }
.section-black .eyebrow::before{ background:var(--premium-border-light); }
.section-soft{ background:var(--bg-soft); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap; }
.section-head .lede{ margin-top:18px; }

/* Reveal-on-scroll base */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-img{ overflow:hidden; }
.reveal-img img{ transform:scale(1.12); transition:transform 1.1s var(--ease); }
.reveal-img.is-visible img{ transform:scale(1); }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-img img, .hero-title .line span{ opacity:1 !important; transform:none !important; }
}

/* ---------- Editorial intro ---------- */
.intro-block{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:end; }
.intro-block .display-2{ }
@media (max-width:880px){ .intro-block{ grid-template-columns:1fr; gap:26px; } }

/* ---------- Product / catalogue rows ---------- */
.cat-row{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:520px;
}
.cat-row.on-white{ background:var(--premium-white); color:var(--premium-black); }
.cat-row.on-black{ background:var(--premium-black); color:var(--premium-white); }
.cat-row.on-black .body-copy{ color:var(--premium-white); }
.cat-row.reverse{ direction:rtl; }
.cat-row.reverse > *{ direction:ltr; }
.cat-media{ position:relative; overflow:hidden; min-height:340px; }
.cat-media img{
  width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
  filter:contrast(1.05) saturate(1.05);
  transition:transform 1s var(--ease), filter .6s var(--ease);
}
.cat-media::after{
  content:''; position:absolute; inset:0; background:rgba(0,0,0,0);
  transition:background var(--dur-fast) var(--ease); pointer-events:none;
}
.cat-row:hover .cat-media img{ transform:scale(1.05); }
.cat-row:hover .cat-media::after{ background:rgba(0,0,0,.12); }
.cat-num{
  position:absolute; top:24px; left:24px; z-index:2;
  font-family:var(--font-head); font-weight:800; font-size:.85rem; letter-spacing:.1em;
  padding:8px 14px; border:1px solid var(--line-invert); color:var(--bg); backdrop-filter:blur(4px);
}
.cat-copy{ display:flex; flex-direction:column; justify-content:center; padding:clamp(32px,5vw,72px); gap:18px; }
.cat-copy .body-copy{ max-width:52ch; }
.cat-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.cat-tags span{
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line-strong); padding:6px 12px; color:var(--ink-soft);
}
.on-black .cat-tags span{ border-color:var(--line-invert); color:var(--c-bd); }
.cat-copy .btn{ align-self:flex-start; margin-top:8px; }
@media (max-width:880px){
  .cat-row{ grid-template-columns:1fr; min-height:auto; }
  .cat-media{ min-height:280px; }
}

/* ---------- Product tile media (self-contained product/marketing graphics) ----------
   Full-bleed cover-fit (above) is correct for plain photography, but these product
   images have their own baked-in headline text, callouts and CTAs — cropping them
   would cut that content off. This variant keeps the entire graphic visible (contain)
   on a neutral mat instead, like a premium product card rather than a photo bleed. */
.cat-media.cat-media-tile{
  background:var(--bg-soft);
  padding:clamp(22px,4vw,52px);
}
.cat-row.on-black .cat-media.cat-media-tile{ background:#0c0c0c; }
.cat-media.cat-media-tile img{
  object-fit:contain; filter:none;
  border-radius:var(--radius-md);
}
.cat-row:hover .cat-media.cat-media-tile img{ transform:scale(1.02); }
.cat-row.on-white .cat-media.cat-media-tile .cat-num{
  color:var(--ink); border-color:var(--line-strong); background:rgba(255,255,255,.78);
}

/* Small inset "secondary" product shot, floated over a cat-media-tile's corner —
   used when a section has both a primary and a secondary product image. */
.cat-media-inset{
  position:absolute; left:18px; bottom:18px; z-index:3;
  width:36%; max-width:190px; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-soft); border:3px solid var(--premium-white);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
  padding:10px; overflow:hidden;
  transition:transform var(--dur-fast) var(--ease);
}
.cat-row.on-black .cat-media-inset{ background:#0c0c0c; border-color:var(--premium-black); }
.cat-media-inset img{ width:100%; height:100%; object-fit:contain; display:block; }
.cat-row:hover .cat-media-inset{ transform:translateY(-3px); }
@media (max-width:560px){
  .cat-media-inset{ width:34%; max-width:130px; left:12px; bottom:12px; padding:7px; }
}
@media (prefers-reduced-motion: reduce){
  .cat-media.cat-media-tile img, .cat-media-inset{ transition:none; }
}

/* ---------- Text-only feature row (no product image) ----------
   Used where a cat-row's image was removed by request. Keeps the row
   premium and intentional — not an empty gap — via a large ghost
   ordinal numeral instead of a media panel. */
.cat-row.cat-row-solo{
  grid-template-columns:1fr; min-height:auto; position:relative; overflow:hidden;
}
.cat-row.cat-row-solo .cat-copy{
  max-width:820px; padding:clamp(64px,10vw,116px) clamp(24px,6vw,72px);
  position:relative; z-index:1; gap:20px;
}
.cat-row.cat-row-solo .cat-copy .body-copy{ max-width:62ch; }
.cat-row-solo .cat-num-ghost{
  position:absolute; top:50%; right:clamp(-30px,-1vw,40px); transform:translateY(-50%);
  font-family:var(--font-head); font-weight:800; font-size:clamp(160px,24vw,360px);
  line-height:1; color:var(--premium-white); opacity:.055; letter-spacing:-.02em;
  pointer-events:none; z-index:0; user-select:none;
}
@media (max-width:880px){
  .cat-row-solo .cat-num-ghost{ font-size:clamp(120px,40vw,220px); opacity:.06; }
}
@media (max-width:560px){
  .cat-row-solo .cat-num-ghost{ display:none; }
}

/* ---------- Back-navigation link ----------
   Used on category sub-pages to return to their parent listing. Hardcoded
   pure white/black (not the inverted --bg/--ink tokens) so it always reads
   correctly regardless of the section it's dropped into. */
.back-nav-wrap{ display:flex; align-items:center; justify-content:center; padding:clamp(35px,5vw,70px) 0; }
.back-nav{ display:flex; justify-content:center; width:100%; }
.back-nav .btn-back{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:#FFFFFF; color:#000000; border:1px solid var(--line-strong);
  padding:15px 30px; font-family:var(--font-head); font-weight:700; font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.back-nav .btn-back:hover, .back-nav .btn-back:focus-visible{ background:#000000; color:#FFFFFF; }

/* ---------- Batteries & Inverters page hero — full replacement image ----------
   The uploaded composite already carries its own baked-in "Inverters and
   Batteries" headline near its top edge, so instead of layering the site's
   usual text-over-image treatment on top of it (which would collide with
   the fixed header at short hero heights), the section reserves a solid
   dark gutter for the header and starts the image cleanly below it. This
   guarantees the header and the image's own heading never overlap, at any
   breakpoint, without dimming the photo itself. */
.hero.hero-composite{
  min-height:auto; height:calc(104px + clamp(240px,42vw,660px)); align-items:flex-start;
  padding-top:104px; background:var(--premium-black);
}
.hero.hero-composite .hero-media{
  position:absolute; top:104px; left:0; right:0; bottom:auto;
  height:clamp(240px,42vw,660px);
}
.hero.hero-composite .hero-media img{
  object-fit:cover; object-position:center;
  filter:none; transform:none;
}
.hero.hero-composite .hero-media::after{ background:none; }
.hero.hero-composite .hero-inner{ padding:20px 0 0; }
.hero-composite .hero-crumb{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:700; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--premium-white); background:rgba(255,255,255,.1); backdrop-filter:blur(6px);
  padding:9px 16px; border-radius:999px; border:1px solid var(--line-invert);
}
.hero-composite .hero-crumb a{ color:inherit; text-decoration:none; }
.hero-composite .hero-crumb a:hover{ color:var(--c-bd); }
@media (max-width:640px){
  .hero.hero-composite{ padding-top:98px; height:calc(98px + clamp(220px,62vw,300px)); }
  .hero.hero-composite .hero-media{ top:98px; height:clamp(220px,62vw,300px); }
}

/* ---------- Home hero — bright, unfiltered aerial photo ----------
   Overrides the site's default hero dimming so the source photo's real
   exposure is preserved; a professional left-to-right scrim sits behind
   the text block (which is left-aligned) so the heading, eyebrow and
   description stay readable while the right side of the photo keeps its
   original brightness. */
.hero.hero-bright .hero-media img{
  filter:contrast(1.02) saturate(1.02); transform:scale(1.03);
}
.hero.hero-bright .hero-media::after{
  background:linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.08) 100%);
}

/* Text/readability tuning scoped to the home hero only — content, layout,
   fonts, sizes, weights and spacing are untouched; colors only. */
.hero.hero-bright .hero-title{ color:#FFFFFF; }
.hero.hero-bright .hero-kicker{ color:#FFFFFF; }
.hero.hero-bright .hero-kicker::before{ background:rgba(255,255,255,.75); }
.hero.hero-bright .hero-sub{ color:#F2F2F2; }
.hero.hero-bright .hero-actions .btn-invert-ghost{ border-color:rgba(255,255,255,.6); }

/* ---------- Battery & Inverter setup banner (self-contained image, own baked-in copy) ---------- */
.setup-banner{
  display:block; background:var(--premium-black); line-height:0; position:relative;
  overflow:hidden;
}
.setup-banner img{
  display:block; width:100%; height:auto;
  transition:transform 1s var(--ease);
}
.setup-banner:hover img{ transform:scale(1.015); }
@media (prefers-reduced-motion: reduce){ .setup-banner img{ transition:none; } }

/* ---------- Gateway media tile (products.html "Batteries & Inverters" card) ---------- */
.gateway-media.tile{
  background:#000; display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,3vw,40px);
}
.gateway-media.tile img{ position:absolute; inset:0; object-fit:contain; }

/* ---------- Service cards ---------- */
.service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.service-card{ background:var(--bg); padding:44px 34px; display:flex; flex-direction:column; gap:14px; transition:background var(--dur-fast) var(--ease); }
.service-card:hover{ background:var(--bg-soft); }
.service-idx{ font-family:var(--font-head); font-weight:800; font-size:.8rem; color:var(--muted); letter-spacing:.1em; }
@media (max-width:900px){ .service-grid{ grid-template-columns:1fr; } }

/* alternating black/white full-bleed services (services page) */
.svc-row{ display:grid; grid-template-columns:1fr 1fr; min-height:460px; }
.svc-row.on-white{ background:var(--premium-white); color:var(--premium-black); }
.svc-row.on-black{ background:var(--premium-black); color:var(--premium-white); }
.svc-row.on-black .body-copy{ color:var(--premium-white); }
.svc-row .cat-media{ min-height:300px; }
.svc-row.on-black .cat-media.cat-media-tile{ background:#0c0c0c; }
@media (max-width:880px){ .svc-row{ grid-template-columns:1fr; } }

/* ---------- Why us (numbered) ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:48px 32px; margin-top:20px; }
.why-item .num{
  font-family:var(--font-head); font-weight:800; font-size:clamp(2.6rem,5vw,4rem);
  color:var(--c-3a); line-height:1; margin-bottom:18px;
  -webkit-text-stroke:1px var(--c-bd); color:transparent;
}
.why-item h3{ font-family:var(--font-head); font-weight:800; text-transform:uppercase; font-size:1.05rem; color:var(--premium-white); margin-bottom:10px; }
.why-item p{ color:var(--premium-white); font-size:.95rem; line-height:1.6; }
@media (max-width:900px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--ink); color:var(--bg); padding:clamp(70px,12vw,150px) 0; text-align:center; position:relative; overflow:hidden; }
.cta-band .display-1{ margin:0 auto; }
.cta-actions{ margin-top:40px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.cta-meta{ margin-top:28px; color:var(--c-bd); font-size:.9rem; letter-spacing:.04em; }

/* ---------- Map ---------- */
.map-section{ display:grid; grid-template-columns:1.2fr .8fr; gap:0; }
.map-frame-wrap{ position:relative; min-height:440px; background:var(--c-e5); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.map-frame-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--c-e5); color:var(--muted); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  transition:opacity .4s var(--ease); pointer-events:none;
}
.map-loading.is-hidden{ opacity:0; }
.map-panel{ background:var(--ink); color:var(--bg); padding:clamp(32px,4vw,56px); display:flex; flex-direction:column; justify-content:center; gap:22px; }
.map-panel .btn{ align-self:flex-start; }
.map-panel .glow-wrap{ align-self:flex-start; }
@media (max-width:900px){ .map-section{ grid-template-columns:1fr; } .map-frame-wrap{ min-height:340px; } }

/* ---------- Contact / info blocks ---------- */
.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:10px; }
.info-card{ background:var(--bg); padding:36px 30px; }
.info-card .label{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; display:block; }
.info-card .value{ font-family:var(--font-head); font-weight:700; font-size:1.05rem; line-height:1.5; }
.info-card a.value:hover{ text-decoration:underline; }
@media (max-width:900px){ .info-grid{ grid-template-columns:1fr; } }

/* ---------- Form ---------- */
.contact-layout{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
@media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; gap:40px; } }
.enquiry-form{ display:flex; flex-direction:column; gap:22px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.field input, .field select, .field textarea{
  border:none; border-bottom:1px solid var(--line-strong); background:transparent;
  padding:12px 2px; font-size:1rem; font-family:var(--font-body); color:var(--ink);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--ink); box-shadow:0 1px 0 0 var(--ink);
}
.field textarea{ resize:vertical; min-height:110px; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:#900; }
.field-error{ font-size:.78rem; color:#900; display:none; }
.field.has-error .field-error{ display:block; }
.form-success{
  display:none; border:1px solid var(--line-strong); border-left:3px solid var(--ink); padding:22px; background:var(--bg-soft); margin-top:18px;
  opacity:0; transform:translateY(10px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.form-success.is-visible{ display:block; opacity:1; transform:translateY(0); }
.enquiry-form .btn{ align-self:flex-start; margin-top:6px; }
.enquiry-form .glow-wrap{ align-self:flex-start; margin-top:6px; }
.enquiry-form .btn[disabled]{ opacity:.6; }

/* ---------- Numbered values (about) ---------- */
.values-list{ display:flex; flex-direction:column; margin-top:20px; }
.value-row{
  display:grid; grid-template-columns:100px 1fr; gap:28px; padding:34px 0; border-top:1px solid var(--line);
  align-items:baseline;
}
.value-row:last-child{ border-bottom:1px solid var(--line); }
.value-row .num{ font-family:var(--font-head); font-weight:800; font-size:1.4rem; color:var(--c-bd); -webkit-text-stroke:1px var(--ink); color:transparent; }
.value-row h3{ font-family:var(--font-head); font-weight:800; text-transform:uppercase; font-size:1.15rem; margin-bottom:8px; }

/* ---------- Full-bleed image w/ overlay text (about) ---------- */
.statement{ position:relative; min-height:70vh; display:flex; align-items:center; overflow:hidden; }
.statement img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.05) brightness(.75); }
.statement::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.75)); }
.statement-inner{ position:relative; z-index:1; color:var(--bg); text-align:center; padding:0 var(--gutter); }
.statement-inner p{ font-family:var(--font-head); font-weight:800; text-transform:uppercase; font-size:clamp(1.8rem,4.4vw,3.6rem); line-height:1.08; max-width:20ch; margin:0 auto; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:var(--bg); padding:90px 0 30px; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; border-bottom:1px solid var(--line-invert); padding-bottom:50px; margin-bottom:40px; }
.footer-top .display-2{ max-width:14ch; }
.footer-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; }
.footer-col h4{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-bd); margin-bottom:16px; }
.footer-col a, .footer-col p{ display:block; color:var(--c-e5); font-size:.92rem; line-height:1.9; }
.footer-col a:hover{ color:var(--bg); text-decoration:underline; }
.footer-bottom{ margin-top:60px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:.78rem; color:var(--muted); }
@media (max-width:900px){ .footer-cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-cols{ grid-template-columns:1fr; } }

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:210;
  background:#fff; mix-blend-mode:difference; transition:width .08s linear;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){ .scroll-progress{ transition:none; } }

/* ---------- Mobile floating toolbar ---------- */
.mobile-toolbar{
  display:none;
  position:fixed; left:50%; bottom:16px; z-index:120;
  transform:translateX(-50%);
  width:calc(100% - 24px); max-width:420px;
  background:rgba(10,10,10,.92); backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.14); border-radius:999px;
  box-shadow:var(--shadow-lg);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-toolbar ul{ display:grid; grid-template-columns:repeat(4,1fr); align-items:stretch; }
.mobile-toolbar li{ display:flex; }
.mobile-toolbar button, .mobile-toolbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:12px 4px 10px; background:transparent; border:none; cursor:pointer;
  color:var(--bg); font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  transition:transform .2s var(--ease), color .2s var(--ease);
}
.mobile-toolbar svg{ width:20px; height:20px; transition:transform .2s var(--ease); }
.mobile-toolbar button:active svg, .mobile-toolbar a:active svg{ transform:scale(.86); }
.mobile-toolbar button:hover, .mobile-toolbar a:hover{ color:var(--c-bd); }
.mobile-toolbar button:focus-visible, .mobile-toolbar a:focus-visible{ outline:2px solid var(--bg); outline-offset:-2px; border-radius:999px; }

@media (max-width:960px){
  .primary-nav, .header-cta{ display:none; }
  .nav-toggle{ display:block; }
  .mobile-toolbar{ display:block; }
  body{ padding-bottom:96px; }
  .why-grid{ margin-top:10px; }
}
@media (min-width:768px){
  .mobile-toolbar{ display:none !important; }
}

/* ---------- Products page progression ---------- */
.progress-rail{ display:flex; gap:8px; margin-bottom:40px; flex-wrap:wrap; }
.progress-rail span, .progress-rail a{
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 14px; border:1px solid var(--line-strong); color:var(--muted);
}
.progress-rail a{
  text-decoration:none; cursor:pointer;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.progress-rail a:hover, .progress-rail a:focus-visible{ color:var(--ink); border-color:var(--ink); }

/* ---------- Brand showcase (premium logo presentation) ---------- */
.brand-showcase{ padding:clamp(56px,8vw,96px) 0; }
.brand-showcase.on-white{ background:var(--premium-white); color:var(--premium-black); }
.brand-showcase.on-black{ background:var(--premium-black); color:var(--premium-white); }
.brand-showcase.on-black .eyebrow{ color:var(--premium-white); }
.brand-showcase.on-black .eyebrow::before{ background:var(--premium-border-light); }
.brand-showcase-head{ margin-bottom:36px; }
.brand-showcase-head h4{
  font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:-.005em;
  font-size:clamp(1.1rem,2vw,1.5rem); margin-top:14px;
}

.brand-showcase-layout{ display:grid; grid-template-columns:300px 1fr; gap:44px; align-items:start; }
@media (max-width:900px){ .brand-showcase-layout{ grid-template-columns:1fr; gap:28px; } }

.brand-card-featured{
  position:relative; border:1.5px solid var(--line-strong); padding:34px 26px 28px;
  display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.brand-showcase.on-black .brand-card-featured{ border-color:var(--line-invert); }
.brand-card-featured:hover, .brand-card-featured:focus-within{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.brand-showcase.on-white .brand-card-featured:hover,
.brand-showcase.on-white .brand-card-featured:focus-within{ border-color:var(--ink); }
.brand-showcase.on-black .brand-card-featured:hover,
.brand-showcase.on-black .brand-card-featured:focus-within{ border-color:var(--premium-white); }

/* Clickable region linking a featured brand card to its official website.
   Kept separate from the WhatsApp enquiry CTA below it, since the two are
   different actions and an <a> cannot be nested inside another <a>. */
.brand-card-featured-link{
  display:flex; flex-direction:column; align-items:center; gap:16px; width:100%;
  text-decoration:none; color:inherit; border-radius:2px;
}
.brand-card-featured-link:focus-visible{ outline:2px solid var(--ink); outline-offset:6px; }
.brand-showcase.on-black .brand-card-featured-link:focus-visible{ outline-color:var(--premium-white); }

.brand-featured-tag{
  font-size:.64rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 13px; border:1px solid currentColor; border-radius:2px; opacity:.85;
}

.brand-logo-box{
  width:100%; height:112px; display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:var(--radius-sm); padding:14px;
}
.brand-card-featured .brand-logo-box{ height:148px; padding:18px; }
.brand-logo-box img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block;
  transition:transform var(--dur-fast) var(--ease);
}
.brand-card:hover .brand-logo-box img, .brand-card:focus-visible .brand-logo-box img,
.brand-card-featured-link:hover .brand-logo-box img, .brand-card-featured-link:focus-visible .brand-logo-box img{
  transform:scale(1.045);
}

.brand-featured-name{ font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:1.1rem; margin:0; }
.brand-featured-note{ font-size:.82rem; line-height:1.5; opacity:.72; margin:0; max-width:30ch; }

/* "Visit Brand" external-link cue — always legible on touch devices,
   revealed with a gentle fade/slide on hover or keyboard focus for
   pointer users. Never the only signal that a card is clickable. */
.brand-visit{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-head); font-weight:700; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  opacity:.55; transform:translateY(0);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.brand-visit svg{ width:11px; height:11px; flex-shrink:0; }
@media (hover:hover){
  .brand-visit{ opacity:0; transform:translateY(4px); }
  .brand-card:hover .brand-visit, .brand-card:focus-visible .brand-visit,
  .brand-card-featured-link:hover .brand-visit, .brand-card-featured-link:focus-visible .brand-visit{
    opacity:.85; transform:translateY(0);
  }
}
@media (prefers-reduced-motion: reduce){ .brand-visit{ transition:none; } }

.brand-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px; }
.brand-card{
  border:1px solid var(--line); background:transparent; padding:20px 14px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-decoration:none; color:inherit; min-height:44px;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.brand-showcase.on-black .brand-card{ border-color:var(--line-invert); }
.brand-card:hover, .brand-card:focus-visible{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.brand-showcase.on-white .brand-card:hover, .brand-showcase.on-white .brand-card:focus-visible{ border-color:var(--ink); }
.brand-showcase.on-black .brand-card:hover, .brand-showcase.on-black .brand-card:focus-visible{ border-color:var(--premium-white); }
.brand-card:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.brand-showcase.on-black .brand-card:focus-visible{ outline-color:var(--premium-white); }
.brand-name{ font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-align:center; }
@media (max-width:560px){ .brand-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } }
@media (prefers-reduced-motion: reduce){
  .brand-card, .brand-card-featured, .brand-logo-box img{ transition:none; }
}

/* ---------- Solar featured-brand section (light, premium) ----------
   Sits directly under the dark hero on the Solar page. Deliberately
   white/light rather than the black treatment used elsewhere, with its
   own top rule and trust list so the hero-to-light transition reads as
   an intentional editorial break, not a swapped background color. */
.solar-feature{
  position:relative; background:var(--premium-white); color:var(--premium-black);
  padding:clamp(60px,9vw,108px) 0 clamp(48px,7vw,88px);
}
.solar-feature::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--premium-black);
}
.solar-feature-head{ max-width:640px; margin-bottom:44px; }
.solar-feature-head .section-title{ margin-top:14px; }
.solar-feature-sub{ margin-top:18px; color:var(--ink-soft); font-size:1.02rem; line-height:1.65; max-width:56ch; }

.solar-feature-grid{ display:grid; grid-template-columns:380px 1fr; gap:52px; align-items:start; }
@media (max-width:900px){ .solar-feature-grid{ grid-template-columns:1fr; gap:32px; } }

.solar-trust-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.solar-trust-list li{
  display:flex; gap:20px; align-items:flex-start; padding:24px 0; border-bottom:1px solid var(--line);
}
.solar-trust-list li:first-child{ padding-top:0; }
.solar-trust-list li:last-child{ border-bottom:none; padding-bottom:0; }
.solar-trust-num{
  font-family:var(--font-head); font-weight:800; font-size:1.35rem; line-height:1; flex-shrink:0; min-width:38px;
  color:transparent; -webkit-text-stroke:1px var(--c-bd);
}
.solar-trust-list h4{ font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:.92rem; margin:0 0 8px; }
.solar-trust-list p{ font-size:.9rem; line-height:1.65; color:var(--muted); margin:0; max-width:44ch; }

/* ---------- Automotive tabs ---------- */
.automotive-tabs{ display:inline-flex; gap:10px; margin:6px 0 32px; flex-wrap:wrap; }
.automotive-tab{
  font-family:var(--font-body); font-weight:700; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  padding:14px 28px; border:1px solid var(--line-strong); background:transparent; color:var(--ink-soft);
  cursor:pointer; border-radius:2px; min-height:44px;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.brand-showcase.on-black .automotive-tab{ border-color:var(--line-invert); color:var(--c-bd); }
.automotive-tab:hover{ border-color:var(--ink); color:var(--ink); }
.brand-showcase.on-black .automotive-tab:hover{ border-color:var(--premium-white); color:var(--premium-white); }
.automotive-tab.is-active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.brand-showcase.on-black .automotive-tab.is-active{ background:var(--premium-white); color:var(--premium-black); border-color:var(--premium-white); }
.automotive-tab:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }

.automotive-panel{ display:none; }
.automotive-panel.is-active{ display:block; animation:automotive-fade .45s var(--ease); }
@keyframes automotive-fade{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){ .automotive-panel.is-active{ animation:none; } }

/* ---------- Misc ---------- */
.split-2{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media (max-width:880px){ .split-2{ grid-template-columns:1fr; gap:30px; } }
.frame-photo{ position:relative; overflow:hidden; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.frame-photo img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.05); transition:transform .8s var(--ease); }
.frame-photo:hover img{ transform:scale(1.04); }
.frame-photo.ratio-4-3{ aspect-ratio:4/3; }
.frame-photo.ratio-1-1{ aspect-ratio:1/1; }
.frame-photo.ratio-16-10{ aspect-ratio:16/10; }