/* ==========================================================================
   Venova Energy — Homepage component styles
   ========================================================================== */

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-header);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled{ border-color:var(--border-default); box-shadow:0 4px 24px -12px rgba(2,20,45,.12); }

/* Homepage-only: header opens transparent over the dark hero so header and
   hero read as one continuous environment, then gains a translucent navy
   blur once scrolled. Only index.html's header carries this class — every
   other page's hero is light, where the default header above already works. */
.site-header.on-dark-hero{
  background:transparent;
  backdrop-filter:none;
  border-bottom-color:transparent;
}
.site-header.on-dark-hero .brand-lockup span{ color:#fff; }
.site-header.on-dark-hero .nav-links a{ color:rgba(255,255,255,.8); }
.site-header.on-dark-hero .nav-links a:hover{ color:#fff; }
.site-header.on-dark-hero .nav-links a[aria-current="page"]{ color:#fff; }
.site-header.on-dark-hero .nav-links a[aria-current="page"]::after{ background:var(--grad-brand); }
.site-header.on-dark-hero .nav-toggle span{ background:#fff; }
.site-header.on-dark-hero .header-actions .btn-secondary{
  color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.06);
}
.site-header.on-dark-hero .header-actions .btn-secondary:hover{
  background:rgba(255,255,255,.14); border-color:#fff;
}
.site-header.on-dark-hero.is-scrolled{
  background:rgba(1,22,46,.72);
  backdrop-filter:blur(14px);
  border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 12px 32px -16px rgba(0,0,0,.45);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:.9rem; }
.brand-lockup{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
/* Logo is a wide (~2.9:1) wing mark, never square — height fixed, width auto
   (never both dimensions forced) keeps it at its real proportions everywhere. */
.brand-lockup img{ height:30px; width:auto; max-width:none; object-fit:contain; flex-shrink:0; }
.brand-lockup span{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--navy-800); white-space:nowrap; }

.main-nav{ display:flex; align-items:center; gap:var(--sp-8); }
.nav-links{ display:flex; gap:var(--sp-6); }
.nav-links a{
  font-size:var(--fs-sm); font-weight:600; color:var(--text-secondary);
  padding-block:.4rem; position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--grad-brand); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-fast) var(--ease-out);
}
.nav-links a:hover{ color:var(--navy-800); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a[aria-current="page"]{ color:var(--navy-800); }
.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:var(--sp-4); }
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:.5rem;
}
.nav-toggle span{ width:22px; height:2px; background:var(--navy-800); border-radius:2px; transition:transform var(--dur-fast), opacity var(--dur-fast); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-panel{ display:none; }

/* Mobile navigation overlay. A dedicated, opaque, full-screen panel — not
   links floating over page content. It hangs from the real (JS-measured)
   header height in --header-h, so it always starts exactly below the fixed
   header row with no gap and no overlap, on every page/breakpoint/text
   state, rather than a guessed pixel constant. */
/* Narrow desktop/laptop band just above the mobile-nav switchover (e.g.
   1024px laptops): the full nav row + header CTAs no longer quite fit at
   their default spacing, silently clipping the "Get a Free Assessment"
   button against the sitewide overflow-x:hidden safety net. Tightening the
   row's own gaps (not font sizes, so nothing looks shrunken) reclaims just
   enough width — this is a pre-existing responsive gap, not a mobile-nav
   change, so it's fixed independently of the mobile work above. */
@media (min-width:901px) and (max-width:1100px){
  .main-nav{ gap:var(--sp-5); }
  .nav-links{ gap:var(--sp-3); }
  .header-actions{ gap:var(--sp-2); }
  .header-actions .btn-secondary{ display:none; }
}

@media (max-width:900px){
  .nav-links{ display:none; }
  .header-actions .btn-secondary{ display:none; }
  .header-actions{ gap:var(--sp-3); }
  .nav-toggle{ display:flex; position:relative; z-index:1; }

  /* Keep the header row itself fully opaque while the menu is open — on the
     homepage's transparent-over-hero header and on every interior page's
     translucent-blur header alike — so the logo / Get a Free Assessment /
     close icon never sit over visible page content behind them. */
  body.nav-open .site-header.on-dark-hero{
    background:var(--navy-900);
    border-bottom-color:rgba(255,255,255,.08);
  }
  body.nav-open .site-header:not(.on-dark-hero){
    background:var(--white);
    backdrop-filter:none;
    border-bottom-color:var(--border-default);
  }

  .nav-panel{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:var(--header-h, 68px);
    left:0; right:0; bottom:0;
    z-index:95;
    isolation:isolate;
    background:var(--grad-navy);
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
    padding:var(--sp-8) var(--container-pad) var(--sp-10);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* Subtle Venova line motif — same brand texture as .motif-grid.on-dark,
     kept faint enough that it never competes with link legibility. */
  .nav-panel::before{
    content:"";
    position:absolute; inset:0;
    z-index:-1;
    pointer-events:none;
    background-repeat:repeat;
    background-size:210px 72px;
    opacity:.06;
    background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDc5JyBoZWlnaHQ9JzM3MScgdmlld0JveD0nMCAwIDEwNzkgMzcxJz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgwLDM3MSkgc2NhbGUoMC4xLC0wLjEpJyBmaWxsPSdub25lJyBzdHJva2U9JyMwMjI0NEEnIHN0cm9rZS13aWR0aD0nMTYnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnPjxwYXRoIGQ9J00xOTAgMzUyNSBjMCAtMiAyOCAtMjAgNjMgLTQxIDM0IC0yMSAxODYgLTExNCAzMzcgLTIwOCAxNTEgLTkzIDMxMyAtMTkzIDM2MCAtMjIyIGw4NSAtNTIgMTE1IC03IGMxMTQ2IC02NCAyMTM0IC0yNTYgMzExMiAtNjA0IDM2NCAtMTMwIDYzMCAtMjQxIDEyMDggLTUwMyAzMjYgLTE0OSA1NTggLTI0NyA2NTcgLTI3OSA0MCAtMTMgNzMgLTI3IDczIC0zMCAwIC03IC0zMjYgLTE2NSAtNDUwIC0yMTcgLTI2NyAtMTEyIC02MDEgLTE5OCAtODcwIC0yMjIgLTIxNSAtMjAgLTI5OCAtNSAtNTQ4IDk0IC00ODcgMTk0IC05NTQgMzIyIC0xNDQyIDM5NSAtMTU1IDIzIC0zNzkgNDUgLTM4NiAzOCAtNCAtNCAxMDggLTEwOCA0MTIgLTM4MyBsMTEyIC0xMDEgNzUgLTYgYzE1OSAtMTQgNDc3IC04NSA5MTUgLTIwNyAyODcgLTc5IDQwMCAtMTAzIDU1NyAtMTIxIDMxMSAtMzMgNzU5IDU4IDExNTUgMjM2IDMyMSAxNDQgNTUwIDI2NSA3NjggNDA1IDIwIDE0IDI5IDEzIDg1IC05IDg1IC0zMiAxMDcgLTM1IDE0MSAtMTggbDI4IDE1IC03OCAzNiBjLTQ0IDIxIC03NCA0MCAtNjggNDUgNSA0IDEwNSA3MiAyMjIgMTUxIDExNiA3OCAyMTIgMTQ0IDIxMiAxNDYgMCAyIC0xOCAtNiAtNDAgLTE3IC0yMiAtMTIgLTQ5IC0xOSAtNjAgLTE2IC0xNyA0IC02MCAtMjggLTUyIC0zOSA2IC0xMSAxIC0yNCAtMTEgLTI0IC03IDAgLTIzIC05IC0zNSAtMjAgLTI3IC0yNSAtNDMgLTI1IC02NCAtMSAtMTUgMTggLTE1IDIxIDIgMzYgMTQgMTMgMTcgMjUgMTMgNDcgLTUgMjggLTUgMjggMjAgMTcgMTQgLTYgMjkgLTI1IDM1IC00MyA5IC0yNyAxMCAtMjEgMTEgNDYgMSA0MiA2IDgwIDExIDgzIDYgMyAxMCAwIDExIC03IDAgLTcgNiAzIDEzIDIyIDcgMTkgMTcgMzUgMjIgMzUgMTMgMCA0NSAyNiA3NCA1OSAyNyAzMSAxOSAyOSAtNDUgLTE0IC01NyAtMzkgLTQ3MyAtMjkzIC01MzMgLTMyNyBsLTUxIC0yOCAtMTc4IDg5IGMtMTg1IDkyIC02ODYgMzU4IC04NzggNDY1IC0xODkgMTA3IC03ODAgMzk2IC0xMDAzIDQ5MSAtMTA5MyA0NjYgLTIxODkgNjk1IC0zODQyIDgwMCAtOTEgNiAtMTg5IDEyIC0yMTcgMTQgLTI5IDMgLTUzIDMgLTUzIDF6Jy8+PHBhdGggZD0nTTE1NzAgMjU0NSBjMTEgLTEzIDQzMyAtMzY5IDUwOCAtNDI5IDE5IC0xNSA1MCAtMjAgMTU1IC0yNyA4NjkgLTU4IDE2NDMgLTIzMiAyNzIyIC02MTQgNDYwIC0xNjMgNDMzIC0xNTUgNTI3IC0xNTUgODIgMCAyMDYgMjYgMTkxIDQwIC00IDQgLTY5IDM1IC0xNDMgNjggLTc0IDMzIC0yMjkgMTA2IC0zNDUgMTYyIC01NzQgMjc4IC04MTkgMzgzIC0xMTkwIDUwOCAtNzE2IDI0MiAtMTIzOSAzNDcgLTIxODQgNDQyIC0yNTIgMjUgLTI1OCAyNSAtMjQxIDV6Jy8+PHBhdGggZD0nTTY4NjUgMTQxMSBjLTcgLTEyIDMgLTE4IDkyIC01NyA2MSAtMjcgNzUgLTMwIDkwIC0xOSAyMCAxNSAyNSAxMiAtOTYgNjAgLTcyIDI4IC03NyAyOSAtODYgMTZ6Jy8+PHBhdGggZD0nTTcyNDcgMTI0NyBsLTI4IC0yMyAxMjggLTQyIGM3MSAtMjMgMTc1IC01NSAyMzMgLTcyIDU4IC0xNyAxMTIgLTMzIDEyMCAtMzUgOSAtMyA3IDEgLTQgMTAgLTExIDggLTIzIDE1IC0yNyAxNSAtNCAwIC05NCAzOCAtMTk5IDg1IC0xMDUgNDcgLTE5MiA4NSAtMTkzIDg1IC0xIC0xIC0xNCAtMTEgLTMwIC0yM3onLz48cGF0aCBkPSdNMzUwMCA3MDAgYzAgLTIxIDI4NiAtMjUxIDQwMSAtMzIzIDY0IC00MCAyNTggLTEzNyAyNzQgLTEzNyAzIDAgNSA1IDUgMTAgMCAxMCAtNDkgMzUgLTEyMCA2MSAtMzMgMTMgLTM0IDEzIC0xMCAxOSAyMiA1IDI1IDEyIDI4IDUzIDIgMjggLTEgNDcgLTcgNDcgLTYgMCAtMTEgNyAtMTEgMTYgMCA5IC0xMCAyNCAtMjIgMzMgLTM1IDI5IC0xNiAzOSA1NCAyOSAzNSAtNCA3MCAtMTEgNzggLTE0IDggLTMgMzggLTcgNjUgLTEwIDMyIC0yIDEwIDUgLTYwIDIwIC0xNDEgMzEgLTM1MCA5MSAtNTMyIDE1NCAtNzkgMjYgLTE0MyA0NiAtMTQzIDQyeicvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgwLDM3MSkgc2NhbGUoMC4xLC0wLjEpJyBmaWxsPSdub25lJyBzdHJva2U9JyMwRTlBNDgnIHN0cm9rZS13aWR0aD0nMTYnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnPjxwYXRoIGQ9J00xMDQ5MCAzNDc5IGMtMTkgLTQgLTY5IC0xMyAtMTEwIC0xOSAtNDEgLTYgLTk1IC0xNSAtMTIwIC0xOSAtMjUgLTUgLTcyIC0xNCAtMTA1IC0yMSAtMTEzIC0yMSAtMTUwIC0yOSAtMjgwIC02MCAtMTQ2IC0zNCAtMTQyIC0zMyAtMzU1IC05NCAtMzU0IC0xMDIgLTcwNCAtMjI5IC0xMDMwIC0zNzQgLTE5NyAtODcgLTU5NSAtMjkwIC04MDAgLTQxMCAtMjEzIC0xMjMgLTM0MyAtMjAyIC01NjYgLTM0NCAtNDEgLTI3IC03NyAtNDggLTgwIC00OCAtMyAwIC00MCAtMjUgLTgyIC01NSAtNjQgLTQ2IC0xNDMgLTEwMCAtMjUzIC0xNzAgLTkgLTUgLTMyIC0xOCAtNTAgLTI5IC0xOSAtMTAgLTUwIC0zMSAtNjkgLTQ2IC0xOSAtMTUgLTQzIC0yOSAtNTIgLTMzIC05IC0zIC0yMiAtMTUgLTI4IC0yNiAtOSAtMTkgLTggLTIxIDE1IC0yMSAxNCAwIDI4IDAgMzEgMSA5IDEgMjQgLTIzIDI0IC0zOCAwIC03IC02IC0xMyAtMTMgLTEzIC03IDAgLTIyIC02IC0zMyAtMTQgLTE3IC0xNCAtMTggLTE2IC0zIC0zMSAxOCAtMTggMTI5IC0zNCAxMjkgLTE4IDAgMTIgNjkgNjAgMTIwIDg0IDE5IDkgNjkgNDEgMTEwIDcwIDQyIDMwIDk2IDY1IDEyMCA3OCAyNSAxNCA1MCAzMCA1NSAzNiA2IDcgNzggNTYgMTYwIDExMCA4MyA1NSAxNTIgMTAyIDE1MyAxMDcgMiA0IDggOCAxMyA4IDggMCA4NSA0OSAzMjggMjA4IDk2IDYzIDM1OSAyMjIgMzY2IDIyMiAzIDAgMjMgMTEgNDUgMjUgMTA5IDY5IDU2NiAyOTggNzY1IDM4MyAyNTggMTExIDYwOSAyNDUgNzk1IDMwNCAzNiAxMSA5MCAyOSAxMjAgMzkgMzAgMTAgMTA1IDMyIDE2NSA0OSA2MSAxNyAxMTkgMzUgMTMwIDQwIDExIDUgMzQgMTEgNTAgMTMgMTcgMiA3MyAxNSAxMjUgMjkgNTIgMTQgMTE5IDMwIDE0OCAzNiAxMTkgMjcgMTUyIDM2IDE1MiA0NCAwIDEwIC00MiA4IC05MCAtM3onLz48cGF0aCBkPSdNOTg2NSAzMTIwIGMtMTEgLTQgLTY1IC0yMCAtMTIwIC0zNSAtMzE0IC04NSAtNzE5IC0yNDQgLTEwODUgLTQyNiAtNTIyIC0yNjAgLTEwMDEgLTU1NiAtMTYwMyAtOTg5IC0yMDUgLTE0NiAtMjg0IC0xOTggLTM2OSAtMjQxIC00MyAtMjIgLTc4IC00NCAtNzggLTUwIDAgLTEyIDc3IC00OCAxMDQgLTQ5IDQzIDAgMzc0IDE4OSA1ODYgMzM1IDEyMSA4NCAxOTggMTM4IDM0NSAyNDAgODggNjIgMjA1IDE0MiAyNjAgMTc4IDU1IDM3IDEwNSA3MCAxMTAgNzQgNTcgNDUgNTEwIDMyNCA2ODkgNDI0IDg1IDQ4IDQyOCAyMTkgNTQxIDI3MCAxMTAgNTEgMzMwIDE0MCA0NTAgMTg0IDEwMiAzNyAxMzcgNTEgMTY3IDY2IDEwIDUgMjQgOSAzMiA5IDggMCAxOCA1IDIxIDEwIDcgMTIgLTIyIDEyIC01MCAweicvPjxwYXRoIGQ9J005MjgwIDI2MTggYy0zMjIgLTEzMCAtNjUwIC0yODQgLTg1NSAtNDA0IC00NCAtMjYgLTEyMyAtNzEgLTE3NSAtMTAyIC0xMzggLTgwIC0zMDUgLTE4NiAtNTU1IC0zNTIgLTQ3MiAtMzE0IC01NjEgLTM3MCAtODE1IC01MTAgLTk2IC01MyAtMjQ5IC0xMzggLTMzOSAtMTg5IC0zNDQgLTE5MyAtNjQ1IC0zMzQgLTk1NiAtNDQ2IC0xMDMgLTM3IC0zNzcgLTExMCAtNDc1IC0xMjYgLTE0MiAtMjMgLTMyNSAtMzkgLTQyNSAtMzcgLTE1MSAyIC00NDkgMzUgLTUyMyA1NyAtMTggNSAtMzUgMTAgLTM3IDEwIC0zMSAtMiAtMTk4IDM4IC0yOTUgNzAgLTMwIDEwIC03NSAyNCAtMTAwIDMxIC0yNSA3IC02OSAyMSAtOTggMzEgLTc1IDI3IC05NSAyNSAtNTYgLTYgMTcgLTEzIDYxIC01NCA5NyAtOTAgMzcgLTM2IDczIC02NSA4MSAtNjUgNyAwIDI5IC0xMyA0NyAtMzAgNDMgLTM4IDE3NiAtMTMwIDE4NyAtMTMwIDUgMCAyMCAtOCAzMyAtMTggMTMgLTEwIDUxIC0yOSA4NCAtNDIgMzMgLTEzIDY2IC0yOCA3MiAtMzMgMTggLTEzIDE2MCAtNTUgMjczIC03OSAxMzIgLTI5IDQ4MCAtMzIgNjE1IC01IDIyMSA0NCA0NzYgMTE0IDU3MiAxNTggMjQgMTAgNDkgMTkgNTYgMTkgNyAwIDE3IDQgMjIgOCA2IDUgNTcgMjggMTE1IDUyIDIxMiA4OCA0NjEgMjI0IDcxMCAzODUgMjQ4IDE2MSAzMDkgMjAzIDU0MCAzNzUgNzggNTggMTU2IDExNCAxNzMgMTI0IDM2IDIyIDkxIDYyIDM2NyAyNjggMzI4IDI0NCA1MTcgMzc5IDcwNyA1MDYgMTAxIDY3IDE4NSAxMjIgMTg4IDEyMiAzIDAgNDcgMjYgOTggNTggNTEgMzIgMTMzIDgwIDE4MiAxMDcgNTAgMjcgMTA3IDU5IDEyOCA3MyAyMiAxMyAxMTIgNTkgMjAwIDEwMyA4OSA0NCAxNzkgODkgMjAwIDk5IDIyIDExIDQ1IDIwIDUzIDIwIDggMCAxNCA1IDE0IDEwIDAgMTYgLTMwIDEwIC0xMTAgLTIyeicvPjwvZz48L3N2Zz4=");
  }
  .nav-panel.is-open{
    opacity:1; transform:none; visibility:visible; pointer-events:auto;
    transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }

  .nav-panel-links{ display:flex; flex-direction:column; }
  .nav-panel-links a{
    font-family:var(--font-display); font-size:var(--fs-lg); font-weight:600;
    color:rgba(255,255,255,.82); padding-block:var(--sp-5); position:relative;
    border-bottom:1px solid rgba(255,255,255,.1);
    transition:color var(--dur-fast) var(--ease-out);
  }
  .nav-panel-links a:first-child{ padding-top:var(--sp-2); }
  .nav-panel-links a:hover,
  .nav-panel-links a:focus-visible{ color:#fff; }
  .nav-panel-links a[aria-current="page"]{ color:#fff; }
  .nav-panel-links a[aria-current="page"]::after{
    content:""; position:absolute; left:0; bottom:-1px; height:2px; width:28px;
    background:var(--grad-brand);
  }

  .nav-panel .panel-cta{ margin-top:var(--sp-8); display:flex; flex-direction:column; gap:var(--sp-3); }

  /* Scroll-lock: JS pins the body at its scroll offset (position:fixed) so
     background content can't scroll underneath the open overlay on iOS. */
  body.nav-open{ position:fixed; left:0; right:0; overflow:hidden; width:100%; }
  body.nav-open .whatsapp-fab{ display:none; }
}

/* Narrow phones: the "Venova Energy" wordmark plus a full-width primary CTA
   and the menu toggle no longer fit on one row without crowding, so the
   header collapses to the icon mark alone — the brand link (with its
   aria-label) and the CTA/toggle stay fully visible and legible. */
@media (max-width:480px){
  .brand-lockup span{ display:none; }
  /* At the narrowest phone widths the logo mark, full "Get a Free
     Assessment" button and menu toggle no longer fit on one row at their
     default sizing — tighten the button and toggle just enough to keep all
     three visible with no overlap, without truncating the button's text. */
  .header-actions{ gap:var(--sp-2); }
  .header-actions .btn-primary{
    padding:.55rem .7rem;
    font-size:.7rem;
  }
  .nav-toggle{ padding:.4rem; gap:4px; }
  .nav-toggle span{ width:19px; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  min-height:100vh;
  display:flex; align-items:center;
  padding-top:84px;
  background:var(--grad-navy);
  color:var(--text-on-dark);
}
.hero-inner{
  position:relative; z-index:2; width:100%;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
/* max-width here just bounds the overall composition on wide screens — the
   headline/paragraphs carry their own tighter ch-based widths below, so the
   three-button CTA row still has room to sit on one line without wrapping. */
.hero-content{ max-width:960px; display:flex; flex-direction:column; align-items:center; }
.hero-content .eyebrow{ color:var(--green-300); justify-content:center; }
.hero-content h1{ font-size:clamp(2.6rem, 6vw, var(--fs-6xl)); color:#fff; margin-top:var(--sp-4); max-width:17ch; text-wrap:balance; }
.hero-content p.lead{ color:var(--text-on-dark-muted); margin-top:var(--sp-6); font-size:1.15rem; max-width:52ch; }
.hero-content p.hero-sub2{ color:var(--text-on-dark-muted); margin-top:var(--sp-3); font-size:var(--fs-md); max-width:52ch; }

.hero-actions{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--sp-4); margin-top:var(--sp-10); }

/* "Get a Free Assessment" — must read as an obvious button at rest, not
   just on hover: a translucent navy/glass fill with a visible light border. */
.hero-actions .btn-secondary{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.38);
  color:#fff;
  backdrop-filter:blur(6px);
}
.hero-actions .btn-secondary:hover{
  background:rgba(255,255,255,.18);
  border-color:#fff;
  transform:translateY(-2px);
}

/* "Calculate Backup Hours" — pill-shaped to match the other two so it reads
   as the third member of one CTA group, not stray text underneath them. */
.hero-actions .btn-ghost{
  padding:.9rem 1.6rem;
  border-radius:var(--radius-full);
  border:1.5px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.02);
}
.hero-actions .btn-ghost:hover{
  border-color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.08);
  transform:translateY(-2px);
}
.hero-actions .btn-ghost::after{ color:var(--green-300); margin-left:.3rem; }

@media (max-width:980px){
  .hero{ min-height:auto; padding-block:132px 80px; }
  .hero-content{ max-width:600px; }
}
@media (max-width:560px){
  .hero-content h1{ font-size:clamp(2rem, 9vw, 2.75rem); }
  .hero-actions{ flex-direction:column; align-items:stretch; width:100%; }
  .hero-actions .btn{ width:100%; }
}

/* ---------- Trust / value strip ---------- */
.trust-strip{ background:var(--bg-subtle); padding-block:var(--sp-10); }
.trust-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--sp-6); }
.trust-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--sp-3); }
.trust-item .trust-icon{
  width:44px; height:44px; border-radius:var(--radius-md); background:var(--white);
  display:flex; align-items:center; justify-content:center; color:var(--green-600);
  box-shadow:var(--shadow-sm);
}
.trust-item span{ font-size:var(--fs-xs); font-weight:600; color:var(--text-secondary); }
@media (max-width:900px){ .trust-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Problem -> Solution / appliance energy network ---------- */
/* A true radial network centered on PuREPower: the hub sits at a fixed
   50%/50% and all 8 appliance cards sit at fixed, evenly-spaced percentage
   coordinates around it (defined inline in the markup, so the geometry is
   correct even before JS runs). An absolutely-positioned SVG layer draws
   the curved connectors; JS computes each one at runtime from the hub's
   and each card's real on-screen edge, so every line visibly starts at
   PuREPower and ends at its appliance — see initApplianceNetwork in
   animations.js. Mobile abandons the radial arrangement entirely for a
   stacked hub-then-grid layout (see the max-width:759px block). */
.network-section{ position:relative; background:var(--bg-page); overflow:hidden; }
.network-stage{ position:relative; margin-top:var(--sp-16); max-width:1180px; margin-inline:auto; }

.network-radial{ position:relative; width:100%; aspect-ratio:1180/760; }

.network-radial-glow{
  position:absolute; left:50%; top:50%; width:44%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(28,180,88,.14) 0%, rgba(28,180,88,.05) 45%, rgba(28,180,88,0) 72%);
  filter:blur(10px);
}

