/*
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.49.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: 3.4rem 0; } /* was 6rem — v1.49.0 tighter vertical rhythm on every page */
.site-main.section{ padding-top: 1.4rem; } /* inner-page <main>: the page header supplies the top space */
.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 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: #111111; /* black top bar (v1.37.2; was green) */
}
.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{
  position:relative; overflow:hidden; color:#fff; text-align:center;
  background: linear-gradient(135deg, var(--color-primary-darker) 0%, var(--color-primary-dark) 55%, #2c8a47 100%);
  border-radius: var(--radius-lg); padding: 2.6rem 1.5rem;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  box-shadow: var(--shadow-soft);
}
.achievements::before, .achievements::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none; border:1px solid rgba(255,255,255,.12);
}
.achievements::before{ width:300px; height:300px; left:-110px; top:-170px; box-shadow: 0 0 0 34px rgba(255,255,255,.035); }
.achievements::after{ width:260px; height:260px; right:-90px; bottom:-170px; box-shadow: 0 0 0 30px rgba(255,255,255,.035); }
.achievement-item{
  position:relative; z-index:1; padding: .4rem 1rem;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
}
.achievement-item + .achievement-item::before{
  content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.28), transparent);
}
.achievement-item__icon{
  width:58px; height:58px; border-radius:50%; margin-bottom:.9rem;
  display:flex; align-items:center; justify-content:center;
  color: var(--color-accent-soft); background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  transition: transform .5s var(--ease), background .4s;
}
.achievement-item:hover .achievement-item__icon{ transform: translateY(-4px) scale(1.06); background: rgba(255,255,255,.18); }
.achievement-item__num{
  display:block; font-family: var(--font-heading); font-weight:700; line-height:1;
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem); color:#fff; letter-spacing:.01em;
  font-feature-settings: "lnum" 1, "tnum" 1; font-variant-numeric: lining-nums tabular-nums;
}
.achievement-item__num > span{ font-size:inherit; opacity:1; }
.achievement-item__label{
  font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: var(--color-accent-soft); opacity:.95;
}
@media (max-width: 900px){
  .achievements{ grid-template-columns: repeat(2, 1fr); padding: 1.6rem 1rem; row-gap:1.6rem; }
  .achievement-item + .achievement-item::before{ display:none; }
  .achievement-item:nth-child(even)::before{ content:""; display:block; }
  .achievement-item:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.16); padding-top:1.6rem; }
}
@media (max-width: 480px){
  .achievements{ padding: 1.3rem .5rem; }
  .achievement-item{ padding: .3rem .4rem; }
  .achievement-item__icon{ width:48px; height:48px; }
  .achievement-item__icon svg{ width:22px; height:22px; }
  .achievement-item__label{ font-size:.7rem; letter-spacing:.1em; }
}

/* =========================================================
   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 1.8rem; }
.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: 1.4rem 0 1.6rem; }
.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: #111111; /* black footer (v1.37.1; was green) */ color: rgba(255,255,255,.82); margin-top: 2.4rem; 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: 2.4rem 0; }
  .site-main.section{ padding-top: 1rem; }
  .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;
}


/* =========================================================
   SERVICES IMAGE SLIDER (home, v1.39.0; fade + mobile polish v1.40.0)
   Native scroll-snap row. main.js adds .js-fade to the wrap, then marks the
   cards that are fully in view (.is-active): those stay crisp while cards
   sliding in/out of view fade to a soft, slightly smaller state. The track
   edges also fade out via a mask (switched off at the very start / end).
   ========================================================= */
