/* ===================================================================
   CORNERSTONE PEST CONTROL - SHARED SITEWIDE STYLESHEET
   ===================================================================
   This file centralises the styles that repeat across the site:
   the sitewide nav and footer, and the interior page boilerplate
   (buttons, breadcrumb, hero base, trust strip, FAQ, CTA, contact,
   related services, service detail lists and the scroll reveals).

   It is an additive, non-destructive extraction. Values are copied
   exactly from the existing pages so nothing changes visually once a
   page links this file and drops its now-duplicated in-page rules.

   What is deliberately NOT here, and stays in each page:
   - the universal reset and the html / body / a base rules
     (the homepage and interior pages differ here, so centralising
     would change one of them);
   - the homepage Tier 1 hero, curtain, reveals and portrait photos;
   - the per-page hero photo layer (.hero-img, .hero::before and the
     .hero .container z-index, which differ between service and other
     pages);
   - page-unique component blocks (services cards, why-us bands,
     gallery, area cards, legal blocks, the pricing system).

   British English throughout. No em dashes.
   =================================================================== */


/* ===================================================================
   1. DESIGN TOKENS
   Two token groups coexist on the live site and both are kept so
   every existing rule resolves to the value it does today.
   =================================================================== */
:root {
  /* --- Homepage canonical tokens (the design authority) --- */
  --cs-orange: #E07520;
  --cs-orange-hover: #C5651A;
  --cs-orange-light: #F08A3C;
  /* Near-black ramp anchored on #1A1A1A */
  --cs-navy: #1A1A1A;
  --cs-navy-mid: #242424;
  --cs-navy-light: #2E2E2E;
  --cs-white: #FFFFFF;
  --cs-off-white: #F7F8FA;
  --cs-grey-100: #F0F1F3;
  --cs-grey-200: #E2E4E8;
  --cs-grey-400: #9CA3AF;
  --cs-grey-600: #6B7280;
  --cs-green: #22C55E;
  --cs-font-display: 'Space Grotesk', sans-serif;
  --cs-font-body: 'Plus Jakarta Sans', sans-serif;
  --cs-radius: 16px;
  --cs-radius-sm: 10px;
  --cs-glass: rgba(255,255,255,0.08);
  --cs-glass-border: rgba(255,255,255,0.12);
  --cs-glass-dark: rgba(26,26,26,0.06);
  --cs-glass-dark-border: rgba(26,26,26,0.1);
  --cs-transition: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Interior page tokens (used by the boilerplate below) --- */
  --orange:       #E07520;
  --orange-hover: #C5651A;
  --near-black:   #1A1A1A;
  --dark:         #252525;
  --text:         #333333;
  --text-muted:   #666666;
  --bg-light:     #F6F6F6;
  --white:        #FFFFFF;
  --border:       #E0E0E0;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* ===================================================================
   2. INTERIOR CONTAINER
   =================================================================== */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}


/* ===================================================================
   3. BREADCRUMB
   =================================================================== */
.breadcrumb {
  background: var(--near-black);
  /* top padding clears the fixed header (~74px) so the trail is never occluded */
  padding: 94px 0 12px;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  gap: 4px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
}

.breadcrumb-list li + li::before {
  content: '\203A';
  margin-right: 4px;
  color: rgba(255, 255, 255, 0.45);
}

.breadcrumb-list a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.breadcrumb-list a:hover { color: var(--orange); text-decoration: underline; }

.breadcrumb-list li:last-child { color: rgba(255, 255, 255, 0.7); }


/* ===================================================================
   4. HERO (base only)
   The per-page hero photo layer (.hero-img, .hero::before and the
   .hero .container z-index) stays in each page, because it differs
   between service pages (photo behind a dark overlay) and the other
   interior pages (mesh gradient only).
   =================================================================== */
.hero {
  position: relative;
  background-color: var(--near-black);
  background-image:
    radial-gradient(at 16% 20%, rgba(224, 117, 32, 0.45) 0px, transparent 50%),
    radial-gradient(at 84% 14%, rgba(197, 101, 26, 0.32) 0px, transparent 46%),
    radial-gradient(at 72% 82%, rgba(224, 117, 32, 0.24) 0px, transparent 50%),
    radial-gradient(at 26% 92%, rgba(37, 37, 37, 0.85) 0px, transparent 55%);
  padding: 88px 0 96px;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.125rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 20px;
  max-width: 720px;
}