.network-paths{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:1; }
.network-path{ fill:none; stroke:var(--green-400); stroke-width:2; stroke-opacity:.22; transition:stroke-opacity var(--dur-slow) var(--ease-out), stroke-width var(--dur-base) var(--ease-out); }
.network-path.is-active{ stroke-opacity:.75; }
.network-path.is-highlighted{ stroke-opacity:1; stroke-width:2.5; filter:drop-shadow(0 0 6px rgba(28,180,88,.5)); }
.network-pulse{ fill:#B9F0CC; filter:drop-shadow(0 0 7px rgba(79,203,121,1)); opacity:0; transition:opacity 140ms linear; }
.network-pulse.is-firing{ opacity:1; }
.network-pulse-ambient{ fill:#9BE7B4; filter:drop-shadow(0 0 3px rgba(79,203,121,.7)); opacity:0; transition:opacity 500ms ease; }
.network-pulse-ambient.is-on{ opacity:.4; }

/* ---- appliance mini-cards, placed by inline left/top percentages ---- */
.network-node{
  position:absolute; transform:translate(-50%,-50%); z-index:3;
  width:clamp(136px, 15vw, 192px);
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-3); border-radius:var(--radius-md);
  background:var(--white); border:1px solid var(--border-default);
  box-shadow:var(--shadow-sm); cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.network-node:focus-visible{ outline:2px solid var(--green-500); outline-offset:2px; }
.network-node-icon{
  flex:none; width:38px; height:38px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--mist); color:var(--slate-500);
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.network-node-icon svg{ width:20px; height:20px; }
.network-node-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.network-node-name{ font-family:var(--font-body); font-weight:600; font-size:var(--fs-xs); color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Status row's height is permanently reserved (never 0) so a card's overall
   height never changes between idle and powered — only opacity toggles. */
.network-node-status{
  display:flex; align-items:center; gap:5px;
  font-family:var(--font-body); font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--green-600); height:13px; overflow:hidden;
  opacity:0; visibility:hidden; transition:opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.network-node-dot{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--slate-300); transition:background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
/* Powered state: border colour, background tint, icon colour and glow only —
   deliberately no transform/scale, so card dimensions never shift. */
.network-node.is-powered{ border-color:rgba(28,180,88,.4); background:linear-gradient(0deg, var(--green-100), var(--white) 70%); box-shadow:var(--shadow-glow-green); }
.network-node.is-powered .network-node-icon{ background:var(--green-100); color:var(--green-600); }
.network-node.is-powered .network-node-status{ opacity:1; visibility:visible; transition:opacity var(--dur-base) var(--ease-out); }
.network-node.is-powered .network-node-dot{ background:var(--green-500); box-shadow:0 0 0 3px rgba(28,180,88,.18); }
.network-node.is-highlighted{ border-color:var(--green-500); box-shadow:var(--shadow-lg), var(--shadow-glow-green); z-index:4; }
.network-stage.is-user-focus .network-node:not(.is-highlighted){ opacity:.4; }
.network-stage.is-user-focus .network-path:not(.is-highlighted){ stroke-opacity:.06; }

/* ---- PuREPower hub: fixed dead-center, the visual hero ---- */
.network-hub{ position:absolute; transform:translate(-50%,-50%); z-index:5; display:flex; align-items:center; justify-content:center; }
.network-hub-aura{
  position:absolute; inset:-30%; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(28,180,88,.32) 0%, rgba(28,180,88,.1) 45%, rgba(28,180,88,0) 72%);
  filter:blur(8px); animation:hub-breathe 4.2s var(--ease-in-out) infinite;
}
.network-hub.is-charging .network-hub-aura{ animation-duration:2.2s; }
@keyframes hub-breathe{ 0%,100%{ opacity:.5; transform:scale(.9); } 50%{ opacity:1; transform:scale(1.1); } }

.network-hub-card{
  position:relative; z-index:1; width:264px; max-width:100%; padding:var(--sp-7) var(--sp-6);
  border-radius:var(--radius-lg); background:var(--grad-navy); color:var(--text-on-dark);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(79,203,121,.22), inset 0 1px 0 rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
}
.network-hub-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%) translateY(-4px);
  font-family:var(--font-body); font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--navy-900); background:var(--green-300); padding:4px 13px; border-radius:var(--radius-full);
  white-space:nowrap; box-shadow:0 4px 10px rgba(2,20,45,.25);
  opacity:0; transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.network-hub.is-charging .network-hub-badge{ opacity:1; transform:translateX(-50%) translateY(0); }
