/* ===================================================================
   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;
  }

  /* Full-screen panel. A 280px drawer left the long service names
     clipped against its edge on a phone. */
  .cs-nav-links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    /* dvh so the panel is not cut off when the iOS address bar collapses */
    height: 100dvh;
    background: var(--cs-navy);
    flex-direction: column;
    padding: 96px 28px 56px;
    gap: 20px;
    transform: translateX(100%);
    transition: transform 0.35s var(--cs-transition);
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* keeps a swipe inside the menu from scrolling the page behind it */
    overscroll-behavior: contain;
    z-index: 9000;
  }

  /* The burger turns into the close X, so it has to stay above the panel. */
  .cs-hamburger {
    position: relative;
    z-index: 9100;
  }

  .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;
  }

  /* THE THREE SELECTORS ARE LOAD-BEARING. The desktop rules
     .cs-has-dropdown:hover .cs-dropdown and :focus-within score 0,3,0, and a
     media query adds no specificity, so a lone .cs-dropdown at 0,1,0 loses to
     them. On a phone the first tap puts :hover and :focus-within on the
     Services item, the desktop translateX(-50%) came back, and the submenu
     jumped half its width to the left and was clipped by the panel edge.
     Match their specificity here or the bug returns. */
  .cs-dropdown,
  .cs-has-dropdown:hover .cs-dropdown,
  .cs-has-dropdown:focus-within .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; }
}

/* ============================================================================
   DISPLAY OPTIONS (2026-08-17)

   The nine preferences set by assets/js/display-options.js, applied as data
   attributes on <html> by that file and, before first paint, by the inline
   bootstrap in the <head> of every page.

   READ THE HEADER OF THAT JS FILE BEFORE CHANGING ANY OF THIS. It is not an
   accessibility overlay, it is deliberately narrow, and what it does NOT do is
   as considered as what it does. Every rule below is presentation only, and
   nothing here is permitted to change what assistive technology announces.
   ========================================================================== */

/* --- text size ------------------------------------------------------------- */
/* Scaling the root rather than a token means every rem in the sheet moves
   together, so spacing keeps its relationship to the type instead of the text
   growing inside a box that did not. This is text resize (WCAG 1.4.4), not
   zoom: the layout reflows and images do not grow. */
:root[data-a11y-text="large"] { font-size: 112.5%; }
:root[data-a11y-text="larger"] { font-size: 125%; }
:root[data-a11y-text="largest"] { font-size: 137.5%; }

/* --- text spacing ---------------------------------------------------------- */
/* WCAG 1.4.12 states a minimum a site must SURVIVE, not a value to apply. These
   sit above it, because applying the bare minimum to a site whose prose is
   already at 1.6 would make the text TIGHTER, which is how this preference
   shipped backwards on begin.co.uk the first time. */
:root[data-a11y-spacing="loose"] :is(p, li, dd, dt, blockquote, figcaption, td, th, label, summary) {
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}
:root[data-a11y-spacing="loose"] body,
:root[data-a11y-spacing="loose"] :is(p, li, dd, dt, blockquote, figcaption, td, th, label, summary) {
  line-height: 1.9;
}
:root[data-a11y-spacing="loose"] :is(p, blockquote) { margin-block: 2em; }

/* --- higher contrast ------------------------------------------------------- */
/* The greys collapse onto the body colour. Nothing here changes a HUE, only
   luminance: recolouring a client's brand is not this preference's job. */
:root[data-a11y-contrast="more"] {
  --cs-grey-600: var(--cs-navy);
  --cs-grey-400: var(--cs-navy);
  --cs-grey-200: #767676;
}
:root[data-a11y-contrast="more"] :focus-visible { outline-width: 4px; }

/* --- underline links ------------------------------------------------------- */
/* Prose only. The nav, the footer columns and the breadcrumb are all lists of
   links, and underlining every one turns navigation into a wall of rules. */
:root[data-a11y-links="underline"] main a:not(.cs-btn):not(.cs-btn-primary):not(.cs-btn-secondary) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- reduce motion --------------------------------------------------------- */
/* For the visitor who does not know the OS setting exists, which is almost
   everybody. Duration 0.01ms rather than `none`, so animation and transition
   END events still fire and nothing that waits on one hangs forever. */
