/**
 * Gardenia RMC — Homepage styles
 * Hand-coded, no page builder. Loaded only on page-home.php (see functions.php).
 *
 * TODO once Reina is installed: replace the --g-* placeholder tokens below
 * with Reina's actual CSS custom property names/values so this file inherits
 * the theme's real palette instead of duplicating it (homepage-plan.md §4).
 * Placeholder values below are derived from the client logo: deep pine green
 * + gold + warm neutral ground, matching the theme-selection report.
 */

:root {
  --g-ground: #F6F1E9;
  --g-ground-raised: #FFFFFF;
  --g-ink: #12211C;
  --g-ink-soft: #3F5148;
  --g-pine: #1F3D32;
  --g-gold: #B08D4F;
  --g-sage-line: rgba(138, 163, 150, 0.35);
  --g-radius: 14px;
  --g-shadow: 0 1px 2px rgba(18,33,28,0.06), 0 8px 24px rgba(18,33,28,0.06);
  --g-max-width: 1180px;
  /* 72px logo + 22px padding top/bottom ≈ actual rendered header height.
     Used to offset content below the now-fixed header (see #gardenia-home
     padding-top) — update this if logo size or header padding changes. */
  --g-header-height: 116px;
}

/* Without this, padding/border add to an element's declared size instead
   of being included in it (browser default: content-box) — every fixed
   px height on this page (header, logos, buttons) would render taller
   than intended. Scoped to #gardenia-home + header/footer so it can't
   affect Reina/Elementor-built pages elsewhere on the site later. */
#gardenia-home,
#gardenia-home *,
.g-site-header,
.g-site-header *,
.g-site-footer,
.g-site-footer * {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}
body.gardenia-home-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: var(--g-ground);
}
/* Safety net: prevents any image on this page from ever rendering at its
   raw native size before CSS/dimensions are known. Deliberately scoped to
   generic content images only (blog thumbnails, service cards) — NOT the
   header/footer logo, which has its own fixed-height rule below. An earlier
   version of this rule also matched ".g-site-header img" and, because it
   has higher specificity than a single class, silently overrode the logo's
   height:52px with height:auto — producing a full-width, aspect-scaled
   giant logo. That's why this is scoped narrowly now. */
#gardenia-home img {
  max-width: 100%;
  height: auto;
}
.g-site-header__logo-img,
.g-site-footer__logo-img {
  max-width: none;
}

/* ---------- Site header (temporary, self-contained — see page-home.php note) ----------
   White/cream background, dark text — third iteration of this header's
   colour scheme (white -> pine -> white), settled on for clarity/contrast
   per client feedback. Conventional solid navbar as its own top block,
   sticky above the hero, not overlaid/transparent on the hero photo. */
.g-site-header {
  /* Fixed (not sticky) — client wants the header locked in place at all
     times, never moving with scroll in either direction. White background,
     dark text — reverted back to this after briefly trying pine + full-size
     buttons, which the client asked to reverse. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--g-ground-raised);
  box-shadow: 0 1px 0 var(--g-sage-line), 0 2px 8px rgba(18,33,28,0.05);
}
.g-site-header__inner {
  /* Same #gardenia-home scoping gap that hit the buttons earlier —
     .g-container's margin:0 auto only applied inside #gardenia-home, so on
     screens wider than --g-max-width the header's content (including the
     CTAs) sat flush-left instead of centred, leaving a large empty gap on
     the right instead of the buttons sitting at the true edge. */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* Increased padding, logo, and nav text together per client feedback
     ("navbar looks small") — all header sizing scaled up as one unit.
     max-width widened beyond the shared --g-max-width specifically for the
     header row — at the larger logo/nav/button sizes, 7 nav items need
     more horizontal room than the page's normal content width allows,
     otherwise the last item ("Contact Us") wraps onto its own row.
     Top padding increased relative to bottom to nudge the whole row down
     within the header bar, per client feedback. */
  padding: 52px 32px 32px;
  max-width: 1440px;
}
/* Header uses a cropped icon-only mark (ring + flower), not the full
   vertical lockup — the full logo's text becomes an unreadable smear at
   header scale. Background made transparent via colour-key processing of
   the original JPEG (attachment ID 10); full lockup with text stays
   available as attachment ID 11 for larger placements. */
