@import url("fonts.css");









:root{
  --ivory:#F5F1E8;
  --ivory-warm:#F0EBDE;
  --ivory-deep:#EAE3D3;
  --stone:#E7E0D0;
  --stone-deep:#D8CFBA;
  --forest:#1C2C23;
  --forest-deep:#131F18;
  --forest-black:#0E1712;
  --olive:#6E7257;
  --olive-soft:#8A8E72;
  --charcoal:#26261F;
  --ink:#292920;
  --ink-soft:rgba(41,41,32,.72);
  --ink-mute:rgba(41,41,32,.56);
  --gold:#BE8838;
  --gold-soft:#D2A967;
  --gold-pale:#E4CE9E;
  --line:rgba(41,41,32,.13);
  --line-soft:rgba(41,41,32,.07);
  --line-strong:rgba(41,41,32,.22);
  --line-light:rgba(245,241,232,.16);
  --line-light-soft:rgba(245,241,232,.08);
  /* elevation — soft, warm-tinted, layered */
  --sh-sm:0 1px 2px rgba(28,44,35,.04), 0 2px 8px rgba(28,44,35,.04);
  --sh-md:0 4px 14px -6px rgba(28,44,35,.12), 0 10px 30px -12px rgba(28,44,35,.10);
  --sh-lg:0 12px 30px -10px rgba(28,44,35,.16), 0 30px 70px -30px rgba(28,44,35,.22);
  --sh-xl:0 40px 90px -40px rgba(28,44,35,.42);
  --sh-gold:0 16px 40px -14px rgba(190,136,56,.36);
  --r-sm:3px; --r-md:6px; --r-lg:14px; --r-xl:26px;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Instrument Sans',-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --breath:cubic-bezier(.45,.05,.55,.95);
  --shadow-tint:28,44,35;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:var(--sans);
  background:var(--ivory);
  color:var(--ink);
  font-size:16px;
  line-height:1.72;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--ivory)}
img{max-width:100%;display:block;-webkit-user-drag:none;user-select:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;line-height:1.1;letter-spacing:.004em;font-feature-settings:'liga' 1,'dlig' 1}

/* ---------- utilities ---------- */
.wrap{width:min(1200px,90vw);margin:0 auto}
.wrap-n{width:min(920px,90vw);margin:0 auto}
.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.4em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:18px;margin-bottom:38px;
}
.eyebrow::before{content:"";width:42px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));opacity:.85}
.eyebrow::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.5;margin-left:-8px}
.dark .eyebrow{color:var(--gold-soft)}
.h-xl{font-size:clamp(46px,7vw,104px);letter-spacing:-.01em;line-height:1.02}
.h-lg{font-size:clamp(38px,5.2vw,78px);letter-spacing:-.006em;line-height:1.06}
.h-md{font-size:clamp(29px,3.6vw,52px);line-height:1.12}
.lede{font-size:clamp(17px,1.35vw,21px);line-height:1.82;color:var(--ink-soft);max-width:54ch;font-weight:400}
.dark{background:var(--forest);color:var(--ivory)}
.dark .lede{color:rgba(244,240,230,.72)}
.serif-i{font-family:var(--serif);font-style:italic;font-weight:400}
.gold{color:var(--gold)}
section{position:relative}
.room{padding:clamp(120px,15vh,200px) 0}

/* line-reveal helpers */
.rv{opacity:0;transform:translateY(46px)}
.rv-line{display:block;overflow:hidden}
.rv-line>span{display:block;transform:translateY(110%)}

/* ---------- cursor light ---------- */
#cursor-light{
  position:fixed;inset:0;pointer-events:none;z-index:3;opacity:0;
  transition:opacity 1.2s ease;mix-blend-mode:soft-light;
}
@media (pointer:coarse){#cursor-light{display:none}}

/* ---------- preloader ---------- */
#preloader{
  position:fixed;inset:0;z-index:200;background:var(--ivory);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px;
}
#preloader img{width:min(120px,26vw);opacity:0;animation:pl-breathe 3.2s var(--breath) infinite}
#preloader .pl-word{
  font-family:var(--sans);font-size:10px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--olive);opacity:0;animation:pl-fade 1.6s ease .4s forwards;
}
@keyframes pl-breathe{0%{opacity:.35;transform:scale(.94)}50%{opacity:.9;transform:scale(1.04)}100%{opacity:.35;transform:scale(.94)}}
@keyframes pl-fade{to{opacity:.8}}
#preloader.done{transition:opacity 1.1s ease,visibility 1.1s;opacity:0;visibility:hidden}