.service-slider{ padding: 1.6rem 0 0; background: var(--color-surface); }
.service-slider__wrap{ position:relative; max-width: var(--container); margin:0 auto; padding: 0 var(--gutter); }
.service-slider__track{
  --fade-l: 0px; --fade-r: 36px;
  display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding: .4rem .2rem 2.4rem; margin-bottom:-1.2rem;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; outline-offset:4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.service-slider__track.at-start{ --fade-l: 0px; }
.service-slider__track.is-scrolled{ --fade-l: 36px; }
.service-slider__track.at-end{ --fade-r: 0px; }
.service-slider__track::-webkit-scrollbar{ display:none; }
.service-slide{
  flex: 0 0 calc( (100% - 3.6rem) / 4 ); scroll-snap-align:start;
  display:block; position:relative; border-radius: var(--radius-md); overflow:hidden;
  color:#fff; text-decoration:none; box-shadow: 0 14px 26px -16px rgba(18,48,36,.45);
  transition: transform .6s var(--ease), box-shadow .6s, opacity .7s ease;
  -webkit-tap-highlight-color: transparent;
}
.service-slide:hover, .service-slide:focus-visible{ transform: translateY(-6px); }
.service-slide__img{ display:block; aspect-ratio: 4/3; overflow:hidden; background: var(--color-bg-alt); }
.service-slide__img img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .8s var(--ease); }
.service-slide:hover .service-slide__img img{ transform: scale(1.08); }
.service-slide__title{
  position:absolute; left:0; right:0; bottom:0; padding: 3rem .9rem .9rem;
  font-family: var(--font-heading); font-size: clamp(.92rem, .85rem + .35vw, 1.05rem); line-height:1.25;
  text-align:center; text-wrap:balance; text-shadow: 0 1px 6px rgba(0,0,0,.55);
  background: linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.35) 55%, rgba(0,0,0,0));
}
/* soft fade-in / fade-out of cards as they enter or leave the view */
.js-fade .service-slide{ opacity:.38; transform: scale(.96); }
.js-fade .service-slide.is-active{ opacity:1; transform:none; }
.js-fade .service-slide.is-active:hover{ transform: translateY(-6px); }
/* one-time staggered fade-up when the slider first appears */
.js-fade .service-slide{ animation: svc-fade-in .9s ease both; }
.js-fade .service-slide:nth-child(2){ animation-delay:.08s; }
.js-fade .service-slide:nth-child(3){ animation-delay:.16s; }
.js-fade .service-slide:nth-child(4){ animation-delay:.24s; }
.js-fade .service-slide:nth-child(n+5){ animation-delay:.3s; }
@keyframes svc-fade-in{ from{ opacity:0; translate: 0 14px; } to{ opacity:1; translate: 0 0; } }
.service-slider__btn{
  position:absolute; top:calc(50% - 1.2rem); transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:#111; color:#fff; font-size:1rem; line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.25); transition: background .3s, transform .3s, opacity .3s;
}
.service-slider__btn:hover{ background: var(--color-primary-dark); transform:translateY(-50%) scale(1.08); }
.service-slider__btn--prev{ left:calc(var(--gutter) - 14px); }
.service-slider__btn--next{ right:calc(var(--gutter) - 14px); }
/* dot pager — shown on tablet / phone where arrows are tucked away */
.service-slider__dots{ display:none; justify-content:center; gap:.45rem; padding: .2rem 0 .4rem; }
.service-slider__dot{
  width:8px; height:8px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background: var(--color-border); transition: width .4s var(--ease), background .4s;
}
.service-slider__dot.is-active{ width:22px; background: var(--color-primary-dark); }
@media (max-width: 1000px){
  .service-slide{ flex-basis: calc( (100% - 1.2rem) / 2 ); }
  .service-slider__dots{ display:flex; }
}
@media (max-width: 640px){
  .service-slider__wrap{ padding: 0; }
  .service-slider__track{ gap:.85rem; padding: .4rem 8% 2.2rem; scroll-padding-inline: 8%; --fade-r: 0px; -webkit-mask-image:none; mask-image:none; }
  .service-slide{ flex-basis: 84%; scroll-snap-align:center; border-radius: 14px; }
  .service-slide__img{ aspect-ratio: 16/11; }
  .service-slide__title{ padding: 2.4rem .8rem .8rem; }
  .service-slider__btn{ display:none; }
  .js-fade .service-slide{ opacity:.55; transform: scale(.95); }
}
@media (prefers-reduced-motion: reduce){
  .service-slider__track{ scroll-behavior:auto; }
  .js-fade .service-slide{ animation:none; transition:none; opacity:1; transform:none; }
}

/* =========================================================
   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; } }

/* =========================================================
   HOME PAGE — TIGHTER VERTICAL SPACING (v1.39.1)
   Scoped to the front page (body.home) so inner pages keep their
   normal rhythm. Section padding 6rem -> 3.4rem, heading-to-content gap
   3.2rem -> 2rem, hero and slider/footer gaps trimmed.
   ========================================================= */