.network-hub-mark{ width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.09); display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-3); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
/* The mark is a wide (~2.9:1) wing shape, not a square icon — height fixed,
   width auto keeps its real proportions instead of stretching it into a circle. */
.network-hub-mark img{ width:auto; height:15px; max-width:42px; object-fit:contain; filter:brightness(0) invert(1); opacity:.95; }
.network-hub-name{ font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:700; letter-spacing:.01em; }
.network-hub-sub{ font-family:var(--font-body); font-size:var(--fs-2xs); color:var(--text-on-dark-muted); margin-bottom:var(--sp-5); }

/* ---- continuous, non-numeric energy indicator ----
   A single streaming rail rather than a segmented/discrete counter, so it
   never implies a fixed maximum number of supported devices. The stream
   itself is the only thing that animates (background position); the rail's
   height never changes. */
.network-load{ width:100%; margin-top:var(--sp-1); }
.network-load-label{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-on-dark-muted); margin-bottom:var(--sp-2); }
.network-load-bar{ position:relative; height:6px; border-radius:var(--radius-full); background:rgba(255,255,255,.14); overflow:hidden; }
.network-load-stream{
  position:absolute; inset:0; border-radius:var(--radius-full);
  background:linear-gradient(90deg, transparent 0%, var(--green-300) 45%, var(--green-300) 55%, transparent 100%);
  background-size:60% 100%; background-repeat:no-repeat; background-position:-60% 0;
  opacity:0; transition:opacity var(--dur-base) var(--ease-out);
}
.network-hub.is-charging .network-load-stream{ opacity:1; animation:network-load-flow 2.6s linear infinite; }
@keyframes network-load-flow{
  0%{ background-position:-60% 0; }
  100%{ background-position:160% 0; }
}
/* Status label under the rail is permanently reserved space — opacity-only. */
.network-load-status{
  display:block; margin-top:var(--sp-2); height:14px; overflow:hidden;
  font-family:var(--font-body); font-size:10.5px; font-weight:600; color:var(--green-300);
  opacity:0; visibility:hidden; transition:opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.network-load-status.is-visible{ opacity:1; visibility:visible; transition:opacity var(--dur-base) var(--ease-out); }

/* ---- permanent caption (fixed copy — never rotates, so it can never
   change the section's height) ---- */
.network-caption{
  margin-top:var(--sp-10); text-align:center; font-family:var(--font-body); font-size:var(--fs-sm);
  color:var(--text-secondary); max-width:60ch; margin-inline:auto;
}

/* ---- label above the network + clarifications below it ---- */
.network-examples-label{
  text-align:center; font-family:var(--font-body); font-size:var(--fs-2xs); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--green-600); margin:0 0 var(--sp-5);
}
.network-more{
  margin-top:var(--sp-3); text-align:center; font-family:var(--font-display); font-weight:600;
  font-size:var(--fs-md); color:var(--text-primary);
}
.network-disclaimer{
  margin-top:var(--sp-2); text-align:center; font-family:var(--font-body); font-size:var(--fs-2xs);
  color:var(--text-muted); max-width:64ch; margin-inline:auto;
}

