/* ==========================================================================
   Rubbish Raccoons
   Shared stylesheet. Edit colours in the :root block below.
   ========================================================================== */

:root{
  --purple:#B8F000;
  --purple-d:#080A08;
  --purple-l:#D2FF37;
  --tint:#F2F5ED;
  --ink:#10130F;
  --muted:#5B6256;
  --line:#D9DFD2;
  --paper:#fff;
  --ok:#2E7D4F;
  --no:#B3261E;
  --wrap:1160px;
  --pad:clamp(20px,5vw,40px);
  --r:14px;
  --shadow:0 18px 40px -24px rgba(24,19,32,.45);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(16px,.55vw + 15px,17.5px);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,.display{
  font-family:"Archivo",system-ui,sans-serif;font-weight:800;
  line-height:1.05;letter-spacing:-.022em;margin:0;text-wrap:balance;
}
p{margin:0}
.wrap{width:min(100% - (var(--pad)*2),var(--wrap));margin-inline:auto}
.narrow{max-width:760px}
.eyebrow{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.19em;text-transform:uppercase;
}
.skip{position:absolute;left:-9999px;top:0;background:var(--purple);color:#fff;padding:12px 18px;z-index:300;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--purple-l);outline-offset:3px;border-radius:4px}
.hdr :focus-visible,.foot :focus-visible,.hero :focus-visible,.phero :focus-visible,.contact :focus-visible{outline-color:#fff}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;justify-content:center;
  font-family:"Archivo",sans-serif;font-weight:800;font-size:.95rem;
  text-decoration:none;padding:.85rem 1.5rem;border-radius:999px;
  border:2px solid transparent;cursor:pointer;
  transition:transform .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.btn svg{width:18px;height:18px;flex:none}
.btn--solid{background:var(--purple);color:#fff}
.btn--solid:hover{background:var(--purple-d);transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(74,28,116,.9)}
.btn--light{background:#fff;color:var(--purple-d)}
.btn--light:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(0,0,0,.5)}
.btn--ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
.btn--outline{border-color:var(--purple);color:var(--purple)}
.btn--outline:hover{background:var(--purple);color:#fff;transform:translateY(-2px)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.95);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);overflow:visible}
.hdr__in{display:flex;align-items:center;gap:1.2rem;padding:.6rem 0;min-height:70px;position:relative}
/* logo is oversized and overhangs the header rather than making the white bar taller */
.hdr__logo{position:relative;display:block;flex:none;width:127px;height:46px}
.hdr__logo::before{content:"";position:absolute;left:-18px;right:-18px;top:-12px;bottom:-46px;
  background:#fff;border-radius:0 0 16px 16px;box-shadow:0 12px 22px -14px rgba(24,19,32,.45);z-index:0}
.hdr__logo img{position:absolute;z-index:1;top:-4px;left:0;height:90px;width:auto;max-width:none}
.nav{margin-left:auto;display:flex;gap:1.35rem}
.nav a{text-decoration:none;font-weight:600;font-size:.93rem;color:var(--ink);padding:.3rem 0;border-bottom:2px solid transparent;transition:.18s;white-space:nowrap}
.nav a:hover{color:var(--purple);border-bottom-color:var(--purple)}
.nav a[aria-current=page]{color:var(--purple);border-bottom-color:var(--purple)}
.hdr .btn{padding:.7rem 1.2rem;font-size:.89rem}
.burger{
  display:none;margin-left:auto;background:none;border:2px solid var(--line);border-radius:10px;
  width:46px;height:46px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center;
}
.burger svg{width:22px;height:22px}
@media(max-width:1080px){
  .nav{
    position:fixed;inset:70px 0 auto;background:#fff;flex-direction:column;gap:0;
    padding:.5rem var(--pad) 1.4rem;border-bottom:1px solid var(--line);
    box-shadow:0 22px 40px -28px rgba(0,0,0,.5);display:none;margin:0;
  }
  .nav.open{display:flex}
  .nav a{padding:.85rem 0;border-bottom:1px solid var(--line);font-size:1.02rem}
  .burger{display:flex}
  .hdr .btn--solid{order:3}
  .hdr__in{gap:.7rem}
}
@media(max-width:520px){
  .hdr .btn span{display:none}
  .hdr__logo{width:99px;height:44px}
  .hdr__logo::before{left:-14px;right:-14px;top:-13px;bottom:-30px;border-radius:0 0 13px 13px}
  .hdr__logo img{height:70px;top:-3px}
}

/* ---------- home hero ---------- */
.hero{position:relative;background:var(--purple-d);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 82% 18%,rgba(140,74,196,.55),transparent 62%)}
.hero__wedge{position:absolute;z-index:0;inset:0 -10% -12% 34%;pointer-events:none;background:linear-gradient(180deg,var(--purple) 0%,var(--purple-l) 100%);opacity:.42;clip-path:polygon(26% 0,100% 0,100% 100%,0 100%)}
@media(max-width:900px){.hero__wedge{display:none}}
.hero__in{position:relative;z-index:2;padding:clamp(46px,7vw,88px) 0 clamp(50px,7vw,92px);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,4.5vw,60px);align-items:center}
@media(max-width:900px){.hero__in{grid-template-columns:1fr;gap:34px}}
.hero__copy{max-width:min(100%,620px)}
.hero .eyebrow{color:#D7FF5E;display:flex;align-items:center;gap:.7rem;margin-bottom:1.05rem;font-size:clamp(.62rem,1.6vw,.72rem);letter-spacing:.16em}
.hero .eyebrow::before{content:"";width:30px;height:3px;background:#8CB800;border-radius:2px;flex:none}
.hero h1{font-size:clamp(2.3rem,6vw,4.05rem);font-weight:900;text-transform:uppercase}
.hero h1 em{font-style:normal;color:#B8F000;display:block}
.hero__sub{margin-top:1.25rem;font-size:clamp(1rem,1.5vw,1.14rem);color:#EEF5E7;max-width:33em}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
@media(max-width:520px){.hero__cta{display:grid;grid-template-columns:1fr}}
.hero__shot{margin:0;position:relative;border-radius:18px;overflow:hidden;border:6px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -30px rgba(0,0,0,.85);max-width:520px;justify-self:end;width:100%;aspect-ratio:1/1}
@media(max-width:900px){.hero__shot{justify-self:center;max-width:370px}}
.hero__shot img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;object-position:center}
.hero__tag{position:absolute;left:0;bottom:0;background:#fff;color:var(--purple-d);font-family:"Archivo",sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;padding:.6rem 1rem;border-radius:0 12px 0 0;display:flex;align-items:center;gap:.5rem}
.hero__tag svg{width:15px;height:15px;color:var(--purple)}
.hero__chips{display:flex;flex-wrap:wrap;gap:.5rem .55rem;margin-top:2rem;padding:0;list-style:none}
.hero__chips li{font-size:.83rem;font-weight:600;color:#F2F7EB;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.34rem .85rem}
.beat-quote{margin-top:1.25rem;display:inline-flex;flex-direction:column;align-items:flex-start;background:#fff;color:var(--purple-d);border-left:6px solid #B8F000;border-radius:10px;padding:.75rem 1rem;font-family:"Archivo",sans-serif;text-transform:uppercase;box-shadow:0 14px 32px -22px rgba(0,0,0,.75)}
.beat-quote strong{font-size:clamp(1rem,2vw,1.25rem);letter-spacing:.025em}
.beat-quote small{font-family:"Manrope",sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.04em;margin-top:.15rem}

/* ---------- inner page hero ---------- */
.phero{background:var(--purple-d);color:#fff;position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(110% 120% at 88% 10%,rgba(140,74,196,.5),transparent 60%)}
.phero__in{position:relative;z-index:1;padding:clamp(38px,5.5vw,68px) 0 clamp(42px,6vw,72px);max-width:820px}
.phero h1{font-size:clamp(2rem,5vw,3.35rem);text-transform:uppercase;font-weight:900}
.phero p{margin-top:1.05rem;color:#EEF5E7;font-size:clamp(1rem,1.5vw,1.14rem);max-width:38em}
.crumb{display:flex;gap:.55rem;align-items:center;font-size:.8rem;color:#C9D3BF;margin-bottom:1.1rem;flex-wrap:wrap}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline;color:#fff}

/* ---------- trust strip ---------- */
.strip{background:var(--ink);color:#fff}
.strip ul{list-style:none;margin-inline:auto;padding:1.15rem 0;display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
.strip li{display:flex;align-items:center;justify-content:center;text-align:center;gap:.7rem;font-family:"Archivo",sans-serif;font-weight:700;font-size:.79rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.25;padding-inline:.65rem;border-left:1px solid rgba(255,255,255,.16)}
.strip li:first-child{border-left:0}
.strip svg{width:26px;height:26px;flex:none;color:#B8F000}
@media(max-width:900px){.strip ul{grid-template-columns:repeat(2,1fr);gap:1rem .4rem;padding:1.3rem 0}.strip li{border-left:0;font-size:.75rem;padding-inline:0}}

/* ---------- sections ---------- */
.sec{padding:clamp(56px,7.5vw,96px) 0}
.sec--tint{background:var(--tint)}
.sec--dark{background:var(--purple-d);color:#fff}
.sec__head{max-width:44rem;margin-bottom:clamp(32px,4vw,50px)}
.sec__head .eyebrow{color:var(--purple);display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.sec__head .eyebrow::before{content:"";width:30px;height:3px;background:var(--purple);border-radius:2px;flex:none}
.sec--dark .sec__head .eyebrow{color:#D7FF5E}
.sec--dark .sec__head .eyebrow::before{background:#8CB800}
.sec__head h2{font-size:clamp(1.9rem,3.8vw,2.8rem);text-transform:uppercase}
.sec__head p{margin-top:1rem;color:var(--muted);font-size:1.05rem}
.sec--dark .sec__head p{color:#EEF5E7}
.prose p + p,.prose ul + p,.prose p + ul{margin-top:1.05rem}
.prose h3{margin-top:2.2rem;font-size:1.28rem}
.prose h3 + p{margin-top:.6rem}
.prose ul{margin:1rem 0 0;padding-left:1.2rem;display:grid;gap:.45rem}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.cards,.cards--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cards,.cards--3,.cards--2{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.7rem 1.5rem 1.8rem;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--purple);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#B8F000}
.card:hover::before{transform:scaleX(1)}
.card__ico{width:56px;height:56px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;margin-bottom:1.15rem}
.card__ico svg{width:27px;height:27px}
.card h3{font-size:1.14rem;font-weight:800}
.card p{margin-top:.55rem;color:var(--muted);font-size:.97rem}
.card__link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-weight:700;font-size:.92rem;color:var(--purple);text-decoration:none}
.card__link:hover{text-decoration:underline}
.card__link svg{width:15px;height:15px}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:1050px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.gal{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.gal figure{margin:0;border-radius:var(--r);overflow:hidden;position:relative;background:var(--purple-d)}
.gal img{width:100%;height:clamp(200px,26vw,290px);object-fit:cover;transition:transform .5s ease}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.15rem .95rem;color:#fff;font-family:"Archivo",sans-serif;font-weight:800;font-size:.95rem;background:linear-gradient(to top,rgba(24,19,32,.88),rgba(24,19,32,0))}

/* ---------- ticks / crosses ---------- */
.ticks{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.8rem}
.ticks li{display:flex;gap:.9rem;align-items:flex-start;font-size:1.02rem}
.ticks svg{width:21px;height:21px;flex:none;color:var(--purple);margin-top:.24rem}
.ticks--ok svg{color:var(--ok)}
.ticks--no svg{color:var(--no)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px)}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,32px)}
.panel h3{font-size:1.2rem;text-transform:uppercase}

/* ---------- why ---------- */
.why{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,60px);align-items:center}
@media(max-width:900px){.why{grid-template-columns:1fr}}
.why__script{font-family:"Yellowtail",cursive;font-size:clamp(2.6rem,5.8vw,3.7rem);color:var(--purple);line-height:1;font-weight:400;letter-spacing:0;text-transform:none;padding-bottom:.12em}
.why__lead{margin-top:1.1rem;color:var(--muted);font-size:1.05rem;max-width:36em}
.roundel{aspect-ratio:1;max-width:320px;margin-inline:auto;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-content:center;text-align:center;padding:2rem;box-shadow:0 26px 50px -26px rgba(74,28,116,.95);border:9px solid #fff;outline:2px solid var(--line)}
.roundel span{font-family:"Archivo",sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(1.3rem,3vw,1.7rem);line-height:1.12;display:block}
.roundel em{display:block;margin-top:.9rem;font-style:normal;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#D7FF5E}
.roundel::after{content:"";display:block;width:54px;height:3px;background:#8CB800;border-radius:2px;margin:.9rem auto 0}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;counter-reset:s}
.steps--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:800px){.steps,.steps--4{grid-template-columns:1fr;gap:1.3rem}}
.step{position:relative;padding-top:1.6rem;border-top:3px solid var(--line);counter-increment:s}
.sec--dark .step{border-top-color:rgba(255,255,255,.25)}
.step::before{content:counter(s,decimal-leading-zero);position:absolute;top:-.15rem;left:0;transform:translateY(-100%);font-family:"Archivo",sans-serif;font-weight:900;font-size:.85rem;letter-spacing:.14em;color:var(--purple);padding-bottom:.5rem}
.sec--dark .step::before{color:#B8F000}
.step h3{font-size:1.14rem}
.step p{margin-top:.5rem;color:var(--muted);font-size:.97rem}
.sec--dark .step p{color:#DDE6D5}

/* ---------- load sizes ---------- */
.loads{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
@media(max-width:1000px){.loads{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.loads{grid-template-columns:1fr}}
.load{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:1.4rem;text-align:center}
.load svg{width:100%;height:auto;margin-bottom:1rem}
.load h3{font-size:1.08rem;text-transform:uppercase}
.load p{margin-top:.45rem;color:var(--muted);font-size:.92rem;min-height:3.6em}
.load .price{margin-top:.9rem;display:block;font-family:"Archivo",sans-serif;font-weight:900;font-size:1.4rem;color:var(--purple)}
.load .price small{display:block;font-family:"Manrope",sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.2rem}

/* ---------- Rubbish Raccoons brand treatment ---------- */
.btn{border-radius:10px;text-transform:uppercase;letter-spacing:.015em}
.btn--solid{background:var(--ink);color:var(--purple)}
.btn--solid:hover{background:#000;color:#fff;box-shadow:0 12px 26px -14px rgba(0,0,0,.8)}
.btn--light{background:var(--purple);color:var(--ink)}
.btn--outline{border-color:var(--ink);background:var(--purple);color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--purple)}
.hdr{border-bottom:5px solid var(--purple)}
.hdr__in{min-height:86px}
.hdr__logo{width:112px;height:72px}
.hdr__logo::before{display:none}
.hdr__logo img{height:102px;top:-8px;border-radius:12px}
.nav a:hover,.nav a[aria-current=page]{color:#607D00;border-bottom-color:var(--purple)}
.hero::before{background:radial-gradient(120% 90% at 82% 18%,rgba(184,240,0,.24),transparent 62%)}
.hero__wedge{background:linear-gradient(180deg,var(--purple) 0%,#86B000 100%);opacity:.58}
.phero::before{background:radial-gradient(110% 120% at 88% 10%,rgba(184,240,0,.22),transparent 60%)}
.hero h1 em{color:var(--purple)}
.strip svg{color:var(--purple)}
.card__ico{background:var(--purple);color:var(--ink)}
.sec__head .eyebrow,.card__link,.load .price,.why__script{color:#607D00}
.ticks svg{color:#607D00}
.roundel{background:var(--ink);border-color:var(--purple);box-shadow:0 26px 50px -26px rgba(0,0,0,.9)}
.roundel em{color:var(--purple)}
.contact .eyebrow,.sec--dark .eyebrow{color:var(--purple)!important}
.form a{color:#607D00!important}
.beat-quote{border-left-color:var(--purple)}
.load{border-color:#B9C2B2}
.load svg{--purple:#B8F000;--purple-d:#10130F;--tint:#F2F5ED}
.foot__brand img{background:#fff;border-radius:14px;padding:4px}
@media(max-width:1080px){
  .nav{inset:86px 0 auto;border-bottom:5px solid var(--purple)}
  .hdr__logo{width:92px;height:66px}
  .hdr__logo img{height:88px;top:-6px}
}
@media(max-width:520px){
  .hdr__logo{width:74px;height:58px}
  .hdr__logo img{height:76px;top:-5px}
}

/* ---------- areas ---------- */
.areas{columns:4 190px;column-gap:1.6rem;margin:0;padding:0;list-style:none}
.areas li{break-inside:avoid;padding:.5rem 0;border-bottom:1px solid var(--line);font-weight:600;font-size:.97rem}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.6rem 1.15rem 0;position:relative;
  font-family:"Archivo",sans-serif;font-weight:800;font-size:1.04rem;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.5rem;width:11px;height:11px;
  border-right:2.5px solid var(--purple);border-bottom:2.5px solid var(--purple);
  transform:rotate(45deg);transition:transform .22s ease;
}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq summary:hover{color:var(--purple)}
.faq .a{padding:0 2.6rem 1.3rem 0;color:var(--muted)}
.faq .a p + p{margin-top:.8rem}

/* ---------- contact ---------- */
.contact{background:var(--purple-d);color:#fff}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,68px)}
@media(max-width:900px){.contact__grid{grid-template-columns:1fr}}
.contact h2{font-size:clamp(1.9rem,3.8vw,2.8rem);text-transform:uppercase}
.contact h2 em{font-style:normal;color:#B8F000;display:block}
.contact__lead{margin-top:1.1rem;color:#EEF5E7;max-width:30em}
.deets{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.05rem}
.deets li{display:flex;gap:1rem;align-items:center}
.deets .ic{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.11);display:grid;place-items:center;flex:none;border:1px solid rgba(255,255,255,.22)}
.deets svg{width:20px;height:20px;color:#fff}
.deets a,.deets span{text-decoration:none;font-weight:600}
.deets a:hover{text-decoration:underline}
.deets small{display:block;font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;color:#B5C1AB;font-weight:700}
.deets .big{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.5rem}
.form{background:#fff;color:var(--ink);border-radius:var(--r);padding:clamp(24px,3.2vw,36px)}
.form h3{font-size:1.28rem;text-transform:uppercase}
.form p.note{margin-top:.5rem;color:var(--muted);font-size:.92rem}
.field{margin-top:1.05rem}
.field label{display:block;font-weight:700;font-size:.86rem;margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:.98rem;padding:.78rem .9rem;border:1.5px solid var(--line);border-radius:10px;background:#FBF9FD;color:var(--ink)}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--purple);background:#fff;box-shadow:0 0 0 3px rgba(74,28,116,.14)}
.form .btn{width:100%;margin-top:1.3rem}
.form .small{margin-top:.85rem;font-size:.82rem;color:var(--muted);text-align:center}

/* ---------- cta band ---------- */
.band{background:var(--purple);color:#fff;padding:1.5rem 0}
.band__in{display:flex;align-items:center;justify-content:center;gap:1rem;text-align:center}
.band svg{width:34px;height:34px;flex:none}
.band p{font-family:"Archivo",sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(.95rem,2.1vw,1.3rem);line-height:1.2}
.cta{background:var(--tint);text-align:center;padding:clamp(48px,6vw,76px) 0}
.cta h2{font-size:clamp(1.8rem,3.6vw,2.6rem);text-transform:uppercase}
.cta p{margin-top:.9rem;color:var(--muted);max-width:44ch;margin-inline:auto}
.cta__btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.7rem}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#CFC6DC;padding:clamp(40px,5vw,60px) 0 40px;font-size:.92rem}
.foot__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2.2rem;align-items:start}
@media(max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot__grid{grid-template-columns:1fr;gap:1.8rem}}
.foot img{height:78px;width:auto}
.foot h4{font-family:"Archivo",sans-serif;font-weight:800;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 .8rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline;color:#fff}
.foot__base{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.13);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.82rem;color:#9A90A9}

/* ---------- mobile call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:150;display:none;padding:.6rem calc(env(safe-area-inset-left) + 12px) calc(env(safe-area-inset-bottom) + .6rem);background:rgba(24,19,32,.97);gap:.6rem;border-top:1px solid rgba(255,255,255,.14)}
.callbar .btn{flex:1;padding:.8rem 1rem;font-size:.9rem}
@media(max-width:720px){.callbar{display:flex}body{padding-bottom:74px}}

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
}

/* ---------- price bar ---------- */
.pricebar{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3.2vw,34px);text-align:center}
.pricebar h3{font-size:1.2rem;text-transform:uppercase}
.pricebar ul{list-style:none;margin:1.4rem 0 1.6rem;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:760px){.pricebar ul{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.pricebar ul{grid-template-columns:1fr}}
.pricebar li{border-left:2px solid var(--line);padding:.2rem 0 .2rem 1rem;text-align:left}
.pricebar li span{display:block;font-size:.86rem;color:var(--muted);font-weight:600}
.pricebar li strong{display:block;font-family:"Archivo",sans-serif;font-weight:900;font-size:1.28rem;color:var(--purple);margin-top:.15rem}

/* ---------- load price ---------- */
.load .price i{font-style:normal;display:block;font-family:"Manrope",sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.1rem}

/* ---------- coverage map ---------- */
.mapwrap{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#FBF9FD}
.mapwrap img{width:100%;height:auto}

/* ---------- form status & honeypot ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formstatus{margin-top:.9rem;font-size:.92rem;font-weight:600;text-align:center;min-height:1px}
.formstatus.good{color:var(--ok)}
.formstatus.bad{color:var(--no)}
.required-note{margin:.4rem 0 .9rem;color:var(--muted);font-size:.8rem;font-weight:700}
.field__help{display:block;margin-top:.35rem;color:var(--muted);font-size:.78rem}
.field input[type=file]{padding:.65rem;background:#FBF9FD;font-size:.88rem}

/* ---------- registration panels ---------- */
.regs{margin:1.2rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.2rem;align-items:baseline}
.regs dt{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.regs dd{margin:0;font-weight:600}
.regs dd.big{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.1rem;color:var(--purple);letter-spacing:.01em}
.regnote{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem}

/* ---------- footer legal ---------- */
.foot__legal{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.13);font-size:.82rem;color:#9A90A9;display:grid;gap:.4rem;max-width:70ch}
.foot__legal + .foot__base{margin-top:1.2rem;padding-top:1.2rem}

/* ---------- postcode checker ---------- */
.pcheck{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,28px);margin-bottom:1.6rem}
.pcheck h2{font-size:clamp(1.4rem,2.6vw,1.9rem);text-transform:uppercase}
.pcheck > p{margin-top:.5rem;color:var(--muted);font-size:.96rem;max-width:none}
.pcheck__controls{display:grid;grid-template-columns:minmax(430px,520px) minmax(280px,1fr);gap:1rem;align-items:stretch;margin-top:1rem}
.pcform{display:flex;gap:.7rem;margin:0;max-width:none;flex-wrap:nowrap}
.pcform input{
  flex:1 1 200px;font:inherit;font-size:1.05rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:.82rem 1rem;border:1.5px solid var(--line);
  border-radius:10px;background:#FBF9FD;color:var(--ink);min-width:0;
}
.pcform input::placeholder{font-weight:500;letter-spacing:0;text-transform:none;color:#9990A6}
.pcform input:focus{outline:none;border-color:var(--purple);background:#fff;box-shadow:0 0 0 3px rgba(74,28,116,.14)}
.pcform .btn{flex:0 0 auto}
.pcresult{margin:0;font-weight:600;display:none;padding:.72rem 1rem;border-radius:10px;font-size:.92rem;line-height:1.45;align-items:center}
.pcresult.show{display:flex}
.pcresult.ok{background:#EAF5EE;color:#1F5C3A;border:1px solid #BFE0CC}
.pcresult.no{background:#FDF2EC;color:#8A4419;border:1px solid #F2D3BE}
.pcresult.bad{background:#FBEDEC;color:#8C2018;border:1px solid #EFC9C5}
.pcresult a{color:inherit;font-weight:800}
@media(max-width:860px){
  .pcheck__controls{grid-template-columns:1fr}
  .pcresult.show{display:block}
}
@media(max-width:520px){
  .pcform{flex-wrap:wrap}
  .pcform .btn{width:100%}
}

/* ---------- map pin ---------- */
.mapwrap{position:relative}
.mappin{position:absolute;transform:translate(-50%,-100%);pointer-events:none;z-index:2;
  display:flex;flex-direction:column;align-items:center;animation:pindrop .45s cubic-bezier(.2,.9,.3,1.4)}
.mappin[hidden]{display:none}
.mappin__label{
  background:var(--ink);color:#fff;font-family:"Archivo",sans-serif;font-weight:800;
  font-size:.72rem;letter-spacing:.06em;padding:.3rem .6rem;border-radius:6px;white-space:nowrap;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.6);
}
.mappin__stem{width:2px;height:12px;background:var(--ink)}
.mappin__dot{width:15px;height:15px;border-radius:50%;background:#fff;border:4px solid var(--ink);
  box-shadow:0 3px 10px -2px rgba(0,0,0,.6)}
@keyframes pindrop{from{opacity:0;transform:translate(-50%,-140%)}to{opacity:1;transform:translate(-50%,-100%)}}
@media(prefers-reduced-motion:reduce){.mappin{animation:none}}

/* ---------- wide hero shot ---------- */
.hero__in--stack{display:block}
.hero__shot--wide{max-width:none;width:100%;margin-top:clamp(30px,4vw,48px);justify-self:stretch}
.hero__shot--wide img{width:100%;aspect-ratio:2.96;height:auto;object-fit:cover;object-position:center}
@media(max-width:640px){.hero__shot--wide img{aspect-ratio:2.1;object-position:72% center}}

/* ---------- stacked hero tuning ---------- */
.hero__in--stack{padding:clamp(34px,4.6vw,62px) 0 clamp(38px,5vw,66px)}
.hero__in--stack .hero__copy{max-width:min(100%,800px)}
.hero__in--stack h1{font-size:clamp(2.15rem,5vw,3.55rem)}
.hero__in--stack .hero__sub{margin-top:1.1rem;font-size:clamp(1rem,1.35vw,1.1rem)}
.hero__in--stack .hero__cta{margin-top:1.6rem}
.hero__in--stack .hero__chips{margin-top:1.5rem}
.hero__shot--wide{margin-top:clamp(26px,3vw,40px)}

/* ---------- final Rubbish Raccoons colour and contrast pass ---------- */
.skip{color:var(--ink)}
.btn--solid{background:var(--ink);color:var(--purple)}
.btn--solid:hover{background:#242924;color:var(--purple);box-shadow:0 12px 26px -14px rgba(0,0,0,.9)}
.btn--light{background:var(--purple);color:var(--ink)}
.btn--outline{border-color:var(--ink);background:var(--purple);color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--purple)}
.band{background:var(--purple);color:var(--ink)}
.band svg{color:var(--ink)}
.pricebar li strong,.regs dd.big{color:#607D00}
.field input,.field select,.field textarea,.field input[type=file],.pcform input,.mapwrap{background:#FBFCF8}
.field input:focus,.field select:focus,.field textarea:focus,.pcform input:focus{
  border-color:#86B000;background:#fff;box-shadow:0 0 0 3px rgba(184,240,0,.28)
}
.pcform input::placeholder{color:#6F766A}
.foot{color:#C8D0C2}
.foot__legal,.foot__base{color:#9EAA98}
.foot__grid > div:first-child > img{
  height:96px;background:#fff;border-radius:14px;padding:4px
}
.callbar{background:rgba(8,10,8,.97)}

/* ---------- larger brand mark ---------- */
.hdr__in{min-height:84px}
.hdr__logo{width:140px;height:76px}
.hdr__logo img{height:132px;top:-18px;border-radius:14px}
@media(max-width:1080px){
  .nav{inset:84px 0 auto}
  .hdr__logo{width:112px;height:68px}
  .hdr__logo img{height:108px;top:-13px}
}
@media(max-width:520px){
  .hdr__in{min-height:72px}
  .hdr__logo{width:90px;height:60px}
  .hdr__logo img{height:92px;top:-10px}
  .nav{inset:72px 0 auto}
}