/* ENP Energy — shared design system.
   Built to notes/PAGE-DESIGN-STANDARD.md. Structure/density reference:
   the Surfe landing page on Landingfolio (big centered display, full-bleed
   color bands, one high-chroma accent, generous whitespace).

   Palette note: the accent is a thermal copper-orange. It is the color of a
   winding, and it is the color a thermographic survey prints heat in — two of
   the three services this company sells. Saturation 100% HSL, so it clears the
   high-chroma gate in the standard. One accent, nowhere else.

   Spacing ladder: 4 8 12 16 24 32 48 64 96 128 160 192. Nothing off it. */

*{box-sizing:border-box;margin:0}

:root{
  --ink:#060C15;            /* navy-black, never #000 at area */
  --ink-2:#0D1826;          /* the raised industrial panel */
  --surface:#F5F8FB;        /* cool off-white, never #FFF at area */
  --card:#FCFDFF;
  --accent:#1E90FF;         /* the one accent: electric blue, sat 100% */
  --accent-lo:#0B6FD6;      /* the button gradient's foot */
  --accent-dk:#0A4E9B;      /* the solid pressed edge */

  /* Accent-as-TEXT needs a deeper blue than accent-as-FILL: #1E90FF on the
     off-white ground is about 3:1, which fails body text. So the accent is
     scoped. --accent-txt is the deep blue on light surfaces; every dark
     surface redefines it back to the bright accent, where bright-on-near-
     black is the high-contrast direction. Fill with --accent, write or
     stroke an icon with --accent-txt. */
  --accent-txt:#0A5FC4;

  /* White text on #1E90FF measures 3.24:1 — enough for display type, not for a
     12-14px label. Every small-label surface is filled with this instead, which
     measures 4.93:1 against white. Bright accent = marks, icons, borders.
     --accent-fill = anything with white words on it. */
  --accent-fill:#0B6FD6;
  --muted:#586B80;
  --steel:#E2EBF4;          /* the cool band */
  --line:rgba(6,12,21,.10);
  --line-lt:rgba(255,255,255,.16);
  --shadow:0 1px 2px rgba(6,12,21,.05), 0 8px 16px -6px rgba(6,12,21,.06), 0 24px 48px -20px rgba(6,12,21,.08);
  --shadow-up:0 2px 4px rgba(6,12,21,.06), 0 12px 24px -8px rgba(6,12,21,.07), 0 32px 64px -24px rgba(6,12,21,.08);
}

.band-ink,.band-ink2,.band-moving,.hero,footer.site,.sendfx{
  --accent-txt:var(--accent);
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--surface);color:var(--ink);overflow-x:clip;
  font:400 17px/1.6 Figtree,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  padding-bottom:64px}
@media(min-width:900px){body{padding-bottom:0}}
img,svg,video,iframe{max-width:100%}
h1,h2,h3{font-family:Archivo,'Arial Black',Impact,sans-serif;font-weight:800}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.ic{width:20px;height:20px;flex:none}
.inner{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent-fill);color:#fff;padding:12px 16px;
  font-weight:800;z-index:200}
.skip:focus{left:8px;top:8px}

/* ── type: five sizes, no sixth ─────────────────────────────────────────── */
.display{font-size:clamp(40px,8.2vw,88px);line-height:.90;letter-spacing:-.03em;text-transform:uppercase}
.h2{font-size:clamp(30px,5vw,52px);line-height:1.02;letter-spacing:-.025em;text-transform:uppercase}
.h3{font-size:clamp(19px,2.4vw,24px);line-height:1.18;letter-spacing:-.02em}
.lead{font-size:clamp(18px,2.7vw,25px);line-height:1.45;letter-spacing:-.01em}
.micro{font-size:13px;line-height:1.5}
.eyebrow{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:12px;line-height:1.2;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-txt)}
.narrow{max-width:58ch;margin-left:auto;margin-right:auto}
.center{text-align:center}
em.hl{font-style:normal;color:var(--accent-txt)}

/* ── the top bars ───────────────────────────────────────────────────────
   Light, deliberately. The mark is blue on white/silver, and it was
   disappearing into a near-black header — a logo needs a ground that is not
   the same value as the logo. The dark starts at the hero instead. */
.callbar{background:var(--steel);display:flex;justify-content:center;align-items:center;gap:8px;
  flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid var(--line);position:relative;z-index:40}
.callbar a{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 0;min-width:0;
  min-height:48px;border:1.5px solid rgba(6,12,21,.16);border-radius:999px;padding:4px 12px;
  color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;line-height:1.25;
  background:var(--card);
  transition:background .13s ease-out,border-color .13s ease-out}
.callbar a:hover{border-color:var(--accent);color:var(--accent-txt)}
.callbar .ic{width:16px;height:16px;color:var(--accent-txt)}
.dot{width:8px;height:8px;border-radius:50%;background:#31D07A;flex:none;
  box-shadow:0 0 0 0 rgba(49,208,122,.7);animation:live 2.2s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(49,208,122,.7)}70%{box-shadow:0 0 0 8px rgba(49,208,122,0)}100%{box-shadow:0 0 0 0 rgba(49,208,122,0)}}
@media(min-width:640px){.callbar a{flex:0 0 auto;padding:8px 20px;font-size:16px}}

/* Desktop carries a proper header. Mobile drops the nav to a sheet — the
   standard says do not spend the first 60px of a phone screen on a logo bar,
   so on mobile the bar is only the mark plus one tap target. */
