/* ==========================================================
   ENTERPRISE VISUAL REFRESH v2 (shared by the inline-stylesheet pages:
   index, blog index, regional pages, thank-you). Additive, same palette.
   Elevates type scale, spacing rhythm, surface depth and component
   polish. No new colours. No structural/markup changes. Forms and
   endpoints untouched.
   ========================================================== */

/* ---- Elevation + focus tokens (additive, built from existing vars) ---- */
:root{
  --surface-1: 0 1px 2px rgba(28,26,27,.06), 0 1px 1px rgba(28,26,27,.04);
  --surface-2: 0 10px 30px rgba(28,26,27,.08), 0 2px 8px rgba(28,26,27,.05);
  --surface-2-dark: 0 20px 50px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
  --surface-3-dark: 0 30px 70px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.3);
  --ring: 0 0 0 4px var(--burgundy-soft);
}

/* ---- Global focus states (a11y: extend beyond links/summary to all interactive controls) ---- */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--green-bright);
  outline-offset:3px;
  border-radius:6px;
}

/* ---- Hero: first screen shows headline, value prop AND the primary action ---- */
.hero{ padding:8.2rem 0 4.4rem; }
@media (min-width:981px){
  .hero-grid{ grid-template-columns:1.32fr .86fr; gap:3.6rem; align-items:start; }
  .hero-panel{ margin-top:2.4rem; }
}
.hero h1{
  font-size:clamp(2rem, 1.3vw + 1.45rem, 3.1rem);
  line-height:1.08;
  letter-spacing:-.028em;
  margin:1rem 0 1.2rem;
}
.hero-grid h1{ max-width:22ch; }
.hero-lede{ font-size:clamp(1rem, .2vw + .96rem, 1.1rem); line-height:1.65; max-width:62ch; margin-bottom:0; }
.hero-cta, .hero .cta-row{ margin-top:1.8rem; }
.hero-note{
  margin-top:1.8rem;
  padding:.2rem 0 .2rem 1.05rem;
  border-left:2px solid var(--green);
  font-size:.96rem;
  max-width:60ch;
}
.btn-link{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.9rem .4rem; min-height:44px;
  font-weight:700; font-size:.95rem; color:var(--green-bright);
  transition:gap .3s var(--ease), color .3s var(--ease);
}
.btn-link:hover{ gap:.75rem; color:#fff; }
.section-light .btn-link{ color:var(--burgundy); }
.trust-strip{ margin-top:1.8rem; }

/* ---- Typography rhythm elsewhere ---- */
.section-head h2{ letter-spacing:-.02em; }
.doc-code{ font-weight:600; }
/* The restored ".section-* .section-head p" rules must not restyle the eyebrow, which is also a <p> */
.section-head p.doc-code{ font-size:.72rem; color:var(--green-bright); }
.section-light .section-head p.doc-code{ color:var(--burgundy); }
/* Dark panels that sit inside light sections keep the dark-surface eyebrow colour */
.coverage-board .doc-code{ color:var(--green-bright); }
.coverage-board .doc-code::before{ background:var(--green-bright); }

/* ---- Mobile header: one-row utility bar so the fixed header never covers the hero.
        WhatsApp and email remain one tap away in the bottom action bar, footer and contact section. ---- */
@media (max-width:980px){
  .util-item[href^="mailto:"]{ display:none; }
  .hero{ padding-top:8rem; }
}
@media (max-width:600px){
  .util-item[href^="https://wa.me"]{ display:none; }
  .util-inner{ gap:1.1rem; row-gap:0; }
  .util-item span{ font-size:.76rem; }
  .hero{ padding-top:7.4rem; }
  .hero h1{ font-size:clamp(1.85rem, 6.4vw, 2.3rem); }
  .hero-cta .btn-primary, .hero-cta .btn-ghost{ width:100%; justify-content:center; }
}

/* ---- Section rhythm: slightly more generous, consistent vertical breathing room ---- */
.section{ padding:clamp(3.6rem, 4vw + 1.5rem, 6.4rem) 0; }
.section-head{ margin-bottom:clamp(2rem, 2.4vw, 3rem); }

/* ---- Header: tighter alignment, clearer logo presentation ---- */
.site-header{ box-shadow:0 1px 0 var(--line-dark), 0 12px 30px rgba(0,0,0,.18); }
.brand-mark{ box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 22px var(--glow-red); }
.util-bar{ box-shadow:0 1px 0 rgba(255,255,255,.08); }

/* ---- Hero: deeper, more premium panel treatment (same colours, more depth) ---- */
.hero-panel{
  box-shadow:var(--surface-3-dark);
  border-color:rgba(255,255,255,.1);
}
.hero-panel:hover{ box-shadow:var(--surface-3-dark), 0 0 0 1px rgba(143,203,26,.15); }
.panel-btn{ box-shadow:0 10px 26px var(--glow-green); }
.trust-strip .chip{ backdrop-filter:blur(2px); }

/* ---- Cards: white cards set their own ink, so titles stay visible inside dark sections
        (the live site renders the Industries card titles white-on-white) ---- */
.service-card{ color:var(--black); }
@media (min-width:1100px){
  #industries .service-grid, #pest-services .service-grid{ grid-template-columns:repeat(3, 1fr); }
}
/* Regional pages: 6 industry tiles resolved to 5 + 1 orphan under auto-fit; use a clean 3 x 2 */
@media (min-width:900px){
  .industry-grid{ grid-template-columns:repeat(3, 1fr); }
}
/* Gauteng metro coverage: 6 cards resolved to 4 + 2; use 3 x 2 on wide screens */
@media (min-width:1100px){
  .metro-grid{ grid-template-columns:repeat(3, 1fr); }
}

/* ---- Cards: consistent resting elevation instead of flat borders, refined hover ---- */
.service-card{
  box-shadow:var(--surface-1);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.service-card::before{ opacity:.55; transform:scaleX(.18); transform-origin:left; }
.service-card:hover{ box-shadow:var(--surface-2); }
.service-card:hover::before{ opacity:1; transform:scaleX(1); }
.step{ box-shadow:var(--surface-1); }
.step:hover{ box-shadow:var(--surface-2); }
.metro{ box-shadow:var(--surface-1); }
.metro:hover{ box-shadow:var(--surface-2); }
.compliance-list li{ box-shadow:var(--surface-1); }
.accred{ box-shadow:0 1px 2px rgba(0,0,0,.18); }

/* ---- Dark-surface panels: unify the premium "mock UI" components ---- */
.portal-ui, .hub-window, .swab, .coverage-board{
  box-shadow:var(--surface-3-dark);
  border-color:rgba(255,255,255,.09);
}

/* ---- Buttons: slightly more deliberate sizing, stronger resting presence ---- */
.btn-primary{ box-shadow:0 10px 28px var(--glow-red), var(--surface-1); padding:1.02rem 1.95rem; }
.btn-primary:hover{ box-shadow:0 18px 46px rgba(201,38,65,.42); }
.btn-ghost{ font-weight:650; }
.call-btn{ box-shadow:var(--surface-1); }

/* ---- Comparison table: zebra striping and a firmer header for an enterprise feel ---- */
.compare-wrap{ box-shadow:var(--surface-2-dark); }
.compare tbody tr:nth-child(even){ background:rgba(255,255,255,.015); }
.compare thead th{ font-weight:700; }

/* ---- Card links: their arrow <svg> had no size, so on the regional pages each
        "Read the guide" link rendered a card-sized arrow (live-site bug) ---- */
.card-link{ display:inline-flex; align-items:center; gap:.45rem; }
.card-link svg{ width:15px; height:15px; flex:none; }

/* ---- Region cards: keep the eyebrow in normal flow; the restored absolute position
        collided with the heading in the taller Gauteng card ---- */
.region-card p.doc-code{
  position:static; font-size:.72rem; color:var(--green-bright);
  margin:0 0 .9rem;
}

/* ---- Google reviews badge: markup existed on the live site with no CSS at all ---- */
.review-badge{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  background:#232021; border:1px solid var(--line-dark); border-radius:14px;
  padding:1.3rem 1.5rem;
}
.rb-mark{
  width:52px; height:52px; flex:none; border-radius:12px;
  display:grid; place-items:center; background:var(--white);
}
.review-badge .g-stars{ display:block; line-height:1; margin-bottom:.35rem; }
.rb-text{ color:var(--mist); font-size:.95rem; }
.rb-btn{
  margin-left:auto; display:inline-flex; align-items:center; gap:.45rem;
  padding:.75rem 1.2rem; min-height:44px; border-radius:999px;
  border:1px solid rgba(255,255,255,.2); color:#e8e3e1; font-weight:650; font-size:.92rem;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.rb-btn:hover{ border-color:var(--green-bright); background:rgba(121,171,20,.08); }
@media (max-width:640px){ .rb-btn{ margin-left:0; } }

/* ---- Credential / proof panels ---- */
.cred-cert{ box-shadow:var(--surface-2); }
.proof-gallery figure img{ box-shadow:var(--surface-1); }
.review-badge{ box-shadow:var(--surface-1); }
.why-card{ box-shadow:var(--surface-1); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.why-card:hover{ transform:translateY(-4px); box-shadow:var(--surface-2); }

/* ---- Forms: clearer resting state, consistent control height, visible disabled state ---- */
.field input, .field select, .field textarea{ min-height:46px; }
.field textarea{ min-height:120px; }
.form-btn{ box-shadow:0 10px 26px var(--glow-red); }
.form-btn:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none; transform:none; }
.contact-form{ box-shadow:var(--surface-2); }
.contact-card .maplink{ display:flex; width:max-content; }

/* ---- Footer: clearer column structure and a touch more breathing room ---- */
.site-footer{ padding:clamp(2.8rem, 3vw, 3.6rem) 0 2rem; }
.footer-grid{ gap:clamp(2rem, 3vw, 3.4rem); }
.foot-h{ position:relative; padding-bottom:.6rem; }
.foot-h::after{
  content:""; position:absolute; left:0; bottom:0; width:28px; height:2px;
  background:var(--burgundy);
}

/* ---- Footer free-tools strip: identical to /assets/asc.css (the homepage does not load
        that file, so the strip rendered unstyled here and styled on every other page) ---- */
.footer-tools{
  border-top:1px solid var(--line-dark);
  padding:1.2rem 0 1.6rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem;
  font-size:.86rem;
}
.footer-tools strong{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green-bright); font-weight:500;
  margin-right:.4rem;
}
.footer-tools a{
  color:var(--mist); font-weight:600;
  border-bottom:1px solid transparent; padding-bottom:1px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.footer-tools a:hover{ color:#fff; border-bottom-color:var(--green-bright); }
@media (max-width:640px){
  .footer-tools{ flex-direction:column; align-items:flex-start; gap:.55rem; }
  .footer-tools strong{ margin-right:0; }
}

/* ---- WCAG AA fixes that keep the palette: full-opacity white labels on crimson (was ~3.4:1),
        and underlined in-text links so they are not distinguished by colour alone ---- */
.util-label{ color:#fff; }
#regions p a, .footer-grid p a,
.section-dark p a:not([class]), .section-charcoal p a:not([class]){
  text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
}
.compare td.no{ color:var(--mist); }
/* Footer: small crimson labels on black were ~3.2:1. Labels go white; crimson stays as the accent bar. */
.footer-grid h2.foot-h{ color:#fff; }
.footer-cities, .footer-base{ color:var(--mist); }

/* ---- Mobile stats: 2x2 instead of four tall stacked blocks (less scrolling) ---- */
@media (max-width:560px){
  .stats-inner{ grid-template-columns:1fr 1fr; }
  .stat{ padding:1.3rem 1rem; }
  .stat strong{ font-size:1.3rem; }
}

/* ---- Images: stable dimensions already set via width/height attrs; avoid layout shift ---- */
img{ max-width:100%; height:auto; }

/* ---- Reduced motion already respected globally; keep new transitions inside that rule ---- */