/* ---------- nav ---------- */
header#site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 0;transition:background .7s ease,box-shadow .7s ease,padding .7s ease;
}
header#site-header.scrolled{background:rgba(245,241,232,.72);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);padding:15px 0;box-shadow:0 1px 0 var(--line-soft),0 8px 30px -18px rgba(28,44,35,.2)}
header .wrap{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:13px}
.brand img{width:38px;height:auto;transition:transform .8s var(--ease-out)}
.brand:hover img{transform:rotate(-8deg) scale(1.05)}
.brand span{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:.18em;text-transform:uppercase;color:var(--forest)}
nav.desktop{display:flex;gap:42px;align-items:center}
nav.desktop a{
  font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-mute);position:relative;padding:5px 0;transition:color .5s var(--ease);
}
nav.desktop a:last-child{
  color:var(--forest);border:1px solid var(--line-strong);border-radius:100px;
  padding:11px 24px;transition:all .6s var(--ease);
}
nav.desktop a:last-child::after{display:none}
nav.desktop a:last-child:hover{background:var(--forest);color:var(--ivory);border-color:var(--forest)}
nav.desktop a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease);
}
nav.desktop a:hover{color:var(--forest)}
nav.desktop a:hover::after{transform:scaleX(1);transform-origin:left}
#menu-btn{display:none;background:none;border:0;cursor:pointer;z-index:120;width:40px;height:40px;position:relative}
#menu-btn span{position:absolute;left:8px;right:8px;height:1.5px;background:var(--forest);transition:.5s var(--ease)}
#menu-btn span:nth-child(1){top:15px}#menu-btn span:nth-child(2){top:24px}
body.menu-open header#site-header{z-index:130;background:none!important;box-shadow:none!important;backdrop-filter:none!important}
body.menu-open #menu-btn span{background:var(--ivory)}
body.menu-open .brand span{color:var(--ivory)}
body.menu-open #menu-btn span:nth-child(1){top:19px;transform:rotate(45deg)}
body.menu-open #menu-btn span:nth-child(2){top:19px;transform:rotate(-45deg)}
#mobile-menu{
  position:fixed;inset:0;z-index:110;background:var(--forest);color:var(--ivory);
  display:flex;flex-direction:column;justify-content:center;padding:0 9vw;
  clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease);
}
body.menu-open #mobile-menu{clip-path:inset(0 0 0% 0)}
#mobile-menu a{
  font-family:var(--serif);font-size:clamp(30px,7.5vw,44px);font-weight:300;
  padding:10px 0;border-bottom:1px solid var(--line-light);opacity:0;transform:translateY(24px);
  transition:opacity .8s ease,transform .8s var(--ease);
}
body.menu-open #mobile-menu a{opacity:1;transform:none}
#mobile-menu .mm-contact{margin-top:36px;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);opacity:0;transition:opacity 1s ease .5s}
body.menu-open #mobile-menu .mm-contact{opacity:1}
@media (max-width:920px){nav.desktop{display:none}#menu-btn{display:block}}
@media (min-width:921px){#mobile-menu{display:none}}

/* ---------- hero ---------- */
#hero{
  min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;background:var(--ivory);
}
#hero .light-field{
  position:absolute;inset:-20%;
  background:
    radial-gradient(52% 44% at 70% 22%, rgba(210,169,103,.40), transparent 60%),
    radial-gradient(64% 56% at 20% 80%, rgba(110,114,87,.22), transparent 64%),
    radial-gradient(40% 38% at 50% 52%, rgba(247,243,234,.95), transparent 68%),
    linear-gradient(165deg, #F8F4EB 0%, #F1EBDC 48%, #E8E0CD 100%);
  will-change:transform;
}
#hero::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%, transparent 58%, rgba(28,44,35,.06) 100%);
}
.leaf-shadow{position:absolute;filter:blur(11px);opacity:.13;will-change:transform;pointer-events:none}
.leaf-shadow path{fill:var(--forest)}
#leaf-a{width:46vw;max-width:680px;top:-6%;right:-8%}
#leaf-b{width:40vw;max-width:560px;bottom:-10%;left:-7%;opacity:.09;transform:scaleX(-1)}
#dust{position:absolute;inset:0;pointer-events:none}
#hero .hero-inner{position:relative;z-index:4;padding:0 6vw}
#hero .hero-mark{width:clamp(88px,11.5vw,140px);margin:0 auto 48px;opacity:0;filter:drop-shadow(0 12px 24px rgba(28,44,35,.12))}
#hero .hero-tag{
  font-family:var(--serif);font-weight:300;letter-spacing:-.008em;
  font-size:clamp(46px,7.8vw,112px);line-height:1.02;color:var(--forest);
}
#hero .hero-tag .rv-line>span{padding-bottom:.08em;margin-bottom:-.08em}
#hero .hero-brand{
  margin-top:38px;font-size:12px;font-weight:500;letter-spacing:.58em;
  text-transform:uppercase;color:var(--gold);opacity:0;padding-left:.58em;
}
#hero .hero-sub{
  margin:28px auto 0;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(19px,2vw,26px);color:var(--ink-mute);opacity:0;
}
#scroll-cue{
  position:absolute;bottom:38px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;z-index:4;
}
#scroll-cue .cue-label{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:rgba(42,42,35,.5)}
#scroll-cue .cue-line{width:1px;height:56px;background:var(--line);overflow:hidden;position:relative}
#scroll-cue .cue-line::after{
  content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;
  background:var(--gold);animation:cue 2.6s var(--breath) infinite;
}
@keyframes cue{0%{top:-100%}55%{top:0}100%{top:100%}}



