/* Warm Practitioner. Shared styles + animations */
:root {
  --cream:   #FAF6F1;
  --sand:    #F1E9DC;
  --sage-50: #F0F4EE;
  --sage-200:#C5D2BD;
  --sage-500:#7B9670;
  --sage-700:#4F6849;
  --sage-900:#2B3826;
  --terra-400:#D8866C;
  --terra-500:#C4694A;
  --terra-600:#A8553A;
  --ink:     #2A2622;
}
html { scroll-behavior: smooth; }
/* Fixed nav is 64px tall (py-3.5 = ~14px each + content ~36px). */
html, body { max-width: 100vw; overflow-x: clip; }
body { font-family: 'DM Sans', system-ui, sans-serif; background: var(--cream); color: var(--ink); padding-top: 64px; }
@media (min-width: 640px) { body { padding-top: 72px; } }
/* Prevent any image / iframe from spilling out of its container on mobile */
img, iframe, video { max-width: 100%; height: auto; }
/* Inputs / selects / textareas honor box-sizing border-box and never overflow their container */
input, select, textarea { max-width: 100%; box-sizing: border-box; }
/* Wrap long words instead of forcing horizontal scroll */
p, h1, h2, h3, h4, li, a { overflow-wrap: anywhere; word-break: break-word; }
/* Break long code blocks (the BOOKING_WEBHOOK explainer has them) */
code, pre { overflow-wrap: anywhere; word-break: break-all; }
.serif { font-family: 'DM Serif Display', Georgia, serif; }
/* Editorial italic accent for the emphasized phrase inside a serif headline.
   This is the single biggest "designed" signal: the key words sit in italic
   terracotta while the rest of the line stays in ink. Used in the hero H1 and
   section H2s. The terra ramp is the template accent; build recolors it. */
.serif-accent { font-family: 'DM Serif Display', Georgia, serif; font-style: italic; color: var(--terra-500); }

/* Soft film grain overlay. Sits over dark gradient sections (testimonials,
   final CTA, location band) to give them depth instead of a flat fill.
   Pure CSS, no image request. Apply .grain to a `position:relative` parent. */
.grain { position: relative; }
.grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 0;
}
.grain > * { position: relative; z-index: 1; }

/* Scroll-triggered fade-up animations.
   Visible by default (no-JS / no-IntersectionObserver / slow JS fallback).
   When body has .js-anim set by partials.js, the initial hidden state applies. */
.reveal { opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.js-anim .reveal:not(.in) { opacity: 0; transform: translateY(24px); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }

/* Hero blob parallax-ish drift */
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(8px, -8px) scale(1.02); }
}
.drift { animation: none; } /* hero movement removed per request - static */

/* Card hover lift */
.card-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 36px -16px rgba(75, 100, 70, 0.25); }

/* ── Contained image hover-zoom ──────────────────────────────────────────
   Any image inside a clipping frame may scale subtly on hover, but the frame
   keeps it clipped so it never spills out of frame. Apply .img-frame to the
   container (forces overflow:hidden) and the inner <img> gets a gentle zoom.
   Also a defensive global: rounded image wrappers always clip. */
.img-frame { overflow: hidden; }
.img-frame > img { display: block; }/* image transform transition removed - static per client */
.img-frame:hover > img,
a.img-frame:hover > img,
a:hover > .img-frame > img { transform: none; }/* hover zoom removed - static per client */
/* Safety net: never let a transformed image escape a rounded container. */
[class*="rounded"] > img { max-width: 100%; }
.overflow-hidden { overflow: hidden; }

/* Booking modal multi-step */
.modal-step.hidden { display: none; }

/* Subtle button shine */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(250, 246, 241, 0.18), transparent);
  transition: left 0.6s ease;
}
.btn-shine:hover::after { left: 100%; }

/* FAQ accordion */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(180deg); }
.chev { transition: transform 0.25s ease; }

/* Number counter (animates via JS) */
.counter { font-variant-numeric: tabular-nums; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(43,56,38,0.6); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; z-index: 100;
  animation: fade 0.2s ease;
}
.modal-backdrop.open { display: flex; }
.modal-box {
  background: var(--cream); border-radius: 24px; padding: 32px; max-width: 540px; width: calc(100% - 32px);
  max-height: 90vh; overflow-y: auto;
  animation: pop 0.3s cubic-bezier(0.16,1,0.3,1);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* Mobile WhatsApp bubble */
.whatsapp-fab {
  position: fixed; bottom: 24px; right: 24px;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  color: white; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 50; transition: transform 0.2s ease;
}
.whatsapp-fab:hover { transform: scale(1.08); }
@media (min-width: 768px) { .whatsapp-fab { display: none; } }

/* Nav active link */
.nav-link.active { color: var(--sage-700); }
.nav-link.active::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--sage-500);
  margin-top: 2px;
}

/* ── Skip link (keyboard accessibility) ─────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px; left: 16px;
  background: var(--sage-700);
  color: var(--cream);
  padding: 12px 20px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 9999;
  transition: top 0.18s ease;
  border-radius: 999px;
}
.skip-link:focus { top: 12px; outline: 2px solid var(--terra-500); outline-offset: 2px; }

/* ── Focus visibility (keyboard nav) ─────────────────────────────────── */
*:focus-visible { outline: 2px solid var(--sage-700); outline-offset: 2px; border-radius: 2px; }
.btn:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--sage-700); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .reveal, .drift, .btn-shine::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* logo-contrast-guard */
.logo-placeholder{background:var(--ink,#161616);color:#fff;border-radius:9px;}

/* heading-balance */
.display,h1,h2,h3{text-wrap:balance;}

/* hero-heading-fit */
#main-content .max-w-4xl{max-width:66rem;}
@media(min-width:1024px){#main-content .display{font-size:4.5rem;line-height:1.06;}}