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

:root{
    --forest:#224236; --forest-deep:#16302A; --forest-ink:#0E1F18;
    --sage:#5B8173; --gold:#E7BA5F; --gold-soft:#D4A857;
    --ink:#0E1310; --linen:#F2EFE8; --linen-warm:#EAE5DA; --paper:#FBFAF6;
    --display:'Cormorant Garamond', 'Garamond', serif;
    --body:'Montserrat', system-ui, sans-serif;
    --mark:'Tenor Sans', 'Optima', serif;
  }

:root, [data-theme="light"]{
    --bg:#FBFAF6; --bg-alt:#F2EFE8; --bg-warm:#EAE5DA;
    --bg-deep:#224236; --bg-deepest:#16302A;
    --text:#0E1310; --text-strong:#16302A; --text-soft:#3A4A41;
    --text-on-dark:#F2EFE8; --text-on-dark-soft:rgba(242,239,232,0.78);
    --rule:rgba(34,66,54,0.16); --rule-soft:rgba(34,66,54,0.10);
    --rule-on-dark:rgba(242,239,232,0.18);
    --accent:#D4A857; --accent-bright:#E7BA5F;
    --hero-gradient: linear-gradient(180deg, rgba(14,19,16,0.55) 0%, rgba(14,19,16,0.30) 30%, rgba(14,19,16,0.45) 70%, rgba(14,19,16,0.75) 100%);
    --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 theme (matches .eyebrow default); flips to gold in dark theme. */
    --nav-mega-heading: var(--sage);
    --nav-mega-text: var(--text-soft);
    --nav-mega-text-hover: var(--text-strong);
    --nav-mega-shadow: 0 24px 40px -16px rgba(34, 66, 54, 0.22);
  }

[data-theme="dark"]{
    --bg:#0E1F18; --bg-alt:#16302A; --bg-warm:#1B392F;
    --bg-deep:#0A1812; --bg-deepest:#070F0B;
    --text:#F2EFE8; --text-strong:#FBFAF6; --text-soft:rgba(242,239,232,0.78);
    --text-on-dark:#F2EFE8; --text-on-dark-soft:rgba(242,239,232,0.78);
    --rule:rgba(242,239,232,0.14); --rule-soft:rgba(242,239,232,0.08);
    --rule-on-dark:rgba(242,239,232,0.18);
    --accent:#E7BA5F; --accent-bright:#E7BA5F;
    --hero-gradient: linear-gradient(180deg, rgba(7,15,11,0.55) 0%, rgba(7,15,11,0.30) 30%, rgba(7,15,11,0.45) 70%, rgba(7,15,11,0.80) 100%);
    --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);
  }

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

html{scroll-behavior:smooth;}

body{ font-family:var(--body); font-weight:400; font-size:16px; line-height:1.65; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background-color .3s ease, color .3s ease; }

.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(--bg-alt); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text); font-family:var(--body); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; box-shadow:0 8px 24px rgba(0,0,0,0.12); transition:all .25s ease; }

.theme-toggle:hover{ background:var(--accent); color:var(--ink); border-color:var(--accent); 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;}

.nav{ position:sticky; top:0; 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, color .3s ease; }

body.scrolled .nav{ background:var(--bg); background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom-color:var(--rule-soft); }

.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; margin-left:max(0px, calc(50vw - 720px)); font-family:var(--mark); font-size:18px; letter-spacing:0.42em; text-transform:uppercase; color:var(--text-on-dark); text-decoration:none; transition:color .35s ease; }

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

.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; }

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

body.scrolled .nav-links a:hover{ color:var(--text-strong); border-color:var(--accent); }

.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(--text-on-dark); text-decoration:none; border-bottom:1px solid var(--accent); 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);}

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

/* Hamburger button — desktop hidden, mobile shown */
.nav-toggle{
    display:none;
    position:relative;
    width:44px;
    height:44px;
    background:transparent;
    border:0;
    cursor:pointer;
    padding:0;
    z-index:104;
  }