/* ---------- philosophy ---------- */
#philosophy{background:var(--ivory)}
.philo-block{margin-top:clamp(60px,9vh,110px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);align-items:baseline}
.philo-block .not{
  font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.6vw,52px);
  color:rgba(42,42,35,.55);
}
.philo-block .is{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.4vw,64px);color:var(--forest)}
.philo-block .is em{font-style:italic;color:var(--gold);position:relative}
.philo-block p{margin-top:18px;max-width:44ch;color:rgba(42,42,35,.7);font-size:15.5px}
@media (max-width:760px){.philo-block{grid-template-columns:1fr;gap:14px}}
.philo-rule{position:relative;width:100%;height:1px;background:var(--line);margin-top:clamp(64px,9vh,120px);transform:scaleX(0);transform-origin:left}
.philo-rule::after{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;border-radius:50%;background:var(--gold);transform:translate(-50%,-50%);box-shadow:0 0 0 4px var(--ivory)}

/* ---------- about / meet shivani ---------- */
#about{background:var(--stone)}
#about .about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,7vw,120px);align-items:center}
.portrait{position:relative}
.portrait .frame{
  position:relative;overflow:hidden;border-radius:220px 220px var(--r-lg) var(--r-lg);
  clip-path:inset(0 0 100% 0);box-shadow:var(--sh-xl);
}
.portrait .frame::after{
  content:"";position:absolute;inset:0;border-radius:220px 220px var(--r-lg) var(--r-lg);
  box-shadow:inset 0 0 0 1px rgba(245,241,232,.2);pointer-events:none;
}
.portrait img{width:100%;height:auto;transform:scale(1.12)}
.portrait .ring{
  position:absolute;width:58%;aspect-ratio:1;top:-10%;right:-14%;pointer-events:none;
  border:1px solid rgba(190,136,56,.42);border-radius:50%;
}
.portrait .ring::before{
  content:"";position:absolute;inset:9px;border:1px solid rgba(190,136,56,.2);border-radius:50%;
}
.portrait .ring::after{
  content:"";position:absolute;width:10px;height:10px;border-radius:50%;
  background:var(--gold);top:8%;right:13%;box-shadow:var(--sh-gold);
}
.portrait .p-caption{margin-top:22px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(42,42,35,.5);display:flex;justify-content:space-between}
.about-copy .h-lg{color:var(--forest);margin-bottom:34px}
.about-copy p{margin-bottom:22px;color:rgba(42,42,35,.76);max-width:54ch}
.about-copy .pull{
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,2.3vw,29px);
  color:var(--forest);border-left:2px solid var(--gold);padding-left:30px;margin:38px 0;line-height:1.48;
  position:relative;
}
.about-copy .pull::before{
  content:"\201C";position:absolute;left:24px;top:-14px;font-size:60px;color:var(--gold);
  opacity:.18;font-family:var(--serif);line-height:1;
}
.about-sign{margin-top:36px;font-family:var(--serif);font-style:italic;font-size:26px;color:var(--gold)}
@media (max-width:860px){#about .about-grid{grid-template-columns:1fr}.portrait{max-width:420px}}

/* ---------- why modern minds (dark room) ---------- */
#why{background:linear-gradient(180deg,var(--forest) 0%,var(--forest-deep) 100%);color:var(--ivory);overflow:hidden}
#why .h-lg{color:var(--ivory)}
#why .noise-words{margin-top:clamp(56px,8vh,96px);display:flex;flex-wrap:wrap;gap:14px 18px;max-width:880px}
.noise{
  font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.8vw,38px);
  color:rgba(244,240,230,.4);border:1px solid var(--line-light);
  padding:10px 28px;border-radius:100px;white-space:nowrap;
}
#why .answer{margin-top:clamp(70px,10vh,120px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px)}
#why .answer h3{font-size:clamp(26px,3vw,40px);color:var(--ivory);margin-bottom:18px}
#why .answer h3 em{font-style:italic;color:var(--gold-soft)}
#why .answer p{color:rgba(244,240,230,.68);max-width:46ch}
@media (max-width:760px){#why .answer{grid-template-columns:1fr;gap:44px}}

/* ---------- breathing room ---------- */
#breath{
  background:radial-gradient(90% 90% at 50% 110%, #223829 0%, var(--forest-deep) 60%);
  color:var(--ivory);min-height:100vh;display:flex;align-items:center;text-align:center;overflow:hidden;
}
#breath .wrap-n{display:flex;flex-direction:column;align-items:center}
.breath-stage{position:relative;width:min(400px,72vw);aspect-ratio:1;margin:clamp(40px,6vh,64px) 0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.b-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(244,240,230,.14)}
.b-ring.r2{inset:-13%;border-color:rgba(244,240,230,.08)}
.b-ring.r3{inset:-26%;border-color:rgba(244,240,230,.05)}
.b-orb{
  position:absolute;width:52%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, rgba(210,169,103,.5), rgba(192,138,62,.16) 55%, transparent 75%);
  box-shadow:0 0 90px rgba(210,169,103,.22), inset 0 0 50px rgba(210,169,103,.14);
  transform:scale(.62);
}
.b-enso{position:absolute;width:64%;opacity:.92;transform:scale(.62) rotate(0deg)}
.b-word{
  position:relative;z-index:2;font-family:var(--serif);font-weight:300;letter-spacing:.28em;
  text-transform:uppercase;font-size:15px;color:var(--ivory);opacity:.85;
}
.b-count{position:absolute;bottom:14%;font-size:11px;letter-spacing:.4em;color:rgba(244,240,230,.4)}
#breath-toggle{
  margin-top:8px;background:none;border:1px solid rgba(244,240,230,.28);color:var(--ivory);
  font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  padding:16px 44px;border-radius:100px;cursor:pointer;transition:.6s ease;
}
#breath-toggle:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
#breath .b-note{margin-top:26px;font-family:var(--serif);font-style:italic;font-size:17px;color:rgba(244,240,230,.5)}