header.top{position:sticky;top:0;z-index:38;background:rgba(252,253,255,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.topin{max-width:1180px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:48px}
.brand img{height:38px;width:auto;display:block}
@media(min-width:900px){.brand img{height:46px}}
/* Shown only if the logo fails to load — the onerror handler unhides it. Its
   type is declared unconditionally so it can never appear as raw body text. */
.brand .bt{display:none;font-family:Archivo,sans-serif;font-weight:800;font-size:15px;
  line-height:1.05;letter-spacing:-.01em;color:var(--ink);text-transform:uppercase;white-space:nowrap}
.brand .bt span{display:block;font-size:9px;font-weight:700;letter-spacing:.14em;
  color:var(--muted);margin-top:4px;white-space:nowrap}
@media(max-width:389px){.brand .bt span{display:none}}
nav.main{display:none}
@media(min-width:900px){
  nav.main{display:flex;align-items:center;gap:32px}
  nav.main a{color:var(--muted);text-decoration:none;font-weight:600;font-size:15.5px;
    padding:8px 0;position:relative;transition:color .13s ease-out}
  nav.main a:hover,nav.main a[aria-current=page]{color:var(--ink)}
  nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
    background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .16s ease-out}
  nav.main a:hover::after,nav.main a[aria-current=page]::after{transform:scaleX(1)}
}
.navcta{display:none}
@media(min-width:900px){
  .navcta{display:inline-flex;align-items:center;gap:8px;background:var(--accent-fill);color:#fff;
    text-decoration:none;font-family:Archivo,sans-serif;font-weight:800;font-size:14px;
    letter-spacing:.02em;text-transform:uppercase;padding:12px 20px;border-radius:999px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 2px 0 var(--accent-dk);
    transition:transform .12s ease-out,filter .12s ease-out}
  .navcta:hover{filter:brightness(1.08);transform:translateY(-2px)}
  .navcta:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 var(--accent-dk)}
}
/* mobile menu */
.burger{display:grid;place-items:center;width:48px;height:48px;border:1.5px solid var(--line);
  border-radius:12px;background:var(--card);color:var(--ink);cursor:pointer}
.burger svg{width:22px;height:22px}
@media(min-width:900px){.burger{display:none}}
/* Light, to match the header — and it MUST stay in step with .sheet a.nl
   below. These were once out of step by one edit: the links went to --ink
   while this stayed dark, which made the whole menu invisible on a phone. */
.sheet{position:fixed;inset:0;z-index:60;background:var(--surface);
  display:none;flex-direction:column;padding:24px;overflow-y:auto}
.sheet.open{display:flex;animation:fade .22s ease-out}
.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:32px}
.sheet a.nl{display:flex;align-items:center;justify-content:space-between;gap:16px;
  color:var(--ink);text-decoration:none;font-family:Archivo,sans-serif;font-weight:800;
  font-size:26px;letter-spacing:-.02em;text-transform:uppercase;padding:16px 0;
  border-bottom:1px solid var(--line)}
.sheet a.nl .ic{color:var(--accent-txt)}
.sheet .btn-ghost{border-color:var(--line);color:var(--ink)}
.sheet .btn-ghost:hover{background:rgba(6,12,21,.05);border-color:var(--accent)}
.sheet .sheet-foot{margin-top:32px;display:grid;gap:12px}

/* ── band rhythm ────────────────────────────────────────────────────────── */
section{position:relative}
/* the sticky header is ~70px; without this an in-page anchor lands with the
   heading hidden behind it */
