/* ==========================================================================
   Current Energy — site.css
   Design system for currentenergy.net
   Built by 310Web. Palette lives in :root — change it in one place.
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------ */
:root{
  /* Brand */
  --ink:#0A1020;
  --ink-2:#111B33;
  --ink-3:#1B2A4A;
  --brand:#1B5CFF;
  --brand-600:#1148D6;
  --brand-100:#E7EEFF;
  --volt:#FFB020;         /* solar accent */
  --volt-100:#FFF3DF;
  --good:#0FA97B;         /* savings / positive */
  --good-100:#E1F7F0;

  /* Neutrals */
  --paper:#FFFFFF;
  --paper-2:#F6F8FC;
  --paper-3:#EDF1F8;
  --line:#DCE3EF;
  --line-soft:#E8EDF6;
  --text:#111827;
  --text-2:#4A5568;
  --text-3:#6B7688;
  --on-dark:#EEF3FF;
  --on-dark-2:#A9B7D4;

  /* Type */
  --font-display:"Poppins","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Space & shape */
  --wrap:1200px;
  --wrap-narrow:820px;
  --r-sm:8px;
  --r:14px;
  --r-lg:22px;
  --r-xl:30px;
  --shadow-sm:0 1px 2px rgba(10,16,32,.06),0 1px 3px rgba(10,16,32,.05);
  --shadow:0 4px 12px rgba(10,16,32,.07),0 12px 32px rgba(10,16,32,.06);
  --shadow-lg:0 18px 48px rgba(10,16,32,.14),0 4px 12px rgba(10,16,32,.06);
  --header-h:74px;
}

/* ---------- Reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  background:var(--paper);
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--brand-600);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit}
figure{margin:0}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.15rem,1.35rem + 3.4vw,3.85rem);letter-spacing:-.032em}
h2{font-size:clamp(1.7rem,1.2rem + 2.1vw,2.7rem);letter-spacing:-.028em}
h3{font-size:clamp(1.15rem,1.02rem + .55vw,1.4rem);letter-spacing:-.018em}
h4{font-size:1.02rem;letter-spacing:-.01em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.05em;padding-left:1.2em}
li{margin:.3em 0}
strong{font-weight:650;color:var(--ink)}
small{font-size:.86rem}

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

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:0 0 var(--r-sm) var(--r-sm);transition:top .18s;
}
.skip:focus{top:0}

/* ---------- Layout ------------------------------------------------------ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.wrap-narrow{max-width:var(--wrap-narrow)}
section{position:relative}
/* Was clamp(56px,5.2vw,96px): ~150px of padding top and bottom, so every
   section boundary opened a ~300px hole. Across 13 sections that was most of
   the page's height and read as emptiness rather than breathing room. */
