/*
Theme Name: Sattva Ayurveda
Theme URI: https://example.com/sattva-ayurveda
Author: Your Studio
Author URI: https://example.com
Description: An animated, modern WordPress theme for Ayurveda therapy centers, spas and wellness clinics. Scroll-reveal sections, animated counters, a testimonial carousel and gentle motion throughout, inspired by the layout energy of premium Ayurveda template kits — built as a clean treatment/booking site (no shop) with fully placeholder, editable content.
Version:           1.37.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sattva-ayurveda
Tags: custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, wide-blocks, accessibility-ready
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  --color-bg:            #FFFFFF;
  --color-bg-alt:        #F4F8F8;
  --color-surface:       #FFFFFF;

  --color-primary:        #6CAAA8;   /* sattva teal */
  --color-primary-dark:   #237639;   /* green (was teal #345A59) — used for buttons/text/footer where solid contrast is needed */
  --color-primary-darker: #185027;   /* green — hover/pressed state; recomputed to the same proportional darkening the old teal pair used (#243D3D was ~68.5% of #345A59 per channel), so the hover/pressed transition and the achievements-band gradient (both pair this with --color-primary-dark) stay a clean same-hue shift instead of jumping to a leftover teal */
  --color-primary-light:  #9AC1C0;   /* teal — soft gradients/decorative fills only; left as teal (not part of the requested swap) and still reads cleanly as a secondary accent next to the new green */

  --color-accent:        #C9972E;   /* turmeric gold */
  --color-accent-dark:   #A97B1E;
  --color-accent-soft:   #F1DFAE;

  --color-rose:          #B5654A;   /* warm terracotta, secondary accent */

  --color-text:          #20241C;
  --color-text-muted:    #666F5E;
  --color-border:        #D7E6E5;

  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* Minimal 3D heading effect — a single subtle step plus a soft, low
     -opacity drop shadow for a gentle lift rather than a heavy carved
     look. One version for dark-teal headings on the light/cream
     background (most headings), one inverse version for the handful of
     white headings that sit on a dark teal background (CTA band, footer). */
  --heading-3d:
    1px 1px 0 var(--color-primary),
    2px 3px 4px rgba(20,38,38,.2);
  --heading-3d-inverse:
    1px 1px 0 rgba(15,28,28,.3),
    2px 3px 4px rgba(0,0,0,.22);

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --container: 1260px;
  --gutter: 1.5rem;

  --shadow-soft: 0 20px 45px -20px rgba(18, 48, 36, .28);
  --shadow-lift: 0 30px 60px -25px rgba(18, 48, 36, .38);

  --ease: cubic-bezier(.16,.84,.44,1);
  --dur: .7s;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color: var(--color-primary-dark); text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading); color: var(--color-primary-dark); line-height:1.2;
  margin:0 0 .6em; font-weight:600;
}
/* Large display headings get the full extruded depth; h3 and smaller use a
   lighter 1-2px version scaled to their size — the full effect looks
   cluttered at small text sizes (card titles, widget headings). */
h1,h2{ text-shadow: var(--heading-3d); }
h3,h4,h5,h6{ text-shadow: 1px 1px 0 var(--color-primary), 1px 2px 2px rgba(20,38,38,.18); }
h1{ font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
h2{ font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
h3{ font-size: 1.15rem; }
p{ margin:0 0 1em; }
.container{ max-width: var(--container); margin:0 auto; padding: 0 var(--gutter); }
.section{ padding: 6rem 0; }
.section--alt{ background: var(--color-bg-alt); }
.screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--color-primary-dark); color:#fff;
  padding:.8em 1.4em; z-index:10000; border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline: 3px solid var(--color-accent); outline-offset:2px; }