.g-site-header__logo {
  display: inline-flex;
  align-items: center;
}
.g-site-header__logo-img {
  height: 92px;
  width: auto;
  display: block;
}
.g-site-header__nav {
  /* Centered in the space between logo and CTA buttons — flex:1 lets it
     claim the remaining width in .g-site-header__inner's three-zone
     (logo | nav | buttons) layout, then justify-content centers the links
     within that space, rather than centering across the full header width
     (which would look off-centre once the logo's width is accounted for).
     Gap increased now that the nav is down to 4 items (was tightened to
     18px to fit 7 items without wrapping — no longer a constraint). */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  flex: 1;
  flex-wrap: nowrap;
}
.g-site-header__nav a {
  color: var(--g-ink);
  text-decoration: none;
  font-size: 23px;
  font-weight: 500;
  position: relative;
  padding-bottom: 3px;
}
.g-site-header__nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--g-pine);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease-out;
}
.g-site-header__nav a:hover {
  color: var(--g-pine);
}
.g-site-header__nav a:hover::after {
  transform: scaleX(1);
}
.g-btn--small {
  padding: 12px 24px;
  font-size: 14.5px;
}
/* Header shows both hero CTAs (Book Now + Call) at the small size — no
   header-specific colour override needed since the header background is
   white and the default pine-on-white .g-btn--primary already has good
   contrast. */
.g-site-header__ctas {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* ---------- Mobile nav: hamburger + slide-out panel ----------
   Below 900px the inline nav/CTAs hide and this toggle + panel take over.
   Hidden by default above 900px so desktop is completely unaffected. */
.g-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.g-nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--g-ink);
  border-radius: 2px;
  transition: transform 220ms ease-out, opacity 220ms ease-out;
}
.g-nav-toggle[aria-expanded="true"] .g-nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.g-nav-toggle[aria-expanded="true"] .g-nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.g-nav-toggle[aria-expanded="true"] .g-nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.g-mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: min(320px, 84vw);
  height: 100dvh;
  height: 100vh;
  background: var(--g-ground-raised);
  z-index: 70;
  padding: max(calc(var(--g-header-height, 90px)), 72px) 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-shadow: -8px 0 24px rgba(18,33,28,0.12);
  transform: translateX(100%);
  transition: transform 280ms ease-out;
  overflow-y: auto;
}
.g-mobile-nav.is-open {
  transform: translateX(0);
}
.g-mobile-nav__close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--g-ground);
  border: 1px solid var(--g-sage-line);
  border-radius: 50%;
  color: var(--g-ink);
  cursor: pointer;
  padding: 0;
  z-index: 1;
}
.g-mobile-nav__close svg {
  width: 18px;
  height: 18px;
}
.g-mobile-nav__close:hover {
  color: var(--g-pine);
  border-color: var(--g-pine);
}
.g-mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.g-mobile-nav__links a {
  color: var(--g-ink);
  text-decoration: none;
  font-size: 19px;
  font-weight: 500;
  padding: 14px 0;
  border-bottom: 1px solid var(--g-sage-line);
}
.g-mobile-nav__links a:hover {
  color: var(--g-pine);
}
.g-mobile-nav__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.g-mobile-nav__ctas .g-btn {
  display: inline-block;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 28px;
  border-radius: 100px;
  text-decoration: none;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}