.hero-lead {
  font-size: clamp(1rem, 2.5vw, 1.1875rem);
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 36px;
  max-width: 620px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}


/* ===================================================================
   5. BUTTONS
   =================================================================== */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}

.btn-primary {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}

.btn-primary:hover {
  background: var(--orange-hover);
  border-color: var(--orange-hover);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.65);
}

.btn-outline:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.btn-dark {
  background: var(--near-black);
  color: var(--white);
  border-color: var(--near-black);
}

.btn-dark:hover { background: var(--dark); }


/* ===================================================================
   6. TRUST STRIP
   =================================================================== */
.trust-section {
  background: var(--bg-light);
  border-bottom: 1px solid var(--border);
  padding: 48px 0;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.trust-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--white);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-item h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--near-black);
  line-height: 1.3;
}


/* ===================================================================
   7. FAQ SECTION
   =================================================================== */
.faq-section {
  padding: 80px 0;
  background: var(--white);
}

.faq-section h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: 44px;
  text-align: center;
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  padding: 20px 24px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--near-black);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--bg-light);
  transition: background 0.18s;
  user-select: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-size: 1.375rem;
  color: var(--orange);
  font-weight: 400;
  flex-shrink: 0;
  line-height: 1;
}

.faq-item[open] > summary {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.faq-item[open] > summary::after { content: '-'; }

.faq-answer {
  padding: 20px 24px;
  font-size: 0.9688rem;
  color: var(--text);
  line-height: 1.7;
  background: var(--white);
}

.faq-answer a {
  color: var(--orange);
  text-decoration: underline;
}

.faq-answer a:hover { color: var(--orange-hover); }


/* ===================================================================
   8. SERVICE DETAIL (what's involved + signs)
   =================================================================== */
.detail-section {
  padding: 80px 0;
  background: var(--white);
}

.detail-section.alt {
  background: var(--bg-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.detail-section h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: 16px;
  text-align: center;
}

.detail-lead {
  max-width: 720px;
  margin: 0 auto 36px;
  text-align: center;
  color: var(--text);
  font-size: 1.0625rem;
}

.detail-lead a { color: var(--orange); text-decoration: underline; }

.detail-lead a:hover { color: var(--orange-hover); }

.check-list {
  max-width: 760px;
  margin: 0 auto;
  list-style: none;
  display: grid;
  gap: 14px;
}

.check-list li {
  position: relative;
  padding: 14px 18px 14px 52px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9688rem;
  color: var(--text);
  line-height: 1.6;
}

.detail-section.alt .check-list li { background: var(--white); }

.check-list li::before {
  content: '\2713';
  position: absolute;
  left: 16px;
  top: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-list.signs li::before { content: '!'; }


/* ===================================================================
   9. CTA SECTION
   =================================================================== */
.cta-section {
  background: var(--orange);
  padding: 72px 0;
  text-align: center;
}

.cta-slogan {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 12px;
}

.cta-section h2 {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}

.cta-hours {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  margin-bottom: 32px;
}


/* ===================================================================
   10. CONTACT SECTION
   =================================================================== */
.contact-section {
  padding: 72px 0;
  background: var(--white);
}

.contact-section h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: 44px;
  text-align: center;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}

.contact-item h3 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: 8px;
}

.contact-item p,
.contact-item address {
  font-size: 0.9375rem;
  color: var(--text);
  font-style: normal;
  line-height: 1.65;
}

.contact-item a {
  color: var(--text);
  text-decoration: none;
}

.contact-item a:hover { color: var(--orange); }


/* ===================================================================
   11. RELATED SERVICES
   =================================================================== */
.related-section {
  padding: 72px 0;
  background: var(--bg-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.related-section h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: 32px;
  text-align: center;
}

.related-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  max-width: 880px;
  margin: 0 auto;
}

.related-grid a {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px 20px;
  text-decoration: none;
  color: var(--near-black);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: border-color 0.18s, color 0.18s;
}

.related-grid a:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.related-more {
  text-align: center;
  margin-top: 28px;
  font-size: 0.9375rem;
  color: var(--text);
}

.related-more a {
  color: var(--orange);
  text-decoration: none;
  font-weight: 600;
}

.related-more a:hover { text-decoration: underline; }

.related-sub {
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--near-black);
  margin: 44px 0 24px;
}


