/* ============================================================
NG Bailey — homepage clone
Tokens sampled from the live site (colours, type scale, radii)
============================================================ */
:root{
/* palette */
--navy: #213c58;
--navy-05: rgba(33,60,88,.05);
--navy-10: rgba(33,60,88,.10);
--navy-20: rgba(33,60,88,.20);
--teal: #497878;
--purple: #6c5877;
--rose: #ae5e63;
--sky: #457a91;
--gold: #d3a04b;
--dark: #231f20;
--ink: #141414;
--ice: #edf4fa; /* page background — very light navy-tinted blue */
--ice-deep: #e0ebf6; /* header bar — one visible step darker than the page */
--off: #e4eef7; /* alternating sections, one step deeper */
/* layout */
--site-width: 1776px;
--site-padding: clamp(1rem, -0.93rem + 5.43vw, 4.5rem);
--gutter: clamp(1rem, 0.7rem + 1.05vw, 2rem); /* 24px @1280, matches live grid */
--section-spacing: clamp(1.5rem, -0.1rem + 4.4vw, 5rem);
--header-h: clamp(4.5rem, 3.6rem + 2.5vw, 6.25rem); /* taller than NGB's: the new lockup is 3 stacked lines */
--announce-h: 0px; /* announcement bar removed */
--radius: 10px;
--btn-radius: 8px; /* square-edged buttons with a tiny bit of curve */
/* type */
--fs-h1: clamp(2.5rem, 1.43rem + 3.15vw, 5.5rem);
--fs-h2: clamp(1.75rem, 0.85rem + 1.82vw, 3.2rem);
--fs-h3: clamp(1.05rem, 0.86rem + 0.35vw, 1.35rem);
--fs-body: clamp(0.9375rem, 0.6rem + 0.42vw, 1.125rem);
--fs-sm: clamp(0.8125rem, 0.7rem + 0.18vw, 0.9375rem);
/* elevation — navy-tinted so shadows sit inside the palette rather than
greying it. Three steps: rest, raised, floating. */
--shadow-sm: 0 1px 2px rgba(33,60,88,.05), 0 3px 10px rgba(33,60,88,.07);
--shadow-md: 0 2px 6px rgba(33,60,88,.07), 0 12px 28px -10px rgba(33,60,88,.20);
--shadow-lg: 0 4px 12px rgba(33,60,88,.09), 0 26px 48px -16px rgba(33,60,88,.26);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{
margin:0;
font-family:Montserrat,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
font-size:var(--fs-body);
line-height:1.6;
color:var(--ink);
background:var(--ice);
overflow-x:hidden;
}
img,video{max-width:100%;display:block}
ul{list-style:none;margin:0;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
p{margin:0 0 1em}
/* keyboard + selection polish */
::selection{background:var(--gold);color:var(--navy)}
:where(a,button,input,select,[tabindex]):focus-visible{outline:2px solid var(--navy);outline-offset:2px}
:where(.footer,.announcement,.acc-item.is-open,.proj,.resp-card,.news-card,.discover__grid li) :where(a,button):focus-visible{outline-color:#fff}
.nav__link:focus-visible::after{transform:scaleX(1)}
.btn:focus-visible .arr{transform:translateX(4px)}
.skip-link{
position:fixed;left:1rem;top:.5rem;z-index:100;
background:var(--navy);color:#fff;font-weight:700;font-size:var(--fs-sm);
padding:.6rem 1.1rem;border-radius:var(--btn-radius);
transform:translateY(-250%);transition:transform .2s ease;
}
.skip-link:focus-visible{transform:none;outline-color:#fff}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.25px;line-height:1;color:var(--navy)}
.wrap{
width:100%;
max-width:calc(var(--site-width) + var(--site-padding)*2);
margin-inline:auto;
padding-inline:var(--site-padding);
}
/* ── shared: outlined / solid two-tone headings ─────────────── */
.outline{
-webkit-text-stroke:clamp(1.5px,.04em,2.5px) var(--navy);
-webkit-text-fill-color:#fff;
color:#fff;
paint-order:stroke fill;
}
.sect-title{
font-size:var(--fs-h2);
text-transform:uppercase;
line-height:1.02;
letter-spacing:-.02em;
}
.sect-lede{
max-width:62ch;
margin:1.6rem 0 0;
color:var(--ink);
}
.sect-lede--tight{max-width:52ch}
.sect-head{
display:flex;
gap:2rem clamp(1.5rem,4vw,4rem);
align-items:flex-end;
justify-content:space-between;
flex-wrap:wrap;
margin-bottom:clamp(1.75rem,3vw,3rem);
}
.sect-head--row{align-items:center}
/* ── buttons ────────────────────────────────────────────────── */
.btn{
display:inline-flex;align-items:center;gap:.7em;
height:clamp(2.375rem,2.1rem + .55vw,3rem);
padding-inline:clamp(.95rem,.75rem + .5vw,1.5rem);
border-radius:var(--btn-radius,8px);
border:1px solid transparent;
font-size:var(--fs-sm);
font-weight:600;
letter-spacing:-.25px;
white-space:nowrap;
transition:background .22s ease,color .22s ease,border-color .22s ease,
box-shadow .22s ease,transform .22s ease;
}
.btn:active{transform:scale(.97)}
.btn--navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn--navy:hover{background:#16283b;border-color:#16283b;box-shadow:var(--shadow-sm)}
.btn--white{background:#fff;border-color:#fff;color:var(--navy)}
.btn--white:hover{background:transparent;color:#fff;border-color:#fff}
.btn--outline{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn--outline:hover{background:var(--navy);color:#fff}
/* call-now actions: solid navy — the same blue as the headings — with white
text. (.btn--gold is the historical class name across the templates; the
gold now lives only in the accents: stat rules, footer band, eyebrows.) */
.btn--gold{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 2px 10px rgba(33,60,88,.28)}
.btn--gold:hover{background:#16283b;border-color:#16283b;color:#fff;box-shadow:0 4px 14px rgba(33,60,88,.32)}
/* on navy surfaces (sidebar card, closing band) the button needs an edge or
it melts into its background */
.svc-card .btn--gold,.svc-final .btn--gold{border-color:rgba(255,255,255,.85)}
.svc-card .btn--gold:hover,.svc-final .btn--gold:hover{border-color:#fff}
/* WhatsApp — official brand green, matching the floating button. */
.btn--wa{background:#25d366;border-color:#25d366;color:#fff;box-shadow:var(--shadow-sm)}
.btn--wa:hover{background:#1da851;border-color:#1da851;color:#fff}
.btn--wa svg{flex:none}
.btn--sm{height:2.4rem;font-size:.8125rem}
.arr{transition:transform .22s ease;display:inline-block}
.btn:hover .arr{transform:translateX(4px)}
.circ{
display:inline-grid;place-items:center;
width:clamp(2.5rem,2.2rem + .8vw,3.25rem);
aspect-ratio:1;
border-radius:50%;
font-size:1.15rem;line-height:1;
transition:background .22s ease,transform .22s ease,opacity .22s;
}
.circ--navy{background:var(--navy);color:#fff}
.circ--navy:hover{background:#16283b}
.circ--grey{background:#b6c0c9;color:#fff}
.circ--grey:hover{background:#9dabb7}
.circ--outline{border:1.5px solid #fff;color:#fff;width:2.9rem}
.circ--ghost{
border:1.5px solid rgba(255,255,255,.85);
background:rgba(0,0,0,.12);
color:#fff;
backdrop-filter:blur(4px);
width:2.9rem;
}
.circ--ghost:hover{background:rgba(0,0,0,.3)}
.circ[disabled]{opacity:.35;pointer-events:none}
.pill-btn{
display:inline-flex;align-items:center;gap:.75rem;
height:2.9rem;padding-inline:1.25rem;
border-radius:var(--btn-radius);
border:1.5px solid rgba(255,255,255,.85);
background:rgba(0,0,0,.12);
backdrop-filter:blur(4px);
color:#fff;font-weight:600;font-size:var(--fs-sm);letter-spacing:-.25px;
}
.pill-btn:hover{background:rgba(0,0,0,.3)}
/* small glyph icons */
.ic-pause,.ic-play{width:12px;height:13px;display:inline-block;position:relative}
.ic-pause::before,.ic-pause::after{
content:"";position:absolute;top:0;width:3.5px;height:13px;background:currentColor;border-radius:1px;
}
.ic-pause::before{left:1px}.ic-pause::after{right:1px}
.ic-play::before{
content:"";position:absolute;left:2px;top:0;
border-left:10px solid currentColor;border-top:6.5px solid transparent;border-bottom:6.5px solid transparent;
}
.ic-muted,.ic-sound{
width:17px;height:14px;display:inline-block;
background:currentColor;
-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
--m:url("data:image/svg+xml;utf8,");
}
.ic-sound{--m:url("data:image/svg+xml;utf8,")}
.ic-cal{
width:15px;height:15px;flex:none;display:inline-block;background:currentColor;
-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
--m:url("data:image/svg+xml;utf8,");
}
.ic-book{
width:15px;height:15px;flex:none;display:inline-block;background:currentColor;
-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
--m:url("data:image/svg+xml;utf8,");
}
.ic-eye{
width:17px;height:13px;flex:none;display:inline-block;background:currentColor;
-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
--m:url("data:image/svg+xml;utf8,");
}
/* ── header ─────────────────────────────────────────────────── */
.header{
position:fixed;left:0;right:0;top:var(--announce-h);z-index:50;
background:var(--ice-deep);
transition:box-shadow .25s ease,top .2s ease;
}
/* frosted once content can pass beneath it — the solid colour above is the
fallback for engines without backdrop-filter */
@supports (backdrop-filter:blur(1px)){
.header{background:rgba(224,235,246,.8);backdrop-filter:blur(12px) saturate(1.5)}
}
.header.is-stuck{box-shadow:0 2px 18px rgba(33,60,88,.10)}
.header__inner{
height:var(--header-h);
max-width:calc(var(--site-width) + var(--site-padding)*2);
margin-inline:auto;padding-inline:var(--site-padding);
display:flex;align-items:center;gap:clamp(.75rem,1.6vw,2rem);
}
.logo{display:flex;align-items:center;flex:none}
/* stacked three-line lockup: size off the header height so it stays legible */
.logo__img,
.logo__svg{
height:clamp(3.25rem,2.6rem + 2vw,5rem);
width:auto;
overflow:visible; /* round caps sit right on the viewBox edge */
}
/* fade up on load; 'both' holds the from-state so there is no flash of a
fully opaque logo before the animation starts */
.logo__svg{
animation:logoFadeIn .85s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes logoFadeIn{
from{opacity:0;transform:translateY(-5px)}
to {opacity:1;transform:none}
}
/* Each arc's mask sweeps along its own centreline, rippling outward from the
innermost. pathLength="100" normalises all five so one keyframe set fits
them whatever their real lengths. Butt caps keep the sweeping edge a clean
perpendicular cut instead of a bulging round end.
One pulse every 9s: ~2s of movement, then it settles and stays put. */
.logo__sweep{
stroke-linecap:butt;
stroke-dasharray:100 100;
animation:logoArcSweep 9s cubic-bezier(.4,0,.25,1) infinite;
/* hold off until the fade has finished, or the arcs retract mid-fade */
animation-delay:calc(.95s + var(--i) * .11s);
}
@keyframes logoArcSweep{
0% { stroke-dasharray:100 100 } /* rest: pixel-identical to the original */
9% { stroke-dasharray:34 100 } /* drawn back */
24% { stroke-dasharray:100 100 } /* swept back out to full */
100% { stroke-dasharray:100 100 } /* still for the remaining ~7s */
}
@media (prefers-reduced-motion:reduce){
.logo__sweep{animation:none}
.logo__svg{animation:none;opacity:1;transform:none}
}
.nav{margin-left:clamp(.5rem,1.5vw,1.75rem)}
.nav__list{display:flex;align-items:center;gap:clamp(.7rem,1.2vw,1.6rem)}
.nav__link{
display:inline-flex;align-items:center;gap:.4em;
font-weight:700;letter-spacing:-.25px;color:var(--navy);
font-size:clamp(.8125rem,.68rem + .32vw,1.0625rem);
padding:.35rem 0;position:relative;
}
.nav__link::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
background:var(--navy);transform:scaleX(0);transform-origin:left;
transition:transform .25s ease;
}
.nav__item:hover .nav__link::after,.nav__item.is-open .nav__link::after{transform:scaleX(1)}
.header__cta{flex:none;margin-left:auto}
/* mobile-only call button, sits to the left of the burger.
margin-left:auto moves here so the pair stays hard right as one group. */
.callbtn{
display:none;align-items:center;gap:.6rem;flex:none;
height:clamp(2.6rem,2.2rem + 1vw,3rem);
padding-inline:clamp(.9rem,.6rem + 1vw,1.35rem);
margin-left:auto;
border-radius:var(--btn-radius);background:var(--navy);color:#fff;
font-weight:700;font-size:var(--fs-sm);letter-spacing:-.25px;white-space:nowrap;
transition:background .22s ease,color .22s ease,transform .22s ease;
}
.callbtn svg{width:19px;height:19px;flex:none}
.callbtn__short{display:none}
.callbtn:hover,.callbtn:focus-visible{background:#16283b;color:#fff}
.callbtn:active{transform:scale(.97)}
.burger{display:none;flex-direction:column;gap:5px;padding:.4rem}
.burger span{width:24px;height:2.5px;background:var(--navy);border-radius:2px;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
/* ── mega menu ──────────────────────────────────────────────── */
.mega{
position:absolute;left:0;right:0;top:100%;
background:#fff;
border-top:2px solid;
border-image:linear-gradient(90deg,var(--teal) 0 20%,var(--sky) 0 40%,var(--purple) 0 60%,var(--rose) 0 80%,var(--gold) 0 100%) 1;
box-shadow:0 24px 40px -18px rgba(33,60,88,.28);
animation:megaIn .22s ease both;
}
@keyframes megaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mega__inner{
max-width:calc(var(--site-width) + var(--site-padding)*2);
margin-inline:auto;padding:2rem var(--site-padding) 2.75rem;
}
.mega__title{
text-transform:uppercase;font-weight:800;color:var(--navy);
letter-spacing:-.25px;font-size:1.1rem;margin-bottom:1.35rem;
}
/* text-only dropdowns — no thumbnails */
.mega__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 2.5rem}
.mega__grid--4{grid-template-columns:repeat(4,1fr)}
.mega__grid a{
display:block;color:var(--navy);padding:.7rem 0;
border-bottom:1px solid var(--navy-10);
transition:color .2s ease,padding-left .2s ease;
}
.mega__grid a:hover{color:var(--sky);padding-left:.35rem}
.mega__grid span{
display:block;
font-weight:700;font-size:.9rem;letter-spacing:-.25px;line-height:1.35;
}
.mega-scrim{position:fixed;inset:0;z-index:40;background:rgba(15,25,35,.22)}
/* ── hero ───────────────────────────────────────────────────── */
.hero{padding-top:calc(var(--header-h) + var(--announce-h) + clamp(2rem,4.5vw,4.5rem))}
/* The logo's concentric arcs, oversized and very soft, bleeding in from the
top-right — the mark's gesture at page scale. Anchored to the PAGE, not the
hero, so the top ring meets the header's bottom edge exactly on every
template (heroes start at different depths once breadcrumbs are in play).
The page colour moves to so a z-index:-1 layer on body is visible;
sections that paint their own background still cover the arcs. */
html{background:var(--ice)}
body{background:transparent;position:relative}
.hero__title{font-size:var(--fs-h1);line-height:0;text-transform:uppercase;margin:0;container-type:inline-size;letter-spacing:-.02em}
/* The h1 keeps --fs-h1 so 6.6cqi below can cap against it, but its own strut is
zeroed: the two headline spans shrink to ~22px on a phone while the strut stayed
40px, padding ~17px of dead space under each line. Each line now sizes to its own
text. line-height:1 on the spans reproduces the previous desktop metrics exactly. */
.hero__title .outline,
.hero__title .hero__rotator,
.hero__title .hero__word{line-height:1}
/* both headline lines stay on one line and stay the same size as each other: the longer of
the two ("Emergency Electricians") needs 14.64em, so cap at 100/14.64 ≈ 6.8% of the
available width — they shrink together on narrow screens */
.hero__title .outline,
.hero__title .hero__word{white-space:nowrap;font-size:min(var(--fs-h1),6.6cqi)}
/* long service names wrap rather than overflow — they share the h1 size */
.hero__rotator{display:inline-grid;position:relative;max-width:100%}
.hero__word{
grid-area:1/1;
opacity:0;transform:translateY(.3em);
transition:opacity .5s ease,transform .5s ease;
text-wrap:balance;
}
.hero__word.is-active{opacity:1;transform:none}
.hero__sub{
margin:clamp(1.1rem,2vw,1.9rem) 0 0;
font-size:clamp(1rem,.78rem + .55vw,1.35rem);
font-weight:500;color:var(--navy);letter-spacing:-.25px;
max-width:58ch;text-wrap:pretty;
border-left:3px solid var(--gold);
padding-left:clamp(.85rem,.7rem + .6vw,1.15rem);
}
/* CTA pair under the hero lede. service.css carries the same rule for the
sub-page heroes; the homepage only loads this file, so it lives here too. */
.hero__cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0 0}
/* trust ticks under the lede — claims the site already makes (footer values,
why-pages), surfaced where a visitor decides whether to ring. No boxes:
bold navy text behind a heavy tick in an arc colour. */
.hero-chips{
display:grid;grid-template-columns:repeat(3,minmax(0,auto));
justify-content:start;
gap:.65rem clamp(1.25rem,2.5vw,2.5rem);
margin:1.35rem 0 0;padding:0;list-style:none;
}
.hero-chips li{
display:flex;align-items:flex-start;gap:.5rem;
font-size:clamp(.9375rem,.83rem + .3vw,1.125rem);
font-weight:700;color:var(--navy);letter-spacing:-.2px;
}
.hero-chips li::before{
content:"";width:1.05em;height:1.05em;flex:none;
margin-top:.2em; /* sit on the first line when a label wraps */
background:var(--chip-c,var(--teal));
-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
--m:url("data:image/svg+xml;utf8,");
}
.hero-chips li:nth-child(5n+2){--chip-c:var(--sky)}
.hero-chips li:nth-child(5n+3){--chip-c:var(--purple)}
.hero-chips li:nth-child(5n+4){--chip-c:var(--rose)}
.hero-chips li:nth-child(5n+5){--chip-c:var(--gold)}
/* phones: two columns, each label shrunk to fit on a single line */
@media (max-width:720px){
.hero-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem .6rem}
.hero-chips li{font-size:.75rem;gap:.35rem;white-space:nowrap}
.hero-chips li::before{width:.95em;height:.95em;margin-top:.15em}
/* stack the hero's Call / Book Online pair full-width instead of side by side */
.hero__cta-row{flex-direction:column;align-items:stretch}
.hero__cta-row .btn{width:100%;justify-content:center}
}
/* The call / WhatsApp pair carries the page's main action — bigger than the
standard button, most noticeably on desktop where the old size sat lost
against the headline scale. */
.hero__cta-row .btn,
.svc-cta .btn{
height:clamp(2.75rem,2.3rem + 1.1vw,3.9rem);
padding-inline:clamp(1.2rem,.9rem + 1vw,2.4rem);
font-size:clamp(.875rem,.78rem + .35vw,1.125rem);
font-weight:700;
}
.hero__cta-row .btn svg,
.svc-cta .btn svg{width:1.15em;height:1.15em}
/* The hero's WhatsApp button is gone — replaced by the floating .wa-float
button, fixed bottom-right on every page — and a Book Online button now
sits in the slot beside Call instead. Two buttons again, so Call goes back
to its normal shared size rather than the single-button desktop stretch;
the pair stays visible at every width, including desktop. */
.hero__media{margin-top:clamp(1.75rem,3.5vw,3.25rem);aspect-ratio:1156/481}
.media-frame{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--navy-05);box-shadow:var(--shadow-md)}
.media-frame video,.media-frame img{width:100%;height:100%;object-fit:cover}
.media-ctrls{
position:absolute;right:clamp(.75rem,1.5vw,1.5rem);bottom:clamp(.75rem,1.5vw,1.5rem);
display:flex;align-items:center;gap:.6rem;
}
/* ── stats ──────────────────────────────────────────────────── */
.stats{padding-block:var(--section-spacing)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3.5rem)}
/* Each rule takes one logo arc colour, innermost outward — the same gesture
as the mark, laid flat. Round caps echo the arcs' round ends; gold stays
reserved for call-now actions. */
.stat{position:relative;padding-top:clamp(1.1rem,2vw,2rem)}
.stat::before{
content:"";position:absolute;top:0;left:0;right:0;height:4px;
border-radius:999px;background:var(--stat-c,var(--teal));
transform-origin:left;
transition:transform .8s cubic-bezier(.22,.61,.36,1);
transition-delay:var(--bar-delay,0ms);
}
/* the rules draw themselves in as the row arrives, echoing the logo's arc
sweep; script.js sets data-bar and .stat--in, so without JS they just show */
.stat[data-bar]:not(.stat--in)::before{transform:scaleX(0)}
.stat:nth-child(1){--stat-c:var(--teal)}
.stat:nth-child(2){--stat-c:var(--sky)}
.stat:nth-child(3){--stat-c:var(--purple)}
.stat:nth-child(4){--stat-c:var(--rose)}
.stat__num{
font-size:clamp(2.5rem,1.6rem + 2.6vw,4.5rem);font-weight:800;color:var(--navy);
letter-spacing:-.02em;line-height:1;margin:0 0 .35em;
font-variant-numeric:tabular-nums;
}
.stat__label{
margin:0;color:var(--navy);font-weight:500;
font-size:clamp(.9375rem,.78rem + .35vw,1.25rem);letter-spacing:-.25px;
}
/* ── services ───────────────────────────────────────────────── */
.services{padding-block:var(--section-spacing)}
.services__layout{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:var(--gutter);
margin-top:clamp(1.75rem,3vw,3rem);
align-items:start;
}
.accordion{display:flex;flex-direction:column;gap:.75rem}
.acc-item{
border:1px solid var(--navy-10);border-radius:var(--radius);
background:#fff;box-shadow:var(--shadow-sm);
transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
overflow:hidden;
}
.acc-item:not(.is-open):is(:hover,:focus-within){background:var(--navy-05);border-color:var(--navy-20)}
.acc-item.is-open{background:var(--navy);border-color:var(--navy);box-shadow:var(--shadow-md)}
/* the homepage/town "Our Services" accordion cycles through the 5 arc
colours too, same pattern as the FAQ boxes -- scoped to #servicesAcc so
the single always-open "lead" panel elsewhere (.svc-detail__lead) keeps
its plain navy. */
#servicesAcc .acc-item.is-open{background:var(--chip-c,var(--teal));border-color:var(--chip-c,var(--teal))}
#servicesAcc .acc-item:nth-of-type(5n+2).is-open{--chip-c:var(--sky)}
#servicesAcc .acc-item:nth-of-type(5n+3).is-open{--chip-c:var(--purple)}
#servicesAcc .acc-item:nth-of-type(5n+4).is-open{--chip-c:var(--rose)}
#servicesAcc .acc-item:nth-of-type(5n+5).is-open{--chip-c:var(--gold)}
.acc-head{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:clamp(1rem,1.6vw,1.6rem) clamp(1.1rem,1.8vw,2rem);
text-align:left;font-weight:700;letter-spacing:-.25px;color:var(--navy);
font-size:clamp(1rem,.85rem + .35vw,1.35rem);
}
.acc-item.is-open .acc-head{color:#fff;padding-bottom:.35rem}
.acc-icon{position:relative;width:16px;height:16px;flex:none}
.acc-icon::before,.acc-icon::after{
content:"";position:absolute;background:currentColor;border-radius:1px;transition:transform .3s ease,opacity .3s;
}
.acc-icon::before{left:0;top:7px;width:16px;height:2px}
.acc-icon::after{top:0;left:7px;width:2px;height:16px}
.acc-item.is-open .acc-icon{display:none}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s ease}
.acc-item.is-open .acc-body{grid-template-rows:1fr}
.acc-body__inner{overflow:hidden}
.acc-item.is-open .acc-body__inner{
padding:0 clamp(1.1rem,1.8vw,2rem) clamp(1.25rem,2vw,2rem);
}
.acc-body p{margin-bottom:1.5em}
.acc-item.is-open .acc-body p{color:#fff}
.services__media{aspect-ratio:566/379;position:sticky;top:calc(var(--header-h) + var(--announce-h) + 1rem)}
/* ── toggle pills (used by the About section) ───────────────── */
.toggle{
display:inline-flex;align-items:center;
background:#fff;border:1px solid var(--navy-10);
border-radius:calc(var(--btn-radius) + 5px);padding:5px;flex:none;
box-shadow:var(--shadow-sm);
}
.toggle__btn{
display:inline-flex;align-items:center;gap:.55rem;
height:clamp(2.5rem,2.2rem + .7vw,3.25rem);
padding-inline:clamp(1rem,.8rem + .7vw,1.75rem);
border-radius:var(--btn-radius);font-weight:700;letter-spacing:-.25px;
font-size:var(--fs-sm);color:var(--navy);
transition:background .25s ease,color .25s ease;
}
.toggle__btn:not(.is-active):hover{background:var(--navy-10)}
.toggle__btn.is-active{background:var(--navy);color:#fff}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);display:none}
.toggle__btn.is-active .dot{display:block}
/* ── carousel ───────────────────────────────────────────────── */
.carousel{position:relative}
.carousel__track{
display:flex;gap:var(--gutter);
overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-ms-overflow-style:none;
scroll-behavior:smooth;
/* breathing room so card shadows and hover-lift aren't clipped by the
scroll container's edges */
padding:.5rem .25rem .75rem;
margin:-.5rem -.25rem -.5rem;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track>*{
flex:0 0 calc((100% - (var(--per) - 1) * var(--gutter)) / var(--per));
scroll-snap-align:start;
}
.carousel[data-per="4"]{--per:4}
.carousel[data-per="3"]{--per:3}
.carousel[data-per="2"]{--per:2}
.carousel[data-per="1"]{--per:1}
.carousel__foot{
display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.5rem);
margin-top:clamp(1.25rem,2.5vw,2.5rem);
justify-content:flex-end;
}
.carousel__foot--left{justify-content:flex-start;margin-top:clamp(2rem,4vw,4rem)}
.carousel__foot--inline{margin-top:0;flex:none}
.progress{flex:1 1 auto;min-width:120px;max-width:340px;height:2px;background:var(--navy-20);position:relative;overflow:hidden}
.progress span{position:absolute;inset:0 auto 0 0;width:30%;background:var(--navy);transition:width .3s ease,transform .3s ease}
.carousel__nav{display:flex;gap:.6rem;flex:none}
.carousel__nav .circ:first-child:hover{transform:translateX(-2px)}
.carousel__nav .circ:last-child:hover{transform:translateX(2px)}
/* ── projects ───────────────────────────────────────────────── */
.response{padding-block:var(--section-spacing)}
.experience{padding-block:var(--section-spacing)}
/* Full page width, single column, running the whole measure. */
.response__body{
max-width:none;
margin-top:clamp(1.2rem,2vw,1.9rem);
font-size:var(--fs-lede,1.05rem);
color:var(--navy);
}
.response__body p{margin:0 0 1em}
.response__body p:last-child{margin-bottom:0}
.projects{padding-block:var(--section-spacing)}
.projects__layout{
display:grid;grid-template-columns:minmax(280px,40%) minmax(0,1fr);
gap:clamp(1.5rem,3vw,3.75rem);align-items:start;
}
.projects__intro .btn{margin-top:clamp(1.5rem,2.5vw,2.25rem)}
/* the live cards are content-driven: narrow columns wrap the copy and grow taller */
.proj{
position:relative;border-radius:var(--radius);overflow:hidden;
min-height:clamp(24rem,17rem + 12vw,30rem);
display:flex;align-items:flex-end;isolation:isolate;
box-shadow:var(--shadow-sm);
transition:box-shadow .35s ease,transform .35s ease;
}
.proj:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.proj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s ease}
.proj::after{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(to top,rgba(20,26,32,.88) 0%,rgba(20,26,32,.55) 42%,rgba(20,26,32,.06) 78%);
}
.proj:hover img{transform:scale(1.045)}
.proj__body{padding:clamp(1.1rem,2vw,2rem);color:#fff;width:100%}
.proj__body h3{
color:#fff;text-transform:uppercase;font-size:var(--fs-h3);line-height:1.15;margin:.6rem 0 .75rem;
}
.proj__excerpt{margin:0 0 1.25rem;font-size:var(--fs-sm);font-weight:500;line-height:1.5}
.meta{
display:flex;align-items:center;gap:.5rem;margin:0;
font-size:.8125rem;font-weight:500;letter-spacing:-.25px;
}
.proj__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.read{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:500}
/* ── responsibility & impact ────────────────────────────────── */
.resp{padding-block:var(--section-spacing);background:var(--off)}
.resp .sect-head{align-items:center}
.resp__slide{
display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
gap:var(--gutter);width:100%;
}
.resp__col{display:grid;grid-template-rows:1fr 1fr;gap:var(--gutter)}
.resp-card{
position:relative;border-radius:var(--radius);overflow:hidden;
display:flex;align-items:flex-end;isolation:isolate;min-height:200px;
box-shadow:var(--shadow-sm);
}
.resp-card--big{aspect-ratio:763/660}
.resp-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s ease}
.resp-card::after{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(to top,rgba(20,26,32,.9) 0%,rgba(20,26,32,.5) 45%,rgba(20,26,32,.05) 82%);
}
.resp-card:hover img{transform:scale(1.04)}
.resp-card__body{padding:clamp(1.1rem,1.9vw,2rem);color:#fff;width:100%}
.resp-card__body h3{
color:#fff;text-transform:uppercase;font-size:var(--fs-h3);line-height:1.15;margin-bottom:.65rem;
}
.resp-card__body p{font-size:var(--fs-sm);font-weight:500;margin-bottom:1.15rem;max-width:52ch}
/* ── join us ────────────────────────────────────────────────── */
.join{padding-block:var(--section-spacing)}
.join__layout{
display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
gap:clamp(1.5rem,4vw,5rem);align-items:center;
}
.join__text p{color:var(--ink);max-width:56ch}
.join__text .sect-title{margin-bottom:1.5rem}
.join__btns{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem}
.join__media{aspect-ratio:504/265}
/* ── news ───────────────────────────────────────────────────── */
.news{padding-block:var(--section-spacing)}
.news-card{
background:var(--bg);border-radius:var(--radius);color:#fff;
padding:clamp(1.15rem,2vw,2rem);
aspect-ratio:392/463;
display:flex;flex-direction:column;justify-content:space-between;
box-shadow:var(--shadow-sm);
transition:transform .35s ease,box-shadow .35s ease;
}
.news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.news-card h3{
color:#fff;text-transform:uppercase;line-height:1.2;
font-size:var(--fs-h3);margin:auto 0 1.25rem;
}
.news-card .meta{margin-bottom:0}
.news-card__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.news__more{display:flex;justify-content:flex-end;margin-top:clamp(1.5rem,3vw,2.5rem)}
/* ── values ─────────────────────────────────────────────────── */
.values{padding-block:var(--section-spacing);background:var(--off)}
.values__head{align-items:center}
.values__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.values__grid img{
width:100%;aspect-ratio:432/406;object-fit:cover;border-radius:var(--radius);
box-shadow:var(--shadow-sm);
}
.values__grid h3{font-size:var(--fs-h3);margin:1.25rem 0 .65rem}
.values__grid p{margin:0;font-size:var(--fs-sm);font-weight:500;line-height:1.6;color:var(--ink)}
/* ── discover more ──────────────────────────────────────────── */
.discover{padding-block:var(--section-spacing)}
.discover__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.discover__grid li{
border-radius:var(--radius);overflow:hidden;background:var(--bg);
box-shadow:var(--shadow-sm);
transition:box-shadow .35s ease,transform .35s ease;
}
.discover__grid li:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.discover__grid a{display:flex;flex-direction:column;height:100%}
.discover__grid img{width:100%;aspect-ratio:430/334;object-fit:cover}
.discover__body{
padding:clamp(1.15rem,2vw,2rem);color:#fff;flex:1;
display:flex;flex-direction:column;gap:.85rem;
}
.discover__body h3{color:#fff;font-size:var(--fs-h3)}
.discover__body p{margin:0;font-size:var(--fs-sm);font-weight:500;line-height:1.55}
.discover__body .circ{margin-top:auto;align-self:flex-start;transition:background .25s,color .25s}
.discover__grid a:hover .circ{background:#fff;color:var(--bg)}
/* ── closing CTA band ───────────────────────────────────────
service.css defines the same rules for sub-pages; the homepage only loads
this file, so the band's essentials live here too (values identical). */
.svc-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.svc-final{background:var(--navy);padding-block:var(--section-spacing);color:#fff}
.svc-final .sect-title{color:#fff}
.svc-final .outline{
-webkit-text-stroke:0;
-webkit-text-fill-color:var(--gold);
color:var(--gold);
}
.svc-final p{max-width:56ch;margin:1.1rem 0 0;color:#fff}
.svc-final .svc-cta{margin-top:1.6rem}
/* ── footer ─────────────────────────────────────────────────── */
.footer{background:var(--dark);color:#fff;padding-block:clamp(2.5rem,5vw,5rem) clamp(2rem,4vw,3.5rem);position:relative}
/* the full five-arc spectrum, once, where the page closes — the same band the
stats quote in part */
.footer::before{
content:"";position:absolute;top:0;left:0;right:0;height:4px;
background:linear-gradient(90deg,
var(--teal) 0 20%,var(--sky) 0 40%,var(--purple) 0 60%,
var(--rose) 0 80%,var(--gold) 0 100%);
}
.footer__top{
display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(2rem,5vw,6rem);align-items:start;
}
.footer__quote{display:flex;gap:1.25rem;align-items:flex-start}
.footer__mark{
font-size:clamp(3.5rem,6vw,5.5rem);line-height:.75;color:var(--gold);
font-weight:700;flex:none;
}
.footer__quote p{
margin:0;font-size:clamp(1.1rem,.85rem + .75vw,1.75rem);
font-weight:500;line-height:1.35;letter-spacing:-.25px;max-width:26ch;
}
.footer__links{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 2rem;justify-items:start}
.footer__links ul{display:flex;flex-direction:column;gap:clamp(.85rem,1.6vw,1.6rem)}
.footer__links a{font-weight:800;letter-spacing:-.25px;font-size:clamp(1rem,.85rem + .35vw,1.3rem)}
.footer__links a:hover{color:#e6c07a}
.footer__rule{border:0;border-top:1px solid rgba(255,255,255,.18);margin:clamp(2rem,4vw,3.5rem) 0}
.footer__mid{
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;
}
.footer__values{margin:0;font-weight:800;text-transform:uppercase;letter-spacing:-.25px;font-size:clamp(.875rem,.75rem + .3vw,1.05rem);line-height:1.5}
.social{display:flex;gap:clamp(1rem,2vw,2rem);justify-content:center}
.social a{display:grid;place-items:center;opacity:.95;transition:opacity .2s,transform .2s}
.social a:hover{opacity:1;transform:translateY(-2px)}
.footer__copy{margin:0;text-align:right;font-size:var(--fs-sm);font-weight:500}
.footer__legal{
display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem clamp(1rem,2.5vw,2.5rem);
margin-top:clamp(1.75rem,3.5vw,3rem);
}
.footer__legal a{font-size:var(--fs-sm);font-weight:500}
.footer__legal a:hover{text-decoration:underline}
.accreditations{
display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.75rem,1.5vw,1.5rem);
margin-top:clamp(1.75rem,3.5vw,3rem);
}
.accreditations li{background:#fff;border-radius:6px;padding:.6rem 1rem;display:grid;place-items:center}
.accreditations img{width:clamp(70px,6vw,110px);height:auto}
/* ── floating WhatsApp button ──────────────────────────────────
Fixed bottom-right on every page. Replaces the inline WhatsApp button
that used to sit next to the hero Call button — one persistent way to
message us beats a button that scrolls out of view. */
.wa-float{
position:fixed;right:1.15rem;bottom:1.15rem;z-index:70;
width:3.5rem;height:3.5rem;border-radius:50%;
background:#25d366;color:#fff;display:grid;place-items:center;
box-shadow:0 6px 18px rgba(37,211,102,.45);
transition:background .2s ease,transform .2s ease;
}
.wa-float:hover{background:#1da851;transform:scale(1.06)}
.wa-float:focus-visible{outline:2px solid #fff;outline-offset:2px}
.wa-float svg{width:1.7rem;height:1.7rem}
/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:1500px){
/* below this the live site keeps a single row and scrolls it horizontally
rather than wrapping to a second row */
.values__grid,.discover__grid{
grid-template-columns:none;
grid-auto-flow:column;
grid-auto-columns:calc((100% - var(--gutter)) / 2);
overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
/* room for card shadows inside the scroll clip */
padding:.5rem .25rem .75rem;
margin:-.5rem -.25rem -.5rem;
}
.values__grid::-webkit-scrollbar,.discover__grid::-webkit-scrollbar{display:none}
.values__grid>*,.discover__grid>*{scroll-snap-align:start}
.values__grid img{aspect-ratio:302/159}
.discover__grid img{aspect-ratio:566/289}
}
@media (max-width:1400px){
.mega__grid{grid-template-columns:repeat(4,1fr)}
/* the live projects rail drops to a single (over-wide) card below this width */
.carousel--projects[data-per="2"]{--per:1}
}
@media (max-width:1200px){
.header__cta{display:none}
.callbtn{display:inline-flex} /* takes over from the CTA the moment it hides */
.stats__grid{grid-template-columns:repeat(2,1fr)}
.carousel[data-per="4"]{--per:3}
}
@media (max-width:1024px){
.nav{display:none}
.burger{display:flex;margin-left:0}
.header__inner{gap:1rem}
.services__layout,.projects__layout,.join__layout,.footer__top{grid-template-columns:minmax(0,1fr)}
.services__media{position:static;order:-1;aspect-ratio:16/9}
.carousel[data-per="3"]{--per:2}
.carousel__foot--left{justify-content:space-between}
.footer__mid{grid-template-columns:1fr;text-align:center;justify-items:center}
.footer__copy{text-align:center}
.footer__links{width:100%}
/* mobile drawer. Height is explicit rather than top+bottom:0 -- .header is
itself position:fixed, and a fixed drawer inside a fixed header collapses
to almost no height when sized by bottom:0 alone, showing only a sliver
of the first menu item. An explicit height sidesteps that entirely. */
.nav.is-mobile-open{
display:block;position:fixed;left:0;right:0;
top:calc(var(--header-h) + var(--announce-h));
height:calc(100vh - var(--header-h) - var(--announce-h));
background:var(--ice-deep);overflow-y:auto;
padding:1.25rem var(--site-padding) 3rem;margin:0;z-index:55;
}
.nav.is-mobile-open .nav__list{flex-direction:column;align-items:stretch;gap:0}
.nav.is-mobile-open .nav__item{border-bottom:1px solid var(--navy-10)}
.nav.is-mobile-open .nav__link{width:100%;justify-content:space-between;padding:1.1rem 0;font-size:1.05rem}
.mega{position:static;box-shadow:none;border:0;animation:none}
.mega__inner{padding:0 0 1.25rem}
.mega__title{display:none}
.mega__grid,.mega__grid--4{grid-template-columns:repeat(2,1fr);gap:1rem}
}
@media (max-width:720px){
:root{--radius:8px}
.stats__grid{grid-template-columns:1fr;gap:1.75rem}
.values__grid,.discover__grid{grid-auto-columns:88%}
.carousel[data-per="4"],.carousel[data-per="3"],.carousel[data-per="2"]{--per:1}
.resp__slide{grid-template-columns:1fr}
/* min-height + aspect-ratio made this card derive its WIDTH from its height
(280 x 16/11 = 407px) and burst out of a 343px column. Pinning the width
makes width the definite axis, so height follows instead. */
.resp-card--big{aspect-ratio:16/11;width:100%;min-width:0}
.resp-card{min-height:280px}
.sect-head{align-items:flex-start}
.toggle{width:100%}
.toggle__btn{flex:1;justify-content:center;padding-inline:.75rem;font-size:.8125rem}
.hero__media{aspect-ratio:4/3}
.footer__legal{gap:.6rem 1.25rem}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* ── entrance & scroll reveals ──────────────────────────────
One orchestrated moment on load — headline, lede, then media rise in
sequence — and a quiet repeat of the same gesture as sections scroll in.
script.js tags elements with .will-reveal / .is-revealed; anything already
on screen at load is shown instantly. Reduced-motion users get none of it
(the block above zeroes every duration, and script.js exits early). */
@media (prefers-reduced-motion:no-preference){
.crumbs,
.hero__title,.svc-eyebrow,.svc-h1{animation:rise .6s cubic-bezier(.22,.61,.36,1) both}
.hero__sub,.svc-hero .sect-lede{animation:rise .6s cubic-bezier(.22,.61,.36,1) .1s both}
.hero__media,.hero .svc-cta,.hero__cta-row,.hero-chips{animation:rise .6s cubic-bezier(.22,.61,.36,1) .2s both}
}
/* NOTE: a slow scale() drift on the hero photographs was tried here and
removed — an infinite transform keeps the image on a GPU layer upscaled
from a stale rasterisation, which softens every hero on every page. */
@keyframes rise{
from{opacity:0;transform:translateY(14px)}
to{opacity:1;transform:none}
}
.will-reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.is-revealed{opacity:1;transform:none}
.no-transition{transition:none}
/* ── section shading ────────────────────────────────────────
Sections shade through four steps of the same navy over the page
blue, and each gradient ENDS on the value the next one BEGINS with,
so the joins are invisible while the middles still differ. Hard
bands with a hairline made the edges obvious; this reads as one
continuous surface that deepens and lifts as you scroll.
Tints are alpha over the page colour rather than opaque blues.
Sections carrying a deliberate background of their own -- the navy
CTA, the dark act, the heroes -- are left out of the cycle. */
:root{
--shade-0:rgba(33,60,88,0);
--shade-1:rgba(33,60,88,.035);
--shade-2:rgba(33,60,88,.075);
}
main > section:nth-of-type(4n+1):not(.hero):not(.night):not(.svc-final):not(.svc-hero){
background:linear-gradient(180deg,var(--shade-0) 0%,var(--shade-1) 100%);
}
main > section:nth-of-type(4n+2):not(.hero):not(.night):not(.svc-final):not(.svc-hero){
background:linear-gradient(180deg,var(--shade-1) 0%,var(--shade-2) 100%);
}
main > section:nth-of-type(4n+3):not(.hero):not(.night):not(.svc-final):not(.svc-hero){
background:linear-gradient(180deg,var(--shade-2) 0%,var(--shade-1) 100%);
}
main > section:nth-of-type(4n+4):not(.hero):not(.night):not(.svc-final):not(.svc-hero){
background:linear-gradient(180deg,var(--shade-1) 0%,var(--shade-0) 100%);
}