/*
Theme Name: Draincure & Son
Theme URI: https://draincureuk.com
Author: Draincure & Son Ltd
Author URI: https://draincureuk.com
Description: Custom theme for Draincure & Son Ltd, commercial drainage specialists. A static design port of the "v2" (Manrope) concept homepage and CCTV Drain Survey page — see readme.txt before editing content in wp-admin.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: draincure-son
*/

/* ============================================================
   Draincure & Son — Homepage Concept
   Design system: industrial livery / hazard-stripe utilitarian
   ============================================================ */

:root{
  /* palette — sourced directly from brand livery + logo */
  --ink:        #131315;
  --ink-soft:   #1b1c1e;
  --ink-raise:  #232427;
  --charcoal:   #565759;
  --charcoal-2: #8a8b8d;
  --line-dark:  rgba(245,242,237,0.10);
  --line-dark-2:rgba(245,242,237,0.18);

  --paper:      #efefef;
  --paper-dim:  #e1e1e1;
  --paper-line: rgba(19,19,21,0.10);

  --orange:     #f94406;
  --orange-dk:  #c93a04;
  --orange-lt:  #ff6a33;

  --white:      #f9f9f9;

  --font-display: "Manrope", sans-serif;
  --font-body:    "Manrope", sans-serif;
  --font-label:   "Manrope", sans-serif;

  --chamfer: 18px;
  --chamfer-sm: 10px;
  --container: 1320px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
/* overflow-x:hidden on body alone doesn't reliably stop horizontal scroll
   caused by elements that intentionally bleed past the viewport edge (the
   dividers, the brand graphic) — the browser's root scroller is html, not
   body, so it needs the same clipping. */
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
/* branded text-selection highlight, everywhere on the site regardless of
   the section's own background/foreground colours — except the CTA band
   and orange buttons, where the text itself is already black-on-orange,
   so an orange highlight would make selected text disappear. Those get
   the inverse (black highlight, orange text) instead. */
::selection{ background:var(--orange); color:var(--ink); }
::-moz-selection{ background:var(--orange); color:var(--ink); }
.cta-band ::selection,
.btn--orange ::selection{ background:var(--ink); color:var(--orange); }
.cta-band ::-moz-selection,
.btn--orange ::-moz-selection{ background:var(--ink); color:var(--orange); }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; line-height:1.08; letter-spacing:-0.02em; }
.container{ max-width:var(--container); margin-inline:auto; padding-inline:32px; }

/* grain texture overlay for dark sections */
.grain{ position:relative; }
.grain::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- utility: chamfered corner blocks (echoes livery cuts) ---------- */
.chamfer{
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.chamfer-sm{
  clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm));
}
.chamfer-tl{
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px);
}

/* ---------- eyebrow label w/ stripes mark ---------- */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-label);
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  margin-bottom:18px;
}
.eyebrow .stripes{ width:36px; height:22px; flex:none; object-fit:contain; }
.eyebrow span{ color:var(--charcoal); }
.section--dark .eyebrow span{ color:var(--charcoal-2); }

.section-head{ max-width:760px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(2.3rem,5.4vw,4.4rem); }
.section-head p{ margin-top:20px; font-size:1.08rem; color:var(--charcoal); max-width:640px; }
.section--dark .section-head p{ color:#c7c5c0; }

.section{ padding-block:120px; position:relative; }
.section--dark{ background:var(--ink); color:var(--paper); }
.section--raise{ background:var(--paper-dim); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  height:82px;
  padding-inline:32px;
  overflow:visible;
  /* background/box-shadow only: both are paint-only, not layout-triggering.
     height is intentionally never animated here (a prior version animated
     height on scroll, which forces layout on every scroll frame). */
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(19,19,21,0.92);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

/* logo badge — deliberately oversized, hangs below the slim nav bar
   like a plate mounted on the cab, so it stays legible over whatever
   scrolls underneath it */
.brand{ display:flex; align-items:flex-start; height:100%; flex:none; }
.brand-plate{
  display:flex; align-items:center; justify-content:center;
  padding:16px 12px 22px;
}
.brand-plate .logo-img{
  height:108px; width:auto; display:block;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,0.45)) drop-shadow(0 3px 6px rgba(0,0,0,0.35));
}
.brand-word{ display:none; }

.main-nav{ display:flex; align-items:center; gap:40px; }
.main-nav ul{ display:flex; gap:34px; }
.main-nav a{
  font-family:var(--font-label);
  font-weight:600;
  font-size:1.02rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--paper);
  position:relative;
  padding-bottom:4px;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--orange); transition:right .3s var(--ease);
}
.main-nav a:hover::after{ right:0; }

/* Services nav dropdown */
.nav-item--dropdown{ position:relative; }
.nav-item-row{ display:flex; align-items:center; }
/* the toggle button only exists for the mobile accordion (see RESPONSIVE) —
   desktop keeps the original hover-to-reveal behaviour untouched */