/* ===================================================================
   12. SCROLL-DRIVEN REVEALS (CSS only)
   Text is always in the raw HTML; this only animates opacity/position.
   =================================================================== */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .trust-item,
    .faq-item,
    .check-list li,
    .related-grid a,
    .contact-item {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
  }
}


/* ===================================================================
   13. INTERIOR RESPONSIVE
   =================================================================== */
@media (max-width: 900px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .hero { padding: 64px 0 72px; }

  .hero-actions { flex-direction: column; }

  .btn { width: 100%; }

  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
  .trust-grid { grid-template-columns: 1fr; }
}


/* ===================================================================
   14. SHARED NAV + FOOTER (mirrors the home page index.html)
   Verified byte-identical between index.html and the interior pages.
   =================================================================== */
.cs-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  padding: 16px 0;
  background: rgba(26,26,26,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.4s var(--cs-transition);
}

.cs-nav.cs-scrolled {
  background: rgba(26,26,26,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 10px 0;
  box-shadow: 0 4px 30px rgba(0,0,0,0.2);
}

.cs-nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cs-nav-logo img {
  height: 42px;
  transition: height 0.3s;
}

.cs-nav.cs-scrolled .cs-nav-logo img {
  height: 36px;
}

.cs-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.cs-nav-links a {
  color: var(--cs-white);
  text-decoration: none;
  font-family: var(--cs-font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  position: relative;
  transition: color 0.3s;
}

.cs-nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--cs-orange);
  transition: width 0.3s var(--cs-transition);
}

.cs-nav-links a:hover {
  color: var(--cs-orange);
}

.cs-nav-links a:hover::after {
  width: 100%;
}

/* SERVICES DROPDOWN (pure CSS: hover + focus-within, no JS) */
.cs-has-dropdown {
  position: relative;
}

.cs-dropdown-caret {
  font-size: 11px;
  margin-left: 2px;
  transition: transform 0.3s var(--cs-transition);
}

.cs-has-dropdown:hover .cs-dropdown-caret,
.cs-has-dropdown:focus-within .cs-dropdown-caret {
  transform: rotate(180deg);
}

.cs-dropdown {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 290px;
  background: rgba(26,26,26,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--cs-glass-border);
  border-radius: var(--cs-radius-sm);
  padding: 10px;
  margin-top: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--cs-transition), transform 0.3s var(--cs-transition);
  z-index: 9500;
}

/* invisible bridge so hover survives the gap between label and menu */
.cs-dropdown::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
}

.cs-has-dropdown:hover .cs-dropdown,
.cs-has-dropdown:focus-within .cs-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.cs-dropdown li {
  margin: 0;
}

.cs-dropdown a {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.cs-dropdown a::after {
  display: none !important;
}

.cs-dropdown a:hover {
  background: rgba(232,97,26,0.15);
  color: var(--cs-orange);
}

/* "All Services" stands out: orange at rest, white on hover */
.cs-dropdown a[href="/services"] {
  color: var(--cs-orange);
}

.cs-dropdown a[href="/services"]:hover {
  color: var(--cs-white);
}

.cs-nav-cta {
  background: var(--cs-orange) !important;
  color: var(--cs-white) !important;
  padding: 10px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.3s !important;
  border: none;
  cursor: pointer;
}

.cs-nav-cta:hover {
  background: var(--cs-orange-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(232,97,26,0.35);
}

.cs-nav-cta::after {
  display: none !important;
}

.cs-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
}

.cs-hamburger span {
  width: 28px;
  height: 2px;
  background: var(--cs-white);
  transition: all 0.3s;
  display: block;
}

.cs-hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.cs-hamburger.active span:nth-child(2) {
  opacity: 0;
}

.cs-hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

@media (max-width: 768px) {
  .cs-hamburger {
    display: flex;
  }

  .cs-nav-links {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    background: var(--cs-navy);
    flex-direction: column;
    padding: 100px 40px 40px;
    gap: 24px;
    transform: translateX(100%);
    transition: transform 0.4s var(--cs-transition);
    align-items: flex-start;
    box-shadow: -10px 0 40px rgba(0,0,0,0.3);
    overflow-y: auto;
  }

  .cs-nav-links.open {
    transform: translateX(0);
  }

  /* Mobile: Services menu is always expanded inline (no JS needed) */
  .cs-has-dropdown {
    width: 100%;
  }

  .cs-dropdown-caret {
    display: none;
  }

  .cs-dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 12px 0 0 14px;
    margin-top: 12px;
    border-left: 2px solid rgba(232,97,26,0.3);
  }

  .cs-dropdown::before {
    display: none;
  }

  .cs-dropdown li {
    margin-bottom: 4px;
  }

  .cs-dropdown a {
    padding: 7px 0;
    white-space: normal;
    color: var(--cs-grey-400);
  }
}

