/* ==========================================================================
   DIM Electrical: design system
   Charcoal ink, burnt orange accent, white surfaces. Sora headings, Inter body.
   Orange is the "power on" accent. Used sparingly, never as a large fill.
   ========================================================================== */

:root {
  --ink: #231F20;
  --orange: #E07725;
  --orange-hover: #C4611A;
  --tint: #FDF1E7;
  --white: #FFFFFF;
  --wash: #FAF6EF;
  --line: #E7E3E0;
  --muted: #7C7370;
  --sun: #F5A623;
  --sun-tint: #FFF3D6;

  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(35, 31, 32, 0.06), 0 2px 8px rgba(35, 31, 32, 0.05);
  --shadow: 0 2px 6px rgba(35, 31, 32, 0.07), 0 12px 32px rgba(35, 31, 32, 0.09);
  --shadow-lg: 0 8px 20px rgba(35, 31, 32, 0.12), 0 28px 64px rgba(35, 31, 32, 0.16);

  --container: 1100px;
  --gutter: clamp(18px, 4.5vw, 32px);
  --section-pad: clamp(56px, 9vw, 104px);

  --dur: 320ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-weight: 800; font-size: clamp(2.1rem, 5.6vw, 3.4rem); }
h2 { font-weight: 800; font-size: clamp(1.65rem, 3.8vw, 2.4rem); }
h3 { font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
h4 { font-weight: 700; font-size: 1.05rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--orange-hover); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--orange); }

ul, ol { padding-left: 1.3em; margin: 0 0 1em; }
li { margin-bottom: 0.35em; }

strong { font-weight: 700; }

::selection { background: var(--orange); color: var(--white); }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; color: var(--white); }

/* Layout ----------------------------------------------------------------- */

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.section { padding-block: var(--section-pad); }
.section--wash { background: var(--wash); }
.section--tint { background: var(--tint); }
.section--ink { background: var(--ink); color: var(--white); }
.section--ink h2, .section--ink h3 { color: var(--white); }

.section-head { max-width: 720px; margin-bottom: clamp(28px, 5vw, 48px); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-hover);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}
.section-head--center .eyebrow::after {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}

.lede { font-size: 1.1rem; color: var(--muted); }
.section--ink .lede { color: rgba(255, 255, 255, 0.78); }

.grid { display: grid; gap: clamp(16px, 2.5vw, 24px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Buttons ----------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform 160ms var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--primary {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(224, 119, 37, 0.32);
}
.btn--primary:hover { background: var(--orange-hover); color: var(--white); box-shadow: 0 8px 22px rgba(196, 97, 26, 0.38); }

.btn--ink {
  background: var(--ink);
  color: var(--white);
}
.btn--ink:hover { background: #3a3536; color: var(--white); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--white); }

.btn--ghost-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--ghost-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); color: var(--white); }

.btn--lg { min-height: 58px; padding: 16px 32px; font-size: 1.06rem; }
.btn--sm { min-height: 42px; padding: 9px 18px; font-size: 0.92rem; }

.btn .icon { width: 19px; height: 19px; flex: none; }

/* CTA cluster with trust line: every CTA sits next to a trust signal */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.cta-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
}
.cta-trust .icon { width: 17px; height: 17px; color: var(--orange); flex: none; }
.section--ink .cta-trust { color: rgba(255, 255, 255, 0.75); }

/* Header ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.brand img { height: 44px; width: auto; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: 0.02em;
}
.brand__name span { color: var(--orange); }

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.site-nav a:hover { background: var(--tint); color: var(--orange-hover); }
.site-nav a[aria-current="page"] { color: var(--orange-hover); background: var(--tint); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 999px;
}
.header-phone .icon { width: 18px; height: 18px; color: var(--orange); }
.header-phone:hover { color: var(--orange-hover); }

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  width: 24px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--ink);
  position: relative;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle span::before { position: absolute; top: -8px; }
.nav-toggle span::after { position: absolute; top: 8px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-8px) rotate(-45deg); }

/* Collapse to the burger at 1023 and below. It used to be 880, which was fine
   for five links, but the sixth (Free Electricity) pushes the row to ~693px and
   it wrapped onto two lines between 881 and 1023. 1024 is the narrowest width
   where all six still sit on one row beside the logo, phone and CTA. */
@media (max-width: 1023px) {
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 12px var(--gutter) 20px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 14px 16px; font-size: 1.05rem; }
  .nav-toggle { display: inline-flex; }
}

/* These stay at 880. Only the nav needed the wider breakpoint; there is still
   room for the phone number and a full size CTA between 881 and 1023, and
   hiding the number that early would cost calls. */
@media (max-width: 880px) {
  .header-phone span { display: none; }
  .header-actions .btn { min-height: 44px; padding: 10px 18px; font-size: 0.92rem; }
}

/* Hero -------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 31, 32, 0.25) 0%, rgba(35, 31, 32, 0.72) 78%, rgba(35, 31, 32, 0.95) 100%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(64px, 11vw, 128px) clamp(40px, 7vw, 72px);
  max-width: 780px;
}

.hero__proof {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 7px 16px 7px 8px;
  font-size: 0.88rem;
  font-weight: 600;
}
.hero__proof .stars { color: var(--orange); letter-spacing: 1px; }

.hero__tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.hero h1 { color: var(--white); margin-bottom: 0.4em; }
.hero__sub {
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  color: rgba(255, 255, 255, 0.82);
  max-width: 560px;
  margin-bottom: 28px;
}
/* make the value line pop: strong differentiator, bigger orange saving */
.hero__sub strong { color: inherit; font-weight: 700; }
.hero--split .hero__sub strong { color: var(--ink); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Stat strip ---------------------------------------------------------------- */

.stat-strip { border-block: 1px solid var(--line); background: var(--white); }
.stat-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-block: clamp(28px, 4.5vw, 44px);
}
@media (max-width: 760px) { .stat-strip__grid { grid-template-columns: repeat(2, 1fr); row-gap: 26px; } }

.stat { text-align: center; padding-inline: 8px; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  color: var(--ink);
  line-height: 1;
}
.stat__num sup { font-size: 0.55em; color: var(--orange); top: -0.5em; }
.stat__label { font-size: 0.9rem; color: var(--muted); margin-top: 8px; font-weight: 500; }

/* Generic cards -------------------------------------------------------------- */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 30px);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
  /* column layout so the card link can sit on the baseline across a whole row */
  display: flex;
  flex-direction: column;
}
a.card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #d9d3cf; }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--tint);
  color: var(--orange-hover);
  margin-bottom: 18px;
}
.card__icon { align-self: flex-start; }
.card__icon .icon { width: 26px; height: 26px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 0.97rem; }
.card__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  margin-top: auto;
  padding-top: 14px;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--orange-hover);
  text-decoration: none;
}
.card__link .icon { width: 15px; height: 15px; transition: transform 200ms var(--ease); }
.card:hover .card__link .icon, .card__link:hover .icon { transform: translateX(4px); }