.nav-dropdown-toggle{ display:none; }
.nav-dropdown{
  position:absolute; top:100%; left:-18px;
  padding-top:20px;
  width:280px;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index:110;
}
.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown:focus-within .nav-dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.nav-dropdown-inner{
  display:block;
  background:var(--ink);
  border:1px solid var(--line-dark-2);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  padding:10px;
  box-shadow:0 24px 48px rgba(0,0,0,0.45);
}
.nav-dropdown a + a{ margin-top:2px; }
.nav-dropdown a{
  display:block;
  padding:12px 16px;
  font-family:var(--font-label); font-weight:600; font-size:0.95rem; letter-spacing:0; text-transform:none;
  color:var(--paper);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav-dropdown a::after{ display:none; }
.nav-dropdown a:hover{ background:var(--orange); color:var(--ink); }

/* branded touches on the full-screen mobile nav only (see RESPONSIVE for
   the display:flex/block overrides that actually show them) — a corner
   watermark using the same low-opacity treatment as the hero/CTA sections,
   and a small stripes-mark label that echoes the eyebrow component used
   throughout the rest of the site. Both are aria-hidden: decorative only. */
.nav-watermark{
  display:none;
  position:fixed; right:-12%; bottom:-10%;
  width:75%;
  pointer-events:none;
  filter:invert(1) brightness(1.6);
  opacity:0.05;
  z-index:0;
}
.nav-brand-mark{
  display:none;
  align-items:center; gap:12px;
  margin-bottom:24px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line-dark);
}
.nav-brand-mark img{ width:32px; height:auto; flex:none; }
.nav-brand-mark span{
  font-family:var(--font-label); font-weight:700; font-size:0.85rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--charcoal-2);
}

.header-cta{ display:flex; align-items:center; gap:18px; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-label); font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  font-size:0.98rem;
  padding:13px 26px;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn svg{ width:17px; height:17px; flex:none; }
.btn--orange{
  background:var(--orange); color:var(--ink);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.btn--orange:hover{ background:var(--orange-lt); transform:translateY(-2px); box-shadow:0 12px 24px rgba(249,68,6,0.35); }
.btn--ghost{
  border:1.5px solid var(--line-dark-2); color:var(--paper);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.btn--ghost:hover{ border-color:var(--orange); color:var(--orange); transform:translateY(-2px); }
.btn--ghost-onorange{
  border:1.5px solid rgba(19,19,21,0.3); color:var(--ink);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.btn--ghost-onorange:hover{ border-color:var(--ink); background:var(--ink); color:var(--orange); transform:translateY(-2px); }
.btn--dark{
  background:var(--ink); color:var(--paper);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.btn--dark:hover{ background:var(--ink-raise); transform:translateY(-2px); }
.btn--lg{ padding:18px 34px; font-size:1.05rem; }

.nav-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:24px; height:2px; background:var(--paper); position:relative; transition:.25s;
}
.nav-toggle span::before{ position:absolute; top:-8px; }
.nav-toggle span::after{ position:absolute; top:8px; }
.nav-toggle.is-open span{ background:transparent; }
.nav-toggle.is-open span::before{ top:0; transform:rotate(45deg); }
.nav-toggle.is-open span::after{ top:0; transform:rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:stretch;
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
}
.hero--compact{ min-height:90vh; }
@media (min-width:921px){
  .hero--compact .hero-copy{ padding:150px 0 72px 64px; flex:0 0 50%; max-width:50%; }
  .hero--compact .hero-media{ flex:0 0 50%; min-width:0; }
  .hero--compact .breadcrumb{ margin-bottom:14px; }
  .hero--compact .lede{ margin-top:12px; }
  .hero--compact .hero-actions{ margin-top:18px; }
  .hero--compact .hero-trust{ margin-top:20px; padding-top:14px; }
}
.hero-watermark{
  position:absolute; top:-10%; left:-8%;
  width:62%;
  pointer-events:none;
  filter:invert(1) brightness(1.6);
  opacity:0.05;
}

.hero-copy{
  position:relative; z-index:3;
  width:100%;
  max-width:640px;
  padding:180px 0 100px 64px;
  display:flex; flex-direction:column; justify-content:center;
}
.hero-copy .eyebrow span{ color:var(--charcoal-2); }
.hero-copy h1{
  font-size:clamp(2.9rem,6.6vw,5.5rem);
  color:var(--white);
}
.hero-copy h1 em{
  font-style:normal; color:var(--orange);
}
.hero-copy .lede{
  margin-top:26px; font-size:1.18rem; color:#cdcac4; max-width:520px;
}
.hero-actions{ display:flex; gap:18px; margin-top:44px; flex-wrap:wrap; }

.hero-trust{
  display:flex; gap:0; margin-top:64px; flex-wrap:wrap;
  border-top:1px solid var(--line-dark);
  padding-top:28px;
}
.hero-trust div{
  padding-right:34px; margin-right:34px; border-right:1px solid var(--line-dark);
}
.hero-trust div:last-child{ border-right:none; margin-right:0; padding-right:0; }
.hero-trust strong{
  display:block; font-family:var(--font-display); font-size:2.1rem; color:var(--orange); line-height:1;
}
.hero-trust span{
  display:block; margin-top:8px; font-family:var(--font-label); font-size:0.82rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--charcoal-2);
}

.hero-media{
  position:relative; z-index:2;
  flex:1;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0% 100%);
  min-width:38%;
}
.hero-media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:60% 40%;
}
/* CCTV survey hero photo: the pipe/water line in the source shot runs at a
   slight angle, so it's rotated level and scaled up to keep it full-bleed */
