/* LT Generators. Homepage redesign, v2 "premium pass". 2026-09-09.
   Built on the v1 stylesheet. v1 kept one accent and no icons, shadows or gradients.
   v2 keeps the two grounds, the type and the numbered-row spine, and adds depth:
   soft ground gradients, layered shadows on cards and the form panel, a subtle
   sheen on primary buttons, Phosphor duotone icons in tinted tiles, client portraits.

   COLOR LEDGER v2. Three hues, each with one meaning:
   brass     #D9A12B  power, residential, credentials, the primary action. The logo bolt.
   steel     #6F9BD9  commercial and technical (monitoring, IT, transfer switch)
   verdigris #4FA37E  protected, running, restored, community
   On paper grounds the hues step down to their deep variants so icons and text clear AA.
   Icon tiles and tags are OUTLINED SQUARES (0 radius, no fill); the duotone icon carries the hue. Josh ruling 2026-09-09.
   Neutral ink tiles carry everything that has no category meaning.
   A hue never appears as body text on paper. Never a fourth hue. */

:root{
  --midnight:#0B1220;
  --slate:#151E33;
  --mist:#A9B1C3;
  --hairline-dark:#26304A;
  --edge-dark:rgba(245,244,240,.40);
  --paper:#F5F4F0;
  --surface:#FFFFFF;
  --hairline-light:#D9D7CF;
  --brass:#D9A12B;
  --brass-hover:#C9921F;
  --brass-light:#E8B848;
  --brass-deep:#9A6A12;
  --steel:#6F9BD9;
  --steel-deep:#2E5C9E;
  --verdigris:#4FA37E;
  --verdigris-deep:#22734B;
  --accent-ink:#0B1220;
  --r:6px;
  --r-lg:12px;
  --shadow-card:0 1px 2px rgba(11,18,32,.04),0 2px 6px rgba(11,18,32,.04),0 24px 48px -24px rgba(11,18,32,.18);
  --shadow-card-hover:0 1px 2px rgba(11,18,32,.05),0 6px 14px rgba(11,18,32,.06),0 32px 56px -24px rgba(11,18,32,.24);
  --shadow-panel:0 1px 0 rgba(255,255,255,.05) inset,0 32px 64px -32px rgba(0,0,0,.6);
  --shadow-brass:0 10px 24px -10px rgba(217,161,43,.55);
  --font-sans:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono","SF Mono",Menlo,Consolas,monospace;
  --pad:64px;
  --gutter:24px;
  --section:128px;
  --nav-h:72px;
}
@media (max-width:1279px){:root{--pad:40px}}
@media (max-width:719px){:root{--pad:24px;--section:72px}}
@media (max-width:399px){:root{--pad:20px}}

*,*::before,*::after{box-sizing:border-box}
html{
  font-kerning:normal;
  font-feature-settings:"kern","liga","clig","calt";
  -webkit-font-smoothing:antialiased;
  color-scheme:light;
  scroll-padding-top:var(--nav-h);
}
body{
  margin:0;
  background:var(--paper);
  color:var(--midnight);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:18px;
  line-height:1.5;
}
@media (max-width:719px){body{font-size:17px}}
p{margin:0;text-wrap:pretty}
p + p{margin-top:1em}
h1,h2,h3{margin:0;font-family:var(--font-sans);text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* Grounds */
[data-ground="dark"]{background:var(--midnight);color:var(--paper);--rule:var(--hairline-dark);--muted:var(--mist);--focus:var(--brass);--edge:var(--edge-dark)}
[data-ground="light"]{background:var(--paper);color:var(--midnight);--rule:var(--hairline-light);--muted:var(--midnight);--focus:var(--midnight);--edge:var(--midnight)}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r)}

/* Layout */
.wrap{max-width:1280px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.section{padding-top:var(--section);padding-bottom:var(--section)}
.section-rule .wrap::before{content:"";display:block;height:1px;background:var(--rule);margin-bottom:48px}
@media (max-width:719px){.section-rule .wrap::before{margin-bottom:32px}}
.skip{position:absolute;left:16px;top:-100px;z-index:100;background:var(--paper);color:var(--midnight);padding:12px 16px;border-radius:var(--r);font-size:16px;line-height:20px;font-weight:500;text-decoration:none;--focus:var(--brass)}
.skip:focus{top:16px}

/* Type roles */
.label{
  font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1;
  text-transform:uppercase;letter-spacing:0;
  display:block;width:max-content;max-width:100%;align-self:flex-start;padding-bottom:8px;border-bottom:1px solid currentColor;
  color:var(--muted);
}
[data-ground="light"] .label{color:var(--midnight)}
.mono{font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1;text-transform:uppercase;letter-spacing:0}
.tnum{font-feature-settings:"kern","tnum","lnum"}
.num{font-feature-settings:"kern","liga","pnum","lnum"}
.h1{font-size:72px;line-height:1;font-weight:500;letter-spacing:-.03em}
.h2{font-size:44px;line-height:1.05;font-weight:500;letter-spacing:-.02em}
.h3{font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.01em}
.lede{font-size:21px;line-height:1.4}
.small{font-size:14px;line-height:1.45}
.ui{font-size:16px;line-height:20px;font-weight:500}
@media (max-width:1279px){.h1{font-size:56px}.h2{font-size:36px}}
@media (max-width:719px){.h1{font-size:44px}.h2{font-size:32px}}
@media (max-width:359px){.h1{font-size:40px}}
.label + .h1,.label + .h2{margin-top:24px}
.h2 + .lede,.h1 + .lede{margin-top:20px}
.lede + .body{margin-top:18px}
.nowrap{white-space:nowrap}

/* Text links */
.tlink{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-thickness .15s}
.tlink:hover{text-decoration-thickness:2px}
.qlink{color:inherit;text-decoration:none}
.qlink:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0 24px;border-radius:var(--r);
  font-family:var(--font-sans);font-size:16px;line-height:20px;font-weight:500;
  white-space:nowrap;text-decoration:none;border:1px solid transparent;
  transition:background-color .15s,border-color .15s,color .15s;cursor:pointer;
}
.btn-primary{background:var(--brass);border-color:var(--brass);color:var(--accent-ink)}
.btn-primary:hover{background:var(--brass-hover);border-color:var(--brass-hover)}
[data-ground="dark"] .btn-ghost{background:transparent;border-color:var(--edge-dark);color:var(--paper)}
[data-ground="dark"] .btn-ghost:hover{border-color:var(--paper)}
[data-ground="light"] .btn-ghost{background:transparent;border-color:var(--midnight);color:var(--midnight)}
[data-ground="light"] .btn-ghost:hover{background:var(--midnight);color:var(--paper)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px}
@media (max-width:719px){.btn-row{flex-direction:column}.btn-row .btn{width:100%}}

/* Logo */
/* Logo: concept 04 "recharged original" (Josh, 2026-09-09). Ink parts follow currentColor, the bolt is #F5C400,
   the bolt keyline takes the ground color through --logo-keyline. The viewBox includes the bolt overshoot, so the
   lockup box is taller than the letters: 40px box = 21px caps in the nav. */