.card--media { padding: 0; overflow: hidden; position: relative; }
/* corner ribbon, sits outside the content flow so every card heading still lines up */
.card__ribbon {
  position: absolute;
  top: 20px; right: -54px;
  z-index: 3;
  width: 190px;
  padding: 7px 0;
  transform: rotate(45deg);
  background: #D62828;
  color: var(--white);
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(35, 31, 32, 0.22);
  pointer-events: none;
}
.card--media .card__body { padding: clamp(20px, 3vw, 26px); display: flex; flex-direction: column; flex: 1; }
.card--media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.chip-note {
  display: inline-block;
  background: var(--tint);
  color: var(--orange-hover);
  font-weight: 700;
  font-size: 0.8rem;
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 10px;
  font-family: var(--font-display);
}

/* Media frames + placeholder badge ------------------------------------------ */

.media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

.ph-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--orange);
  max-width: 78%;
  text-align: right;
  opacity: 0.92;
  pointer-events: none;
}

/* Steps ----------------------------------------------------------------------- */

.steps { counter-reset: step; }
.step {
  position: relative;
  padding: clamp(22px, 3vw, 30px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 16px;
}
.step:nth-child(2) .step__num { background: var(--orange); }
.step p { color: var(--muted); font-size: 0.97rem; }

/* Gallery + lightbox ---------------------------------------------------------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.6vw, 16px);
}
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

.gallery-item {
  position: relative;
  border: 0;
  padding: 0;
  background: none;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
  box-shadow: var(--shadow-sm);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(35, 31, 32, 0.45));
  opacity: 0;
  transition: opacity 250ms var(--ease);
}
.gallery-item:hover::after { opacity: 1; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 160;
  background: rgba(35, 31, 32, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: min(1000px, 92vw);
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  cursor: pointer;
  transition: background-color 180ms var(--ease);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: var(--orange); border-color: var(--orange); }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox .icon { width: 22px; height: 22px; }
.lightbox__caption {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  text-align: center;
  max-width: 80vw;
}

/* FAQ --------------------------------------------------------------------------- */

.faq-list { max-width: 780px; margin-inline: auto; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.faq-item[open] { border-color: var(--orange); box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-x {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--orange-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: transform 250ms var(--ease), background-color 250ms var(--ease), color 250ms var(--ease);
}
.faq-item[open] summary .faq-x { transform: rotate(45deg); background: var(--orange); color: var(--white); }
.faq-item__body { padding: 0 20px 20px; color: var(--muted); }

/* Forms --------------------------------------------------------------------------- */

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(224, 119, 37, 0.18);
}
.field .field-error {
  display: none;
  color: #B3261E;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 6px;
}
.field.has-error input { border-color: #B3261E; }
.field.has-error .field-error { display: block; }
.form-note { font-size: 0.85rem; color: var(--muted); }
.form-success {
  display: none;
  background: var(--tint);
  border: 1px solid var(--orange);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-weight: 600;
}
.form-success.is-visible { display: block; }

.inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form input { flex: 1 1 220px; }
.inline-form .btn { flex: none; }

/* Contact ------------------------------------------------------------------------ */

.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-list { list-style: none; padding: 0; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.contact-list .icon-bubble {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--orange-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-list .icon-bubble .icon { width: 21px; height: 21px; }
.contact-list a { color: var(--ink); font-weight: 700; text-decoration: none; }
.contact-list a:hover { color: var(--orange-hover); }
.contact-list small { display: block; color: var(--muted); }

.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.map-embed iframe { display: block; width: 100%; height: 340px; border: 0; }

/* Footer -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(48px, 7vw, 72px) 28px;
  font-size: 0.94rem;
}
.site-footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.site-footer a:hover { color: var(--orange); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 40px);
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand img { height: 46px; width: auto; margin-bottom: 14px; }
.footer-brand p { max-width: 300px; }
.site-footer h4 {
  color: var(--white);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 10px; }

.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.footer-social a:hover { background: var(--orange); border-color: var(--orange); color: var(--white); transform: translateY(-2px); }
.footer-social .icon { width: 19px; height: 19px; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  padding-top: 22px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

/* Sticky mobile action bar ---------------------------------------------------------- */

/* Mobile only: the quote CTA sits in the header, between the logo and the
   phone, so there is an action on screen before any scrolling. */
.top-cta { display: none; }
@media (max-width: 880px) {
  .site-header__bar { gap: 8px; }
  .brand img { width: 96px; height: auto; }
  .top-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    padding: 9px 12px;
    min-height: 40px;
    font-size: 0.74rem;
  }
}
@media (max-width: 380px) {
  .brand img { width: 84px; }
  .top-cta { font-size: 0.67rem; padding: 8px 9px; }
}

/* Phones: stacked CTAs share one width and sit centred, so pairs like
   "Find my fit" and "Speak to a battery expert" line up. */
@media (max-width: 560px) {
  .cta-row { flex-direction: column; align-items: center; width: 100%; }
  .cta-row .btn { width: 100%; max-width: 340px; justify-content: center; }
  .cta-row .cta-trust { justify-content: center; text-align: center; }
}

.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  gap: 10px;
  padding: 10px max(12px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(35, 31, 32, 0.12);
  transform: translateY(110%);
  transition: transform 300ms var(--ease);
}
.sticky-bar.is-visible { transform: translateY(0); }
.sticky-bar .btn { flex: 1; min-height: 50px; }
@media (max-width: 880px) {
  .sticky-bar { display: flex; }
  body.has-sticky-bar { padding-bottom: 74px; }
}

/* Breadcrumbs ------------------------------------------------------------------------ */


/* Page hero (inner pages) ------------------------------------------------------------- */

.page-hero {
  background: var(--ink);
  color: var(--white);
  padding-block: clamp(48px, 8vw, 84px);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -160px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 119, 37, 0.28) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero h1 { color: var(--white); max-width: 720px; }
.page-hero .lede { color: rgba(255, 255, 255, 0.8); max-width: 640px; }
.page-hero .cta-row { margin-top: 26px; }
/* Contact + about hero: copy and the founders photo sit side by side, so text
   is never laid over the picture. Falls back to stacked on small screens.
   Light warm wash rather than the dark ink, to match the sunny brand. */
.page-hero--team {
  background: linear-gradient(158deg, #FFF7EC 0%, #FDEBD6 52%, #FAF6EF 100%);
  color: var(--ink);
}
.page-hero--team h1 { color: var(--ink); }
.page-hero--team .lede { color: #5b524d; }
.page-hero--team .cta-trust { color: var(--muted); }
.page-hero--team::after { background: radial-gradient(circle, rgba(224, 119, 37, 0.16) 0%, transparent 70%); }
.page-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}
.page-hero__media { margin: 0; }
.page-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.38);
}
.page-hero__media figcaption {
  margin-top: 10px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
}
@media (max-width: 860px) {
  .page-hero__grid { grid-template-columns: 1fr; gap: 24px; }
  .page-hero__media img { border-radius: 14px; }
}

/* Blog ---------------------------------------------------------------------------------- */

.article-body { max-width: 720px; margin-inline: auto; }
.article-body h2 { margin-top: 1.8em; }
.article-body h3 { margin-top: 1.4em; }
.article-body img { border-radius: var(--radius); margin-block: 1.2em; }
.article-meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 24px; }
.article-body .callout {
  background: var(--tint);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin-block: 1.4em;
}
.article-body table { width: 100%; border-collapse: collapse; margin-block: 1.2em; font-size: 0.95rem; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.article-body th { background: var(--wash); font-family: var(--font-display); font-size: 0.88rem; }

/* Reveal on scroll ------------------------------------------------------------------------ */

.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 640ms var(--ease), transform 640ms var(--ease);
}
.reveal[data-reveal-delay="1"].is-in { transition-delay: 90ms; }
.reveal[data-reveal-delay="2"].is-in { transition-delay: 180ms; }
.reveal[data-reveal-delay="3"].is-in { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* Count-up stat line ------------------------------------------------------------------------ */

.statline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 4vw, 52px);
  align-items: start;
  text-align: center;
}
.statline .stat { padding: 8px 4px; }
.statline .stat + .stat { border-left: 1px solid var(--line); }
.statline .stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  margin: 0 0 10px;
}
.statline .stat__label {
  margin: 0 auto;
  max-width: 24ch;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.45;
  font-weight: 600;
}
@media (max-width: 760px) {
  .statline { grid-template-columns: 1fr; gap: 34px; }
  .statline .stat + .stat { border-left: 0; border-top: 1px solid var(--line); padding-top: 30px; }
}

