/* ============================================================
   THE WELLNESS HUB — v7 · Apple-guided long-scroll
   Mobile-first. One story, top to bottom. Full-bleed sections
   alternate white / off-white / black. Huge tight-tracked
   system-sans headlines, generous vertical space, scroll reveals.
   Brand cosmic-violet is the accent (Apple-blue's role); one
   black "On the path" beat is the single brand moment.
   ============================================================ */

:root{
  /* apple-like neutrals */
  --white:      #ffffff;
  --offwhite:   #fbfbfd;
  --ink:        #1d1d1f;
  --ink-2:      #6e6e73;
  --hair:       #d2d2d7;

  /* dark surfaces */
  --black:      #000000;
  --dk-text:    #f5f5f7;
  --dk-text-2:  #86868b;

  /* brand accent (plays Apple-blue's role) */
  --violet:     #5b24c4;
  --violet-hi:  #6e34d6;
  --lavender:   #b98cff;
  --navy:       #171683;

  --galaxy-wide: url('assets/galaxy-texture-wide.png');
  --galaxy-text: url('assets/galaxy-texture-text.png');

  --container: 980px;
  --pad-x: 22px;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.28,.11,.32,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; border-radius:4px; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad-x); }

/* ---------- shared type ---------- */
.display{
  font-weight:600; letter-spacing:-0.025em; line-height:1.06;
  font-size: clamp(2.5rem, 10.5vw, 4rem);
  color: var(--ink);
}
.display-center{ text-align:center; }
.eyebrow{
  font-weight:600; font-size:clamp(0.95rem, 4.4vw, 1.2rem); letter-spacing:-0.01em;
  color: var(--violet); margin-bottom:8px;
}
.eyebrow-center{ text-align:center; }
.lead{
  font-weight:400; font-size:clamp(1.15rem, 4.6vw, 1.45rem); line-height:1.42;
  color: var(--ink-2); max-width:34ch; margin-top:18px;
}

/* ---------- links & buttons ---------- */
.chevron-link{
  display:inline-flex; align-items:center; gap:2px;
  color: var(--violet); font-weight:400;
  font-size:clamp(1.1rem, 4.4vw, 1.3rem); letter-spacing:-0.01em;
}
.chevron-link::after{ content:"›"; font-size:1.3em; line-height:0; margin-left:1px; transition:transform 0.25s var(--ease); }
.chevron-link:hover{ text-decoration:underline; }
.chevron-link:hover::after{ transform:translateX(3px); }
.link-row{ display:flex; flex-wrap:wrap; gap:22px 30px; margin-top:24px; }

.plain-link{ color:var(--violet); }
.plain-link:hover{ text-decoration:underline; }

.pill{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--violet); color:#fff;
  font-weight:500; font-size:0.92rem; letter-spacing:-0.01em;
  padding:8px 17px; border-radius:980px;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.pill:hover{ background: var(--violet-hi); }
