/* ============================================================================
   styles.css  —  ALL THE SITE'S LOOK & FEEL  (colours, fonts, spacing, layout)
   ----------------------------------------------------------------------------
   WHAT THIS FILE CONTROLS
   Every visual detail of the website: colours, fonts, button shapes, spacing,
   cards, the header, the footer and how things rearrange on mobile.

   HOW IT IS ORGANISED (scroll to the section you want)
     1. THEME SETTINGS ....... colours, fonts, spacing  <-- edit these first
     2. BASE / RESET ......... sensible defaults
     3. TYPOGRAPHY ........... headings & text
     4. LAYOUT HELPERS ....... container, sections, grids
     5. BUTTONS
     6. HEADER & NAVIGATION
     7. HERO
     8. CARDS (services & programs)
     9. SERVICE DETAIL
    10. FAQ ACCORDION
    11. CONTACT FORM
    12. FOOTER
    13. ANIMATIONS
    14. RESPONSIVE (mobile) TWEAKS

   TIP: To restyle the whole site, you usually only need SECTION 1 below.
   ========================================================================== */


/* ==========================================================================
   1. THEME SETTINGS
   These "variables" are reused everywhere. Change a value here and it updates
   across the whole site.
   ========================================================================== */
:root {

  /* ---- EDIT HERE: Update the website colour palette ----
     Tip: keep good contrast between text colours and background colours. */
  --color-bg:          #FBF6EE; /* warm ivory — main page background */
  --color-bg-alt:      #F2E9DB; /* soft sand — alternating section background */
  --color-surface:     #FFFDF9; /* near-white — cards and raised areas */

  --color-green:       #2F4A38; /* deep forest green — brand + headings */
  --color-green-deep:  #24382A; /* darker green — hover states */
  --color-green-soft:  #56705A; /* muted green — secondary text on light bg */

  --color-sage:        #93A183; /* muted sage green — accents */
  --color-sage-light:  #C9D2BE; /* pale sage — soft fills */

  --color-gold:        #B0863F; /* warm gold/ochre — small accents & lines */
  --color-gold-soft:   #CBA968; /* lighter gold — hover */

  --color-blush:       #D7B4A5; /* dusty rose / blush — gentle accent */
  --color-blush-soft:  #EDD9D1; /* pale blush — soft fills */

  --color-taupe:       #A28E78; /* warm taupe */

  --color-text:        #3A342C; /* deep brown charcoal — main body text */
  --color-text-muted:  #6B6053; /* muted brown — secondary text */
  --color-line:        rgba(58, 52, 44, 0.14); /* hairline borders */

  /* ---- EDIT HERE: Fonts and typography ----
     The fonts themselves are loaded in each page's <head> from Google Fonts.
     If you change a font there, update the name here too. */
  --font-heading: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --font-body:    "Nunito Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* ---- EDIT HERE: Spacing & layout ---- */
  --container-width: 1180px;   /* max content width on large screens */
  --gap:             1.5rem;   /* default gap between items */
  --section-space:   6rem;     /* vertical breathing room between sections */
  --radius:          20px;     /* rounded corners on cards */
  --radius-pill:     999px;    /* fully rounded buttons */

  /* ---- Soft shadows (subtle depth) ---- */
  --shadow-soft:   0 10px 30px rgba(58, 52, 44, 0.08);
  --shadow-hover:  0 18px 44px rgba(58, 52, 44, 0.14);

  /* ---- EDIT HERE: Animation speed ---- */
  --transition: 0.35s ease;
}


/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }              /* gentle scrolling to anchors */

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                          /* prevents sideways scrolling */
}

/* Stop the page scrolling behind the open mobile menu. */
body.no-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-green); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-gold); }

/* Visible focus outline for keyboard users (accessibility). */
:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* "Skip to content" link — hidden until focused with the keyboard. */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-green);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 2000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-green);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }

p { margin: 0 0 1.1em; }

/* A small uppercase label used above headings. */
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 0.8rem;
}