/* Find My Fit funnel ------------------------------------------------------------------------ */

.funnel-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  background: rgba(35, 31, 32, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.funnel-overlay.is-open { display: block; }

.funnel {
  position: absolute;
  inset: 0;
  background: var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 760px) {
  .funnel {
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(620px, 94vw);
    max-height: min(760px, 92vh);
    min-height: 560px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
}

.funnel__top {
  flex: none;
  padding: 14px 18px 0;
}
.funnel__progress {
  height: 6px;
  border-radius: 999px;
  background: var(--wash);
  overflow: hidden;
}
.funnel__progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--orange-hover));
  transition: width 350ms var(--ease);
}
.funnel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.funnel__back, .funnel__close {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 10px;
  border-radius: var(--radius-sm);
}
.funnel__back:hover, .funnel__close:hover { color: var(--ink); background: var(--wash); }
.funnel__back .icon, .funnel__close .icon { width: 17px; height: 17px; }
.funnel__back[hidden] { visibility: hidden; display: inline-flex; }

.funnel__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 22px 28px;
  display: flex;
  flex-direction: column;
}

.funnel-screen {
  margin: auto 0;
  animation: funnelIn 360ms var(--ease) both;
}
@keyframes funnelIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .funnel-screen { animation: none; }
}

.funnel-screen__step {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-hover);
  margin-bottom: 10px;
}
.funnel-screen h2 { font-size: clamp(1.4rem, 4vw, 1.8rem); margin-bottom: 6px; }
.funnel-screen .hint { color: var(--muted); font-size: 0.95rem; margin-bottom: 20px; }

.funnel-options { display: grid; gap: 12px; margin-top: 18px; }
.funnel-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  padding: 16px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), transform 160ms var(--ease);
}
.funnel-option:hover { border-color: var(--orange); background: var(--tint); }
.funnel-option:active { transform: scale(0.99); }
.funnel-option .icon { width: 18px; height: 18px; color: var(--orange); flex: none; opacity: 0; transition: opacity 160ms var(--ease); }
.funnel-option:hover .icon { opacity: 1; }

.funnel .field input { font-size: 1.05rem; }
.funnel__submit { margin-top: 18px; width: 100%; }

.funnel-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 20px;
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 600;
}
.funnel-trust span { display: inline-flex; align-items: center; gap: 6px; }
.funnel-trust .icon { width: 15px; height: 15px; color: var(--orange); }

/* Founder photo on the battery quiz contact step */
/* Opening screen of the battery quiz: offer artwork plus a tap to call.
   The artwork is a tall 1000x1416 poster, so it is capped by HEIGHT and left to
   find its own width. Capping width instead would run it past the fold and push
   the first question out of sight. */
.funnel-offer {
  margin: 0 0 18px;
  text-align: center;
}
.funnel-offer img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 34svh;
  max-height: 34vh;
  margin: 0 auto 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.funnel-offer__call { display: grid; gap: 6px; justify-items: center; }
.funnel-offer__call .btn { width: 100%; min-height: 52px; }
.funnel-offer__call .icon { width: 18px; height: 18px; }
.funnel-offer__call span {
  font-size: 0.82rem;
  color: var(--muted);
}
/* Short viewports: the poster is the first thing to give way, the call button
   is the part that has to stay reachable without scrolling. */
@media (max-height: 640px) {
  .funnel-offer img { max-height: 22vh; }
}

.funnel-founders {
  margin: 2px 0 18px;
  text-align: center;
}
.funnel-founders img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.funnel-founders figcaption {
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
/* On phones, tighten the contact step (the one with the founder photo) so the
   photo, question, copy and form all fit on one screen without scrolling. */
@media (max-width: 560px) {
  .funnel-founders { margin: 0 auto 12px; max-width: 300px; }
  .funnel-founders img { max-width: 230px; margin: 0 auto; }
  .funnel-founders figcaption { margin-top: 5px; font-size: 0.76rem; }
  .funnel-screen:has(.funnel-founders) .funnel-screen__step { margin-bottom: 2px; }
  .funnel-screen:has(.funnel-founders) h2 { margin-bottom: 4px; }
  .funnel-screen:has(.funnel-founders) .hint { font-size: 0.86rem; line-height: 1.38; margin-bottom: 10px; }
  .funnel-screen:has(.funnel-founders) .funnel-form .field { margin-bottom: 10px; }
  .funnel-screen:has(.funnel-founders) .funnel-trust { display: none; }
}

/* "or leave your number" divider on the battery expert screen */
.funnel-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: lowercase;
}
.funnel-or::before,
.funnel-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Funnel result */
.funnel-result__card {
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-block: 18px;
}
.funnel-result__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.97rem;
}
.funnel-result__row:last-child { border-bottom: 0; }
.funnel-result__row dt { color: var(--muted); font-weight: 500; }
.funnel-result__row dd { margin: 0; font-weight: 700; text-align: right; font-family: var(--font-display); }
/* the after-rebate saving, made to stand out */
.funnel-result__row--save dt { color: var(--orange-hover); font-weight: 700; }