.hero-photo--level{
  object-position:center;
  transform:translateX(10%) rotate(-14deg) scale(1.25);
  transform-origin:center;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, var(--ink) 0%, rgba(19,19,21,0.55) 18%, rgba(19,19,21,0) 46%), linear-gradient(0deg, rgba(19,19,21,0.55), transparent 40%);
}
.scroll-cue{
  position:absolute; left:64px; bottom:36px; z-index:4;
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-label); font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--charcoal-2);
}
.scroll-cue .line{ width:40px; height:1px; background:var(--charcoal-2); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:""; position:absolute; left:-40%; top:0; width:40%; height:100%; background:var(--orange);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{ 0%{left:-40%;} 100%{left:100%;} }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-band{
  position:relative; z-index:5;
  background:var(--orange);
  color:var(--ink);
  transform:skewY(-1.6deg);
  margin-block:-34px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,0.35);
}
.marquee-track{
  display:flex; white-space:nowrap;
  animation:marquee 34s linear infinite;
  padding-block:15px;
}
.marquee-track span{
  font-family:var(--font-label); font-weight:700; font-size:1.05rem; letter-spacing:0.08em; text-transform:uppercase;
  padding-inline:20px;
  display:flex; align-items:center; gap:20px;
}
.marquee-track span::after{ content:"◆"; font-size:0.6rem; opacity:0.6; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   WORK GALLERY (continuous auto-scroll)
   ============================================================ */
.gallery-strip{
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--ink);
  padding-block:36px;
}
.gallery-track{
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  animation:gallery-scroll 75s linear infinite;
}
.gallery-strip:hover .gallery-track{ animation-play-state:paused; }
.gallery-item{
  flex:none;
  width:420px;
  height:300px;
  overflow:hidden;
  clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm));
}
.gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
@keyframes gallery-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .gallery-track{ animation:none; }
}

/* ============================================================
   DIVIDERS (mask-based, recolourable)
   ============================================================ */
.divider{
  width:100%; height:46px;
  position:relative; z-index:3;
  margin-top:-46px;
  -webkit-mask-image:url("assets/svg/divider-1.svg");
  mask-image:url("assets/svg/divider-1.svg");
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  background:var(--ink);
  /* section transitions meet with a clean edge on tablet/desktop — the
     chevron cut is a mobile-only accent, re-enabled and bled off both
     edges in RESPONSIVE below */
  display:none;
}
.divider--alt{
  -webkit-mask-image:url("assets/svg/divider-2.svg");
  mask-image:url("assets/svg/divider-2.svg");
}
.divider--orange{ background:var(--orange); }
.divider--paper{ background:var(--paper); }
.divider--paper-dim{ background:var(--paper-dim); }
.divider--ink{ background:var(--ink); }

/* ============================================================
   INCLUDED INTRO (service subpages — text + photo, graphic overlap)
   ============================================================ */
.included-intro{
  display:grid; grid-template-columns:1fr 0.82fr; gap:64px; align-items:center;
  margin-bottom:56px;
}
.included-intro .section-head{ margin-bottom:0; max-width:none; }
.included-media{ position:relative; }
.included-photo{
  width:100%; display:block;
  clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);
}
.included-graphic{
  position:absolute; left:-36px; bottom:-22px; z-index:2;
  width:76%; min-width:320px; height:auto;
  filter:drop-shadow(0 14px 24px rgba(19,19,21,0.35));
}

/* ============================================================
   SERVICES
   ============================================================ */