/* A decorative little leaf/sparkle divider (pure CSS). */
.divider {
  width: 70px;
  height: 2px;
  background: var(--color-gold);
  border: none;
  margin: 1.2rem auto;
  opacity: 0.7;
}
.text-center { text-align: center; }
.lead { font-size: 1.2rem; color: var(--color-text-muted); }


/* ==========================================================================
   4. LAYOUT HELPERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding-inline: 1.5rem;
}

.section { padding-block: var(--section-space); }
.section--tight { padding-block: 3.5rem; }
.section--alt { background: var(--color-bg-alt); }
.section--sage { background: var(--color-sage-light); }

/* A soft rounded panel used to group content. */
.panel {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.5rem, 4vw, 3rem);
}

/* Simple responsive grids. */
.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.section-head { max-width: 640px; margin: 0 auto 3rem; text-align: center; }


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition),
              color var(--transition), box-shadow var(--transition);
  text-align: center;
  line-height: 1.1;
}
.btn:hover { transform: translateY(-2px); }

/* Primary (filled green) — used for booking. */
.btn--primary {
  background: var(--color-green);
  color: #FBF6EE;
  box-shadow: var(--shadow-soft);
}
.btn--primary:hover { background: var(--color-green-deep); color: #fff; box-shadow: var(--shadow-hover); }

/* Ghost (outline) — used for secondary actions. */
.btn--ghost {
  background: transparent;
  color: var(--color-green);
  border-color: var(--color-green);
}
.btn--ghost:hover { background: var(--color-green); color: #FBF6EE; }

/* Gold outline variant (used on dark/photo backgrounds). */
.btn--light {
  background: rgba(251, 246, 238, 0.92);
  color: var(--color-green);
}
.btn--light:hover { background: #fff; color: var(--color-green-deep); }

.btn--small { padding: 0.6rem 1.2rem; font-size: 0.9rem; }


/* ==========================================================================
   6. HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;                 /* stays at the top when scrolling */
  top: 0;
  z-index: 1000;
  /* Near-opaque cream. We intentionally do NOT use backdrop-filter here:
     it would create a "containing block" that breaks the full-height mobile
     slide-in menu. A solid background keeps things simple and reliable. */
  background: rgba(251, 246, 238, 0.94);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition), border-color var(--transition), background var(--transition);
}
.site-header.is-scrolled {
  box-shadow: 0 6px 20px rgba(58, 52, 44, 0.06);
  border-bottom-color: var(--color-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 84px;
}
.brand { display: inline-flex; align-items: center; }
/* EDIT HERE: header logo size. The real logo is fairly square, so a slightly
   taller height keeps the wordmark readable. */
.brand__logo { height: 62px; width: auto; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__list a {
  font-weight: 600;
  color: var(--color-text);
  padding: 0.4rem 0;
  position: relative;
}
/* Gentle underline that grows on hover / active. */
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--color-gold);
  transition: width var(--transition);
}
.site-nav__list a:hover::after,
.site-nav__list a.is-active::after { width: 100%; }
.site-nav__list a.is-active { color: var(--color-green); }

.site-header__actions { display: flex; align-items: center; gap: 0.8rem; }

/* The hamburger + close buttons (hidden on desktop). */
.nav-toggle, .nav-close {
  display: none;
  background: none;
  border: none;
  color: var(--color-green);
  cursor: pointer;
  padding: 0.4rem;
}
.nav-toggle svg, .nav-close svg { width: 30px; height: 30px; }
.site-nav__cta { display: none; }   /* the in-menu book button (mobile only) */


/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  /* EDIT HERE: change the hero background image (file in images/ folder).
     The gradient sits on top of the photo to keep text readable. */
  background:
    linear-gradient(180deg, rgba(38, 52, 43, 0.55), rgba(28, 40, 32, 0.72)),
    url("../images/hero.jpg") center / cover no-repeat;
  color: #fff;
  text-align: center;
  padding-block: 6rem;
}
.hero__inner { max-width: 760px; margin: 0 auto; }
.hero h1 { color: #fff; margin-bottom: 0.4em; text-shadow: 0 2px 18px rgba(0,0,0,0.25); }
.hero__eyebrow { color: var(--color-blush-soft); }
.hero p {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.95);
  max-width: 620px;
  margin: 0 auto 2rem;
  text-shadow: 0 1px 10px rgba(0,0,0,0.25);
}
.hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* A smaller intro banner used on inner pages (About, Rituals, etc.). */
.page-hero {
  background: var(--color-bg-alt);
  text-align: center;
  padding-block: 4.5rem 3.5rem;
  border-bottom: 1px solid var(--color-line);
}
.page-hero .eyebrow { color: var(--color-gold); }
.page-hero p { max-width: 620px; margin: 0 auto; color: var(--color-text-muted); font-size: 1.15rem; }