[data-ground="dark"]{--logo-keyline:#0B1220}
[data-ground="light"]{--logo-keyline:#F5F4F0}
.nav,.menu,.footer,.mbar{--logo-keyline:#0B1220}
.lockup{display:block;color:inherit}
.lockup svg{display:block;height:40px;width:auto}
.lockup-stacked svg{display:block;width:168px;height:auto}
@media (max-width:399px){.lockup svg{height:36px}.lockup-stacked svg{height:auto;width:150px}}

/* Numbered rows (the spec-table device) */
.rows{margin:0}
.row{
  display:grid;grid-template-columns:40px minmax(0,1fr) auto;column-gap:16px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--rule);
}
.rows.rows-close .row:last-child{border-bottom:1px solid var(--rule)}
.row .key{font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1;text-transform:uppercase;color:var(--muted);position:relative;top:-2px}
[data-ground="light"] .row .key{color:var(--midnight)}
.row .val{text-align:right;white-space:nowrap}
.row.row-2{grid-template-columns:40px minmax(0,1fr)}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:50;
  color:var(--paper);
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .2s,border-color .2s;
}
.nav.is-scrolled{background:rgba(11,18,32,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--hairline-dark)}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:32px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:var(--paper);text-decoration:none;font-size:15px;line-height:20px;font-weight:500;padding:12px 0}
.nav-links a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.nav-right{display:flex;align-items:center;gap:20px}
.nav-phone{color:var(--paper);text-decoration:none;font-size:16px;line-height:20px;font-weight:500;padding:12px 0;white-space:nowrap}
.nav-phone:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.nav .btn-primary{height:44px;padding:0 20px;max-width:240px;white-space:nowrap;overflow:hidden;transform:translateX(0);transition:max-width .55s cubic-bezier(.22,1,.36,1),padding .55s cubic-bezier(.22,1,.36,1),margin-left .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1),opacity .3s ease .15s,background-color .15s,visibility 0s}
.nav .btn-primary.is-hidden{opacity:0;visibility:hidden;max-width:0;padding-left:0;padding-right:0;margin-left:-20px;border-color:transparent;transform:translateX(14px);pointer-events:none;transition:max-width .45s cubic-bezier(.4,0,.2,1),padding .45s cubic-bezier(.4,0,.2,1),margin-left .45s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1),opacity .2s ease,visibility 0s linear .45s}
@media (prefers-reduced-motion:reduce){.nav .btn-primary,.nav .btn-primary.is-hidden{transition:none}}
.menu-btn{display:none;color:var(--paper);font-size:16px;line-height:20px;font-weight:500;padding:12px 0}
@media (max-width:1023px){
  .nav-links,.nav-right{display:none}
  .menu-btn{display:inline-block}
}
@media (min-width:1024px) and (max-width:1279px){.nav-phone .num{display:none}}
@media (min-width:1024px) and (max-width:1599px){.nav-phone .num{display:inline-block;max-width:170px;overflow:hidden;white-space:nowrap;vertical-align:bottom;transition:max-width .55s cubic-bezier(.22,1,.36,1),opacity .25s ease .1s,margin-left .55s cubic-bezier(.22,1,.36,1)}.nav.has-cta .nav-phone .num{max-width:0;opacity:0;margin-left:-8px;transition:max-width .45s cubic-bezier(.4,0,.2,1),opacity .15s ease,margin-left .45s cubic-bezier(.4,0,.2,1)}}

/* Menu panel */
.menu{
  position:fixed;inset:0;z-index:60;background:var(--midnight);color:var(--paper);
  display:none;overflow:auto;
}
.menu.is-open{display:block}
.menu .wrap{display:flex;flex-direction:column;min-height:100%;padding-top:0}
.menu-top{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between}
.menu-close{color:var(--paper);font-size:16px;line-height:20px;font-weight:500;padding:12px 0}
.menu-list{margin-top:32px;display:flex;flex-direction:column;gap:0}
.menu-list a{color:var(--paper);text-decoration:none;font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.01em;padding:16px 0;border-top:1px solid var(--hairline-dark)}
.menu-list a:last-child{border-bottom:1px solid var(--hairline-dark)}
.menu-phone{margin-top:40px}
.menu-phone a{color:var(--paper);text-decoration:none;font-size:24px;line-height:1.2;font-weight:600}
.menu-cta{margin-top:32px;padding-bottom:40px}

/* Mobile bar */
.mbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;
  height:calc(64px + env(safe-area-inset-bottom));padding:8px 16px calc(8px + env(safe-area-inset-bottom));
  background:rgba(11,18,32,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--hairline-dark);color:var(--paper);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;
}
.mbar.is-shown{opacity:1;visibility:visible}
.mbar .btn{flex:1 1 0;height:48px;padding:0 12px}
@media (max-width:719px){.mbar{display:flex;gap:12px}}

/* ---------- HERO ---------- */
/* The brass glow is "the light". js/site.js moves --gx/--gy toward the pointer with a soft spring (Josh, 2026-09-09). Static at 22%/38% without a pointer or under reduced motion. */
.hero{position:relative;min-height:min(100svh,860px);display:grid;grid-template-rows:var(--nav-h) minmax(0,1fr) auto}
.hero-body{display:grid;grid-template-columns:1fr 1fr}
.hero-copy{
  padding-left:max(var(--pad),calc((100vw - 1280px)/2 + var(--pad)));
  padding-right:var(--gutter);
  padding-top:40px;padding-bottom:40px;
  display:flex;flex-direction:column;justify-content:center;
}
.hero-copy .lede{margin-top:20px}
.hero-copy .btn-row{margin-top:40px}
.hero-photo{position:relative;min-height:520px;overflow:hidden}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 50%}
.hero-photo::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(97deg,var(--midnight) 0%,rgba(11,18,32,.94) 9%,rgba(11,18,32,.66) 22%,rgba(11,18,32,.3) 38%,rgba(11,18,32,.08) 52%,rgba(11,18,32,0) 64%)}
.hero-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(110% 95% at 76% 42%,rgba(11,18,32,0) 58%,rgba(11,18,32,.3) 100%),linear-gradient(180deg,rgba(11,18,32,0) 70%,rgba(11,18,32,.55) 100%)}
.hero-strip{margin-top:0}
.hero-strip .wrap{padding-bottom:28px}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--hairline-dark)}
.strip li{padding:20px 24px;border-left:1px solid var(--hairline-dark);color:var(--paper);white-space:nowrap}
.strip li:first-child{border-left:0;padding-left:0}
.strip li:last-child{padding-right:0}
@media (max-width:1023px){
  .hero{min-height:0;grid-template-rows:var(--nav-h) auto auto}
  .hero-body{grid-template-columns:1fr}
  .hero-copy{padding-left:var(--pad);padding-right:var(--pad);padding-top:40px;padding-bottom:48px}
  .hero-photo{order:3;min-height:0;aspect-ratio:3/2}
  .hero-photo::before{display:none}
  .hero-strip{order:2}
  .hero-strip .wrap{padding-bottom:48px}
  .strip li{white-space:normal}
}
@media (max-width:1279px){
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip li{padding:16px 20px}
  .strip li:nth-child(odd){border-left:0;padding-left:0}
  .strip li:nth-child(n+3){border-top:1px solid var(--hairline-dark)}
  .strip li:nth-child(even){padding-right:0}
}
@media (max-width:719px){
  .hero-photo{aspect-ratio:4/5}
  .hero-copy{padding-top:24px}
  .hero-copy .h1{text-align:center}
}