section[id],[id].band{scroll-margin-top:88px}
.band{padding:64px 0}
.band-ink{background:var(--ink);color:#fff}
.band-ink2{background:var(--ink-2);color:#fff}
.band-surface{background:var(--surface)}
.band-steel{background:var(--steel)}
.band-moving{background:var(--ink);color:#fff;overflow:hidden}
@media(min-width:900px){.band{padding:128px 0}}
.band-ink .lead,.band-ink2 .lead,.band-moving .lead{color:rgba(255,255,255,.84)}
.band-ink .h2,.band-ink2 .h2,.band-moving .h2{color:#fff}

/* ── THE HERO. Never naked: a built, moving, zero-byte background. ───────
   Five layers, all CSS/SVG so nothing can 404 and nothing ships a megabyte:
     1 .kb      generator stator — conic slots + copper core, Ken Burns
     2 .coils   winding arcs drifting
     3 .therm   the thermographic sweep travelling across the frame
     4 .grid    the plant grid
     5 .scrim   gradient in the client ink, under all text
   Everything freezes under prefers-reduced-motion.  ------------------------ */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:48px 0 64px;text-align:center;isolation:isolate}
@media(min-width:900px){.hero{padding:96px 0 128px}}
.hero-sm{padding:48px 0 48px}
@media(min-width:900px){.hero-sm{padding:96px 0 96px}}

.bgwrap{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.kb{position:absolute;inset:-14%;will-change:transform;
  animation:kb 26s ease-in-out infinite alternate;
  background:
    radial-gradient(circle at 50% 42%, rgba(30,144,255,.30) 0%, rgba(30,144,255,0) 42%),
    radial-gradient(circle at 50% 42%, #16324F 0%, #0B1A2C 34%, #060C15 62%);
}
/* The stator slots. On their own layer and masked to an annulus, so they are
   machine geometry at the rim and nothing at all behind the headline — a
   full-frame conic reads as a sunburst, which is the cliche, not the machine. */
.slots{position:absolute;inset:-14%;will-change:transform;
  animation:kb 26s ease-in-out infinite alternate;
  background:repeating-conic-gradient(from .7deg at 50% 42%,
    rgba(150,205,255,.22) 0deg 1.1deg, rgba(150,205,255,0) 1.1deg 4.4deg);
  -webkit-mask-image:radial-gradient(circle at 50% 42%,transparent 14%,#000 34%,#000 60%,transparent 82%);
  mask-image:radial-gradient(circle at 50% 42%,transparent 14%,#000 34%,#000 60%,transparent 82%)}
@keyframes kb{from{transform:scale(1.05) translate3d(0,0,0)}to{transform:scale(1.28) translate3d(-3.4%,-3.6%,0)}}

.coils{position:absolute;inset:0;width:100%;height:100%;opacity:.72;
  animation:coilspin 54s linear infinite}
@keyframes coilspin{to{transform:rotate(360deg)}}
.coils circle{fill:none;stroke:rgba(214,232,250,.40);stroke-width:1.3;
  stroke-dasharray:14 26;stroke-linecap:round}
.coils .c2{stroke:rgba(30,144,255,.30);stroke-dasharray:6 34}

/* a charge running across the frame — the survey sweep, on the blue axis */
.therm{position:absolute;top:-30%;bottom:-30%;width:58%;left:-60%;
  background:linear-gradient(100deg,
    rgba(30,144,255,0) 0%, rgba(70,170,255,.22) 33%,
    rgba(205,236,255,.38) 52%, rgba(70,170,255,.22) 70%, rgba(30,144,255,0) 100%);
  filter:blur(26px);animation:sweep 8.5s ease-in-out infinite;mix-blend-mode:screen}
@keyframes sweep{0%{left:-60%}55%,100%{left:112%}}

.gridlines{position:absolute;inset:0;opacity:.32;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 15%,transparent 78%);
  mask-image:radial-gradient(ellipse at 50% 40%,#000 15%,transparent 78%)}

/* current running down the bus — travelling sparks */
.sparks{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.sparks path{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.2}
.sparks .sp{stroke:#EAF6FF;stroke-width:4;stroke-linecap:round;
  stroke-dasharray:16 250;filter:drop-shadow(0 0 7px #4FA8FF) drop-shadow(0 0 18px rgba(30,144,255,.9));
  animation:run 3s linear infinite}
.sparks .sp2{animation-duration:3.9s;animation-delay:-1.3s;stroke:#8ED8FF}
.sparks .sp3{animation-duration:3.4s;animation-delay:-2.2s}
.sparks .sp4{animation-duration:4.4s;animation-delay:-0.7s;stroke:#BFE6FF}
@keyframes run{from{stroke-dashoffset:266}to{stroke-dashoffset:0}}

.scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(6,12,21,.72) 0%,rgba(6,12,21,.78) 44%,rgba(6,12,21,.94) 100%)}

/* per-page hero variants, so five pages feel like one family, not one page */
.v-services .kb{background:
    radial-gradient(circle at 32% 50%, rgba(30,144,255,.28) 0%, rgba(30,144,255,0) 46%),
    repeating-linear-gradient(78deg, rgba(160,210,255,.11) 0 2px, rgba(160,210,255,0) 2px 13px),
    radial-gradient(circle at 32% 50%, #15304C 0%, #0A192B 38%, #060C15 66%)}
.v-hire .kb{background:
    radial-gradient(circle at 68% 38%, rgba(120,200,255,.24) 0%, rgba(120,200,255,0) 44%),
    radial-gradient(circle at 68% 38%, #123048 0%, #091728 36%, #060C15 64%)}
.v-hire .slots{background:repeating-conic-gradient(from 18deg at 68% 38%,
    rgba(150,205,255,.19) 0deg 1deg, rgba(150,205,255,0) 1deg 4deg);
  -webkit-mask-image:radial-gradient(circle at 68% 38%,transparent 12%,#000 32%,#000 58%,transparent 80%);
  mask-image:radial-gradient(circle at 68% 38%,transparent 12%,#000 32%,#000 58%,transparent 80%)}
.v-careers .kb{background:
    radial-gradient(circle at 50% 62%, rgba(60,165,255,.28) 0%, rgba(60,165,255,0) 48%),
    repeating-linear-gradient(-70deg, rgba(190,225,255,.10) 0 2px, rgba(190,225,255,0) 2px 15px),
    radial-gradient(circle at 50% 62%, #17334F 0%, #0B1A2C 40%, #060C15 68%)}
.v-contact .kb{background:
    radial-gradient(circle at 50% 50%, rgba(90,180,255,.26) 0%, rgba(90,180,255,0) 50%),
    radial-gradient(circle at 50% 50%, #14304B 0%, #0A192B 42%, #060C15 70%)}
.v-contact .slots{background:repeating-conic-gradient(from 90deg at 50% 50%,
    rgba(255,255,255,.07) 0deg 1.4deg, rgba(255,255,255,0) 1.4deg 6deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 15%,#000 36%,#000 60%,transparent 82%);
  mask-image:radial-gradient(circle at 50% 50%,transparent 15%,#000 36%,#000 60%,transparent 82%)}
.v-services .slots,.v-careers .slots{display:none}
.v-services .therm{animation-duration:17s}
.v-hire .therm{animation-duration:12s}
.v-careers .therm{animation-duration:19s}
.v-contact .therm{animation-duration:15s}

@media(prefers-reduced-motion:reduce){
  .kb,.slots,.coils,.therm,.sparks .sp,.dot,.tap-finger,.tick-run,.pulse{animation:none!important}
  .therm{left:26%}
  html{scroll-behavior:auto}
}

/* ── hero content ───────────────────────────────────────────────────────── */
.hero .eyebrow{margin-bottom:16px}
.headwrap{position:relative;display:inline-block;max-width:100%}
.hero .display{color:#fff;max-width:16ch;margin:0 auto}
.hero .lead{margin:24px auto 0;max-width:54ch}
.hero .lead b{color:#fff;font-weight:700}

.stick{display:inline-block;background:var(--accent-fill);color:#fff;font-family:Archivo,sans-serif;
  font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;line-height:1.25;
  padding:8px 16px;border-radius:8px;transform:rotate(-2deg);
  box-shadow:0 8px 16px -6px rgba(6,12,21,.34);margin-bottom:24px}

/* ── the button: lifted, shined, arrowed, subtexted ─────────────────────── */
.ctawrap{position:relative;display:block;width:min(72%,460px);margin:48px auto 0}
@media(max-width:639px){.ctawrap{width:90%}}
.ctawrap.left{margin-left:0;margin-right:0}
.btn{position:relative;z-index:1;display:block;width:100%;border:0;cursor:pointer;text-decoration:none;
  text-align:center;
  border-radius:999px;padding:20px 28px;font-family:Archivo,sans-serif;color:#fff;
  background:linear-gradient(180deg,var(--accent) 0%,var(--accent-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),
             0 3px 0 var(--accent-dk),
             0 8px 16px -6px rgba(6,12,21,.30),
             0 24px 48px -20px rgba(6,12,21,.34);
  transition:transform .12s ease-out,filter .12s ease-out,box-shadow .12s ease-out}
.btn:hover{filter:brightness(1.07);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 5px 0 var(--accent-dk),
             0 12px 22px -8px rgba(6,12,21,.32),0 30px 56px -22px rgba(6,12,21,.34)}
.btn:active{transform:translateY(3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 var(--accent-dk),0 4px 12px -4px rgba(6,12,21,.30)}
.btn:disabled{filter:grayscale(.35) brightness(.94);cursor:default;transform:none}
.bm{display:flex;align-items:center;justify-content:center;gap:12px;
  font-weight:800;font-size:clamp(17px,3.4vw,21px);letter-spacing:.01em;text-transform:uppercase;line-height:1.15}
.bs{display:block;margin-top:4px;font-family:Figtree,sans-serif;font-weight:600;font-size:13px;
  color:rgba(255,255,255,.88)}
.arw{width:20px;height:20px;flex:none;transition:transform .13s ease-out}
.btn:hover .arw{transform:translateX(4px)}

/* the ghost second action */
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:16px;border-radius:999px;padding:16px 24px;text-decoration:none;
  border:1.5px solid rgba(255,255,255,.34);color:#fff;font-weight:700;font-size:16px;
  background:transparent;cursor:pointer;transition:background .13s ease-out,border-color .13s ease-out}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.6)}
.on-light .btn-ghost{border-color:var(--line);color:var(--ink)}
.on-light .btn-ghost:hover{background:rgba(6,12,21,.05);border-color:rgba(6,12,21,.3)}


/* ── THE ENERGIZE: what happens when a button is pressed ──────────────────
   Two contacts travel in from the edges, meet, throw a contained flash at the
   junction, and then current runs out across the face of the button.

   Deliberately a circuit CLOSING and not an arc jumping a gap. An
   uncontrolled arc between conductors is an arc flash, which is the defining
   safety hazard of this trade and the thing their crews are trained and
   suited against — an animation that celebrates one reads, to an actual
   winder, the way a spray of blood would read on a surgeon's website. Closing
   a circuit on purpose is the same visual beat, and it is the good event:
   contacts meet, the machine comes alive.

   Injected by enp.js on press and removed after, so it costs nothing in
   markup and can never be left half-played on the page.  --------------- */
.zap{position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  pointer-events:none;z-index:2}
/* the two contacts */
.zap i{position:absolute;top:50%;height:2px;width:0;margin-top:-1px;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff);
  box-shadow:0 0 8px rgba(255,255,255,.9);
  animation:zapClose .2s cubic-bezier(.5,0,.75,0) forwards}
.zap i.l{left:0}
.zap i.r{right:0;background:linear-gradient(270deg,rgba(255,255,255,0),#fff)}
@keyframes zapClose{from{width:0}to{width:50%}}
/* the contained flash at the junction */
.zap b{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
  border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 26px 10px rgba(255,255,255,.95),0 0 60px 22px rgba(160,215,255,.8);
  animation:zapFlash .40s ease-out .19s forwards}
@keyframes zapFlash{
  0%{opacity:0;transform:scale(.2)}
  18%{opacity:1;transform:scale(1.9)}
  100%{opacity:0;transform:scale(4.2)}}
/* current running out across the face once the circuit is made */
.zap u{position:absolute;inset:0;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 100%);
  animation:zapRun .42s ease-out .26s forwards}
@keyframes zapRun{
  0%{opacity:0;transform:translateX(-100%)}
  30%{opacity:1}
  100%{opacity:0;transform:translateX(100%)}}

/* Under reduced motion the press still confirms itself, just without the
   theatre: one short flush, no travel. */
@media(prefers-reduced-motion:reduce){
  .zap i,.zap u{display:none}
  .zap b{animation:zapFlashRM .2s ease-out forwards;box-shadow:none;
    width:100%;height:100%;margin:0;left:0;top:0;border-radius:inherit;
    background:rgba(255,255,255,.22)}
  @keyframes zapFlashRM{from{opacity:.9}to{opacity:0}}
}

/* the pointer — the one sanctioned emoji, verbatim from the house spec */
.tap-finger{position:absolute;bottom:-14px;right:-24px;font-size:40px;line-height:1;
  animation:tapMe 1.3s ease-in-out infinite;pointer-events:none;z-index:4}
@keyframes tapMe{0%,100%{transform:translateY(8px) rotate(-12deg)}50%{transform:translateY(-14px) rotate(-12deg)}}
@media(max-width:389px){.tap-finger{right:-12px;font-size:34px}}

/* the architect's circle — stroked once on entry, never looped */
.hero .circ,.circ{position:absolute;inset:-12px -16px;width:calc(100% + 32px);height:calc(100% + 24px);
  pointer-events:none;overflow:visible;z-index:0}
.circ ellipse{fill:none;stroke:rgba(255,255,255,.5);stroke-width:2;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.on-light .circ ellipse{stroke:rgba(6,12,21,.28)}
@media(prefers-reduced-motion:reduce){.circ ellipse{stroke-dashoffset:0!important;transition:none!important}}

/* ── trust row, numbers band, ticker ────────────────────────────────────── */
.trust{list-style:none;padding:0;margin:32px auto 0;display:grid;grid-template-columns:1fr 1fr;
  gap:8px;max-width:680px}
.trust li{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;
  font-weight:600;text-align:left;line-height:1.3;color:rgba(255,255,255,.82);
  border:1px solid var(--line-lt);border-radius:999px;padding:12px 8px}
.trust .ic{width:16px;height:16px;color:var(--accent-txt)}
.trust b{color:#fff;font-weight:800}
@media(min-width:640px){
  .trust{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:920px}
  .trust li{font-size:14px;padding:12px 20px}
}
.heronote{max-width:64ch;margin:24px auto 0;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.62)}

.ticker{background:var(--accent-fill);color:#fff;overflow:hidden;padding:12px 0}
.tick-run{display:flex;align-items:center;gap:24px;width:max-content;animation:tick 34s linear infinite}
.tick-run span{font-family:Archivo,sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap}
.sep{width:12px;height:12px;flex:none;opacity:.6}
@keyframes tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.nums{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 24px;margin-top:48px}
@media(min-width:760px){.nums{grid-template-columns:repeat(4,1fr);gap:48px 32px}}
.num b{display:block;font-family:Archivo,sans-serif;font-weight:800;
  font-size:clamp(38px,6.6vw,68px);line-height:.9;letter-spacing:-.035em;color:var(--accent-txt)}
.num span{display:block;margin-top:12px;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.78)}
.posline{margin-top:48px;border-left:3px solid var(--accent);padding:4px 0 4px 16px;
  font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(20px,3.2vw,30px);line-height:1.22;
  letter-spacing:-.02em;max-width:36ch}

/* ── cards / services / steps ───────────────────────────────────────────── */
.grid2{display:grid;gap:24px;margin-top:48px}
@media(min-width:760px){.grid2{grid-template-columns:1fr 1fr;gap:32px}}
.grid3{display:grid;gap:24px;margin-top:48px}
@media(min-width:860px){.grid3{grid-template-columns:repeat(3,1fr);gap:32px}}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px;
  box-shadow:var(--shadow);position:relative}
.card{text-align:left}
.card .h3{margin:16px 0 12px}
.card p{color:var(--muted);font-size:16px}
.card-dark{background:rgba(255,255,255,.045);border-color:var(--line-lt);box-shadow:none;color:#fff}
.card-dark p{color:rgba(255,255,255,.76)}

.svc{display:block;text-decoration:none;color:inherit;transition:transform .14s ease-out,box-shadow .14s ease-out}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-up)}
.svc .go{display:inline-flex;align-items:center;gap:8px;margin-top:24px;color:var(--accent-txt);
  font-family:Archivo,sans-serif;font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.svc:hover .go .arw{transform:translateX(4px)}

.icb{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;
  background:rgba(30,144,255,.10);border:1px solid rgba(30,144,255,.26)}
.icb svg{width:28px;height:28px;color:var(--accent-txt)}
.card-dark .icb{background:rgba(30,144,255,.16)}

.n-badge{position:absolute;top:-14px;left:32px;width:36px;height:36px;border-radius:50%;
  background:var(--accent-fill);color:#fff;display:grid;place-items:center;
  font-family:Archivo,sans-serif;font-weight:800;font-size:16px;
  box-shadow:0 4px 8px -2px rgba(6,12,21,.24)}

/* the roles table — the thing a plant manager actually scans */
.roles{margin-top:48px;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--card);box-shadow:var(--shadow)}
.band-ink .roles,.band-ink2 .roles,.band-moving .roles{background:rgba(255,255,255,.045);border-color:var(--line-lt)}
.role{display:grid;gap:8px;padding:24px;border-bottom:1px solid var(--line)}
.band-ink .role,.band-ink2 .role,.band-moving .role{border-color:var(--line-lt)}
.role:last-child{border-bottom:0}
@media(min-width:760px){.role{grid-template-columns:220px 1fr;gap:32px;align-items:baseline;padding:24px 32px}}
.role b{font-family:Archivo,sans-serif;font-weight:800;font-size:18px;letter-spacing:-.01em;
  text-transform:uppercase;line-height:1.2}
.role .rc{color:var(--muted);font-size:16px;line-height:1.6}
.band-ink .role .rc,.band-ink2 .role .rc,.band-moving .role .rc{color:rgba(255,255,255,.76)}
.role .tag{display:inline-block;background:rgba(30,144,255,.12);color:var(--accent-txt);
  border-radius:999px;padding:4px 12px;font-family:Archivo,sans-serif;font-weight:800;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;margin-top:8px}

ul.check{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
ul.check li{display:flex;gap:12px;align-items:flex-start;line-height:1.55;font-size:16px}
ul.check li svg{width:20px;height:20px;flex:none;color:var(--accent-txt);margin-top:2px}
.band-ink ul.check li,.band-moving ul.check li{color:rgba(255,255,255,.84)}

/* ── Q&A ────────────────────────────────────────────────────────────────── */
details.qa{background:var(--card);border:1px solid var(--line);border-radius:16px;
  margin-bottom:12px;box-shadow:var(--shadow);overflow:hidden}
details.qa summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:24px;font-family:Archivo,sans-serif;
  font-weight:800;font-size:17.5px;line-height:1.3;letter-spacing:-.01em;min-height:48px}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary .pm{flex:none;width:28px;height:28px;border-radius:50%;background:rgba(30,144,255,.12);
  color:var(--accent-txt);display:grid;place-items:center;font-size:20px;line-height:1;
  transition:transform .16s ease-out}
details.qa[open] summary .pm{transform:rotate(45deg)}
details.qa .ans{padding:0 24px 24px;color:var(--muted);font-size:16px;line-height:1.65}

/* ── forms ──────────────────────────────────────────────────────────────── */
/* The card is light but it sits inside whatever band the page puts it in —
   on the home and careers pages that is a DARK band, and the labels were
   inheriting its white and rendering white-on-white, i.e. invisible. A light
   surface has to declare its own ink rather than inherit the band's. */
.formcard{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;
  padding:24px;box-shadow:var(--shadow-up);max-width:720px;margin:48px auto 0;text-align:left}
.formcard .fl{color:var(--ink)}
.formcard .fl span,.formcard .reassure{color:var(--muted)}
@media(min-width:760px){.formcard{padding:48px}}
.fgrid{display:grid;gap:16px}
@media(min-width:640px){.fgrid.two{grid-template-columns:1fr 1fr}}
.fl{display:block;font-size:13.5px;font-weight:700;letter-spacing:.01em;margin-bottom:4px}
.fl span{color:var(--muted);font-weight:500}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{
  width:100%;min-height:52px;border:2px solid var(--line);border-radius:12px;padding:14px 16px;
  font:400 16px/1.4 Figtree,sans-serif;color:var(--ink);background:#fff;
  transition:border-color .13s ease-out}
textarea{min-height:128px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B7A' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;background-size:20px;padding-right:48px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.reassure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;
  font-size:13px;color:var(--muted);text-align:center;line-height:1.5}
.reassure .ic{width:16px;height:16px;flex:none;color:var(--accent-txt)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:48px;border:2px solid var(--line);
  border-radius:999px;background:#fff;color:var(--ink);padding:8px 18px;
  font:700 15px/1.3 Figtree,sans-serif;cursor:pointer;transition:border-color .13s ease-out,background .13s ease-out}
.chip:hover{border-color:var(--accent)}
.chip.on{border-color:var(--accent);background:#E9F3FF}
.chip.on::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.err{display:none;color:var(--accent-dk);font-size:13.5px;font-weight:700;margin-top:8px}
.err.on{display:block}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer.site{background:var(--ink);color:#fff;padding:64px 0 32px}
@media(min-width:900px){footer.site{padding:96px 0 32px}}
.fgrid-main{display:grid;gap:48px}
@media(min-width:860px){.fgrid-main{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:48px}}
footer.site h4{font-family:Archivo,sans-serif;font-weight:800;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-txt);margin-bottom:16px}
footer.site ul{list-style:none;padding:0;display:grid;gap:12px}
footer.site a{color:rgba(255,255,255,.78);text-decoration:none;font-size:15.5px;line-height:1.5;
  transition:color .13s ease-out}
footer.site a:hover{color:#fff}
footer.site .fblurb{color:rgba(255,255,255,.70);font-size:15.5px;line-height:1.65;margin-top:24px;max-width:38ch}
footer.site .fmark img{height:44px;width:auto;display:block}
.fcontact{display:grid;gap:12px;margin-top:16px}
.fcontact a{display:flex;align-items:center;gap:12px;font-weight:700;color:#fff;font-size:16px;min-height:44px}
.fcontact .ic{color:var(--accent-txt);width:18px;height:18px}
.f247{display:inline-flex;align-items:center;gap:8px;margin-top:16px;border:1px solid var(--line-lt);
  border-radius:999px;padding:8px 16px;font-family:Archivo,sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.fbot{margin-top:64px;padding-top:24px;border-top:1px solid var(--line-lt);display:flex;
  flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  font-size:13px;color:rgba(255,255,255,.56)}
.fbot .fl-links{display:flex;flex-wrap:wrap;gap:24px}
.totop{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-lt);border-radius:999px;
  padding:10px 18px;font-weight:700;font-size:13px;color:rgba(255,255,255,.8);cursor:pointer;
  background:transparent}
.totop:hover{border-color:var(--accent);color:#fff}

/* ── the sticky phone bar. Mobile only — one thumb, always reachable. ───── */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:44;display:flex;gap:8px;padding:8px;
  background:rgba(6,12,21,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--line-lt)}
@media(min-width:900px){.stickybar{display:none}}
.stickybar a{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;
  border-radius:999px;text-decoration:none;font-family:Archivo,sans-serif;font-weight:800;font-size:14px;
  letter-spacing:.02em;text-transform:uppercase}
.stickybar .sb-call{background:var(--accent-fill);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 2px 0 var(--accent-dk)}
.stickybar .sb-alt{border:1.5px solid rgba(255,255,255,.3);color:#fff}
.stickybar .ic{width:18px;height:18px}

/* ── the recurring CTA prompt: 1, 5, 10 and 20 minutes ──────────────────── */
.prompt{position:fixed;z-index:70;left:8px;right:8px;bottom:72px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 2px 4px rgba(6,12,21,.07),0 16px 32px -10px rgba(6,12,21,.10),
             0 40px 72px -28px rgba(6,12,21,.12);
  padding:20px;display:none;border-top:4px solid var(--accent)}
@media(min-width:900px){.prompt{left:auto;right:24px;bottom:24px;width:400px;padding:24px}}
.prompt.open{display:block;animation:promptin .34s cubic-bezier(.22,.61,.36,1)}
@keyframes promptin{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.prompt .pk{display:flex;align-items:center;gap:8px;font-family:Archivo,sans-serif;font-weight:800;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-txt)}
.prompt h3{font-size:21px;line-height:1.22;letter-spacing:-.02em;margin:12px 0 8px;padding-right:32px}
.prompt p{color:var(--muted);font-size:15px;line-height:1.55}
.prompt .pacts{display:grid;gap:8px;margin-top:16px}
@media(min-width:420px){.prompt .pacts{grid-template-columns:1fr 1fr}}
.prompt .pa{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  border-radius:999px;text-decoration:none;font-family:Archivo,sans-serif;font-weight:800;
  font-size:13.5px;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;border:0}
.prompt .pa-1{background:var(--accent-fill);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 2px 0 var(--accent-dk)}
.prompt .pa-1:hover{filter:brightness(1.07)}
.prompt .pa-2{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.prompt .pa-2:hover{border-color:var(--accent)}
.prompt .px{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;
  display:grid;place-items:center;font-size:18px;line-height:1}
.prompt .px:hover{background:var(--steel);color:var(--ink)}
.prompt .pnum{display:block;margin-top:12px;font-size:12.5px;color:var(--muted);text-align:center}
.prompt .pnum b{color:var(--ink)}

/* ── THE SEND ANIMATION ─────────────────────────────────────────────────
   Fires when a message is actually sent, and when someone taps to call.
   The house celebration, dressed for an electrical company: current runs
   down the line, the message lands, the check is drawn, confetti falls.
   Nothing here is the source of a displayed value — it is decoration over a
   real network request, and the real result is what gets shown after.  ---- */
.sendfx{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  background:rgba(6,12,21,.975);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:24px}
.sendfx.open{display:flex;animation:fade .2s ease-out}
.sendfx-in{text-align:center;max-width:520px;width:100%}
.wire{width:100%;height:120px;overflow:visible}
.wire .rail{fill:none;stroke:rgba(255,255,255,.16);stroke-width:2;stroke-linecap:round}
.wire .lead{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;
  stroke-dasharray:260;stroke-dashoffset:260;
  filter:drop-shadow(0 0 5px rgba(140,200,255,.8));
  animation:leadIn .42s cubic-bezier(.55,0,.7,.25) forwards}
.wire .ld-r{animation-delay:.04s}
@keyframes leadIn{to{stroke-dashoffset:0}}
.wire .gapflash{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center;
  filter:drop-shadow(0 0 20px rgba(255,255,255,1)) drop-shadow(0 0 46px rgba(140,205,255,.9));
  animation:gapFlash .46s ease-out .42s forwards}
@keyframes gapFlash{
  0%{opacity:0;transform:scale(.25)}
  20%{opacity:1;transform:scale(1.8)}
  100%{opacity:0;transform:scale(4)}}
.wire .pulse{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:26 460;stroke-dashoffset:486;filter:drop-shadow(0 0 8px rgba(30,144,255,.95));
  animation:wirepulse .8s cubic-bezier(.5,0,.6,1) .55s forwards}
.wire .pulse.p2{animation-delay:.14s;stroke:#8ED8FF;opacity:.75}
.wire .pulse.p3{animation-delay:.26s;opacity:.5}
@keyframes wirepulse{to{stroke-dashoffset:0}}
.wire .pin{fill:rgba(255,255,255,.2)}
.wire .env{opacity:0;animation:envpop .46s cubic-bezier(.22,.61,.36,1) 1.16s forwards;
  transform-box:fill-box;transform-origin:center}
@keyframes envpop{0%{opacity:0;transform:translateY(10px) scale(.7)}60%{opacity:1;transform:translateY(0) scale(1.08)}100%{opacity:1;transform:translateY(0) scale(1)}}
.wire .env rect,.wire .env path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}

.seal-ok{width:96px;height:96px;margin:0 auto;opacity:0;
  animation:sealin .38s cubic-bezier(.22,.61,.36,1) 1.52s forwards}
@keyframes sealin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.seal-ok circle{fill:none;stroke:var(--accent);stroke-width:4;
  stroke-dasharray:283;stroke-dashoffset:283;
  animation:draw .52s cubic-bezier(.4,0,.2,1) 1.62s forwards}
.seal-ok path{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:62;stroke-dashoffset:62;
  animation:draw .36s cubic-bezier(.4,0,.2,1) 2.04s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.sendfx h3{color:#fff;font-size:clamp(26px,5.2vw,38px);line-height:1.06;letter-spacing:-.025em;
  text-transform:uppercase;margin-top:24px;opacity:0;animation:rise .42s ease-out 1.92s forwards}
.sendfx p{color:rgba(255,255,255,.80);font-size:16.5px;line-height:1.6;margin:16px auto 0;max-width:44ch;
  opacity:0;animation:rise .42s ease-out 2.10s forwards}
.sendfx .fxacts{margin-top:32px;display:grid;gap:12px;opacity:0;animation:rise .42s ease-out 2.28s forwards}
@media(min-width:520px){.sendfx .fxacts{grid-template-columns:1fr 1fr}}
.sendfx .fxa{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;
  border-radius:999px;text-decoration:none;font-family:Archivo,sans-serif;font-weight:800;font-size:14px;
  letter-spacing:.02em;text-transform:uppercase;cursor:pointer;border:0;color:#fff}
.sendfx .fxa-1{background:var(--accent-fill);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 2px 0 var(--accent-dk)}
.sendfx .fxa-2{background:transparent;border:1.5px solid rgba(255,255,255,.34)}
.sendfx .fxa-2:hover{background:rgba(255,255,255,.09)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.confetti{position:fixed;top:-16px;z-index:130;width:5px;height:14px;border-radius:1px;
  background:var(--accent);opacity:.85;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(112vh) rotate(560deg);opacity:0}}

/* reduced motion: no theatre, just the result — instantly */
@media(prefers-reduced-motion:reduce){
  .wire .lead,.wire .gapflash,.wire .pulse,.wire .env,.seal-ok,.seal-ok circle,.seal-ok path,
  .sendfx h3,.sendfx p,.sendfx .fxacts{animation:none!important;opacity:1!important;
    stroke-dashoffset:0!important;transform:none!important}
  .confetti{display:none}
  .prompt.open{animation:none}
}


/* ── SMALL AND SHORT SCREENS ─────────────────────────────────────────────
   Measured, not guessed. At 320x568 the hero CTA was landing at y=731 on a
   568px screen: 138px of it was the call bar plus the header, then a rotated
   sticker, then a 4-line headline at the 40px floor, then a 5-line subhead.
   Everything below buys that back so the button is reachable without a
   scroll on the smallest phone still in real use. */
@media(max-width:400px){
  /* the chrome: same targets, less air */
  .callbar{padding:6px 8px;gap:6px}
  .callbar a{min-height:44px;font-size:14px;padding:4px 8px}
  .topin{padding:8px 16px}
  .brand img{height:32px}

  /* the sticker is decoration and it costs 55px above the button */
  .hero .stick{display:none}

  .hero{padding:24px 0 40px}
  .display{font-size:clamp(31px,8.6vw,88px);letter-spacing:-.025em}
  .hero .lead{font-size:16px;line-height:1.42;margin-top:16px;max-width:34ch}
  .ctawrap{margin-top:28px;width:94%}
  .btn{padding:16px 20px}
  .bm{font-size:19px}   /* not lower: 18.66px is the large-text line */
  .bs{font-size:12px}
  .trust{margin-top:24px}
  .heronote{margin-top:16px;font-size:12px}
  .inner{padding:0 16px}
}

/* A phone held sideways is ~390px tall. Nothing decorative survives that. */
@media(max-height:500px) and (orientation:landscape){
  .hero{padding:20px 0 32px}
  .hero .stick{display:none}
  .display{font-size:clamp(28px,5vw,44px)}
  .hero .lead{font-size:15px;line-height:1.4;margin-top:12px;max-width:52ch}
  .ctawrap{margin-top:20px}
  .trust,.heronote{display:none}
  .callbar{padding:4px 8px}
  .callbar a{min-height:44px;font-size:14px}
  /* the longest headline on the site is the careers one; at 390px of height
     it needs the tighter step or the button falls off the screen */
  .v-careers .display{font-size:clamp(26px,4.4vw,40px)}
  .v-careers .hero .lead{font-size:14.5px;margin-top:10px}
  .hero-sm{padding:20px 0 28px}
}

/* Very small text scales down, but a tap target never does: 44px is a finger,
   not a design value, and it is the same finger at 320px as at 430px. */
@media(max-width:400px){
  .btn,.btn-ghost,.chip,.stickybar a,.prompt .pa,.sendfx .fxa,
  input,select,textarea,.burger{min-height:48px}
}

/* ── scroll reveal: one per section, fires once ─────────────────────────── */
.rv{opacity:0;transform:translateY(24px);transition:opacity .42s ease-out,transform .42s ease-out}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}