/* ==========================================================================
SALTD Electrical — site stylesheet
Pakenham VIC · REC 34234
Design tokens locked to the approved mockups.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens
-------------------------------------------------------------------------- */
:root{
--charcoal:#2E2A2B;
--charcoal-soft:#3A3637;
--charcoal-deep:#1D1D1F;
--amber:#FABE6B;
--amber-lift:#FFD08C;
--amber-deep:#8F5A1C; /* the only amber-ish colour legible as text on light */
--slate:#918F8F;
--ink-2:#6B6869;
--on-dark-2:#B5B3B3;
--white:#FFF;
--off-white:#F5F4F0;
--line:rgba(46,42,43,.12);
--line-dark:rgba(250,190,107,.22);
--display:'Raleway',sans-serif;
--body:'Nunito',sans-serif;
--wrap:1080px;
--wrap-wide:1240px;
--ease:cubic-bezier(.22,.61,.36,1);
--hdr-h:76px;
}
/* --------------------------------------------------------------------------
2. Reset / base
-------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{
font-family:var(--body);font-size:17px;line-height:1.7;
color:var(--charcoal);background:var(--white);margin:0;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.15;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2rem,5vw,3.25rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.25rem);margin-bottom:14px}
h3{font-size:1.15rem}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}
a{color:var(--amber-deep)}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{
font-family:var(--display);font-weight:700;font-size:.7rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--amber);
display:block;
}
.eyebrow-dark{color:var(--ink-2)}
.lede{font-size:1.15rem;color:var(--ink-2);max-width:62ch}
.sec{padding:clamp(56px,8vw,96px) 0}
.sec-alt{background:var(--off-white)}
.sec-dark{background:var(--charcoal);color:var(--white)}
.sec-dark .lede{color:var(--on-dark-2)}
.skip{position:absolute;left:-9999px;top:0;background:var(--amber);color:var(--charcoal);padding:12px 20px;z-index:200;font-family:var(--display);font-weight:800}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--amber-deep);outline-offset:2px}
.sec-dark :focus-visible,.hero :focus-visible,header :focus-visible{outline-color:var(--amber)}
/* --------------------------------------------------------------------------
3. Buttons
-------------------------------------------------------------------------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-family:var(--display);font-weight:800;font-size:.9rem;letter-spacing:.04em;
text-decoration:none;padding:14px 26px;border-radius:4px;
border:2px solid transparent;cursor:pointer;
transition:transform .14s var(--ease),background .18s,border-color .18s,color .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-amber{background:var(--amber);color:var(--charcoal)}
.btn-amber:hover{background:var(--amber-lift)}
.btn-ghost{border-color:var(--amber);color:var(--amber);background:transparent}
.btn-ghost:hover{background:var(--amber);color:var(--charcoal)}
.btn-dark{background:var(--charcoal);color:var(--white);width:100%}
.btn-dark:hover{background:var(--charcoal-soft)}
.btn-outline{border-color:var(--charcoal);color:var(--charcoal);background:transparent}
.btn-outline:hover{background:var(--charcoal);color:var(--white)}
.btn-lg{font-size:1rem;padding:17px 32px}
/* --------------------------------------------------------------------------
4. Header — sticky, condenses on scroll
-------------------------------------------------------------------------- */
header{
background:var(--charcoal);position:sticky;top:0;z-index:100;
border-bottom:2px solid var(--amber);
transition:box-shadow .25s var(--ease);
}
header.is-stuck{box-shadow:0 10px 30px rgba(0,0,0,.28)}
.hdr{
display:flex;align-items:center;gap:20px;
padding:14px 24px;max-width:var(--wrap-wide);margin:0 auto;
transition:padding .25s var(--ease);
}
header.is-stuck .hdr{padding:8px 24px}
.logo{height:46px;width:auto;display:block;transition:height .25s var(--ease)}
header.is-stuck .logo{height:36px}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
font-family:var(--display);font-weight:700;font-size:.85rem;
letter-spacing:.03em;color:var(--white);text-decoration:none;
padding:10px 13px;border-radius:4px;position:relative;
transition:color .18s;
}
.nav a::after{
content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;
background:var(--amber);transform:scaleX(0);transform-origin:left;
transition:transform .22s var(--ease);
}
.nav a:hover{color:var(--amber)}
.nav a:hover::after{transform:scaleX(1)}
/* The Home link is in the markup on every page but hidden on desktop — the logo already
goes home and everyone knows it does. Dropping it from the desktop bar is what buys
the room for a sixth item ("Home Batteries"). It comes back inside the burger, where
the logo is a much less obvious home button and people do hunt for the word.
It stays in the DOM rather than being injected by JS so it works with JS off. */
.nav-home{display:none}
/* [aria-current] not [aria-current="page"] — kept as an attribute-presence selector on
purpose. Every page now has its own nav item, so they're all "page" today, but the
moment a child page has to highlight a parent item it does so with aria-current="true"
(a link that doesn't point at the page you're on must not claim to be it) and this
selector already catches that without a CSS change. */
.nav a[aria-current]{color:var(--amber)}
.nav a[aria-current]::after{transform:scaleX(1)}
.hdr-right{display:flex;align-items:center;gap:16px;margin-left:10px}
.hdr-rec{
font-family:var(--display);font-weight:700;font-size:.7rem;
letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
white-space:nowrap;
}
/* burger */
.burger{
display:none;margin-left:auto;background:transparent;border:0;
width:44px;height:44px;padding:10px;cursor:pointer;
}
.burger span{display:block;height:2px;background:var(--amber);border-radius:2px;transition:transform .22s var(--ease),opacity .18s}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* --------------------------------------------------------------------------
5. Hero
-------------------------------------------------------------------------- */
.hero{background:var(--charcoal);color:var(--white);position:relative;overflow:hidden}
.hero::after{
content:"";position:absolute;top:-220px;right:-180px;width:680px;height:680px;
background:radial-gradient(circle,rgba(250,190,107,.10) 0%,transparent 68%);
pointer-events:none;
}
/* Every hero is flat charcoal plus the amber glow above. A looping video
background was built for the homepage on 2026-09-23 and removed the same day.
The measured scrim values and the encode recipe are preserved in README.md
under "The hero video" — worth reading before anyone proposes it again. */
.hero-in{
position:relative;z-index:1;padding:clamp(56px,8vw,104px) 24px;
max-width:var(--wrap);margin:0 auto;
display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
}
.hero-in.hero-home{grid-template-columns:1.1fr .9fr}
.hero h1{margin:12px 0 18px}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p{font-size:1.15rem;color:var(--on-dark-2);max-width:54ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;font-size:.9rem;color:var(--on-dark-2)}
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
.tick{width:16px;height:16px;flex:0 0 16px;fill:var(--amber)}
/* myenergi Product Champion medallion. Supplied artwork — never redrawn, recoloured or
cropped. The white-out version is used because the hero is charcoal; the black version
is in assets/img for any light background. Served at 2x (440px wide) and displayed at
150px so it stays crisp on retina, and the aspect ratio is locked to the file's so the
wordmark-over-medallion lockup can't be squashed. The 40px above and 10px below are the
exclusion zone the myenergi toolkit requires (the height of the Bolt on all sides,
~33px at this size) — the trimmed PNG carries no padding of its own, so don't cut it. */
.lockup{margin-top:40px}
.medallion{display:block;width:150px;height:auto;aspect-ratio:440/518;margin-bottom:10px}
/* --------------------------------------------------------------------------
6. Quote card
-------------------------------------------------------------------------- */
.qcard{background:var(--white);border-radius:10px;padding:30px;box-shadow:0 18px 44px rgba(0,0,0,.3);color:var(--charcoal)}
.qcard h2{font-size:1.4rem;margin-bottom:6px}
.qcard .sub{font-size:.93rem;color:var(--ink-2);margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--display);font-weight:700;font-size:.78rem;
letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.field input,.field select,.field textarea{
width:100%;font-family:var(--body);font-size:1rem;padding:12px 14px;
border:1.5px solid var(--line);border-radius:5px;background:var(--white);color:var(--charcoal);
}
.field textarea{resize:vertical;min-height:90px}
.field input:focus,.field select:focus,.field textarea:focus{
outline:3px solid rgba(250,190,107,.55);outline-offset:1px;border-color:var(--charcoal);
}
.qcard .fine{font-size:.8rem;color:var(--ink-2);margin-top:12px;text-align:center}
/* Honeypot. The checkbox named "botcheck" in every form. Bots that fill every field
tick it; Web3Forms then drops the submission server-side. It must be invisible AND
out of the tab order (tabindex="-1" is on the input) but must NOT be removed from
the accessibility tree in a way that stops a bot seeing it — display:none is what
Web3Forms documents and what the naive form-fillers still trip over. */
.hp{display:none!important}
/* Inline form result. Hidden until saltd.js has something to say, then unhidden with
.ok or .bad. Amber is a background colour only (1.95:1 on white), so the success
state uses amber-deep text on a tinted amber panel, not amber text. */
.form-msg{margin-top:12px;padding:11px 13px;border-radius:5px;font-size:.9rem;line-height:1.5}
.form-msg[hidden]{display:none}
.form-msg.ok{background:rgba(250,190,107,.22);border-left:3px solid var(--amber-deep);color:var(--charcoal)}
.form-msg.bad{background:rgba(46,42,43,.06);border-left:3px solid var(--charcoal);color:var(--charcoal)}
.btn[aria-disabled="true"]{opacity:.6;cursor:progress}
.btn[aria-disabled="true"]:hover{transform:none}
/* --------------------------------------------------------------------------
7. Cards / grids
-------------------------------------------------------------------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:38px}
.card{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:6px;padding:26px}
.card h3{margin-bottom:8px}
.card p{font-size:.95rem;color:var(--ink-2)}
.sec-alt .card{background:var(--white)}
/* service pillars — hover lift + arrow slide */
/* three across, so six tiles land as two full rows with nothing orphaned */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.pillar{
display:flex;flex-direction:column;background:var(--white);
border:1px solid var(--line);border-top:3px solid var(--amber);border-radius:6px;
padding:26px 22px 22px;text-decoration:none;color:var(--charcoal);
transition:transform .18s var(--ease),box-shadow .22s var(--ease),border-top-color .18s;
}
.pillar:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(46,42,43,.14);border-top-color:var(--amber-deep)}
.pillar .ico{width:34px;height:34px;fill:none;stroke:var(--amber-deep);stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.pillar h3{margin-bottom:8px;font-size:1.05rem}
.pillar p{font-size:.9rem;color:var(--ink-2);flex:1;margin:0}
.pillar .go{
font-family:var(--display);font-weight:800;font-size:.74rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--amber-deep);margin-top:16px;
display:inline-flex;align-items:center;gap:7px;
}
.pillar .go::after{content:"\2192";transition:transform .2s var(--ease)}
.pillar:hover .go::after{transform:translateX(5px)}
/* honest aside */
.aside{
margin-top:30px;padding:18px 22px;background:var(--off-white);
border:1px solid var(--line);border-left:3px solid var(--slate);border-radius:6px;
font-size:.95rem;color:var(--ink-2);max-width:78ch;
}
.sec-alt .aside{background:var(--white)}
.aside a{color:var(--amber-deep);font-weight:700}
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
/* Two rows, not one, so the figures can share them via subgrid below. row-gap is 0
because the rows are photo-then-caption inside each figure, not separate items. */
.duo{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;
column-gap:22px;row-gap:0;margin-top:36px}
/* .trio is .duo with a third column. Same subgrid trick, same caption alignment.
Only use it for three photos of the SAME orientation — at a third of the wrap
each column is about 330px, which a 3:4 portrait fills nicely and a 3:2
landscape does not. Mixed orientations go in .duo-mixed, two at a time. */
.trio{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;
column-gap:22px;row-gap:0;margin-top:36px}
.checklist{margin-top:22px}
.checklist li{display:flex;gap:13px;padding:11px 0;border-bottom:1px solid var(--line);font-size:1rem}
.checklist .tick{fill:var(--amber-deep);margin-top:5px}
.sec-dark .checklist li{border-bottom-color:var(--line-dark)}
.sec-dark .checklist .tick{fill:var(--amber)}
/* --------------------------------------------------------------------------
8. Urgent band
-------------------------------------------------------------------------- */
.band{background:var(--amber);color:var(--charcoal)}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;
flex-wrap:wrap;padding-top:30px;padding-bottom:30px}
.band h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin-bottom:4px}
.band p{font-size:.98rem;max-width:56ch}
/* --------------------------------------------------------------------------
9. Process steps
-------------------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:38px;counter-reset:s}
.step{counter-increment:s}
.step::before{
content:counter(s);display:flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:50%;background:var(--charcoal);color:var(--amber);
font-family:var(--display);font-weight:800;font-size:1.1rem;margin-bottom:14px;
}
.step h3{margin-bottom:6px}
.step p{font-size:.95rem;color:var(--ink-2)}
.sec-dark .step::before{background:var(--amber);color:var(--charcoal)}
.sec-dark .step p{color:var(--on-dark-2)}
/* --------------------------------------------------------------------------
10. Stat counters
-------------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.stat .n{
font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5vw,3.4rem);
line-height:1;color:var(--amber);display:block;
}
.stat .n .suf{font-size:.55em;vertical-align:super;margin-left:2px}
.stat .n .ph{font-size:.42em;vertical-align:middle;border-color:var(--amber);color:var(--amber);
background:repeating-linear-gradient(45deg,rgba(250,190,107,.16),rgba(250,190,107,.16) 6px,transparent 6px,transparent 12px)}
.stat .l{
font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--on-dark-2);margin-top:12px;display:block;
}
/* --------------------------------------------------------------------------
11. Tables
-------------------------------------------------------------------------- */
/* Pricing tables were removed from every page. If a table is ever added back,
these base rules are the starting point. */
table{width:100%;border-collapse:collapse;margin-top:28px;font-size:.98rem}
caption{caption-side:bottom;text-align:left;font-size:.85rem;color:var(--ink-2);padding-top:12px}
th,td{text-align:left;padding:14px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{
font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.12em;
text-transform:uppercase;background:var(--charcoal);color:var(--white);border-bottom:0;
}
tbody tr:nth-child(even){background:var(--off-white)}
.sec-alt tbody tr:nth-child(even){background:var(--white)}
/* --------------------------------------------------------------------------
12. Badges / reviews
-------------------------------------------------------------------------- */
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.badge{
font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.1em;
text-transform:uppercase;padding:9px 16px;border-radius:3px;
background:var(--amber);color:var(--charcoal);
}
.badge-outline{background:transparent;border:1.5px solid var(--charcoal);color:var(--charcoal)}
.reviews-live{margin-top:34px;min-height:180px}
.gbp{
display:inline-flex;align-items:center;gap:10px;margin-top:28px;
font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.08em;
text-transform:uppercase;color:var(--amber-deep);text-decoration:none;
border-bottom:2px solid var(--amber);padding-bottom:3px;
transition:gap .18s var(--ease);
}
.gbp:hover{gap:15px}
/* --------------------------------------------------------------------------
13. Photos
-------------------------------------------------------------------------- */
.shot{margin:0;border-radius:7px;overflow:hidden;border:1px solid var(--line);
background:var(--off-white);display:flex;flex-direction:column}
.shot img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
flex:none;transition:transform .5s var(--ease)}
/* portrait shots — switchboards and batteries are taller than they are wide */
.shot-tall img{aspect-ratio:3/4}
.shot:hover img{transform:scale(1.035)}
.shot figcaption{
font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.07em;
text-transform:uppercase;color:var(--ink-2);padding:11px 14px;
background:var(--white);border-top:1px solid var(--line);
/* flex-grow so side-by-side figures with captions of different lengths
still end at the same baseline instead of leaving a gap in the shorter one */
flex:1 0 auto;display:flex;align-items:center;
}
/* Gap between figures stacked vertically down a column. It must NOT apply inside .duo
or .duo-mixed — there the two figures are adjacent siblings as well, so this was
pushing the right-hand one 22px below the left and knocking the pair out of line. */
.shot+.shot{margin-top:22px}
.duo .shot+.shot,.duo-mixed .shot+.shot,.trio .shot+.shot{margin-top:0}
/* --- myenergi Product Champion mark over a photo -------------------------
Used on exactly one figure: the Zappi shot on the EV page. Read this before
reusing it anywhere, because most of it is licence compliance, not styling.
THE MARK IS NOT BURNT INTO THE JPEG, AND MUSTN'T BE. It's the untouched
supplied PNG laid over the photo by CSS. Two reasons: baking it in would run
a protected mark through JPEG compression, and if the Product Champion
accreditation ever lapses this comes out by deleting one ![]()
— no photo to
re-cut, no original to hunt down.
Placement is measured, not eyeballed. The toolkit (p6) sets the exclusion
zone at the height of the Bolt, which is 31.4% of the mark's width, and the
position was chosen by scoring every spot in the frame on the WORST contrast
under the mark's actual ink — not on how flat the patch looked. At 12.5%
width the mark is 150x177 on the 1200x800 source, sitting at 6.92%/5.88%,
which leaves 83px left, 47px top, 967px right and 576px bottom of clear wall
against a 47px requirement, and never drops below 10.4:1 contrast. Earlier
attempts at bottom-left and bottom-right both crossed the black charging
cable, where a black mark measures 1:1 and simply vanishes.
It's the BLACK mark, not the white-out one, because this wall runs 141-195
luminance — white-out would be invisible. Both are sanctioned (toolkit p5:
Full Colour / White Out / Black). Never any other colour, and never SALTD
amber.
If the photo is ever swapped or re-cropped, these percentages are worthless.
Re-run the contrast search against the new frame; don't nudge it by eye.
Note this is off-guideline: no sanctioned toolkit example puts the medallion
on a photograph — p10 and p12 both keep it on flat White/Black/Green beside
the image. Andre's call on 2026-09-22, with that trade-off on the table. */
.pc-frame{position:relative;display:block;flex:none;
transition:transform .5s var(--ease)}
/* beat .shot img's width/aspect/object-fit/transition, and .shot:hover img's scale */
.pc-frame .pc-mark{position:absolute;left:6.92%;top:5.88%;width:12.5%;height:auto;
aspect-ratio:440/518;object-fit:contain;pointer-events:none;transition:none}
/* the whole frame zooms on hover, so the mark travels with the photo instead of
floating free of it — and the photo's own transform is cancelled to stop it
scaling twice */
.shot:hover .pc-frame{transform:scale(1.035)}
.shot:hover .pc-frame img{transform:none}
/* Both figures share the parent's two rows, so the photos sit in one row and the
captions in another. That makes the caption bars line up exactly, whatever the
captions say and whatever the photos' real proportions are — no arithmetic, no
relying on both images being cropped to the same ratio. Browsers without subgrid
ignore the subgrid keyword and fall back to the old stretch behaviour. */
.duo{align-items:stretch}
.duo .shot,.trio .shot{height:100%;display:grid;grid-row:span 2;grid-template-rows:subgrid}
.trio{align-items:stretch}
/* one landscape shot beside one portrait shot. A 2:1 column ratio makes a 3:2
image and a 3:4 image render at exactly the same height, so the pair lines up
instead of one photo finishing well short of the other. */
.duo-mixed{display:grid;grid-template-columns:2fr 1fr;gap:22px;align-items:stretch}
.duo-mixed .shot{height:100%}
.ph-box{
background:repeating-linear-gradient(45deg,rgba(250,190,107,.13),rgba(250,190,107,.13) 11px,transparent 11px,transparent 22px);
border:2px dashed var(--amber-deep);border-radius:7px;min-height:190px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:24px;font-family:var(--display);font-weight:700;
font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-deep);
}
.ph-box span{font-weight:600;font-size:.72rem;letter-spacing:.02em;text-transform:none;margin-top:8px;line-height:1.5}
/* --------------------------------------------------------------------------
14. FAQ
-------------------------------------------------------------------------- */
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{
font-family:var(--display);font-weight:700;font-size:1.05rem;cursor:pointer;
list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.5rem;font-weight:700;color:var(--amber-deep);
transition:transform .2s var(--ease)}
details[open] summary::after{content:"\2013"}
details p{margin-top:12px;color:var(--ink-2);max-width:74ch}
/* --------------------------------------------------------------------------
15. Service areas
-------------------------------------------------------------------------- */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
.area h3{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--amber)}
.area li{padding:4px 0;font-size:.98rem}
/* --------------------------------------------------------------------------
16. CTA + footer
-------------------------------------------------------------------------- */
.cta{background:var(--charcoal);color:var(--white);text-align:center}
.cta h2{margin-bottom:10px}
.cta p{color:var(--on-dark-2);max-width:56ch;margin:0 auto}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}
/* --------------------------------------------------------------------------
16b. Photo-backed dark sections
Add sec-photo alongside sec-dark or cta and pass the image in as a custom
property on the element itself:
The image reference lives in the HTML deliberately — a shared stylesheet
shouldn't know which photo sits on which page.
Rules, all of which matter:
1. ONLY USE NIGHT PHOTOS. The scrim below is 82% opaque, so a daylight
switchboard photo underneath reads as grey mud, not as a photo. The two
shipped backgrounds are dark to begin with, which is why 18% of them is
still legible as brick and as light scallops.
2. 82% IS NOT A TASTE DECISION, IT IS THE CONTRAST FLOOR. Measured against
the brightest 0.5% of pixels in each image: white 9.5:1, amber 5.7:1 and
on-dark-2 (the small uppercase stat labels, the worst case) 4.55:1. WCAG
AA wants 4.5:1 for small text. Drop the scrim to 76% and the labels fall
to 3.7:1 and fail. If you swap in a brighter photo, re-measure rather
than assuming 82% still carries it.
3. This rule sits after .sec-dark and .cta on purpose. Both of those use the
`background` shorthand, which resets background-image to none, so this
block has to come later in the file to win.
4. If --sec-photo is ever missing or the file 404s, background-image is
invalid and drops entirely, leaving background-color. The section goes
back to flat charcoal-deep rather than breaking.
5. No background-attachment:fixed. It judders on iOS and buys nothing here.
-------------------------------------------------------------------------- */
.sec-photo{
background-color:var(--charcoal-deep);
background-image:linear-gradient(rgba(29,29,31,.82),rgba(29,29,31,.82)),var(--sec-photo);
background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* Phones get the 1200px crop — a third of the bytes, and no phone can resolve
the 2400px one anyway. Falls back to the full-size variable if no -sm exists. */
@media(max-width:820px){
.sec-photo{
background-image:linear-gradient(rgba(29,29,31,.82),rgba(29,29,31,.82)),
var(--sec-photo-sm,var(--sec-photo));
}
}
footer{background:var(--charcoal-soft);color:var(--on-dark-2);font-size:.88rem;padding:44px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:30px;
border-bottom:1px solid var(--line-dark)}
footer h3{font-family:var(--display);font-weight:800;font-size:.76rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--white);margin-bottom:14px}
footer .logo{height:40px;margin-bottom:16px}
footer li{padding:4px 0}
footer a{color:var(--amber);text-decoration:none}
footer a:hover{text-decoration:underline}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px}
/* --------------------------------------------------------------------------
17. Mobile call bar
-------------------------------------------------------------------------- */
.callbar{display:none}
/* --------------------------------------------------------------------------
18. Scroll reveal
-------------------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(26px);
transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s} .rv-d4{transition-delay:.32s} .rv-d5{transition-delay:.40s}
.no-js .rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
.rv{opacity:1;transform:none}
}
/* --------------------------------------------------------------------------
19. Responsive
-------------------------------------------------------------------------- */
@media(max-width:1000px){
.stats{grid-template-columns:repeat(2,1fr);gap:36px}
}
@media(max-width:820px){
.pillars{grid-template-columns:repeat(2,1fr)}
}
/* Five nav items need roughly 1160px of header, so the full page names sit in the top
bar at desktop width. Below that, tighten the links and drop the REC badge — it's
repeated in the hero trust row and the footer — rather than let them wrap. */
@media(max-width:1200px){
.nav a{font-size:.78rem;padding:10px 9px}
.nav a::after{left:9px;right:9px}
.hdr-rec{display:none}
}
/* Tightened, five items need about 990px, so the burger takes over just under that
rather than waiting for the 900px tablet breakpoint used by the rest of the layout. */
@media(max-width:1040px){
.burger{display:block;order:3;margin-left:0}
.nav{
position:absolute;top:100%;left:0;right:0;
flex-direction:column;align-items:stretch;gap:0;margin:0;
background:var(--charcoal);border-bottom:2px solid var(--amber);
padding:0 18px;
max-height:0;overflow:hidden;visibility:hidden;
transition:max-height .3s var(--ease),visibility .3s,padding .3s var(--ease);
}
.nav.open{max-height:70vh;overflow-y:auto;visibility:visible;padding:8px 18px 18px}
.nav a{padding:14px 6px;font-size:1rem;border-bottom:1px solid var(--line-dark)}
.nav a::after{display:none}
.nav-home{display:block}
.hdr-right{order:2;margin-left:auto;gap:12px}
}
@media(max-width:900px){
.hero-in,.hero-in.hero-home{grid-template-columns:1fr;gap:40px}
.split{grid-template-columns:1fr;gap:38px}
.grid-3,.grid-2,.steps{grid-template-columns:1fr}
.areas{grid-template-columns:repeat(2,1fr)}
.foot-grid{grid-template-columns:1fr;gap:28px}
.band .wrap{flex-direction:column;align-items:flex-start}
}
@media(max-width:620px){
body{font-size:16px;padding-bottom:58px}
:root{--hdr-h:68px}
.hdr{padding:12px 18px}
.logo{height:36px}
.wrap{padding:0 18px}
.pillars,.areas{grid-template-columns:1fr}
/* stacked, the figures no longer share rows — drop back to one row each, or the
18px row gap would open up between each photo and its own caption */
.duo,.trio{grid-template-columns:1fr;column-gap:0;row-gap:18px}
.duo .shot,.trio .shot{display:flex;grid-row:auto}
/* the portrait column gets too narrow to read below this, so stack instead */
.duo-mixed{grid-template-columns:1fr;gap:18px}
.stats{grid-template-columns:1fr;gap:30px}
table{font-size:.9rem}
th,td{padding:12px 10px}
.callbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:90}
.callbar a{flex:1;text-align:center;padding:16px 8px;font-family:var(--display);
font-weight:800;font-size:.95rem;text-decoration:none}
.callbar .c1{background:var(--amber);color:var(--charcoal)}
.callbar .c2{background:var(--charcoal);color:var(--white);border-top:2px solid var(--amber)}
}