/* ==========================================================================
   Dragonfly Medicine Theme - Global Styles
   ========================================================================== */

/* Import Elegant Serif Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

/* CSS Custom Properties for Design System */
:root {
  /* New Color Palette - Leaf Green, Cobalt Blue, Wedgewood, Tan/Brown, Beige */
  
  /* 🍃 LEAF/TREE GREEN - PRIMARY (70% usage) - Use this the most - DEEP FOREST GREEN */
  --color-primary-leaf-green: var(--tcm-primary-leaf-green, #0d4a2e);   /* Deep Forest Green (main brand) - rich, profound, deep */
  --color-dark-leaf-green: var(--tcm-dark-leaf-green, #0a3a24);         /* Darkest Forest Green (nav/footer/emphasis) - deepest forest tone */
  --color-soft-leaf-green: var(--tcm-soft-leaf-green, #1a5c3a);        /* Medium Forest Green (hover/background tint) - slightly lighter */
  
  /* 🔵 COBALT BLUE - ACCENT (5% only, NOT royal blue) - Used sparingly for links, accents, CTAs */
  --color-accent-cobalt-blue: var(--tcm-accent-cobalt-blue, #2E5EAA);   /* Cobalt Accent - muted, grounded, not royal */
  --color-soft-cobalt-blue: var(--tcm-soft-cobalt-blue, #5C7FB8);      /* Soft Cobalt (hover/subtle UI) */
  --color-accent-cobalt-blue-light: var(--tcm-soft-cobalt-blue, #5C7FB8);  /* Legacy mapping */
  --color-accent-cobalt-blue-muted: rgba(46, 94, 170, 0.15);          /* muted for subtle accents */
  
  /* 🪨 WEDGEWOOD - Muted Blue-Gray Support (7%) - Bridges green ↔ blue beautifully */
  --color-secondary-wedgewood: var(--tcm-secondary-wedgewood, #6B7F8F); /* Wedgewood Base - elegant blue-gray, calming */
  --color-dark-wedgewood: var(--tcm-dark-wedgewood, #4E5F6C);         /* Dark Wedgewood - cards, icons, secondary buttons */
  --color-secondary-wedgewood-light: var(--tcm-secondary-wedgewood, #6B7F8F); /* Legacy mapping */
  --color-secondary-wedgewood-muted: rgba(107, 127, 143, 0.15);        /* muted for subtle effects */
  
  /* 🤎 TAN/BROWN - Earth Neutral (8%) - Grounding warmth - DARKER */
  --color-earth-brown: var(--tcm-earth-brown, #5A3D2B);                /* Earth Brown - darker, richer */
  --color-soft-tan: var(--tcm-soft-tan, #8B6F47);                      /* Soft Tan - darker for borders, dividers */
  --color-neutral-tan-brown: var(--tcm-soft-tan, #8B6F47);            /* Legacy mapping */
  --color-neutral-tan-brown-dark: var(--tcm-earth-brown, #5A3D2B);    /* Legacy mapping */
  --color-neutral-tan-brown-light: var(--tcm-soft-tan, #8B6F47);     /* Legacy mapping */
  --color-neutral-tan-brown-muted: rgba(139, 111, 71, 0.3);          /* muted for subtle borders - darker */
  
  /* 🪵 BEIGE - Light Neutral / Lift (10%) - subtle contrast, avoid dark brown */
  --color-warm-beige: var(--tcm-warm-beige, #D4C4B0);                  /* Warm Beige */
  --color-muted-beige: var(--tcm-muted-beige, #C8B89E);                /* Slightly darker beige for cards - soft tan */
  --color-light-beige: var(--tcm-warm-beige, #D4C4B0);                /* Legacy mapping */
  --color-light-beige-dark: var(--tcm-muted-beige, #C8B89E);          /* Legacy mapping */
  
  /* Background Colors - beige for light sections, subtle contrast */
  --color-bg-base: var(--tcm-warm-beige, #D4C4B0);                    /* main page background */
  --color-bg-layer-1: var(--tcm-warm-beige, #D4C4B0);                 /* section backgrounds */
  --color-bg-layer-2: var(--tcm-muted-beige, #C8B89E);                /* card backgrounds - subtle darker beige */
  --color-beige-darker: #D0C4B2;                                       /* light beige for service blocks, subtle contrast */
  --color-bg-dark: var(--tcm-dark-leaf-green, #0a3a24);               /* dark sections - darkest leaf green */
  --color-bg-dark-section: var(--tcm-dark-leaf-green, #0a3a24);        /* dark section backgrounds - darker */
  
  /* Text Colors - High contrast for readability - DARKER */
  --color-text-primary: var(--tcm-text-light, #FFFFFF);               /* primary text for dark sections - pure white */
  --color-text-secondary: var(--tcm-text-dark, #0A0A0A);              /* secondary text - darker, almost black */
  --color-text-muted: var(--tcm-text-muted, #2A2A2A);                 /* muted text - much darker for better readability */
  --color-text-dark: var(--tcm-text-dark, #0A0A0A);                   /* dark text (on beige) - very dark, almost black */
  --color-text-light: var(--tcm-text-light, #FFFFFF);                  /* light text (on dark) - pure white for contrast */
  
  /* Heading Colors - Deep Forest Green */
  --color-heading: var(--tcm-dark-leaf-green, #0a3a24);            /* headings use darkest forest green */
  --color-heading-dark: var(--tcm-dark-leaf-green, #0a3a24);         /* dark headings */
  
  /* Border Colors - soft tan/wedgewood, avoid dark brown */
  --color-border-base: var(--color-neutral-tan-brown-muted);          /* primary borders */
  --color-border-strong: var(--color-secondary-wedgewood);            /* strong borders - soft */
  --color-border-subtle: rgba(139, 111, 71, 0.25);                    /* subtle borders */
  
  /* Legacy variables mapped to new palette for backward compatibility */
  --color-green-primary: var(--color-primary-leaf-green);
  --color-green-darkest: var(--color-dark-leaf-green);
  --color-green-darker: var(--color-dark-leaf-green);
  --color-green-dark: var(--color-dark-leaf-green);
  --color-green-base: var(--color-primary-leaf-green);
  --color-green-light: var(--color-primary-leaf-green);
  
  --color-brown-dark: var(--color-neutral-tan-brown-dark);
  --color-brown-base: var(--color-neutral-tan-brown);
  --color-brown-medium: var(--color-neutral-tan-brown);
  --color-brown-light: var(--color-neutral-tan-brown-light);
  
  --color-purple-base: var(--color-accent-cobalt-blue);
  --color-purple-light: var(--color-soft-cobalt-blue);
  --color-purple-muted: var(--color-accent-cobalt-blue-muted);
  
  --color-gold-base: var(--color-primary-leaf-green);
  --color-gold-light: var(--color-soft-leaf-green);
  --color-gold-muted: rgba(47, 93, 80, 0.2);
  /* Gallery/slideshow accent - main green (was gold) */
  --color-gold-accent: var(--tcm-gallery-accent, var(--color-primary-leaf-green));
  
  --color-neutral-0: var(--color-light-beige);
  --color-neutral-50: var(--color-light-beige);
  --color-neutral-100: var(--color-light-beige-dark);
  --color-neutral-300: var(--color-neutral-tan-brown);
  --color-neutral-400: var(--color-neutral-tan-brown);
  --color-brown-300: var(--color-soft-tan);
  --color-neutral-600: var(--color-text-muted);
  --color-neutral-800: var(--color-text-dark);
  --color-neutral-900: #ffffff;
  
  /* Typography */
  --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
  --font-family-serif: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-family-body: 'Crimson Text', 'Georgia', 'Times New Roman', serif;
  --font-size-xs: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --font-size-sm: clamp(1rem, 0.95rem + 0.375vw, 1.125rem);
  --font-size-base: clamp(1.125rem, 1.05rem + 0.5vw, 1.25rem);
  --font-size-lg: clamp(1.25rem, 1.15rem + 0.625vw, 1.5rem);
  --font-size-xl: clamp(1.5rem, 1.4rem + 0.75vw, 1.875rem);
  --font-size-2xl: clamp(1.875rem, 1.7rem + 1vw, 2.5rem);
  --font-size-3xl: clamp(2.5rem, 2.2rem + 1.5vw, 3.5rem);
  --font-size-4xl: clamp(3rem, 2.5rem + 2.5vw, 5rem);
  
  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-pill: 9999px;

  /* Responsive container padding — consistent breathing room at all breakpoints */
  --container-padding-x: var(--space-4);

  /* Shadows */
  --shadow-sm: 0 8px 20px rgba(13, 26, 18, 0.35);
  --shadow-md: 0 16px 32px rgba(13, 26, 18, 0.4);
  --shadow-lg: 0 28px 60px rgba(13, 26, 18, 0.45);

  /* Transitions - Slower, hover-like timing */
  --transition-fast: 350ms ease-in-out;
  --transition-normal: 650ms ease-in-out;
  --transition-slow: 1000ms ease-in-out;
}

@media (min-width: 481px) {
  :root {
    --container-padding-x: var(--space-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding-x: var(--space-8);
  }
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: 1.75;
  color: var(--color-text-dark);
  background-color: var(--color-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  min-height: 100vh;
}

/* Global subtle animated gradient background - full page coverage */
html {
  min-height: 100%;
  position: relative;
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Main gradient layer - covers full document height */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  /* Use CSS custom property for dynamic height if available */
  height: var(--doc-height, 100vh);
  min-height: var(--doc-height, 100vh);
  background: 
    /* Subtle noise texture to prevent banding (extremely low opacity) */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.015) 2px,
      rgba(255, 255, 255, 0.015) 4px
    ),
    /* Layer 5: Very light cream - top right (subtle highlight) */
    radial-gradient(
      ellipse 120% 100% at 75% 20%,
      rgba(255, 253, 250, 0.25) 0%,
      rgba(255, 253, 250, 0.08) 40%,
      transparent 70%
    ),
    /* Layer 4: Soft off-white - top left */
    radial-gradient(
      ellipse 110% 90% at 25% 25%,
      rgba(252, 248, 244, 0.2) 0%,
      rgba(252, 248, 244, 0.06) 45%,
      transparent 65%
    ),
    /* Layer 3: Warm beige - bottom right */
    radial-gradient(
      ellipse 100% 85% at 70% 75%,
      rgba(248, 243, 238, 0.18) 0%,
      rgba(248, 243, 238, 0.05) 50%,
      transparent 70%
    ),
    /* Layer 2: Light tan - bottom left */
    radial-gradient(
      ellipse 95% 80% at 30% 80%,
      rgba(245, 240, 235, 0.15) 0%,
      rgba(245, 240, 235, 0.04) 55%,
      transparent 75%
    ),
    /* Layer 1: Base beige wash - center (largest, most subtle) */
    radial-gradient(
      ellipse 140% 120% at 50% 50%,
      rgba(250, 246, 242, 0.12) 0%,
      rgba(250, 246, 242, 0.03) 60%,
      transparent 85%
    ),
    /* Base warm beige background */
    var(--color-bg-base);
  background-size: 100% 100%, 150% 150%, 140% 140%, 130% 130%, 120% 120%, 160% 160%, 100% 100%;
  background-position: 0% 0%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, center center;
  background-attachment: fixed;
  z-index: -2;
  pointer-events: none;
  /* Smooth animation properties */
  will-change: background-position;
  animation: gradientDrift 60s ease-in-out infinite;
}

/* Subtle gentle drifting animation */
@keyframes gradientDrift {
  0%, 100% {
    background-position: 
      0% 0%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      center center;
  }
  25% {
    background-position: 
      0% 0%,
      52% 48%,
      48% 52%,
      51% 49%,
      49% 51%,
      50.5% 49.5%,
      center center;
  }
  50% {
    background-position: 
      0% 0%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      center center;
  }
  75% {
    background-position: 
      0% 0%,
      48% 52%,
      52% 48%,
      49% 51%,
      51% 49%,
      49.5% 50.5%,
      center center;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
    will-change: auto;
    background-position: center center;
  }
}

/* Mobile optimization */
@media (max-width: 768px) {
  body::before {
    animation-duration: 80s;
    background-size: 100% 100%, 130% 130%, 120% 120%, 110% 110%, 100% 100%, 140% 140%, 100% 100%;
  }
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1 {
  font-family: var(--font-family-serif);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-heading);
  margin-top: 0;
  margin-bottom: var(--space-6);
  font-size: var(--font-size-4xl);
  letter-spacing: -0.02em;
}

h2, h3, h4, h5, h6 {
  font-family: var(--font-family-serif);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-heading);
  margin-top: 0;
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--font-size-3xl);
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-base);
}

/* Text Selection Styles - Leaf green highlight */
::selection {
  background-color: var(--color-primary-leaf-green);
  color: var(--color-text-light);
  text-shadow: none;
  outline: none;
  border: none;
}

::-moz-selection {
  background-color: var(--color-primary-leaf-green);
  color: var(--color-text-light);
  text-shadow: none;
  outline: none;
  border: none;
}

/* Remove selection box/outline on all elements */
*::selection {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

*::-moz-selection {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

p {
  margin-top: 0;
  margin-bottom: var(--space-6);
  color: var(--color-text-dark);
  line-height: 1.8;
  font-size: var(--font-size-base);
}

/* Entry Content Styles */
.entry-header {
  margin-bottom: var(--space-8);
}

/* Extra top spacing from nav to title on contact, gallery, about */
.page-template-page-contact .entry-header,
.page-template-page-gallery .entry-header,
.page-template-page-about .entry-header {
  padding-top: var(--space-6);
}

.entry-title {
  color: var(--color-heading);
  margin-bottom: var(--space-4);
}

.entry-content {
  color: var(--color-text-dark);
}

.entry-content p {
  color: var(--color-text-dark);
}

/* Ensure all body text uses theme color manager */
body {
  color: var(--color-text-dark);
}


a {
  color: var(--color-accent-cobalt-blue);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  display: inline-block;
}

a:hover,
a:focus {
  color: var(--color-accent-cobalt-blue-light);
  background-color: var(--color-accent-cobalt-blue-muted);
  text-decoration: none;
}

a:focus {
  outline: 2px solid var(--color-primary-leaf-green);
  outline-offset: 2px;
}

/* ==========================================================================
   Layout Components
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
  box-sizing: border-box;
}

/* (scroll containment removed) – see Calendar Page Background below doesn’t scroll */

/* Calendar Page: subtle gradient background (no single wrapper box) */
.calendar-page {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Subtle vertical gradient: lighter at top, slightly warmer/darker toward bottom */
.calendar-page--gradient {
  background: linear-gradient(
    180deg,
    var(--color-warm-beige) 0%,
    var(--color-muted-beige) 100%
  );
  background-attachment: scroll;
}

.calendar-page__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-8) var(--space-8);
  box-sizing: border-box;
  background: none;
  border: none;
  box-shadow: none;
}

.calendar-page article {
  max-width: 100%;
  background: none;
  border: none;
  box-shadow: none;
}

/* Ensure no outer wrapper draws a box — only the individual cards/containers have their own styling */
.calendar-page .container.calendar-page__inner {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Section 1: What to Expect — one card, slightly reduced padding */
.calendar-page__header {
  margin-bottom: var(--space-6);
}

.calendar-page__expect-section {
  margin-bottom: var(--space-6);
}

.calendar-page__expect-card {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-8);
  background-color: var(--color-bg-layer-2);
  border: 1px solid rgba(90, 61, 43, 0.2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: left;
  box-sizing: border-box;
}

.calendar-page__expect-card h3 {
  margin-top: 0;
}

.calendar-page__expect-image {
  margin-bottom: var(--space-4);
}

/* Booking intro text — directly above calendar, no box; between heading and body size */
.calendar-page__booking-intro {
  text-align: center;
  font-size: var(--font-size-lg);
  color: var(--color-text-dark);
  margin: 0 0 var(--space-2) 0;
  font-family: var(--font-family-body);
}

.calendar-page__booking-sub {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4) 0;
}

/* Section 2: Calendar — one neutral container (rounded, shadow), closer to content above */
.calendar-page__calendar-section {
  margin-top: var(--space-2);
  margin-bottom: var(--space-6);
  width: 100%;
}

.calendar-page__calendar-container {
  background-color: var(--color-bg-layer-2);
  border: 1px solid rgba(90, 61, 43, 0.2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* Section 3: Cancellation Policy — one simple card, reduced padding, same width as calendar */
.calendar-page__policy-section {
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

.calendar-page__policy-card {
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-6) var(--space-8);
  background-color: var(--color-bg-layer-2);
  border: 1px solid rgba(90, 61, 43, 0.2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: left;
  box-sizing: border-box;
}

.calendar-page__policy-card h3 {
  margin-top: 0;
}

.calendar-page__fallback-card {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-8);
  background-color: var(--color-bg-layer-2);
  border: 1px solid rgba(90, 61, 43, 0.2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.calendar-page__contact a,
.calendar-page__contact-inline a {
  color: var(--color-accent-cobalt-blue);
  text-decoration: underline;
}

.calendar-page__contact a:hover,
.calendar-page__contact-inline a:hover {
  color: var(--color-soft-cobalt-blue);
}

@media (max-width: 767px) {
  .calendar-page__inner {
    padding: var(--space-4) var(--space-4) var(--space-4);
  }
  .calendar-page__header {
    margin-bottom: var(--space-4);
  }
  .calendar-page__expect-section {
    margin-bottom: var(--space-4);
  }
  .calendar-page__expect-card {
    padding: var(--space-4) var(--space-4);
  }
  .calendar-page__booking-intro {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-1);
  }
  .calendar-page__booking-sub {
    margin-bottom: var(--space-3);
  }
  .calendar-page__calendar-section {
    margin-top: var(--space-2);
    margin-bottom: var(--space-4);
  }
  .calendar-page__calendar-container {
    padding: var(--space-4);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .calendar-page__policy-section {
    margin-top: var(--space-3);
    margin-bottom: var(--space-4);
  }
  .calendar-page__policy-card {
    padding: var(--space-4) var(--space-4);
  }
}

/* Contact Page Background */
.contact-page {
  position: relative;
  min-height: 100vh;
  padding: 0 0 var(--space-8) 0;
}

.contact-page .entry-content .grid {
  gap: var(--space-10, 2.5rem);
}

.contact-page .entry-content .grid > div {
  padding: 0 var(--space-3);
  box-sizing: border-box;
}

.contact-page--with-bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Edge-based blending: semi-transparent background on article, not overlay */
.contact-page--with-bg > article {
  background-color: rgba(242, 237, 230, 0.85);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  border-radius: var(--radius-md);
  position: relative;
  /* Edge gradients for blending - only at edges */
  box-shadow: 
    inset 0 50px 30px -30px rgba(242, 237, 230, 0.5),
    inset 0 -50px 30px -30px rgba(242, 237, 230, 0.5);
}

/* Office Hours block: stacked "Day: Time" lines, matching reference layout */
.office-hours-block__title {
  color: var(--color-dark-leaf-green);
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0 0 var(--space-4) 0;
}

.office-hours-block__list {
  margin: 0;
  color: var(--color-text-dark);
  line-height: 1.8;
}

.office-hours-block__list br + br {
  display: none;
}

.office-hours-block__note {
  margin: var(--space-4) 0 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-dark);
  line-height: 1.6;
}

/* Contact block: shared styling for Contact page and footer (same as reference) */
.contact-block__title {
  color: var(--color-dark-leaf-green);
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin: 0 0 var(--space-4) 0;
}

.contact-block__title--form {
  font-size: var(--font-size-xl);
}

/* Contact page: single centered "Get In Touch" section (no form) — stretched, less padding */
.contact-page__single {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  text-align: center;
}

.contact-page__get-in-touch {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.contact-page__get-in-touch .contact-page__left-box {
  width: 100%;
  text-align: center;
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.contact-page__intro {
  font-size: var(--font-size-xl);
  line-height: 1.75;
  color: var(--color-text-dark);
  margin: 0 auto var(--space-4) auto;
  max-width: 100%;
  text-align: center;
}

.contact-page__get-in-touch .contact-block__title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-4);
  text-align: center;
}

.contact-page__get-in-touch .contact-info,
.contact-page__get-in-touch .contact-item {
  font-size: var(--font-size-lg);
  line-height: 1.7;
  margin-bottom: var(--space-4);
  text-align: center;
}

.contact-page__get-in-touch .office-hours-block {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-6);
  background-color: var(--color-bg-layer-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-align: center;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.contact-page__get-in-touch .office-hours-block__title {
  font-size: var(--font-size-2xl);
  text-align: center;
  margin-bottom: var(--space-4);
}

.contact-page__get-in-touch .office-hours-block__list,
.contact-page__get-in-touch .office-hours-block__note {
  font-size: var(--font-size-lg);
  line-height: 1.7;
}

/* Phone only (no label), bold — above Office Hours */
.contact-page__get-in-touch .contact-page__phone-value {
  margin: var(--space-6) 0 var(--space-4) 0;
  padding: 0;
  text-align: center;
  font-weight: 700;
  font-size: var(--font-size-lg);
  line-height: 1.6;
  color: var(--color-text-dark);
}

.contact-page__schedule {
  margin-top: var(--space-4);
  padding-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Exact same size as nav bar Schedule button */
.contact-page__schedule .btn {
  font-size: 1.0625rem;
  padding: var(--space-2) var(--space-4);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-height: 44px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .contact-page__single {
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
  }
  .contact-page__intro {
    font-size: var(--font-size-lg);
  }
  .contact-page__get-in-touch .contact-block__title {
    font-size: var(--font-size-xl);
  }
}

@media (max-width: 480px) {
  .contact-page__single {
    max-width: 100%;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .contact-page__get-in-touch .office-hours-block {
    padding: var(--space-4);
  }
  .contact-page__schedule .btn {
    font-size: 1.0625rem;
    padding: var(--space-2) var(--space-4);
  }
}

/* Legacy: keep for any leftover references */
.contact-page__grid {
  align-items: stretch;
}
.contact-page__left-column,
.contact-page__right-column {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.contact-page__left-box {
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  flex: 1 1 auto;
  min-height: 0;
}
.contact-page__left-box .contact-block__title,
.contact-page__left-box .contact-info,
.contact-page__left-box .contact-item {
  margin-bottom: var(--space-6);
}
.contact-page__left-box > p {
  font-size: var(--font-size-lg);
  line-height: 1.65;
}
.contact-page__left-box .contact-item {
  font-size: var(--font-size-lg);
  line-height: 1.65;
}
.contact-page__left-box .office-hours-block {
  margin-top: var(--space-12);
  margin-bottom: var(--space-12);
  padding: var(--space-6) var(--space-6);
  background-color: var(--color-bg-layer-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.contact-page__right-column .contact-block__title--form {
  margin-top: 0;
}

.contact-page .contact-form,
.contact-page .contact-form-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.contact-page .contact-form-wrapper .wpcf7-form {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.contact-page .contact-form .form-group:has(button[type="submit"]),
.contact-page .contact-form-wrapper .wpcf7-form p:has(.wpcf7-submit),
.contact-page .contact-form-wrapper .wpcf7-form *:has(> .wpcf7-submit) {
  margin-top: auto;
  margin-bottom: 0;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.contact-page .contact-form button[type="submit"],
.contact-page .contact-form-wrapper .wpcf7-submit {
  margin-left: auto !important;
  margin-right: auto !important;
  display: inline-block;
}

.contact-page__schedule {
  margin-top: var(--space-8);
  padding-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.contact-page .contact-form-wrapper {
  padding: var(--space-6) 0 0;
}

.contact-page .entry-content {
  padding: var(--space-4) 0;
}

.contact-page__grid {
  gap: var(--space-12);
  align-items: start;
}

.contact-page .contact-form-wrapper .wpcf7-form p,
.contact-page .form-group {
  margin-bottom: var(--space-6);
}

.contact-info {
  margin: 0;
  padding: 0;
}

.contact-item {
  margin-bottom: var(--space-4);
  color: var(--color-text-dark);
  line-height: 1.7;
  font-size: var(--font-size-base);
}

.contact-item:last-child {
  margin-bottom: 0;
}

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

.contact-item a:hover,
.contact-item a:focus {
  color: var(--color-primary-leaf-green);
  text-decoration: underline;
}

@media (max-width: 991px) {
  .contact-page .entry-content .grid {
    gap: var(--space-12);
  }
  .contact-page .entry-content .grid > div:last-child {
    margin-top: var(--space-4);
  }
}

/* 900px and above: consistent left/right padding and section alignment */
@media (min-width: 901px) {
  .contact-page .container {
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
  }
  .contact-page .entry-content .grid > div {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* Up to 900px: consistent padding, submit and schedule buttons centered */
@media (max-width: 900px) {
  .contact-page .entry-content .grid > div {
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
    width: 100%;
    max-width: 100%;
  }
  .contact-page__left-column,
  .contact-page__right-column {
    width: 100%;
    max-width: 100%;
  }
  .contact-page .contact-form,
  .contact-page .contact-form-wrapper {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .contact-page .contact-form .form-group:has(button[type="submit"]),
  .contact-page .contact-form-wrapper .wpcf7-form p:has(.wpcf7-submit),
  .contact-page .contact-form-wrapper .wpcf7-form *:has(> .wpcf7-submit) {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .contact-page__schedule {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 767px) {
  .contact-page .entry-content {
    text-align: center;
  }
  .contact-page .entry-content .grid {
    align-items: center;
  }
  .contact-page .entry-content .grid > div {
    text-align: center;
  }
  .contact-page .contact-info,
  .contact-page .contact-item {
    text-align: center;
  }
  .contact-page .card {
    margin-left: auto;
    margin-right: auto;
  }
  .contact-page .contact-form,
  .contact-page .contact-form-wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 100% !important;
    max-width: 100% !important;
  }
  .contact-page .contact-form .form-group:has(button[type="submit"]),
  .contact-page .contact-form-wrapper .wpcf7-form p:has(.wpcf7-submit),
  .contact-page .contact-form-wrapper .wpcf7-form *:has(> .wpcf7-submit) {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .contact-page .contact-form-wrapper .wpcf7-submit {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 480px) {
  .contact-page .contact-form-wrapper,
  .contact-page .contact-form-wrapper .wpcf7-form {
    width: 100% !important;
    max-width: 100% !important;
  }
  .contact-page .contact-form .form-group:has(button[type="submit"]),
  .contact-page .contact-form-wrapper .wpcf7-form p:has(.wpcf7-submit),
  .contact-page .contact-form-wrapper .wpcf7-form *:has(> .wpcf7-submit) {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .contact-page .contact-form-wrapper .wpcf7-submit {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.container--narrow {
  max-width: 800px;
}

.container--wide {
  max-width: 1400px;
}

/* Main Content Area */
.main {
  min-height: calc(100vh - 200px); /* Ensure footer stays at bottom */
  padding: 0 0 var(--space-8) 0;
  padding-top: 56px; /* Clear fixed nav */
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--space-4);
}

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

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

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* About Page: larger intro and card text */
.about-page .about-intro__text {
  font-size: var(--font-size-lg);
  line-height: 1.7;
  color: var(--color-text-dark);
}
.about-page .about-widget-card h3 {
  font-size: var(--font-size-2xl);
}
.about-page .about-widget-card p,
.about-page .about-widget-card div {
  font-size: var(--font-size-lg);
  line-height: 1.75;
}
.about-page .about-values-list li {
  font-size: var(--font-size-lg);
  line-height: 1.7;
}

/* About Page: image left (smaller), widgets right stacked */
.about-main-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto var(--space-12) auto;
}

.about-image-wrap {
  position: relative;
  min-height: 0;
}

.about-image-wrap .about-featured-image {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: block;
}

.about-widgets {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-height: 100%;
}

.about-widget-card {
  flex: 1 1 0;
  min-height: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Legacy about-image-container (if used elsewhere) */
.about-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.about-featured-image {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: block;
}

.about-content-section {
  max-width: 1200px;
  margin: 0 auto;
}

.about-content-section h2 {
  color: var(--color-heading);
  margin-bottom: var(--space-6);
}

.about-content-text {
  max-width: 800px;
  margin: 0 auto;
}

.about-content-text p {
  margin-bottom: var(--space-4);
  line-height: 1.7;
  color: var(--color-text-dark);
  text-align: left;
}

/* Mission & Values Section Spacing */
.mission-values-section {
  max-width: 1200px;
  margin: 0 auto;
  gap: var(--space-12);
}

.mission-values-section .card {
  margin-bottom: 0;
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
}

.mission-values-section .card h3 {
  margin-top: 0;
  margin-bottom: var(--space-4);
  color: var(--color-heading);
}

.mission-values-section .card p {
  margin-bottom: 0;
  line-height: 1.7;
  color: var(--color-text-dark);
}

.mission-values-section .card ul {
  margin: 0;
  padding: 0;
}

.mission-values-section .card li {
  margin-bottom: var(--space-3);
  line-height: 1.6;
  color: var(--color-text-dark);
}

.mission-values-section .card li:last-child {
  margin-bottom: 0;
}

.about-values-list {
  list-style: none;
  padding: 0;
}

.about-values-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: var(--space-2);
  line-height: 1.6;
}

.about-values-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 6px;
  height: 6px;
  background: var(--color-secondary-wedgewood);
  border-radius: 50%;
}

@media (max-width: 767px) {
  .about-main-row {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start;
  }
  .about-widgets {
    min-height: 0;
  }
  .about-widget-card {
    flex: none;
    min-height: auto;
    padding: var(--space-6);
  }
  .about-widget-card h3 {
    margin-top: 0;
  }
  .about-image-container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  .about-content-section,
  .about-content-text {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  .mission-values-section {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  .mission-values-section .card {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* Map Section Styling — transparent so it matches page background, no ridge */
.map-section {
  padding: var(--space-8) 0 0 0 !important;
  background-color: transparent;
  margin-top: 0;
  margin-bottom: 0 !important;
  position: relative;
}

.map-section::before {
  content: none;
}

.map-section > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .map-section > .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  .map-section__wrapper {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

.map-section__header {
  margin-bottom: var(--space-8);
}

.map-section__header h2 {
  color: var(--color-heading);
  margin-bottom: var(--space-4);
}

.map-section__header p {
  color: var(--color-text-dark);
  font-size: var(--font-size-lg);
}

.map-section__wrapper {
  max-width: 1200px;
  margin: 0 auto;
  background-color: transparent;
  padding: var(--space-6);
  padding-bottom: var(--space-6);
  overflow: hidden;
  position: relative;
  margin-bottom: 0;
}

.map-section__wrapper::before,
.map-section__wrapper::after {
  content: none;
}

.map-section__wrapper .map-container {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-border-subtle);
}

@media (max-width: 1023px) {
  .about-featured-image {
    aspect-ratio: 4 / 3;
  }
  
  .about-content-text {
    padding: 0 var(--space-4);
  }
  
  .map-section {
    padding: var(--space-16) 0;
    margin-top: var(--space-6);
  }
  
  .map-section__wrapper {
    padding: var(--space-4);
    background-color: transparent;
  }
}

/* Section Spacing */
section {
  padding: var(--space-16) 0;
  background-color: var(--color-light-beige);
  position: relative;
}

section:first-of-type {
  padding-top: var(--space-24);
}

section:last-of-type {
  padding-bottom: 0;
}

/* Section-to-section blending - edge-only gradients, not covering content */
section:not(:first-of-type) {
  /* Top edge blend using box-shadow inset */
  box-shadow: inset 0 60px 30px -30px rgba(255, 252, 248, 0.3);
}

section:not(:last-of-type) {
  /* Bottom edge blend using box-shadow inset */
  box-shadow: inset 0 -60px 30px -30px rgba(255, 252, 248, 0.3);
}

/* For sections with both top and bottom, combine shadows */
section:not(:first-of-type):not(:last-of-type) {
  box-shadow: 
    inset 0 60px 30px -30px rgba(255, 252, 248, 0.3),
    inset 0 -60px 30px -30px rgba(255, 252, 248, 0.3);
}

/* Section-specific edge blending variations (edge-only, not overlays) */
.target-audience-section:not(:first-of-type) {
  box-shadow: inset 0 80px 40px -40px rgba(255, 252, 248, 0.35);
}

.story-section:not(:first-of-type) {
  box-shadow: inset 0 90px 45px -45px rgba(255, 252, 248, 0.4);
}

.mid-page-cta-section:not(:first-of-type) {
  box-shadow: inset 0 60px 30px -30px rgba(255, 252, 248, 0.25);
}

/* Hero section uses dark background */
.hero {
  background-color: var(--color-bg-dark);
  position: relative;
  overflow: hidden;
}

/* Soft blend from hero to light sections - edge-only */
.hero:not(:last-of-type) {
  box-shadow: inset 0 -100px 50px -50px rgba(255, 252, 248, 0.25);
}

/* Map section can have different background */
.map-section {
  background-color: transparent;
}

/* Remove bottom padding from map section when it's the last section */
.map-section:last-of-type {
  padding-bottom: 0;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

.hidden {
  display: none;
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   Button Components
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn:focus {
  outline: 2px solid var(--color-primary-leaf-green);
  outline-offset: 2px;
}

.btn--primary {
  background-color: var(--color-dark-leaf-green);
  color: var(--color-text-light);
  border-color: var(--color-dark-leaf-green);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

/* Hero primary: soft pill button, muted brand fill, sentence case */
.hero .btn--primary,
.hero__actions .btn--primary {
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--radius-pill);
  border: none;
  background-color: rgba(26, 92, 58, 0.9);
  color: var(--color-text-light);
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: background-color var(--transition-fast);
}

.hero .btn--primary:hover,
.hero__actions .btn--primary:hover {
  background-color: rgba(13, 74, 46, 0.95);
  color: var(--color-text-light);
  text-decoration: none;
  transform: none;
}

.btn--primary:hover {
  background-color: var(--color-primary-leaf-green);
  border-color: var(--color-primary-leaf-green);
  color: var(--color-text-light);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.btn--secondary {
  background-color: var(--color-accent-cobalt-blue);
  color: var(--color-text-light);
  border-color: var(--color-accent-cobalt-blue);
  box-shadow: var(--shadow-sm);
}

.btn--secondary:hover {
  background-color: var(--color-accent-cobalt-blue-light);
  border-color: var(--color-accent-cobalt-blue-light);
  color: var(--color-text-light);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.btn--outline {
  background-color: transparent;
  color: var(--color-dark-leaf-green);
  border-color: var(--color-dark-leaf-green);
}

/* Hero secondary: text-style "Learn More" — light, editorial, no fill */
.hero .btn--outline,
.hero__actions .btn--outline {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.25;
  text-transform: none;
  background: none;
  border: none;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.hero .btn--outline:hover,
.hero__actions .btn--outline:hover {
  color: var(--color-text-light);
  border-bottom-color: rgba(255, 255, 255, 0.85);
  opacity: 1;
  text-decoration: none;
  background: none;
  transform: none;
}

.btn--outline:hover {
  background-color: var(--color-dark-leaf-green);
  color: var(--color-text-light);
  border-color: var(--color-dark-leaf-green);
  text-decoration: none;
}

.btn--subtle {
  background-color: var(--color-light-beige);
  color: var(--color-text-dark);
  border-color: var(--color-neutral-tan-brown);
}

.btn--subtle:hover {
  background-color: var(--color-light-beige-dark);
  color: var(--color-text-dark);
  border-color: var(--color-neutral-tan-brown-light);
  text-decoration: none;
}

/* ==========================================================================
   Card Component
   ========================================================================== */

.card {
  background-color: var(--color-bg-layer-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--color-soft-tan);
}

.card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.card__title {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-xl);
  font-weight: 500;
  color: var(--color-dark-leaf-green);
  margin-bottom: var(--space-4);
  line-height: 1.4;
}

.card__content {
  color: var(--color-text-dark);
  margin-bottom: var(--space-4);
  line-height: 1.8;
  font-size: var(--font-size-base);
}

.card__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
  background:
    radial-gradient(circle at 30% 50%, rgba(13, 74, 46, 0.3) 0%, rgba(10, 58, 36, 0.95) 50%), 
    linear-gradient(180deg, rgba(10, 58, 36, 0.9) 0%, rgba(13, 74, 46, 0.85) 50%, rgba(10, 58, 36, 0.9) 100%),
    url('https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=1920&q=80') center/cover no-repeat;
  padding: var(--space-12) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: var(--color-dark-leaf-green);
  min-height: 42vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Extra top spacing from nav to hero title on home */
.home .hero {
  padding-top: calc(var(--space-12) + var(--space-6));
}

.hero--with-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Slightly stronger overlay: lower image visibility a little more for readability */
.hero--with-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.48) 0%,
    rgba(0, 0, 0, 0.22) 35%,
    rgba(0, 0, 0, 0.16) 50%,
    rgba(0, 0, 0, 0.22) 65%,
    rgba(0, 0, 0, 0.48) 100%
  );
  pointer-events: none;
}

.hero--with-bg .container {
  position: relative;
  z-index: 1;
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.hero:not(.hero--with-bg) .container {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  background-color: rgba(10, 58, 36, 0.85);
  border-radius: var(--radius-md);
  position: relative;
}

.hero .container {
  position: relative;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Title: large, not overly bold, calm */
.hero__title {
  font-family: var(--font-family-serif);
  font-size: clamp(3.25rem, 2.75rem + 3vw, 5.5rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.98);
  margin-bottom: var(--space-6);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  text-align: center;
}

/* Subtitle / quote: smaller, italic, lighter, directly under title */
.hero__subtitle {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xl);
  font-weight: 300;
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: var(--space-12);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

/* Single centered CTA (Learn More), green pill style */
.hero__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-6);
  margin-bottom: 0;
}

/* ==========================================================================
   New Layout Sections
   ========================================================================== */

.target-audience-section {
  padding: var(--space-16) 0;
  background-color: var(--color-light-beige);
  position: relative;
  overflow: hidden;
}

.target-audience-section .container {
  position: relative;
  z-index: 2;
}

.target-audience-section.section--with-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Edge-based blending: semi-transparent background on container, not overlay */
.target-audience-section.section--with-bg .container {
  background-color: rgba(242, 237, 230, 0.85);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  border-radius: var(--radius-md);
  position: relative;
  /* Edge gradients for blending - only at edges */
  box-shadow: 
    inset 0 50px 30px -30px rgba(242, 237, 230, 0.5),
    inset 0 -50px 30px -30px rgba(242, 237, 230, 0.5);
}

.target-audience-section h2 {
  color: var(--color-heading);
  margin-bottom: var(--space-8);
}

.target-audience-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.target-audience-item {
  padding: var(--space-4) 0;
  color: var(--color-text-dark);
  font-size: var(--font-size-lg);
  line-height: 1.8;
  font-weight: 400;
}

.story-section {
  padding: var(--space-16) 0;
  background-color: var(--color-light-beige);
  position: relative;
  overflow: hidden;
}

@media (max-width: 767px) {
  .story-section .container,
  .story-section .story-content {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }
  .story-section.section--with-bg .container {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }
}

/* Extra space between about content (Mission & Values) and story section */
.container + .story-section {
  margin-top: var(--space-24);
}

/* When there is no story section, map follows the about container — add top spacing */
.container + .map-section {
  margin-top: var(--space-12);
}

.story-section.section--with-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Edge-based blending: semi-transparent background on container, not overlay */
.story-section.section--with-bg .container {
  background-color: rgba(242, 237, 230, 0.85);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-xl);
  position: relative;
  /* Edge gradients for blending - only at edges */
  box-shadow: 
    inset 0 50px 30px -30px rgba(242, 237, 230, 0.5),
    inset 0 -50px 30px -30px rgba(242, 237, 230, 0.5);
}

.story-section h2 {
  color: var(--color-heading);
  margin-bottom: var(--space-8);
}

.story-content {
  color: var(--color-text-dark);
  font-size: var(--font-size-lg);
  line-height: 1.9;
  max-width: 800px;
  margin: 0 auto;
}

.story-content p {
  margin-bottom: var(--space-4);
  color: var(--color-text-dark);
}

.mid-page-cta-section {
  padding: var(--space-16) 0;
  background-color: var(--color-light-beige);
  position: relative;
  overflow: hidden;
}

.mid-page-cta-section.section--with-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Edge-based blending: semi-transparent background on container, not overlay */
.mid-page-cta-section.section--with-bg .container {
  background-color: rgba(10, 58, 36, 0.7);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  border-radius: var(--radius-md);
  position: relative;
  /* Edge gradients for blending - only at edges */
  box-shadow: 
    inset 0 50px 30px -30px rgba(10, 58, 36, 0.4),
    inset 0 -50px 30px -30px rgba(10, 58, 36, 0.4);
}

.services-section {
  padding: var(--space-16) 0 var(--space-24) 0;
  background-color: transparent;
  position: relative;
  overflow: hidden;
}

.services-section .container {
  max-width: 1400px;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
}

.services-section.section--with-bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.services-section.section--with-bg > .container {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  position: relative;
}

.services-section__header h2,
.services-section h2 {
  color: var(--color-heading);
  margin-bottom: var(--space-4);
}

.services-section p {
  color: var(--color-text-dark);
  font-size: var(--font-size-lg);
  line-height: 1.8;
}

/* Stacked service panels: image + content box; full curve, no edge gap */
.services-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  margin-bottom: var(--space-12);
  max-width: 100%;
  min-width: 0;
  background-color: var(--color-bg-base);
  border-radius: 1rem;
  overflow: hidden;
}

/* Side-by-side only: small gap so image and text don't cut into each other at ~1300px */
@media (min-width: 1201px) {
  .services-panel {
    gap: 6px;
  }
}

.services-panel:last-child {
  margin-bottom: 0;
}

.services-panel__media {
  position: relative;
  min-height: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.services-panel__media .services-panel__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.services-panel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.services-panel__content-wrap {
  display: flex;
  align-items: stretch;
  padding: 0;
  min-width: 0;
}

.services-panel--reverse .services-panel__content-wrap {
  padding: 0;
}

/* Service block content box: fills to edge, no gap; inner curve matches panel */
.services-panel__content-box {
  background-color: #DDD2C4;
  padding: var(--space-8) var(--space-6);
  border-radius: 0 1rem 1rem 0;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-wrap: break-word;
}

.services-panel--reverse .services-panel__content-box {
  border-radius: 1rem 0 0 1rem;
}

.services-panel__title {
  font-family: var(--font-family-serif);
  font-size: clamp(1.5rem, 1.35rem + 0.5vw, 2rem);
  color: var(--color-heading);
  margin: 0 0 var(--space-6) 0;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.services-panel__body {
  color: var(--color-text-dark);
  font-size: var(--font-size-lg);
  line-height: 1.8;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.services-panel__body p {
  margin: 0 0 var(--space-4) 0;
  color: var(--color-text-dark);
}

.services-panel__body p:last-child {
  margin-bottom: 0;
}

/* Section 2: image on right, content on left */
.services-panel--reverse {
  direction: rtl;
}

.services-panel--reverse .services-panel__media,
.services-panel--reverse .services-panel__content-wrap {
  direction: ltr;
}

/* Tablet/mid-width (750px–1200px): stack image on top, content below so text isn't truncated or overlaying */
@media (max-width: 1200px) {
  .services-panel {
    grid-template-columns: 1fr;
    direction: ltr;
    margin-bottom: var(--space-12);
    width: 100%;
    max-width: 100%;
  }

  .services-panel--reverse {
    direction: ltr;
  }

  .services-panel__media {
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  .services-panel__content-wrap {
    padding: 0;
    width: 100%;
  }

  .services-panel--reverse .services-panel__content-wrap {
    padding: 0;
  }

  .services-panel__content-box {
    width: 100%;
    border-radius: 0 0 1rem 1rem;
    padding: var(--space-6) var(--space-6);
  }

  .services-panel--reverse .services-panel__content-box {
    border-radius: 0 0 1rem 1rem;
  }
}

/* Mobile: same stacked layout, slightly smaller type and padding */
@media (max-width: 767px) {
  .services-panel__media {
    aspect-ratio: 1 / 1;
  }

  .services-panel__content-box {
    padding: var(--space-6) var(--space-4);
  }

  .services-panel__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-4);
  }

  .services-panel__body {
    font-size: var(--font-size-base);
  }
}

.services-cta-section {
  padding: var(--space-12) var(--space-4) 0;
  margin-top: var(--space-4);
}

.services-cta-section__text {
  font-size: var(--font-size-lg);
  color: var(--color-text-dark);
  margin: 0;
  line-height: 1.7;
}

.services-cta-section__text a {
  color: var(--color-dark-leaf-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: none;
}

.services-cta-section__text a:hover,
.services-cta-section__text a:focus {
  color: var(--color-primary-leaf-green);
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-warm-beige);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-2) 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Grid: logo (left), menu (center), CTA (right). Equal side columns so menu is centered on bar. */
.nav__container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-8);
  min-height: 52px;
  padding: 0 var(--space-2);
}

.nav__logo-wrapper {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  margin-right: var(--space-2);
}

.nav__toggle {
  grid-column: 2;
}

.nav__menu {
  grid-column: 2;
  justify-self: center;
}

.nav__cta-wrapper {
  grid-column: 3;
  display: flex;
  justify-content: flex-end;
}

/* Nav logo: text only (no circle/image system) */
.nav__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
  transition: opacity var(--transition-fast);
}

.nav__brand:hover {
  text-decoration: none;
  opacity: 0.88;
}

.nav__brand:focus {
  outline: 2px solid var(--color-primary-leaf-green);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.nav__brand--text {
  width: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.nav__brand--text .nav__logo-text {
  font-family: var(--font-family-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-dark-leaf-green);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Navigation Toggle Button (Mobile) */
.nav__toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  position: relative;
  width: 32px;
  height: 32px;
  z-index: 1001;
  margin-left: auto;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.nav__toggle:focus {
  outline: 2px solid var(--color-green-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.nav__toggle-icon {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-dark-leaf-green);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all var(--transition-fast);
}

.nav__toggle-icon::before,
.nav__toggle-icon::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-dark-leaf-green);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all var(--transition-fast);
}

.nav__toggle-icon::before {
  top: -8px;
}

.nav__toggle-icon::after {
  top: 8px;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-icon {
  background-color: transparent;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-icon::before {
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-icon::after {
  top: 0;
  transform: translateX(-50%) rotate(-45deg);
}

/* Navigation Menu - Centered on bar */
.nav__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-light-beige);
}

.nav__menu-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.nav__item {
  margin: 0;
}

.nav__link {
  font-weight: 500;
  color: var(--color-text-dark);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
  display: block;
  position: relative;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  /* Prevents hollow/faded O's and rounded letters in some browsers */
  text-shadow: 0 0 0.35px currentColor;
}

.nav__link:hover,
.nav__link:focus {
  color: var(--color-text-dark);
  text-decoration: none;
  outline: none;
}

.nav__link--current {
  color: var(--color-text-dark);
  font-weight: 500;
}

.nav__link:focus {
  outline: 2px solid var(--color-primary-leaf-green);
  outline-offset: 2px;
}

/* Schedule button on the right */
.nav__cta-wrapper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Schedule button: same softer green as Learn More, uppercase */
.nav__cta-button {
  background-color: var(--color-soft-leaf-green);
  color: var(--color-text-light);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  line-height: 1.2;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

.nav__cta-button:hover,
.nav__cta-button:focus {
  background-color: var(--color-primary-leaf-green);
  color: var(--color-text-light);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(26, 92, 58, 0.4);
}

.nav__cta-button:focus {
  outline: 2px solid var(--color-accent-cobalt-blue);
  outline-offset: 2px;
}

.nav__cta-button:hover {
  box-shadow: 0 2px 8px rgba(10, 58, 36, 0.4), 0 0 0 2px var(--color-accent-cobalt-blue-muted);
}

.nav__cta-button--disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.85;
}

/* Mobile Navigation Close Button */
.nav__close {
  display: none;
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  color: var(--color-text-primary);
  cursor: pointer;
  padding: var(--space-2);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  z-index: 1001;
}

.nav__close:hover,
.nav__close:focus {
  background-color: rgba(201, 169, 106, 0.1);
  color: var(--color-gold-base);
  outline: 2px solid var(--color-gold-base);
  outline-offset: 2px;
}

/* Tablet and below: use hamburger nav so layout doesn't break (e.g. 800px) */
@media (max-width: 991px) {
  .nav__toggle {
    display: flex;
  }
  
  .nav {
    padding: var(--space-2) 0;
  }
  
  .nav .container {
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
  }
  
  .nav__container {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 48px;
  }
  
  .nav__logo-wrapper {
    flex-shrink: 0;
    order: 1; /* Logo left */
    margin-right: 0;
    justify-content: flex-start;
  }
  
  .nav__toggle {
    display: flex !important;
    position: relative;
    z-index: 1002;
    flex-shrink: 0;
    order: 2; /* Hamburger next to Schedule on the right */
    width: 32px;
    min-width: 32px;
    margin: 0;
    margin-left: auto; /* Push hamburger + Schedule to the right, next to each other */
  }
  
  .nav__cta-wrapper {
    flex-shrink: 0;
    order: 3;
  }
  
  .nav__cta-button {
    padding: var(--space-1) var(--space-3);
    font-size: 0.75rem;
  }
  
  .nav__brand--text .nav__logo-text {
    font-size: 1.0625rem;
  }
  
  .nav__menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 320px;
    height: 100vh;
    background: var(--color-light-beige);
    border-left: 1px solid var(--color-border-base);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    flex-direction: column;
    padding: var(--space-20) var(--space-6) var(--space-6);
    gap: var(--space-2);
    overflow-y: auto;
    transition: right var(--transition-normal);
    z-index: 1000;
  }
  
  .nav__menu[aria-hidden="false"] {
    right: 0;
  }
  
  .nav__menu-list {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .nav__link--current {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  
  .nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .nav__menu-list {
    width: 100%;
    margin-top: var(--space-8);
  }
  
  .nav__link {
    padding: var(--space-4);
    width: 100%;
    border-radius: var(--radius-md);
    text-align: left;
  }
  
  /* Overlay when menu is open */
  body.nav-open::before {
    content: none;
  }
  
  /* Hide toggle when menu is open */
  body.nav-open .nav__toggle {
    opacity: 0;
    pointer-events: none;
  }
  
  .main {
    padding-top: 48px;
  }
}

/* ==========================================================================
   Footer — compact, grouped, centered (theme lock: Dragonfly colors/fonts)
   ========================================================================== */

.footer {
  background-color: var(--color-bg-base);
  color: var(--color-text-dark);
  padding: var(--space-6) 0 var(--space-6);
  margin-top: 0;
  border-top: 1px solid var(--color-border-subtle);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}

/* Centered container: max-width 900px, moderate padding */
.footer .container.footer__container-inner {
  max-width: 900px;
  margin: 0 auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
  text-align: center;
}

.map-section + .footer {
  margin-top: 0 !important;
  padding-top: var(--space-6);
}

.footer__disclaimer {
  margin-bottom: var(--space-3);
  text-align: center;
}

.footer__disclaimer-text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* Tagline — slightly larger than contact, medium space below */
.footer__tagline {
  margin: 0 0 var(--space-4) 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-lg);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-dark);
}

/* Contact block — tight spacing between lines, medium space below */
.footer__contact-block {
  margin: 0 0 var(--space-4) 0;
}

.footer__contact-row {
  margin: 0 0 var(--space-1) 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-lg);
  line-height: 1.5;
  color: var(--color-text-dark);
}

.footer__contact-row:last-child {
  margin-bottom: 0;
}

.footer__contact-label {
  font-weight: 600;
  margin-right: var(--space-1);
}

.footer__contact-value {
  color: var(--color-text-dark);
}

/* Social icons — small, horizontal row, even spacing, medium space below */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4) 0;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-light-beige-dark);
  color: var(--color-text-dark);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.footer__social-link:hover,
.footer__social-link:focus {
  background-color: var(--color-primary-leaf-green);
  color: var(--color-text-light);
  border-color: var(--color-primary-leaf-green);
  text-decoration: none;
  outline: none;
}

.footer__social-link:focus {
  outline: 2px solid var(--color-primary-leaf-green);
  outline-offset: 2px;
}

.footer__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.footer__social-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Thin divider above copyright — subtle, within container, small space below */
.footer__divider {
  height: 1px;
  width: 100%;
  background-color: var(--color-border-subtle);
  margin: 0 0 var(--space-3) 0;
  border: 0;
}

.footer__legal {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.footer__legal-link {
  font-size: var(--font-size-sm);
}

/* Copyright — smaller and lighter */
.footer__copyright {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.4;
  font-family: var(--font-family-body);
}

/* Global footer link style (mailto, tel, legal) */
.footer__link {
  color: var(--color-text-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__link:hover,
.footer__link:focus {
  color: var(--color-primary-leaf-green);
  text-decoration: none;
  outline: none;
}

.footer__link:focus {
  outline: 2px solid var(--color-primary-leaf-green);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Legacy/utility classes kept for any other templates */
.footer__contact {
  font-style: normal;
  margin: 0;
  padding: 0;
}

.footer__contact-item {
  margin-bottom: var(--space-3);
  margin-top: 0;
  padding: 0;
  text-align: left;
  display: block;
  line-height: 1.6;
}

.footer__contact-item:last-child {
  margin-bottom: 0;
}

.footer__contact-item a {
  display: inline-block;
  line-height: 1.6;
}

.footer__office-hours {
  margin: 0;
}

.footer__office-hours-row {
  margin: 0 0 var(--space-2) 0;
  line-height: 1.6;
  color: var(--color-text-dark);
}

.footer__office-hours-row:last-child {
  margin-bottom: 0;
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__links li {
  margin-bottom: var(--space-2);
}

.footer__links a {
  color: var(--color-text-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
  display: block;
  padding: var(--space-2) 0;
}

.footer__links a:hover,
.footer__links a:focus {
  color: var(--color-primary-leaf-green);
  text-decoration: none;
  outline: none;
}

/* Mobile: compact footer, no large empty space at bottom */
@media (max-width: 768px) {
  .footer {
    padding: var(--space-4) 0 var(--space-4);
  }

  .footer .container.footer__container-inner {
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
  }

  .footer__tagline {
    margin-bottom: var(--space-3);
  }

  .footer__contact-block {
    margin-bottom: var(--space-3);
  }

  .footer__social {
    margin-bottom: var(--space-3);
  }

  .footer__divider {
    margin-bottom: var(--space-3);
  }
}

/* ==========================================================================
   Gallery Grid
   ========================================================================== */

.gallery-wrapper {
  width: 100%;
  padding: var(--space-8) 0;
  display: block;
  clear: both;
}

/* Gallery page: desktop = grid only, mobile = slideshow only */
.page-template-page-gallery .gallery-wrapper .gallery-slideshow-wrapper {
  display: none;
}

@media (max-width: 767px) {
  .page-template-page-gallery .gallery-wrapper .gallery-slideshow-wrapper {
    display: block;
  }
  .page-template-page-gallery .gallery-wrapper .gallery-grid {
    display: none;
  }
}

/* Gallery page: spacing between action buttons */
.gallery-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
}

@media (max-width: 767px) {
  .gallery-wrapper {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  .gallery-page__actions {
    gap: var(--space-6);
  }
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 26, 18, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.gallery-item:hover .gallery-item__overlay {
  opacity: 1;
}

.gallery-item__icon {
  color: var(--color-gold-base);
  font-size: var(--font-size-2xl);
}

/* Gallery: hide caption in grid; show only when image is opened (lightbox) */
.gallery-item__caption {
  display: none;
}

/* ==========================================================================
   Map Container - Leaflet Maps
   ========================================================================== */

.map-container,
.leaflet-map {
  width: 100%;
  height: 420px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  background-color: var(--color-warm-beige);
  position: relative;
  border: 1px solid var(--color-border-subtle);
}

.map-container::before,
.leaflet-map::before {
  content: none;
}

.map-container.loading,
.leaflet-map.map-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-neutral-600);
  font-size: var(--font-size-base);
}

.map-container.map-error,
.leaflet-map.map-error {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dc2626;
  font-size: var(--font-size-base);
}

.map-container .leaflet-container,
.leaflet-map .leaflet-container {
  height: 100%;
  width: 100%;
  border-radius: 14px;
  z-index: 1;
  position: relative;
}

/* Responsive map heights */
@media (min-width: 768px) {
  .map-container,
  .leaflet-map {
    height: 520px;
  }
}

@media (max-width: 767px) {
  .map-container,
  .leaflet-map {
    height: 400px;
    border-radius: 12px;
  }
  
  .map-container .leaflet-container,
  .leaflet-map .leaflet-container {
    border-radius: 12px;
  }
}

/* Map popup styling - single box: only the wrapper is the visible box */
.earthy-popup .leaflet-popup-content-wrapper,
.leaflet-popup-content-wrapper {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  background-color: var(--color-light-beige);
  border: 1px solid var(--color-border-base);
}

/* Inner content: no extra box, no margin (padding is on wrapper) */
.leaflet-popup-content {
  margin: 0 !important;
  min-width: 0;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text-dark);
  background: none;
  border: none;
  box-shadow: none;
}

.map-popup {
  position: relative;
  overflow: hidden;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

.map-popup--with-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 150px;
  border-radius: var(--radius-sm);
}

.map-popup--with-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(242, 237, 230, 0.85);
  z-index: 1;
  border-radius: var(--radius-sm);
}

.map-popup--with-bg > * {
  position: relative;
  z-index: 2;
}

.map-popup h3 {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-dark-leaf-green);
  font-family: var(--font-family-serif);
}

.map-popup p {
  margin: 0 0 var(--space-3) 0;
  color: var(--color-text-dark);
  font-family: var(--font-family-body);
}

.map-popup p.address {
  margin-bottom: 0;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  font-weight: 700;
  color: var(--color-text-dark);
  font-size: var(--font-size-base);
}

.map-popup-actions {
  margin: var(--space-3) 0 0 0 !important;
  padding-top: var(--space-3) !important;
  border-top: 1px solid var(--color-border-subtle);
}

.map-popup-directions {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary-leaf-green);
  text-decoration: none;
}

.map-popup-directions:hover,
.map-popup-directions:focus {
  text-decoration: underline;
  color: var(--color-dark-leaf-green);
}

.leaflet-popup-tip {
  background-color: var(--color-light-beige);
  border: 1px solid var(--color-border-base);
}

/* Dragonfly Medicine theme marker styling */
.earthy-marker {
  filter: drop-shadow(0 2px 4px rgba(94, 76, 58, 0.3));
}

/* Map Pin Icon Styles */
.earthy-map-pin {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.earthy-map-pin:hover {
  transform: scale(1.2);
  z-index: 1000;
}

.earthy-map-pin svg {
  filter: drop-shadow(0 4px 8px rgba(13, 26, 18, 0.4));
  transition: filter var(--transition-fast);
}

.earthy-map-pin:hover svg {
  filter: drop-shadow(0 6px 12px rgba(13, 26, 18, 0.5));
}

/* Leaflet control styling */
.leaflet-control-zoom {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-neutral-300);
}

.leaflet-control-zoom a {
  background-color: var(--color-neutral-50);
  color: var(--color-neutral-800);
  border-bottom: 1px solid var(--color-neutral-300);
  transition: background-color var(--transition-fast);
}

.leaflet-control-zoom a:hover {
  background-color: rgba(201, 169, 106, 0.15);
  color: var(--color-gold-base);
}

.leaflet-control-zoom a.leaflet-disabled {
  background-color: var(--color-neutral-50);
  color: var(--color-neutral-600);
  cursor: not-allowed;
}

.leaflet-control-attribution {
  margin: 0 !important;
  padding: 2px 6px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  background-color: rgba(255, 255, 255, 0.85) !important;
  color: var(--color-text-muted) !important;
  border-radius: 2px;
  max-width: 100%;
}

.leaflet-control-attribution a {
  color: var(--color-secondary-wedgewood) !important;
  text-decoration: none;
  font-size: 10px !important;
}

.leaflet-control-attribution a:hover {
  text-decoration: underline;
}

.leaflet-control-attribution a {
  color: var(--color-gold-base);
  text-decoration: underline;
}

/* Hide flag icons in attribution */
.leaflet-control-attribution img[src*="flag"],
.leaflet-control-attribution img[alt*="flag"],
.leaflet-control-attribution img[alt*="Flag"],
.leaflet-control-attribution .flag,
.leaflet-control-attribution img[width="16"][height="11"] {
  display: none !important;
}

/* Focus states for accessibility */
.map-container:focus-within,
.leaflet-map:focus-within {
  outline: 2px solid var(--color-gold-base);
  outline-offset: 2px;
}

.leaflet-control a:focus {
  outline: 2px solid var(--color-gold-base);
  outline-offset: 2px;
}

/* ==========================================================================
   Form Styles
   ========================================================================== */

.form-group {
  margin-bottom: var(--space-6);
  position: relative;
}

.form-group.is-focused .form-label {
  color: var(--color-gold-base);
}

.form-group.has-error .form-input,
.form-group.has-error .form-textarea {
  border-color: #dc2626;
  background-color: rgba(220, 38, 38, 0.08);
}

.form-group.has-error .form-label {
  color: #dc2626;
}

.form-group.has-success .form-input,
.form-group.has-success .form-textarea {
  border-color: var(--color-green-500);
  background-color: rgba(63, 111, 79, 0.12);
}

.form-label {
  display: block;
  font-weight: 500;
  color: var(--color-neutral-600);
  margin-bottom: var(--space-2);
  transition: color var(--transition-fast);
}

.form-label .required {
  color: #dc2626;
  margin-left: 2px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-3);
  border: 2px solid var(--color-dark-leaf-green);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-family: var(--font-family-system);
  background-color: #FFFFFF;
  color: var(--color-text-dark);
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary-leaf-green);
  box-shadow: 0 0 0 3px rgba(13, 74, 46, 0.2);
  transform: scale(1.01);
  background-color: #FFFFFF;
}

.form-label {
  color: var(--color-dark-leaf-green);
  font-weight: 600;
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-base);
}

.required {
  color: #dc2626;
  font-weight: 600;
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--font-family-system);
}

.form-error {
  display: block;
  color: #dc2626;
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
  min-height: 20px;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.form-group.has-error .form-error {
  opacity: 1;
  transform: translateY(0);
}

.form-message {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
  display: none;
  animation: slideDown 0.3s ease-out;
}

.form-message:not(:empty) {
  display: block;
}

.form-success {
  background-color: rgba(63, 111, 79, 0.15);
  color: var(--color-green-500);
  border: 1px solid var(--color-green-500);
}

.form-error-message {
  background-color: rgba(90, 17, 17, 0.4);
  color: #fbd5d5;
  border: 1px solid rgba(220, 38, 38, 0.5);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-note {
  background-color: var(--color-neutral-50);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-green-500);
}

.form-note p {
  margin: 0;
  color: var(--color-neutral-600);
}

/* Contact Form 7: theme styling when used in contact form wrapper */
.contact-form-wrapper .wpcf7-form label {
  display: block;
  font-weight: 600;
  color: var(--color-dark-leaf-green);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-base);
}
.contact-form-wrapper .wpcf7-form label .wpcf7-form-control-wrap {
  display: block;
  margin-top: var(--space-1);
}
.contact-form-wrapper .wpcf7-form input[type="text"],
.contact-form-wrapper .wpcf7-form input[type="email"],
.contact-form-wrapper .wpcf7-form input[type="tel"],
.contact-form-wrapper .wpcf7-form input[type="url"],
.contact-form-wrapper .wpcf7-form textarea {
  width: 100%;
  padding: var(--space-3);
  border: 2px solid var(--color-dark-leaf-green);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-family: var(--font-family-system);
  background-color: #fff;
  color: var(--color-text-dark);
  transition: all var(--transition-fast);
  box-sizing: border-box;
}
.contact-form-wrapper .wpcf7-form input:focus,
.contact-form-wrapper .wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--color-primary-leaf-green);
  box-shadow: 0 0 0 3px rgba(13, 74, 46, 0.2);
}
.contact-form-wrapper .wpcf7-form textarea {
  min-height: 140px;
  resize: vertical;
}
.contact-form-wrapper .wpcf7-form .wpcf7-submit {
  background-color: var(--color-dark-leaf-green);
  color: var(--color-text-light);
  padding: var(--space-2) var(--space-6);
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.contact-form-wrapper .wpcf7-form .wpcf7-submit:hover,
.contact-form-wrapper .wpcf7-form .wpcf7-submit:focus {
  background-color: var(--color-primary-leaf-green);
  outline: 2px solid var(--color-primary-leaf-green);
  outline-offset: 2px;
}
.contact-form-wrapper .wpcf7-not-valid-tip {
  color: #dc2626;
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
}
.contact-form-wrapper .wpcf7-response-output {
  margin: var(--space-4) 0 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.contact-form-wrapper .wpcf7-mail-sent-ok {
  border: 1px solid var(--color-primary-leaf-green);
  background-color: rgba(13, 74, 46, 0.1);
  color: var(--color-dark-leaf-green);
}
.contact-form-wrapper .wpcf7-validation-errors,
.contact-form-wrapper .wpcf7-mail-sent-ng {
  border: 1px solid rgba(220, 38, 38, 0.5);
  background-color: rgba(220, 38, 38, 0.08);
  color: var(--color-text-dark);
}

/* Button Loading State */
.btn.is-loading {
  position: relative;
  pointer-events: none;
}

.btn-loader {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid rgba(244, 240, 232, 0.3);
  border-top-color: var(--color-text-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.btn-text {
  transition: opacity var(--transition-fast);
}

/* ==========================================================================
   Animations & Transitions
   ========================================================================== */

/* Respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Fade-in animation for sections */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade-in animation for images */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Pulse animation for loading states */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Scroll reveal classes - Slower and smoother animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Image loading states */
img {
  transition: opacity var(--transition-normal);
}

img.fade-in {
  opacity: 0;
}

img.loaded,
img[loading="lazy"] {
  opacity: 1;
}

/* Enhanced hover effects */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(201, 169, 106, 0.2);
  transform: translate(-50%, -50%);
  transition: width var(--transition-normal), height var(--transition-normal);
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn--primary:hover,
.btn--secondary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--outline:hover {
  transform: translateY(-2px);
}

/* Card hover enhancements */
.card {
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left var(--transition-slow);
}

.card:hover::before {
  left: 100%;
}

.card:hover {
  transform: translateY(-4px);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow);
}

/* Link hover effects - background color instead of underline */
a:not(.btn):not(.nav__link):not(.footer__link):not(.footer__links a):hover,
a:not(.btn):not(.nav__link):not(.footer__link):not(.footer__links a):focus {
  background-color: var(--color-accent-cobalt-blue-muted);
  color: var(--color-accent-cobalt-blue);
}

/* Form input focus animations */
.form-input:focus,
.form-textarea:focus {
  transform: scale(1.01);
  box-shadow: 0 0 0 3px rgba(94, 156, 106, 0.1);
}

/* Gallery lightbox: caption text only, no green background */
.lightbox-caption {
  background: none !important;
  color: rgba(255, 255, 255, 0.95);
  padding: var(--space-2) 0 0 0 !important;
}

/* ==========================================================================
   Testimonials Section
   ========================================================================== */

.testimonials-section {
  position: relative;
}

.testimonials-item {
  padding: var(--space-24) 0;
  position: relative;
}

/* Green background sections (first two testimonials) - Muted olive-green */
.testimonials-section--green {
  background-color: rgba(85, 100, 90, 0.25); /* Muted olive-green */
  background: linear-gradient(
    to bottom,
    rgba(85, 100, 90, 0.2) 0%,
    rgba(85, 100, 90, 0.3) 50%,
    rgba(85, 100, 90, 0.2) 100%
  );
}

/* Beige background section (last testimonial) */
.testimonials-section--beige {
  background-color: var(--color-warm-beige);
}

/* Smooth blending between testimonial items */
.testimonials-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 252, 248, 0.3) 50%,
    rgba(255, 252, 248, 0.6) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.testimonials-section--beige::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(
    to bottom,
    rgba(242, 237, 230, 0.6) 0%,
    rgba(242, 237, 230, 0.3) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.testimonials-item__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

.testimonials-item__content--has-image {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .testimonials-item__content--has-image.testimonials-item__content--left {
    grid-template-columns: 0.45fr 0.55fr;
  }
  
  .testimonials-item__content--has-image.testimonials-item__content--right {
    grid-template-columns: 0.55fr 0.45fr;
  }
}

/* Image styling */
.testimonials-item__image-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.testimonials-item__content--left .testimonials-item__image-wrapper {
  order: 1;
}

.testimonials-item__content--right .testimonials-item__image-wrapper {
  order: 2;
}

.testimonials-item__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: block;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

/* Decorative elements */
.testimonials-decorative {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  opacity: 0.4;
}

.testimonials-decorative--leaf {
  bottom: -20px;
  left: -30px;
  width: 120px;
  height: 120px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 20 Q30 40 20 60 Q30 80 50 90 Q70 80 80 60 Q70 40 50 20 M50 30 Q35 45 28 60 Q35 75 50 80 Q65 75 72 60 Q65 45 50 30" fill="none" stroke="%231a5c3a" stroke-width="1.5" stroke-linecap="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(-15deg);
}

.testimonials-decorative--stars {
  top: -15px;
  right: -20px;
  width: 100px;
  height: 100px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 10 L55 35 L80 35 L60 50 L65 75 L50 60 L35 75 L40 50 L20 35 L45 35 Z" fill="%231a5c3a" opacity="0.6"/><circle cx="25" cy="25" r="2" fill="%231a5c3a" opacity="0.4"/><circle cx="75" cy="70" r="1.5" fill="%231a5c3a" opacity="0.4"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(10deg);
}

/* Text styling */
.testimonials-item__text {
  position: relative;
  z-index: 2;
}

.testimonials-section--green .testimonials-item__text {
  color: var(--color-text-light);
}

.testimonials-section--beige .testimonials-item__text {
  color: var(--color-text-dark);
}

.testimonials-item__heading {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-2xl);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: var(--space-6);
  color: inherit;
}

.testimonials-section--green .testimonials-item__heading {
  color: var(--color-text-light);
}

.testimonials-section--beige .testimonials-item__heading {
  color: var(--color-text-dark);
}

.testimonials-item__body {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-lg);
  line-height: 1.8;
  margin-bottom: var(--space-6);
  color: inherit;
  opacity: 0.95;
}

.testimonials-section--green .testimonials-item__body {
  color: var(--color-text-light);
}

.testimonials-section--beige .testimonials-item__body {
  color: var(--color-text-dark);
}

.testimonials-item__body p {
  margin-bottom: var(--space-4);
}

.testimonials-item__body p:last-child {
  margin-bottom: 0;
}

.testimonials-item__attribution {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-base);
  font-style: italic;
  margin-top: var(--space-6);
  margin-bottom: 0;
  color: inherit;
  opacity: 0.9;
}

.testimonials-section--green .testimonials-item__attribution {
  color: var(--color-text-light);
}

.testimonials-section--beige .testimonials-item__attribution {
  color: var(--color-text-dark);
}

/* Center text when no image */
.testimonials-item__content:not(.testimonials-item__content--has-image) .testimonials-item__text {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .testimonials-item {
    padding: var(--space-16) 0;
  }
  
  .testimonials-item__content--has-image {
    grid-template-columns: 1fr;
  }
  
  .testimonials-item__content--left .testimonials-item__image-wrapper,
  .testimonials-item__content--right .testimonials-item__image-wrapper {
    order: 1;
    margin-bottom: var(--space-8);
  }
  
  .testimonials-item__content--left .testimonials-item__text,
  .testimonials-item__content--right .testimonials-item__text {
    order: 2;
  }
  
  .testimonials-item__heading {
    font-size: var(--font-size-xl);
  }
  
  .testimonials-item__body {
    font-size: var(--font-size-base);
  }
  
  .testimonials-decorative {
    display: none; /* Hide decorative elements on mobile */
  }
}

/* ==========================================================================
   Testimonials – integrated blocks (no cards, no section title)
   One block per slide: circular photo left, name/descriptor/body right, quote icon
   ========================================================================== */

.testimonials-section {
  padding: var(--space-24) 0 var(--space-16) 0;
  position: relative;
}

/* Full width with equal side padding */
.testimonials-section .container {
  max-width: 100%;
  padding-left: var(--space-8);
  padding-right: var(--space-8);
  box-sizing: border-box;
}

.testimonials-empty-state {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.testimonials-slideshow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  position: relative;
}

.testimonials-slideshow__viewport {
  overflow: hidden;
  position: relative;
  flex: 1;
  min-width: 0;
}

.testimonials-slideshow__prev,
.testimonials-slideshow__next {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  background: var(--color-bg-layer-2);
  color: var(--color-heading);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.testimonials-slideshow__prev:hover,
.testimonials-slideshow__next:hover {
  background: var(--color-soft-leaf-green);
  color: var(--color-text-light);
  border-color: var(--color-soft-leaf-green);
}

.testimonials-slideshow__track {
  display: flex;
  width: 100%;
  transition: transform 0.6s ease-in-out;
  will-change: transform;
}

.testimonials-slideshow__track--desktop {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: calc(100% * var(--total, 3) / 3);
  transform: translateX(calc(-100% * var(--slide-index, 0) / var(--total, 3)));
}

.testimonials-slideshow__track--mobile {
  /* --slide-count = number of slides on track (doubled when JS clones for seamless loop) */
  transform: translateX(calc(-100% * var(--slide-index, 0) / var(--slide-count, 1)));
  display: none;
  flex-wrap: nowrap;
  min-width: 100%;
}

/* Desktop 3-col only when enough width (1800px+); 1000–1800 use single-card to avoid truncation */
@media (min-width: 1800px) {
  .testimonials-slideshow__track--desktop {
    display: flex;
  }
  .testimonials-slideshow__track--mobile {
    display: none !important;
  }
}

/* Single-card layout from 992px down, and 992–1799px (fixes broken testimonials at 1000–1800) */
@media (max-width: 1799px) {
  .testimonials-slideshow__track--desktop {
    display: none !important;
  }
  .testimonials-slideshow__track--mobile {
    display: flex;
  }
  .testimonials-slideshow {
    overflow-x: hidden;
    padding: 0 var(--space-1);
    gap: var(--space-2);
  }
  .testimonials-slideshow__prev,
  .testimonials-slideshow__next {
    width: 2rem;
    height: 2rem;
    font-size: 1.25rem;
  }
  .testimonials-slideshow__viewport {
    overflow-x: hidden;
    min-width: 0;
  }
  .testimonials-slideshow__slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    overflow: hidden;
    padding: 0 var(--space-2);
    box-sizing: border-box;
  }
  .testimonials-slideshow__slide {
    display: flex;
    align-items: stretch;
  }
  .testimonial-block {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: var(--space-6);
    max-width: 100%;
    width: 100%;
    min-height: 20rem;
    display: flex;
    box-sizing: border-box;
  }
  .testimonial-block__content {
    flex: 1 1 auto;
    align-items: center;
    text-align: center;
  }
  .testimonial-block__photo {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    flex-shrink: 0;
  }
  .testimonial-block__quote {
    align-self: flex-start;
  }
  .testimonial-block__name {
    text-align: center;
    width: 100%;
  }
  .testimonial-block__body {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

.testimonials-slideshow__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Desktop: one item per column, same width and height for all */
.testimonials-slideshow__item--desktop {
  flex: 0 0 calc(100% / var(--total, 3));
  width: calc(100% / var(--total, 3));
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: 0 calc(var(--space-8) / 2);
  display: flex;
  align-items: stretch;
}

/* Text left, photo right; subtle outline; patterned background */
.testimonial-block {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  max-width: 56rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-6);
  min-height: 20rem;
  border: 2px solid rgba(139, 111, 71, 0.22);
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.04);
  background-image: 
    repeating-linear-gradient(
      105deg,
      transparent,
      transparent 8px,
      rgba(139, 111, 71, 0.04) 8px,
      rgba(139, 111, 71, 0.04) 9px
    ),
    radial-gradient(ellipse 80% 50% at 30% 50%, rgba(212, 196, 176, 0.12) 0%, transparent 60%);
  background-blend-mode: normal;
  box-sizing: border-box;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.testimonial-block:hover {
  border-color: rgba(139, 111, 71, 0.4);
  background-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 4px 16px rgba(139, 111, 71, 0.08);
}

/* Desktop 3-col: text left, photo right (row-reverse); top-align so quote, title, body, photo align across cards */
.testimonials-slideshow__item--desktop .testimonial-block {
  max-width: none;
  margin: 0;
  padding: var(--space-8);
  flex-direction: row-reverse;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

/* Text left-aligned; padding from photo on the right */
.testimonials-slideshow__item--desktop .testimonial-block__content {
  align-items: flex-start;
  width: 100%;
  padding-right: var(--space-6);
  text-align: left;
}

.testimonial-block__photo {
  flex-shrink: 0;
  flex-grow: 0;
  width: 6rem;
  height: 6rem;
  min-width: 6rem;
  min-height: 6rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-border-subtle);
}

.testimonial-block__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testimonial-block__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.testimonial-block__quote {
  display: inline-block;
  color: var(--color-secondary-wedgewood);
  opacity: 0.5;
  margin: 0 0 var(--space-1) 0;
  line-height: 0;
}

.testimonial-block__quote svg {
  display: block;
}

.testimonial-block__name {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--color-heading);
  margin: 0;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.testimonial-block__descriptor {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}

.testimonial-block__body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: 1.65;
  color: var(--color-text-dark);
  margin: 0;
}

.testimonial-block__body p {
  margin: 0 0 var(--space-3) 0;
}

.testimonial-block__body p:last-child {
  margin-bottom: 0;
}

/* When no photo: content spans full width, quote still present */
.testimonial-block--no-photo .testimonial-block__content,
.testimonial-block:not(:has(.testimonial-block__photo)) .testimonial-block__content {
  max-width: 100%;
}

@media (min-width: 768px) {
  .testimonial-block {
    gap: var(--space-12);
  }
  .testimonial-block__photo {
    width: 7.5rem;
    height: 7.5rem;
    min-width: 7.5rem;
    min-height: 7.5rem;
  }
  .testimonial-block__name {
    font-size: var(--font-size-3xl);
  }
  /* Desktop 3-col: larger photo */
  .testimonials-slideshow__item--desktop .testimonial-block__photo {
    width: 9rem;
    height: 9rem;
    min-width: 9rem;
    min-height: 9rem;
  }
  .testimonials-slideshow__item--desktop .testimonial-block__name {
    font-size: var(--font-size-2xl);
  }
  .testimonials-slideshow__item--desktop .testimonial-block__descriptor {
    font-size: var(--font-size-base);
  }
  .testimonials-slideshow__item--desktop .testimonial-block__body {
    font-size: var(--font-size-base);
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-slideshow__track {
    transition: none;
  }
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
  .nav__container {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
  }
  
  .nav__menu {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .hero {
    padding: var(--space-10) var(--space-6);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 42vh;
  }
  
  .hero .container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
  }
  
  .hero__title {
    font-size: var(--font-size-4xl);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  
  .hero__subtitle {
    font-size: var(--font-size-lg);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  }
  
  .hero__actions {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-4);
  }
  
  .footer__container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* Small mobile (e.g. S21 FE ~412px): container uses --container-padding-x (space-4) */
@media (max-width: 480px) {
  .gallery-wrapper {
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
  }
  
  .gallery-page__actions {
    gap: var(--space-6);
  }
  
  .services-panel__content-wrap {
    padding: 0;
  }
  
  .services-panel--reverse .services-panel__content-wrap {
    padding: 0;
  }
  
  .services-panel__content-box {
    padding: var(--space-6) var(--space-4);
  }
  
  /* Calendar page — reduced padding so users reach calendar faster */
  .calendar-page__inner {
    padding: var(--space-4) var(--space-4) var(--space-4);
  }
  
  .calendar-page__expect-card {
    padding: var(--space-4) var(--space-4);
  }
  
  .calendar-page__policy-card {
    padding: var(--space-4) var(--space-4);
  }
  
  .calendar-page__calendar-container {
    padding: var(--space-4);
  }
  
  .map-section > .container {
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
  }
  
  .hero {
    padding: var(--space-6) var(--space-4);
  }
  
  .hero__title {
    font-size: clamp(2.25rem, 6vw, var(--font-size-3xl));
  }
  
  .hero__subtitle {
    font-size: var(--font-size-base);
  }
  
  .hero__actions {
    gap: var(--space-4);
  }
  
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .nav,
  .footer,
  .btn {
    display: none;
  }
  
  body {
    background: white;
    color: black;
  }
  
  a {
    color: black;
    text-decoration: underline;
  }
}