/* ---------- offerings ---------- */
#offerings{background:var(--ivory)}
.off-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(54px,7vh,84px);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md)}
.off-card{
  background:var(--ivory-warm);padding:clamp(38px,3.6vw,56px) clamp(28px,2.8vw,44px);
  position:relative;overflow:hidden;transition:background .8s ease;
}
.off-card::before{
  content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--forest) 0%,var(--forest-deep) 100%);
  transform:translateY(101%);transition:transform .8s var(--ease-out);
}
.off-card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform .7s var(--ease-out);z-index:2;
}
.off-card:hover::after{transform:scaleX(1)}
.off-card:hover::before{transform:translateY(0)}
.off-card>*{position:relative;z-index:1;transition:color .6s ease}
.off-card .o-num{font-size:10px;letter-spacing:.34em;color:var(--gold);margin-bottom:26px;display:block}
.off-card h3{font-size:clamp(25px,2.3vw,33px);color:var(--forest);margin-bottom:16px}
.off-card p{font-size:14.5px;color:rgba(42,42,35,.66);line-height:1.75}
.off-card:hover h3{color:var(--ivory)}
.off-card:hover p{color:rgba(244,240,230,.72)}
.off-card:hover .o-num{color:var(--gold-soft)}
@media (max-width:960px){.off-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.off-grid{grid-template-columns:1fr}}
.off-more{margin-top:44px;display:flex;flex-wrap:wrap;gap:12px}
.chip{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--olive);
  border:1px solid rgba(110,114,87,.32);padding:12px 24px;border-radius:100px;
  background:rgba(110,114,87,.03);transition:all .5s var(--ease);
}
.chip:hover{border-color:var(--olive);background:rgba(110,114,87,.08);color:var(--forest)}

/* ---------- programs ---------- */
#programs{background:var(--stone)}
.prog-list{margin-top:clamp(50px,7vh,80px);border-top:1px solid var(--line)}
.prog{
  position:relative;display:grid;grid-template-columns:90px minmax(0,5fr) minmax(0,6fr) auto;gap:clamp(20px,3vw,50px);
  align-items:center;padding:clamp(38px,4vh,56px) clamp(16px,2vw,28px);border-bottom:1px solid var(--line);
  transition:padding-left .7s var(--ease),background .7s var(--ease);border-radius:var(--r-md);
}
.prog::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease-out);
}
.prog:hover{padding-left:clamp(28px,3vw,44px);background:linear-gradient(90deg,rgba(190,136,56,.05),transparent 60%)}
.prog:hover::before{transform:scaleY(1)}
.prog .p-num{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.2vw,32px);color:var(--gold);transition:transform .6s var(--ease)}
.prog:hover .p-num{transform:translateX(4px)}
.prog h3{font-size:clamp(24px,2.6vw,36px);color:var(--forest)}
.prog h3 span{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--olive);margin-top:10px}
.prog p{font-size:14.5px;color:rgba(42,42,35,.68);max-width:46ch}
.prog .p-arrow{
  width:50px;height:50px;border:1px solid var(--line-strong);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--forest);
  transition:.6s var(--ease-out);flex-shrink:0;font-size:18px;
}
.prog:hover .p-arrow{background:var(--forest);color:var(--ivory);border-color:var(--forest);box-shadow:var(--sh-md);transform:rotate(-45deg)}
@media (max-width:820px){.prog{grid-template-columns:auto 1fr;grid-template-rows:auto auto}.prog p{grid-column:1/-1}.prog .p-arrow{display:none}}

