:root{
--green:#20C818;
--green-deep:#149A0F;
--green-ink:#0E7A0A;
--ink:#15160F;
--ink-2:#3A3C33;
--muted:#5E6157;
--line:#E7E8E0;
--bg:#FFFFFF;
--bg-soft:#F5F6F0;
--bg-soft-2:#EEF0E8;
--wa:#25D366;
--wa-deep:#1da851;
--shadow:0 1px 2px rgba(20,22,12,.05), 0 12px 32px -12px rgba(20,22,12,.16);
--shadow-lg:0 30px 70px -28px rgba(20,22,12,.40);
--r:18px;
--maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:"Manrope",system-ui,sans-serif;
color:var(--ink);
background:var(--bg);
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
h1,h2,h3,h4{font-family:"Archivo",sans-serif;line-height:1.04;letter-spacing:-.02em;font-weight:800}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{scroll-margin-top:90px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
font-family:"Archivo",sans-serif;font-weight:700;text-transform:uppercase;
letter-spacing:.14em;font-size:.78rem;color:var(--green-ink);
display:inline-flex;align-items:center;gap:.5rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--green);border-radius:2px}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
font-family:"Archivo",sans-serif;font-weight:700;font-size:1rem;
padding:.95rem 1.4rem;border-radius:999px;cursor:pointer;border:2px solid transparent;
transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
white-space:nowrap;
}
.btn svg{width:1.2em;height:1.2em;flex:none}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 10px 24px -10px rgba(37,211,102,.7)}
.btn-wa:hover{background:var(--wa-deep);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:#fff}
.btn-green{background:var(--green);color:#0a2b07}
.btn-green:hover{background:var(--green-deep);color:#fff;transform:translateY(-2px)}
/* ---------- HEADER ---------- */
header{
position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:74px}
.nav .logo{display:flex;align-items:center}
.nav .logo img{height:42px;width:auto}
.nav-links{display:flex;align-items:center;gap:1.7rem;font-weight:600;font-size:.98rem}
.nav-links a{color:var(--ink-2);transition:color .15s;white-space:nowrap}
.nav-links a:hover{color:var(--green-ink)}
.nav-cta{display:flex;align-items:center;gap:1.1rem}
.nav-phone{display:flex;align-items:center;gap:.55rem;font-family:"Archivo",sans-serif;font-weight:700;color:var(--ink);white-space:nowrap}
.nav-phone .np-text{display:flex;flex-direction:column;line-height:1.05}
.nav-phone .np-text small{font-size:.68rem;color:var(--muted);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.nav-phone svg{width:20px;height:20px;color:var(--green-ink);flex:none}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.burger span{width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:.25s}
.mobile-menu{display:none}
/* ---------- HERO ---------- */
.hero{position:relative;background:var(--bg-soft);overflow:hidden}
.hero::before{
content:"";position:absolute;inset:0;
background:radial-gradient(900px 500px at 88% -8%, rgba(32,200,24,.14), transparent 60%);
pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:64px 0 72px;position:relative}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.3rem);font-weight:900;letter-spacing:-.03em}
.hero h1 .hl{color:var(--green-ink);position:relative;white-space:nowrap}
.hero p.lede{font-size:1.18rem;color:var(--ink-2);margin-top:1.25rem;max-width:36ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero-micro{display:flex;align-items:center;gap:.55rem;margin-top:1.15rem;font-weight:600;color:var(--ink-2);font-size:.96rem}
.hero-micro svg{width:18px;height:18px;color:var(--green-deep);flex:none}
.hero-badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.9rem}
.chip{
display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);
padding:.5rem .85rem;border-radius:999px;font-weight:700;font-size:.85rem;color:var(--ink-2);
font-family:"Archivo",sans-serif;box-shadow:var(--shadow);
}
.chip svg{width:16px;height:16px;color:var(--green-deep)}
.hero-media{position:relative}
.hero-photo{
border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);
aspect-ratio:4/4.3;background:#dfe2d8;border:6px solid #fff;
}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-badge{
position:absolute;left:-22px;bottom:34px;background:#fff;border-radius:16px;padding:.9rem 1.1rem;
box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:.8rem;border:1px solid var(--line);max-width:240px;
}
.hero-badge .ic{width:44px;height:44px;border-radius:12px;background:var(--green);display:grid;place-items:center;flex:none;color:#08300a}
.hero-badge .ic svg{width:24px;height:24px}
.hero-badge b{font-family:"Archivo",sans-serif;display:block;font-size:.95rem}
.hero-badge small{color:var(--muted);font-size:.78rem;font-weight:600}
.hero-rating{
position:absolute;right:-14px;top:26px;background:var(--ink);color:#fff;border-radius:14px;
padding:.7rem 1rem;box-shadow:var(--shadow-lg);text-align:center;
}
.hero-rating .stars{color:#FFC83D;font-size:1rem;letter-spacing:2px}
.hero-rating b{font-family:"Archivo",sans-serif;font-size:1.4rem;display:block;line-height:1}
.hero-rating small{font-size:.68rem;color:#b9bcb2;font-weight:600}
/* ---------- TRUST STRIP ---------- */
.trust{background:var(--ink);color:#fff}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:26px 0}
.trust-item{display:flex;align-items:center;gap:.8rem;font-weight:600;font-size:.98rem;color:#e9eae3}
.trust-item svg{width:26px;height:26px;color:var(--green);flex:none}
.trust-item b{font-family:"Archivo",sans-serif;color:#fff}
/* ---------- SECTION HEADING ---------- */
.sec{padding:84px 0}
.sec-head{max-width:640px;margin-bottom:48px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(2rem,3.6vw,2.9rem);margin-top:.8rem;font-weight:900}
.sec-head p{color:var(--muted);font-size:1.1rem;margin-top:1rem}
.sec-head.center .eyebrow{justify-content:center}
/* ---------- SERVICES ---------- */
.services{background:var(--bg-soft)}
.svc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.svc{
background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;
box-shadow:var(--shadow);transition:transform .18s ease, box-shadow .2s ease, border-color .2s;
display:flex;flex-direction:column;flex:1 1 320px;max-width:382px;
}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#d4dcc9}
.svc .ic{width:54px;height:54px;border-radius:14px;background:var(--bg-soft-2);display:grid;place-items:center;color:var(--green-ink);margin-bottom:18px}
.svc:hover .ic{background:var(--green);color:#08300a}
.svc .ic svg{width:28px;height:28px}
.svc h3{font-size:1.25rem;font-weight:800}
.svc p{color:var(--muted);margin-top:.55rem;font-size:.96rem;flex:1}
.svc-actions{margin-top:1.3rem;display:flex;flex-direction:column;gap:.7rem}
.svc-find{font-family:"Archivo",sans-serif;font-weight:700;color:var(--green-ink);display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem}
.svc-find svg{width:16px;height:16px;transition:transform .15s}
.svc:hover .svc-find svg{transform:translateX(4px)}
.svc-quote{
display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
font-family:"Archivo",sans-serif;font-weight:700;font-size:.9rem;
background:var(--ink);color:#fff;padding:.65rem 1rem;border-radius:999px;transition:background .2s, transform .15s;
}
.svc-quote:hover{background:var(--green);color:#08300a;transform:translateY(-1px)}
/* ---------- HOW IT WORKS ---------- */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px 28px 28px;box-shadow:var(--shadow)}
.step .num{
width:46px;height:46px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;
font-family:"Archivo",sans-serif;font-weight:900;font-size:1.25rem;margin-bottom:18px;
}
.step:first-child .num{background:var(--green);color:#08300a}
.step h3{font-size:1.25rem}
.step p{color:var(--muted);margin-top:.5rem}
.step .wa-tag{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;font-weight:700;color:var(--green-ink);font-size:.88rem;font-family:"Archivo",sans-serif}
.step .wa-tag svg{width:16px;height:16px}
/* ---------- JOBS GALLERY ---------- */
.jobs{background:var(--bg-soft)}
.jobs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.jobs-grid image-slot{width:100%;height:230px;border:1px solid var(--line);box-shadow:var(--shadow)}
.jobs-note{margin-top:18px;color:var(--muted);font-size:.92rem;display:flex;align-items:center;gap:.5rem;justify-content:center}
.jobs-note svg{width:16px;height:16px;color:var(--green-deep)}
/* ---------- REVIEWS ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.rev .stars{color:#FFC83D;font-size:1.1rem;letter-spacing:3px;margin-bottom:14px}
.rev p{color:var(--ink-2);font-size:1.02rem;flex:1}
.rev .who{display:flex;align-items:center;gap:.8rem;margin-top:20px}
.rev .av{width:44px;height:44px;border-radius:50%;background:var(--green);color:#08300a;display:grid;place-items:center;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.1rem;flex:none}
.rev .who b{font-family:"Archivo",sans-serif;font-size:.98rem;display:block}
.rev .who small{color:var(--muted);font-weight:600;font-size:.8rem}
.rev-cta{display:flex;gap:.8rem;justify-content:center;margin-top:36px;flex-wrap:wrap}
/* ---------- AREAS (3 HUBS) ---------- */
.areas{background:var(--ink);color:#fff}
.areas h2{color:#fff}
.areas .eyebrow{color:var(--green)}
.areas .eyebrow::before{background:var(--green)}
.areas .sec-head p{color:#c4c6bc}
.hubs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hub{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:28px}
.hub h3{color:#fff;display:flex;align-items:center;gap:.55rem;font-size:1.3rem;margin-bottom:1.1rem}
.hub h3 .dot{width:11px;height:11px;border-radius:50%;background:var(--green);flex:none}
.hub .town-list{display:flex;flex-wrap:wrap;gap:.45rem}
.hub .town-list span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);padding:.38rem .7rem;border-radius:999px;font-size:.82rem;font-weight:700;color:#dfe1d8;font-family:"Archivo",sans-serif}
.hub .town-list span.hubtown{background:var(--green);color:#08300a;border-color:var(--green)}
.areas-extra{margin-top:24px;text-align:center;color:#c4c6bc;font-size:1rem}
.areas-extra b{color:#fff;font-family:"Archivo",sans-serif}
/* ---------- CONTACT ---------- */
.contact{background:var(--bg-soft)}
.contact-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:30px;align-items:start}
.wa-card{background:var(--ink);color:#fff;border-radius:var(--r);padding:36px;position:relative;overflow:hidden}
.wa-card::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(37,211,102,.35),transparent 70%)}
.wa-card h3{font-size:1.6rem;color:#fff;position:relative}
.wa-card p{color:#c4c6bc;margin-top:.7rem;position:relative}
.wa-card .btn{margin-top:1.5rem;width:100%;position:relative}
.wa-card .alt-note{position:relative;margin-top:.8rem;font-size:.86rem;color:#9b9e93;text-align:center}
.wa-divider{display:flex;align-items:center;gap:1rem;margin:24px 0;color:#7b7e74;font-size:.82rem;font-weight:700;position:relative}
.wa-divider::before,.wa-divider::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.14)}
.contact-list{position:relative;display:flex;flex-direction:column;gap:2px}
.contact-list a{display:flex;align-items:center;gap:.85rem;padding:.7rem 0;color:#e9eae3;font-weight:600;transition:color .15s}
.contact-list a:hover{color:var(--green)}
.contact-list a svg{width:20px;height:20px;color:var(--green);flex:none}
.hours{position:relative;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:.7rem;color:#c4c6bc;font-size:.92rem}
.hours svg{width:18px;height:18px;color:var(--green)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:36px;box-shadow:var(--shadow)}
.form-card h3{font-size:1.5rem}
.form-card .sub{color:var(--muted);margin-top:.4rem;margin-bottom:1.6rem}
.field{margin-bottom:16px}
.field.row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:0}
label{font-family:"Archivo",sans-serif;font-weight:700;font-size:.82rem;display:block;margin-bottom:.45rem;color:var(--ink-2)}
label .opt{color:var(--muted);font-weight:600;text-transform:none;letter-spacing:0}
input,select,textarea{
width:100%;font-family:"Manrope",sans-serif;font-size:1rem;color:var(--ink);
padding:.8rem .95rem;border:1.5px solid var(--line);border-radius:12px;background:#fff;transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(32,200,24,.13)}
textarea{resize:vertical;min-height:96px}
.where-other{display:none;margin-top:12px}
.file-row{display:flex;align-items:center;gap:.8rem}
.file-btn{display:inline-flex;align-items:center;gap:.5rem;border:1.5px dashed var(--line);border-radius:12px;padding:.7rem 1rem;cursor:pointer;font-weight:700;font-family:"Archivo",sans-serif;font-size:.9rem;color:var(--ink-2);transition:.15s}
.file-btn:hover{border-color:var(--green);color:var(--green-ink)}
.file-btn svg{width:18px;height:18px}
.file-name{font-size:.88rem;color:var(--muted)}
.form-card button[type=submit]{margin-top:8px;width:100%}
.form-foot{margin-top:1rem;font-size:.82rem;color:var(--muted);text-align:center;display:flex;align-items:center;gap:.4rem;justify-content:center}
.form-foot svg{width:15px;height:15px;color:var(--green-deep)}
.err{border-color:#e0483a !important}
.form-success{display:none;text-align:center;padding:24px 8px}
.form-success .tick{width:64px;height:64px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin:0 auto 18px;color:#08300a}
.form-success .tick svg{width:34px;height:34px}
.form-success h3{font-size:1.5rem}
.form-success p{color:var(--muted);margin-top:.6rem}
.form-success .btn{margin-top:1.4rem}
/* ---------- PAGE HERO (service / quote pages) ---------- */
.page-hero{background:var(--bg-soft);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 420px at 92% -10%, rgba(32,200,24,.13), transparent 60%);pointer-events:none}
.page-hero-inner{position:relative;padding:46px 0 56px;max-width:760px}
.crumb{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem;color:var(--muted);margin-bottom:1.4rem}
.crumb a{color:var(--green-ink)}
.crumb a:hover{text-decoration:underline}
.crumb svg{width:14px;height:14px}
.page-hero h1{font-size:clamp(2.3rem,4.8vw,3.6rem);font-weight:900;letter-spacing:-.03em}
.page-hero .lede{font-size:1.18rem;color:var(--ink-2);margin-top:1.1rem;max-width:48ch}
.page-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.page-cta .note{flex-basis:100%;font-size:.9rem;color:var(--muted);margin-top:.3rem}
/* ---------- PROSE / FEATURE LISTS ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.split.reverse .split-media{order:-1}
.prose h2{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:900}
.prose h2+p, .prose .eyebrow+h2{margin-top:0}
.prose p{color:var(--ink-2);font-size:1.08rem;margin-top:1.1rem}
.feature-list{list-style:none;margin-top:1.6rem;display:flex;flex-direction:column;gap:.95rem}
.feature-list li{display:flex;gap:.85rem;align-items:flex-start;font-size:1.04rem;color:var(--ink-2)}
.feature-list li svg{width:24px;height:24px;color:var(--green-deep);flex:none;margin-top:2px}
.feature-list li b{font-family:"Archivo",sans-serif;color:var(--ink)}
/* Red crosses for "we can't take this" lists, 4 Sep 2026 — a checkmark
read as "yes" on a list of things we refuse, which is backwards. */
.feature-list.no-list li svg{color:#C0392B}
.split-media{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.split-media image-slot{width:100%;height:210px;border:1px solid var(--line);box-shadow:var(--shadow)}
.split-media image-slot.tall{grid-column:1 / -1;height:240px}
.media-single image-slot{width:100%;height:420px;border:1px solid var(--line);box-shadow:var(--shadow)}
/* info cards row */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow)}
.info-card .ic{width:50px;height:50px;border-radius:13px;background:var(--bg-soft-2);display:grid;place-items:center;color:var(--green-ink);margin-bottom:16px}
.info-card .ic svg{width:26px;height:26px}
.info-card h3{font-size:1.18rem}
.info-card p{color:var(--muted);margin-top:.5rem;font-size:.98rem}
/* ---------- QUOTE PAGE ---------- */
.quote-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start}
/* CTA band */
.cta-band{background:var(--ink);color:#fff;border-radius:var(--r);padding:48px;text-align:center;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;left:50%;bottom:-120px;transform:translateX(-50%);width:480px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(32,200,24,.28),transparent 70%)}
.cta-band h2{color:#fff;font-size:clamp(1.8rem,3vw,2.5rem);position:relative}
.cta-band p{color:#c4c6bc;margin-top:.8rem;position:relative;max-width:52ch;margin-left:auto;margin-right:auto}
.cta-band .page-cta{justify-content:center;position:relative}
/* ---------- FOOTER ---------- */
footer{background:#0E0F09;color:#c4c6bc;padding:64px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-logo{background:#fff;border-radius:14px;padding:14px 18px;display:inline-block}
.foot-logo img{height:40px}
.foot-tag{font-family:"Archivo",sans-serif;font-weight:800;color:#fff;font-size:1.25rem;margin:20px 0 8px}
.foot-col h4{color:#fff;font-family:"Archivo",sans-serif;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1rem}
.foot-col a,.foot-col p{display:flex;gap:.6rem;align-items:flex-start;color:#aeb1a7;padding:.35rem 0;font-size:.95rem}
.foot-col a:hover{color:var(--green)}
.foot-col svg{width:18px;height:18px;color:var(--green);flex:none;margin-top:3px}
.license{margin-top:20px;display:inline-flex;align-items:center;gap:.6rem;background:rgba(32,200,24,.12);border:1px solid rgba(32,200,24,.3);color:#9ff296;padding:.5rem .9rem;border-radius:10px;font-family:"Archivo",sans-serif;font-weight:700;font-size:.85rem}
.license svg{width:16px;height:16px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.09);margin-top:48px;padding-top:24px;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:#7e8177}
.foot-bottom a{color:#aeb1a7;text-decoration:underline}
.foot-bottom a:hover{color:var(--green)}
/* ---------- WASTE HIERARCHY ---------- */
.hierarchy{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
.hierarchy li{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:999px;padding:.55rem 1.2rem .55rem .55rem;font-family:"Archivo",sans-serif;font-weight:700;color:var(--ink);font-size:1.02rem}
.hierarchy .hi-num{width:32px;height:32px;border-radius:50%;background:var(--green);color:#08300a;display:grid;place-items:center;font-size:.95rem;flex:none}
.hierarchy-note{text-align:center;color:var(--muted);max-width:64ch;margin:26px auto 0;font-size:1.02rem}
/* ---------- NOTICE / CALLOUT ---------- */
.notice{display:flex;gap:1.1rem;background:#FFF8E8;border:1px solid #EBD9A6;border-radius:16px;padding:24px 26px;align-items:flex-start}
.notice .ic{width:46px;height:46px;border-radius:12px;background:#F4C430;color:#3a2e00;display:grid;place-items:center;flex:none}
.notice .ic svg{width:26px;height:26px}
.notice h3{font-size:1.18rem;margin-bottom:.35rem}
.notice p{color:var(--ink-2);font-size:1.02rem}
.notice a{color:var(--green-ink);font-weight:700}
/* ---------- LEGAL / LONG-FORM ---------- */
.legal{max-width:820px;margin:0 auto}
.legal h2{font-size:1.45rem;margin-top:2.2rem}
.legal h2:first-of-type{margin-top:.5rem}
.legal p,.legal li{color:var(--ink-2);font-size:1.04rem;line-height:1.65}
.legal p{margin-top:.9rem}
.legal ul{margin-top:.9rem;padding-left:1.3rem}
.legal li{margin-top:.5rem}
.legal a{color:var(--green-ink);text-decoration:underline}
.legal .updated{color:var(--muted);font-size:.95rem;margin-top:.4rem}
.draft-note{display:flex;gap:.7rem;align-items:flex-start;background:var(--bg-soft-2);border:1px dashed var(--green);border-radius:12px;padding:14px 18px;color:var(--ink-2);font-size:.95rem;margin-bottom:24px}
.draft-note svg{width:18px;height:18px;color:var(--green-deep);flex:none;margin-top:3px}
/* ---------- COOKIE BANNER ---------- */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;background:var(--ink);color:#e9eae3;border-radius:16px;box-shadow:0 24px 60px -16px rgba(0,0,0,.6);padding:20px 22px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;max-width:900px;margin:0 auto;transform:translateY(160%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner p{flex:1 1 320px;font-size:.92rem;line-height:1.5;margin:0;color:#d7d9cf}
.cookie-banner a{color:var(--green);text-decoration:underline}
.cookie-actions{display:flex;gap:.6rem;flex:none}
.cookie-actions button{font-family:"Archivo",sans-serif;font-weight:700;border-radius:999px;padding:.7rem 1.35rem;cursor:pointer;border:2px solid transparent;font-size:.92rem;transition:.15s}
.cookie-reject{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.cookie-reject:hover{border-color:#fff}
.cookie-accept{background:var(--green);color:#08300a}
.cookie-accept:hover{background:#fff}
@media(max-width:560px){.cookie-banner{padding:18px}.cookie-actions{flex:1 1 100%}.cookie-actions button{flex:1}}
/* ---------- FLOATING WA ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;align-items:center;gap:.6rem;background:var(--wa);color:#fff;padding:.85rem 1.2rem;border-radius:999px;font-family:"Archivo",sans-serif;font-weight:800;box-shadow:0 14px 34px -10px rgba(37,211,102,.7);transition:transform .18s}
.wa-float:hover{transform:scale(1.05)}
.wa-float svg{width:24px;height:24px}
.wa-float .lbl{font-size:.95rem}
/* ---------- RESPONSIVE ---------- */
@media(max-width:1040px){
.nav-links,.nav-phone{display:none}
.burger{display:flex}
.nav .btn-wa{padding:.7rem 1.05rem;font-size:.92rem}
.mobile-menu{display:block;position:fixed;inset:74px 0 0;background:#fff;z-index:55;transform:translateX(100%);transition:transform .3s ease;padding:28px 24px;overflow-y:auto}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{display:block;font-family:"Archivo",sans-serif;font-weight:700;font-size:1.4rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.mobile-menu .mm-cta{margin-top:24px;display:flex;flex-direction:column;gap:.8rem}
body.menu-open{overflow:hidden}
.burger.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}
@media(max-width:980px){
.hero-grid{grid-template-columns:1fr;gap:40px}
.hero-media{max-width:460px}
.hero-photo{aspect-ratio:16/12}
.trust-row{grid-template-columns:1fr 1fr;gap:1.2rem 1rem}
.svc-grid{grid-template-columns:1fr 1fr}
.how-grid,.rev-grid,.info-grid,.hubs{grid-template-columns:1fr 1fr}
.areas-grid,.contact-grid,.quote-layout,.split{grid-template-columns:1fr}
.split.reverse .split-media{order:0}
.jobs-grid{grid-template-columns:1fr 1fr}
.foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
.sec{padding:60px 0}
.svc-grid,.how-grid,.rev-grid,.jobs-grid,.trust-row,.foot-grid,.info-grid,.hubs{grid-template-columns:1fr}
.field.row{grid-template-columns:1fr;gap:0}
.field.row .field{margin-bottom:16px}
.hero h1 .hl{white-space:normal}
.wa-float .lbl{display:none}
.foot-bottom{flex-direction:column}
.cta-band{padding:36px 24px}
.split-media{grid-template-columns:1fr 1fr}
}
/* ==========================================================
MERGED 3 Sep 2026: additions.css folded in to remove one
render-blocking request. Order preserved: everything below
loaded AFTER the original stylesheet and still does.
========================================================== */
/* Prestige Waste Clearance — additions
Kept in a separate file so the original styles.css is untouched.
Merge into styles.css later if you prefer a single stylesheet. */
/* ---------- Brand colour correction, 2 Sep 2026 ----------
styles.css declares --green:#20C818. The real logo green, sampled from
logo.png by pixel count, is #1CC91A. Correcting it here rather than
editing styles.css keeps the original file untouched.
See the brand colours section of Website Build Brief. */
:root{
--green:#1CC91A;
--ink-strip:#1a1d21;
}
/* ---------- Kill the green glow, 2 Sep 2026 ----------
Joel: "the bright glowing green looks a bit like AI slop."
The hue was never the problem. It is his own logo colour. The problem is
AREA: styles.css paints a 900x500px radial green haze across the hero, the
same on every service page, and a third behind the CTA band. A large soft
glow of a saturated colour is the single strongest "generated" tell there is.
The rule from the brief: the logo green is a button, an icon or a short
rule. Never a large fill. These three overrides enforce it. */
.hero::before{
background:radial-gradient(560px 300px at 92% -12%, rgba(28,201,26,.05), transparent 62%);
}
.page-hero::before{
background:radial-gradient(520px 280px at 94% -14%, rgba(28,201,26,.045), transparent 62%);
}
.cta-band::after{
background:radial-gradient(circle, rgba(28,201,26,.10), transparent 72%);
width:320px;
height:200px;
bottom:-90px;
}
/* ---------- Commercial route strip ---------- */
.commercial-strip{
background:var(--ink, #1a1d21);
color:#fff;
}
/* WAS: color:var(--amber, #f5a800) — an undefined variable falling back to
ORANGE. The amber accent was proposed and then withdrawn on 2 Sep 2026,
because it introduces a colour the business does not own when the logo
already supplies one. The note was updated; the code was not. Fixed. */
.commercial-strip .eyebrow{
color:var(--green);
}
.commercial-strip .eyebrow::before{
background:var(--green);
}
.commercial-strip h2{
color:#fff;
margin-bottom:.6rem;
}
.commercial-strip p{
color:rgba(255,255,255,.82);
max-width:64ch;
}
.cs-inner{
display:flex;
justify-content:space-between;
gap:32px;
flex-wrap:wrap;
}
.cs-copy{flex:1 1 480px}
.cs-clients{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:22px 0 26px;
}
.cs-client{
display:inline-block;
padding:7px 14px;
border:1px solid rgba(255,255,255,.28);
border-radius:999px;
font-size:13px;
font-weight:600;
letter-spacing:.01em;
color:rgba(255,255,255,.92);
white-space:nowrap;
}
/* ---------- "From" price on service cards ---------- */
.svc-from{
display:inline-block;
margin:4px 0 14px;
padding:5px 12px;
border-radius:999px;
background:rgba(45,106,45,.10);
color:var(--green-ink, #2D6A2D);
font-size:13px;
font-weight:700;
letter-spacing:.01em;
}
/* ---------- Real job photos (replaces the image-slot placeholders) ---------- */
.job-photo{
width:100%;
height:100%;
min-height:200px;
object-fit:cover;
border-radius:16px;
display:block;
background:rgba(0,0,0,.05);
}
/* Before/after pair on a service page. Two photos side by side with a caption
under each, so the pair reads as one job rather than two loose images. */
.ba-pair{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
margin-top:28px;
}
.ba-item figcaption{
margin-top:10px;
font-family:"Archivo",sans-serif;
font-weight:700;
font-size:.85rem;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--muted, #5E6157);
}
.ba-item .job-photo{
aspect-ratio:4/5;
min-height:0;
}
@media(max-width:680px){
.ba-pair{grid-template-columns:1fr}
}
/* ---------- Form failure state ---------- */
.form-error{
display:none;
padding:28px;
border-radius:16px;
border:1px solid rgba(179,38,30,.25);
background:rgba(179,38,30,.05);
}
.form-error h3{
color:#b3261e;
margin-bottom:.5rem;
}
.form-error p{
margin-bottom:18px;
}
.form-error .btn{
margin-right:10px;
margin-bottom:10px;
}
/* Honeypot field — hidden from people, visible to bots */
.hp-field{
position:absolute !important;
left:-9999px;
opacity:0;
height:0;
overflow:hidden;
}
@media (max-width:640px){
.cs-clients{gap:8px}
.cs-client{font-size:12px;padding:6px 11px}
}
/* ---------- Commercial page ---------- */
.comm-hero{background:linear-gradient(180deg, rgba(28,201,26,.045), transparent)}
.clients-band{padding-top:34px;padding-bottom:34px;border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.clients-label{
text-align:center;
font-size:12px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
opacity:.55;
margin-bottom:16px;
}
.clients-band .cs-clients{justify-content:center;margin:0}
.clients-band .cs-client{
border-color:rgba(0,0,0,.16);
color:rgba(0,0,0,.72);
}
.compliance-band{background:rgba(45,106,45,.05)}
.comp-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:22px;
margin-top:34px;
}
.comp-item{
background:#fff;
border:1px solid rgba(0,0,0,.07);
border-radius:14px;
padding:24px;
}
.comp-item h3{font-size:17px;margin-bottom:.5rem}
.comp-item p{font-size:15px;opacity:.82;margin:0}
.faq-list{max-width:820px;margin:34px auto 0}
.faq{
border:1px solid rgba(0,0,0,.09);
border-radius:12px;
padding:16px 20px;
margin-bottom:12px;
background:#fff;
}
.faq summary{
font-weight:700;
cursor:pointer;
list-style:none;
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"+";
font-size:22px;
line-height:1;
opacity:.5;
flex-shrink:0;
}
.faq[open] summary::after{content:"−"}
.faq p{margin:14px 0 4px;opacity:.85}
/* ---------- Single photo, and the badge that sits over it ----------
THE SHRUNK PHOTO BUG, found 2 Sep 2026: styles.css sets
.split-media{display:grid;grid-template-columns:1fr 1fr}. A single ![]()
child therefore occupies only the FIRST of two columns and renders at half
width with dead space beside it. That is why the van looked shrunk on
house.html. .media-one is the single-photo container that does not do that. */
.media-one{position:relative;display:block}
.media-one .job-photo{
width:100%;
height:auto;
min-height:0;
aspect-ratio:4/3.4;
object-fit:cover;
border-radius:22px;
border:6px solid #fff;
box-shadow:0 30px 70px -28px rgba(20,22,12,.40);
}
.ba-pair{position:relative}
.photo-badge{
position:absolute;
right:-14px;
top:26px;
z-index:2;
background:var(--ink,#15160F);
color:#fff;
border-radius:14px;
padding:.7rem 1rem;
box-shadow:0 30px 70px -28px rgba(20,22,12,.40);
text-align:center;
max-width:190px;
}
.photo-badge .stars{color:#FFC83D;font-size:1rem;letter-spacing:2px}
.photo-badge b{font-family:"Archivo",sans-serif;font-size:1.4rem;display:block;line-height:1}
.photo-badge small{font-size:.68rem;color:#b9bcb2;font-weight:600;display:block}
/* Commercial variant. Duty of care rather than reviews, because that is what
this audience is actually buying. Waste transfer notes are named on
commercial-facing pages only, per the writing rules in VAULT-INDEX. */
.photo-badge.wtn{
display:flex;
align-items:center;
gap:.7rem;
text-align:left;
padding:.85rem 1rem;
max-width:240px;
}
.photo-badge.wtn .ic{
width:38px;height:38px;border-radius:11px;background:var(--green);
display:grid;place-items:center;color:#08300a;flex:none;
}
.photo-badge.wtn .ic svg{width:21px;height:21px}
.photo-badge.wtn b{font-size:.98rem;margin-bottom:1px}
.photo-badge.wtn small{color:#b9bcb2}
@media(max-width:980px){
.photo-badge{right:8px;top:14px}
}
/* Two before/after pairs stacked in one column, used on the garden page */
.media-set{position:relative;display:block}
.media-set .ba-pair:first-child{margin-top:0}
/* ---------- Areas: centre the two location boxes, 2 Sep 2026 ----------
styles.css sets .hubs{grid-template-columns:repeat(3,1fr)} because the
section was designed for THREE hubs. There are only two, Nottingham and
Lincoln, so they sat in columns one and two with an empty third column,
which reads as badly left-aligned. Two columns, centred. */
.hubs{
grid-template-columns:repeat(2,1fr);
max-width:860px;
margin-left:auto;
margin-right:auto;
}
@media(max-width:680px){
.hubs{grid-template-columns:1fr}
}
/* ============================================================
MOBILE AND ACCESSIBILITY FIXES, 2 September 2026
Driven by one fact: 90% of Joel's leads come from mobile.
============================================================ */
/* --- 1. Tap-to-call back in the mobile header ---------------
styles.css hides .nav-phone below 1040px, so on a phone the only
header actions were "Get a free quote" and the burger. A large share of
clearance customers ring rather than type, and they were having to open
the burger to find a number. Icon only on mobile, full 44px target. */
@media(max-width:1040px){
.nav-phone{
display:flex;
min-width:44px;
min-height:44px;
align-items:center;
justify-content:center;
padding:0 4px;
}
.nav-phone .np-text{display:none}
.nav-phone svg{width:24px;height:24px}
}
/* Keep the header from crowding once the phone icon is back */
@media(max-width:480px){
.nav-cta{gap:.55rem}
.nav-cta .btn{padding:.72rem .9rem;font-size:.88rem}
.nav .logo img{height:36px}
}
/* --- 2. The cookie banner was burying the WhatsApp button ----
.cookie-banner is fixed bottom with z-index 200; .wa-float is fixed
bottom-right with z-index 70. Both anchor bottom, so until a visitor
accepted or rejected, the primary mobile CTA was invisible underneath it.
Lift the float clear while the banner is showing. */
.wa-float{transition:transform .18s ease, bottom .3s ease}
body:has(.cookie-banner.show) .wa-float{bottom:200px}
@media(max-width:560px){
body:has(.cookie-banner.show) .wa-float{bottom:250px}
}
/* --- 3. "Not sure which you need?" fragmented on mobile ------
.jobs-note is display:flex and the paragraph contains text, a link, then
more text. Those became three side-by-side flex items and broke into
columns on a phone. There is no icon in the markup, so flex bought
nothing. */
.jobs-note{
display:block;
text-align:center;
}
/* --- 4. Tap targets under the 44px guideline ----------------
The burger measured 42x34. "Find out more" on the service cards was
about 24px tall. */
.burger{
min-width:44px;
min-height:44px;
align-items:center;
justify-content:center;
}
.svc-find{padding:.45rem 0}
/* --- 5. Visible keyboard focus -------------------------------
Neither stylesheet defined :focus-visible anywhere. Inputs also set
outline:none, so keyboard users had no reliable indicator. */
:focus-visible{
outline:3px solid var(--green);
outline-offset:2px;
border-radius:6px;
}
.btn:focus-visible{
outline:3px solid var(--green);
outline-offset:3px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
outline:3px solid var(--green);
outline-offset:1px;
}
/* On the dark panels the green ring still reads, but lift it slightly */
.trust :focus-visible,
.areas :focus-visible,
.wa-card :focus-visible,
.cta-band :focus-visible,
footer :focus-visible,
.cookie-banner :focus-visible{
outline-color:#fff;
}
/* --- 6. WTN badge, reverted 3 Sep 2026 on Joel's instruction ------
Was moved under the pair on 2 Sep because it clipped awkwardly. Joel
prefers the overlay look, so back to the top-right corner over the
images — the same treatment .photo-badge already uses on garden.html's
before/after pair, which has never been a problem there. */
.photo-badge.wtn{
position:absolute;
right:-14px;
top:26px;
max-width:240px;
}
/* Validation messages, paired with the real validation in app.js.
Colour alone as an error indicator fails WCAG 1.4.1, so every error now
carries text as well as the red border. */
.field-error{
display:block;
margin-top:6px;
font-size:.85rem;
font-weight:600;
line-height:1.4;
color:#b3261e;
}
/* ============================================================
MOBILE ROUND TWO, 2 September 2026 — from Joel's screenshots
============================================================ */
/* --- A. Text running to the screen edge. A real bug, not taste ---
`.wrap` supplies the 24px side padding. But styles.css then sets
`.hero-grid{padding:64px 0 72px}` and `.page-hero-inner{padding:46px 0 56px}`
— and those classes sit on the SAME element as .wrap. The shorthand
overwrites the horizontal padding to ZERO, so every hero on the site runs
its text hard against both edges. Restore it, and give a little more room
on a phone than the desktop 24px. */
.hero-grid,
.page-hero-inner{
padding-left:24px;
padding-right:24px;
}
@media(max-width:680px){
.wrap{padding-left:22px;padding-right:22px}
.hero-grid,
.page-hero-inner{padding-left:22px;padding-right:22px}
/* The one place that legitimately needs to breathe more: long headings */
.hero h1,
.page-hero h1{padding-right:4px}
}
/* --- B. Header balance with the phone icon back in -----------
Adding the phone pushed the layout into logo / phone / button / burger and
it read as lopsided. Centre the phone and quote button in the space
between, and pin the burger hard right. */
@media(max-width:1040px){
.nav{gap:.75rem}
.nav-cta{
flex:1;
justify-content:center;
gap:.7rem;
}
.nav-cta .burger{margin-left:auto}
}
@media(max-width:480px){
.nav-cta{gap:.5rem}
.nav-cta .btn{padding:.7rem .9rem;font-size:.86rem}
.nav .logo img{height:34px}
}
/* --- C. Before and after side by side on mobile --------------
Joel's call and it is right: a before/after IS the comparison. Stacked
vertically on a phone you scroll from one to the other and lose it.
Half width each is small, but seeing them together is the whole point.
This overrides both my own earlier .ba-pair rule and the .jobs-grid
single-column rule in styles.css. */
@media(max-width:680px){
.ba-pair{
grid-template-columns:1fr 1fr;
gap:10px;
}
.jobs-grid{
grid-template-columns:1fr 1fr;
gap:10px;
}
.ba-item figcaption{
font-size:.72rem;
letter-spacing:.04em;
margin-top:8px;
}
}
/* ---------- Business address in the footer, 3 Sep 2026 ----------
Matched to the Google Business Profile: "Ossington Rd, Newark NG22 0AB".
Road and postcode only, no house number — that is exactly what the profile
already shows publicly, so this adds no exposure Joel did not already have.
It exists for NAP consistency and entity resolution: an AI system has to
know WHERE a business is before it will confidently recommend it. */
.biz-address{
display:block;
margin-top:14px;
font-size:.9rem;
color:#aeb1a7;
}
/* ---------- Hero badges swallowing the mobile photo, 3 Sep 2026 ----------
.hero-badge and .hero-rating were built for a wide desktop hero photo,
sized and offset for that width, and never got a mobile version at all.
On a phone the photo shrinks but the badges stay full size with negative
offsets pulling them further onto it — together they cover most of the
image. Found from Joel's screenshot. Shrink and pull them in. */
@media(max-width:680px){
.hero-badge{
left:-8px;
bottom:14px;
padding:.6rem .75rem;
gap:.55rem;
max-width:160px;
border-radius:12px;
}
.hero-badge .ic{width:32px;height:32px;border-radius:9px}
.hero-badge .ic svg{width:17px;height:17px}
.hero-badge b{font-size:.8rem}
.hero-badge small{font-size:.68rem}
.hero-rating{
right:-8px;
top:14px;
padding:.5rem .7rem;
border-radius:11px;
}
.hero-rating .stars{font-size:.8rem}
.hero-rating b{font-size:1.05rem}
.hero-rating small{font-size:.6rem}
}
/* ---------- CTA button hugging the paragraph above it, 3 Sep 2026 ----------
.commercial-strip p has no margin-bottom, and .btn is inline-flex so it
picks up no block spacing of its own. Same pattern as .wa-card .btn
elsewhere on the site. Found from Joel's screenshot. */
.cs-copy .btn{
margin-top:1.5rem;
}
/* wrappers added 3 Sep 2026 for the WebP hero. display:contents makes
the wrapper vanish for layout, so .hero-photo img and .media-one .job-photo
behave exactly as they did with a bare ![]()
. */
.hero-photo picture,.media-one picture{display:contents}
/* Footer logo: styles.css sets height:40px with no width:auto, so the
width="224" attribute added 3 Sep 2026 squashed it to 224x40. */
.foot-logo img{width:auto}
/* Hero "Licensed & insured" badge, second pass 3 Sep 2026 — Joel: still too big
on his iPhone. Tighter again. Later in the file than the first pass, same
specificity, so this wins. */
@media(max-width:680px){
.hero-badge{
padding:.45rem .6rem;
gap:.45rem;
max-width:138px;
left:-6px;
bottom:12px;
border-radius:10px;
}
.hero-badge .ic{width:26px;height:26px;border-radius:7px}
.hero-badge .ic svg{width:14px;height:14px}
.hero-badge b{font-size:.72rem}
.hero-badge small{font-size:.6rem}
}
/* iOS Dynamic Type opt-in, 3 Sep 2026, Joel's call on TARS's recommendation.
Safari ignores the iPhone Accessibility text-size slider unless the site
opts in. This sets the root size from the system setting; body and the
headings re-assert Manrope and Archivo, and every size on the site is rem
or clamp(rem), so the whole site follows the slider. The touch-callout
guard limits it to iOS/iPadOS WebKit. Default iOS body is 17px, so the
site renders ~6% larger on iPhone by default. */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none){
html{font:-apple-system-body}
body{font-family:"Manrope",system-ui,sans-serif;line-height:1.6}
}
/* ---------- Live Google reviews carousel, 3 Sep 2026 ----------
Replaces the earlier .rev-grid-live flex layout. Three cards visible on
desktop, two on a tablet, one plus a peek of the next on a phone. The
track is a scroll-snap strip, so swiping is native and needs no JS; the
arrows, dots and auto-advance in app.js sit on top. */
.rev-grid.rev-live{display:block}
.rev-carousel{position:relative}
.rev-track{
display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
scrollbar-width:none;padding:6px 2px 10px;
}
.rev-track::-webkit-scrollbar{display:none}
.rev-track .rev{flex:0 0 calc((100% - 22px) / 2);scroll-snap-align:start;min-width:0}
@media(max-width:1040px){ .rev-track .rev{flex-basis:calc((100% - 22px) / 2)} }
@media(max-width:680px){ .rev-track{gap:14px} .rev-track .rev{flex-basis:86%} }
/* The Google-styled card */
.rev.rev-g{padding:24px}
.rg-head{display:flex;align-items:center;gap:.75rem;margin-bottom:12px}
.rg-head .av{width:40px;height:40px;font-size:1rem;overflow:hidden;position:relative}
.rg-head .av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.rg-meta{flex:1;min-width:0}
.rg-meta b{font-family:"Archivo",sans-serif;font-size:.98rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-meta small{color:var(--muted);font-weight:600;font-size:.78rem;display:block}
.rg-logo{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--line)}
.rev.rev-g .stars{color:#FBBC04;font-size:1.05rem;letter-spacing:2px;margin-bottom:10px}
/* Review text clamped to 4 lines, 4 Sep 2026. One real review ran to 588
characters against ~200 for the others, which made that card much taller
than the rest and broke the carousel's per-card width measurement (it
assumes uniform cards). Clamped, not deleted — "See more" reveals the
full text, which matters because review text is a real customer's own
words and should stay fully readable, just not force every card to match
its length by default. */
.rev.rev-g p{
font-size:.98rem;
line-height:1.55;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
}
.rev.rev-g p.expanded{
display:block;
-webkit-line-clamp:unset;
overflow:visible;
}
.rev-more{
display:block;
background:none;
border:0;
padding:0;
margin-top:8px;
color:var(--green-ink);
font-weight:700;
font-size:.88rem;
cursor:pointer;
text-decoration:underline;
}
/* Arrows, dots, attribution */
.rev-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.rev-btn{
width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;
color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;
box-shadow:var(--shadow);transition:background .15s,color .15s;
}
.rev-btn:hover{background:var(--green);color:#08300a}
.rev-dots{display:flex;gap:8px}
.rev-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:#c9ccc2;cursor:pointer;transition:background .15s,transform .15s}
.rev-dot.on{background:var(--green);transform:scale(1.25)}
.rev-attr{display:block;text-align:center;margin-top:12px;color:var(--muted);font-weight:600;font-size:.8rem}
/* Licence number links to the Environment Agency public register, 3 Sep 2026.
The old Squarespace site did this; the new one did not, and commercial.html
literally told people to go and check. Inherits colour so it works on the
dark footer, the white badge and the green licence box alike. */
.ea-link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ea-link:hover{color:var(--green)}
footer .ea-link:hover,.trust .ea-link:hover{color:#fff}
/* ---------- Hero layout hardening, 3 Sep 2026 ----------
The new H1 ("Waste clearance in Nottingham and Lincoln, swept clean before
we go.") is far longer than the one the theme was built for, and it
collapsed the photo. Three causes, all fixed here:
1. .hero-grid used 1.05fr .95fr. An fr column still respects its content's
min-content width, so a long unbreakable headline pushes the photo
column to nothing. minmax(0,…) caps it, and protects any future headline.
2. .hero h1 .hl was white-space:nowrap, so the green phrase could not wrap
at all. Fine for four short words, fatal for six long ones.
3. The font-size clamp was tuned for a two-line headline. Brought into line
with the service pages so three lines do not dominate the fold. */
.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.hero h1{font-size:clamp(2rem,3.5vw,3.05rem)}
.hero h1 .hl{white-space:normal}
@media(max-width:1040px){
.hero-grid{grid-template-columns:1fr}
}
/* ---------- Service page heroes: CENTRED, and that is deliberate ----------
.page-hero-inner sits on the same element as .wrap (margin:0 auto) and
narrows it to 760px, so the whole block centres itself while the sections
below start at the left edge. Original theme behaviour. TARS left-aligned
it on 3 Sep 2026 when Joel queried it, and Joel reverted it the same
evening: he prefers it centred. DO NOT "fix" this again. */
/* ---------- Mobile: two service cards per row, 3 Sep 2026 ----------
Joel: the service cards took the whole screen, so getting past six of them
was a long scroll. Cause: .svc is flex:1 1 320px with 28px padding, so on a
412px phone one card fills the row and stands about 400px tall.
Two-up, tighter padding, smaller type, and the description clamped to three
lines so every card is the same compact height. The text is clamped, not
deleted, so it is still in the HTML for Google to read. */
@media(max-width:680px){
.svc-grid{gap:12px}
.svc{
flex:1 1 calc((100% - 12px) / 2);
max-width:none;
padding:16px;
border-radius:18px;
}
.svc .ic{width:38px;height:38px;border-radius:11px;margin-bottom:12px}
.svc .ic svg{width:20px;height:20px}
.svc h3{font-size:1rem;line-height:1.25}
.svc p{
font-size:.84rem;
margin-top:.4rem;
line-height:1.45;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
.svc-from{margin:4px 0 10px;padding:4px 9px;font-size:.72rem}
.svc-actions{margin-top:.85rem;gap:.5rem}
.svc-find{font-size:.84rem;padding:.25rem 0}
.svc-quote{padding:.55rem .8rem;font-size:.84rem}
}
/* ---------- Mobile: centre the review card, 3 Sep 2026 ----------
It was 86% wide with scroll-snap-align:start against 2px of track padding,
so the card sat hard left and the whole 14% of spare space showed as a peek
on the right. Reads as broken alignment because it is.
Now: 9% padding each side, card fills the content box, and snap-align:center
so the browser centres whichever card is snapped. Equal margins, with a
small peek of the next card so it still looks swipeable. */
@media(max-width:680px){
.rev-track{padding:6px 9% 10px}
.rev-track .rev{flex-basis:100%;scroll-snap-align:center}
}