/* ============================================================
BEACON: local-authority / reputation marketing site (marketing-site · services)
Concept : the most-recommended local firm in its patch. The site is built
around PROOF OF REPUTATION. The signature is "The Wall": an
animated, filterable review wall with a live-counting rating
summary, source badges and a continuous recommendation ticker.
Palette : navy ink #16223C · cream #F3EFE7 · white panels ·
amber #D89A3C (single accent) · slate #5E6680
Type : Archivo (display) + Mulish (body)
Motion : staggered review wall · filter chips · count-up rating ·
recommendation marquee · reveals · clip wipes · magnetic CTA
TO REBRAND: edit :root + swap the Google Fonts in each .
============================================================ */
:root{
--ink:#16223C;
--ink-2:#202F4F;
--cream:#F3EFE7;
--panel:#FFFFFF;
--gold:#D89A3C;
--gold-deep:#B87E26;
--gold-soft:#F0DCB8;
--slate:#5E6680;
--slate-2:#8A91A8;
--line:rgba(22,34,60,.13);
--line-2:rgba(22,34,60,.24);
--line-d:rgba(243,239,231,.16);
--line-d2:rgba(243,239,231,.3);
--font-display:"Archivo","Segoe UI",sans-serif;
--font-body:"Mulish","Segoe UI",sans-serif;
--font-mono:"Archivo","Segoe UI",sans-serif;
--container:1240px;
--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
/* scroll-padding-top keeps in-page anchor targets clear of the fixed 76px
header, which was hiding the /services deep-link headings entirely between
641 and 960px. */
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--cream);color:var(--ink);font-family:var(--font-body);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.04}
.wrap{max-width:var(--container);margin:0 auto;padding:0 32px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gold)}
.stars{color:var(--gold);letter-spacing:2px}
.idx{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--slate);letter-spacing:.06em}
/* reveal system */
/* .9s plus a .3s stagger meant the third card in a row took 1.2s to arrive,
which on top of a late trigger read as "it never loads". Same motion, quicker. */
.reveal{transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .reveal{opacity:0;transform:translateY(24px)}
html.js .reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}
.wipe{transition:clip-path .8s var(--ease)}
html.js .wipe{clip-path:inset(0 100% 0 0)}
html.js .wipe.in{clip-path:inset(0 0 0 0)}
/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:15px;font-weight:800;padding:15px 26px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn-primary{background:var(--gold);color:var(--ink)}
.btn-primary:hover{background:var(--gold-deep);color:#fff}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{background:var(--ink-2)}
.btn-ghost{border-color:var(--line-ctl);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-ghost-d{border-color:var(--line-d2);color:var(--cream)}
.btn-ghost-d:hover{background:var(--cream);color:var(--ink)}
.btn-sm{padding:11px 18px;font-size:14px}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:background .4s var(--ease)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px;border-bottom:1px solid transparent;transition:border-color .4s}
.nav.solid{background:rgba(243,239,231,.92);backdrop-filter:blur(16px)}
.nav.solid .nav-inner{border-color:var(--line)}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.03em}
.logo .mk{width:26px;height:26px;flex:none;border-radius:50%;background:var(--ink);position:relative;display:grid;place-items:center}
.logo .mk::before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid var(--gold)}
.nav-links{display:flex;gap:32px}
.nav-links a{font-size:14.5px;font-weight:700;color:var(--ink);opacity:.7;position:relative;padding:4px 0;transition:opacity .25s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .3s var(--ease)}
.nav-links a:hover,.nav-links a.active{opacity:1}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:none;border:1px solid var(--line-ctl);color:var(--ink);border-radius:8px;padding:9px 13px;font-size:13px;font-weight:700;cursor:pointer}
/* hero */
.hero{position:relative;padding:140px 0 80px;overflow:hidden;background:var(--cream)}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero-rate{display:inline-flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:40px;padding:8px 8px 8px 18px;margin-bottom:26px;box-shadow:0 10px 30px -20px rgba(22,34,60,.4)}
.hero-rate .stars{font-size:15px}
.hero-rate b{font-family:var(--font-display);font-weight:800}
.hero-rate .src{font-size:12px;color:var(--slate);background:var(--cream);border-radius:30px;padding:5px 12px}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-rate{animation:heroIn .8s var(--ease) both}
.hero h1{font-size:clamp(42px,6.6vw,90px);line-height:.98;letter-spacing:-.035em;animation:heroIn .9s var(--ease) .08s both}
.hero h1 em{font-style:normal;color:var(--gold-deep)}
.hero-lead{font-size:clamp(17px,1.8vw,21px);color:var(--slate);max-width:46ch;margin-top:24px;animation:heroIn .9s var(--ease) .16s both}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;animation:heroIn .9s var(--ease) .24s both}
/* hero proof stack */
.hero-proof{display:flex;flex-direction:column;gap:14px;animation:heroIn 1s var(--ease) .2s both}
.proof-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:0 20px 50px -36px rgba(22,34,60,.5)}
.proof-card:nth-child(2){margin-left:36px}
.proof-card:nth-child(3){margin-left:16px}
.proof-card .stars{font-size:13px}
.proof-card p{font-size:15px;margin:8px 0 10px;font-weight:600}
.proof-card .who{font-size:12.5px;color:var(--slate);display:flex;justify-content:space-between}
.proof-card .who b{color:var(--ink)}
/* trust */
.trust{background:var(--ink);color:var(--cream);padding:58px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.trust-cell{border-left:1px solid var(--line-d);padding-left:22px}
.trust-cell .n{font-family:var(--font-display);font-size:clamp(38px,5vw,58px);line-height:1;font-weight:800}
.trust-cell .n em{font-style:normal;color:var(--gold-on-dark)}
.trust-cell .l{font-size:13.5px;color:var(--muted-d);margin-top:12px;max-width:22ch}
.accred{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;margin-top:46px;padding-top:30px;border-top:1px solid var(--line-d)}
.accred .lbl{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d)}
/* No opacity here: this selector also matches .accred .lbl, and dimming the
muted token on navy dropped it back under AA. */
.accred span{font-family:var(--font-display);font-weight:700;font-size:15px}
/* section base */
.section{padding:126px 0;position:relative}
.section.tight{padding:90px 0}
.section-head{max-width:760px;margin-bottom:54px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(32px,5vw,60px);line-height:1.0;margin-top:18px;letter-spacing:-.03em}
.section-head h2 em{font-style:normal;color:var(--gold-deep)}
.section-head p{color:var(--slate);font-size:18px;margin-top:20px;max-width:54ch;text-wrap:pretty}
.section-head.center p{margin-left:auto;margin-right:auto}
/* ============================================================
SIGNATURE: THE WALL (filterable animated review wall)
============================================================ */
.wall-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:36px}
.wall-summary .cell{background:var(--panel);padding:26px 24px;text-align:center}
.wall-summary .cell.hi{background:var(--ink);color:var(--cream)}
.wall-summary .big{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,4vw,48px);line-height:1;letter-spacing:-.03em}
.wall-summary .cell.hi .big{color:var(--gold)}
.wall-summary .lbl{font-size:12.5px;color:var(--slate);margin-top:8px}
.wall-summary .cell.hi .lbl{color:var(--muted-d)}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.chip{font-family:var(--font-body);font-size:14px;font-weight:700;padding:10px 18px;border-radius:30px;border:1px solid var(--line-2);background:var(--cream);color:var(--ink);cursor:pointer;transition:all .25s}
.chip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.wall{columns:3;column-gap:18px}
.rev{break-inside:avoid;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px 22px;margin-bottom:18px;transition:opacity .4s var(--ease),transform .4s var(--ease),box-shadow .3s}
.rev:hover{box-shadow:0 24px 50px -36px rgba(22,34,60,.5)}
.rev.hide{display:none}
.rev .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.rev .src{font-size:11px;font-weight:700;color:var(--slate);background:var(--cream);border-radius:30px;padding:4px 10px}
.rev p{font-size:15px;line-height:1.5;margin-bottom:14px}
.rev p b{background:var(--gold-soft)}
.rev .who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--slate)}
.rev .who .av{width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--gold);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:13px;flex:none}
.rev .who b{color:var(--ink);font-weight:700}
.rev .tag{font-size:11px;color:var(--slate);margin-top:3px}
/* recommendation marquee */
.ticker{background:var(--ink);color:var(--cream);padding:18px 0;overflow:hidden;white-space:nowrap;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.ticker-row{display:inline-flex;gap:40px;align-items:center;animation:scrollx 38s linear infinite;will-change:transform}
.ticker-row span{font-family:var(--font-display);font-weight:700;font-size:18px;display:inline-flex;align-items:center;gap:14px}
.ticker-row span::after{content:"★";color:var(--gold);margin-left:14px}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* steps */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step3{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:32px 28px;transition:transform .4s var(--ease),box-shadow .4s}
.step3:hover{transform:translateY(-6px);box-shadow:0 30px 60px -42px rgba(22,34,60,.4)}
.step3 .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold-deep);font-family:var(--font-display);font-weight:800;margin-bottom:18px}
.step3 h3{font-size:21px;margin-bottom:10px}
.step3 p{color:var(--slate);font-size:15px}
/* services */
.svc-row{display:grid;grid-template-columns:80px 1fr auto;gap:36px;align-items:center;padding:38px 0;border-top:1px solid var(--line);transition:padding .4s var(--ease)}
.svc-row:last-child{border-bottom:1px solid var(--line)}
.svc-row h2{font-size:clamp(25px,3.4vw,42px);transition:color .3s;letter-spacing:-.02em}
.svc-row .meta{color:var(--slate);max-width:42ch;font-size:15.5px;margin-top:8px}
.svc-row .go{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;flex:none;transition:all .3s}
.svc-row:hover{padding-left:18px}
.svc-row:hover h2{color:var(--gold-deep)}
.svc-row:hover .go{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:rotate(-45deg)}
/* coverage */
.coverage{background:var(--ink);color:var(--cream)}
.cov-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.cov-map{position:relative;aspect-ratio:1/1;border:1px solid var(--line-d);border-radius:16px;overflow:hidden;background:radial-gradient(120% 120% at 30% 20%,rgba(216,154,60,.18),transparent 55%)}
.cov-map svg{width:100%;height:100%}
.cov-ring{fill:none;stroke:var(--gold);stroke-width:1;opacity:.5}
.cov-pin{fill:var(--gold)}
.cov-pin.hub{fill:var(--cream)}
.areas{columns:2;column-gap:30px}
.areas li{list-style:none;padding:11px 0;border-bottom:1px solid var(--line-d);font-size:15.5px;display:flex;justify-content:space-between;align-items:center;break-inside:avoid}
.areas li span{font-size:12px;color:var(--gold-soft)}
/* cta */
.cta{background:var(--gold);color:var(--ink);position:relative;overflow:hidden}
.cta .wrap{position:relative;z-index:2;text-align:center}
.cta h2{font-size:clamp(36px,6.5vw,84px);line-height:.98;max-width:16ch;margin:0 auto;letter-spacing:-.03em}
.cta p{font-size:19px;margin:24px auto 36px;max-width:46ch}
.cta .hero-actions{justify-content:center;display:flex;gap:14px;flex-wrap:wrap}
/* page banner */
.page-banner{background:var(--ink);color:var(--cream);padding:158px 0 86px;position:relative;overflow:hidden}
.page-banner::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 80% 0%,rgba(216,154,60,.22),transparent 60%)}
.page-banner .wrap{position:relative;z-index:2}
.page-banner h1{font-size:clamp(44px,8vw,100px);line-height:.98;margin-top:18px;letter-spacing:-.04em}
.page-banner h1 em{font-style:normal;color:var(--gold-on-dark)}
.page-banner p{color:var(--muted-d);font-size:19px;margin-top:22px;max-width:52ch}
/* invest tiers */
.invest{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.tier{border:1px solid var(--line);border-radius:16px;padding:32px 28px;background:var(--panel);transition:transform .4s var(--ease),box-shadow .4s}
.tier:hover{transform:translateY(-6px);box-shadow:0 30px 60px -42px rgba(22,34,60,.4)}
.tier.mark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.tier .badge{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep)}
.tier.mark .badge{color:var(--gold-soft)}
.tier .from{font-size:13.5px;color:var(--slate);margin-top:20px}
.tier .price{font-family:var(--font-display);font-size:44px;line-height:1;margin:6px 0 4px;letter-spacing:-.03em}
.tier .price span{font-size:15px;color:var(--slate)}
.tier .desc{font-size:14.5px;color:var(--slate);min-height:46px}
.tier.mark .desc{color:var(--muted-d)}
.tier ul{list-style:none;margin:20px 0;display:flex;flex-direction:column;gap:12px}
.tier ul li{font-size:14px;display:flex;gap:10px;align-items:flex-start}
.tier ul li::before{content:"★";color:var(--gold)}
.tier .btn{width:100%;justify-content:center}
/* about */
.story{display:grid;grid-template-columns:1fr 1fr;gap:68px;align-items:center}
.story-fig{aspect-ratio:4/5;overflow:hidden;border-radius:16px;background:var(--ink-2)}
.story-fig img{width:100%;height:100%;object-fit:cover}
.story p{color:var(--slate);font-size:16.5px;margin-bottom:18px}
.story p strong{color:var(--ink);font-weight:700}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
.value{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:34px 30px}
.value .n{font-family:var(--font-display);font-size:13px;font-weight:800;color:var(--gold-deep)}
.value h3{font-size:22px;margin:16px 0 12px}
.value p{color:var(--slate);font-size:15px}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.member{position:relative;overflow:hidden;border-radius:14px;background:var(--ink-2)}
.member .ph{aspect-ratio:3/4;overflow:hidden}
.member img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.member:hover img{transform:scale(1.04)}
.member .info{position:absolute;left:0;right:0;bottom:0;padding:22px 18px 16px;color:var(--cream);background:linear-gradient(transparent,rgba(22,34,60,.92))}
.member h3{font-size:17px}
.member .role{font-family:var(--font-display);font-size:11px;font-weight:700;text-transform:uppercase;color:var(--gold-soft);margin-top:5px}
/* contact */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:start}
.form .field{margin-bottom:20px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:block;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin-bottom:9px}
.form input,.form textarea,.form select{width:100%;font-family:var(--font-body);font-size:16px;padding:14px 15px;background:var(--panel);border:1px solid var(--line-ctl);border-radius:8px;color:var(--ink);transition:border-color .25s,box-shadow .25s}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(219,43,43,.30)}
.form textarea{min-height:130px;resize:vertical}
.contact-side .blk{padding:22px 0;border-bottom:1px solid var(--line)}
.contact-side .blk:first-child{padding-top:0}
.contact-side .k{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:9px}
.contact-side .v{font-size:19px;font-family:var(--font-display);font-weight:800}
.contact-side .v small{display:block;font-family:var(--font-body);font-size:15px;font-weight:400;color:var(--slate);margin-top:4px;line-height:1.5}
/* footer */
.footer{background:var(--ink);color:var(--cream);padding:88px 0 34px}
.footer-cta{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-end;padding-bottom:54px;border-bottom:1px solid var(--line-d)}
.footer-cta h2{font-size:clamp(30px,4.5vw,54px);line-height:1;max-width:16ch;letter-spacing:-.03em}
.footer-top{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:34px;padding:54px 0 42px;border-bottom:1px solid var(--line-d)}
.footer-brand p{color:var(--muted-d);font-size:14.5px;max-width:34ch;margin-top:18px}
.footer-top h2{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d);margin-bottom:16px}
.footer ul{list-style:none}
.footer ul li{margin-bottom:12px}
.footer ul li a{font-size:14.5px;color:var(--muted-d);transition:color .2s}
.footer ul li a:hover{color:var(--cream)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:26px;font-size:12px;color:var(--muted-d)}
/* responsive */
@media (max-width:960px){
.nav-links{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;background:var(--cream);border-bottom:1px solid var(--line);padding:22px 32px;gap:16px}
.nav-links.open{display:flex}
.nav-toggle{display:inline-block}
.nav-cta .btn:not(.nav-toggle){display:none}
.hero-grid{grid-template-columns:1fr;gap:40px}
.trust-grid{grid-template-columns:1fr 1fr;gap:30px}
.wall-summary{grid-template-columns:1fr 1fr}
.wall{columns:2}
.steps3{grid-template-columns:1fr}
.cov-grid{grid-template-columns:1fr;gap:40px}
.invest{grid-template-columns:1fr}
.story{grid-template-columns:1fr;gap:36px}
.story-fig{aspect-ratio:16/10;order:-1}
.values{grid-template-columns:1fr}
.team{grid-template-columns:1fr 1fr}
.contact-grid{grid-template-columns:1fr;gap:36px}
.footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
.wrap{padding:0 20px}
.section{padding:84px 0}
.hero{padding-top:118px}
.hero h1{font-size:clamp(38px,11vw,60px)}
.trust-grid{grid-template-columns:1fr}
.wall-summary{grid-template-columns:1fr}
.wall{columns:1}
.proof-card:nth-child(2),.proof-card:nth-child(3){margin-left:0}
.form .row2{grid-template-columns:1fr}
.team{grid-template-columns:1fr}
.footer-top{grid-template-columns:1fr}
.areas{columns:1}
.svc-row{grid-template-columns:1fr;gap:10px}
.svc-row .go{display:none}
}
/* reduced motion */
@media (prefers-reduced-motion:reduce){
/* html, not just *: the universal selector has zero specificity and loses to
html{scroll-behavior:smooth} at the top of this file, so smooth scrolling
survived the whole block. script.js gates its scrollIntoView separately. */
html{scroll-behavior:auto}
*{animation:none!important;scroll-behavior:auto;transition-duration:.001ms!important}
.reveal{opacity:1;transform:none}
.wipe{clip-path:inset(0 0 0 0)}
.ticker-row{animation:none;transform:none}
}
/* Safari-safe selects */
.form select,.field select{
-webkit-appearance:none;-moz-appearance:none;appearance:none;
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 20px) center,calc(100% - 15px) center;
background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:44px;
}
/* ============================================================
UNIVERSAL CLEANING LTD: rebrand of the "beacon" template
Real business: family-run contract cleaning, established Dorset 1984.
Livery : deep royal-blue navy + UCL red, on a cool clean off-white.
Recolours the :root theme and adjusts the red-accent contrast pairings;
swaps the abstract beacon logo mark for a red UCL globe + wordmark;
self-hosts Archivo + Mulish (replacing the Google Fonts ).
============================================================ */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/archivo.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/mulish.woff2') format('woff2');}
:root{
--ink:#12296A; /* UCL deep royal-blue navy */
--ink-2:#1B3A8A;
--cream:#F4F6FA; /* cool, clean off-white */
--panel:#FFFFFF;
--gold:#DB2B2B; /* UCL red (single accent) */
--gold-deep:#B01D1D; /* darker red for text / hover */
--gold-soft:#F7DAD8; /* soft red highlight */
--slate:#55617F; /* muted text on light grounds: 5.70:1 on cream */
--slate-2:#8891A8; /* legacy muted. Fails AA on every ground we use it
on (4.30:1 on ink, 2.91:1 on cream, 3.15:1 on
white), so prefer the two tokens below. */
--muted-d:#9BA3B8; /* muted text on the navy grounds: 5.37:1 on ink */
--gold-on-dark:#F07070; /* the red accent, lightened for navy grounds only.
--gold itself is 2.83:1 on ink, under even the 3:1
large-text floor; this is 4.68:1, so it passes at
any size. Do not use it on light grounds. */
--line:rgba(18,41,106,.13);
--line-2:rgba(18,41,106,.24);
--line-ctl:rgba(18,41,106,.55); /* the only visible edge on form fields and
ghost buttons, so it has to clear the 3:1 of SC
1.4.11: 3.38:1 on cream, 3.47:1 on white. */
--line-d:rgba(244,246,250,.16);
--line-d2:rgba(244,246,250,.32);
}
/* red accent needs light text on its fills */
.btn-primary{color:#fff}
.btn-primary:hover{background:var(--gold-deep);color:#fff}
.cta{color:#fff}
.cta h2,.cta p{color:#fff}
/* No opacity on .cta p: white on the red ground is 4.78:1, which passes, but
dimming it to .94 dropped it to 4.36:1 and failed. */
/* inner pages open on the dark navy banner, so keep the sticky nav readable from
the top (not just after scroll) by giving it the solid cream treatment. */
body.inner .nav{background:rgba(244,246,250,.94);backdrop-filter:blur(16px)}
body.inner .nav .nav-inner{border-bottom-color:var(--line)}
/* UCL logo: the client's 2024 vector lockup, on a subtle white plate so the navy
wordmark reads cleanly on both the light nav and the navy footer. The lockup is
a squarer 2.56:1 (vs the old 4.4:1 strip), so it needs more height to carry the
same presence, and the globe mark needs the headroom to stay legible. */
.logo{display:inline-flex;align-items:center;background:#fff;padding:6px 13px;border-radius:10px;box-shadow:0 1px 4px rgba(18,41,106,.14)}
.logo img{height:50px;width:auto;display:block}
@media (max-width:640px){.logo img{height:38px}.logo{padding:5px 10px}}
/* real fleet photo, full-width band. The source is pre-cropped to 2.6:1 in
photos/prepare.py, so the band needs no object-position nudge: centring it
lands on the vans at every viewport width. */
.fleet-band{position:relative;background:var(--ink)}
.fleet-band img{width:100%;height:clamp(240px,38vw,440px);object-fit:cover;object-position:center;display:block}
.fleet-band .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 0;background:linear-gradient(transparent,rgba(18,41,106,.82))}
.fleet-band .cap .wrap{color:var(--cream)}
.fleet-band .cap b{font-family:var(--font-display);font-weight:800;font-size:clamp(17px,2.2vw,24px);letter-spacing:-.02em}
.fleet-band .cap span{display:block;color:var(--cream);opacity:.82;font-size:14px;margin-top:4px}
/* about story figure carries the wide fleet/landscape photos */
.story-fig.wide{aspect-ratio:4/3}
/* contact form success / error states (wired form) */
.form label .opt{font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--slate)}
.form-note{display:none;border-radius:12px;padding:22px 24px;font-size:15.5px;line-height:1.55}
.form-note:focus{outline:none}
.form-note:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.form-note.show{display:block}
#form-success{background:var(--ink);color:var(--cream);border:1px solid var(--ink)}
#form-success b{font-family:var(--font-display);display:block;font-size:19px;margin-bottom:6px}
#form-success .stars{font-size:14px}
#form-error{background:var(--gold-soft);color:var(--gold-deep);border:1px solid var(--gold);margin-bottom:20px}
#form-error b{font-family:var(--font-display);display:block;font-size:19px;margin-bottom:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ============================================================
v2 fixes: CTA spacing, eyebrow bars, tiers, reviews grid, map
============================================================ */
/* red "get a quote" band had no vertical padding, so give it breathing room */
.cta{padding:clamp(84px,10vw,118px) 0}
/* drop the little red bar before every eyebrow */
.eyebrow::before{display:none}
.eyebrow{gap:0}
/* "How we work" tiers: stretch to equal height and pin the button to the bottom */
.tier{display:flex;flex-direction:column;height:100%}
.tier .btn{margin-top:auto}
.tier ul{flex:none}
/* hero proof cards: same size, no stagger */
.proof-card:nth-child(2),.proof-card:nth-child(3){margin-left:0}
.hero-proof .proof-card{min-height:150px;display:flex;flex-direction:column}
.hero-proof .proof-card p{flex:1}
/* reviews: uniform 3-col grid, equal-height cards (no masonry, no filter) */
.wall{columns:auto;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:18px}
.wall .rev{margin-bottom:0;height:100%;display:flex;flex-direction:column}
.wall .rev p{flex:1}
@media (max-width:960px){.wall{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.wall{grid-template-columns:1fr}}
/* ============================================================
Legal pages (/privacy, /cookies, /terms)
The global reset strips list markers and table borders, so legal copy gets
them back inside a .legal scope rather than by fighting the reset.
============================================================ */
.legal{max-width:76ch}
.legal h2{font-family:var(--font-display);font-size:clamp(21px,2.4vw,27px);letter-spacing:-.02em;margin:44px 0 14px}
.legal h2:first-of-type{margin-top:8px}
.legal h3{font-family:var(--font-display);font-size:17px;font-weight:700;margin:26px 0 10px}
.legal p{color:var(--slate);font-size:16.5px;line-height:1.7;margin-bottom:15px}
.legal a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--ink)}
.legal strong{color:var(--ink);font-weight:700}
.legal ul{list-style:disc;padding-left:22px;margin:0 0 18px}
.legal ol{list-style:decimal;padding-left:22px;margin:0 0 18px}
.legal li{color:var(--slate);font-size:16.5px;line-height:1.65;margin-bottom:9px}
.legal table{width:100%;border-collapse:collapse;margin:6px 0 22px;font-size:15.5px}
.legal th,.legal td{text-align:left;padding:11px 14px;border:1px solid var(--line);color:var(--slate);vertical-align:top}
.legal th{background:var(--cream);color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:14px}
.legal blockquote{border-left:3px solid var(--line-2);padding:4px 0 4px 20px;margin:0 0 18px}
.legal blockquote p{margin-bottom:10px}
.legal code{font-size:14.5px;background:var(--cream);padding:2px 6px;border-radius:4px;color:var(--ink)}
.legal-meta{font-size:13.5px;color:var(--slate);margin-bottom:8px}
/* Draft furniture. Sits inside the navy page banner, since the nav is fixed and
anything above it in the flow renders underneath it. Removed entirely when the
pages are approved and published. */
.legal-draft{background:var(--gold-soft);color:var(--gold-deep);border-left:4px solid var(--gold);
border-radius:8px;padding:14px 18px;font-size:14.5px;line-height:1.55;margin-bottom:26px;max-width:70ch}
.legal-draft strong{font-family:var(--font-display);display:block;margin-bottom:3px}
/* Two kinds of inline marker: a question we need answered (amber, holds
publication up) and a default we have taken (blue, correct it or ignore it). */
mark.ask,mark.todo{background:#FFF3BF;color:#5C4600;padding:2px 7px;border-radius:4px;
font-size:14.5px;font-weight:700;box-decoration-break:clone;-webkit-box-decoration-break:clone}
mark.assumed{background:#E7EEFB;color:#264A8F;padding:2px 7px;border-radius:4px;
font-size:14px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* Client review panel, top of the privacy notice. Draft furniture only. */
.legal-review{background:var(--panel);border:1px solid var(--line-2);border-radius:14px;
padding:clamp(22px,3vw,34px);margin:0 0 44px;box-shadow:0 12px 34px -26px rgba(18,41,106,.5)}
.legal-review h2{font-family:var(--font-display);font-size:clamp(20px,2.3vw,26px);
letter-spacing:-.02em;margin:0 0 12px;color:var(--ink)}
.legal-review h3{font-family:var(--font-display);font-size:16px;font-weight:800;
margin:30px 0 6px;padding-left:13px;border-left:4px solid var(--line-2)}
.legal-review h3.u{border-left-color:var(--gold);color:var(--gold-deep)}
.legal-review h3.q{border-left-color:#E0A800;color:#7A5C00}
.legal-review h3.a{border-left-color:#4C7BD1;color:#264A8F}
.legal-review p.intro{font-size:14.5px;color:var(--slate);line-height:1.6;margin:0 0 14px}
.legal-review ol,.legal-review ul{margin:0;padding-left:0;list-style:none}
.legal-review li{margin-bottom:15px;padding-left:15px;border-left:2px solid var(--line)}
.legal-review li strong{display:block;color:var(--ink);font-size:15.5px;line-height:1.45;margin-bottom:4px}
.legal-review li span{display:block;font-size:14px;color:var(--slate);line-height:1.6}
.legal-review li span.where{font-size:12.5px;color:var(--slate);font-weight:700;
text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.legal-review .review-questions li{border-left-color:#E0A800}
.legal-review .review-assumptions li{border-left-color:#B9CBEA}
/* Live compliance gaps, not drafting decisions. Carries the brand red so it
reads as different in kind from the questions below it. */
.legal-review .review-urgent li{border-left:3px solid var(--gold);background:var(--gold-soft);
border-radius:0 8px 8px 0;padding:14px 16px;margin-bottom:14px}
.legal-review .review-urgent li strong{color:var(--gold-deep);font-size:16px}
.legal-review .review-urgent li span{color:#6E2320}
.legal-review .review-urgent li span strong{display:inline;font-size:inherit}
/* Skip link (WCAG 2.4.1). Off-screen until focused, then a solid target in the
top-left. It is the first focusable element on every page. */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:14px;top:14px;z-index:400;background:var(--ink);color:var(--cream);
padding:12px 18px;border-radius:9px;font-family:var(--font-display);font-weight:700;
font-size:14.5px;box-shadow:0 6px 20px -8px rgba(18,41,106,.6)}
/* The skip target takes focus programmatically, so it needs no ring of its own. */
#main:focus{outline:none}
/* Point-of-collection privacy note, beside the form's submit button. */
.form-privacy{margin-top:16px;font-size:13px;line-height:1.6;color:var(--slate);max-width:52ch}
.form-privacy a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}
.form-privacy a:hover{color:var(--ink)}
/* Footer trading disclosure: Companies Act 2006 s.82 + e-commerce reg. 6. */
/* No border-top here: .footer-top already closes with a border-bottom directly
above this block, so adding one drew two parallel rules 6px apart. */
.footer-legal{padding:26px 0 0;display:flex;flex-wrap:wrap;gap:10px 48px;align-items:flex-start;justify-content:space-between}
/* waste removal page: the four clearance categories */
.waste-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.waste-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:34px 32px;display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s}
.waste-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -42px rgba(18,41,106,.4)}
.waste-card .n{font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-deep)}
.waste-card h3{font-size:clamp(22px,3vw,27px);margin:12px 0 12px;letter-spacing:-.02em}
.waste-card .lead{color:var(--slate);font-size:15px;margin-bottom:18px}
.waste-card ul{list-style:none;margin-top:auto;display:flex;flex-direction:column;gap:11px;padding-top:6px;border-top:1px solid var(--line)}
.waste-card ul li{font-size:14.5px;line-height:1.45;display:flex;gap:11px;align-items:flex-start;color:var(--ink)}
.waste-card ul li::before{content:"✓";color:var(--gold-deep);font-weight:800;flex:none}
@media (max-width:760px){.waste-grid{grid-template-columns:1fr}}
/* the registration number is a checkable fact, so it links to the register */
.step3 p a{text-decoration:underline;text-underline-offset:2px;color:var(--gold-deep)}
/* The identity paragraph wraps at about half the container, so the policy links
sit in that dead space to its right rather than adding a line below it. Both
are children of .footer-legal already, and the nav is server-injected, so this
is purely a layout change. They stack again below 760px. */
.footer-legal p{color:var(--muted-d);font-size:12.5px;line-height:1.65;flex:1 1 46ch;max-width:74ch}
.footer-legal nav{display:flex;flex-wrap:wrap;gap:18px;flex:0 1 auto;justify-content:flex-end}
.footer-legal nav a{color:var(--muted-d);font-size:12.5px;text-decoration:underline;text-underline-offset:2px}
.footer-legal nav a:hover{color:var(--cream)}
@media (max-width:760px){.footer-legal{display:block}.footer-legal nav{margin-top:12px}}
/* real area map (OpenStreetMap embed) replacing the radar */
.cov-map{aspect-ratio:auto;height:100%;min-height:360px;border:1px solid var(--line-d);border-radius:16px;overflow:hidden;background:#aad3df}
.coverage .cov-map{min-height:400px}
.cov-map iframe{width:100%;height:100%;min-height:inherit;border:0;display:block;filter:saturate(1.02)}
/* Click to activate. The OSM embed is MapLibre with scrollZoom and dragPan at
their defaults and cooperativeGestures off, so a wheel or a one-finger drag
over the frame is swallowed cross-origin and the page stops scrolling. The
parent cannot suppress that, so the frame is inert until the visitor asks for
it. Pointer-events only: the map stays fully visible, and the text
alternative beside it is unaffected. */
.cov-map .map-shield{position:absolute;inset:0;z-index:2;display:grid;place-items:end center;padding-bottom:14px;background:transparent;border:0;width:100%;cursor:pointer;font:inherit}
.cov-map .map-shield span{background:rgba(18,41,106,.86);color:var(--cream);font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.04em;padding:7px 14px;border-radius:30px}
.cov-map .map-shield:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.cov-map.live .map-shield{display:none}
.map-credit{font-size:11px;color:var(--slate);margin-top:8px}
.map-credit a{text-decoration:underline}
/* keep the map column and copy vertically centred so there's no gap above */
.cov-grid{align-items:center}