/* ---------- journey (horizontal) ---------- */
#journey{background:var(--forest);color:var(--ivory);overflow:hidden;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
#journey .j-head{padding:clamp(110px,14vh,170px) 0 clamp(30px,5vh,60px)}
#journey .h-lg{color:var(--ivory)}
.j-track-wrap{overflow:hidden}
.j-track{display:flex;gap:0;will-change:transform;padding-bottom:clamp(110px,14vh,170px)}
.j-step{
  flex:0 0 auto;width:min(430px,82vw);padding:0 clamp(28px,3vw,54px);
  border-left:1px solid var(--line-light);
}
.j-step .j-num{font-size:10px;letter-spacing:.4em;color:var(--gold-soft);display:block;margin-bottom:30px}
.j-step h3{font-size:clamp(40px,4.4vw,64px);color:var(--ivory);margin-bottom:22px;font-weight:300}
.j-step p{color:rgba(244,240,230,.62);font-size:15px;max-width:38ch}
.j-step .j-sans{font-family:var(--serif);font-style:italic;color:var(--gold-soft);font-size:17px;margin-top:20px;display:block}
@media (max-width:820px){
  .j-track{flex-direction:column;gap:56px;transform:none!important}
  .j-step{width:100%;border-left:none;border-top:1px solid var(--line-light);padding:36px 0 0}
}

/* ---------- testimonials ---------- */
#voices{background:var(--ivory)}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.4vw,34px);margin-top:clamp(50px,7vh,80px)}
.t-card{
  position:relative;background:linear-gradient(165deg,#FCFAF3,#F6F1E5);
  border:1px solid var(--line);padding:clamp(36px,3.2vw,50px);
  display:flex;flex-direction:column;gap:28px;border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);overflow:hidden;
  transition:transform .8s var(--ease-out),box-shadow .8s ease,border-color .8s ease;
}
.t-card::before{
  content:"";position:absolute;top:0;right:0;width:64px;height:64px;
  background:radial-gradient(circle at top right,rgba(190,136,56,.12),transparent 70%);
}
.t-card:hover{transform:translateY(-10px);box-shadow:var(--sh-lg);border-color:rgba(190,136,56,.3)}
.t-card .t-mark{font-family:var(--serif);font-size:64px;line-height:.5;color:var(--gold);opacity:.6;height:26px}
.t-card blockquote{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--forest);flex:1}
.t-card .t-who{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--olive)}
@media (max-width:860px){.t-grid{grid-template-columns:1fr;max-width:560px}}

/* ---------- instagram ---------- */
#gram{background:var(--stone)}
#gram .g-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.g-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(44px,6vh,70px)}
.g-tile{
  aspect-ratio:4/5;position:relative;overflow:hidden;border-radius:2px;
  display:flex;align-items:flex-end;padding:22px;color:var(--ivory);
}
.g-tile .g-cap{font-family:var(--serif);font-style:italic;font-size:16px;opacity:0;transform:translateY(10px);transition:.6s ease;position:relative;z-index:2}
.g-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(21,34,27,.55));opacity:0;transition:opacity .6s ease}
.g-tile:hover .g-cap{opacity:1;transform:none}
.g-tile:hover::after{opacity:1}
.g-tile .g-bg{position:absolute;inset:0;transition:transform 1.4s var(--ease)}
.g-tile:hover .g-bg{transform:scale(1.06)}
@media (max-width:860px){.g-grid{grid-template-columns:repeat(2,1fr)}}
.btn-line{
  display:inline-flex;align-items:center;gap:14px;font-size:11px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--forest);
  border-bottom:1px solid var(--gold);padding-bottom:10px;transition:gap .5s ease,color .5s;
}
.btn-line:hover{gap:22px;color:var(--gold)}

/* ---------- faq ---------- */
#faq{background:var(--ivory)}
.faq-list{margin-top:clamp(44px,6vh,70px);border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);transition:background .6s var(--ease);border-radius:var(--r-md);padding:0 clamp(8px,1.5vw,20px);margin:0 clamp(-8px,-1.5vw,-20px)}
.faq-item:hover{background:linear-gradient(90deg,rgba(190,136,56,.035),transparent)}
.faq-item.open{background:linear-gradient(90deg,rgba(190,136,56,.05),transparent 70%)}
.faq-q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:clamp(24px,3vh,34px) 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(19px,1.9vw,25px);color:var(--forest);
}
.faq-q .f-icon{
  width:40px;height:40px;border:1px solid var(--line-strong);border-radius:50%;flex-shrink:0;
  position:relative;transition:.6s var(--ease-out);
}
.faq-item:hover .f-icon{border-color:var(--gold)}
.faq-q .f-icon::before,.faq-q .f-icon::after{
  content:"";position:absolute;background:var(--forest);top:50%;left:50%;transition:.55s var(--ease);
}
.faq-q .f-icon::before{width:12px;height:1px;transform:translate(-50%,-50%)}
.faq-q .f-icon::after{width:1px;height:12px;transform:translate(-50%,-50%)}
.faq-item.open .f-icon{background:var(--forest);border-color:var(--forest);box-shadow:var(--sh-sm);transform:rotate(180deg)}
.faq-item.open .f-icon::before,.faq-item.open .f-icon::after{background:var(--ivory)}
.faq-item.open .f-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .75s var(--ease)}
.faq-a p{padding:0 0 34px;color:rgba(42,42,35,.72);max-width:64ch;font-size:15.5px}