/* ---------- PROOF ---------- */
.proof.section{padding-top:80px}
.proof .head{grid-column:1 / span 7}
.numerals{grid-column:1 / -1;margin-top:64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.numerals li{padding:0 32px;border-left:1px solid var(--hairline-dark)}
.numerals li:first-child{border-left:0;padding-left:0}
.numerals .n{font-size:72px;line-height:1;font-weight:500;letter-spacing:-.03em;color:var(--paper)}
.numerals .n + .rule{height:1px;background:var(--hairline-dark);margin-top:8px}
.numerals .cap{margin-top:16px;max-width:34ch}
.proof-left{grid-column:1 / span 5;margin-top:64px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.proof-right{grid-column:7 / -1;margin-top:64px}
.footline{font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1;text-transform:uppercase;color:var(--mist);white-space:nowrap}
.footline b{font-weight:500;color:var(--brass)}
@media (max-width:1279px){.numerals .n{font-size:56px}}
@media (max-width:1023px){
  .proof .head,.proof-left,.proof-right{grid-column:1 / -1}
  .numerals{grid-template-columns:1fr;margin-top:48px}
  .numerals li{padding:24px 0;border-left:0;border-top:1px solid var(--hairline-dark)}
  .numerals li:first-child{border-top:0;padding-top:0}
  .numerals .n + .rule{display:none}
  .numerals .cap{margin-top:12px}
  .proof-left{margin-top:48px;gap:24px}
  .proof-right{margin-top:32px}
}
@media (max-width:719px){.numerals .n{font-size:44px}}

/* ---------- HOW IT WORKS ---------- */
.how .head{grid-column:1 / span 8}
.steps{grid-column:1 / -1;margin-top:64px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.steps li{padding:0 24px;border-left:1px solid var(--hairline-light)}
.steps li:first-child{border-left:0;padding-left:0}
.steps .n{font-size:44px;line-height:1;font-weight:500;letter-spacing:-.02em}
.steps .n + .rule{height:1px;background:var(--hairline-light);margin-top:16px}
.steps .t{margin-top:16px}
.loads-band{grid-column:1 / -1;margin-top:96px;border-top:1px solid var(--hairline-light);padding-top:48px}
.loads-band .intro{max-width:calc(7 * (100% - 11 * var(--gutter)) / 12 + 6 * var(--gutter));margin-top:24px}
.loads{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)}
.loads .row{padding:14px 0;border-top:0;border-bottom:1px solid var(--hairline-light);grid-template-columns:40px minmax(0,1fr)}
.loads-close{margin-top:32px}
@media (max-width:1279px){.steps .n{font-size:36px}}
@media (max-width:1023px){
  .how .head{grid-column:1 / -1}
  .steps{grid-template-columns:1fr;margin-top:48px}
  .steps li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;align-items:baseline;padding:20px 0;border-left:0;border-top:1px solid var(--hairline-light)}
  .steps li:first-child{border-top:0;padding-top:0}
  .steps .n{font-size:32px}
  .steps .n + .rule{display:none}
  .steps .t{margin-top:0}
  .loads-band{margin-top:64px}
  .loads-band .intro{max-width:none}
  .loads{grid-template-columns:1fr}
}

/* ---------- EQUIPMENT ---------- */
.equip-head{grid-column:1 / span 5;grid-row:1}
.equip-rows{grid-column:1 / span 5;grid-row:2;align-self:end;margin-top:40px}
.equip-right{grid-column:6 / -1;grid-row:1 / span 2;display:flex}
@media (min-width:1024px){.equip-right .photo{aspect-ratio:auto;width:100%;min-height:100%}}
.photo{border-radius:var(--r-lg);overflow:hidden;background:var(--hairline-light)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo-43{aspect-ratio:4/3}
.photo-32{aspect-ratio:3/2}
@media (max-width:1023px){
  .equip-head,.equip-rows,.equip-right{grid-column:1 / -1;grid-row:auto}
  .equip-right{margin-top:40px}
  .equip-rows{margin-top:40px}
}

/* ---------- WHO FOR ---------- */
.who .head{grid-column:1 / span 8}
.cards{grid-column:1 / -1;margin-top:64px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);row-gap:32px}
.card{
  background:var(--surface);border:1px solid var(--hairline-light);border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;
}
.card .photo{border-radius:0;aspect-ratio:3/2}
.card-body{padding:32px 32px 0}
.card-body .h3 + p{margin-top:12px}
.card-rows{padding:24px 32px 0}
.card-rows .row{padding:14px 0}
.card-rows .row:last-child{border-bottom:1px solid var(--hairline-light)}
.card-cta{padding:32px 32px 32px}
.footnote{grid-column:1 / span 8;margin-top:24px}
@media (max-width:1023px){
  .who .head,.footnote{grid-column:1 / -1}
  .cards{grid-template-columns:1fr;margin-top:48px}
  .card{display:block}
  .card-body{padding:24px 24px 0}
  .card-rows{padding:24px 24px 0}
  .card-cta{padding:24px}
}
@media (max-width:719px){.card-cta .btn{width:100%}}

/* ---------- REVIEWS ---------- */
.reviews .lab{grid-column:1 / span 4}
figure{margin:0}
.quote{grid-column:1 / span 9;margin-top:24px}
.quote blockquote{margin:0;font-size:44px;line-height:1.05;font-weight:500;letter-spacing:-.02em;text-indent:-.46em;text-wrap:balance}
.quote figcaption span{display:block;margin-top:16px}
.qrows{grid-column:1 / span 7;margin-top:64px}
.qrow{padding:20px 0;border-top:1px solid var(--hairline-light)}
.qrow:last-child{border-bottom:1px solid var(--hairline-light)}
.qrow blockquote{margin:0;text-wrap:pretty}
.qrow figcaption span{display:block;margin-top:8px}
.recog{grid-column:9 / -1;margin-top:64px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.recog-list{margin-top:24px}
.recog-list li{padding:12px 0;border-top:1px solid var(--hairline-light);font-size:14px;line-height:1.45}
.recog-list li:last-child{border-bottom:1px solid var(--hairline-light)}
@media (max-width:1279px){.quote blockquote{font-size:36px}}
@media (max-width:1023px){
  .reviews .lab,.quote,.qrows,.recog{grid-column:1 / -1}
  .qrows{margin-top:48px}
  .recog{margin-top:48px;gap:24px}
}
@media (max-width:719px){.quote blockquote{font-size:32px}}

/* ---------- AREAS ---------- */
.areas .head{grid-column:1 / span 7}
.areas-photo{grid-column:1 / span 7;margin-top:64px}
.areas-rows{grid-column:8 / -1;margin-top:64px;display:grid;grid-template-rows:auto repeat(4,1fr)}
.arow{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;align-items:start;align-content:center;padding:16px 0;border-top:1px solid var(--hairline-light)}
.arow:last-child{border-bottom:1px solid var(--hairline-light)}
.arow .key{font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1;text-transform:uppercase;position:relative;top:6px}
.arow .h3 + .small{margin-top:6px}
@media (max-width:1023px){
  .areas .head,.areas-photo,.areas-rows{grid-column:1 / -1}
  .areas-photo{margin-top:48px}
  .areas-photo .photo{aspect-ratio:3/2}
  .areas-rows{margin-top:40px;grid-template-rows:none}
}

/* ---------- INSIGHTS ---------- */
.insights .head{grid-column:1 / span 7}
.feat{grid-column:1 / span 6;margin-top:64px}
.feat .h3{margin-top:20px}
.feat .h3 a{color:inherit;text-decoration:none}
.feat .h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.feat .small{margin-top:12px}
.irows{grid-column:8 / -1;margin-top:64px;display:grid;grid-template-rows:repeat(4,1fr)}
.irow{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:16px;align-items:start;align-content:center;padding:16px 0;border-top:1px solid var(--hairline-light)}
.irow:last-child{border-bottom:1px solid var(--hairline-light)}
.irow .key{font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1;text-transform:uppercase;position:relative;top:7px}
.irow a{font-weight:500;color:inherit;text-decoration:none}
.irow a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.allposts{grid-column:8 / -1;margin-top:32px}
@media (max-width:1023px){
  .insights .head,.feat,.irows,.allposts{grid-column:1 / -1}
  .feat{margin-top:48px}
  .irows{margin-top:40px;grid-template-rows:none}
}

/* ---------- ASSESSMENT ---------- */
.assess-left{grid-column:1 / span 5}
.assess-left .body{margin-top:20px}
.assess-left .photo{margin-top:40px}
.assess-left .caption{margin-top:12px;color:var(--mist);line-height:1.5}
.assess-left .orcall{margin-top:40px;color:var(--mist)}
.assess-left .phone{margin-top:8px;font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.01em}
.assess-left .phone a{color:inherit;text-decoration:none}
.assess-left .phone a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.assess-left .already{margin-top:24px}
.panel{grid-column:7 / -1;background:var(--slate);border-radius:var(--r-lg);padding:40px;align-self:start}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1 / -1}
.field label{font-size:14px;line-height:1.45;color:var(--paper)}
.field input,.field textarea{
  width:100%;background:var(--midnight);color:var(--paper);border:1px solid var(--edge-dark);border-radius:var(--r);
  font-family:var(--font-sans);font-size:16px;line-height:20px;font-weight:500;padding:0 16px;height:52px;
}
.field textarea{height:auto;padding:14px 16px;resize:vertical;min-height:96px}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.seg{display:grid;grid-template-columns:1fr 1fr}
.seg button{
  height:52px;border:1px solid var(--edge-dark);background:transparent;color:var(--paper);
  font-family:var(--font-sans);font-size:16px;line-height:20px;font-weight:500;white-space:nowrap;
  transition:background-color .15s,color .15s,border-color .15s;
}
.seg button:first-child{border-radius:var(--r) 0 0 4px}
.seg button:last-child{border-radius:0 var(--r) var(--r) 0;border-left:0}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--midnight);border-color:var(--paper)}
.seg button:hover{border-color:var(--paper)}
.seg button[aria-pressed="true"] + button{border-left:0}
.submit{grid-column:1 / -1;margin-top:8px}
.submit .btn{width:100%}
.demo{grid-column:1 / -1;margin-top:16px;text-align:center;color:var(--mist)}
@media (max-width:1023px){
  .assess-left,.panel{grid-column:1 / -1}
  .panel{margin-top:48px;padding:24px}
  .fields{grid-template-columns:minmax(0,1fr)}
  .field.full{grid-column:auto}
  .submit,.demo{grid-column:auto}
}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--hairline-dark);padding-top:96px;padding-bottom:40px}
.f-brand{grid-column:1 / span 4}
.f-brand .mission{margin-top:32px}
.f-brand .phone{margin-top:32px;font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.01em}
.f-brand .phone a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:12px}
.f-brand .phone .ic{width:24px;height:24px;color:var(--brass);vertical-align:0}
.f-brand .phone a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.f-brand .book{margin-top:12px}
.f-col-a{grid-column:6 / span 2}
.f-col-b{grid-column:8 / span 2}
.f-col-c{grid-column:10 / -1}
.f-list{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.f-list a{color:var(--paper);text-decoration:none;font-size:14px;line-height:1.45;display:inline-block;padding:3px 0}
.f-list a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.f-group + .f-group{margin-top:32px}
.f-news .label + p{margin-top:16px}
.f-news .field{margin-top:16px}
.f-news .field input{height:48px}
.f-news .btn{margin-top:12px}
.f-news .hiring{margin-top:24px}
.f-bottom{grid-column:1 / -1;margin-top:64px;border-top:1px solid var(--hairline-dark);padding-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px}
.f-bottom .lic{font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1;text-transform:uppercase;color:var(--brass);white-space:nowrap}
.f-bottom .copy{font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1.5;text-transform:uppercase;color:var(--mist)}
.f-bottom .copy a{color:var(--mist);text-decoration:none}
.f-bottom .copy a:hover{text-decoration:underline;text-underline-offset:3px}
.f-social{display:flex;gap:24px}
.f-social a{color:var(--paper);text-decoration:none;font-size:14px;line-height:1.45;padding:8px 0}
.f-social a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.f-note{grid-column:1 / -1;margin-top:16px;font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1.5;text-transform:uppercase;color:var(--mist)}
@media (max-width:1023px){
  .f-brand{grid-column:1 / -1}
  .f-col-a{grid-column:1 / span 6;margin-top:48px}
  .f-col-b{grid-column:7 / -1;margin-top:48px}
  .f-col-c{grid-column:1 / -1;margin-top:48px}
}
@media (max-width:719px){
  .footer{padding-top:64px;padding-bottom:calc(40px + 80px)} /* clears the fixed mobile bar on the dark ground */
  .f-col-a,.f-col-b,.f-col-c{grid-column:1 / -1;margin-top:32px}
  .f-bottom{margin-top:48px;flex-direction:column;align-items:flex-start}
  .f-bottom .lic{white-space:normal;line-height:1.5}
}

/* Touch targets under 1024: pad the hit area, not the type */
@media (max-width:1023px){
  .menu-phone a,.assess-left .phone a,.f-brand .phone a{padding:8px 0}
  .f-brand .book a,.recog .tlink,.already a,.hiring a,.footnote a,.allposts a,.feat .small a,.f-bottom .copy a{padding:12px 0}
  .f-list a{padding:9px 0}
  .f-social a{padding:12px 0}
  .irow a{display:inline-block;padding:9px 0}
}

/* Motion: everything above is static. Transitions run only when motion is allowed. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

/* Print */
@media print{
  .nav,.mbar,.menu{display:none !important}
  .hero{min-height:0}
  a{text-decoration:none}
}

/* =====================================================================
   V2 PREMIUM LAYER. Everything below this line is new in v2.
   ===================================================================== */

/* Grounds gain a quiet gradient and per-ground hue variables */
[data-ground="dark"]{
  background:linear-gradient(180deg,#0B1220 0%,#0D1526 55%,#0B1220 100%);
  --hue-brass:var(--brass);--hue-steel:var(--steel);--hue-verd:var(--verdigris);--hue-ink:var(--paper);
  --tile-bg:rgba(245,244,240,.05);--tile-bd:rgba(245,244,240,.16);
  --tint-brass:rgba(217,161,43,.14);--tint-steel:rgba(111,155,217,.14);--tint-verd:rgba(79,163,126,.14);
  --tint-brass-bd:rgba(217,161,43,.28);--tint-steel-bd:rgba(111,155,217,.28);--tint-verd-bd:rgba(79,163,126,.28);
}
[data-ground="light"]{
  background:var(--paper);
  --hue-brass:var(--brass-deep);--hue-steel:var(--steel-deep);--hue-verd:var(--verdigris-deep);--hue-ink:var(--midnight);
  --tile-bg:rgba(11,18,32,.045);--tile-bd:rgba(11,18,32,.14);
  --tint-brass:rgba(217,161,43,.16);--tint-steel:rgba(46,92,158,.10);--tint-verd:rgba(34,115,75,.10);
  --tint-brass-bd:rgba(154,106,18,.28);--tint-steel-bd:rgba(46,92,158,.24);--tint-verd-bd:rgba(34,115,75,.24);
}
/* Light grounds stay one continuous paper so section seams never show; depth comes from cards, tiles and photos. */
.footer{background:linear-gradient(180deg,#0B1220,#080D18)}

/* Icons. Phosphor duotone, currentColor, sprite at the top of the body. */
.ic{display:inline-block;width:20px;height:20px;flex:0 0 auto;vertical-align:-4px;fill:currentColor}
.ic-s{width:16px;height:16px;vertical-align:-3px}
.tile{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:40px;height:40px;border-radius:0;
  background:transparent;
  border:1px solid var(--tile-bd);color:var(--hue-ink);
}
.tile .ic{width:22px;height:22px;vertical-align:0}
.tile-lg{width:48px;height:48px}
.tile-lg .ic{width:26px;height:26px}
.tile-brass{color:var(--hue-brass);border-color:var(--tint-brass-bd)}
.tile-steel{color:var(--hue-steel);border-color:var(--tint-steel-bd)}
.tile-verd{color:var(--hue-verd);border-color:var(--tint-verd-bd)}

/* Tags. Mono, outlined, one per meaning. */
.tag{
  display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px 0 8px;border-radius:0;
  font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1;text-transform:uppercase;letter-spacing:0;
  border:1px solid var(--tile-bd);background:var(--tile-bg);color:var(--hue-ink);white-space:nowrap;
}
.tag .ic{width:14px;height:14px;vertical-align:0}
.tag{background:transparent}
.tag-brass{color:var(--hue-brass);border-color:var(--tint-brass-bd)}
.tag-steel{color:var(--hue-steel);border-color:var(--tint-steel-bd)}
.tag-verd{color:var(--hue-verd);border-color:var(--tint-verd-bd)}
.tags{display:flex;flex-wrap:wrap;gap:8px}

/* Status dot */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hue-verd);box-shadow:0 0 0 3px var(--tint-verd);flex:0 0 auto}
@keyframes dot-breathe{0%,100%{box-shadow:0 0 0 3px var(--tint-verd)}50%{box-shadow:0 0 0 6px var(--tint-verd)}}
.dot-live{animation:dot-breathe 2.4s ease-in-out infinite}

/* Avatars */
.avatar{display:block;width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--hairline-light),0 6px 16px -6px rgba(11,18,32,.35)}
.avatar-lg{width:64px;height:64px}

/* Buttons. A hairline sheen, not a gradient you can name. */
.btn{border-radius:var(--r);transition:background-color .15s,border-color .15s,color .15s,box-shadow .2s,transform .15s}
.btn-primary{
  background:linear-gradient(180deg,var(--brass-light) 0%,var(--brass) 100%);border-color:var(--brass);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,var(--shadow-brass);
}
.btn-primary:hover{background:linear-gradient(180deg,var(--brass) 0%,var(--brass-hover) 100%);border-color:var(--brass-hover);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 14px 28px -10px rgba(217,161,43,.6)}
.btn-primary:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 4px 10px -6px rgba(217,161,43,.5)}
[data-ground="dark"] .btn-ghost{background:rgba(245,244,240,.03);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
[data-ground="dark"] .btn-ghost:hover{background:rgba(245,244,240,.08)}
[data-ground="light"] .btn-ghost{background:var(--surface);border-color:var(--hairline-light);box-shadow:var(--shadow-card)}
[data-ground="light"] .btn-ghost:hover{background:var(--midnight);border-color:var(--midnight);color:var(--paper);box-shadow:none}
.btn-steel{background:var(--surface);border-color:var(--tint-steel-bd);color:var(--steel-deep);box-shadow:var(--shadow-card)}
[data-ground="light"] .btn-steel:hover{background:var(--steel-deep);border-color:var(--steel-deep);color:var(--paper);box-shadow:none}
.btn .ic{margin-right:10px;margin-left:-4px;vertical-align:0}

/* ---------- NAV ---------- */
.nav.is-scrolled{background:linear-gradient(180deg,rgba(11,18,32,.96),rgba(11,18,32,.88));box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 12px 32px -16px rgba(0,0,0,.6)}
.nav-phone{display:inline-flex;align-items:center;gap:8px}
.nav-phone .ic{width:18px;height:18px;color:var(--brass);vertical-align:0}
.menu-btn{display:none;align-items:center;gap:8px}
@media (max-width:1023px){.menu-btn{display:inline-flex}}
/* Mobile menu: reveals as a circle from the Menu button, items rise in sequence, quick fade out (Josh, 2026-09-09) */
.menu{background:radial-gradient(60% 40% at 100% 0,rgba(217,161,43,.14),rgba(217,161,43,0) 70%),linear-gradient(180deg,#0B1220,#0F1830)}
.menu.is-open{animation:menu-in .55s cubic-bezier(.2,.8,.2,1) both}
.menu.is-closing{animation:menu-out .22s ease-in both;pointer-events:none}
@keyframes menu-in{from{opacity:0;clip-path:circle(0 at calc(100% - 48px) 36px)}to{opacity:1;clip-path:circle(160% at calc(100% - 48px) 36px)}}
@keyframes menu-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}
.menu.is-open .menu-top{animation:menu-rise .5s cubic-bezier(.2,.8,.2,1) .12s both}
.menu.is-open .menu-list > *{animation:menu-rise .55s cubic-bezier(.2,.8,.2,1) both}
.menu.is-open .menu-list > :nth-child(1){animation-delay:.18s}
.menu.is-open .menu-list > :nth-child(2){animation-delay:.24s}
.menu.is-open .menu-list > :nth-child(3){animation-delay:.30s}
.menu.is-open .menu-list > :nth-child(4){animation-delay:.36s}
.menu.is-open .menu-list > :nth-child(5){animation-delay:.42s}
.menu.is-open .menu-list > :nth-child(6){animation-delay:.48s}
.menu.is-open .menu-phone{animation:menu-rise .55s cubic-bezier(.2,.8,.2,1) .58s both}
.menu.is-open .menu-cta{animation:menu-rise .55s cubic-bezier(.2,.8,.2,1) .66s both}
.menu.is-open .menu-list > * .tile{animation:tile-pop .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:inherit}
@keyframes menu-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes tile-pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.menu.is-open,.menu.is-closing,.menu.is-open .menu-top,.menu.is-open .menu-list > *,.menu.is-open .menu-phone,.menu.is-open .menu-cta,.menu.is-open .menu-list > * .tile{animation:none}}
.menu-list a{display:flex;align-items:center;gap:16px}
.menu-list .tile{width:36px;height:36px}
.menu-list .tile .ic{width:20px;height:20px}
.menu-phone a{display:inline-flex;align-items:center;gap:12px}
.menu-phone .ic{color:var(--brass);width:24px;height:24px;vertical-align:0}

/* ---------- HERO ---------- */
/* The brass glow is "the light". js/site.js moves --gx/--gy toward the pointer with a soft spring (Josh, 2026-09-09). Static at 22%/38% without a pointer or under reduced motion. */
.hero{
  --gx:22%;--gy:38%;
  background:
    radial-gradient(60% 50% at 80% 100%,rgba(111,155,217,.08),rgba(111,155,217,0) 70%),
    linear-gradient(180deg,#0B1220,#0D1526);
}
/* The brass glow sits ABOVE the copy as a screen-blended light, so the knocked-out letters (filled with the ground color) take the same tint as the ground around them. */
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(70% 60% at var(--gx) var(--gy),rgba(217,161,43,.13),rgba(217,161,43,0) 70%);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 42%,rgba(0,0,0,.35) 50%,transparent 58%);mask-image:linear-gradient(90deg,#000 0,#000 42%,rgba(0,0,0,.35) 50%,transparent 58%)}
@media (max-width:1023px){.hero::after{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 70%);mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 70%)}}
.hero-photo{border-radius:0}
.strip{border-top:1px solid rgba(245,244,240,.10)}
.strip li{display:flex;align-items:center;gap:12px;border-left-color:rgba(245,244,240,.10);color:var(--paper)}
.strip .ic{width:20px;height:20px;color:var(--brass);vertical-align:0}
.strip li:last-child .ic{color:var(--verdigris)}
.strip .dot{margin-left:2px}
@media (max-width:1279px){.strip li:nth-child(n+3){border-top-color:rgba(245,244,240,.10)}}