.g-mobile-nav__ctas .g-btn--primary {
  background: var(--g-pine);
  color: var(--g-ground-raised);
  border: 1.5px solid var(--g-pine);
}
.g-mobile-nav__ctas .g-btn--primary:hover {
  background: color-mix(in srgb, var(--g-pine) 85%, black);
}
.g-mobile-nav__ctas .g-btn--secondary {
  background: transparent;
  color: var(--g-pine);
  border: 1.5px solid var(--g-pine);
}
.g-mobile-nav__ctas .g-btn--secondary:hover {
  background: var(--g-pine);
  color: var(--g-ground-raised);
}
.g-mobile-nav__scrim {
  position: fixed;
  inset: 0;
  background: rgba(18,33,28,0.4);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease-out;
}
.g-mobile-nav__scrim.is-visible {
  opacity: 1;
  pointer-events: auto;
}
body.g-nav-open {
  overflow: hidden;
}
@media (max-width: 900px) {
  .g-site-header__nav { display: none; }
  .g-site-header__ctas { display: none; }
  .g-nav-toggle { display: flex; }
}
@media (min-width: 901px) {
  .g-mobile-nav,
  .g-mobile-nav__scrim {
    display: none;
  }
}

/* ---------- Site footer (temporary, self-contained) ----------
   White/cream background, dark text, matches the header. Structure
   (labeled columns + icon-prefixed contact block + legal links bar) is
   modelled on a structural pattern the client referenced — rebuilt here
   with Gardenia RMC's own content/colours, not copied branding. */
.g-site-footer {
  background: var(--g-ground-raised);
  color: var(--g-ink-soft);
  border-top: 1px solid var(--g-sage-line);
}
.g-site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  /* Brand column sat flush against the viewport edge while the other
     columns had generous gaps between them — extra left padding balances
     that out, per client feedback. */
  padding: 64px 24px 44px 48px;
}
.g-site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.g-site-footer__logo-img {
  /* Enlarged 76px -> 110px; "massagegardenia.com" text line removed
     entirely per client request, so the logo mark now carries the brand
     block on its own. Nudged right slightly per client feedback — the
     description text below stays flush-left, only the logo shifts. */
  height: 110px;
  width: auto;
  display: block;
  margin: 0 0 18px 14px;
}
.g-site-footer__brand p {
  font-size: 15.5px;
  line-height: 1.65;
  margin: 12px 0 0 0;
  max-width: 34ch;
}
.g-site-footer__col-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--g-pine);
  margin: 0 0 18px 0;
}
.g-site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.g-site-footer__nav a {
  color: var(--g-ink);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
}
.g-site-footer__nav a:hover {
  color: var(--g-pine);
}
.g-site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.g-site-footer__contact p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--g-ink);
}
.g-site-footer__contact a {
  color: var(--g-ink);
  text-decoration: none;
  font-weight: 500;
}
.g-site-footer__contact a:hover {
  color: var(--g-pine);
}
.g-footer-icon {
  flex-shrink: 0;
  width: 20px;
  color: var(--g-gold);
  font-size: 14px;
  line-height: 1.5;
}
.g-site-footer__bottom {
  border-top: 1px solid var(--g-sage-line);
  /* Extra right padding keeps the legal links clear of the fixed-position
     "Ask AI" chat widget that sits bottom-right on this site — without it
     the widget overlaps/clips the Privacy Policy link. Left padding matches
     .g-site-footer__inner above so copyright text aligns under the logo. */
  padding: 18px 96px 18px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: var(--g-ink-soft);
}
.g-site-footer__legal {
  display: flex;
  gap: 20px;
}
.g-site-footer__legal a {
  color: var(--g-ink-soft);
  text-decoration: none;
}
.g-site-footer__legal a:hover {
  color: var(--g-pine);
}
@media (max-width: 900px) {
  .g-site-footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .g-site-footer__brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .g-site-footer__inner {
    grid-template-columns: 1fr;
  }
  .g-site-footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

#gardenia-home {
  background: var(--g-ground);
  color: var(--g-ink);
}

#gardenia-home .g-container {
  max-width: var(--g-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

#gardenia-home .g-section {
  padding: 72px 0;
}

#gardenia-home .g-section__title {
  font-size: clamp(26px, 4vw, 34px);
  color: var(--g-pine);
  margin: 0 0 32px 0;
  text-align: center;
}

/* ---------- Shared entrance animation (see assets/js/homepage.js) ---------- */
#gardenia-home [data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
  transition-delay: calc(var(--delay, 0) * 90ms);
}
#gardenia-home [data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}
#gardenia-home [data-animate="scale"] {
  transform: scale(0.97);
}
#gardenia-home [data-animate="scale"].is-visible {
  transform: scale(1);
}