.section-eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--font-body); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:.78rem; color: var(--color-accent-dark); margin-bottom:1em;
}
.section-eyebrow::before{ content:""; width:22px; height:2px; background: var(--color-accent); display:inline-block; }
.section-head{ max-width:640px; margin:0 auto 3.2rem; text-align:center; }
.section-head p{ color: var(--color-text-muted); }
.lead{ font-size:1.15rem; color: var(--color-text-muted); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6em; justify-content:center;
  padding:.95em 2em; border-radius: var(--radius-pill); font-weight:700; font-size:.95rem;
  border:2px solid transparent; cursor:pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn--primary{ background: var(--color-primary-dark); color:#fff; box-shadow: var(--shadow-soft); }
.btn--primary:hover{ background: var(--color-primary-darker); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.btn--accent{ background: var(--color-accent); color: var(--color-primary-dark); box-shadow: 0 18px 40px -18px rgba(201,151,46,.6); }
.btn--accent:hover{ background: var(--color-accent-dark); transform: translateY(-3px); }
.btn--outline{ background:transparent; border-color: var(--color-primary-dark); color: var(--color-primary-dark); }
.btn--outline:hover{ background: var(--color-primary-dark); color:#fff; transform: translateY(-3px); }
.btn:active{ transform: translateY(0); }

.checklist li{ position:relative; padding-left:2em; margin-bottom:.7em; color: var(--color-text); }
.checklist li::before{
  content:"✓"; position:absolute; left:0; top:-.05em; width:1.4em; height:1.4em; border-radius:50%;
  background: var(--color-accent-soft); color: var(--color-accent-dark); font-weight:800; font-size:.8em;
  display:flex; align-items:center; justify-content:center;
}

.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items:center; }
.split__media{ position:relative; }
.split__media img{ border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }

/* Placeholder media panel (used until real photography is added) */
.ph{
  border-radius: var(--radius-md); border:1px solid var(--color-border);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  color: rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center;
  font-family: var(--font-body); font-size:.8rem; letter-spacing:.05em; text-align:center; padding:1rem;
  min-height: 220px;
}
.ph--gold{ background: linear-gradient(135deg, var(--color-accent-soft), var(--color-accent)); color: var(--color-primary-dark); }

/* =========================================================
   SCROLL-REVEAL / MOTION UTILITIES
   ========================================================= */
[data-reveal]{
  opacity:0; transform: translateY(34px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform: translateX(-42px); }
[data-reveal="left"].is-visible{ transform:none; }
[data-reveal="right"]{ transform: translateX(42px); }
[data-reveal="right"].is-visible{ transform:none; }
[data-reveal="scale"]{ transform: scale(.92); }
[data-reveal="scale"].is-visible{ transform:none; }

@keyframes float-y{
  0%, 100%{ transform: translateY(0) rotate(var(--float-rot, 0deg)); }
  50%{ transform: translateY(-16px) rotate(var(--float-rot, 0deg)); }
}
.float{ animation: float-y 6s ease-in-out infinite; }
.float--slow{ animation-duration: 9s; }
.float--delay{ animation-delay: 1.4s; }

.leaf-deco{
  position:absolute; pointer-events:none; opacity:.55; z-index:0;
  color: var(--color-primary-light);
}
.leaf-deco svg{ width:100%; height:100%; display:block; }

/* Animated olive leaf: a lone leaf that drifts gently up/down and side to
   side while rotating a few degrees each way, as if hanging from a branch
   and stirred by a light breeze — combines vertical bob (like .float above)
   with horizontal drift and a rotation swing in one loop, rather than just
   floating straight up and down. */
@keyframes olive-sway{
  0%,   100%{ transform: translate(0, 0)    rotate(-6deg); }
  25%{        transform: translate(6px, -14px) rotate(3deg); }
  50%{        transform: translate(-3px, -22px) rotate(8deg); }
  75%{        transform: translate(-7px, -8px)  rotate(-2deg); }
}
.olive-leaf{
  position:absolute; pointer-events:none; z-index:2; /* above .hero-slider/.hero__badge (z-index:1) so it isn't painted over where it overlaps the photo */
  color: var(--color-primary-light);
  transform-origin: 50% 8%; /* pivot near the stem end, like it's hanging from a branch */
  animation: olive-sway 8s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(36,61,61,0.12));
}
.olive-leaf svg{ width:100%; height:100%; display:block; }
.olive-leaf--slow{ animation-duration: 11s; }
.olive-leaf--delay{ animation-delay: 1.8s; }

@keyframes count-pulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}
.is-counting{ animation: count-pulse .4s var(--ease); }

/* =========================================================
   TOP BAR (contact info + social icons)
   ========================================================= */
.site-topbar{
  background: var(--color-primary-dark);
}
.site-topbar__inner{
  max-width: var(--container); margin:0 auto; padding: .45rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.site-topbar__contact{
  display:flex; align-items:center; gap:1.1rem; min-width:0;
  font-size:.8rem; color:rgba(255,255,255,.92);
}
.site-topbar__contact-item{
  display:flex; align-items:center; gap:.4rem; white-space:nowrap;
  color:inherit; text-decoration:none;
}
.site-topbar__contact-item svg{ flex-shrink:0; opacity:.85; }
a.site-topbar__contact-item:hover{ color:#fff; text-decoration:underline; }
.site-topbar__social{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.site-topbar__social a{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; background: rgba(255,255,255,.14);
  transition: background .3s, transform .3s;
}
.site-topbar__social a:hover{ background: var(--color-accent); color: var(--color-primary-dark); transform: translateY(-2px); }

@media (max-width: 640px){
  .site-topbar__inner{ padding: .4rem var(--gutter); gap:.6rem; }
  /* Address is the least essential of the three contact pieces at this
     width — dropped first so the phone number (actionable, tel: link)
     and the social icons both keep their own breathing room on one
     line instead of wrapping to a second row. */
  .site-topbar__contact-item--area{ display:none; }
  .site-topbar__contact{ font-size:.74rem; gap:.5rem; }
  .site-topbar__social{ gap:.45rem; }
  .site-topbar__social a{ width:23px; height:23px; }
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 999;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow .3s;
}
.site-header.is-scrolled{ box-shadow: 0 10px 30px -20px rgba(18,48,36,.4); }
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.1rem var(--gutter);
  max-width: var(--container); margin:0 auto; gap:1.5rem;
}
.site-branding{ display:flex; align-items:center; gap:.6rem; }
.site-title{ font-family: var(--font-heading); font-size:1.6rem; margin:0; color: var(--color-primary-dark); }
.site-title a{ color:inherit; }
.site-description{ font-size:.75rem; color: var(--color-text-muted); margin:0; }
.site-logo-link{ display:inline-flex; align-items:center; line-height:0; }
.site-logo-image{
  height: 52px; width: auto; max-width: 220px;
  display:block; object-fit: contain;
}
@media (max-width: 600px){
  .site-logo-image{ height: 40px; max-width: 170px; }
}

.main-navigation{ display:flex; align-items:center; gap:2rem; }
.main-navigation ul{ display:flex; gap:1.8rem; }
.main-navigation a{
  color: var(--color-text); font-weight:600; font-size:.95rem; position:relative; padding:.3em 0;
}
.main-navigation a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background: var(--color-accent);
  transition: right .3s var(--ease);
}
.main-navigation a:hover::after, .main-navigation .current-menu-item a::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:1rem; }
.header-icon-link{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--color-bg-alt); font-size:1.1rem; transition: background .3s, transform .3s;
}
.header-icon-link:hover{ background: var(--color-accent-soft); transform: translateY(-2px); }
.menu-toggle{
  display:none; background:none; border:none; font-size:1.4rem; cursor:pointer; color: var(--color-primary-dark);
  width:42px; height:42px; align-items:center; justify-content:center;
}

@media (max-width: 960px){
  .main-navigation{ display:none; }
  .menu-toggle{ display:flex; }
  .site-header.nav-open .main-navigation{
    display:flex; position:absolute; top:100%; left:0; right:0;
    background: var(--color-surface); flex-direction:column; align-items:flex-start;
    padding: 1.5rem var(--gutter); border-bottom:1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
  }
  .site-header.nav-open .main-navigation ul{ flex-direction:column; gap:1rem; width:100%; }
  .header-actions a.btn{ display:none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; padding: 5rem 0 6rem; overflow:hidden; }
.hero__grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:3.5rem; align-items:center; position:relative; z-index:1; }
.hero__content .section-eyebrow{ margin-bottom:1.2em; }
.hero__content h1{ margin-bottom:.5em; }
.hero__content .lead{ max-width: 480px; margin-bottom:2em; }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.hero__stats{ display:flex; gap:2.4rem; flex-wrap:wrap; }
.hero__stat strong{ display:block; font-family: var(--font-heading); font-size:1.7rem; color: var(--color-primary-dark); }
.hero__stat span{ font-size:.82rem; color: var(--color-text-muted); }

.hero__media{ position:relative; }
.hero__media .ph{ border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); width:100%; aspect-ratio: 4/5; object-fit:cover; transition: transform .25s ease-out; }

/* Hero image slider — several images cross-fade in place of one static
   photo. The container carries the sizing/shadow/parallax-transform that
   used to live on a single <img>; slides are absolutely stacked inside it
   and only their opacity animates, so the crossfade and the mouse-parallax
   transform never fight each other. */
.hero-slider{
  position:relative; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
  width:100%; aspect-ratio: 4/5; overflow:hidden; transition: transform .25s ease-out;
}
.hero-slider__slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity 1.6s var(--ease);
}
.hero-slider__slide.is-active{ opacity:1; }
.hero-slider__dots{
  position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%);
  display:flex; gap:.5rem; z-index:2;
}
.hero-slider__dot{
  width:8px; height:8px; border-radius:50%; padding:0; border:1.5px solid rgba(255,255,255,.85);
  background: rgba(255,255,255,.25); cursor:pointer; transition: background .25s var(--ease), transform .25s var(--ease);
}
.hero-slider__dot.is-active{ background:#fff; transform:scale(1.15); }
.hero__badge{
  position:absolute; left:-1.6rem; bottom:1.8rem; background: var(--color-surface);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lift); padding:1rem 1.3rem;
  display:flex; align-items:center; gap:.8rem; max-width:220px;
}
.hero__badge .dot{ width:12px; height:12px; border-radius:50%; background: var(--color-accent); flex:none; }
.hero__ring{
  position:absolute; top:-2rem; right:-2rem; width:140px; height:140px; border-radius:50%;
  border: 2px dashed var(--color-accent); opacity:.5;
}

