/* ---------- Tokens ---------- */
  :root{
    --paper:#F4F1EA;
    --paper-2:#EDE8DD;
    --paper-3:#E4DECF;
    --ink:#0E1A2B;
    --ink-2:#1B2A40;
    --ink-3:#445166;
    --ink-4:#7A8295;
    --line:rgba(14,26,43,.16);
    --line-strong:rgba(14,26,43,.28);
    --amber:#C8841A;
    --amber-2:#A66C12;
    --teal:#0F6F73;
    --red:#D8331F;
    --red-2:#9E2614;
    --sky:#3AA9E0;
    --sky-2:#1E7BB8;
    --sky-soft:#BFE3F4;
    --white:#FBFAF6;
    --shadow: 0 1px 0 rgba(14,26,43,.05), 0 12px 32px -16px rgba(14,26,43,.18);
    --r-sm:4px; --r-md:8px; --r-lg:14px;
    --fs-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --fs-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-serif: "Fraunces", "Times New Roman", serif;
  }

  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth}
  /* Anchor-jump offset for the ~105px sticky header.
     Full sections carry ~96px of their own top padding, so a small margin lets
     that padding tuck under the header and the heading lands just below it.
     Bare anchors / cards (sector cards) have little padding, so they need a
     near-full-header margin to avoid being cut. */
  section[id]{scroll-margin-top:28px}
  article[id], a[id], [id].sector-card{scroll-margin-top:118px}
  body{
    font-family:var(--fs-sans);
    color:var(--ink);
    background:var(--paper);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    background-image:
      linear-gradient(var(--paper) 0%, var(--paper) 100%),
      radial-gradient(circle at 1px 1px, rgba(14,26,43,.08) 1px, transparent 0);
    background-size:auto, 28px 28px;
    background-blend-mode:multiply;
  }

  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

  .container{
    width:100%;
    max-width:1560px;   /* widened from 1320 — less confined, more like ETAP */
    margin:0 auto;
    padding:0 32px;
  }
  @media (max-width:880px){.container{padding:0 26px}}  /* comfortable phone side margins (was a tight 20px) */

  /* ---- Fixed left social rail (ETAP-style: slides out + brand colour on hover; collapsible) ---- */
  .social-rail{
    position:fixed; left:0; top:50%; transform:translateY(-50%);
    z-index:60; display:flex; flex-direction:column; align-items:flex-start; gap:0;
  }
  .social-tabs{ display:flex; flex-direction:column; gap:2px;
    transition:transform .32s cubic-bezier(.2,.7,.2,1), opacity .25s ease; }
  .social-tab{
    width:42px; height:42px; display:flex; align-items:center; justify-content:center;
    background:#fff; color:#1F2A37; border:1px solid rgba(0,0,0,.10); border-left:0;
    box-shadow:1px 2px 8px rgba(0,0,0,.06);
    transition:transform .22s cubic-bezier(.2,.7,.2,1), background .2s ease, color .2s ease, box-shadow .22s ease;
  }
  .social-tab svg{width:18px; height:18px}
  .social-tab:hover{transform:translateX(8px); box-shadow:3px 4px 14px rgba(0,0,0,.18)}
  .social-tab:active{transform:translateX(4px) scale(.94)}   /* press feedback on click */
  .social-tab.s-whatsapp:hover{background:#25D366; color:#fff; border-color:#25D366}
  .social-tab.s-telegram:hover{background:#229ED9; color:#fff; border-color:#229ED9}
  .social-tab.s-facebook:hover{background:#1877F2; color:#fff; border-color:#1877F2}
  .social-tab.s-email:hover{background:#E11D2A; color:#fff; border-color:#E11D2A}
  .social-tab.s-phone:hover{background:#1F4E79; color:#fff; border-color:#1F4E79}

  /* Collapse handle (ETAP-style arrow tab) — stays at the edge as the re-expand grip */
  .social-toggle{
    width:42px; height:26px; display:flex; align-items:center; justify-content:center;
    background:#0E1A2B; color:#fff; border:0; padding:0; cursor:pointer;
    box-shadow:1px 2px 8px rgba(0,0,0,.10); border-bottom-right-radius:7px;
    transition:background .2s ease;
  }
  .social-toggle:hover{ background:#1F4E79; }
  .social-toggle svg{ width:15px; height:15px; transition:transform .32s ease; }

  /* Collapsed: tabs slide off-screen left + fade; only the handle remains; arrow flips to point right */
  .social-rail.collapsed .social-tabs{ transform:translateX(-115%); opacity:0; pointer-events:none; }
  .social-rail.collapsed .social-toggle svg{ transform:rotate(180deg); }

  @media (max-width:1080px){.social-rail{display:none}}  /* hide on tablet/mobile */

  /* Reserve a left gutter so the rail (incl. its hover slide) never covers content.
     Desktop only, only while the rail is OPEN, and only for section content
     (header nav + footer keep normal padding; section backgrounds stay full-bleed). */
  @media (min-width:1081px){
    body:not(.rail-collapsed) section > .container{ padding-left:80px; }
  }

  /* ---------- Type ---------- */
  .mono{font-family:var(--fs-mono);font-weight:500;letter-spacing:.04em}
  .mono-sm{font-family:var(--fs-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
  .serif{font-family:var(--fs-serif);font-weight:500}

  h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
  h1{font-size:clamp(48px, 7vw, 96px); line-height:1.02; letter-spacing:-.028em; font-weight:700}
  h2{font-size:clamp(34px, 4vw, 56px); line-height:1.05; letter-spacing:-.022em; font-weight:700}
  h3{font-size:clamp(22px, 1.8vw, 28px); line-height:1.2; font-weight:700}
  p{margin:0; text-wrap:pretty}
  .lead{font-size:clamp(17px, 1.35vw, 21px); color:var(--ink-3); line-height:1.55; max-width:62ch}

  /* ---------- Header ---------- */
  .site-header{
    position:sticky; top:0; z-index:50;
    background:rgba(244,241,234,.86);
    backdrop-filter:saturate(140%) blur(10px);
    -webkit-backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:104px;gap:24px}
  .brand{display:flex;align-items:center;gap:16px}
  .brand-mark{
    width:64px;height:64px;border:0;position:relative;
    display:grid;place-items:center;background:transparent;color:var(--white);
    flex-shrink:0;
  }
  .brand-mark svg{width:64px;height:64px;display:block}
  .foot-brand .brand-mark svg{width:80px;height:80px}

  /* === Lightning-bolt: brighter default + interactive glow ===
     Zero JS. Two CSS transitions (fill + filter) — both GPU-accelerated.
     Glow triggers on hover/focus/active of:
       - the brand mark itself (.brand)
       - any nav link (.nav-links a)
       - the call-to-action (.nav-cta)
     using the :has() selector. Browsers without :has() fall back to the
     simpler .site-header:hover rule below (which already covers all three).  */
  .brand-bolt{
    fill:#FF3344;                                  /* brighter than brand red #E11D2A */
    transition:fill .28s ease, filter .28s ease, transform .28s ease;
    transform-origin:34px 32px;                    /* pivot near the centre of the bolt */
  }
  /* Fallback for older browsers: any hover inside the header glows the bolt */
  .site-header:hover .brand-bolt{
    fill:#FF6477;
    filter:drop-shadow(0 0 6px rgba(255,80,95,.85)) drop-shadow(0 0 14px rgba(255,80,95,.45));
    transform:scale(1.06);
  }
  /* Modern :has() — scoped to exactly the three interactive elements the brief named */
  .site-header:has(.brand:hover, .nav-links a:hover, .nav-cta:hover,
                   .brand:focus-visible, .nav-links a:focus-visible, .nav-cta:focus-visible,
                   .brand:active, .nav-links a:active, .nav-cta:active) .brand-bolt{
    fill:#FF6477;
    filter:drop-shadow(0 0 6px rgba(255,80,95,.85)) drop-shadow(0 0 14px rgba(255,80,95,.45));
    transform:scale(1.06);
  }
  /* Click flash — momentary brighter pulse */
  .site-header:has(.brand:active, .nav-links a:active, .nav-cta:active) .brand-bolt{
    fill:#FFE5EA;
    filter:drop-shadow(0 0 8px rgba(255,120,135,1)) drop-shadow(0 0 20px rgba(255,120,135,.7));
  }
  /* Footer instance — same baseline, no interactive state needed */
  footer .brand-bolt{ fill:#FF3344; }

  .brand-words{display:flex;flex-direction:column;line-height:1;gap:6px}
  .brand-name{font-weight:800;letter-spacing:.02em;font-size:34px;color:var(--ink);line-height:1}
  .brand-sub{font-family:var(--fs-sans);font-size:13px;letter-spacing:.28em;color:var(--ink);text-transform:uppercase;margin-top:0;font-weight:600;line-height:1;width:176px}
  .nav-links{display:flex;align-items:center;gap:20px}
  .nav-link{white-space:nowrap}
  @media (min-width:881px) and (max-width:1180px){.nav-links{gap:15px}.nav-link{font-size:14px}}
  /* Flagship nav item — Electrical Calculations (bold + red underline accent;
     text colour inherits the active theme's nav-link colour) */
  .nav-link-feature{font-weight:700}
  .nav-link-feature::after{background:var(--red);transform:scaleX(1);height:2px}
  .nav-link-feature:hover::after{background:var(--red)}
  .nav-item{position:relative;display:flex;align-items:center}
  .nav-link{font-size:15.5px;color:var(--ink-2);position:relative;padding:6px 0;font-weight:500;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
  .nav-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
  .nav-link:hover::after{transform:scaleX(1)}
  .nav-chev{width:11px;height:11px;transition:transform .25s ease;margin-top:1px}
  .nav-dropdown:hover .nav-chev,.nav-dropdown:focus-within .nav-chev{transform:rotate(180deg)}

  /* === Dropdown menus (Industries, Resources) — pure CSS hover/focus reveal === */
  .nav-menu{
    position:absolute;top:calc(100% + 12px);left:50%;
    transform:translateX(-50%) translateY(8px);
    min-width:248px;background:var(--white);border:1px solid var(--line);
    box-shadow:0 24px 60px -22px rgba(14,26,43,.35);
    padding:8px;list-style:none;margin:0;border-radius:4px;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;z-index:300;
  }
  .nav-menu-wide{min-width:340px}
  .nav-menu::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:14px}  /* hover bridge */
  .nav-dropdown:hover .nav-menu,
  .nav-dropdown:focus-within .nav-menu,
  .nav-dropdown.open .nav-menu{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
  }
  .nav-menu li{margin:0}
  .nav-menu a{
    display:block;padding:11px 14px;color:var(--ink-2);font-size:14.5px;font-weight:500;
    border-radius:3px;transition:background .15s ease,color .15s ease;text-decoration:none;
  }
  .nav-menu a::after{display:none}                       /* suppress the top-level underline */
  .nav-menu a:hover{background:var(--paper-2);color:var(--red)}   /* ETAP-style red highlight */
  .nav-menu-wide a{display:flex;flex-direction:column;gap:3px}
  .res-name{font-weight:600;font-size:14.5px;color:var(--ink);transition:color .15s ease}
  .res-desc{font-size:12px;color:var(--ink-3);font-weight:400;line-height:1.35}
  .nav-menu-wide a:hover .res-name{color:var(--red)}

  /* === Paired CTAs (Book Consultation + Get Resources) — ETAP layout === */
  .nav-ctas{display:flex;align-items:center;gap:10px;flex-shrink:0}
  .nav-cta{
    font-size:13px;font-weight:600;
    padding:11px 20px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;
    transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
    border:1.5px solid var(--red);white-space:nowrap;
  }
  .nav-cta:active{transform:translateY(1px)}
  .nav-cta-primary{background:var(--red);color:#fff}
  .nav-cta-primary:hover{background:var(--red-2,#B6121C);border-color:var(--red-2,#B6121C);color:#fff}
  .nav-cta-ghost{background:transparent;color:var(--red)}
  .nav-cta-ghost:hover{background:var(--red);color:#fff}
  .nav-cta svg{width:15px;height:15px}

  .nav-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--line-strong)}
  .nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ink);position:relative}
  .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--ink)}
  .nav-toggle span::before{top:-6px}
  .nav-toggle span::after{top:6px}

  @media (max-width:880px){
    /* Compact mobile header (was 104px — too tall for a phone, ate the screen
       and made the sticky bar overlap more content). */
    .nav{height:66px}
    .brand-mark svg{width:42px;height:42px}
    .foot-brand .brand-mark svg{width:64px;height:64px}   /* keep footer logo larger */
    .brand-name{font-size:20px !important}                /* override inline 25px */
    .brand-sub{font-size:10px !important;letter-spacing:.16em;width:auto}
    .nav-links,.nav-ctas{display:none}
    .nav-toggle{display:flex}
    /* Make the mobile bar fully opaque so scrolled content never shows through it */
    .site-header{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 1px 0 var(--line)}
    .nav-open .nav-links{
      display:flex;flex-direction:column;align-items:flex-start;gap:0;
      position:absolute;left:0;right:0;top:66px;background:var(--paper);
      border-bottom:1px solid var(--line);padding:8px 28px 24px;max-height:calc(100vh - 66px);overflow-y:auto;
      box-shadow:0 24px 40px -20px rgba(14,26,43,.35);
    }
    .nav-open .nav-item{display:block;width:100%}
    .nav-open .nav-link{padding:14px 0;border-bottom:1px solid var(--line);width:100%;font-size:16px;justify-content:space-between}
    /* On mobile the dropdown contents sit inline (no hover); shown when .open toggled by JS */
    .nav-open .nav-menu{
      position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
      box-shadow:none;border:0;border-bottom:1px solid var(--line);min-width:0;width:100%;
      padding:4px 0 12px 14px;background:transparent;
      display:none;
    }
    .nav-open .nav-dropdown.open .nav-menu{display:block}
    .nav-open .nav-menu a{padding:10px 0}
    .nav-open .nav-ctas{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:16px;width:100%}
    .nav-open .nav-cta{justify-content:center}
  }

  /* ---------- Hero ---------- */
  .hero{position:relative;padding:28px 0 48px;overflow:hidden}  /* trimmed so hero text + CTAs fit one viewport */
  .hero-grid{
    display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;
  }
  .hero-grid > .reveal:first-child{padding-left:48px}
  @media (max-width:980px){
    .hero-grid{grid-template-columns:1fr;gap:48px}
    .hero-grid > .reveal:first-child{padding-left:0}
  }

  .hero-meta{
    display:flex;flex-wrap:wrap;gap:24px;align-items:center;
    padding-bottom:18px;margin-bottom:32px;border-bottom:1px solid var(--line);
  }
  .meta-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--fs-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .meta-dot{width:6px;height:6px;background:var(--sky);border-radius:50%;box-shadow:0 0 0 4px rgba(58,169,224,.22)}
  .meta-dot.live{animation:pulse 1.8s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(58,169,224,.22)}50%{box-shadow:0 0 0 9px rgba(58,169,224,.03)}}
  .meta-chip.alert .meta-dot{background:var(--red);box-shadow:0 0 0 4px rgba(216,51,31,.18);animation:pulse-red 1.6s ease-in-out infinite}
  @keyframes pulse-red{0%,100%{box-shadow:0 0 0 4px rgba(216,51,31,.18)}50%{box-shadow:0 0 0 9px rgba(216,51,31,.04)}}

  .hero h1{
    /* Fluid type that fits one viewport without clipping the CTAs below. */
    font-size:clamp(34px, 6vw, 66px);
    line-height:1.03;letter-spacing:-.022em;font-weight:800;
  }
  .hero h1 span.line{display:block}
  .hero h1 .accent{font-family:var(--fs-serif);font-weight:400;font-style:italic;color:var(--sky-2)}
  .hero h1 .underscore{position:relative}
  .hero h1 .underscore::after{
    content:"";position:absolute;left:0;right:0;bottom:6px;height:10px;
    background:linear-gradient(90deg, var(--sky) 0%, var(--sky) 55%, var(--amber) 55%, var(--amber) 80%, var(--red) 80%, var(--red) 100%);
    z-index:-1;opacity:.55;
  }

  .hero-stack{display:flex;flex-direction:column;gap:18px;margin-top:20px;max-width:60ch}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 22px;font-size:14px;font-weight:500;letter-spacing:.01em;
    border:1px solid var(--ink);transition:all .2s ease;
  }
  .btn-primary{background:var(--ink);color:var(--white)}
  .btn-primary:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
  .btn-ghost{background:transparent;color:var(--ink)}
  .btn-ghost:hover{background:var(--ink);color:var(--white)}
  .btn svg{width:14px;height:14px;transition:transform .2s ease}
  .btn:hover svg{transform:translateX(3px)}

  /* Hero technical card */
  .hero-card{
    position:relative;background:var(--white);border:1px solid var(--line-strong);
    box-shadow:var(--shadow);padding:24px;
  }
  .hero-card::before{
    content:"";position:absolute;inset:8px;border:1px dashed var(--line);pointer-events:none;
  }
  .hero-card-head{
    display:flex;justify-content:space-between;align-items:center;
    padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px;
  }
  .hero-card-head h4{font-family:var(--fs-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--ink-3)}
  .hero-card-head .ref{font-family:var(--fs-mono);font-size:10px;color:var(--ink-4)}
  /* SVG one-line diagram */
  .one-line{width:100%;height:auto;display:block}
  .one-line .lbl{font-family:var(--fs-mono);font-size:10px;fill:var(--ink-3);letter-spacing:.04em}
  .one-line .lbl-val{font-family:var(--fs-mono);font-size:11px;fill:var(--ink);font-weight:600}
  .one-line .wire{stroke:var(--ink);stroke-width:1.2;fill:none}
  .one-line .wire-soft{stroke:var(--ink-4);stroke-width:1;fill:none;stroke-dasharray:3 3}
  .one-line .node{fill:var(--paper);stroke:var(--ink);stroke-width:1.2}
  .one-line .hot{fill:var(--red)}
  .one-line .surge{stroke:var(--sky);stroke-width:1.6;stroke-dasharray:4 4;animation:dash 1.2s linear infinite}
  .one-line .surge-red{stroke:var(--red);stroke-width:1.6;stroke-dasharray:4 4;animation:dash 1.2s linear infinite}
  @keyframes dash{to{stroke-dashoffset:-16}}

  .hero-card-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
  .hcf-cell{display:flex;flex-direction:column;gap:2px}
  .hcf-cell .l{font-family:var(--fs-mono);font-size:9px;color:var(--ink-4);letter-spacing:.1em;text-transform:uppercase}
  .hcf-cell .v{font-family:var(--fs-mono);font-size:13px;color:var(--ink);font-weight:600}
  .hcf-cell .v small{font-weight:400;color:var(--ink-3);margin-left:4px}
  .hcf-cell.hcf-sky .v{color:var(--sky-2)}
  .hcf-cell.hcf-red .v{color:var(--red)}

  /* Load-flow study image frame */
  .lfc-frame{
    position:relative;width:100%;
    aspect-ratio:3/2;   /* wider/shorter than 5:4 so the hero card doesn't grow too tall on the widened layout */
    overflow:hidden;
    background:#FBFAF6;
    border:1px solid var(--line);
  }
  .lfc-img{
    width:185%;
    height:185%;
    max-width:none;
    object-fit:cover;
    object-position:38% 12%;
    display:block;
    image-rendering:auto;
    filter:contrast(1.06) saturate(1.08) brightness(1.02);
  }
  .lfc-overlay{
    position:absolute;left:0;right:0;bottom:0;
    display:flex;justify-content:space-between;align-items:center;
    padding:8px 12px;background:rgba(14,26,43,.78);color:#fff;
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    font-family:var(--fs-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  }
  .lfc-badge{color:var(--amber);font-weight:600}
  .lfc-meta{color:rgba(255,255,255,.78)}
  html[data-theme="electric"] .lfc-overlay{background:rgba(15,79,190,.92)}
  html[data-theme="electric"] .lfc-badge{color:#FFD34D}
  html[data-theme="clean"] .lfc-frame{background:#FFFFFF;border-color:rgba(0,0,0,.1)}
  html[data-theme="clean"] .lfc-overlay{background:rgba(26,26,26,.92)}
  html[data-theme="clean"] .lfc-badge{color:#E11D2A}

  /* Marquee / ticker */
  .ticker{
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:var(--paper-2);overflow:hidden;
  }
  .ticker-track{
    display:flex;gap:48px;padding:12px 0;
    animation:scroll 38s linear infinite;
    white-space:nowrap;
  }
  .ticker:hover .ticker-track{animation-play-state:paused}
  .ticker-item{font-family:var(--fs-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:12px}
  .ticker-item::before{content:"";width:5px;height:5px;background:var(--ink-3);border-radius:50%;flex-shrink:0}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ---------- Section primitives ---------- */
  section{padding:96px 0;position:relative}
  @media (max-width:780px){section{padding:72px 0}}

  .sec-head{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:end;margin-bottom:56px}
  @media (max-width:780px){.sec-head{grid-template-columns:1fr;gap:18px;margin-bottom:40px}}
  .sec-eyebrow{display:flex;align-items:center;gap:13px;font-family:var(--fs-mono);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:20px;font-weight:700}
  .sec-eyebrow .num{display:inline-grid;place-items:center;width:30px;height:30px;border:1.5px solid var(--red);border-radius:50%;font-size:12px;font-weight:700;color:var(--red)}

  /* ---------- Stats Wall ---------- */
  .stats{padding-top:28px}
  .stats-wall{
    display:grid;grid-template-columns:repeat(3,1fr);
    border:1px solid var(--line-strong);background:var(--white);
    position:relative;
  }
  .stats-wall::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(to right, transparent 49.99%, var(--line) 50%, transparent 50.01%),
      linear-gradient(to right, transparent 33.32%, var(--line) 33.33%, transparent 33.34%),
      linear-gradient(to right, transparent 66.65%, var(--line) 66.66%, transparent 66.67%);
  }
  @media (max-width:880px){
    .stats-wall{grid-template-columns:1fr}
    .stats-wall::before{display:none}
  }
  .stat{
    padding:40px 32px;display:flex;flex-direction:column;gap:18px;position:relative;
    border-bottom:1px solid var(--line);
  }
  @media (min-width:881px){.stat{border-bottom:0}.stat + .stat{border-left:1px solid var(--line)}}
  .stat-head{display:flex;justify-content:space-between;align-items:flex-start}
  .stat-label{font-family:var(--fs-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
  .stat-num{
    font-family:var(--fs-serif);font-weight:500;font-size:clamp(48px,5.2vw,72px);
    line-height:1;color:var(--ink);letter-spacing:-.02em;display:flex;align-items:baseline;gap:4px;
  }
  .stat-num .suffix{font-family:var(--fs-sans);font-size:.42em;font-weight:600;letter-spacing:-.01em}
  .stat:nth-child(1) .stat-num .suffix{color:var(--red)}
  .stat:nth-child(2) .stat-num .suffix{color:var(--amber)}
  .stat:nth-child(3) .stat-num .suffix{color:var(--sky-2)}
  .stat-desc{color:var(--ink-3);font-size:14px;max-width:32ch}
  .stat-bar{height:3px;background:var(--paper-3);position:relative;overflow:hidden}
  .stat-bar i{display:block;height:100%;width:0;transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
  .stat:nth-child(1) .stat-bar i{background:var(--red)}
  .stat:nth-child(2) .stat-bar i{background:var(--amber)}
  .stat:nth-child(3) .stat-bar i{background:var(--sky)}

  /* ---------- Services ---------- */
  .services{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:16px}
  .svc-tag{font-family:var(--fs-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:7px 12px;border:1px solid var(--line-strong);background:var(--paper-2);font-weight:600}

  /* === Legacy accordion CSS (shared with new <details> pattern below) === */
  .svc{
    min-height:auto;padding:0;
    border-right:0;border-bottom:1px solid var(--line-strong);
    background:var(--paper);
    transition:background .25s ease;
    display:block;
  }
  .svc:first-child{border-top:1px solid var(--line-strong)}
  .svc:hover{background:var(--paper)}
  .svc[open]{background:var(--white)}
  .svc-head{
    width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:24px;
    align-items:center;padding:26px 32px;cursor:pointer;
    background:none;border:0;text-align:left;font:inherit;color:inherit;
    transition:background .2s ease;
  }
  .svc-head:hover{background:rgba(14,26,43,.03)}
  .svc-head .svc-num{display:none}
  .svc-head .svc-icon{width:50px;height:50px;border:1px solid var(--ink);display:grid;place-items:center;background:var(--paper);color:var(--ink);transition:background .25s,color .25s;margin:0}
  .svc-head .svc-icon svg{width:28px;height:28px;stroke-width:1.5}
  .svc[open] .svc-head .svc-icon{background:var(--ink);color:var(--white)}
  .svc[open] .svc-head .svc-icon svg{color:var(--white) !important}
  .svc-head-text{display:flex;flex-direction:column;gap:6px;min-width:0}
  .svc-head-text h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-.012em;line-height:1.2}
  .svc-head-text .svc-tagline{font-size:14.5px;color:var(--ink-3);line-height:1.45;margin:0;font-family:var(--fs-sans);font-style:normal}
  .svc-chev{
    width:44px;height:44px;border:1px solid var(--line-strong);border-radius:50%;
    display:grid;place-items:center;color:var(--ink);
    transition:background .25s,color .25s,transform .35s cubic-bezier(.2,.7,.2,1),border-color .2s;
    flex-shrink:0;
  }
  .svc-chev svg{width:16px;height:16px}
  .svc[open] .svc-chev{background:var(--amber);border-color:var(--amber);color:var(--ink);transform:rotate(180deg)}

  .svc-body{
    max-height:0;overflow:hidden;
    transition:max-height .5s cubic-bezier(.2,.7,.2,1);
  }
  .svc[open] .svc-body{max-height:1400px}
  .svc-body-inner{
    padding:0 32px 36px;
    display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:start;
    border-top:1px dashed var(--line);
    padding-top:28px;
    margin:0 32px 0;
    transform:translateY(-6px);opacity:0;
    transition:opacity .4s ease .1s, transform .4s ease .1s;
  }
  .svc[open] .svc-body-inner{opacity:1;transform:none}
  .svc-body-main p{font-size:17.5px;color:var(--ink-2);line-height:1.7;margin-bottom:20px}
  .svc-body-aside{display:flex;flex-direction:column;gap:18px}
  .svc-body-aside .svc-pain{margin:0}
  .svc-body-foot{
    grid-column:1 / -1;
    display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
    padding-top:20px;margin-top:12px;border-top:1px solid var(--line);
  }
  @media (max-width:780px){
    .svc-head{grid-template-columns:auto 1fr auto;gap:16px;padding:20px}
    .svc-head .svc-num{display:none}
    .svc-head-text h3{font-size:18px}
    .svc-head-text .svc-tagline{font-size:13.5px}
    .svc-body-inner{grid-template-columns:1fr;padding:0 20px 28px;margin:0 20px}
    .svc-body-foot{flex-direction:column;align-items:stretch}
  }

  /* Electric theme accordion overrides */
  html[data-theme="electric"] .svc{background:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.15)}
  html[data-theme="electric"] .svc:first-child{border-top-color:rgba(255,255,255,.15)}
  html[data-theme="electric"] .svc[open]{background:#fff;color:#0E1A2B}
  html[data-theme="electric"] .svc-head:hover{background:rgba(255,255,255,.06)}
  html[data-theme="electric"] .svc[open] .svc-head:hover{background:rgba(15,79,190,.04)}
  html[data-theme="electric"] .svc-head-text h3{color:#fff}
  html[data-theme="electric"] .svc[open] .svc-head-text h3{color:#0E1A2B}
  html[data-theme="electric"] .svc-head-text .svc-tagline{color:rgba(255,255,255,.75)}
  html[data-theme="electric"] .svc[open] .svc-head-text .svc-tagline{color:#445166}
  html[data-theme="electric"] .svc-head .svc-num{color:rgba(255,255,255,.55)}
  html[data-theme="electric"] .svc[open] .svc-head .svc-num{color:#7A8295}
  html[data-theme="electric"] .svc-head .svc-icon{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
  html[data-theme="electric"] .svc-head .svc-icon svg{color:#fff !important}
  html[data-theme="electric"] .svc[open] .svc-head .svc-icon{background:#0F4FBE;border-color:#0F4FBE;color:#fff}
  html[data-theme="electric"] .svc-chev{border-color:rgba(255,255,255,.3);color:#fff}
  html[data-theme="electric"] .svc[open] .svc-chev{background:#E11D2A;border-color:#E11D2A;color:#fff}
  html[data-theme="electric"] .svc[open] .svc-body-main p{color:#445166}
  html[data-theme="electric"] .svc-body-inner{border-top-color:rgba(15,79,190,.18)}
  html[data-theme="electric"] .svc[open] .svc-list li{color:#445166}
  html[data-theme="electric"] .svc[open] .svc-list li::before{color:#E11D2A}
  html[data-theme="electric"] .svc[open] .svc-pain{background:#F4F1EA;color:#445166;border-left-color:#E11D2A}
  html[data-theme="electric"] .svc[open] .svc-cta{background:#E11D2A;color:#fff;border:0;border-radius:999px;padding:14px 24px}
  html[data-theme="electric"] .svc[open] .svc-cta:hover{background:#B6121C}
  html[data-theme="electric"] .svc[open] .svc-tag{background:#F4F6FB;color:#0F4FBE;border-color:rgba(15,79,190,.25)}
  .svc-anchor{font-family:var(--fs-serif);font-style:italic;font-size:21px;color:var(--ink);margin-top:-4px;line-height:1.4;font-weight:500}
  .svc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
  .svc-list li{position:relative;padding-left:26px;font-size:16.5px;color:var(--ink-2);line-height:1.6;font-weight:500}
  .svc-list li::before{content:"→";position:absolute;left:0;top:0;font-family:var(--fs-mono);color:var(--red);font-weight:800;font-size:16px}
  .svc-pain{display:flex;flex-direction:column;gap:7px;padding:16px 16px 16px 18px;background:var(--paper-2);border-left:3px solid var(--red);font-family:var(--fs-sans);font-size:14px;color:var(--ink-2);line-height:1.5;font-weight:500}
  .svc-cta{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:var(--ink);padding:12px 20px;background:var(--paper);border:1.5px solid var(--ink);align-self:flex-start;margin-top:8px;transition:background .2s ease,color .2s ease}
  .svc-cta:hover{background:var(--ink);color:var(--white)}
  .svc-cta svg{width:14px;height:14px;transition:transform .2s ease}
  .svc-cta:hover svg{transform:translateX(3px)}
  html[data-theme="electric"] .svc-anchor{color:rgba(255,255,255,.92)}
  html[data-theme="electric"] .svc-list li{color:rgba(255,255,255,.8)}
  html[data-theme="electric"] .svc-list li::before{color:#FFD34D}
  html[data-theme="electric"] .svc-pain{background:rgba(255,255,255,.06);color:rgba(255,255,255,.78);border-left-color:#E11D2A}
  html[data-theme="electric"] .svc-cta{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);border-radius:999px;padding:12px 20px}
  html[data-theme="electric"] .svc-cta:hover{background:#E11D2A;border-color:#E11D2A;color:#fff}
  /* ---------- Practice blocks (new two-section layout) ---------- */
  .svc-block{margin-top:48px}
  .svc-block + .svc-block{margin-top:72px;padding-top:48px;border-top:1px solid var(--line-strong)}
  .svc-block-head{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:28px;max-width:880px}
  @media (min-width:880px){.svc-block-head{grid-template-columns:auto 1fr;column-gap:36px;align-items:end}}
  .svc-block-eyebrow{
    font-family:var(--fs-mono);font-size:14px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--red);font-weight:700;
    display:inline-flex;align-items:center;gap:12px;
  }
  .svc-block-rule{display:inline-block;width:36px;height:2px;background:var(--red);vertical-align:middle}
  .svc-block-title{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.018em;font-weight:700;line-height:1.08;margin:0;color:var(--ink)}
  .svc-block-lead{margin:0;color:var(--ink-3);font-size:16.5px;line-height:1.55;max-width:620px}
  @media (min-width:880px){.svc-block-lead{grid-column:2/3}}
  .svc-block-alt .svc-block-rule{background:var(--red)}

  /* Stacked list (replaces the old 4-col svc-grid) — same per-card look, now native <details> */
  .svc-list-stack{display:flex;flex-direction:column;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
  details.svc{display:block;background:var(--paper);border-bottom:1px solid var(--line-strong);transition:background .2s ease}
  details.svc:last-child{border-bottom:0}
  details.svc[open]{background:var(--white)}
  details.svc > summary{
    list-style:none;cursor:pointer;
    display:grid;grid-template-columns:auto auto 1fr auto;gap:24px;align-items:center;
    padding:26px 28px;
    transition:background .2s ease;
  }
  details.svc > summary::-webkit-details-marker{display:none}
  details.svc > summary::marker{content:""}
  details.svc > summary:hover{background:rgba(14,26,43,.025)}
  details.svc[open] > summary:hover{background:rgba(14,26,43,.015)}
  details.svc > summary:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
  details.svc .svc-num{font-family:var(--fs-mono);font-size:12px;letter-spacing:.18em;color:var(--ink-4);font-weight:600;white-space:nowrap}
  details.svc[open] .svc-num{color:var(--amber)}
  details.svc .svc-icon{width:48px;height:48px;border:1px solid var(--ink);display:grid;place-items:center;background:var(--paper);color:var(--ink);transition:background .25s,color .25s}
  details.svc .svc-icon svg{width:26px;height:26px;stroke-width:1.5}
  details.svc[open] .svc-icon{background:var(--ink);color:var(--white)}
  details.svc[open] .svc-icon svg{color:var(--white)}
  details.svc .svc-head-text{display:flex;flex-direction:column;gap:6px;min-width:0}
  details.svc .svc-head-text h4{margin:0;font-size:24px;font-weight:700;letter-spacing:-.012em;line-height:1.22;color:var(--ink)}
  details.svc .svc-head-text .svc-tagline{font-size:16.5px;color:var(--ink-3);line-height:1.5;margin:0}
  details.svc .svc-chev{
    width:34px;height:34px;border:1px solid var(--line-strong);display:grid;place-items:center;
    color:var(--ink);background:transparent;transition:transform .25s ease,background .25s ease,border-color .25s ease;
  }
  details.svc[open] .svc-chev{background:var(--amber);border-color:var(--amber);transform:rotate(180deg)}
  details.svc .svc-body{overflow:hidden}
  details.svc .svc-body-inner{
    display:grid;grid-template-columns:1.4fr .9fr;gap:36px;
    padding:8px 28px 32px;margin:0 28px 0 100px;
    border-top:1px solid var(--line);
    padding-top:28px;
  }
  @media (max-width:880px){
    /* Clean single-row layout: [icon] [text] [chevron].
       Text lives in its own 1fr column with min-width:0 so it wraps BEFORE the
       chevron instead of running underneath it. Num hidden on mobile to save room. */
    details.svc > summary{grid-template-columns:auto 1fr auto;gap:14px;padding:18px 16px;align-items:center}
    details.svc > summary .svc-num{display:none}
    details.svc > summary .svc-icon{grid-column:1;grid-row:1;width:44px;height:44px;align-self:start}
    details.svc > summary .svc-head-text{grid-column:2;grid-row:1;min-width:0}
    details.svc > summary .svc-chev{grid-column:3;grid-row:1;align-self:center;flex-shrink:0}
    details.svc .svc-head-text h4{font-size:18px}
    details.svc .svc-head-text .svc-tagline{font-size:14px}
    details.svc .svc-body-inner{grid-template-columns:1fr;gap:18px;padding:18px 16px 22px;margin:0}
  }
  /* Theme overrides (electric / clean) */
  html[data-theme="electric"] details.svc{background:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.15)}
  html[data-theme="electric"] details.svc[open]{background:#fff;color:#0E1A2B}
  html[data-theme="electric"] details.svc > summary:hover{background:rgba(255,255,255,.06)}
  html[data-theme="electric"] details.svc[open] > summary:hover{background:rgba(15,79,190,.04)}
  html[data-theme="electric"] details.svc .svc-head-text h4{color:#fff}
  html[data-theme="electric"] details.svc[open] .svc-head-text h4{color:#0E1A2B}
  html[data-theme="electric"] details.svc .svc-head-text .svc-tagline{color:rgba(255,255,255,.75)}
  html[data-theme="electric"] details.svc[open] .svc-head-text .svc-tagline{color:#445166}
  html[data-theme="electric"] details.svc .svc-num{color:rgba(255,255,255,.55)}
  html[data-theme="electric"] details.svc[open] .svc-num{color:#0F4FBE}
  html[data-theme="electric"] details.svc .svc-icon{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
  html[data-theme="electric"] details.svc[open] .svc-icon{background:#0F4FBE;border-color:#0F4FBE;color:#fff}
  html[data-theme="electric"] details.svc .svc-chev{border-color:rgba(255,255,255,.3);color:#fff}
  html[data-theme="electric"] details.svc[open] .svc-chev{background:#E11D2A;border-color:#E11D2A;color:#fff}
  html[data-theme="electric"] .svc-block + .svc-block{border-top-color:rgba(255,255,255,.15)}
  html[data-theme="electric"] .svc-block-title{color:#fff}
  html[data-theme="electric"] .svc-block-lead{color:rgba(255,255,255,.8)}
  html[data-theme="electric"] .svc-block-eyebrow{color:rgba(255,255,255,.7)}
  html[data-theme="clean"] details.svc{background:#fff;border-bottom-color:rgba(0,0,0,.08)}
  html[data-theme="clean"] details.svc[open]{background:#fff}
  html[data-theme="clean"] details.svc > summary:hover{background:rgba(0,0,0,.025)}
  html[data-theme="clean"] details.svc .svc-head-text h4{color:#1A1A1A}
  html[data-theme="clean"] details.svc .svc-head-text .svc-tagline{color:#555}
  html[data-theme="clean"] details.svc .svc-icon{background:#fff;border-color:rgba(0,0,0,.18);color:#1A1A1A}
  html[data-theme="clean"] details.svc[open] .svc-icon{background:#E11D2A;border-color:#E11D2A;color:#fff}
  html[data-theme="clean"] details.svc[open] .svc-chev{background:#E11D2A;border-color:#E11D2A;color:#fff}
  html[data-theme="clean"] .svc-block + .svc-block{border-top-color:rgba(0,0,0,.12)}
  html[data-theme="clean"] .svc-block-title{color:#1A1A1A}
  html[data-theme="clean"] .svc-block-rule{background:#E11D2A}

  /* Per-card accent rotation on the icon stroke (cycles through the 6/4 cards) */
  details.svc:nth-child(6n+1) .svc-icon svg{color:var(--sky-2)}
  details.svc:nth-child(6n+2) .svc-icon svg{color:var(--amber)}
  details.svc:nth-child(6n+3) .svc-icon svg{color:var(--red)}
  details.svc:nth-child(6n+4) .svc-icon svg{color:var(--sky-2)}
  details.svc:nth-child(6n+5) .svc-icon svg{color:var(--amber)}
  details.svc:nth-child(6n+0) .svc-icon svg{color:var(--red)}
  details.svc[open] .svc-icon svg{color:var(--white)}

  /* === Hover preview on the icon + chevron (before the card is opened) ===
     - Archival (default) & Clean: hover mirrors the open/click state.
     - Electric: hover turns both icon and chevron RED for a red-on-blue
       contrast (distinct from the open state, by request).
     The closed body is not rendered (native <details>), so we only need to
     style the summary's icon + chevron here. */

  /* Archival (default) — match the open state: navy icon, amber chevron */
  details.svc > summary:hover .svc-icon{background:var(--ink);border-color:var(--ink);color:var(--white)}
  details.svc > summary:hover .svc-icon svg{color:var(--white)}
  details.svc > summary:hover .svc-chev{background:var(--amber);border-color:var(--amber);color:var(--ink)}

  /* Electric — RED icon + RED chevron on blue (red/blue contrast) */
  html[data-theme="electric"] details.svc > summary:hover{background:rgba(255,255,255,.06)}
  html[data-theme="electric"] details.svc > summary:hover .svc-icon{background:#E11D2A;border-color:#E11D2A;color:#fff}
  html[data-theme="electric"] details.svc > summary:hover .svc-icon svg{color:#fff}
  html[data-theme="electric"] details.svc > summary:hover .svc-chev{background:#E11D2A;border-color:#E11D2A;color:#fff}

  /* Clean — match the open state: red icon, red chevron */
  html[data-theme="clean"] details.svc > summary:hover .svc-icon{background:#E11D2A;border-color:#E11D2A;color:#fff}
  html[data-theme="clean"] details.svc > summary:hover .svc-icon svg{color:#fff}
  html[data-theme="clean"] details.svc > summary:hover .svc-chev{background:#E11D2A;border-color:#E11D2A;color:#fff}

  /* ---------- Calculator ---------- */
  .calc{padding-top:24px;padding-bottom:56px}  /* tightened so the estimator fits one viewport */
  #calculator{scroll-margin-top:118px}  /* land below the 105px sticky header on anchor-jump so the title isn't clipped */
  .calc-wrap{
    display:grid;grid-template-columns:1.05fr 1fr;gap:0;
    border:1px solid var(--ink);background:var(--white);
  }
  @media (max-width:980px){.calc-wrap{grid-template-columns:1fr}}
  .calc-form{padding:40px 36px;border-right:1px solid var(--line);position:relative}
  @media (max-width:980px){.calc-form{border-right:0;border-bottom:1px solid var(--line)}}
  .calc-form::before{
    content:"FORM A · ENERGY SAVINGS ESTIMATOR";position:absolute;top:14px;left:36px;
    font-family:var(--fs-mono);font-size:10px;letter-spacing:.18em;color:var(--ink-4);
  }
  .calc-form > h3{margin-top:32px;margin-bottom:6px;font-size:24px}
  .calc-form > .lead{font-size:14px;margin-bottom:28px}

  .field{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
  .field-label{display:flex;justify-content:space-between;align-items:baseline}
  .field-label label{font-family:var(--fs-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
  .field-label .hint{font-family:var(--fs-mono);font-size:10px;color:var(--ink-4)}
  .input,.select{
    width:100%;padding:14px 14px;border:1px solid var(--line-strong);background:var(--paper);
    font:inherit;color:var(--ink);font-size:15px;
    transition:border-color .2s ease, background .2s ease;
    border-radius:0;-webkit-appearance:none;appearance:none;
  }
  .input:focus,.select:focus{outline:none;border-color:var(--ink);background:var(--white);box-shadow:inset 0 0 0 2px var(--amber)}
  .input::placeholder{color:var(--ink-4)}
  .field.with-prefix{position:relative}
  .field.with-prefix .input{padding-left:36px}
  .field.with-prefix .prefix{position:absolute;left:14px;top:42px;font-family:var(--fs-mono);font-size:14px;color:var(--ink-3);pointer-events:none}
  .select-wrap{position:relative}
  .select-wrap::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-75%) rotate(45deg);pointer-events:none}

  .industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  @media (max-width:520px){.industry-grid{grid-template-columns:repeat(2,1fr)}}
  .ind-opt{
    display:flex;flex-direction:column;align-items:flex-start;gap:6px;
    padding:12px;border:1px solid var(--line-strong);background:var(--paper);
    transition:all .2s ease;cursor:pointer;text-align:left;
  }
  .ind-opt:hover{border-color:var(--ink-2)}
  .ind-opt[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--sky)}
  .ind-opt[aria-pressed="true"] .ind-rate{color:var(--sky)}
  .ind-name{font-size:13px;font-weight:500}
  .ind-rate{font-family:var(--fs-mono);font-size:10px;letter-spacing:.06em;color:var(--ink-4)}

  .calc-actions{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}
  .calc-actions .small{font-family:var(--fs-mono);font-size:10px;color:var(--ink-4);letter-spacing:.1em;text-transform:uppercase}

  /* Calc result panel */
  .calc-result{
    padding:40px 36px;background:var(--ink);color:var(--white);position:relative;display:flex;flex-direction:column;gap:22px;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:32px 32px;
  }
  .calc-result::before{
    content:"OUTPUT · REPORT 0426-A";position:absolute;top:14px;left:36px;
    font-family:var(--fs-mono);font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.45);
  }
  .calc-result h3{color:var(--white);margin-top:32px}
  .result-big{font-family:var(--fs-serif);font-weight:500;font-size:clamp(52px,6vw,84px);line-height:.95;letter-spacing:-.02em;color:var(--white)}
  .result-big small{font-family:var(--fs-sans);font-size:.32em;color:var(--amber);font-weight:600;margin-left:8px;letter-spacing:0}
  .result-sub{color:rgba(255,255,255,.7);font-size:14px;max-width:42ch}
  .result-rows{margin-top:8px;border-top:1px solid rgba(255,255,255,.16)}
  .result-row{display:grid;grid-template-columns:1fr auto;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);align-items:center}
  .result-row .k{font-family:var(--fs-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
  .result-row .v{font-family:var(--fs-mono);font-size:15px;color:var(--white);font-weight:500}
  .result-row .v.accent{color:var(--amber)}
  .savings-bar{display:flex;align-items:center;gap:12px;margin-top:8px}
  .savings-bar-track{flex:1;height:6px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
  .savings-bar-fill{height:100%;background:linear-gradient(90deg, var(--sky) 0%, var(--amber) 60%, var(--red) 100%);width:0;transition:width .8s cubic-bezier(.2,.7,.2,1)}
  .savings-bar .pct{font-family:var(--fs-mono);font-size:12px;color:var(--sky);font-weight:600;min-width:48px;text-align:right}

  /* ---- Compact the Savings Estimator so inputs + results fit one viewport ----
     All rules scoped to .calc / .calc-form / .calc-result so no other section
     is affected. */
  /* Lead paragraph removed — title sits stacked directly below the eyebrow, kept
     compact so the whole estimator still fits one viewport. */
  .calc .sec-head{display:block;margin-bottom:14px}
  .calc .sec-head > div{display:block}
  .calc .sec-head .sec-eyebrow{margin-bottom:6px}
  .calc .sec-head h2{font-size:clamp(24px,2.8vw,34px);line-height:1.05;margin:0}
  .calc-form{padding:20px 36px}
  .calc-result{padding:20px 36px;gap:11px}
  .calc-form > h3,.calc-result h3{margin-top:16px;margin-bottom:3px;font-size:19px}
  .calc-form > .lead{font-size:12.5px;margin-bottom:14px}
  .calc-form .field{margin-bottom:11px}
  .calc-form .industry-grid{gap:6px}
  .calc-form .ind-opt{padding:9px 10px}
  .calc-form .calc-actions{margin-top:4px}
  .result-big{font-size:clamp(38px,4.2vw,56px)}
  .result-sub{font-size:12.5px;line-height:1.45}
  .result-rows{margin-top:0}
  .result-row{padding:7px 0}
  .calc-result .result-cta{margin-top:2px}

  /* ---- Lighter, more optimistic output panel: soft light grey instead of
     near-black, with dark text. !important so it stays consistent across all
     three tweak themes (each of which otherwise paints this panel dark). ---- */
  .calc-result{
    background:#EEF1F5 !important;
    background-image:
      linear-gradient(rgba(15,26,43,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,26,43,.045) 1px, transparent 1px) !important;
    color:#28323F !important;
    border:1px solid var(--line);
  }
  .calc-result::before{color:#9aa3af !important}
  .calc-result h3{color:#1F2A37 !important}
  .result-big{color:#161D26 !important}
  .result-big small{color:#E11D2A !important}
  .result-sub{color:#54606E !important}
  .result-rows{border-top:1px solid rgba(15,26,43,.14) !important}
  .result-row{border-bottom:1px solid rgba(15,26,43,.10) !important}
  .result-row .k{color:#6B7682 !important}
  .result-row .v{color:#1F2A37 !important}
  .result-row .v.accent{color:#E11D2A !important}
  .savings-bar .mono-sm{color:rgba(15,26,43,.45) !important}
  .savings-bar .pct{color:#2E75B6 !important}
  .savings-bar-track{background:rgba(15,26,43,.12) !important}
  .calc-result .btn-line-white{border:1px solid rgba(15,26,43,.35) !important;color:#1F2A37 !important;background:transparent !important}
  .calc-result .btn-line-white:hover{background:rgba(15,26,43,.06) !important;border-color:#1F2A37 !important}

  .result-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
  .btn-amber{background:var(--amber);color:var(--ink);border-color:var(--amber);padding:12px 18px;font-size:13px}
  .btn-amber:hover{background:#E9A845;border-color:#E9A845}
  .btn-line-white{border:1px solid rgba(255,255,255,.4);color:var(--white);padding:12px 18px;font-size:13px;background:transparent}
  .btn-line-white:hover{background:rgba(255,255,255,.08);border-color:var(--white)}

  /* ---------- Projects ---------- */
  .projects-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:32px}
  @media (max-width:980px){.projects-grid{grid-template-columns:repeat(6,1fr);gap:24px}}
  @media (max-width:640px){.projects-grid{grid-template-columns:1fr}}
  .project{
    grid-column:span 4;
    display:flex;flex-direction:column;gap:14px;cursor:pointer;
  }
  @media (max-width:980px){.project{grid-column:span 6}}
  @media (max-width:640px){.project{grid-column:span 1}}
  .project.feat{grid-column:span 8}
  @media (max-width:980px){.project.feat{grid-column:span 6}}
  @media (max-width:640px){.project.feat{grid-column:span 1}}

  .project-img{
    aspect-ratio:4/3; border:1px solid var(--line-strong); background:var(--paper-2);
    position:relative; overflow:hidden;
    background-image:
      repeating-linear-gradient(45deg, transparent 0 14px, rgba(14,26,43,.05) 14px 15px);
  }
  .project.feat .project-img{aspect-ratio:16/10}
  .project-img-tag{
    position:absolute;top:14px;left:14px;background:var(--paper);border:1px solid var(--ink);
    font-family:var(--fs-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    padding:5px 9px;color:var(--ink);
  }
  .project-img-cap{
    position:absolute;bottom:14px;left:14px;right:14px;
    font-family:var(--fs-mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3);
    display:flex;justify-content:space-between;align-items:center;
  }
  .project-img-glyph{
    position:absolute;inset:0;display:grid;place-items:center;
  }
  .project-meta{display:flex;justify-content:space-between;font-family:var(--fs-mono);font-size:10px;letter-spacing:.12em;color:var(--ink-4);text-transform:uppercase}
  .project h3{font-size:20px;line-height:1.25}
  .project p{color:var(--ink-3);font-size:14.5px}
  .project-kpis{display:flex;gap:18px;margin-top:6px;flex-wrap:wrap}
  .project-kpi{display:flex;flex-direction:column;gap:2px}
  .project-kpi .v{font-family:var(--fs-mono);font-weight:600;color:var(--ink);font-size:15px}
  .project-kpi .l{font-family:var(--fs-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}

  /* ---------- About ---------- */
  .about{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  @media (max-width:880px){.about-grid{grid-template-columns:1fr;gap:36px}}
  .about-text p{color:var(--ink-3);margin-bottom:18px;max-width:54ch}
  .principles{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:8px}
  @media (max-width:480px){.principles{grid-template-columns:1fr}}
  .principle{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 20px;background:var(--paper)}
  .principle-num{font-family:var(--fs-mono);font-size:11px;letter-spacing:.16em;font-weight:600}
  .principle:nth-child(1) .principle-num{color:var(--red)}
  .principle:nth-child(2) .principle-num{color:var(--sky-2)}
  .principle:nth-child(3) .principle-num{color:var(--amber)}
  .principle:nth-child(4) .principle-num{color:var(--ink-2)}
  .principle h4{margin:8px 0 6px;font-size:15px;font-weight:600}
  .principle p{font-size:13px;color:var(--ink-3);margin:0}

  .creds-card{background:var(--paper);border:1px solid var(--ink);padding:32px}
  .creds-card h4{font-family:var(--fs-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:18px}
  .cred-list{display:flex;flex-direction:column}
  .cred{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line)}
  .cred:last-child{border-bottom:0}
  .cred-code{font-family:var(--fs-mono);font-size:11px;color:var(--sky-2);font-weight:600;letter-spacing:.06em;min-width:38px}
  .cred-name{font-size:14px;color:var(--ink)}
  .cred-year{font-family:var(--fs-mono);font-size:11px;color:var(--ink-4)}

  .team-row{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
  .team-stack{display:flex}
  .avatar{width:44px;height:44px;border:1px solid var(--ink);background:var(--paper-2);border-radius:50%;margin-left:-10px;display:grid;place-items:center;font-family:var(--fs-mono);font-size:11px;font-weight:600;color:var(--ink)}
  .avatar:first-child{margin-left:0}
  .avatar.amber{background:var(--amber);color:var(--ink)}
  .avatar.sky{background:var(--sky);color:var(--ink)}
  .avatar.red{background:var(--red);color:var(--white)}
  .avatar.ink{background:var(--ink);color:var(--white)}
  .team-meta{font-size:13px;color:var(--ink-3)}
  .team-meta strong{color:var(--ink);font-weight:600}

  /* ---------- Contact ---------- */
  .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
  @media (max-width:880px){.contact-grid{grid-template-columns:1fr;gap:32px}}
  .contact-info{display:flex;flex-direction:column;gap:22px}
  .info-block{padding:18px 0;border-top:1px solid var(--line)}
  .info-block:last-child{border-bottom:1px solid var(--line)}
  .info-block-label{font-family:var(--fs-mono);font-size:10px;letter-spacing:.16em;color:var(--ink-4);text-transform:uppercase;margin-bottom:8px}
  .info-block-val{font-size:17px;color:var(--ink);font-weight:500}
  .info-block-val a:hover{color:var(--sky-2)}
  .info-block small{display:block;color:var(--ink-3);font-size:13px;margin-top:4px}

  .contact-form{background:var(--white);border:1px solid var(--ink);padding:32px}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media (max-width:520px){.form-row{grid-template-columns:1fr}}
  .input.error,.select.error,.textarea.error{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
  .textarea{
    width:100%;min-height:140px;padding:14px;border:1px solid var(--line-strong);background:var(--paper);
    font:inherit;color:var(--ink);font-size:15px;resize:vertical;
    transition:border-color .2s ease, background .2s ease;border-radius:0;
  }
  .textarea:focus{outline:none;border-color:var(--ink);background:var(--white);box-shadow:inset 0 0 0 2px var(--amber)}
  .err-msg{font-family:var(--fs-mono);font-size:11px;color:var(--red);margin-top:6px;display:none;letter-spacing:.04em}
  .field.error .err-msg{display:block}
  .form-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;flex-wrap:wrap;gap:14px}
  .form-success{
    display:none;background:var(--ink);color:var(--white);padding:20px;margin-top:20px;
    border-left:3px solid var(--amber);
  }
  .form-success.show{display:block;animation:fadein .4s ease}
  @keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .form-success-title{font-family:var(--fs-mono);font-size:11px;letter-spacing:.16em;color:var(--amber);text-transform:uppercase;margin-bottom:6px}
  .form-success p{font-size:14px;color:rgba(255,255,255,.85)}

  /* ---------- Footer ---------- */
  footer{background:var(--ink);color:rgba(255,255,255,.78);padding:72px 0 32px;border-top:1px solid var(--ink)}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}
  @media (max-width:880px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
  @media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
  .foot-brand .brand-mark{background:transparent;color:var(--ink);border:0;width:80px;height:80px}
  .foot-brand .brand-mark svg{width:80px;height:80px}
  .foot-brand .brand-name{color:var(--white);font-size:32px}
  .foot-brand p{color:rgba(255,255,255,.6);font-size:15px;margin-top:20px;max-width:42ch}
  .foot-col h5{font-family:var(--fs-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--white);font-weight:500;margin-bottom:18px}
  .foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
  .foot-col a{color:rgba(255,255,255,.65);font-size:14px;transition:color .2s ease}
  .foot-col a:hover{color:var(--sky)}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:18px;font-family:var(--fs-mono);font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.5);text-transform:uppercase}
  .socials{display:flex;gap:10px}
  .social{width:36px;height:36px;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:rgba(255,255,255,.7);transition:all .2s ease}
  .social:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
  .social svg{width:15px;height:15px}

  /* ---------- Reveal ---------- */
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  /* Reduce motion */
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important}
    .reveal{opacity:1;transform:none}
  }

  /* Misc */
  .crop-corners::before,.crop-corners::after,
  .crop-corners > i::before,.crop-corners > i::after{
    content:"";position:absolute;width:12px;height:12px;border:1px solid var(--ink);
  }
  .crop-corners{position:relative}
  .crop-corners::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
  .crop-corners::after{top:-1px;right:-1px;border-left:0;border-bottom:0}
  .crop-corners > i{position:absolute;inset:0;pointer-events:none}
  .crop-corners > i::before{bottom:-1px;left:-1px;border-right:0;border-top:0}
  .crop-corners > i::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

  /* ============================================================
     THEME: ELECTRIC (etapru-inspired)
     Royal blue surface, white type, bright red pill CTAs,
     scalloped curve divider, sans-only display type.
     ============================================================ */
  html[data-theme="electric"]{
    --paper:#0F4FBE;
    --paper-2:#0A3F9E;
    --paper-3:#0A3580;
    --ink:#FFFFFF;
    --ink-2:#F2F6FF;
    --ink-3:rgba(255,255,255,.78);
    --ink-4:rgba(255,255,255,.55);
    --line:rgba(255,255,255,.18);
    --line-strong:rgba(255,255,255,.34);
    --amber:#FFD34D;
    --red:#E11D2A;
    --red-2:#B6121C;
    --sky:#7CC4FF;
    --sky-2:#BFE0FF;
    --white:#FFFFFF;
  }
  html[data-theme="electric"] body{
    background:var(--paper);
    color:var(--ink);
    background-image:
      linear-gradient(var(--paper) 0%, var(--paper) 100%),
      radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0);
    background-size:auto, 32px 32px;
    background-blend-mode:overlay;
  }
  html[data-theme="electric"] h1,
  html[data-theme="electric"] h2,
  html[data-theme="electric"] h3,
  html[data-theme="electric"] h4{color:var(--ink);font-family:var(--fs-sans);font-weight:700;letter-spacing:-.02em}
  html[data-theme="electric"] h1 .accent{font-family:var(--fs-sans);font-style:normal;font-weight:700;color:#FFD34D}
  html[data-theme="electric"] .hero h1 .underscore::after{background:var(--red);height:6px;opacity:1;bottom:2px}

  /* Header */
  html[data-theme="electric"] .site-header{background:#FFFFFF;border-bottom:0;box-shadow:0 1px 0 rgba(0,0,0,.06)}
  html[data-theme="electric"] .site-header .brand-name{color:#0F4FBE}
  html[data-theme="electric"] .site-header .brand-sub{color:#0F4FBE;opacity:.6}
  html[data-theme="electric"] .site-header .brand-mark{background:transparent;border:0;color:#0F4FBE}
  html[data-theme="electric"] .site-header .nav-links a{color:#0F4FBE;font-weight:600}
  html[data-theme="electric"] .site-header .nav-links a::after{background:#E11D2A}
  html[data-theme="electric"] .nav-cta-primary{background:#E11D2A;border-color:#E11D2A;color:#fff;border-radius:999px;padding:12px 22px}
  html[data-theme="electric"] .nav-cta-primary:hover{background:#B6121C;border-color:#B6121C;color:#fff}
  html[data-theme="electric"] .nav-cta-ghost{background:transparent;border-color:#fff;color:#fff;border-radius:999px;padding:12px 22px}
  html[data-theme="electric"] .nav-cta-ghost:hover{background:#fff;color:#0F4FBE;border-color:#fff}
  html[data-theme="electric"] .nav-menu{background:#fff;border-color:rgba(15,79,190,.18)}
  html[data-theme="electric"] .nav-menu a{color:#1F2A3D}
  html[data-theme="electric"] .nav-menu a:hover{background:#F4F6FB;color:#E11D2A}
  html[data-theme="electric"] .res-name{color:#0E1A2B}
  html[data-theme="electric"] .nav-menu-wide a:hover .res-name{color:#E11D2A}
  html[data-theme="electric"] .nav-toggle{border-color:#0F4FBE}
  html[data-theme="electric"] .nav-toggle span,
  html[data-theme="electric"] .nav-toggle span::before,
  html[data-theme="electric"] .nav-toggle span::after{background:#0F4FBE}

  /* Buttons → red pills */
  html[data-theme="electric"] .btn{border-radius:999px;border:0;padding:16px 26px;font-weight:600}
  html[data-theme="electric"] .btn-primary{background:#E11D2A;color:#fff}
  html[data-theme="electric"] .btn-primary:hover{background:#B6121C;color:#fff}
  html[data-theme="electric"] .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.5)}
  html[data-theme="electric"] .btn-ghost:hover{background:#fff;color:#0F4FBE}
  html[data-theme="electric"] .btn-amber{background:#E11D2A;color:#fff;border:0}
  html[data-theme="electric"] .btn-amber:hover{background:#B6121C}

  /* Hero card → white inset with blue accents */
  html[data-theme="electric"] .hero-card{background:#fff;border:0;box-shadow:0 30px 60px -30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.15)}
  html[data-theme="electric"] .hero-card::before{border-color:rgba(15,79,190,.18)}
  html[data-theme="electric"] .hero-card-head h4{color:#0F4FBE}
  html[data-theme="electric"] .hero-card-head .ref{color:#445166}
  html[data-theme="electric"] .hero-card-head,
  html[data-theme="electric"] .hero-card-foot{border-color:rgba(15,79,190,.14)}
  html[data-theme="electric"] .hero-card .hcf-cell .v{color:#0E1A2B}
  html[data-theme="electric"] .hero-card .hcf-cell .l{color:#445166}
  html[data-theme="electric"] .hero-card .hcf-cell.hcf-sky .v{color:#0F4FBE}
  html[data-theme="electric"] .hero-card .hcf-cell.hcf-red .v{color:#E11D2A}
  html[data-theme="electric"] .one-line .wire{stroke:#0F4FBE}
  html[data-theme="electric"] .one-line .wire-soft{stroke:#7A8295}
  html[data-theme="electric"] .one-line .node{fill:#fff;stroke:#0F4FBE}
  html[data-theme="electric"] .one-line .hot{fill:#E11D2A;stroke:#E11D2A}
  html[data-theme="electric"] .one-line .surge{stroke:#0F4FBE}
  html[data-theme="electric"] .one-line .surge-red{stroke:#E11D2A}
  html[data-theme="electric"] .one-line .lbl{fill:#445166}
  html[data-theme="electric"] .one-line .lbl-val{fill:#0E1A2B}

  /* Scalloped curve divider below hero */
  html[data-theme="electric"] .hero{padding-bottom:140px;position:relative}
  html[data-theme="electric"] .hero::after{
    content:"";position:absolute;left:-5%;right:-5%;bottom:-1px;height:120px;
    background:#F4F1EA;
    border-radius:50% 50% 0 0 / 100% 100% 0 0;
    z-index:1;
  }
  html[data-theme="electric"] .ticker{background:#F4F1EA;border-color:rgba(15,79,190,.14);position:relative;z-index:2}
  html[data-theme="electric"] .ticker-item{color:#0F4FBE}
  html[data-theme="electric"] .ticker-item::before{background:#E11D2A}

  /* Sections: alternate cream paper + blue */
  html[data-theme="electric"] .stats,
  html[data-theme="electric"] #projects,
  html[data-theme="electric"] #contact{background:#F4F1EA;color:#0E1A2B}
  html[data-theme="electric"] .services,
  html[data-theme="electric"] .about{background:#0F4FBE;color:#fff;border-color:rgba(255,255,255,.18)}
  html[data-theme="electric"] .calc{background:#F4F1EA;color:#0E1A2B}

  /* Force readable text inside cream sections regardless of var */
  html[data-theme="electric"] .stats h2,
  html[data-theme="electric"] #projects h2,
  html[data-theme="electric"] #contact h2,
  html[data-theme="electric"] .calc h2,
  html[data-theme="electric"] .stats h3,
  html[data-theme="electric"] #projects h3,
  html[data-theme="electric"] #contact h3,
  html[data-theme="electric"] .calc h3,
  html[data-theme="electric"] .stats h4,
  html[data-theme="electric"] #projects h4,
  html[data-theme="electric"] #contact h4{color:#0E1A2B}
  html[data-theme="electric"] .stats .lead,
  html[data-theme="electric"] #projects .lead,
  html[data-theme="electric"] #contact .lead,
  html[data-theme="electric"] .calc .lead{color:#445166}
  html[data-theme="electric"] .stats .sec-eyebrow,
  html[data-theme="electric"] #projects .sec-eyebrow,
  html[data-theme="electric"] #contact .sec-eyebrow,
  html[data-theme="electric"] .calc .sec-eyebrow{color:#0F4FBE}
  html[data-theme="electric"] .stats .sec-eyebrow .num,
  html[data-theme="electric"] #projects .sec-eyebrow .num,
  html[data-theme="electric"] #contact .sec-eyebrow .num,
  html[data-theme="electric"] .calc .sec-eyebrow .num{border-color:#0F4FBE;color:#0F4FBE}

  /* Stat wall on cream */
  html[data-theme="electric"] .stats-wall{background:#fff;border-color:rgba(15,79,190,.2)}
  html[data-theme="electric"] .stat-label{color:#445166}
  html[data-theme="electric"] .stat-num{color:#0F4FBE;font-family:var(--fs-sans);font-weight:700}
  html[data-theme="electric"] .stat:nth-child(1) .stat-num .suffix{color:#E11D2A}
  html[data-theme="electric"] .stat:nth-child(2) .stat-num .suffix{color:#0F4FBE}
  html[data-theme="electric"] .stat:nth-child(3) .stat-num .suffix{color:#E11D2A}
  html[data-theme="electric"] .stat-desc{color:#445166}
  html[data-theme="electric"] .stat-bar{background:#E4E8F2}
  html[data-theme="electric"] .stat:nth-child(1) .stat-bar i{background:#E11D2A}
  html[data-theme="electric"] .stat:nth-child(2) .stat-bar i{background:#0F4FBE}
  html[data-theme="electric"] .stat:nth-child(3) .stat-bar i{background:#E11D2A}

  /* (Legacy electric .svc:hover block removed — it was built for the old 4-column
     card grid and caused white-on-white text on the new <details> accordion.
     The details.svc electric rules above are now the single source of truth.) */

  /* Sectors band */
  /* ===== SECTORS — Premium Swiss-grid redesign ===== */
  .sectors{border-top:1px solid var(--line);background:var(--white);padding:96px 0 112px}

  /* Two-column section heading */
  .sectors-title-row{
    display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;
    padding-bottom:56px;border-bottom:1px solid var(--line);margin-bottom:0;
  }
  @media(max-width:768px){.sectors-title-row{grid-template-columns:1fr;gap:24px}}
  .sectors-eyebrow{
    font-family:var(--fs-mono);font-size:14px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--red);margin-bottom:20px;font-weight:700;
  }
  .sectors-heading{
    font-size:clamp(40px,4.8vw,68px);font-weight:600;letter-spacing:-.03em;
    line-height:1.0;color:var(--ink);margin:0;
  }
  .sectors-desc{
    font-size:16px;line-height:1.68;color:var(--ink-3);
    max-width:44ch;align-self:end;margin:0;
  }

  /* Grid — 1px gap acts as ruled dividing lines */
  .sectors-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:1px;background:var(--line-strong);
    border:1px solid var(--line-strong);align-items:start;
  }
  @media(max-width:880px){.sectors-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.sectors-grid{grid-template-columns:1fr}}

  /* Card entrance animation */
  @keyframes sectorIn{
    from{opacity:0;transform:translateY(28px)}
    to{opacity:1;transform:translateY(0)}
  }
  /* ===== Accenture-style portrait card: image ↔ text swap on hover ===== */
  .sector-card{
    position:relative;
    background:var(--white);
    display:flex;flex-direction:column;
    min-height:460px;
    padding:0;
    cursor:pointer;overflow:hidden;
    opacity:0;transform:translateY(28px);
    transition:
      background .45s cubic-bezier(.25,.46,.45,.94),
      transform .45s cubic-bezier(.25,.46,.45,.94),
      box-shadow .45s cubic-bezier(.25,.46,.45,.94);
  }
  @media(max-width:560px){.sector-card{min-height:400px}}
  .sector-card.card-in{
    animation:sectorIn .65s cubic-bezier(.25,.46,.45,.94) var(--sd,0ms) both;
  }
  .sectors-grid .sector-card:nth-child(1){--sd:0ms}
  .sectors-grid .sector-card:nth-child(2){--sd:90ms}
  .sectors-grid .sector-card:nth-child(3){--sd:180ms}
  .sectors-grid .sector-card:nth-child(4){--sd:270ms}
  .sectors-grid .sector-card:nth-child(5){--sd:360ms}
  .sectors-grid .sector-card:nth-child(6){--sd:450ms}

  /* Card head — always visible at top */
  .sector-head{
    display:flex;flex-direction:column;gap:0;
    padding:30px 30px 22px;background:none;border:0;
    text-align:left;font:inherit;color:inherit;width:100%;cursor:pointer;
    position:relative;z-index:3;
  }
  @media(max-width:560px){.sector-head{padding:26px 24px 18px}}
  .sector-code{
    font-family:var(--fs-mono);font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--amber);font-weight:600;margin-bottom:14px;
    transition:color .3s ease;
  }
  .sector-name{
    font-size:21px;font-weight:700;color:var(--ink);
    letter-spacing:-.02em;line-height:1.2;
    transition:color .3s ease;
  }
  .sector-meta{
    font-family:var(--fs-mono);font-size:11px;color:var(--ink-4);
    letter-spacing:.04em;margin-top:10px;
    transition:color .3s ease;
  }

  /* Image area — full-bleed photo, stays visible behind a backdrop-blur on hover */
  .sector-image{
    flex:1;position:relative;overflow:hidden;
    background:var(--paper);
  }
  .sector-image img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;display:block;
    transition:transform 1.4s cubic-bezier(.25,.46,.45,.94), filter .6s ease;
  }
  .sector-image svg{width:100%;height:auto;max-width:200px;max-height:170px;display:block;margin:auto;color:var(--ink-3)}

  /* Reveal area — full-card iOS-style frosted overlay on hover/expanded */
  .sector-reveal{
    position:absolute;inset:0;
    padding:32px 32px 34px;
    display:flex;flex-direction:column;justify-content:flex-end;gap:14px;
    pointer-events:none;
    background:rgba(10,16,28,.62);
    -webkit-backdrop-filter:blur(22px) saturate(1.6);
    backdrop-filter:blur(22px) saturate(1.6);
    opacity:0;
    transition:opacity .4s cubic-bezier(.25,.46,.45,.94);
    z-index:2;
  }
  @media(max-width:560px){.sector-reveal{padding:26px 26px 26px}}
  /* Each child slides in from the right with stagger */
  .sector-reveal > *{
    transform:translateX(36px);opacity:0;
    transition:
      transform .55s cubic-bezier(.22,.61,.36,1),
      opacity .4s ease;
  }
  .sector-reveal > *:nth-child(1){transition-delay:.05s}
  .sector-reveal > *:nth-child(2){transition-delay:.12s}
  .sector-reveal > *:nth-child(3){transition-delay:.18s}
  .sector-reveal > *:nth-child(4){transition-delay:.24s}
  .sector-reveal p{
    font-size:16px;line-height:1.55;color:#fff;font-weight:400;
    margin:0;letter-spacing:-.005em;
  }
  .sector-reveal .sd-list{
    list-style:none;padding:0;margin:4px 0 0;
    display:flex;flex-direction:column;gap:9px;
  }
  .sector-reveal .sd-list li{
    font-size:15.5px;line-height:1.5;color:#fff;
    padding-left:22px;position:relative;font-weight:500;
    text-shadow:0 1px 2px rgba(0,0,0,.35);
  }
  .sector-reveal .sd-list li::before{
    content:"→";position:absolute;left:0;top:1px;color:var(--amber);font-weight:800;font-size:16px;
  }
  .sector-reveal .sd-list li strong{
    color:var(--amber);font-weight:800;letter-spacing:.01em;
    text-shadow:0 1px 2px rgba(0,0,0,.4);
  }
  .sector-reveal .sector-cta{
    margin-top:18px;font-family:var(--fs-mono);font-size:12px;letter-spacing:.2em;
    text-transform:uppercase;color:#fff;text-decoration:none;font-weight:700;
    display:inline-flex;align-items:center;gap:12px;
    border-bottom:1.5px solid rgba(255,255,255,.45);padding-bottom:10px;
    align-self:flex-start;transition:border-color .3s ease, color .3s ease;
  }
  .sector-reveal .sector-cta:hover{color:var(--amber);border-bottom-color:var(--amber)}
  .sector-reveal .sector-cta span{transition:transform .3s ease;font-size:14px}
  .sector-reveal .sector-cta:hover span{transform:translateX(6px)}

  /* ---- Larger, more legible type inside Services + Industries cards (desktop) ---- */
  @media (min-width:881px){
    /* Services accordion (card title is an h4) */
    .svc-head-text h4{font-size:24px}
    .svc-head-text .svc-tagline{font-size:16px}
    .svc-body-main p{font-size:19px;line-height:1.7}
    .svc-list li{font-size:18px}
    .svc-pain{font-size:15px}
    .svc-cta{font-size:15.5px}
    .svc-tag{font-size:13.5px}
    /* Industries / sector cards */
    .sector-name{font-size:24px}
    .sector-code{font-size:12px}
    .sector-meta{font-size:12.5px}
    .sector-reveal p{font-size:18px;line-height:1.6}
    .sector-reveal .sd-list li{font-size:17px}
  }

  /* HOVER + EXPANDED state — photo stays, frosted overlay reveals body */
  .sector-card.card-in:hover,
  .sector-card[aria-expanded="true"]{
    background:var(--ink);z-index:2;
    box-shadow:0 28px 56px -24px rgba(14,26,43,.35);
  }
  /* Photo darkens slightly + ken-burns zoom; remains visible behind blur */
  .sector-card.card-in:hover .sector-image img,
  .sector-card[aria-expanded="true"] .sector-image img{
    transform:scale(1.08);
    filter:brightness(.88) saturate(1.15);
  }
  /* Frosted overlay fades in */
  .sector-card.card-in:hover .sector-reveal,
  .sector-card[aria-expanded="true"] .sector-reveal{
    opacity:1;pointer-events:auto;
  }
  /* Children slide in from the right */
  .sector-card.card-in:hover .sector-reveal > *,
  .sector-card[aria-expanded="true"] .sector-reveal > *{
    transform:translateX(0);opacity:1;
  }
  /* Title block stays white over the photo */
  .sector-card.card-in:hover .sector-name,
  .sector-card[aria-expanded="true"] .sector-name{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
  .sector-card.card-in:hover .sector-meta,
  .sector-card[aria-expanded="true"] .sector-meta{color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.35)}
  .sector-card.card-in:hover .sector-code,
  .sector-card[aria-expanded="true"] .sector-code{color:var(--amber);text-shadow:0 1px 2px rgba(0,0,0,.45)}

  /* ===== Mobile (single-column) — reveal flows in normal layout to guarantee no overflow =====
     On mobile the absolute-overlay pattern caused text to spill out of the card when
     content was taller than min-height. Solution: on expand, hide the image, let the
     reveal take normal document flow, and let the card grow to fit its content. */
  @media (max-width: 560px){
    /* Default state: card holds its image with a sensible floor */
    .sector-card{ min-height: 400px; }

    /* Expanded: card grows naturally; solid dark bg replaces the frosted overlay */
    .sector-card.card-in:hover,
    .sector-card[aria-expanded="true"]{
      min-height: auto;
      background: #1A1A1A;
    }

    /* When expanded, hide the image so the reveal can take its place */
    .sector-card.card-in:hover .sector-image,
    .sector-card[aria-expanded="true"] .sector-image{
      display: none;
    }

    /* Reveal flows in normal layout (no overlay), no slide-in (no transforms to fight) */
    .sector-card.card-in:hover .sector-reveal,
    .sector-card[aria-expanded="true"] .sector-reveal{
      position: relative;
      inset: auto;
      display: flex;
      background: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      padding: 16px 24px 22px;
      pointer-events: auto;
      opacity: 1;
      transform: none;
    }
    .sector-card.card-in:hover .sector-reveal > *,
    .sector-card[aria-expanded="true"] .sector-reveal > *{
      transform: none;
      opacity: 1;
      transition: opacity .2s ease;
    }

    /* Tighter, mobile-friendly text — still readable, still pronounced */
    .sector-reveal{ gap: 10px; }
    .sector-reveal p{
      font-size: 14px;
      line-height: 1.5;
    }
    .sector-reveal .sd-list{
      margin-top: 4px;
      gap: 7px;
    }
    .sector-reveal .sd-list li{
      font-size: 14px;
      line-height: 1.5;
      padding-left: 20px;
      font-weight: 500;
    }
    .sector-reveal .sd-list li::before{ font-size: 15px; top: 0; }
    .sector-reveal .sd-list li strong{ font-weight: 800; }
    .sector-reveal .sector-cta{
      margin-top: 12px;
      font-size: 11.5px;
      letter-spacing: 0.18em;
      padding-bottom: 8px;
    }

    /* When expanded, hide the location subtitle (it's redundant with the body copy) */
    .sector-card.card-in:hover .sector-meta,
    .sector-card[aria-expanded="true"] .sector-meta{
      display: none;
    }
    /* Compact title when expanded so it never wraps to 3 lines */
    .sector-card.card-in:hover .sector-name,
    .sector-card[aria-expanded="true"] .sector-name{
      font-size: 19px;
      line-height: 1.22;
    }
  }

  /* Electric theme */
  html[data-theme="electric"] .sectors{background:transparent}
  html[data-theme="electric"] .sectors-heading{color:#fff}
  html[data-theme="electric"] .sectors-desc{color:rgba(255,255,255,.65)}
  html[data-theme="electric"] .sectors-eyebrow{color:#FFD34D}
  html[data-theme="electric"] .sector-code{color:#FFD34D}
  html[data-theme="electric"] .sector-name{color:#fff}
  html[data-theme="electric"] .sector-meta{color:rgba(255,255,255,.5)}

  /* Calculator */
  html[data-theme="electric"] .calc-wrap{border-color:#0F4FBE;background:#fff}
  html[data-theme="electric"] .calc-form{background:#fff;border-color:rgba(15,79,190,.14)}
  html[data-theme="electric"] .calc-form > h3,
  html[data-theme="electric"] .calc-form > .lead{color:#0E1A2B}
  html[data-theme="electric"] .field-label label{color:#0F4FBE}
  html[data-theme="electric"] .input,
  html[data-theme="electric"] .select,
  html[data-theme="electric"] .textarea{background:#F4F6FB;border-color:rgba(15,79,190,.2);color:#0E1A2B}
  html[data-theme="electric"] .input:focus,
  html[data-theme="electric"] .select:focus,
  html[data-theme="electric"] .textarea:focus{box-shadow:inset 0 0 0 2px #E11D2A;border-color:#0F4FBE;background:#fff}
  html[data-theme="electric"] .ind-opt{background:#F4F6FB;border-color:rgba(15,79,190,.2);color:#0E1A2B}
  html[data-theme="electric"] .ind-opt:hover{border-color:#0F4FBE}
  html[data-theme="electric"] .ind-opt[aria-pressed="true"]{background:#0F4FBE;color:#fff;border-color:#0F4FBE;box-shadow:inset 0 -3px 0 #E11D2A}
  html[data-theme="electric"] .ind-opt[aria-pressed="true"] .ind-rate{color:#FFD34D}
  html[data-theme="electric"] .calc-result{background:#0F4FBE;background-image:
      linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);}
  html[data-theme="electric"] .result-big{color:#fff}
  html[data-theme="electric"] .result-big small{color:#FFD34D}
  html[data-theme="electric"] .result-row .v.accent{color:#FFD34D}
  html[data-theme="electric"] .savings-bar-fill{background:linear-gradient(90deg, #7CC4FF, #fff 50%, #E11D2A)}
  html[data-theme="electric"] .savings-bar .pct{color:#FFD34D}
  html[data-theme="electric"] .btn-line-white{border-radius:999px;border:1px solid rgba(255,255,255,.55)}

  /* Projects */
  html[data-theme="electric"] .project-img{background:#fff;border-color:rgba(15,79,190,.18);background-image:repeating-linear-gradient(45deg, transparent 0 14px, rgba(15,79,190,.06) 14px 15px)}
  html[data-theme="electric"] .project-img-tag{background:#0F4FBE;color:#fff;border-color:#0F4FBE}
  html[data-theme="electric"] .project-img svg [stroke="#0E1A2B"]{stroke:#0F4FBE}
  html[data-theme="electric"] .project-img svg text[fill="#0E1A2B"]{fill:#0F4FBE}
  html[data-theme="electric"] .project-img svg [fill="#C8841A"]{fill:#E11D2A}
  html[data-theme="electric"] .project-img svg [stroke="#C8841A"]{stroke:#E11D2A}
  html[data-theme="electric"] .project h3{color:#0E1A2B}
  html[data-theme="electric"] .project p{color:#445166}
  html[data-theme="electric"] .project-meta,
  html[data-theme="electric"] .project-kpi .l{color:#7A8295}
  html[data-theme="electric"] .project-kpi .v{color:#0F4FBE}

  /* About on blue */
  html[data-theme="electric"] .about-text p{color:rgba(255,255,255,.85)}
  html[data-theme="electric"] .principle{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
  html[data-theme="electric"] .principle h4{color:#fff}
  html[data-theme="electric"] .principle p{color:rgba(255,255,255,.78)}
  html[data-theme="electric"] .principle:nth-child(1) .principle-num{color:#FFD34D}
  html[data-theme="electric"] .principle:nth-child(2) .principle-num{color:#7CC4FF}
  html[data-theme="electric"] .principle:nth-child(3) .principle-num{color:#FFD34D}
  html[data-theme="electric"] .principle:nth-child(4) .principle-num{color:#fff}
  html[data-theme="electric"] .creds-card{background:#fff;border-color:#fff;color:#0E1A2B}
  html[data-theme="electric"] .creds-card h4{color:#0F4FBE}
  html[data-theme="electric"] .cred-code{color:#E11D2A}
  html[data-theme="electric"] .cred-name{color:#0E1A2B}
  html[data-theme="electric"] .cred-year{color:#7A8295}
  html[data-theme="electric"] .team-meta{color:#445166}
  html[data-theme="electric"] .team-meta strong{color:#0E1A2B}
  html[data-theme="electric"] .avatar{background:#F4F6FB;border-color:#0F4FBE;color:#0F4FBE}
  html[data-theme="electric"] .avatar.sky{background:#0F4FBE;color:#fff}
  html[data-theme="electric"] .avatar.red{background:#E11D2A;color:#fff}
  html[data-theme="electric"] .avatar.ink{background:#0E1A2B;color:#fff}

  /* Contact */
  html[data-theme="electric"] .info-block{border-color:rgba(15,79,190,.18)}
  html[data-theme="electric"] .info-block-label{color:#7A8295}
  html[data-theme="electric"] .info-block-val{color:#0E1A2B}
  html[data-theme="electric"] .info-block-val a:hover{color:#E11D2A}
  html[data-theme="electric"] .contact-form{background:#fff;border-color:#0F4FBE}
  html[data-theme="electric"] .form-success{background:#0F4FBE;border-left-color:#E11D2A}
  html[data-theme="electric"] .form-success-title{color:#FFD34D}

  /* Footer */
  html[data-theme="electric"] footer{background:#0A3580}
  html[data-theme="electric"] .foot-col a:hover{color:#FFD34D}
  html[data-theme="electric"] .social:hover{background:#E11D2A;border-color:#E11D2A;color:#fff}

  /* Hero meta chips on blue */
  html[data-theme="electric"] .hero-meta{border-color:rgba(255,255,255,.22)}
  html[data-theme="electric"] .meta-chip{color:rgba(255,255,255,.78)}
  html[data-theme="electric"] .meta-dot{background:#FFD34D;box-shadow:0 0 0 4px rgba(255,211,77,.25)}
  html[data-theme="electric"] @keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(255,211,77,.25)}50%{box-shadow:0 0 0 9px rgba(255,211,77,.05)}}

  /* ============================================================
     THEME: CLEAN (ETAP-inspired)
     Pure white surfaces, dark ink, red pill CTAs, clean spacing.
     ============================================================ */
  html[data-theme="clean"]{
    --paper:#F5F7FA;
    --paper-2:#EEF1F6;
    --paper-3:#E4E8F0;
    --ink:#1A1A1A;
    --ink-2:#2A2A2A;
    --ink-3:#555555;
    --ink-4:#8A8F9A;
    --line:rgba(0,0,0,.08);
    --line-strong:rgba(0,0,0,.14);
    --amber:#E11D2A;
    --red:#E11D2A;
    --red-2:#B6121C;
    --sky:#1077E6;
    --sky-2:#0A5DBF;
    --white:#FFFFFF;
  }
  html[data-theme="clean"] body{
    background:#F5F7FA;color:var(--ink);
    background-image:none;
  }
  html[data-theme="clean"] h1,
  html[data-theme="clean"] h2,
  html[data-theme="clean"] h3,
  html[data-theme="clean"] h4{color:var(--ink);font-family:var(--fs-sans);font-weight:700;letter-spacing:-.02em}
  html[data-theme="clean"] h1 .accent{font-family:var(--fs-sans);font-style:normal;font-weight:700;color:#E11D2A}
  html[data-theme="clean"] .hero h1 .underscore::after{background:#E11D2A;height:5px;opacity:1;bottom:2px}

  /* Header */
  html[data-theme="clean"] .site-header{background:#FFFFFF;border-bottom:1px solid rgba(0,0,0,.08);box-shadow:none}
  html[data-theme="clean"] .site-header .brand-name{color:var(--ink)}
  html[data-theme="clean"] .site-header .brand-sub{color:#555;opacity:1}
  html[data-theme="clean"] .site-header .nav-links a{color:#1A1A1A;font-weight:500}
  html[data-theme="clean"] .site-header .nav-links a::after{background:#E11D2A}
  html[data-theme="clean"] .nav-cta-primary{background:#E11D2A;border-color:#E11D2A;color:#fff;border-radius:999px;padding:12px 24px;font-weight:600}
  html[data-theme="clean"] .nav-cta-primary:hover{background:#B6121C;border-color:#B6121C}
  html[data-theme="clean"] .nav-cta-ghost{background:transparent;border-color:#E11D2A;color:#E11D2A;border-radius:999px;padding:12px 24px;font-weight:600}
  html[data-theme="clean"] .nav-cta-ghost:hover{background:#E11D2A;color:#fff}
  html[data-theme="clean"] .nav-menu{background:#fff;border-color:rgba(0,0,0,.1)}
  html[data-theme="clean"] .nav-menu a{color:#1A1A1A}
  html[data-theme="clean"] .nav-menu a:hover{background:#F5F7FA;color:#E11D2A}
  html[data-theme="clean"] .res-name{color:#1A1A1A}
  html[data-theme="clean"] .nav-menu-wide a:hover .res-name{color:#E11D2A}

  /* Buttons → red pills */
  html[data-theme="clean"] .btn{border-radius:999px;border:0;padding:14px 26px;font-weight:600}
  html[data-theme="clean"] .btn-primary{background:#E11D2A;color:#fff}
  html[data-theme="clean"] .btn-primary:hover{background:#B6121C}
  html[data-theme="clean"] .btn-ghost{background:transparent;color:#1A1A1A;border:1px solid #1A1A1A}
  html[data-theme="clean"] .btn-ghost:hover{background:#1A1A1A;color:#fff}
  html[data-theme="clean"] .btn-amber{background:#E11D2A;color:#fff;border:0;border-radius:999px}
  html[data-theme="clean"] .btn-amber:hover{background:#B6121C}
  html[data-theme="clean"] .btn-line-white{border:1px solid rgba(255,255,255,.55);border-radius:999px}

  /* Sections — all white/light */
  html[data-theme="clean"] .services,
  html[data-theme="clean"] .about,
  html[data-theme="clean"] .stats,
  html[data-theme="clean"] .calc,
  html[data-theme="clean"] #contact{background:#FFFFFF;color:var(--ink);border-color:rgba(0,0,0,.06)}
  html[data-theme="clean"] .hero::after{display:none}

  /* Hero */
  html[data-theme="clean"] .hero-card{background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 20px 40px -20px rgba(0,0,0,.18)}
  html[data-theme="clean"] .hero-card::before{border-color:rgba(0,0,0,.06)}
  html[data-theme="clean"] .hero-meta{border-color:rgba(0,0,0,.08)}
  html[data-theme="clean"] .meta-chip{color:#555}
  html[data-theme="clean"] .meta-dot{background:#E11D2A;box-shadow:0 0 0 4px rgba(225,29,42,.18)}
  html[data-theme="clean"] @keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(225,29,42,.18)}50%{box-shadow:0 0 0 9px rgba(225,29,42,.03)}}

  /* Ticker */
  html[data-theme="clean"] .ticker{background:#F7F7F7;border-color:rgba(0,0,0,.08)}
  html[data-theme="clean"] .ticker-item{color:#555}
  html[data-theme="clean"] .ticker-item::before{background:#E11D2A}

  /* Stats */
  html[data-theme="clean"] .stats-wall{background:#FAFAFA;border-color:rgba(0,0,0,.08)}
  html[data-theme="clean"] .stat-num{color:#1A1A1A;font-family:var(--fs-sans);font-weight:700}
  html[data-theme="clean"] .stat:nth-child(1) .stat-num .suffix,
  html[data-theme="clean"] .stat:nth-child(2) .stat-num .suffix,
  html[data-theme="clean"] .stat:nth-child(3) .stat-num .suffix{color:#E11D2A}
  html[data-theme="clean"] .stat-bar{background:#EFEFEF}
  html[data-theme="clean"] .stat:nth-child(1) .stat-bar i,
  html[data-theme="clean"] .stat:nth-child(2) .stat-bar i,
  html[data-theme="clean"] .stat:nth-child(3) .stat-bar i{background:#E11D2A}
  html[data-theme="clean"] .stat-label,
  html[data-theme="clean"] .stat-desc{color:#555}

  /* Services accordion */
  html[data-theme="clean"] .svc{background:#fff;border-bottom-color:rgba(0,0,0,.1)}
  html[data-theme="clean"] .svc:first-child{border-top-color:rgba(0,0,0,.1)}
  html[data-theme="clean"] .svc[open]{background:#FAFAFA}
  html[data-theme="clean"] .svc-head:hover{background:rgba(0,0,0,.025)}
  html[data-theme="clean"] .svc-head-text h3{color:#1A1A1A}
  html[data-theme="clean"] .svc-head-text .svc-tagline{color:#555}
  html[data-theme="clean"] .svc-head .svc-icon{background:#fff;border-color:rgba(0,0,0,.18);color:#1A1A1A}
  html[data-theme="clean"] .svc-head .svc-icon svg{color:#1A1A1A !important}
  html[data-theme="clean"] .svc[open] .svc-head .svc-icon{background:#E11D2A;border-color:#E11D2A;color:#fff}
  html[data-theme="clean"] .svc[open] .svc-head .svc-icon svg{color:#fff !important}
  html[data-theme="clean"] .svc-chev{border-color:rgba(0,0,0,.18);color:#1A1A1A}
  html[data-theme="clean"] .svc[open] .svc-chev{background:#E11D2A;border-color:#E11D2A;color:#fff}
  html[data-theme="clean"] .svc-anchor{color:#1A1A1A}
  html[data-theme="clean"] .svc-body-main p{color:#555}
  html[data-theme="clean"] .svc-list li{color:#555}
  html[data-theme="clean"] .svc-list li::before{color:#E11D2A}
  html[data-theme="clean"] .svc-pain{background:#fff;color:#555;border-left-color:#E11D2A}
  html[data-theme="clean"] .svc-tag{background:#fff;color:#555;border-color:rgba(0,0,0,.14)}
  html[data-theme="clean"] .svc-cta{background:#E11D2A;color:#fff;border:0;border-radius:999px;padding:12px 22px}
  html[data-theme="clean"] .svc-cta:hover{background:#B6121C}
  html[data-theme="clean"] .svc-body-inner{border-top-color:rgba(0,0,0,.08)}
  html[data-theme="clean"] .svc-body-foot{border-top-color:rgba(0,0,0,.08)}
  html[data-theme="clean"] .mono-sm{color:#9A9A9A}

  /* Industries (sectors) — image-card style */
  html[data-theme="clean"] .sectors{background:#FFFFFF;border-top:0;padding-top:24px}
  html[data-theme="clean"] .sectors-head{color:#9A9A9A}
  html[data-theme="clean"] .sectors-head .num{color:#E11D2A}
  html[data-theme="clean"] .sectors-label{color:#555}
  html[data-theme="clean"] .sector-code{color:#E11D2A;font-weight:700}
  html[data-theme="clean"] .sector-name{color:#1A1A1A}
  html[data-theme="clean"] .sector-meta{color:#777}

  /* Calculator */
  html[data-theme="clean"] .calc-wrap{border-color:rgba(0,0,0,.1);background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04)}
  html[data-theme="clean"] .calc-form{background:#fff}
  html[data-theme="clean"] .field-label label{color:#1A1A1A}
  html[data-theme="clean"] .input,html[data-theme="clean"] .select,html[data-theme="clean"] .textarea{background:#F7F7F7;border-color:rgba(0,0,0,.12);color:#1A1A1A}
  html[data-theme="clean"] .input:focus,html[data-theme="clean"] .select:focus,html[data-theme="clean"] .textarea:focus{box-shadow:inset 0 0 0 2px #E11D2A;background:#fff}
  html[data-theme="clean"] .ind-opt{background:#F7F7F7;border-color:rgba(0,0,0,.1);color:#1A1A1A}
  html[data-theme="clean"] .ind-opt[aria-pressed="true"]{background:#1A1A1A;color:#fff;border-color:#1A1A1A;box-shadow:inset 0 -3px 0 #E11D2A}
  html[data-theme="clean"] .ind-opt[aria-pressed="true"] .ind-rate{color:#E11D2A}
  html[data-theme="clean"] .calc-result{background:#1A1A1A;background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px)}

  /* About */
  html[data-theme="clean"] .about-text p{color:#555}
  html[data-theme="clean"] .principle{background:#FAFAFA;border-color:rgba(0,0,0,.08)}
  html[data-theme="clean"] .principle h4{color:#1A1A1A}
  html[data-theme="clean"] .principle p{color:#555}
  html[data-theme="clean"] .principle .principle-num{color:#E11D2A}
  html[data-theme="clean"] .creds-card{background:#FAFAFA;border-color:rgba(0,0,0,.08);color:#1A1A1A}
  html[data-theme="clean"] .creds-card h4{color:#555}
  html[data-theme="clean"] .cred-code{color:#E11D2A}
  html[data-theme="clean"] .cred-name{color:#1A1A1A}
  html[data-theme="clean"] .cred-year{color:#9A9A9A}

  /* Contact */
  html[data-theme="clean"] .info-block-val{color:#1A1A1A}
  html[data-theme="clean"] .info-block-val a:hover{color:#E11D2A}
  html[data-theme="clean"] .contact-form{background:#FAFAFA;border-color:rgba(0,0,0,.1)}
  html[data-theme="clean"] .form-success{background:#1A1A1A;border-left-color:#E11D2A}
  html[data-theme="clean"] .form-success-title{color:#E11D2A}

  /* Footer */
  html[data-theme="clean"] footer{background:#1A1A1A}
  html[data-theme="clean"] .foot-col a:hover{color:#E11D2A}
  html[data-theme="clean"] .social:hover{background:#E11D2A;border-color:#E11D2A;color:#fff}

  /* Section eyebrows in clean theme */
  html[data-theme="clean"] .sec-eyebrow{color:#E11D2A}
  html[data-theme="clean"] .sec-eyebrow .num{border-color:#E11D2A;color:#E11D2A}
  html[data-theme="clean"] .lead{color:#555}

  /* Sector details panel */
  .sector-details{
    max-height:0;overflow:hidden;
    transition:max-height .55s cubic-bezier(.2,.7,.2,1);
    border-top:0;
  }
  .sector-card[aria-expanded="true"] .sector-details{
    max-height:900px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .sector-details-inner{padding:28px 40px 36px;display:flex;flex-direction:column;gap:18px}
  @media(max-width:560px){.sector-details-inner{padding:24px 24px 28px}}
  .sector-details h4{font-size:17px;margin:0 0 4px;color:var(--white);font-weight:700;letter-spacing:-.01em}
  .sector-details .sd-eyebrow{
    font-family:var(--fs-mono);font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:8px;
  }
  .sector-details p{color:rgba(255,255,255,.68);font-size:14px;line-height:1.6;margin:0}
  .sd-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
  .sd-list li{
    position:relative;padding-left:18px;
    font-size:13.5px;color:rgba(255,255,255,.65);line-height:1.5;
  }
  .sd-list li::before{
    content:"→";position:absolute;left:0;
    color:var(--amber);font-family:var(--fs-mono);font-weight:600;
  }
  .sd-foot{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:18px;border-top:1px solid rgba(255,255,255,.12);
    gap:10px;flex-wrap:wrap;margin-top:4px;
  }
  .sd-foot .mono-sm{color:rgba(255,255,255,.4);font-size:10px}
  .sd-foot .btn{padding:11px 18px;font-size:12px}
  /* Theme overrides — electric */
  html[data-theme="electric"] .sectors-grid{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12)}
  html[data-theme="electric"] .sector-card{background:rgba(255,255,255,.04)}
  html[data-theme="electric"] .sector-card.card-in:hover{background:rgba(255,255,255,.08)}
  html[data-theme="electric"] .sector-card[aria-expanded="true"]{background:rgba(255,255,255,.14)}
  html[data-theme="electric"] .sector-card[aria-expanded="true"] .sector-arrow{background:#FFD34D;border-color:#FFD34D;color:#0E1A2B}
  html[data-theme="electric"] .sector-arrow{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.6)}
  html[data-theme="electric"] .sector-details h4{color:#fff}
  html[data-theme="electric"] .sector-card[aria-expanded="true"] .sector-details{border-top-color:rgba(255,255,255,.1)}
  html[data-theme="electric"] .sd-foot{border-top-color:rgba(255,255,255,.12)}
  html[data-theme="electric"] .sd-foot .mono-sm{color:rgba(255,255,255,.4)}
  /* Theme overrides — clean */
  html[data-theme="clean"] .sectors{background:#F7F7F7}
  html[data-theme="clean"] .sectors-heading{color:#1A1A1A}
  html[data-theme="clean"] .sectors-eyebrow{color:#E11D2A}
  html[data-theme="clean"] .sectors-desc{color:#555}
  html[data-theme="clean"] .sectors-title-row{border-bottom-color:rgba(0,0,0,.1)}
  html[data-theme="clean"] .sectors-grid{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.08)}
  html[data-theme="clean"] .sector-card{background:#fff}
  html[data-theme="clean"] .sector-code{color:#E11D2A}
  /* Hover + expanded: dark card so the frosted reveal sits on a dark base, not light gray */
  html[data-theme="clean"] .sector-card.card-in:hover,
  html[data-theme="clean"] .sector-card[aria-expanded="true"],
  html[data-theme="clean"] .sector-card.card-in[aria-expanded="true"]:hover{
    background:#1A1A1A;box-shadow:0 28px 56px -24px rgba(0,0,0,.28);
  }
  html[data-theme="clean"] .sector-card[aria-expanded="true"] .sector-arrow{background:#E11D2A;border-color:#E11D2A;color:#fff}
  html[data-theme="clean"] .sd-list li::before{color:#E11D2A}
  .tw-panel{
    position:fixed;right:20px;bottom:20px;z-index:9999;
    width:260px;background:#0E1A2B;color:#fff;
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
    font-family:var(--fs-sans);font-size:13px;
    display:none;
  }
  .tw-panel.open{display:block}
  .tw-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
  .tw-title{font-family:var(--fs-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#FFD34D}
  .tw-close{background:none;color:#fff;width:24px;height:24px;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;cursor:pointer;font-size:14px;line-height:1}
  .tw-body{padding:16px}
  .tw-label{font-family:var(--fs-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:8px}
  .tw-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:rgba(255,255,255,.06);padding:4px;border:1px solid rgba(255,255,255,.14)}
  .tw-seg button{padding:10px 8px;font-size:12px;color:rgba(255,255,255,.7);background:transparent;border:0;cursor:pointer;font-weight:500;letter-spacing:.02em}
  .tw-seg button[aria-pressed="true"]{background:#fff;color:#0E1A2B;font-weight:600}
  .tw-hint{font-family:var(--fs-mono);font-size:10px;color:rgba(255,255,255,.4);margin-top:10px;letter-spacing:.06em;line-height:1.5}

  /* Floating Tweaks trigger (always visible) */
  .tw-trigger{
    position:fixed;right:20px;bottom:20px;z-index:9998;
    display:flex;align-items:center;gap:8px;
    padding:12px 16px;background:var(--ink);color:#fff;
    border:1px solid var(--ink);border-radius:999px;
    font-family:var(--fs-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
    box-shadow:0 8px 24px -8px rgba(14,26,43,.4);
    cursor:pointer;transition:transform .2s ease, background .2s ease;
  }
  .tw-trigger:hover{transform:translateY(-2px);background:var(--amber);color:var(--ink);border-color:var(--amber)}
  .tw-trigger svg{width:14px;height:14px}
  .tw-trigger.hidden{display:none}
  .tw-colors{display:flex;flex-direction:column;gap:8px}
  .tw-color{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);font-size:12px;color:rgba(255,255,255,.85);cursor:pointer}
  .tw-color input[type="color"]{width:32px;height:24px;border:1px solid rgba(255,255,255,.3);background:transparent;padding:0;cursor:pointer}
  .tw-reset{margin-top:4px;padding:8px;font-size:11px;font-family:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;background:transparent;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.2);cursor:pointer}
  .tw-reset:hover{color:#fff;border-color:#fff}

  /* ===== Signup / AVEX Brief (extracted from inline) ===== */
.signup{background:var(--ink);color:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  html[data-theme="electric"] .signup{background:#0A3580}
  html[data-theme="clean"] .signup{background:#1A1A1A}
  .signup-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  @media (max-width:900px){.signup-grid{grid-template-columns:1fr;gap:40px}}
  .signup-eyebrow{font-family:var(--fs-mono);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:#FF6477;font-weight:700;margin-bottom:18px}
  /* html-prefixed so it beats html[data-theme] h2 theme rules (else white -> dark on the dark band = invisible) */
  html .signup h2{font-size:clamp(32px,4.2vw,48px);line-height:1.05;letter-spacing:-.02em;font-weight:800;color:#fff;margin:0 0 18px}
  .signup-lead{font-size:18px;line-height:1.65;color:rgba(255,255,255,.9);max-width:46ch;margin:0 0 28px}
  .signup-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
  .signup-list li{position:relative;padding-left:30px;font-size:16.5px;line-height:1.5;color:rgba(255,255,255,.92)}
  .signup-list li::before{content:"↓";position:absolute;left:0;top:0;color:#FF6477;font-weight:800;font-size:17px}
  .signup-list li strong{color:#fff;font-weight:700}
  .signup-card{background:#fff;border-radius:6px;padding:34px 32px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
  .signup-card h3{font-size:21px;color:var(--ink);font-weight:800;margin:0 0 6px;letter-spacing:-.01em}
  .signup-card .sc-sub{font-size:13.5px;color:#555;margin:0 0 22px;line-height:1.5}
  .sf-field{margin-bottom:16px}
  .sf-field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px;letter-spacing:.01em}
  .sf-field input{width:100%;padding:12px 14px;border:1px solid #d8d3c7;border-radius:4px;font-size:14.5px;font-family:var(--fs-sans);color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
  .sf-field input:focus{outline:none;border-color:#E11D2A;box-shadow:0 0 0 3px rgba(225,29,42,.12)}
  .sf-interests{margin:18px 0 22px}
  .sf-interests .sf-legend{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:10px;letter-spacing:.01em}
  .sf-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
  @media (max-width:520px){.sf-checks{grid-template-columns:1fr}}
  .sf-check{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#444;line-height:1.35;cursor:pointer}
  .sf-check input{width:15px;height:15px;margin-top:1px;accent-color:#E11D2A;flex-shrink:0}
  .signup-submit{width:100%;background:#E11D2A;color:#fff;border:0;border-radius:999px;padding:14px 24px;font-size:14.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:background .2s,transform .15s}
  .signup-submit:hover{background:#B6121C}
  .signup-submit:active{transform:translateY(1px)}
  .signup-submit svg{width:16px;height:16px}
  .signup-fineprint{font-size:11.5px;color:#888;margin:14px 0 0;line-height:1.5;text-align:center}
  .signup-success{display:none;background:#0F4FBE;color:#fff;border-radius:6px;padding:30px 28px;text-align:center}
  .signup-success.show{display:block}
  .signup-success h3{color:#fff;font-size:20px;margin:0 0 8px}
  .signup-success p{color:rgba(255,255,255,.85);font-size:14.5px;margin:0;line-height:1.55}

  /* ===== Cookie / consent notice (injected by site.js) ===== */
  .cookie-consent{
    position:fixed;left:18px;right:18px;bottom:18px;z-index:80;
    max-width:760px;margin:0 auto;
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
    background:var(--ink);color:#fff;
    border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);
    padding:16px 20px;
    box-shadow:0 24px 60px -24px rgba(14,26,43,.65);
    opacity:0;transform:translateY(16px);
    transition:opacity .3s ease,transform .3s ease;
  }
  .cookie-consent.show{opacity:1;transform:translateY(0)}
  .cookie-consent-text{flex:1 1 320px;margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.88)}
  .cookie-consent-text a{color:#FF6477;font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .cookie-consent-text a:hover{color:#fff}
  .cookie-consent-btn{
    flex:0 0 auto;background:var(--red);color:#fff;border:0;border-radius:999px;
    padding:11px 24px;font-size:14px;font-weight:700;cursor:pointer;
    transition:background .2s,transform .15s;
  }
  .cookie-consent-btn:hover{background:var(--red-2)}
  .cookie-consent-btn:active{transform:translateY(1px)}
  @media (prefers-reduced-motion: reduce){
    .cookie-consent{transition:none;opacity:1;transform:none}
  }
  @media (max-width:560px){
    .cookie-consent{left:12px;right:12px;bottom:12px;padding:14px 16px;gap:12px}
    .cookie-consent-btn{width:100%}
  }