/* ---------- contact ---------- */
#contact{background:radial-gradient(90% 120% at 50% 0%,#22362A 0%,var(--forest) 40%,var(--forest-deep) 100%);color:var(--ivory);text-align:center;position:relative;overflow:hidden}
#contact::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 40% at 50% 30%,rgba(190,136,56,.1),transparent 70%);pointer-events:none}
#contact .wrap-n{position:relative;z-index:1}
#contact .c-mark{width:82px;margin:0 auto 44px;opacity:.94;filter:drop-shadow(0 10px 30px rgba(0,0,0,.3))}
#contact .h-xl{color:var(--ivory)}
#contact .h-xl em{font-style:italic;color:var(--gold-soft)}
#contact .c-sub{margin:28px auto 54px;color:rgba(244,240,230,.6);max-width:44ch;font-size:16px}
.c-actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.btn-solid{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:var(--forest-deep);font-size:11px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;padding:21px 50px;border-radius:100px;
  position:relative;overflow:hidden;transition:.6s var(--ease-out);box-shadow:var(--sh-gold);
}
.btn-solid::before{
  content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--gold-pale),var(--gold-soft));
  opacity:0;transition:opacity .6s ease;
}
.btn-solid span{position:relative;z-index:1}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 22px 50px -16px rgba(210,169,103,.6)}
.btn-solid:hover::before{opacity:1}
.btn-ghost{
  border:1px solid rgba(244,240,230,.28);color:var(--ivory);font-size:11px;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;padding:21px 50px;border-radius:100px;transition:.6s var(--ease-out);
  background:rgba(244,240,230,.02);
}
.btn-ghost:hover{border-color:var(--gold-soft);color:var(--gold-soft);background:rgba(210,169,103,.06);transform:translateY(-2px)}
.c-details{
  margin-top:70px;display:flex;justify-content:center;gap:clamp(30px,6vw,90px);flex-wrap:wrap;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,240,230,.55);
}
.c-details a:hover{color:var(--gold-soft)}
footer{
  background:var(--forest-deep);color:rgba(244,240,230,.45);padding:34px 0;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer a{color:rgba(244,240,230,.7);transition:color .5s}
footer a:hover{color:var(--gold-soft)}


/* ---------- v2 motion additions ---------- */
#grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
/* marquee */
#marquee{background:var(--ivory);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:34px 0}
.mq-track{display:flex;gap:0;width:max-content;will-change:transform}
.mq-item{
  font-family:var(--serif);font-weight:300;font-style:italic;white-space:nowrap;
  font-size:clamp(26px,3.2vw,44px);color:transparent;-webkit-text-stroke:1px rgba(29,46,37,.4);
  padding-right:26px;display:flex;align-items:center;gap:26px;
}
.mq-item i{font-style:normal;width:7px;height:7px;border-radius:50%;background:var(--gold);flex-shrink:0}
.mq-item.solid{color:var(--forest);-webkit-text-stroke:0}
/* philosophy animated strike */
.not{transition:color 1.6s ease}
.not .strike{
  text-decoration:line-through;text-decoration-thickness:1.5px;
  text-decoration-color:transparent;transition:text-decoration-color 1.8s ease .35s;
}
.not.struck{color:rgba(42,42,35,.3)}
.not.struck .strike{text-decoration-color:rgba(192,138,62,.8)}
/* offerings icons */
.o-icon{width:44px;height:44px;margin-bottom:24px;display:block}
.o-icon path,.o-icon circle,.o-icon line{
  fill:none;stroke:var(--forest);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .6s ease;
}
.o-icon .gold-dot{fill:var(--gold);stroke:none}
.off-card:hover .o-icon path,.off-card:hover .o-icon circle,.off-card:hover .o-icon line{stroke:var(--ivory)}
.o-icon .draw{stroke-dasharray:var(--len,160);stroke-dashoffset:var(--len,160)}
.off-card.drawn .o-icon .draw{transition:stroke-dashoffset 1.6s var(--ease) .2s;stroke-dashoffset:0}
/* noise pill drift */
.noise{will-change:transform}
/* testimonial float */
@keyframes t-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.t-card.floating{animation:t-float 7s var(--breath) infinite}
.t-card.floating:nth-child(2){animation-delay:-2.3s;animation-duration:8s}
.t-card.floating:nth-child(3){animation-delay:-4.6s;animation-duration:9s}
.t-card.floating:hover{animation-play-state:paused}
/* journey progress */
.j-progress{width:min(1200px,90vw);margin:0 auto;height:1px;background:var(--line-light);position:relative;margin-bottom:clamp(40px,6vh,64px)}
.j-progress i{position:absolute;left:0;top:0;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
/* breath embers */
.ember{position:absolute;bottom:-4%;border-radius:50%;background:var(--gold-soft);opacity:0;pointer-events:none;animation:ember-rise linear infinite}
@keyframes ember-rise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.5}
  85%{opacity:.18}
  100%{transform:translateY(-108vh) translateX(var(--sway,20px));opacity:0}
}
/* gram art tiles */
.g-tile svg{position:absolute;inset:0;width:100%;height:100%}
.g-art-stroke{fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes sun-rise{0%,100%{transform:translateY(26px)}50%{transform:translateY(-8px)}}
@keyframes wave-drift{0%{transform:translateX(0)}100%{transform:translateX(-80px)}}
@keyframes leaf-fall{
  0%{transform:translate(0,-60px) rotate(0deg);opacity:0}
  10%{opacity:.9}
  90%{opacity:.9}
  100%{transform:translate(-46px,460px) rotate(-140deg);opacity:0}
}
@keyframes star-tw{0%,100%{opacity:.25}50%{opacity:.9}}
@keyframes breath-halo{0%,100%{transform:scale(.9);opacity:.35}50%{transform:scale(1.06);opacity:.7}}
@media (prefers-reduced-motion:reduce){
  .mq-track{transform:none!important}
  .t-card.floating,.ember{animation:none!important}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv,.rv-line>span,#hero .hero-mark,#hero .hero-brand,#hero .hero-sub,#scroll-cue{opacity:1!important;transform:none!important}
  .portrait .frame{clip-path:none!important}
}


/* screen-reader-only: crawlable & accessible, visually removed — does not affect design */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}