:root[data-a11y-motion="reduce"] *,
:root[data-a11y-motion="reduce"] *::before,
:root[data-a11y-motion="reduce"] *::after {
  animation-duration: 0.01ms;
  animation-iteration-count: 1;
  transition-duration: 0.01ms;
  scroll-behavior: auto;
}

/* --- reduce transparency ---------------------------------------------------- */
/* AN OVERRIDE HERE, AND A GATE ON THE OTHER SITES. The difference is the build.
   `backdrop-filter: none` is the property's INITIAL value, and Lightning CSS
   deletes declarations it considers redundant, so on begin.co.uk and
   vinula.co.uk this same override silently vanishes from the built stylesheet;
   both of those sites gate the blur instead, so the declaration is never made.
   THIS site has no build step and serves the stylesheet exactly as written, so
   the override survives, and it is the better choice here because it preserves
   the cascade: the mobile rule further up that already turns the dropdown blur
   off keeps working. Hoisting the blurs into a gated block at the end of this
   file would have outranked that rule and put the blur back on phones.

   Panels that carry TEXT also go opaque. Removing the blur alone would make
   them worse, because the blur was the only thing keeping words legible over
   whatever sits behind them. */
:root[data-a11y-transparency="reduce"] .cs-nav,
:root[data-a11y-transparency="reduce"] .cs-nav.cs-scrolled,
:root[data-a11y-transparency="reduce"] .cs-dropdown {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--cs-white);
}

/* --- stronger focus indicator ----------------------------------------------- */
/* SEPARATE FROM HIGHER CONTRAST ON PURPOSE. That preference widens the ring but
   repaints the whole page to do it, and a sighted keyboard user who simply
   cannot follow focus should not have to accept a different colour scheme.

   :focus as well as :focus-visible, which is the entire point of the setting.
   :focus-visible is the browser's guess about whether you WANT to see focus and
   it withholds the ring after a mouse click. Someone who has ticked this has
   told us the guess is wrong for them.

   The `outline: none` on the enquiry inputs further up this sheet is overridden
   here deliberately: those fields signal focus with a border colour change
   alone, which is the one thing this preference exists to fix.

   outline, never box-shadow: outline survives Windows High Contrast Mode and
   box-shadow is dropped by it. */