.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, background-color .35s ease, opacity .2s ease;
  }

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

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

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

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); }

/* When drawer is open, hairlines morph to an X. Color is theme-aware so it
     stays legible against either a light or dark drawer bg. */
.nav-toggle.is-open .nav-toggle-icon{ background:transparent !important; }

.nav-toggle.is-open .nav-toggle-icon::before{ top:0; transform:rotate(45deg); background:var(--text-strong) !important; }

.nav-toggle.is-open .nav-toggle-icon::after{ top:0; transform:rotate(-45deg); background:var(--text-strong) !important; }

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

/* Full-screen mobile drawer — desktop hidden, mobile editorial-style panel */
.nav-drawer{
    display:none;
  }

body.drawer-open{ overflow:hidden; }

/* When mega is open, nav becomes solid (opaque) + text flips. */
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;
  }

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

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

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(--accent); }

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(--text); }

/* MEGA-NAV — shared full-width slide-down. JS-controlled. */
.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; }

.hero-image::before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(7,15,11,0.55) 0%, rgba(7,15,11,0.10) 35%, rgba(7,15,11,0) 60%), var(--hero-gradient); }

.hero-content{ position:relative; z-index:2; height:100%; margin:0 auto; padding:32vh 56px 0; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:36px; }

.hero-kicker{ font-family:var(--body); font-size:11px; letter-spacing:0.36em; text-transform:uppercase; color:rgba(242,239,232,0.65); }

.hero-kicker a{ color:rgba(242,239,232,0.65); text-decoration:none; transition:color .25s ease; }

.hero-kicker .sep{margin:0 14px; color:rgba(242,239,232,0.35);}

.hero-line h1{ font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(64px, 8vw, 132px); line-height:0.95; color:var(--linen); letter-spacing:-0.012em; }

.hero-line h1 em{ font-style:italic; color:var(--accent-bright); }

.hero-aside{ text-align:left; color:rgba(242,239,232,0.78); max-width:520px; }

.hero-aside p{ font-family:var(--display); font-style:normal; font-weight:400; font-size:clamp(20px, 1.5vw, 26px); line-height:1.45; margin-bottom:28px; color:rgba(242,239,232,0.95); }

.link-cta{ display:inline-block; 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(--accent); padding-bottom:6px; transition:border-bottom-width .2s ease, color .25s ease; }

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

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

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

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

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

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

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

.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(--accent-bright), transparent); margin:14px auto 0; }

.quick-facts{ background:var(--bg-alt); padding:36px 56px; border-bottom:1px solid var(--rule-soft); }

.quick-facts-inner{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:repeat(4, 1fr); gap:0; }

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

.quick-fact:last-child{ border-right:none; }

.quick-fact .label{ font-family:var(--body); font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--sage); margin-bottom:10px; }

.quick-fact .value{ font-family:var(--display); font-style:italic; font-weight:400; font-size:22px; color:var(--text-strong); line-height:1.2; }

[data-theme="dark"] .quick-fact .label{color:var(--accent);}

[data-theme="dark"] .quick-fact .value{color:var(--text);}

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); }

[data-theme="dark"] .eyebrow{color:var(--accent);}

.what{ background:var(--bg); }

.what-text .eyebrow{margin-bottom:32px;}

.what-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(--text-strong); margin-bottom:32px; }

[data-theme="dark"] .what-text h2{color:var(--text);}

.what-text h2 em{color:var(--accent); font-style:italic;}

.what-text .lede{ font-family:var(--display); font-weight:400; font-size:clamp(20px, 1.35vw, 24px); line-height:1.55; color:var(--text); margin-bottom:22px; }

.what-text p{ font-family:var(--body); font-size:16px; line-height:1.78; color:var(--text-soft); margin-bottom:22px; }

.who{ background:var(--bg); }

.who-head{ text-align:center; margin-bottom:64px; }

.who-head .lede{ font-family:var(--display); font-style:italic; font-size:clamp(20px, 1.35vw, 24px); line-height:1.5; color:var(--text-soft); max-width:620px; margin:0 auto; }