.pill:active{ transform:scale(0.97); }
.pill-light{ background:#fff; color:var(--violet); padding:13px 24px; font-size:1rem; }
.pill-light:hover{ background:#f2ecff; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-media{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-media.in{ opacity:1; transform:none; }

/* ============================================================
   FLOATING CONTROLS — no bar; hamburger + lang float over page
   ============================================================ */
/* frosted chip base so controls read over light photos AND the black beat */
.lang-float{ position:fixed; top:14px; left:14px; z-index:120; }
.lang-toggle{
  display:flex; gap:1px; font-size:0.68rem; font-weight:700;
  border-radius:980px; padding:3px;
  background:rgba(255,255,255,0.72); border:1px solid rgba(0,0,0,0.06);
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 4px 16px -8px rgba(20,17,58,0.35);
}
.lang-toggle button{ padding:5px 10px; border-radius:980px; color:var(--ink-2); transition:background 0.2s,color 0.2s; }
.lang-toggle button.active{ background:var(--violet); color:#fff; }

.menu-btn{
  position:fixed; top:14px; right:14px; z-index:130;
  width:46px; height:46px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:rgba(255,255,255,0.72); border:1px solid rgba(0,0,0,0.06);
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 4px 16px -8px rgba(20,17,58,0.35);
  transition:background 0.3s var(--ease);
}
.menu-btn span{ width:19px; height:1.6px; background:var(--ink); border-radius:2px; transition:transform 0.3s var(--ease), opacity 0.2s; }
.menu-btn.open{ background:rgba(255,255,255,0.95); }
.menu-btn.open span:first-child{ transform:translateY(3.3px) rotate(45deg); }
.menu-btn.open span:last-child{ transform:translateY(-3.3px) rotate(-45deg); }

/* full-screen menu */
.menu-overlay{
  position:fixed; inset:0; z-index:115;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:rgba(251,251,253,0.97);
  backdrop-filter:saturate(180%) blur(22px); -webkit-backdrop-filter:saturate(180%) blur(22px);
  opacity:0; visibility:hidden; transform:scale(1.02);
  transition:opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
}
.menu-overlay.open{ opacity:1; visibility:visible; transform:none; }
.menu-logo{ width:66px; height:66px; object-fit:contain; margin-bottom:22px; }
.menu-nav{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.menu-nav a{
  font-size:clamp(2rem, 9vw, 2.8rem); font-weight:600; letter-spacing:-0.025em;
  color:var(--ink); padding:6px 10px; transition:color 0.2s;
}
.menu-nav a:hover{ color:var(--violet); }
.menu-cta{ margin-top:26px; padding:13px 30px; font-size:1rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  min-height:86vh; display:flex; align-items:flex-start; justify-content:center;
  text-align:center; background:var(--offwhite);
}
.hero-media{ position:absolute; inset:0; display:block; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(251,251,253,0.95) 0%, rgba(251,251,253,0.82) 18%,
    rgba(251,251,253,0.5) 36%, rgba(251,251,253,0.12) 56%, rgba(251,251,253,0) 78%);
}
.hero-copy{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  padding-top:15vh;
}

/* ---- shared fancy word treatment (hero word + category names) ---- */
.fancy{ font-family:"Playfair Display", Georgia, "Times New Roman", serif; font-style:italic; font-weight:500; color:var(--violet); }
.ini{
  font-family:"Tangerine", "Playfair Display", cursive; font-weight:700;
  font-size:1.9em; line-height:0; vertical-align:-0.02em; color:var(--violet);
}

/* ---- hero wordmark: The (top-left, over the W) / Wellness / Hub (bottom-right, under the ss) ---- */
.wordmark{ display:flex; flex-direction:column; width:fit-content; line-height:1.0; }
.wordmark, .cat-name{ text-shadow:0 1px 24px rgba(251,251,253,0.85); }
.wm-minor{ font-family:"Playfair Display", Georgia, serif; font-style:italic; font-weight:500; font-size:clamp(1.5rem, 5.6vw, 2.3rem); letter-spacing:0; color:var(--ink); }
.wordmark .wm-minor:first-child{ align-self:flex-start; margin-left:0.06em; }
.wordmark .wm-minor:last-child{ align-self:flex-end; margin-top:0.02em; transform:translateX(1em); }
.wm-star{ align-self:center; font-size:clamp(3rem, 15vw, 6rem); line-height:1.0; margin-top:0.22em; }

/* ---- category names ---- */
.cat-name{ font-size:clamp(2.5rem, 11vw, 4rem); line-height:1.1; }

.hero .link-row{ justify-content:center; margin-top:20px; }

/* ============================================================
   STORY sections — full-bleed image, copy overlaid (matches hero)
   ============================================================ */
.story-full{
  position:relative; overflow:hidden;
  min-height:78vh; display:flex; align-items:flex-start; justify-content:center;
  text-align:center; background:#e8e2d6;
}
.story-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 58%; }
.story-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(251,251,253,0.96) 0%, rgba(251,251,253,0.92) 22%,
    rgba(251,251,253,0.72) 40%, rgba(251,251,253,0.30) 60%, rgba(251,251,253,0) 82%);
}
.story-full .story-copy{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  padding-top:11vh;
}
.story-full .lead{ margin-left:auto; margin-right:auto; }
.story-full .link-row{ justify-content:center; }
.story-full .eyebrow,
.story-full .display,
.story-full .lead{ text-shadow:0 1px 20px rgba(251,251,253,0.8); }

/* ============================================================
   COSMIC — single dark brand beat
   ============================================================ */
.cosmic{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #1a1147 0%, #0a0620 55%, #000 100%),
    var(--black);
  color:var(--dk-text);
  padding:120px 0;
  text-align:center;
  margin-top:92px;
}
.cosmic-stars{
  position:absolute; inset:0;
  background-image: var(--galaxy-wide);
  background-size:cover; background-position:center;
  opacity:0.5; mix-blend-mode:screen;
}
.cosmic-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.cosmic-mark{ width:clamp(110px, 34vw, 170px); margin-bottom:30px; }
.cosmic-mark .blossom{ width:100%; height:auto; overflow:visible; filter:drop-shadow(0 0 34px rgba(169,102,234,0.6)); }
.cosmic-title{
  font-weight:600; letter-spacing:-0.03em; line-height:1.02;
  font-size:clamp(2.8rem, 13vw, 5.5rem);
  background-image: var(--galaxy-text);
  background-size:150% 260%; background-position:45% 50%;
  -webkit-background-clip:text; background-clip:text;
  color:var(--lavender); -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .cosmic-title{ color:var(--lavender); -webkit-text-fill-color:var(--lavender); }
}
.cosmic-sub{
  font-weight:400; font-size:clamp(1.15rem, 4.8vw, 1.5rem); line-height:1.45;
  color:var(--dk-text-2); max-width:22ch; margin-top:22px;
}