/* the rebate deduction, read as money coming off */
.funnel-result__row--rebate dd { color: #1a7a38; font-weight: 700; }
.funnel-result__row--rebate dt { color: var(--muted); }
.funnel-result__row--save dd { color: var(--orange-hover); font-size: 1.08em; }
.funnel-result__rebate {
  background: var(--tint);
  border: 1px solid rgba(224, 119, 37, 0.4);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 0.95rem;
  margin-bottom: 18px;
}
.funnel-result__fine { font-size: 0.8rem; color: var(--muted); margin-top: 16px; }
.funnel-done-tick {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--orange-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.funnel-done-tick .icon { width: 28px; height: 28px; }
.funnel-form select {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}

/* Utility ------------------------------------------------------------------------------------ */

.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Split video hero -------------------------------------------------------- */

.hero--split { position: relative; }
.hero--split::after {
  content: "";
  position: absolute;
  right: -160px;
  top: -140px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 119, 37, 0.20) 0%, transparent 68%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
  padding-block: clamp(36px, 5vw, 60px) clamp(14px, 2vw, 24px);
}
.hero__col { min-width: 0; }
.hero__alt { margin: 14px 0 20px; font-size: 0.92rem; }
.hero__alt a { color: rgba(255, 255, 255, 0.82); text-underline-offset: 3px; }
.hero__alt a:hover { color: var(--white); }

.hero__video {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0d0b0a url("/assets/images/home-battery-install-south-east-melbourne.jpg") center / cover no-repeat;
}
.hero__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__video-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(13, 11, 10, 0.68);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
}
.hero__video-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
  animation: dimPulse 2.4s ease-out infinite;
}
@keyframes dimPulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 119, 37, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(224, 119, 37, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 119, 37, 0); }
}
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: 26px; padding-block: clamp(36px, 8vw, 60px) 26px; }
  .hero__video { max-width: 250px; }
}

/* Keep the primary hero CTA inside the first frame on short or small screens */
@media (max-width: 560px), (max-height: 900px) {
  .hero__grid { padding-block: 16px 18px; }
  .hero--split h1 { font-size: clamp(1.65rem, 5.4vw, 2.5rem); line-height: 1.1; margin-bottom: 0.3em; }
  .hero__proof { margin-bottom: 12px; }
  .hero__tagline { margin-bottom: 6px; }
  .hero__sub { margin-bottom: 16px; }
  .hero__sub-more { display: none; }
  .hero__ctas { margin-bottom: 12px; }
}

/* Very short viewports (e.g. a phone held landscape): drop decorative rows
   so the primary CTA still lands in the first frame */