/* ---- mobile-only vertical flow indicator (desktop/tablet keep it hidden) ---- */
.network-mobile-flow{ display:none; }

@media (prefers-reduced-motion: reduce){
  .network-hub-aura{ animation:none; opacity:.85; transform:none; }
  .network-load-stream{ animation:none; }
}

/* Tablet: same radial relationship, tighter footprint. Labels wrap instead
   of truncating — "Air Conditioner" must stay fully readable, not clipped. */
@media (max-width:1023px){
  .network-stage{ max-width:760px; }
  .network-node{ width:clamp(118px, 22vw, 156px); padding:var(--sp-2) var(--sp-2); gap:var(--sp-2); }
  .network-node-icon{ width:32px; height:32px; }
  .network-node-icon svg{ width:17px; height:17px; }
  .network-node-name{ white-space:normal; line-height:1.2; font-size:12.5px; }
  .network-hub-card{ width:210px; padding:var(--sp-5) var(--sp-4); }
  .network-hub-name{ font-size:var(--fs-lg); }
}

/* Mobile: abandon the radial layout entirely — hub on top, a simple
   vertical animated flow indicator, then the 8 cards in a plain 2-column
   grid below. No curved connector paths at this size. */
@media (max-width:759px){
  .network-radial{ aspect-ratio:auto; }
  .network-radial-glow{ display:none; }
  .network-paths{ display:none; }
  .network-radial{
    display:grid; grid-template-columns:1fr 1fr;
    grid-template-areas:
      "hub hub"
      "flow flow"
      "n1 n5"
      "n2 n6"
      "n3 n7"
      "n4 n8";
    column-gap:var(--sp-3); row-gap:var(--sp-3);
  }
  .network-hub,
  .network-node{ position:static; transform:none; width:auto; }
  .network-hub{ grid-area:hub; }
  .network-node[data-network-node="n1"]{ grid-area:n1; }
  .network-node[data-network-node="n2"]{ grid-area:n2; }
  .network-node[data-network-node="n3"]{ grid-area:n3; }
  .network-node[data-network-node="n4"]{ grid-area:n4; }
  .network-node[data-network-node="n5"]{ grid-area:n5; }
  .network-node[data-network-node="n6"]{ grid-area:n6; }
  .network-node[data-network-node="n7"]{ grid-area:n7; }
  .network-node[data-network-node="n8"]{ grid-area:n8; }
  .network-node.is-powered{ transform:none; }
  .network-hub-card{ max-width:280px; margin-inline:auto; }
  .network-node{ flex-direction:column; text-align:center; padding:var(--sp-3) var(--sp-2); gap:var(--sp-2); }
  .network-node-body{ align-items:center; }
  .network-node-status{ justify-content:center; }
  .network-mobile-flow{ grid-area:flow; display:flex; justify-content:center; padding:var(--sp-1) 0 var(--sp-2); }
  .network-mobile-flow-track{ position:relative; width:3px; height:32px; border-radius:var(--radius-full); background:linear-gradient(180deg, var(--green-400), rgba(28,180,88,.12)); overflow:hidden; }
  .network-mobile-flow-pulse{ position:absolute; left:-3px; width:9px; height:9px; border-radius:50%; background:var(--green-300); box-shadow:0 0 6px rgba(79,203,121,.9); animation:mobile-flow-travel 1.6s linear infinite; }
  @keyframes mobile-flow-travel{ 0%{ top:-10px; opacity:0; } 15%{ opacity:1; } 90%{ opacity:1; } 100%{ top:100%; opacity:0; } }
  @media (prefers-reduced-motion: reduce){
    .network-mobile-flow-pulse{ animation:none; top:40%; opacity:1; }
  }
}

