/*
Theme Name: Movenzo Final
Description: Waste removal business theme with hero, services page, SEO content and a free quote form that emails the site owner.
Version: 12.35
Text Domain: movenzo
*/

:root{color-scheme:dark;--bg:#0e1712;--surface:#16231b;--ink:#eaf2ea;--muted:#a8b9ad;--green:#3f9d68;--deep:#0a2a19;--lime:#b7e35a;--line:#27382d;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* v12.25: one look for every visitor. The dark palette is always used, whatever the phone/computer light or dark setting is. */
:root[data-theme="dark"]{--bg:#0e1712;--surface:#16231b;--ink:#eaf2ea;--muted:#a8b9ad;--green:#3f9d68;--deep:#0a2a19;--line:#27382d}
html{--hh:84px;scroll-padding-top:calc(var(--hh) + env(safe-area-inset-top,0px));scroll-behavior:smooth}.admin-bar{--adm:32px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 "Source Sans 3",system-ui,sans-serif}
h1,h2,h3{font-family:"Bricolage Grotesque","Segoe UI",sans-serif;line-height:1.12;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5.5vw,4rem);font-weight:800}h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}h3{font-size:1.25rem}
p{margin:0 0 1em;max-width:70ch}a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font:800 1.4rem "Bricolage Grotesque",sans-serif;color:var(--green);text-decoration:none}.logo small{display:block;font:600 .68rem "Source Sans 3";color:var(--muted);letter-spacing:.04em;margin-top:-4px}
nav{display:flex;gap:6px;align-items:center}
nav a{padding:8px 14px;text-decoration:none;font-weight:600;border-radius:8px;position:relative;transition:background .2s,color .2s}
nav a:hover,nav a.on{background:var(--line)}
nav a.cta{background:var(--green);color:#fff}nav a.cta:hover{background:var(--deep);transform:translateY(-1px)}
.btn{display:inline-block;padding:14px 26px;border-radius:10px;font-weight:600;text-decoration:none;border:2px solid transparent;cursor:pointer;font:600 1rem "Source Sans 3",sans-serif;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.22)}.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.btn.p{background:var(--lime);color:#14231a}.btn.g{border-color:#fff;color:#fff}.btn.g:hover{background:#fff;color:var(--deep)}
.hero{position:relative;color:#fff;min-height:620px;display:flex;align-items:center;overflow:hidden;background:var(--deep)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 2.5s ease}.hero:hover img{transform:scale(1.06)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,38,22,.92) 0%,rgba(6,38,22,.7) 45%,rgba(6,38,22,.1) 100%)}
.hero .wrap{width:100%;position:relative;z-index:1;padding-top:60px;padding-bottom:60px}.hero p{font-size:1.2rem;max-width:560px}
.hero .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.ticks{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;font-weight:600;font-size:.98rem}.ticks span::before{content:"✓ ";color:var(--lime)}
section{padding:72px 0}.alt{background:var(--surface);border-block:1px solid var(--line)}
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;transition:transform .25s,box-shadow .25s,border-color .25s}
.alt .card{background:var(--bg)}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(10,50,28,.16);border-color:var(--green)}
.card .ic{font-size:2rem;display:block;margin-bottom:8px}.card a{color:var(--green);font-weight:600}
.split{display:grid;gap:44px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}.steps li{counter-increment:s;padding:0 0 18px 54px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800;transition:transform .2s}.steps li:hover::before{transform:scale(1.15)}
.stats{background:var(--deep);color:#fff;padding:44px 0}.stats .grid{text-align:center}.stats b{display:block;font:800 2.4rem "Bricolage Grotesque",sans-serif;color:var(--lime)}
details{border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-bottom:10px;background:var(--surface);transition:border-color .2s}details:hover{border-color:var(--green)}
summary{font-weight:600;cursor:pointer}details p{margin:10px 0 0}
form{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;display:grid;gap:14px;grid-template-columns:1fr 1fr;box-shadow:0 12px 34px rgba(10,50,28,.1)}
form .f{grid-column:1/-1}label{font-weight:600;font-size:.92rem;display:block;margin-bottom:4px}
input,select,textarea{width:100%;padding:12px;border:1.5px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:inherit;transition:border-color .2s,box-shadow .2s}
input:hover,select:hover,textarea:hover{border-color:var(--green)}input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(63,157,104,.25)}
form .btn{background:var(--green);color:#fff;width:100%}
#msg{grid-column:1/-1;font-weight:600;color:var(--green);margin:0}
.svc{display:grid;gap:36px;grid-template-columns:90px 1fr;padding:34px 0;border-bottom:1px solid var(--line)}.svc .ic{font-size:3.4rem}
.svc ul{padding-left:20px;margin:0 0 1em;color:var(--muted)}
footer{background:var(--deep);color:#cfe2d2;padding:48px 0 24px;font-size:.95rem}footer a{text-decoration:none;transition:color .2s}footer a:hover{color:var(--lime)}
footer .grid{margin-bottom:24px}footer h3{color:#fff;font-size:1.05rem}
.admin-bar header.nav{top:32px}@media(max-width:782px){.admin-bar header.nav{top:46px}}.skip{position:absolute;left:-9999px}
.pagehead{background:var(--deep);color:#fff;padding:64px 0 52px}.pagehead p{color:#cfe2d2;font-size:1.15rem}
@media(max-width:760px){nav a:not(.cta),nav .dd{display:none}form{grid-template-columns:1fr}.svc{grid-template-columns:1fr;gap:6px}.hero{min-height:560px}.hero::after{background:rgba(6,38,22,.8)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.band{background:var(--deep);color:#fff}.band p{color:#cfe2d2}.band .card{color:var(--ink)}.band .card p{color:var(--muted)}.band .card:hover{border-color:var(--lime)}
.dd{position:relative}.dd>a{display:block}
.dd .sub{position:absolute;top:100%;left:0;min-width:180px;padding:6px;margin-top:2px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 30px rgba(10,50,28,.18);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:30}
.dd .sub a{display:block;white-space:nowrap}
.dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:6px}
.dd:hover .sub,.dd:focus-within .sub{opacity:1;visibility:visible;transform:none}
.chips{display:flex;gap:10px;flex-wrap:wrap}.chips a{padding:8px 18px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);font-weight:600;text-decoration:none;transition:border-color .2s,background .2s}.chips a:hover{border-color:var(--green);background:var(--line)}
[id]{scroll-margin-top:0}.tl{padding-left:20px;margin:0;color:var(--muted)}
.areabox{display:block;text-decoration:none;color:var(--ink)}.areabox p{color:var(--muted)}.areabox .more{color:var(--green);font-weight:600}
.areabox.cur{border-color:var(--green);box-shadow:0 0 0 2px var(--green) inset}
.areabox:hover{border-color:var(--green)}

/* ---- header alignment + anchor scrolling ---- */
.nav .wrap{gap:16px}.logo{flex:none;line-height:1.1}
nav{flex:none;white-space:nowrap}nav a,.dd>a{display:inline-flex;align-items:center;gap:4px;line-height:1.2}
.dd .sub{left:auto;right:0}.dd .sub a{display:block}
nav a.on{background:var(--line);color:var(--green)}nav a.cta.on{background:var(--green);color:#fff}
@media(max-width:760px){
  .nav .wrap{height:auto;flex-wrap:wrap;padding-top:8px;padding-bottom:6px;gap:4px}
  nav{width:100%;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  nav::-webkit-scrollbar{display:none}
  nav a:not(.cta),nav .dd{display:inline-flex;scroll-snap-align:start;flex:none}
  nav a{padding:7px 12px}.dd .sub{display:none}
}
/* ---- city area boxes ---- */
.arealist{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));margin:22px 0}
.areatile{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s}
.alt .areatile{background:var(--bg)}
.areatile .pin{font-size:1.25rem;flex:none}
.areatile small{display:block;font-weight:400;color:var(--muted);font-size:.8rem;line-height:1.2}
.areatile:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 12px 24px rgba(10,50,28,.15)}
.allareas{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:18px 22px;border-radius:12px;border:1.5px dashed var(--green);margin-top:8px}
.allareas p{margin:0;flex:1 1 300px}

/* hero content further left */
.hero .wrap{max-width:none;margin:0;padding-left:clamp(20px,4vw,64px);padding-right:20px}
.btn.o{background:transparent;border-color:var(--green);color:var(--green)}.btn.o:hover{background:var(--green);color:#fff}
.svc .btn{margin:0 6px 6px 0}

/* ================= LOAD + HERO ANIMATIONS (v1.7) ================= */
@keyframes kb{from{transform:scale(1.18) translate(1.5%,1%)}to{transform:scale(1.02) translate(0,0)}}
@keyframes lineUp{from{transform:translateY(110%) rotate(3deg)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.15)}100%{transform:translate(0,0) scale(1)}}
@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:.8}100%{transform:translateY(-640px) rotate(360deg);opacity:0}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(183,227,90,.65)}70%,100%{box-shadow:0 0 0 18px rgba(183,227,90,0)}}
@keyframes shine{0%{left:-70%}55%,100%{left:130%}}
@keyframes cue{0%{transform:translateY(0);opacity:1}100%{transform:translateY(14px);opacity:0}}
@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes grad{0%{background-position:0 50%}100%{background-position:200% 50%}}

/* loader curtain */
.loader{position:fixed;inset:0;z-index:999;background:var(--deep);display:grid;place-items:center;color:#fff;transition:transform .9s cubic-bezier(.77,0,.18,1) .1s,visibility 0s 1s}
.loader .lg{font:800 2.4rem "Bricolage Grotesque",sans-serif;color:var(--lime);text-align:center;animation:rise .6s ease both}
.loader small{display:block;font:600 .75rem "Source Sans 3";color:#cfe2d2;letter-spacing:.3em;margin-top:2px}
.loader .bar{width:180px;height:3px;background:rgba(255,255,255,.15);border-radius:3px;margin:18px auto 0;overflow:hidden}
.loader .bar i{display:block;height:100%;background:var(--lime);transform-origin:left;animation:load 1s ease-out forwards}
html.loaded .loader{transform:translateY(-100%);visibility:hidden}
html:not(.js) .loader{display:none}

/* header / top bar entrance */
.js header.nav{opacity:0}
.js.loaded header.nav{animation:drop .7s ease .65s both}

/* hero */
.hero-bg{position:absolute;inset:-6% 0;will-change:transform}
.hero img{animation:kb 9s ease-out both}.hero:hover img{transform:none}
.hero::after{z-index:0}.hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;animation:drift 12s ease-in-out infinite}
.glow.g1{width:380px;height:380px;background:#4fbf7a;left:-80px;bottom:-120px}
.glow.g2{width:300px;height:300px;background:var(--lime);right:20%;top:-90px;animation-delay:-5s;opacity:.22}
.hero-fx .pt{position:absolute;bottom:-20px;width:10px;height:10px;border-radius:50% 0 50% 0;background:var(--lime);opacity:0;animation:floatUp linear infinite}
.eyebrow{display:inline-block;padding:6px 16px;margin-bottom:18px;border:1px solid rgba(183,227,90,.5);border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(6px);font-weight:600;font-size:.9rem;color:var(--lime)}
.hero h1{font-size:clamp(2.4rem,6.2vw,4.6rem)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .ln>span{display:block}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--lime),#fff,var(--lime),#7fd89c,var(--lime));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:grad 5s linear infinite}
.js .hero .eyebrow,.js .hero .h-rise,.js .hero .ticks span{opacity:0}
.js .hero h1 .ln>span{transform:translateY(110%)}
.js.loaded .hero .eyebrow{animation:rise .7s ease 1.0s both}
.js.loaded .hero h1 .ln:nth-child(1)>span{animation:lineUp .9s cubic-bezier(.2,.8,.2,1) 1.15s both}
.js.loaded .hero h1 .ln:nth-child(2)>span{animation:lineUp .9s cubic-bezier(.2,.8,.2,1) 1.35s both}
.js.loaded .hero p.h-rise{animation:rise .8s ease 1.6s both}
.js.loaded .hero .row.h-rise{animation:rise .8s ease 1.8s both}
.js.loaded .hero .ticks span{animation:rise .6s ease both}
.js.loaded .hero .ticks span:nth-child(1){animation-delay:2.0s}.js.loaded .hero .ticks span:nth-child(2){animation-delay:2.12s}
.js.loaded .hero .ticks span:nth-child(3){animation-delay:2.24s}.js.loaded .hero .ticks span:nth-child(4){animation-delay:2.36s}
.btn.pulse{position:relative;overflow:hidden;animation:pulseRing 2.2s ease-out 3s infinite}
.btn.pulse::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:shine 3.4s ease-in-out 3s infinite}
.hero .btn.g{backdrop-filter:blur(4px)}
.scrollcue{position:absolute;left:50%;bottom:22px;z-index:2;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(255,255,255,.7);border-radius:14px}
.scrollcue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--lime);animation:cue 1.6s ease-in infinite}
.js .scrollcue{opacity:0;transition:opacity .6s 2.6s}.js.loaded .scrollcue{opacity:1}

/* scroll reveal */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .card.rv.in:hover{transition-delay:0s}

@media(max-width:760px){.scrollcue{display:none}.hero-bg{inset:0}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js header.nav,.js .hero .eyebrow,.js .hero .h-rise,.js .hero .ticks span,.js .rv,.js .scrollcue{opacity:1!important;transform:none!important}
  .js .hero h1 .ln>span{transform:none!important}.loader{display:none}
}