@media (max-height: 440px) {
  .hero__grid { padding-block: 10px 12px; }
  .hero__proof, .hero__sub { display: none; }
  .hero__tagline { margin-bottom: 4px; }
  .hero--split h1 { font-size: clamp(1.5rem, 4.4vw, 2rem); margin-bottom: 0.25em; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__video video { display: none; }
  .hero__video-dot { animation: none; }
}

/* Sunny light hero -------------------------------------------------------- */

.hero--split {
  background: linear-gradient(168deg, #FFEFD6 0%, #FFF7EF 42%, #FFFFFF 100%);
  color: var(--ink);
}
.hero--split::after {
  background: radial-gradient(circle, rgba(245, 166, 30, 0.30) 0%, rgba(224, 119, 37, 0.10) 45%, transparent 72%);
  width: 560px;
  height: 560px;
  right: -150px;
  top: -190px;
}
.hero--split h1 { color: var(--ink); }
.hero--split .hero__sub { color: #5b524d; }
.hero--split .hero__tagline { color: var(--orange-hover); }
.hero--split .hero__proof {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.hero--split .avatar-stack img { border-color: #fff; }
.hero--split .review-badge {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.hero--split .review-badge .stars { color: var(--orange); }
.hero--split .hero__badges { color: var(--muted); }
.hero--split .hero__alt a { color: var(--orange-hover); }
.hero--split .hero__alt a:hover { color: var(--orange); }

/* Bright rebate + wallet visual ------------------------------------------- */

.rebate-section { background: var(--wash); }
/* Rebate block: one brand card with a white inset holding the clock -------- */

.rebate2 { display: block; }
.rebate2__inner {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(22px, 3.4vw, 54px);
  align-items: center;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ink);
}
@media (max-width: 900px) { .rebate2__inner { grid-template-columns: 1fr; } }

/* white inset card, lifted off the brand colour */
.rebate2__panel {
  background: var(--white);
  border-radius: 22px;
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: 0 10px 30px rgba(35, 31, 32, .06);
}
/* clock caption and offer lead share one type treatment, only colour differs
   because one sits on white and the other on the cream block */
.rebate2__note-head {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

.rebate2__copy { text-align: left; }
.rebate2__copy h2 { color: var(--ink); margin-bottom: 20px; font-size: clamp(2rem, 4.8vw, 3rem); letter-spacing: -0.03em; line-height: 1.06; }
.rebate2__lead {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  max-width: 44ch;
  margin: 0 0 26px;
}

.rebate2__pill {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  width: fit-content;
  max-width: 100%;
  background: var(--white);
  border-radius: 14px;
  padding: 14px 6px;
  box-shadow: 0 8px 24px rgba(35, 31, 32, .07);
}
.rebate2__pill-amt,
.rebate2__pill-txt {
  padding: 0 clamp(12px, 2vw, 20px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.75vw, 1.32rem);
  line-height: 1.25;
  white-space: nowrap;
}
.rebate2__pill-amt { color: var(--orange-hover); }
.rebate2__pill-txt { color: var(--ink); border-left: 1px solid var(--line); }

/* The eligibility CTA spans the full copy column so it lines up flush with the
   "National Battery Rebate" heading and the pill above it. */
.rebate2__copy .cta-row { width: 100%; }
.rebate2__copy .cta-row .btn { flex: 1 1 auto; width: 100%; }


/* Refined clock. One thin bezel, soft shadow, tapered hands. -------------- */

.rebate-clock {
  position: relative;
  width: 100%;
  max-width: 340px;
  min-height: 262px;
  margin: 0 auto;
  overflow: hidden;
}
.rc-clock-wrap { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 20; }
.rc-clock {
  position: relative; width: 168px; height: 168px; border-radius: 50%;
  background: #FFFFFF;
  /* thin black rim, like a plain white wall clock */
  box-shadow:
    0 0 0 5px #1A1A1A,
    0 8px 22px rgba(35, 31, 32, 0.20);
}
.rc-num {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #1A1A1A;
  font-variant-numeric: tabular-nums;
  z-index: 4;
}
.rc-tick { position: absolute; left: 50%; top: 50%; width: 1px; height: 4px; border-radius: 0; background: rgba(26, 26, 26, 0.55); }
.rc-tick--major { width: 2px; height: 7px; background: #1A1A1A; }
.rc-hand { position: absolute; left: 50%; top: 50%; transform-origin: bottom center; border-radius: 99px; }
.rc-hour { width: 4px; height: 36px; margin-left: -2px; margin-top: -36px; background: #1A1A1A; z-index: 6; }
.rc-minute { width: 3px; height: 54px; margin-left: -1.5px; margin-top: -54px; background: #1A1A1A; z-index: 7; }
.rc-second { width: 1.5px; height: 64px; margin-left: -0.75px; margin-top: -64px; background: var(--orange); z-index: 8; }
.rc-cap { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: #1A1A1A; border-radius: 50%; transform: translate(-50%,-50%); z-index: 9; }
.rc-money { position: absolute; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
.rc-bill { position: absolute; will-change: transform, opacity; filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)); }
.rc-bill img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .rebate-clock { min-height: 250px; }
  .rebate2__inner { gap: 22px; text-align: center; }
  /* flatten the copy wrapper so its heading can sit ABOVE the clock panel:
     order runs heading, clock, pill, lead, CTA */
  .rebate2__copy { display: contents; }
  .rebate2__copy h2 { order: -1; margin-bottom: 0; }
  .rebate2__pill { margin: 0 auto; }
  .rebate2__lead { margin-inline: auto; }
  .rebate2__copy .cta-row { justify-content: center; }
}
@media (max-width: 560px) {
  .rebate2__pill { flex-wrap: wrap; row-gap: 2px; }
  .rebate2__pill-amt, .rebate2__pill-txt { white-space: normal; }
  .rebate2__pill-txt { border-left: 0; }
}

/* Credibility components (honest trust signals, no fake reviews) ----------- */

.hero__proof { padding: 8px 16px; }
.hero__proof .icon { width: 17px; height: 17px; color: var(--orange); flex: none; }

.cred-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.cred-chip .icon { width: 15px; height: 15px; color: var(--orange); flex: none; }

.trust-bar { border-block: 1px solid var(--line); background: var(--wash); }
.trust-bar__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  padding-block: 20px;
}
.trust-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
.trust-bar__item .icon { width: 18px; height: 18px; color: var(--orange); flex: none; }

.rebate-panel {
  background: #fff;
  border: 1px solid rgba(224, 119, 37, 0.35);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: 0 10px 30px rgba(224, 119, 37, 0.14);
  text-align: center;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}
.rebate-panel__tag {
  display: inline-block;
  background: var(--tint);
  color: var(--orange-hover);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 18px;
}
.rebate-panel__pct {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ink);
  line-height: 1;
  margin: 0;
}
.rebate-panel__pct strong {
  display: block;
  font-size: clamp(3.4rem, 9vw, 5rem);
  font-weight: 800;
  color: var(--orange);
  line-height: 0.95;
}
.rebate-panel__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 8px 0 0;
}
.rebate-panel__note { color: var(--muted); font-size: 0.9rem; margin: 14px 0 0; }

.backup-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.5vw, 34px);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}
.backup-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0 0 8px;
}
.backup-panel__head .icon { width: 20px; height: 20px; color: var(--orange); flex: none; }
.backup-panel ul { list-style: none; padding: 0; margin: 0; }
.backup-panel li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-weight: 600;
}
.backup-panel li .icon { width: 18px; height: 18px; color: var(--orange); flex: none; }

@keyframes floatNote {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  }

/* VS comparison table ----------------------------------------------------- */

.vs-table {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--white);
}
.vs-table__head { display: grid; grid-template-columns: 1fr 1fr; }
.vs-table__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}
.vs-table__label--them { color: var(--muted); background: #efe9e5; }
.vs-table__label--us {
  color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--orange-hover));
}
.vs-table__label--us .icon { width: 18px; height: 18px; }
.vs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.vs-cell {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 13px 18px;
  font-size: 0.94rem;
  line-height: 1.4;
}
.vs-cell .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.vs-cell--them { color: var(--muted); }
.vs-cell--them .icon { color: #cf948c; }
.vs-cell--us {
  color: var(--ink);
  font-weight: 600;
  background: var(--tint);
  border-left: 1px solid var(--line);
}
.vs-cell--us .icon { color: var(--orange); }
@media (max-width: 480px) {
  .vs-cell { font-size: 0.88rem; padding: 12px; }
  .vs-table__label { font-size: 0.9rem; padding: 13px 12px; }
}


/* Home hero photo (electrician) ------------------------------------------- */
.hero__photo {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.hero__photo img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

/* Review bar (site-wide entry to /reviews/) ------------------------------ */
.review-bar { display: block; background: var(--ink); color: #fff; text-decoration: none; }
.review-bar:hover .review-bar__cta { background: var(--orange-hover); }
.review-bar__inner { display: flex; align-items: center; justify-content: center; gap: 10px 16px; flex-wrap: wrap; max-width: var(--container); margin-inline: auto; padding: 10px var(--gutter); text-align: center; font-size: 0.9rem; line-height: 1.35; letter-spacing: 0.005em; }
.review-bar__stars { color: var(--orange); letter-spacing: 2px; font-size: 0.86rem; }
.review-bar__msg { color: rgba(255, 255, 255, 0.86); }
.review-bar__msg strong { color: #fff; font-weight: 700; }
.review-bar__cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; color: #fff; background: var(--orange); padding: 5px 13px; border-radius: 999px; white-space: nowrap; transition: background 0.15s ease; }
.review-bar__cta .icon { width: 16px; height: 16px; }
@media (max-width: 560px) { .review-bar__inner { font-size: 0.8rem; gap: 4px 10px; padding: 8px var(--gutter); } }

/* Hero reel: phone-framed intro video (home) ---------------------------- */
.hero__reel { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-inline: auto; }
.phone {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  background: var(--ink);
  border-radius: 38px;
  padding: 11px;                 /* bezel; the screen sits inside at exactly 9:16 */
  box-shadow: 0 28px 64px rgba(35, 31, 32, 0.30), 0 6px 16px rgba(35, 31, 32, 0.16);
}
.phone__notch {
  position: absolute;
  top: 18px; left: 50%; transform: translateX(-50%);
  width: 42px; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.42);
  z-index: 3;
  pointer-events: none;
}
.phone__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;          /* matches the 720x1280 video exactly: whole clip shows, no crop */
  border-radius: 27px;
  overflow: hidden;
  background: #000;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.phone__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
}
.hero__reel-tag {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}
.hero__reel-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--orange);
  animation: dimPulse 2.4s ease-out infinite;
}
@media (max-width: 860px) {
  .phone { max-width: 288px; }
}
@media (max-width: 560px) {
  /* no phone-in-a-phone on phones: the reel becomes a plain rounded card so
     the footage gets the pixels a fake bezel was spending */
  .hero__reel { gap: 10px; width: 100%; }
  .phone {
    max-width: 100%;
    width: 100%;
    /* height, not a fixed 4:5 ratio: the reel takes the biggest share of the
       screen it can while the headline, stats, form and sticky CTA still fit */
    aspect-ratio: auto;
    height: clamp(200px, 39svh, 372px);
    background: none;
    border-radius: 18px;
    padding: 0;
    box-shadow: 0 16px 36px rgba(35, 31, 32, 0.16);
    overflow: hidden;
  }
  .phone__notch { display: none; }
  .phone__screen { border-radius: 18px; width: 100%; height: 100%; }
  .phone__video { width: 100%; height: 100%; object-fit: cover; }
  .phone__sound { right: 12px; bottom: 12px; }
  .hero__reel-tag { font-size: 0.84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__reel-dot { animation: none; }
}

/* Hero proof stats: three verifiable numbers as a tidy aligned list, each on
   its own line with the figure and its label sharing the row. Figures form a
   right-aligned column, labels a left column, so long labels stay on one line
   instead of wrapping. Sits under the H1 on the same first screen as the video
   and the quote form. */
.hero__stats {
  display: grid;
  grid-template-columns: max-content minmax(0, max-content);
  column-gap: 14px;
  row-gap: 9px;
  align-items: baseline;
  width: fit-content;
  max-width: 100%;
  margin: 8px 0 12px;
}
.hero__stat { display: contents; }
.hero__stat b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 4.4vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--orange);
  text-align: left;
  white-space: nowrap;
}
.hero__stat span {
  font-size: clamp(0.82rem, 2.2vw, 0.95rem);
  line-height: 1.2;
  color: var(--muted);
  text-align: left;
  font-weight: 700;
}