/* ══════════════════════════════════════════════════════════════
   V2 — BRUSHSTROKE MOTION LAYER
   Concept: "One Breath". Every drawn line is painted, never faded.
   Geometry traced from images/mark.png:
     centre 167.4,161.4 · R 153.06 · gap 24°–81° · dot 48.3° @ r148
   Nothing here changes type, colour, spacing or layout.
   ══════════════════════════════════════════════════════════════ */

:root{
  --draw:2600ms;        /* the exhale — hero stroke duration      */
  --draw-hold:520ms;    /* the inhale before the brush lands      */
  --draw-ease:cubic-bezier(.30,.05,.32,1);
  --lift-ease:cubic-bezier(.16,.85,.28,1);
  --settle:cubic-bezier(.16,.9,.24,1);
  --stagger:38ms;       /* per-character rise                     */
  --ink-depth:120px;    /* height of the ink bleed band           */
  --room-z:190px;       /* journey camera depth                   */
}

/* ---------- the ensō ---------- */
.enso-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;display:block}
.enso-svg .enso-brush{fill:var(--forest)}
.enso-svg.light .enso-brush{fill:var(--ivory)}
.enso-svg .enso-dot{fill:var(--gold)}
.enso-svg.light .enso-dot{fill:var(--gold-soft)}
.enso-svg .enso-lead{fill:none;stroke:#fff;stroke-width:44;stroke-linecap:butt;
  stroke-dasharray:1000;stroke-dashoffset:1000}
.enso-host{display:block}
.enso-host > img{opacity:0}
.enso-host.no-draw > img{opacity:1}

@keyframes enso-draw{
  0%  {stroke-dashoffset:1000;animation-timing-function:var(--draw-ease)}
  76% {stroke-dashoffset:172;animation-timing-function:var(--lift-ease)}
  100%{stroke-dashoffset:0}
}
.enso-svg.drawing .enso-lead{animation:enso-draw var(--draw) var(--draw-hold) forwards}
.enso-svg .enso-dot{opacity:0;transform-box:fill-box;transform-origin:center}
@keyframes enso-settle{
  0%  {opacity:0;transform:translate(30px,36px) scale(.28)}
  40% {opacity:1}
  100%{opacity:1;transform:none}
}
.enso-svg.drawing .enso-dot{
  animation:enso-settle 1100ms calc(var(--draw-hold) + var(--draw) * .72) var(--settle) forwards}
.enso-svg.drawn .enso-lead{stroke-dashoffset:0;animation:none}
.enso-svg.drawn .enso-dot{opacity:1;animation:none}

/* the periodic nudge — one 4-2-6 breath if nobody scrolls */
.enso-host.tappable{cursor:pointer;pointer-events:auto}

/* ---------- hero type: rise on the exhale ---------- */
#hero-tag span.ch{display:inline-block;will-change:transform}
#contact .h-xl span.ch{display:inline-block;will-change:transform}