.who-card{ padding:40px 32px; border-left:1px solid var(--rule-soft); border-top:1px solid var(--rule-soft); position:relative; transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, background .25s ease; display:flex; flex-direction:column; gap:14px; }

[data-theme="dark"] .who-card:hover{ background:var(--bg-alt); box-shadow:0 36px 72px -22px rgba(0,0,0,0.72); }

.who-card .tag{ font-family:var(--body); font-size:10.5px; letter-spacing:0.26em; text-transform:uppercase; color:var(--sage); font-weight:500; margin-bottom:12px; }

[data-theme="dark"] .who-card .tag{ color:var(--accent); }

.who-card .title{ font-family:var(--display); font-style:italic; font-weight:400; font-size:22px; line-height:1.2; color:var(--text-strong); }

[data-theme="dark"] .who-card .title{color:var(--text);}

.who-card .body{ font-family:var(--body); font-size:16px; line-height:1.7; color:var(--text-soft); margin-top:8px; }

.approach{ background:var(--bg-deep); color:var(--text-on-dark); padding:160px 56px; }

.approach-inner{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.1fr 1fr; gap:96px; align-items:start; }

.approach-head .lede{ font-family:var(--display); font-weight:400; font-size:clamp(20px, 1.35vw, 24px); line-height:1.55; color:rgba(242,239,232,0.92); max-width:480px; }

.approach-list{ list-style:none; border-top:1px solid var(--rule-on-dark); }

.approach-list li{ padding:32px 0; border-bottom:1px solid var(--rule-on-dark); }

.approach-list .num{ font-family:var(--display); font-style:italic; font-size:14px; color:var(--accent-bright); letter-spacing:0.04em; display:block; margin-bottom:8px; }

.safety{ background:var(--bg-alt); }

.safety-inner{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }

.safety-callouts{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--rule); }

.safety-callout{ padding:28px 0; border-bottom:1px solid var(--rule); }

[data-theme="dark"] .safety-callout h4{ color:var(--accent); }

.fit{ background:var(--bg); }

.fit-head{ text-align:center; margin-bottom:72px; }

.fit-head .lede{ font-family:var(--display); font-style:italic; font-size:clamp(20px, 1.35vw, 24px); line-height:1.5; color:var(--text-soft); max-width:620px; margin:0 auto; }

.fit-tier .mark{ font-family:var(--body); font-size:10.5px; letter-spacing:0.3em; text-transform:uppercase; color:var(--sage); margin-bottom:8px; }

[data-theme="dark"] .fit-tier .mark{ color:var(--accent); }

.fit-tier h3{ font-family:var(--display); font-style:italic; font-weight:400; font-size:30px; color:var(--text-strong); }

[data-theme="dark"] .fit-tier h3{color:var(--text);}
.fit-tier h3 .fit-alt{ display:block; font-size:20px; font-style:italic; color:var(--text-soft); margin-top:6px; }
[data-theme="dark"] .fit-tier h3 .fit-alt{ color:var(--text-on-dark-soft); }

.fit-pairings{ max-width:1280px; margin:48px auto 0; padding:36px 40px; background:var(--bg-alt); border:1px solid var(--rule); display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center; }

.fit-pairings .label{ font-family:var(--body); font-size:10.5px; letter-spacing:0.28em; text-transform:uppercase; color:var(--sage); }

[data-theme="dark"] .fit-pairings .label{color:var(--accent);}

.fit-pairings .pairings-text{ font-family:var(--display); font-style:italic; font-size:19px; line-height:1.5; color:var(--text-strong); }

[data-theme="dark"] .fit-pairings .pairings-text{color:var(--text);}

.fit-pairings .pairings-text strong{color:var(--sage); font-style:italic; font-weight:400;}

[data-theme="dark"] .fit-pairings .pairings-text strong{ color:var(--accent); }

.faq{ background:var(--bg); }

.faq-inner{ max-width:980px; margin:0 auto; }

.faq-head{ text-align:center; margin-bottom:64px; }

