/* Vytara Wellness - shared site-family styles.
   Extracted from inline <style>; each page loads this between its two inline style blocks. */

/* ========== TOKENS ========== */
:root{
    --forest:#224236;
    --forest-deep:#16302A;
    --sage:#5B8173;
    --gold:#E7BA5F;
    --gold-soft:#D4A857;
    --ink:#0E1310;
    --linen:#F2EFE8;
    --linen-warm:#EAE5DA;
    --paper:#FBFAF6;
    --rule:rgba(34,66,54,0.16);
    --rule-soft:rgba(34,66,54,0.10);
    --display:'Cormorant Garamond', 'Garamond', serif;
    --body:'Montserrat', system-ui, sans-serif;
    --mark:'Tenor Sans', 'Optima', serif;
  }

/* ========== DARK THEME OVERRIDES ==========
     Brand tokens (--linen, --ink, --forest, --gold) stay as-is because they
     are used as semantic constants throughout the prototype (e.g. hero text
     is always --linen and lives on the dark hero photo in both themes).
     Instead, dark mode is achieved by per-section overrides that target
     backgrounds and body-content text only. */
body{ transition:background-color .3s ease, color .3s ease; }

[data-theme="dark"] body{ background:#0E1F18; color:#F2EFE8; }

/* Section backgrounds */
[data-theme="dark"] .intro{ background:#0E1F18; }

[data-theme="dark"] .membership{ background:#0E1F18; }

[data-theme="dark"] .studio{ background:#16302A; }

[data-theme="dark"] .reflections{ background:#0E1F18; }

[data-theme="dark"] .trust{ background:#16302A; border-bottom-color:rgba(242,239,232,0.08); }

/* Rules and dividers */
[data-theme="dark"] .therapies-head,
  [data-theme="dark"] .specialty-head{ border-bottom-color:rgba(242,239,232,0.14); }

[data-theme="dark"] .therapies-grid,
  [data-theme="dark"] .specialty-list,
  [data-theme="dark"] .tiers,
  [data-theme="dark"] .secondary-tiers{ border-top-color:rgba(242,239,232,0.14); border-left-color:rgba(242,239,232,0.14); }

[data-theme="dark"] .stat{ border-right-color:rgba(242,239,232,0.14); }

/* Headlines and display text */
[data-theme="dark"] .intro-text h2,
  [data-theme="dark"] .therapies-head h2,
  [data-theme="dark"] .specialty-head h2,
  [data-theme="dark"] .membership-head h2,
  [data-theme="dark"] .studio-text h2,
  [data-theme="dark"] .reflections h2,
  [data-theme="dark"] .display-h{ color:#F2EFE8; }

[data-theme="dark"] .intro-text .lede,
  [data-theme="dark"] .reflection-quote{ color:#F2EFE8; }

[data-theme="dark"] .therapy h3{ color:#F2EFE8; }

[data-theme="dark"] .therapies-head .head-aside{ color:rgba(242,239,232,0.78); }

[data-theme="dark"] .therapies-foot .note{ color:#F2EFE8; }

/* Specialty programs */
[data-theme="dark"] .specialty-item .question{ color:#F2EFE8; }

[data-theme="dark"] .specialty-item .answer{ color:rgba(242,239,232,0.78); }

/* Membership */
[data-theme="dark"] .tier{ background:#16302A; }

[data-theme="dark"] .tier.featured{ background:#22473B; }

/* card hover is lift + shadow only — see elevated-card rules below */
[data-theme="dark"] .tier h3{ color:#F2EFE8; }

[data-theme="dark"] .tier .price .amt{ color:#F2EFE8; }

[data-theme="dark"] .tier .credits{ color:#F2EFE8; border-bottom-color:rgba(242,239,232,0.14); }

[data-theme="dark"] .tier li{ color:rgba(242,239,232,0.78); }

[data-theme="dark"] .membership-head .lede{ color:rgba(242,239,232,0.78); }

[data-theme="dark"] .secondary-tier .left h4{ color:#F2EFE8; }

[data-theme="dark"] .secondary-tier .left .desc{ color:rgba(242,239,232,0.78); }

[data-theme="dark"] .secondary-tier .right .amt{ color:#F2EFE8; }

[data-theme="dark"] .packages-row{ background:#16302A; border-color:rgba(242,239,232,0.14); }

[data-theme="dark"] .packages-row p{ color:#F2EFE8; }

/* Studio */
[data-theme="dark"] .studio-text .lede{ color:rgba(242,239,232,0.78); }

[data-theme="dark"] .studio-meta{ border-top-color:rgba(242,239,232,0.14); }

[data-theme="dark"] .studio-meta-block .value{ color:#F2EFE8; }

[data-theme="dark"] .studio-meta-block .value .small{ color:rgba(242,239,232,0.78); }

/* Trust strip */
[data-theme="dark"] .trust-eyebrow,
  [data-theme="dark"] .stat-num,
  [data-theme="dark"] .stat-label{ color:#F2EFE8; }

/* Reflections */
[data-theme="dark"] .reflection-controls .arrow-btn{ border-color:rgba(242,239,232,0.14); color:#F2EFE8; }

[data-theme="dark"] .reflection-controls .arrow-btn:hover{ background:#F2EFE8; color:#0E1F18; border-color:#F2EFE8; }

/* Link-CTAs in body content (default color is var(--forest) - too dark on dark bg) */
[data-theme="dark"] .link-cta:not(.on-dark){ color:#F2EFE8; }

[data-theme="dark"] .link-cta:not(.on-dark):hover{ color:var(--gold); }

/* Body of intro paragraphs use hard-coded #3A4A41 — lift in dark mode */
[data-theme="dark"] .intro-text p,
  [data-theme="dark"] .therapy .sub-list,
  [data-theme="dark"] .therapies-head .head-aside,
  [data-theme="dark"] .specialty-item .answer{ color:rgba(242,239,232,0.78); }

/* ========== THEME TOGGLE BUTTON ========== */
.theme-toggle{
    position:fixed; bottom:24px; right:24px; z-index:200;
    width:48px; height:48px; border-radius:50%;
    border:1px solid var(--rule); background:var(--linen);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    color:var(--ink); box-shadow:0 8px 24px rgba(0,0,0,0.18);
    transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  }

.theme-toggle:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); transform:translateY(-2px); }

.theme-toggle svg{ width:20px; height:20px; }

[data-theme="light"] .theme-toggle .moon{display:block;}

[data-theme="light"] .theme-toggle .sun{display:none;}

[data-theme="dark"] .theme-toggle .moon{display:none;}

[data-theme="dark"] .theme-toggle .sun{display:block;}

*{box-sizing:border-box; margin:0; padding:0;}

body{
    font-family:var(--body);
    font-weight:400;
    font-size:16px;
    line-height:1.65;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

/* ========== NAV ========== */
/* Default state = "over hero" — transparent, light text. Hero is dark in both variants.
     Scrolled state = "over content" — solid mode-appropriate background, dark text in light mode. */
.nav{
    position:sticky;
    top:0;
    /* Above the drawer (z:99) so the hamburger button stays clickable
       and the morph-to-X is visible while the drawer is open. iOS
       position:fixed has reflow quirks under body{overflow:hidden},
       so we promote the in-flow nav itself instead. */
    z-index:102;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom:1px solid transparent;
    transition:background .4s ease, backdrop-filter .4s ease, border-bottom-color .4s ease;
  }

body.scrolled .nav{
    background:rgba(251,250,246,0.94);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom-color:var(--rule-soft);
  }

/* Nav layout: viewport-spanning so the right-side CTA can sit against the
     right edge of the page (over the dark area beyond the hero photo's
     foliage). To preserve nav-links visual centering on the viewport, we
     use a symmetric `minmax(0, 1fr) auto minmax(0, 1fr)` grid and named
     areas. Wordmark anchors to its prior position (~where it sat when the
     nav was capped at 1440px wide) via `margin-left: max(0, 50vw - 720px)`.
     On viewports <= 1440 the calc clamps to 0 and wordmark hugs padding-left
     at 56px, so narrow-screen layout is unchanged. */
.nav-inner{
    max-width:none;
    margin:0 auto;
    padding:22px 56px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:"brand links cta";
    align-items:center;
    gap:48px;
  }

.wordmark{
    grid-area:brand;
    justify-self:start;
    /* Recreate the old centered-1440 left offset on wide viewports.
       (W - 1440) / 2 = 50vw - 720px. Clamped at 0 for viewports <= 1440. */
    margin-left:max(0px, calc(50vw - 720px));
    font-family:var(--mark);
    font-size:18px;
    letter-spacing:0.42em;
    text-transform:uppercase;
    color:var(--linen);
    text-decoration:none;
    transition:color .35s ease;
  }

body.scrolled .wordmark{ color:var(--forest); }

.nav-links{
    grid-area:links;
    display:flex;
    gap:42px;
    list-style:none;
    justify-self:center;
  }

.nav-links a{
    font-family:var(--body);
    font-size:11.5px;
    font-weight:400;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:rgba(242,239,232,0.88);
    text-decoration:none;
    padding:6px 0;
    border-bottom:1px solid transparent;
    transition:border-color .25s ease, color .35s ease;
  }

.nav-links a:hover{color:var(--gold); border-color:var(--gold);}

body.scrolled .nav-links a{ color:var(--ink); }

body.scrolled .nav-links a:hover{ color:var(--forest); border-color:var(--gold); }

.nav-cta{
    grid-area:cta;
    justify-self:end;
    font-family:var(--body);
    font-size:11.5px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--linen);
    text-decoration:none;
    border-bottom:1px solid var(--gold);
    padding-bottom:4px;
    transition:color .35s ease;
  }

.nav-cta:hover{border-bottom-width:2px; padding-bottom:3px;}

.nav-cta .arrow{display:inline-block; margin-left:8px; transition:transform .25s ease;}

.nav-cta:hover .arrow{transform:translateX(4px);}

body.scrolled .nav-cta{ color:var(--forest); }

/* ============================================================
     MEGA-NAV BAR — Remedy-Place-style shared slide-down.
     One panel inside .nav; JS swaps content per hovered trigger.
     Theme-aware via CSS vars. Hidden if JS doesn't run. */
:root,
  [data-theme="light"]{
    /* Solid for the nav area when open; slightly transparent for the
       dropdown panel below so backdrop-filter blur reads through. */
    --nav-mega-solid: rgba(251, 250, 246, 1);
    --nav-mega-bg: rgba(251, 250, 246, 0.82);
    --nav-mega-border: rgba(34, 66, 54, 0.14);
    /* Sage in light, gold in dark — matches the approved service-page treatment
       (per the gold-on-light contrast audit). */
    --nav-mega-heading: var(--sage);
    --nav-mega-text: #3A4A41;
    --nav-mega-text-hover: var(--forest);
    --nav-mega-shadow: 0 24px 40px -16px rgba(34, 66, 54, 0.22);
  }

[data-theme="dark"]{
    --nav-mega-solid: rgba(7, 15, 11, 1);
    --nav-mega-bg: rgba(7, 15, 11, 0.82);
    --nav-mega-border: rgba(231, 186, 95, 0.20);
    --nav-mega-heading: var(--gold);
    --nav-mega-text: rgba(242, 239, 232, 0.86);
    --nav-mega-text-hover: var(--gold);
    --nav-mega-shadow: 0 28px 48px -12px rgba(0, 0, 0, 0.45);
  }

/* When mega opens, fill the nav itself solid for visual continuity. */
html.js .nav.nav-mega-open{
    background: var(--nav-mega-solid);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border-bottom-color: transparent;
  }

/* Nav text legible against now-opaque nav bg */
html.js .nav.nav-mega-open .wordmark{ color: var(--text-strong); }

[data-theme="dark"] html.js .nav.nav-mega-open .wordmark{ color: var(--linen); }

html.js .nav.nav-mega-open .nav-links a{ color: var(--text); }

html.js .nav.nav-mega-open .nav-links a:hover{ color: var(--text-strong); border-color: var(--gold); }

[data-theme="dark"] html.js .nav.nav-mega-open .nav-links a{ color: var(--linen); }

html.js .nav.nav-mega-open .nav-cta{ color: var(--text-strong); }

[data-theme="dark"] html.js .nav.nav-mega-open .nav-cta{ color: var(--linen); }

/* Scrolled nav in dark mode: keep the bar dark with light text, matching the
     approved service page. Light mode keeps the pale scrolled bar (base rules). */
[data-theme="dark"] body.scrolled .nav{ background:rgba(14,31,24,0.94); border-bottom-color:rgba(242,239,232,0.10); }

[data-theme="dark"] body.scrolled .wordmark{ color:var(--text); }

[data-theme="dark"] body.scrolled .nav-links a{ color:var(--text); }

[data-theme="dark"] body.scrolled .nav-links a:hover{ color:var(--text-strong); border-color:var(--gold); }

[data-theme="dark"] body.scrolled .nav-cta{ color:var(--text); }

.nav-mega{ display:none; }

html.js .nav-mega{
    display:block;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    background:var(--nav-mega-bg);
    backdrop-filter:blur(28px) saturate(160%);
    -webkit-backdrop-filter:blur(28px) saturate(160%);
    border-bottom:1px solid var(--nav-mega-border);
    box-shadow:var(--nav-mega-shadow);
    z-index:101;
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
      max-height .4s cubic-bezier(.22,.61,.36,1),
      opacity .25s ease,
      visibility 0s linear .4s;
  }

html.js .nav.nav-mega-open .nav-mega{
    max-height:560px;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:
      max-height .4s cubic-bezier(.22,.61,.36,1),
      opacity .25s ease,
      visibility 0s linear 0s;
  }

.nav-mega-inner{
    position:relative;
    padding:48px 56px 56px;
    max-width:1440px;
    margin:0 auto;
  }

.nav-mega-content{ display:none; }

.nav[data-mega-active="therapies"] .nav-mega-content[data-content="therapies"],
  .nav[data-mega-active="programs"] .nav-mega-content[data-content="programs"]{
    display:grid;
  }

.nav-mega-content[data-content="therapies"]{
    grid-template-columns:repeat(4, 1fr);
    gap:56px;
  }

.nav-mega-content[data-content="programs"]{
    grid-template-columns:1fr;
    max-width:720px;
  }

.programs-list{
    columns:2;
    column-gap:48px;
    list-style:none;
    padding:0;
    margin:0;
  }

.programs-list li{ break-inside:avoid; }

.dropdown-col h4{
    font-family:var(--body);
    font-size:10.5px;
    font-weight:500;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--nav-mega-heading);
    margin-bottom:20px;
  }

.dropdown-col ul{ list-style:none; padding:0; margin:0; }

.dropdown-col li{ margin-bottom:2px; }

.dropdown-col a{
    display:block;
    padding:7px 0;
    font-family:var(--body);
    font-style:normal;
    font-weight:400;
    font-size:14px;
    line-height:1.5;
    letter-spacing:0;
    text-transform:none;
    color:var(--nav-mega-text);
    border-bottom:0;
    text-decoration:none;
    transition:color .2s ease, transform .2s ease;
  }

.dropdown-col a:hover{
    color:var(--nav-mega-text-hover);
    transform:translateX(4px);
  }

@media (max-width:1100px){
    .nav-mega-inner{ padding:36px 32px 44px; }
    .nav-mega-content[data-content="therapies"]{
      grid-template-columns:repeat(3, 1fr);
      row-gap:36px;
    }
  }

@media (max-width:680px){
    html.js .nav-mega{ display:none; }
  }

/* ========== MOBILE NAV: HAMBURGER + DRAWER ========== */
/* Hidden by default; revealed inside the @680px media query.
     Tap target is 44x44 (WCAG 2.5.5). Icon is 3 hairlines that morph to an X. */
.nav-toggle{
    display:none;
    position:relative;
    width:44px;
    height:44px;
    background:transparent;
    border:0;
    cursor:pointer;
    padding:0;
    z-index:101;
  }

.nav-toggle-icon,
  .nav-toggle-icon::before,
  .nav-toggle-icon::after{
    position:absolute;
    width:22px;
    height:1px;
    background:var(--linen);
    transition:transform .3s cubic-bezier(.22,.61,.36,1), top .3s ease, opacity .2s ease, background-color .35s ease;
  }

.nav-toggle-icon{
    top:50%;
    left:50%;
    margin-left:-11px;
  }

.nav-toggle-icon::before{
    content:"";
    top:-7px;
    left:0;
  }

.nav-toggle-icon::after{
    content:"";
    top:7px;
    left:0;
  }

/* Scrolled recolor — ported 2026-08-10 from vytara-service.css, where these two
   rules always existed. The drawer port into this sheet missed them, so on the
   scrolled pale bar in light mode the linen hairlines were invisible (cream on
   cream). Same var pairing as the wordmark/links scrolled recolor above. */
body.scrolled .nav-toggle-icon,
  body.scrolled .nav-toggle-icon::before,
  body.scrolled .nav-toggle-icon::after{ background:var(--text-strong); }

[data-theme="dark"] body.scrolled .nav-toggle-icon,
  [data-theme="dark"] body.scrolled .nav-toggle-icon::before,
  [data-theme="dark"] body.scrolled .nav-toggle-icon::after{ background:var(--text); }

/* Open state: middle bar fades, top + bottom rotate to form X */
.nav-toggle.is-open .nav-toggle-icon{
    background:transparent;
  }

.nav-toggle.is-open .nav-toggle-icon::before{
    top:0;
    transform:rotate(45deg);
  }

.nav-toggle.is-open .nav-toggle-icon::after{
    top:0;
    transform:rotate(-45deg);
  }

/* Mobile drawer — verbatim from approved service-page deploy.
     Hidden at desktop; activated inside @media (max-width:680px). */
.nav-drawer{ display:none; }

body.drawer-open{ overflow:hidden; }

/* Theme-aware text tokens used by the drawer rules below. The body content
     CSS elsewhere uses hard-coded color values; these tokens are scoped
     additions for the drawer markup, kept in sync with the service pages. */
:root,
  [data-theme="light"]{
    --text: #0E1310;
    --text-strong: #16302A;
    --text-soft: #3A4A41;
  }

[data-theme="dark"]{
    --text: #F2EFE8;
    --text-strong: #FBFAF6;
    --text-soft: rgba(242,239,232,0.78);
  }

@media (max-width:680px){
    /* ============================================================
       Mobile drawer — full-screen editorial panel with accordion
       sections for Therapies and Programs.
       ============================================================ */
    .nav-drawer{
      display:block;
      position:fixed;
      inset:0;
      z-index:101;
      background:var(--nav-mega-solid);
      color:var(--text);
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      padding:80px 24px 32px;
      opacity:0;
      visibility:hidden;
      transform:translateY(-12px);
      transition:opacity .35s cubic-bezier(.22,.61,.36,1), visibility 0s linear .35s, transform .35s cubic-bezier(.22,.61,.36,1);
    }
    .nav-drawer.is-open{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
      transition:opacity .35s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s, transform .35s cubic-bezier(.22,.61,.36,1);
    }
    .nav-drawer-inner{
      max-width:480px;
      margin:0 auto;
      display:flex;
      flex-direction:column;
      min-height:calc(100vh - 112px);
      min-height:calc(100svh - 112px);
    }
    .drawer-list{
      list-style:none;
      padding:0;
      margin:0 0 32px;
      border-top:1px solid var(--rule);
    }
    .drawer-section, .drawer-item{
      border-bottom:1px solid var(--rule);
    }
    .drawer-toggle, .drawer-item a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      width:100%;
      padding:22px 0;
      background:transparent;
      border:0;
      cursor:pointer;
      text-align:left;
      font-family:var(--display);
      font-style:italic;
      font-weight:300;
      font-size:30px;
      line-height:1.1;
      color:var(--text-strong);
      text-decoration:none;
      transition:color .25s ease;
    }
    [data-theme="dark"] .drawer-toggle,
    [data-theme="dark"] .drawer-item a{ color:var(--text); }
    /* hover only for real pointers: touch browsers hold :hover after a tap,
       which left the Therapies toggle stuck gold (Dennis, 8/11) */
    @media (hover:hover){ .drawer-toggle:hover, .drawer-item a:hover{ color:var(--gold); } }
    .drawer-chevron{
      display:block;
      width:10px;
      height:10px;
      border-right:1px solid var(--gold);
      border-bottom:1px solid var(--gold);
      transform:rotate(45deg);
      transition:transform .3s ease;
      flex-shrink:0;
      margin-right:6px;
      margin-top:-4px;
    }
    .drawer-toggle[aria-expanded="true"] .drawer-chevron{ transform:rotate(-135deg); margin-top:4px; }
    .drawer-panel{
      max-height:0;
      overflow:hidden;
      transition:max-height .4s cubic-bezier(.22,.61,.36,1), padding-bottom .4s ease;
    }
    .drawer-toggle[aria-expanded="true"] + .drawer-panel{
      max-height:1400px;
      padding-bottom:24px;
    }
    .drawer-cat{ margin-bottom:28px; }
    .drawer-cat:last-child{ margin-bottom:0; }
    .drawer-cat h5{
      font-family:var(--body);
      font-size:12px;
      font-weight:600;
      letter-spacing:0.32em;
      text-transform:uppercase;
      color:var(--sage);
      margin-bottom:12px;
      padding-bottom:10px;
      border-bottom:1px solid rgba(122,139,126,0.22);
    }
    [data-theme="dark"] .drawer-cat h5{ color:var(--gold); border-bottom-color:rgba(231,186,95,0.22); }
    .drawer-cat ul{ list-style:none; padding:0; margin:0; }
    .drawer-cat li{ margin-bottom:2px; }
    .drawer-cat a{
      display:block;
      padding:8px 0;
      font-family:var(--body);
      font-size:14px;
      line-height:1.5;
      color:var(--text-soft);
      text-decoration:none;
      transition:color .2s ease;
    }
    .drawer-cat a:active{ color:var(--gold); }
    @media (hover:hover){ .drawer-cat a:hover{ color:var(--gold); } }
    .drawer-cta{
      margin-top:auto;
      display:inline-flex;
      align-items:center;
      gap:10px;
      align-self:flex-start;
      font-family:var(--body);
      font-size:11.5px;
      font-weight:500;
      letter-spacing:0.22em;
      text-transform:uppercase;
      color:var(--text-strong);
      text-decoration:none;
      border-bottom:1px solid var(--gold);
      padding-bottom:8px;
      margin-bottom:32px;
    }
    [data-theme="dark"] .drawer-cta{ color:var(--text); }
    .drawer-foot{
      padding-top:32px;
      border-top:1px solid var(--rule);
      font-family:var(--body);
      font-size:13px;
      line-height:1.85;
      color:var(--text-soft);
    }
    .drawer-foot a{
      color:var(--sage);
      text-decoration:none;
      border-bottom:1px solid var(--rule);
    }
    [data-theme="dark"] .drawer-foot a{ color:var(--gold); }
  }

/* ========== TEXT-LINK CTA SYSTEM (replaces long pill buttons) ========== */
.link-cta{
    display:inline-block;
    font-family:var(--body);
    font-size:11.5px;
    font-weight:400;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--forest);
    text-decoration:none;
    padding-bottom:6px;
    border-bottom:1px solid var(--gold);
    transition:border-bottom-width .2s ease, color .2s ease;
  }

.link-cta:hover{border-bottom-width:2px; padding-bottom:5px; color:var(--forest-deep);}

.link-cta .arrow{display:inline-block; margin-left:10px; transition:transform .25s ease;}

.link-cta:hover .arrow{transform:translateX(5px);}

.link-cta.on-dark{color:var(--linen);}

.link-cta.on-dark:hover{color:#fff;}

/* Mobile-only "Call Us" CTA — hidden on desktop, surfaces on mobile only */
.hero-call{ display:none; }

/* Quiet text link (lowercase, italic, inline body) */
.quiet-link{
    font-family:var(--display);
    font-style:italic;
    color:var(--forest);
    text-decoration:none;
    border-bottom:1px solid var(--gold);
    padding-bottom:1px;
  }

.quiet-link:hover{color:var(--forest-deep); border-bottom-width:2px;}

/* ========== HERO ========== */
/* margin-top pulls hero up UNDER the sticky nav so the transparent nav at
     scroll=0 reveals the hero image, not the body bg. */
.hero{
    position:relative;
    /* Hero must span viewport top-to-bottom even with negative margin-top.
       Formula: margin-top = -(navHeight + buffer); height = 100vh + buffer.
       Default nav is ~67px; 25px buffer absorbs subpixel rendering. */
    height:calc(100vh + 25px);
    min-height:680px;
    overflow:hidden;
    background:var(--forest-deep);
    margin-top:-92px;
  }

.hero-content{
    position:relative;
    z-index:2;
    height:100%;
    /* Span the full viewport so the hero copy sits closer to the left edge
       and the right-side aside can anchor cleanly to the right edge. */
    margin:0 auto;
    padding:0 56px 80px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:end;
    gap:60px;
  }

.hero-line{
    color:var(--linen);
  }

.hero-eyebrow{
    font-family:var(--body);
    font-size:10.5px;
    letter-spacing:0.36em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:14px;
  }

.hero-aside{
    justify-self:end;
    text-align:right;
    color:rgba(242,239,232,0.78);
    max-width:340px;
  }

.hero-aside p{
    font-family:var(--display);
    font-style:italic;
    font-weight:300;
    font-size:18px;
    line-height:1.5;
    margin-bottom:24px;
    color:rgba(242,239,232,0.92);
  }

.scroll-cue{
    position:absolute;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
    font-family:var(--body);
    font-size:9.5px;
    letter-spacing:0.36em;
    text-transform:uppercase;
    color:rgba(242,239,232,0.55);
    text-align:center;
  }

.scroll-cue::after{
    content:"";
    display:block;
    width:1px;
    height:32px;
    background:linear-gradient(to bottom, var(--gold), transparent);
    margin:14px auto 0;
  }

/* ========== TRUST STRIP / IMPACT STATS ========== */
.trust{
    background:var(--linen);
    padding:48px 56px 52px;
    border-bottom:1px solid var(--rule-soft);
  }

.trust-inner{
    max-width:1280px;
    margin:0 auto;
  }

.trust-eyebrow{
    font-family:var(--body);
    font-size:11px;
    font-weight:500;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--forest);
    text-align:center;
    margin-bottom:32px;
  }

.trust-stats{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0;
  }

.stat{
    text-align:center;
    padding:4px 14px;
    border-right:1px solid var(--rule);
  }

.stat:last-child{ border-right:none; }

.stat-num{
    font-family:var(--display);
    font-style:italic;
    font-weight:400;
    font-size:clamp(48px, 5vw, 62px);
    color:var(--forest);
    line-height:1;
    letter-spacing:-0.01em;
    margin-bottom:14px;
    position:relative;
    display:inline-block;
  }

.stat-num .plus{
    color:var(--gold);
    font-style:normal;
    font-weight:400;
    font-size:0.6em;
    margin-left:2px;
    position:relative;
    top:-0.45em;
  }

.stat-label{
    font-family:var(--body);
    font-size:12px;
    font-weight:500;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--forest);
    line-height:1.5;
    white-space:nowrap;
  }

/* ========== SECTIONS BASELINE ========== */
section{padding:140px 56px;}

.container{max-width:1280px; margin:0 auto;}

.container-tight{max-width:980px; margin:0 auto;}

.eyebrow{
    font-family:var(--body);
    font-size:10.5px;
    font-weight:500;
    letter-spacing:0.36em;
    text-transform:uppercase;
    color:var(--sage);
  }

.display-h{
    font-family:var(--display);
    font-style:italic;
    font-weight:300;
    line-height:1.05;
    letter-spacing:-0.005em;
    color:var(--forest);
  }

.display-h .accent{color:var(--gold-soft);}

/* ========== INTRO ========== */
.intro{background:var(--paper);}

.intro-inner{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:120px;
    align-items:center;
  }

.intro-text .eyebrow{margin-bottom:36px;}

.intro-text h2{
    font-family:var(--display);
    font-style:italic;
    font-weight:300;
    font-size:clamp(40px, 4.6vw, 64px);
    line-height:1.08;
    color:var(--forest);
    margin-bottom:32px;
  }

.intro-text h2 em{color:var(--gold-soft); font-style:italic;}

.intro-figure{
    position:relative;
    aspect-ratio:4/5;
    background:
      radial-gradient(ellipse at 30% 30%, rgba(231,186,95,0.18) 0%, transparent 60%),
      linear-gradient(160deg, #2D4D40 0%, #1A332B 100%);
    overflow:hidden;
  }

.photo-tag{
    position:absolute;
    bottom:18px;
    left:18px;
    z-index:2;
    font-family:var(--body);
    font-size:9.5px;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:rgba(242,239,232,0.65);
    border:1px solid rgba(242,239,232,0.22);
    padding:7px 11px;
    background:rgba(14,19,16,0.4);
  }

.therapy h3{
    font-family:var(--display);
    font-style:italic;
    font-weight:400;
    font-size:30px;
    line-height:1.15;
    color:var(--forest);
  }

.therapy .sub{
    font-family:var(--body);
    font-size:11px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--sage);
    margin-top:14px;
  }

.therapies-foot{
    margin-top:56px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:24px;
  }

.therapies-foot .note{
    font-family:var(--display);
    font-style:italic;
    font-size:17px;
    color:var(--forest);
    max-width:560px;
  }

/* ========== SPECIALTY PROGRAMS (slim row, expanded specialty list) ========== */
.specialty{
    background:var(--paper);
    padding:120px 56px;
  }

.specialty-inner{
    max-width:1280px;
    margin:0 auto;
  }

.specialty-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:32px;
    margin-bottom:48px;
    padding-bottom:28px;
    border-bottom:1px solid var(--rule);
  }

.specialty-list{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:0;
    border-top:1px solid var(--rule-soft);
    border-left:1px solid var(--rule-soft);
  }

.specialty-item .question{
    font-family:var(--display);
    font-style:italic;
    font-weight:400;
    font-size:clamp(22px, 2.1vw, 27px);
    line-height:1.18;
    color:var(--forest);
    margin-bottom:18px;
    letter-spacing:0.005em;
  }

/* ========== DOCTOR (founder framing, not clinical) ========== */
.founder{
    background:var(--forest);
    color:var(--linen);
    padding:160px 56px;
  }

/* Founder section uses a 3-child structure: head (eyebrow + h2),
     figure (portrait), body (name + lede + paragraphs + CTA).
     Desktop: figure occupies the full left column and spans both rows;
     head sits top-right, body sits bottom-right. This keeps the headline
     paired tightly with the image while the supporting copy reads below.
     Mobile (@1100): collapses to a single column reordered head → figure → body
     so the section opens with the headline, then the portrait, then the bio. */
.founder-inner{
    max-width:1280px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1.2fr;
    grid-template-rows:auto auto;
    grid-template-areas:
      "figure head"
      "figure body";
    column-gap:96px;
    row-gap:40px;
    align-items:start;
  }

/* Head sits bottom of its row, body starts at top of its row, so the two
     text blocks meet near the figure's vertical center. Figure inherits
     align-items:start from the container so its 4/5 aspect ratio governs
     height instead of being stretched across both rows. */
.founder-head{grid-area:head; align-self:end;}

.founder-figure{grid-area:figure;}

.founder-body{grid-area:body; align-self:start;}

.founder-figure{
    position:relative;
    aspect-ratio:4/5;
    background:
      radial-gradient(ellipse at 50% 40%, rgba(231,186,95,0.16) 0%, transparent 65%),
      linear-gradient(160deg, #1A332B 0%, #0E1F18 100%);
    overflow:hidden;
  }

.founder-name{
    font-family:var(--mark);
    font-size:13px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:28px;
  }

/* ========== MEMBERSHIP ========== */
.membership{
    background:var(--paper);
    padding:160px 56px;
  }

/* ===== Elevated tier cards — soft-shadow surfaces, featured "forest jewel" ===== */
.tiers{
    display:grid;
    grid-template-columns:1fr 1.1fr 1fr;
    gap:22px;
    max-width:1200px;
    margin:0 auto;
    align-items:center;          /* shorter side cards center beside the taller featured */
    padding-top:24px;            /* room for the lifted featured card */
  }

.tier{
    position:relative;
    padding:52px 40px 44px;
    background:var(--paper);
    display:flex;
    flex-direction:column;
    gap:18px;
    border:1px solid rgba(34,66,54,0.07);
    box-shadow:0 18px 44px -24px rgba(34,66,54,0.32), 0 2px 6px rgba(34,66,54,0.05);
    transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
  }

[data-theme="dark"] .tier{ border-color:rgba(242,239,232,0.08); box-shadow:0 22px 50px -26px rgba(0,0,0,0.62); }

.tier:hover{ transform:translateY(-10px) scale(1.025); z-index:3; box-shadow:0 38px 72px -22px rgba(34,66,54,0.42), 0 5px 12px rgba(34,66,54,0.1); }

[data-theme="dark"] .tier:hover{ box-shadow:0 44px 84px -24px rgba(0,0,0,0.75); }

/* Featured: larger, lifted forward, a dark forest card in both themes */
.tier.featured{
    padding:72px 46px 60px;
    background:#16302A;
    border-color:rgba(242,239,232,0.14);
    transform:translateY(-16px);
    z-index:2;
    box-shadow:0 44px 90px -30px rgba(22,48,42,0.55), 0 6px 16px rgba(22,48,42,0.22);
  }

.tier.featured:hover{ transform:translateY(-24px) scale(1.03); z-index:3; }

.tier-mark{
    font-family:var(--body);
    font-size:12px;
    font-weight:500;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--sage);
    margin-bottom:14px;
  }

/* Gold fails contrast on the light tier cards; sage in light, gold in dark
     (matches the approved service-page label treatment). */
[data-theme="dark"] .tier-mark{ color:var(--gold); }

.tier h3{
    font-family:var(--display);
    font-style:italic;
    font-weight:400;
    font-size:46px;
    line-height:1;
    color:var(--forest);
  }

.tier .price{
    display:flex;
    align-items:baseline;
    gap:10px;
    margin:10px 0 8px;
  }

.tier .price .amt{
    font-family:var(--display);
    font-style:italic;
    font-weight:400;
    font-size:54px;
    color:var(--forest);
  }

.tier .price .per{
    font-family:var(--body);
    font-size:12.5px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--sage);
  }

.tier .credits{
    font-family:var(--display);
    font-style:italic;
    font-size:23px;
    color:var(--forest);
    padding-bottom:24px;
    border-bottom:1px solid var(--rule);
    margin-bottom:24px;
  }

.tier ul{
    list-style:none;
    flex:1;
  }

.tier li{
    font-family:var(--body);
    font-size:16px;
    line-height:1.7;
    color:#3A4A41;
    padding:10px 0;
    padding-left:24px;
    position:relative;
  }

.tier li::before{
    content:"";
    position:absolute;
    left:0;
    top:19px;
    width:11px;
    height:1px;
    background:var(--sage);
  }

[data-theme="dark"] .tier li::before{ background:var(--gold); }

/* Featured = dark card in both themes -> light text + gold accents */
.tier.featured .tier-mark{ color:var(--gold); }

.tier.featured h3{ color:var(--linen); }

.tier.featured .price .amt{ color:var(--linen); }

.tier.featured .price .per{ color:var(--gold); }

.tier.featured .credits{ color:var(--linen); border-bottom-color:rgba(242,239,232,0.22); }

.tier.featured li{ color:rgba(242,239,232,0.86); }

.tier.featured li::before{ background:var(--gold); }

/* CTA: outlined on side cards, filled cream on the featured card */
.tier .tier-cta{ margin-top:30px; }

.tier .tier-cta .link-cta{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:16px 22px;
    font-size:12.5px; letter-spacing:0.2em;
    color:var(--forest); border:1px solid var(--rule);
    transition:background .25s ease, color .25s ease, border-color .25s ease;
  }

.tier .tier-cta .link-cta:hover{ background:var(--forest); color:var(--linen); border-color:var(--forest); padding-bottom:16px; }

[data-theme="dark"] .tier .tier-cta .link-cta{ color:var(--linen); border-color:rgba(242,239,232,0.28); }

[data-theme="dark"] .tier .tier-cta .link-cta:hover{ background:var(--linen); color:var(--forest-deep); border-color:var(--linen); }

.tier.featured .tier-cta .link-cta{ background:var(--linen); color:var(--forest-deep); border-color:var(--linen); }

.tier.featured .tier-cta .link-cta:hover{ background:var(--gold); color:var(--forest-deep); border-color:var(--gold); }

.secondary-tiers{
    max-width:1200px;
    margin:56px auto 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
  }

.secondary-tier{
    padding:34px 38px;
    background:var(--paper);
    border:1px solid rgba(34,66,54,0.07);
    box-shadow:0 14px 36px -24px rgba(34,66,54,0.28), 0 2px 5px rgba(34,66,54,0.04);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
  }

[data-theme="dark"] .secondary-tier{ background:#16302A; border-color:rgba(242,239,232,0.08); box-shadow:0 16px 40px -24px rgba(0,0,0,0.55); }

.secondary-tier:hover{ transform:translateY(-6px); box-shadow:0 26px 54px -24px rgba(34,66,54,0.36), 0 4px 9px rgba(34,66,54,0.07); }

[data-theme="dark"] .secondary-tier:hover{ box-shadow:0 32px 64px -24px rgba(0,0,0,0.7); }

.secondary-tier .left h4{
    font-family:var(--display);
    font-style:italic;
    font-weight:400;
    font-size:26px;
    color:var(--forest);
    margin-bottom:6px;
  }

.secondary-tier .left .desc{
    font-family:var(--body);
    font-size:16px;
    line-height:1.6;
    color:#3A4A41;
    max-width:320px;
  }

.secondary-tier .right{text-align:right;}

.secondary-tier .right .amt{
    font-family:var(--display);
    font-style:italic;
    font-size:32px;
    color:var(--forest);
    line-height:1;
  }

.secondary-tier .right .per{
    font-family:var(--body);
    font-size:10px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--sage);
    margin-top:4px;
  }

.packages-row{
    max-width:1200px;
    margin:24px auto 0;
    text-align:center;
    padding:40px;
    background:var(--paper);
    border:1px solid rgba(34,66,54,0.07);
    box-shadow:0 14px 36px -24px rgba(34,66,54,0.28), 0 2px 5px rgba(34,66,54,0.04);
    transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
  }

.packages-row:hover{ transform:translateY(-6px); box-shadow:0 32px 64px -24px rgba(34,66,54,0.4), 0 5px 12px rgba(34,66,54,0.08); }

[data-theme="dark"] .packages-row:hover{ box-shadow:0 40px 80px -24px rgba(0,0,0,0.72); }

.packages-row .label{
    font-family:var(--body);
    font-size:11px;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--sage);
    margin-bottom:14px;
  }

/* ========== STUDIO (the space) ========== */
.studio{
    background:var(--linen);
    padding:0;
  }

.studio-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:680px;
  }

.studio-figure{
    position:relative;
    background:
      radial-gradient(ellipse at 30% 60%, rgba(231,186,95,0.16) 0%, transparent 65%),
      linear-gradient(135deg, #2D4D40 0%, #1A332B 100%);
    overflow:hidden;
  }

.studio-text{
    padding:120px 80px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

.studio-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px;
    margin-bottom:40px;
    padding-top:32px;
    border-top:1px solid var(--rule);
  }

.studio-meta-block .label{
    font-family:var(--body);
    font-size:10px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--sage);
    margin-bottom:10px;
  }

.studio-meta-block .value{
    font-family:var(--display);
    font-style:normal;
    font-size:18px;
    line-height:1.45;
    color:var(--forest);
  }

.studio-actions{display:flex; gap:36px; flex-wrap:wrap;}

/* ========== REFLECTIONS (testimonial) ========== */
.reflections{
    background:var(--paper);
    padding:160px 56px;
  }

.reflections-inner{
    max-width:980px;
    margin:0 auto;
    text-align:center;
  }

.reflection-quote{
    font-family:var(--display);
    font-weight:400;
    font-style:italic;
    font-size:clamp(24px, 2.2vw, 30px);
    line-height:1.45;
    color:var(--forest);
    margin-bottom:36px;
    text-wrap:balance;
  }

.reflection-quote::before{
    content:"\201C";
    font-family:var(--display);
    font-style:italic;
    font-size:1.4em;
    color:var(--gold-soft);
    display:block;
    line-height:0.7;
    margin-bottom:14px;
  }

.reflection-attr{
    font-family:var(--body);
    font-size:11px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--sage);
  }

.reflection-controls{
    margin-top:64px;
    display:flex;
    gap:24px;
    justify-content:center;
    align-items:center;
  }

.reflection-controls .arrow-btn{
    width:44px;
    height:44px;
    border:1px solid var(--rule);
    background:transparent;
    cursor:pointer;
    color:var(--forest);
    font-family:var(--display);
    font-style:italic;
    font-size:22px;
    transition:background .25s ease, color .25s ease, border-color .25s ease;
  }

.reflection-controls .arrow-btn:hover{background:var(--forest); color:var(--linen); border-color:var(--forest);}

.reflection-controls .pos{
    font-family:var(--body);
    font-size:11px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--sage);
  }

/* ========== FINAL INVITATION ========== */
.invite{
    position:relative;
    background:var(--forest-deep);
    color:var(--linen);
    padding:0;
    overflow:hidden;
    min-height:560px;
    display:flex;
    align-items:center;
  }

.invite::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(ellipse at 80% 30%, rgba(231,186,95,0.25) 0%, transparent 55%),
      radial-gradient(ellipse at 10% 90%, rgba(34,66,54,0.85) 0%, transparent 65%),
      linear-gradient(135deg, #14241F 0%, #1E3A30 38%, #2D4D40 70%, #16302A 100%);
  }

.invite-inner{
    position:relative;
    z-index:2;
    max-width:1280px;
    margin:0 auto;
    padding:120px 56px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
    width:100%;
  }

.invite-aside{justify-self:end; text-align:right; max-width:380px;}

.invite-photo-tag{
    position:absolute;
    top:28px;
    right:32px;
    z-index:3;
    font-family:var(--body);
    font-size:9.5px;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:rgba(242,239,232,0.55);
    border:1px solid rgba(242,239,232,0.22);
    padding:7px 12px;
  }

/* ========== FOOTER ========== */
footer{
    background:var(--ink);
    color:rgba(242,239,232,0.7);
    padding:80px 56px 40px;
  }

.footer-inner{
    max-width:1440px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:48px;
    padding-bottom:48px;
    border-bottom:1px solid rgba(242,239,232,0.12);
  }

.footer-mark{
    font-family:var(--mark);
    font-size:24px;
    letter-spacing:0.42em;
    text-transform:uppercase;
    color:var(--linen);
    margin-bottom:20px;
  }

.footer-tagline{
    font-family:var(--display);
    font-style:italic;
    font-size:17px;
    line-height:1.55;
    color:rgba(242,239,232,0.85);
    max-width:280px;
  }

.footer-col h5{
    font-family:var(--body);
    font-size:10px;
    font-weight:500;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:18px;
  }

.footer-col ul{list-style:none;}

.footer-col li{margin-bottom:10px;}

.footer-col a{
    font-family:var(--body);
    font-size:16px;
    color:rgba(242,239,232,0.7);
    text-decoration:none;
    transition:color .2s ease;
  }

/* Footer items with no page behind them yet. Same type as the sibling links,
   dimmed so they read as labels rather than something you can click.
   0.5 alpha on --ink measures 4.78:1, which clears WCAG AA for body text. */
.footer-col .footer-static{
    font-family:var(--body);
    font-size:16px;
    color:rgba(242,239,232,0.5);
  }


.footer-col a:hover{color:var(--linen);}

/* Social links in the footer contact column. Monoline icons at 1.5 stroke to
   match the phone and theme-toggle icons already used site-wide; they inherit
   the footer link colour rather than platform brand colours, which would fight
   the palette on --ink. 38px hit area clears the 24px minimum for touch. */
.footer-social{
    display:flex;
    gap:14px;
    align-items:center;
    margin-top:18px;
  }

.footer-social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid rgba(242,239,232,0.22);
    color:rgba(242,239,232,0.7);
    transition:color .2s ease, border-color .2s ease, background-color .2s ease;
  }

.footer-social a:hover{
    color:var(--ink);
    border-color:var(--gold);
    background:var(--gold);
  }

.footer-social svg{ width:17px; height:17px; display:block; }


.footer-bottom{
    max-width:1440px;
    margin:32px auto 0;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:18px;
    font-family:var(--body);
    font-size:11px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:rgba(242,239,232,0.4);
  }

/* Mobile: match the footer side padding to the 20px sections use, so footer
   content sits flush with the rest of the page instead of indented at 56px. */
@media (max-width:680px){ footer{ padding-left:20px; padding-right:20px; } }

/* ========== RESPONSIVE ========== */
@media (max-width:1240px){
    .trust-stats{grid-template-columns:repeat(2,1fr); row-gap:36px;}
    .trust-stats .stat:nth-child(2){border-right:none;}
    .trust-stats .stat:nth-child(1), .trust-stats .stat:nth-child(2){padding-bottom:36px; border-bottom:1px solid var(--rule);}
  }

/* Phone: keep the strip 2x2 (the four pages' inline styles used to stack it
   to one column; removed 2026-08-10, parity with the quick-facts fix). The
   stat labels are longer than the service-page quick-facts, so release the
   desktop nowrap and tuck the scale in a notch so 2-up columns fit. */
@media (max-width:680px){
    .trust-stats{row-gap:26px;}
    .trust-stats .stat{padding:4px 8px;}
    .trust-stats .stat:nth-child(1), .trust-stats .stat:nth-child(2){padding-bottom:26px;}
    .stat-num{font-size:42px; margin-bottom:9px;}
    .stat-label{white-space:normal; font-size:10.5px; letter-spacing:0.12em; line-height:1.55; max-width:150px; margin:0 auto;}
  }

@media (max-width:1100px){
    .nav-inner{padding:18px 32px;}
    .nav-links{gap:28px;}
    /* nav at this breakpoint is ~58-60px tall; margin -82 = 22-24px buffer matches default's +25 height */
    .hero{margin-top:-82px;}
    section{padding:96px 32px;}
    .specialty, .founder, .membership, .reflections{padding-left:32px; padding-right:32px;}
    .intro-inner{grid-template-columns:1fr; gap:60px;}
    .therapies-head{grid-template-columns:1fr; gap:24px;}
    .therapies-grid{grid-template-columns:repeat(2, 1fr);}
    .specialty-list{grid-template-columns:1fr;}
    .specialty-item{border-right:none;}
    /* Single-column collapse: head opens the section (eyebrow + headline),
       then the portrait, then the body (name + lede + paragraphs + CTA).
       The DOM is already in this order; we redeclare grid-template-areas
       to keep the named regions valid in single-column mode. */
    .founder-inner{
      grid-template-columns:1fr;
      grid-template-areas:
        "head"
        "figure"
        "body";
      column-gap:0;
      row-gap:48px;
    }
    .tiers{grid-template-columns:1fr; padding-top:0;}
    .tier.featured{ transform:none; padding:56px 40px 48px; }
    .tier:hover, .tier.featured:hover{ transform:translateY(-6px); }
    .secondary-tiers{grid-template-columns:1fr;}
    .studio-inner{grid-template-columns:1fr;}
    .studio-text{padding:80px 32px;}
    .invite-inner{grid-template-columns:1fr; gap:40px; padding:80px 32px;}
    .invite-aside{justify-self:start; text-align:left;}
    .footer-inner{grid-template-columns:1fr 1fr; gap:40px;}
    .hero-content{grid-template-columns:1fr; gap:32px; padding:0 32px 60px;}
    .hero-aside{justify-self:start; text-align:left;}
  }

/* ============================================================
   CARD RAIL — reusable horizontal snap-scroll for card rows on
   phone + tablet (<=1100px). Add class "card-rail" to any card
   container; above 1100px it does nothing (the container keeps its
   own grid). Set --rail-card to size the cards (default min(80%,330px)).
   The doubled .card-rail.card-rail bumps specificity so it overrides a
   container's own single-class display rule with no other CSS changes.
   vytara-site.js injects the .rail-dots progress indicator per rail.
   ============================================================ */
.rail-dots{ display:none; }
@media (max-width:1100px){
  .card-rail.card-rail{
    display:flex;
    align-items:stretch;
    gap:16px;
    overflow-x:auto;
    /* Firm flicks glide across cards and settle on the nearest; small drags
       settle back. If it ever feels too crisp, swap to 'x proximity'. */
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .card-rail.card-rail::-webkit-scrollbar{ display:none; }
  .card-rail > *{
    flex:0 0 var(--rail-card, min(80%, 330px));
    scroll-snap-align:start;
  }
  /* Opt-in extra scroll hint for rails with tall/large cards where the peek alone
     is a weak cue (e.g. homepage membership). Fades the right edge so the card
     visibly runs off-screen; vytara-site.js adds a one-time entrance nudge. */
  .card-rail--hint{
    -webkit-mask-image:linear-gradient(90deg, #000 92%, transparent 100%);
    mask-image:linear-gradient(90deg, #000 92%, transparent 100%);
  }
  .rail-dots{
    display:flex; justify-content:center; align-items:center; gap:7px; margin-top:22px;
  }
  /* Dots-above variant (opt-in via .card-rail--dots-top): sit under the heading,
     above the cards, instead of below the rail. */
  .rail-dots--top{ margin-top:0; margin-bottom:20px; }
  .rail-dot{
    width:6px; height:6px; border-radius:50%;
    background:rgba(34,66,54,0.22); border:0; padding:0; cursor:pointer;
    transition:width .3s cubic-bezier(.22,.61,.36,1), background .3s ease;
  }
  .rail-dot.is-active{ width:20px; border-radius:3px; background:var(--gold-soft); }
  [data-theme="dark"] .rail-dot{ background:rgba(242,239,232,0.24); }
  [data-theme="dark"] .rail-dot.is-active{ background:var(--gold); }
}

/* Tier cards on a rail (homepage + membership page): the compact mobile
   treatment. Natural card heights instead of stretching every card to the
   featured card's height, tighter internal spacing, and the button right
   under the bullets (no dead gap). Promoted from homepage inline CSS
   2026-08-10 when the membership page tiers joined the rail, so both pages
   share one source of truth. Desktop (>1100px) untouched. */
@media (max-width:1100px){
  .tiers.card-rail{ align-items:flex-start; }
  .tiers.card-rail .tier{ padding:32px 26px 28px; gap:9px; }
  .tiers.card-rail .tier.featured{ padding:38px 26px 34px; }
  /* Step the display type down a notch on the rail: the desktop scale (46/54px)
     makes phone cards read monumental. Hierarchy preserved, just quieter. */
  .tiers.card-rail .tier .tier-mark{ font-size:11px; margin-bottom:8px; }
  .tiers.card-rail .tier h3{ font-size:36px; }
  .tiers.card-rail .tier .price{ margin:6px 0 4px; }
  .tiers.card-rail .tier .price .amt{ font-size:42px; }
  .tiers.card-rail .tier .credits{ font-size:19px; padding-bottom:14px; margin-bottom:12px; }
  .tiers.card-rail .tier li{ font-size:15px; line-height:1.6; padding-top:8px; padding-bottom:8px; }
  .tiers.card-rail .tier .tier-cta{ margin-top:16px; }
}

/* Single elements that fade up on scroll */
[data-reveal]{
    opacity:0;
    transform:translate3d(0, 16px, 0);
    transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
  }

[data-reveal].is-in{
    opacity:1;
    transform:translate3d(0, 0, 0);
  }

/* Stagger groups: container animates the children with quick 80ms cadence */
[data-reveal-stagger] > *{
    opacity:0;
    transform:translate3d(0, 16px, 0);
    transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
  }

[data-reveal-stagger] > *:nth-child(1){transition-delay:0ms;}

[data-reveal-stagger] > *:nth-child(2){transition-delay:80ms;}

[data-reveal-stagger] > *:nth-child(3){transition-delay:160ms;}

[data-reveal-stagger] > *:nth-child(4){transition-delay:240ms;}

[data-reveal-stagger] > *:nth-child(5){transition-delay:320ms;}

[data-reveal-stagger] > *:nth-child(6){transition-delay:400ms;}

[data-reveal-stagger] > *:nth-child(7){transition-delay:480ms;}

[data-reveal-stagger] > *:nth-child(8){transition-delay:560ms;}

/* Slower narrative cadence for editorial flow groups (eyebrow > h2 > lede > body) */
[data-reveal-flow] > *{
    opacity:0;
    transform:translate3d(0, 16px, 0);
    transition:opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
  }

[data-reveal-flow] > *:nth-child(1){transition-delay:0ms;}

[data-reveal-flow] > *:nth-child(2){transition-delay:140ms;}

[data-reveal-flow] > *:nth-child(3){transition-delay:280ms;}

[data-reveal-flow] > *:nth-child(4){transition-delay:420ms;}

[data-reveal-flow] > *:nth-child(5){transition-delay:540ms;}

[data-reveal-flow] > *:nth-child(6){transition-delay:660ms;}

[data-reveal-flow] > *:nth-child(7){transition-delay:780ms;}

[data-reveal-flow] > *:nth-child(8){transition-delay:880ms;}

/* Scroll cue: opacity-only animation (preserves translateX(-50%) centering) */
.scroll-cue{
    opacity:0;
    transition:opacity 1.4s ease-out;
  }

/* Hero photo intro: 1.05 to 1.00 over 6s, very slow ambient */
.hero-image{
    transform:scale(1.05);
    transform-origin:center center;
    transition:transform 6s cubic-bezier(.25,.46,.45,.94);
    will-change:transform;
  }

/* ==========================================================================
   SHARED: no-image forest page-header (site family: membership, schedule,
   therapies hub). Extracted from per-page inline styles 2026-07-07; was
   duplicated with minor drift (schedule .sub was max-width:560px; hub kept
   .sub pre-link) — normalized here to one definition (.sub max-width:540px).
   Home uses .hero, not this. Per-page responsive @media overrides remain
   inline and cascade on top of this base (inline loads after this sheet).
   ========================================================================== */
.page-header{
    position:relative;
    overflow:hidden;
    margin-top:-87px;
    transition:background .3s ease;
  }

.page-header .grain{
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.85  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity:0.4; mix-blend-mode:overlay; pointer-events:none;
  }

.page-header-inner{
    position:relative; z-index:2;
    max-width:1280px; margin:0 auto;
    padding:calc(87px + 8vh) 56px 8vh;
  }

.page-header .eyebrow{ margin-bottom:18px; }

.page-header .page-title{
    font-family:var(--display); font-style:italic; font-weight:300;
    font-size:clamp(48px, 6vw, 92px); line-height:1.02; letter-spacing:-0.01em;
    margin-bottom:22px;
  }

.page-header .sub{
    font-family:var(--display); font-style:normal; font-weight:400;
    font-size:clamp(20px, 1.5vw, 26px); line-height:1.45;
    max-width:540px; margin-bottom:30px;
  }

.page-header{
    background:
      radial-gradient(ellipse at 80% 22%, rgba(231,186,95,0.20) 0%, transparent 55%),
      radial-gradient(ellipse at 6% 96%, rgba(34,66,54,0.85) 0%, transparent 62%),
      linear-gradient(135deg,#14241F 0%,#1E3A30 40%,#2D4D40 72%,#16302A 100%);
  }

.page-header .eyebrow{ color:var(--gold); }

.page-header .page-title{ color:var(--linen); }

.page-header .page-title em{ color:var(--gold); font-style:italic; }

.page-header .sub{ color:rgba(242,239,232,0.85); }

.nav-links a[aria-current="page"]{ border-color:var(--gold); }

.drawer-item a[aria-current="page"]{ color:var(--gold); }

/* ============================================================
   INVITE: golden-hour palm-shadow band (sitewide, 8/11).
   Shared asset /assets/vytara-shadow-band.jpg under a warm-dark
   scrim; lightest mid-band so the shadows read, heavier at the
   edges under the display type. The invite's light-on-dark type
   system is untouched, and the treatment is identical in both
   themes. Overrides the flat forest gradient declared earlier
   in this sheet - must stay after those rules in the cascade.
   ============================================================ */
.invite{ background:#1A1610 url('/assets/vytara-shadow-band.jpg') center / cover no-repeat; }
.invite::before{ background: radial-gradient(ellipse at 80% 30%, rgba(231,186,95,0.14) 0%, transparent 55%), linear-gradient(135deg, rgba(24,19,10,0.80) 0%, rgba(26,20,10,0.64) 45%, rgba(22,17,9,0.80) 100%); }

/* Tighter "From the members" band, both pages that carry it (Dennis, 8/11).
   Top/bottom padding only so the responsive side paddings still apply. */
.reflections{ padding-top:96px; padding-bottom:96px; }
.reflections h2{ margin-bottom:48px; }
.reflection-controls{ margin-top:40px; }

/* ---------- Reflections rotator (5 quotes, fade) ---------- */
.reflection-track{ position:relative; display:grid; align-items:center; }
.reflection-item{ grid-area:1 / 1; margin:0; opacity:0; visibility:hidden; transition:opacity .6s ease, visibility 0s linear .6s; }
.reflection-item.is-active{ opacity:1; visibility:visible; transition:opacity .6s ease, visibility 0s; }
.reflection-item .reflection-quote{ margin-bottom:36px; }
.reflection-controls .arrow-btn:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .reflection-item, .reflection-item.is-active{ transition:none; }
}