/* Extremely narrow widths: drop to a single column so appliance labels
   ("Air Conditioner", "Lift / Pump") never clip instead of wrapping oddly
   in a cramped 2-column cell. */
@media (max-width:380px){
  .network-radial{
    grid-template-columns:1fr;
    grid-template-areas:
      "hub"
      "flow"
      "n1" "n2" "n3" "n4" "n5" "n6" "n7" "n8";
  }
}

/* ---------- Choose Your Solution ---------- */
.solution-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); }
.solution-card{
  position:relative; overflow:hidden;
  border-radius:var(--radius-xl); padding:var(--sp-10);
  min-height:420px; display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff;
}
.solution-card.is-home{ background:var(--grad-navy); }
.solution-card.is-commercial{ background:linear-gradient(160deg, #063a24 0%, #01162E 70%); }
.solution-card .solution-badge{ position:absolute; top:var(--sp-8); left:var(--sp-8); }
.solution-card h3{ color:#fff; font-size:var(--fs-3xl); margin-top:var(--sp-4); }
.solution-card p{ color:var(--text-on-dark-muted); margin-top:var(--sp-3); max-width:34ch; }
.solution-card .btn{ margin-top:var(--sp-6); align-self:flex-start; }
.solution-card .btn-secondary{ color:#fff; border-color:rgba(255,255,255,.28); }
.solution-card .btn-secondary:hover{ background:rgba(255,255,255,.08); border-color:#fff; }
.solution-card .solution-models{ margin-top:var(--sp-5); display:flex; flex-wrap:wrap; gap:.5rem; }
.solution-card .solution-models span{
  font-size:var(--fs-2xs); font-weight:600; padding:.3rem .7rem; border-radius:999px;
  background:rgba(255,255,255,.08); color:var(--text-on-dark-muted); border:1px solid rgba(255,255,255,.1);
}
@media (max-width:860px){ .solution-grid{ grid-template-columns:1fr; } }

/* ---------- Why PuREPower ---------- */
.benefit-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-5); }
@media (max-width:1080px){ .benefit-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .benefit-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .benefit-grid{ grid-template-columns:1fr; } }

/* ---------- Recommendation tool ---------- */
.rec-panel{
  max-width:720px; margin-inline:auto; background:var(--white); border:1px solid var(--border-default);
  border-radius:var(--radius-xl); padding:var(--sp-10); box-shadow:var(--shadow-md);
}
.rec-progress-track{ height:5px; background:var(--slate-100); border-radius:999px; overflow:hidden; }
.rec-progress-fill{ height:100%; width:0%; background:var(--grad-brand); transition:width var(--dur-base) var(--ease-out); }
.rec-progress-label{ font-size:var(--fs-2xs); font-weight:600; color:var(--text-muted); margin-top:var(--sp-2); text-transform:uppercase; letter-spacing:.06em; }
.rec-question{ margin-top:var(--sp-8); font-size:var(--fs-2xl); }
.rec-optional-tag{
  display:inline-block; margin-top:var(--sp-2); font-size:var(--fs-2xs); font-weight:600; color:var(--green-600);
  background:var(--green-100); padding:.2rem .6rem; border-radius:999px;
}
.rec-options{ display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-6); }
.rec-options--multi{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.rec-option{
  text-align:left; padding:1rem 1.2rem; border-radius:var(--radius-md); border:1.5px solid var(--slate-200);
  background:var(--white); font-weight:600; font-size:var(--fs-sm); color:var(--text-primary);
  transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.rec-option:hover{ border-color:var(--green-400); transform:translateX(2px); }
.rec-option.is-selected{ border-color:var(--green-500); background:var(--green-100); color:var(--green-700); }
@media (max-width:560px){ .rec-options--multi{ grid-template-columns:1fr; } }
.rec-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:var(--sp-8); }
.rec-back{ color:var(--text-muted); }

.rec-result-heading{ margin-top:var(--sp-6); font-size:var(--fs-2xl); }
.rec-result-model{ margin-top:var(--sp-4); font-size:var(--fs-lg); color:var(--text-primary); }
.rec-result-model strong{ color:var(--green-700); }
.rec-result-caveat{ margin-top:var(--sp-2); font-size:var(--fs-sm); color:var(--text-muted); }
.rec-result-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-8); }
.rec-restart{ display:block; margin-top:var(--sp-6); font-size:var(--fs-xs); color:var(--text-muted); text-decoration:underline; background:none; border:none; }

/* ---------- Backup calculator (compact homepage widget) ---------- */
.calc-panel{
  background:var(--white); border:1px solid var(--border-default); border-radius:var(--radius-xl);
  padding:var(--sp-10); box-shadow:var(--shadow-md);
}
.calc-layout{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-10); }
.calc-selector{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); }
.calc-group-title{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:var(--sp-3); }
.calc-item-list{ display:flex; flex-direction:column; gap:var(--sp-2); }
.calc-item{ display:flex; align-items:center; justify-content:space-between; padding:.6rem .2rem; border-bottom:1px solid var(--slate-100); gap:var(--sp-3); }
.calc-item-info{ display:flex; flex-direction:column; }
.calc-item-name{ font-size:var(--fs-sm); font-weight:600; }
.calc-item-watt{ font-size:var(--fs-2xs); color:var(--text-muted); }
.calc-stepper{ display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.calc-step-btn{
  width:28px; height:28px; border-radius:999px; border:1.5px solid var(--slate-200); background:var(--white);
  font-size:1rem; line-height:1; color:var(--navy-800); display:flex; align-items:center; justify-content:center;
}
.calc-step-btn:hover{ border-color:var(--green-500); color:var(--green-600); }
.calc-step-count{ min-width:18px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.calc-stepper--custom input{
  width:84px; padding:.4rem .6rem; border-radius:var(--radius-sm); border:1.5px solid var(--slate-200); font-size:var(--fs-sm);
}

.calc-output{ background:var(--bg-subtle); border-radius:var(--radius-lg); padding:var(--sp-6); display:flex; flex-direction:column; }
.calc-load-label{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.calc-load-value{ font-family:var(--font-display); font-size:var(--fs-3xl); color:var(--navy-800); margin-top:.2rem; }
.calc-empty{ margin-top:var(--sp-4); font-size:var(--fs-sm); color:var(--text-muted); }
.calc-results{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-top:var(--sp-5); }
.calc-result-card{ background:var(--white); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:var(--sp-4); text-align:center; }
.calc-result-model{ font-size:var(--fs-xs); font-weight:700; color:var(--navy-800); }
.calc-result-hours{ font-family:var(--font-display); font-size:var(--fs-xl); color:var(--green-600); margin-top:.3rem; }
.calc-result-label{ font-size:var(--fs-2xs); color:var(--text-muted); }
.calc-no-match{ font-size:var(--fs-sm); color:var(--text-muted); grid-column:1/-1; }
.calc-formula-note{ margin-top:var(--sp-6); font-size:var(--fs-2xs); color:var(--text-muted); line-height:var(--lh-relaxed); }
.calc-disclaimer{
  margin-top:var(--sp-6); padding:var(--sp-4); border-radius:var(--radius-md);
  background:var(--color-warning-bg); color:var(--color-warning); font-size:var(--fs-xs); line-height:var(--lh-relaxed);
}
.calc-actions{ display:flex; gap:var(--sp-3); margin-top:var(--sp-6); flex-wrap:wrap; }
@media (max-width:900px){ .calc-layout{ grid-template-columns:1fr; } .calc-selector{ grid-template-columns:1fr; } }

/* ---------- How the system thinks (two independent flow diagrams) ---------- */
/* Each subsection ("PuREPower" and "PuREPower + Solar Integration") is a
   standalone heading followed by a translucent glass panel over the
   section's existing navy background — never a large white/light block.
   The panel holds only the mode buttons (a single centered row/grid, no
   selector column) and the live diagram below them, built from real HTML
   node cards with orthogonal SVG connectors computed at runtime from each
   card's actual on-screen position — so every line visibly starts at a
   source dot on a card edge and ends with an arrowhead on the destination.
   Backup Battery always hangs off PuREPower on its own branch — directly
   below it on desktop, beside it on mobile — never in series between a
   source and the hub. Driven by initSystemThinks() in js/animations.js. */

/* Real desktop widths get noticeably more of the viewport instead of being
   boxed into the site's standard 1280px content column, while staying
   centered with equal side margins via the existing .container
   margin-inline:auto. Capped so it never runs edge-to-edge on ultra-wide
   monitors. Applies from the same width where the diagram has room to
   breathe; narrower layouts keep the site's normal container. */
@media (min-width:760px){
  .energy-flow-section .container{ max-width:min(1900px, 96vw); }
}

/* NOTE: this previously read `gap:var(--sp-14)` — --sp-14 was never defined
   in tokens.css (the scale skips straight from --sp-12 to --sp-16), so the
   gap silently computed to 0. That is what let the second subsection's
   heading visually touch/overlap the bottom of the first panel. Fixed to an
   explicit, verified value (80px desktop / 56px mobile below) rather than a
   guessed token name. */
.thinks-blocks{ display:flex; flex-direction:column; gap:80px; margin-top:var(--sp-8); }

.thinks-section{ display:flex; flex-direction:column; }

/* A true standalone heading above its panel — not a label inside the
   selector — flush with the panel's own left edge since both share the
   same width and horizontal position. */
.thinks-title{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-2xl); color:#fff;
  margin:0 0 var(--sp-6); padding-left:var(--sp-1);
}

.thinks-block{
  position:relative; background:rgba(255,255,255,.035); border:1px solid rgba(146,180,255,.16);
  border-radius:var(--radius-xl); padding:var(--sp-12); overflow:hidden;
  opacity:.6; transition:opacity var(--dur-slow) var(--ease-out);
  display:flex; flex-direction:column; align-items:center;
}
.thinks-block::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:24px 24px; opacity:.5;
}
.thinks-block::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(55% 60% at 50% 30%, rgba(79,203,121,.08) 0%, rgba(79,203,121,0) 70%);
}
.energy-flow-section.is-active .thinks-block{ opacity:1; }

