/* ==========================================================================
   Handy Volt — Solar, Battery & Heat Pump
   Design system + components
   ========================================================================== */

/* ---------- Tokens ----------
   Palette is the logo: amber #F8B038 + charcoal #303030, on warm-neutral greys.
   Every text colour below is contrast-checked against the surface it sits on.

   The one trap: amber is a LIGHT colour (1.87:1 on white), so it can never be
   used for text on a pale background. --brand is for FILLS — buttons, dots,
   ticks, glyphs on dark. --brand-700 is the text-safe bronze (5.6:1 on white)
   and is what eyebrows, inline links and small labels use. Don't swap them. */
:root {
  /* Charcoal ramp — the logo's grey, deepened for full-bleed sections */
  --ink:          #1A1A1A;   /* dark sections, footer, hero scrim   */
  --ink-2:        #242424;
  --ink-3:        #333333;   /* ≈ the logo's own #303030            */
  --brand-charcoal: #303030;

  /* Amber — fills only */
  --brand:        #F8B038;   /* logo amber, sampled from the artwork */
  --brand-600:    #E09A22;   /* hover / pressed                      */
  --brand-700:    #8F5D00;   /* TEXT-SAFE bronze — 5.62:1 on white   */
  --brand-soft:   #FEF3E1;   /* tint for icon chips, success panels  */
  --brand-lift:   #FFC868;   /* lighter gold, for amber on dark      */

  /* Kept as aliases so --accent utilities keep working; same amber. */
  --accent:       #F8B038;
  --accent-600:   #E09A22;
  --accent-soft:  #FEF3E1;

  /* Neutrals — warm-neutral, not blue, so they sit under the amber */
  --white:        #FFFFFF;
  --paper:        #F7F7F8;
  --paper-2:      #EDEDEF;
  --line:         #E4E4E7;
  --line-strong:  #C9C9CE;
  --text:         #1F1F1F;   /* 16.5:1 on white */
  --text-2:       #5A5A5E;   /*  6.9:1 on white */
  --text-3:       #6E6E76;   /*  5.1:1 on white */
  --on-dark:      #C9C9CE;   /* body text on --ink, 10.6:1 */
  --on-dark-mute: #96969E;   /* muted text on --ink,  5.9:1 */

  /* Type */
  --font: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Space & shape */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 20, 20, .06), 0 2px 8px rgba(20, 20, 20, .04);
  --shadow:    0 4px 12px rgba(20, 20, 20, .07), 0 16px 40px rgba(20, 20, 20, .07);
  --shadow-lg: 0 8px 24px rgba(20, 20, 20, .10), 0 32px 72px rgba(20, 20, 20, .12);
  --shadow-brand: 0 12px 32px rgba(248, 176, 56, .28);

  --wrap: 1200px;
  --nav-h: 76px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* `height: auto` is essential, not cosmetic. Every <img> carries width/height
   attributes so the page doesn't jump while images load — but those attributes
   are CSS presentational hints, so `height="1375"` becomes `height: 1375px` and
   beats any `aspect-ratio` set later. Resetting it here lets aspect-ratio (or
   an explicit height) do the sizing. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.12;
  letter-spacing: -.028em;
  font-weight: 800;
  color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 3.7vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -.02em; }
h4 { font-size: 1.02rem; letter-spacing: -.01em; }
p  { margin: 0 0 1.1em; color: var(--text-2); }
p:last-child { margin-bottom: 0; }

::selection { background: var(--brand); color: #1A1A1A; }

/* ---------- Layout ---------- */
.wrap {
  width: min(var(--wrap), 100% - 48px);
  margin-inline: auto;
}
.section { padding: clamp(72px, 9vw, 128px) 0; }
.section--tight { padding: clamp(56px, 6vw, 88px) 0; }
.section--paper { background: var(--paper); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: var(--on-dark-mute); }

.grid { display: grid; gap: 28px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Section headers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-lift));
}
.section--dark .eyebrow { color: var(--brand); }

.s-head { max-width: 660px; margin-bottom: 56px; }
.s-head.center { margin-inline: auto; text-align: center; }
.s-head.center .eyebrow { justify-content: center; }
.s-head p { font-size: 1.09rem; }