.home .section{ padding: 3.4rem 0; }
.home .section-head{ margin-bottom: 2rem; }
.home .hero{ padding: 3.2rem 0 3.6rem; }
.home .service-slider{ padding: 1.6rem 0 0; }
.home .site-footer{ margin-top: 2.4rem; }
.home .section p[style*="margin-top:2.6rem"]{ margin-top: 1.6rem !important; }
@media (max-width: 640px){
  .home .section{ padding: 2.4rem 0; }
  .home .section-head{ margin-bottom: 1.5rem; }
  .home .hero{ padding: 2.4rem 0 2.8rem; }
}

/* =========================================================
   CONSULTATION PAGE (v1.41.0) — styles the editable page content
   created by sattva_consultation_page_content()
   ========================================================= */
.consult{ max-width: 1020px; margin: 0 auto; }
.consult__title{ text-align:center; margin: 0 0 1.2rem; }
.consult__lead{ max-width: 760px; margin: 0 auto 2.4rem; text-align:center; color: var(--color-text-muted); font-size:1.05rem; }
.consult__sub{ text-align:center; margin: 0 0 1.6rem; color: var(--color-primary-dark); }
.consult__grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1.4rem; }
.consult__item{
  position:relative; background: var(--color-surface); border:1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 1.6rem 1.6rem 1.5rem 4.6rem;
  box-shadow: 0 14px 26px -22px rgba(18,48,36,.45); transition: transform .4s var(--ease), box-shadow .4s;
}
.consult__item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.consult__num{
  position:absolute; left:1.3rem; top:1.45rem; width:2.2rem; height:2.2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--color-primary-dark); color:#fff; font-family: var(--font-heading); font-weight:700;
}
.consult__item h4{ margin: 0 0 .45rem; font-size:1.08rem; color: var(--color-primary-dark); }
.consult__item p{ margin:0; color: var(--color-text-muted); font-size:.95rem; line-height:1.65; }
.consult__closing{
  margin-top: 2.4rem; padding: 2.2rem 2rem; text-align:center; border-radius: var(--radius-lg);
  background: var(--color-bg-alt); border:1px solid var(--color-border);
}
.consult__closing h3{ margin:0 0 .6rem; color: var(--color-primary-dark); }
.consult__closing p{ margin:0 auto; max-width: 720px; color: var(--color-text-muted); }
.consult__cta{ text-align:center; margin-top: 2.2rem; }
@media (max-width: 760px){
  .consult__grid{ grid-template-columns: 1fr; }
  .consult__item{ padding: 1.3rem 1.2rem 1.3rem 4.2rem; }
  .consult__closing{ padding: 1.6rem 1.2rem; }
}

/* Consultation page — "Dr. Shabana Noushad" panel at the bottom (v1.42.0) */
.consult__doctor{
  margin-top: 2.4rem; padding: 2.6rem 2rem; text-align:center; color:#fff;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary-dark), #1b5e2e);
  box-shadow: var(--shadow-soft);
}
.consult__doctor h3{ margin:0 0 .5rem; color:#fff; text-shadow:none; }
.consult__doctor p{ margin: 0 auto .5rem; max-width: 640px; color: rgba(255,255,255,.88); }
.consult__doctor .consult__doctor-tag{ font-family: var(--font-heading); font-style:italic; font-size:1.15rem; color: var(--color-accent-soft); margin-bottom:.9rem; }
.consult__doctor-list{
  list-style:none; margin: 1.6rem auto 0; padding:0; max-width: 860px;
  display:grid; grid-template-columns: repeat(2, 1fr); gap:.8rem 1rem; text-align:left;
}
.consult__doctor-list li{
  display:flex; align-items:center; gap:.7rem; margin:0; padding:.8rem 1.1rem;
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-md); color:#fff; font-size:.98rem; transition: background .3s, transform .3s;
}
.consult__doctor-list li:hover{ background: rgba(255,255,255,.2); transform: translateY(-2px); }
.consult__leaf{ flex-shrink:0; font-size:1.2rem; line-height:1; }
@media (max-width: 760px){
  .consult__doctor{ padding: 2rem 1.1rem; }
  .consult__doctor-list{ grid-template-columns: 1fr; }
}

