/* ═══════════════════════════════════════════════════════════
   SerenMind AI — Shared Design System ("inner.css")
   Used by every inner page (wellbeing hubs, therapies, quizzes,
   booking pages) so nav / footer / buttons / cards / quiz UI
   are not re-duplicated in every file.
   ═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --teal:#2ab8a8;--tl:#5dd4c6;--td:#1a8a7a;--txd:#0f5a50;
  --bg:#eaf8f5;--ink:#062820;--ink2:rgba(6,40,32,0.65);--ink3:rgba(6,40,32,0.42);
  --glass:rgba(255,255,255,0.55);--glass2:rgba(255,255,255,0.35);
  --bdr:rgba(42,184,168,0.18);
  /* therapy accent colours — brand stays teal, accents differentiate cards */
  --aroma:#c98a52;--aroma-bg:rgba(201,138,82,0.1);--aroma-bdr:rgba(201,138,82,0.28);
  --sound:#6c7fd5;--sound-bg:rgba(108,127,213,0.1);--sound-bdr:rgba(108,127,213,0.28);
  --somatic:#4f9d6f;--somatic-bg:rgba(79,157,111,0.1);--somatic-bdr:rgba(79,157,111,0.28);
  --talk:var(--teal);--talk-bg:rgba(42,184,168,0.1);--talk-bdr:rgba(42,184,168,0.28);
}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{font-family:'Jost',sans-serif;background:var(--bg);color:var(--ink);margin:0;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
canvas#wc{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;}

/* ── NAV ── */
nav{position:sticky;top:0;z-index:500;padding:0 52px;height:64px;display:flex;justify-content:space-between;align-items:center;background:rgba(234,248,245,0.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(42,184,168,0.12);}
.logo{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;letter-spacing:7px;text-transform:uppercase;color:var(--ink);text-decoration:none;flex-shrink:0;}
.logo em{color:var(--teal);font-style:normal;}
.nl{display:flex;gap:26px;align-items:center;}
.na{font-size:10px;font-weight:300;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink2);text-decoration:none;transition:color 0.3s;white-space:nowrap;}
.na:hover{color:var(--teal);}
.nb{font-size:10px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:#fff;background:var(--teal);border:none;padding:11px 22px;cursor:pointer;text-decoration:none;border-radius:30px;transition:all 0.3s;white-space:nowrap;}
.nb:hover{background:var(--td);}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px;}
.hamburger span{width:22px;height:1.5px;background:var(--ink2);display:block;border-radius:2px;}
.mob-menu{display:none;position:fixed;inset:0;background:rgba(234,248,245,0.97);backdrop-filter:blur(20px);z-index:1000;flex-direction:column;align-items:center;justify-content:center;gap:20px;overflow-y:auto;padding:40px 20px;}
.mob-menu.open{display:flex;}
.mob-menu .na{font-size:13px;letter-spacing:3px;color:var(--ink);}
.mob-menu .mob-group{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--teal);margin-top:10px;}
.mob-close{position:absolute;top:20px;right:24px;background:none;border:none;font-size:24px;color:var(--ink2);cursor:pointer;}

/* nav dropdown (desktop) */
.nav-drop{position:relative;}
.nav-drop>.na{cursor:pointer;display:flex;align-items:center;gap:4px;}
.nav-drop>.na::after{content:'▾';font-size:8px;opacity:0.7;}
.nav-drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);min-width:220px;background:rgba(255,255,255,0.92);backdrop-filter:blur(20px);border:1px solid var(--bdr);border-radius:14px;padding:10px;display:none;flex-direction:column;gap:2px;box-shadow:0 16px 40px rgba(6,40,32,0.12);}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{display:flex;}
.nav-drop-menu a{font-size:11px;letter-spacing:0.5px;text-transform:none;color:var(--ink2);text-decoration:none;padding:9px 12px;border-radius:8px;transition:all 0.2s;display:flex;flex-direction:column;gap:2px;}
.nav-drop-menu a:hover{background:rgba(42,184,168,0.1);color:var(--ink);}
.nav-drop-menu a small{font-size:9px;color:var(--ink3);letter-spacing:0.3px;}

main{flex:1;position:relative;z-index:5;}
.wrap{width:100%;max-width:900px;margin:0 auto;text-align:center;}
.wrap-l{width:100%;max-width:900px;margin:0 auto;text-align:left;}

/* ── HERO / HEADING BLOCK ── */
.page-hero{padding:56px 20px 20px;text-align:center;}
.tag{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:16px;}
.heading{font-family:'Cormorant Garamond',serif;font-size:clamp(34px,5vw,58px);font-weight:300;color:var(--ink);margin-bottom:14px;line-height:1.08;}
.heading em{color:var(--teal);font-style:italic;}
.sub{font-size:13px;color:var(--ink2);margin-bottom:20px;line-height:1.9;max-width:560px;margin-left:auto;margin-right:auto;}