@media (max-width: 900px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__media{ order:-1; }
  .hero__badge{ left:1rem; }
}

/* Video-hero variant (v1.30.0) — a full-bleed, looping background video
   behind the whole hero section (heading, text, CTAs, stats), replacing
   the two-column text + photo-slider layout above. The rules above
   (.hero__media / .hero-slider / .hero__blob / .hero__ring / .hero__badge
   without the --video modifier) are no longer printed by front-page.php
   but are left in place, harmless and unreferenced — same precedent as
   keeping sattva_olive_leaf_svg() defined-but-unused after v1.19.1. */
.hero--video{
  padding:0; min-height: min(92vh, 780px); display:flex; align-items:center;
}
.hero__bg-video{ position:absolute; inset:0; z-index:0; overflow:hidden; background: var(--color-primary-dark); }
.hero__bg-video-el{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hero__bg-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Centered radial wash (was a left-to-right linear gradient tuned for the
     old left-aligned text column) — the text block now sits in the middle
     of the section, so the darkest overlay needs to sit there too, with a
     flat base wash underneath so the edges stay readable-dark as well
     rather than going distractingly bright. */
  background:
    radial-gradient(ellipse 60% 85% at center, rgba(10,26,22,.6) 0%, rgba(10,26,22,.3) 60%, rgba(10,26,22,.12) 100%),
    rgba(10,26,22,.28);
}
.hero--video .hero__grid{
  display:block; position:relative; z-index:2; max-width:640px; padding: 7rem 0;
  /* Centered on the screen, per request — was a left-aligned block flush
     with the container's left edge. */
  margin:0 auto; text-align:center;
}
.hero--video .hero__content h1{ color:#fff; text-shadow: var(--heading-3d-inverse); }
.hero--video .section-eyebrow{ color: var(--color-accent-soft); }
.hero--video .section-eyebrow::before{ background: var(--color-accent-soft); }
.hero--video .lead{ color: rgba(255,255,255,.88); margin-left:auto; margin-right:auto; }
.hero--video .hero__cta{ justify-content:center; }
.hero--video .hero__stats{ justify-content:center; }
.hero--video .hero__stat strong{ color: var(--color-accent-soft); }
.hero--video .hero__stat span{ color: rgba(255,255,255,.82); }
.hero--video .btn--outline{ border-color:#fff; color:#fff; }
.hero--video .btn--outline:hover{ background:#fff; color: var(--color-primary-dark); }

.hero__badge--video{
  position:absolute; z-index:2; left: var(--gutter); bottom:1.6rem;
  background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-lift);
  padding:1rem 1.3rem; display:flex; align-items:center; gap:.8rem; max-width:240px;
}

/* Phones & tablets (<=900px): the background video now PLAYS here too
   (v1.35.1 — v1.30.0 deliberately hid it below this width and showed only
   the still poster, which the site owner reported as "the mobile home page
   video is not playing"). The poster is painted as the section background
   at every width (via the --hero-poster-url custom property set inline on
   .hero__bg-video) so there is a picture while the video buffers and as
   the fallback if a phone blocks autoplay (Low Power / Data Saver mode) or
   the visitor prefers reduced motion. The video file itself was shrunk to
   ~0.8 MB in v1.32.1, so playing it on cellular is cheap. Only the layout
   and overlay are tuned for portrait screens here. */
.hero__bg-video{ background-image: var(--hero-poster-url); background-size:cover; background-position:center; }
@media (max-width: 900px){
  .hero--video{ min-height: min(100vh, 640px); }
  /* Bottom padding leaves room for the "100% Natural Care" badge, which is
     pinned to the bottom edge — before v1.35.1 it overlapped the stat
     labels (Years Experience / Clients Treated / Average Rating). */
  .hero--video .hero__grid{ padding: 4.5rem var(--gutter) 8.5rem; max-width:none; }
  .hero__badge--video{ left:1rem; right:1rem; max-width:none; bottom:1.2rem; padding:.8rem 1.1rem; }
  /* Text spans the full width on a phone, so darken the whole frame a bit
     more evenly than the centred wash used on desktop. */
  .hero__bg-overlay{
    background:
      linear-gradient(180deg, rgba(10,26,22,.5) 0%, rgba(10,26,22,.62) 50%, rgba(10,26,22,.72) 100%);
  }
}

/* =========================================================
   CATEGORY / USP STRIP
   ========================================================= */
.category-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1.6rem; }
.category-card{
  background: var(--color-surface); border-radius: var(--radius-md); padding:2.2rem 1.6rem;
  text-align:center; box-shadow: var(--shadow-soft); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  border: 1px solid var(--color-border);
}
.category-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lift); border-color: var(--color-accent); }
.category-card .icon{
  width:64px; height:64px; margin:0 auto 1.1rem; border-radius:50%; background: var(--color-bg-alt);
  display:flex; align-items:center; justify-content:center; font-size:1.7rem; transition: transform .4s var(--ease), background .4s;
}
.category-card:hover .icon{ background: var(--color-accent-soft); transform: rotate(-8deg) scale(1.08); }
.category-card h4{ font-family: var(--font-body); font-weight:700; font-size:1rem; margin-bottom:.3em; }
.category-card p{ font-size:.85rem; color: var(--color-text-muted); margin:0; }

@media (max-width: 900px){ .category-grid{ grid-template-columns: repeat(2, 1fr); } }

/* =========================================================
   TREATMENTS
   ========================================================= */
.treatments-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:2rem; }
.treatment-card{
  background: var(--color-surface); border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-soft);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease); border:1px solid var(--color-border);
}
.treatment-card:hover{ transform: translateY(-10px); box-shadow: var(--shadow-lift); }
.treatment-card__media{ position:relative; overflow:hidden; }
.treatment-card__media img, .treatment-card__media .ph{ aspect-ratio: 4/3; object-fit:cover; width:100%; border-radius:0; transition: transform .6s var(--ease); }
.treatment-card:hover .treatment-card__media img{ transform: scale(1.08); }
.treatment-card__body{ padding:1.6rem; }
.treatment-card__body h3{ margin-bottom:.4em; font-size:1.15rem; }
.treatment-card__body h3 a{ color: var(--color-primary-dark); }
.treatment-card__meta{ display:flex; justify-content:space-between; align-items:center; margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--color-border); font-size:.85rem; color: var(--color-text-muted); }
.treatment-card__price{ font-weight:800; color: var(--color-accent-dark); font-size:1rem; }