/* ---------- Buttons ---------- */
/* Also matches .g-site-header/.g-site-footer .g-btn — the header sits
   outside #gardenia-home in the HTML (a sibling <header>, not a
   descendant), so the original #gardenia-home-only selector never reached
   the header's Book Now/Call buttons. That's why they were rendering as
   bare underlined text links instead of actual pill-shaped buttons. */
#gardenia-home .g-btn,
.g-site-header .g-btn,
.g-site-footer .g-btn {
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 28px;
  border-radius: 100px;
  text-decoration: none;
  transition: background-color 200ms ease-out, opacity 200ms ease-out, transform 200ms ease-out;
}
/* Same #gardenia-home scoping gap as the base .g-btn rule above — extended
   to the header/footer for the same reason. */
#gardenia-home .g-btn--primary,
.g-site-header .g-btn--primary,
.g-site-footer .g-btn--primary {
  background: var(--g-pine);
  color: var(--g-ground-raised);
}
#gardenia-home .g-btn--primary:hover,
.g-site-header .g-btn--primary:hover,
.g-site-footer .g-btn--primary:hover {
  background: color-mix(in srgb, var(--g-pine) 85%, black);
}
#gardenia-home .g-btn--secondary,
.g-site-header .g-btn--secondary,
.g-site-footer .g-btn--secondary {
  background: transparent;
  color: var(--g-pine);
  border: 1.5px solid var(--g-pine);
}
#gardenia-home .g-btn--secondary:hover,
.g-site-header .g-btn--secondary:hover,
.g-site-footer .g-btn--secondary:hover {
  background: var(--g-pine);
  color: var(--g-ground-raised);
}
#gardenia-home .g-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--g-pine);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color 200ms ease-out;
}
#gardenia-home .g-link:hover {
  border-color: var(--g-pine);
}

/* ---------- Hero ---------- */
#gardenia-home .g-hero {
  /* Header is position:fixed (out of document flow), so the hero itself
     (not #gardenia-home, which wraps every section including the ones
     below that must stay cream) reserves space for it via padding-top.
     Because background-color always fills an element's padding by
     default, the hero's own pine background naturally covers that
     reserved strip — no visible cream gap between the white header and
     the green hero, and no other section is affected. */
  padding-top: var(--g-header-height);
  position: relative;
  /* Full 100vh (not 85vh) so the hero exactly fills the first screen with
     no peek of the next section below it — client specifically didn't
     want "Our Services" visible before scrolling. 600px floor keeps it
     usable on short viewports (landscape mobile, small laptop windows).
     100dvh (dynamic viewport height) as a progressive-enhancement layer:
     plain 100vh on mobile browsers doesn't account for the address bar
     showing/hiding, which can under- or over-shoot the real visible area —
     100dvh (supported in modern browsers) tracks the actual visible
     viewport instead. Older browsers simply ignore this line and keep
     the 100vh rule above it. */
  min-height: max(600px, 100vh);
  min-height: max(600px, 100dvh);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--g-pine);
}
#gardenia-home .g-hero__bg {
  position: absolute;
  inset: -10% 0 0 0;
  background: linear-gradient(160deg, var(--g-pine), color-mix(in srgb, var(--g-pine) 70%, black));
  animation: g-hero-bg-fade-in 400ms ease-out forwards;
  will-change: transform;
}
@keyframes g-hero-bg-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
#gardenia-home .g-hero__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding: 0 24px;
  color: var(--g-ground-raised);
}
#gardenia-home .g-hero__title {
  font-size: clamp(32px, 5.5vw, 52px);
  line-height: 1.15;
  margin: 0 0 18px 0;
  opacity: 0;
  transform: translateY(24px);
  animation: g-hero-rise-in 600ms ease-out 150ms forwards;
}
#gardenia-home .g-hero__subhead {
  font-size: 17px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--g-ground-raised) 85%, transparent);
  margin: 0 0 32px 0;
  opacity: 0;
  animation: g-hero-fade-in 400ms ease-out 250ms forwards;
}
#gardenia-home .g-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  opacity: 0;
  transform: scale(0.96);
  animation: g-hero-cta-in 300ms ease-out 400ms forwards;
}
#gardenia-home .g-hero .g-btn--secondary {
  color: var(--g-ground-raised);
  border-color: var(--g-ground-raised);
}
#gardenia-home .g-hero .g-btn--secondary:hover {
  background: var(--g-ground-raised);
  color: var(--g-pine);
}
/* White outline on the filled Book Now button, matching the outlined Call
   button next to it — pine fill stays, adds a border on top for a
   consistent two-button look. Arrow removed from the label per request. */