/* ── SECTIONS ── */
.sec{padding:56px 20px;position:relative;z-index:5;}
.sec-in{max-width:1080px;margin:0 auto;}
.sec-tag{font-size:10px;letter-spacing:3.5px;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:12px;}
.sec-h2{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,3.4vw,42px);font-weight:300;color:var(--ink);line-height:1.15;margin-bottom:12px;}
.sec-h2 em{font-style:italic;color:var(--teal);}
.sec-sub{font-size:13px;color:var(--ink2);line-height:1.9;max-width:560px;}

/* ── GLASS ── */
.glass{background:rgba(255,255,255,0.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.75);border-radius:18px;}
.glass-teal{background:rgba(42,184,168,0.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(42,184,168,0.28);border-radius:18px;}

/* ── BUTTONS ── */
.btn-primary{font-size:11px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:#fff;background:var(--teal);border:none;padding:15px 30px;cursor:pointer;border-radius:30px;transition:all 0.3s;text-decoration:none;display:inline-block;}
.btn-primary:hover{background:var(--td);transform:translateY(-2px);box-shadow:0 8px 24px rgba(42,184,168,0.28);}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none;}
.btn-ghost{font-size:11px;font-weight:300;letter-spacing:2px;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,0.5);border:1px solid rgba(42,184,168,0.35);padding:15px 28px;cursor:pointer;border-radius:30px;transition:all 0.3s;text-decoration:none;display:inline-block;}
.btn-ghost:hover{border-color:var(--teal);background:rgba(42,184,168,0.08);}
.btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px;}

/* ── TRACK / DIRECTORY CARDS (hubs + therapy directory) ── */
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:36px 0;}
.tracks.cols-4{grid-template-columns:repeat(4,1fr);}
.tracks.cols-2{grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto;}
.track{background:rgba(255,255,255,0.55);backdrop-filter:blur(16px);border:1.5px solid rgba(42,184,168,0.15);border-radius:24px;padding:34px 26px 28px;cursor:pointer;transition:all 0.3s;text-decoration:none;display:flex;flex-direction:column;align-items:center;text-align:center;color:inherit;}
.track:hover{border-color:var(--teal);background:rgba(255,255,255,0.78);transform:translateY(-4px);box-shadow:0 14px 40px rgba(42,184,168,0.14);}
.track-icon{font-size:44px;margin-bottom:16px;line-height:1;}
.track-age{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--teal);margin-bottom:8px;}
.track-title{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:300;color:var(--ink);margin-bottom:9px;line-height:1.15;}
.track-desc{font-size:12px;color:var(--ink2);line-height:1.8;margin-bottom:18px;}
.track-tools{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:20px;}
.tool-chip{font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--td);background:rgba(42,184,168,0.1);border:1px solid rgba(42,184,168,0.2);padding:4px 10px;border-radius:20px;}
.track-btn{font-size:10px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:#fff;background:var(--teal);border:none;padding:11px 24px;border-radius:30px;cursor:pointer;transition:all 0.3s;display:inline-block;text-decoration:none;}
.track-btn:hover{background:var(--td);}
/* accent variants — border-top colour cue per therapy type */
.track.acc-aroma{border-top:3px solid var(--aroma);}
.track.acc-aroma .track-btn{background:var(--aroma);}
.track.acc-aroma .track-btn:hover{filter:brightness(0.9);}
.track.acc-sound{border-top:3px solid var(--sound);}
.track.acc-sound .track-btn{background:var(--sound);}
.track.acc-somatic{border-top:3px solid var(--somatic);}
.track.acc-somatic .track-btn{background:var(--somatic);}
.track.acc-talk{border-top:3px solid var(--talk);}

/* ── INFO ROW ── */
.info-row{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;padding-top:30px;border-top:1px solid rgba(42,184,168,0.15);margin-top:8px;}
.info-item{text-align:center;}
.info-num{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:300;color:var(--ink);display:block;}
.info-lbl{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink3);}

/* ── CRISIS BANNER ── */
.crisis{background:rgba(255,100,100,0.06);border:1px solid rgba(255,100,100,0.18);border-radius:12px;padding:14px 20px;margin-top:28px;font-size:11px;color:rgba(180,60,60,0.82);display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;}