@media (max-width: 960px){ .treatments-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .treatments-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   ACHIEVEMENTS / COUNTERS
   ========================================================= */
.achievements{
  background: var(--color-primary-dark); color:#fff; border-radius: var(--radius-lg); padding: .9rem 2rem;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:.75rem; text-align:center; position:relative; overflow:hidden;
}
.achievements::before{
  content:""; position:absolute; inset:0; background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.08), transparent 55%);
}
.achievement-item{ position:relative; z-index:1; }
.achievement-item strong{
  display:block; font-family: var(--font-heading); font-size: clamp(1.6rem, 2.4vw, 2.2rem); color: var(--color-accent-soft); margin-bottom:.1em;
}
.achievement-item span{ font-size:.85rem; opacity:.85; }
@media (max-width: 900px){ .achievements{ grid-template-columns: repeat(2,1fr); padding: .8rem 1.5rem; gap:.8rem 1.2rem; } }

/* =========================================================
   WHY CHOOSE US
   ========================================================= */
.why-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1.8rem; }
.why-card{ text-align:center; padding:1rem; }
.why-card .icon{
  width:76px; height:76px; margin:0 auto 1.2rem; border-radius:50%; background: var(--color-surface);
  box-shadow: var(--shadow-soft); display:flex; align-items:center; justify-content:center; font-size:2rem;
  transition: transform .45s var(--ease);
}
.why-card:hover .icon{ transform: translateY(-6px) scale(1.05); }

@media (max-width: 900px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }

/* =========================================================
   FEATURES + VIDEO
   ========================================================= */
.features-media{ position:relative; }
.video-trigger{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; cursor:pointer;
  background: rgba(18,48,36,.25); border-radius: var(--radius-lg); border:none;
}
.video-trigger .play-btn{
  width:84px; height:84px; border-radius:50%; background: var(--color-accent); color: var(--color-primary-dark);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; box-shadow: var(--shadow-lift);
  transition: transform .35s var(--ease);
}
.video-trigger:hover .play-btn{ transform: scale(1.1); }
@keyframes ping{
  0%{ box-shadow: 0 0 0 0 rgba(201,151,46,.55); }
  100%{ box-shadow: 0 0 0 26px rgba(201,151,46,0); }
}
.video-trigger .play-btn::after{
  content:""; position:absolute; width:84px; height:84px; border-radius:50%; animation: ping 2.2s infinite;
}
.video-modal{
  position:fixed; inset:0; background:rgba(18,24,18,.9); z-index:9999; display:none;
  align-items:center; justify-content:center; padding:2rem;
}
.video-modal.is-open{ display:flex; }
.video-modal__inner{ width:100%; max-width:900px; aspect-ratio:16/9; position:relative; }
.video-modal__inner iframe{ width:100%; height:100%; border-radius: var(--radius-md); }
.video-modal__close{
  position:absolute; top:-2.6rem; right:0; background:none; border:none; color:#fff; font-size:1.6rem; cursor:pointer;
}

/* =========================================================
   CAPTCHA — page-templates/template-book-appointment.php
   ========================================================= */
.sattva-captcha__row{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.sattva-captcha__image{ border-radius: var(--radius-sm); border:1px solid rgba(0,0,0,.08); display:block; flex-shrink:0; }
.sattva-captcha__refresh{
  background:none; border:1px solid rgba(0,0,0,.12); border-radius: var(--radius-sm); width:38px; height:38px;
  font-size:1.15rem; line-height:1; cursor:pointer; color: var(--color-primary-dark); transition: background .3s, transform .3s;
  flex-shrink:0;
}
.sattva-captcha__refresh:hover{ background: rgba(0,0,0,.05); transform: rotate(60deg); }
.sattva-captcha__input{ flex:1 1 140px; min-width:120px; }

/* =========================================================
   GALLERY (grid + lightbox) — page-templates/template-gallery.php
   ========================================================= */
.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1.2rem; }
.gallery-grid__item{
  position:relative; aspect-ratio:1/1; overflow:hidden; border-radius: var(--radius-md); border:none; padding:0;
  cursor:pointer; box-shadow: var(--shadow-soft); background:none;
}
.gallery-grid__item img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s var(--ease); }
.gallery-grid__item:hover img, .gallery-grid__item:focus-visible img{ transform: scale(1.08); }
.gallery-grid__tag{
  position:absolute; left:.6rem; bottom:.6rem; background: rgba(18,48,36,.75); color:#fff; font-size:.72rem;
  padding:.3em .7em; border-radius: var(--radius-sm); opacity:0; transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.gallery-grid__item:hover .gallery-grid__tag, .gallery-grid__item:focus-visible .gallery-grid__tag{ opacity:1; transform:none; }

@media (max-width: 960px){ .gallery-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr); gap:.8rem; } }