.lede { font-size: 1.15rem; line-height: 1.62; color: var(--text-2); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #1A1A1A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: .97rem;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-brand); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; }

.btn--accent { --btn-bg: var(--accent); --btn-fg: #1A1A1A; }
.btn--accent:hover { box-shadow: 0 12px 32px rgba(248, 176, 56, .34); }

.btn--dark { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--dark:hover { box-shadow: 0 12px 32px rgba(26, 26, 26, .3); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: var(--shadow); }

.btn--glass {
  --btn-bg: rgba(255, 255, 255, .1);
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, .28);
  backdrop-filter: blur(10px);
}
.btn--glass:hover { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.3); }

.btn--sm { padding: 11px 20px; font-size: .9rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--brand-700);
  font-size: .95rem;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.header__inner {
  width: min(var(--wrap), 100% - 48px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* transparent-over-hero variant */
.header--float { background: transparent; }
.header--float .nav a { color: rgba(255, 255, 255, .86); }
.header--float .nav a:hover, .header--float .nav a.is-active { color: #fff; }
.header--float .burger span { background: #fff; }
.header--float .header__cta.btn--ghost { border-color: rgba(255,255,255,.3); color: #fff; }
.header--float .header__cta.btn--ghost:hover { background: #fff; color: var(--ink); }

.header.is-stuck {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(20, 20, 20, .06);
}
.header.is-stuck .nav a { color: var(--text-2); }
.header.is-stuck .nav a:hover, .header.is-stuck .nav a.is-active { color: var(--ink); }
.header.is-stuck .burger span { background: var(--ink); }
.header.is-stuck .header__cta.btn--ghost { border-color: var(--line-strong); color: var(--ink); }

/* Logo — Handy Volt's supplied lockup.
   The HV mark is amber on both backgrounds, but the "Handy Volt." wordmark is
   charcoal and disappears over the dark hero, so a reversed (white-wordmark)
   variant ships alongside it. Both are in the DOM and swapped with CSS rather
   than by changing src, so the header can flip on scroll with no flash. */
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo__img {
  height: 42px;
  width: auto;
  display: block;
}
/* Default: charcoal wordmark, for light backgrounds (scrolled header). */
.logo__img--light { display: none; }

/* Transparent header over the hero, and the always-dark footer. */
.header--float:not(.is-stuck) .logo__img--dark,
.footer .logo__img--dark { display: none; }
.header--float:not(.is-stuck) .logo__img--light,
.footer .logo__img--light { display: block; }

.footer .logo__img { height: 46px; }

/* Nav */
/* Seven items, a phone number and a CTA is a lot to fit. The nav never wraps
   and never shrinks; instead the phone drops out at 1280px and the whole nav
   becomes the drawer at 1080px, so there is always slack rather than a
   layout that only just fits. */
.nav {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}
.nav a {
  position: relative;
  padding: 9px 12px;
  border-radius: var(--pill);
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-2);
  transition: color .2s, background .2s;
}
.nav a:hover { background: rgba(140, 140, 148, .12); }
.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}
.header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.header__phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .93rem; white-space: nowrap;
}
/* The number stays reachable via the CTA, the footer and the mobile FAB. */
@media (max-width: 1280px) { .header__phone { display: none; } }
.header__phone svg { width: 16px; height: 16px; }

/* Burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  border: 0; background: transparent;
  cursor: pointer;
  padding: 12px 10px;
  flex-direction: column;
  justify-content: space-between;
  margin-left: auto;
}
.burger span {
  display: block; height: 2px; width: 100%;
  border-radius: 2px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s;
}
.burger.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Mobile drawer */
/* Closed state must not extend past the viewport. A `position: fixed` panel
   parked at translateX(100%) is NOT clipped by overflow-x on body (fixed
   elements escape ancestor overflow), so it added ~375px of horizontal scroll
   to every page below 1080px. Putting overflow-x:hidden on <html> would fix
   the symptom but risks breaking the sticky quote rail, so the drawer fades
   and drops in instead — same affordance, zero overflow. */
.drawer {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 99;
  background: var(--white);
  padding: 28px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .32s var(--ease), opacity .26s var(--ease), visibility .32s;
  overflow-y: auto;
}
.drawer.is-open {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.drawer a {
  padding: 16px 4px;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.drawer .btn { margin-top: 24px; }
.drawer__foot { margin-top: auto; padding-top: 28px; color: var(--text-3); font-size: .9rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(92vh, 880px);
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 72px) 0 88px;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: slowzoom 22s var(--ease) forwards;
}
@keyframes slowzoom { to { transform: scale(1); } }
/* Dark enough for white text on the left, clear enough to see the install on
   the right. The two gradients stack, so the vertical one stays light in the
   middle; the bottom stop protects the stats row. */
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(26, 26, 26, .93) 0%, rgba(26, 26, 26, .78) 42%, rgba(26, 26, 26, .28) 78%, rgba(26, 26, 26, .42) 100%),
    linear-gradient(180deg, rgba(26, 26, 26, .60) 0%, transparent 34%, rgba(26, 26, 26, .58) 100%);
}
/* Brand glow over the hero photo. Eased back from the original values because
   the real install shots are brighter than the stock image this was tuned for.
   The blur filter is gone: a radial gradient is already soft, and blurring a
   720px layer sitting behind the LCP image costs a large offscreen raster on
   every paint for no visible gain. */
.hero__glow {
  position: absolute; z-index: -1;
  width: 720px; height: 720px;
  right: -180px; top: -220px;
  background: radial-gradient(circle, rgba(248, 176, 56, .22), transparent 62%);
  pointer-events: none;
}
.hero__glow--2 {
  right: auto; left: -260px; top: auto; bottom: -320px;
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(248, 176, 56, .14), transparent 64%);
}
.hero__inner { position: relative; max-width: 720px; }
.hero h1 { color: #fff; margin-bottom: 24px; }
.hero h1 .grad {
  background: linear-gradient(94deg, var(--brand) 5%, #FFDC97 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lede {
  font-size: clamp(1.05rem, 1.55vw, 1.24rem);
  color: rgba(255, 255, 255, .78);
  max-width: 580px;
  margin-bottom: 36px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 48px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 10px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, .9);
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 26px;
}
.badge b { color: var(--brand); font-weight: 800; }
.badge__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(248, 176, 56, .22);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(248, 176, 56, .22); }
  50%      { box-shadow: 0 0 0 9px rgba(248, 176, 56, 0); }
}

/* hero stats */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 52px;
  padding-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.hstat b {
  display: block;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -.035em;
  color: #fff;
  line-height: 1.1;
}
.hstat > span { font-size: .84rem; color: rgba(255, 255, 255, .58); font-weight: 500; }

/* ---------- Page hero (inner pages) ---------- */
.phero {
  position: relative;
  padding: calc(var(--nav-h) + 96px) 0 96px;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.phero__bg { position: absolute; inset: 0; z-index: -2; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; }
.phero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(26, 26, 26, .95) 0%, rgba(26, 26, 26, .86) 48%, rgba(26, 26, 26, .55) 100%);
}
.phero__glow {
  position: absolute; z-index: -1;
  width: 620px; height: 620px; right: -160px; top: -200px;
  background: radial-gradient(circle, rgba(248, 176, 56, .15), transparent 64%);
}
.phero__inner { max-width: 700px; position: relative; }
.phero h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.phero p { color: rgba(255,255,255,.76); font-size: 1.1rem; max-width: 580px; }
.phero .eyebrow { color: var(--brand); }
.phero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: .84rem; color: rgba(255,255,255,.5);
  margin-bottom: 20px;
}
.crumbs a:hover { color: #fff; }
.crumbs svg { width: 13px; height: 13px; opacity: .5; }

/* ---------- Trust strip ---------- */
.trust {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 30px 0;
}
.trust__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 40px;
}
.trust__label {
  font-size: .76rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-3);
}
.trust__items { display: flex; flex-wrap: wrap; gap: 14px 34px; }
.trust__item {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: .93rem; color: var(--text);
}
.trust__item svg { width: 19px; height: 19px; color: var(--brand-600); flex-shrink: 0; }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.card:hover .card__media img { transform: scale(1.07); }
.card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(26, 26, 26, .55) 100%);
}
.card__tag {
  position: absolute; z-index: 2; left: 16px; top: 16px;
  padding: 6px 13px; border-radius: var(--pill);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(8px);
  font-size: .74rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink);
}
.card__body { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: 10px; }
.card__body p { font-size: .97rem; }
.card__list {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.card__list li {
  position: relative; padding-left: 26px;
  font-size: .93rem; color: var(--text-2);
}
.card__list li::before {
  content: "";
  position: absolute; left: 0; top: .5em;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5D00' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.card__foot { margin-top: auto; padding-top: 4px; }

/* Icon feature card */
.fcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.fcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.fcard h4 { margin-bottom: 8px; font-size: 1.08rem; }
.fcard p { font-size: .94rem; margin: 0; }
.section--dark .fcard {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .09);
}
.section--dark .fcard:hover { background: rgba(255,255,255,.07); }

.icon {
  width: 52px; height: 52px;
  border-radius: 15px;
  display: grid; place-items: center;
  margin-bottom: 20px;
  background: var(--brand-soft);
  color: var(--brand-700);
}
.icon svg { width: 24px; height: 24px; }
.icon--accent { background: var(--ink); color: var(--brand); }
.icon--ink { background: var(--paper-2); color: var(--ink); }
.section--dark .icon { background: rgba(248, 176, 56, .13); color: var(--brand); }
.section--dark .icon--accent { background: rgba(248, 176, 56, .14); color: var(--accent); }

/* ---------- Split (image + text) ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
}
.split--rev .split__media { order: 2; }
.split__media { position: relative; }
.split__media img {
  width: 100%;
  height: auto;              /* let aspect-ratio size it, not the height attribute */
  border-radius: var(--r-xl);
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}
.split__media--stack { padding: 0 40px 40px 0; }
.split__media--stack .split__img-2 {
  position: absolute;
  right: 0; bottom: 0;
  width: 54%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  border: 7px solid var(--white);
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}
.split__note {
  position: absolute;
  left: -22px; bottom: 34px;
  background: var(--white);
  border-radius: var(--r);
  padding: 18px 22px;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 14px;
  max-width: 260px;
}
.split__note b { display: block; font-size: 1.5rem; letter-spacing: -.03em; color: var(--ink); line-height: 1.1; }
.split__note span { font-size: .82rem; color: var(--text-3); }
.split__note .icon { width: 44px; height: 44px; margin: 0; border-radius: 12px; flex-shrink: 0; }