/* White fill, black text + outline — client wants this button standing
   apart from the pine-filled default, high contrast against the hero.
   Padding/font-size bumped above the shared .g-btn base so it visually
   matches "Call" next to it — the shorter "Book Now" label was making the
   button look smaller even though both used the same base sizing. */
#gardenia-home .g-btn--outline-white {
  background: var(--g-ground-raised) !important;
  color: var(--g-ink) !important;
  border: 1.5px solid var(--g-ink);
  padding: 16px 34px;
  font-size: 17px;
}
#gardenia-home .g-btn--outline-white:hover {
  background: var(--g-ink) !important;
  color: var(--g-ground-raised) !important;
}
@keyframes g-hero-rise-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes g-hero-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes g-hero-cta-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- Services grid ---------- */
#gardenia-home .g-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
#gardenia-home .g-service-card {
  background: var(--g-ground-raised);
  border: 1px solid var(--g-sage-line);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow);
  padding: 22px;
  transition: transform 250ms ease-out, box-shadow 250ms ease-out;
}
#gardenia-home .g-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(18,33,28,0.08), 0 16px 32px rgba(18,33,28,0.1);
}
#gardenia-home .g-service-card__media {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: var(--g-ground);
  overflow: hidden;
  margin-bottom: 16px;
}
#gardenia-home .g-service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 250ms ease-out;
}
#gardenia-home .g-service-card:hover .g-service-card__media img {
  transform: scale(1.04);
}
#gardenia-home .g-service-card__title {
  font-size: 18px;
  color: var(--g-pine);
  margin: 0 0 8px 0;
}
#gardenia-home .g-service-card__desc {
  font-size: 14px;
  color: var(--g-ink-soft);
  margin: 0 0 14px 0;
}
#gardenia-home .g-service-card__link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--g-pine);
  text-decoration: none;
}

/* ---------- Therapists / placeholder note ---------- */
/* ---------- Meet Your Therapist(s) ----------
   Pine-green section background (matches hero/final-CTA) per client
   request. Card visual system matches .g-service-card exactly (white
   card, sage border, shadow, hover-lift) so the section reads as part of
   the same site rather than a bolted-on addition — see
   team-section-plan.md. Photo replaced with an initials monogram avatar
   until real therapist photos are supplied — deliberately not a stock
   photo, which would read as a fabricated staff member. */