/* ==========================================================================
   8. CARDS (services & programs)
   ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.service-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.service-card__media { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--color-sage-light); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.service-card:hover .service-card__media img { transform: scale(1.05); }
.service-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.service-card__title { margin-bottom: 0.2rem; }
.service-card__tagline { color: var(--color-text-muted); font-size: 0.98rem; margin-bottom: 0.8rem; flex-grow: 1; }
.service-card__price { font-weight: 700; color: var(--color-gold); margin-bottom: 1.1rem; }
.service-card__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* Category heading blocks on the Rituals page. */
.category-block { margin-bottom: 4rem; }
.category-block:last-child { margin-bottom: 0; }
.category-block__head { margin-bottom: 2rem; }

/* Program cards (larger, horizontal on desktop). */
.program-card {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 0;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  margin-bottom: 2.5rem;
}
.program-card__media { background: var(--color-sage-light); }
.program-card__media img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
/* Program cards with no image become a single, full-width column. */
.program-card--no-media { grid-template-columns: 1fr; }
.program-card__body { padding: clamp(1.5rem, 3vw, 2.6rem); }
.program-card__tagline { color: var(--color-gold); font-weight: 600; margin-bottom: 1rem; }
.program-card__meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-bottom: 1.2rem; }
.program-card__meta span {
  background: var(--color-blush-soft);
  color: var(--color-text);
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
}
.program-card__research { font-size: 0.95rem; color: var(--color-text-muted); font-style: italic; }
.program-card__note {
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-gold);
  padding: 0.9rem 1.1rem;
  border-radius: 8px;
  font-size: 0.95rem;
}
.program-card__gift {
  background: var(--color-blush-soft);
  padding: 1rem 1.2rem;
  border-radius: 12px;
  font-size: 0.97rem;
}


/* ==========================================================================
   9. SERVICE DETAIL PAGE
   ========================================================================== */
.service-detail { padding-block: 3rem 5rem; }
.back-link { display: inline-block; margin-bottom: 1.5rem; font-weight: 600; }
.service-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.service-detail__media img { border-radius: var(--radius); box-shadow: var(--shadow-soft); width: 100%; object-fit: cover; }
.service-detail__tagline { font-size: 1.25rem; color: var(--color-gold); font-weight: 600; margin-bottom: 1.2rem; }
.service-detail__subhead { font-size: 1.3rem; margin-top: 2rem; }
.service-detail__addon,
.service-detail__suitable {
  background: var(--color-bg-alt);
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  font-size: 0.97rem;
  margin-top: 1.2rem;
}
.service-detail__cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 2rem; }

/* "Includes" tick list. */
.tick-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.tick-list li { position: relative; padding-left: 1.8rem; margin-bottom: 0.6rem; }
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-sage);
}

/* Pricing list. */
.price-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.price-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-line);
}
.price-row__duration { color: var(--color-text); font-weight: 600; }
.price-row__price { color: var(--color-gold); font-weight: 700; }

/* Benefit "chips". */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.2rem 0; }
.chip {
  background: var(--color-sage-light);
  color: var(--color-green-deep);
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
}


/* ==========================================================================
   10. FAQ ACCORDION
   ========================================================================== */
