/* 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: green, yellow, white and black, per the owner's updated logo.
Green is the accent: marks, icons, borders, the hero glow, the deep-green
fill under white labels. Yellow is the action colour: every primary button
and the highlighted word in a headline on a dark band, always with black
words on it (hi-vis, like the safety gear the crews wear). White and black
are the grounds. Nothing 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:#0A0F0B; /* green-black, never #000 at area */
--ink-2:#131C15; /* the raised industrial panel */
--surface:#F6F8F4; /* off-white with a breath of green, never #FFF at area */
--card:#FDFEFC;
/* The greens are sampled from the logo's "ENERGY": its median is the lime
#55C20E, its shadow #065E15. Lime at full strength is 2.2:1 on the page
ground, so the flat accent sits a step darker on the same hue. */
--accent:#3A9A0E; /* the one accent: the logo's green, 3.4:1 on the ground */
--accent-lo:#0C6E1E; /* deep green, the foot of any green gradient */
--accent-dk:#065E15; /* the logo's shadow green; the pressed edge under a green surface */
/* Accent-as-TEXT needs a deeper green than accent-as-MARK: #3A9A0E on the
off-white ground is 3.4:1, which passes for icons and borders and fails
for body text. So the accent is scoped. --accent-txt is the deep green on
light surfaces; every dark surface redefines it to the logo's lime, where
bright-on-near-black is the high-contrast direction. Mark with --accent,
write or stroke an icon with --accent-txt. */
--accent-txt:#0B7A1E; /* 5.1:1 on the ground */
/* White text on #3A9A0E measures 3.4:1 — enough for display type, not for a
12-14px label. Every small-label surface with white words on it is filled
with this instead: 5.5:1 against white. */
--accent-fill:#0B7A1E;
/* Yellow, sampled from the logo's "ENP": median #F3CE0A, highlight #FCEB57.
The action colour: primary buttons, the sticker in the hero, the
highlighted word on a dark band. Never as text on a light ground (1.4:1)
and never with white words on it — black words only, 12.8:1. */
--sun:#F5D010;
--sun-lo:#E0B800; /* the button gradient's foot */
--sun-dk:#9A7D00; /* the pressed edge under a yellow button */
--on-sun:#0A0F0B;
--muted:#5A6B5E;
--steel:#E6EEE4; /* the cool band */
--line:rgba(10,15,11,.10);
--line-lt:rgba(255,255,255,.16);
--shadow:0 1px 2px rgba(10,15,11,.05), 0 8px 16px -6px rgba(10,15,11,.06), 0 24px 48px -20px rgba(10,15,11,.08);
--shadow-up:0 2px 4px rgba(10,15,11,.06), 0 12px 24px -8px rgba(10,15,11,.07), 0 32px 64px -24px rgba(10,15,11,.08);
}
/* On a dark ground the accent brightens to the logo's lime (11:1 on the
ink) and the highlighted word in a headline turns yellow. */
.band-ink,.band-ink2,.band-moving,.hero,footer.site,.sendfx{
--accent:#7EDC12;
--accent-txt:#7EDC12;
--hl:var(--sun);
}
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(--sun);color:var(--on-sun);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(--hl,var(--accent-txt))}
/* ── the top bars ───────────────────────────────────────────────────────
Light, deliberately. The mark is green and yellow on white, 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:#55C20E;flex:none;
box-shadow:0 0 0 0 rgba(85,194,14,.7);animation:live 2.2s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(85,194,14,.7)}70%{box-shadow:0 0 0 8px rgba(85,194,14,0)}100%{box-shadow:0 0 0 0 rgba(85,194,14,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;max-width:calc(100vw - 128px);object-fit:contain;
object-position:left center;display:block}
@media(min-width:900px){.brand img{height:46px;max-width:none}}
/* 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(--sun);color:var(--on-sun);
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,.40),0 2px 0 var(--sun-dk);
transition:transform .12s ease-out,filter .12s ease-out}
.navcta:hover{filter:brightness(1.04);transform:translateY(-2px)}
.navcta:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 var(--sun-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(85,194,14,.30) 0%, rgba(85,194,14,0) 42%),
radial-gradient(circle at 50% 42%, #11421A 0%, #0A2410 34%, #0A0F0B 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(190,255,150,.22) 0deg 1.1deg, rgba(190,255,150,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(230,250,215,.40);stroke-width:1.3;
stroke-dasharray:14 26;stroke-linecap:round}
.coils .c2{stroke:rgba(126,220,18,.32);stroke-dasharray:6 34}
/* a charge running across the frame — the survey sweep, on the green axis */
.therm{position:absolute;top:-30%;bottom:-30%;width:58%;left:-60%;
background:linear-gradient(100deg,
rgba(85,194,14,0) 0%, rgba(126,220,18,.22) 33%,
rgba(230,255,200,.38) 52%, rgba(126,220,18,.22) 70%, rgba(85,194,14,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:#FFFBD6;stroke-width:4;stroke-linecap:round;
stroke-dasharray:16 250;filter:drop-shadow(0 0 7px #F5D010) drop-shadow(0 0 18px rgba(245,208,16,.9));
animation:run 3s linear infinite}
.sparks .sp2{animation-duration:3.9s;animation-delay:-1.3s;stroke:#F5D010}
.sparks .sp3{animation-duration:3.4s;animation-delay:-2.2s}
.sparks .sp4{animation-duration:4.4s;animation-delay:-0.7s;stroke:#FCEB57}
@keyframes run{from{stroke-dashoffset:266}to{stroke-dashoffset:0}}
.scrim{position:absolute;inset:0;background:
linear-gradient(180deg,rgba(10,15,11,.72) 0%,rgba(10,15,11,.78) 44%,rgba(10,15,11,.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(85,194,14,.28) 0%, rgba(85,194,14,0) 46%),
repeating-linear-gradient(78deg, rgba(190,255,160,.11) 0 2px, rgba(190,255,160,0) 2px 13px),
radial-gradient(circle at 32% 50%, #0F3E17 0%, #09220F 38%, #0A0F0B 66%)}
.v-hire .kb{background:
radial-gradient(circle at 68% 38%, rgba(126,220,18,.24) 0%, rgba(126,220,18,0) 44%),
radial-gradient(circle at 68% 38%, #0E3A16 0%, #08200E 36%, #0A0F0B 64%)}
.v-hire .slots{background:repeating-conic-gradient(from 18deg at 68% 38%,
rgba(190,255,150,.19) 0deg 1deg, rgba(190,255,150,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(100,205,20,.28) 0%, rgba(100,205,20,0) 48%),
repeating-linear-gradient(-70deg, rgba(210,255,180,.10) 0 2px, rgba(210,255,180,0) 2px 15px),
radial-gradient(circle at 50% 62%, #12451B 0%, #0A2410 40%, #0A0F0B 68%)}
.v-contact .kb{background:
radial-gradient(circle at 50% 50%, rgba(110,214,20,.26) 0%, rgba(110,214,20,0) 50%),
radial-gradient(circle at 50% 50%, #0F3E17 0%, #09220F 42%, #0A0F0B 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(--sun);color:var(--on-sun);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:var(--on-sun);
background:linear-gradient(180deg,var(--sun) 0%,var(--sun-lo) 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.45),
0 3px 0 var(--sun-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.04);transform:translateY(-2px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 5px 0 var(--sun-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(--sun-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(10,15,11,.74)}
.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(252,235,87,.85);
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,.5)}
@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}
/* ── the work band: real photographs, on the dark ground ─────────────────
The photographs are warm — epoxied windings are orange, and plant steel is
rust. That is the colour the work actually is, so it is not fought: it sits
on the near-black band where it reads as depth, and the yellow and green
never touch it. One feature frame at double size, four at single.
Every image is lazy and carries width/height, so nothing shifts on arrival. */
.wgrid{display:grid;gap:12px;margin-top:48px;grid-template-columns:1fr}
@media(min-width:700px){.wgrid{grid-template-columns:repeat(4,1fr);gap:16px}}
.wfig{position:relative;margin:0;height:100%;border-radius:16px;overflow:hidden;
background:var(--ink-2);border:1px solid var(--line-lt)}
.wfig img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media(min-width:700px){
.wfig.feat{grid-column:span 2;grid-row:span 2}
.wfig.feat img{aspect-ratio:auto}
}
/* The caption sits on a scrim of the page's own ink, so white words clear
4.5:1 over any frame regardless of what the photograph is doing under them. */
.wfig figcaption{position:absolute;left:0;right:0;bottom:0;padding:32px 14px 12px;
font-family:Figtree,sans-serif;font-weight:600;font-size:13.5px;line-height:1.35;color:#fff;
background:linear-gradient(180deg,rgba(10,15,11,0) 0%,rgba(10,15,11,.72) 45%,rgba(10,15,11,.92) 100%)}
@media(min-width:700px){.wfig.feat figcaption{font-size:15px;padding:40px 18px 16px}}
/* The home page never mixes the project types into one grid — the owner wants
each type kept together. It shows one frame per type instead, and each is a
door into that type's own section on the work page. */
.wteasers{display:grid;gap:16px;margin-top:48px;grid-template-columns:1fr}
@media(min-width:700px){.wteasers{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}}
.wteaser{position:relative;display:block;border-radius:16px;overflow:hidden;text-decoration:none;
background:var(--ink-2);border:1px solid var(--line-lt);
transition:transform .14s ease-out,border-color .14s ease-out}
.wteaser:hover{transform:translateY(-3px);border-color:var(--accent)}
.wteaser img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.wteaser .wt-body{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 16px;
background:linear-gradient(180deg,rgba(10,15,11,0) 0%,rgba(10,15,11,.74) 45%,rgba(10,15,11,.94) 100%)}
.wteaser .wt-body b{display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:19px;
line-height:1.15;letter-spacing:-.02em;color:#fff}
.wteaser .wt-body i{display:flex;align-items:center;gap:8px;margin-top:8px;font-style:normal;
font-family:Figtree,sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;
text-transform:uppercase;color:var(--accent)}
.wteaser .wt-body i .arw{width:16px;height:16px;transition:transform .14s ease-out}
.wteaser:hover .wt-body i .arw{transform:translateX(4px)}
/* ── 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(58,154,14,.10);border:1px solid rgba(58,154,14,.26)}
.icb svg{width:28px;height:28px;color:var(--accent-txt)}
.card-dark .icb{background:rgba(126,220,18,.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(58,154,14,.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(58,154,14,.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=number],input[type=date],input[type=number],input[type=date],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,");
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:#EAF6E0}
.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(--sun);color:var(--on-sun);
box-shadow:inset 0 1px 0 rgba(255,255,255,.40),0 2px 0 var(--sun-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(--sun);color:var(--on-sun);
box-shadow:inset 0 1px 0 rgba(255,255,255,.40),0 2px 0 var(--sun-dk)}
.prompt .pa-1:hover{filter:brightness(1.04)}
.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(170,255,120,.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(245,208,16,.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(126,220,18,.95));
animation:wirepulse .8s cubic-bezier(.5,0,.6,1) .55s forwards}
.wire .pulse.p2{animation-delay:.14s;stroke:#F5D010;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(--sun);color:var(--on-sun);
box-shadow:inset 0 1px 0 rgba(255,255,255,.40),0 2px 0 var(--sun-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)}
/* landscape is wide and short: let the subhead use the width it has rather
than stay in a portrait-width column, which costs lines it cannot spare */
.hero .lead{font-size:15px;line-height:1.4;margin-top:12px;max-width:76ch}
.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 */
/* the careers headline is the longest on the site */
.v-careers .display{font-size:clamp(23px,3.9vw,34px)}
.v-careers .hero .lead{font-size:14px;margin-top:8px;max-width:80ch}
.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}
}
.add-hint{margin:10px 0 0;min-height:1.5em;font-size:14px;line-height:1.5;color:var(--muted)}
.add-if[hidden]{display:none}
/* ── FEEDBACK MODE ─────────────────────────────────────────────────────────
enpenergy.com/?feedback turns the live public site into a page you can
comment on. No login: the site knows whose site it is, and a server function
files each note into the owner's dashboard on his behalf.
Every block of content becomes a target. Hover (or tap) outlines it; a click
opens a small sheet quoting the block and asking what should change. Sent
notes leave a numbered pin on the block so you can see what you have covered.
------------------------------------------------------------------------ */
html.fb-on{scroll-padding-top:64px}
html.fb-on body{padding-top:52px}
/* the mode bar: always visible, always tells you how to leave */
/* Safety-signage yellow with a green "on" light and a black rule under it.
The site now shares the palette, so the mode is carried by the black border
and the fixed position, not by a foreign colour: it has to read as "you are
in a different mode" from across the room. */
.fb-bar{position:fixed;top:0;left:0;right:0;z-index:150;display:flex;align-items:center;
justify-content:space-between;gap:10px;min-height:52px;padding:8px 12px;
background:var(--sun);color:#111;border-bottom:3px solid #111;
box-shadow:0 2px 4px rgba(6,12,21,.10),0 8px 16px -6px rgba(6,12,21,.16)}
.fb-bar b{font-family:Archivo,sans-serif;font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:#111}
.fb-bar b i{width:10px;height:10px;border-radius:50%;background:#00C853;border:2px solid #111;
box-shadow:0 0 0 0 rgba(0,200,83,.7);animation:fbLive 2.2s ease-out infinite}
@keyframes fbLive{0%{box-shadow:0 0 0 0 rgba(0,200,83,.7)}70%{box-shadow:0 0 0 8px rgba(0,200,83,0)}100%{box-shadow:0 0 0 0 rgba(0,200,83,0)}}
.fb-bar span{font-size:13.5px;line-height:1.3;color:#111;flex:1 1 auto;min-width:0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-bar .fb-hint{display:none}
/* On a phone the wordmark and the instruction cannot both fit on one line.
The instruction is the one that earns its place; the pulsing dot already
says a mode is on. Desktop shows both. */
@media(max-width:639px){.fb-bar .fb-word{display:none}}
@media(min-width:640px){.fb-bar .fb-short{display:none}}
@media(min-width:640px){.fb-bar .fb-hint{display:inline}.fb-bar span{font-size:14.5px}}
.fb-bar button,.fb-bar a.fb-exit{flex:none;display:inline-flex;align-items:center;min-height:40px;border-radius:999px;
border:2px solid #111;background:#111;color:var(--sun);text-decoration:none;
font-family:Archivo,sans-serif;font-weight:800;font-size:12px;
letter-spacing:.06em;text-transform:uppercase;padding:0 16px;cursor:pointer}
.fb-bar button:hover,.fb-bar a.fb-exit:hover{background:#000}
/* ── 2. the pages, inside the bar. In this mode every link on the page is a
comment target, so the bar is the only way to get to another page. ─── */
.fb-nav{flex:none;display:none;align-items:center;gap:2px}
.fb-nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 10px;border-radius:999px;
color:#111;text-decoration:none;font-weight:700;font-size:13px;white-space:nowrap}
.fb-nav a:hover{background:rgba(0,0,0,.10)}
.fb-nav a[aria-current=page]{background:#111;color:var(--sun)}
.fb-go{flex:none;min-height:40px;border-radius:999px;border:2px solid #111;background:var(--sun);color:#111;
font:700 13px/1 Figtree,sans-serif;padding:0 32px 0 12px;appearance:none;cursor:pointer;max-width:132px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 10px center;background-size:14px}
@media(min-width:900px){.fb-nav{display:flex}.fb-go{display:none}}
/* every block is a target; the outline says so on hover and stays on the one you picked */
html.fb-on .fb-t{cursor:pointer;outline:2px dashed transparent;outline-offset:6px;border-radius:6px;
transition:outline-color .12s ease-out,background-color .12s ease-out}
html.fb-on .fb-t:hover,html.fb-on .fb-t.fb-hover{outline-color:var(--accent)}
html.fb-on .fb-t.fb-picked{outline:3px solid var(--accent);background-color:rgba(58,154,14,.08)}
/* a tap on a section's open ground — not on a block — comments on the
section itself: its background, its motion, its colour */
html.fb-on section,html.fb-on .hero,html.fb-on .ticker,html.fb-on footer.site{cursor:crosshair}
html.fb-on .fb-area-picked{box-shadow:inset 0 0 0 4px var(--sun)}
/* in this mode a link or button is a thing you comment on, not a thing you press */
html.fb-on a,html.fb-on button:not(.fb-bar button):not(.fb-sheet button){pointer-events:auto}
/* pins: one per sent note, numbered, so you can see what you have covered */
.fb-pin{position:absolute;z-index:43;width:28px;height:28px;border-radius:50%;
background:var(--accent-fill);color:#fff;font-family:Archivo,sans-serif;font-weight:800;font-size:13px;
display:grid;place-items:center;border:2px solid #fff;pointer-events:none;
box-shadow:0 2px 4px rgba(6,12,21,.12),0 8px 16px -6px rgba(6,12,21,.2);
animation:fbPin .32s cubic-bezier(.22,.61,.36,1)}
@keyframes fbPin{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
/* the sheet: bottom on a phone, a card on a desk */
.fb-sheet{position:fixed;z-index:160;left:0;right:0;bottom:0;background:var(--card);color:var(--ink);
border-radius:20px 20px 0 0;padding:20px 20px 24px;display:none;max-height:86vh;overflow-y:auto;
box-shadow:0 -2px 4px rgba(6,12,21,.06),0 -16px 32px -10px rgba(6,12,21,.12),0 -40px 72px -28px rgba(6,12,21,.14)}
.fb-sheet.open{display:block;animation:promptin .28s cubic-bezier(.22,.61,.36,1)}
@media(min-width:760px){
.fb-sheet{left:auto;right:24px;bottom:24px;width:440px;border-radius:16px;padding:24px;max-height:80vh}
}
.fb-sheet .fb-k{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fb-sheet .fb-k b{font-family:Archivo,sans-serif;font-weight:800;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--accent-txt)}
.fb-sheet .fb-x{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}
.fb-sheet .fb-x svg{width:18px;height:18px}
.fb-sheet .fb-where{margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.45}
.fb-sheet blockquote{margin:12px 0 0;padding:12px 16px;border-left:3px solid var(--accent);
background:var(--steel);border-radius:0 8px 8px 0;font-size:14.5px;line-height:1.5;color:var(--ink);
max-height:104px;overflow:hidden;position:relative}
.fb-sheet blockquote::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28px;
background:linear-gradient(rgba(226,235,244,0),var(--steel))}
.fb-sheet .fb-aspect{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.fb-sheet .fb-aspect .chip{min-height:36px;padding:6px 14px;font-size:13px}
.fb-sheet .fb-q{margin-top:16px;display:block;font-size:14px;font-weight:700}
.fb-sheet textarea{margin-top:8px;min-height:104px}
.fb-sheet .fb-row{display:grid;gap:12px;margin-top:12px}
@media(min-width:420px){.fb-sheet .fb-row{grid-template-columns:1fr auto;align-items:end}}
.fb-sheet .fb-name{min-height:48px}
.fb-sheet .fb-send{min-height:52px;border-radius:999px;border:0;cursor:pointer;padding:0 24px;
background:var(--sun);color:var(--on-sun);font-family:Archivo,sans-serif;font-weight:800;font-size:14px;
letter-spacing:.02em;text-transform:uppercase;position:relative;overflow:hidden;
box-shadow:inset 0 1px 0 rgba(255,255,255,.40),0 2px 0 var(--sun-dk);
display:inline-flex;align-items:center;justify-content:center;gap:8px}
.fb-sheet .fb-send:disabled{filter:grayscale(.3) brightness(.95);cursor:default}
.fb-sheet .fb-err{display:none;margin-top:10px;font-size:13px;font-weight:700;color:var(--accent-dk)}
.fb-sheet .fb-err.on{display:block}
.fb-sheet .fb-note{margin-top:12px;font-size:12px;color:var(--muted);line-height:1.5}
.sendfx.fx-feedback .fxa-1{display:none}
.sendfx.fx-feedback .fxacts{grid-template-columns:1fr}
@media(prefers-reduced-motion:reduce){
.fb-pin,.fb-sheet.open{animation:none}
.fb-bar b i{animation:none}
}
/* ── 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}}
/* ── documents: rental rates, the quote picker, the skills register, and
the copy of what was sent (which also prints to PDF) ──────────────── */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.rates{width:100%;border-collapse:collapse;font-size:15px;color:var(--ink)}
.rates th{font-family:Archivo,sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
text-align:left;padding:14px 16px;background:var(--steel);color:var(--muted);border-bottom:1px solid var(--line)}
.rates td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.rates tr:last-child td{border-bottom:0}
.rates .rno{color:var(--muted);font-weight:700;width:36px}
.rates .rdesc{color:var(--muted);font-size:14px;margin-top:2px}
.rates .rnote{color:var(--muted);font-size:13px;margin-top:6px;max-width:52ch;line-height:1.45}
.rates .rprice{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.rates .ravail{color:var(--accent-txt);font-weight:700;white-space:nowrap}
.terms{margin-top:32px;max-width:72ch}
.terms h4{font-family:Archivo,sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.terms ol{margin:0;padding-left:20px;color:var(--muted);font-size:14.5px;line-height:1.6}
.fsec{font-family:Archivo,sans-serif;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
color:var(--accent-txt);margin:36px 0 14px;padding-top:24px;border-top:1px solid var(--line)}
.fsec:first-child{margin-top:0;padding-top:0;border-top:0}
.fnote{font-size:13.5px;font-weight:700;color:var(--muted);margin:18px 0 8px}
.picks{display:grid;gap:8px}
.pick{display:grid;grid-template-columns:24px 1fr auto;gap:10px 12px;align-items:center;padding:12px 14px;
border:2px solid var(--line);border-radius:12px;cursor:pointer;background:var(--card);transition:border-color .12s}
.pick:hover{border-color:var(--accent)}
.pick:has(input[type=checkbox]:checked){border-color:var(--accent);background:#EAF6E0}
.pick input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);margin:0}
.pick .pk-name{font-weight:700;font-size:15px;line-height:1.3}
.pick .pk-name small{display:block;font-weight:500;color:var(--muted);font-size:13px}
.pick .pk-rate{grid-column:2;font-size:13px;color:var(--muted);white-space:nowrap}
.pick .pk-rate b{color:var(--ink)}
.pick .pk-qty{grid-column:3;grid-row:1/3;display:flex;align-items:center}
.pick .pk-qty input{width:64px;min-height:44px;text-align:center;padding:0 6px}
.pick:not(:has(input[type=checkbox]:checked)) .pk-qty{visibility:hidden}
@media(min-width:640px){.pick{grid-template-columns:24px 1fr auto auto}.pick .pk-rate{grid-column:3;grid-row:1}.pick .pk-qty{grid-column:4;grid-row:1}}
.estimate{margin-top:20px;padding:18px 20px;border-radius:14px;background:var(--steel);border:1px solid var(--line);
display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.estimate .est-k{font-family:Archivo,sans-serif;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.estimate b{font-size:28px;font-family:Archivo,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
.estimate .est-note{flex-basis:100%;font-size:13px;color:var(--muted)}
.scale{background:var(--steel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:18px;font-size:14px;color:var(--muted)}
.scale p{margin:0 0 6px;font-weight:700;color:var(--ink)}
.scale ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.scale li b{display:inline-block;width:24px;height:24px;border-radius:6px;background:var(--accent-fill);color:#fff;text-align:center;line-height:24px;font-size:13px;margin-right:8px}
.scale .scale-tip{margin:10px 0 0;font-weight:500}
.rsec{border:1px solid var(--line);border-radius:14px;padding:6px 14px 10px;margin:0 0 14px}
.rsec legend{font-weight:800;font-size:15px;padding:0 6px;color:var(--ink)}
.rrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.rrow:last-child{border-bottom:0}
.rrow .rlabel{font-size:15px;line-height:1.3;flex:1 1 auto;min-width:0}
.rate{display:inline-flex;flex:none;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.rate label{position:relative;display:block}
.rate input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.rate span{display:grid;place-items:center;width:44px;height:44px;font-weight:800;font-size:15px;color:var(--muted);border-left:1px solid var(--line)}
.rate label:first-child span{border-left:0}
.rate input:checked+span{background:var(--accent-fill);color:#fff}
.rate input:focus-visible+span{outline:2px solid var(--accent);outline-offset:-2px}
@media(max-width:400px){.rate span{width:38px;height:42px}}
/* the copy: a printed page, on screen */
.doccopy{margin-top:32px;background:#fff;color:#111;border-radius:16px;padding:28px 24px;box-shadow:0 2px 4px rgba(6,12,21,.12),0 24px 48px -24px rgba(6,12,21,.35)}
@media(min-width:760px){.doccopy{padding:44px 48px}}
.doccopy .dc-tools{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.doccopy .dc-tools .btn{min-height:52px}
.doccopy .dc-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;border-bottom:3px solid #111;padding-bottom:16px;margin-bottom:20px}
.doccopy .dc-head h2{font-family:Archivo,sans-serif;font-size:24px;margin:0 0 4px;line-height:1.1}
.doccopy .dc-head .dc-sub{color:#555;font-size:14px}
.doccopy .dc-brand{text-align:right;font-size:13px;color:#555;line-height:1.45}
.doccopy .dc-brand b{display:block;color:#111;font-family:Archivo,sans-serif;font-size:16px}
.doccopy .dc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 24px;margin-bottom:20px;font-size:14px}
.doccopy .dc-meta div b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#777}
.doccopy h3{font-family:Archivo,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#111;margin:22px 0 8px;padding-top:12px;border-top:1px solid #ddd}
.doccopy table{width:100%;border-collapse:collapse;font-size:14px}
.doccopy th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#777;padding:6px 8px;border-bottom:1px solid #ddd}
.doccopy td{padding:7px 8px;border-bottom:1px solid #eee;vertical-align:top}
.doccopy td.v{font-weight:700;white-space:nowrap;text-align:right}
.doccopy td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.doccopy .dc-total td{font-weight:800;border-top:2px solid #111;border-bottom:0}
.doccopy .dc-text{white-space:pre-wrap;font-size:14px;line-height:1.55}
.doccopy .dc-foot{margin-top:24px;font-size:12px;color:#777;line-height:1.5}
.doccopy .dc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 24px}
@media print{
body *{visibility:hidden}
.doccopy,.doccopy *{visibility:visible}
.doccopy{position:absolute;left:0;top:0;width:100%;margin:0;padding:0;box-shadow:none;border-radius:0}
.doccopy .dc-tools{display:none}
.doccopy h3{break-after:avoid}
.doccopy table,.doccopy .rsec{break-inside:auto}
.doccopy tr{break-inside:avoid}
@page{margin:16mm}
}
/* the rental desk sits on a light band: its contact links take the ink, not the footer's white */
.rdesk{flex-wrap:wrap;gap:10px 24px}
.rdesk a{color:var(--accent-txt)}
.rdesk a:hover{color:var(--ink)}