/* ==========================================================================
   Body Tune Up — Koh Samui
   Design system + components. Plain modern CSS, no build step.
   ========================================================================== */

/* ----- Design tokens ----- */
:root {
  /* Brand palette — white + cool off-white over the Body Tune Up blue/cyan brand.
     Neutrals are clean white//cool grey (no cream); --sage/--forest/--sky carry the brand;
     --azure drives the accent touches (eyebrows, section marks). All AA-checked on white. */
  --sand-50:  #ffffff;   /* page background — white */
  --sand-100: #f4f7fa;   /* alternating sections — cool off-white */
  --sand-200: #e9eff5;   /* soft fills */
  --sand-300: #d4e0ea;   /* hover borders */
  --clay:     #c3d2df;   /* cool neutral */
  --sky:      #1aaee6;   /* bright cyan accent (logo "UP") */
  --sky-50:   #eaf4fb;   /* light blue tint for icon tiles */
  --sage:     #0078c0;   /* primary brand blue (logo) */
  --sage-600: #0a6aaa;   /* deeper blue — links */
  --forest:   #0a4d76;   /* deep ocean blue — headings, dark UI, buttons */
  --forest-700:#0b5e92;  /* mid ocean — gradients */
  --forest-800:#062f4b;  /* darkest — footer, dark sections */
  --ink:      #1e2732;   /* cool near-black — body text */
  --muted:    #5a6b7a;   /* cool grey — secondary text (5.5:1 on white) */
  --line:     #e2e9ef;   /* cool border */
  --white:    #ffffff;
  --azure:       #0b6ba8;   /* accent — eyebrows, section marks (5.6:1 on white) */
  --azure-light: #86d3f2;   /* light azure — accents on dark/blue sections only */

  --accent:   var(--forest);
  --accent-soft: var(--sage);

  /* Type */
  --font-display: "Poppins", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Radius & shadow */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(16,42,66,.07);
  --shadow-md: 0 10px 30px -12px rgba(16,42,66,.16);
  --shadow-lg: 0 24px 60px -20px rgba(16,42,66,.22);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 78px;
  /* Height of the wave that closes each photo band. Content inside those bands reserves
     this much bottom padding so nothing is ever covered by the ribbons. */
  --wave-photo-h: clamp(48px, 5.5vw, 92px);
}