/* On phones, show the three stats in the original side-by-side format: the big
   number stacked over its label, hairline dividers between the columns. */
@media (max-width: 560px) {
  .hero__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    align-items: start;
    width: 100%;
    max-width: 100%;
  }
  .hero__stat {
    display: block;
    text-align: center;
    padding: 0 6px;
    position: relative;
  }
  .hero__stat + .hero__stat::before {
    content: "";
    position: absolute; left: 0; top: 3px; bottom: 3px;
    border-left: 1px solid var(--line);
  }
  .hero__stat b {
    display: block;
    text-align: center;
    font-size: clamp(1.1rem, 5.2vw, 1.55rem);
  }
  .hero__stat span {
    display: block;
    margin-top: 4px;
    text-align: center;
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(0.6rem, 2.5vw, 0.72rem);
    line-height: 1.2;
  }
}

/* Trusted by (hero client logos) ---------------------------------------- */
.trusted-by { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 22px); flex-wrap: wrap; }
.trusted-by__label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}
.trusted-by__logos {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(16px, 2.2vw, 26px); flex-wrap: wrap;
}
.trusted-by__logos img {
  height: 40px; width: auto; display: block;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.trusted-by__logos img.is-wordmark { height: 24px; }
.trusted-by__logos a { display: block; border-radius: 4px; }
.trusted-by__logos a:hover img,
.trusted-by__logos a:focus-visible img { filter: grayscale(0); opacity: 1; }
.trusted-by__logos a:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

/* Instagram link under the hero reel */
.reel-ig {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(35, 31, 32, 0.10);
  color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 0.84rem;
  box-shadow: 0 4px 14px rgba(35, 31, 32, 0.06);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.reel-ig:hover { background: var(--ink); color: #fff; transform: translateY(-1px); }
.reel-ig:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.reel-ig .icon { width: 16px; height: 16px; }
.reel-ig__arrow { transition: transform 0.15s ease; }
.reel-ig:hover .reel-ig__arrow { transform: translateX(3px); }
@media (max-width: 560px) {
  .trusted-by__logos img { height: 30px; }
  .trusted-by__logos img.is-wordmark { height: 19px; }
}

/* Home reviews carousel -------------------------------------------------- */
.reviews { padding-top: clamp(20px, 2.6vw, 32px); padding-bottom: clamp(26px, 3.2vw, 40px); }
.reviews__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: clamp(12px, 1.8vw, 18px); }
.reviews__bar h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.reviews__nav { display: flex; gap: 10px; flex: none; }
.reviews__arrow {
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
  background: var(--orange); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.reviews__arrow:hover { background: var(--orange-hover); }
.reviews__arrow:disabled { opacity: 0.3; cursor: default; }
.reviews__arrow:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.reviews__track {
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: var(--radius-lg); }
.review {
  flex: 0 0 min(82%, 720px);
  scroll-snap-align: start;
  margin: 0;
  background: var(--tint);
  border: 1px solid rgba(35, 31, 32, 0.06);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 1.8vw, 24px);
  display: flex; flex-direction: column; gap: 10px;
}
.review__stars { color: var(--sun); letter-spacing: 2px; font-size: 0.92rem; }
.review__text { margin: 0; color: #3f3733; line-height: 1.55; font-size: clamp(0.9rem, 0.98vw, 1rem); }
.review__by { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.review__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: #fff; color: var(--orange);
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
}
.review__meta { display: flex; flex-direction: column; line-height: 1.3; }
.review__name { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.review__source { font-size: 0.82rem; color: var(--muted); }
.reviews__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.reviews__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(35, 31, 32, 0.18); cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}
.reviews__dot.is-active { background: var(--orange); width: 24px; border-radius: 4px; }
.reviews__more { text-align: center; margin: clamp(12px, 1.6vw, 16px) 0 0; font-size: 0.88rem; }
.reviews__more a { color: var(--orange-hover); font-weight: 600; text-underline-offset: 3px; }
.reviews__more a:hover { color: var(--orange); }

/* Compact services + areas block (keeps SEO signals, low clutter) --------- */
.lean { padding-top: clamp(28px, 3.4vw, 44px); }
.lean__head { max-width: 720px; margin: 0 auto clamp(16px, 2.2vw, 24px); text-align: center; }
.lean__head h2 { margin: 0 0 10px; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.lean__lede { color: #5b524d; margin: 0; font-size: 0.98rem; }
.lean__links {
  list-style: none; margin: 0 auto clamp(14px, 2vw, 20px); padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
  max-width: 900px;
}
.lean__links a {
  display: inline-block; padding: 8px 15px; border-radius: 999px;
  background: var(--tint); border: 1px solid rgba(35, 31, 32, 0.06);
  color: var(--ink); font-weight: 600; font-size: 0.88rem; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.lean__links a:hover { background: var(--orange); color: #fff; }
.lean__areas { text-align: center; color: var(--muted); margin: 0 0 clamp(16px, 2.2vw, 22px); font-size: 0.92rem; }
.lean__areas a { color: var(--orange-hover); text-underline-offset: 3px; }
.lean__cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.lean__more { text-align: center; margin: clamp(16px, 2vw, 22px) 0 0; font-size: 0.86rem; color: var(--muted); }
.lean__more a { color: var(--muted); text-underline-offset: 3px; }
.lean__more a:hover { color: var(--orange); }
@media (max-width: 680px) {
  .review { flex: 0 0 88%; }
  .reviews__bar { flex-direction: column; align-items: flex-start; gap: 14px; }
  .reviews__arrow { width: 44px; height: 44px; }
}

/* Keep the whole reel within the viewport on short screens (svh = iOS address-bar safe) */
@media (min-width: 861px) {
  .phone { max-width: min(300px, calc((100svh - 300px) * 0.5625)); }
}

/* Solar: TODO note (internal, remove before launch) ---------------------- */

/* Solar: storage band --------------------------------------------------- */
.storage-band__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(22px, 3.6vw, 44px);
  align-items: center;
  background: linear-gradient(135deg, var(--tint) 0%, #FFE7CC 55%, #FFDCAF 100%);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.2vw, 44px);
}
.storage-band__text h2 { margin: 0 0 10px; font-size: clamp(1.55rem, 2.9vw, 2.4rem); line-height: 1.12; }
.storage-band__text p { margin: 0 0 20px; color: #5b524d; font-size: 1rem; max-width: 44ch; }
.storage-band__media img {
  width: 100%; height: auto; display: block;
  border-radius: calc(var(--radius-lg) - 8px);
  box-shadow: 0 18px 44px rgba(35, 31, 32, 0.18);
}
@media (max-width: 860px) {
  .storage-band__inner { grid-template-columns: 1fr; text-align: center; }
  .storage-band__text p { margin-inline: auto; }
}

/* Solar: value props ---------------------------------------------------- */
.vprops { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 34px); }
.vprop__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--tint); color: var(--orange);
  margin-bottom: 14px;
}
.vprop__icon .icon { width: 22px; height: 22px; }
.vprop h3 { margin: 0 0 8px; font-size: 1.16rem; }
.vprop p { margin: 0; color: #5b524d; line-height: 1.6; font-size: 0.94rem; }
@media (max-width: 860px) { .vprops { grid-template-columns: 1fr; } }

/* Solar: how it works steps --------------------------------------------- */
.steps__head { text-align: center; margin: 0 auto clamp(22px, 2.8vw, 34px); max-width: 720px; }
.steps__head h2 { margin: 0 0 8px; }
.steps__head p { margin: 0; color: var(--orange); font-family: var(--font-display); font-weight: 600; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 24px); align-items: stretch; }
.step-card {
  background: #fff;
  border: 1px solid rgba(35, 31, 32, 0.07);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.4vw, 28px) clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 24px);
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden; text-align: center;
  box-shadow: 0 12px 32px rgba(35, 31, 32, 0.06);
}
.step-card__num {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto;
  background: var(--orange); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
}
.step-card h3 { margin: 0; color: var(--ink); font-size: 1.1rem; line-height: 1.25; }
.step-card p { margin: 0 0 4px; color: #5b524d; font-size: 0.9rem; line-height: 1.55; }
.step-card img {
  width: 100%;
  aspect-ratio: 4 / 3;      /* one shape for three differently sized sources */
  object-fit: cover;
  display: block;
  margin-top: auto;
  border-radius: 12px;      /* curved on all four corners, bottom included */
}
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* Solar hero: phone-number capture (matches the home hero CTA rhythm) ----- */
.pc-check { margin: 0 0 22px; max-width: 460px; }
.pc-check__row { display: flex; gap: 14px; align-items: flex-start; }
.pc-check .field { flex: 1; min-width: 0; margin: 0; }
.pc-check input { width: 100%; min-height: 58px; }
.pc-check__row .btn { flex: none; min-height: 58px; white-space: nowrap; }
@media (max-width: 560px) {
  .pc-check { max-width: 100%; }
  .pc-check__row { flex-direction: column; gap: 10px; }
  .pc-check__row .btn { width: 100%; justify-content: center; }
}

/* Keep the primary CTA in the first screen on short and small viewports --- */
@media (max-height: 700px) and (min-width: 861px) {
  .hero__proof { padding-block: 6px; font-size: 0.82rem; margin-bottom: 8px; }
  .hero__tagline { margin-bottom: 4px; }
  .hero__sub { margin-bottom: 12px; }
}
@media (max-width: 560px) {
  /* the promo bar was eating ~15% of a small phone screen */
  .review-bar__inner { font-size: 0.74rem; padding: 6px var(--gutter); gap: 3px 8px; }
  .review-bar__cta { font-size: 0.74rem; }
  .hero__proof { padding-block: 6px; font-size: 0.7rem; margin-bottom: 8px; }
  .hero__sub { margin-bottom: 14px; }
  .hero__grid { gap: 11px; }
  /* the reel already reads as an install video; drop its caption on phones so
     the pixels go to the footage and the quote form still clears the CTA */
  .hero__reel-tag { display: none; }
  .hero__reel { gap: 0; }

  /* The source clips are 9:16 portrait. A full-width short box would crop a
     band out of the middle and cut the founders' heads off, so the homepage
     reel keeps the clip's own shape and is sized by height instead. */
  .phone--whole {
    width: auto;
    max-width: 100%;
    aspect-ratio: 9 / 16;
    height: clamp(250px, 42svh, 400px);
    margin-inline: auto;
  }
}
@media (max-width: 560px) and (max-height: 700px) {
  /* small, short phones: the credentials still appear in the trust row below */
  .hero__proof { display: none; }
  .hero__tagline { margin-bottom: 4px; }
  /* tighten the stack and the reel so the headline, stats, video and the quote
     form all still land above the sticky CTA on a short screen */
  .hero__grid { gap: 8px; }
  .hero__stats { margin: 4px 0 6px; }
  .phone { height: clamp(170px, 32svh, 264px); }
  /* keep the homepage reel whole (9:16) on short screens too, just shorter */
  .phone--whole { height: clamp(240px, 44svh, 300px); }
}

/* ======================================================================
   Phone hero: centred, headline-led, visual straight after the sub
   (matches the Solar Battery Group mobile structure)
   ====================================================================== */
@media (max-width: 860px) {
  /* let the text column's children sit in the same flow as the media,
     so the reel can slot in right after the sub like SBG does */
  .hero__grid { display: flex; flex-direction: column; gap: 14px; align-items: center; }
  .hero__col--text { display: contents; }
  .hero__col--text > * { text-align: center; }

  /* headline, copy, the proof-stat row, then the reel (SBG-style), with the
     quote form at the bottom. The sticky bar surfaces the "Get my free quote"
     CTA on load so a paid visitor always has a visible action while the form
     is below. */
  .hero__proof { order: 1; margin: 0 auto; }
  .hero__tagline { order: 2; margin: 0; }
  .hero--split h1 { order: 3; margin: 0; }
  .hero__sub { order: 4; margin: 0 auto; max-width: 42ch; }
  .hero__stats { order: 5; margin-inline: auto; }
  .hero__col--media { order: 6; width: 100%; }
  .hero__ctas { order: 7; justify-content: center; width: 100%; max-width: 340px; }
  .pc-check { order: 7; margin: 0 auto; width: 100%; max-width: 340px; }
  .trusted-by { order: 8; justify-content: center; margin: 0; }
  .hero__reel { margin-inline: auto; }
}

/* Logo-strip marquee clones: cloned in JS for a seamless -50% wrap on phones.
   Hidden by default at every width so wider screens (where the strip already
   fits) never render the set twice; the 560px block below reveals them so the
   one-line strip has enough items to drift without a visible gap. */
.trusted-by__logos li[data-clone] { display: none; }

@media (max-width: 560px) {
  /* the promo bar was 3 lines / 82px before you saw anything */
  .review-bar__msg { display: none; }
  .review-bar__inner { justify-content: center; gap: 10px; padding: 7px var(--gutter); font-size: 0.82rem; }
  .review-bar__cta { font-size: 0.82rem; }
  .breadcrumb { padding-block: 8px; font-size: 0.78rem; }

  /* SBG-style: small proof chip, big centred headline, tight sub */
  .hero__proof { font-size: 0.72rem; padding: 6px 12px; line-height: 1.3; }
  .hero__tagline { font-size: 0.68rem; letter-spacing: 0.16em; }
  .hero--split h1 { font-size: clamp(1.55rem, 7vw, 2.15rem); line-height: 1.1; }
  .hero__sub { font-size: 0.94rem; line-height: 1.45; }
  .hero__sub-more { display: none; }

  .pc-check input { padding: 14px 16px; font-size: 1rem; }
  .pc-check .btn--lg, .hero__ctas .btn--lg { padding: 13px 18px; font-size: 1rem; }

  .trusted-by { gap: 10px; }
  .trusted-by__logos { gap: 14px; }
  .trusted-by__label { font-size: 0.66rem; }

@media (max-width: 560px) {
  .trusted-by {
    flex-direction: column; align-items: stretch; gap: 12px;
    overflow: hidden; max-width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  }
  .trusted-by__label { text-align: center; }
  .trusted-by__logos {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    gap: 30px;
    padding: 2px 0;
    animation: logo-drift 24s linear infinite;
    will-change: transform;
  }
  .trusted-by__logos li, .trusted-by__logos li[data-clone] { display: block; flex: none; }
  .trusted-by__logos img { height: 34px; }
  .trusted-by__logos img.is-wordmark { height: 22px; }
  @keyframes logo-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 15px)); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .trusted-by__logos { animation: none !important; }
  .trusted-by__logos li[data-clone] { display: none !important; }
}
  /* drop the Instagram link on phones so the reel sits right above the phone
     field and the whole hero fits one screen */
  .reel-ig { display: none; }
}

/* Mobile: the hero now carries its own quote CTA in the first screen, so the
   sticky bar stays hidden while the hero is in view and slides up once you
   scroll past it (JS toggles .is-visible). That keeps it off the reel. */

/* Hero reel sound toggle (electrical page only, its video has audio) ------ */
.phone__sound {
  position: absolute;
  right: 16px; bottom: 16px;
  z-index: 3;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(35, 31, 32, 0.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fff; cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.phone__sound:hover { background: rgba(35, 31, 32, 0.85); transform: scale(1.06); }
.phone__sound:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.phone__sound .icon { width: 20px; height: 20px; }
.phone__sound .icon--sound { display: none; }
.phone__sound.is-on { background: var(--orange); }
.phone__sound.is-on .icon--muted { display: none; }
.phone__sound.is-on .icon--sound { display: block; }

@media (max-width: 560px) {
  /* the slogan costs ~44px and earns nothing above the reel */
  .hero__tagline { display: none; }
}

/* Phone: give the primary sticky CTA the room its label needs, and size the
   reel so its bottom bezel lands clear of the bar --------------------------- */
@media (max-width: 880px) {
  .sticky-bar .btn { white-space: nowrap; }
  .sticky-bar .btn--primary { flex: 1.8; }
  .sticky-bar .btn--ghost { flex: 1; }
}
@media (max-width: 560px) {
  .sticky-bar .btn { font-size: 0.95rem; min-height: 48px; }
}

/* ======================================================================
   Mobile hero polish (both pages): cleaner top, stacked action bar
   ====================================================================== */
@media (max-width: 560px) {
  /* load without the Home / Solar batteries breadcrumb up top */
  /* phone field, button and trust row all share the full hero width */
  .pc-check, .trusted-by { max-width: 100%; margin-inline: auto; }
  .trusted-by { justify-content: center; }
  /* stack the capture, stretching field and button to the same full width */
  .pc-check__row { flex-direction: column; align-items: stretch; gap: 10px; }
  .pc-check__row .field, .pc-check__row .btn { width: 100%; }
  .pc-check__row .btn, .pc-check input { min-height: 52px; }
}
@media (max-width: 880px) {
  /* two full-width buttons stacked, so "Speak to a ... expert" fits in full */
  .sticky-bar { flex-direction: column; gap: 8px; padding-top: 10px; }
  .sticky-bar .btn { flex: none; width: 100%; min-height: 50px; white-space: nowrap; }
  .sticky-bar .btn--ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  .sticky-bar .btn--ghost .icon { width: 18px; height: 18px; flex: none; }
  body.has-sticky-bar { padding-bottom: 122px; }
}

/* Phones: one-row bar (quote + a compact call button) so the CTA is about
   70px instead of 122px and stops covering the hero video. The long ghost
   label collapses to "Call" at this width. */
.sb-short { display: none; }
@media (max-width: 560px) {
  .sticky-bar { flex-direction: row; align-items: center; gap: 10px; padding-top: 8px; }
  .sticky-bar .btn { width: auto; min-height: 48px; }
  .sticky-bar .btn--primary { flex: 1 1 auto; }
  .sticky-bar .btn--ghost { flex: 0 0 auto; padding-inline: 20px; }
  .sb-full { display: none; }
  .sb-short { display: inline; }
  body.has-sticky-bar { padding-bottom: 78px; }
}