.ticks { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 36px; color: var(--text-2); }
.ticks li b { color: var(--ink); font-weight: 700; }
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: .18em;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.section--dark .ticks li { color: var(--on-dark-mute); }
.section--dark .ticks li b { color: #fff; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: 28px; }
.step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 28px 30px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  margin-bottom: 16px;
  background: linear-gradient(140deg, var(--brand), var(--brand-lift));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.step h4 { margin-bottom: 8px; }
.step p { font-size: .94rem; margin: 0; }
.steps--line .step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -20px; top: 52px;
  width: 12px; height: 12px;
  border-top: 2px dashed var(--line-strong);
  border-right: 2px dashed var(--line-strong);
  transform: rotate(45deg);
}

/* ---------- Stats band ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: rgba(255, 255, 255, .07);
}
.stat {
  background: var(--ink-2);
  padding: 38px 28px;
  text-align: center;
}
.stat b {
  display: block;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 6px;
}
.stat b em { font-style: normal; color: var(--brand); }
.stat > span { font-size: .88rem; color: var(--on-dark-mute); }

/* ---------- Calculator ---------- */
.calc {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--white);
  border: 1px solid var(--line);
}
.calc__form { padding: clamp(30px, 4vw, 48px); }
.calc__form h3 { margin-bottom: 6px; }
.calc__form > p { font-size: .95rem; margin-bottom: 28px; }