/* ---------- PROOF ---------- */
.numerals li{position:relative}
.numerals .tile{display:flex;margin-bottom:20px}
.numerals .n{background:linear-gradient(180deg,#FFFFFF 0%,#C9CFDC 100%);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;width:max-content}
.numerals .n + .rule{background:linear-gradient(90deg,var(--brass) 0,var(--brass) 48px,var(--hairline-dark) 48px)}
.proof-left .photo{margin-top:40px;box-shadow:var(--shadow-panel)}
.proof-left .caption{margin-top:12px;color:var(--mist);line-height:1.5}
.proof-left .footline{margin-top:32px}
.footline{display:inline-flex;align-items:center;gap:10px}
.footline .ic{width:16px;height:16px;color:var(--brass);vertical-align:0}
.row-ic{grid-template-columns:40px minmax(0,1fr) auto;align-items:center}
.row-ic.row-2{grid-template-columns:40px minmax(0,1fr)}
.row-ic .tile{width:40px;height:40px}
@media (max-width:1023px){.numerals .tile{margin-bottom:16px}.numerals li{padding:28px 0}}

/* ---------- HOW IT WORKS ---------- */
.steps li{position:relative}
.steps .step-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.steps .n + .rule{margin-top:0}
.steps .step-top + .rule{height:1px;background:var(--hairline-light);margin-top:16px}
.steps .t{margin-top:16px}
.steps li:nth-child(4) .step-top + .rule{background:linear-gradient(90deg,var(--verdigris-deep) 0,var(--verdigris-deep) 48px,var(--hairline-light) 48px)}
.steps .state{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1;text-transform:uppercase;color:var(--verdigris-deep)}
.steps .state-off{color:var(--midnight);opacity:.7}
.steps .state-off .dot{background:var(--midnight);box-shadow:0 0 0 3px rgba(11,18,32,.08);opacity:.6}
.loads-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-top:24px;align-items:start}
.loads-top .intro{grid-column:1 / span 6;margin-top:0;max-width:none}
.loads-top .photo{grid-column:8 / -1;box-shadow:var(--shadow-card)}
.loads-legend{margin-top:40px;display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1;text-transform:uppercase;color:var(--verdigris-deep)}
.loads{margin-top:16px}
.loads .row{grid-template-columns:40px minmax(0,1fr);align-items:center;padding:12px 0}
.loads-close{display:flex;align-items:center;gap:12px}
.loads-close .ic{color:var(--brass-deep)}
@media (max-width:1023px){
  .steps li{grid-template-columns:minmax(0,1fr);align-items:start}
  .steps .step-top{justify-content:flex-start;gap:16px;align-items:center}
  .steps .step-top + .rule{display:none}
  .steps .t{margin-top:12px}
  .loads-top{grid-template-columns:1fr}
  .loads-top .intro,.loads-top .photo{grid-column:1 / -1}
  .loads-top .photo{margin-top:32px}
}

/* ---------- EQUIPMENT ---------- */
.equip-head .tags{margin-top:28px}
.equip-right .photo{box-shadow:var(--shadow-card)}

/* ---------- WHO FOR ---------- */
.card{box-shadow:var(--shadow-card);transition:box-shadow .25s,transform .25s}
.card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.card .photo{position:relative}
.card .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,32,0) 60%,rgba(11,18,32,.28))}
.card-body .tag{margin-bottom:16px}
.card-res .row .key{color:var(--brass-deep)}
.card-com .row .key{color:var(--steel-deep)}
.card-res{--card-hue:var(--brass-deep)}
.card-com{--card-hue:var(--steel-deep)}