.sec{padding:clamp(40px,3.4vw,62px) 0}
.sec-tight{padding:clamp(28px,2.2vw,40px) 0}
.sec-line{border-top:1px solid var(--line-soft)}
.bg-soft{background:var(--paper-2)}
.bg-tint{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)}
.bg-dark{background:var(--ink);color:var(--on-dark)}
.bg-dark h2,.bg-dark h3,.bg-dark h4{color:#fff}
.bg-dark p,.bg-dark li{color:var(--on-dark-2)}
.bg-dark strong{color:#fff}
.bg-dark a{color:#fff;text-decoration:underline;text-underline-offset:3px}

.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Grid/flex children default to min-width:auto, which lets a wide table push the
   whole page sideways. Every grid container here gets explicit min-width:0 children. */
.grid > *,
.with-aside > *,
.split > *,
.hero-inner > *,
.cta-inner > *,
.steps > *,
.stats > *,
.aside-stick > *{min-width:0}

.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center}
.split-top{align-items:start}

.center{text-align:center}
.measure{max-width:66ch}
.center .measure{margin-inline:auto}

/* ---------- Bits -------------------------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:.76rem;font-weight:650;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand-600);
  margin:0 0 14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--brand);border-radius:2px}
.bg-dark .eyebrow{color:var(--volt)}
.bg-dark .eyebrow::before{background:var(--volt)}

.lead{font-size:clamp(1.05rem,1rem + .35vw,1.22rem);color:var(--text-2);line-height:1.6}
.bg-dark .lead{color:var(--on-dark-2)}

.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:999px;
  font-size:.8rem;font-weight:600;line-height:1.4;
  background:var(--brand-100);color:var(--brand-600);
  border:1px solid rgba(27,92,255,.16);
}
.pill-volt{background:var(--volt-100);color:#8A5A00;border-color:rgba(255,176,32,.3)}
.pill-good{background:var(--good-100);color:#076B50;border-color:rgba(15,169,123,.24)}
.pill-dark{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.16)}

.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.dot-live{background:#31E39B;box-shadow:0 0 0 0 rgba(49,227,155,.6);animation:pulse 2.4s infinite}
@keyframes pulse{
  70%{box-shadow:0 0 0 9px rgba(49,227,155,0)}
  100%{box-shadow:0 0 0 0 rgba(49,227,155,0)}
}

/* ---------- Buttons ----------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:12px;border:1.5px solid transparent;
  font-family:var(--font-display);font-size:.98rem;font-weight:650;letter-spacing:-.01em;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}

.btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 18px rgba(27,92,255,.28)}
.btn-primary:hover{background:var(--brand-600);box-shadow:0 10px 26px rgba(27,92,255,.34)}

.btn-volt{background:var(--volt);color:#3A2600;box-shadow:0 6px 18px rgba(255,176,32,.32)}
.btn-volt:hover{background:#FFA000}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-3);background:var(--paper-2)}

.btn-on-dark{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.22)}
/* Same hover signature as the home page chooser: brand fill, brand border and
   a blue glow ring. The old 7%-to-14% white wash was almost invisible against
   the dark hero, which is the same complaint the chooser had. */
.btn-on-dark:hover,
.btn-on-dark:focus-visible{
  background:rgba(27,92,255,.34);
  border-color:var(--brand);
  color:#fff;
  box-shadow:0 0 0 1px rgba(27,92,255,.55), 0 12px 28px -12px rgba(27,92,255,.85);
  text-decoration:none;
  transform:translateY(-2px);
}
.btn-on-dark:focus-visible{outline:2px solid #fff;outline-offset:2px}
.btn-on-dark svg{transition:color .15s ease}
.btn-on-dark:hover svg,
.btn-on-dark:focus-visible svg{color:#fff}

.btn-lg{padding:16px 30px;font-size:1.05rem;border-radius:14px}
.btn-sm{padding:10px 17px;font-size:.9rem;border-radius:10px}
.btn-row{display:flex;flex-wrap:wrap;gap:13px;align-items:center}
.center .btn-row{justify-content:center}

/* ---------- Header ------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.hdr{display:flex;align-items:center;gap:18px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:11px;flex:none;text-decoration:none}
.brand:hover{text-decoration:none}
.brand svg{width:30px;height:30px;color:var(--ink)}
.brand-name{
  font-family:var(--font-display);font-weight:750;font-size:1.13rem;
  letter-spacing:-.035em;color:var(--ink);line-height:1.2;
}
.brand-name span{display:block;font-size:.6rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);line-height:1.2;margin-top:.3em}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav > li{list-style:none;margin:0;position:relative}
.nav a,.nav .navbtn{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 12px;border-radius:9px;
  font-size:.94rem;font-weight:550;color:var(--text);text-decoration:none;white-space:nowrap;
  background:none;border:0;cursor:pointer;font-family:var(--font-body);
}
.nav a:hover,.nav .navbtn:hover{background:var(--paper-3);color:var(--ink);text-decoration:none}
.nav a[aria-current="page"]{color:var(--brand-600);background:var(--brand-100)}
.nav .caret{width:11px;height:11px;transition:transform .18s}
.nav li:hover .caret,.nav li:focus-within .caret{transform:rotate(180deg)}

.mega{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);
  width:min(720px,92vw);padding:16px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  /* minmax(0,1fr), not 1fr: grid items default to min-width:auto, so plain 1fr
     columns refuse to shrink below their longest text and the labels overflow
     the white panel instead of wrapping. */
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
  opacity:0;visibility:hidden;pointer-events:none;
  /* Closing is delayed so a pointer that clips a corner on the way down does
     not slam the panel shut; opening stays instant (delay reset on hover). */
  transition:.18s ease;transition-delay:.18s;
}
/* The 8px gap between the trigger and the panel is a dead zone: crossing it
   means nothing is hovered, so :hover drops and the menu vanishes before it
   can be reached. This invisible bridge spans the gap, keeping the pointer
   inside the hover target the whole way down. */
.mega::before{
  content:"";position:absolute;left:0;right:0;top:-12px;height:12px;
}
.nav li:hover .mega,.nav li:focus-within .mega{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);transition-delay:0s;
}
.mega a{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;align-items:start;
  padding:11px;border-radius:11px;
  transition:background .16s ease,transform .16s ease;
}
/* The hover was a barely-visible grey wash. Tint the row, fill the icon chip
   with the brand colour and colour the label, so the target is unmistakable. */
.mega a:hover{background:var(--ink-2);transform:translateX(2px)}
.mega a:hover .mi{background:rgba(255,255,255,.14);color:#fff}
.mega a:hover b{color:#fff}
.mega a:hover em{color:var(--on-dark-2)}
.mega a:focus-visible{background:var(--ink-2);outline:2px solid var(--brand);outline-offset:2px}
.mega a:focus-visible b{color:#fff}
.mega a:focus-visible em{color:var(--on-dark-2)}
.mega em{transition:color .16s ease}
.mega .mi{transition:background .16s ease,color .16s ease}
.mega b{transition:color .16s ease}
.mega .mi{
  width:34px;height:34px;border-radius:9px;background:var(--brand-100);
  display:grid;place-items:center;color:var(--brand-600);
}
.mega .mi svg{width:18px;height:18px}
.mega b{display:block;font-family:var(--font-display);font-size:.92rem;font-weight:650;color:var(--ink);letter-spacing:-.01em}
.mega em{display:block;font-style:normal;font-size:.8rem;color:var(--text-3);line-height:1.4;margin-top:2px}
/* The nav link rule sets white-space:nowrap to keep top-level items on one
   line; .mega a inherits it, so these labels could never wrap and spilled out
   of the panel. Reset it here — the megamenu is a block layout, not a nav row. */
.mega a,.mega b,.mega em{white-space:normal;min-width:0;overflow-wrap:break-word}

.hdr-cta{display:flex;align-items:center;gap:10px;flex:none}
.tel-btn{
  display:inline-flex;align-items:center;gap:9px;padding:9px 15px;
  border:1.5px solid var(--line);border-radius:11px;text-decoration:none;color:var(--ink);
  font-family:var(--font-display);font-weight:650;font-size:.95rem;letter-spacing:-.01em;
  transition:border-color .15s,background .15s;
}
.tel-btn:hover{border-color:var(--brand);background:var(--brand-100);text-decoration:none}
.tel-btn svg{width:17px;height:17px;color:var(--brand-600)}
.tel-btn small{display:block;font-family:var(--font-body);font-size:.65rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);line-height:1}
.tel-btn b{display:block;font-size:.97rem;line-height:1.15}

.burger{
  display:none;width:44px;height:44px;border:1.5px solid var(--line);border-radius:11px;
  background:#fff;cursor:pointer;place-items:center;color:var(--ink);
}
.burger svg{width:20px;height:20px}

/* Mobile drawer */
.drawer{
  position:fixed;inset:var(--header-h) 0 0;z-index:99;
  background:#fff;overflow-y:auto;padding:22px 22px 40px;
  transform:translateY(-8px);opacity:0;visibility:hidden;transition:.2s ease;
}
.drawer[data-open="true"]{transform:none;opacity:1;visibility:visible}
.drawer h4{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);
  margin:22px 0 8px;font-weight:650}
.drawer h4:first-child{margin-top:0}
.drawer ul{list-style:none;padding:0;margin:0}
.drawer li{margin:0}
.drawer li a{
  display:block;padding:12px 4px;border-bottom:1px solid var(--line-soft);
  color:var(--ink);font-weight:550;font-size:1.02rem;text-decoration:none;
}
.drawer .btn{width:100%;margin-top:8px}

/* ---------- Alert band -------------------------------------------------- */
.band{
  background:linear-gradient(90deg,#0A1020,#16264A 55%,#0A1020);
  color:#fff;font-size:.9rem;
}
.band .wrap{display:flex;align-items:center;justify-content:center;gap:12px;
  padding-block:11px;flex-wrap:wrap;text-align:center}
.band b{color:var(--volt);font-weight:650}
.band a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:600;white-space:nowrap}

/* ---------- Hero -------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 460px at 78% 8%,rgba(27,92,255,.30),transparent 62%),
    radial-gradient(700px 420px at 12% 96%,rgba(255,176,32,.14),transparent 60%),
    linear-gradient(165deg,#070C18 0%,#0D1730 46%,#101E3D 100%);
  color:var(--on-dark);
  padding:clamp(56px,6vw,104px) 0 clamp(48px,5vw,88px);
  isolation:isolate;
}
/* Homepage hero photo. Scoped with :not(.hero-page) so interior heroes stay
   plain by default — otherwise every page would show the same rooftop shot.
   The opaque gradient is listed last as a fallback: if hero-home.jpg is ever
   missing the hero renders exactly as it did before rather than breaking.
   Interior pages opt in via .hero-page.hero-has-image + --hero-img. */
.hero:not(.hero-page){
  background:
    radial-gradient(900px 460px at 78% 8%,rgba(27,92,255,.30),transparent 62%),
    radial-gradient(700px 420px at 12% 96%,rgba(255,176,32,.14),transparent 60%),
    linear-gradient(100deg,rgba(7,12,24,.93) 0%,rgba(9,16,33,.86) 38%,rgba(16,30,61,.70) 100%),
    url("/assets/img/hero-home.jpg") center/cover no-repeat,
    linear-gradient(165deg,#070C18 0%,#0D1730 46%,#101E3D 100%);
}
/* Interior hero photos. Same overlay stack as the homepage so factcard /
   lead text stay readable. Set --hero-img:url('/assets/img/…') inline. */
.hero-page.hero-has-image{
  background:
    radial-gradient(900px 460px at 78% 8%,rgba(27,92,255,.30),transparent 62%),
    radial-gradient(700px 420px at 12% 96%,rgba(255,176,32,.14),transparent 60%),
    linear-gradient(100deg,rgba(7,12,24,.93) 0%,rgba(9,16,33,.86) 38%,rgba(16,30,61,.70) 100%),
    var(--hero-img) center/cover no-repeat,
    linear-gradient(165deg,#070C18 0%,#0D1730 46%,#101E3D 100%);
}

.hero-grid{
  position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);
}
.hero h1{color:#fff}
.hero .lead{color:#C4D2EE;max-width:60ch}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(30px,4vw,60px);align-items:center}
.hero-badges{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px}

.hero-proof{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.12);
}
/* Homepage hero: breathing room under CTAs + single review chip */
.hero > .wrap.hero-inner > div:first-child > .btn-row{
  margin-top:22px;
  margin-bottom:4px;
}
.hero > .wrap.hero-inner > div:first-child > .g-review-badge{
  margin-top:22px;
  display:inline-flex;
}
.hero-proof div{display:flex;align-items:center;gap:9px;font-size:.88rem;color:#C4D2EE}
.hero-proof svg{width:17px;height:17px;color:#31E39B;flex:none}

/* Hero card: the "what do you own" chooser */
.chooser{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-xl);
  padding:22px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 24px 60px rgba(0,0,0,.34);
}
.chooser h2{font-size:1.14rem;color:#fff;margin-bottom:4px}
.chooser > p{font-size:.88rem;color:#A9B7D4;margin-bottom:16px}
.chooser-list{display:grid;gap:9px}
.chooser-list a{
  display:grid;grid-template-columns:40px 1fr 18px;gap:13px;align-items:center;
  padding:14px;border-radius:15px;text-decoration:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  transition:.16s ease;
}
/* The resting state is a 5% white wash on a dark photo, so a hover that only
   went to 11% was almost invisible — these are the primary routes into the site
   and they need to read as buttons. Brand fill, brand border, a lit icon chip
   and a moving arrow. */
.chooser-list a:hover,
.chooser-list a:focus-visible{
  background:rgba(27,92,255,.34);
  border-color:var(--brand);
  box-shadow:0 0 0 1px rgba(27,92,255,.55), 0 12px 28px -12px rgba(27,92,255,.85);
  text-decoration:none;transform:translateX(4px);
}
.chooser-list a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.chooser-list a:hover .ci,
.chooser-list a:focus-visible .ci{background:var(--brand);color:#fff}
.chooser-list a:hover em,
.chooser-list a:focus-visible em{color:#DCE6FF}
.chooser-list a:hover .arw,
.chooser-list a:focus-visible .arw{color:#fff;transform:translateX(3px)}
.chooser-list .ci{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:rgba(27,92,255,.24);color:#8FB4FF;transition:background .16s ease,color .16s ease}
.chooser-list .ci svg{width:20px;height:20px}
.chooser-list b{display:block;font-family:var(--font-display);font-size:.98rem;color:#fff;font-weight:650;letter-spacing:-.01em}
.chooser-list em{display:block;font-style:normal;font-size:.81rem;color:#A9B7D4;line-height:1.45;margin-top:1px}
.chooser-list .arw{width:18px;height:18px;color:#7F92BC;transition:color .16s ease,transform .16s ease}

/* ---------- Answer box (AEO) ------------------------------------------- */
.answer{
  border:1px solid var(--line);border-left:4px solid var(--brand);
  background:linear-gradient(180deg,#fff,var(--paper-2));
  border-radius:var(--r);padding:clamp(20px,2.4vw,28px);
  box-shadow:var(--shadow-sm);
}
.answer h2,.answer h3{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-600);font-weight:650;margin-bottom:10px}
.answer p{font-size:clamp(1.02rem,.98rem + .3vw,1.14rem);color:var(--text);line-height:1.6}
.answer p strong{color:var(--ink)}
.answer ul{margin-top:.7em;margin-bottom:0}

/* ---------- Question list ----------------------------------------------- */
/* Editorial alternative to a card grid — see qlist() in lib.py. Rules instead
   of borders, so it does not add another boxed block to the page. */
.qlist{list-style:none;margin:0;padding:0;display:grid;gap:0
  ;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,72px)}
.qlist-1{grid-template-columns:minmax(0,1fr)}
.qitem{margin:0;border-top:1px solid var(--line)}
.qitem:nth-child(-n+2){border-top:0}
.qitem a{
  display:block;padding:clamp(20px,2vw,26px) 0;text-decoration:none;color:inherit;
  transition:opacity .18s;
}
.qitem a:hover{text-decoration:none}
.qitem .q{
  display:block;font-family:var(--font-display);font-weight:650;
  font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.32;color:var(--ink);
  letter-spacing:-.015em;margin-bottom:8px;transition:color .18s;
}
.qitem a:hover .q{color:var(--brand)}
.qitem .a{display:block;color:var(--text-2);font-size:1rem;line-height:1.6;margin-bottom:12px}
.qitem .go{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:650;font-size:.9rem;color:var(--brand);
}
.qitem .go svg{width:15px;height:15px;transition:transform .18s}
.qitem a:hover .go svg{transform:translateX(4px)}
@media (max-width:820px){
  .qlist{grid-template-columns:minmax(0,1fr)}
  .qitem:nth-child(-n+2){border-top:1px solid var(--line)}
  .qitem:first-child{border-top:0}
}

/* Tight index rows: one-line descriptors do not need card-sized padding, and
   the arrow sits with the title so the row scans as a single link. */
.qlist-tight .qitem a{padding:clamp(13px,1.2vw,17px) 0}
.qlist-tight .qitem .q{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:4px;font-size:clamp(1rem,1.25vw,1.1rem);
}
.qlist-tight .qitem .a{font-size:.94rem;margin-bottom:0;color:var(--text-3)}
.qarrow{display:inline-flex;color:var(--brand);opacity:0;transform:translateX(-6px);
  transition:opacity .18s,transform .18s}
.qarrow svg{width:16px;height:16px}
.qlist-tight .qitem a:hover .qarrow{opacity:1;transform:translateX(0)}

/* ---------- Project facts ------------------------------------------------ */
/* [TO CONFIRM] is deliberately visible rather than hidden: a gap the reader can
   see is worth more than a number nobody can stand behind. */
.facts{width:100%;border-collapse:collapse;font-size:.95rem}
.facts td{padding:11px 2px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.facts tr:last-child td{border-bottom:0}
.facts td:first-child{color:var(--text-3);width:42%}
.facts td:last-child{color:var(--ink)}
.facts .pending{
  font-family:var(--font-display);font-size:.82rem;font-weight:650;letter-spacing:.04em;
  color:var(--volt);background:var(--volt-100);padding:2px 9px;border-radius:999px;
  display:inline-block;
}
.eyebrow-sm{
  font-family:var(--font-display);font-size:.78rem;font-weight:650;letter-spacing:.06em;
  color:var(--brand-600);margin-bottom:8px;
}

/* ---------- Cards ------------------------------------------------------- */
/* White cards on white sections separated only by a hairline read as one flat
   mass — with 29 of them on the homepage that is most of the page. A resting
   shadow gives each card an edge; link cards lift and take the brand colour so
   the clickable ones are distinguishable from the static ones. */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,28px);
  box-shadow:var(--shadow-sm);
  transition:border-color .18s,box-shadow .18s,transform .18s;
  display:flex;flex-direction:column;
}
a.card{text-decoration:none;color:inherit}
a.card:hover{text-decoration:none;border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
a.card:hover .ico{background:var(--brand);color:#fff}
.card .ico{transition:background .18s,color .18s}
/* On tinted sections the resting shadow does nothing; a cleaner edge reads better. */
.bg-soft .card,.bg-dark .card{box-shadow:none}
.card h3{margin-bottom:9px;font-size:1.1rem}
.card p{color:var(--text-2);font-size:1rem;line-height:1.62;margin-bottom:0}
.card .ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--brand-100);color:var(--brand-600);margin-bottom:16px;
}
.card .ico svg{width:23px;height:23px}
.card .ico-volt{background:var(--volt-100);color:#9A6400}
.card .ico-good{background:var(--good-100);color:#076B50}
.card ul{margin:14px 0 0;padding-left:0;list-style:none}
.card ul li{display:flex;gap:9px;align-items:flex-start;font-size:.92rem;color:var(--text-2);margin:.42em 0}
.card ul li::before{
  content:"";width:16px;height:16px;flex:none;margin-top:3px;border-radius:50%;
  background:var(--good-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23076B50' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}
.card .more{
  margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-display);font-weight:650;font-size:.9rem;color:var(--brand-600);
}
.card .more svg{width:15px;height:15px;transition:transform .18s}
a.card:hover .more svg{transform:translateX(3px)}

.card-dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.card-dark h3{color:#fff}
.card-dark p,.card-dark ul li{color:var(--on-dark-2)}
a.card-dark:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.09)}

.card-flag{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-100)}

/* ---------- Stats ------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stats div{background:#fff;padding:24px 20px}
.stats b{
  display:block;font-family:var(--font-display);font-weight:750;
  font-size:clamp(1.7rem,1.3rem + 1.7vw,2.5rem);letter-spacing:-.035em;
  color:var(--ink);line-height:1;margin-bottom:7px;font-variant-numeric:tabular-nums;
}
.stats span{display:block;font-size:.88rem;color:var(--text-2);line-height:1.45}
.bg-dark .stats,.stats-dark{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.13)}
.bg-dark .stats div,.stats-dark div{background:#101B33}
.bg-dark .stats b,.stats-dark b{color:var(--volt)}
.bg-dark .stats span,.stats-dark span{color:var(--on-dark-2)}

/* ---------- Steps ------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,2.4vw,36px);counter-reset:s}
/* The step body sat at .9rem under a 40px section heading, which made a whole
   band of the page read as fine print. The numeral carries the brand colour so
   the sequence is legible at a glance instead of being four grey columns. */
.step{position:relative;padding-top:66px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;top:0;left:0;width:52px;height:52px;border-radius:15px;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:750;font-size:1.4rem;
  background:linear-gradient(150deg,var(--brand),var(--brand-600));color:#fff;
  box-shadow:0 8px 20px rgba(27,92,255,.26);
}
.step h3{font-size:1.14rem;margin-bottom:9px}
.step p{font-size:1rem;line-height:1.66;color:var(--text-2)}
.step::after{
  content:"";position:absolute;top:19px;left:48px;right:-24px;height:1.5px;
  background:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 14px);
}
.step:last-child::after{display:none}
.step h3{font-size:1.06rem;margin-bottom:6px}
.step p{font-size:.93rem;color:var(--text-2)}
.bg-dark .step::before{background:var(--volt);color:#2E1D00}
.bg-dark .step::after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 7px,transparent 7px 14px)}

/* ---------- Table ------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  -webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.94rem}
caption{text-align:left;padding:16px 18px 0;color:var(--text-3);font-size:.85rem}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{
  background:var(--paper-2);font-family:var(--font-display);font-weight:650;font-size:.83rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody th{font-weight:650;color:var(--ink)}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- FAQ --------------------------------------------------------- */
.faq{display:grid;gap:11px}
.faq details{
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  transition:border-color .18s,box-shadow .18s;
}
.faq details[open]{border-color:var(--brand);box-shadow:var(--shadow-sm)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 52px 18px 20px;position:relative;
  font-family:var(--font-display);font-weight:650;font-size:1.02rem;letter-spacing:-.015em;
  color:var(--ink);line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:20px;top:50%;width:13px;height:13px;
  margin-top:-6px;transition:transform .2s;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
  color:var(--text-3);
}
.faq details[open] summary::after{transform:rotate(180deg);color:var(--brand)}
.faq .ans{padding:0 20px 20px;color:var(--text-2);font-size:.99rem}
.faq .ans > :last-child{margin-bottom:0}

/* ---------- Quotes ------------------------------------------------------ */
/* Testimonials were 1.03rem inside bordered boxes, i.e. the same card motif as
   everything else, which buried the one bit of third-party proof on the page.
   Set as pull-quotes: no box, display face, real size. */
.quote{
  background:transparent;border:0;border-radius:0;
  padding:0;display:flex;flex-direction:column;
}
.quote .stars{display:flex;gap:3px;margin-bottom:16px;color:var(--volt)}
.quote .stars svg{width:18px;height:18px;fill:currentColor;stroke-width:1}
.quote blockquote{
  margin:0 0 22px;
  font-family:var(--font-display);
  font-size:clamp(1.22rem,2vw,1.58rem);line-height:1.42;
  letter-spacing:-.018em;color:var(--ink);text-wrap:balance;
}
.quote figcaption{margin-top:auto;display:flex;align-items:center;gap:12px;
  border-top:0;padding-top:0}
.quote .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--ink);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.95rem}
.quote cite{font-style:normal;font-family:var(--font-display);font-weight:650;color:var(--ink);
  font-size:.95rem;display:block;line-height:1.3}
.quote figcaption span{display:block;font-size:.84rem;color:var(--text-3)}

/* ---------- Logo wall --------------------------------------------------- */
.logowall{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.logowall span{
  padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;
  font-family:var(--font-display);font-weight:650;font-size:.92rem;letter-spacing:-.01em;
  color:var(--text-2);
}
.bg-dark .logowall span{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#DCE6FA}

/* Logo wall with real marks (homepage Proof section) */
.logowall-logos{align-items:center;gap:12px}
.logowall-logos .logo-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:10px 18px;border:1px solid var(--line);border-radius:16px;
  background:#fff;box-shadow:0 1px 0 rgba(15,23,42,.04);
}
.logowall-logos .logo-pill img{
  display:block;height:28px;width:auto;max-width:132px;object-fit:contain;
  filter:grayscale(1);opacity:.82;transition:filter .16s ease,opacity .16s ease,transform .16s ease;
}
.logowall-logos .logo-pill:hover img{filter:grayscale(0);opacity:1;transform:scale(1.04)}
.logowall-logos .logo-pill-text{
  font-family:var(--font-display);font-weight:650;font-size:.88rem;letter-spacing:-.01em;
  color:var(--text-2);padding:12px 16px;
}

/* ---------- Deadline cards --------------------------------------------- */
.deadline{
  border-radius:var(--r-lg);padding:clamp(20px,2.2vw,28px);
  border:1px solid rgba(255,176,32,.35);
  background:linear-gradient(180deg,#FFFBF3,#FFF6E7);
  display:flex;flex-direction:column;
}
.deadline .when{
  font-family:var(--font-display);font-weight:750;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:#9A6400;margin-bottom:9px;display:flex;align-items:center;gap:8px;
}
.deadline .when svg{width:16px;height:16px}
.deadline h3{margin-bottom:8px}
.deadline p{font-size:.96rem;color:var(--text-2)}
.deadline .note{margin-top:auto;padding-top:14px;font-size:.83rem;color:var(--text-3)}

/* ---------- Callout / CTA band ------------------------------------------ */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:
    radial-gradient(700px 320px at 85% 0%,rgba(27,92,255,.36),transparent 60%),
    linear-gradient(140deg,#0A1020,#142243);
  color:#fff;padding:clamp(30px,4vw,54px);
}
.cta-band h2{color:#fff;margin-bottom:10px}
.cta-band p{color:#B9C8E8;max-width:56ch}
.cta-band .btn-row{margin-top:24px}
.cta-inner{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:30px;align-items:center}
.cta-lines{display:grid;gap:11px}
.cta-lines a{
  /* minmax(0,1fr) rather than 1fr as hardening only -- measured at 375px the
     email already sits 17px inside its tile, so nothing is clipped today. But a
     1fr track cannot shrink below its content's min-content width, and
     info@currentenergy.net is one unbreakable token; a longer address or a
     narrower band would push the tile past .cta-band's overflow:hidden and get
     silently cut, with no page-level overflow to warn you. */
  display:grid;grid-template-columns:42px minmax(0,1fr);gap:13px;align-items:center;
  padding:14px 16px;border-radius:15px;text-decoration:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
/* Same hover as the home page chooser, which these tiles mirror structurally. */
.cta-lines a:hover,
.cta-lines a:focus-visible{
  background:rgba(27,92,255,.34);
  border-color:var(--brand);
  box-shadow:0 0 0 1px rgba(27,92,255,.55), 0 12px 28px -12px rgba(27,92,255,.85);
  text-decoration:none;transform:translateX(4px);
}
.cta-lines a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cta-lines a:hover .ci,
.cta-lines a:focus-visible .ci{background:var(--brand);color:#fff}
.cta-lines a:hover small,
.cta-lines a:focus-visible small{color:#DCE6FF}
.cta-lines .ci{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.12);
  display:grid;place-items:center;color:#fff}
.cta-lines .ci svg{width:19px;height:19px}
.cta-lines small{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#93A6CC}
.cta-lines b{display:block;font-family:var(--font-display);font-size:1.13rem;color:#fff;letter-spacing:-.02em;
  /* Same hardening: let the address break rather than force the tile wider. */
  overflow-wrap:anywhere}
.cta-lines .ci{transition:background .16s ease,color .16s ease}
.cta-lines small{transition:color .16s ease}
@media (max-width:400px){
  .cta-lines b{font-size:1.02rem}
}

/* ---------- Form -------------------------------------------------------- */
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(22px,2.6vw,34px);box-shadow:var(--shadow)}
.field{margin-bottom:15px}
.field label{display:block;font-size:.87rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.field .req{color:#D33}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;
  font:inherit;font-size:.98rem;color:var(--text);background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-100);
}
.field .hint{font-size:.8rem;color:var(--text-3);margin-top:5px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--text-3);margin:16px 0}
.consent input{width:17px;height:17px;flex:none;margin-top:2px}
.consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Says out loud that the box is optional. A carrier reviewing an SMS registration checks that
   consent is not a condition of service, and a visitor deserves to know it just as plainly. */
.consent-note{font-size:.76rem;color:var(--text-3);margin:-8px 0 16px;padding-left:27px;opacity:.85}

/* ---------- Breadcrumbs ------------------------------------------------- */
.crumbs{font-size:.85rem;color:var(--text-3);padding:16px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0}
.crumbs li{display:flex;align-items:center;gap:7px}
.crumbs li+li::before{content:"›";color:var(--line);font-size:1.05rem;line-height:1}
.crumbs a{color:var(--text-3)}
.crumbs a:hover{color:var(--brand-600)}
.crumbs [aria-current]{color:var(--text-2);font-weight:550}

/* ---------- Page head --------------------------------------------------- */
.pagehead{padding:clamp(28px,3.2vw,52px) 0 clamp(24px,2.6vw,40px);
  background:linear-gradient(180deg,var(--paper-2),var(--paper));border-bottom:1px solid var(--line-soft)}
.pagehead h1{margin-bottom:14px}
.pagehead .lead{max-width:62ch}
.pagehead .btn-row{margin-top:24px}

/* ---------- Prose ------------------------------------------------------- */
.prose h2{margin-top:1.7em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.5em;font-size:1.16rem}
.prose > p,.prose > ul,.prose > ol{color:var(--text-2)}
.prose li{margin:.45em 0}
.prose .tablewrap,.prose .answer,.prose .faq{margin:1.6em 0}
.prose blockquote{
  margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--brand);
  font-size:1.06rem;color:var(--text);
}

/* ---------- TOC --------------------------------------------------------- */
.toc{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px}
.toc h2{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
  margin-bottom:11px}
.toc ol,.toc ul{margin:0;padding-left:1.1em}
.toc li{margin:.35em 0;font-size:.94rem}

/* ---------- Sidebar layout --------------------------------------------- */
.with-aside{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,3.6vw,56px);align-items:start}
.aside-stick{position:sticky;top:calc(var(--header-h) + 20px);display:grid;gap:18px}
.aside-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.aside-card h3{font-size:1.02rem;margin-bottom:10px}
.aside-card p{font-size:.9rem;color:var(--text-2)}
.aside-card .btn{width:100%;margin-top:6px}
.aside-card ul{list-style:none;padding:0;margin:10px 0 0}
.aside-card ul li{margin:0}
.aside-card ul li a{display:block;padding:8px 0;border-bottom:1px solid var(--line-soft);
  font-size:.93rem;color:var(--text)}
.aside-card ul li:last-child a{border-bottom:0}

/* ---------- Footer ------------------------------------------------------ */
.site-footer{background:var(--ink);color:var(--on-dark-2);padding:clamp(46px,4.4vw,72px) 0 0;font-size:.94rem}
.site-footer a{color:var(--on-dark-2);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.foot-top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px;padding-bottom:38px}
.foot-brand svg{width:34px;height:34px;margin-bottom:14px;color:#fff}
.foot-brand .brand-name{color:#fff}
.foot-brand .brand-name span{color:#7F92BC}
.foot-brand p{color:var(--on-dark-2);font-size:.92rem;max-width:34ch;margin-top:12px}
.site-footer h3{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:.5em 0}
.foot-nap{display:grid;gap:9px;margin-top:16px}
.foot-nap div{display:flex;gap:10px;align-items:flex-start;font-size:.9rem}
.foot-nap svg{width:16px;height:16px;color:#7F92BC;flex:none;margin-top:3px}
.foot-social{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.foot-social a{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#C4D2EE}
.foot-social a:hover{background:rgba(255,255,255,.15);color:#fff}
.foot-social svg{width:17px;height:17px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;
  flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;font-size:.85rem}
.foot-bottom p{margin:0;color:#7F92BC}
.foot-legal{display:flex;flex-wrap:wrap;gap:16px}

/* ---------- Sticky mobile call bar -------------------------------------- */
.callbar{display:none}

/* ---------- Utilities --------------------------------------------------- */
.mt-0{margin-top:0}.mt-1{margin-top:12px}.mt-2{margin-top:18px}.mt-3{margin-top:26px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:18px}.mb-3{margin-bottom:26px}
.hide{display:none}
.nowrap{white-space:nowrap}
.updated{font-size:.83rem;color:var(--text-3);display:flex;align-items:center;gap:8px}
.updated svg{width:15px;height:15px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width:1100px){
  .grid.svc{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .grid.svc .card{padding:20px}
  .grid.svc .card h3{font-size:1.02rem}
  .grid.svc .card p{font-size:.88rem}
}

@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step:nth-child(2)::after{display:none}
  .with-aside{grid-template-columns:1fr}
  .aside-stick{position:static;grid-template-columns:repeat(2,minmax(0,1fr));display:grid}
  .foot-top{grid-template-columns:1fr 1fr;gap:30px}
}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:30px}
  .cta-inner{grid-template-columns:1fr}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:820px){
  /* Nav collapses — the PHONE STAYS. See 310Web standard §6.
     The lead-magnet button is what loses header space, not the phone number;
     it is repeated in the hero and in the sticky call bar. */
  .nav{display:none}
  .burger{display:grid}
  .hdr{gap:10px}
  .hdr-cta{margin-left:auto;gap:8px}
  .tel-btn small{display:none}
  .tel-btn{padding:9px 13px}
  .hdr-cta .btn-primary{display:none}
}

@media (max-width:480px){
  /* Icon-only tap-to-call: still visible, still tel: linked, and the sticky
     call bar below carries the full "Call now" target. */
  .tel-btn{width:44px;height:44px;padding:0;justify-content:center}
  .tel-btn span{display:none}
  .tel-btn svg{width:20px;height:20px}
  .brand svg{width:30px;height:30px}
}

@media (max-width:680px){
  body{font-size:16px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:1fr;gap:18px}
  .step{padding-top:0;padding-left:52px}
  .step::after{display:none}
  .aside-stick{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr;gap:28px}
  .field-row{grid-template-columns:1fr}
  .band .wrap{font-size:.83rem;gap:7px}
  /* keep tap targets to two in the first screen */
  .hero .btn-row .btn-ghost,
  .hero .btn-row .btn-ghost:hover{
    background:none;border:0;padding:12px 4px;text-decoration:underline;
    text-underline-offset:4px;color:#C4D2EE;box-shadow:none;transform:none;
  }
  /* Long CTA labels must wrap rather than push the page sideways */
  .btn{white-space:normal;text-align:center;max-width:100%;line-height:1.3}
  .btn-lg{padding:15px 20px}
  .chooser{padding:18px;border-radius:22px}
  .cta-band{border-radius:22px}
  /* room for the chat launcher */
  .site-footer{padding-bottom:78px}
}

@media (max-width:480px){
  .tel-btn b{font-size:.9rem}
  .brand-name{font-size:1.02rem}
  .brand-name span{font-size:.55rem}
}

/* Sticky call bar on small phones */
@media (max-width:560px){
  .callbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;
    gap:0;background:rgba(255,255,255,.94);
    backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-top:1px solid var(--line);
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  }
  .callbar a{
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 6px;border-radius:11px;font-family:var(--font-display);
    font-weight:650;font-size:.9rem;text-decoration:none;white-space:nowrap;
  }
  .callbar a:first-child{background:var(--brand);color:#fff;margin-right:8px}
  .callbar a:last-child{background:var(--paper-3);color:var(--ink)}
  .callbar svg{width:17px;height:17px}
  .site-footer{padding-bottom:96px}
}

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

@media print{
  .site-header,.band,.callbar,.cta-band,.site-footer,.drawer{display:none!important}
  body{font-size:11pt}
}

/* ==========================================================================
   Interior page hero + rhythm
   Interior pages were a pale band over an unbroken column of prose. They now
   carry the same weight as the homepage: dark hero, a factual right-hand
   card, and alternating ground so long pages breathe.
   ========================================================================== */
.hero-page{padding:clamp(40px,4.4vw,76px) 0 clamp(38px,4vw,68px)}
.hero-page h1{font-size:clamp(1.95rem,1.25rem + 2.7vw,3.1rem)}
.hero-page .lead{color:#C4D2EE;max-width:56ch}
.hero-page .hero-inner{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center}

.factcard{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-xl);
  padding:22px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 24px 60px rgba(0,0,0,.34);
}
.factcard h2{
  font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--volt);margin-bottom:16px;font-weight:650;
}
.factrow{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;
  padding:11px 0;border-top:1px solid rgba(255,255,255,.1)}
.factrow:first-of-type{border-top:0;padding-top:0}
.factrow .fi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(27,92,255,.26);color:#8FB4FF}
.factrow .fi svg{width:17px;height:17px}
.factrow b{display:block;font-family:var(--font-display);font-size:1rem;color:#fff;
  font-weight:650;letter-spacing:-.015em;line-height:1.2}
.factrow em{display:block;font-style:normal;font-size:.8rem;color:#A9B7D4;line-height:1.4;margin-top:1px}
.factcard .btn{width:100%;margin-top:16px}

/* Interior prose rhythm — give long sections shape */
.prose h2{
  margin-top:2em;padding-top:1.4em;border-top:1px solid var(--line-soft);
}
.prose h2:first-child,.prose .answer + h2{border-top:0;padding-top:0}
.prose > h2 + p{font-size:1.06rem;color:var(--text-2)}
.prose blockquote{
  background:linear-gradient(180deg,var(--paper-2),#fff);
  border-left:3px solid var(--volt);border-radius:0 var(--r) var(--r) 0;
  padding:20px 24px;font-family:var(--font-display);font-weight:600;
  letter-spacing:-.015em;line-height:1.45;
}
.prose .tablewrap{box-shadow:var(--shadow-sm)}
.prose .grid{margin:1.5em 0}

@media (max-width:900px){
  .hero-page .hero-inner{grid-template-columns:1fr}
  .factcard{order:2}
}

/* ---------- Image slots ------------------------------------------------- */
/* Slots are aspect-locked so nothing shifts as images load, and each figure
   removes itself if the file is missing — a half-populated gallery still
   reads as designed rather than broken. */
.shot{
  margin:0;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(140deg,var(--paper-3),var(--paper-2));
  border:1px solid var(--line);position:relative;
}
.shot img{
  width:100%;aspect-ratio:var(--ar,16 / 10);object-fit:cover;display:block;
}
.shot figcaption{
  padding:12px 16px;font-size:.85rem;color:var(--text-3);
  background:#fff;border-top:1px solid var(--line-soft);
}
/* Linked project tiles: the photo and its caption are one target, so the whole
   card behaves like the link it is. */
.shot-link a{display:block;text-decoration:none;color:inherit}
.shot-link figcaption{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:var(--brand-600);font-weight:600;
}
/* The arrow sits in a chip that fills with brand on hover, rather than being a
   bare glyph that only slides. Same blue-glow ring as every other hover on the
   site, so the tiles stop looking like a different era of the design. */
.shot-go{
  width:27px;height:27px;border-radius:50%;display:inline-grid;place-items:center;
  background:var(--brand-100);color:var(--brand);flex:none;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.shot-go svg{width:15px;height:15px}
.shot-link:hover .shot-go,.shot-link:focus-within .shot-go{
  background:var(--brand);color:#fff;transform:translateX(3px);
}
.shot-link{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.shot-link:hover,.shot-link:focus-within{
  border-color:var(--brand);transform:translateY(-5px);
  box-shadow:0 0 0 1px rgba(27,92,255,.45), 0 24px 48px -20px rgba(27,92,255,.60),
             0 10px 24px -12px rgba(10,16,32,.28);
}
/* Slower, eased zoom. The old 0.35s linear-ish scale read as a jump. */
.shot-link img{transition:transform .55s cubic-bezier(.22,.7,.3,1)}
.shot-link:hover img,.shot-link:focus-within img{transform:scale(1.06)}
.shot-link figcaption{transition:color .2s ease,background .2s ease}
.shot-link:hover figcaption,.shot-link:focus-within figcaption{
  color:var(--brand-600);background:var(--brand-100);
}
.shot-link a:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-lg)}
.shotband{margin:0}
.shotband:empty{display:none}
.bg-dark .shot{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
.bg-dark .shot figcaption{background:transparent;color:var(--on-dark-2);
  border-top-color:rgba(255,255,255,.12)}
.shot-wide img{aspect-ratio:21 / 9}
.shot-tall img{aspect-ratio:4 / 5}

/* Photo at the head of a card. The card pads its own content, so the image is
   pulled out to the card's edges with negative margins — a photo inset inside
   the padding reads as a thumbnail stuck on, not as part of the card. */
.card-shot{
  margin:calc(clamp(20px,2.2vw,28px) * -1);
  margin-bottom:clamp(16px,1.6vw,20px);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  overflow:hidden;background:var(--paper-3);
}
.card-shot img{
  width:100%;aspect-ratio:16 / 9;object-fit:cover;display:block;
  transition:transform .35s ease;
}
a.card:hover .card-shot img{transform:scale(1.04)}

/* ---------- Blog ---------------------------------------------------------
   Post cards for the index and the "more from the blog" rails. Built on the
   same border/shadow/lift language as .card so the blog does not read as a
   bolted-on section, but laid out as an image-over-text tile.
   ------------------------------------------------------------------------ */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(16px,1.7vw,24px)}

.pcard{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.pcard:hover{text-decoration:none;border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.bg-soft .pcard,.bg-dark .pcard{box-shadow:none}

.pcard-shot{display:block;aspect-ratio:16 / 9;background:var(--paper-3);overflow:hidden}
.pcard-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.pcard:hover .pcard-shot img{transform:scale(1.035)}

.pcard-body{display:flex;flex-direction:column;gap:8px;padding:clamp(16px,1.7vw,22px)}
.pcard-meta{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.pcard b{font-family:var(--font-display);font-size:1.09rem;line-height:1.32;color:var(--ink)}
.pcard em{font-style:normal;color:var(--text-2);font-size:.97rem;line-height:1.6}
.pcard-go{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:6px;
  font-weight:650;font-size:.94rem;color:var(--brand);
}
.pcard-go svg{width:17px;height:17px;transition:transform .18s}
.pcard:hover .pcard-go svg{transform:translateX(4px)}

/* The index leads with one full-width card before the grid. */
.sec > .wrap > .pcard{flex-direction:row;align-items:stretch}
.sec > .wrap > .pcard .pcard-shot{flex:0 0 43%;aspect-ratio:auto}
.sec > .wrap > .pcard .pcard-body{justify-content:center;gap:10px}
.sec > .wrap > .pcard b{font-size:clamp(1.2rem,1.05rem + .6vw,1.6rem)}
.sec > .wrap > .pcard em{font-size:1.03rem}
@media(max-width:720px){
  .sec > .wrap > .pcard{flex-direction:column}
  .sec > .wrap > .pcard .pcard-shot{flex:none;aspect-ratio:16 / 9}
}

/* Dated notice on a post whose subject has moved on since publication. Amber,
   not red — the post is still worth reading, it just is not the current rule. */
.notice{
  border:1px solid #F4D9A6;background:var(--volt-100);
  border-left:4px solid var(--volt);
  border-radius:var(--r);padding:clamp(14px,1.5vw,18px) clamp(16px,1.7vw,20px);
  margin:0 0 1.6em;font-size:.99rem;line-height:1.6;color:var(--text);
}
.notice b{color:var(--ink)}
.notice a{color:var(--brand-600);font-weight:600}

/* ---------- Blog hero ----------------------------------------------------
   The index used the light pagehead, which left the right half of the first
   screen empty. This puts the newest post in that space instead, so the page
   opens on something to read rather than a headline and air.
   ------------------------------------------------------------------------ */
.hero-blog .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:center}
.hero-blog h1{font-size:clamp(1.9rem,1.2rem + 2.5vw,2.85rem)}
.hero-blog .lead{max-width:48ch}

.tchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12)}
.tchip{
  font-size:.8rem;font-weight:600;letter-spacing:.01em;
  color:#C4D2EE;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:6px 12px;
}

/* Featured card sitting inside the dark hero. */
.feat{
  display:flex;flex-direction:column;overflow:hidden;text-decoration:none;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75);
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.feat:hover{text-decoration:none;border-color:rgba(27,92,255,.75);transform:translateY(-4px);
  box-shadow:0 34px 80px -28px rgba(0,0,0,.85),0 0 0 1px rgba(27,92,255,.35)}
.feat-shot{display:block;aspect-ratio:16 / 9;overflow:hidden;background:#0B1220}
.feat-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.feat:hover .feat-shot img{transform:scale(1.04)}

.feat-body{display:flex;flex-direction:column;gap:9px;padding:clamp(18px,1.9vw,24px)}
.feat-tag{
  align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);background:var(--volt);
  border-radius:999px;padding:5px 11px;
}
.feat b{font-family:var(--font-display);font-size:clamp(1.12rem,1rem + .5vw,1.42rem);
  line-height:1.3;color:#fff}
.feat-meta{font-size:.84rem;color:#A9B7D4}
.feat-go{display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  font-weight:650;font-size:.94rem;color:#7FA8FF}
.feat-go svg{width:17px;height:17px;transition:transform .18s}
.feat:hover .feat-go svg{transform:translateX(4px)}

@media (max-width:900px){
  .hero-blog .hero-inner{grid-template-columns:1fr}
  .hero-blog .lead{max-width:none}
}

/* Subject pill on the post cards, so the grid scans by topic. */
.pcard-shot{position:relative}
.pcard-topic{
  position:absolute;left:10px;bottom:10px;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:rgba(10,16,32,.82);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 10px;
}
.tchips-label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-2);align-self:center;margin-right:2px}

/* On a phone the chip row runs to three lines and pushes the featured post off
   the first screen. The per-card topic pills already say the same thing. */
@media (max-width:700px){
  .tchips{display:none}
}

/* ---------- Team portraits ----------------------------------------------
   The partner cards carried no photograph, which on a page whose whole point
   is "every partner is named and checkable" was the missing half of the claim.
   ------------------------------------------------------------------------ */
.person{padding:0;overflow:hidden}
.person-shot{display:block;aspect-ratio:4 / 5;overflow:hidden;background:var(--paper-3)}
.person-shot img{
  width:100%;height:100%;display:block;object-fit:cover;
  /* Heads sit high in these frames; centring the crop clips foreheads. */
  object-position:50% 20%;
  transition:transform .5s ease;
}
.person:hover .person-shot img{transform:scale(1.03)}
.person > h3{margin:clamp(16px,1.7vw,22px) clamp(16px,1.7vw,22px) 0}
.person > p{margin-left:clamp(16px,1.7vw,22px);margin-right:clamp(16px,1.7vw,22px)}
.person > p:last-child{margin-bottom:clamp(16px,1.7vw,22px)}
.person .eyebrow-sm{margin-top:5px;margin-bottom:11px}

/* Single column on a phone means a 4:5 portrait runs nearly 500px tall and the
   three partners become a long scroll. Square keeps the faces without the
   height. */
@media (max-width:680px){
  .person-shot{aspect-ratio:1 / 1}
}

/* ---------- Hero video ---------------------------------------------------
   Sits behind the hero content. hero-home.jpg stays on the section underneath
   as the fallback, so if the video is blocked, still loading, or switched off
   below, the hero looks exactly as it did before.

   Layering is explicit rather than :has() -- if :has() failed the overlay would
   vanish and the copy would sit on raw footage, which is unreadable. Order:
   section background (photo) -> video (-3) -> gradient overlay (-2) -> grid
   lines (-1) -> content. That keeps the grid above the gradient, as it was.
   ------------------------------------------------------------------------ */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-3;pointer-events:none;
}
.hero-has-video::after{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 460px at 78% 8%,rgba(27,92,255,.30),transparent 62%),
    radial-gradient(700px 420px at 12% 96%,rgba(255,176,32,.14),transparent 60%),
    linear-gradient(100deg,rgba(7,12,24,.93) 0%,rgba(9,16,33,.86) 38%,rgba(16,30,61,.70) 100%);
}
/* Phones now play the video too (inline, muted - see the hero script). If
   autoplay is refused or the file fails, the script adds .is-off so no black
   box or play glyph covers the hero photo underneath. */
.hero-video.is-off{display:none}
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
}

/* ---------- Partner logo band -------------------------------------------
   Light band: several of these marks are dark wordmarks with no light variant,
   so on a dark ground half the row would simply vanish.

   Greyscale at rest, colour on hover. That is not only fashion — it is what
   makes a set this mismatched read as one row. Espen ships as a green-and-navy
   block, Tesla is a thin red glyph, AMCAL is a red square; desaturating levels
   them, and the colour on hover rewards the person who actually looks.
   ------------------------------------------------------------------------ */
.logo-band{overflow:hidden}
.logo-head{text-align:center;max-width:60ch;margin:0 auto clamp(20px,2.4vw,30px)}
.logo-head h2{margin-bottom:8px}
.logo-head p{color:var(--text-2);margin:0}

.logo-marquee{
  position:relative;
  /* Fade the row out at both edges so logos enter and leave instead of being
     chopped off by the viewport. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logo-rail{display:flex;width:max-content;animation:logo-scroll 46s linear infinite}
.logo-marquee:hover .logo-rail{animation-play-state:paused}

.logo-track{
  display:flex;align-items:center;gap:clamp(38px,5vw,72px);
  margin:0;padding:0 clamp(19px,2.5vw,36px);list-style:none;flex:none;
}
.logo-track li{display:grid;place-items:center;flex:none}
.logo-track img{
  height:48px;width:auto;max-width:160px;object-fit:contain;display:block;
  filter:grayscale(1);opacity:.62;
  transition:filter .25s ease,opacity .25s ease,transform .25s ease;
}
.logo-track li:hover img{filter:grayscale(0);opacity:1;transform:scale(1.06)}

/* Exactly -50%: the track is emitted twice, so at the reset point the second
   copy sits precisely where the first began and the seam is invisible. */
@keyframes logo-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

@media (max-width:680px){
  .logo-track img{height:38px;max-width:124px}
  .logo-rail{animation-duration:34s}
}

@media (prefers-reduced-motion:reduce){
  /* No crawl. Show one static, centred, wrapped set instead. */
  .logo-rail{animation:none;width:100%}
  .logo-track{flex-wrap:wrap;justify-content:center;row-gap:26px;width:100%}
  .logo-track[aria-hidden="true"]{display:none}
  .logo-marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---------- Capability tiles --------------------------------------------
   Sits directly under the hero and stays dark, so the fold reads as one piece
   before the page opens out into light. Replaces the old two-column service
   index further down; two service lists on one page is one too many.
   ------------------------------------------------------------------------ */
.caps{position:relative;overflow:hidden;padding-top:clamp(34px,3vw,54px)}
/* A single soft brand glow, tucked behind the tiles, so the band is not a flat
   slab of navy. Cheap: one radial gradient, no extra elements to paint. */
.caps-glow{
  position:absolute;top:-30%;left:50%;width:min(1100px,120%);height:520px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(27,92,255,.20),transparent 72%);
}
.caps-head{max-width:66ch;margin-bottom:clamp(22px,2.6vw,34px)}
.caps-head .eyebrow-sm{color:var(--volt);display:block;margin-bottom:10px}
.caps-head h2{margin-bottom:10px}
.caps-head p{color:var(--on-dark-2);margin:0}

/* Flex, not grid: ten tiles leave a ragged last row in any 3- or 4-column
   grid, stranded to the left. Wrapping flex centres the remainder. */
.caps-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.2vw,18px)}

.cap{
  flex:1 1 232px;max-width:300px;
  display:flex;flex-direction:column;gap:9px;position:relative;
  padding:clamp(18px,1.7vw,22px);
  border-radius:18px;text-decoration:none;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.cap:hover,.cap:focus-visible{
  text-decoration:none;transform:translateY(-4px);
  background:rgba(27,92,255,.16);
  border-color:var(--brand);
  box-shadow:0 0 0 1px rgba(27,92,255,.45), 0 18px 38px -16px rgba(27,92,255,.85);
}
.cap:focus-visible{outline:2px solid #fff;outline-offset:2px}

.cap-ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:rgba(27,92,255,.20);color:#8FB4FF;
  transition:background .18s ease,color .18s ease;
}
.cap-ico svg{width:21px;height:21px}
.cap:hover .cap-ico,.cap:focus-visible .cap-ico{background:var(--brand);color:#fff}

.cap b{
  font-family:var(--font-display);font-size:1.02rem;font-weight:650;
  line-height:1.28;letter-spacing:-.01em;color:#fff;
}
.cap em{font-style:normal;font-size:.88rem;line-height:1.5;color:var(--on-dark-2)}
.cap-go{
  margin-top:auto;padding-top:4px;color:#7F92BC;
  opacity:0;transform:translateX(-4px);
  transition:opacity .18s ease,transform .18s ease,color .18s ease;
}
.cap-go svg{width:17px;height:17px;display:block}
.cap:hover .cap-go,.cap:focus-visible .cap-go{opacity:1;transform:translateX(0);color:#fff}

@media (max-width:680px){
  /* Icon beside the text, not above it: at full width a stacked tile wastes a
     lot of height for ten of them. Grid rather than a row flex, or the title
     and description would sit side by side instead of stacked. */
  .cap{
    display:grid;grid-template-columns:38px minmax(0,1fr);
    column-gap:14px;row-gap:3px;align-items:start;
    flex:1 1 100%;max-width:none;padding:15px 16px;border-radius:15px;
  }
  .cap-ico{grid-row:1 / span 2;width:38px;height:38px;border-radius:11px}
  .cap-ico svg{width:18px;height:18px}
  .cap b{grid-column:2;margin-top:1px}
  .cap em{grid-column:2}
  .cap-go{display:none}
}

/* .bg-dark a{text-decoration:underline} is (0,1,1) and beats a bare .cap, and
   an underline on a link is inherited by its children and cannot be removed
   from inside. Override on the section so the tiles are not fully underlined. */
.caps .cap,
.caps .cap:hover,
.caps .cap:focus-visible{text-decoration:none}
.caps .cap b{color:#fff}
.caps .cap em{color:var(--on-dark-2)}

/* ---------- Dark aside card ---------------------------------------------
   One dark card in an otherwise white column: it anchors the contact rail and
   stops the ways-to-reach-us reading with the same weight as the office hours.
   ------------------------------------------------------------------------ */
.aside-dark{
  background:linear-gradient(150deg,#0A1020,#152444);
  border-color:rgba(255,255,255,.12);
  color:#fff;
}
.aside-dark h3{color:#fff}
/* .cta-lines was written for the dark CTA band, so the rows already carry the
   right treatment here -- including the hover -- with no restyling. */
.aside-dark .cta-lines{margin-top:14px;gap:9px}
.aside-dark .cta-lines b{font-size:1.05rem}
/* .aside-card p is (0,1,1) and beat a bare .aside-dark-note, so the note was
   rendering in the light-theme body colour on a navy card -- 2.16:1, which is
   nowhere near readable. Scope it to the card to win the cascade. */
.aside-dark p,
.aside-dark .aside-dark-note{color:var(--on-dark-2)}
.aside-dark .aside-dark-note{margin:14px 0 0;font-size:.83rem;line-height:1.55}

/* The contact rail is a little wider than the standard 320px aside so the phone
   numbers sit on one line. As a class rather than an inline style: inline wins
   over the media query below, which left the form column at 0px on phones. */
.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,400px)}
@media (max-width:1080px){
  .contact-grid{grid-template-columns:1fr}
}

/* Blue wash over the photograph on hover.
   The overlay sits on the <a>, which also wraps the caption, so it is pinned to
   the top and given the same aspect-ratio the image uses. --ar is set on the
   figure and inherits, so the wash lines up with the photo exactly and stops at
   the caption. .shot overflow:hidden clips it to the rounded corners. */
.shot-link a{position:relative;display:block}
.shot-link a::before{
  content:"";position:absolute;top:0;left:0;right:0;z-index:1;
  aspect-ratio:var(--ar,16 / 10);
  background:linear-gradient(160deg,rgba(27,92,255,.44),rgba(8,22,66,.58));
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
/* These two override the image's aspect-ratio without touching --ar, so the
   wash has to be told about them or it would be the wrong height. */
.shot-wide.shot-link a::before{aspect-ratio:21 / 9}
.shot-tall.shot-link a::before{aspect-ratio:4 / 5}

.shot-link:hover a::before,
.shot-link:focus-within a::before{opacity:1}

/* Dark cards respond to the pointer with the same brand fill, border and glow
   as the capability tiles, so the two dark grids on the homepage behave alike.
   Listed after a.card-dark:hover (0,2,1) and repeating that selector, or the
   older white-wash hover would keep winning on the linked variant.
   Note these are usually <div>, not links: this is attention feedback, not an
   affordance, so no pointer cursor and no arrow is introduced. */
.card-dark{transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.card-dark:hover,
a.card-dark:hover{
  transform:translateY(-4px);
  background:rgba(27,92,255,.16);
  border-color:var(--brand);
  box-shadow:0 0 0 1px rgba(27,92,255,.45), 0 18px 38px -16px rgba(27,92,255,.85);
}
.card-dark .ico{transition:background .18s ease,color .18s ease}
.card-dark:hover .ico{background:var(--brand);color:#fff}

@media (prefers-reduced-motion:reduce){
  .card-dark:hover,a.card-dark:hover{transform:none}
}


/* Google reviews badge under Proof / What clients say */
.g-review-badge{
  display:inline-flex;align-items:center;gap:14px;margin-top:18px;
  padding:12px 16px 12px 14px;border-radius:16px;text-decoration:none;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 8px 24px -16px rgba(15,23,42,.35);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.g-review-badge:hover{transform:translateY(-1px);border-color:#c7d2fe;box-shadow:0 14px 28px -16px rgba(27,92,255,.45);text-decoration:none}
.g-review-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#F8FAFC;flex:none}
.g-review-body{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;text-align:left}
.g-review-score{font-family:var(--font-display);font-weight:750;font-size:1.35rem;color:var(--ink);letter-spacing:-.02em;line-height:1}
.g-review-stars{color:#F4B400;font-size:1rem;letter-spacing:.04em;line-height:1}
.g-review-count{font-size:.92rem;color:var(--text-2);font-weight:550}
.g-review-cta{margin-left:4px;font-size:.86rem;font-weight:650;color:var(--brand);white-space:nowrap}
@media (max-width:560px){
  .g-review-badge{width:100%;justify-content:flex-start}
  .g-review-cta{margin-left:auto}
}


/* === Conversion pass 2026-09-12: Google trust prominence === */
.g-review-badge{
  margin-top:20px;
  padding:14px 18px 14px 15px;
  box-shadow:0 10px 28px -14px rgba(15,23,42,.4), 0 0 0 1px rgba(27,92,255,.06);
}
.g-review-badge--featured{
  margin-top:22px;
  padding:16px 20px 16px 16px;
  border-color:#c7d2fe;
  box-shadow:0 14px 34px -14px rgba(27,92,255,.38), 0 0 0 1px rgba(27,92,255,.12);
}
.g-review-badge--featured .g-review-score{font-size:1.5rem}
.g-review-badge--featured .g-review-stars{font-size:1.08rem}
.center .g-review-badge{margin-left:auto;margin-right:auto}

.g-review-badge--compact{
  margin-top:18px;
  padding:10px 14px 10px 12px;
  gap:12px;
  border-radius:14px;
}
.g-review-badge--compact .g-review-mark{width:34px;height:34px;border-radius:10px}
.g-review-badge--compact .g-review-mark svg{width:18px;height:18px}
.g-review-badge--compact .g-review-score{font-size:1.15rem}
.g-review-badge--compact .g-review-stars{font-size:.92rem}
.g-review-badge--compact .g-review-count{font-size:.86rem}

.g-review-badge--on-dark{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.22);
  box-shadow:none;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.g-review-badge--on-dark:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.34);
  box-shadow:0 10px 24px -16px rgba(0,0,0,.45);
}
.g-review-badge--on-dark .g-review-mark{background:rgba(255,255,255,.92)}
.g-review-badge--on-dark .g-review-score{color:#fff}
.g-review-badge--on-dark .g-review-count{color:#C4D2EE}
.g-review-badge--on-dark .g-review-cta{color:#9DB7FF}

.cta-trust{
  margin:14px 0 0;
  font-size:.9rem;
  color:#B9C8E8;
  max-width:52ch;
  line-height:1.45;
}
.cta-trust strong{color:#fff;font-weight:650}

.contact-trust-line{
  margin:0 0 20px;
  font-size:.88rem;
  color:var(--text-2);
  line-height:1.45;
}
.contact-trust-line a{font-weight:650;text-decoration:underline;text-underline-offset:2px}


/* === conversion polish 2026-09-12 === */
.hero-trust{
  margin:14px 0 0;
  font-size:.9rem;
  color:#C4D2EE;
  line-height:1.45;
  max-width:52ch;
}
.hero-trust strong{color:#fff;font-weight:650}
.hero-page .hero-trust{color:#C4D2EE}

.mid-cta{
  background:linear-gradient(145deg,#0B1B36 0%,#13294F 55%,#0E2242 100%);
  border-radius:24px;
  padding:28px 28px 26px;
  color:#E8EEF9;
  box-shadow:0 18px 40px -28px rgba(8,20,48,.65);
}
.mid-cta .eyebrow{color:#9DB7FF}
.mid-cta h2{color:#fff;margin:0 0 10px;font-size:clamp(1.35rem,2.4vw,1.75rem)}
.mid-cta .lead{color:#B9C8E8;margin:0 0 14px}
.obj-list{
  margin:0 0 6px;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.obj-list li{
  position:relative;
  padding-left:1.35rem;
  color:#D5E0F5;
  font-size:.95rem;
  line-height:1.45;
}
.obj-list li::before{
  content:"";
  position:absolute;left:0;top:.55em;
  width:8px;height:8px;border-radius:50%;
  background:#31E39B;
  box-shadow:0 0 0 3px rgba(49,227,155,.18);
}
.mid-trust{
  margin:14px 0 0;
  font-size:.86rem;
  color:#93A6CC;
}
.mid-cta .btn-ghost{
  border-color:rgba(255,255,255,.28);
  color:#fff;
}
.mid-cta .btn-ghost:hover{
  background:rgba(255,255,255,.08);
}

.submit-trust{
  margin:0 0 12px;
  text-align:center;
  font-size:.86rem;
  color:var(--text-2);
  line-height:1.4;
}

/* Stronger mobile callbar hierarchy */
@media (max-width:860px){
  .callbar a.callbar-cta,
  .callbar a:last-child{
    background:var(--volt,#B8F53C)!important;
    color:#0B1B36!important;
    font-weight:700;
  }
  .callbar a.callbar-call,
  .callbar a:first-child{
    background:var(--brand)!important;
    color:#fff!important;
  }
}

/* ce-latest-visible 2026-10-11: solid dark fallback so the hero feat card always has contrast; Latest marker on first grid card */
.hero-blog .feat{background-color:#13203F;border-color:rgba(127,168,255,.38)}
.pcard-latest{outline:2px solid var(--volt,#31E39B);outline-offset:-2px}
.pcard-new{display:inline-block;margin-right:6px;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink,#0B1220);background:var(--volt,#31E39B);border-radius:999px;padding:2px 8px;vertical-align:1px}