.field { margin-bottom: 24px; }
.field__top {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px; gap: 4px 12px;
}
.field label { font-weight: 700; font-size: .93rem; color: var(--ink); }
.field__val {
  font-weight: 800; font-size: 1.02rem;
  color: var(--brand-700);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 4px;
  background: var(--paper-2);
  outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--white);
  border: 6px solid var(--brand);
  box-shadow: 0 2px 10px rgba(248, 176, 56, .45);
  cursor: grab;
  transition: transform .18s var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--white); border: 6px solid var(--brand);
  box-shadow: 0 2px 10px rgba(248, 176, 56, .45); cursor: grab;
}

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 9px 17px;
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  background: var(--white);
  font-size: .89rem; font-weight: 600;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.chip:hover { border-color: var(--brand); color: var(--brand-700); }
.chip.is-on {
  background: var(--ink); color: #fff; border-color: var(--ink);
}

.calc__out {
  background: linear-gradient(165deg, var(--ink) 0%, var(--ink-3) 100%);
  color: #fff;
  padding: clamp(30px, 4vw, 48px);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.calc__out::before {
  content: "";
  position: absolute;
  width: 380px; height: 380px; right: -140px; top: -160px;
  background: radial-gradient(circle, rgba(248, 176, 56, .28), transparent 65%);
  filter: blur(20px);
}
.calc__out > * { position: relative; }
.calc__out .eyebrow { color: var(--brand); }
.calc__big {
  font-size: clamp(2.6rem, 5vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  margin: 4px 0 6px;
  font-variant-numeric: tabular-nums;
}
.calc__big small { font-size: .38em; font-weight: 700; color: rgba(255,255,255,.5); letter-spacing: -.01em; }
.calc__sub { color: rgba(255, 255, 255, .62); font-size: .95rem; margin-bottom: 30px; }
.calc__rows { display: grid; gap: 2px; border-radius: var(--r); overflow: hidden; margin-bottom: 26px; }
.calc__row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 15px 18px;
  background: rgba(255, 255, 255, .06);
  font-size: .93rem;
}
.calc__row span { color: rgba(255, 255, 255, .68); }
.calc__row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.calc__row b.pos { color: var(--brand); }
.calc__fine { font-size: .78rem; color: rgba(255, 255, 255, .42); line-height: 1.6; margin-top: 18px; }

/* ---------- Accordion ---------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 4px;
  background: none; border: 0; cursor: pointer;
  text-align: left;
  font-size: 1.06rem; font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
  transition: color .2s;
}
.acc__btn:hover { color: var(--brand-700); }
.acc__ico {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--paper);
  display: grid; place-items: center;
  transition: transform .35s var(--ease), background .25s;
  position: relative;
}
.acc__ico::before, .acc__ico::after {
  content: ""; position: absolute;
  background: var(--ink); border-radius: 2px;
  transition: opacity .25s, background .25s;
}
.acc__ico::before { width: 13px; height: 2px; }
.acc__ico::after  { width: 2px; height: 13px; }
.acc__item.is-open .acc__ico { background: var(--brand); transform: rotate(180deg); }
.acc__item.is-open .acc__ico::after { opacity: 0; }
.acc__item.is-open .acc__ico::before { background: #1A1A1A; }
.acc__panel {
  max-height: 0; overflow: hidden;
  transition: max-height .42s var(--ease);
}
.acc__panel-in { padding: 0 60px 28px 4px; }
.acc__panel-in p { font-size: .98rem; }

/* ---------- CTA band ---------- */
.cta {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(48px, 6.5vw, 84px) clamp(28px, 5vw, 72px);
  background: var(--ink);
  color: #fff;
}
.cta__bg { position: absolute; inset: 0; z-index: -2; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(26, 26, 26, .95), rgba(26, 26, 26, .74));
}
.cta__glow {
  position: absolute; z-index: -1;
  width: 560px; height: 560px; right: -140px; bottom: -260px;
  background: radial-gradient(circle, rgba(248, 176, 56, .34), transparent 64%);
  filter: blur(24px);
}
.cta__inner { max-width: 640px; position: relative; }
/* The CTA band is dark but isn't a .section--dark, so the eyebrow would keep
   the light-background bronze and drop to 3.1:1. Amber here instead (9.3:1). */