/* ---------- REVIEWS ---------- */
.reviews .lab{display:flex;align-items:center;gap:12px}
.quote{position:relative}
.quote .qmark{display:block;width:44px;height:44px;color:var(--brass);opacity:.9;margin-bottom:20px}
.quote blockquote{text-indent:0}
.quote figcaption{display:flex;align-items:center;gap:16px;margin-top:24px}
.quote figcaption span{margin-top:0}
.qrow{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:20px;align-items:start;padding:24px 0}
.qrow .avatar{margin-top:2px}
.recog-list li{display:flex;align-items:center;gap:12px}
.recog-list .ic{width:18px;height:18px;color:var(--brass-deep);vertical-align:0}
.recog .platforms{margin-top:16px}
@media (max-width:719px){.quote .qmark{width:36px;height:36px}}

/* ---------- AREAS ---------- */
.areas-photo .photo{box-shadow:var(--shadow-card)}
.arow{grid-template-columns:32px minmax(0,1fr);column-gap:10px}
.arow .ic{width:28px;height:28px;color:var(--midnight);opacity:.75;position:relative;top:0}
.arow:first-child .ic{color:var(--brass-deep);opacity:1}

/* ---------- INSIGHTS ---------- */
.feat .photo{box-shadow:var(--shadow-card)}
.feat .tag{margin-top:20px}
.feat .tag + .h3{margin-top:14px}
.irow{grid-template-columns:minmax(0,1fr);row-gap:10px}
.irow .tag{justify-self:start}
.irows{grid-template-rows:none}