.faq { max-width: 820px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--color-line); }
.faq__question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-green);
  font-weight: 600;
  padding: 1.3rem 2.5rem 1.3rem 0;
  cursor: pointer;
  position: relative;
}
/* The + / − indicator. */
.faq__question::after {
  content: "+";
  position: absolute;
  right: 0.2rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: var(--color-gold);
  transition: transform var(--transition);
}
.faq__question[aria-expanded="true"]::after { content: "−"; }
.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition), padding var(--transition);
  color: var(--color-text-muted);
}
.faq__answer.is-open { max-height: 600px; padding-bottom: 1.4rem; }


/* ==========================================================================
   11. CONTACT FORM
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.contact-info li { list-style: none; }
.contact-info { padding: 0; margin: 1.5rem 0 0; }
.contact-info li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 1.2rem;
}
.contact-info svg { width: 22px; height: 22px; color: var(--color-gold); flex-shrink: 0; margin-top: 0.2rem; }

.form-field { margin-bottom: 1.3rem; }
.form-field label { display: block; font-weight: 600; margin-bottom: 0.4rem; color: var(--color-green); }
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-line);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-sage);
  box-shadow: 0 0 0 3px rgba(147, 161, 131, 0.25);
}
/* Red highlight when a field has an error. */
.form-field input.has-error,
.form-field textarea.has-error {
  border-color: #b4453f;
  box-shadow: 0 0 0 3px rgba(180, 69, 63, 0.15);
}
.field-error { color: #b4453f; font-size: 0.85rem; display: block; margin-top: 0.3rem; min-height: 1em; }

/* The overall success / error banner. */
.form-status { border-radius: 12px; padding: 0; font-weight: 600; }
.form-status:not(:empty) { padding: 0.9rem 1.1rem; margin-bottom: 1.2rem; }
.form-status--success { background: #e6efe1; color: #2f5a35; border: 1px solid #b8d3ab; }
.form-status--error { background: #f7e3e1; color: #8f322d; border: 1px solid #e2b4af; }


/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-footer { background: var(--color-green-deep); color: rgba(255,255,255,0.82); margin-top: 2rem; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-block: 4rem 3rem;
}
.footer__col h3, .footer__heading {
  font-family: var(--font-heading);
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 1.1rem;
}
.footer__heading--spaced { margin-top: 1.8rem; }
/* The footer uses a cream version of the logo (images/logo-light.png), so no
   colour filter is needed here. */
.footer__logo { height: 64px; width: auto; margin-bottom: 1.2rem; opacity: 0.95; }
.footer__desc { font-size: 0.95rem; margin-bottom: 1.4rem; }
.footer__cta { margin-bottom: 1.4rem; }

.footer__contact, .footer__hours, .footer__links { list-style: none; padding: 0; margin: 0; }
.footer__contact li { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.9rem; font-size: 0.95rem; }
.footer__contact svg { width: 20px; height: 20px; color: var(--color-gold-soft); flex-shrink: 0; margin-top: 0.15rem; }
.footer__contact a, .footer__links a { color: rgba(255,255,255,0.82); }
.footer__contact a:hover, .footer__links a:hover { color: var(--color-gold-soft); }

.footer__hours li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.93rem; margin-bottom: 0.55rem; }
.footer__days { color: rgba(255,255,255,0.72); }
.footer__time { color: #fff; font-weight: 600; }
.footer__hours-note {
  margin-top: 1rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 0.9rem;
}

.footer__links li { margin-bottom: 0.6rem; font-size: 0.95rem; }

.footer__social { display: flex; gap: 0.8rem; margin-top: 0.4rem; }
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  color: #fff;
  transition: background var(--transition), transform var(--transition);
}
.footer__social a:hover { background: var(--color-gold); transform: translateY(-2px); }
.footer__social svg { width: 20px; height: 20px; }

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: 1.4rem;
  font-size: 0.85rem;
  text-align: center;
}
.site-footer__bottom p { margin: 0; color: rgba(255,255,255,0.7); }
.footer__tagline { display: block; margin-top: 0.3rem; font-style: italic; color: var(--color-gold-soft); }


/* ==========================================================================
   13. ANIMATIONS
   Elements with class "reveal" start slightly faded/lowered, then slide up.
   ========================================================================== */
/* IMPORTANT: content is hidden for the fade-in ONLY when JavaScript is
   available (the <html> tag gets a "js" class in each page's <head>).
   If JavaScript is off or fails, everything stays fully visible — a safe
   fallback so the site is never blank. */
.reveal { transition: opacity 0.7s ease, transform 0.7s ease; }
html.js .reveal { opacity: 0; transform: translateY(24px); }
html.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Stagger a group of cards so they appear one after another. */
.card-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.card-grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.card-grid .reveal:nth-child(4) { transition-delay: 0.24s; }

/* RESPECT users who prefer less motion (accessibility). */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* A quote / testimonial block. */
.quote {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 2.2rem;
  box-shadow: var(--shadow-soft);
  height: 100%;
}
.quote__text { font-family: var(--font-heading); font-size: 1.35rem; line-height: 1.5; color: var(--color-green); margin-bottom: 1rem; }
.quote__author { font-weight: 700; color: var(--color-gold); font-size: 0.95rem; }

/* Shared "info notice" style (e.g. gift vouchers, first responders). */
.notice {
  background: var(--color-blush-soft);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  color: var(--color-text);
}
.notice--gold { background: var(--color-bg-alt); border-left: 4px solid var(--color-gold); }

/* Feature list on About / Home (the "what makes us different" items). */
.feature { text-align: center; padding: 1rem; }
.feature__icon {
  width: 64px; height: 64px;
  margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-sage-light);
  color: var(--color-green);
}
.feature__icon svg { width: 30px; height: 30px; }

