/* LM Waste Management Ltd — site styles. Hand-written, one file, no framework. */
/* Fonts: Arial and Arial Black, as the brand kit specifies. Nothing to download. */
:root{
  --green:#0F3D2E; --green-deep:#0A2B20; --green-bright:#16543F; --mint:#F2F5F2; --mint-2:#DCE5DF;
  --amber:#FFD500; --amber-dark:#E6BF00; --amber-ink:#0F3D2E; --warning:#FF6A00;
  --ink:#0F3D2E; --slate:#3F5A50; --muted:#5B7368; --line:#DCE5DF; --cloud:#F7F9F7; --white:#fff;
  --ok:#15803d; --warn:#b45309; --bad:#b91c1c;
  --display:"Arial Black","Arial Bold",Arial,"Helvetica Neue",Helvetica,sans-serif;
  --body:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --radius:14px; --radius-sm:9px;
  --shadow:0 6px 24px rgba(15,61,46,.08); --shadow-lg:0 18px 50px rgba(15,61,46,.14);
  --max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.55;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
/* Keyboard focus: a deep green ring with a white halo, so it shows on white,
   mint, the yellow buttons and the dark green sections alike (WCAG 1.4.11).
   The outline also survives Windows high-contrast mode, where shadows are dropped. */
:root{--focus-halo:0 0 0 7px #fff}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
/* The halo wins over a button's or card's own shadow (!important), or the ring
   would vanish on the yellow buttons in the dark green heroes. Text boxes keep
   their own green border instead (.field input:focus). */
:focus-visible:not(input,select,textarea){box-shadow:var(--focus-halo)!important}
/* "Skip to content": the first thing a keyboard reaches on every page (html.js layout). */
.skip-link{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:var(--radius-sm);background:var(--green);color:#fff;font-weight:700;text-decoration:none}
.skip-link:focus{top:12px;text-decoration:none}
main{scroll-margin-top:84px}
main:focus,main:focus-visible{outline:0;box-shadow:none!important}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;margin:0 0 .4em;letter-spacing:-.01em}
h1,h2{text-wrap:balance}
h1{font-size:clamp(32px,4.6vw,54px);font-weight:900}
h2{font-size:clamp(25px,3.2vw,36px);font-weight:900}
h3{font-size:20px;font-weight:900}
h4{font-family:var(--body);font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}
strong{font-weight:700}
small{font-size:.85em}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.narrow{max-width:800px}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.lead{font-size:20px;color:var(--slate);max-width:60ch}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:var(--radius-sm);font:inherit;font-weight:700;font-size:16px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .12s,background .12s,box-shadow .12s;white-space:nowrap;line-height:1.1}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:none}
.btn-primary{background:var(--amber);color:var(--amber-ink);box-shadow:0 6px 18px rgba(255,213,0,.35)}
.btn-primary:hover{background:var(--amber-dark);color:var(--amber-ink)}
.btn-dark{background:var(--green);color:#fff}
.btn-dark:hover{background:var(--green-deep);color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn-white{background:#fff;color:var(--green-deep)}
.btn-lg{padding:17px 30px;font-size:18px}
.btn-sm{padding:9px 14px;font-size:14px}
.btn-block{width:100%}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* top bar + header */
.topbar{background:var(--green-deep);color:#F2F5F2;font-size:14px}
.topbar .container{display:flex;justify-content:space-between;gap:16px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.topbar a{color:#fff;font-weight:600}
.topbar .hours{color:#C5D3CA}
.header{position:sticky;top:0;z-index:40;background:var(--green);border-bottom:1px solid rgba(255,255,255,.08)}
.header>.container{display:flex;align-items:center;gap:28px;height:74px;position:relative}
.logo{display:block;width:176px;flex-shrink:0}
@media (min-width:1000px){.header .logo{width:210px}}
.logo img,.logo svg{width:100%;height:auto}
.nav{display:none;gap:18px;align-items:center;margin-left:auto;font-weight:600;font-size:14px;white-space:nowrap}
.nav a{color:#fff;padding:8px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a.active{color:var(--amber);border-color:var(--amber);text-decoration:none}
.nav .menu{position:relative}
.nav .menu>button{font:inherit;font-weight:600;background:none;border:0;color:#fff;cursor:pointer;padding:8px 0;display:inline-flex;align-items:center;gap:4px}
.nav .menu>button::after{content:"▾";font-size:.7em;color:rgba(255,255,255,.6)}
.nav .dropdown{position:absolute;top:100%;left:-12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:10px;min-width:260px;display:none;grid-template-columns:1fr;gap:2px;z-index:50}
.nav .menu.open .dropdown{display:grid}
@media (hover:hover){.nav .menu:hover .dropdown{display:grid}}
.nav .dropdown a{padding:9px 12px;border-radius:7px;border:0;font-weight:500;font-size:15px;color:var(--ink)}
.nav .dropdown a:hover{background:var(--mint);color:var(--green)}
.nav .dropdown .all{grid-column:1/-1;border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-weight:700;color:var(--green)}
.header-cta{display:none;gap:10px;margin-left:auto}
.header-cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.header-cta .btn-ghost:hover{border-color:#fff;color:#fff}
.menu-toggle{margin-left:auto;background:none;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:8px;padding:9px 12px;font:inherit;font-weight:700;cursor:pointer}
.mobile-nav{display:none;border-top:1px solid var(--line);background:#fff;max-height:calc(100vh - 74px);overflow:auto}
.mobile-nav.open{display:block}
.mobile-nav .container{display:grid;padding-top:8px;padding-bottom:16px}
@media (min-width:1000px){.nav,.header-cta{display:flex}.menu-toggle,.mobile-nav{display:none!important}}

/* hero */
.hero{background:linear-gradient(180deg,var(--mint) 0%,#fff 100%);padding:52px 0 40px;border-bottom:1px solid var(--line)}
.hero .container{display:grid;gap:36px;align-items:start}
.hero h1 span{color:var(--green)}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 18px}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--slate)}
.trust span::before{content:"✓";color:var(--ok);font-weight:800;margin-right:6px}
.hero.compact{padding:40px 0 30px}
.hero.dark{background:var(--green-deep);color:#fff;border:0}
.hero.dark .lead{color:#C5D3CA}
.hero.dark .eyebrow{color:var(--amber)}
.hero.dark h1 span{color:var(--amber)}
.hero.dark .trust{color:#C5D3CA}
@media (min-width:900px){.hero .container{grid-template-columns:1.15fr .85fr;gap:56px}}

/* quick price widget (home hero) */
.qp{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:24px;display:grid;gap:14px}
.qp h2{font-size:26px;margin:0}
.qp .sub{margin:0;color:var(--slate);font-size:15px}
.qp .fine{font-size:13px;color:var(--muted);margin:0}

/* forms */
.field{display:grid;gap:6px}
.field label{font-weight:700;font-size:14px}
.field input,.field select,.field textarea{font:inherit;font-size:max(16px,1em);padding:12px 14px;border:1px solid #cbd5e1;border-radius:var(--radius-sm);background:#fff;width:100%;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid rgba(15,61,46,.18);border-color:var(--green);box-shadow:none}
.field .hint{font-size:13px;color:var(--muted)}
.field .err{font-size:13px;color:var(--bad);display:none}
.field.invalid input,.field.invalid select{border-color:var(--bad)}
.field.invalid .err{display:block}
.field-row{display:grid;gap:12px}
@media (min-width:560px){.field-row{grid-template-columns:1fr 1fr}}
.fineprint{font-size:13px;color:var(--muted);margin:0}

/* sections */
.section{padding:64px 0}
.section.alt{background:var(--cloud);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section.tight{padding:40px 0}
.section-head{max-width:720px;margin-bottom:32px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.grid{display:grid;gap:18px}
@media (min-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:10px}
.card:hover{border-color:var(--mint-2);box-shadow:var(--shadow)}
.card .ico{width:44px;height:44px;border-radius:10px;background:var(--mint);color:var(--green);display:grid;place-items:center;padding:10px}
.card h3{margin:4px 0 0}
.card p{margin:0;color:var(--slate);font-size:15px}
.card .more{margin-top:auto;font-weight:700}
.card.link{color:inherit}
.card.link:hover{text-decoration:none}

/* steps */
.steps{display:grid;gap:18px;counter-reset:s}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;padding:22px 22px 22px 70px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:20px;top:18px;width:36px;height:36px;border-radius:50%;background:var(--amber);color:var(--amber-ink);font-family:var(--display);font-weight:900;font-size:19px;display:grid;place-items:center}
.step h3{font-size:20px;margin:0 0 4px}
.step p{margin:0;font-size:15px;color:var(--slate)}

/* price cards */
.price-cards{display:grid;gap:16px}
@media (min-width:700px){.price-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.price-cards.five{grid-template-columns:repeat(5,1fr)}.price-cards.three{grid-template-columns:repeat(3,1fr)}}
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:grid;gap:8px;align-content:start;position:relative}
.price-card.featured{border-color:var(--green);box-shadow:var(--shadow)}
.price-card .tag{position:absolute;top:-11px;left:18px;background:var(--green);color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.price-card .name{font-family:var(--display);font-weight:900;font-size:20px;line-height:1}
.price-card .price{font-family:var(--display);font-weight:900;font-size:34px;line-height:1;color:var(--green)}
.price-card .price small{font-family:var(--body);font-size:13px;font-weight:600;color:var(--muted);display:block;margin-top:4px}
.price-card .fits{font-size:14px;color:var(--slate)}
.price-card p{margin:0;font-size:14px;color:var(--slate)}
.price-card .btn{margin-top:8px}
.skip-pic{width:100%;height:auto}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
thead th{border-top:0;background:var(--cloud);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td .note{display:block;font-size:13px;color:var(--muted)}
tr.featured td{background:var(--mint)}

/* item grid (product pages / prices) */
.items{display:grid;gap:10px}
@media (min-width:640px){.items{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.items{grid-template-columns:repeat(3,1fr)}}
.item{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-size:15px}
.item b{display:block}
.item small{color:var(--muted)}
.item .p{font-weight:800;color:var(--green);white-space:nowrap;font-variant-numeric:tabular-nums}

/* chips, badges */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;padding:6px 12px;border-radius:99px;background:var(--mint);color:var(--green-deep);font-size:14px;font-weight:600;border:1px solid var(--mint-2)}
.chip:hover{background:var(--mint-2);text-decoration:none}
.badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:6px;background:var(--mint);color:var(--green-deep)}
.badge.amber{background:#FFF3B0;color:#5C4A00}

/* proof strip */
.proof{display:grid;gap:18px;padding:26px;background:var(--green-deep);color:#fff;border-radius:var(--radius)}
@media (min-width:760px){.proof{grid-template-columns:repeat(3,1fr)}}
.proof .big{font-family:var(--display);font-weight:900;font-size:34px;line-height:1;color:var(--amber)}
.proof .small{font-size:14px;color:#C5D3CA;margin-top:4px}

/* reviews */
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:grid;gap:8px}
.review .stars{color:var(--amber);letter-spacing:2px;font-size:16px}
.review p{margin:0;font-size:15px}
.review .who{font-size:13px;color:var(--muted)}

/* local info blocks */
.info{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:grid;gap:8px}
.info h3{font-size:20px;margin:0}
.info dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15px}
.info dt{color:var(--muted);font-weight:600}
.info dd{margin:0}
.callout{border-left:5px solid var(--amber);background:#FFF9DB;padding:16px 20px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:15px}
.callout.green{border-color:var(--green);background:var(--mint)}
.two-col{display:grid;gap:28px}
@media (min-width:900px){.two-col{grid-template-columns:1.4fr 1fr;align-items:start}}
.sticky{position:sticky;top:90px}
.prose{max-width:70ch}
.prose h2{font-size:32px;margin-top:1.4em}
.prose h3{font-size:22px;margin-top:1.2em}
.prose li{margin-bottom:.35em}

/* FAQ */
.faq{display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 18px}
.faq summary{cursor:pointer;font-weight:700;padding:15px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:24px;color:var(--green);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px;color:var(--slate);font-size:15px}

/* breadcrumb */
.crumb{font-size:13px;color:var(--muted);padding:14px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.crumb a{color:var(--muted)}
.crumb .sep{opacity:.5}

/* CTA band */
.cta-band{background:var(--green-deep);color:#fff;border-radius:var(--radius);padding:40px 32px;display:grid;gap:14px;text-align:center;border-left:12px solid var(--amber)}
.cta-band h2{color:#fff;margin:0}
.cta-band p{color:#C5D3CA;margin:0;max-width:60ch;justify-self:center}
.cta-band .hero-ctas{justify-content:center;margin:8px 0 0}

/* footer */
footer{background:#0A2B20;color:#C5D3CA;padding:56px 0 100px;margin-top:40px;font-size:15px}
.footer-grid{display:grid;gap:32px}
@media (min-width:800px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
footer .h4{color:#fff;margin-bottom:12px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
footer a{color:#C5D3CA}
footer a:hover{color:#fff}
footer .logo{width:200px;margin-bottom:14px;display:block}
footer .social{display:flex;gap:10px;margin-top:4px}
footer .social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid #2c4d3b;color:#fff}
footer .social a:hover,footer .social a:focus-visible{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.footer-bottom{border-top:1px solid #1f3a2c;margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:#9fb8ab}
@media (min-width:1000px){footer{padding-bottom:56px}}

/* floating + mobile bar */
.wa-float{position:fixed;right:18px;bottom:84px;z-index:30;width:54px;height:54px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.wa-float svg{width:30px;height:30px;fill:#fff}
@media (min-width:1000px){.wa-float{bottom:24px}}
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr 1.3fr;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(15,61,46,.08)}
.mobile-bar a{display:grid;justify-items:center;gap:2px;padding:9px 6px 10px;font-size:12px;font-weight:700;color:var(--ink)}
.mobile-bar a svg{width:22px;height:22px}
.mobile-bar a.book{background:var(--amber);color:var(--amber-ink)}
@media (min-width:1000px){.mobile-bar{display:none}}

/* ---------------------------------------------------------------- booking */
.book-hero{background:var(--green-deep);color:#fff;padding:28px 0 22px}
.book-hero h1{font-size:clamp(26px,4vw,40px);margin:0 0 6px}
.book-hero p{margin:0;color:#C5D3CA}
.book-grid{display:grid;gap:24px;padding:24px 0 60px}
@media (min-width:960px){.book-grid{grid-template-columns:1fr 360px;align-items:start}}
.pc-result{margin-top:10px;font-size:15px;display:none}
.pc-result.ok{display:block;color:var(--ok)}
.pc-result.warn{display:block;color:var(--warn)}
.irow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:11px 16px;border-top:1px solid var(--line);font-size:15px}
.irow b{display:block}
.irow small{color:var(--muted);font-size:13px}
.irow .p{font-weight:800;color:var(--green);font-variant-numeric:tabular-nums;white-space:nowrap}
.qty{display:inline-grid;grid-template-columns:32px 36px 32px;border:1px solid var(--line);border-radius:8px;overflow:hidden;height:34px}
.qty button{font:inherit;font-size:18px;font-weight:700;border:0;background:var(--cloud);cursor:pointer;color:var(--green)}
.qty button:hover{background:var(--mint)}
.qty output{display:grid;place-items:center;font-weight:700;font-variant-numeric:tabular-nums;background:#fff}
.qty.zero output{color:var(--muted)}
.isearch{margin-bottom:12px}
.isearch input{width:100%;font:inherit;padding:12px 14px 12px 40px;border:1px solid #cbd5e1;border-radius:var(--radius-sm);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 12px center/18px no-repeat}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{padding:12px 8px;border:1px solid var(--line);border-radius:var(--radius-sm);text-align:center;cursor:pointer;font-weight:700;font-size:14px;background:#fff}
.slot small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.slot:has(input:checked){border-color:var(--green);background:var(--mint);color:var(--green)}
.slot input{position:absolute;opacity:0}
.dates{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-bottom:12px}
.date{padding:10px 6px;border:1px solid var(--line);border-radius:var(--radius-sm);text-align:center;cursor:pointer;background:#fff;font-size:13px;position:relative}
.date b{display:block;font-family:var(--display);font-size:19px;font-weight:900;line-height:1.05}
.date small{display:block;color:var(--muted);font-size:11px}
.date .sd{display:block;font-size:10px;font-weight:700;color:var(--ok);text-transform:uppercase;letter-spacing:.06em}
.date:has(input:checked){border-color:var(--green);background:var(--mint)}
.date input{position:absolute;opacity:0}
.date.off{opacity:.4;pointer-events:none}
.summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:grid;gap:12px;box-shadow:var(--shadow)}
.summary h3,.summary .h3{margin:0;font-size:22px}
.summary .lines{display:grid;gap:6px;font-size:14px}
.summary .line{display:flex;justify-content:space-between;gap:10px}
.summary .line span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.summary .line.sub{color:var(--muted);font-size:13px}
.summary .empty{color:var(--muted);font-size:14px;margin:0}
.summary .total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--ink);padding-top:12px}
.summary .total b{font-family:var(--display);font-size:30px;font-weight:900;color:var(--green);font-variant-numeric:tabular-nums}
.summary .total small{color:var(--muted);font-size:13px}
.vat-toggle{display:flex;gap:6px;font-size:13px;background:var(--cloud);padding:4px;border-radius:8px}
.vat-toggle label{flex:1;text-align:center;padding:6px;border-radius:6px;cursor:pointer;font-weight:600;color:var(--slate)}
.vat-toggle label:has(input:checked){background:#fff;color:var(--green);box-shadow:var(--shadow)}
.vat-toggle input{position:absolute;opacity:0}
.summary .rules{font-size:13px;color:var(--muted);margin:0;display:grid;gap:4px}
.summary .rules li{list-style:none}
.summary .rules li::before{content:"✓ ";color:var(--ok);font-weight:800}
.summary ul.rules{padding:0}
.photo-pick__btn{display:inline-flex;gap:8px;align-items:center;padding:11px 16px;border:1px dashed #94a3b8;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;font-size:15px;background:var(--cloud)}
.photo-pick__btn input{position:absolute;width:1px;height:1px;opacity:0}
.photo-pick__list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.photo-pick__list img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.photo-pick__hint{font-size:13px;color:var(--muted);margin:6px 0 0}
.submit-note{font-size:13px;color:var(--muted);margin:10px 0 0}
.form-error{display:none;background:#fef2f2;color:var(--bad);border:1px solid #fecaca;border-radius:var(--radius-sm);padding:12px 14px;font-size:14px;margin-bottom:12px}
.form-error.show{display:block}

/* areas grid */
.area-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.area-grid a{padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font-weight:600;background:#fff;display:grid;gap:2px}
.area-grid a small{color:var(--muted);font-weight:500;font-size:13px}
.area-grid a:hover{border-color:var(--green);text-decoration:none}

/* thank you */
.tick{width:72px;height:72px;border-radius:50%;background:var(--mint);color:var(--green);display:grid;place-items:center;font-size:36px;margin:0 auto 16px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.topbar,.header,.wa-float,.mobile-bar,.bk-nav,footer,.cta-band{display:none!important}}

/* ---------------------------------------------------------------- visual pass */
.hero.photo{position:relative;color:#fff;border:0;background:#0A2B20 var(--hero) center/cover no-repeat;padding:64px 0 56px;isolation:isolate}
.hero.photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,43,32,.94) 0%,rgba(10,43,32,.82) 42%,rgba(10,43,32,.45) 100%);z-index:-1}
.hero.photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(135deg,var(--amber) 0 18px,#0F3D2E 18px 36px);opacity:.9}
.hero.photo h1{color:#fff;font-size:clamp(34px,5vw,60px)}
.hero.photo h1 span{color:var(--amber)}
.hero.photo .lead{color:#C5D3CA}
.hero.photo .eyebrow{color:var(--amber)}
.hero.photo .trust{color:#C5D3CA}
.hero.photo .trust span::before{color:var(--amber)}
.hero.photo .btn-dark{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff;backdrop-filter:blur(4px)}
.hero.photo .btn-dark:hover{background:rgba(255,255,255,.22)}
.hero.photo.compact{padding:48px 0 44px}
.hero.photo .summary{box-shadow:0 24px 60px rgba(0,0,0,.35)}
.hero.photo .summary h3,.hero.photo .summary{color:var(--ink)}
@media (max-width:899px){.hero.photo::before{background:linear-gradient(180deg,rgba(10,43,32,.94) 0%,rgba(10,43,32,.86) 100%)}}

.svc-grid{gap:22px}
.scard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:inherit;transition:transform .15s,box-shadow .15s}
.scard:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--mint-2)}
.scard img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.scard .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1;position:relative}
.scard .ico{position:absolute;top:-24px;right:18px;width:48px;height:48px;border-radius:12px;background:var(--amber);color:var(--amber-ink);display:grid;place-items:center;padding:11px;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.scard h3{margin:2px 0 0;font-size:24px}
.scard p{margin:0;color:var(--slate);font-size:15px;flex:1}
.scard .more{font-weight:700;color:var(--green);display:inline-flex;align-items:center;gap:6px}
.scard .more svg{width:16px;height:16px}

.band{background:var(--green-deep);color:#fff;padding:64px 0;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:var(--amber)}
.band h2{color:#fff}
.band .eyebrow{color:var(--amber)}
.band-grid{display:grid;gap:36px;align-items:center}
@media (min-width:960px){.band-grid{grid-template-columns:1.1fr .9fr}}
.band .steps{grid-template-columns:1fr;gap:12px;margin-top:8px}
.band .step{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.band .step p{color:#C5D3CA}
.band .step h3{color:#fff}
.band-photo{width:100%;border-radius:var(--radius);box-shadow:0 24px 60px rgba(0,0,0,.4);aspect-ratio:4/3;object-fit:cover}

.price-card .truck{width:min(160px,100%);margin-bottom:6px}
.price-card .truck svg{width:100%;height:auto}

.skip-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:700px){.skip-cards{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.skip-cards{grid-template-columns:repeat(5,1fr)}}
.skip-card{display:grid;gap:4px;justify-items:center;text-align:center;padding:18px 14px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);color:inherit;transition:transform .15s,box-shadow .15s}
.skip-card:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.skip-card.featured{border-color:var(--green);background:var(--mint)}
.skip-card svg{width:100%;height:auto;max-width:220px}
.skip-card .n{font-family:var(--display);font-weight:900;font-size:22px;line-height:1;margin-top:4px}
.skip-card .p{font-family:var(--display);font-weight:900;font-size:30px;color:var(--green);line-height:1}
.skip-card small{color:var(--muted);font-size:13px}

.ba-grid{display:grid;gap:20px}
@media (min-width:900px){.ba-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}}
.ba{margin:0}
.ba .pair{display:grid;grid-template-columns:1fr 1fr;gap:4px;position:relative;border-radius:var(--radius);overflow:hidden}
.ba img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.ba .tag{position:absolute;top:10px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:6px;color:#fff;background:rgba(15,61,46,.75)}
.ba .tag.b{left:10px}
.ba .tag.a{left:calc(50% + 12px);background:var(--green)}
.ba figcaption{font-size:14px;color:var(--slate);margin-top:8px;font-weight:600}

.review{border-top:5px solid var(--amber);position:relative}
.review::before{content:"\201C";position:absolute;right:16px;top:2px;font-family:var(--display);font-size:80px;line-height:1;color:var(--mint-2)}
footer{border-top:6px solid var(--amber)}
.section.alt{background:linear-gradient(180deg,#f3f8f5,#fff)}
.cta-band{background:var(--green-deep);position:relative;isolation:isolate;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,43,32,.97) 0%,rgba(10,43,32,.9) 60%,rgba(10,43,32,.6) 100%);z-index:-1}
.hero.photo .qp,.hero.photo .summary{color:var(--ink)}
.hero.photo .qp h2{color:var(--ink)}
.hero.photo .qp .sub,.hero.photo .qp .fine{color:var(--slate)}
.vat-toggle label{white-space:nowrap;padding:6px 10px}
.linklike{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--green);text-decoration:underline;cursor:pointer}
.irow .p s{color:var(--muted);font-weight:500;margin-right:6px}
.irow .p small{display:block;font-size:11px;font-weight:500;color:var(--muted);text-align:right}
.item .p small{display:block;font-size:11px;font-weight:500;color:var(--muted)}

@media (max-width:700px){.hero.photo{background-image:var(--hero-sm)}}

/* ---------------------------------------------------------------- quality pass */
.h3{font-family:var(--display);font-size:24px;font-weight:700;line-height:1.02;letter-spacing:-.005em}
.h4{font-family:var(--body);font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.2;margin:0 0 .4em}
/* Links inside running text are underlined, so colour is never the only cue. */
main p a:not(.btn),main dd a,main li a:not(.btn):not(.chip),main td a:not(.btn),.faq a{text-decoration:underline;text-underline-offset:2px}
.area-grid a,.crumb a,.chips a{text-decoration:none}
/* Sections below the first screen are laid out and painted only when they
   come near the viewport: faster first paint, and their background photos
   are not fetched until needed. */
body.home main > section:nth-of-type(n+3){content-visibility:auto;contain-intrinsic-size:auto 720px}
.fineprint a,main p > a:only-child{display:inline-block;padding:4px 0}
footer li a{display:inline-block;padding:3px 0}
body.booking .mobile-bar,body.booking .wa-float{display:none}

/* towns grouped by region */
.regions{display:grid;gap:18px}
@media (min-width:860px){.regions{grid-template-columns:repeat(2,1fr);gap:22px 32px}}
.region h3{font-size:20px;margin:0 0 8px}
.region .chips{gap:6px}
.region .chip{font-size:13px;padding:5px 10px}

/* headline prices on town pages */
.pstrip{display:grid;gap:10px;margin-top:10px}
.pchips{display:flex;flex-wrap:wrap;gap:10px}
.pchip{display:grid;gap:2px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);min-width:132px}
.pchip:hover{border-color:var(--green);text-decoration:none;box-shadow:var(--shadow)}
.pchip span{font-size:14px;color:var(--slate);font-weight:600}
.pchip b{font-family:var(--display);font-weight:900;font-size:28px;line-height:1;color:var(--green)}
.pnote{margin:0;font-size:14px;color:var(--muted)}
.pmore{font-weight:700;font-size:15px}
.stack{display:grid;gap:16px;align-content:start}
.card .more a{color:var(--green)}

dl.mini{margin:8px 0 6px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px}
dl.mini dt{font-weight:700;color:var(--slate);white-space:nowrap}
dl.mini dd{margin:0}
.callout .fineprint{margin:4px 0 0}
.field-row{align-items:start}
.field{align-content:start}

/* ---------------------------------------------------------------- price forms (postcode in, price out) */
.pform input{font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.pform input::placeholder{font-weight:500;text-transform:none;letter-spacing:0;font-size:17px}
.pform .fine a{text-decoration:underline;text-underline-offset:2px}
.qp-go{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qp-go button{font:inherit;text-align:left;display:grid;gap:2px;align-content:start;padding:12px 14px;min-height:64px;border:2px solid var(--line);border-radius:var(--radius-sm);background:#fff;cursor:pointer;color:var(--ink)}
.qp-go button b{font-size:15px;line-height:1.2}
.qp-go button small{color:var(--green);font-weight:700;font-size:13px}
.qp-go button:hover{border-color:var(--green);background:var(--mint)}

/* ---------------------------------------------------------------- booking: one service per page, one step at a time */
[hidden]{display:none!important}
.bk-kicker{margin:0 0 8px;font-size:14px;color:#C5D3CA}
.bk-kicker a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.bk-progress{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bk-progress li{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--cloud);border:1px solid var(--line);font-weight:700;font-size:15px;color:var(--muted)}
.bk-progress li span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);font-family:var(--display);font-size:16px;font-weight:900;flex-shrink:0}
.bk-progress li.on{background:var(--green);border-color:var(--green);color:#fff}
.bk-progress li.on span{color:var(--green);border-color:#fff}
.bk-progress li.done{background:var(--mint);border-color:var(--mint-2);color:var(--green-deep);cursor:pointer}
.bk-progress li.done span{background:var(--green);border-color:var(--green);color:#fff;font-size:0}
.bk-progress li.done span::after{content:"✓";font-size:14px}
@media (max-width:560px){.bk-progress li{flex-direction:column;gap:3px;padding:8px 4px;font-size:12px;text-align:center}}
body.booking .book-grid{padding-top:14px}
.bk-main{min-width:0}
.bk-step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
@media (max-width:560px){.bk-step{padding:18px 14px}}
.bk-step>h2{font-size:clamp(28px,4vw,36px);margin:0 0 6px}
.bk-step>h2:focus{outline:0}
.bk-help{color:var(--slate);font-size:16px;margin:0 0 16px;max-width:62ch}
.bk-where{margin:0 0 10px;font-size:14px;color:var(--slate)}
.bk-alt{font-size:14px;color:var(--slate);margin:14px 0 0}
.bk-note{font-size:14px;color:var(--slate);margin:0 0 10px}
.bk-step[data-step="1"] .field{max-width:340px}
.bk-step[data-step="1"] input{font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:14px 16px}
.bk-step[data-step="1"] input::placeholder{font-weight:500;text-transform:none;letter-spacing:0;font-size:17px}
.pc-result{font-weight:600}
.bk-step .field,.bk-step .field-row{margin-bottom:14px}
.bk-step .field-row .field{margin-bottom:0}
.bk-step .bk-addr{margin-bottom:14px}
.bk-step .bk-addr .field,.bk-step .bk-addr .field-row{margin-bottom:0}
.bk-q{border:0;padding:0;margin:0 0 20px;min-width:0}
.bk-q legend{font-family:var(--display);font-size:22px;font-weight:700;padding:0;margin-bottom:8px}

/* a choice: the whole card is the radio button */
.bk-cards{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.bk-cards.two{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.bk-cards.three{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.bk-card{position:relative;display:flex;gap:14px;align-items:center;padding:14px 16px;border:2px solid var(--line);border-radius:var(--radius-sm);background:#fff;cursor:pointer;transition:border-color .12s,background .12s}
.bk-card:hover{border-color:#9A9A94}
.bk-card input{position:absolute;opacity:0;width:1px;height:1px}
.bk-card::before{content:"";width:22px;height:22px;border-radius:50%;border:2px solid #94a3b8;background:#fff;flex-shrink:0}
.bk-card:has(input:checked){border-color:var(--green);background:var(--mint)}
.bk-card:has(input:checked)::before{border-color:var(--green);background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/13px no-repeat}
.bk-card:has(input:focus-visible),.slot:has(input:focus-visible),.date:has(input:focus-visible){outline:3px solid var(--green);outline-offset:2px;box-shadow:var(--focus-halo)}
.bk-card .ic{width:84px;flex-shrink:0}
.bk-card .ic svg{width:100%;height:auto}
.bk-card .t{display:grid;gap:2px;min-width:0;flex:1}
.bk-card .t b{font-size:18px;line-height:1.2}
.bk-card .t small{color:var(--slate);font-size:14px;line-height:1.35}
.bk-card .p{font-family:var(--display);font-weight:900;font-size:30px;line-height:1;color:var(--green);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.bk-card .p small{display:block;font-family:var(--body);font-weight:600;font-size:11px;color:var(--muted);margin-top:3px}
.bk-card .badge{font-style:normal;font-size:10px;padding:2px 6px;margin-left:4px;vertical-align:2px;background:var(--amber);color:var(--amber-ink)}
.bk-card.col{flex-direction:column;align-items:flex-start;gap:6px;padding:12px}
.bk-card.col::before{position:absolute;top:10px;right:10px}
.bk-card.col .ic{width:100%;max-width:110px}
.bk-card.col .p{text-align:left;font-size:26px}
@media (max-width:560px){.bk-card{gap:10px;padding:12px}.bk-card .ic{width:54px}.bk-card .t b{font-size:16px}.bk-card .t small{font-size:13px}.bk-card .p{font-size:25px}.bk-cards.three{grid-template-columns:1fr 1fr}}

/* lists of things to add */
.rows{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden}
.rows .irow:first-child{border-top:0}
.igroup2{margin-top:16px}
.igroup2 h3{font-size:20px;margin:0 0 8px}
.bk-cats{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.bk-cats::-webkit-scrollbar{display:none}
.bk-cats .chip{cursor:pointer;font:inherit;font-size:14px;font-weight:600;white-space:nowrap;background:#fff;border-color:var(--line);color:var(--slate)}
.bk-cats .chip.on{background:var(--green);border-color:var(--green);color:#fff}
.bk-more{border:1px solid var(--line);border-radius:var(--radius-sm);margin-top:14px;background:var(--cloud)}
.bk-more[open]{background:#fff}
.bk-more>summary{padding:14px 16px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.bk-more>summary::-webkit-details-marker{display:none}
.bk-more>summary span{color:var(--green);font-size:14px;white-space:nowrap}
.bk-more>summary span::after{content:" +"}
.bk-more[open]>summary span::after{content:" –"}
.bk-more .bk-note{padding:0 16px}
.bk-more>.rows{border:0;border-top:1px solid var(--line);border-radius:0}
.bk-more .groups{padding:0 12px 12px}
.bk-more .groups .igroup2:first-child{margin-top:4px}
.irow{padding:10px 14px}
.irow .p{text-align:right}
.qty{grid-template-columns:40px 38px 40px;height:42px;border-color:var(--green);border-radius:9px}
.qty button{font-size:20px}
.qty output{background:var(--mint);color:var(--green-deep)}
.qty.zero{grid-template-columns:auto}
.qty.zero button[data-d="-1"],.qty.zero output{display:none}
.qty.zero button[data-d="1"]{padding:0 14px;background:#fff;font-size:15px}
.qty.zero button[data-d="1"]::after{content:" Add"}
/* item prices: on its own until the base fee is in the basket, then the lower rate */
.irow .p .was,.irow .p .rate{display:none}
.fee-on .irow .p .own{display:none}
.fee-on .irow .p .was{display:inline;color:var(--muted);font-weight:500;margin-right:6px}
.fee-on .irow .p .rate{display:inline}
.fee-on .irow .p .rate::after{content:"each";display:block;font-size:11px;font-weight:500;color:var(--muted)}
/* both messages share one grid cell, so swapping them never moves the list under a finger */
#rate-note{margin:0 0 12px;font-size:14px;display:grid}
#rate-note>span{grid-area:1/1}
#rate-note .on,.fee-on #rate-note .off{visibility:hidden}
.fee-on #rate-note .on{visibility:visible}
#road-note,#far-note{margin:0 0 4px;font-size:14px}
/* The 14-day tick box on the booking pages' last step and the top-up page (startWithinBox in src/booking.js) */
.bk-consent{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--cloud);padding:12px 14px;margin:12px 0 4px}
.bk-consent label{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:600;line-height:1.45;cursor:pointer}
.bk-consent input{width:22px;height:22px;flex-shrink:0;margin:1px 0 0;accent-color:var(--green)}
.bk-consent .fineprint{margin:6px 0 0 32px}
.bk-consent.invalid{border-color:var(--bad);background:#fef2f2}

/* review, and the back / continue bar */
.bk-review{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--cloud);margin:10px 0 18px}
.bk-review .rv{display:grid;grid-template-columns:58px 1fr auto;gap:10px;padding:10px 14px;border-top:1px solid var(--line);font-size:15px;align-items:baseline}
.bk-review .rv:first-child{border-top:0}
.bk-review .rv span{color:var(--muted);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.bk-review .rv b{font-weight:600}
.field.invalid input{border-color:var(--bad);background:#fef2f2}
.bk-nav{display:flex;align-items:center;gap:12px;margin-top:16px}
.bk-nav .bk-total{margin-left:auto;text-align:right;line-height:1.1}
.bk-nav .bk-total b{display:block;font-family:var(--display);font-size:28px;font-weight:900;color:var(--green);font-variant-numeric:tabular-nums;min-width:4ch}
.bk-nav .bk-total small{font-size:12px;color:var(--muted)}
.bk-nav .bk-total.none{visibility:hidden}
.bk-nav .btn-lg{min-width:170px;justify-content:center}
@media (min-width:960px){.bk-nav .bk-total{visibility:hidden}}
@media (max-width:959px){
  .bk-nav{position:fixed;left:0;right:0;bottom:0;z-index:35;margin:0;min-height:68px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(15,61,46,.1);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .bk-nav .btn{padding-left:14px;padding-right:14px}
  .bk-nav .btn-lg{min-width:0;flex:0 1 210px}
  #book-form[data-step="4"] .bk-total{display:none}
  #book-form[data-step="4"] #submit{flex:1;margin-left:auto}
  body.booking footer{padding-bottom:84px}
  body.booking .book-grid{padding-bottom:28px}
}
.sum-svc{margin:-6px 0 0;font-weight:700;color:var(--green)}
.steps.one{grid-template-columns:1fr}

/* /book/: what do you need? */
.bk-choices{display:grid;gap:16px}
@media (min-width:601px){.bk-choices{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.bk-choices{grid-template-columns:repeat(3,1fr);gap:20px}}
.bk-choice{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);transition:transform .15s,box-shadow .15s}
.bk-choice:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);text-decoration:none;border-color:var(--green)}
.bk-choice img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.bk-choice .body{display:grid;gap:4px;padding:16px 18px 18px;align-content:start}
.bk-choice b{font-family:var(--display);font-size:26px;line-height:1.05}
.bk-choice .body>span{color:var(--slate);font-size:15px}
.bk-choice .body>.from{font-weight:700;color:var(--green);margin-top:4px}
@media (max-width:600px){.bk-choice{flex-direction:row}.bk-choice img{width:108px;flex-shrink:0;aspect-ratio:auto;height:auto;align-self:stretch}.bk-choice .body{padding:12px 14px}.bk-choice b{font-size:22px}}

/* wait and load: every size says how long the truck waits */
.price-card .wait{font-size:13px;font-weight:700;color:var(--green-deep);background:var(--mint);border-radius:6px;padding:5px 8px;justify-self:start}
@media (min-width:1000px){.price-cards.four{grid-template-columns:repeat(4,1fr)}}
.bk-card .t .wait{font-weight:700;color:var(--green-deep);font-size:13px}
#wl-note{margin:0 0 10px;font-size:14px}

/* skip size in a town: the facts at a glance */
.specs{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.specs{grid-template-columns:1.2fr repeat(4,1fr)}}
.spec{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;display:grid;gap:2px;align-content:center}
.spec span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.spec b{font-family:var(--display);font-size:26px;font-weight:900;line-height:1.05;color:var(--green)}
.spec small{font-size:13px;color:var(--slate)}
.spec.sk-art{grid-column:1/-1;background:var(--mint);border-color:var(--mint-2);padding:6px 12px}
.spec.sk-art svg{max-height:120px;margin:0 auto}
@media (min-width:900px){.spec.sk-art{grid-column:auto}}

/* ---------------------------------------------------------------- symbols, not photos */
/* Heroes: drawn in CSS. Deep green, a soft glow, fine diagonal lines and the hazard stripe. */
.hero.photo{background:radial-gradient(900px 420px at 88% -10%,rgba(255,213,0,.14),transparent 62%),radial-gradient(700px 380px at -5% 110%,rgba(255,213,0,.08),transparent 60%),linear-gradient(135deg,#1A1E23 0%,#0F3D2E 55%,#0A2B20 100%);overflow:hidden}
.hero.photo::before{background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 24px)}
@media (max-width:899px){.hero.photo::before{background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 24px)}}
.hero-art{position:absolute;left:max(20px,calc(50% - 570px));bottom:5px;width:72px;pointer-events:none;opacity:.95}
.cta-band{background:radial-gradient(600px 300px at 90% 0%,rgba(255,213,0,.18),transparent 65%),linear-gradient(135deg,rgba(10,43,32,.94),rgba(10,43,32,.8)),url(/assets/img/photos/truck-yard.webp) center 60%/cover no-repeat var(--green-deep)}
.cta-band::before{background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 2px,transparent 2px 24px)}

/* Service cards and booking choices lead with a symbol. */
.scard .sym,.bk-choice .sym{display:grid;place-items:center;height:132px;background:radial-gradient(circle at 50% 120%,var(--mint-2),transparent 70%),linear-gradient(180deg,#f3f8f5,#fff);border-bottom:1px solid var(--line);color:var(--green);position:relative;overflow:hidden}
.scard .sym::before,.bk-choice .sym::before{content:"";position:absolute;width:104px;height:104px;border-radius:50%;background:#fff;box-shadow:0 8px 22px rgba(15,61,46,.12);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.scard .sym svg,.bk-choice .sym svg{position:relative;width:54px;height:54px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.bk-choice .sym svg[viewBox="0 0 100 60"]{width:84px;height:auto}
.bk-choice .sym svg[viewBox="0 0 240 130"]{width:100px;height:auto}
.scard:hover .sym::before,.bk-choice:hover .sym::before{transform:scale(1.12)}
.scard:hover .sym svg,.bk-choice:hover .sym svg{transform:translateY(-3px) scale(1.08) rotate(-3deg)}
.scard .body{padding-top:16px}
@media (max-width:600px){.bk-choice .sym{width:104px;height:auto;flex-shrink:0;border-bottom:0;border-right:1px solid var(--line)}.bk-choice .sym::before{width:76px;height:76px}.bk-choice .sym svg{width:38px;height:38px}.bk-choice .sym svg[viewBox="0 0 100 60"]{width:58px}.bk-choice .sym svg[viewBox="0 0 240 130"]{width:70px}}

/* The band on the home page: a truck that fills up. */
.band-art{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:28px 24px 18px;text-align:center}
.band-art svg{width:min(360px,100%);margin:0 auto}
.band-art p{margin:10px 0 0;color:#C5D3CA;font-weight:600}
.band-art .fill{transform-box:fill-box;transform-origin:bottom;animation:fillUp 7s ease-in-out infinite}
@keyframes fillUp{0%,8%{transform:scaleY(.12)}45%,60%{transform:scaleY(1)}100%{transform:scaleY(.12)}}

/* ---------------------------------------------------------------- movement */
.btn svg{transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.chip,.pchip,.area-grid a,.item,.skip-card,.price-card,.card,.info{transition:transform .18s,box-shadow .18s,border-color .18s,background .18s}
.chip:hover{transform:translateY(-1px)}
.price-card:hover,.skip-card:hover,.item:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.wa-float{animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.25),0 0 0 0 rgba(37,211,102,.5)}50%{box-shadow:0 8px 24px rgba(0,0,0,.25),0 0 0 12px rgba(37,211,102,0)}}
/* rise into place on scroll (only when the script has switched it on) */
.anim .rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.anim .rv.in{opacity:1;transform:none}
.anim .grid>.rv:nth-child(2),.anim .price-cards>.rv:nth-child(2),.anim .steps>.rv:nth-child(2),.anim .specs>.rv:nth-child(2),.anim .skip-cards>.rv:nth-child(2),.anim .bk-choices>.rv:nth-child(2){transition-delay:.07s}
.anim .grid>.rv:nth-child(3),.anim .price-cards>.rv:nth-child(3),.anim .steps>.rv:nth-child(3),.anim .specs>.rv:nth-child(3),.anim .skip-cards>.rv:nth-child(3),.anim .bk-choices>.rv:nth-child(3){transition-delay:.14s}
.anim .grid>.rv:nth-child(n+4),.anim .price-cards>.rv:nth-child(n+4),.anim .specs>.rv:nth-child(n+4),.anim .skip-cards>.rv:nth-child(n+4),.anim .bk-choices>.rv:nth-child(n+4){transition-delay:.21s}
/* the truck drives in along the stripe; load cards fill to their level */
.anim .hero-art{animation:driveIn 1.5s cubic-bezier(.2,.8,.2,1) both}
@keyframes driveIn{from{transform:translateX(-70vw)}to{transform:none}}
.anim .price-card.rv .fill{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .9s .25s cubic-bezier(.2,.8,.2,1)}
.anim .price-card.rv.in .fill{transform:scaleY(1)}
.anim .hero h1,.anim .hero .lead,.anim .hero .hero-ctas,.anim .hero .qp,.anim .hero .summary{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.anim .hero .lead{animation-delay:.08s}.anim .hero .hero-ctas{animation-delay:.16s}.anim .hero .qp,.anim .hero .summary{animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* booking: each step slides in, and a chosen card gives a small nod */
.bk-step:not([hidden]){animation:stepIn .28s ease both}
@keyframes stepIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.bk-card:has(input:checked)::before{animation:pop .25s ease}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.bk-progress li{transition:background .25s,color .25s,border-color .25s}
@media (prefers-reduced-motion:reduce){.band-art .fill,.wa-float,.bk-step:not([hidden]),.bk-card:has(input:checked)::before{animation:none}}

/* skip hire in a town: the full selection */
.skip-card .road{display:inline-block;margin-top:4px;padding:3px 8px;border-radius:99px;background:var(--mint);color:var(--green-deep);font-weight:700;font-size:12px}
.skip-card .road.no{background:#FFF3B0;color:#5C4A00}
.skip-card.featured .road{background:#fff}

/* ---------------------------------------------------------------- navigation */
.ni{width:24px;height:24px;flex-shrink:0}
/* desktop: three drop-downs that open on hover or click, grouped the way the services are sold */
/* the menus fill the header's height, so the pointer never crosses a gap on its way down to a drop-down */
.nav{align-self:stretch;align-items:stretch;gap:22px}
.nav>a{align-self:center}
.nav .menu{position:static;display:flex;align-items:stretch}
.nav .menu>button{border-radius:0;padding:0 2px}
.nav .menu>button:hover,.nav .menu.open>button,.nav .menu>button.active{color:var(--amber)}
.nav .menu>button::after{transition:transform .2s}
.nav .menu.open>button::after{transform:rotate(180deg)}
.nav .dropdown{top:100%;left:20px;right:20px;min-width:0;padding:22px 26px 14px;border-radius:0 0 var(--radius) var(--radius);border-top:3px solid var(--amber);gap:10px 30px;animation:dropIn .18s ease both}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nav .dropdown.mega{grid-template-columns:2fr 1fr 1fr 1fr}
.nav .dropdown.mega.areas{grid-template-columns:repeat(6,1fr)}
.nav .menu:has(.skips){position:relative}
.nav .dropdown.skips{left:-18px;right:auto;width:380px;grid-template-columns:1fr}
.nav .dropdown .col{display:grid;gap:2px;align-content:start}
.nav .dropdown.mega:not(.areas) .col:first-child{grid-template-columns:1fr 1fr;column-gap:14px}
.nav .dropdown.mega:not(.areas) .col:first-child .gt{grid-column:1/-1}
.nav .dropdown .gt{margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--line);font-family:var(--display);font-size:20px;font-weight:900;color:var(--ink);line-height:1.1}
.nav .dropdown .gt small{display:block;font-family:var(--body);font-size:12px;font-weight:600;color:var(--muted);margin-top:3px}
.nav .dropdown a{display:flex;align-items:center;gap:10px;padding:7px 10px;margin:0 -10px;border-radius:8px;font-weight:600;font-size:15px;border:0;color:var(--ink)}
.nav .dropdown a .ni{width:28px;height:28px;color:var(--green)}
.nav .dropdown a:hover{background:var(--mint);color:var(--green-deep)}
.nav .dropdown.areas a{font-weight:500;padding:5px 10px}
.nav .dropdown a.more{color:var(--green);font-weight:700;font-size:14px}
.nav .dropdown .sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.nav .dropdown .sizes a{display:grid;gap:0;margin:0;padding:9px 10px;border:1px solid var(--line);border-radius:9px;text-align:center}
.nav .dropdown .sizes a b{font-family:var(--display);font-size:19px;line-height:1.1}
.nav .dropdown .sizes a small{color:var(--green);font-weight:700;font-size:13px}
.nav .dropdown .sizes a:hover{border-color:var(--green)}
.nav .dropdown .foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 22px;border-top:1px solid var(--line);margin-top:8px;padding-top:10px}
.nav .dropdown .foot a{margin:0;padding:6px 0;color:var(--green);font-weight:700;gap:6px}
.nav .dropdown .foot a:hover{background:none;text-decoration:underline}
.nav .dropdown .foot svg{width:15px;height:15px}

/* phone: one clear button, then the services in the same four groups */
.menu-toggle{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:#fff;color:var(--ink)}
.menu-toggle .bars{width:18px;height:2px;background:var(--ink);position:relative;border-radius:2px;transition:background .2s}
.menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,top .25s}
.menu-toggle .bars::before{top:-6px}
.menu-toggle .bars::after{top:6px}
.menu-toggle[aria-expanded="true"] .bars{background:transparent}
.menu-toggle[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg)}
.mobile-nav{overscroll-behavior:contain;background:var(--cloud)}
.mobile-nav .container{display:grid;gap:10px;padding-top:14px;padding-bottom:28px}
.mobile-nav .cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mobile-nav details{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.mobile-nav details[open]{border-color:var(--mint-2);box-shadow:var(--shadow)}
.mobile-nav summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-family:var(--display);font-size:19px;font-weight:900;line-height:1.1}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav summary small{display:block;font-family:var(--body);font-size:13px;font-weight:600;color:var(--muted);margin-top:3px}
.mobile-nav summary::after{content:"";width:10px;height:10px;border-right:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(45deg);transition:transform .2s;flex-shrink:0;margin-right:4px}
.mobile-nav details[open] summary::after{transform:rotate(-135deg)}
.mobile-nav .mlinks{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:0 8px 10px}
.mobile-nav .mlinks a{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:9px;font-weight:600;font-size:15px;line-height:1.2;color:var(--ink);min-height:48px}
.mobile-nav .mlinks a:hover{background:var(--mint);text-decoration:none}
.mobile-nav .mlinks .ni{width:30px;height:30px;color:var(--green)}
.mobile-nav .mlinks.plain{grid-template-columns:1fr}
.mobile-nav .mlinks.plain a{justify-content:space-between;border-top:1px solid var(--line);border-radius:0}
.mobile-nav .mlinks.plain small{color:var(--muted);font-weight:500}
.mobile-nav .mrow{display:flex;flex-wrap:wrap;gap:8px;padding-top:6px}
.mobile-nav .mrow a{padding:9px 14px;border:1px solid var(--line);border-radius:99px;background:#fff;font-weight:600;font-size:14px;color:var(--ink)}
body.nav-open{overflow:hidden}
body.nav-open .mobile-bar,body.nav-open .wa-float{display:none}
.anim .mobile-nav.open{animation:navIn .22s ease both}
@keyframes navIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* the drawn symbols, a little larger now they carry more detail */
.scard .sym svg,.bk-choice .sym svg{width:62px;height:62px}
@media (max-width:600px){.bk-choice .sym svg{width:44px;height:44px}}

/* one real job photo on a service page */
.job-photo{padding:0;overflow:hidden;gap:0}
.job-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.job-photo figcaption{padding:12px 16px 14px;font-size:14px;font-weight:600;color:var(--slate)}
.job-photo figcaption small{display:block;font-weight:400;color:var(--muted);margin-top:2px}

/* grab lorry cards: half or full, soil, hardcore or general */
.grab-cards{display:grid;gap:16px}
@media (min-width:640px){.grab-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grab-cards{grid-template-columns:repeat(3,1fr)}}
.grab-card{display:grid;gap:6px;align-content:start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 20px;color:var(--ink);text-decoration:none;transition:border-color .12s,transform .12s,box-shadow .12s}
.grab-card:hover{text-decoration:none;border-color:var(--green);transform:translateY(-2px);box-shadow:var(--shadow)}
.grab-card .art{background:var(--mint);border-radius:var(--radius-sm);padding:10px 8px 4px}
.grab-card .art svg{width:100%;height:auto;display:block}
.grab-card .n{font-family:var(--display);font-weight:900;font-size:20px;line-height:1.1;margin-top:6px}
.grab-card .p{font-family:var(--display);font-weight:900;font-size:30px;line-height:1;color:var(--green)}
.grab-card .p small{display:block;font-family:var(--body);font-size:13px;font-weight:600;color:var(--muted);margin-top:4px}
.grab-card .fits{color:var(--slate);font-weight:600}
.bk-card .ic{width:150px;flex-shrink:0}
.bk-card .ic svg{width:100%;height:auto;display:block}
@media (max-width:480px){.bk-card .ic{width:120px}}
/* Phones: one-column cards with a picture (wait and load sizes, grab loads) put the
   radio, picture and price on the top row and the words underneath at full width,
   so nothing is squeezed or pushed off the side on a 320px screen. */
@media (max-width:480px){.bk-cards:not(.two):not(.three)>.bk-card{display:grid;grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"r ic p" "t t t";align-items:center;gap:8px 10px}.bk-cards:not(.two):not(.three)>.bk-card::before{grid-area:r}.bk-cards:not(.two):not(.three)>.bk-card .ic{grid-area:ic;width:100%;max-width:150px}.bk-cards:not(.two):not(.three)>.bk-card .t{grid-area:t}.bk-cards:not(.two):not(.three)>.bk-card .p{grid-area:p}}

/* trucks that move: wheels turn, the tipper tips, the grab swings and drops */
.wheel,.bed,.gate,.ram,.grab .arm,.grab .bucket,.grab .jaw,.grab .load{transform-box:view-box}
.band-art .fill{animation:fillTip 10s ease-in-out infinite}
.band-art .bed{animation:tip 10s ease-in-out infinite}
.band-art .ram{animation:ram 10s ease-in-out infinite}
.band-art .wheel{animation:roll 10s linear infinite}
.band-art .gate{animation:gate 10s ease-in-out infinite}
@keyframes gate{0%,62%{transform:none}70%,80%{transform:rotate(32deg)}90%,100%{transform:none}}
@keyframes fillTip{0%,6%{transform:translateX(0) scaleY(.12);opacity:1}40%,66%{transform:translateX(0) scaleY(1);opacity:1}78%{transform:translateX(-44px) scaleY(.9);opacity:0}79%,96%{transform:translateX(0) scaleY(.04);opacity:0}100%{transform:translateX(0) scaleY(.12);opacity:1}}
@keyframes tip{0%,60%{transform:none}70%,80%{transform:rotate(-25deg)}92%,100%{transform:none}}
@keyframes ram{0%,60%{transform:none}70%,80%{transform:rotate(-11.1deg) scaleY(9.1)}92%,100%{transform:none}}
@keyframes roll{0%,44%{transform:none}58%{transform:rotate(-720deg)}100%{transform:rotate(-720deg)}}
.anim .grab .arm{animation:grabSwing 7s ease-in-out infinite}
.anim .grab .bucket{animation:grabLevel 7s ease-in-out infinite}
.anim .grab .jaw-l{animation:jawL 7s ease-in-out infinite}
.anim .grab .jaw-r{animation:jawR 7s ease-in-out infinite}
.anim .grab .chunk{animation:chunkDrop 7s ease-in infinite;opacity:0}
.anim .grab .load{animation:settle 7s ease-out infinite;transform-origin:bottom}
.anim .grab .wheel{animation:none}
@keyframes grabSwing{0%,14%{transform:rotate(-180.8deg)}34%,62%{transform:none}84%,100%{transform:rotate(-180.8deg)}}
@keyframes grabLevel{0%,14%{transform:rotate(180.8deg)}34%,62%{transform:none}84%,100%{transform:rotate(180.8deg)}}
@keyframes jawL{0%,6%{transform:rotate(-30deg)}14%,40%{transform:none}48%,80%{transform:rotate(-30deg)}100%{transform:rotate(-30deg)}}
@keyframes jawR{0%,6%{transform:rotate(30deg)}14%,40%{transform:none}48%,80%{transform:rotate(30deg)}100%{transform:rotate(30deg)}}
@keyframes chunkDrop{0%,46%{opacity:0;transform:none}48%{opacity:1;transform:none}60%{opacity:1;transform:translateY(var(--drop,20px))}62%,100%{opacity:0;transform:translateY(var(--drop,20px))}}
@keyframes settle{0%,58%{transform:none}63%{transform:scaleY(1.05)}70%,100%{transform:none}}
@keyframes spin{from{transform:rotate(-540deg)}to{transform:none}}
.anim .hero-art .wheel{animation:spin 1.5s cubic-bezier(.2,.8,.2,1) both}
.anim .price-card.rv .truck{opacity:0;transform:translateX(-22px);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s}
.anim .price-card.rv.in .truck{opacity:1;transform:none}
.anim .price-card.rv.in .wheel{animation:spin .9s cubic-bezier(.2,.8,.2,1) both}
.bk-card.has-art .grab .arm,.bk-card.has-art .grab .bucket,.bk-card.has-art .grab .jaw,.bk-card.has-art .grab .chunk,.bk-card.has-art .grab .load{animation-play-state:paused}
.bk-card.has-art:hover .grab .arm,.bk-card.has-art:hover .grab .bucket,.bk-card.has-art:hover .grab .jaw,.bk-card.has-art:hover .grab .chunk,.bk-card.has-art:hover .grab .load,.bk-card.has-art:has(input:checked) .grab .arm,.bk-card.has-art:has(input:checked) .grab .bucket,.bk-card.has-art:has(input:checked) .grab .jaw,.bk-card.has-art:has(input:checked) .grab .chunk,.bk-card.has-art:has(input:checked) .grab .load{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.band-art .fill,.band-art .bed,.band-art .ram,.band-art .gate,.band-art .wheel,.grab .arm,.grab .bucket,.grab .jaw,.grab .chunk,.grab .load,.wheel{animation:none!important}.band-art .fill{transform:none!important;opacity:1!important}.grab .chunk{opacity:0}}

@media (min-width:900px){.hero-art{width:104px}}

/* quote form (quoteForm in src/lib/html.js, src/js/quote-form.js): sections, tap chips, one question at a glance */
.qf{gap:14px}
.qf [hidden]{display:none!important}
.qf fieldset{border:0;margin:0;padding:0;min-width:0}
.qf legend{padding:0;font-weight:700;font-size:15px;margin:0 0 8px;color:var(--ink)}
.qf-sec{display:grid;gap:14px;padding-top:14px;border-top:1px solid var(--line)}
.qf-h{display:flex;align-items:center;gap:10px;margin:0;font-size:18px}
.qf-h span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;font-family:var(--body);font-size:14px;font-weight:700;flex-shrink:0}
.qf-progress{padding:12px;border-radius:var(--radius-sm);background:var(--mint)}
.qf-step-status{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--ink)}
.qf-progress ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.qf-progress li{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);line-height:1.3;min-width:0}
.qf-progress li>span{display:inline-grid;place-items:center;width:24px;height:24px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;background:#fff}
.qf-progress li[aria-current=step]{color:var(--ink);font-weight:700}
.qf-progress li[aria-current=step]>span,.qf-progress li.qf-step-done>span{background:var(--green);border-color:var(--green);color:#fff}
.qf-step-nav{display:flex;justify-content:space-between;gap:12px;padding-top:4px}
.qf-step-nav [data-qf-next]{margin-left:auto;flex:1}
.qf-stepped .qf-h{scroll-margin-top:104px}
.qf-stepped .qf-h:focus{outline:none}
@media (max-width:400px){.qf-progress li{flex-direction:column;align-items:flex-start;gap:5px;font-size:11px}.qf-step-nav .btn{padding:13px 18px}}
.qf-sets,.qf-set{display:grid;gap:14px}
.qf-sets[aria-busy]{min-height:48px;background:linear-gradient(90deg,var(--cloud),var(--mint),var(--cloud));border-radius:var(--radius-sm)}
.qf-intro{margin:0;font-size:14px;color:var(--slate)}
.qf-hint{margin:-4px 0 8px;font-size:13px;color:var(--muted)}
.qf-req{color:var(--bad)}
.qf-chips{display:flex;flex-wrap:wrap;gap:8px}
.qf-chip{position:relative;display:inline-flex;cursor:pointer}
.qf-chip input{position:absolute;opacity:0;width:1px;height:1px}
.qf-chip span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:9px 14px;border:1px solid #cbd5e1;border-radius:99px;background:#fff;color:var(--ink);font-size:15px;font-weight:600;line-height:1.2;transition:background .12s,border-color .12s}
.qf-chip:hover span{border-color:var(--green)}
.qf-chip input:checked+span{background:var(--green);border-color:var(--green);color:#fff}
.qf-chip input[type=checkbox]:checked+span::before{content:"✓";font-weight:800}
.qf-chip input:focus-visible+span{outline:3px solid var(--green);outline-offset:2px;box-shadow:var(--focus-halo)}
.qf-chip input:disabled+span{opacity:.5;cursor:not-allowed}
.qf-js .qf-when:not(.qf-on){display:none}
/* The address of the job: line 1, line 2, town and postcode (qfAddress in html.js, and the booking page's last step). */
.qf-addr{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
.qf-addr>legend{padding:0;margin:0 0 8px;font-weight:700;font-size:15px;color:var(--ink)}
.qf-prompts{background:var(--mint);border-radius:var(--radius-sm);padding:12px 14px;font-size:14px}
.qf-prompts ul{margin:6px 0 0;padding-left:1.1em}
.qf-prompts li{margin:2px 0}
.qf-error{margin:0;padding:12px 14px;border-left:5px solid var(--bad);background:#fef2f2;color:var(--bad);font-weight:700;font-size:15px;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
/* Sent back by book-submit.php with no JavaScript: the page lands on #quote-err-<code>, which shows itself. */
.qf-nojs-err{display:none;margin:0;padding:12px 14px;border-left:5px solid var(--bad);background:#fef2f2;color:var(--bad);font-weight:700;font-size:15px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;scroll-margin-top:96px}
.qf-nojs-err:target{display:block}
.qf-js .qf-nojs-err{display:none!important}
.qf .qf-bad{outline:2px solid var(--bad);outline-offset:6px;border-radius:var(--radius-sm)}
.qf .photo-pick__hint{margin-top:2px}
@media (max-width:560px){.qf-chip span{font-size:15px;padding:9px 12px}.qf-h{font-size:17px}}

/* "Just a few items? Build your own collection and pay online": on the quoted clearances' pages and quote forms (FEW_ITEMS in src/lib/html.js) */
.qf-few{margin:0;padding:10px 14px;border-radius:var(--radius-sm);background:var(--mint);font-size:15px;font-weight:600;line-height:1.4;color:var(--ink)}
.qf-few a{font-weight:700;padding:2px 0}
.qprice .card ul{margin:8px 0 0;padding-left:1.1em}
.qprice .card li{margin:3px 0}
.qprice .card .btn{margin-top:12px}
/* "Get a price" (#quote) lands with the form's heading clear of the sticky header */
#quote{scroll-margin-top:92px}

/* Narrow desktops and landscape tablets (1000-1239px): the full header did not fit,
   cutting off "Price & book online" and making the page scroll sideways.
   Tighter spacing, a smaller logo, and the phone button shows its icon only. */
@media (min-width:1000px) and (max-width:1239.98px){
  .header>.container{gap:16px}
  .header .logo{width:170px}
  .nav{gap:14px}
  .header-cta{gap:8px}
  .header-cta .btn-ghost{font-size:0;gap:0;padding:12px}
  .header-cta .btn-ghost svg{width:20px;height:20px}
}

/* Item picker on narrow phones: once an item is added, its −/+ stepper squeezed
   the item name into a one-word-per-line column. Below 480px the name takes the
   full width and the price and stepper sit on the line under it. */
@media (max-width:479.98px){
  .irow{grid-template-columns:1fr auto;row-gap:8px}
  .irow>span:first-child{grid-column:1/-1}
  .irow .p{text-align:left}
  .irow .p small{text-align:left}
  .irow .qty,.irow .bk-add,.irow>button{justify-self:end}
}

/* a long button label wraps on a narrow phone instead of running off the screen */
@media (max-width:599.98px){
  .btn{white-space:normal;max-width:100%;text-align:center}
}
/* the smallest phones (320px): logo and Menu button side by side without poking off the edge */
@media (max-width:359.98px){
  .header>.container{gap:12px;padding-left:16px;padding-right:16px}
  .header .logo{width:150px}
  .menu-toggle{padding-left:12px;padding-right:12px}
}
/* keeps a table's hidden screen-reader labels inside its scroll box, so a wide table never widens the page */
.table-wrap{position:relative}
.review-strip h2 .stars{color:var(--amber);letter-spacing:2px;margin-right:6px}
/* home page reviews: the rating under the heading; on phones three cards, then "Show 3 more" (only once the script has run, so nothing is hidden without JavaScript) */
.rating-line .stars{color:var(--amber);letter-spacing:2px;margin-right:4px}
.more-reviews{margin-top:14px}
@media (min-width:701px){.more-reviews{display:none}}
@media (max-width:700px){.home-reviews.clip .review:nth-child(n+4){display:none}}

/* ---------------------------------------------------------------- site search (src/js/search.js) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.srch{position:relative;margin:0}
.srch-f{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--line);border-radius:12px;padding:0 4px 0 12px;min-height:50px}
.srch-f:focus-within{border-color:var(--green)}
.srch-f>svg{width:20px;height:20px;flex-shrink:0;color:var(--muted)}
.srch-f input{flex:1 1 auto;width:0;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);padding:12px 0;outline:0;-webkit-appearance:none;appearance:none}
.srch-f input::-webkit-search-cancel-button{display:none}
.srch-f input::placeholder{color:#6B7A72}
.srch-go{flex-shrink:0;border:0;border-radius:9px;background:var(--green);color:#fff;font:inherit;font-weight:700;font-size:15px;padding:9px 14px;cursor:pointer}
.srch-go:hover{background:var(--green-deep)}
.srch-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;display:grid;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;max-height:min(420px,60vh);overflow:auto;text-align:left}
.srch-list[hidden],.nsrch-pop[hidden]{display:none}
.srch-list a{display:block;padding:9px 10px;border-radius:8px;color:var(--ink);line-height:1.25;text-decoration:none;white-space:normal}
.srch-list a b{display:block;font-size:15px;font-weight:700}
.srch-list a small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.srch-list a:hover,.srch-list a.on{background:var(--mint);color:var(--green-deep)}
.srch-list a.on{box-shadow:inset 3px 0 0 var(--green)}
.srch-none{margin:0;padding:10px;font-size:14px;color:var(--muted)}
/* home page: under the two main buttons */
.hero-srch{max-width:540px;margin:0 0 18px}
.hero-srch .srch-f{border-color:transparent}
@media (max-width:599.98px){.hero-srch .srch-go{padding:9px 12px}}
/* phone menu: the suggestions sit in the menu, not over it */
.msrch .srch-list{position:static;margin-top:6px;box-shadow:none;max-height:none}
/* desktop: a search button at the end of the menu, opening the box under the header */
.nav .nsrch{display:flex;align-items:center}
.nav .nsrch-btn{display:inline-flex;align-items:center;padding:8px 2px;border-bottom:2px solid transparent}
.nav .nsrch-btn svg{width:20px;height:20px}
.nav .nsrch-btn[aria-expanded="true"]{color:var(--amber);border-color:var(--amber)}
.nsrch-pop{position:absolute;top:100%;right:20px;width:min(460px,calc(100vw - 40px));background:#fff;border-top:3px solid var(--amber);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-lg);padding:14px;white-space:normal;font-size:15px;font-weight:400;z-index:55}
.nav .nsrch-pop a{color:var(--ink);border:0;padding:9px 10px}
.nav .nsrch-pop a:hover,.nav .nsrch-pop a.on{color:var(--green-deep)}
/* /search/ */
.page-srch{max-width:560px;margin-top:18px}
.srch-results,.srch-top{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:8px}
.srch-results a{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.srch-results a:hover{border-color:var(--green);text-decoration:none}
.srch-results b{display:block}
.srch-results small{color:var(--muted)}
.srch-top{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.srch-top a{display:block;padding:10px 14px;border:1px solid var(--line);border-radius:99px;background:#fff;font-weight:600}

/* ---------------------------------------------------------------- customer account (site.js accountUrl) */
.hdr-login{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:700;font-size:14px;padding:8px 4px;white-space:nowrap}
.hdr-login svg{width:20px;height:20px}
.hdr-login:hover{color:var(--amber);text-decoration:none}
.m-login{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0;border-radius:10px;border:1px solid rgba(255,255,255,.35);color:#fff}
.m-login svg{width:22px;height:22px}
.m-login+.menu-toggle{margin-left:0}
@media (min-width:1000px){.m-login{display:none}}
@media (min-width:1000px) and (max-width:1239.98px){.hdr-login span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.mobile-nav .macct{display:flex;flex-wrap:wrap;gap:8px}
.mobile-nav .macct a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:99px;background:#fff;font-weight:700;font-size:15px;color:var(--green)}
.mobile-nav .macct svg{width:18px;height:18px}
@media (max-width:999.98px){.header>.container{gap:10px}}
/* the phone header's "Log in" icon only where it fits beside the logo and Menu; on the smallest phones it is in the menu */
@media (max-width:419.98px){.m-login{width:38px;height:38px}.m-login svg{width:20px;height:20px}}
@media (max-width:369.98px){.m-login{display:none}.m-login+.menu-toggle{margin-left:auto}}
body.srch-open .wa-float{display:none}
/* Room in the desktop header for the search button (and "Log in" when accounts are on).
   The header was already full, so the spacing tightens a little. With "Log in" the
   phone button shows its icon only (the number is in the top bar right above it),
   and on narrow desktops (1000-1239px) it gives way to "Log in" altogether. */
.nav .nsrch,.header-cta>*{flex-shrink:0}
.nav .nsrch-btn svg,.hdr-login svg{flex-shrink:0}
@media (min-width:1240px){.header>.container{gap:20px}.nav{gap:17px}}
@media (min-width:1000px) and (max-width:1239.98px){.header>.container{gap:12px}.header .logo{width:160px}.nav{gap:12px}}
@media (min-width:1240px){.header.has-login .header-cta .btn-ghost{font-size:0;gap:0;padding:12px}.header.has-login .header-cta .btn-ghost svg{width:20px;height:20px}}
@media (min-width:1000px) and (max-width:1239.98px){.header.has-login .header-cta .btn-ghost{display:none}}
.faq details[id]{scroll-margin-top:92px}
main .srch-results li a:not(.btn),main .srch-top li a:not(.btn){text-decoration:none}