.services-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:var(--paper-line);
  border:1px solid var(--paper-line);
}
.service-card{
  position:relative;
  background:var(--paper);
  padding:38px 30px 34px;
  min-height:280px;
  display:flex; flex-direction:column;
  transition:background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.service-card:hover{
  background:var(--white);
  transform:translateY(-4px);
  box-shadow:0 18px 34px rgba(19,19,21,0.1);
  z-index:1;
}
.service-card .num{
  font-family:var(--font-label); font-size:0.85rem; color:var(--charcoal-2); letter-spacing:0.1em;
}
.service-card h3{
  margin-top:24px;
  font-size:1.5rem; text-transform:none; letter-spacing:-0.02em; font-weight:800; line-height:1.08;
}
.service-card p{ margin-top:12px; font-size:0.96rem; color:var(--charcoal); flex:1; }
.service-more{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  margin-top:24px;
}
.service-more-text{
  font-family:var(--font-label); font-weight:700; font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink); white-space:nowrap;
  opacity:0; transform:translateX(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.service-more-box{
  flex:none;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-dim); color:var(--ink);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.service-more-box svg{ width:20px; height:20px; }
.service-card:hover .service-more-text{ opacity:1; transform:translateX(0); }
.service-card:hover .service-more-box{ background:var(--orange); color:var(--ink); transform:translateX(8px); }
.service-card .tag{
  position:absolute; top:26px; right:26px;
  background:var(--orange); color:var(--ink);
  font-family:var(--font-label); font-weight:800; font-size:0.72rem; letter-spacing:0.1em;
  padding:4px 10px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* compliance grid (service subpages) — 2x2 outlined cards, same visual
   language and type sizes as .service-card */
.compliance-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:2px;
  background:var(--paper-line);
  border:1px solid var(--paper-line);
}
.compliance-card{
  background:var(--paper);
  padding:38px 30px 34px;
  display:flex; flex-direction:column; align-items:flex-start;
}
.compliance-card svg{ width:30px; height:30px; color:var(--orange); flex:none; }
.compliance-card h3{
  margin-top:24px;
  font-size:1.5rem; text-transform:none; letter-spacing:-0.02em; font-weight:800; line-height:1.08;
}
.compliance-card p{ margin-top:12px; font-size:0.96rem; color:var(--charcoal); }

/* ============================================================
   COVERAGE
   ============================================================ */
#coverage{ overflow:hidden; }
.coverage-watermark{
  position:absolute; bottom:-14%; right:-6%;
  width:46%;
  pointer-events:none;
  filter:invert(1) brightness(1.6);
  opacity:0.045;
  transform:rotate(180deg);
}
.coverage{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:80px; align-items:center; position:relative; z-index:1; }
.coverage-copy h2{ font-size:48px; }
.coverage-copy p{ margin-top:20px; color:#c7c5c0; font-size:1.05rem; max-width:480px; }
.coverage-copy .btn{ margin-top:36px; }
.county-map-visual{
  position:relative;
  width:100%;
  aspect-ratio:600/640;
}
.county-map-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.county-facet{
  stroke:var(--paper);
  stroke-opacity:0.14;
  stroke-width:1;
  stroke-linejoin:round;
}
.county-facet--a{ fill:var(--ink-raise); }
.county-facet--b{ fill:#1c1d20; }
.county-facet--c{ fill:#26272b; }
.county-outline{
  fill:none;
  stroke:var(--orange);
  stroke-opacity:0.65;
  stroke-width:2.5;
  stroke-linejoin:round;
}

.map-tags{ position:absolute; inset:0; }
.map-tag{
  position:absolute;
  transform:translateY(-50%);
  display:flex; align-items:center; gap:9px;
  white-space:nowrap;
}
.map-tag--flip{ flex-direction:row-reverse; transform:translate(-100%,-50%); }
.map-dot{
  width:9px; height:9px; flex:none;
  background:var(--orange);
  box-shadow:0 0 0 4px rgba(249,68,6,0.18);
}
.map-label{
  font-family:var(--font-label); font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  font-size:0.92rem;
  color:var(--paper);
  padding:5px 10px;
  background:rgba(19,19,21,0.72);
  border:1px solid var(--line-dark-2);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition:border-color .3s, background .3s, color .3s;
}
.map-tag:hover .map-label{ background:var(--orange); border-color:var(--orange); color:var(--ink); }
.map-tag:hover .map-dot{ box-shadow:0 0 0 5px rgba(249,68,6,0.32); }

.county-fallback{ display:none; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:90px; align-items:center; }
.about-media{ position:relative; }
.about-media img{ width:100%; }
.about-media .frame1{
  clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);
}
.about-copy h1, .about-copy h2{ font-size:48px; }
.about-copy p{ margin-top:20px; font-size:1.05rem; color:var(--charcoal); max-width:520px; }
.about-copy .btn{ margin-top:34px; }
.about-badges{ display:flex; gap:28px; margin-top:44px; flex-wrap:wrap; }
.about-badges div{ display:flex; align-items:center; gap:12px; }
.about-badges svg{ width:30px; height:30px; color:var(--orange); flex:none; }
.about-badges strong{ display:block; font-family:var(--font-display); font-weight:800; font-size:1.1rem; letter-spacing:-0.02em; }
.about-badges span{ display:block; font-size:0.85rem; color:var(--charcoal-2); }
.about-trust-note{
  margin-top:28px; font-size:0.9rem; color:var(--charcoal-2); font-style:italic;
}
.section--dark .about-copy p{ color:#c7c5c0; }
.section--dark .about-trust-note{ color:#9a9893; }

/* ============================================================
   BREADCRUMB (service subpages)
   ============================================================ */
.breadcrumb{ margin-bottom:44px; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; }
.breadcrumb li{
  font-family:var(--font-label); font-size:0.85rem; letter-spacing:0.04em;
  color:var(--charcoal-2);
  display:flex; align-items:center;
}
.breadcrumb li:not(:last-child)::after{ content:"/"; margin-inline:10px; opacity:0.5; }
.breadcrumb a{ color:var(--charcoal-2); transition:color .2s; }
.breadcrumb a:hover{ color:var(--orange); }
.breadcrumb li[aria-current]{ color:var(--paper); font-weight:600; }
.section:not(.section--dark) .breadcrumb li[aria-current]{ color:var(--ink); }
.section:not(.section--dark) .breadcrumb a{ color:var(--charcoal); }

/* ============================================================
   FEATURE GRID (service subpages)
   ============================================================ */
.feature-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:22px 48px;
}
.feature-item{ display:flex; align-items:flex-start; gap:14px; }
.feature-dot{ width:9px; height:9px; flex:none; margin-top:8px; background:var(--orange); }
.feature-item p{ font-size:1.02rem; color:var(--charcoal); }
.section--dark .feature-item p{ color:#c7c5c0; }

.receive-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.receive-body .section-head{ margin-bottom:32px; }
.receive-body .feature-grid{ grid-template-columns:1fr; gap:18px; }

/* ============================================================
   FAULT CHIP GRID (service subpages)
   ============================================================ */
.fault-grid{ display:flex; flex-wrap:wrap; gap:14px; }
.fault-chip{
  font-family:var(--font-label); font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  font-size:0.92rem;
  padding:13px 20px;
  background:var(--paper-dim); color:var(--ink);
  display:flex; align-items:center; gap:10px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.fault-chip::before{ content:""; width:7px; height:7px; background:var(--orange); flex:none; }
.fault-chip:hover{ background:var(--orange); color:var(--ink); transform:translateY(-3px); }

/* ============================================================
   PROCESS STEPS (service subpages)
   ============================================================ */
.process-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:50px; position:relative; z-index:1; padding-left:36px; }
.process-step{ position:relative; }
.process-step h3{ font-size:1.3rem; }
.process-step p{ margin-top:10px; font-size:0.98rem; color:var(--charcoal); }
.section--dark .process-step p{ color:#c7c5c0; }

/* timeline: the track/fill line lives in its own row above .process-grid;
   each numbered node lives INSIDE its related .process-step instead (so it
   can never end up visually detached from its text), pulled out of flow on
   desktop to sit on the line above the heading — columns line up 1:1 with
   .process-timeline's matching grid, so left:0 lands it in the right spot
   with no extra maths needed. On mobile (see RESPONSIVE) it drops back into
   normal flow as a badge beside its own heading. */
.process-timeline{
  /* --progress is intentionally NOT declared here — main.js now sets it on
     this element's PARENT (the shared .container), so both this desktop
     line and the mobile line in .process-grid can read the same value by
     inheritance. Declaring a default here would create a cascaded value on
     .process-timeline itself, which blocks inheritance from the parent
     entirely (a directly-declared value always wins over an inherited one)
     — the var() fallback below covers the pre-JS default instead. */
  position:relative;
  display:grid; grid-template-columns:repeat(3,1fr); gap:50px;
  align-items:center;
  height:56px;
  margin-bottom:44px;
  padding-left:36px;
  z-index:1;
}
.timeline-track,
.timeline-fill{
  position:absolute; top:50%; height:3px; width:100%;
  grid-column:1 / 3;
  transform:translate(26px, -50%);
}
.timeline-track{ background:var(--line-dark-2); }
.timeline-fill{
  background:var(--orange);
  transform-origin:left center;
  transform:translate(26px, -50%) scaleX(var(--progress, 0));
  box-shadow:0 0 16px rgba(249,68,6,0.5);
}
.timeline-node{
  position:absolute; left:0; top:-98px; z-index:2;
  width:52px; height:52px; flex:none;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); border:2px solid var(--line-dark-2);
  font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:var(--charcoal-2);
  transition:border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease), filter .4s var(--ease);
}
.timeline-node.is-active{
  border-color:var(--orange); color:var(--ink); background:var(--orange);
  filter:drop-shadow(0 0 10px rgba(249,68,6,0.45));
}

/* ============================================================
   CLIENTS
   ============================================================ */
.clients-row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:36px 56px;
  padding-block:32px;
}
.client-logo-box{
  display:flex; align-items:center; justify-content:center;
  height:84px; width:clamp(180px,18vw,252px);
  flex:none;
}
.client-logo{
  max-height:100%; max-width:100%; width:auto; height:auto;
  object-fit:contain;
  filter:grayscale(1) contrast(0.9) brightness(0.75);
  opacity:0.65;
  transition:opacity .3s, filter .3s;
}
.client-logo-box:hover .client-logo{ opacity:1; filter:none; }

/* ============================================================
   FLEET — vehicle roster
   ============================================================ */
.fleet-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
}
.fleet-card{
  position:relative;
  background:var(--ink-soft);
  padding:30px 28px 32px;
  display:flex; flex-direction:column;
  transition:background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.fleet-card:hover{
  background:var(--ink-raise);
  transform:translateY(-5px);
  box-shadow:0 22px 40px rgba(0,0,0,.4);
  z-index:1;
}
.fleet-card .unit-tag{
  align-self:flex-start;
  font-family:var(--font-label); font-weight:800; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--orange);
  background:rgba(249,68,6,0.1);
  border:1px solid rgba(249,68,6,0.35);
  padding:4px 10px;
  margin-bottom:20px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.fleet-stage{
  position:relative;
  height:200px;
  display:flex; align-items:flex-end; justify-content:center;
  margin-bottom:22px;
}
.fleet-stage::before{
  content:"";
  position:absolute; left:8%; right:8%; bottom:2px; height:24px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 72%);
  filter:blur(1px);
}
.fleet-stage img{
  position:relative; z-index:1;
  max-width:100%; max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 16px 16px rgba(0,0,0,.4));
  transition:transform .45s var(--ease), filter .45s var(--ease);
}
.fleet-card:hover .fleet-stage img{ transform:translateY(-6px) scale(1.045); filter:drop-shadow(0 22px 20px rgba(0,0,0,.5)); }

/* the Sewer Rehabilitation Unit source photo was shot at an angle; rotate it level */
.fleet-stage.is-tilted img{ transform:rotate(11deg) scale(1.18); }
.fleet-card:hover .fleet-stage.is-tilted img{ transform:rotate(11deg) scale(1.23) translateY(-6px); }

.fleet-card h3{ font-size:1.28rem; text-transform:none; letter-spacing:-0.02em; font-weight:800; line-height:1.1; }
.fleet-card .spec{
  display:block; margin-top:5px;
  font-family:var(--font-label); font-weight:600; font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--charcoal-2);
}
.fleet-card p{ margin-top:14px; font-size:0.93rem; color:var(--charcoal-2); flex:1; }
.fleet-card:last-child{ grid-column:span 2; }
.fleet-card:last-child .fleet-stage{ height:220px; }

/* full-width brand graphic anchoring the bottom of the section —
   a bold statement, not a faded watermark. Sits behind the grid,
   underlapping it, rather than adding extra section height.
   isolation:isolate scopes the negative z-index to this section, so
   it paints above #fleet's own background but behind the grid. */
#fleet, #process{ isolation:isolate; }
.fleet-graphic{
  position:absolute; z-index:-1; left:0; right:0; bottom:0;
  width:100%; height:auto;
}
/* the source artwork has ~24.7% empty canvas above its actual content
   (needed so bottom-anchored .fleet-graphic sits flush at the bottom) —
   shift it up by that fraction so the top-anchored variant sits flush too */
.fleet-graphic--top{ top:0; bottom:auto; transform:translateY(-24.7%); }

/* process section: text column shielded from the top-anchored graphic.
   background matches the section exactly, so the panel reads as the
   graphic simply being cut off rather than a separate floating card */
#process .section-head{
  position:relative; z-index:1;
  background:var(--ink);
  padding:32px 36px;
  max-width:600px;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{ display:flex; flex-direction:column; gap:10px; max-width:840px; }
.faq-item{
  background:var(--paper);
  border:1px solid var(--paper-line);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition:background .25s var(--ease);
}
.faq-item[open]{ background:var(--white); }
.faq-item summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px 28px;
  font-family:var(--font-display); font-weight:800; text-transform:none; letter-spacing:-0.02em;
  font-size:1.15rem; line-height:1.35;
  color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; flex:none; width:1.6rem; text-align:center;
  font-family:var(--font-body); font-weight:400; font-size:1.7rem; line-height:1;
  color:var(--orange);
}
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item summary:hover{ color:var(--orange-dk); }
.faq-answer{ padding:0 28px 26px; }
.faq-answer p{ color:var(--charcoal); font-size:0.98rem; max-width:68ch; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{
  position:relative;
  background:var(--orange); color:var(--ink);
  padding-block:110px;
  overflow:hidden;
}
.cta-watermark{
  position:absolute; top:12%; right:2%;
  width:32%;
  pointer-events:none;
  opacity:0.22;
  mix-blend-mode:multiply;
}
.cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.cta-band h2{ font-size:clamp(2.2rem,5vw,3.6rem); max-width:640px; }
.cta-actions{ display:flex; gap:18px; flex-wrap:wrap; }
.cta-band .btn--dark:hover{ background:var(--ink-soft); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--ink); color:var(--paper);
  padding-top:90px;
}
.footer-top{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:60px;
  padding-bottom:70px; border-bottom:1px solid var(--line-dark);
}
.footer-brand .logo-img{ width:100%; height:auto; max-width:360px; margin-bottom:22px; }
.footer-brand p{ color:#b9b7b2; max-width:320px; font-size:0.98rem; }
.footer-phone{
  margin-top:26px; font-family:var(--font-display); font-weight:800; font-size:2rem; color:var(--orange); display:inline-block;
}
.footer-col h3{
  font-family:var(--font-label); font-size:0.85rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--charcoal-2);
  margin-bottom:20px; font-weight:700;
}
.footer-col li{ margin-bottom:12px; }
.footer-col a{ color:#d8d6d1; font-size:0.98rem; transition:color .25s; }
.footer-col a:hover{ color:var(--orange); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-block:26px; font-size:0.85rem; color:var(--charcoal-2);
  font-family:var(--font-label); letter-spacing:0.03em;
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* ============================================================
   FOCUS STATES
   clip-path clips outline/box-shadow on chamfered elements, so those
   use a drop-shadow glow instead (filters apply after clipping).
   ============================================================ */
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:2px; }
.btn:focus-visible,
.faq-item summary:focus-visible{
  outline:none;
  filter:drop-shadow(0 0 0 2px var(--orange)) drop-shadow(0 0 5px rgba(249,68,6,0.6));
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .fleet-grid{ grid-template-columns:repeat(2,1fr); }
  .fleet-card:last-child{ grid-column:span 2; }
  .about,.coverage{ grid-template-columns:1fr; gap:56px; }
  .about-media{ order:2; }
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:50px; }
  .gallery-item{ width:340px; height:250px; }
  .process-grid{ grid-template-columns:1fr; gap:32px; padding-left:0; }
  .process-step{ position:relative; z-index:1; padding-left:72px; min-height:52px; }
  /* .process-timeline itself collapses to a near-zero-height row — it still
     needs a real, correctly-positioned box for the scroll-progress maths in
     main.js, but the line no longer runs there. Instead the connecting line
     is drawn as a pair of pseudo-elements down the left edge of
     .process-grid, at the same x as each stacked node's centre (22px = half
     the 44px mobile node width), running the full height so it passes
     through every node regardless of how tall each step's text is. */
  .process-timeline{ height:1px; padding-left:0; margin-bottom:32px; }
  .timeline-track, .timeline-fill{ opacity:0; }
  .process-grid::before,
  .process-grid::after{
    content:""; position:absolute; left:22px; top:22px; bottom:22px; width:3px; z-index:0;
  }
  .process-grid::before{ background:var(--line-dark-2); }
  .process-grid::after{
    background:var(--orange);
    transform-origin:top center;
    transform:scaleY(var(--progress, 0));
    box-shadow:0 0 16px rgba(249,68,6,0.5);
  }
  .timeline-node{
    position:absolute; left:0; top:0; z-index:2;
    width:44px; height:44px; font-size:1.1rem;
  }
  .included-intro{ grid-template-columns:1fr; gap:44px; margin-bottom:44px; }
  .included-graphic{ width:68%; min-width:260px; }
  .receive-grid{ grid-template-columns:1fr; gap:44px; }
}
@media (max-width:760px){
  .divider{
    display:block;
    width:150%;
    margin-left:-25%;
  }
  /* same 150%-width, 25%-bled-each-side treatment as .divider above,
     applied to the brand graphic — covers both usages (Fleet section on
     the homepage, Process section on the CCTV page) since they share this
     one base class. left:-25% + width:150% (rather than a fixed px
     margin) keeps it symmetrically centred and correctly bled regardless
     of the exact device width. */
  .fleet-graphic{ left:-25%; right:auto; width:150%; }
  .map-tags{ display:none; }
  .county-fallback{
    display:flex; flex-wrap:wrap; gap:10px;
    margin-top:24px;
  }
  .county-fallback li{
    font-family:var(--font-label); font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
    font-size:0.85rem;
    padding:9px 14px;
    border:1px solid var(--line-dark-2);
    color:var(--paper);
    display:flex; align-items:center; gap:8px;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  }
  .county-fallback li::before{ content:""; width:6px; height:6px; background:var(--orange); flex:none; }
}
@media (max-width:920px){
  /* .main-nav becomes a fixed full-screen overlay below, so it drops out
     of this flex row entirely — that leaves .brand, .header-cta and
     .nav-toggle as the row's only 3 items. justify-content:space-between
     would spread all three out evenly (phone button stranded mid-header);
     pushing it to flex-start and giving .brand an auto right-margin
     instead clusters the phone button and the burger icon together at
     the right edge, exactly like they're one control group. */
  .site-header{ height:66px; justify-content:flex-start; gap:14px; }
  .brand{ margin-right:auto; }
  .brand-plate{ padding:10px 12px 16px; }
  .brand-plate .logo-img{ height:80px; }
  /* icon-only phone button everywhere the burger nav is showing — full
     text ("07531 438408") next to a now-larger logo doesn't fit the row
     at any mobile width, and "icon next to the burger" was the ask. */
  .header-cta .btn--orange{ padding:12px 14px; }
  .header-cta .btn-text{ display:none; }
  .main-nav{
    display:block;
    position:fixed; inset:0;
    height:100dvh;
    overflow-y:auto;
    background:var(--ink);
    padding:110px 32px 44px;
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
    transition:transform .4s var(--ease), opacity .3s var(--ease);
    z-index:90;
  }
  .main-nav.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .main-nav ul{ flex-direction:column; gap:8px; position:relative; }
  .main-nav a{ display:block; padding:14px 0; font-size:1.5rem; border-bottom:1px solid var(--line-dark); }
  /* branded touches, switched on for the full-screen overlay only */
  .nav-watermark{ display:block; z-index:-1; }
  .nav-brand-mark{ display:flex; }
  /* the Services row now holds both the link and the toggle button, so the
     row (not the link) carries the divider line — otherwise it'd only run
     under the text width, leaving a gap under the toggle button. */
  .nav-item-row{ justify-content:space-between; border-bottom:1px solid var(--line-dark); }
  .nav-item-row a{ border-bottom:none; }
  .nav-dropdown-toggle{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; flex:none;
    color:var(--orange);
  }
  .nav-dropdown-toggle span{
    display:inline-block;
    font-family:var(--font-body); font-weight:400; font-size:1.7rem; line-height:1;
    transition:transform .3s var(--ease);
  }
  /* "+" rotated 45° reads as "×" — no separate open/close icon needed */
  .nav-dropdown-toggle[aria-expanded="true"] span{ transform:rotate(45deg); }
  /* collapsed by default now — .is-open (toggled by main.js) is what
     reveals it, instead of the dropdown being permanently expanded */
  .nav-dropdown{
    position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none;
    width:auto; padding-top:0;
    max-height:0; overflow:hidden;
    transition:max-height .4s var(--ease);
  }
  .nav-dropdown.is-open{ max-height:480px; }
  .nav-dropdown-inner{
    display:block;
    background:none; border:none; box-shadow:none; clip-path:none; padding:4px 0 8px 18px;
  }
  .nav-dropdown a{ padding:11px 0; font-size:1.05rem; border-bottom:1px solid var(--line-dark); color:var(--charcoal-2); }
  .nav-dropdown a:hover{ background:none; color:var(--orange); }
  .nav-toggle{ display:flex; position:relative; z-index:95; }
  .hero{ flex-direction:column; }
  .hero-copy{ padding:150px 24px 60px; max-width:none; }
  .hero-media{ clip-path:none; min-height:340px; }
  .hero-media::after{ background:linear-gradient(0deg, var(--ink), transparent 60%); }
  .scroll-cue{ display:none; }
  .hero-trust{ gap:20px 0; }
  .hero-trust div{ flex:1 1 45%; padding-right:0; margin-right:0; border-right:none; padding-bottom:16px; }
  .section{ padding-block:80px; }
  .container{ padding-inline:24px; }
  .map-label{ font-size:0.82rem; padding:4px 8px; }
  .map-tag{ gap:7px; }
}
@media (max-width:680px){
  /* every px matters at this width once the logo grows — trims padding
     and the gap between the phone button and burger icon so the row
     still fits on the narrowest real phones (~360px). */
  .site-header{ padding-inline:14px; height:58px; gap:8px; }
  .brand-plate{ padding:8px 10px 13px; }
  .brand-plate .logo-img{ height:53px; }
  .header-cta{ gap:10px; }
  .header-cta .btn--orange{ padding:11px 11px; }
  .header-cta .btn-text{ display:none; }
  .services-grid{ grid-template-columns:1fr; }
  .compliance-grid{ grid-template-columns:1fr; }
  .fleet-grid{ grid-template-columns:1fr; }
  .fleet-card:last-child{ grid-column:auto; }
  .fleet-card:last-child .fleet-stage{ height:200px; }
  .footer-top{ grid-template-columns:1fr; }
  .cta-inner{ flex-direction:column; align-items:flex-start; }
  .clients-row{ justify-content:center; gap:28px 40px; }
  .map-label{ font-size:0.72rem; padding:4px 7px; }
  .map-dot{ width:7px; height:7px; }
  .map-tag{ gap:6px; }
  .gallery-strip{ padding-block:24px; }
  .gallery-track{ gap:12px; animation-duration:50s; }
  .gallery-item{ width:240px; height:180px; }
  .feature-grid{ grid-template-columns:1fr; }
}