/* ---- footer (v1.8) ---- */
footer.ft{background:var(--deep);color:#cfe2d2;padding:44px 0 22px;font-size:.96rem}
footer.ft a{color:#cfe2d2;text-decoration:none;transition:color .2s}footer.ft a:hover{color:var(--lime)}
.ft-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:0 0 40px;padding:30px 34px;border-radius:18px;background:linear-gradient(135deg,var(--green),#0b4a29);border:1px solid rgba(183,227,90,.35);box-shadow:0 18px 40px rgba(0,0,0,.25)}
.ft-cta p{margin:0;color:#e6f2e6}.ft-cta .ft-big{font:800 1.6rem "Bricolage Grotesque",sans-serif;color:#fff;margin-bottom:4px}
.ft-cta .btn.p{color:#14231a}
.ft-grid{display:grid;gap:34px;grid-template-columns:1.6fr 1fr 1fr 1fr;padding-bottom:34px}
.ft-brand .logo{color:#fff}.ft-brand .logo small{color:var(--lime)}
.ft-brand p{color:#b5cdb9;margin:12px 0 14px;max-width:360px}
footer.ft h3{color:#fff;font-size:1.05rem;margin:0 0 12px}
.ft-links,.ft-contact{list-style:none;margin:0;padding:0}
.ft-links li{margin:0 0 8px}.ft-links a{display:inline-block}.ft-links a:hover{transform:translateX(4px)}
.ft-contact li{display:flex;gap:10px;margin:0 0 8px;align-items:center}
.ft-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:.88rem;color:#9fbba4}
@media(max-width:900px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft-grid{grid-template-columns:1fr}.ft-cta{padding:24px}.ft-bottom{flex-direction:column}}

/* ---- photos ---- */
img.pic{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px;margin:0 0 22px;box-shadow:0 12px 30px rgba(10,50,28,.15)}
.work{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:18px}
.work img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;transition:transform .3s,box-shadow .3s}
.work img:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(10,50,28,.2)}

/* ---- city page hero (v1.9) ---- */
.pagehead.city{position:relative;overflow:hidden;padding:56px 0 0;background:radial-gradient(800px 420px at 85% 10%,rgba(183,227,90,.16),transparent 60%),var(--deep)}
.ph-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:end}
.ph-text{padding-bottom:56px}.ph-text .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.pagehead.city h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.ph-art{margin:0;position:relative;align-self:end}
.ph-art svg{display:block;width:100%;height:auto;max-height:420px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.25));animation:phfloat 7s ease-in-out infinite}
.ph-art .ph-photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px 18px 0 0;border:1px solid rgba(183,227,90,.4);border-bottom:0}
.ph-art figcaption{position:absolute;left:0;bottom:12px;padding:6px 14px;border-radius:999px;background:rgba(9,61,34,.85);border:1px solid rgba(183,227,90,.45);color:var(--lime);font-weight:600;font-size:.85rem;backdrop-filter:blur(6px)}
@keyframes phfloat{50%{transform:translateY(-6px)}}
@media(max-width:860px){.ph-grid{grid-template-columns:1fr}.ph-text{padding-bottom:12px}.ph-art{max-width:460px;margin:0 auto}}
@media(prefers-reduced-motion:reduce){.ph-art svg{animation:none}}

/* ---- upgraded city icons ---- */
.ic.mk{display:grid;place-items:center;width:62px;height:62px;border-radius:16px;margin-bottom:14px;background:linear-gradient(135deg,var(--green),#0b4a29);color:var(--lime);box-shadow:0 8px 18px rgba(10,50,28,.28);transition:transform .3s,box-shadow .3s;font-size:0}
.ic.mk svg{width:36px;height:36px}
.card:hover .ic.mk{transform:translateY(-3px) rotate(-4deg);box-shadow:0 12px 24px rgba(10,50,28,.35)}

/* ================= SERVICE PAGES (v2.1) ================= */
.crumbs{display:flex;gap:8px;align-items:center;margin:0 0 18px;font-size:.92rem;color:#b5cdb9}
.crumbs a{color:var(--lime);text-decoration:none;font-weight:600}.crumbs a:hover{text-decoration:underline}
.svc-hero{position:relative;overflow:hidden;padding:64px 0;background:radial-gradient(760px 400px at 90% 0%,rgba(183,227,90,.16),transparent 60%),var(--deep)}
.svc-hero .ph-grid{align-items:center}.svc-hero .ph-text{padding-bottom:0}
.svc-hero .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.svc-hero h1{font-size:clamp(2.1rem,4.8vw,3.4rem)}

/* hero art: big icon on a dotted panel */
.svc-art{position:relative;aspect-ratio:1/.82;max-width:440px;width:100%;justify-self:center;border-radius:28px;border:1px solid rgba(183,227,90,.35);background:radial-gradient(circle at 1px 1px,rgba(183,227,90,.28) 1.2px,transparent 1.6px) 0 0/22px 22px,linear-gradient(145deg,#0f5a32,#0a3d22);display:grid;place-items:center;box-shadow:0 24px 50px rgba(0,0,0,.28)}
.svc-bigic{display:grid;place-items:center;width:46%;aspect-ratio:1;border-radius:32%;background:rgba(9,61,34,.82);border:1px solid rgba(183,227,90,.5);color:var(--lime);box-shadow:0 14px 34px rgba(0,0,0,.3)}
.svc-bigic svg{width:56%;height:56%;stroke-width:1.5}
.svc-chip{position:absolute;left:18px;bottom:18px;padding:7px 14px;border-radius:999px;background:var(--lime);color:#14231a;font-weight:600;font-size:.88rem}
.svc-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:26px;place-items:stretch;aspect-ratio:auto}
.svc-mosaic .mo{display:grid;place-items:center;aspect-ratio:1;border-radius:20px;background:rgba(9,61,34,.82);border:1px solid rgba(183,227,90,.4);color:var(--lime);transition:transform .25s,background .25s}
.svc-mosaic .mo:hover{transform:translateY(-4px);background:var(--lime);color:#14231a}
.svc-mosaic .mo svg{width:44%;height:44%}

/* tick lists */
.checks{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:10px}
.checks li{position:relative;padding-left:32px;color:var(--ink)}
.checks li::before{content:"✓";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:800;line-height:1}
.checks.two{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px 24px}

/* single service: copy + sticky quote panel */
.svc-main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start}
.svc-copy .lead{font-size:1.2rem;color:var(--ink)}
.svc-copy p{color:var(--muted)}.svc-copy .lead{color:var(--ink)}
.inc-h{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.svc-aside{position:sticky;top:calc(var(--hh) + 16px);padding:28px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 16px 38px rgba(10,50,28,.14)}
.svc-aside .btn{display:block;width:100%;text-align:center}
.svc-aside p{color:var(--muted);font-size:.98rem}
.aside-tel{display:block;text-align:center;margin-top:14px;font-weight:600;color:var(--green);text-decoration:none}.aside-tel:hover{text-decoration:underline}

/* process: real sequence, so numbered */
.flow{counter-reset:f;list-style:none;margin:26px 0 0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.flow li{counter-increment:f;position:relative;padding:62px 24px 24px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.flow li::before{content:counter(f);position:absolute;left:24px;top:20px;width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800}
.flow li::after{content:"";position:absolute;left:68px;right:-22px;top:37px;height:2px;background:repeating-linear-gradient(90deg,var(--green) 0 6px,transparent 6px 12px);opacity:.45}
.flow li:last-child::after{display:none}
.flow b{display:block;font:700 1.15rem "Bricolage Grotesque",sans-serif;margin-bottom:6px}.flow span{color:var(--muted)}

/* city tiles */
.citygrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:20px}
.citytile{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:14px;background:var(--surface);border:1px solid var(--line);text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.citytile .ic.mk{margin:0;flex:none}.citytile b{display:block;font:700 1.15rem "Bricolage Grotesque",sans-serif}.citytile small{color:var(--muted)}
.citytile:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 14px 28px rgba(10,50,28,.16)}

/* services overview cards */
.svc-cards{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));margin-top:26px}
.svc-card{display:flex;flex-direction:column;padding:30px}
.svc-card p{color:var(--muted)}.svc-card .checks{margin-bottom:1.4em}
.svc-actions{margin-top:auto;display:flex;gap:12px;flex-wrap:wrap}
.svc-actions .btn{padding:12px 22px}
.svc-card .btn.p{background:var(--green);color:#fff}.svc-card .btn.p:hover{background:var(--deep)}
.svc-card .btn.o{color:var(--green)}.svc-card .btn.o:hover{color:#fff}
.areabox .ic.mk{margin-bottom:14px}

@media(max-width:900px){.svc-main{grid-template-columns:1fr;gap:30px}.svc-aside{position:static}.flow li::after{display:none}}
@media(max-width:860px){.svc-hero .ph-grid{grid-template-columns:1fr}.svc-art{max-width:340px;margin:8px 0 0;justify-self:start}}
@media(max-width:760px){.svc-hero{padding:44px 0}}

/* ---- glass sticky header (v2.4): dark green translucent glass ---- */
header.nav{transition:background .3s,box-shadow .3s,border-color .3s,-webkit-backdrop-filter .3s,backdrop-filter .3s}
.nav .wrap{transition:height .3s}

/* ---- before / after video (v2.3) ---- */
.ba-wrap{margin-top:26px}
.ba{position:relative;max-width:960px;margin:0 auto;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0b1a12;box-shadow:0 16px 38px rgba(10,50,28,.2);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ba video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba .ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:44px;margin-left:-22px;cursor:ew-resize;display:flex;align-items:center;justify-content:center;border:0;background:none;padding:0}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.4)}
.ba-handle span{position:relative;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--deep);display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.ba-handle:focus-visible span{outline:3px solid var(--lime)}
.ba-tag{position:absolute;top:14px;padding:5px 14px;border-radius:999px;background:rgba(9,61,34,.8);color:var(--lime);font-weight:700;font-size:.85rem;letter-spacing:.04em;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ba-tag.b{left:14px}.ba-tag.a{right:14px}
.ba-ctrl{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.ba-ctrl button{padding:10px 22px;border-radius:999px;border:2px solid var(--green);background:transparent;color:var(--green);font:600 .95rem "Source Sans 3",sans-serif;cursor:pointer;transition:background .2s,color .2s}
.ba-ctrl button:hover,.ba-ctrl button.on{background:var(--green);color:#fff}
.ba-ctrl button:focus-visible{outline:3px solid var(--lime);outline-offset:2px}

/* ---- hero-only animated shield + recycling-arrows cursor (v3.0, matches the reference badge) ---- */
.bin-on,.bin-on *{cursor:none!important}
.bin-cur{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;width:42px;height:45px;margin:-22px 0 0 -21px;opacity:0;background:none;will-change:transform}
.bin-cur.show{opacity:1;transition:opacity .18s}
.bc-s{background:none;transform:scale(.3) rotate(-90deg);transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
.bin-cur.show .bc-s{transform:scale(1) rotate(0)}
.bin-cur.hov.show .bc-s{transform:scale(1.22)}
.bin-cur.press.show .bc-s{transform:scale(.8)}
.bc-tilt{background:none;transform-origin:50% 50%;will-change:transform}
.bin-cur svg{display:block;overflow:visible;background:none;filter:drop-shadow(0 0 5px rgba(120,230,90,.55)) drop-shadow(0 2px 3px rgba(0,25,12,.6));animation:rcBob 1.8s ease-in-out infinite}
.rc-shield{fill:rgba(5,38,20,.72);stroke:#e4efe8;stroke-width:2.4;stroke-linejoin:round}
.rc-shine{fill:none;stroke:#fff;stroke-width:2.4;stroke-linejoin:round;stroke-dasharray:22 120;opacity:.9;animation:rcShine 2.4s linear infinite}
.rc-core{fill:#04180d;opacity:.95}
.rc-spark{fill:#d9ffb0;animation:rcSpark 1.6s ease-in-out infinite;transform-origin:41px 6px;transform-box:fill-box}
.rc-a{color:#14a84c;animation:rcChase 1.5s ease-in-out infinite}
.rc-a1{color:#8fe83c}.rc-a3{color:#0e8a3d}
.rc-a2{animation-delay:.5s}.rc-a3{animation-delay:1s}
/* hovering a link / button: grows, wiggles, arrows spin fast (JS) */
.bin-cur.hov svg{animation:rcWiggle .45s ease-in-out infinite}
/* click: squish, arrows reverse-spin (JS), triangle pop */
.bin-cur.press svg{animation:none}
/* idle: hop + wiggle + faster arrows */
.bin-cur.idle svg{animation:binHop 1.1s ease-in-out infinite}
/* trail + burst particles (triangles) */
.bp{position:fixed;z-index:9998;pointer-events:none;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%);background:var(--c);opacity:.9;animation:bpFly .85s ease-out forwards}
.bp.g{background:none;clip-path:none;border-radius:0;color:var(--c);font-size:calc(var(--s) * 1.7);line-height:1;text-align:center;width:auto;height:auto;margin:-.5em 0 0 -.5em;text-shadow:0 1px 3px rgba(0,0,0,.3)}
/* click pop: expanding triangle outline instead of a circle */
.bc-pop{position:fixed;z-index:9998;pointer-events:none;width:18px;height:16px;margin:-8px 0 0 -9px;background:#b7e35a;clip-path:polygon(50% 0,100% 100%,0 100%,50% 0,50% 30%,18% 85%,82% 85%,50% 30%);animation:bcPop .55s ease-out forwards}
.bc-pop.b2{background:#1a9a55;animation-name:bcPop2;animation-duration:.8s}
@keyframes bpFly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.3);opacity:0}}
@keyframes bcPop{to{transform:scale(4.2) rotate(120deg);opacity:0}}
@keyframes bcPop2{to{transform:scale(6.5) rotate(-120deg);opacity:0}}
@keyframes binHop{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-9px) rotate(-10deg)}40%{transform:translateY(0) rotate(8deg)}60%{transform:translateY(-5px) rotate(-6deg)}80%{transform:translateY(0) rotate(3deg)}}
@keyframes rcBob{0%,100%{transform:translateY(0) rotate(-3deg) scale(1)}50%{transform:translateY(-3px) rotate(3deg) scale(1.06)}}
@keyframes rcWiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes rcChase{0%,100%{filter:brightness(1)}40%{filter:brightness(1.35) saturate(1.2)}}
@keyframes rcShine{to{stroke-dashoffset:-142}}
@keyframes rcSpark{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.4)}}
@media(hover:none){.bin-cur,.bp,.bc-pop{display:none}}
@media(prefers-reduced-motion:reduce){.bin-cur svg,.rc-a,.rc-shine,.rc-spark{animation:none!important}}

/* ================= v4.0: before / after image sliders ================= */
.cmp-grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-top:26px}
.cmp-fig{margin:0}
.cmp{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#0b1a12;box-shadow:0 14px 34px rgba(10,50,28,.2);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.cmp .cmp-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.cmp .cmp-b{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.cmp .ba-handle{cursor:ew-resize}
.cmp-fig figcaption{margin-top:12px;font-weight:600;color:var(--ink);font-size:1rem}
.cmp-fig figcaption::before{content:"📍 ";font-weight:400}

/* ================= v4.0: mobile ================= */
body{overflow-x:clip}
img{max-width:100%;height:auto}
input,select,textarea{font-size:16px}
@media(max-width:760px){
  section{padding:52px 0}
  .hero h1{font-size:clamp(1.9rem,7.6vw,2.6rem)}
  .hero .btn{flex:1 1 100%;text-align:center}
  .hero .wrap{padding-top:44px;padding-bottom:56px}
  .hero p{font-size:1.08rem}
  .ticks{gap:12px 18px;font-size:.92rem}
  .card{padding:22px}
  .btn{padding:15px 22px;min-height:48px}
  nav a{min-height:44px;display:inline-flex;align-items:center}
  .stats{padding:34px 0}.stats b{font-size:2rem}
  .stats .grid{gap:18px}
  .svc-cards{gap:18px}
  .svc-actions .btn{flex:1 1 100%;text-align:center}
  .allareas .btn{width:100%;text-align:center}
  .pagehead{padding:44px 0 40px}
  .ft-cta .btn{width:100%;text-align:center}
  .cmp-grid{gap:20px}
  /* sticky thumb bar: call + quote */
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(9,61,34,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -6px 20px rgba(0,0,0,.25)}
  .mbar.one{grid-template-columns:1fr}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:12px;font-weight:700;text-decoration:none;font-size:1rem}
  .mbar .m-call{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7)}
  .mbar .m-quote{background:var(--lime);color:#14231a}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .loader .lg{font-size:2rem}
}
@media(min-width:761px){.mbar{display:none}}
@media(max-width:380px){
  .wrap{padding:0 16px}
  .hero .wrap{padding-left:16px;padding-right:16px}
  .ph-art figcaption{font-size:.78rem}
}
/* hero line 3 needs its own entrance (the headline is now three lines) */
.js.loaded .hero h1 .ln:nth-child(3)>span{animation:lineUp .9s cubic-bezier(.2,.8,.2,1) 1.55s both}
.js .hero h1 .ln>span{transform:translateY(110%)}

/* ================= v4.1: attractive hero entrance ================= */
@keyframes heroPop{0%{opacity:0;transform:translateY(-14px) scale(.8);filter:blur(8px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes heroBlurUp{from{opacity:0;transform:translateY(22px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes heroSpring{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes heroTick{0%{opacity:0;transform:translateX(-18px) scale(.9)}65%{opacity:1;transform:translateX(3px) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes heroSweep{from{left:-60%}to{left:120%}}
@keyframes heroLine{0%{opacity:0;transform:translateY(60%) skewY(6deg);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}

/* eyebrow badge pops in with a soft glow */
.js.loaded .hero .eyebrow{animation:heroPop .8s cubic-bezier(.34,1.4,.64,1) .95s both;box-shadow:0 0 0 0 rgba(183,227,90,.5)}

/* headline lines: each rises out of a mask with a slight skew + blur */
.js .hero h1 .ln>span{transform:none;opacity:0}
.js.loaded .hero h1 .ln:nth-child(1)>span{animation:heroLine 1s cubic-bezier(.2,.8,.2,1) 1.1s both}
.js.loaded .hero h1 .ln:nth-child(2)>span{animation:heroLine 1s cubic-bezier(.2,.8,.2,1) 1.25s both}
.js.loaded .hero h1 .ln:nth-child(3)>span{animation:heroLine 1s cubic-bezier(.2,.8,.2,1) 1.4s both}

/* intro paragraph floats up softly */
.js.loaded .hero p.h-rise{animation:heroBlurUp .9s cubic-bezier(.2,.8,.2,1) 1.75s both}

/* buttons spring in one after another */
.js.loaded .hero .row.h-rise{animation:none;opacity:1}
.js .hero .row.h-rise>.btn{opacity:0}
.js.loaded .hero .row.h-rise>.btn:nth-child(1){animation:heroSpring .7s cubic-bezier(.34,1.56,.64,1) 1.95s both}
.js.loaded .hero .row.h-rise>.btn:nth-child(2){animation:heroSpring .7s cubic-bezier(.34,1.56,.64,1) 2.1s both}

/* trust ticks: slide in from the left, one by one */
.js.loaded .hero .ticks span:nth-child(1){animation:heroTick .6s cubic-bezier(.34,1.4,.64,1) 2.35s both}
.js.loaded .hero .ticks span:nth-child(2){animation:heroTick .6s cubic-bezier(.34,1.4,.64,1) 2.45s both}
.js.loaded .hero .ticks span:nth-child(3){animation:heroTick .6s cubic-bezier(.34,1.4,.64,1) 2.55s both}
.js.loaded .hero .ticks span:nth-child(4){animation:heroTick .6s cubic-bezier(.34,1.4,.64,1) 2.65s both}

/* a single light sheen sweeps across the banner once the page is ready */
.hero .hero-fx::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-18deg);pointer-events:none}
.js.loaded .hero .hero-fx::after{animation:heroSweep 2.2s ease-in-out 1.4s 1 both}

@media(prefers-reduced-motion:reduce){
  .js .hero h1 .ln>span,.js .hero .row.h-rise>.btn,.js .hero .ticks span,.js .hero .eyebrow,.js .hero p.h-rise{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .hero .hero-fx::after{display:none}
}

/* ================= v4.2: "slide to see" hint on before/after photos ================= */
.cmp-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(9,61,34,.85);border:1px solid rgba(183,227,90,.55);color:#fff;font:700 .9rem "Source Sans 3",sans-serif;letter-spacing:.02em;white-space:nowrap;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.3);animation:hintFloat 1.8s ease-in-out infinite;transition:opacity .4s,transform .4s}
.cmp-hint span{color:var(--lime);display:inline-block;animation:hintNudge 1.2s ease-in-out infinite}
.cmp-hint span:last-child{animation-direction:reverse}
.cmp-hint.done{opacity:0;transform:translate(-50%,8px)}
@keyframes hintFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}
@keyframes hintNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
/* handle gently nudges left and right until the visitor touches it */
.cmp:not(.touched) .ba-handle span{animation:handleNudge 1.6s ease-in-out infinite}
@keyframes handleNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.cmp.touched .ba-handle span{animation:none}
@media(prefers-reduced-motion:reduce){.cmp-hint,.cmp-hint span,.cmp:not(.touched) .ba-handle span{animation:none!important}}

/* ================= v4.3: "Slide to see" written on the divider circle ================= */
.cmp .ba-handle{width:84px;margin-left:-42px}
.cmp .ba-handle span{width:84px;height:84px;flex-direction:column;gap:1px;background:#fff;color:var(--green);border:3px solid var(--lime);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.cmp .ba-handle span b{font:800 .95rem "Bricolage Grotesque",sans-serif;letter-spacing:-.02em;line-height:1}
.cmp .ba-handle span small{font:700 .66rem/1.05 "Source Sans 3",sans-serif;text-transform:uppercase;letter-spacing:.06em;text-align:center}
.cmp.touched .ba-handle span small{opacity:.6}
@media(max-width:760px){.cmp .ba-handle{width:76px;margin-left:-38px}.cmp .ba-handle span{width:76px;height:76px}}

/* ================= v4.4: fix cramped "Slide to see" circle ================= */
.cmp .ba-handle{width:96px;margin-left:-48px;overflow:visible}
.cmp .ba-handle span{width:96px;height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;white-space:nowrap;overflow:visible;padding:0;border-radius:50%;background:#fff;color:var(--green);border:3px solid var(--lime);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.cmp .ba-handle span b{display:block;font:800 .8rem/1 "Bricolage Grotesque",sans-serif;letter-spacing:0;color:var(--green)}
.cmp .ba-handle span small{display:block;font:700 .78rem/1.15 "Source Sans 3",sans-serif;letter-spacing:0;text-transform:none;text-align:center;color:var(--ink)}
.cmp .ba-handle span b{display:none}
@media(max-width:760px){
  .cmp .ba-handle{width:88px;margin-left:-44px}
  .cmp .ba-handle span{width:88px;height:88px}
  .cmp .ba-handle span small{font-size:.74rem}
}

/* ================= v4.5: FINAL slider circle (small, dark green, white text) ================= */
.cmp .ba-handle{width:64px;margin-left:-32px}
.cmp .ba-handle span{width:64px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--green);color:#fff;border:2px solid var(--lime);border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.35);padding:0;white-space:nowrap;overflow:visible}
.cmp .ba-handle span b{display:none}
.cmp .ba-handle span small{display:block;font:700 .68rem/1.1 "Source Sans 3",sans-serif;color:#fff;text-align:center;letter-spacing:0;text-transform:none}
@media(max-width:760px){
  .cmp .ba-handle{width:56px;margin-left:-28px}
  .cmp .ba-handle span{width:56px;height:56px}
  .cmp .ba-handle span small{font-size:.62rem}
}

/* ================= v4.6: mobile header with menu button ================= */
header.nav .menu-btn,header.nav .hdr-cta{display:none}
@media(max-width:760px){
  header.nav .wrap{height:64px;flex-wrap:nowrap;gap:10px;padding-top:0;padding-bottom:0;position:relative}
  header.nav .logo{font-size:1.2rem}
  header.nav .logo small{font-size:.6rem}
  header.nav .hdr-cta{display:inline-flex;align-items:center;margin-left:auto;min-height:44px;padding:0 16px;border-radius:10px;background:var(--lime);color:#14231a;font-weight:700;font-size:.92rem;text-decoration:none;white-space:nowrap}
  header.nav .menu-btn{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0;flex:none;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer}
  header.nav .menu-btn span{display:block;width:20px;height:2px;margin:0 auto;background:currentColor;border-radius:2px;transition:transform .3s,opacity .2s}
  header.nav.open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.nav.open .menu-btn span:nth-child(2){opacity:0}
  header.nav.open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header.nav nav{display:none}
  header.nav.open nav{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:absolute;left:0;right:0;top:100%;width:auto;padding:10px 16px 18px;background:var(--deep);border-bottom:1px solid rgba(183,227,90,.25);box-shadow:0 18px 30px rgba(0,0,0,.3);max-height:calc(100vh - 64px);overflow-y:auto;overflow-x:visible;white-space:normal;z-index:25}
  header.nav nav a:not(.cta),header.nav nav .dd{display:flex}
  header.nav nav a{min-height:48px;padding:12px 14px;border-radius:10px;color:#fff;font-size:1.02rem;align-items:center}
  header.nav nav a:not(.cta):hover,header.nav nav a.on{background:rgba(255,255,255,.12);color:var(--lime)}
  header.nav nav .dd{flex-direction:column;align-items:stretch}
  header.nav nav .dd>a{width:100%}
  header.nav nav .dd::after{display:none}
  header.nav nav .dd .sub{display:block;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;padding:0 0 4px 14px;margin:0;min-width:0}
  header.nav nav .dd .sub a{min-height:42px;padding:8px 14px;font-weight:500;color:#cfe2d2;font-size:.98rem}
  header.nav nav a.cta{background:var(--lime);color:#14231a;justify-content:center;margin-top:8px}
}
@media(min-width:761px){header.nav .menu-btn,header.nav .hdr-cta{display:none}}

/* ================= v4.8: moving slogan strip + load-size guide ================= */
.marquee{overflow:hidden;background:linear-gradient(90deg,#062616,var(--deep) 50%,#062616);color:var(--lime);padding:15px 0;border-top:1px solid rgba(183,227,90,.25);border-bottom:1px solid rgba(183,227,90,.25)}
.mq-track{display:flex;align-items:center;gap:18px;width:max-content;animation:mqScroll 30s linear infinite}
.mq-track span{white-space:nowrap;font:800 1rem "Bricolage Grotesque",sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--lime)}
.mq-track i{font-style:normal;font-size:.8rem;color:#fff;opacity:.85}
@keyframes mqScroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mq-track{animation:none}}


/* ================= v5.1: beautiful loader + speed + page polish ================= */
.loader{background:radial-gradient(circle at 50% 38%,#0f5a33 0%,var(--deep) 45%,#062616 100%);overflow:hidden}
.loader .ld-in{position:relative;z-index:1;text-align:center;padding:0 20px}
.ld-ico{width:104px;height:104px;display:block;margin:0 auto 14px;animation:ldSpin 7s linear infinite;filter:drop-shadow(0 0 18px rgba(183,227,90,.35))}
.ld-seg{fill:none;stroke:var(--lime);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:44 200;animation:ldFlow 1.8s ease-in-out infinite}
.ld-ico path:nth-child(2){animation-delay:.25s}
.ld-ico path:nth-child(3){animation-delay:.5s}
@keyframes ldSpin{to{transform:rotate(360deg)}}
@keyframes ldFlow{0%{stroke-dashoffset:0;opacity:.45}50%{opacity:1}100%{stroke-dashoffset:-244;opacity:.45}}
.ld-word{font:800 2.5rem/1 "Bricolage Grotesque",sans-serif;color:var(--lime);letter-spacing:.06em;display:flex;justify-content:center;gap:1px}
.ld-word span{display:inline-block;opacity:0;transform:translateY(24px) rotate(-8deg);animation:ldLetter .6s cubic-bezier(.2,1.4,.5,1) forwards;animation-delay:calc(.25s + var(--i)*.08s)}
@keyframes ldLetter{to{opacity:1;transform:none}}
.loader small{margin-top:8px;letter-spacing:.34em;animation:ldFade .8s ease .9s both}
.loader .bar{margin-top:22px;width:200px;height:3px;background:rgba(183,227,90,.18)}
.loader .bar i{background:linear-gradient(90deg,var(--lime),#fff)}
@keyframes ldFade{from{opacity:0}to{opacity:1}}
.ld-leaf{position:absolute;width:14px;height:14px;border-radius:0 60% 0 60%;background:var(--lime);opacity:.5;animation:ldLeaf 4.5s ease-in-out infinite}
.ld-leaf.l2{width:10px;height:10px;animation-delay:-1.2s}
.ld-leaf.l3{width:12px;height:12px;animation-delay:-2.4s}
.ld-leaf.l4{width:9px;height:9px;animation-delay:-3.4s}
@keyframes ldLeaf{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(160deg)}}
@media(max-width:760px){.ld-word{font-size:2.1rem}.ld-ico{width:88px;height:88px}}
@media(prefers-reduced-motion:reduce){.ld-ico,.ld-seg,.ld-leaf,.ld-word span,.loader small{animation:none!important;opacity:1;transform:none}}

header.nav.scrolled{box-shadow:0 10px 26px rgba(0,0,0,.22)}

.btn{transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:active{transform:scale(.97)}
@media(hover:hover){.card{transition:transform .3s ease,box-shadow .3s ease}.card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(10,50,28,.14)}}
section h2::after{content:"";display:block;width:56px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--lime),var(--green));margin-top:14px}
.buildit h2::after{background:linear-gradient(90deg,var(--lime),#8fd14f)}
.pagehead{position:relative;overflow:hidden}
.pagehead::before{content:"";position:absolute;right:-120px;top:-140px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(183,227,90,.2),transparent 65%);pointer-events:none}
@media(max-width:760px){section h2::after{width:44px;height:3px}}

/* ================= v5.2: reviews + postcode checker ================= */
.reviews{background:var(--surface)}
.rv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px;margin-top:24px}
.rv-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 10px 26px rgba(10,50,28,.07);border-top:4px solid var(--lime)}
.rv-card blockquote{margin:0;font-size:1.05rem;line-height:1.55;color:var(--ink)}
.rv-card figcaption{margin-top:14px;font-weight:700;color:var(--green)}
.pc-check{margin:24px 0 4px;max-width:520px}
.pc-check label{display:block;margin-bottom:8px;color:var(--ink)}
.pc-row{display:flex;gap:10px;flex-wrap:wrap}
.pc-row input{flex:1 1 180px;min-height:50px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;text-transform:uppercase;background:#fff;color:var(--ink)}
.pc-row input:focus{outline:3px solid var(--lime);outline-offset:2px;border-color:var(--green)}
.pc-row .btn{min-height:50px}
#pc-out{margin-top:12px;color:var(--muted);min-height:1.4em}
@media(max-width:760px){.pc-row .btn{width:100%}.rv-card{padding:22px}}

/* ================= v5.3: postcode box visible in light and dark mode; moving service ================= */
.pc-row input,.pc-row input:focus{background:#ffffff!important;color:#0b1a12!important;-webkit-text-fill-color:#0b1a12;caret-color:#0b1a12;border:1.5px solid #8fa898!important;font-size:16px}
.pc-row input::placeholder{color:#6b7f72;-webkit-text-fill-color:#6b7f72;opacity:1}
.pc-check{background:#ffffff;color:#14231a}
.pc-check label{color:#14231a}
#pc-out{color:#14231a}

/* ================= v5.5: postcode checker styled to match the site (green panel, lime accents) ================= */
.pc-check{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(183,227,90,.45);border-radius:18px;padding:22px;max-width:560px;box-shadow:0 14px 30px rgba(0,0,0,.25);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pc-check label{display:block;margin-bottom:10px;color:#fff;font-size:1.05rem}
.pc-check label b{font-family:"Bricolage Grotesque",sans-serif;font-weight:800}
.pc-row input,.pc-row input:focus{background:#fff!important;color:#0b1a12!important;-webkit-text-fill-color:#0b1a12;caret-color:#0b1a12;border:1.5px solid rgba(183,227,90,.7)!important;border-radius:12px;font-size:16px}
.pc-row input::placeholder{color:#6b7f72;-webkit-text-fill-color:#6b7f72;opacity:1}
.pc-row input:focus{outline:3px solid var(--lime);outline-offset:2px}
.pc-row .btn{background:var(--lime);color:#0a2a19;border:0;min-height:50px;padding:0 22px;border-radius:12px;font-weight:800}
.pc-row .btn:hover{background:#c9f07a}
#pc-out{color:#cfe2d2;margin-top:12px;min-height:1.4em}
#pc-out a{color:var(--lime)!important;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.pc-check{padding:18px}.pc-row .btn{width:100%}}

/* ================= v5.6: postcode input inside matches the site (dark green, white text, lime edge) ================= */
.pc-row input,.pc-row input:focus{background:#0a2a19!important;color:#ffffff!important;-webkit-text-fill-color:#ffffff;caret-color:var(--lime);border:1.5px solid rgba(183,227,90,.55)!important;border-radius:12px;font-size:16px;letter-spacing:.04em}
.pc-row input::placeholder{color:#8fb89c;-webkit-text-fill-color:#8fb89c;opacity:1}
.pc-row input:hover{border-color:var(--lime)!important}
.pc-row input:focus{outline:3px solid rgba(183,227,90,.55);outline-offset:2px;border-color:var(--lime)!important;box-shadow:0 0 0 4px rgba(183,227,90,.15)}

/* ================= v5.7: smaller, more beautiful hero cursor ================= */
.bin-cur{width:34px;height:37px;margin:-18px 0 0 -17px}
.bin-cur svg{width:34px!important;height:37px!important}
.cur-ring{position:fixed;left:0;top:0;z-index:9998;pointer-events:none;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:1.5px solid rgba(183,227,90,.7);background:radial-gradient(circle,rgba(183,227,90,.10),transparent 70%);opacity:0;transition:opacity .25s ease,width .35s cubic-bezier(.34,1.4,.64,1),height .35s cubic-bezier(.34,1.4,.64,1),margin .35s cubic-bezier(.34,1.4,.64,1),border-color .25s;animation:ringPulse 2.2s ease-out infinite;will-change:transform}
.cur-ring.show{opacity:1}
.cur-ring.hov{width:60px;height:60px;margin:-30px 0 0 -30px;border-color:var(--lime);background:radial-gradient(circle,rgba(183,227,90,.18),transparent 70%)}
@keyframes ringPulse{0%{box-shadow:0 0 0 0 rgba(183,227,90,.4),0 0 12px rgba(183,227,90,.25)}70%,100%{box-shadow:0 0 0 12px rgba(183,227,90,0),0 0 12px rgba(183,227,90,.08)}}
@media(hover:none){.cur-ring{display:none}}
@media(prefers-reduced-motion:reduce){.cur-ring{animation:none}}

/* ================= v5.8: transparent, attractive cursor with context label and orbit ================= */
.bin-cur,.bin-cur *,.cur-ring{background:transparent!important}
.cur-lbl{position:absolute;left:30px;top:2px;white-space:nowrap;font:800 .66rem "Source Sans 3",sans-serif;letter-spacing:.16em;color:var(--lime);text-shadow:0 0 8px rgba(183,227,90,.55),0 1px 3px rgba(0,0,0,.7);opacity:0;transform:translateX(-6px);transition:opacity .2s ease,transform .25s cubic-bezier(.34,1.4,.64,1)}
.bin-cur.hov .cur-lbl{opacity:1;transform:translateX(0)}
.cur-ring::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgba(183,227,90,.55);animation:orbitSpin 9s linear infinite}
.cur-ring.hov::after{border-color:rgba(183,227,90,.85);animation-duration:4s}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.cur-ring::after{animation:none}}

/* ================= v5.11: professional mouse hover effects (mouse/trackpad only) ================= */
@media(hover:hover) and (pointer:fine){
  /* buttons: lift + soft shine sweep */
  .btn{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease,color .25s ease,border-color .25s ease}
  .btn::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);pointer-events:none}
  .btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(10,50,28,.22)}
  .btn:hover::after{animation:btnShine .7s ease}
  .btn.g:hover{background:rgba(15,90,50,.08)}

  /* cards: lift, border turns green, icon grows */
  .card{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
  .card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(10,50,28,.14);border-color:var(--green)}
  .card .ic{transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
  .card:hover .ic{transform:scale(1.12) rotate(-4deg)}

  /* service and area tiles */
  .svc,.citytile,.areatile{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background-color .25s ease}
  .svc:hover,.citytile:hover,.areatile:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(10,50,28,.14);border-color:var(--green)}
  .areatile:hover{background:var(--surface)}

  /* navigation links: animated underline */
  header.nav nav a:not(.cta){position:relative}
  header.nav nav a:not(.cta)::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
  header.nav nav a:not(.cta):hover::after,header.nav nav a.on::after{transform:scaleX(1)}

  /* text links: underline grows from the left */
  main a:not(.btn):not(.card):not(.svc):not(.citytile):not(.areatile):not(.areabox):not(.tl a){background-image:linear-gradient(currentColor,currentColor);background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s ease,color .2s}
  main a:not(.btn):not(.card):not(.svc):not(.citytile):not(.areatile):not(.areabox):hover{background-size:100% 1.5px}

  /* photos: subtle zoom inside their frame */
  .work img,.ph-art img,.cmp-img{transition:transform .6s ease}
  .work figure:hover img,.work a:hover img,.ph-art:hover img{transform:scale(1.04)}
  .work{overflow:hidden}

  /* FAQ rows */
  details{transition:background-color .25s ease,border-color .25s ease}
  details:hover{border-color:var(--green)}
  summary{transition:color .2s}
  summary:hover{color:var(--green)}

  /* form fields */
  input:hover,select:hover,textarea:hover{border-color:var(--green)}
  input:focus,select:focus,textarea:focus{transform:translateY(-1px);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}

  /* footer links */
  footer a{transition:color .2s ease,padding-left .25s ease}
  footer a:hover{padding-left:4px}

  /* step list numbers and ticks */
  .steps li{transition:transform .25s ease}
  .steps li:hover{transform:translateX(4px)}
  .ticks span{transition:transform .25s ease,background-color .25s}
  .ticks span:hover{transform:translateY(-2px)}
}
@keyframes btnShine{from{left:-75%}to{left:130%}}
@media(prefers-reduced-motion:reduce){
  .btn::after,.btn:hover::after{animation:none!important}
  .card,.card:hover,.card .ic,.card:hover .ic,.svc:hover,.citytile:hover,.areatile:hover{transition:none!important;transform:none!important}
}

/* ================= v5.12: Services dropdown (desktop hover, mobile accordion) ================= */
@media(min-width:761px){
  header.nav nav{overflow:visible}
  header.nav .dd{position:relative;display:inline-flex;align-items:center}
  header.nav .dd>a span{display:inline-block;margin-left:2px;transition:transform .25s ease}
  header.nav .dd .sub{position:absolute;top:calc(100% + 6px);left:-8px;min-width:240px;display:flex;flex-direction:column;gap:2px;padding:8px;background:var(--deep);border:1px solid rgba(183,227,90,.3);border-radius:14px;box-shadow:0 18px 36px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease,visibility .25s;z-index:40}
  header.nav .dd:hover .sub,header.nav .dd:focus-within .sub,header.nav .dd.open .sub{opacity:1;visibility:visible;transform:none}
  header.nav .dd:hover>a span,header.nav .dd.open>a span{transform:rotate(180deg)}
  header.nav .dd .sub a{display:block;padding:10px 14px;border-radius:10px;color:#fff;font-size:.95rem;white-space:nowrap;transition:background-color .2s ease,color .2s ease,padding-left .2s ease}
  header.nav .dd .sub a:hover,header.nav .dd .sub a:focus-visible{background:rgba(183,227,90,.16);color:var(--lime);padding-left:18px;outline:none}
}

/* ================= v5.14: garbage-themed hero cursor ================= */
.hero,.hero *,.pagehead,.pagehead *{cursor:none}
.hero input,.hero textarea,.hero select,.pagehead input,.pagehead textarea,.pagehead select{cursor:text}
.mz-cur{position:fixed;left:0;top:0;width:0;height:0;z-index:9999;pointer-events:none}
.mz-ic{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;transition:opacity .25s ease,width .3s cubic-bezier(.34,1.4,.64,1),height .3s cubic-bezier(.34,1.4,.64,1),margin .3s cubic-bezier(.34,1.4,.64,1)}
.mz-cur.on .mz-ic{opacity:1}
.mz-cur.hov .mz-ic{width:34px;height:34px;margin:-17px 0 0 -17px}
.mz-cur.press .mz-ic{width:20px;height:20px;margin:-10px 0 0 -10px}
.mz-s{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--lime);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.55) rotate(-30deg);transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 0 4px rgba(183,227,90,.55))}
.mz-s.act{opacity:1;transform:none}
.mz-cur.hov .mz-s{stroke:#ffffff}
.mz-lbl{position:absolute;left:0;top:0;font:800 .64rem "Source Sans 3",sans-serif;letter-spacing:.18em;color:var(--lime);text-shadow:0 0 8px rgba(183,227,90,.5);white-space:nowrap;opacity:0;transition:opacity .2s ease}
.mz-cur.hov .mz-lbl{opacity:1}
.mz-rip{position:fixed;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:0 60% 0 60%;border:1.5px solid var(--lime);pointer-events:none;z-index:9998;animation:mzRip .8s ease-out forwards}
@keyframes mzRip{from{transform:scale(1) rotate(0);opacity:.9}to{transform:scale(4.5) rotate(160deg);opacity:0}}
@media(hover:none){.mz-cur,.mz-rip{display:none}.hero,.hero *,.pagehead,.pagehead *{cursor:auto}}
@media(prefers-reduced-motion:reduce){.mz-rip{animation:none;opacity:0}.mz-s{transition:none}}

/* ================= v5.15: "Where does your rubbish go?" flip cards ================= */
.gx{background:var(--bg)}
.gx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:20px;margin-top:26px}
.gx-card{position:relative;height:200px;perspective:1000px;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:left;-webkit-tap-highlight-color:transparent}
.gx-card:focus-visible{outline:3px solid var(--lime);outline-offset:4px;border-radius:18px}
.gx-inner{position:absolute;inset:0;transition:transform .75s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.gx-card.flip .gx-inner{transform:rotateY(180deg)}
.gx-f,.gx-b{position:absolute;inset:0;border-radius:18px;padding:22px;display:flex;flex-direction:column;justify-content:center;gap:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 10px 26px rgba(10,50,28,.1)}
.gx-f{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.gx-f b{font:800 1.2rem "Bricolage Grotesque",sans-serif}
.gx-f small{color:var(--muted);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.gx-ic{font-size:2.2rem;line-height:1}
.gx-b{transform:rotateY(180deg);background:linear-gradient(135deg,var(--deep),#0f5a32);color:#fff;border:1px solid rgba(183,227,90,.35)}
.gx-b b{font:800 1.1rem "Bricolage Grotesque",sans-serif;color:var(--lime)}
.gx-b span{color:#e4f1e7;line-height:1.5;font-size:.95rem}
@media(hover:hover){.gx-card:hover .gx-f{border-color:var(--green);box-shadow:0 16px 34px rgba(10,50,28,.16)}.gx-card:hover{transform:translateY(-3px)}.gx-card{transition:transform .3s ease}}
@media(max-width:760px){.gx-card{height:210px}.gx-f,.gx-b{padding:18px}}
@media(prefers-reduced-motion:reduce){.gx-inner{transition:none}}

/* =====================================================================
   v6.0 DESIGN SYSTEM POLISH
   One consistent type scale, spacing, radius, shadow and button style
   across every page. Applies on top of the earlier versions.
   ===================================================================== */
:root{
  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --sh-1:0 2px 6px rgba(10,50,28,.06);
  --sh-2:0 12px 28px rgba(10,50,28,.10);
  --sh-3:0 22px 44px rgba(10,50,28,.16);
  --grad-brand:linear-gradient(135deg,#0f5a32 0%,#093d22 100%);
  --grad-lime:linear-gradient(135deg,#c9f07a 0%,#b7e35a 100%);
}
body{line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1{letter-spacing:-.025em;line-height:1.05}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.02em;line-height:1.12}
h3{letter-spacing:-.01em}
p{max-width:68ch}
section{position:relative}

/* section eyebrow: one style everywhere */
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font:700 .8rem "Source Sans 3",sans-serif;letter-spacing:.12em;text-transform:uppercase;background:rgba(15,90,50,.08);color:var(--green);border:1px solid rgba(15,90,50,.18)}

/* buttons: unified */
.btn{border-radius:var(--r-sm);letter-spacing:.01em;box-shadow:var(--sh-1)}
.btn.p{background:var(--grad-brand);color:#fff;border-color:transparent}
.btn.p:hover{box-shadow:0 14px 26px rgba(9,61,34,.3)}
.btn.g{border-color:var(--green);color:var(--green)}

/* cards and tiles: one radius, one shadow */
.card,.svc,.citytile,.areatile,.rv-card,.sz-p,.bi-van{border-radius:var(--r-md)}
.card{box-shadow:var(--sh-1);border:1px solid var(--line)}
.card .ic{border-radius:14px}

/* forms */
input,select,textarea{border-radius:var(--r-sm)}
label{font-weight:600;color:var(--ink)}

/* footer */
footer{position:relative;background:var(--deep);color:#cfe2d2}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-lime)}

/* section rhythm on desktop */
@media(min-width:761px){
  section{padding:88px 0}
  section.alt{padding:88px 0}
}

/* page headers */
.pagehead{border-bottom:1px solid rgba(183,227,90,.18)}

/* focus states everywhere (keyboard users) */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}

/* subtle entrance for section content on scroll (only if JS marks sections) */
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ================= v6.1: optimised mobile dropdown menu ================= */
@media(max-width:760px){
  html.menu-open{overflow:hidden}
  header.nav.open nav{top:100%;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);padding:6px 14px 22px;border-radius:0 0 22px 22px;background:linear-gradient(180deg,#0a2a19 0%,#062616 100%);animation:mnSlide .28s ease both;-webkit-overflow-scrolling:touch}
  header.nav nav a:not(.cta){min-height:54px;padding:14px 12px;font-size:1.06rem;font-weight:600;border-radius:0;border-bottom:1px solid rgba(255,255,255,.08)}
  header.nav nav a:not(.cta)::after{display:none}
  header.nav nav a:not(.cta):hover,header.nav nav a.on{background:transparent;color:var(--lime)}
  header.nav nav .dd>a{justify-content:space-between;width:100%}
  header.nav nav .dd>a span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(183,227,90,.14);color:var(--lime);font-size:.85rem;transition:transform .3s ease}
  header.nav nav .dd.open>a span{transform:rotate(180deg)}
  header.nav nav .dd.open>a{color:var(--lime)}
  header.nav nav .dd .sub{display:none!important}
  header.nav nav .dd.open .sub{display:flex!important;flex-direction:column;gap:2px;margin:2px 0 12px;padding:4px 0 4px 14px;border-left:2px solid var(--lime);animation:mnDrop .25s ease both}
  header.nav nav .dd .sub a{min-height:48px;padding:11px 12px;font-size:1rem;font-weight:500;color:#dcebe0;border-bottom:0;border-radius:10px}
  header.nav nav .dd .sub a:first-child{color:var(--lime);font-weight:700}
  header.nav nav .dd .sub a:active{background:rgba(255,255,255,.1)}
  header.nav nav a.cta{min-height:56px;font-size:1.06rem;border-radius:14px;margin:16px 0 4px;background:var(--lime);color:#14231a;box-shadow:0 10px 22px rgba(183,227,90,.28);border-bottom:0}
}
@keyframes mnSlide{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes mnDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){header.nav.open nav,header.nav nav .dd.open .sub{animation:none}}

/* ================= v6.2: recycling-bin cursor (recycle arrows turn around a bin) ================= */
.mz-ic{width:28px;height:28px;margin:-14px 0 0 -14px}
.mz-cur.hov .mz-ic{width:36px;height:36px;margin:-18px 0 0 -18px}
.mz-s .mz-arcs{transform-origin:12px 12px;transform-box:view-box;animation:mzTurn 4s linear infinite}
.mz-s path{vector-effect:non-scaling-stroke}
@keyframes mzTurn{to{transform:rotate(360deg)}}
.mz-s.act{animation:mzBob 2.4s ease-in-out infinite}
@keyframes mzBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.mz-s .mz-arcs,.mz-s.act{animation:none}}

/* =====================================================================
   v6.4 BUTTON SYSTEM (final). Overrides every earlier .btn rule.
   p = primary lime (on dark and light)   g = white outline (on dark)
   o = green outline (on light)           form submit = solid green
   ===================================================================== */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:14px 26px;border-radius:12px;border:2px solid transparent;font:700 1rem/1.2 "Source Sans 3",sans-serif;letter-spacing:.01em;text-decoration:none;text-align:center;cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,color .22s ease,border-color .22s ease}
.btn.p{background:#b7e35a;border-color:#b7e35a;color:#0f2a1a;box-shadow:0 6px 16px rgba(183,227,90,.22)}
.btn.g{background:transparent;border-color:rgba(255,255,255,.85);color:#fff;box-shadow:none}
.btn.o{background:transparent;border-color:#0f5a32;color:#0f5a32;box-shadow:none}
form .btn,.btn.s{background:#0f5a32;border-color:#0f5a32;color:#fff;width:100%;box-shadow:0 6px 16px rgba(15,90,50,.2)}
/* contexts that were tuned earlier keep their meaning */
.svc-card .btn.p{background:#0f5a32;border-color:#0f5a32;color:#fff}
.hero .btn.g{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.btn.pulse{animation:none}
.btn.pulse::after{display:none}
.btn:focus-visible{outline:3px solid #b7e35a;outline-offset:3px}
.btn:active{transform:scale(.97)}

/* hover: primary brightens and lifts, outlines fill (mouse users only) */
@media(hover:hover) and (pointer:fine){
  .btn.p:hover{background:#c9f07a;border-color:#c9f07a;transform:translateY(-2px);box-shadow:0 12px 24px rgba(183,227,90,.34)}
  .btn.g:hover{background:#fff;border-color:#fff;color:#093d22;transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.2)}
  .btn.o:hover{background:#0f5a32;border-color:#0f5a32;color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,90,50,.22)}
  form .btn:hover,.btn.s:hover{background:#093d22;border-color:#093d22;transform:translateY(-2px);box-shadow:0 12px 24px rgba(9,61,34,.3)}
  .svc-card .btn.p:hover{background:#093d22;border-color:#093d22;color:#fff}
  .btn::after{content:"";position:absolute;top:0;left:-75%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);pointer-events:none}
  .btn:hover::after{animation:btnShine .75s ease}
}
@media(max-width:760px){
  .btn{min-height:52px;padding:14px 22px;font-size:1.02rem}
}
@media(prefers-reduced-motion:reduce){.btn,.btn:hover,.btn::after{transition:none!important;animation:none!important;transform:none!important}}

/* ================= v6.5: homepage hero slider ================= */
.hs{overflow:hidden}
.hs .hs-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.hs .hs-slide.on{opacity:1}
.hs .hs-slide picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.hs .hs-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;animation:none}
.hs .hs-slide.on img{animation:hsZoom 9s ease-out both}
@keyframes hsZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hs-dots{position:absolute;right:24px;bottom:22px;z-index:3;display:flex;gap:8px;align-items:center}
.hs-dots button{width:10px;height:10px;padding:0;border-radius:999px;border:1.5px solid #fff;background:transparent;cursor:pointer;transition:width .3s ease,background-color .3s ease,border-color .3s ease}
.hs-dots button.on{width:28px;background:#b7e35a;border-color:#b7e35a}
.hs-dots button:focus-visible{outline:3px solid #b7e35a;outline-offset:3px}
@media(max-width:760px){.hs-dots{right:50%;transform:translateX(50%);bottom:14px}}
@media(prefers-reduced-motion:reduce){.hs .hs-slide,.hs .hs-slide.on img{transition:none;animation:none}}

/* ================= v6.7: hero size restored (taller, bigger type on phones) ================= */
.hero{min-height:620px}
@media(max-width:760px){
  .hero{min-height:620px}
  .hero h1{font-size:clamp(2rem,8.8vw,3rem)}
  .hero .wrap{padding-top:60px;padding-bottom:64px}
  .hero p{font-size:1.12rem}
}

/* ================= v6.12: footer button hover fixed; 4 and 5 boxes in one line ================= */
/* footer links slide on hover, but the footer button must stay still */
footer a.btn:hover,footer a.btn:focus-visible{padding-left:26px}
footer .ft-cta .btn:hover{transform:translateY(-2px)}

/* 4 cards in one line (Why local people choose Movenzo) */
.grid.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 5 flip cards in one line (Where does your rubbish go?) */
.gx-grid.gx-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
@media(max-width:1100px){
  .gx-grid.gx-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .gx-grid.gx-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .grid.grid-4{grid-template-columns:1fr}
  .gx-grid.gx-5 .gx-card:last-child{grid-column:1/-1}
}

/* ================= v6.13: desktop dropdown, header and postcode box polish ================= */
.pc-hint{display:block;color:#cfe2d2;opacity:.85;font-size:.88rem;margin-top:8px}

@media(min-width:761px){
  /* header: sticky, glass background, shrinks a little on scroll */
  header.nav{position:sticky;top:0;z-index:50;background:rgba(6,38,22,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(183,227,90,.14);transition:background-color .3s ease,box-shadow .3s ease}
  header.nav.scrolled{background:rgba(6,38,22,.94)}
  header.nav .wrap{height:76px;transition:height .3s ease}
  header.nav.scrolled .wrap{height:64px}
  header.nav .logo{transition:transform .3s ease}

  /* desktop dropdown panel */
  header.nav .dd .sub{min-width:260px;padding:10px;border-radius:16px;border:1px solid rgba(183,227,90,.32);background:linear-gradient(180deg,#0a2a19,#062616);box-shadow:0 22px 44px rgba(0,0,0,.4)}
  header.nav .dd .sub::before{content:"";position:absolute;top:-7px;left:26px;width:12px;height:12px;background:#0a2a19;border-left:1px solid rgba(183,227,90,.32);border-top:1px solid rgba(183,227,90,.32);transform:rotate(45deg)}
  header.nav .dd .sub a{position:relative;padding:11px 14px 11px 18px;font-weight:600;font-size:.98rem}
  header.nav .dd .sub a::before{content:"";position:absolute;left:6px;top:50%;width:3px;height:0;border-radius:3px;background:var(--lime);transform:translateY(-50%);transition:height .2s ease}
  header.nav .dd .sub a:hover::before,header.nav .dd .sub a:focus-visible::before{height:60%}
  header.nav .dd .sub a:first-child{color:var(--lime)}
  header.nav .dd .sub a:first-child:hover{color:#fff}
}

/* ================= v6.14: clean box borders everywhere ================= */
/* one soft style for every light box: no heavy coloured borders, a gentle edge and soft shadow */
.card,.svc,.citytile,.areatile,.areabox,.rv-card,.gx-f,details,.pc-check{
  border:1px solid rgba(9,61,34,.07);
  border-radius:18px;
  box-shadow:0 1px 2px rgba(10,50,28,.04),0 12px 28px rgba(10,50,28,.08);
}
.rv-card{border-top:1px solid rgba(9,61,34,.07)}
/* dark boxes: borderless, just a faint light edge */
.gx-b{border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:0 12px 28px rgba(0,0,0,.2)}
.pc-check{border:1px solid rgba(255,255,255,.1)}
.cta-band{border:0}
/* eyebrow pills: no outline, just a soft tint */
.eyebrow{border:0;background:rgba(15,90,50,.08)}
/* hover: the box lifts and the shadow deepens; the border colour stays calm */
@media(hover:hover) and (pointer:fine){
  .card:hover,.svc:hover,.citytile:hover,.areatile:hover,.gx-card:hover .gx-f{
    border-color:rgba(9,61,34,.10);
    box-shadow:0 2px 4px rgba(10,50,28,.05),0 20px 40px rgba(10,50,28,.14);
  }
}

/* ================= v6.15: visible border colour on hover + parrot green hero label ================= */
@media(hover:hover) and (pointer:fine){
  .card:hover,.svc:hover,.citytile:hover,.areatile:hover,.rv-card:hover,.gx-card:hover .gx-f{
    border:1.5px solid #0f5a32;
    box-shadow:0 2px 4px rgba(10,50,28,.05),0 20px 40px rgba(10,50,28,.14);
  }
  .gx-card:hover .gx-b{border:1.5px solid #2fd358}
  details:hover{border:1.5px solid #0f5a32}
}
/* hero label: parrot green text on a dark glass pill */
.hero .eyebrow{color:#2fd358;background:rgba(6,38,22,.55);border:1px solid rgba(47,211,88,.55);text-shadow:0 0 10px rgba(47,211,88,.35)}

/* ================= v6.16: lime border on every box; hero label box matches ================= */
.card,.svc,.citytile,.areatile,.areabox,.rv-card,.gx-f,details,.pc-check{
  border:1.5px solid #b7e35a !important;
}
.gx-b{border:1.5px solid #b7e35a !important}
/* hero label: same lime-edged box style, parrot green text */
.hero .eyebrow{
  background:rgba(6,38,22,.72);
  border:1.5px solid #b7e35a;
  color:#2fd358;
  box-shadow:0 0 14px rgba(183,227,90,.25);
  text-shadow:0 0 10px rgba(47,211,88,.35);
}

/* ================= v6.17: flip card text stays inside the box ================= */
.gx-card{height:300px}
.gx-f,.gx-b{padding:18px 16px;overflow:hidden;justify-content:center}
.gx-f b{font-size:1.08rem;line-height:1.25}
.gx-ic{font-size:2rem}
.gx-b b{font-size:1.02rem;line-height:1.25}
.gx-b span{font-size:.84rem;line-height:1.45}
@media(max-width:1100px){.gx-card{height:300px}}
@media(max-width:760px){.gx-card{height:300px}.gx-b span{font-size:.9rem}.gx-f,.gx-b{padding:18px}}

/* ================= v9.5: licence section in its own look (warm sand, black ink, tangerine accent, stamp + certificate) ================= */
.lic-x{background:#f5efe3;color:#161616;padding:84px 0;position:relative;overflow:hidden}
.lic-x::before{content:"";position:absolute;left:-160px;bottom:-160px;width:420px;height:420px;border-radius:50%;background:#ff5a1f;opacity:.08;pointer-events:none}
.lic-x-grid{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:center;position:relative;z-index:1}
.lic-x-stamp{position:relative;width:260px;height:260px;margin:0 auto;border-radius:50%;background:#ff5a1f;color:#fff;display:grid;place-items:center;transform:rotate(-8deg);box-shadow:0 22px 40px rgba(255,90,31,.3)}
.lic-x-ring{width:220px;height:220px;border-radius:50%;border:2px dashed rgba(255,255,255,.75);display:grid;place-items:center}
.lic-x-ring span{font:800 1.05rem/1.25 "Bricolage Grotesque",sans-serif;letter-spacing:.2em;text-align:center}
.lic-x-stamp b{position:absolute;right:26px;bottom:26px;width:52px;height:52px;border-radius:50%;background:#161616;color:#f5efe3;display:grid;place-items:center;font-size:1.5rem;border:3px solid #f5efe3}
.lic-x-tag{display:inline-block;font:800 .8rem "Source Sans 3",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#ff5a1f;margin-bottom:12px}
.lic-x h2{color:#161616;font-size:clamp(1.8rem,3.4vw,2.7rem);margin:0 0 14px;max-width:18ch}
.lic-x h2::after{display:none}
.lic-x-intro{color:#3b3630;font-size:1.05rem;max-width:58ch}
.lic-x-cert{margin:26px 0 0;padding:26px 28px;background:#fffdf8;border:2px dashed #161616;border-radius:6px;max-width:560px;position:relative}
.lic-x-cert small{display:block;font:700 .78rem "Source Sans 3",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6a625a}
.lic-x-no{font:800 2.1rem/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;color:#161616;margin:8px 0 10px;display:inline-block;border-bottom:4px solid #ff5a1f;padding-bottom:4px}
.lic-x-cert p{color:#3b3630;font-size:.96rem;margin:10px 0 0;max-width:none}
.lic-x-btn{display:inline-block;margin-top:20px;padding:14px 24px;background:#161616;color:#f5efe3;font-weight:700;text-decoration:none;border-radius:4px;transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}
.lic-x-btn:hover{background:#ff5a1f;color:#fff;transform:translateY(-2px);box-shadow:0 10px 22px rgba(255,90,31,.3)}
.lic-x-btn:focus-visible{outline:3px solid #ff5a1f;outline-offset:3px}
.lic-x-note{font-size:.82rem;color:#6a625a;margin:18px 0 0;max-width:60ch}
.lic-x-foot{color:#161616;font-weight:600;margin:22px 0 0;max-width:60ch}
.lic-link{color:#ff5a1f;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.lic-link:hover{color:#161616}
@media(max-width:900px){.lic-x-grid{grid-template-columns:1fr;gap:36px;text-align:center}.lic-x h2{margin-left:auto;margin-right:auto}.lic-x-tag{display:block}.lic-x-intro,.lic-x-foot,.lic-x-note{margin-left:auto;margin-right:auto}.lic-x-cert{margin-left:auto;margin-right:auto;text-align:left}}
@media(max-width:760px){.lic-x{padding:56px 0}.lic-x-stamp{width:200px;height:200px}.lic-x-ring{width:170px;height:170px}.lic-x-ring span{font-size:.85rem}.lic-x-cert{padding:20px 18px}.lic-x-no{font-size:1.5rem}}

/* ================= v9.6: licence section in the website green (same layout, Movenzo colours) ================= */
.lic-x{background:linear-gradient(160deg,#062616 0%,#0f5a32 100%);color:#fff}
.lic-x::before{background:#b7e35a;opacity:.10}
.lic-x-stamp{background:linear-gradient(135deg,#0f5a32,#062616);color:#b7e35a;box-shadow:0 0 0 6px rgba(183,227,90,.18),0 22px 40px rgba(0,0,0,.35)}
.lic-x-ring{border:2px dashed rgba(183,227,90,.7)}
.lic-x-ring span{color:#fff}
.lic-x-stamp b{background:#b7e35a;color:#0f2a1a;border:3px solid #062616}
.lic-x-tag{color:#2fd358}
.lic-x h2{color:#fff}
.lic-x-intro{color:#d6eadb}
.lic-x-cert{background:rgba(6,38,22,.7);border:2px dashed #b7e35a;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.lic-x-cert small{color:#9fd3ae}
.lic-x-no{color:#2fd358;border-bottom:4px solid #b7e35a;text-shadow:0 0 14px rgba(47,211,88,.3)}
.lic-x-cert p{color:#d6eadb}
.lic-x-btn{background:#b7e35a;color:#0f2a1a;border-radius:12px;box-shadow:0 6px 16px rgba(183,227,90,.25)}
.lic-x-btn:hover{background:#c9f07a;color:#0f2a1a;box-shadow:0 12px 24px rgba(183,227,90,.35)}
.lic-x-btn:focus-visible{outline-color:#b7e35a}
.lic-x-note{color:#9fd3ae}
.lic-x-foot{color:#d6eadb}
.lic-link{color:#b7e35a}
.lic-link:hover{color:#fff}

/* ================= v9.9: bottom licence block, reference layout in Movenzo colours ================= */
.lic-strip{background:#ffffff;padding:52px 0 46px;border-top:1px solid #dcebe0;text-align:center}
.lic-strip-in{display:flex;flex-direction:column;align-items:center;gap:18px}
.lic-strip-mark{display:flex;align-items:center;gap:10px;color:#0f5a32}
.lic-strip-mark b{font:700 1.35rem/1.1 "Bricolage Grotesque",sans-serif;color:#0f5a32;letter-spacing:.01em}
.lic-strip-btn{display:inline-block;padding:14px 34px;border-radius:6px;background:#0f5a32;color:#ffffff;font:700 1rem "Source Sans 3",sans-serif;letter-spacing:.02em;text-decoration:none;box-shadow:0 8px 18px rgba(15,90,50,.22);transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}
.lic-strip-btn:hover{background:#093d22;transform:translateY(-2px);box-shadow:0 14px 26px rgba(9,61,34,.3)}
.lic-strip-btn:focus-visible{outline:3px solid #b7e35a;outline-offset:3px}
.lic-strip-text{margin:6px 0 0;max-width:620px;color:var(--ink);font-size:1.02rem;line-height:1.6}
.lic-strip-text span{color:#0f5a32;font-weight:700}
.lic-strip-text strong{color:#2fd358;font-weight:800}
.lic-strip-no{margin:0;color:var(--muted);font-size:.92rem}
.lic-strip-no a{color:#0f5a32;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.lic-strip{padding:40px 0 34px}.lic-strip-btn{width:100%;max-width:340px}}


/* ================= v9.10: bottom licence text always readable on white ================= */
.lic-strip,.lic-strip p,.lic-strip-text,.lic-strip-no{color:#14231a}
.lic-strip-text{color:#14231a !important}
.lic-strip-text span{color:#0f5a32 !important}
.lic-strip-text strong{color:#1f9d4a !important}
.lic-strip-no{color:#4d5f53 !important}

/* ================= v9.11: bottom licence block in the bold website colours (matches the dark green sections) ================= */
.lic-strip{background:linear-gradient(160deg,#062616 0%,#0f5a32 100%);border-top:1.5px solid #b7e35a;border-bottom:0}
.lic-strip,.lic-strip p,.lic-strip-text,.lic-strip-no{color:#ffffff !important}
.lic-strip-mark{color:#b7e35a}
.lic-strip-mark b{color:#ffffff !important}
.lic-strip-mark svg circle{stroke:#b7e35a}
.lic-strip-mark svg path:first-of-type{fill:#2fd358}
.lic-strip-btn{background:#b7e35a;color:#0f2a1a !important;box-shadow:0 8px 18px rgba(183,227,90,.25)}
.lic-strip-btn:hover{background:#c9f07a;color:#0f2a1a !important;box-shadow:0 14px 26px rgba(183,227,90,.35)}
.lic-strip-btn:focus-visible{outline-color:#b7e35a}
.lic-strip-text span{color:#b7e35a !important}
.lic-strip-text strong{color:#2fd358 !important;text-shadow:0 0 12px rgba(47,211,88,.3)}
.lic-strip-no{color:#d6eadb !important}
.lic-strip-no a{color:#b7e35a !important}

/* ================= v9.13: hero and slider optimised for phones ================= */
.hs{touch-action:pan-y}
.hs-dots button{position:relative}
.hs-dots button::after{content:"";position:absolute;inset:-11px}
@media(max-width:760px){
  .hero{min-height:640px;min-height:min(640px,92svh)}
  .hero::after{background:linear-gradient(180deg,rgba(6,38,22,.35) 0%,rgba(6,38,22,.82) 52%,rgba(6,38,22,.96) 100%)}
  .hero .wrap{padding-top:52px;padding-bottom:88px}
  .hero h1{font-size:clamp(2rem,9vw,2.9rem);line-height:1.04}
  .hero .eyebrow{font-size:.78rem;letter-spacing:.06em;padding:6px 12px}
  .hero p{font-size:1.02rem;line-height:1.55;margin-top:16px}
  .hero .row{margin-top:20px;gap:12px}
  .hero .row .btn{min-height:52px}
  .ticks{margin-top:22px}
  .ticks span{font-size:.84rem;padding:6px 10px}
  .hs-dots{right:50%;transform:translateX(50%);bottom:18px;gap:10px}
  .hs-dots button{width:11px;height:11px}
  .hs-dots button.on{width:30px}
}
@media(max-width:380px){
  .hero .wrap{padding-left:16px;padding-right:16px}
  .hero h1{font-size:1.9rem}
  .hero p{font-size:.98rem}
  .hero .row .btn{padding:14px 18px}
}

/* ================= v9.14: scroll reveal (uses the translate property so card hover lifts still work) ================= */
.js .reveal{opacity:0;translate:0 28px;transition:opacity .8s ease,translate .8s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;translate:none;transition:none}}

/* ================= v9.15: cursor a little bigger (still small) ================= */
.mz-ic{width:36px;height:36px;margin:-18px 0 0 -18px}
.mz-cur.hov .mz-ic{width:44px;height:44px;margin:-22px 0 0 -22px}
.mz-cur.press .mz-ic{width:28px;height:28px;margin:-14px 0 0 -14px}


/* ================= v9.16: custom cursor on all main content (services, quote, FAQ, service and city pages) ================= */
@media(hover:hover) and (pointer:fine){
  html.mz-ready main,html.mz-ready main *,html.mz-ready footer,html.mz-ready footer *{cursor:none}
  html.mz-ready header,html.mz-ready header *,html.mz-ready .mbar,html.mz-ready .mbar *{cursor:pointer}
  html.mz-ready input,html.mz-ready textarea,html.mz-ready select,html.mz-ready label[for]{cursor:text}
  html.mz-ready input[type=submit],html.mz-ready button[type=submit]{cursor:pointer}
}

/* ================= v9.17: long-press animation (ring fills, leaves burst) ================= */
main,footer{-webkit-touch-callout:none}
.lp-ring{position:fixed;left:0;top:0;width:76px;height:76px;margin:-38px 0 0 -38px;pointer-events:none;z-index:9997}
.lp-ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.lp-ring circle{fill:none;stroke-width:3;stroke-linecap:round}
.lp-ring .bg{stroke:rgba(183,227,90,.25)}
.lp-ring .fg{stroke:#b7e35a;stroke-dasharray:213.6;stroke-dashoffset:213.6;filter:drop-shadow(0 0 6px rgba(183,227,90,.7))}
.lp-ring.go .fg{animation:lpFill .6s linear forwards}
@keyframes lpFill{to{stroke-dashoffset:0}}
.lp-core{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:0 60% 0 60%;background:#b7e35a;transform:scale(0);opacity:.9}
.lp-ring.go .lp-core{animation:lpCore .6s ease forwards}
@keyframes lpCore{to{transform:scale(1) rotate(160deg)}}
.lp-leaf{position:fixed;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:0 60% 0 60%;pointer-events:none;z-index:9998;animation:lpBurst .9s cubic-bezier(.2,.7,.3,1) forwards;box-shadow:0 0 10px rgba(183,227,90,.5)}
@keyframes lpBurst{from{transform:translate(0,0) rotate(0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(260deg) scale(.4);opacity:0}}

/* ================= v9.18: SEO and CRO quick wins ================= */
.hero-lic{margin:16px 0 0;font-size:.9rem;color:#d6eadb;opacity:.9}
.qz-micro,.quote-micro{margin:10px 0 0;font-size:.88rem;color:var(--muted)}

/* ================= v9.19: story loader (van drives, collects items, counter to 100) ================= */
.ld-count{font:800 3.2rem/1 "Bricolage Grotesque",sans-serif;color:#fff;letter-spacing:-.02em;margin-bottom:18px;font-variant-numeric:tabular-nums}
.ld-count b{color:#b7e35a;font-weight:800}
.ld-count span{color:#b7e35a;font-size:1.4rem;margin-left:4px}
.ld-scene{position:relative;width:min(340px,80vw);height:120px;margin:0 auto 18px;overflow:hidden}
.ld-road{position:absolute;left:0;right:0;bottom:14px;height:4px;border-radius:4px;background-image:linear-gradient(90deg,rgba(183,227,90,.85) 0 18px,transparent 18px);background-size:34px 100%;animation:ldRoad .5s linear infinite}
@keyframes ldRoad{from{background-position:0 0}to{background-position:-34px 0}}
.ld-items{position:absolute;left:0;right:0;bottom:44px;display:flex;justify-content:space-around;padding:0 14px}
.ld-it{font-style:normal;font-size:1.8rem;line-height:1;opacity:0;animation:ldPick .9s ease-in both;animation-delay:calc(var(--d)*.45s + .4s)}
@keyframes ldPick{0%{opacity:0;transform:translateY(-16px) scale(.5)}30%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translate(60px,4px) scale(.3)}}
.ld-van{position:absolute;left:-60px;bottom:18px;font-size:2.8rem;line-height:1;animation:ldDrive 2.4s cubic-bezier(.45,0,.25,1) forwards;filter:drop-shadow(0 0 10px rgba(183,227,90,.45))}
@keyframes ldDrive{from{left:-60px}to{left:calc(100% - 52px)}}
@media(max-width:760px){.ld-count{font-size:2.6rem}.ld-scene{height:104px}.ld-van{font-size:2.3rem}.ld-it{font-size:1.5rem}}
@media(prefers-reduced-motion:reduce){.ld-road,.ld-van,.ld-it{animation:none}.ld-it{opacity:0}.ld-van{left:calc(100% - 52px)}}

/* ================= v9.21: WordPress fixes: hero readability, smooth anchors, touch widgets ================= */
/* hero: background graphics at 10% max; text layer always above them */
.hero-fx{opacity:.1 !important;z-index:0}
.hero-bg{z-index:0}
.hero::after{z-index:1}
.hero .wrap{position:relative;z-index:2}
.hero h1,.hero p{text-shadow:0 2px 16px rgba(0,0,0,.45)}

/* smooth scrolling to #quote, #services, #faq etc., clear of the sticky header */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:90px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* touch: vertical page scroll always wins over the sliders; no double-tap zoom on controls */
.cmp,.hs,[data-cmp],[data-hs]{touch-action:pan-y}
button,a,[role="tab"],.bi-btn,.lab button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
img,video{max-width:100%;height:auto}
body{overflow-x:clip}

/* ================= v9.22: unique header extras (open now pill, call pill, leaf logo) ================= */
header.nav .hdr-pills{display:none;align-items:center;gap:10px;margin-left:auto}
@media(min-width:761px){header.nav .hdr-pills{display:flex}}
header.nav .hdr-open{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font:700 .78rem "Source Sans 3",sans-serif;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid rgba(183,227,90,.4);background:rgba(6,38,22,.55);color:#cfe2d2;white-space:nowrap}
header.nav .hdr-open i{width:8px;height:8px;border-radius:50%;background:#64748b;flex:none}
header.nav .hdr-open.is-open{color:#2fd358;border-color:#2fd358}
header.nav .hdr-open.is-open i{background:#2fd358;animation:hdrPulse 1.8s ease-out infinite}
@keyframes hdrPulse{0%{box-shadow:0 0 0 0 rgba(47,211,88,.6)}70%,100%{box-shadow:0 0 0 9px rgba(47,211,88,0)}}
header.nav .hdr-call{padding:8px 14px;border-radius:999px;border:1.5px solid #b7e35a;color:#b7e35a;font:700 .86rem "Source Sans 3",sans-serif;text-decoration:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease,transform .2s ease}
header.nav .hdr-call:hover{background:#b7e35a;color:#0f2a1a;transform:translateY(-2px)}
header.nav .hdr-call:focus-visible{outline:3px solid #b7e35a;outline-offset:3px}
header.nav .logo{display:flex;align-items:center;gap:0 8px;flex-wrap:wrap}
header.nav .logo small{flex-basis:100%}
header.nav .logo-leaf{width:28px;height:28px;flex:none;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
header.nav .logo:hover .logo-leaf{transform:rotate(-20deg) scale(1.12)}
@media(prefers-reduced-motion:reduce){header.nav .hdr-open.is-open i{animation:none}header.nav .logo-leaf{transition:none}}


/* ================= v10.1: more beautiful city pages ================= */
.pagehead.city{background:radial-gradient(circle at 85% 20%,rgba(183,227,90,.22),transparent 45%),linear-gradient(135deg,#062616 0%,#093d22 55%,#0f5a32 100%);color:#fff}
.pagehead.city h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.pagehead.city h1::after{content:"";display:block;width:64px;height:4px;border-radius:4px;background:linear-gradient(90deg,#b7e35a,#2fd358);margin-top:14px}
.pagehead.city p{color:#d6eadb}
.pagehead.city .ph-art{border-radius:24px;overflow:hidden;border:1.5px solid #b7e35a;box-shadow:0 24px 50px rgba(0,0,0,.35)}
.pagehead.city .ph-art figcaption{background:rgba(6,38,22,.8);color:#b7e35a;font-weight:700}

/* service steps: numbered lime badges */
.steps{counter-reset:cityStep;list-style:none;padding:0}
.steps li{counter-increment:cityStep;position:relative;padding:4px 0 4px 52px;margin-bottom:14px}
.steps li::before{content:counter(cityStep);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#b7e35a,#8fd14f);color:#0f2a1a;font:800 1rem "Bricolage Grotesque",sans-serif;display:grid;place-items:center;box-shadow:0 6px 14px rgba(183,227,90,.3)}

/* area tiles and service cards: pin and icon badges */
.areatile{display:flex;align-items:center;gap:12px}
.areatile .pin{width:38px;height:38px;border-radius:50%;background:rgba(183,227,90,.2);display:grid;place-items:center;flex:none}

/* city call-to-action band */
.city-cta{background:linear-gradient(160deg,#062616 0%,#0f5a32 100%);color:#fff;padding:64px 0;position:relative;overflow:hidden}
.city-cta::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(183,227,90,.25),transparent 65%);pointer-events:none}
.city-cta-in{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;position:relative;z-index:1}
.city-cta h2{color:#fff;margin:10px 0 10px}
.city-cta h2::after{display:none}
.city-cta p{color:#d6eadb;margin:0;max-width:56ch}
.city-cta-tag{display:inline-block;padding:6px 14px;border-radius:999px;border:1px solid #b7e35a;color:#2fd358;font:700 .78rem "Source Sans 3",sans-serif;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:760px){.city-cta{padding:44px 0}.city-cta-in{flex-direction:column;align-items:stretch}.city-cta .btn{text-align:center;width:100%}}

/* ================= v10.2: realistic 3D tilt on boxes (eased motion, light sheen, shifting shadow) ================= */
.tilt{position:relative;transform-style:preserve-3d;will-change:transform;transition:box-shadow .25s ease}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 28%,transparent 55%);opacity:0;transition:opacity .35s ease;mix-blend-mode:soft-light}
.tilt:hover::after{opacity:1}
@media(prefers-reduced-motion:reduce){.tilt{transform:none!important}.tilt::after{display:none}}

/* ================= v10.3: more interesting city illustration (all city pages) ================= */
.pagehead.city .ph-art{overflow:visible;border:0;box-shadow:none;padding:14px;isolation:isolate;transition:transform .5s ease}
.pagehead.city .ph-art::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px dashed rgba(183,227,90,.5);animation:cityRing 26s linear infinite;pointer-events:none;z-index:-1}
.pagehead.city .ph-art::after{content:"";position:absolute;inset:14px;border-radius:24px;background:linear-gradient(115deg,transparent 40%,rgba(183,227,90,.2) 50%,transparent 60%);background-size:250% 100%;animation:citySheen 5.5s ease-in-out infinite;pointer-events:none;z-index:2}
@keyframes cityRing{to{transform:rotate(360deg)}}
@keyframes citySheen{0%{background-position:150% 0}100%{background-position:-150% 0}}
.pagehead.city .ph-art svg{filter:drop-shadow(0 0 16px rgba(183,227,90,.35)) drop-shadow(0 14px 26px rgba(0,0,0,.3));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pagehead.city .ph-art:hover svg{transform:perspective(900px) rotateY(-8deg) rotateX(4deg) scale(1.03)}
.pagehead.city .ph-art svg>*{opacity:0;animation:artIn .7s ease forwards}
.pagehead.city .ph-art svg>:nth-child(1){animation-delay:70ms}
.pagehead.city .ph-art svg>:nth-child(2){animation-delay:140ms}
.pagehead.city .ph-art svg>:nth-child(3){animation-delay:210ms}
.pagehead.city .ph-art svg>:nth-child(4){animation-delay:280ms}
.pagehead.city .ph-art svg>:nth-child(5){animation-delay:350ms}
.pagehead.city .ph-art svg>:nth-child(6){animation-delay:420ms}
.pagehead.city .ph-art svg>:nth-child(7){animation-delay:490ms}
.pagehead.city .ph-art svg>:nth-child(8){animation-delay:560ms}
.pagehead.city .ph-art svg>:nth-child(9){animation-delay:630ms}
.pagehead.city .ph-art svg>:nth-child(10){animation-delay:700ms}
.pagehead.city .ph-art svg>:nth-child(11){animation-delay:770ms}
.pagehead.city .ph-art svg>:nth-child(12){animation-delay:840ms}
.pagehead.city .ph-art svg>:nth-child(13){animation-delay:910ms}
.pagehead.city .ph-art svg>:nth-child(14){animation-delay:980ms}
.pagehead.city .ph-art svg>:nth-child(15){animation-delay:1050ms}
.pagehead.city .ph-art svg>:nth-child(16){animation-delay:1120ms}
.pagehead.city .ph-art svg>:nth-child(17){animation-delay:1190ms}
.pagehead.city .ph-art svg>:nth-child(18){animation-delay:1260ms}
.pagehead.city .ph-art svg>:nth-child(19){animation-delay:1330ms}
.pagehead.city .ph-art svg>:nth-child(20){animation-delay:1400ms}
.pagehead.city .ph-art svg>:nth-child(21){animation-delay:1470ms}
.pagehead.city .ph-art svg>:nth-child(22){animation-delay:1540ms}
.pagehead.city .ph-art svg>:nth-child(23){animation-delay:1610ms}
.pagehead.city .ph-art svg>:nth-child(24){animation-delay:1680ms}
@keyframes artIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pagehead.city .ph-art figcaption::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#2fd358;margin-right:8px;vertical-align:middle;animation:hdrPulse 1.8s ease-out infinite}
@media(prefers-reduced-motion:reduce){.pagehead.city .ph-art::before,.pagehead.city .ph-art::after,.pagehead.city .ph-art svg>*,.pagehead.city .ph-art figcaption::before{animation:none!important;opacity:1!important;transform:none!important}}

/* ================= v10.4: city hero 3D and mobile-friendly box tilt ================= */
.pagehead.city .ph-art.tilting{transition:none}
.pagehead.city .ph-text{will-change:transform}
.tilt-touch{position:relative;will-change:transform;transition:box-shadow .2s ease}
@media(hover:none) and (pointer:coarse){
  .card:hover,.svc:hover,.areatile:hover,.rv-card:hover{transform:none}
  .tilt::after{display:none}
}

/* ================= v10.6: mood picker styled like the rest of the site ================= */
.mood-row{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.mood-btn{min-height:50px}
.mood-btn.on{background:#0f5a32;border-color:#0f5a32;color:#fff;box-shadow:0 8px 18px rgba(15,90,50,.22)}
.mood-out{margin-top:24px;max-width:640px}
.mood-card{display:none}
.mood-card.on{display:block;animation:moodIn .4s ease both}
.mood-card h3{margin:0 0 8px}
.mood-card p{margin:0 0 18px}
@keyframes moodIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mood-card.on{animation:none}}


/* ================= v10.7: lime box borders more prominent on laptops ================= */
.card,.svc,.areatile,.areabox,.rv-card,.gx-f,details,.pc-check{
  border:2px solid #8fd14f !important;
  box-shadow:0 0 0 3px rgba(183,227,90,.2),0 14px 30px rgba(10,50,28,.1) !important;
}
.gx-b{border:2px solid #8fd14f !important}
@media(hover:hover) and (pointer:fine){
  .card:hover,.svc:hover,.areatile:hover,.rv-card:hover,.gx-card:hover .gx-f{
    border-color:#0f5a32 !important;
    box-shadow:0 0 0 3px rgba(183,227,90,.35),0 20px 40px rgba(10,50,28,.16) !important;
  }
}

/* ================= v10.8: a delightful quote form that matches the site ================= */
#qf.qz-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;background:#fff;border:2px solid #8fd14f;border-radius:22px;padding:32px;box-shadow:0 0 0 3px rgba(183,227,90,.2),0 22px 44px rgba(10,50,28,.12)}
#qf .f{grid-column:1/-1}
#qf label{display:block;font-weight:700;font-size:.92rem;color:#0f5a32;margin:0 0 6px;letter-spacing:.01em}
#qf input,#qf textarea{width:100%;min-height:52px;padding:12px 16px;border:1.5px solid #cbdccf;border-radius:12px;background:#f8fcf9;color:#14231a;font:500 1rem "Source Sans 3",sans-serif;transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease}
#qf textarea{min-height:120px;resize:vertical}
#qf input::placeholder,#qf textarea::placeholder{color:#7d8f83}
#qf input:hover,#qf textarea:hover{border-color:#8fd14f}
#qf input:focus,#qf textarea:focus{outline:none;background:#fff;border-color:#0f5a32;box-shadow:0 0 0 4px rgba(183,227,90,.35)}
#qf input:valid:not(:placeholder-shown){border-color:#2fd358;background:#f3fdf6}
#qf .btn{min-height:56px;font-size:1.05rem;border-radius:14px;letter-spacing:.02em}
#qf #msg{grid-column:1/-1;margin:0;padding:14px 16px;border-radius:12px;background:#eafbef;font-weight:700}
.qz-prog{grid-column:1/-1;height:7px;border-radius:7px;background:#e4f2e8;overflow:hidden}
.qz-prog i{display:block;height:100%;width:0;border-radius:7px;background:linear-gradient(90deg,#8fd14f,#0f5a32);box-shadow:0 0 10px rgba(143,209,79,.6);transition:width .45s cubic-bezier(.2,.8,.2,1)}
@media(max-width:760px){#qf.qz-form{grid-template-columns:1fr;padding:22px}}
@media(prefers-reduced-motion:reduce){.qz-prog i{transition:none}}

/* ================= v10.9: quote section rebuilt as two clear panels ================= */
.qz-sec{background:linear-gradient(180deg,#f3faf5 0%,#ffffff 100%)}
.qz-split{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
.qz-info{position:sticky;top:110px;background:linear-gradient(160deg,#062616 0%,#0f5a32 100%);color:#fff;border:2px solid #8fd14f;border-radius:22px;padding:34px;box-shadow:0 0 0 3px rgba(183,227,90,.2),0 22px 44px rgba(10,50,28,.2)}
.qz-info h2{color:#fff;margin:14px 0 12px}
.qz-info h2::after{background:linear-gradient(90deg,#b7e35a,#2fd358)}
.qz-info p{color:#d6eadb}
.qz-info b{color:#fff}
.qz-info ul{color:#d6eadb;padding-left:20px}
.qz-info li{margin:6px 0}
.qz-info .eyebrow{background:rgba(6,38,22,.5);color:#2fd358;border-color:#b7e35a}
.qz-note{margin-top:18px;padding:12px 16px;border-radius:12px;background:rgba(183,227,90,.12);border:1px solid rgba(183,227,90,.4);color:#fff !important;font-weight:600}
@media(max-width:900px){.qz-split{grid-template-columns:1fr;gap:28px}.qz-info{position:static;padding:26px}}
@media(max-width:760px){.qz-info{padding:22px}}

/* ================= v10.10: quote form polish (readable fields, brighter list) ================= */
.qz-info ul,.qz-info ul li{color:#eef7f0 !important}
.qz-info p{color:#eef7f0}
#qf input,#qf textarea{border-color:#9fbfa9;background:#f4faf6}
#qf input:hover,#qf textarea:hover{border-color:#5fae74}
#qf input::placeholder,#qf textarea::placeholder{color:#6f8a79}
#qf label{color:#0a4a28}

/* ================= v10.12: quote section in dark green; info panel lighter so it stands out; form card stays white ================= */
.qz-sec{background:radial-gradient(circle at 90% 0%,rgba(183,227,90,.14),transparent 42%),linear-gradient(170deg,#052214 0%,#083a21 60%,#0c4a2a 100%) !important}
.qz-info{background:linear-gradient(160deg,#167a43 0%,#0f5a32 100%) !important;border:2px solid #b7e35a !important}
.qz-info .eyebrow{background:rgba(5,34,20,.55) !important;color:#b7e35a !important}
.qz-info ul,.qz-info ul li,.qz-info p{color:#f1faf4 !important}
#qf.qz-form{background:#ffffff !important}

/* ================= v10.13: form card in the site's green (no white) ================= */
#qf.qz-form{background:linear-gradient(160deg,#167a43 0%,#0f5a32 100%) !important;border:2px solid #b7e35a !important;box-shadow:0 0 0 3px rgba(183,227,90,.18),0 22px 44px rgba(0,0,0,.25) !important}
#qf label{color:#dff5e6 !important}
#qf input,#qf textarea{background:rgba(5,34,20,.55) !important;border-color:rgba(183,227,90,.5) !important;color:#ffffff !important;-webkit-text-fill-color:#ffffff;caret-color:#b7e35a}
#qf input::placeholder,#qf textarea::placeholder{color:#9fd3ae !important;-webkit-text-fill-color:#9fd3ae;opacity:1}
#qf input:hover,#qf textarea:hover{border-color:#b7e35a !important}
#qf input:focus,#qf textarea:focus{background:rgba(5,34,20,.8) !important;border-color:#b7e35a !important;box-shadow:0 0 0 4px rgba(183,227,90,.3) !important}
#qf input:valid:not(:placeholder-shown){background:rgba(47,211,88,.12) !important;border-color:#2fd358 !important}
#qf .btn,#qf button[type=submit]{background:#b7e35a !important;border-color:#b7e35a !important;color:#0f2a1a !important;box-shadow:0 8px 20px rgba(183,227,90,.3) !important}
#qf .btn:hover,#qf button[type=submit]:hover{background:#c9f07a !important;border-color:#c9f07a !important;color:#0f2a1a !important}
.qz-prog{background:rgba(5,34,20,.5) !important}
#qf #msg{background:rgba(5,34,20,.6) !important;color:#b7e35a !important}

/* ================= v10.14: darker form card with strong contrast ================= */
#qf.qz-form{background:linear-gradient(160deg,#03150c 0%,#052214 100%) !important;border:2px solid #b7e35a !important;box-shadow:0 0 0 3px rgba(183,227,90,.22),0 26px 50px rgba(0,0,0,.45) !important}
#qf label{color:#b7e35a !important;font-weight:800 !important;letter-spacing:.02em}
#qf input,#qf textarea{background:#0a2616 !important;border:1.5px solid #3f8a5a !important;color:#ffffff !important;-webkit-text-fill-color:#ffffff}
#qf input::placeholder,#qf textarea::placeholder{color:#7fb797 !important;-webkit-text-fill-color:#7fb797}
#qf input:hover,#qf textarea:hover{border-color:#b7e35a !important}
#qf input:focus,#qf textarea:focus{background:#0d2f1c !important;border-color:#b7e35a !important;box-shadow:0 0 0 4px rgba(183,227,90,.35) !important}
#qf input:valid:not(:placeholder-shown){border-color:#2fd358 !important;background:#0c3320 !important}
#qf .btn,#qf button[type=submit]{background:#b7e35a !important;color:#03150c !important;font-weight:800 !important}
.qz-prog{background:#0a2616 !important}
.qz-prog i{background:linear-gradient(90deg,#b7e35a,#2fd358) !important}
#qf #msg{background:#0a2616 !important;color:#b7e35a !important;border:1px solid #b7e35a}

/* ================= v10.15: both quote cards share the same colours ================= */
.qz-info,#qf.qz-form{
  background:linear-gradient(160deg,#03150c 0%,#052214 100%) !important;
  border:2px solid #b7e35a !important;
  border-radius:22px !important;
  box-shadow:0 0 0 3px rgba(183,227,90,.22),0 26px 50px rgba(0,0,0,.45) !important;
}

/* ================= v10.17: enhanced before and after section ================= */
.cmp-grid{gap:28px}
.cmp-fig{background:linear-gradient(160deg,#03150c 0%,#052214 100%);border:2px solid #b7e35a;border-radius:22px;padding:12px 12px 16px;box-shadow:0 0 0 3px rgba(183,227,90,.18),0 22px 44px rgba(10,50,28,.18);transition:transform .35s ease,box-shadow .35s ease}
.cmp-fig .cmp{border-radius:14px;box-shadow:none}
.cmp-fig figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 6px 0;color:#f1faf4;font-weight:700}
.cmp-fig figcaption::before{content:"";width:9px;height:9px;border-radius:50%;background:#2fd358;box-shadow:0 0 0 0 rgba(47,211,88,.6);animation:hdrPulse 1.8s ease-out infinite;flex:none}
.cmp-fig figcaption::after{content:"Drag to compare";font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#b7e35a;margin-left:auto;white-space:nowrap}
.cmp-fig:hover{box-shadow:0 0 0 3px rgba(183,227,90,.35),0 28px 50px rgba(0,0,0,.35)}
.cmp .ba-tag{font-size:.72rem;letter-spacing:.12em;padding:5px 10px;border-radius:999px;background:rgba(3,21,12,.8);color:#b7e35a;border:1px solid rgba(183,227,90,.6);z-index:3}
.cmp .ba-tag.a{background:#b7e35a;color:#03150c;border-color:#b7e35a}
.cmp .ba-handle{width:52px;margin-left:-26px;z-index:4}
.cmp .ba-handle span{background:#b7e35a;color:#03150c;border:2px solid #03150c;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.cmp .ba-handle span small{color:#03150c}
@media(hover:hover) and (pointer:fine){.cmp-fig:hover .cmp img{transform:scale(1.02)}}
@media(max-width:760px){.cmp-fig{padding:10px 10px 14px;border-radius:18px}.cmp .ba-handle{width:60px;margin-left:-30px}.cmp .ba-handle span{width:60px;height:60px}.cmp-fig figcaption::after{display:none}}
@media(prefers-reduced-motion:reduce){.cmp-fig figcaption::before{animation:none}}

/* ================= v10.18: whole-site polish (consistent colours, footer, page headers, spacing) ================= */
/* section headings: one size scale and a lime accent everywhere */
section h2{letter-spacing:-.02em}
section .eyebrow{margin-bottom:6px}

/* page headers (services, areas, city): same dark green glow as the quote and licence blocks */
.pagehead{background:radial-gradient(circle at 88% 15%,rgba(183,227,90,.16),transparent 42%),linear-gradient(170deg,#03150c 0%,#083a21 60%,#0c4a2a 100%);color:#fff;border-bottom:2px solid #b7e35a}
.pagehead h1{color:#fff}
.pagehead p{color:#e6f4ea}

/* cards: one radius and a calm, consistent hover across the site */
.card,.svc,.areatile,.rv-card{border-radius:20px}
.card h3,.svc h3,.areatile h3{letter-spacing:-.01em}

/* footer: dark, lime top rule, tidy link lists */
footer{background:linear-gradient(180deg,#041a0e 0%,#03150c 100%) !important;border-top:2px solid #b7e35a;color:#d6eadb}
footer h3{color:#b7e35a;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
footer .ft-links a,footer ul a{color:#d6eadb;transition:color .2s ease}
footer .ft-links a:hover,footer ul a:hover{color:#b7e35a}
footer .ft-bottom{border-top:1px solid rgba(183,227,90,.25);color:#9fc3ab}
footer .ft-bottom a{color:#b7e35a}

/* focus and selection colours */
::selection{background:#b7e35a;color:#03150c}

/* phones: calmer section rhythm and comfortable side padding */
@media(max-width:760px){
  section{padding:56px 0}
  .wrap{padding-left:20px;padding-right:20px}
  .pagehead{padding:40px 0 36px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;animation-iteration-count:1 !important}}

/* ================= v10.19: hero slider arrows ================= */
.hs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:48px;height:48px;border-radius:50%;border:1.5px solid #b7e35a;background:rgba(3,21,12,.55);color:#b7e35a;font:400 1.7rem/1 "Source Sans 3",sans-serif;display:grid;place-items:center;cursor:pointer;padding:0;transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hs-prev{left:12px}
.hs-next{right:12px}
.hs-arrow:hover{background:#b7e35a;color:#03150c;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.hs-arrow:active{transform:translateY(-50%) scale(.94)}
.hs-arrow:focus-visible{outline:3px solid #b7e35a;outline-offset:3px}
@media(max-width:760px){
  .hs-arrow{top:auto;bottom:12px;transform:none;width:40px;height:40px;font-size:1.4rem}
  .hs-arrow:active{transform:scale(.94)}
  .hs-prev{left:14px}
  .hs-next{right:14px}
}

/* ================= v10.21: hero swipe anywhere (touch and mouse drag) ================= */
.hero{touch-action:pan-y}

/* ================= v10.22: quote fields stay dark and readable while typing (browser autofill fix) ================= */
#qf input:-webkit-autofill,
#qf input:-webkit-autofill:hover,
#qf input:-webkit-autofill:focus,
#qf input:-webkit-autofill:active,
#qf textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #0a2616 inset !important;
  box-shadow:0 0 0 1000px #0a2616 inset !important;
  -webkit-text-fill-color:#ffffff !important;
  color:#ffffff !important;
  caret-color:#b7e35a;
  transition:background-color 9999s ease-in-out 0s;
}
#qf input,#qf textarea{color:#ffffff !important;-webkit-text-fill-color:#ffffff}

/* ================= v10.25: speed (off-screen animations paused, faster cursor) ================= */
.is-off,.is-off *{animation-play-state:paused !important}
/* v10.26 desktop header rules were never applied (a stray token swallowed them) and are removed; the header look is unchanged. */
@media(max-width:760px){
  header.nav{background:linear-gradient(180deg,#03150c 0%,#062616 100%)}
  header.nav .logo small{color:#b7e35a}
}

/* ================= v10.27: glass header (frosted card that floats above the page) ================= */
@media(min-width:761px){
  header.nav{background:transparent !important;border-bottom:0 !important;padding:12px 16px 0 !important;box-shadow:none !important}
  header.nav::after{display:none}
  header.nav.scrolled{background:transparent !important;box-shadow:none !important}
  header.nav .wrap{background:linear-gradient(135deg,rgba(6,38,22,.62) 0%,rgba(3,21,12,.5) 100%);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(183,227,90,.3);border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.25),0 18px 40px rgba(0,0,0,.3);padding-left:22px;padding-right:22px}
  header.nav.scrolled .wrap{background:linear-gradient(135deg,rgba(6,38,22,.8) 0%,rgba(3,21,12,.72) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 34px rgba(0,0,0,.36)}
}

/* ================= v10.29: loader without the truck; header glow line fitted inside the header card ================= */
.ld-van{display:none !important}
@media(min-width:761px){
  header.nav .wrap{position:relative}
  header.nav .wrap::after{content:"";position:absolute;left:26px;right:26px;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent 0%,#b7e35a 30%,#2fd358 70%,transparent 100%);opacity:.85;pointer-events:none}
}

/* ================= v10.33: professional dynamic-island header =================
   Top of the page: the same full-width bar as before (not changed).
   After scrolling: the bar morphs into a floating island that hugs its content.
   - The header shell keeps a fixed height, so the page never jumps when the island forms.
   - The shell is click-through; only the island itself takes clicks.
   - One smooth easing curve, no bounce, and only the island changes shape. */
:root{--mz-ease:cubic-bezier(.32,.72,0,1);--mz-dur:.6s;--mz-ring:2px;--mz-island-bg:linear-gradient(135deg,rgba(6,38,22,.9) 0%,rgba(3,21,12,.84) 100%)}

header.nav{pointer-events:none;background:transparent !important;border:0 !important;box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
header.nav .wrap{pointer-events:auto}

/* thin gradient light-edge around the island (only visible while it is an island) */
header.nav .wrap::before{content:"";position:absolute;inset:calc(var(--mz-ring) * -1);border-radius:inherit;padding:var(--mz-ring);pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:
    linear-gradient(105deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%) 100% 0/260% 100% no-repeat,
    linear-gradient(135deg,#d6f478 0%,rgba(47,211,88,.5) 36%,rgba(183,227,90,.34) 64%,#d6f478 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
header.nav.scrolled .wrap::before{opacity:1;animation:mzRingSweep 1.5s var(--mz-ease) .2s backwards}

/* the island's content eases in while it forms (and when the bar returns), so nothing pops */
header.nav.scrolled .wrap>.logo,header.nav.scrolled .wrap>.hdr-pills,header.nav.scrolled .wrap>.hdr-cta,header.nav.scrolled .wrap>.menu-btn,
header.nav.melt .wrap>.logo,header.nav.melt .wrap>.hdr-pills,header.nav.melt .wrap>.hdr-cta,header.nav.melt .wrap>.menu-btn{animation:mzIslandIn .5s var(--mz-ease) .1s backwards}

/* the sliding highlight is only used on desktop */
header.nav nav .mz-lens{display:none}
header.nav .hdr-call svg{display:none}

/* scroll van: rides along the bottom edge of the bar, and under the island */
header.nav .wrap>.roadbar{left:0;right:0;bottom:-1px;transition:left var(--mz-dur) var(--mz-ease),right var(--mz-dur) var(--mz-ease),bottom var(--mz-dur) var(--mz-ease)}

/* tap-outside layer for the phone menu */
.mz-scrim{position:fixed;inset:0;z-index:55;background:rgba(2,16,9,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;touch-action:none;transition:opacity .3s ease,visibility 0s .3s}
html.menu-open .mz-scrim{opacity:1;visibility:visible;transition:opacity .3s ease}

/* ---------- desktop and tablet (761px and up) ---------- */
@media(min-width:761px){
  .mz-scrim{display:none}
  header.nav{height:84px;padding:0 !important}

  /* top of the page: full bar (same look as v10.31) */
  header.nav .wrap{position:relative;width:100%;max-width:100% !important;margin:0 auto !important;height:84px;
    padding-left:clamp(20px,4vw,64px) !important;padding-right:clamp(20px,4vw,64px) !important;
    border-radius:0 !important;border:0 !important;border-bottom:1px solid rgba(183,227,90,.22) !important;
    background:linear-gradient(90deg,rgba(3,21,12,.82) 0%,rgba(6,38,22,.72) 60%,rgba(6,38,22,.64) 100%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
    box-shadow:none !important;justify-content:center;gap:clamp(18px,2.6vw,40px);
    transition:width var(--mz-dur) var(--mz-ease),max-width var(--mz-dur) var(--mz-ease),height var(--mz-dur) var(--mz-ease),margin var(--mz-dur) var(--mz-ease),border-radius var(--mz-dur) var(--mz-ease),border-color .4s ease,box-shadow .5s ease}
  header.nav .hdr-pills{margin-left:0}
  header.nav nav{margin-left:0}

  /* tablets: the full bar fits without the phone pill (the phone icon returns in the island) */
  @media(max-width:1023px){
    header.nav .wrap{gap:14px;padding-left:20px !important;padding-right:20px !important}
    header.nav .hdr-pills{display:none}
    header.nav .logo{font-size:1.25rem}
    header.nav nav{gap:2px}
    header.nav nav>a:not(.cta),header.nav nav>.dd>a{padding:8px 11px;font-size:.95rem}
    header.nav nav a.cta{padding:9px 16px}
  }

  /* the island */
  header.nav.scrolled .wrap{width:var(--mz-iw,860px);max-width:calc(100% - 24px) !important;margin:10px auto 0 !important;height:62px;
    padding-left:20px !important;padding-right:12px !important;
    border-radius:36px !important;border:var(--mz-ring) solid transparent !important;
    background:var(--mz-island-bg) !important;
    -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px -10px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.22),0 0 28px -8px rgba(183,227,90,.35) !important;
    gap:clamp(12px,1.6vw,24px)}
  header.nav.scrolled .wrap::after{display:none}
  header.nav.scrolled .wrap>.roadbar{left:34px;right:34px;bottom:-9px;height:3px}
  header.nav.scrolled .wrap>.roadbar i{border-radius:3px}

  header.nav.scrolled .logo{flex-wrap:nowrap;font-size:1.08rem;color:var(--lime)}
  header.nav.scrolled .logo small{display:none}
  header.nav.scrolled .logo-leaf{width:24px;height:24px}

  header.nav.scrolled nav{gap:2px}
  header.nav.scrolled nav>a:not(.cta),header.nav.scrolled nav>.dd>a{padding:8px 13px;font-size:.93rem;color:#fff;background:transparent;border-radius:999px}
  header.nav.scrolled nav>a:not(.cta):hover,header.nav.scrolled nav>.dd>a:hover,
  header.nav.scrolled nav>a.on:not(.cta),header.nav.scrolled nav>.dd>a.on{color:var(--lime);background:transparent}
  header.nav.scrolled nav>a:not(.cta)::after,header.nav.scrolled nav>.dd>a::after{display:none}
  header.nav.scrolled nav a.cta{margin-left:6px;padding:9px 18px;font-size:.93rem;font-weight:700;border-radius:999px;color:#03150c;
    background:linear-gradient(135deg,#c9f07a 0%,#b7e35a 100%);box-shadow:0 6px 16px rgba(183,227,90,.28);transition:transform .25s ease,box-shadow .25s ease}
  header.nav.scrolled nav a.cta:hover{transform:translateY(-1px);background:linear-gradient(135deg,#d6f58c 0%,#c3ea68 100%);box-shadow:0 10px 22px rgba(183,227,90,.4)}

  /* phone: small round icon button in the island */
  header.nav.scrolled .hdr-pills{display:flex;margin-left:0}
  header.nav.scrolled .hdr-call{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(183,227,90,.4);background:rgba(183,227,90,.1);color:var(--lime)}
  header.nav.scrolled .hdr-call svg{display:block;width:18px;height:18px}
  header.nav.scrolled .hdr-call span{display:none}

  /* dropdown opens just below the island, with a hover bridge so it never closes on the way down */
  header.nav.scrolled .dd .sub{top:calc(100% + 22px)}
  header.nav.scrolled .dd::after{height:24px}
  header.nav.scrolled .wrap>nav,header.nav.melt .wrap>nav{animation:mzIslandIn .5s var(--mz-ease) .1s backwards}
  header.nav.scrolled .dd .sub{transform-origin:24px 0;transform:translateY(10px) scale(.97);transition:opacity .3s var(--mz-ease),transform .3s var(--mz-ease),visibility .3s}
  header.nav.scrolled .dd:hover .sub,header.nav.scrolled .dd:focus-within .sub,header.nav.scrolled .dd.open .sub{opacity:1;visibility:visible;transform:none}

  /* sliding highlight that follows the pointer, keyboard focus and the section you are reading */
  header.nav nav{position:relative;isolation:isolate}
  header.nav nav .mz-lens{display:block;position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;pointer-events:none;z-index:-1;opacity:0;
    background:linear-gradient(135deg,rgba(183,227,90,.22) 0%,rgba(47,211,88,.1) 100%);box-shadow:inset 0 0 0 1px rgba(183,227,90,.3);
    transition:transform .5s var(--mz-ease),width .5s var(--mz-ease),height .5s var(--mz-ease),opacity .3s ease}
  header.nav.scrolled nav .mz-lens.on{opacity:1}
}

/* ---------- phones (760px and down) ---------- */
@media(max-width:760px){
  html.menu-open{overflow:hidden;overscroll-behavior:none}
  header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;height:64px;padding:0 !important}

  /* top of the page: same dark bar as before, now drawn by the .wrap so it can morph */
  header.nav .wrap{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:10px;width:100%;max-width:none !important;margin:0 !important;height:64px !important;
    padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left)) !important;
    border:0 !important;border-bottom:1px solid rgba(183,227,90,.22) !important;border-radius:0 !important;
    background:linear-gradient(180deg,#03150c 0%,#062616 100%) !important;box-shadow:none !important;
    transition:width var(--mz-dur) var(--mz-ease),margin var(--mz-dur) var(--mz-ease),height var(--mz-dur) var(--mz-ease),border-radius var(--mz-dur) var(--mz-ease),border-color .4s ease,box-shadow .5s ease}
  header.nav .logo{min-width:0}
  header.nav .hdr-cta,header.nav .menu-btn{transition:background-color .3s ease,border-color .3s ease,color .3s ease}
  header.nav .menu-btn span{transition:transform .4s var(--mz-ease),opacity .2s ease}
  header.nav a,header.nav button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  header.nav .hdr-cta,header.nav .menu-btn{transition:background-color .3s ease,border-color .3s ease,color .3s ease,transform .2s var(--mz-ease)}
  header.nav .hdr-cta:active,header.nav .menu-btn:active{transform:scale(.94)}
  header.nav nav a:not(.cta):active{background:rgba(255,255,255,.08)}

  /* the island */
  header.nav.scrolled .wrap{width:calc(100% - 28px);margin:16px 14px 0 !important;height:56px !important;
    padding:0 6px 0 16px !important;border:var(--mz-ring) solid transparent !important;border-radius:20px !important;
    background:var(--mz-island-bg) !important;
    -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 30px -8px rgba(0,0,0,.55),0 0 22px -8px rgba(183,227,90,.3) !important}
  header.nav.scrolled .wrap>.roadbar{left:26px;right:26px;bottom:-9px;height:3px}
  header.nav.scrolled .wrap>.roadbar i{border-radius:3px}
  header.nav.scrolled .logo{flex-wrap:nowrap;font-size:1.1rem;color:var(--lime)}
  header.nav.scrolled .logo small{display:none}
  header.nav.scrolled .logo-leaf{width:24px;height:24px}
  header.nav.scrolled .hdr-cta{background:linear-gradient(135deg,#c9f07a 0%,#b7e35a 100%);border-radius:14px;box-shadow:0 6px 14px rgba(183,227,90,.25)}
  header.nav.scrolled .menu-btn{background:rgba(255,255,255,.1);border-color:rgba(183,227,90,.4);color:#fff;border-radius:14px}

  /* very narrow phones: keep everything on one line */
  @media(max-width:359px){
    header.nav .wrap{gap:8px}
    header.nav .hdr-cta{padding:0 12px;font-size:.86rem}
    header.nav .logo{font-size:1.1rem}
  }

  /* menu: opens as a floating card under the bar / island */
  header.nav nav{display:none}
  header.nav.open nav,header.nav.closing nav{white-space:normal;display:flex;flex-direction:column;align-items:stretch;gap:2px;position:absolute;top:calc(100% + 8px);left:10px;right:10px;width:auto;
    max-height:calc(100vh - 116px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - 116px);
    padding:6px 14px 16px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    border:1px solid rgba(183,227,90,.28);border-radius:24px;
    background:linear-gradient(180deg,#0a2a19 0%,#062616 100%);
    box-shadow:0 28px 56px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);
    transform-origin:50% 0;animation:mzMenuIn .32s var(--mz-ease) both}
  header.nav.scrolled.open nav,header.nav.scrolled.closing nav{left:0;right:0}
  header.nav.closing nav{animation:mzMenuOut .24s cubic-bezier(.4,0,1,1) both;pointer-events:none}
  header.nav.open nav>*{animation:mzItemIn .4s var(--mz-ease) both}
  header.nav.open nav>*:nth-child(1){animation-delay:.05s}
  header.nav.open nav>*:nth-child(2){animation-delay:.09s}
  header.nav.open nav>*:nth-child(3){animation-delay:.13s}
  header.nav.open nav>*:nth-child(4){animation-delay:.17s}
  header.nav.open nav>*:nth-child(5){animation-delay:.21s}
  header.nav.open nav>*:nth-child(6){animation-delay:.25s}
}
@keyframes mzMenuIn{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes mzItemIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes mzMenuOut{to{opacity:0;transform:translateY(-8px) scale(.97)}}
@keyframes mzIslandIn{from{opacity:0;transform:translateY(-5px) scale(.97)}to{opacity:1;transform:none}}
@keyframes mzRingSweep{from{background-position:100% 0,0 0}to{background-position:0% 0,0 0}}

@media(prefers-reduced-motion:reduce){
  header.nav .wrap,header.nav .wrap::before,header.nav .wrap>*,header.nav .wrap>.roadbar,header.nav nav .mz-lens,header.nav .dd .sub,header.nav .menu-btn span,header.nav.open nav,header.nav.closing nav,header.nav.open nav>*,.mz-scrim{transition:none !important;animation:none !important}
}

/* ================= v11.0: header performance pass (same design, less work while scrolling) =================
   Blur behind a moving bar makes the browser redraw everything under it on every scroll frame.
   The bar keeps its colours and shape; the blur is replaced by a near-opaque gradient. */
header.nav{contain:layout style}
header.nav .wrap,header.nav.scrolled .wrap{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
header.nav .wrap{background:linear-gradient(90deg,rgba(3,21,12,.95) 0%,rgba(6,38,22,.92) 60%,rgba(6,38,22,.9) 100%) !important}
header.nav.scrolled .wrap{background:linear-gradient(135deg,rgba(6,38,22,.97) 0%,rgba(3,21,12,.95) 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px -8px rgba(0,0,0,.5) !important}
/* the animated light ring around the island is switched off (it repaints every frame) */
header.nav.scrolled .wrap::before{display:none}
header.nav.scrolled .wrap>.roadbar{display:none}
@media(max-width:760px){
  header.nav .wrap{background:linear-gradient(180deg,#03150c 0%,#062616 100%) !important}
}

/* ================= v11.1: one border system for every box (colour pairs that match the site) =================
   Light boxes (white or light surfaces): mid lime border, soft lime halo. Hover: deep green border.
   Dark boxes (green or black surfaces): lime-tinted border. Hover: bright lime border.
   Solid colours only (no gradient borders), so the page stays fast. */
:root{--bd-lime:#b7e35a;--bd-mid:#8fd14f;--bd-deep:#0f5a32;--bd-dark:rgba(183,227,90,.55)}

.card,.svc,.areatile,.areabox,.rv-card,.mood-card,.gx-f,details{
  border:1.5px solid var(--bd-mid) !important;
  box-shadow:0 0 0 3px rgba(183,227,90,.16),0 12px 26px rgba(10,50,28,.08) !important;
}
.gx-b,.pc-check,.lic-x-cert,.qz-info,#qf.qz-form,.cmp-fig{
  border:1.5px solid var(--bd-dark) !important;
  box-shadow:0 0 0 3px rgba(183,227,90,.12),0 18px 34px rgba(0,0,0,.22) !important;
}
@media(hover:hover) and (pointer:fine){
  .card:hover,.svc:hover,.areatile:hover,.areabox:hover,.rv-card:hover,.mood-card:hover,.gx-card:hover .gx-f,details:hover{
    border-color:var(--bd-deep) !important;
    box-shadow:0 0 0 3px rgba(183,227,90,.3),0 20px 40px rgba(10,50,28,.14) !important;
  }
  .gx-card:hover .gx-b,.cmp-fig:hover,.lic-x-cert:hover,.pc-check:hover{
    border-color:var(--bd-lime) !important;
  }
}
/* focus is always visible, for keyboard users */
details[open]{border-color:var(--bd-deep) !important}

/* ================= v11.2: dynamic island has a clear lime border ================= */
@media(min-width:761px){
  header.nav.scrolled .wrap{
    border:2px solid #b7e35a !important;
    box-shadow:0 0 0 1px rgba(183,227,90,.35),inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px -8px rgba(0,0,0,.5) !important;
  }
}

/* ================= v11.4: only the centre menu is glass (header bar and dynamic island stay as they were) ================= */
@media(min-width:761px){
  header.nav:not(.scrolled) nav{background:rgba(6,38,22,.5);border:1px solid rgba(183,227,90,.42);border-radius:999px;padding:5px 10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 22px -10px rgba(0,0,0,.45)}
}

/* ================= v11.5: glass dynamic island (translucent, frosted, with a light sheen) ================= */
@media(min-width:761px){
  header.nav.scrolled .wrap{
    background:linear-gradient(135deg,rgba(255,255,255,.16) 0%,rgba(183,227,90,.07) 38%,rgba(6,38,22,.62) 100%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(165%);
    backdrop-filter:blur(10px) saturate(165%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.06),0 10px 26px -10px rgba(0,0,0,.5) !important;
  }
  header.nav.scrolled .wrap::after{display:block !important;content:"";position:absolute;left:2px;right:2px;top:2px;height:48%;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 100%);pointer-events:none;z-index:0}
  header.nav.scrolled .wrap>*{position:relative;z-index:1}
}

/* ================= v11.6: header animation optimised (smooth morph, blur only once settled) ================= */
@media(min-width:761px){
  /* morph only what must change: width, height and corner radius */
  header.nav .wrap{transition:width .42s cubic-bezier(.32,.72,0,1),height .42s cubic-bezier(.32,.72,0,1),border-radius .42s cubic-bezier(.32,.72,0,1) !important}
  /* no blur while the island is forming; it fades in once it has settled */
  header.nav.scrolled .wrap{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  header.nav.scrolled.settled .wrap{-webkit-backdrop-filter:blur(10px) saturate(165%) !important;backdrop-filter:blur(10px) saturate(165%) !important}
  /* header items do not run their own entrance animation (they were repainting during the morph) */
  header.nav .wrap>.logo,header.nav .wrap>.hdr-pills,header.nav .wrap>.hdr-cta,header.nav .wrap>.menu-btn,header.nav .wrap>nav,
  header.nav.melt .wrap>.logo,header.nav.melt .wrap>.hdr-pills,header.nav.melt .wrap>.hdr-cta,header.nav.melt .wrap>.menu-btn,header.nav.melt .wrap>nav{animation:none !important}
  /* sliding highlight: moves with transform only */
  header.nav nav .mz-lens{transition:transform .4s cubic-bezier(.32,.72,0,1),opacity .25s ease !important}
}

/* ================= v11.7: phone header fully optimised (no blur, no layout animation, GPU-only motion) ================= */
@media(max-width:760px){
  /* no backdrop blur anywhere on the phone header or the menu overlay: solid colour is much cheaper to paint */
  header.nav,header.nav .wrap{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;contain:layout style}
  .mz-scrim{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:rgba(2,16,9,.72)}

  /* decorative scroll van is hidden on phones (it repaints every scroll frame) */
  header.nav .wrap>.roadbar{display:none !important}

  /* header items: no entrance animations, no transitions on layout properties */
  header.nav .wrap>*{animation:none !important}
  header.nav .wrap{transition:none !important}

  /* hamburger lines only animate transform and opacity */
  header.nav .menu-btn span{transition:transform .22s ease,opacity .18s ease !important}

  /* menu panel: opacity and transform only, shorter */
  header.nav.open nav{animation:mnSlide .2s ease both !important}
  header.nav nav .dd.open .sub{animation:mnDrop .18s ease both !important}
  .mz-lens{display:none !important}
}

/* ================= v11.8: phone header glass (translucent glass always, blur when the page is still) ================= */
@media(max-width:760px){
  header.nav .wrap{isolation:isolate;background:linear-gradient(180deg,rgba(9,61,34,.62) 0%,rgba(3,21,12,.5) 100%) !important;border-bottom:1px solid rgba(183,227,90,.4) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 22px -10px rgba(0,0,0,.45) !important}
  header.nav .wrap::after{content:"";display:block;position:absolute;left:0;right:0;top:0;height:50%;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 100%);pointer-events:none}
  html:not(.mz-scrolling) header.nav .wrap{-webkit-backdrop-filter:blur(12px) saturate(170%) !important;backdrop-filter:blur(12px) saturate(170%) !important}
  /* menu open: the page is locked, so the panel can be frosted */
  html.menu-open header.nav nav{-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);background:linear-gradient(180deg,rgba(9,61,34,.82) 0%,rgba(3,21,12,.86) 100%) !important}
}

/* ================= v11.9: phone dynamic island (scrolled) is slightly transparent with a lime border =================
   Phones only (max-width:760px). The bar at the top of the page is not changed; this applies only after scrolling down,
   when the header becomes the floating island. Desktop is not touched. No new animation or blur: same cost as before. */
@media(max-width:760px){
  header.nav.scrolled .wrap{
    background:linear-gradient(180deg,rgba(9,61,34,.58) 0%,rgba(3,21,12,.48) 100%) !important;
    border:2px solid #b7e35a !important;
    box-shadow:0 0 0 1px rgba(183,227,90,.3),0 0 16px -4px rgba(183,227,90,.45),inset 0 1px 0 rgba(255,255,255,.22),0 10px 24px -10px rgba(0,0,0,.5) !important;
  }
}

/* ================= v12.0: phone speed pass =================
   Phones only (max-width:760px). Desktop is not touched. The look stays the same; this removes work the phone
   does not need: the intro curtain, endless decorative animations, big blurred shapes and blur layers on moving things. */
@media(max-width:760px){
  /* no intro curtain: the page is visible straight away */
  .loader{display:none !important}

  /* hero: no blurred glow shapes, no floating leaves, no slow zoom on the photo */
  .hero-fx{display:none !important}
  .hs .hs-slide.on img{animation:none !important}
  .hero h1 em{animation:none !important}
  .btn.pulse::after{display:none !important;animation:none !important}

  /* hero text appears quickly and together instead of one piece at a time */
  html.js.loaded .hero :is(.eyebrow,.ln>span,p.h-rise,.btn,.ticks span){animation-delay:.05s !important;animation-duration:.45s !important}

  /* no endless decorative loops (illustration float, rotating rings, shine sweeps) */
  .ph-art svg{animation:none !important;filter:none !important}
  .pagehead.city .ph-art::before,.pagehead.city .ph-art::after{animation:none !important}
  .mz-wa::after{animation:none !important}

  /* no blur layers on things that move with the page (solid colours look the same here) */
  .eyebrow,.hero .btn.g,.pc-check,.hs-arrow,.ph-art figcaption,.mbar{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  .hs-arrow{background:rgba(9,61,34,.7) !important}
  .mbar{background:#093d22 !important}
}