/* Split image + text row (used on Home & About). */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow-soft); width: 100%; object-fit: cover; }
.split--reverse .split__media { order: 2; }

/* A soft call-to-action band. */
.cta-band {
  background: linear-gradient(135deg, var(--color-green), var(--color-green-deep));
  color: #fff;
  text-align: center;
  border-radius: var(--radius);
  padding: clamp(2.5rem, 5vw, 4rem);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.9); max-width: 560px; margin: 0 auto 1.8rem; }


/* ==========================================================================
   14. RESPONSIVE (mobile) TWEAKS
   These rules take over on smaller screens.
   ========================================================================== */

/* Tablets and below: stack two-column layouts. */
@media (max-width: 900px) {
  :root { --section-space: 4rem; }

  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .split, .service-detail__grid, .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .split--reverse .split__media { order: 0; }
  .program-card { grid-template-columns: 1fr; }
  .program-card__media img { min-height: 220px; }

  /* ---- Turn the desktop nav into a slide-in mobile menu ---- */
  .nav-toggle { display: inline-flex; }
  .site-header__cta { display: none; }        /* hide the header book btn on mobile */

  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    background: var(--color-bg);
    box-shadow: -10px 0 40px rgba(0,0,0,0.15);
    flex-direction: column;
    padding: 5rem 2rem 2rem;
    /* Hidden AND takes up no space when closed (so it never causes the page
       to scroll sideways on mobile). It slides in when opened. */
    display: none;
    align-items: flex-start;
    gap: 0;
    z-index: 1500;
  }
  .site-nav.is-open {
    display: flex;
    animation: navSlideIn var(--transition);   /* gentle slide-in from the right */
  }
  @keyframes navSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }
  .site-nav__list { flex-direction: column; align-items: flex-start; gap: 0.4rem; width: 100%; }
  .site-nav__list a { display: block; padding: 0.7rem 0; font-size: 1.15rem; }
  .site-nav__cta { display: block; margin-top: 1.5rem; width: 100%; }
  .site-nav__cta .btn { width: 100%; }
  .nav-close { display: inline-flex; position: absolute; top: 1.2rem; right: 1.2rem; }
}

/* Small phones: a little tighter. */
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .hero { min-height: 82vh; }
  .hero__actions .btn { width: 100%; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; text-align: left; }
  .service-card__actions .btn { flex: 1; }
  .service-detail__cta .btn { width: 100%; }
  .brand__logo { height: 46px; }
}