/* ── QUIZ UI (aroma / sound / somatic) ── */
.quiz-card{max-width:640px;margin:0 auto;padding:38px 36px;}
.quiz-progress{display:flex;gap:6px;margin-bottom:26px;}
.quiz-progress span{flex:1;height:3px;border-radius:3px;background:rgba(42,184,168,0.15);transition:background 0.3s;}
.quiz-progress span.done{background:var(--teal);}
.quiz-step-lbl{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--teal);margin-bottom:10px;display:block;}
.quiz-q{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:300;color:var(--ink);margin-bottom:22px;line-height:1.25;}
.quiz-opts{display:flex;flex-direction:column;gap:10px;margin-bottom:26px;}
.quiz-opt{text-align:left;background:rgba(255,255,255,0.55);border:1.5px solid rgba(42,184,168,0.18);border-radius:14px;padding:15px 18px;font-family:'Jost',sans-serif;font-size:13px;color:var(--ink);cursor:pointer;transition:all 0.2s;}
.quiz-opt:hover{border-color:var(--teal);background:rgba(42,184,168,0.06);}
.quiz-opt.sel{border-color:var(--teal);background:rgba(42,184,168,0.14);font-weight:500;}
.quiz-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.quiz-back{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink3);background:none;border:none;cursor:pointer;padding:8px;}
.quiz-back:hover{color:var(--teal);}
.quiz-name-inp{width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid rgba(42,184,168,0.25);background:rgba(255,255,255,0.6);font-family:'Jost';font-size:14px;color:var(--ink);margin-bottom:22px;outline:none;}
.quiz-name-inp:focus{border-color:var(--teal);}

/* quiz result card */
.result-card{max-width:640px;margin:0 auto;padding:40px 38px;text-align:center;}
.result-badge{font-size:44px;margin-bottom:14px;}
.result-tag{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--teal);margin-bottom:10px;}
.result-title{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;color:var(--ink);margin-bottom:16px;line-height:1.15;}
.result-body{font-size:13px;color:var(--ink2);line-height:1.9;margin-bottom:24px;text-align:left;}
.result-list{list-style:none;text-align:left;margin-bottom:26px;}
.result-list li{font-size:12px;color:var(--ink2);padding:10px 0;border-bottom:1px solid rgba(42,184,168,0.1);display:flex;gap:10px;align-items:flex-start;}
.result-list li::before{content:'✦';color:var(--teal);flex-shrink:0;font-size:11px;margin-top:1px;}

/* ── PRICING CARD (talk therapy / call booking) ── */
.price-wrap{display:flex;justify-content:center;margin:36px 0;}
.price-card{padding:42px 44px;text-align:center;max-width:420px;width:100%;}
.price-tag{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:10px;}
.price-amount{font-family:'Cormorant Garamond',serif;font-size:64px;font-weight:300;color:var(--ink);line-height:1;}
.price-period{font-size:12px;color:var(--ink3);margin-top:4px;margin-bottom:22px;}
.price-list{list-style:none;margin-bottom:26px;text-align:left;}
.price-list li{font-size:12px;color:var(--ink2);padding:9px 0;border-bottom:1px solid rgba(42,184,168,0.1);display:flex;align-items:center;gap:9px;}
.price-list li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--teal);flex-shrink:0;}

/* ── FOOTER ── */
footer{background:rgba(255,255,255,0.35);backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,0.6);padding:44px 52px 24px;position:relative;z-index:5;}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:36px;}
.flogo{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:300;letter-spacing:7px;text-transform:uppercase;color:var(--ink);text-decoration:none;display:block;margin-bottom:10px;}
.flogo em{color:var(--teal);font-style:normal;}
.ftag{font-size:11px;color:var(--ink2);line-height:1.8;max-width:220px;margin-bottom:14px;}
.fct{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:12px;}
.fl{list-style:none;display:flex;flex-direction:column;gap:8px;}
.fl a{font-size:11px;color:var(--ink2);text-decoration:none;transition:color 0.3s;}
.fl a:hover{color:var(--teal);}
.fb{border-top:1px solid rgba(42,184,168,0.1);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.fc{font-size:10px;color:var(--ink3);letter-spacing:0.8px;}
.fcrisis{background:rgba(255,100,100,0.06);border:1px solid rgba(255,100,100,0.18);padding:11px 13px;border-radius:7px;}
.fcrisis-l{font-size:8.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(190,60,60,0.7);margin-bottom:3px;}
.fcrisis-v{font-family:'Cormorant Garamond',serif;font-size:14px;color:rgba(190,60,60,0.85);}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .tracks{grid-template-columns:repeat(2,1fr);}
  .tracks.cols-4{grid-template-columns:repeat(2,1fr);}
  .fg{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  nav{padding:0 20px;}
  .nl{display:none;}
  .hamburger{display:flex;}
  .sec{padding:44px 20px;}
  .tracks,.tracks.cols-4,.tracks.cols-2{grid-template-columns:1fr;}
  footer{padding:36px 20px 20px;}
  .quiz-card,.result-card{padding:30px 22px;}
  .price-card{padding:32px 26px;}
  .page-hero{padding:44px 16px 16px;}
  .quiz-opts{gap:8px;}
  .quiz-opt{padding:13px 15px;font-size:12.5px;}
  .btn-row{gap:10px;}
  .btn-row .btn-primary,.btn-row .btn-ghost{width:100%;text-align:center;box-sizing:border-box;}
}
@media(max-width:480px){
  .fg{grid-template-columns:1fr;}
  .price-amount{font-size:52px;}
  .result-title{font-size:26px;}
  .heading{font-size:clamp(28px,7vw,40px);}
}