.gallery-lightbox{
  position:fixed; inset:0; background:rgba(18,24,18,.92); z-index:9999; display:none;
  align-items:center; justify-content:center; padding:2rem;
}
.gallery-lightbox.is-open{ display:flex; }
.gallery-lightbox__inner{ position:relative; width:100%; max-width:900px; text-align:center; }
.gallery-lightbox__image{ width:100%; max-height:75vh; object-fit:contain; border-radius: var(--radius-md); }
.gallery-lightbox__caption{ color:#fff; margin-top:1rem; font-size:.9rem; opacity:.85; }
.gallery-lightbox__close{
  position:absolute; top:-2.6rem; right:0; background:none; border:none; color:#fff; font-size:1.6rem; cursor:pointer;
}
.gallery-lightbox__nav{
  position:absolute; top:50%; transform: translateY(-50%); background: rgba(255,255,255,.14); border:none; color:#fff;
  width:44px; height:44px; border-radius:50%; font-size:1.6rem; line-height:1; cursor:pointer; transition: background .3s;
}
.gallery-lightbox__nav:hover{ background: rgba(255,255,255,.28); }
.gallery-lightbox__nav--prev{ left:-1.2rem; }
.gallery-lightbox__nav--next{ right:-1.2rem; }
@media (max-width: 720px){
  .gallery-lightbox__nav{ width:38px; height:38px; font-size:1.3rem; }
  .gallery-lightbox__nav--prev{ left:.2rem; }
  .gallery-lightbox__nav--next{ right:.2rem; }
}

/* =========================================================
   TESTIMONIALS CAROUSEL
   ========================================================= */
.testimonial-carousel{ position:relative; max-width:760px; margin:0 auto; }
.testimonial-track{ overflow:hidden; }
.testimonial-slides{ display:flex; transition: transform .6s var(--ease); }
.testimonial-slide{ flex: 0 0 100%; padding: .5rem; }
.testimonial-card{
  background: var(--color-surface); border-radius: var(--radius-lg); padding:2.6rem; text-align:center;
  box-shadow: var(--shadow-soft); border:1px solid var(--color-border);
}
.testimonial-card .stars{ color: var(--color-accent); letter-spacing:.2em; margin-bottom:1rem; }
.testimonial-card p{ font-size:1.1rem; font-style:italic; color: var(--color-text); }
.testimonial-card__person{ display:flex; align-items:center; justify-content:center; gap:.8rem; margin-top:1.4rem; }
.testimonial-card__person img{ width:52px; height:52px; border-radius:50%; object-fit:cover; }
.testimonial-card__person strong{ display:block; font-size:.95rem; }
.testimonial-card__person span{ font-size:.8rem; color: var(--color-text-muted); }
.carousel-nav{ display:flex; justify-content:center; gap:.8rem; margin-top:1.6rem; }
.carousel-dot{
  width:10px; height:10px; border-radius:50%; background: var(--color-border); border:none; cursor:pointer;
  transition: background .3s, transform .3s;
}
.carousel-dot.is-active{ background: var(--color-accent); transform: scale(1.3); }
.carousel-arrow{
  position:absolute; top:50%; transform: translateY(-50%); background: var(--color-surface); border:1px solid var(--color-border);
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow: var(--shadow-soft); transition: background .3s, transform .3s;
}
.carousel-arrow:hover{ background: var(--color-accent-soft); }
.carousel-arrow--prev{ left:-1.4rem; }
.carousel-arrow--next{ right:-1.4rem; }
@media (max-width: 820px){ .carousel-arrow{ display:none; } }

/* =========================================================
   TEAM
   ========================================================= */
/* v1.36.1: flex + justify-content:center (was a 4-/2-column grid) so a
   short or odd last row — e.g. a single practitioner — sits centered
   instead of hugging the left edge. 4 per row, 2 below 960px, 1 below 600px. */
.team-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.8rem; }
.team-card{ text-align:center; flex:0 1 calc((100% - 5.4rem) / 4); min-width:0; }
.team-card__media{ position:relative; border-radius: var(--radius-md); overflow:hidden; margin-bottom:1rem; }
.team-card__media img, .team-card__media .ph{ aspect-ratio: 3/4; object-fit:cover; width:100%; border-radius:0; transition: transform .5s var(--ease); }
.team-card:hover .team-card__media img{ transform: scale(1.06); }
.team-card__social{
  position:absolute; left:0; right:0; bottom:-100%; display:flex; justify-content:center; gap:.6rem;
  padding:1rem; background: linear-gradient(to top, rgba(18,48,36,.75), transparent); transition: bottom .4s var(--ease);
}
.team-card:hover .team-card__social{ bottom:0; }
.team-card__social a{
  width:34px; height:34px; border-radius:50%; background:#fff; color: var(--color-primary-dark);
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.team-card h3{ font-size:1.05rem; margin-bottom:.1em; }
.team-card span{ font-size:.82rem; color: var(--color-accent-dark); font-weight:600; }
/* Practitioners page (v1.33.0): bio teaser, always-visible social icons, profile link */
.team-card__bio{ font-size:.9rem; color: var(--color-text-muted); line-height:1.6; margin:.7rem 0 .2rem; }
.team-links{ display:flex; justify-content:center; gap:.6rem; margin:.9rem 0 .2rem; }
.team-links--left{ justify-content:flex-start; margin:1.4rem 0 0; }
.team-links a{
  width:36px; height:36px; border-radius:50%; background: var(--color-primary-dark); color:#fff;
  display:flex; align-items:center; justify-content:center; transition: background .3s, color .3s, transform .3s;
}
.team-links a svg{ width:18px; height:18px; }
.team-links a:hover{ background: var(--color-accent); color: var(--color-primary-dark); transform: translateY(-2px); }
.team-card__more{ display:inline-block; margin-top:.7rem; font-size:.85rem; font-weight:700; color: var(--color-primary-dark); }
/* Services category tabs (v1.34.0) */
.service-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin:0 0 2.6rem; }
.service-tabs__tab{
  padding:.65rem 1.4rem; border-radius:999px; border:2px solid var(--color-primary-dark);
  font-weight:700; font-size:.92rem; color: var(--color-primary-dark); background:transparent;
  transition: background .3s, color .3s, transform .3s;
}
.service-tabs__tab:hover{ background: var(--color-bg-alt); transform: translateY(-2px); }
.service-tabs__tab.is-active{ background: var(--color-primary-dark); color:#fff; }
.service-cat-desc{ max-width:620px; margin:.8rem auto 0; color: var(--color-text-muted); }
.team-card__more:hover{ color: var(--color-accent-dark); }
.team-card__social a svg{ width:16px; height:16px; }

@media (max-width: 960px){ .team-card{ flex-basis: calc((100% - 1.8rem) / 2); } }
@media (max-width: 600px){ .team-card{ flex-basis: 100%; max-width: 320px; } }

/* =========================================================
   BLOG / POST CARDS
   ========================================================= */
.blog-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:2rem; }
.post-card{ background: var(--color-surface); border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-soft); border:1px solid var(--color-border); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.post-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.post-card__media img, .post-card__media .ph{ aspect-ratio:16/10; object-fit:cover; width:100%; border-radius:0; }
.post-card__body{ padding:1.5rem; }
.post-card__meta{ font-size:.78rem; color: var(--color-accent-dark); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-bottom:.5em; }
.post-card__body h3{ font-size:1.1rem; margin-bottom:.4em; }
.post-card__body h3 a{ color: var(--color-primary-dark); }

