/* =========================================================
   Stratford Pest Control — base stylesheet
   Design system: Neutral / Squared (see /style sheet/stratford-theme-neutral-squared.html)
   Vanilla HTML/CSS/JS — built to be portable into a WordPress theme.
   ========================================================= */

:root{
  --bg-primary:#FFFFFF;
  --bg-subtle:#F4F4F4;
  --surface:#FFFFFF;
  --text-primary:#302F30;
  --text-secondary:#68686A;
  --text-on-dark:#F2F2F1;
  --text-on-dark-muted:#A8A8A8;
  --grey-100:#F4F4F4;
  --grey-200:#E4E4E4;
  --grey-300:#C9CACA;
  --grey-500:#8E8E8F;
  --charcoal:#242425;
  --charcoal-2:#2E2E2F;
  --border:#DFDFDF;
  --pests-bg:#F1F2F2;
  --radius:0px;
  --shadow-card:0 1px 2px rgba(0,0,0,0.04), 0 8px 20px rgba(0,0,0,0.06);
  --font-display:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-body:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
  --content-width:1360px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scrollbar-color:#F9EA00 var(--grey-100); scrollbar-width:auto;}
::-webkit-scrollbar{width:20px;}
::-webkit-scrollbar-track{background:var(--grey-100);}
::-webkit-scrollbar-thumb{background:#F9EA00; border-radius:0;}
::-webkit-scrollbar-thumb:hover{background:#e0d300;}
body{margin:0; background:var(--bg-primary); color:var(--text-primary); font-family:var(--font-body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;}
img,svg{display:block; max-width:100%;}
a{color:inherit; transition:color .15s ease;}
a:hover{color:#F9EA00;}
p a, li a{font-weight:700; text-decoration:none;}
.wrap{max-width:var(--content-width); margin:0 auto; padding:0 24px;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; margin:0; letter-spacing:-0.01em; line-height:1.12; text-wrap:balance;}
p{margin:0;}
ul{margin:0; padding:0;}
:focus-visible{outline:3px solid var(--charcoal); outline-offset:3px;}
.icon{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.icon-whatsapp{fill:currentColor; stroke:currentColor; stroke-width:9px; stroke-linejoin:round; stroke-linecap:round;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ---------- Header ---------- */
header.site{background:var(--surface); position:sticky; top:0; z-index:40;}
.nav{display:flex; align-items:center; justify-content:flex-start; gap:36px; padding:14px 24px; max-width:var(--content-width); margin:0 auto;}
.nav .logo{height:44px; flex:none;}
.nav .logo img{height:100%; width:auto;}
.nav-links{display:flex; align-items:center; gap:24px; list-style:none; margin:0; padding:0;}
.nav-links a{text-decoration:none; font-weight:600; font-size:14px; color:var(--text-primary); padding:6px 2px; border-bottom:2px solid transparent; white-space:nowrap;}
.nav-links a:hover{border-bottom-color:var(--charcoal);}
.nav-links .has-dropdown{position:relative;}
.nav-links .dropdown{display:none; position:absolute; top:100%; left:0; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); min-width:210px; padding:6px 0; z-index:50; list-style:none;}
.nav-links .has-dropdown:hover .dropdown,
.nav-links .has-dropdown:focus-within .dropdown{display:block;}
.nav-links .dropdown li a{display:block; padding:10px 16px; border-bottom:none; font-weight:500; text-wrap:balance;}
.nav-links .dropdown li a:hover{background:#FFF8B5;}
.nav-ctas{display:flex; align-items:center; gap:10px; flex:none; margin-left:auto;}
.nav-cta{display:flex; align-items:center; gap:8px; background:transparent; color:var(--charcoal); padding:11px 18px; border-radius:var(--radius); font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap; border:none;}
.nav-cta svg{width:16px; height:16px; flex:none; color:var(--charcoal); transition:color .15s ease;}
.nav-cta:hover svg{color:#F9EA00;}
.nav-toggle{display:none; flex:none; width:40px; height:40px; align-items:center; justify-content:center; background:transparent; border:1px solid var(--border); cursor:pointer;}
.nav-toggle svg{width:20px; height:20px;}

/* ---------- Hero ---------- */
.hero-banner{position:relative; width:100%; height:clamp(445px, 43vw, 545px); overflow:hidden; background:#F1F2F2 url('../images/circle-homepage-banner.svg') no-repeat right center / cover;}
.hero-banner-content{position:absolute; inset:0; z-index:2; display:flex; align-items:center;}
.hero-banner-content .wrap{width:100%;}
.eyebrow{display:inline-flex; align-items:center; gap:6px; background:var(--surface); color:var(--text-secondary); font-weight:700; font-size:9.4px; letter-spacing:0.06em; text-transform:uppercase; padding:4.5px 10.5px; border-radius:var(--radius); margin-bottom:22px; text-wrap:balance;}
.hero-banner .eyebrow{color:var(--charcoal);}
.hero-banner h1{font-size:clamp(32px,4.4vw,50px); line-height:1.08; margin-bottom:18px; color:var(--charcoal); max-width:24ch;}
.hero-banner h1 .h1-sub{display:block; font-size:0.55em; font-weight:500; color:var(--charcoal-2); margin-top:8px; text-wrap:balance;}
.hero-banner p.lead{font-size:18px; color:var(--charcoal-2); max-width:46ch; margin-top:24px; margin-bottom:30px;}
.hero-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.hero-banner .hero-actions{margin-top:24px;}
/* PROMPT badge on a lozenge in the badge's own blue (#0066af), same height as the .btn-slide pills beside it.
   The image is oversized with negative margins so its white lettering fills the pill (≈3px clear top/bottom, clear of
   the rounded ends) while its plain blue surround clips invisibly. Yellow ring outside the pill on hover. */
.hero-accreditation{display:inline-flex; align-items:center; box-sizing:border-box; height:40px; padding:0; border-radius:999px; background:#0066af; overflow:hidden; box-shadow:0 0 0 0 #F9EA00; transition:box-shadow .2s ease;}
.hero-accreditation:hover{box-shadow:0 0 0 2px #F9EA00;} /* ring sits outside the pill */
.hero-accreditation-img{height:48px; width:auto; margin:-3.25px -17px -4.75px 2px; display:block; flex:none;}
@media (prefers-reduced-motion: reduce){
  .hero-accreditation{transition:none;}
}

.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:700; font-size:15.5px; padding:14px 26px; border-radius:999px; text-decoration:none; border:2px solid transparent; background-clip:padding-box; cursor:pointer; text-wrap:balance; background-size:200% 100%; background-position:0 0; transition:background-position .2s ease, color .2s ease, border-color .2s ease;}
.btn:hover{background-position:100% 0;}
.btn-primary{background-image:linear-gradient(to right, var(--charcoal) 0%, var(--charcoal) 50%, #fff 100%); color:#fff;}
.bird-survey-btn{background-image:linear-gradient(to right, var(--charcoal) 0%, var(--charcoal) 50%, #f4f4f4 100%);}
.btn-primary:hover{color:#fff;}
/* Animated black-button rollover should fade to whatever the section it's sitting on actually is, not a fixed white */
.content-section.alt .btn-primary{background-image:linear-gradient(to right, var(--charcoal) 0%, var(--charcoal) 50%, var(--bg-subtle) 100%);}
#services .btn-primary{background-image:linear-gradient(to right, var(--charcoal) 0%, var(--charcoal) 50%, var(--pests-bg) 100%);}
.contact-form .btn-primary{background-image:linear-gradient(to right, var(--charcoal) 0%, var(--charcoal) 50%, #fffcda 100%);}
.btn-ghost{background-color:transparent; background-image:linear-gradient(to right, transparent 0%, transparent 50%, rgba(249,234,0,0) 50%, #F9EA00 100%); color:var(--charcoal); border-color:transparent;}
.btn-ghost:hover{color:var(--charcoal);} /* beats the global a:hover yellow, which made text vanish on the yellow slide */
.page-header .btn-ghost{color:#fff; border-color:transparent;}
.page-header .btn-ghost:hover{color:var(--charcoal);}

/* ---------- Gradient slide button ---------- */
.btn-slide{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:8px 20px; border-radius:999px; background-color:var(--surface); background-image:linear-gradient(to right, transparent 0%, transparent 50%, rgba(249,234,0,0) 50%, #F9EA00 100%); background-size:200% 100%; background-position:0 0; color:var(--charcoal); font-family:var(--font-body); font-size:14px; font-weight:700; white-space:nowrap; text-decoration:none; border:none; cursor:pointer; transition:background-position .2s ease;}
.btn-slide:hover{background-position:100% 0; color:var(--charcoal);}
@media (prefers-reduced-motion: reduce){
  .btn-slide, .btn{transition:none;}
}

.stats-bar-wrap{position:relative; z-index:3;}
.stats-bar{background:#FFFBDC; border:3px solid #fff; margin-top:-96.5px; display:grid; grid-template-columns:repeat(4,1fr); border-top-right-radius:96px; border-bottom-right-radius:96px; overflow:hidden;}
.stats-bar .stat{padding:22px 24px; border-right:3px solid #fff; border-bottom:3px solid #fff;}
.stats-bar .stat:nth-child(4n){border-right:none;}
.stats-bar .stat:nth-child(n+5){border-bottom:none;}
.stats-bar .stat:last-child{border-right:none;}
.stats-bar .stat .label{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-secondary); margin-bottom:6px; font-weight:600; text-wrap:balance;}
.stats-bar .stat .value{display:block; font-family:var(--font-display); font-weight:700; font-size:16.5px; color:var(--charcoal); text-wrap:balance;}

/* ---------- Section shell ---------- */
section{padding:76px 0;}
.section-head{max-width:640px; margin:0 auto 44px; text-align:center;}
.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{font-size:clamp(26px,3.2vw,36px); color:var(--charcoal); margin-bottom:14px;}
.section-head p{color:var(--text-secondary); font-size:16.5px;}

/* ---------- Section 1: Domestic / Commercial cards ---------- */
#who-we-help{background:var(--bg-primary); padding-top:24px;}
.helps-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.help-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); border-top-right-radius:96px; border-bottom-left-radius:48px; padding:36px; position:relative; display:flex; flex-direction:column;}
/* Yellow icon block tucked into the card's top-right corner: inset 3px inside the border, with a
   concentric radius (96 card - 1 border - 3 gap = 92) so the white gap stays an even 3px round the curve */
.help-card .help-icon{position:absolute; top:3px; right:3px; width:112px; height:112px; background:#F9EA00; border-top-right-radius:92px; display:flex; align-items:center; justify-content:center; padding:30px 30px 12px 12px;}
.help-card .help-icon img{width:100%; height:100%; object-fit:contain; display:block; transform:scale(.9); transform-origin:left bottom;}
.help-card .help-icon--commercial img{transform:translateX(-4px) scale(.9);}
.help-card h3{font-size:22px; color:var(--charcoal); margin:0 100px 8px 0;}
.help-card > p{color:var(--text-secondary); font-size:15.5px; margin:0 100px 22px 0; max-width:36ch; min-height:56px;}
.help-list{list-style:none; margin:0 0 26px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; flex:1;}
.help-list li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--text-primary); font-weight:500;}
.help-list li svg{display:none;}
.help-list li::before{content:''; width:6px; height:6px; border-radius:50%; background:#C9A400; flex:none; margin-top:8px;}
.help-card .btn{align-self:flex-start;}
#who-we-help .btn-primary{background-image:linear-gradient(to right, #F9EA00 0%, #F9EA00 50%, #fff 100%); color:var(--charcoal);}
#who-we-help .btn-primary:hover{color:var(--charcoal);}
.help-footer{display:flex; align-items:center; justify-content:flex-start; gap:28px; margin-top:32px; padding-top:32px; border-top:1px solid var(--border); flex-wrap:wrap;}
.help-footer p{color:var(--text-secondary); font-size:16.5px; max-width:44ch; flex:none; text-wrap:balance;}
.help-footer .btn{flex:none;}

/* ---------- Section 2: Treatments / pest grid ---------- */
#services{background:var(--pests-bg);}
.treat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-bottom:40px;}
.treat-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); border-top-right-radius:24px; border-bottom-left-radius:24px; padding:15px 16px; text-align:center; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease;}
.treat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-card);}
.treat-icon{width:46px; height:46px; border-radius:50%; background:var(--charcoal); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; padding:11px;}
.treat-icon img{width:100%; height:100%;}
.treat-card h3{font-size:15px; color:var(--charcoal); margin-bottom:4px;}
.treat-card .price{display:block; font-size:12.5px; color:var(--text-secondary); font-weight:600; text-wrap:balance;}
.treat-cta{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
.treat-cta .btn{grid-column:3 / 4; width:calc(100% + 36px); margin-left:-18px; box-sizing:border-box; justify-content:center;}
.treat-cta .btn:hover{color:#fff;}

/* ---------- Section 3: Accreditation ---------- */
#accreditation{background:var(--bg-primary);}
.accred-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.accred-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); border-top-right-radius:24px; border-bottom-left-radius:24px; padding:26px; transition:transform .15s ease, box-shadow .15s ease;}
a.accred-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-card);}
.accred-icon{width:44px; height:44px; border-radius:var(--radius); background:var(--bg-subtle); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin-bottom:16px; padding:9px;}
.accred-icon .icon{color:var(--charcoal);}
.accred-icon.round{width:52px; height:52px; border-radius:50%; background:var(--charcoal); border:none; padding:13px;}
.accred-icon.round .icon{color:#fff;}
.accred-icon.round img{width:100%; height:100%; object-fit:contain; display:block;}
.accred-logo{height:52px; width:auto; margin-bottom:16px;}
.accred-logo--bpca{height:68px; margin-top:-8px; margin-bottom:8px;} /* same 68px footprint as 52px logo + 16px margin, so card headings stay aligned */
/* Accreditation cards: every logo/icon is a 72px circle floated top-right, so the four balance and the text
   wraps beside then under it. PROMPT uses the circular badge images/prompt-accreditation-circle.svg. */
.accred-card .accred-icon.round, .accred-card .accred-logo--bpca, .accred-card .accred-logo--round{float:right; width:72px; height:72px; margin:0 0 10px 14px;}
.accred-card .accred-icon.round{padding:17px;}
.accred-card .accred-icon.round, .accred-icon.round.accred-icon--yellow{background:#F9EA00;}
.accred-card::after{content:''; display:block; clear:both;}
/* Accreditations page full-width sections: logo/icon floated to the top-right of the panel */
.copy-panel .panel-logo{float:right; margin:0 0 12px 20px;}
.copy-panel .panel-logo--round{width:88px; height:88px;}
.copy-panel .accred-icon.panel-logo{width:88px; height:88px; padding:21px;}
.copy-panel:has(.panel-logo)::after{content:''; display:block; clear:both;}
/* Info cards with a circular badge/icon floated top-right (Domestic "Why people choose…"), matching the accreditation cards */
.info-card .card-badge, .copy-panel .card-badge{float:right; width:72px; height:72px; margin:0 0 10px 14px;}
.info-card .card-badge.accred-icon.round, .copy-panel .card-badge.accred-icon.round{padding:17px; background:#F9EA00;}
.info-card .card-badge.accred-icon.round .icon{color:var(--charcoal); width:100%; height:100%;}
.card-badge.card-badge--wide.accred-icon.round{padding:11px;} /* wide, short icons (bee page crown) fill more of the same circle */
/* Camera page warning triangle: icon kept at 25px wide; circle shrunk to the smallest that holds it (30px, the
   triangle's circumcircle is ~26.4px). Icon nudged up 3.7px so the triangle's circumcentre sits at the circle centre. */
.card-badge.card-badge--alert.accred-icon.round{width:30px; height:30px; padding:2.5px;}
.card-badge--alert img{transform:translateY(-3.7px);}
.info-card:has(.card-badge)::after, .copy-panel:has(.card-badge)::after{content:''; display:block; clear:both;}
.accred-card h3{font-family:var(--font-display); font-size:16.5px; margin-bottom:8px; color:var(--charcoal); font-weight:700;}
.accred-card p{color:var(--text-secondary); font-size:14.5px;}

/* ---------- Section 4: Coverage map ---------- */
#coverage{background:#fff;}
.coverage-layout{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;}
.coverage-copy .eyebrow{margin-bottom:14px;}
.coverage-copy h2{font-size:clamp(26px,3.2vw,34px); color:var(--charcoal); margin-bottom:14px;}
.coverage-copy > p{color:var(--text-secondary); font-size:16px; margin-bottom:22px; max-width:52ch;}
.region-tags{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px;}
.region-tag{background:var(--charcoal); color:#fff; font-weight:700; font-size:13px; padding:8px 14px; border-top-right-radius:8px; border-bottom-left-radius:8px; text-wrap:balance;}
.town-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;}
.town-chips span{background:var(--surface); border:1px solid var(--border); font-size:13px; color:var(--text-secondary); padding:6px 12px; border-top-right-radius:8px; border-bottom-left-radius:8px; text-wrap:balance;}
.town-chips .more{color:var(--text-primary); font-weight:700; border-style:dashed;}
.coverage-map{border:1px solid var(--border); background:var(--surface); aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); border-top-right-radius:96px; border-bottom-left-radius:36px;}
.coverage-map iframe{width:100%; height:100%; border:0; display:block;}

/* ---------- Section 5: Contact ---------- */
#contact{background:var(--bg-primary);}
.contact-layout{display:grid; grid-template-columns:1.1fr 0.9fr; gap:24px;}
.contact-left{display:flex; flex-direction:column; gap:24px;}
.contact-form{background:rgba(255,248,181,0.5); padding:32px; border-bottom-left-radius:48px;}
.contact-form.contact-form-square{border-radius:var(--radius);}
.contact-hours-block{background:#F1F2F2; padding:28px; flex:1; display:flex; flex-direction:column; justify-content:center;}
.contact-hours-block h2, .contact-hours-block h3{margin-bottom:16px; color:var(--charcoal); font-size:16px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.form-field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.form-field label{font-size:13px; font-weight:700; color:var(--charcoal); text-wrap:balance;}
.form-field input,
.form-field select,
.form-field textarea{font-family:var(--font-body); font-size:15px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius); background:#FAFAFA; color:var(--text-primary);}
.form-field select{appearance:none; -webkit-appearance:none; padding-right:46px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23242425' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 20px center; background-size:16px;}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{outline:2px solid var(--charcoal); outline-offset:1px; background:var(--surface);}
.form-field textarea{resize:vertical; min-height:110px;}
.form-note{font-size:12.5px; color:var(--text-secondary); margin-top:12px;}
.form-success{display:none; background:var(--bg-subtle); border:1px solid var(--border); padding:16px; margin-bottom:16px; font-weight:600; font-size:14.5px;}
.form-success.visible{display:block;}

.contact-side{display:flex; flex-direction:column; gap:24px;}
.contact-map{border:1px solid var(--border); aspect-ratio:4/3; overflow:hidden;}
.contact-map iframe{width:100%; height:100%; border:0; display:block;}
.contact-details{background:#F1F2F2; color:var(--text-primary); padding:28px; flex:1; border-top-right-radius:96px;}
.contact-details.contact-details-square{border-radius:var(--radius);}
.contact-details-divider{border-top:1px solid #fff; margin:22px 0;}
.hours-list{list-style:none; display:flex; flex-direction:column; gap:10px; margin:0; padding:0;}
.hours-list li{display:flex; align-items:center; gap:12px; font-size:14.5px;}
.hours-list li span:first-child{color:var(--text-primary); font-weight:600; min-width:130px;}
.hours-list li span:last-child{color:var(--text-secondary);}
.contact-details h2, .contact-details h3{color:var(--charcoal); font-size:16px; margin-bottom:16px;}
.contact-details ul{list-style:none; display:flex; flex-direction:column; gap:14px;}
.contact-details li{display:flex; align-items:center; gap:12px;}
.contact-details li svg{width:18px; height:18px; flex:none; color:var(--charcoal);}
.contact-details li svg.icon-mail-sm{transform:scale(.85);}
.contact-details a{text-decoration:none; color:var(--text-primary); font-weight:600; font-size:14.5px;}
.contact-details a:hover{color:#F9EA00;}
.contact-details .sub{display:block; font-size:12px; color:var(--text-secondary); font-weight:400;}
.contact-details .sub-inline{font-size:12px; color:var(--text-secondary); font-weight:400;}

/* ---------- Dark CTA band ---------- */
.cta-dark{background:#F9EA00; color:var(--charcoal);}
.cta-round-trial{border-top-right-radius:999px; border-bottom-right-radius:999px; margin-bottom:20px;} /* 20px white gap above the footer */
@media (min-width:561px){
  .cta-round-trial .cta-phones{margin-right:60px;}
  section:has(+ .cta-round-trial){padding-bottom:206px;}
  .cta-round-trial{margin-top:-130px;}
}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.cta-dark h2{color:var(--charcoal); font-size:clamp(24px,3vw,32px); margin-bottom:10px;}
.cta-dark p{color:var(--charcoal-2); font-size:16px; max-width:44ch;}
.cta-phones{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.cta-phone{display:flex; flex-direction:column; align-items:flex-start; gap:10px; background:#FFF8B5; padding:16px 22px; border-radius:var(--radius); border-top-right-radius:24px; border-bottom-left-radius:24px; border:2px solid #FFF8B5; text-decoration:none; transition:background .15s ease, border-color .15s ease;}
.cta-phone .icon{width:24px; height:24px; color:var(--charcoal); flex:none;}
.cta-phone .num{font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--charcoal); display:block; text-wrap:balance;}
.cta-phone .sub{font-size:13px; color:var(--text-secondary);}
.cta-phone:hover{background:var(--charcoal); border-color:var(--charcoal);}
.cta-phone:hover .icon,
.cta-phone:hover .num{color:#F9EA00;}
.cta-phone:hover .sub{color:#FFF8B5;}

/* ---------- Footer ---------- */
footer.site{background:#1B1B1C; color:#fff; padding:52px 0 26px;}
.footer-grid{display:flex; align-items:stretch; gap:64px; margin-bottom:36px;}
.footer-brand{flex:0 1 468px; padding-right:32px; border-right:1px solid #F9EA00;}
.footer-links{flex:1; display:grid; grid-template-columns:repeat(4,max-content); gap:48px; justify-content:flex-end;}
.footer-logo{height:46px; width:auto; margin-bottom:16px;}
.footer-grid h2{color:#F9EA00; font-size:13.5px; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:16px; font-family:var(--font-body); font-weight:700;}
.footer-grid h2 a{color:inherit; text-decoration:none; font-weight:700;}
.footer-grid h2 a:hover{color:#fff;}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.footer-grid a{text-decoration:none; color:#fff; font-size:14.5px; font-weight:400;}
.footer-grid a:hover{color:#F9EA00;}
.footer-grid p{font-size:14px; color:#fff;}
.footer-tagline{max-width:36ch; text-wrap:balance;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.28); padding-top:20px; display:flex; justify-content:space-between; align-items:center; font-size:13px; flex-wrap:wrap; gap:10px; color:#fff;}
.footer-bottom-left{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.footer-badge{height:32px; width:auto; flex:none;}
.footer-badge--bpca{height:47px;}
.footer-bottom-left a{display:flex; line-height:0;}
.footer-legal{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.footer-legal a{color:#fff; text-decoration:none; font-size:13px; text-wrap:balance;}
.footer-legal a:hover{color:#F9EA00;}

/* ---------- Inner-page header band ---------- */
.page-header{background:var(--charcoal); padding:56px 0 44px;}
.page-header .eyebrow{color:var(--charcoal);}
.page-header h1{color:#fff; font-size:clamp(28px,4vw,42px); margin-bottom:14px; max-width:30ch;}
.page-header p{color:rgba(255,255,255,0.82); font-size:17px; max-width:64ch;}
.lead-balanced{text-wrap:balance;}
.page-header .hero-actions{margin-top:26px;}
.page-header.circle-yellow{background:#F9EA00 url('../images/circle-banner-white-2.svg') no-repeat left center / cover;} /* solid yellow + graded white arcs (phones use circle-banner-yellow-mobile.svg, below) */
/* Keep the arcs clear of the intro text and header icon: the first visible arc sits ~51% across the image, so the
   image is made at least wide enough for that arc to land 40px beyond whichever ends further right —
   the text column (720px from the content's left edge) or the header icon. Falls back to full width. */
@media (min-width:561px){
  .page-header.circle-yellow{background-size:max(100%, calc((max(max(24px, 50vw - 656px) + 720px, 70vw - 435px + clamp(114px, 10.2vw, 180px)) + 40px) / 0.51)) auto;}
}
.page-header.circle-yellow h1{color:var(--charcoal);}
.page-header.circle-yellow p{color:var(--charcoal-2);}
.page-header.circle-yellow .btn-ghost{color:var(--charcoal); border-color:transparent; background-image:linear-gradient(to right, transparent 0%, transparent 50%, rgba(255,255,255,0) 50%, #fff 100%);}
.page-header.circle-yellow .btn-primary{background-image:linear-gradient(to right, var(--charcoal) 0%, var(--charcoal) 50%, #F9EA00 100%);}
.icon-page-header{position:relative; z-index:0; overflow:hidden;}
@media (min-width:701px){
  .icon-page-header{min-height:400px;}
  .icon-page-header.page-header-compact{min-height:0;}
}
.page-header-compact{padding-bottom:56px;}
.page-header-icon{position:absolute; top:50%; left:calc(70% - 435px); transform:translate(-50%,-50%); width:clamp(228px,20.4vw,360px); aspect-ratio:1/1; z-index:-1; pointer-events:none; opacity:.35;}
.page-header-compact .page-header-icon{width:clamp(205.2px,18.36vw,324px);}
.page-header-compact .page-header-icon--areas{width:clamp(174.42px,15.606vw,275.4px);}
.page-header-compact .page-header-icon--services{width:clamp(184.68px,16.524vw,291.6px);}
.page-header-icon img{width:100%; height:100%; object-fit:contain; display:block;}
.page-header-icon--contact{width:clamp(205px,18.4vw,324px);}
.page-header-compact .page-header-icon--contact{width:clamp(184.5px,16.56vw,291.6px);}
.break-desktop{display:none;}
@media (min-width:701px){
  .break-desktop{display:inline;}
}
@media (max-width:700px){
  .page-header-icon{width:clamp(260px,74vw,420px); left:50%; top:40%; opacity:.3;}
  .page-header-compact .page-header-icon--contact{width:clamp(245.7px,69.93vw,396.9px);}
  .page-header-compact .page-header-icon--domestic{width:clamp(224.64px,63.936vw,362.88px);}
  .page-header-compact .page-header-icon--commercial{width:clamp(240.084px,68.3316vw,387.828px);}
  .page-header-compact .page-header-icon--bees-honeybees{width:clamp(299px,85.1vw,483px);}
  .page-header-compact .page-header-icon--bird-proofing{width:clamp(269.8475px,76.80275vw,435.9075px);}
  .page-header-compact .page-header-icon--camera-drain-survey{width:clamp(286px,81.4vw,462px);}
  .page-header-compact .page-header-icon--about{width:clamp(280.8px,79.92vw,453.6px);}
  .page-header-compact .page-header-icon--areas{width:clamp(261.48096px,74.421504vw,422.39232px);}
  .page-header-compact .page-header-icon--accreditations{width:clamp(275.184px,78.3216vw,444.528px);}
  .page-header-compact .page-header-icon--services{width:clamp(234px,66.6vw,378px);}
}
.breadcrumbs{padding:16px 0; background:var(--bg-subtle);}
.breadcrumbs ol{list-style:none; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary);}
.breadcrumbs a{color:var(--text-secondary); text-decoration:none; font-weight:600;}
.breadcrumbs a:hover{color:var(--charcoal);}
.breadcrumbs li[aria-current]{color:var(--charcoal); font-weight:700;}

/* ---------- Generic content page ---------- */
.content-section{background:var(--bg-primary);}
.content-section.alt{background:var(--bg-subtle);}
.content-lede{max-width:760px; margin:0 auto 44px; text-align:center;}
.content-lede h2{margin-bottom:14px;}
.content-lede p{color:var(--text-secondary); font-size:17px;}
/* Long intro split over two columns on desktop (Domestic "Why people choose…") */
@media (min-width:901px){
  .content-lede--cols{max-width:none;} /* full page content width */
  .content-lede--cols .lede-cols{display:grid; grid-template-columns:1fr 1fr; gap:48px; text-align:left;}
}
/* FAQ sections (id="faq"): full content width, each question a native <details> so it collapses
   without JS while the answer stays in the HTML. Yellow triangle (assets/icons/FAQ toggle.svg, recoloured)
   points down when closed, up when open. */
.faq-item summary{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 0; cursor:pointer; list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:''; flex:none; width:20px; height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 185.6 165'%3E%3Cpath fill='%23F9EA00' d='M78.87,8.04L2.18,140.87c-6.19,10.72,1.55,24.13,13.93,24.13h153.38c12.38,0,20.12-13.4,13.93-24.13L106.73,8.04c-6.19-10.72-21.67-10.72-27.86,0Z'/%3E%3C/svg%3E") no-repeat center / contain; transform:rotate(180deg); transition:transform .2s ease;}
.faq-item[open] summary::after{transform:none;}
.faq-item summary:focus-visible{outline:2px solid var(--charcoal); outline-offset:4px;}
.faq-item h3{font-size:18px; color:var(--charcoal); margin:0;}
.faq-item p{color:var(--text-secondary); font-size:16px; max-width:100ch; padding:0 44px 24px 0;}
@media (prefers-reduced-motion: reduce){
  .faq-item summary::after{transition:none;}
}
@media (max-width:560px){
  .faq-item summary{gap:16px; padding:16px 0;}
  .faq-item summary::after{width:14px; height:12px;}
  .faq-item h3{font-size:16.5px;}
  .faq-item p{padding-right:30px;}
}
.intro-centered{max-width:640px; margin:0 auto 44px; text-align:center;}
.intro-cols{display:grid; grid-template-columns:1fr 1fr; gap:44px; margin:0 0 44px;}
.intro-cols p{margin-bottom:0; max-width:none;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start;}
.two-col.align-center{align-items:center;}
.two-col.reverse{direction:rtl;}
.two-col.reverse > *{direction:ltr;}
.copy h2{font-size:clamp(24px,3vw,32px); color:var(--charcoal); margin-bottom:16px;}
.copy h3{font-size:18px; color:var(--charcoal); margin:22px 0 8px;}
.copy p{color:var(--text-secondary); font-size:16px; margin-bottom:14px; max-width:65ch;}
.copy ul, .copy-panel ul{list-style:none; display:flex; flex-direction:column; gap:10px; margin:14px 0; padding:0;}
.copy ul li, .copy-panel ul li{display:flex; align-items:flex-start; gap:10px; font-size:15.5px; color:var(--text-primary); font-weight:500;}
.copy ul li svg, .copy-panel ul li svg{display:none;}
.copy ul li::before, .copy-panel ul li::before{content:''; width:6px; height:6px; border-radius:50%; background:#C9A400; flex:none; margin-top:8px;}
.copy-panel{background:var(--surface); border:1px solid var(--border); border-top-right-radius:24px; border-bottom-left-radius:24px; padding:32px;}
.copy-panel.grey{background:var(--bg-subtle);}
@media (min-width:701px){
  .copy-panel.shift-down-30{margin-top:30px;}
  .copy-panel.shift-down-25{margin-top:25px;}
}

/* ---------- Legal pages (terms / privacy / cookies) ---------- */
.legal-content{max-width:none;}
.legal-content .updated{color:var(--text-secondary); font-size:14px; margin-bottom:28px;}
.legal-content h2{font-size:22px; color:var(--charcoal); margin:40px 0 12px;}
.legal-content h2:first-of-type{margin-top:0;}
.legal-content h3{font-size:17px; color:var(--charcoal); margin:22px 0 8px;}
.legal-content p, .legal-content li{color:var(--text-secondary); font-size:15.5px; line-height:1.65;}
.legal-content p{margin-bottom:14px;}
.legal-content ul, .legal-content ol{padding-left:22px; margin-bottom:14px;}
.legal-content li{margin-bottom:6px;}
.legal-content a{color:var(--charcoal);}
.legal-content table{width:100%; border-collapse:collapse; margin:8px 0 20px; font-size:14.5px;}
.legal-content th, .legal-content td{text-align:left; padding:10px 12px; border:1px solid var(--border); vertical-align:top;}
.legal-content th{background:var(--bg-subtle); font-weight:700; color:var(--charcoal);}
.copy-panel h3{font-size:18px; color:var(--charcoal); margin:22px 0 8px;}
.copy-panel h3:first-of-type{margin-top:0;}
.copy-panel p{color:var(--text-secondary); font-size:16px; margin-bottom:14px; max-width:65ch;}
.info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.info-grid.five-col{grid-template-columns:repeat(5,1fr);}
.info-grid.four-col{grid-template-columns:repeat(4,1fr);}
.info-card{background:var(--surface); border:1px solid var(--border); border-top-right-radius:24px; border-bottom-left-radius:24px; padding:26px; display:block; transition:transform .15s ease, box-shadow .15s ease;}
a.info-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-card);}
.info-card .info-icon{width:44px; height:44px; background:var(--bg-subtle); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin-bottom:16px; padding:9px;}
.info-card-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px;}
.info-card-head .info-icon{margin-bottom:0;}
.info-badge{height:52px; width:auto;}
.copy-badge-row{display:flex; align-items:center; gap:14px; margin:22px 0 8px;}
.copy-badge-row h3{margin:0;}
.copy-badge-row .info-badge{height:39px;}
.info-card .info-icon .icon{color:var(--charcoal);}
/* Custom page icons with no tile behind them (Services "Five ways we can help") */
.info-card .info-icon--plain{background:none; border:none; padding:0; width:52px; height:52px; justify-content:flex-start;}
.info-card .info-icon--plain img{width:100%; height:100%; object-fit:contain; object-position:left center; display:block;}
.info-card h3{font-size:16.5px; color:var(--charcoal); margin-bottom:8px;}
.info-card p{color:var(--text-secondary); font-size:14.5px;}
.callout-band{background:var(--charcoal); color:#fff; padding:52px 0;}
.callout-inner{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.callout-band h2{color:#fff; font-size:clamp(24px,3vw,32px); margin-bottom:10px;}
.callout-band p{color:var(--text-on-dark-muted); font-size:16px; max-width:44ch;}
.callout-band .btn{flex:none;}
.callout-band.yellow{background:#F9EA00;}
.callout-band.yellow h2{color:var(--charcoal);}
.callout-band.yellow p{color:var(--charcoal-2);}

/* ---------- Pest treatment module (Domestic) ---------- */
.module-layout{display:grid; grid-template-columns:270px 1fr; gap:36px; align-items:stretch;}
.pest-menu{background:var(--surface); border:1px solid var(--border); padding:10px; position:sticky; top:88px;}
.pest-menu-list{list-style:none; display:flex; flex-direction:column; gap:0; margin:0; padding:0;}
.pest-menu-item{display:flex; align-items:center; gap:12px; width:100%; padding:5px 10px; background:transparent; border:none; border-left:3px solid transparent; text-align:left; font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--text-primary); cursor:pointer; border-radius:0; text-wrap:balance;}
.pest-menu-item:hover{background:var(--bg-subtle);}
.pest-menu-item.active{background:var(--bg-subtle); border-left-color:var(--charcoal); color:var(--charcoal);}
.pest-menu-item .menu-icon{width:30px; height:30px; border-radius:50%; background:var(--charcoal); display:flex; align-items:center; justify-content:center; flex:none; padding:6px;}
.pest-menu-item .menu-icon img{width:100%; height:100%;}
.pest-panels{min-width:0; background:var(--surface); border:1px solid var(--border); border-top-right-radius:96px; padding:36px; scroll-margin-top:90px;}
.pest-panel{display:none;}
.pest-panel.active{display:flex; flex-direction:column; min-height:100%;}
.pest-panel-head{display:flex; align-items:center; gap:18px; margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--border);}
.pest-panel-icon{width:60px; height:60px; border-radius:50%; background:var(--charcoal); display:flex; align-items:center; justify-content:center; padding:14px; flex:none;}
.pest-panel-icon img{width:100%; height:100%;}
.pest-panel h2{font-size:26px; color:var(--charcoal); margin-bottom:8px;}
.price-tag{display:inline-block; background:var(--bg-subtle); border:1px solid var(--border); padding:6px 14px; font-weight:700; font-size:13.5px; color:var(--charcoal); text-wrap:balance;}
.pest-panel h3{font-size:15.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--charcoal); margin:26px 0 10px;}
.pest-panel h3:first-of-type{margin-top:0;}
.pest-panel p{color:var(--text-secondary); font-size:15.5px; max-width:70ch; margin-bottom:8px;}
.pest-panel .btn{margin-top:26px;}
.panel-cta-group{display:flex; flex-direction:row; flex-wrap:wrap; align-items:stretch; gap:10px; margin-top:auto; padding-top:14px;}
.panel-cta-group .btn{background-image:linear-gradient(to right, #F9EA00 0%, #F9EA00 50%, #fff 100%); color:var(--charcoal); justify-content:center; padding:14px 14px; margin-top:0; flex:1 1 160px;}
.panel-cta-group .btn:hover{color:var(--charcoal);}
.panel-cta-group .btn-ghost{background-color:transparent; background-image:linear-gradient(to right, transparent 0%, transparent 50%, rgba(249,234,0,0) 50%, #F9EA00 100%); border-color:transparent; color:var(--charcoal);}
.panel-cta-group .btn-ghost:hover{color:var(--charcoal);}

/* ---------- Team / family cards ---------- */
.team-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.team-card{background:var(--surface); border:1px solid var(--border); border-top-right-radius:24px; border-bottom-left-radius:24px; padding:30px;}
.team-card .role{display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-secondary); margin-bottom:14px; text-wrap:balance;}
.team-card h3{font-size:20px; color:var(--charcoal); margin-bottom:10px;}
.team-card p{color:var(--text-secondary); font-size:15px;}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav-links{display:none;}
  .nav-links.open{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--surface); border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-card); padding:8px 0;
  }
  .nav-links.open li{width:100%;}
  .nav-links.open a{display:block; padding:14px 24px; border-bottom:1px solid var(--border);}
  .nav-links.open .has-dropdown .dropdown{
    display:block; position:static; border:none; box-shadow:none; padding:0; min-width:0;
  }
  .nav-links.open .has-dropdown .dropdown li a{padding-left:40px; font-size:13.5px;}
  .nav-toggle{display:flex;}
  header.site{position:sticky;}
  .nav{position:relative;}
}
@media (max-width:1000px){
  .helps-grid{grid-template-columns:1fr;}
  .help-card .help-icon{width:92px; height:92px; padding:24px 24px 10px 10px;}
  .help-card h3, .help-card > p{margin-right:80px;}
  .help-card > p{max-width:none;}
  .treat-grid{grid-template-columns:repeat(3,1fr);}
  .treat-cta{grid-template-columns:repeat(3,1fr);}
  .treat-cta .btn{grid-column:2 / 3;}
  .accred-grid{grid-template-columns:repeat(2,1fr);}
  .coverage-layout{grid-template-columns:1fr;}
  .contact-layout{grid-template-columns:1fr;}
  .contact-details{border-top-right-radius:24px;}
  .contact-form{border-top-right-radius:24px;}
  .footer-grid{flex-direction:column; gap:36px;}
  .footer-brand{flex-basis:auto; padding-right:0; border-right:none;}
  .footer-tagline{max-width:none;}
  .footer-links{grid-template-columns:1fr 1fr; gap:28px 32px;}
  .footer-links > div:last-child{margin-left:0;}
  .two-col{grid-template-columns:1fr;}
  .intro-cols{grid-template-columns:1fr; gap:14px;}
  .intro-cols p{margin-bottom:14px;}
  .two-col.reverse{direction:ltr;}
  .info-grid{grid-template-columns:1fr 1fr;}
  .info-grid.five-col{grid-template-columns:repeat(3,1fr);}
  .info-grid.four-col{grid-template-columns:repeat(2,1fr);}
  .module-layout{grid-template-columns:1fr;}
  .pest-menu{position:static;}
  .pest-menu-list{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
  .pest-menu-item{width:100%; border-left:none; border-bottom:3px solid transparent; padding:8px 12px;}
  .pest-menu-item.active{border-left-color:transparent; border-bottom-color:var(--charcoal);}
  .team-grid{grid-template-columns:1fr;}
}
@media (max-width:750px){
  .treat-cta .btn{grid-column:1 / 3; white-space:normal; width:100%; margin-left:0;}
}
@media (max-width:900px){
  .hero-banner{height:clamp(360px, 60vw, 420px);}
  .areas-dotmap{border-width:2.5px;}
  /* Tablet + phone: icon-only header CTAs (WhatsApp + mobile) so the burger stays on screen */
  .nav-ctas .nav-cta span.label-full{display:none;}
  .nav-cta:not(.mobile):not(.whatsapp){display:none;}
  .stats-bar{grid-template-columns:repeat(2,1fr); margin-top:-20px; border:none;}
  .stats-bar .stat{border-right:3px solid #fff; border-bottom:3px solid #fff;}
  .stats-bar .stat:nth-child(2n){border-right:none;}
  .stats-bar .stat:nth-child(5),
  .stats-bar .stat:nth-child(6){border-bottom:3px solid #fff;}
  .stats-bar .stat:nth-child(n+7){border-bottom:none;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
}
/* Tablet homepage hero: uses the phone artwork (photo with curved bottom + white rings, 1000×1650) at full width.
   It's shifted up 8vw to trim some ceiling so the photo band isn't too tall; the photo's arc then ends at
   ~73vw, so the text starts just below it, over the rings, and never covers the photo. */
@media (min-width:561px) and (max-width:900px){
  .hero-banner{height:auto; padding:calc(73vw + 28px) 0 0; background:#F1F2F2 url('../images/circle-homepage-banner-mobile.svg') no-repeat center -8vw / 100% auto;} /* padding also replaces the generic section{padding:76px 0} */
  .hero-banner-content{position:static; padding:0 0 36px;}
}
@media (max-width:560px){
  .hero-banner{height:clamp(700px, 190vw, 820px); background:#F1F2F2 url('../images/circle-homepage-banner-mobile.svg') no-repeat top center / cover;}
  .hero-banner-content{align-items:flex-end; padding-bottom:8px;}
  .hero-banner-content .wrap{position:relative;}
  .hero-accreditation{position:absolute; top:11px; right:24px;}
  .hero-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .page-header.circle-yellow{background:#fff url('../images/circle-banner-yellow-mobile.svg') no-repeat center 35% / cover; padding:48px 0 240px;}
  .stats-bar{grid-template-columns:repeat(2,1fr); margin-top:23px; border:none; border-top-right-radius:24px; border-bottom-right-radius:24px;}
  .stats-bar .stat{border-right:3px solid #fff; border-bottom:3px solid #fff;}
  .stats-bar .stat:nth-child(2n){border-right:none;}
  .stats-bar .stat:nth-child(5),
  .stats-bar .stat:nth-child(6){border-bottom:3px solid #fff;}
  .stats-bar .stat:nth-child(n+7){border-bottom:none;}
  .treat-grid{grid-template-columns:repeat(2,1fr);}
  .treat-cta{grid-template-columns:repeat(2,1fr);}
  .treat-cta .btn{grid-column:1 / 3; width:100%; margin-left:0;}
  .help-list{grid-template-columns:1fr;}
  .accred-grid{grid-template-columns:repeat(2,1fr); gap:14px;}
  .accred-card{padding:18px;}
  .accred-card .accred-icon.round, .accred-card .accred-logo--bpca, .accred-card .accred-logo--round{float:none; width:56px; height:56px; margin:0 0 12px;}
  .accred-card .accred-icon.round{padding:13px;}
  .cta-round-trial{border-top-right-radius:48px; border-bottom-right-radius:0; margin-top:-48px;}
  section:has(+ .cta-round-trial){padding-bottom:124px;}
  .cta-inner{flex-direction:column; align-items:flex-start;}
  .cta-phones{flex-direction:column; align-items:stretch; width:100%; gap:10px;}
  .cta-phone{flex-direction:row; align-items:center; gap:12px; padding:12px 16px; width:100%;}
  .cta-phone .icon{width:20px; height:20px;}
  .cta-phone > span{display:flex; align-items:baseline; flex-wrap:wrap; gap:14px;}
  .cta-phone .num{font-size:16px; display:inline;}
  .cta-phone .sub{font-size:12px;}
  .callout-inner{flex-direction:column; align-items:flex-start;}
  .footer-links{grid-template-columns:1fr 1fr; grid-template-rows:repeat(2,auto); grid-auto-flow:column; gap:28px 20px;}
  .footer-links > div:last-child{margin-left:0;}
  .form-row{grid-template-columns:1fr;}
  .info-grid{grid-template-columns:1fr;}
  .info-grid.five-col{grid-template-columns:1fr;}
  .info-grid.four-col{grid-template-columns:1fr;}
  .pest-panels{padding:22px;}
  .pest-panel-head{flex-wrap:wrap;}
  .module-layout{grid-template-columns:44px 1fr; gap:8px; align-items:stretch;}
  .pest-menu{padding:4px;}
  .pest-menu-list{display:flex; flex-direction:column; gap:4px;}
  .pest-menu-item{flex-direction:column; justify-content:center; gap:0; width:100%; padding:6px 2px; border-left:none; border-bottom:none; border-radius:6px;}
  .pest-menu-item.active{border-left-color:transparent; border-bottom-color:transparent; background:var(--bg-subtle);}
  .pest-menu-item .menu-icon{width:30px; height:30px;}
  .pest-menu-item .menu-label{display:none;}
  .panel-cta-group{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  .panel-cta-group .btn{flex:none; padding:11px 10px; font-size:13.5px; gap:6px; white-space:nowrap;}
}
@media (prefers-reduced-motion: reduce){
  .treat-card{transition:none;}
}

/* ---------- Areas we cover (hub + town pages) ---------- */
.areas-map-section{background:var(--bg-subtle);}
.areas-map-inner{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;}
.areas-map-copy .eyebrow{margin-bottom:14px;}
.areas-map-copy h2{font-size:clamp(26px,3.2vw,34px); color:var(--charcoal); margin-bottom:14px;}
.areas-map-copy p{color:var(--text-secondary); font-size:16px; margin-bottom:22px; max-width:52ch;}
.areas-anchor-towns{display:flex; flex-wrap:wrap; gap:10px;}
.areas-anchor-towns a{background:var(--charcoal); color:#fff; font-weight:700; font-size:13.5px; padding:10px 16px; border-radius:var(--radius); border-top-right-radius:24px; border-bottom-left-radius:24px; text-decoration:none;}
.areas-anchor-towns a:hover{background:#F9EA00; color:var(--charcoal);}
.areas-map{border:1px solid var(--border); background:var(--surface); aspect-ratio:4/3; overflow:hidden;}
.areas-map iframe{width:100%; height:100%; border:0; display:block;}

.areas-search{max-width:420px; margin:0 auto 48px;}
.areas-search input{width:100%; font-family:var(--font-body); font-size:15px; padding:13px 16px; border:1px solid var(--border); border-radius:var(--radius); border-top-right-radius:24px; border-bottom-left-radius:24px; background:#FAFAFA; color:var(--text-primary);}
.areas-search input:focus{outline:2px solid var(--charcoal); outline-offset:1px; background:var(--surface);}
.areas-empty{display:none; text-align:center; color:var(--text-secondary); font-size:15px; padding:20px 0;}
.areas-empty.show{display:block;}

.areas-region{margin-bottom:40px;}
.areas-region:last-child{margin-bottom:0;}
.areas-region h3{font-size:19px; color:var(--charcoal); margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid var(--border); display:flex; align-items:baseline; gap:10px;}
.areas-region h3 .count{font-size:13px; font-weight:500; color:var(--text-secondary);}
.areas-grid{display:flex; flex-wrap:wrap; gap:8px;}
.areas-grid a{background:var(--surface); border:1px solid var(--border); font-size:13.5px; font-weight:600; color:var(--text-primary); padding:8px 14px; border-radius:var(--radius); text-decoration:none; text-wrap:balance;}
.areas-grid a:hover{background:var(--charcoal); border-color:var(--charcoal); color:#fff;}
.areas-grid a[hidden]{display:none;}

.area-nearby{display:flex; flex-wrap:wrap; gap:8px;}
.area-nearby a{background:var(--surface); border:1px solid var(--border); font-size:13.5px; font-weight:600; color:var(--text-primary); padding:8px 14px; border-radius:var(--radius); text-decoration:none;}
.area-nearby a:hover{background:var(--charcoal); border-color:var(--charcoal); color:#fff;}

/* ---------- Areas dot-map ---------- */
.areas-dotmap{position:relative; border:4.75px solid #fff; background:var(--surface); border-radius:var(--radius); border-top-right-radius:96px; border-bottom-left-radius:36px; overflow:hidden; margin-top:8px;}
/* Map runs flush to the page's left edge (right edge stays on the content column), so it scales up and the
   town detail sits nearer the middle of the page. No left border/radius against the window edge. */
.areas-dotmap{margin-left:calc(50% - 50vw); width:calc(100% + 50vw - 50%); border-left:none; border-bottom-left-radius:0;}
.content-section:has(.areas-dotmap){overflow-x:clip;}
.areas-dotmap-svg{width:100%; max-width:none; height:auto; display:block;} /* default: whole map visible; JS widens it to zoom */
.dotmap-bg{fill:var(--bg-subtle);}
.dotmap-bg-image{opacity:.85;}
/* House icon centred on the PAGE (not the map frame, which runs flush to the window's left edge, so page
   centre = 50vw from the frame's left). Sits ~85% down the map; size scales with the frame. */
.dotmap-logo{position:absolute; left:50vw; top:91.5%; width:26.4%; height:auto; transform:translate(-50%,-50%); pointer-events:none; z-index:1;}

.dotmap-scroll-hint{display:none; position:absolute; top:12px; left:24px; align-items:center; gap:6px; background:rgba(36,36,37,.85); color:#fff; font-family:var(--font-body); font-size:12px; font-weight:700; padding:7px 12px; border-radius:999px; pointer-events:none; z-index:2;}
.dotmap-scroll-hint svg{width:14px; height:14px; flex:none;}
.areas-dotmap-scroll{aspect-ratio:1100 / 800; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scrollbar-width:thin;}

.dotmap-zoom-controls{display:flex; position:absolute; bottom:12px; right:12px; flex-direction:column; gap:6px; z-index:2;}
.dotmap-zoom-btn{width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--charcoal); font-size:19px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.18); padding:0;}
.dotmap-zoom-btn:active{background:var(--bg-subtle);}
.dotmap-zoom-btn:disabled{opacity:.4; cursor:default;}

.map-pin{cursor:pointer;}
.pin-hit{fill:transparent;}
.pin-dot{fill:#A8A8A8; opacity:.85; transition:opacity .15s ease, transform .15s ease; transform-box:fill-box; transform-origin:center;}
.pin-label{font-family:var(--font-body); font-size:11.5px; font-weight:600; fill:var(--charcoal); opacity:0; transition:opacity .15s ease; pointer-events:none;}
.map-pin:hover .pin-dot, .map-pin:focus .pin-dot{opacity:1; transform:scale(1.5);}
.map-pin:hover .pin-label, .map-pin:focus .pin-label{opacity:1;}

.map-pin--major .pin-dot{fill:#6B6B6D; stroke:#fff; stroke-width:1.4; opacity:1;}
.map-pin--major .pin-label{opacity:1; font-size:13px; font-weight:700;}
.map-pin--major:hover .pin-dot, .map-pin--major:focus .pin-dot{transform:scale(1.25);}
.map-pin--static:hover .pin-dot, .map-pin--static:focus .pin-dot{transform:none;}

.map-pin--home .pin-dot{fill:var(--charcoal); stroke:var(--charcoal); stroke-width:1.4;}
.pin-ring{fill:none; stroke:#fff; stroke-width:2.5; opacity:.95; transform-box:fill-box; transform-origin:center; animation:pin-ring-pulse 2s ease-out infinite;}
/* Alcester (HQ) ring ripples outwards and fades away, short rest, then repeats */
@keyframes pin-ring-pulse{0%{transform:scale(1); opacity:.95;} 75%{transform:scale(2); opacity:0;} 100%{transform:scale(2); opacity:0;}}
@media (prefers-reduced-motion: reduce){ .pin-ring{animation:none;} }

.areas-toggle{display:flex; margin:0 auto 40px;}
.areas-toggle svg{width:16px; height:16px; transition:transform .2s ease;}
.areas-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
.areas-full-list[hidden]{display:none;}

@media (max-width:900px){
  .areas-map-inner{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .pin-label{font-size:13px;}
  .map-pin--major .pin-label{font-size:14px;}

  .dotmap-scroll-hint{display:flex;}
  .areas-dotmap{border-width:2px;}

  .pin-hit{r:16px;}
  .map-pin--major .pin-hit{r:20px;}
  .map-pin--home .pin-hit{r:22px;}
}