/* ---------- ASSESSMENT ---------- */
.assess{background:radial-gradient(60% 50% at 78% 20%,rgba(217,161,43,.08),rgba(217,161,43,0) 70%),linear-gradient(180deg,#0B1220,#0D1526)}
.assess-steps{margin-top:32px;display:grid;gap:12px}
.assess-steps li{display:flex;align-items:center;gap:16px}
.assess-steps .tile{width:44px;height:44px}
.assess-left .photo{box-shadow:var(--shadow-panel)}
.assess-left .phone a{display:inline-flex;align-items:center;gap:12px}
.assess-left .phone .ic{width:24px;height:24px;color:var(--brass);vertical-align:0}
.panel{
  background:linear-gradient(180deg,#19243F 0%,#131C33 100%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:var(--shadow-panel);
}
.panel-head{grid-column:1 / -1;display:flex;align-items:center;gap:14px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:4px}
.panel-head .tile{width:40px;height:40px}
.panel-head p{font-size:14px;line-height:1.45;color:var(--mist)}
.panel-head p b{display:block;font-weight:600;font-size:16px;line-height:20px;color:var(--paper);margin-bottom:2px}
.field input,.field textarea{background:rgba(11,18,32,.75);border-color:rgba(245,244,240,.14);box-shadow:0 1px 0 rgba(255,255,255,.03) inset;transition:border-color .15s,box-shadow .15s}
.field input:hover,.field textarea:hover{border-color:rgba(245,244,240,.3)}
.field input:focus-visible,.field textarea:focus-visible{outline:0;border-color:var(--brass);box-shadow:0 0 0 3px rgba(217,161,43,.25)}
.seg button{border-color:rgba(245,244,240,.14);background:rgba(11,18,32,.5)}
.seg button[aria-pressed="true"]{background:linear-gradient(180deg,#FFFFFF,#EDEBE5);color:var(--midnight);border-color:transparent;box-shadow:0 2px 8px -2px rgba(0,0,0,.4)}
.seg button .ic{margin-right:8px;vertical-align:-4px}
.demo{display:flex;align-items:center;justify-content:center;gap:8px}

/* ---------- FOOTER ---------- */
.f-social{gap:8px}
.f-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:0;padding:0;background:transparent;border:1px solid var(--tile-bd);color:var(--paper);transition:background-color .15s,border-color .15s,color .15s}
.f-social a:hover{text-decoration:none;background:rgba(245,244,240,.1);border-color:rgba(245,244,240,.22)}
.f-social .ic{width:20px;height:20px;vertical-align:0}
.f-news .field{position:relative}
.f-news .field .ic{position:absolute;left:14px;bottom:14px;width:20px;height:20px;color:var(--mist);pointer-events:none}
.f-news .field input{padding-left:44px}
.f-bottom .lic{display:inline-flex;align-items:center;gap:10px}
.f-bottom .lic .ic{width:16px;height:16px;vertical-align:0}

/* ---------- MOBILE BAR ---------- */
.mbar{background:linear-gradient(180deg,rgba(11,18,32,.94),rgba(11,18,32,.98));box-shadow:0 -12px 32px -16px rgba(0,0,0,.6)}
.mbar .btn .ic{margin-right:8px}

/* Reduced motion: still no reveals; the dot stops breathing */
@media (prefers-reduced-motion:reduce){.dot-live{animation:none}.card:hover{transform:none}}

/* ---------- HERO HEADLINE: the grid shorts out, the house pulls the light back on (Josh, 2026-09-09) ----------
   Timeline (s): 0.9 "grid fails" starts flickering · 3.7 it dies to a knockout outline · 3.4 the headline dims ·
   4.3 a pull string appears above the i of "notice" · 4.7 the dot climbs the string · 5.25 it yanks ·
   5.4 the lights come back on · 5.9 the dot is home, the string is gone. Static end state under reduced motion. */
.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}
.hero .h1{animation:lights 2.6s ease-in-out 3.3s forwards}
@keyframes lights{
  0%{color:var(--paper);text-shadow:none}
  25%,75%{color:rgba(245,244,240,.32);text-shadow:none}
  81%{color:#FFFFFF;text-shadow:0 0 34px rgba(217,161,43,.45)}
  100%{color:var(--paper);text-shadow:none}
}
.hero .h1 .short{
  -webkit-text-stroke:1.5px rgba(245,244,240,0);paint-order:stroke fill;
  animation:short-out 2.8s cubic-bezier(.2,.7,.3,1) .9s forwards;
}
@keyframes short-out{
  0%,30%{color:var(--paper);-webkit-text-stroke-color:rgba(245,244,240,0);text-shadow:none}
  33%{color:rgba(245,244,240,.25)}
  36%{color:var(--paper);text-shadow:0 0 22px rgba(217,161,43,.55)}
  40%{color:rgba(245,244,240,.4);text-shadow:none}
  43%{color:var(--paper)}
  49%{color:rgba(245,244,240,.15)}
  52%{color:var(--paper);text-shadow:0 0 28px rgba(217,161,43,.7)}
  58%{color:rgba(245,244,240,.55);text-shadow:none}
  63%{color:var(--paper)}
  67%{color:rgba(245,244,240,.1)}
  70%{color:rgba(245,244,240,.8)}
  74%{color:#0C1423;-webkit-text-stroke-color:rgba(245,244,240,.3)}
  77%{color:rgba(245,244,240,.5);-webkit-text-stroke-color:rgba(245,244,240,.4)}
  82%,100%{color:#0C1423;-webkit-text-stroke-color:rgba(245,244,240,.55);text-shadow:none}
}
.hero .h1 .i-pull{position:relative;display:inline-block}
.hero .h1 .stem{display:inline-block}
.hero .h1 .tittle{
  position:absolute;left:50%;top:.045em;width:.155em;height:.155em;margin-left:-.0775em;border-radius:50%;background:var(--paper);
  animation:dot-pull 1.3s cubic-bezier(.3,.8,.3,1) 4.7s forwards;
}
@keyframes dot-pull{
  0%{transform:translateY(0)}
  32%,44%{transform:translateY(-.34em)}
  52%{transform:translateY(-.16em)}
  62%{transform:translateY(-.24em)}
  100%{transform:translateY(0)}
}
.hero .h1 .string{
  position:absolute;left:50%;bottom:calc(100% + .16em);width:1.5px;height:.95em;margin-left:-.75px;
  background:linear-gradient(180deg,rgba(245,244,240,0) 0%,rgba(245,244,240,.35) 45%,rgba(245,244,240,.9) 100%);
  transform-origin:top center;opacity:0;
  animation:string-pull 1.7s ease-in-out 4.3s forwards;
}
@keyframes string-pull{
  0%{opacity:0;transform:translateY(0)}
  18%,58%{opacity:1;transform:translateY(0)}
  64%{opacity:1;transform:translateY(.18em)}
  72%{opacity:.9;transform:translateY(.1em)}
  80%{opacity:.6;transform:translateY(-.1em)}
  100%{opacity:0;transform:translateY(-.5em)}
}
@media (prefers-reduced-motion:reduce){
  .hero .h1,.hero .h1 .tittle,.hero .h1 .string{animation:none}
  .hero .h1 .string{display:none}
  .hero .h1 .short{animation:none;color:#0C1423;-webkit-text-stroke-color:rgba(245,244,240,.55)}
}

/* ---------- Mobile fixes 2026-09-09 ---------- */
.hero .h1 .lit{display:inline-block;white-space:nowrap}
@media (max-width:389px){.hero .h1{font-size:40px}}

/* ---------- Reveal: lists enter, then their icons switch on in order ----------
   js/site.js adds data-reveal to each list it observes and ic-off to each icon host,
   so with JavaScript off nothing is hidden. Under prefers-reduced-motion the script
   never runs. Print forces everything visible. */
[data-ground="dark"]{--ic-off:rgba(245,244,240,.26);--ic-off-bd:rgba(245,244,240,.10);--ic-ring:rgba(245,244,240,.35)}
[data-ground="light"]{--ic-off:rgba(11,18,32,.26);--ic-off-bd:rgba(11,18,32,.10);--ic-ring:rgba(11,18,32,.22)}
@media (prefers-reduced-motion:no-preference){
  [data-reveal] > li,[data-reveal] > .row,[data-reveal] > .qrow{opacity:0;transform:translateY(10px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
  [data-reveal].is-in > li,[data-reveal].is-in > .row,[data-reveal].is-in > .qrow{opacity:1;transform:none}
  [data-reveal] .tile,[data-reveal] svg.ic,[data-reveal] .dot{transition:color .28s ease,border-color .28s ease,background-color .28s ease}
  [data-reveal] .ic-off{color:var(--ic-off) !important;border-color:var(--ic-off-bd) !important;background:transparent !important;box-shadow:none !important;animation:none !important}
  .ic-on{animation:ic-on .55s cubic-bezier(.2,.7,.2,1)}
  svg.ic.ic-on{animation-name:ic-on-glyph}
  @keyframes ic-on{0%{box-shadow:0 0 0 0 var(--ic-ring);filter:brightness(1.8)}100%{box-shadow:0 0 0 10px rgba(0,0,0,0);filter:none}}
  @keyframes ic-on-glyph{0%{filter:brightness(2) drop-shadow(0 0 6px currentColor)}100%{filter:none}}
}
@media print{[data-reveal] > *{opacity:1 !important;transform:none !important}.ic-off{color:inherit !important}}

/* ---------- NAV DROPDOWNS (Josh 2026-09-09: the old site's Residential / Commercial / About groups) ---------- */
.nav-item{position:relative;display:flex;align-items:center;gap:2px}
.nav-caret{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--paper);opacity:.7;border-radius:var(--r);transition:opacity .15s,transform .2s}
.nav-caret .ic{width:14px;height:14px;vertical-align:0}
.nav-item:hover .nav-caret,.nav-item.is-open .nav-caret,.nav-caret:focus-visible{opacity:1}
.nav-item.is-open .nav-caret{transform:rotate(180deg)}
.dd{position:absolute;left:-16px;top:100%;padding-top:14px;min-width:300px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s .22s;z-index:55}
.nav-item:hover .dd,.nav-item:focus-within .dd,.nav-item.is-open .dd{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .2s,transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s}
.dd-inner{background:linear-gradient(180deg,#141D34,#0F1830);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:10px;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 32px 64px -24px rgba(0,0,0,.7);display:grid;gap:8px}
.dd-links{display:grid}
.dd-links a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r);color:var(--paper);text-decoration:none;font-size:15px;line-height:20px;font-weight:500;white-space:nowrap;transition:background-color .15s}
.dd-links a:hover,.dd-links a:focus-visible{background:rgba(245,244,240,.06);text-decoration:none}
.dd-links .tile{width:32px;height:32px}
.dd-links .tile .ic{width:18px;height:18px}
.dd-feature{display:flex;align-items:flex-start;gap:12px;padding:14px 12px;border-top:1px solid rgba(255,255,255,.08);color:var(--paper);text-decoration:none;transition:background-color .15s;border-radius:0 0 var(--r) var(--r)}
.dd-feature:hover,.dd-feature:focus-visible{background:rgba(245,244,240,.05)}
.dd-feature .tile{width:32px;height:32px;margin-top:1px}
.dd-feature .tile .ic{width:18px;height:18px}
.dd-feature-text{display:flex;flex-direction:column;gap:3px;max-width:26ch}
.dd-feature-text b{font-weight:600;font-size:15px;line-height:20px}
.dd-feature-text span{font-size:13px;line-height:1.45;color:var(--mist)}
.nav-item.is-open > a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
@media (prefers-reduced-motion:reduce){.dd{transition:none}.nav-caret{transition:none}}

/* Mobile menu groups */
.menu-group{border-top:1px solid var(--hairline-dark)}
.menu-list > a + .menu-group,.menu-group + a{border-top:1px solid var(--hairline-dark)}
.menu-list a{border-top:0}
.menu-list > a{border-top:1px solid var(--hairline-dark)}
.menu-list > a:first-child{border-top:0}
.menu-list > .menu-group:first-child{border-top:0}
.menu-list > a:last-child{border-bottom:1px solid var(--hairline-dark)}
.menu-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.menu-row > a{flex:1 1 auto}
.menu-caret{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;color:var(--paper);opacity:.75;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .15s;flex:0 0 auto}
.menu-caret .ic{width:18px;height:18px;vertical-align:0}
.menu-group.is-open .menu-caret{transform:rotate(180deg);opacity:1}
.menu-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.2,.8,.2,1)}
.menu-sub > div{overflow:hidden;min-height:0;display:flex;flex-direction:column;padding-left:52px}
.menu-group.is-open .menu-sub{grid-template-rows:1fr}
.menu-sub a{font-size:17px;line-height:1.35;font-weight:500;letter-spacing:0;padding:10px 0;color:var(--paper);text-decoration:none;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .3s}
.menu-group.is-open .menu-sub a{opacity:1;transform:none}
.menu-sub > div{padding-bottom:0}
.menu-group.is-open .menu-sub > div{padding-bottom:10px}
@media (prefers-reduced-motion:reduce){.menu-sub,.menu-sub a,.menu-caret{transition:none}}

/* Social in the top bar (Josh 2026-09-09) */
.nav-social{display:flex;align-items:center;gap:2px}
.nav-social a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--paper);opacity:.72;border-radius:var(--r);transition:opacity .15s,background-color .15s}
.nav-social a:hover,.nav-social a:focus-visible{opacity:1;background:rgba(245,244,240,.08)}
.nav-social .ic{width:18px;height:18px;vertical-align:0}
@media (max-width:1023px){.nav-social{display:none}}

/* Logo bolt sparks on hover (Josh 2026-09-09) */
.lockup .bolt{transform-box:fill-box;transform-origin:center}
.lockup .sparks circle{fill:#F5C400;opacity:0;transform-box:fill-box;transform-origin:center}
.lockup:hover .bolt,.lockup:focus-visible .bolt{animation:bolt-spark .7s cubic-bezier(.2,.8,.2,1)}
.lockup:hover .sparks circle,.lockup:focus-visible .sparks circle{animation:spark-fly .7s ease-out}
.lockup .sparks circle:nth-child(1){--dx:-16px;--dy:-22px}
.lockup .sparks circle:nth-child(2){--dx:14px;--dy:-24px;animation-delay:.05s}
.lockup .sparks circle:nth-child(3){--dx:22px;--dy:-8px;animation-delay:.1s}
.lockup .sparks circle:nth-child(4){--dx:16px;--dy:22px;animation-delay:.04s}
.lockup .sparks circle:nth-child(5){--dx:-14px;--dy:20px;animation-delay:.09s}
@keyframes bolt-spark{0%{fill:#F5C400;filter:none}18%{fill:#FFF6C8;filter:drop-shadow(0 0 6px rgba(245,196,0,.9))}32%{fill:#F5C400;filter:drop-shadow(0 0 2px rgba(245,196,0,.4))}46%{fill:#FFFFFF;filter:drop-shadow(0 0 8px rgba(245,196,0,1))}100%{fill:#F5C400;filter:none}}
@keyframes spark-fly{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
@media (prefers-reduced-motion:reduce){.lockup:hover .bolt,.lockup:hover .sparks circle{animation:none}}

/* Dropdown feature card as a call to action (Josh 2026-09-09) */
.nav-links .dd-feature{margin:2px 0 0;padding:12px;border:1px solid var(--tint-brass-bd);border-top:1px solid var(--tint-brass-bd);border-radius:var(--r);background:linear-gradient(180deg,rgba(217,161,43,.16),rgba(217,161,43,.08))}
.dd-feature:hover,.dd-feature:focus-visible{background:linear-gradient(180deg,rgba(217,161,43,.24),rgba(217,161,43,.12));border-color:rgba(217,161,43,.5)}
.dd-feature .tile{color:var(--brass);border-color:rgba(217,161,43,.45)}
.dd-feature-text b{color:var(--brass-light)}
.dd-feature-text span{color:var(--paper);opacity:.75}

/* ---------- HOW IT WORKS: THE CUTAWAY (Josh 2026-09-09) ----------
   One 3D cutaway of the house and generator. Each step is a button that moves a soft spotlight and a brass ring
   to its region of the image. Steps auto-advance every few seconds until someone clicks; a thin progress line shows
   the timing. Hotspots are percentages of the image box (data-x/y/w/h) so the render can be swapped. */
.cutaway{grid-column:1 / -1;margin-top:64px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center}
.cut-fig{grid-column:1 / span 8;margin:0}
.cut-stage{position:relative;overflow:hidden;border-radius:var(--r-lg);background:#F7F6F2;box-shadow:var(--shadow-card);isolation:isolate}
.cut-stage img{display:block;width:100%;height:auto}
.cut-shade{position:absolute;left:var(--x,2%);top:var(--y,4%);width:var(--w,26%);height:var(--h,86%);border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 4000px rgba(11,18,32,.42);filter:blur(22px);transition:left .7s cubic-bezier(.2,.8,.2,1),top .7s cubic-bezier(.2,.8,.2,1),width .7s cubic-bezier(.2,.8,.2,1),height .7s cubic-bezier(.2,.8,.2,1)}
.cut-ring{position:absolute;left:var(--x,2%);top:var(--y,4%);width:var(--w,26%);height:var(--h,86%);border-radius:50%;pointer-events:none;
  border:1.5px solid var(--ring,var(--brass));box-shadow:0 0 0 6px var(--ring-tint,rgba(217,161,43,.18)),0 0 40px -6px var(--ring,var(--brass));opacity:.9;
  transition:left .7s cubic-bezier(.2,.8,.2,1),top .7s cubic-bezier(.2,.8,.2,1),width .7s cubic-bezier(.2,.8,.2,1),height .7s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s}
.cutaway.st-off{--ring:rgba(11,18,32,.6);--ring-tint:rgba(11,18,32,.10)}
.cutaway.st-brass{--ring:var(--brass-deep);--ring-tint:rgba(217,161,43,.22)}
.cutaway.st-verd{--ring:var(--verdigris-deep);--ring-tint:rgba(34,115,75,.18)}
.cut-fig figcaption{margin-top:12px;opacity:.6}
.cut-steps{grid-column:9 / -1;display:flex;flex-direction:column}
.cut-steps li{border-top:1px solid var(--hairline-light)}
.cut-steps li:last-child{border-bottom:1px solid var(--hairline-light)}
.cut-step{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;align-items:start;width:100%;text-align:left;padding:18px 0 18px;color:var(--midnight);opacity:.55;transition:opacity .3s;cursor:pointer;border-radius:0}
.cut-step:hover{opacity:.85}
.cut-step.is-active{opacity:1}
.cut-step .tile{margin-top:2px}
.cut-body{display:flex;flex-direction:column;gap:6px}
.cut-step .n{font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1;text-transform:uppercase;opacity:.7}
.cut-step .t{font-size:17px;line-height:1.4;font-weight:500;letter-spacing:-.005em}
.cut-step .state{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1;text-transform:uppercase;margin-top:2px}
.cut-step.st-off .state{color:var(--midnight);opacity:.7}
.cut-step.st-off .state .dot{background:var(--midnight);box-shadow:0 0 0 3px rgba(11,18,32,.08);opacity:.6}
.cut-step.st-brass .state{color:var(--brass-deep)}
.cut-step.st-brass .state .dot{background:var(--brass-deep);box-shadow:0 0 0 3px var(--tint-brass)}
.cut-step.st-verd .state{color:var(--verdigris-deep)}
.cut-step.st-verd .state .dot{background:var(--verdigris-deep);box-shadow:0 0 0 3px var(--tint-verd)}
.cut-step.st-off .tile{color:var(--midnight)}
.cut-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brass-deep);transform:scaleX(0);transform-origin:left;pointer-events:none}
.cut-step.st-verd .cut-progress{background:var(--verdigris-deep)}
.cut-step.st-off .cut-progress{background:rgba(11,18,32,.5)}
.cutaway.is-playing .cut-step.is-active .cut-progress{animation:cut-progress var(--dur,4.8s) linear forwards}
@keyframes cut-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cut-step:focus-visible{outline:2px solid var(--brass-deep);outline-offset:-2px}
@media (max-width:1023px){
  .cutaway{margin-top:48px;align-items:start}
  .cut-fig,.cut-steps{grid-column:1 / -1}
  .cut-steps{margin-top:32px}
  .cut-shade{filter:blur(14px)}
}
@media (prefers-reduced-motion:reduce){.cut-shade,.cut-ring{transition:none}.cutaway.is-playing .cut-step.is-active .cut-progress{animation:none}}