:root[data-a11y-focus="strong"] :focus,
:root[data-a11y-focus="strong"] :focus-visible {
  outline: 4px solid var(--cs-orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- larger tap targets ------------------------------------------------------ */
/* WCAG 2.2 criterion 2.5.8 asks 24px and AAA 2.5.5 asks 44px. This goes to 48px,
   the Android and iOS guidance and the figure that actually helps a hand with a
   tremor. It is the only preference here aimed at motor rather than vision.

   INLINE LINKS ARE DELIBERATELY EXCLUDED, and 2.5.8 excludes them too: a 48px
   box on a link inside a sentence breaks the line box or overlaps the line
   above. The exemption exists because the fix is worse than the problem. */
:root[data-a11y-targets="large"] :is(button, .cs-btn, .cs-btn-primary, .cs-btn-secondary,
  [role="button"], summary, input[type="submit"], .cs-nav a, .cs-dropdown a, .cs-footer a) {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}
/* Checkboxes and radios cannot use min-height: the box is a replaced element
   sized by the UA, so the control itself has to grow. */
:root[data-a11y-targets="large"] :is(input[type="checkbox"], input[type="radio"]) {
  width: 24px;
  height: 24px;
}
:root[data-a11y-targets="large"] label { min-height: 48px; }

/* --- simpler typeface -------------------------------------------------------- */
/* NOT A DYSLEXIA FONT, AND THE LABEL IN THE PANEL DOES NOT CLAIM TO BE ONE.
   OpenDyslexic and its relatives are deliberately absent: the controlled studies
   do not support the claim, and "install this font and dyslexic visitors can
   read your site" is precisely the species of claim the FTC fined accessiBe a
   million dollars for.

   What it DOES do is honest on its own terms. Space Grotesk and Plus Jakarta
   Sans are geometric faces with narrow apertures; the system UI stack is what
   the visitor's own OS uses for its interface, so it is the face they read most
   and the one their renderer hints best. Some people read it more comfortably,
   which is reason enough to offer it without inventing a medical one. */
:root[data-a11y-typeface="simple"] {
  --cs-font-display: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cs-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ============================================================================
   THE PANEL ITSELF
   ========================================================================== */
.a11y-trigger {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 880;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--cs-grey-200);
  border-radius: 999px;
  background: var(--cs-white);
  color: var(--cs-navy);
  font-family: var(--cs-font-body);
  font-size: 15px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}
.a11y-trigger:hover { border-color: var(--cs-orange); }
/* WCAG 2.2 2.4.11. Hidden rather than nudged, which costs it a tab stop, and
   that is acceptable ONLY because the footer of every page carries a second
   permanent way in. If that control is ever removed, this has to be rewritten
   to move rather than hide. */
.a11y-trigger[data-dodging="true"] { opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
  /* The label is what makes this button understandable, so it is the last thing
     to go. On a phone it keeps the icon and its accessible name. */
  .a11y-trigger { padding: 10px; }
  .a11y-trigger span {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

.a11y-dialog {
  width: min(30rem, calc(100vw - 2rem));
  max-height: min(38rem, calc(100vh - 2rem));
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--cs-grey-200);
  border-radius: var(--cs-radius, 16px);
  background: var(--cs-white);
  color: var(--cs-navy);
  font-family: var(--cs-font-body);
}
.a11y-dialog::backdrop { background: rgba(26, 26, 26, 0.45); }
.a11y-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.a11y-dialog-head h2 { margin: 0; font-family: var(--cs-font-display); font-size: 20px; }
.a11y-close {
  min-width: 44px; min-height: 44px;
  border: 1px solid var(--cs-grey-200); border-radius: 8px;
  background: var(--cs-white); color: var(--cs-navy);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.a11y-dialog-intro { margin: 12px 0 4px; color: var(--cs-grey-600); font-size: 14px; }
.a11y-field { margin: 16px 0 0; padding: 0; border: 0; }
.a11y-field legend {
  padding: 0; margin-bottom: 6px;
  font-family: var(--cs-font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--cs-grey-600);
}
.a11y-choice {
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 44px; padding: 6px 0; cursor: pointer;
}
.a11y-choice input {
  width: 20px; height: 20px; margin-top: 2px;
  flex: 0 0 auto; accent-color: var(--cs-orange);
}
.a11y-choice small { display: block; margin-top: 2px; color: var(--cs-grey-600); font-size: 13px; }
.a11y-dialog-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--cs-grey-200);
}
.a11y-reset {
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--cs-grey-200); border-radius: 8px;
  background: var(--cs-white); color: var(--cs-navy);
  font-family: var(--cs-font-body); font-size: 14px; cursor: pointer;
}
.a11y-reset[disabled] { opacity: 0.5; cursor: default; }

/* The footer entry point into the display options panel. A BUTTON rather than a
   link, because it opens a panel instead of going anywhere, and styled to match
   the links beside it so the Legal column still reads as one list.

   It is load-bearing, not a convenience. The floating trigger hides itself
   whenever it would cover a focused element (WCAG 2.2 2.4.11), and while it is
   hidden it is out of the tab order, so this is the only guaranteed way in for
   a keyboard user. If this control is ever removed, the trigger has to be
   rewritten to move rather than hide. */
.cs-footer-a11y {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cs-grey-400);
  font-family: var(--cs-font-body);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s;
}
.cs-footer-a11y:hover {
  color: var(--cs-orange);
}

/* ==========================================================================
   Cookie consent (added 2026-08-19)
   Paired with /assets/js/consent.js and the inline Consent Mode block that
   sits above the GTM snippet in every page head.
   Uses the house colours: orange #E07520, near-black #1A1A1A.
   ========================================================================== */
