:root {
  --navy: #0d2b52;
  --blue: #2a72c6;
  --green: #4f9d56;
  --green-text: #2f6b33; /* darker than --green: passes WCAG AA (~6.4:1) for small/bold text on white, where --green itself (~3.3:1) does not */
  --green-light: #6cbf72; /* lighter than --green: passes WCAG AA (~6.3:1) for small/bold text on the navy hero overlay, where --green-text (~1.4:1) is nearly invisible */
  --ink: #26323c;
  --muted: #5b6b78;
  --bg-tint: #f2f7fb;
  --line: #e2eaf1;

  --dur-fast: 200ms;
  --dur-base: 550ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Source Sans 3', sans-serif;
  color: var(--ink);
  background: #fff;
  min-height: 100vh;
}

a, button {
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease,
    color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
a:hover { opacity: 0.82; }

/* Scroll reveal — sections fade up once as they enter the viewport */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Cards/images — fade in with a very slight scale as they enter the viewport */
.reveal-card {
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.reveal-card.is-visible { opacity: 1; transform: none; }

/* Hero text — subtle fade-in on page load; the background photo itself is never animated */
.hero-fade {
  opacity: 0;
  transform: translateY(10px);
  animation: heroFadeIn 500ms var(--ease-out) 150ms forwards;
}
@keyframes heroFadeIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-card, .hero-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Sticky header — soft shadow once the page has scrolled */
/* z-index:100 is set inline for the header, but Leaflet's own controls and
   panes use z-index up to 1000 — !important is needed to keep the sticky
   header above the map once it scrolls underneath. */
.site-header { transition: box-shadow var(--dur-fast) ease; z-index: 1100 !important; }
.site-header.scrolled { box-shadow: 0 2px 14px rgba(13, 43, 82, 0.1); }

/* Nav — underline on hover instead of the blanket opacity dip */
nav a { position: relative; opacity: 1 !important; }
nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) ease;
}
nav a:hover::after { transform: scaleX(1); }

/* Pricing cards — subtle lift on hover */
.pricing-card { transition: box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.pricing-card:hover { box-shadow: 0 6px 20px rgba(13, 43, 82, 0.1); border-color: var(--navy); }

/* Card/consultation photos — gentle zoom on hover */
.photo-hover { overflow: hidden; }
.photo-hover img { transition: transform 400ms ease; }
.photo-hover:hover img { transform: scale(1.04); }

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 1000;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  padding: 12px 20px;
  text-decoration: none;
  transition: top var(--dur-fast) ease;
}
.skip-link:focus { top: 12px; opacity: 1; }

/* Widen the tappable area of plain-text footer links without shifting
   the visible layout — the extra padding is offset by an equal negative
   margin, so surrounding spacing renders exactly as before. */
.footer-grid a {
  display: inline-block;
  padding: 8px 0;
  margin: -8px 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

img { max-width: 100%; }

/* Visually hidden but still announced by screen readers — used for form
   labels where the visual design relies on a placeholder instead. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[data-form-status] {
  font-size: 15px;
  line-height: 1.5;
  padding: 14px 16px;
  border: 1px solid var(--line);
}
[data-form-status][data-state="success"] { border-color: var(--green); background: #f1f8f2; color: var(--green); }
[data-form-status][data-state="error"] { border-color: #c0392b; background: #fdf1f0; color: #c0392b; }
[data-form-status][data-state="pending"] { border-color: var(--line); background: var(--bg-tint); color: var(--muted); }

/* Photo placeholder — stands in for real photography/maps not yet supplied */
.photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tint);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 16px;
}
.photo-placeholder.circle { border-radius: 50%; }
.photo-placeholder svg { flex-shrink: 0; }

/* Service-area map */
#service-area-map {
  width: 100%;
  height: 340px;
  background: var(--bg-tint);
}
.ahs-map-pin { background: none; border: none; }
.leaflet-popup-content { font-family: 'Source Sans 3', sans-serif; font-size: 14px; }
.leaflet-popup-content strong { color: var(--navy); font-family: 'Poppins', sans-serif; }

/* Service card title row — centered on desktop; left-aligned on mobile so
   longer titles wrap left instead of forming an off-balance centered block. */
@media (max-width: 640px) {
  .card-title-row { justify-content: flex-start !important; text-align: left; }
}

/* Category filters — pill buttons on desktop, a single dropdown on mobile
   where 4+ pills wrapping across several lines is hard to scan. */
.filter-select-wrap { display: none; }
.filter-select-wrap select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 640px) {
  .filter-btn-row { display: none !important; }
  .filter-select-wrap { display: block; }
}

/* Filter / accordion buttons */
[data-filter-btn], [data-care-toggle] {
  font-family: 'Source Sans 3', sans-serif;
  outline: none;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
[data-filter-btn]:hover, [data-care-toggle]:hover { border-color: var(--navy); }

/* FAQ accordion — smooth open/close, chevron rotates instead of the sign swapping */
[data-faq-question] {
  border: none;
  outline: none;
  cursor: pointer;
}
[data-faq-answer] {
  overflow: hidden;
  max-height: 0;
  transition: max-height 300ms ease;
}
[data-faq-item].is-open [data-faq-answer] { max-height: 1400px; }
[data-faq-sign] { transition: transform 250ms ease; }
[data-faq-item].is-open [data-faq-sign] { transform: rotate(45deg); }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle svg.icon-close { display: none; }
.site-header.nav-open .nav-toggle svg.icon-open { display: none; }
.site-header.nav-open .nav-toggle svg.icon-close { display: block; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  /* The <nav> carries an inline style="display:flex;..." attribute, which
     beats any external stylesheet rule regardless of selector specificity
     — !important is the only way to override it from here. */
  .site-header nav {
    display: none !important;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    order: 3;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--line);
  }
  .site-header.nav-open nav { display: flex !important; }
  .site-header nav a { padding: 13px 4px; width: 100%; }

  /* Same inline-style-override note as above — .header-cta also carries an
     inline display:flex. Hidden from the collapsed mobile header; shown
     (stacked, full-width) once the menu is opened so Call/Book a Free
     Consultation are still one tap away without cluttering the top bar. */
  .header-cta { display: none !important; }
  .site-header.nav-open .header-cta {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    order: 2;
    gap: 10px;
    margin-top: 14px;
  }
  .site-header.nav-open .header-cta a { text-align: center; }
}

/* Responsive grid collapse */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: minmax(0,1fr) !important; }
  .grid-3 { grid-template-columns: minmax(0,1fr) !important; }
  .grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .hero-split { grid-template-columns: minmax(0,1fr) !important; }
  /* Text-then-image sections should still lead with the photo once stacked
     on mobile, matching every other alternating image/text section. */
  .hero-split-reverse > img { order: -1; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: minmax(0,1fr) !important; }
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: minmax(0,1fr) !important; }
}