.faq-list{ list-style:none; border-top:1px solid var(--rule); }

.faq-item{ border-bottom:1px solid var(--rule); }

.faq-question{ width:100%; padding:28px 0; background:transparent; border:0; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:32px; text-align:left; font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(20px, 2vw, 24px); line-height:1.3; color:var(--text-strong); transition:color .2s ease; }

[data-theme="dark"] .faq-question{color:var(--text);}

.faq-question:hover{color:var(--accent);}

.faq-toggle{ width:32px; height:32px; flex-shrink:0; position:relative; }

.faq-toggle::before,
  .faq-toggle::after{ content:""; position:absolute; top:50%; left:50%; width:14px; height:1px; background:var(--accent); transition:transform .3s ease; }

.faq-toggle::before{ transform:translate(-50%, -50%); }

.faq-toggle::after{ transform:translate(-50%, -50%) rotate(90deg); }

.faq-item.open .faq-toggle::after{ transform:translate(-50%, -50%) rotate(0deg); }

.faq-answer{ max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease; }

.faq-item.open .faq-answer{ max-height:520px; padding-bottom:32px; }

.faq-answer p:last-child{margin-bottom:0;}

.related{ background:var(--bg-alt); }

.related-head{ margin-bottom:56px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end; padding-bottom:32px; border-bottom:1px solid var(--rule); }

.related-head .head-aside{ font-family:var(--body); font-size:16px; line-height:1.75; color:var(--text-soft); max-width:380px; }

.related-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; }

.related-card:hover{ background:var(--bg); transform:translateY(-10px) scale(1.025); z-index:3; box-shadow:0 30px 60px -22px rgba(34,66,54,0.42), 0 5px 12px rgba(34,66,54,0.1); }

/* Related cards that describe something with no page behind it yet. They keep
   the full card styling and the hover lift so the grid behaves as one set;
   only the link itself and the "Read more" affordance are removed. */
.related-card.is-static{ cursor:default; }
.related-card.is-static .more{ display:none; }


[data-theme="dark"] .related-card:hover{ background:var(--bg-warm); box-shadow:0 36px 72px -22px rgba(0,0,0,0.72); }

.related-card .tag{ font-family:var(--body); font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:var(--sage); margin-bottom:6px; }

[data-theme="dark"] .related-card .tag{color:var(--accent);}

[data-theme="dark"] .related-card h4{color:var(--text);}

.related-card .more{ font-family:var(--body); font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--sage); margin-top:auto; padding-top:18px; }

[data-theme="dark"] .related-card .more{ color:var(--accent); }

.related-card .more .arrow{transition:transform .25s ease; display:inline-block;}

.related-card:hover .more .arrow{transform:translateX(4px);}

.invite{ position:relative; background:var(--forest-ink); color:var(--linen); padding:0; overflow:hidden; min-height:520px; 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:1.4fr 1fr; gap:80px; align-items:center; width:100%; }

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

.invite-aside .lede{ font-family:var(--display); font-style:italic; font-size:clamp(20px, 1.35vw, 24px); line-height:1.55; color:rgba(242,239,232,0.85); margin-bottom:28px; }

.invite-aside .nap{ font-family:var(--body); font-size:16px; line-height:1.85; color:rgba(242,239,232,0.78); margin-bottom:28px; }

.invite-aside .nap a:hover{border-color:var(--accent-bright);}

.invite-actions{display:flex; gap:32px; flex-wrap:wrap; justify-content:flex-end;}

.trust-foot{ background:var(--bg-alt); padding:64px 56px; text-align:center; border-bottom:1px solid var(--rule-soft); }

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

[data-theme="dark"] .trust-foot p{color:var(--text);}

.trust-foot p strong{ color:var(--sage); font-weight:400; font-style:italic; }

[data-theme="dark"] .trust-foot p strong{ color:var(--accent); }

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