#gardenia-home .g-therapists {
  background: var(--g-pine);
}
#gardenia-home .g-therapists .g-section__title {
  color: var(--g-ground-raised);
}
#gardenia-home .g-therapists__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
#gardenia-home .g-therapist-card {
  background: var(--g-ground-raised);
  border: 1px solid var(--g-sage-line);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow);
  padding: 28px 22px;
  text-align: center;
  transition: transform 250ms ease-out, box-shadow 250ms ease-out;
}
#gardenia-home .g-therapist-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(18,33,28,0.08), 0 16px 32px rgba(18,33,28,0.1);
}
#gardenia-home .g-therapist-card__avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--g-pine);
  color: var(--g-ground-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
#gardenia-home .g-therapist-card__name {
  font-size: 18px;
  color: var(--g-pine);
  margin: 0 0 4px 0;
}
#gardenia-home .g-therapist-card__qualification {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px 0;
}
#gardenia-home .g-therapist-card__bio {
  font-size: 14px;
  color: var(--g-ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* ---------- Why choose us ---------- */
/* ---------- Why Choose Us — split layout ----------
   Deliberately NOT a card grid — client asked for this section to look
   different from Services/Therapists, which both use the white-card
   pattern. Image one side, plain icon+text list the other, no card
   borders/shadows on the list items at all. */
#gardenia-home .g-why__split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}
#gardenia-home .g-why__media {
  border-radius: var(--g-radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--g-shadow);
}
#gardenia-home .g-why__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
#gardenia-home .g-why__title {
  text-align: left;
  margin-bottom: 24px;
}
#gardenia-home .g-why__list {
  list-style: none;
  margin: 0 0 28px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: left;
}
#gardenia-home .g-why__list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
#gardenia-home .g-why__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: var(--g-gold);
  margin-top: 2px;
}
#gardenia-home .g-why__icon svg {
  width: 100%;
  height: 100%;
}
#gardenia-home .g-why__text {
  display: block;
  font-size: 15.5px;
  color: var(--g-ink-soft);
  line-height: 1.6;
}
#gardenia-home .g-why__text strong {
  display: block;
  color: var(--g-pine);
  font-size: 17px;
  margin-bottom: 3px;
}
#gardenia-home .g-why {
  text-align: left;
}
@media (max-width: 860px) {
  #gardenia-home .g-why__split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  #gardenia-home .g-why__media {
    aspect-ratio: 16 / 10;
  }
}

/* ---------- Blog ---------- */
#gardenia-home .g-blog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}
#gardenia-home .g-blog-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--g-radius);
  overflow: hidden;
  margin-bottom: 14px;
}
#gardenia-home .g-blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 250ms ease-out;
}
#gardenia-home .g-blog-card:hover .g-blog-card__media img {
  transform: scale(1.04);
}
#gardenia-home .g-blog-card__title {
  font-size: 17px;
  margin: 0 0 8px 0;
}
#gardenia-home .g-blog-card__title a {
  color: var(--g-pine);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color 200ms ease-out;
}
#gardenia-home .g-blog-card__title a:hover {
  border-color: var(--g-pine);
}
#gardenia-home .g-blog-card__excerpt {
  font-size: 14px;
  color: var(--g-ink-soft);
}
#gardenia-home .g-blog {
  text-align: center;
}

/* ---------- Final CTA ---------- */
#gardenia-home .g-final-cta {
  background: var(--g-pine);
  color: var(--g-ground-raised);
  text-align: center;
}
#gardenia-home .g-final-cta .g-section__title {
  color: var(--g-ground-raised);
}
#gardenia-home .g-final-cta p {
  font-size: 16px;
  color: color-mix(in srgb, var(--g-ground-raised) 85%, transparent);
  margin: 0 0 28px 0;
}
#gardenia-home .g-final-cta__address {
  margin-top: 20px !important;
  font-size: 14px !important;
}
/* Dedicated wrapper — was incorrectly reusing .g-hero__ctas (copy-paste
   from the hero section), which carries opacity:0 + a page-load fade-in
   animation meant only for the hero. Reused outside the hero, that
   animation could get stuck at opacity:0, making "Book Now" disappear
   entirely even though its background/colour rules were correct. This
   wrapper is static (no animation) — the section's own [data-animate] on
   the outer .g-container already handles its one-time scroll-in fade,
   per the "single calm fade-up, no stagger" spec for this section. */
#gardenia-home .g-final-cta__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
#gardenia-home .g-final-cta .g-btn--secondary {
  color: var(--g-ground-raised);
  border-color: var(--g-ground-raised);
}
#gardenia-home .g-final-cta .g-btn--secondary:hover {
  background: var(--g-ground-raised);
  color: var(--g-pine);
}
/* Turns out this button was never actually invisible due to a bug — it's
   pine-filled text (#1F3D32) sitting on this section's own pine
   background, which reads as "no button" even with every property
   technically correct, since fill and background are the same colour.
   Adding a white border (matching "Call" right next to it) gives it a
   visible shape/outline instead of relying on fill contrast alone. */