@media (max-width: 960px){ .blog-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .blog-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   NEWSLETTER / CTA
   ========================================================= */
.cta-banner{
  background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary-darker));
  color:#fff; border-radius: var(--radius-lg); padding: 3.6rem 2rem; text-align:center; position:relative; overflow:hidden;
}
.cta-banner h2{ color:#fff; text-shadow: var(--heading-3d-inverse); }
.cta-banner p{ color: rgba(255,255,255,.8); max-width:520px; margin-inline:auto; }
.newsletter{
  background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: 3rem 2rem; text-align:center;
}
.newsletter form{ display:flex; gap:.8rem; max-width:460px; margin:1.6rem auto 0; }
.newsletter input[type="email"]{
  flex:1; padding:.9em 1.2em; border-radius: var(--radius-pill); border:1px solid var(--color-border); font-family: var(--font-body);
}

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.faq-list{ max-width:800px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--color-border); }
.faq-item__q{
  width:100%; text-align:left; background:none; border:none; padding:1.4rem .2rem; font-family: var(--font-heading);
  font-size:1.05rem; color: var(--color-primary-dark); display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; gap:1rem;
}
.faq-item__icon{ flex:none; width:28px; height:28px; border-radius:50%; background: var(--color-bg-alt); display:flex; align-items:center; justify-content:center; transition: transform .35s var(--ease), background .3s; }
.faq-item.is-open .faq-item__icon{ transform: rotate(45deg); background: var(--color-accent-soft); }
.faq-item__a{ max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.faq-item.is-open .faq-item__a{ max-height:400px; }
.faq-item__a p{ padding: 0 .2rem 1.4rem; color: var(--color-text-muted); }

/* =========================================================
   BOOK AN APPOINTMENT PAGE
   ========================================================= */
/* Honeypot field for the booking form: invisible to real visitors
   (off-screen, not display:none, so most spam bots that skip hidden
   fields still fill it) but present in the DOM for bots that fill every
   field indiscriminately — see the Sattva Dashboard plugin's booking
   handler, which silently ignores any submission where this is filled. */
.booking-form-hp{
  position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden;
}
.booking-form-notice{
  border-radius: var(--radius-sm); padding: 1em 1.2em; margin-bottom:1.4rem; font-size:.92rem; line-height:1.5;
}
.booking-form-notice--success{ background:#E3F3E1; color:#2E6B2A; border:1px solid #BFE3BC; }
.booking-form-notice--error{ background:#F5E1DC; color:#8A3B26; border:1px solid #E6BBA9; }
.booking-steps{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1.4rem; margin: 0 0 3.2rem;
}
.booking-step{
  background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
  padding: 1.6rem 1.4rem; text-align:center;
}
.booking-step__num{
  width:42px; height:42px; border-radius:50%; background: var(--color-accent); color: var(--color-primary-dark);
  display:flex; align-items:center; justify-content:center; font-family: var(--font-heading); font-weight:700;
  margin: 0 auto .9rem;
}
.booking-step h3{ font-size:1.05rem; margin-bottom:.4em; }
.booking-step p{ color: var(--color-text-muted); font-size:.92rem; margin:0; }

.booking-grid{ display:grid; grid-template-columns: 1.6fr 1fr; gap: 2.4rem; align-items:start; }

.booking-form-card{
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  padding: 2.2rem; border: 1px solid var(--color-border);
}
.booking-form-card h2{ margin-bottom:.3em; }
.booking-form-card > p{ color: var(--color-text-muted); margin-bottom:1.8rem; }

.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem; }
.form-group{ margin-bottom:1.3rem; }
.form-group label{
  display:block; margin-bottom:.45rem; font-size:.86rem; font-weight:700; color: var(--color-primary-dark);
}
.form-group .req{ color: var(--color-rose); }
.form-group .hint{ display:block; font-weight:400; font-size:.78rem; color: var(--color-text-muted); margin-top:.2em; }

.form-control{
  width:100%; padding:.85em 1em; border-radius: var(--radius-sm); border:1.5px solid var(--color-border);
  font-family: var(--font-body); font-size:1rem; color: var(--color-text); background: var(--color-surface);
  min-height:48px; transition: border-color .25s, box-shadow .25s;
}
textarea.form-control{ min-height:120px; resize:vertical; }
.form-control:focus{
  outline:none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(108,170,168,.22);
}
select.form-control{
  appearance:none; -webkit-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23237639'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.19l3.71-3.96a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 1em center; background-size: 18px; padding-right:2.6em;
}

.booking-submit{ width:100%; justify-content:center; margin-top:.4rem; }
.booking-form-note{ font-size:.78rem; color: var(--color-text-muted); margin-top:.9rem; text-align:center; }

.booking-sidebar > *{ margin-bottom:1.5rem; }
.booking-sidebar > *:last-child{ margin-bottom:0; }
.booking-info-card{
  background: var(--color-bg-alt); border-radius: var(--radius-lg); padding:1.8rem;
}
.booking-info-card h3{ font-size:1.05rem; margin-bottom:1.1rem; }
.booking-info-list li{ display:flex; align-items:flex-start; gap:.9rem; margin-bottom:1rem; }
.booking-info-list li:last-child{ margin-bottom:0; }
.booking-info-list .dot{
  flex:none; width:34px; height:34px; border-radius:50%; background: var(--color-accent-soft);
  color: var(--color-primary-dark); display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.booking-info-list span{ font-size:.92rem; color: var(--color-text); line-height:1.5; }

.booking-call-card{
  background: var(--color-primary-dark); color:#fff; border-radius: var(--radius-lg); padding:1.8rem; text-align:center;
}
.booking-call-card p{ color: rgba(255,255,255,.78); font-size:.88rem; margin-bottom:1rem; }
.booking-call-card a.phone{
  display:block; font-family: var(--font-heading); font-size:1.5rem; color:#fff; margin-bottom:1.1rem;
}
.booking-call-card a.phone:hover{ color: var(--color-accent-soft); }

/* =========================================================
   PAGE / CONTENT DEFAULTS
   ========================================================= */
.page-header{ text-align:center; padding: 3.5rem 0 2.5rem; }
.entry-content{ max-width: 780px; margin: 0 auto; }
.entry-content h2{ margin-top:1.4em; }
.entry-content img{ border-radius: var(--radius-md); }
.entry-content a{ text-decoration: underline; text-decoration-color: var(--color-accent); }

.widget-area .widget{ margin-bottom:2.4rem; }
.widget-title{ font-family: var(--font-heading); font-size:1.1rem; margin-bottom:.8em; color: var(--color-primary-dark); }

.comment-list{ margin: 1.5rem 0; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--color-primary-dark); color: rgba(255,255,255,.82); margin-top: 5rem; position:relative; }
.site-footer .container{ padding-top: 4.5rem; padding-bottom: 2rem; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.6rem; }
.footer-grid h4{ font-family: var(--font-heading); font-size: 1.1rem; margin-bottom:1.2rem; }
/* Any heading anywhere inside the dark teal footer — the theme's own
   column titles, a classic widget's .widget-title, or a heading/Archives/
   Categories block dropped in via the block widget editor — should read
   as white, not the site-wide dark-teal heading color meant for light
   backgrounds. Covers every heading level so it holds up regardless of
   what gets added to the footer sidebars later. */
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6,
.site-footer .wp-block-heading{
  color:#fff; text-shadow: 1px 1px 0 rgba(15,28,28,.28), 1px 2px 2px rgba(0,0,0,.2);
}
.footer-grid p, .footer-grid a{ color: rgba(255,255,255,.7); font-size:.92rem; }
.footer-grid a:hover{ color: var(--color-accent-soft); }
.footer-grid li{ margin-bottom:.6rem; }
.social-links{ display:flex; gap:.7rem; margin-top:1.2rem; }
.social-links a{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center;
  transition: background .3s, transform .3s;
}
.social-links a:hover{ background: var(--color-accent); color: var(--color-primary-dark); transform: translateY(-3px); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:3rem; padding-top:1.6rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-size:.82rem; color: rgba(255,255,255,.55);
}

.back-to-top{
  position:fixed; right:1.6rem; bottom:1.6rem; width:48px; height:48px; border-radius:50%;
  background: var(--color-accent); color: var(--color-primary-dark); border:none; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-lift); cursor:pointer; opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .3s, transform .3s, visibility .3s; z-index: 500;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
/* Shares the bottom-right corner with the chat bubble below — shifted
   left out of its way whenever the chat widget is actually on the page. */
body.has-chatbot .back-to-top{ right:6.2rem; }
@media (max-width:640px){ body.has-chatbot .back-to-top{ right:1.6rem; bottom:5.6rem; } }

/* =========================================================
   CHAT WIDGET
   ========================================================= */
.sattva-chatbot{ position:fixed; right:1.6rem; bottom:1.6rem; z-index:9997; }
.sattva-chatbot__bubble{
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background: var(--color-primary-dark); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; box-shadow: var(--shadow-lift); transition: transform .25s var(--ease), background .25s;
}
.sattva-chatbot__bubble:hover{ background: var(--color-primary-darker); transform: scale(1.06); }
.sattva-chatbot[data-state="open"] .sattva-chatbot__bubble{ transform: scale(.92); }

.sattva-chatbot__panel{
  position:absolute; right:0; bottom:calc(60px + 1rem); width:360px; max-width: calc(100vw - 2.4rem);
  max-height: min(70vh, 560px); background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); border:1px solid var(--color-border); display:flex; flex-direction:column;
  overflow:hidden; opacity:0; transform: translateY(16px) scale(.98); pointer-events:none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.sattva-chatbot[data-state="open"] .sattva-chatbot__panel{ opacity:1; transform:none; pointer-events:auto; }
.sattva-chatbot__panel[hidden]{ display:none; } /* the .sattva-chatbot__panel rule above sets display:flex, which — being an author style — would otherwise override the browser's own [hidden] default; this restores it explicitly so JS can toggle the attribute to actually hide/show the panel (see chatbot.js's open()/close()). */

.sattva-chatbot__header{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:1rem 1.2rem;
  background: var(--color-primary-dark); color:#fff; flex:none;
}
.sattva-chatbot__header strong{ display:block; font-size:.95rem; }
.sattva-chatbot__header span{ display:block; font-size:.75rem; opacity:.8; }
.sattva-chatbot__close{ background:none; border:none; color:#fff; font-size:1.1rem; cursor:pointer; line-height:1; padding:.2rem; }

.sattva-chatbot__body{ flex:1 1 auto; overflow-y:auto; padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.7rem; }
.sattva-chatbot__msg{ max-width:88%; padding:.6rem .9rem; border-radius: var(--radius-md); font-size:.88rem; line-height:1.45; }
.sattva-chatbot__msg--bot{ align-self:flex-start; background: var(--color-bg-alt); color: var(--color-text); border-bottom-left-radius:4px; }
.sattva-chatbot__msg--user{ align-self:flex-end; background: var(--color-primary); color:#fff; border-bottom-right-radius:4px; }
.sattva-chatbot__msg a{ color: inherit; text-decoration: underline; }

.sattva-chatbot__quick-replies{ display:flex; flex-wrap:wrap; gap:.5rem; padding:0 1.1rem .8rem; flex:none; }
.sattva-chatbot__quick-replies:empty{ display:none; }
.sattva-chatbot__chip{
  border:1px solid var(--color-primary); color: var(--color-primary-dark); background: var(--color-surface);
  border-radius: var(--radius-pill); padding:.35rem .9rem; font-size:.78rem; cursor:pointer; transition: background .2s, color .2s;
}
.sattva-chatbot__chip:hover{ background: var(--color-primary); color:#fff; }

.sattva-chatbot__lead-form{ display:flex; flex-direction:column; gap:.5rem; padding:0 1.1rem 1rem; flex:none; border-top:1px solid var(--color-border); padding-top:.9rem; }
.sattva-chatbot__lead-form[hidden]{ display:none; }
.sattva-chatbot__lead-intro{ font-size:.82rem; color: var(--color-text-muted); margin:0; }
.sattva-chatbot__lead-form .form-control{ min-height:38px; font-size:.85rem; padding:.5rem .7rem; }
.sattva-chatbot__lead-form textarea.form-control{ min-height:56px; resize:vertical; }
.sattva-chatbot__lead-form .btn{ align-self:flex-start; padding:.5rem 1.3rem; font-size:.85rem; }
.sattva-chatbot__lead-status{ font-size:.8rem; margin:0; }
.sattva-chatbot__lead-status[data-type="success"]{ color: var(--color-primary-dark); }
.sattva-chatbot__lead-status[data-type="error"]{ color: var(--color-rose); }
.sattva-chatbot__hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

.sattva-chatbot__composer{ display:flex; gap:.5rem; padding:.8rem 1.1rem; border-top:1px solid var(--color-border); flex:none; }
.sattva-chatbot__composer .form-control{ min-height:40px; font-size:.85rem; }
.sattva-chatbot__composer button{
  width:40px; height:40px; flex:none; border:none; border-radius:50%; background: var(--color-accent);
  color: var(--color-primary-dark); font-size:1rem; cursor:pointer; transition: background .2s;
}
.sattva-chatbot__composer button:hover{ background: var(--color-accent-dark); color:#fff; }

@media (max-width:640px){
  .sattva-chatbot{ right:1rem; bottom:1rem; }
  .sattva-chatbot__panel{ width: calc(100vw - 2rem); max-height: 72vh; }
}
@media (prefers-reduced-motion: reduce){
  .sattva-chatbot__bubble, .sattva-chatbot__panel{ transition:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .split{ grid-template-columns:1fr; gap:2.5rem; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .booking-grid{ grid-template-columns: 1fr; }
  .booking-sidebar{ display:grid; grid-template-columns: 1fr 1fr; gap:1.5rem; }
  .booking-sidebar > *{ margin-bottom:0; }
}
@media (max-width: 640px){
  .section{ padding: 4rem 0; }
  .footer-grid{ grid-template-columns: 1fr; }
  .hero__stats{ gap:1.4rem; }
  .booking-steps{ grid-template-columns: 1fr; gap:1rem; }
  .booking-sidebar{ grid-template-columns: 1fr; gap:1.5rem; }
  .booking-sidebar > *{ margin-bottom:0; }
  .form-row{ grid-template-columns: 1fr; gap:0; }
  .booking-form-card{ padding:1.5rem 1.2rem; }
}

/* =========================================================
   PAGE LOAD TRANSITION
   Pure CSS (no JS dependency) so the page is never stuck hidden if a
   script fails to run.
   ========================================================= */
@keyframes page-fade-in{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform:none; }
}
#page{ animation: page-fade-in .7s var(--ease) both; }
@media (prefers-reduced-motion: reduce){
  #page{ animation: none; }
}

/* =========================================================
   SCROLL PROGRESS BAR
   ========================================================= */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-rose));
  z-index: 1100; transition: width .1s linear;
}

/* =========================================================
   MARQUEE TICKER
   ========================================================= */
.marquee{
  overflow:hidden; background: var(--color-primary-dark); padding: 1.1rem 0;
  white-space:nowrap; position:relative;
}
.marquee::before, .marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background: linear-gradient(90deg, var(--color-primary-dark), transparent); }
.marquee::after{ right:0; background: linear-gradient(270deg, var(--color-primary-dark), transparent); }
.marquee__track{
  display:inline-flex; align-items:center; gap:2.4rem;
  animation: marquee-scroll 26s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track{ animation-play-state: paused; }
.marquee__item{
  display:inline-flex; align-items:center; gap:.8rem;
  font-family: var(--font-heading); font-size:1.15rem; color: var(--color-accent-soft);
  letter-spacing:.02em;
}
.marquee__dot{ color: var(--color-accent); font-size:.9rem; }
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
}

/* =========================================================
   INGREDIENTS MARQUEE
   ========================================================= */
.ingredients-marquee{
  overflow:hidden; background: var(--color-surface); padding: 1.3rem 0;
  white-space:nowrap; position:relative;
  border-block: 1px solid var(--color-border);
}
.ingredients-marquee::before, .ingredients-marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.ingredients-marquee::before{ left:0; background: linear-gradient(90deg, var(--color-surface), transparent); }
.ingredients-marquee::after{ right:0; background: linear-gradient(270deg, var(--color-surface), transparent); }
.ingredients-marquee__track{
  display:inline-flex; align-items:center; gap:1.1rem;
  /* Scrolls right-to-left (opposite of .marquee__track below it) for a
     layered, not-identical feel between the two strips. */
  animation: ingredients-marquee-scroll 34s linear infinite;
  will-change: transform;
}
.ingredients-marquee:hover .ingredients-marquee__track{ animation-play-state: paused; }
.ingredients-marquee__item{
  display:inline-flex; align-items:center; gap:.65rem;
  background: var(--color-bg-alt); border-radius: var(--radius-md);
  padding: .55rem 1.15rem .55rem .65rem; flex:none;
}
.ingredients-marquee__icon{
  display:inline-flex; width:44px; height:44px; flex:none; border-radius:50%;
  overflow:hidden; border:2px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border);
}
.ingredients-marquee__icon img{
  width:100%; height:100%; display:block; object-fit:cover;
}
.ingredients-marquee__label{
  font-family: var(--font-heading); font-size:.95rem; font-weight:600;
  color: var(--color-text); letter-spacing:.01em;
}
@keyframes ingredients-marquee-scroll{
  from{ transform: translateX(-50%); }
  to{ transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce){
  .ingredients-marquee__track{ animation: none; }
}
@media (max-width: 640px){
  .ingredients-marquee__icon{ width:34px; height:34px; }
  .ingredients-marquee__label{ font-size:.85rem; }
  .ingredients-marquee__item{ padding: .45rem .9rem .45rem .55rem; }
}

/* =========================================================
   DECORATIVE BLOBS
   ========================================================= */
@keyframes blob-morph{
  0%, 100%{ border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; transform: rotate(0deg) scale(1); }
  33%{ border-radius: 58% 42% 35% 65% / 55% 65% 35% 45%; transform: rotate(6deg) scale(1.04); }
  66%{ border-radius: 35% 65% 55% 45% / 40% 55% 45% 60%; transform: rotate(-5deg) scale(0.98); }
}
.hero__blob{
  position:absolute; top:-8%; right:-12%; width:78%; height:78%;
  background: linear-gradient(135deg, var(--color-accent-soft), var(--color-accent));
  opacity:.35; filter: blur(2px);
  animation: blob-morph 14s ease-in-out infinite;
  z-index:0;
}
.blob-deco{
  position:absolute; top:-10%; left:-14%; width:62%; height:62%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary-light));
  opacity:.3;
  animation: blob-morph 16s ease-in-out infinite reverse;
  z-index:0;
}
.hero__media, .split__media{ position:relative; }
.hero__media .hero-slider, .hero__media .hero__badge,
.split__media img, .split__media .video-trigger{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){
  .hero__blob, .blob-deco{ animation: none; }
}

/* =========================================================
   ENHANCED HOVER: BUTTON SHINE SWEEP
   ========================================================= */
.btn{ position:relative; overflow:hidden; }
.btn::before{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease);
  pointer-events:none;
}
.btn:hover::before{ left:120%; }