/* ---------- masked heading reveal (injected wrapper) ---------- */
.mask-line{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.mask-line > .mask-inner{display:block;will-change:transform}

/* ---------- philosophy: the strike is drawn, not faded ---------- */
.not .strike{text-decoration:none}
.not-rule{position:absolute;left:0;top:50%;height:1.5px;width:100%;
  background:rgba(192,138,62,.8);transform:scaleX(0);transform-origin:left;
  pointer-events:none}
.not .strike{position:relative;display:inline}
.strike-wrap{position:relative;display:inline-block}
.philo-rule::after{transform:translate(-50%,-50%) scale(0)}
.philo-rule.lit::after{transition:transform .7s var(--settle) .6s;
  transform:translate(-50%,-50%) scale(1)}

/* ---------- about: the gold ring draws as an arc ---------- */
.portrait .ring{opacity:0}
.portrait .ring-arc{position:absolute;width:58%;aspect-ratio:1;top:-10%;right:-14%;
  pointer-events:none}
.portrait .ring-arc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.portrait .ring-arc circle{fill:none;stroke:rgba(190,136,56,.42);stroke-width:1;
  stroke-dasharray:1000;stroke-dashoffset:1000}
.portrait .ring-arc circle.inner{stroke:rgba(190,136,56,.2)}
.ring-node{position:absolute;width:10px;height:10px;border-radius:50%;
  background:var(--gold);top:8%;right:13%;box-shadow:var(--sh-gold);
  transform:scale(0);will-change:transform}

/* ---------- 3D ---------- */
.hero-inner{transform-style:preserve-3d}
#hero-tag,#hero-brand,#hero-sub{will-change:transform}
.breath-stage{transform-style:preserve-3d}
.b-ring,.b-orb{will-change:transform}

/* ---------- offerings: cards rise from beneath an edge ---------- */
.off-card{will-change:transform}
.off-card .card-node{position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--gold);opacity:0;pointer-events:none;z-index:3;
  transition:opacity .5s ease;will-change:transform}
.off-card:hover .card-node{opacity:.9}

/* ---------- programs: the gold bar lays down first ---------- */
.prog::before{transform-origin:top}
.prog{will-change:transform}

/* ---------- journey: real z-depth ---------- */
.j-step{will-change:transform,opacity}

/* ---------- voices / gram ---------- */
.t-card{will-change:transform}
.g-tile{will-change:transform}
.g-tile svg{will-change:transform}

/* ---------- faq: the icon draws ---------- */
.faq-q .f-icon{overflow:visible}
.faq-ring{position:absolute;inset:-1px;pointer-events:none;overflow:visible}
.faq-ring circle{fill:none;stroke:var(--gold);stroke-width:1;
  stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset .7s var(--ease-out)}
.faq-item.open .faq-ring circle{stroke-dashoffset:0}

/* ---------- ink bleed at the two inward boundaries ---------- */
.ink-band{position:absolute;left:0;right:0;bottom:0;height:var(--ink-depth);
  pointer-events:none;z-index:2;overflow:hidden}
.ink-band canvas{display:block;width:100%;height:100%;pointer-events:none}

/* ---------- cursor light: transform only, never repainted ---------- */
#cursor-light{
  inset:auto;width:680px;height:680px;left:0;top:0;margin:-340px 0 0 -340px;
  background:radial-gradient(circle closest-side,rgba(210,169,103,.5),transparent 72%);
  will-change:transform;transform:translate3d(-1000px,-1000px,0);
}

/* ---------- safety nets ---------- */
@media (scripting:none){
  .rv,.mask-line > .mask-inner{opacity:1!important;transform:none!important}
  .enso-host > img{opacity:1}
  .portrait .frame{clip-path:none!important}
  .portrait .ring{opacity:1}
}
html.motion-failed .rv,
html.motion-failed .mask-line > .mask-inner,
html.motion-failed #hero-tag span.ch,
html.motion-failed #contact .h-xl span.ch{opacity:1!important;transform:none!important}
html.motion-failed .portrait .frame{clip-path:none!important}
html.motion-failed .portrait .ring{opacity:1}
html.motion-failed .enso-host > img{opacity:1}
html.motion-failed .enso-svg{display:none}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  #hero-tag .rv-line > span{transform:none!important}
  .enso-svg .enso-lead{stroke-dashoffset:0;animation:none!important}
  .enso-svg .enso-dot{opacity:1;animation:none!important}
  .enso-host{animation:none!important}
  #hero-tag span.ch,#contact .h-xl span.ch,
  .mask-line > .mask-inner{transform:none!important;opacity:1!important}
  .portrait .ring{opacity:1}
  .portrait .ring-arc{display:none}
  .not-rule{transform:scaleX(1)}
  .hero-inner,.breath-stage{transform-style:flat;perspective:none}
  .ink-band{display:none}
  .j-step{will-change:auto}
  .off-card .card-node{display:none}
}

/* ---------- mobile: strip the expensive layer, keep the signature ----------
   Restated at the end of the sheet so no later desktop rule can win. */
@media (max-width:920px){
  .hero-inner,.breath-stage{transform-style:flat;perspective:none}
  #hero-tag,#hero-brand,#hero-sub,.b-ring,.b-orb{will-change:auto}
  #cursor-light{display:none}
  .ink-band{display:none}
  .j-step{will-change:auto}
  .off-card .card-node{display:none}
  .g-tile svg{will-change:auto}
  .t-card{will-change:auto}
}
@media (pointer:coarse){
  #cursor-light{display:none}
  .ink-band{display:none}
  .off-card .card-node{display:none}
}