/* =========================================================
   ABOUT PAGE (v1.43.0; professional redesign v1.44.0) — styles the editable
   About Us content created by sattva_about_page_content() together with
   page-templates/template-about.php
   ========================================================= */
.about-main{ padding-bottom: 1rem; }
/* full-width page hero */
.page-hero{
  position:relative; overflow:hidden; text-align:center; color:#fff;
  padding: 4.2rem 0 3.6rem;
  background: linear-gradient(135deg, #1b5e2e 0%, var(--color-primary-dark) 55%, #2c8a47 100%);
}
.page-hero::before, .page-hero::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none;
  border:1px solid rgba(255,255,255,.14);
}
.page-hero::before{ width:420px; height:420px; left:-120px; top:-200px; box-shadow: 0 0 0 40px rgba(255,255,255,.04), 0 0 0 90px rgba(255,255,255,.03); }
.page-hero::after{ width:340px; height:340px; right:-90px; bottom:-190px; box-shadow: 0 0 0 36px rgba(255,255,255,.04); }
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{ color:#fff; text-shadow:none; margin: .5rem 0 0; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }
.page-hero__crumbs{ display:flex; justify-content:center; align-items:center; gap:.6rem; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color: var(--color-accent-soft); }
.page-hero__crumbs a{ color: rgba(255,255,255,.85); text-decoration:none; }
.page-hero__crumbs a:hover{ color:#fff; }
.page-hero__rule{ display:block; width:64px; height:3px; margin: 1.3rem auto 0; border-radius:3px; background: var(--color-accent); }

.about{ max-width: 1100px; margin: 0 auto; padding-top: 3.4rem; }
.about::after{ content:""; display:block; clear:both; }
/* photo beside the intro text */
.about__figure{
  float:right; width: min(40%, 400px); margin: .4rem 0 1.4rem 3rem; position:relative;
}
.about__figure::before{
  content:""; position:absolute; inset: 16px -16px -16px 16px; border-radius: var(--radius-lg);
  background: var(--color-accent-soft); z-index:0;
}
.about__figure img{
  position:relative; z-index:1; display:block; width:100%; aspect-ratio: 4/5; object-fit:cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
}
/* sections — alternating full-bleed bands */
.about-sec{ position:relative; text-align:center; padding: 3.4rem 0; }
.about-sec--promise, .about-closing-wrap{ background: var(--color-bg-alt); box-shadow: 0 0 0 100vmax var(--color-bg-alt); clip-path: inset(0 -100vmax); }
.about-sec--intro{ padding-top: 0; text-align:left; }
.about-sec > h2{
  margin: .2rem auto 1.4rem; max-width: 820px; position:relative; padding-bottom: 1.1rem;
}
.about-sec > h2::after{
  content:""; position:absolute; left:50%; bottom:0; width:56px; height:3px; margin-left:-28px;
  border-radius:3px; background: var(--color-accent);
}
.about-sec--intro > h2{ margin-left:0; margin-right:0; max-width:none; text-align:left; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.about-sec--intro > h2::after{ left:0; margin-left:0; }
.about-lead{ max-width: 780px; margin: 0 auto 1.3rem; color: var(--color-text-muted); font-size:1.05rem; line-height:1.8; }
.about-lead p{ margin: 0 0 .95rem; }
.about-sec--intro > .about-lead:first-of-type{ max-width:none; margin: 0 0 1.3rem; text-align:left; }
.about-sec--intro > .about-lead:first-of-type p:first-child{ font-size:1.2rem; color: var(--color-text); font-weight:500; }
.about-sec--intro > .about-lead{ text-align:center; }
.about-quote{
  clear:both; max-width: 820px; margin: 2.2rem auto; padding: 1.6rem 1.8rem; border:0; text-align:center;
  border-top:2px solid var(--color-accent); border-bottom:2px solid var(--color-accent);
  font-family: var(--font-heading); font-style:italic; font-size: clamp(1.3rem, 1rem + 1.1vw, 1.85rem);
  color: var(--color-primary-dark); line-height:1.35;
}
.about-sub{ margin: 2.2rem 0 1.2rem; color: var(--color-primary-dark); text-align:center; }
.about-chips{ list-style:none; margin: 0 auto 2rem; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; }
.about-chips li{
  margin:0; padding:.6rem 1.2rem; border-radius: var(--radius-pill); font-size:.93rem; font-weight:600;
  background: var(--color-surface); border:1px solid var(--color-border); color: var(--color-primary-dark);
  box-shadow: 0 8px 18px -14px rgba(18,48,36,.5); transition: background .3s, color .3s, transform .3s;
}
.about-chips li:hover{ background: var(--color-primary-dark); color:#fff; transform: translateY(-2px); }
.about-tagline{
  margin: 1.8rem auto 0; font-family: var(--font-heading); font-style:italic; text-align:center;
  font-size:1.3rem; color: var(--color-accent-dark);
}
.about-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1.4rem; text-align:left; }
.about-card{
  position:relative; background: var(--color-surface); border:1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 1.6rem 1.6rem 1.5rem 4.6rem;
  box-shadow: 0 14px 26px -22px rgba(18,48,36,.45); transition: transform .4s var(--ease), box-shadow .4s;
}
.about-card:last-child:nth-child(odd){ grid-column: 1 / -1; }
.about-card:hover, .about-therapy:hover{ transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.about-num{
  position:absolute; left:1.25rem; top:1.4rem; width:2.4rem; height:2.4rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family: var(--font-heading); font-weight:700;
  background: var(--color-primary-dark); color:#fff; box-shadow: 0 0 0 5px rgba(35,118,57,.12);
}
.about-card h4{ margin:0 0 .4rem; font-size:1.1rem; color: var(--color-primary-dark); }
.about-card p{ margin:0; color: var(--color-text-muted); font-size:.96rem; line-height:1.7; }
.about-therapies{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1.4rem; text-align:left; }
.about-therapy{
  background: var(--color-surface); border:1px solid var(--color-border); border-top:3px solid var(--color-primary-dark);
  border-radius: var(--radius-md); padding: 1.7rem 1.7rem 1.5rem;
  box-shadow: 0 14px 26px -22px rgba(18,48,36,.45); transition: transform .4s var(--ease), box-shadow .4s;
}
.about-therapy h4{ display:flex; gap:.7rem; align-items:flex-start; margin: 0 0 .8rem; font-size:1.14rem; color: var(--color-primary-dark); }
.about-leaf{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem;
  border-radius:50%; background: var(--color-bg-alt); font-size:1.05rem; line-height:1;
}
.about-therapy p{ margin: 0 0 .75rem; color: var(--color-text-muted); font-size:.96rem; line-height:1.75; }
.about-therapy .about-therapy__lead{ color: var(--color-text); font-weight:600; font-style:italic; }
.about-therapy .about-therapy__tag{ margin: 1rem 0 0; padding-top:.8rem; border-top:1px dashed var(--color-border); font-family: var(--font-heading); font-style:italic; color: var(--color-accent-dark); font-size:1.05rem; }
.about-closing{
  margin: 1.5rem 0 0; padding: 3.4rem 2rem; text-align:center; color:#fff; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #1b5e2e, var(--color-primary-dark)); box-shadow: var(--shadow-soft);
}
.about-closing h2{ margin:0 0 .4rem; color:#fff; text-shadow:none; }
.about-closing p{ max-width: 680px; margin: 0 auto .9rem; color: rgba(255,255,255,.88); }
.about-closing .about-closing__sub{ font-family: var(--font-heading); font-style:italic; font-size:1.3rem; color: var(--color-accent-soft); margin-bottom:1.2rem; }
.about-closing .about-closing__lines{ margin-top:1.6rem; font-size:1.1rem; line-height:1.9; color:#fff; }
.about__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin: 2.6rem 0 1rem; }
@media (max-width: 900px){
  .about__figure{ float:none; width:min(100%, 520px); margin: 0 auto 2.4rem; }
  .about__figure img{ aspect-ratio: 4/3; }
  .about-sec--intro{ text-align:center; }
  .about-sec--intro > h2, .about-sec--intro > .about-lead:first-of-type{ text-align:center; }
  .about-sec--intro > h2::after{ left:50%; margin-left:-28px; }
}
@media (max-width: 760px){
  .page-hero{ padding: 3rem 0 2.6rem; }
  .about{ padding-top: 2.2rem; }
  .about-grid, .about-therapies{ grid-template-columns: 1fr; }
  .about-card{ padding: 1.3rem 1.2rem 1.3rem 4.2rem; }
  .about-sec{ padding: 2.4rem 0; }
  .about-closing{ padding: 2.4rem 1.2rem; }
}

/* =========================================================
   CLIENT WAIVER, RELEASE & CONSENT (Book an Appointment form, v1.47.0)
   ========================================================= */
.consent-box{
  margin: 1.6rem 0 1.4rem; padding: 1.4rem 1.4rem 1.2rem; min-width:0;
  border:1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-alt);
}
.consent-box__legend{ text-align:center; margin-bottom:.2rem; }
.consent-box__brand{ display:block; font-family: var(--font-heading); font-weight:700; letter-spacing:.18em; color: var(--color-primary-dark); font-size:1.05rem; }
.consent-box__tag{ display:block; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color: var(--color-text-muted); }
.consent-box__title{ margin: .6rem 0 .4rem; text-align:center; font-size:1.25rem; color: var(--color-primary-dark); }
.consent-box__intro{ margin: 0 0 1rem; text-align:center; color: var(--color-text-muted); font-size:.92rem; }
.consent-box__scroll{
  max-height: 320px; overflow-y:auto; padding: 1rem 1.2rem; background: var(--color-surface);
  border:1px solid var(--color-border); border-radius: var(--radius-sm); font-size:.9rem; line-height:1.65;
  scrollbar-width: thin; scrollbar-color: var(--color-primary-dark) var(--color-bg-alt);
}
.consent-box__scroll:focus-visible{ outline:2px solid var(--color-primary-dark); outline-offset:2px; }
.consent-box__scroll h4{ margin: 1.1rem 0 .4rem; font-size:1rem; color: var(--color-primary-dark); }
.consent-box__scroll h4:first-child{ margin-top:0; }
.consent-box__scroll p{ margin: 0 0 .6rem; color: var(--color-text-muted); }
.consent-box__scroll ul{ margin: 0 0 .7rem 1.2rem; padding:0; color: var(--color-text-muted); list-style: disc; }
.consent-box__scroll li{ margin: 0 0 .25rem; }
.consent-box__check{
  display:flex; align-items:flex-start; gap:.75rem; margin-top: 1.1rem; padding: .9rem 1rem; cursor:pointer;
  background: var(--color-surface); border:1.5px solid var(--color-primary-dark); border-radius: var(--radius-sm);
  font-weight:600; color: var(--color-text);
}
.consent-box__check input{ flex-shrink:0; width:1.2rem; height:1.2rem; margin-top:.15rem; accent-color: var(--color-primary-dark); }
.consent-box__note{ margin: .8rem 0 0; font-size:.85rem; color: var(--color-text-muted); }
@media (max-width: 480px){
  .consent-box{ padding: 1.1rem .8rem .9rem; }
  .consent-box__scroll{ max-height: 260px; padding: .8rem .9rem; }
}

/* =========================================================
   HOME PAGE BACKGROUND TEXTURE (v1.48.0)
   Subtle, CSS/SVG-only (no image files): a faint botanical sprig pattern +
   fine paper grain on the plain sections, a dotted grid + grain + soft corner
   glows on the tinted ones. Scoped to body.home; scrolls with the page (no
   background-attachment:fixed — janky on phones); tiles shrink on small
   screens and the texture is dropped for high-contrast / forced-colours users.
   ========================================================= */
.home{
  --tex-leaves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 200 200'%3E%3Cg opacity='.085'%3E%3Cg fill='none' stroke='%23237639' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 92C36 66 52 44 76 28'/%3E%3Cpath d='M44 66c-14-2-22-12-22-24 14 0 22 10 22 24z'/%3E%3Cpath d='M58 48c4-14 14-20 26-20-1 14-11 22-26 20z'/%3E%3Cpath d='M36 80c-12 4-24 0-30-10 12-4 24-2 30 10z'/%3E%3Cpath d='M52 60c10 2 18 10 18 20-10 0-18-8-18-20z'/%3E%3C/g%3E%3Cg transform='translate(200 200) rotate(180)'%3E%3Cg fill='none' stroke='%23237639' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 92C36 66 52 44 76 28'/%3E%3Cpath d='M44 66c-14-2-22-12-22-24 14 0 22 10 22 24z'/%3E%3Cpath d='M58 48c4-14 14-20 26-20-1 14-11 22-26 20z'/%3E%3Cpath d='M36 80c-12 4-24 0-30-10 12-4 24-2 30 10z'/%3E%3Cpath d='M52 60c10 2 18 10 18 20-10 0-18-8-18-20z'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23C9972E' opacity='.9'%3E%3Ccircle cx='150' cy='40' r='2'/%3E%3Ccircle cx='162' cy='54' r='1.4'/%3E%3Ccircle cx='48' cy='160' r='2'/%3E%3Ccircle cx='36' cy='148' r='1.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --tex-leaves-lite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 200 200'%3E%3Cg opacity='.05'%3E%3Cg fill='none' stroke='%23237639' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 92C36 66 52 44 76 28'/%3E%3Cpath d='M44 66c-14-2-22-12-22-24 14 0 22 10 22 24z'/%3E%3Cpath d='M58 48c4-14 14-20 26-20-1 14-11 22-26 20z'/%3E%3Cpath d='M36 80c-12 4-24 0-30-10 12-4 24-2 30 10z'/%3E%3Cpath d='M52 60c10 2 18 10 18 20-10 0-18-8-18-20z'/%3E%3C/g%3E%3Cg transform='translate(200 200) rotate(180)'%3E%3Cg fill='none' stroke='%23237639' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 92C36 66 52 44 76 28'/%3E%3Cpath d='M44 66c-14-2-22-12-22-24 14 0 22 10 22 24z'/%3E%3Cpath d='M58 48c4-14 14-20 26-20-1 14-11 22-26 20z'/%3E%3Cpath d='M36 80c-12 4-24 0-30-10 12-4 24-2 30 10z'/%3E%3Cpath d='M52 60c10 2 18 10 18 20-10 0-18-8-18-20z'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23C9972E' opacity='.9'%3E%3Ccircle cx='150' cy='40' r='2'/%3E%3Ccircle cx='162' cy='54' r='1.4'/%3E%3Ccircle cx='48' cy='160' r='2'/%3E%3Ccircle cx='36' cy='148' r='1.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --tex-grain:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13  0 0 0 0 .32  0 0 0 0 .2  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-dots:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1.1' fill='%23237639' fill-opacity='.14'/%3E%3C/svg%3E");
}
.home .section, .home .service-slider{
  background-color: var(--color-surface);
  background-image: var(--tex-leaves), var(--tex-grain);
  background-size: 240px 240px, 180px 180px;
  background-position: 0 0, 0 0;
}
.home .section--alt{
  background-color: var(--color-bg-alt);
  background-image:
    radial-gradient(ellipse 60% 70% at 0% 0%, rgba(35,118,57,.07), transparent 70%),
    radial-gradient(ellipse 55% 65% at 100% 100%, rgba(201,151,46,.08), transparent 70%),
    var(--tex-dots), var(--tex-grain);
  background-size: auto, auto, 24px 24px, 180px 180px;
  background-position: 0 0, 0 0, 0 0, 0 0;
}
@media (max-width: 640px){
  .home .section, .home .service-slider{ background-image: var(--tex-leaves-lite), var(--tex-grain); background-size: 170px 170px, 150px 150px; }
  .home .section--alt{
    background-image: radial-gradient(ellipse 60% 70% at 0% 0%, rgba(35,118,57,.07), transparent 70%), radial-gradient(ellipse 55% 65% at 100% 100%, rgba(201,151,46,.08), transparent 70%), var(--tex-dots), var(--tex-grain);
    background-size: auto, auto, 20px 20px, 150px 150px;
  }
}
@media (prefers-contrast: more), (forced-colors: active){
  .home .section, .home .service-slider, .home .section--alt{ background-image:none; }
}