/* =========================================================
   ENHANCED HOVER: CARD IMAGE OVERLAY SWEEP
   ========================================================= */
.treatment-card__media, .post-card__media, .team-card__media{ position:relative; }
.treatment-card__media::after, .post-card__media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(18,48,36,.55), transparent 60%);
  opacity:0; transition: opacity .4s var(--ease); pointer-events:none;
}
.treatment-card:hover .treatment-card__media::after,
.post-card:hover .post-card__media::after{ opacity:1; }

/* =========================================================
   TESTIMONIAL ACTIVE-SLIDE FOCUS
   ========================================================= */
.testimonial-slide{ transition: opacity .5s var(--ease), transform .5s var(--ease); opacity:.4; transform: scale(.94); }
.testimonial-slide.is-active{ opacity:1; transform: scale(1); }

/* Social icon images (v1.35.0) — the supplied full-colour Facebook /
   Instagram / LinkedIn artwork replaces the old single-colour glyphs, so
   the translucent/solid circle behind each link is dropped (the artwork is
   its own rounded badge) and hover is a lift + slight grow instead of a
   background swap. Placed last so it wins over the older circle rules. */
.social-icon{ display:block; width:100%; height:100%; object-fit:contain; border-radius:0; transition: transform .3s var(--ease), filter .3s; }
.site-topbar__social a, .social-links a, .team-links a, .team-card__social a{
  background:none; border-radius:0; box-shadow:none;
}
.site-topbar__social a{ width:26px; height:26px; }
.social-links a{ width:40px; height:40px; }
.team-links a{ width:40px; height:40px; }
.team-card__social a{ width:38px; height:38px; }
.site-topbar__social a:hover, .social-links a:hover, .team-links a:hover, .team-card__social a:hover{
  background:none; transform: translateY(-3px) scale(1.1);
}
.site-topbar__social a:hover .social-icon, .social-links a:hover .social-icon,
.team-links a:hover .social-icon, .team-card__social a:hover .social-icon{ filter: brightness(1.08) saturate(1.1); }
/* the practitioner photo's zoom-on-hover and fixed 3:4 crop must not apply to the icons inside it */
.team-card .team-card__social img.social-icon{ aspect-ratio:1/1; width:100%; height:100%; transform:none; }
.team-card:hover .team-card__media .team-card__social img.social-icon{ transform:none; }
@media (max-width: 640px){ .site-topbar__social a{ width:23px; height:23px; } }

/* =========================================================
   PRACTITIONER AVAILABILITY (v1.37.0)
   ========================================================= */
.team-card__hours{ list-style:none; margin:.7rem auto .2rem; padding:0; font-size:.82rem; line-height:1.5; color: var(--color-text-muted); }
.team-card__hours strong{ color: var(--color-primary-dark); font-weight:600; }

.avail-panel{ margin-top:2rem; padding:1.4rem 1.6rem; border:1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-alt); }
.avail-panel h2{ font-size:1.3rem; margin:0 0 .8rem; }
.avail-panel h3{ font-size:1rem; margin:1.2rem 0 .5rem; color: var(--color-primary-dark); }
.avail-panel ul{ list-style:none; margin:0; padding:0; }
.avail-panel li{ display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0; border-bottom:1px solid var(--color-border); }
.avail-panel li:last-child{ border-bottom:0; }
.avail-panel li strong{ color: var(--color-primary-dark); }
.avail-panel__changes .is-off strong{ color:#B5654A; }
.avail-panel__changes .is-open strong{ color:#A97B1E; }
@media (max-width:480px){ .avail-panel li{ flex-direction:column; gap:.1rem; } }