.cs-consent {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(26, 26, 26, 0.45);
  padding: 1rem;
}
@media (min-width: 640px) {
  .cs-consent { align-items: center; }
}
.cs-consent__panel {
  background: #fff;
  color: #1A1A1A;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  max-width: 40rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
}
.cs-consent__title { font-size: 1.25rem; margin: 0 0 0.5rem; }
.cs-consent__intro { margin: 0 0 1rem; font-size: 0.9375rem; line-height: 1.5; }
.cs-consent__cats { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; }
.cs-consent__cat {
  border: 1px solid rgba(26, 26, 26, 0.15);
  border-radius: 8px;
  padding: 0.75rem 0.875rem;
}
.cs-consent__cat-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.cs-consent__cat-label { font-weight: 700; font-size: 0.9375rem; flex: 1; }
.cs-consent__toggle { width: 1.15rem; height: 1.15rem; accent-color: #E07520; }
.cs-consent__always {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1A1A1A;
  opacity: 0.6;
}
.cs-consent__cat-desc { margin: 0; font-size: 0.8125rem; line-height: 1.45; opacity: 0.85; }
.cs-consent__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cs-consent__btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0.625rem 1rem;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  border: 1px solid #1A1A1A;
}
.cs-consent__btn--ghost { background: #fff; color: #1A1A1A; }
.cs-consent__btn--solid { background: #E07520; border-color: #E07520; color: #fff; }
.cs-consent__btn:focus-visible { outline: 3px solid #E07520; outline-offset: 2px; }
.cs-consent__more { margin: 0.875rem 0 0; font-size: 0.8125rem; }

/* The display options panel can set reduced motion. Nothing here animates, so
   there is nothing to disable, but the dialog must still respect a large text
   preference rather than clipping. */
[data-a11y-text] .cs-consent__panel { max-height: 95vh; }

/* Cookie policy tables (added 2026-08-19 with the consent work). The cookie
   policy is the only page that needs a data table, so this is deliberately
   small and scoped rather than a general table system. */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.875rem;
}
.legal-table caption {
  text-align: left;
  font-weight: 700;
  padding-bottom: 0.5rem;
}
.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.625rem;
  border: 1px solid rgba(26, 26, 26, 0.15);
}
.legal-table thead th { background: rgba(26, 26, 26, 0.04); }
/* Narrow screens: let the table scroll rather than squeeze the purpose column
   into one word per line. */
@media (max-width: 39.99em) {
  .legal-table { display: block; overflow-x: auto; white-space: normal; }
}


/* ===================================================================
   17. WORK PHOTOGRAPHY (real client shoot, added 28 August 2026)
   Two components used across the service pages, why-us and the
   before-and-after page. Both normalise the source aspect ratio so a
   portrait frame and a landscape frame sit together without one of
   them running the page length.

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

/* --- Single supporting photo inside a content section ---
   Three shapes, picked to suit the source frame. Forcing a portrait
   photograph into the 3:2 default crops the subject's head off, so a
   near-square source takes .work-figure--square and an upright source
   takes .work-figure--portrait. --- */
.work-figure {
  max-width: 860px;
  margin: 40px auto 0;
}

.work-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  background: var(--bg-light);
}

.work-figure--square {
  max-width: 700px;
}

.work-figure--square img {
  aspect-ratio: 4 / 3;
}

.work-figure--portrait {
  max-width: 460px;
}

.work-figure--portrait img {
  aspect-ratio: 3 / 4;
}

.work-figure figcaption {
  margin-top: 12px;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* --- Grid of photos --- */
.work-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 36px;
}

.work-gallery figure {
  margin: 0;
}

.work-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  background: var(--bg-light);
}

.work-gallery figcaption {
  margin-top: 11px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}
/* --- Gallery tile that links through to the service it illustrates --- */
.work-gallery a.work-tile-img {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s var(--cs-transition);
}

.work-gallery a.work-tile-img img {
  border-radius: 0;
  transition: transform 0.5s var(--cs-transition);
}

.work-gallery a.work-tile-img:hover {
  box-shadow: 0 12px 30px rgba(26, 26, 26, 0.18);
}

.work-gallery a.work-tile-img:hover img {
  transform: scale(1.04);
}

.work-gallery a.work-tile-img:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.work-tile-link {
  display: inline-block;
  margin-top: 6px;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
}

.work-tile-link:hover {
  color: var(--orange-hover);
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .work-gallery a.work-tile-img,
  .work-gallery a.work-tile-img img {
    transition: none;
  }
  .work-gallery a.work-tile-img:hover img {
    transform: none;
  }
}


/* Section wrapper for a gallery that sits on its own, so the heading
   matches the detail sections above and below it. */
.work-section {
  padding: 80px 0;
  background: var(--white);
}

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

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

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

@media (max-width: 39.99em) {
  .work-figure { margin-top: 32px; }
  .work-gallery { gap: 20px; margin-top: 28px; }
}