[data-theme="dark"] footer{background:#050B08;}
/* Mobile: match footer side padding to the 20px sections use (was stranded at 56px). */
@media (max-width:680px){ footer{ padding-left:20px; padding-right:20px; } }

.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(--accent-bright); 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-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); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html.js body.is-loaded .hero-kicker{ opacity:1; transform:translate3d(0,0,0); transition-delay:50ms; }

html.js body.is-loaded .hero-line h1{ opacity:1; transform:translate3d(0,0,0); transition-delay:200ms; }

html.js body.is-loaded .hero-aside{ opacity:1; transform:translate3d(0,0,0); transition-delay:400ms; }

@media (max-width:1240px){
    .quick-facts-inner{grid-template-columns:repeat(2, 1fr); row-gap:28px;}
    .quick-facts-inner .quick-fact:nth-child(2){border-right:none;}
    .quick-facts-inner .quick-fact:nth-child(1),
    .quick-facts-inner .quick-fact:nth-child(2){padding-bottom:24px; border-bottom:1px solid var(--rule);}
    .who-grid{grid-template-columns:repeat(2, 1fr);}
  }

/* ==========================================================================
   SHARED service-page blocks — extracted from per-page inline styles 2026-07.
   The forest no-image page-header and the how-it-works (session) block were
   hand-added to each service page after the original CSS extraction and were
   absent from this file (verified 0 conflicts; data-url grain only, no
   relative url()). Per-page responsive @media overrides for these remain
   inline and cascade on top of these bases (inline loads after this sheet).
   ========================================================================== */

.page-header .eyebrow{ margin-bottom:18px; }
.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 .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:680px; 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); }

/* Breadcrumb prefix inside the forest page-header eyebrow (parity with the photo-hero .hero-kicker). */
.page-header .page-crumb{ color:rgba(242,239,232,0.6); text-decoration:none; transition:color .25s ease; }
.page-header .page-crumb:hover{ color:var(--linen); }
.page-header .page-crumb-sep{ color:rgba(242,239,232,0.35); margin:0 12px; }

.session{ background:var(--bg-alt); }
.session-inner{ max-width:1180px; margin:0 auto; }
.session-head{ text-align:center; max-width:1100px; margin:0 auto 60px; }
.session-head .eyebrow{ margin-bottom:24px; }
.session-head h2{ font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(44px, 5vw, 72px); line-height:1.02; color:var(--text-strong); }
[data-theme="dark"] .session-head h2{ color:var(--text); }
.session-head h2 em{ color:var(--accent); }
.session-list{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--rule); }
.session-list li{ padding:44px 44px; border-left:1px solid var(--rule); }
.session-list li:first-child{ border-left:none; padding-left:0; }
.session-list li:last-child{ padding-right:0; }
.session-list .num{ font-family:var(--display); font-style:italic; font-size:14px; color:var(--sage); letter-spacing:0.04em; display:block; margin-bottom:8px; }
[data-theme="dark"] .session-list .num{ color:var(--accent); }
.session-list h4{ font-family:var(--display); font-style:italic; font-weight:400; font-size:26px; line-height:1.2; color:var(--text-strong); margin-bottom:12px; }
[data-theme="dark"] .session-list h4{ color:var(--text); }
.session-list p{ font-family:var(--body); font-size:16px; line-height:1.78; color:var(--text-soft); }
@media (max-width:820px){ .session-list{ grid-template-columns:1fr; } .session-list li{ border-left:none; padding:32px 0; border-bottom:1px solid var(--rule); } .session-list li:first-child{ padding-left:0; } .session-list li:last-child{ border-bottom:none; } }

/* ==========================================================================
   SHARED: "Where it applies" applications grid (.menu / .drip). Lifted from the
   Red Light reference 2026-07-07 so multi-application therapy pages reuse it.
   Column count (.menu-grid) is set per page since card count varies. Photo-hero
   pages (IV, Red Light) still carry their own inline copy — harmless (their
   inline overrides this identically); fold those in on a later cleanup pass.
   ========================================================================== */