.cs-footer {
  background: #1A1A1A;
  padding: 60px 0 0;
  width: 100%;
}

.cs-footer-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px 40px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cs-footer-logo img {
  height: 40px;
  margin-bottom: 16px;
}

.cs-footer-desc {
  font-size: 14px;
  color: var(--cs-grey-400);
  line-height: 1.7;
  max-width: 320px;
}

.cs-footer-heading {
  font-family: var(--cs-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--cs-white);
  margin-bottom: 20px;
}

.cs-footer-links {
  list-style: none;
}

.cs-footer-links li {
  margin-bottom: 12px;
}

.cs-footer-links a {
  color: var(--cs-grey-400);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s;
}

.cs-footer-links a:hover {
  color: var(--cs-orange);
}

.cs-footer-bottom {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.cs-footer-copy {
  font-size: 13px;
  color: var(--cs-grey-600);
}

.cs-footer-legal {
  display: flex;
  gap: 24px;
}

.cs-footer-legal a {
  font-size: 13px;
  color: var(--cs-grey-600);
  text-decoration: none;
  transition: color 0.3s;
}

.cs-footer-legal a:hover {
  color: var(--cs-orange);
}

@media (max-width: 1024px) {
  .cs-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .cs-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px;
  }

  .cs-footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .cs-footer-legal {
    justify-content: center;
  }
}


/* ===================================================================
   15. COVERAGE MAP (animated UK map, 100 mile radius from Horley)
   The same inline SVG block appears on the homepage "Areas We Cover"
   section and on the /areas hub. It is a duplicated shared block (the
   site's convention for shared markup, as with the nav and footer):
   the markup is copied on each page and this one stylesheet carries
   the styling. It is never placed twice on a single page, so the
   element ids (cs-cov, cs-sweep, cs-ring, cs-hub-core and the ukland
   clipPath) stay unique. If it is ever placed twice on one page,
   convert those ids to classes and give each clipPath a unique id.

   Both host sections have a white background, so the SVG's grey sea
   labels and near-black landmass read correctly as supplied. If the
   map is ever dropped onto a dark section, lighten the sea/legend
   text to #B4B2A9 and the land stroke to #6B6963.
   =================================================================== */
.cs-map {
  max-width: 660px;
  margin: 36px auto 0;
  /* small labels inherit the body font; the Horley hub label overrides
     to the display font below. SVG text uses font-family="inherit". */
  font-family: var(--cs-font-body);
}

.cs-map svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Horley hub label uses the display font, matching the site headings */
.cs-map .cs-map-hub-label {
  font-family: var(--cs-font-display);
}