/* blossom motion */
.blossom-petals .petal{ transform-box:fill-box; transform-origin:100px 100px; opacity:0; animation:petalIn 0.8s var(--ease) forwards; }
.blossom-petals .petal:nth-child(1){ animation-delay:.05s; } .blossom-petals .petal:nth-child(2){ animation-delay:.12s; }
.blossom-petals .petal:nth-child(3){ animation-delay:.19s; } .blossom-petals .petal:nth-child(4){ animation-delay:.26s; }
.blossom-petals .petal:nth-child(5){ animation-delay:.34s; } .blossom-petals .petal:nth-child(6){ animation-delay:.41s; }
.blossom-petals .petal:nth-child(7){ animation-delay:.48s; } .blossom-petals .petal:nth-child(8){ animation-delay:.55s; }
@keyframes petalIn{ from{ opacity:0; transform:scale(0.2); } to{ opacity:1; transform:scale(1); } }

/* ============================================================
   JOIN
   ============================================================ */
.join{ background: linear-gradient(140deg, var(--navy) 0%, var(--violet) 100%); color:#fff; padding:80px 0; }
.join-inner{ display:flex; flex-direction:column; gap:28px; align-items:center; text-align:center; }
.join-copy h2{ font-weight:600; font-size:clamp(1.8rem, 7vw, 2.6rem); letter-spacing:-0.02em; }
.join-copy p{ font-size:1.05rem; color:rgba(255,255,255,0.85); margin-top:10px; }
.join-form{ display:flex; flex-direction:column; gap:12px; width:100%; max-width:420px; }
.join-form input{
  font-size:1rem; padding:15px 20px; border-radius:14px; border:1px solid rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.12); color:#fff; width:100%; text-align:center;
}
.join-form input::placeholder{ color:rgba(255,255,255,0.65); }
.join-form input:focus{ outline:2px solid #fff; outline-offset:2px; }
.join-form .pill-light{ width:100%; }

/* ============================================================
   FOOTER — apple-style fine print
   ============================================================ */
.footer{ background:var(--offwhite); border-top:1px solid var(--hair); padding:44px 0 30px; color:var(--ink-2); scroll-margin-top:60px; }
.footer-note{ font-size:0.78rem; line-height:1.5; padding-bottom:24px; border-bottom:1px solid var(--hair); max-width:60ch; }
.footer-main{ display:flex; flex-direction:column; gap:34px; padding:30px 0; }

/* visit block (folded in) */
.footer-visit h4{ font-size:1.05rem; font-weight:600; color:var(--ink); letter-spacing:-0.01em; margin-bottom:16px; }
.footer-visit-rows{ display:flex; flex-direction:column; gap:16px; margin-bottom:20px; }
.fv-label{ display:block; font-size:0.68rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-2); margin-bottom:3px; }
.footer-visit-rows p{ font-size:0.92rem; color:var(--ink); line-height:1.5; }
.footer-map{ border-radius:14px; overflow:hidden; height:150px; border:1px solid var(--hair); }
.footer-map iframe{ width:100%; height:100%; border:0; filter:grayscale(0.2); }

/* link columns */
.footer-links{ display:grid; grid-template-columns:1fr 1fr; gap:26px 20px; }
.footer-col h4{ font-size:0.76rem; font-weight:600; color:var(--ink); margin-bottom:10px; }
.footer-col a, .footer-col p{ display:block; font-size:0.82rem; color:var(--ink-2); line-height:1.5; padding:3px 0; }
.footer-col a:hover{ color:var(--violet); text-decoration:underline; }

.footer-bottom{ border-top:1px solid var(--hair); padding-top:18px; display:flex; flex-direction:column; gap:10px; font-size:0.74rem; }
.footer-legal{ display:flex; gap:18px; }
.footer-legal a:hover{ color:var(--violet); }

/* ============================================================
   RESPONSIVE — enhance upward from the mobile base
   ============================================================ */
@media (min-width:734px){
  .story-full{ min-height:82vh; }
  .story-full .story-copy{ padding-top:13vh; }
  .cosmic{ margin-top:120px; }
  .join-inner{ flex-direction:row; justify-content:space-between; text-align:left; align-items:center; }
  .join-copy{ max-width:440px; }
  .join-form{ flex-direction:row; width:auto; }
  .join-form input{ text-align:left; min-width:240px; }
  .join-form .pill-light{ width:auto; white-space:nowrap; }
  .footer-main{ flex-direction:row; gap:56px; align-items:flex-start; }
  .footer-visit{ flex:0 0 320px; }
  .footer-links{ flex:1; grid-template-columns:repeat(3,1fr); }
  .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:center; }
}

@media (min-width:1068px){
  .hero{ min-height:92vh; }
  .hero-copy{ padding-top:16vh; }
  .hero-media img{ object-position:45% 32%; }
  .wm-star{ font-size:clamp(4rem, 8vw, 6.4rem); }
  .cat-name{ font-size:clamp(3.2rem, 6.5vw, 4.6rem); }
  .story-full{ min-height:88vh; }
  .cosmic{ margin-top:150px; padding:160px 0; }
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  .reveal, .reveal-media{ opacity:1; transform:none; }
  .blossom-petals .petal{ opacity:1; }
}