.cta .eyebrow { color: var(--brand); }
.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, .76); font-size: 1.08rem; margin-bottom: 32px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Form ---------- */
.formcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fg { display: flex; flex-direction: column; gap: 8px; }
.fg--full { grid-column: 1 / -1; }
.fg label { font-size: .86rem; font-weight: 700; color: var(--ink); }
.fg label span { color: var(--brand-700); }
.fg input, .fg select, .fg textarea {
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: .96rem;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.fg textarea { resize: vertical; min-height: 128px; }
.fg input:focus, .fg select:focus, .fg textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(248, 176, 56, .30);
}
.fg select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5A5E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  padding-right: 42px;
}
.form-note { font-size: .82rem; color: var(--text-3); margin-top: 16px; }
.form-msg {
  display: none;
  margin-top: 18px; padding: 15px 18px;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  border: 1px solid rgba(248, 176, 56, .3);
  color: var(--brand-700);
  font-size: .93rem; font-weight: 600;
}
.form-msg.is-on { display: block; }
.form-msg.is-error {
  background: rgba(214, 68, 48, .07);
  border-color: rgba(214, 68, 48, .3);
  color: #A32E1E;
}
/* Honeypot — hidden from people, left in the DOM for bots to fill in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Contact tiles ---------- */
.ctile {
  display: flex; gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ctile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.ctile .icon { width: 46px; height: 46px; margin: 0; border-radius: 13px; flex-shrink: 0; }
.ctile h4 { margin-bottom: 3px; font-size: .98rem; }
.ctile p { margin: 0; font-size: .93rem; }
.ctile a { color: var(--brand-700); font-weight: 600; }

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  color: var(--on-dark-mute);
  padding: clamp(56px, 7vw, 88px) 0 0;
}
.footer a { color: var(--on-dark); transition: color .2s; }
.footer a:hover { color: #fff; }
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 44px;
  padding-bottom: 52px;
}
.footer__about { margin: 22px 0 24px; font-size: .94rem; color: var(--on-dark-mute); max-width: 320px; }
.footer h5 {
  margin: 0 0 18px;
  font-size: .78rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: .94rem; }