@media (prefers-reduced-motion: no-preference) {
  /* Pre-reveal state: the coverage fill, town pins and their labels
     start hidden so they pop in when the map scrolls into view. This
     hidden state lives only inside no-preference, so reduced-motion
     users always get the full static map with everything visible. */
  .cs-map:not(.cs-revealed) #cs-cov,
  .cs-map:not(.cs-revealed) .cs-town,
  .cs-map:not(.cs-revealed) .cs-tlabel { opacity: 0; }

  /* One-shot reveals: fire once the wrapper gains the cs-revealed class
     (added by the site's IntersectionObserver when the map is seen). */
  .cs-map.cs-revealed #cs-cov { animation: covin 1.2s ease-out both, breathe 4.5s ease-in-out 1.4s infinite; }
  @keyframes covin { from { opacity: 0; } to { opacity: .55; } }
  @keyframes breathe { 0%,100% { opacity: .55; } 50% { opacity: .42; } }

  .cs-map.cs-revealed .cs-town { animation: pop .55s cubic-bezier(.34,1.56,.64,1) both; transform-box: fill-box; transform-origin: center; }
  @keyframes pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

  .cs-map.cs-revealed .cs-tlabel { animation: fadein .6s ease-out both; }
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

  .cs-map.cs-revealed .cs-d1 { animation-delay: .9s; }
  .cs-map.cs-revealed .cs-d2 { animation-delay: 1.05s; }
  .cs-map.cs-revealed .cs-d3 { animation-delay: 1.2s; }
  .cs-map.cs-revealed .cs-d4 { animation-delay: 1.35s; }
  .cs-map.cs-revealed .cs-d5 { animation-delay: 1.5s; }
  .cs-map.cs-revealed .cs-d6 { animation-delay: 1.65s; }

  /* Ambient animations: run whenever the map is on screen, no reveal
     gating needed (radar sweep, pulse rings, hub heartbeat, ring spin). */
  .cs-map #cs-sweep { animation: sweep 3.4s linear infinite; transform-origin: 431px 560px; transform-box: view-box; }
  @keyframes sweep { to { transform: rotate(360deg); } }

  .cs-map .cs-pulse { animation: pulse 2.6s ease-out infinite; transform-origin: 431px 560px; transform-box: view-box; }
  .cs-map .cs-pulse2 { animation-delay: 1.3s; }
  @keyframes pulse { 0% { transform: scale(.08); opacity: .8; } 70% { opacity: .15; } 100% { transform: scale(1); opacity: 0; } }

  .cs-map #cs-hub-core { animation: beat 2.2s ease-in-out infinite; transform-origin: 431px 560px; transform-box: view-box; }
  @keyframes beat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }

  .cs-map #cs-ring { animation: ringspin 40s linear infinite; transform-origin: 431px 560px; transform-box: view-box; }
  @keyframes ringspin { to { transform: rotate(360deg); } }
}


/* ===================================================================
   16. ENQUIRY FORM (native contact form)
   One shared component used on the homepage contact section and on
   /contact. A self-contained light card so it reads correctly on both
   the dark homepage section and the light contact page. Behaviour is
   in /assets/js/contact-form.js; the endpoint is /api/contact.
   =================================================================== */
.cs-enquiry {
  background: var(--cs-white);
  border: 1px solid var(--cs-grey-200);
  border-radius: var(--cs-radius);
  padding: 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.cs-enquiry-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cs-enquiry-field {
  margin-bottom: 16px;
}

.cs-enquiry-field > label {
  display: block;
  font-family: var(--cs-font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--cs-navy);
  margin-bottom: 6px;
}

.cs-enquiry-req {
  color: var(--cs-orange);
}

.cs-enquiry input,
.cs-enquiry select,
.cs-enquiry textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--cs-off-white);
  border: 1px solid var(--cs-grey-200);
  border-radius: 8px;
  color: var(--cs-navy);
  font-family: var(--cs-font-body);
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.cs-enquiry input:focus,
.cs-enquiry select:focus,
.cs-enquiry textarea:focus {
  border-color: var(--cs-orange);
  box-shadow: 0 0 0 3px rgba(224, 117, 32, 0.15);
}

.cs-enquiry textarea {
  min-height: 110px;
  resize: vertical;
}

.cs-enquiry-consent {
  margin: 6px 0 18px;
}

.cs-enquiry-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cs-grey-600);
  cursor: pointer;
}

.cs-enquiry-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--cs-orange);
}

.cs-enquiry-check a {
  color: var(--cs-orange);
  text-decoration: underline;
}

.cf-turnstile {
  margin: 0 0 18px;
}

.cs-enquiry-submit {
  display: inline-block;
  width: 100%;
  padding: 15px 24px;
  background: var(--cs-orange);
  color: var(--cs-white);
  border: none;
  border-radius: 8px;
  font-family: var(--cs-font-display);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.cs-enquiry-submit:hover {
  background: var(--cs-orange-hover);
  transform: translateY(-1px);
}

.cs-enquiry-submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.cs-enquiry-status {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cs-navy);
}

.cs-enquiry-status-err {
  color: #C5320F;
}

.cs-enquiry-status a,
.cs-enquiry-success a {
  color: var(--cs-orange);
  font-weight: 600;
}

.cs-enquiry-success p {
  color: var(--cs-navy);
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .cs-enquiry { padding: 24px; }
  .cs-enquiry-row { grid-template-columns: 1fr; gap: 0; }
}