.menu{ background:var(--bg-alt); }
.menu-head{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end; margin-bottom:72px; padding-bottom:36px; border-bottom:1px solid var(--rule); }
.menu-head h2{ font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(46px, 5.2vw, 76px); line-height:1; color:var(--text-strong); }
[data-theme="dark"] .menu-head h2{color:var(--text);}
.menu-head h2 em{color:var(--accent);}
.menu-head .eyebrow{margin-bottom:28px;}
.menu-head .head-aside{ font-family:var(--body); font-size:16px; line-height:1.78; color:var(--text-soft); max-width:420px; }
.menu-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:0; }
.drip{ padding:48px 44px; border-left:1px solid var(--rule); border-top:1px solid var(--rule); background:var(--bg-alt); position:relative; transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, background .25s ease; display:flex; flex-direction:column; gap:14px; }
.drip h3{ font-family:var(--display); font-style:italic; font-weight:400; font-size:30px; line-height:1.15; color:var(--text-strong); }
.drip:hover{ background:var(--bg); transform:translateY(-10px) scale(1.025); z-index:3; box-shadow:0 30px 60px -22px rgba(34,66,54,0.42), 0 5px 12px rgba(34,66,54,0.1); }
[data-theme="dark"] .drip:hover{ background:var(--bg-warm); box-shadow:0 36px 72px -22px rgba(0,0,0,0.72); }
.drip .formulation{ font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--sage); margin-top:4px; }
[data-theme="dark"] .drip .formulation{color:var(--accent);}
.drip p{ font-family:var(--body); font-size:16px; line-height:1.7; color:var(--text-soft); margin-top:6px; }
.drip .meta{ margin-top:10px; display:flex; gap:18px; font-family:var(--body); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--sage); }
[data-theme="dark"] .drip .meta{color:var(--accent);}
.menu-foot{ margin-top:48px; padding-top:32px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; }
.menu-foot .note{ font-family:var(--display); font-style:italic; font-size:17px; color:var(--text-strong); max-width:none; }
[data-theme="dark"] .menu-foot .note{color:var(--text);}
@media (max-width:680px){ .menu-grid{ grid-template-columns:1fr; } .drip{ padding:36px 24px; } .menu-head{ grid-template-columns:1fr; gap:24px; align-items:start; } }

/* --- Mobile: center every section headline as a clear "new section" marker.
   .session-head / .who-head / .fit-head / .faq-head already center at all widths;
   this brings the remaining left-aligned heads into line on phones only. Headline
   elements only — body paragraphs in .what-text / .safety-text stay left. --- */
@media (max-width:680px){
  .menu-head, .approach-head, .related-head{ text-align:center; }
  .menu-head .head-aside, .related-head .head-aside, .approach-head .lede{ margin-left:auto; margin-right:auto; }
  .what-text .eyebrow, .what-text h2,
  .safety-text .eyebrow, .safety-text h2{ text-align:center; }
}

/* ==========================================================================
   SHARED: section styling common to ALL service pages (nav hovers, section
   heads, cards, invite, trust-foot, footer). Consolidated out of every page's
   inline <style> on 2026-07-15 (was byte-identical on all 7). Page-specific
   overrides (.session/.who bg-flips, .fit-* variants, .related-card base,
   .what-inner) intentionally stay inline. Scroll-reveal base rules also stay
   inline (they interact with the .is-in completion rules).
   ========================================================================== */