.footer__contact li { display: flex; gap: 11px; align-items: flex-start; }
.footer__contact svg { width: 17px; height: 17px; color: var(--brand); flex-shrink: 0; margin-top: 3px; }
.socials { display: flex; gap: 10px; }
.socials a {
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(255, 255, 255, .07);
  display: grid; place-items: center;
  transition: background .2s, transform .2s;
}
.socials a:hover { background: var(--brand); transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; }
.footer__bar {
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding: 26px 0;
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  align-items: center; justify-content: space-between;
  font-size: .86rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 12px 22px; }

/* ---------- Floating call button (mobile) ---------- */
.fab {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 90;
  display: none;
  align-items: center; gap: 9px;
  padding: 14px 22px;
  border-radius: var(--pill);
  background: var(--brand);
  color: #1A1A1A;
  font-weight: 800; font-size: .95rem;
  box-shadow: var(--shadow-brand);
}
.fab svg { width: 18px; height: 18px; }

/* ---------- Reveal on scroll ---------- */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; }
.rv-d2 { transition-delay: .16s; }
.rv-d3 { transition-delay: .24s; }
.rv-d4 { transition-delay: .32s; }

/* Very small handsets: the tagline under the wordmark is the widest thing in
   the header and pushes the burger off the edge. */
@media (max-width: 359px) {
  .logo__img { height: 34px; }
  .wrap, .header__inner { width: calc(100% - 28px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--line .step::after { display: none; }
}

/* Nav collapses to the drawer well before it would run out of room, so the
   desktop bar is only ever shown at widths where it comfortably fits. */
@media (max-width: 1080px) {
  .nav, .header__actions { display: none; }
  .burger { display: flex; }
  /* With the header CTA gone, the floating call button takes over. */
  .fab { display: inline-flex; }
}

@media (max-width: 940px) {
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--rev .split__media { order: 0; }
  .split__media--stack { padding: 0 30px 30px 0; }
  .split__note { left: 12px; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .wrap, .header__inner { width: calc(100% - 36px); }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding: calc(var(--nav-h) + 56px) 0 72px; }
  .hero__stats { gap: 22px 34px; }
  .hstat { min-width: 120px; }
  .trust__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .split__media--stack { padding: 0 0 0 0; }
  .split__media--stack .split__img-2 { display: none; }
  .split__note { left: auto; right: 14px; bottom: 14px; max-width: 210px; padding: 14px 16px; }
  .acc__panel-in { padding-right: 8px; }
  .footer__top { grid-template-columns: 1fr; gap: 34px; }
  .stats { grid-template-columns: 1fr; }
  .btn { padding: 14px 24px; }
  .drawer { padding-bottom: 90px; }
  .cta { padding-inline: 22px; }
  .badge { font-size: .78rem; padding: 7px 14px 7px 9px; gap: 8px; }
  .badge__dot { width: 7px; height: 7px; }
  .hero__actions .btn { width: 100%; }
  .cta__actions .btn, .phero__actions .btn { width: 100%; }
}