/* White fill, black text/outline — matches the hero's Book Now button
   treatment. This selector's higher specificity than .g-btn--outline-white
   means it must carry the actual colours itself, not just defer to that
   class, or it would keep winning with the old pine styling. */
#gardenia-home section.g-final-cta a.g-btn.g-btn--primary {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  background-color: #FFFFFF !important;
  color: #12211C !important;
  border: 1.5px solid #12211C !important;
  display: inline-block !important;
}
#gardenia-home section.g-final-cta a.g-btn.g-btn--primary:hover {
  background-color: #12211C !important;
  color: #FFFFFF !important;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #gardenia-home [data-animate],
  #gardenia-home .g-hero__title,
  #gardenia-home .g-hero__subhead,
  #gardenia-home .g-hero__ctas,
  #gardenia-home .g-hero__bg {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  #gardenia-home .g-hero__bg {
    animation: g-hero-bg-fade-in 400ms ease-out forwards; /* keep load-in, parallax JS is disabled below 768px in homepage.js */
  }
  #gardenia-home .g-section {
    padding: 48px 0;
  }

  /* Hero: scale text down and tighten spacing so the headline doesn't
     dominate the whole first screen on a small phone. */
  #gardenia-home .g-hero__content {
    padding: 0 20px;
  }
  #gardenia-home .g-hero__title {
    font-size: clamp(28px, 8vw, 36px);
    margin-bottom: 14px;
  }
  #gardenia-home .g-hero__subhead {
    font-size: 15.5px;
    margin-bottom: 24px;
  }
  #gardenia-home .g-hero__ctas {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
  #gardenia-home .g-hero__ctas .g-btn {
    width: 100%;
  }

  #gardenia-home .g-section__title {
    margin-bottom: 24px;
  }

  #gardenia-home .g-container {
    padding: 0 18px;
  }

  /* Why Choose Us: single-column already handled at 860px; tighten a bit
     further at phone width specifically. */
  #gardenia-home .g-why__list {
    gap: 18px;
  }

  /* Final CTA buttons stack full-width, same pattern as the hero. */
  #gardenia-home .g-final-cta__ctas {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
  #gardenia-home .g-final-cta__ctas .g-btn {
    width: 100%;
  }

  /* Footer: reduce oversized logo/padding at phone width. */
  .g-site-footer__inner {
    padding-top: 48px;
    padding-left: 20px;
  }
  .g-site-footer__logo-img {
    height: 84px;
  }
  .g-site-footer__bottom {
    padding-left: 20px;
  }

  /* ---------- Services / Therapists: grid -> horizontal slider ----------
     Below 768px, swap the CSS grid for a scroll-snap horizontal track.
     [data-slider] is the same element that was `display:grid` on desktop
     — overriding to flex here is enough, no markup difference needed
     beyond the data-slider attribute added for this hook. Cards get a
     fixed comfortable width instead of stretching to the grid column. */
  #gardenia-home [data-slider] {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 4px 18px 8px;
    margin: 0 -18px;
    scrollbar-width: none;
  }
  #gardenia-home [data-slider]::-webkit-scrollbar {
    display: none;
  }
  #gardenia-home [data-slider] > * {
    scroll-snap-align: start;
    flex: 0 0 78vw;
    max-width: 320px;
  }

  /* Dot indicators, added by homepage.js under each slider — one dot per
     card, active dot highlighted as the user scrolls. Pure CSS couldn't
     track scroll position, hence the small JS helper. */
  .g-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }
  .g-slider-dots__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--g-sage-line);
    transition: background-color 200ms ease-out, transform 200ms ease-out;
  }
  .g-slider-dots__dot.is-active {
    background: var(--g-pine);
    transform: scale(1.3);
  }
  #gardenia-home .g-therapists .g-slider-dots__dot {
    background: rgba(255,255,255,0.35);
  }
  #gardenia-home .g-therapists .g-slider-dots__dot.is-active {
    background: var(--g-ground-raised);
  }
}
@media (min-width: 768px) {
  /* Dots only ever needed for the mobile slider — hidden entirely once
     the grid layout takes over. */
  .g-slider-dots {
    display: none;
  }
}