/* Nav */
body.scrolled .wordmark{ color:var(--text-strong); }
.nav-links a:hover{color:var(--accent-bright); border-color:var(--accent-bright);}
body.scrolled .nav-cta{ color:var(--text-strong); }
.dropdown-col a:hover{ color:var(--nav-mega-text-hover); transform:translateX(4px); }
/* Who */
.who-head .eyebrow{margin-bottom:24px;}
.who-head h2{ font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(42px, 4.6vw, 60px); line-height:1.05; color:var(--text-strong); margin-bottom:18px; }
[data-theme="dark"] .who-head h2{color:var(--text);}
.who-head h2 em{color:var(--accent);}
.who-card:hover{ background:var(--bg); transform:translateY(-10px) scale(1.025); z-index:3; box-shadow:0 30px 60px -22px rgba(34,66,54,0.42), 0 5px 12px rgba(34,66,54,0.1); }
/* Approach */
.approach-head .eyebrow{ color:var(--accent-bright); margin-bottom:32px; }
.approach-head h2{ font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(44px, 5vw, 72px); line-height:1.02; color:var(--linen); margin-bottom:28px; }
.approach-head h2 em{color:var(--accent-bright);}
.approach-list h4{ font-family:var(--display); font-style:italic; font-weight:400; font-size:26px; line-height:1.2; color:var(--linen); margin-bottom:12px; }
.approach-list p{ font-family:var(--body); font-size:16px; line-height:1.78; color:rgba(242,239,232,0.78); max-width:520px; }
/* Safety */
.safety-text .eyebrow{margin-bottom:24px;}
.safety-text h2{ font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(36px, 4vw, 52px); line-height:1.1; color:var(--text-strong); margin-bottom:24px; }
[data-theme="dark"] .safety-text h2{color:var(--text);}
.safety-text h2 em{color:var(--accent);}
.safety-text p{ font-family:var(--body); font-size:16px; line-height:1.78; color:var(--text-soft); margin-bottom:20px; }
.safety-callout h4{ font-family:var(--body); font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--sage); margin-bottom:12px; font-weight:500; }
.safety-callout p{ font-family:var(--body); font-size:16px; line-height:1.7; color:var(--text-soft); }
/* Fit head */
.fit-head .eyebrow{margin-bottom:24px;}
.fit-head h2{ font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(42px, 4.6vw, 60px); line-height:1.05; color:var(--text-strong); margin-bottom:18px; }
[data-theme="dark"] .fit-head h2{color:var(--text);}
.fit-head h2 em{color:var(--accent);}
/* FAQ */
.faq-head .eyebrow{margin-bottom:24px;}
.faq-head h2{ font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(40px, 4.4vw, 58px); line-height:1.05; color:var(--text-strong); }
[data-theme="dark"] .faq-head h2{color:var(--text);}
.faq-head h2 em{color:var(--accent);}
.faq-answer p{ font-family:var(--body); font-size:16px; line-height:1.78; color:var(--text-soft); margin-bottom:16px; max-width:760px; }
/* Related */
.related-head .eyebrow{margin-bottom:24px;}
.related-head h2{ font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(36px, 4vw, 52px); line-height:1.08; color:var(--text-strong); }
[data-theme="dark"] .related-head h2{color:var(--text);}
.related-head h2 em{color:var(--accent);}
.related-card h4{ font-family:var(--display); font-style:italic; font-weight:400; font-size:24px; line-height:1.2; color:var(--text-strong); }
.related-card p{ font-family:var(--body); font-size:16px; line-height:1.65; color:var(--text-soft); margin-top:4px; }
/* Invite */
.invite::after{ content:""; 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; }
.invite h2{ font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(46px, 5.4vw, 80px); line-height:1.02; color:var(--linen); }
.invite h2 em{color:var(--accent-bright);}
.invite-aside .nap a{ color:var(--accent-bright); text-decoration:none; border-bottom:1px solid rgba(231,186,95,0.4); transition:border-color .25s ease; }
/* Trust foot */
.trust-foot .eyebrow{ margin-bottom:18px; }
.trust-foot p{ font-family:var(--display); font-style:italic; font-size:21px; line-height:1.5; color:var(--text-strong); max-width:760px; margin:0 auto; }
/* Footer */
.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-col p{ font-family:var(--body); font-size:16px; line-height:1.7; color:rgba(242,239,232,0.7); }

/* ==========================================================================
   Photo-hero base + scroll-reveal base — consolidated out of every service page's
   inline <style> on 2026-07-17. The hero BACKGROUND IMAGE and its per-page ::before
   scrim stay inline (they vary per page); the identical base/noise/hover live here.
   Reveal COMPLETION rules (.is-in / body.is-loaded, above) win by specificity, so
   these opacity:0 base rules are safe here. Placed BEFORE the @media blocks so the
   .hero margin-top override at <=1100 keeps correct source order.
   ========================================================================== */