/* ----- Reset / base ----- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }   /* the hidden attribute must always win over component display rules */
html {
  /* The closed off-canvas menu is a fixed box parked past the right edge. iOS Safari
     counts that toward the scrollable width unless the ROOT clips too — leaving the page
     nudgeable sideways, which makes the full-width photo bands miss the right edge. */
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--sand-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` rather than `hidden`: hidden would turn this into a scroll container and can
     break sticky/anchor behaviour. hidden first as a fallback for very old engines. */
  overflow-x: hidden;
  overflow-x: clip;
}
img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; border-radius: 4px; }
/* --sage is ~2:1 against the dark sections — switch to a light ring wherever the surface is dark. */
.section--forest :focus-visible, .site-footer :focus-visible, .cta-band :focus-visible,
.parallax :focus-visible, .hero :focus-visible, .price-card--featured :focus-visible,
.cond-face--back :focus-visible { outline-color: #bfe6fa; }

/* ----- Headings ----- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.16; color: var(--forest); letter-spacing: -.02em; }
.section-title { font-size: clamp(2rem, 4vw, 3.05rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.25; }

/* ----- Utilities ----- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--sand { background: var(--sand-100); }
.section--forest { background: var(--forest); color: var(--sand-100); }
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--azure);
  margin-bottom: 1rem;
}
.eyebrow--light { color: var(--azure-light); }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.28rem); line-height: 1.65; color: var(--ink); }
.section--forest .lead, .section--forest p { color: rgba(235,242,248,.82); }

.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 200;
  background: var(--forest); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

.section-head { max-width: 720px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.section-head--left { margin-inline: 0; text-align: left; }
.section-head--invert .section-title { color: var(--sand-50); }
.section-intro { color: var(--muted); margin-top: 1rem; font-size: 1.1rem; }
.section--forest .section-intro { color: rgba(235,242,248,.72); }

/* Arrow link */
.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; color: var(--forest); letter-spacing: .01em;
}
.link-arrow svg { width: 1.05rem; height: 1.05rem; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }
.section--forest .link-arrow { color: var(--sky); }

/* Generic small icon */
.ic { width: 1.15rem; height: 1.15rem; flex: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  --btn-bg: var(--forest);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: .98rem; letter-spacing: .01em;
  padding: .85rem 1.6rem; border-radius: var(--r-pill);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  box-shadow: var(--shadow-sm); white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn--primary { background: linear-gradient(135deg, var(--forest-700), var(--forest)); }
.btn--primary:hover { background: linear-gradient(135deg, var(--sage-600), var(--forest-700)); }
.btn--ghost-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.btn--ghost-light:hover { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1.5px #fff; }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 1.02rem; }
.btn--sm { padding: .62rem 1.2rem; font-size: .9rem; }
.btn--block { width: 100%; }

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.site-header.is-scrolled {
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
}

.brand { display: inline-flex; align-items: center; gap: .7rem; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav-list { display: flex; align-items: center; gap: 1.7rem; }
.nav-list a {
  font-weight: 500; font-size: .96rem; color: var(--ink); position: relative; padding: .3rem 0;
  transition: color .2s var(--ease);
}
.nav-list a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--sage); border-radius: 2px; transition: width .3s var(--ease);
}
.nav-list a:hover, .nav-list a.is-active { color: var(--forest); }
.nav-list a.is-active::after, .nav-list a:hover::after { width: 100%; }
.site-header:not(.is-scrolled) .nav-list a { color: rgba(255,255,255,.92); }
.site-header:not(.is-scrolled) .nav-list a:hover { color: #fff; }
.site-header:not(.is-scrolled) .nav-cta { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); background: rgba(255,255,255,.1); }

.nav-toggle {
  display: none; width: 46px; height: 46px; border-radius: 12px; position: relative;
}
.nav-toggle span {
  position: absolute; left: 12px; right: 12px; height: 2px; background: var(--forest); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease), background .3s;
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.site-header:not(.is-scrolled) .nav-toggle span { background: #fff; }
body.nav-open .nav-toggle span { background: var(--forest); }
body.nav-open .nav-toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding-top: var(--header-h);
  /* Reserve the bottom chrome (info strip + wave) so the centred copy never sits under it. */
  padding-bottom: calc(var(--wave-photo-h) + 5.5rem);
  color: #fff; isolation: isolate; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
/* Keep the clinic building in frame on tall mobile crops; lift the exposure a touch so the
   photo reads clean and bright rather than tinted. */
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% center; filter: brightness(1.06) saturate(.98); }
/* Neutral (not blue) darkening — present only so the white headline stays legible. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(8,14,20,.72) 0%, rgba(8,14,20,.46) 45%, rgba(8,14,20,.12) 80%),
    linear-gradient(to top, rgba(8,14,20,.46), transparent 42%);
}
/* The hero photo doubles as a WhatsApp shortcut: sits above the scrim, below the copy. */
.hero-link { position: absolute; inset: 0 0 var(--wave-photo-h) 0; z-index: 0; }
.hero-link:focus-visible { outline: 3px solid var(--sky); outline-offset: -6px; border-radius: var(--r-md); }
.hero-inner { position: relative; z-index: 1; padding-block: clamp(3rem, 8vh, 6rem); max-width: 760px; }
/* The scrim thins out to the right, so how much contrast the cyan actually gets depends on
   which part of the photo sits behind it. A soft shadow makes that independent of the crop —
   same technique already used on .parallax-text. */
.hero-eyebrow { text-transform: uppercase; letter-spacing: .3em; font-size: .82rem; font-weight: 600; color: var(--sky); margin-bottom: 1.4rem;
  text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.hero-title { font-size: clamp(3rem, 8vw, 5.6rem); color: #fff; font-weight: 300; line-height: .98; letter-spacing: -.02em; }
.hero-title-sub {
  display: block; font-size: clamp(1.05rem, 2.4vw, 1.6rem); letter-spacing: .35em; text-transform: uppercase;
  font-family: var(--font-body); font-weight: 500; color: var(--sky); margin-top: 1.1rem;
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
}
.hero-lead { font-size: clamp(1.1rem, 1.9vw, 1.4rem); color: rgba(255,255,255,.9); max-width: 36em; margin-top: 1.6rem; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.hero-trust { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.8rem; font-size: .95rem; color: rgba(255,255,255,.85); text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.hero-trust .ic { color: var(--sky); }

.hero-strip {
  position: absolute; left: 0; right: 0; bottom: var(--wave-photo-h); z-index: 1;
  background: rgba(8,14,20,.46); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero-strip-inner { display: flex; flex-wrap: wrap; gap: .7rem 1.9rem; justify-content: center; padding-block: 1rem; }
.hero-strip span { display: inline-flex; align-items: center; gap: .6rem; font-size: .92rem; font-weight: 500; color: rgba(255,255,255,.9); }
/* Four items don't fit one line on phones — lay them out 2×2 instead of a ragged wrap. */
@media (max-width: 760px) {
  .hero { padding-bottom: calc(var(--wave-photo-h) + 8rem); }
  .hero-scroll { display: none; }
  .hero-strip-inner { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1rem; }
  .hero-strip span { font-size: .8rem; align-items: flex-start; }
  .hero-strip .ic { flex: none; margin-top: .15rem; }
}
@media (max-width: 420px) { .hero-strip-inner { grid-template-columns: 1fr; } }
.hero-strip .ic { color: var(--sky); }

.hero-scroll {
  position: absolute; left: auto; right: clamp(1.25rem, 4vw, 2.5rem);
  bottom: calc(var(--wave-photo-h) + 4.2rem); z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center; color: #fff;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.4); animation: bob 2.4s var(--ease) infinite;
}
.hero-scroll svg { width: 22px; height: 22px; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ==========================================================================
   About
   ========================================================================== */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.about-media { position: relative; }
.about-img { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-img--main { aspect-ratio: 4/5; }
.about-img--accent {
  position: absolute; right: -8%; bottom: -10%; width: 52%; aspect-ratio: 1/1;
  border: 6px solid var(--sand-50);
}
.about-badge {
  position: absolute; left: -6%; top: 8%;
  background: var(--forest); color: var(--sand-100);
  border-radius: var(--r-md); padding: 1rem 1.2rem; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: .8rem; max-width: 220px;
}
.about-badge-num { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--azure-light); }
.about-badge-text { font-size: .82rem; line-height: 1.3; color: rgba(235,242,248,.9); }
.about-body .lead { margin-top: 1.2rem; }
.about-body p + p { margin-top: 1.1rem; color: var(--muted); }

.pill-list { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.8rem 0; }
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: .5rem 1rem; font-size: .9rem; font-weight: 500; box-shadow: var(--shadow-sm);
}
.pill span { color: var(--sage-600); font-weight: 600; }
.pill .pill-name { color: inherit; font-weight: inherit; }   /* modality name stays normal weight/colour */
.pill .pill-badge:empty { display: none; }                   /* hide a blank badge (e.g. Kinesio Taping) */

/* ==========================================================================
   Conditions
   ========================================================================== */
.cond-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem;
}
/* Flat card — used by the symptom grids on the /conditions/ landing pages. */
.cond-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.6rem 1.4rem; box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.cond-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--sand-300); }
.cond-ic {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--sky-50); color: var(--forest); margin-bottom: 1rem;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.cond-ic svg { width: 26px; height: 26px; }
.cond-card:hover .cond-ic { background: var(--forest); color: var(--sky); }
.cond-card h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.cond-card p { font-size: .92rem; color: var(--muted); line-height: 1.55; }
.cond-foot { text-align: center; margin-top: 2.5rem; color: var(--muted); display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

/* Flip variant — the homepage "what we treat" grid. Name on the front, detail +
   "Learn More" on the back. The whole card is one <a>, so a tap on touch simply
   navigates and no control is ever hidden on the flipped-away face.
   The card itself is just the 3D stage; the faces carry the visual styling. */
.cond-card--flip { perspective: 1200px; background: none; border: 0; padding: 0; box-shadow: none; }
.cond-card--flip:hover { transform: none; box-shadow: none; border-color: transparent; }
.cond-flip {
  position: relative; display: block; min-height: 178px;
  transform-style: preserve-3d; transition: transform .6s var(--ease);
}
.cond-card--flip:hover .cond-flip,
.cond-card--flip:focus-within .cond-flip { transform: rotateY(180deg); }
.cond-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.5rem 1.35rem;
  box-shadow: var(--shadow-sm); transition: box-shadow .35s var(--ease);
}
.cond-face--front { background: var(--white); }
.cond-face--back { background: var(--forest); color: #fff; transform: rotateY(180deg); justify-content: space-between; }
.cond-card--flip:hover .cond-face { box-shadow: var(--shadow-md); }
.cond-card--flip h3 { font-size: 1.12rem; margin: 0; }
.cond-face--front .cond-hint { font-size: .8rem; color: var(--muted); margin-top: .5rem; }
.cond-face--back p { font-size: .88rem; color: rgba(255,255,255,.88); line-height: 1.5; margin: 0; }
.cond-more {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem;
  font-weight: 600; font-size: .88rem; color: var(--azure-light);
}
.cond-more svg { width: 16px; height: 16px; }

/* No hover (touch) or reduced motion: no flip — lay both faces out as one plain card. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .cond-card--flip { perspective: none;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 1.4rem 1.3rem; box-shadow: var(--shadow-sm); }
  .cond-flip { transform: none !important; transform-style: flat; min-height: 0; }
  .cond-face { position: static; -webkit-backface-visibility: visible; backface-visibility: visible;
    transform: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; background: none; }
  .cond-face--front .cond-hint { display: none; }
  .cond-face--back { margin-top: .45rem; color: inherit; }
  .cond-face--back p { color: var(--muted); }
  .cond-more { color: var(--sage-600); margin-top: .6rem; }
}

/* ==========================================================================
   Approach / pillars
   ========================================================================== */
.approach-grid { display: grid; grid-template-columns: minmax(280px, .85fr) 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.approach-media { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.approach-img { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; }
.approach-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.approach-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1.6rem 1.4rem;
  background: linear-gradient(to top, rgba(5,32,52,.85), transparent);
  color: #fff; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.25;
}
.approach-caption .eyebrow { margin-bottom: .5rem; }

.pillars { display: grid; gap: .4rem; counter-reset: pillar; }
.pillar {
  display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: 1.1rem;
  padding: 1.4rem 1.2rem; border-radius: var(--r-md);
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease);
}
.pillar:hover { background: var(--sand-100); }
.pillar-num { font-family: var(--font-display); font-size: 1.1rem; color: var(--azure); padding-top: .35rem; }
.pillar-ic {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--sage); color: #fff; box-shadow: var(--shadow-sm);
}
.pillar-ic svg { width: 25px; height: 25px; }
.pillar h3 { font-size: 1.18rem; margin-bottom: .25rem; }
.pillar p { font-size: .95rem; color: var(--muted); }

/* ==========================================================================
   Services
   ========================================================================== */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.svc-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2rem 1.8rem; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.svc-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--sage), var(--sky)); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.svc-card:hover::before { transform: scaleX(1); }
.svc-ic {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px;
  background: linear-gradient(140deg, var(--sand-100), var(--sand-200)); color: var(--forest); margin-bottom: 1.3rem;
}
.svc-ic svg { width: 30px; height: 30px; }
.svc-img { width: 100%; height: 170px; object-fit: cover; border-radius: var(--r-md); margin-bottom: 1.3rem; display: block; }
.svc-card h3 { margin-bottom: .55rem; }
.svc-card p { color: var(--muted); font-size: .96rem; }

/* Photo variant: the service image becomes the card background and the copy sits on a scrim.
   Set a service's image in the admin to switch a card over to this treatment. */
.svc-card--photo {
  background-size: cover; background-position: center; border-color: transparent;
  min-height: 320px; justify-content: flex-end;
}
.svc-card--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,20,32,.92) 12%, rgba(6,20,32,.62) 55%, rgba(6,20,32,.34) 100%);
}
.svc-card--photo > * { position: relative; z-index: 1; }
.svc-card--photo h3 { color: #fff; }
.svc-card--photo p { color: rgba(255,255,255,.9); }
.svc-meta { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.svc-meta .price-amount { font-size: 2rem; margin: 0 0 .12rem; }
.svc-meta .price-unit { font-size: .85rem; }
.svc-card--wide { grid-column: span 1; }
.svc-foot { text-align: center; margin-top: 2.4rem; color: var(--muted); }
.svc-foot strong { color: var(--forest); font-weight: 600; }
/* Massage-therapy detail blocks (why different / who it's for / what it does) */
.svc-stands { max-width: 820px; margin: clamp(1.75rem, 3.5vw, 2.5rem) auto clamp(2.5rem, 5vw, 3.5rem); background: var(--white);
  border: 1px solid var(--line); border-left: 4px solid var(--azure); border-radius: var(--r-md);
  padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-sm); }
.svc-stands-title { font-family: var(--font-display); color: var(--forest); font-size: 1.3rem; margin-bottom: .5rem; }
.svc-stands p { color: var(--ink); margin: 0; }
.svc-asides { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3.5vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.svc-aside { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.25rem); box-shadow: var(--shadow-sm); }
.svc-aside-title { font-family: var(--font-display); color: var(--forest); font-size: 1.35rem; margin-bottom: .55rem; }
.svc-aside > p { color: var(--muted); margin-bottom: 1.1rem; }
.svc-points { list-style: none; display: grid; gap: .85rem; }
.svc-points li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink); }
.svc-points svg { width: 1.15rem; height: 1.15rem; color: var(--sage); flex: none; margin-top: .18rem; }
.svc-points strong { color: var(--ink); font-weight: 600; }
.svc-points a { color: var(--sage-600); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) { .svc-asides { grid-template-columns: 1fr; } }

/* ==========================================================================
   Team
   ========================================================================== */
.avatar {
  display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(140deg, var(--forest-700), var(--forest)); color: var(--sky);
  font-family: var(--font-display); font-weight: 500; width: 76px; height: 76px; font-size: 1.7rem;
  box-shadow: var(--shadow-sm); flex: none;
}
.avatar--lg { width: 150px; height: 150px; font-size: 3.2rem; }
.avatar--xs { width: 40px; height: 40px; font-size: .95rem; }
.avatar--ghost { background: var(--sand-100); color: var(--sage-600); box-shadow: inset 0 0 0 1px var(--line); }
.avatar--ghost svg { width: 34px; height: 34px; }
img.avatar, .avatar-photo { object-fit: cover; padding: 0; }

.founder {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.8rem, 4vw, 3rem); box-shadow: var(--shadow-md); margin-bottom: 1.5rem;
}
.founder-body h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: .2rem 0 .8rem; }
.founder-body p { color: var(--muted); }
.cred-list { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.4rem; margin-top: 1.4rem; }
.cred-list li { display: flex; align-items: center; gap: .6rem; font-size: .95rem; font-weight: 500; color: var(--ink); }
.cred-list svg { width: 1.1rem; height: 1.1rem; color: var(--sage); flex: none; }

.team-lead { max-width: 720px; margin: clamp(2rem, 4vw, 3rem) auto clamp(1.5rem, 3vw, 2.25rem); text-align: center; }
.team-lead h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }   /* sub-head: clearly below the section h2 */
.team-lead p { color: var(--muted); margin-top: 1rem; font-size: 1.1rem; }
.team-grid { display: grid; gap: 1.5rem; }
.team-grid > .founder { margin-bottom: 0; align-items: start; }   /* team members reuse the founder profile layout */
.team-profile .founder-body p + p { margin-top: .9rem; }          /* space multi-paragraph bios */
/* Collapsible bios — the clamp + toggle are applied ONLY when JS is present (cms.js adds
   `.js` to <html>). So a missing/failed cms.js leaves full bios readable with no dead toggle,
   and the clamp can never outlive the script that provides the expand handler. */
.bio-toggle { margin-top: .5rem; display: none; align-items: center; gap: .4rem;
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600; font-size: .95rem;
  color: var(--sage-600); cursor: pointer; }
.bio-toggle::after { content: "\2193"; font-size: .9em; line-height: 1; }
.bio-toggle:hover { text-decoration: underline; }
.js .team-profile .bio { position: relative; overflow: hidden; max-height: 5.5rem; }
.js .team-profile .bio::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2em;
  background: linear-gradient(rgba(255,255,255,0), var(--white)); pointer-events: none; }
.js .team-profile.is-open .bio { max-height: none; }
.js .team-profile.is-open .bio::after { display: none; }
.js .bio-toggle { display: inline-flex; }
.js .team-profile.is-open .bio-toggle::after { content: "\2191"; }
.team-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2.2rem 1.8rem; box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.team-card .avatar { margin-bottom: 1.2rem; }
.team-card h3 { font-size: 1.4rem; }
.team-role { color: var(--sage-600); font-weight: 600; font-size: .9rem; margin: .2rem 0 .9rem; }
.team-card p { color: var(--muted); font-size: .95rem; }
.team-card--join { background: var(--sand-100); border-style: dashed; }

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews-viewport { overflow: hidden; }
.reviews-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(330px, 1fr);
  gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);   /* so snap lands the first card flush, not clipped under the gutter */
  scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar { display: none; }
.review-card {
  scroll-snap-align: start;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg); padding: 2rem 1.9rem; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; flex-direction: column; gap: 1rem;
}
.stars { display: flex; gap: .15rem; color: #e8c87a; }
.stars svg { width: 1.05rem; height: 1.05rem; }
.review-card blockquote { font-size: 1.05rem; line-height: 1.6; color: rgba(235,242,248,.92); }
.review-card blockquote::before { content: "\201C"; }
.review-card blockquote::after { content: "\201D"; }
.review-author { display: flex; align-items: center; gap: .7rem; font-weight: 600; color: var(--sand-50); margin-top: auto; }
.review-author .avatar--xs { background: rgba(255,255,255,.16); color: #d7f0fb; }
.review-author span:not(.avatar) { display: block; font-weight: 400; font-size: .85rem; color: #d7f0fb; }
.reviews-controls { display: flex; gap: .8rem; justify-content: center; margin-top: 1.8rem; }
.rev-btn {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color: #fff;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.rev-btn:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.rev-btn svg { width: 22px; height: 22px; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band { position: relative; isolation: isolate; color: #fff; text-align: center; overflow: hidden; }
.cta-bg { position: absolute; inset: 0; z-index: -2; }
.cta-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(5,32,52,.9), rgba(8,40,64,.7)); }
.cta-inner { padding-block: clamp(4rem, 9vw, 7rem); padding-bottom: calc(clamp(4rem, 9vw, 7rem) + var(--wave-photo-h) * .6); max-width: 640px; }
.cta-inner h2 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.2rem); }
.cta-inner p { color: rgba(255,255,255,.85); font-size: 1.15rem; margin: 1rem 0 2rem; }

/* ==========================================================================
   Parallax photo bands (between sections)
   ========================================================================== */
.parallax { position: relative; isolation: isolate; min-height: 46vh;
  display: grid; place-items: center;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  background-attachment: scroll; }   /* static cover by default — see the desktop-only fixed override below */
.parallax::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, rgba(5,32,52,.60), rgba(8,40,64,.44)); }
.parallax-inner { padding: clamp(3rem, 8vw, 5rem) 1.5rem; padding-bottom: calc(clamp(3rem, 8vw, 5rem) + var(--wave-photo-h) * .6);
  max-width: 820px; text-align: center; }
.parallax-text { color: #fff; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.5rem); line-height: 1.18; letter-spacing: -.01em;
  text-shadow: 0 2px 24px rgba(0,0,0,.35); margin: 0; }
/* Enable the parallax effect ONLY on real desktops with a fine pointer — fixed backgrounds are
   janky/mishandled on touch devices & tablets (iOS Safari especially). */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) { .parallax { background-attachment: fixed; } }
/* Respect users who prefer less motion — keep it static even on desktop. */
@media (prefers-reduced-motion: reduce) { .parallax { background-attachment: scroll; } }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-intro .lead { margin-top: 1rem; }
.contact-info { display: grid; gap: 1.2rem; margin: 2rem 0; }
.contact-info li { display: flex; gap: 1rem; align-items: flex-start; }
.ci-ic {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; flex: none;
  background: var(--sky-50); color: var(--forest);
}
.ci-ic svg { width: 22px; height: 22px; }
.contact-info strong { display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--sage-600); margin-bottom: .15rem; }
.contact-info a, .contact-info span { color: var(--ink); }
.contact-info a:hover { color: var(--forest); text-decoration: underline; }

.map-wrap { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.map-wrap iframe { width: 100%; height: 280px; border: 0; filter: grayscale(.2) contrast(.95); }

.contact-form-wrap {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.6rem, 3.5vw, 2.6rem); box-shadow: var(--shadow-lg);
}
.form-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--forest); margin-bottom: 1.4rem; }
.field { margin-bottom: 1.1rem; display: flex; flex-direction: column; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field label { font-size: .88rem; font-weight: 600; margin-bottom: .4rem; color: var(--ink); }
.field label span { color: #a5442c; }
.field input, .field select, .field textarea {
  background: var(--sand-50); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: .8rem .95rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(0,120,192,.25);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input.invalid, .field textarea.invalid { border-color: #d08a76; box-shadow: 0 0 0 3px rgba(208,138,118,.18); }
.error { color: #a5442c; font-size: .82rem; min-height: 1rem; margin-top: .25rem; }
.consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; color: var(--muted); margin: .4rem 0 1.2rem; }
.consent input { margin-top: .25rem; accent-color: var(--sage); width: 1.05rem; height: 1.05rem; flex: none; }
.consent a { color: var(--forest); text-decoration: underline; }
.form-success {
  display: flex; align-items: center; gap: .6rem; margin-top: 1.2rem;
  background: var(--sky-50); color: var(--forest-700); border-radius: var(--r-sm);
  padding: 1rem 1.1rem; font-weight: 500; font-size: .95rem;
}
.form-success svg { width: 1.3rem; height: 1.3rem; color: var(--sage); flex: none; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--forest-800); color: rgba(235,242,248,.72); padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 2.5rem; padding-bottom: 3rem; }
.footer-brand p { margin: 1.2rem 0 1.4rem; font-size: .95rem; max-width: 32ch; }
.social { display: flex; gap: .7rem; }
.social a {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.07); color: var(--sand-100); transition: background .25s var(--ease), transform .25s var(--ease);
}
.social a:hover { background: var(--sage); transform: translateY(-2px); }
.social svg { width: 20px; height: 20px; }
.footer-col h4 { color: #fff; font-family: var(--font-body); font-size: .82rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; margin-bottom: 1.1rem; }
.footer-col ul { display: grid; gap: .6rem; }
.footer-col a { font-size: .94rem; transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--sky); }
.footer-contact li { font-size: .94rem; line-height: 1.5; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  padding-block: 1.6rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .88rem;
}
.footer-legal { display: flex; gap: 1.4rem; }
.footer-legal a:hover { color: var(--sky); }

/* ==========================================================================
   Back-to-top
   ========================================================================== */
.to-top {
  /* The WhatsApp FAB owns the bottom-right corner — sit above it, not under it. */
  position: fixed; right: 1.4rem; bottom: calc(1.4rem + 56px + .7rem); z-index: 96;
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: var(--forest); color: #fff; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--sage-600); }
.to-top svg { width: 22px; height: 22px; }

/* ==========================================================================
   Wave dividers — echo the blue waves used on the clinic's ad creatives.
   Each divider carries the colour of the section it is leaving as its own
   background, and paints the colour of the section it is entering.
   ========================================================================== */
/* The svg is stretched with preserveAspectRatio="none" to a clamp()-derived height, so on
   iOS its bottom edge routinely lands on a fractional pixel and a hairline of whatever sits
   behind it shows through at the seam. Overlap the next section by 1px and paint above it. */
.wave { display: block; line-height: 0; position: relative; z-index: 1; margin-bottom: -1px; }
.wave svg { display: block; width: 100%; height: clamp(64px, 7.5vw, 120px); }

/* Waves that sit at the foot of a photo band (hero, the two parallax bands, the CTA).
   Transparent background so the photo shows between the ribbons; the last ribbon is the
   colour of the section below, so the band resolves straight into it — the ad-flyer look.
   Each host is already position:relative + isolate. */
.wave--on-photo {
  /* bottom:-1px closes the same fractional-pixel seam. The host clips it (overflow:hidden),
     and the clipped strip is solid entering-colour anyway, so nothing visible is lost. */
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3;
  background: none; pointer-events: none;
}
.wave--on-photo svg { height: var(--wave-photo-h); }
.wave--to-white { --wave-1: #a9cfe8; --wave-2: #1c7fc4; --wave-3: var(--white); }
.wave--to-sand  { --wave-1: #a9cfe8; --wave-2: #1c7fc4; --wave-3: var(--sand-100); }
/* Three solid ribbons, pale -> mid -> deep, like the ad creatives. The LAST ribbon is
   always the colour of the section being entered, so the divider resolves into it. */
.wave-l1 { fill: var(--wave-1); }
.wave-l2 { fill: var(--wave-2); }
.wave-l3 { fill: var(--wave-3); }
/* Background runs leaving-colour -> entering-colour with the switch at 72%. Every path fills
   from its own curve down to the foot of the viewBox, so below the first ribbon (~47%) the
   svg is fully opaque and the switch is invisible — but it leaves no leaving-colour pixel
   able to bleed through under the wave on a fractional-pixel seam. */
.wave--to-forest   { background: linear-gradient(to bottom, var(--sand-100) 0 72%, var(--forest) 72%);
  --wave-1: #a9cfe8; --wave-2: #1c7fc4; --wave-3: var(--forest); }
.wave--from-forest { background: linear-gradient(to bottom, var(--forest) 0 72%, var(--white) 72%);
  --wave-1: #0b5e92; --wave-2: #7fb6dd; --wave-3: var(--white); }
.wave--to-footer   { background: linear-gradient(to bottom, var(--white) 0 72%, var(--forest-800) 72%);
  --wave-1: #a9cfe8; --wave-2: #1c7fc4; --wave-3: var(--forest-800); }

/* ==========================================================================
   Reveal animations
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
/* Directional fly-in — the two big white boxes glide in from their own side. */
.reveal--left  { transform: translate3d(-42px, 16px, 0); }
.reveal--right { transform: translate3d(42px, 16px, 0); }
.reveal--left.is-visible, .reveal--right.is-visible { transform: none; }
@media (max-width: 760px) {
  .reveal--left, .reveal--right { transform: translateY(26px); }   /* stacked — no sideways slide */
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .cond-grid { grid-template-columns: repeat(3, 1fr); }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 880px) {
  :root { --header-h: 70px; }
  /* The mobile slide-in panel is a position:fixed child of the header. A
     backdrop-filter ancestor clips fixed descendants to the header box (panel
     too short → links spill onto the page), so disable it at mobile widths. */
  .site-header.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.97); }
  body.legal .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.98); }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    background: var(--sand-50); padding: calc(var(--header-h) + 1.5rem) 2rem 2rem;
    box-shadow: -20px 0 60px -20px rgba(8,40,64,.4);
    transform: translateX(100%); transition: transform .4s var(--ease), visibility .4s; z-index: 99;
    /* Closed: off-screen AND out of the tab order / screen-reader tree. Without this a keyboard
       user tabs through seven invisible links before reaching the hamburger. */
    visibility: hidden;
  }
  body.nav-open .nav { transform: translateX(0); visibility: visible; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li { border-bottom: 1px solid var(--line); }
  .nav-list a { display: block; padding: 1rem 0; font-size: 1.1rem; color: var(--ink) !important; }
  .nav-list a::after { display: none; }
  .nav-cta { margin-top: 1.5rem; text-align: center; }
  .site-header:not(.is-scrolled) .nav-cta { background: linear-gradient(135deg, var(--forest-700), var(--forest)); box-shadow: var(--shadow-sm); }
  .nav-toggle { display: block; z-index: 100; }
  body.nav-open { overflow: hidden; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(5,32,52,.45); z-index: 98; }

  .about-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 460px; margin: 0 auto 2.5rem; }
  .approach-grid { grid-template-columns: 1fr; }
  .approach-media { position: static; max-width: 460px; margin: 0 auto 1rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
}

@media (max-width: 680px) {
  .parallax { min-height: 34vh; }   /* shorter bands on small screens (attachment handled above) */
  .cond-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .team-profile { text-align: left; justify-items: start; }   /* detailed bios read left-aligned on mobile */
  .cred-list { grid-template-columns: 1fr; text-align: left; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  /* The strip stays on phones — it carries the four things the clinic actually does,
     which is the single most useful line in the hero on a small screen. It lays out
     1-per-row below 420px (see the .hero-strip-inner rules above) and the hero reserves
     room for it, so it no longer needs hiding. */
  .hero-scroll { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 420px) {
  .cond-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Brand logo (image lockup)
   ========================================================================== */
.brand-logo { display: block; width: auto; height: 56px; }
.brand-logo--dark { display: none; }                                   /* colored — on light header */
.site-header.is-scrolled .brand-logo--light { display: none; }
.site-header.is-scrolled .brand-logo--dark { display: block; }
body.legal .brand-logo--light { display: none; }
body.legal .brand-logo--dark { display: block; }
.brand--footer .brand-logo { height: 78px; }
@media (max-width: 880px) { .brand-logo { height: 46px; } .brand--footer .brand-logo { height: 70px; } }

/* ==========================================================================
   Pricing / packages
   ========================================================================== */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
@media (max-width: 880px) { .price-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
/* Two pricing disciplines (Medical Massage · Ael / Physiotherapy · Tanny) */
.price-group + .price-group { margin-top: clamp(2.5rem, 6vw, 3.5rem); padding-top: clamp(2.25rem, 5vw, 3rem); border-top: 1px solid var(--line); }
.price-group-head { display: flex; align-items: center; gap: 1rem; max-width: 760px; margin: 0 0 1.75rem; }
.pg-avatar { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--azure); background: var(--white); border: 2px solid var(--azure); }
.price-group-head .eyebrow { margin: 0; }
.price-group-title { font-family: var(--font-display); color: var(--forest); font-size: 1.5rem; margin: .1rem 0 .25rem; }
.price-group-title a { color: inherit; text-decoration: none; }
.price-group-title a:hover { text-decoration: underline; }
.price-group-role { color: var(--muted); font-size: .95rem; margin: 0; }
@media (max-width: 880px) { .price-group-head { max-width: 460px; margin-inline: auto; } }   /* center-align with the collapsed card column */
@media (max-width: 560px) { .price-group-head { flex-direction: column; text-align: center; gap: .6rem; } }
.price-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2.3rem 1.9rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.price-card--featured { background: linear-gradient(160deg, var(--forest-700), var(--forest)); color: #fff; border-color: transparent; box-shadow: var(--shadow-lg); }
.price-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--sky); color: #04293f; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: .4rem .9rem; border-radius: var(--r-pill); white-space: nowrap;
}
.price-name { font-family: var(--font-display); font-size: 1.45rem; color: var(--forest); }
.price-card--featured .price-name { color: #fff; }
.price-desc { color: var(--muted); font-size: .92rem; margin-top: .35rem; min-height: 2.6em; }
.price-card--featured .price-desc { color: rgba(255,255,255,.82); }
.price-amount { font-family: var(--font-display); font-size: 2.7rem; color: var(--forest); margin: 1.2rem 0 .1rem; display: flex; align-items: baseline; gap: .35rem; line-height: 1; }
.price-amount .cur { font-size: 1.05rem; color: var(--sage-600); font-family: var(--font-body); font-weight: 600; }
.price-card--featured .price-amount, .price-card--featured .price-amount .cur { color: #fff; }
.price-unit { font-size: .85rem; color: var(--muted); }
.price-card--featured .price-unit { color: rgba(255,255,255,.75); }
.price-feats { display: grid; gap: .6rem; margin: 1.5rem 0 1.9rem; }
.price-feats li { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; }
.price-feats svg { width: 1.1rem; height: 1.1rem; color: var(--sage); flex: none; margin-top: .15rem; }
.price-card--featured .price-feats li { color: rgba(255,255,255,.9); }
.price-card--featured .price-feats svg { color: var(--sky); }
.price-card .btn { margin-top: auto; }
.price-card--featured .btn--primary { background: #fff; color: var(--forest); }
.price-card--featured .btn--primary:hover { background: var(--sky-50); }
.price-note { text-align: center; margin-top: 2rem; color: var(--muted); font-size: .9rem; }
.price-addons { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.4rem; }

/* ==========================================================================
   FAQ (native <details> accordion)
   ========================================================================== */
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: .9rem; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: 1.25rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-display); font-size: 1.12rem; color: var(--forest); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-50); color: var(--forest); transition: background .3s var(--ease); }
.faq-ic svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.faq-item[open] .faq-ic { background: var(--forest); color: #fff; }
.faq-item[open] .faq-ic svg { transform: rotate(180deg); }
.faq-answer { padding: 0 1.4rem 1.35rem; color: var(--muted); }
.faq-answer p { margin: 0; }

/* ==========================================================================
   Floating WhatsApp button
   ========================================================================== */
.wa-fab {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 95;
  display: inline-flex; align-items: center; gap: .6rem;
  /* White pill (not green) with the WhatsApp glyph in brand green — needs its own border
     and shadow to stay visible against the white page sections. */
  background: var(--white); color: var(--forest); padding: .82rem 1.15rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); box-shadow: var(--shadow-md); font-weight: 600;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.wa-fab svg { width: 24px; height: 24px; color: #25d366; flex: none; }
.wa-label { font-size: .92rem; }
@media (max-width: 560px) { .wa-label { display: none; } .wa-fab { padding: .9rem; } }

/* ==========================================================================
   Legal pages (privacy / terms)
   ========================================================================== */
.legal-page { padding-top: var(--header-h); }
.legal-hero { background: var(--forest-800); color: var(--sand-100); padding-block: clamp(3rem, 7vw, 5rem); }
.legal-hero .eyebrow { color: var(--azure-light); }
.legal-hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.4rem); }
.legal-hero p { color: rgba(235,242,248,.7); margin-top: .6rem; }
.legal-body { max-width: 800px; padding-block: clamp(3rem, 6vw, 5rem); }
.legal-body h2 { font-size: 1.5rem; margin: 2.4rem 0 .8rem; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { color: var(--muted); margin-bottom: .9rem; }
.legal-body ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 1rem; }
.legal-body li { margin-bottom: .5rem; }
.legal-body a { color: var(--forest); text-decoration: underline; }
/* Force a solid header on legal pages (no dark hero behind it) */
body.legal .site-header { background: rgba(255,255,255,.95); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); box-shadow: 0 1px 0 var(--line), var(--shadow-sm); }
body.legal .site-header:not(.is-scrolled) .nav-list a { color: var(--ink); }
body.legal .site-header:not(.is-scrolled) .nav-toggle span { background: var(--forest); }
body.legal .site-header:not(.is-scrolled) .nav-cta { box-shadow: var(--shadow-sm); background: linear-gradient(135deg, var(--forest-700), var(--forest)); }

/* ==========================================================================
   Booking widget (client-facing, multi-step) — assets/js/booking.js
   On-brand, reuses design tokens. Modal dialog + inline section launcher.
   ========================================================================== */

/* ----- Launcher block inside the contact/booking section ----- */
.bk-launch {
  display: grid; gap: 1rem; margin-bottom: 1.6rem;
  background: linear-gradient(135deg, var(--forest-700), var(--forest));
  color: #fff; border-radius: var(--r-xl); padding: clamp(1.5rem, 3.5vw, 2.2rem);
  box-shadow: var(--shadow-lg);
}
.bk-launch h3 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.bk-launch p { color: rgba(245,250,255,.85); margin: 0; font-size: 1rem; }
.bk-launch-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .35rem; }
.bk-launch .btn--primary { background: #fff; color: var(--forest); }
.bk-launch .btn--primary:hover { background: var(--sand-100); color: var(--forest); }
.bk-launch .btn--ghost-light { color: #fff; }
.bk-launch .btn[disabled] { opacity: .6; cursor: progress; pointer-events: none; }
.bk-launch-user { font-size: .92rem; color: rgba(245,250,255,.9); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bk-launch-user strong { color: #fff; }
.bk-launch-user button {
  color: #fff; font-weight: 600; font-size: .88rem; text-decoration: underline;
  text-underline-offset: 3px; opacity: .9;
}
.bk-launch-user button:hover { opacity: 1; }

/* ----- Overlay + dialog ----- */
.bk-overlay {
  position: fixed; inset: 0; z-index: 300; display: flex;
  align-items: flex-end; justify-content: center;
  background: rgba(5,32,52,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 0; opacity: 0; transition: opacity .28s var(--ease);
}
@media (min-width: 640px) { .bk-overlay { align-items: center; padding: clamp(1rem, 4vh, 2.5rem) 1rem; } }
.bk-overlay.is-open { opacity: 1; }
.bk-overlay[hidden] { display: none; }

.bk-dialog {
  background: var(--white); width: 100%; max-width: 600px;
  max-height: 100dvh; display: flex; flex-direction: column;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-lg); overflow: hidden;
  transform: translateY(24px); transition: transform .3s var(--ease);
}
@media (min-width: 640px) { .bk-dialog { max-height: min(92dvh, 820px); border-radius: var(--r-xl); } }
.bk-overlay.is-open .bk-dialog { transform: translateY(0); }

/* ----- Header / progress ----- */
.bk-head {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem clamp(1.2rem, 4vw, 1.8rem); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--white); z-index: 2;
}
.bk-head h2 { font-size: 1.25rem; flex: 1; line-height: 1.2; }
.bk-eyebrow { font-size: .7rem; }
.bk-close {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-pill);
  display: grid; place-items: center; color: var(--muted);
  background: var(--sand-100); transition: background .2s var(--ease), color .2s var(--ease);
}
.bk-close:hover { background: var(--sand-200); color: var(--forest); }
.bk-close svg { width: 1.2rem; height: 1.2rem; }

.bk-steps {
  display: flex; gap: .4rem; padding: 0 clamp(1.2rem, 4vw, 1.8rem) 1rem;
  background: var(--white);
}
.bk-steps li {
  flex: 1; height: 5px; border-radius: var(--r-pill); background: var(--sand-200);
  transition: background .3s var(--ease);
}
.bk-steps li.is-done { background: var(--sage); }
.bk-steps li.is-current { background: var(--forest); }

/* ----- Scrollable body ----- */
.bk-body { padding: clamp(1.2rem, 4vw, 1.8rem); overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.bk-step-title { font-size: 1.35rem; margin-bottom: .35rem; }
.bk-step-intro { color: var(--muted); font-size: .98rem; margin-bottom: 1.3rem; }

/* ----- Selectable cards (services / therapists) ----- */
.bk-options { display: grid; gap: .75rem; }
.bk-option {
  display: flex; align-items: flex-start; gap: .9rem; width: 100%; text-align: left;
  background: var(--sand-50); border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 1rem 1.1rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.bk-option:hover { border-color: var(--sage-300, var(--sand-300)); background: var(--white); }
.bk-option.is-selected { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(0,120,192,.18); background: var(--white); }
.bk-option-ic {
  width: 46px; height: 46px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--sky-50); color: var(--sage);
}
.bk-option-ic svg { width: 1.5rem; height: 1.5rem; }
.bk-option-av {
  width: 46px; height: 46px; flex: none; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--forest); color: #fff; font-family: var(--font-display); font-size: 1.15rem;
  object-fit: cover;
}
.bk-option-main { flex: 1; min-width: 0; }
.bk-option-main h4 { font-family: var(--font-display); font-size: 1.08rem; color: var(--forest); margin-bottom: .15rem; }
.bk-option-main p { font-size: .9rem; color: var(--muted); line-height: 1.5; margin: 0; }
.bk-option-meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin-top: .55rem; }
.bk-tag {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600;
  color: var(--sage-600); background: var(--sky-50); padding: .25rem .6rem; border-radius: var(--r-pill);
}
.bk-tag svg { width: .95rem; height: .95rem; }
.bk-tag--price { color: var(--forest); background: var(--sand-200); }
.bk-option-check {
  width: 24px; height: 24px; flex: none; border-radius: var(--r-pill); border: 1.5px solid var(--sand-300);
  display: grid; place-items: center; color: #fff; transition: background .2s var(--ease), border-color .2s var(--ease);
  margin-top: .15rem;
}
.bk-option.is-selected .bk-option-check { background: var(--sage); border-color: var(--sage); }
.bk-option-check svg { width: 1rem; height: 1rem; opacity: 0; }
.bk-option.is-selected .bk-option-check svg { opacity: 1; }

/* ----- Date input ----- */
.bk-date-field { max-width: 320px; }
.bk-date-field input { font-size: 1.05rem; }

/* ----- Slot chips ----- */
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .6rem; }
.bk-slot {
  padding: .7rem .5rem; border-radius: var(--r-sm); border: 1.5px solid var(--line);
  background: var(--sand-50); font-weight: 600; font-size: .98rem; color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.bk-slot:hover { border-color: var(--sage); background: var(--white); }
.bk-slot.is-selected { background: linear-gradient(135deg, var(--forest-700), var(--forest)); color: #fff; border-color: var(--forest); box-shadow: var(--shadow-md); }

/* ----- Auth (login / signup) ----- */
.bk-tabs { display: flex; gap: .4rem; background: var(--sand-100); padding: .3rem; border-radius: var(--r-pill); margin-bottom: 1.4rem; }
.bk-tab {
  flex: 1; padding: .6rem 1rem; border-radius: var(--r-pill); font-weight: 600; font-size: .95rem;
  color: var(--muted); transition: background .2s var(--ease), color .2s var(--ease);
}
.bk-tab.is-active { background: var(--white); color: var(--forest); box-shadow: var(--shadow-sm); }
.bk-form .field:last-of-type { margin-bottom: .6rem; }
.bk-pw-hints { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; gap: .25rem; }
.bk-pw-hints li { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: .45rem; }
.bk-pw-hints li svg { width: .95rem; height: .95rem; flex: none; color: var(--sand-300); }
.bk-pw-hints li.is-ok { color: var(--sage-600); }
.bk-pw-hints li.is-ok svg { color: var(--sage); }
.bk-form-error {
  background: rgba(187,106,82,.1); color: #a85540; border-radius: var(--r-sm);
  padding: .7rem .9rem; font-size: .9rem; margin-bottom: 1rem;
}

/* ----- Confirm / summary ----- */
.bk-summary { background: var(--sand-100); border-radius: var(--r-md); padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; }
.bk-summary dl { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1rem; margin: 0; }
.bk-summary dt { color: var(--muted); font-size: .9rem; }
.bk-summary dd { color: var(--ink); font-weight: 600; font-size: .95rem; margin: 0; text-align: right; }
.bk-summary dd.bk-summary-total { color: var(--forest); }

/* ----- Result states ----- */
.bk-result { text-align: center; padding: 1.5rem 0; }
.bk-result-ic {
  width: 72px; height: 72px; margin: 0 auto 1.2rem; border-radius: var(--r-pill); display: grid; place-items: center;
}
.bk-result-ic svg { width: 2.2rem; height: 2.2rem; }
.bk-result-ic--ok { background: var(--sky-50); color: var(--sage); }
.bk-result h3 { margin-bottom: .6rem; }
.bk-result p { color: var(--muted); max-width: 40ch; margin: 0 auto 1.4rem; }

/* ----- Loading / empty / error states ----- */
.bk-state { text-align: center; color: var(--muted); padding: 2.2rem 1rem; font-size: .98rem; }
.bk-spinner {
  width: 34px; height: 34px; margin: 0 auto 1rem; border-radius: var(--r-pill);
  border: 3px solid var(--sand-200); border-top-color: var(--sage); animation: bk-spin .7s linear infinite;
}
@keyframes bk-spin { to { transform: rotate(360deg); } }
.bk-retry { margin-top: 1rem; }

/* ----- Footer / nav buttons ----- */
.bk-foot {
  display: flex; gap: .75rem; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1.2rem, 4vw, 1.8rem); border-top: 1px solid var(--line);
  position: sticky; bottom: 0; background: var(--white);
}
.bk-foot .btn { flex: 1; }
.bk-foot .bk-back { flex: 0 0 auto; }
.bk-back {
  background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line);
  font-weight: 600;
}
.bk-back:hover { color: var(--forest); box-shadow: inset 0 0 0 1.5px var(--sand-300); transform: none; }
.bk-foot .btn[disabled], .btn.is-busy { opacity: .65; cursor: progress; pointer-events: none; }

/* ----- My bookings list ----- */
.bk-mybookings { display: grid; gap: .85rem; }
.bk-mybooking {
  background: var(--sand-50); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1rem 1.1rem; display: grid; gap: .5rem;
}
.bk-mybooking-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.bk-mybooking h4 { font-family: var(--font-display); font-size: 1.05rem; color: var(--forest); }
.bk-mybooking-when { color: var(--muted); font-size: .9rem; }
.bk-status {
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: .3rem .65rem; border-radius: var(--r-pill); white-space: nowrap; flex: none;
}
.bk-status--pending   { background: #fdf3e0; color: #9a6b16; }
.bk-status--confirmed { background: var(--sky-50); color: var(--sage-600); }
.bk-status--completed { background: var(--sand-200); color: var(--forest); }
.bk-status--cancelled,
.bk-status--rejected  { background: #f6e6e1; color: #a85540; }
.bk-cancel {
  justify-self: start; font-size: .85rem; font-weight: 600; color: #a85540;
  text-decoration: underline; text-underline-offset: 3px;
}
.bk-cancel:hover { color: #8c4634; }
.bk-cancel[disabled] { opacity: .5; pointer-events: none; }
.bk-mybooking-actions { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.bk-change {
  font-size: .85rem; font-weight: 600; color: var(--forest);
  text-decoration: underline; text-underline-offset: 3px;
}
.bk-change:hover { color: var(--forest-700); }

/* keep body from scrolling behind the dialog */
body.bk-locked { overflow: hidden; }

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-scroll { animation: none; }
  .bk-overlay, .bk-dialog { transition: none; }
  .bk-spinner { animation: bk-spin 1s linear infinite; }
}