/* Warm Practitioner. Shared styles + animations */
:root {
  --cream:   #F8F2E9;
  --sand:    #EFE6D6;
  --sage-50: #F6EFE2;
  --sage-200:#CEDBC9;
  --sage-500:#A9C0A6;
  --sage-700:#2E4A3A;
  --sage-900:#1E3328;
  --terra-400:#E8B84A;
  --terra-500:#D9A53E;
  --terra-600:#BF8E2E;
  --ink:     #2C2620;
}
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: 'Inter', 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: 'Cormorant Garamond', Georgia, serif; }
/* Editorial italic accent: the emphasized phrase in a serif headline sits in
   italic accent colour while the rest stays ink. The biggest "designed" signal. */
.serif-accent { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; color: var(--terra-600); }

/* Soft film grain overlay for dark gradient bands (band-green / loc). Adds depth
   instead of a flat fill. Pure CSS, no image request. Parent must be position:relative. */
.grain { position: relative; }
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.5; mix-blend-mode: soft-light; z-index: 0;
  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");
}
.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); }

/* 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-step.hidden { display: none; }
.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: 'Inter', 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;}}