.hero{ position:relative; margin-top:-87px; height:calc(100vh + 25px); height:calc(100svh + 25px); min-height:640px; overflow:hidden; background:var(--forest-ink); }
.hero-image::after{ content:""; 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.5; mix-blend-mode:overlay; pointer-events:none; }
.hero-kicker a:hover{color:var(--accent-bright);}
html.js [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; }
html.js [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; }
html.js [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; }
html.js .hero-kicker,
html.js .hero-line h1,
html.js .hero-aside{ opacity:0; transform:translate3d(0, 12px, 0); transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce){
  html.js [data-reveal],
  html.js [data-reveal-stagger] > *,
  html.js [data-reveal-flow] > *,
  html.js .hero-kicker,
  html.js .hero-line h1,
  html.js .hero-aside{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ==========================================================================
   SHARED responsive chrome — consolidated out of every service page's inline
   <style> on 2026-07-15. Common tablet/mobile rules (nav, the full mobile drawer,
   section paddings, quick-facts, footer, grids, theme toggle) live here now.
   Page-specific mobile rules stay inline: photo-hero crops/gradients, the forest
   .page-header mobile pair, and the IV/Red-Light menu-page variants.
   ========================================================================== */
@media (max-width:1100px){
  .nav-inner{padding:18px 32px;}
  .nav-links{gap:28px;}
  section{padding:96px 32px;}
  /* .what .what-inner (specificity bump) so this beats the two-col base that photo
     pages set inline AFTER this shared sheet — otherwise the figure won't stack on mobile. */
  .what .what-inner{grid-template-columns:1fr; gap:60px;}
  .approach-inner{grid-template-columns:1fr; gap:48px;}
  .safety-inner{grid-template-columns:1fr; gap:48px;}
  /* .session-inner: inert on the IV/Red-Light menu pages (no .session section). */
  .session-inner{grid-template-columns:1fr; gap:48px;}
  /* .fit-pairings: inert on pages without a pairings grid (e.g. Human Regenerator). */
  .fit-pairings{grid-template-columns:1fr; gap:18px;}
  .related-head{grid-template-columns:1fr; gap:24px; align-items:start;}
  .related-grid{grid-template-columns:repeat(2, 1fr);}
  .invite-inner{grid-template-columns:1fr; gap:40px; padding:80px 32px;}
  .invite-aside{justify-self:start; text-align:left;}
  .invite-actions{justify-content:flex-start;}
  .footer-inner{grid-template-columns:1fr 1fr; gap:40px;}
  .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){
  .nav-inner{ grid-template-columns:1fr auto; grid-template-areas:"brand toggle"; padding:10px 20px; gap:16px; }
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .nav-toggle{ display:block; grid-area:toggle; justify-self:end; }
  .wordmark{margin-left:0; justify-self:start;}

  /* Mobile drawer — full-screen editorial ink panel with accordion sections. */
  .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); }
  section{padding:72px 20px;}
  .who-grid{grid-template-columns:1fr;}
  .who-card{border-right:none;}
  .related-grid{grid-template-columns:1fr;}
  .related-card{border-right:none;}
  /* Quick facts stay a 2x2 grid on phones (inherited from the 1240px rules):
     four label/value pairs in one viewport beats a long single-column stack. */
  .quick-facts{padding:28px 20px;}
  .quick-facts-inner{row-gap:22px;}
  .quick-facts-inner .quick-fact:nth-child(1),
  .quick-facts-inner .quick-fact:nth-child(2){padding-bottom:20px;}
  .quick-fact .value{font-size:19px;}
  .footer-inner{grid-template-columns:1fr;}
  .trust-foot{padding:48px 20px;}
  .theme-toggle{ bottom:16px; right:16px; width:44px; height:44px; }
  html.js .nav-mega{ display:none; }
}

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

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