/* ---- mode buttons: one centered row (2x2 grid for Solar on mobile only) ---- */
/* NOTE: margin-bottom previously read `var(--sp-9)` — also never defined —
   so the buttons sat with zero gap directly above the diagram. Fixed to an
   explicit 32px (within the requested 28-36px band). */
.thinks-modes{
  position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--sp-4); width:100%; margin-bottom:32px;
}

.thinks-mode{
  position:relative; display:flex; align-items:center; gap:var(--sp-3); min-width:0; text-align:left;
  padding:var(--sp-4) var(--sp-5); border-radius:var(--radius-md);
  background:rgba(255,255,255,.04); border:1.5px solid rgba(146,180,255,.18);
  transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.thinks-mode:hover:not(.is-active){ border-color:rgba(255,255,255,.32); }
.thinks-mode:focus-visible{ outline:2px solid var(--green-400); outline-offset:2px; }
.thinks-mode-icon{
  flex:none; width:40px; height:40px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.55); transition:all var(--dur-base) var(--ease-out);
}
.thinks-mode-icon svg{ width:20px; height:20px; }
.thinks-mode-label{ font-family:var(--font-body); font-weight:700; font-size:var(--fs-sm); color:#fff; white-space:nowrap; }
.thinks-mode-dot{ margin-left:var(--sp-3); flex:none; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.2); transition:all var(--dur-base) var(--ease-out); }
.thinks-mode.is-active{ background:rgba(79,203,121,.09); border-color:var(--green-400); box-shadow:0 14px 30px -18px rgba(20,180,90,.5), inset 0 0 0 1px rgba(79,203,121,.12); }
.thinks-mode.is-active .thinks-mode-icon{ background:rgba(79,203,121,.2); color:#9BE7B4; }
.thinks-mode.is-active .thinks-mode-dot{ background:var(--green-400); box-shadow:0 0 0 4px rgba(79,203,121,.18); }

/* ---- the live diagram ---- */
.thinks-panel{ position:relative; z-index:1; width:100%; }
.thinks-paths{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:1; }
.thinks-path{
  fill:none; stroke:rgba(255,255,255,.22); stroke-width:2.5; stroke-opacity:.6;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke var(--dur-base) var(--ease-out), stroke-opacity var(--dur-base) var(--ease-out);
}
.thinks-path.is-on{ stroke:var(--green-400); stroke-opacity:.92; filter:drop-shadow(0 0 4px rgba(79,203,121,.55)); }
.thinks-path.is-standby{ stroke:#7C93BE; stroke-opacity:.6; stroke-dasharray:2 8; }
.thinks-path.is-off{ stroke-opacity:.14; }
.thinks-source-dot{ filter:drop-shadow(0 0 4px rgba(79,203,121,.85)); }
.thinks-pulse{ fill:#B9F0CC; filter:drop-shadow(0 0 6px rgba(79,203,121,.95)); opacity:0; transition:opacity 140ms linear; }
.thinks-pulse.is-firing{ opacity:1; }
.thinks-pulse-ambient{ fill:#9BE7B4; filter:drop-shadow(0 0 3px rgba(79,203,121,.7)); opacity:0; transition:opacity 500ms ease; }
.thinks-pulse-ambient.is-on{ opacity:.4; }

/* Three-column layout — sources, hub, outputs — with Backup Battery in its
   own row directly beneath the hub column so it never reads as "in line"
   between a source and PuREPower.
   NOTE: column-gap previously read `var(--sp-9)` — undefined, like --sp-14
   and --sp-7 elsewhere in this file — so it silently computed to 0. With no
   horizontal gap, the source/hub/output cards sat almost touching, which is
   why connectors rendered as barely-visible stubs even though the geometry
   itself was correct. Fixed to an explicit 112px (within the requested
   90-140px band). Track widths now use `1fr` instead of a low fixed cap, and
   the whole flow is capped to a percentage of the panel (not the individual
   cards) so the diagram fills the requested 72-80% of panel width on wide
   screens instead of staying pinned to a small fixed size surrounded by
   empty space — while still using CSS Grid, not hand-placed coordinates. */
.thinks-flow{
  position:relative; z-index:2; display:grid;
  grid-template-columns:minmax(140px,1fr) minmax(180px,1fr) minmax(140px,1fr);
  grid-template-rows:auto auto;
  grid-template-areas:
    "sources hub outputs"
    ".       battery .";
  column-gap:clamp(72px, 8vw, 140px); row-gap:clamp(55px, 4.5vw, 80px);
  justify-content:center; align-items:center;
  width:76%; max-width:100%; margin-inline:auto;
}
.thinks-col{ display:flex; flex-direction:column; gap:var(--sp-5); justify-content:center; }
.thinks-col--sources{ grid-area:sources; align-items:stretch; }
.thinks-col--hub{ grid-area:hub; align-items:center; }
.thinks-col--outputs{ grid-area:outputs; align-items:stretch; }

.thinks-node{
  position:relative; padding:var(--sp-5); border-radius:var(--radius-md);
  background:rgba(255,255,255,.035); border:1px solid rgba(146,180,255,.18);
  display:flex; flex-direction:column; gap:7px; min-width:0;
  transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.thinks-node-icon{
  width:40px; height:40px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.55); margin-bottom:3px; transition:all var(--dur-base) var(--ease-out);
}
.thinks-node-icon svg{ width:21px; height:21px; }
.thinks-node-title{ font-family:var(--font-body); font-weight:700; font-size:var(--fs-lg); color:#fff; }
.thinks-node-status{
  display:inline-flex; align-items:center; width:fit-content; white-space:nowrap;
  font-size:var(--fs-2xs); font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:rgba(255,255,255,.5);
  padding:3px 10px; border-radius:var(--radius-full); background:rgba(255,255,255,.06);
  transition:color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.thinks-node--battery{ grid-area:battery; justify-self:center; width:100%; max-width:215px; }

.thinks-node.is-on{ border-color:rgba(79,203,121,.42); background:rgba(79,203,121,.07); box-shadow:0 10px 26px -16px rgba(20,180,90,.4); }
.thinks-node.is-on .thinks-node-icon{ background:rgba(79,203,121,.18); color:#9BE7B4; }
.thinks-node.is-on .thinks-node-status{ color:#9BE7B4; background:rgba(79,203,121,.16); }
.thinks-node.is-standby{ border-color:rgba(124,147,190,.45); }
.thinks-node.is-standby .thinks-node-icon{ color:#9FB2D6; }
.thinks-node.is-standby .thinks-node-status{ color:#9FB2D6; background:rgba(124,147,190,.16); }
.thinks-node.is-off{ opacity:.45; border-style:dashed; }
.thinks-node.is-off .thinks-node-icon{ filter:grayscale(1); }
.thinks-node.is-off .thinks-node-status{ color:rgba(255,255,255,.4); }

/* ---- PuREPower hub: the same premium off-white unit used elsewhere ---- */
.thinks-hub{ position:relative; display:flex; align-items:center; justify-content:center; }
.thinks-hub-glow{
  position:absolute; inset:-20%; z-index:0; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle, rgba(79,203,121,.32) 0%, rgba(79,203,121,.1) 45%, rgba(79,203,121,0) 72%);
  filter:blur(10px); animation:hub-breathe 4.2s var(--ease-in-out) infinite;
}
.thinks-hub.is-charging .thinks-hub-glow{ animation-duration:2.4s; }
.thinks-hub-unit{ position:relative; z-index:1; width:190px; height:146px; }
.thinks-hub-side{
  position:absolute; top:10px; right:-10px; bottom:10px; left:10px; z-index:1;
  border-radius:16px; background:linear-gradient(160deg, #ccd2d8 0%, #9aa2ab 100%);
}
.thinks-hub-face{
  position:absolute; inset:0; z-index:2; border-radius:16px;
  background:linear-gradient(155deg, #ffffff 0%, #eef1f4 48%, #dde2e7 100%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 20px 36px -16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.8);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:var(--sp-4);
}
.thinks-hub-logo img{ width:auto; height:18px; max-width:54px; object-fit:contain; }
.thinks-hub-name{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--navy-900); letter-spacing:.01em; }
.thinks-hub-status{ font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--green-600); }
.thinks-hub-led{ width:38px; height:5px; border-radius:var(--radius-full); background:var(--green-400); box-shadow:0 0 8px rgba(79,203,121,.75); margin-top:3px; }

/* min-height is sized generously for the longest caption across all six
   modes at each breakpoint (see the state tables in js/animations.js), so
   switching modes never changes a block's overall height. */
.thinks-caption{ position:relative; z-index:1; text-align:center; color:var(--text-on-dark-muted); max-width:min(60ch, 100%); margin:var(--sp-8) auto 0; min-height:4.4em; }
.thinks-subnote{ position:relative; z-index:1; text-align:center; color:rgba(159,173,194,.72); font-size:var(--fs-2xs); max-width:min(64ch, 100%); margin:var(--sp-2) auto 0; }

@media (prefers-reduced-motion: reduce){
  .thinks-hub-glow{ animation:none; opacity:.85; }
}

/* Solar's four mode buttons must stay in ONE centered row on desktop —
   never 2x2 — but their natural content width doesn't fit a single row
   between roughly 760px and 1250px. Shrink the buttons (not the row) in
   that tablet band so all four keep fitting on one line down through the
   1024px test breakpoint; below 759px the dedicated 2x2 grid takes over. */
@media (min-width:760px) and (max-width:1279px){
  .thinks-modes--quad{ gap:6px; flex-wrap:nowrap; }
  .thinks-modes--quad .thinks-mode{
    flex:1 1 0; min-width:0; padding:10px 8px; gap:6px; justify-content:center;
  }
  .thinks-modes--quad .thinks-mode-icon{ width:28px; height:28px; }
  .thinks-modes--quad .thinks-mode-icon svg{ width:14px; height:14px; }
  .thinks-modes--quad .thinks-mode-label{ font-size:11px; line-height:1.2; white-space:normal; text-align:left; }
  .thinks-modes--quad .thinks-mode-dot{ margin-left:6px; width:6px; height:6px; }

  /* The fixed 190x146px PuREPower hub card is the tightest constraint on
     how narrow the diagram's center column can get. Scale it down modestly
     in this same tablet band so the hub column doesn't force the flow's
     column-gap below the requested 90-140px range at 1024px. */
  .thinks-hub-unit{ width:158px; height:122px; }
  .thinks-hub-face{ padding:14px; gap:4px; }
  .thinks-hub-logo img{ height:15px; max-width:44px; }
  .thinks-hub-name{ font-size:14px; }
  .thinks-hub-status{ font-size:9.5px; }
  .thinks-hub-led{ width:32px; height:4px; }
  .thinks-node{ padding:16px; }
}

@media (max-width:759px){
  /* 56px between subsections on mobile (within the requested 48-64px band,
     vs. 80px on desktop). */
  .thinks-blocks{ gap:56px; }
  .thinks-block{ padding:var(--sp-5); }
  .thinks-title{ font-size:var(--fs-xl); padding-left:0; }

  /* Narrower column means longer captions wrap to more lines — reserve
     more fixed height here so mode switches never move anything below. */
  .thinks-caption{ min-height:126px; padding-inline:var(--sp-2); }

  /* The larger desktop icon/label/padding sizing above doesn't fit this
     compact button grid at 320-390px — restore compact mobile sizing so
     buttons never overflow or collide with the status dot. */
  .thinks-modes{ gap:var(--sp-3); margin-bottom:var(--sp-6); }
  .thinks-mode{ gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); flex:1 1 auto; justify-content:center; }
  .thinks-mode-icon{ width:32px; height:32px; }
  .thinks-mode-icon svg{ width:16px; height:16px; }
  .thinks-mode-label{ font-size:var(--fs-xs); white-space:normal; }
  .thinks-mode-dot{ margin-left:var(--sp-2); }

  /* Two equal buttons in one row for PuREPower's selector; Solar's four
     buttons become a 2x2 grid at this width instead of one crowded row. */
  .thinks-modes--quad{ display:grid; grid-template-columns:1fr 1fr; }

  /* Diagram becomes: source(s) full-width on top, hub beside Backup
     Battery in the middle row, output full-width at the bottom — in the
     same order the desktop chain reads left to right. */
  .thinks-flow{
    grid-template-columns:1fr auto; grid-template-rows:auto auto auto;
    grid-template-areas:
      "sources sources"
      "hub     battery"
      "outputs outputs";
    /* Reset the desktop rule's `width:min(78%,900px)` — at mobile widths the
       flow must use the full column, not 78% of it. Row/column gaps bumped
       to keep 32-56px of visible connector length between stacked cards. */
    width:100%; column-gap:20px; row-gap:40px; justify-content:stretch;
  }
  .thinks-col--sources{ flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:stretch; }
  .thinks-col--sources .thinks-node{ flex:1 1 130px; max-width:190px; }
  /* Solar's two source cards (Solar + Grid) must stay side-by-side at every
     mobile width, never wrap into a vertical stack — a stacked pair would
     let the upper card's connector line run straight through the lower
     card on its way to PuREPower. A fixed 2-column grid guarantees this
     regardless of how narrow the viewport gets; cards shrink, never wrap. */
  .thinks-col--sources-dual{
    display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3);
    width:100%; align-items:stretch;
  }
  .thinks-col--sources-dual .thinks-node{ flex:none; max-width:none; min-width:0; }
  .thinks-col--outputs .thinks-node{ max-width:280px; width:100%; margin-inline:auto; }

  /* Hub + Backup Battery row: every size here is FIXED (no flex-grow/shrink
     ranges), so the row's total width — and therefore the block's height —
     can never change with which mode is selected, only wrapped text within
     already-reserved space can. This is what keeps 320-390px widths stable
     even for the longest status text ("Supplying Backup"). */
  .thinks-col--hub{ justify-self:center; }
  .thinks-hub-unit{ width:92px; height:76px; }
  .thinks-hub-face{ padding:6px; gap:2px; border-radius:10px; }
  .thinks-hub-side{ border-radius:10px; }
  .thinks-hub-logo img{ height:10px; max-width:28px; }
  .thinks-hub-name{ font-size:10.5px; }
  .thinks-hub-status{ font-size:7.5px; }
  .thinks-hub-led{ width:18px; height:3px; margin-top:1px; }

  .thinks-node--battery{
    justify-self:start; width:108px; max-width:108px;
    padding:var(--sp-2) 6px; gap:4px;
  }
  .thinks-node--battery .thinks-node-icon{ width:24px; height:24px; margin-bottom:0; }
  .thinks-node--battery .thinks-node-icon svg{ width:13px; height:13px; }
  .thinks-node--battery .thinks-node-title{ font-size:11.5px; line-height:1.15; }
  /* Status text can wrap (e.g. "Supplying" / "Backup") — min-height reserves
     room for two lines always, so a one-line status in another mode sits in
     the same fixed space rather than leaving the card shorter. */
  .thinks-node-status{ white-space:normal; text-align:center; min-height:26px; line-height:1.25; font-size:9px; padding:2px 6px; }
}

/* The floating WhatsApp button is fixed to the viewport, so it can land on
   top of a caption or card here purely from scroll position rather than
   layout. Shrink, dim and tuck it to the very corner for as long as this
   section is substantially in view (toggled from initSystemThinks), and
   restore it everywhere else. */
body.wa-fab-yield .whatsapp-fab{
  width:40px; height:40px; bottom:var(--sp-3); right:var(--sp-3); opacity:.5;
}
body.wa-fab-yield .whatsapp-fab:hover,
body.wa-fab-yield .whatsapp-fab:focus-visible{ opacity:1; transform:scale(1.08); }

/* ---------- How it works ---------- */
.steps-list{ display:flex; flex-direction:column; gap:0; max-width:760px; }
.step-item{ display:grid; grid-template-columns:64px 1fr; gap:var(--sp-6); padding-block:var(--sp-6); position:relative; }
.step-number{
  width:56px; height:56px; border-radius:50%; background:var(--white); border:1.5px solid var(--border-default);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:var(--green-600);
  position:relative; z-index:2; font-size:var(--fs-lg);
}
.step-item:not(:last-child)::before{
  content:""; position:absolute; left:27px; top:64px; bottom:-8px; width:2px;
  background:linear-gradient(var(--slate-200), var(--slate-200));
}
.step-content h4{ font-size:var(--fs-lg); }
.step-content p{ margin-top:var(--sp-2); font-size:var(--fs-sm); }

/* ---------- Why Venova ---------- */
.venova-benefits{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5); }
.venova-benefit{ display:flex; gap:var(--sp-4); align-items:flex-start; }
.venova-benefit .card-icon{ flex-shrink:0; margin-bottom:0; }
.venova-benefit h4{ font-size:var(--fs-md); }
.venova-benefit p{ font-size:var(--fs-sm); margin-top:.3rem; }
@media (max-width:760px){ .venova-benefits{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq-list{ max-width:800px; margin-inline:auto; }
.faq-item{ border-bottom:1px solid var(--border-default); }
.faq-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4);
  padding-block:var(--sp-6); background:none; border:none; text-align:left;
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-lg); color:var(--text-primary);
}
.faq-icon{ flex-shrink:0; width:22px; height:22px; position:relative; }
.faq-icon::before, .faq-icon::after{
  content:""; position:absolute; background:var(--navy-800); border-radius:2px; transition:transform var(--dur-fast) var(--ease-out);
}
.faq-icon::before{ top:50%; left:0; width:100%; height:2px; margin-top:-1px; }
.faq-icon::after{ left:50%; top:0; height:100%; width:2px; margin-left:-1px; }
.faq-item.is-open .faq-icon::after{ transform:rotate(90deg); opacity:0; }
.faq-panel{ max-height:0; overflow:hidden; transition:max-height var(--dur-base) var(--ease-out); }
.faq-panel-inner{ padding-bottom:var(--sp-6); font-size:var(--fs-sm); color:var(--text-secondary); max-width:68ch; }
.faq-footer-cta{ text-align:center; margin-top:var(--sp-10); }

/* ---------- Final CTA ---------- */
.final-cta{
  background:var(--grad-navy); color:#fff; text-align:center; position:relative; overflow:hidden;
  padding-block:var(--sp-24);
}
.final-cta h2{ color:#fff; font-size:clamp(2rem, 4vw, var(--fs-4xl)); max-width:20ch; margin-inline:auto; }
.final-cta p{ color:var(--text-on-dark-muted); max-width:56ch; margin:var(--sp-4) auto 0; font-size:var(--fs-lg); }
.final-cta-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:center; margin-top:var(--sp-8); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-900); color:var(--text-on-dark-muted); position:relative; overflow:hidden; padding-block:var(--sp-16) var(--sp-8); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--sp-10); position:relative; z-index:1; }
/* Same logo asset as the header — width:auto (not a forced square box) so
   the real ~2.9:1 proportions are preserved instead of being squeezed. */
.footer-brand img{ height:28px; width:auto; max-width:none; object-fit:contain; margin-bottom:var(--sp-4); }
.footer-brand p{ color:var(--text-on-dark-muted); font-size:var(--fs-sm); max-width:32ch; }
.footer-col h5{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:#fff; margin-bottom:var(--sp-4); }
.footer-col ul{ display:flex; flex-direction:column; gap:var(--sp-3); }
.footer-col a{ font-size:var(--fs-sm); color:var(--text-on-dark-muted); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  margin-top:var(--sp-12); padding-top:var(--sp-6); border-top:1px solid var(--border-dark);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-4);
  font-size:var(--fs-2xs); color:var(--text-on-dark-muted); position:relative; z-index:1;
}
.footer-legal-links{ display:flex; gap:var(--sp-5); flex-wrap:wrap; }
.footer-watermark{ position:absolute; right:-8%; bottom:-18%; width:640px; opacity:.045; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- WhatsApp floating button ---------- */
.whatsapp-fab{
  position:fixed; right:var(--sp-6); bottom:var(--sp-6); z-index:90;
  width:58px; height:58px; border-radius:50%; background:#1FA855; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px -8px rgba(31,168,85,.55);
  transition:transform var(--dur-fast) var(--ease-out);
}
.whatsapp-fab:hover{ transform:scale(1.06); }
.whatsapp-fab svg{ width:28px; height:28px; }
@media (max-width:600px){ .whatsapp-fab{ right:var(--sp-4); bottom:var(--sp-4); width:52px; height:52px; } }

/* ---------- Assessment modal ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:var(--z-modal);
  background:rgba(1,10,24,.55); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:var(--sp-8) var(--sp-4); overflow-y:auto;
  opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease-out);
}
/* The [hidden] attribute alone can't win against the author display:flex rule
   above (author styles beat the UA [hidden]{display:none} rule regardless of
   specificity), so without this the overlay stays in the hit-testing layer —
   invisible but still covering and blocking clicks on the entire page. */
.modal-overlay[hidden]{ display:none; }
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.modal-panel{
  background:var(--white); border-radius:var(--radius-lg); max-width:640px; width:100%;
  padding:var(--sp-10); position:relative; margin-top:var(--sp-12);
  transform:translateY(16px); transition:transform var(--dur-base) var(--ease-out);
  max-height:calc(100vh - 6rem); overflow-y:auto;
}
.modal-overlay.is-open .modal-panel{ transform:none; }
.modal-close{
  position:absolute; top:var(--sp-5); right:var(--sp-5); width:34px; height:34px; border-radius:50%;
  background:var(--slate-100); border:none; font-size:1.1rem; color:var(--text-secondary);
}
.modal-close:hover{ background:var(--slate-200); }
.modal-panel h3{ font-size:var(--fs-2xl); padding-right:var(--sp-8); }
.modal-panel p.lead{ margin-top:var(--sp-2); font-size:var(--fs-sm); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-4); margin-top:var(--sp-6); }
.form-grid .field.full{ grid-column:1/-1; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }
.form-status{ font-size:var(--fs-xs); margin-top:var(--sp-3); min-height:1.2em; }
.form-status--error{ color:var(--color-danger); }
.form-status--loading{ color:var(--text-muted); }
.form-success{
  text-align:center; padding:var(--sp-10) var(--sp-4);
}
.form-success .icon{
  width:56px; height:56px; border-radius:50%; background:var(--green-100); color:var(--green-600);
  display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-5); font-size:1.6rem;
}
.honeypot-field{ position:absolute; left:-9999px; opacity:0; height:0; width:0; overflow:hidden; }
.btn.is-loading{ opacity:.7; pointer-events:none; }

/* ---------- Section-specific dark-section utility ---------- */
.section.on-dark{ background:var(--grad-navy); color:var(--text-on-dark); }