/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --cream:#F7F1E6; --oat:#EFE4D2; --sand:#DCC7A6; --gold:#C9A25E; --gold-2:#E4C27E;
  --saffron:#E2641E; --clay:#B8683F; --clay-deep:#9A5233;
  --sage:#6E7351; --sage-deep:#4E5238; --sage-ink:#2E3123;
  --ink:#1C1813; --espresso:#2A241D; --brown:#574A3B; --muted:#857764;
  --line:rgba(87,74,59,.14);
  --maxw:1240px; --pad:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.22,1,.36,1);
  --serif:"Fraunces",Georgia,serif; --sans:"Mulish",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--cream);color:var(--espresso);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--ink)}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:300;line-height:1.05;letter-spacing:-.015em;font-variation-settings:"opsz" 144}
h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
h3{font-size:1.4rem;font-weight:400}
em{font-style:italic;color:var(--clay-deep);font-weight:300}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;font-weight:700;color:var(--clay-deep);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
section{position:relative;scroll-margin-top:90px}
.sec{padding:clamp(58px,8vw,124px) 0}
.sec-head{max-width:720px;margin-bottom:clamp(44px,5vw,72px)}
.sec-head h2{margin:.45em 0 .5em}
.sec-head p{color:var(--brown);font-size:1.1rem;max-width:58ch}
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head.center p{margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.on-dark{color:var(--cream)}
.on-dark .eyebrow{color:var(--gold-2)}
.on-dark em{color:var(--gold-2)}
.on-dark .sec-head p{color:rgba(247,241,230,.72)}
/* grain overlay */
.grain{position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* the UAE dirham symbol (Central Bank of the UAE, 2025), inline SVG so it renders everywhere.
   Per the CBUAE guideline it stands before the number, at the height of the digits, on their
   baseline, in their colour, with a little space before the first digit. */
.dh{height:.7em;width:auto;vertical-align:0;margin-right:.18em;flex:none}
/* prices */
.ptag{display:inline-flex;align-items:baseline;gap:.4em;align-self:flex-start;margin-top:2px;padding:6px 12px;border-radius:100px;background:var(--oat);color:var(--espresso);font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums}
.ptag i{font-style:normal;font-weight:600;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ptag.reg,.ptag.ask{font-weight:600;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brown);background:transparent;border:1px solid var(--line);padding:6px 12px}
.mprice{margin-top:26px;padding:20px 22px;border-radius:18px;background:var(--oat);border:1px solid var(--line)}
.mprice .eyebrow{margin-bottom:12px}
.prow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--line);font-size:.95rem;color:var(--brown)}
.prow:first-of-type{border-top:0}
.prow b{display:inline-flex;align-items:baseline;gap:.4em;font-size:1.25rem;font-weight:700;color:var(--espresso);font-variant-numeric:tabular-nums;white-space:nowrap}
/* the kit is part of the fee, so it must never look like another line to pay */
.prow.inc{color:var(--muted);font-size:.88rem;padding:8px 0}
.prow.inc span{display:inline-flex;align-items:center;gap:7px}
.prow.inc em{font-style:normal;font-size:.82rem;color:var(--muted);opacity:.85;white-space:nowrap}
.prow.inc em .dh{height:.7em;width:auto}
.tick{width:15px;height:15px;flex:none;color:var(--clay)}
.prow b i{font-style:normal;font-weight:600;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.punit,.pnote{font-size:.85rem;color:var(--muted);margin-top:10px;line-height:1.5}
.qlist{max-width:820px;margin:0 auto;display:grid;gap:12px}
.qitem{border:1px solid var(--line);border-radius:18px;background:var(--cream);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.qitem[open]{border-color:var(--clay);box-shadow:0 24px 50px -34px rgba(87,74,59,.5)}
.qitem summary{list-style:none;cursor:pointer;padding:20px 54px 20px 22px;position:relative;
  font-family:var(--serif);font-size:1.08rem;font-weight:400;color:var(--ink);line-height:1.4}
.qitem summary::-webkit-details-marker{display:none}
.qitem summary::after{content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;
  border-right:1.8px solid var(--clay);border-bottom:1.8px solid var(--clay);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease)}
.qitem[open] summary::after{transform:translateY(-20%) rotate(225deg)}
.qitem summary:focus-visible{outline:2px solid var(--clay);outline-offset:-3px}
.qitem .qa{padding:0 22px 22px;color:var(--muted);font-size:.95rem;line-height:1.65}
.qitem .qa a{color:var(--clay-deep);text-decoration:underline;text-underline-offset:2px}
.qitem .qa ul.gaps{list-style:none;margin:14px 0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.qitem .qa ul.gaps li{background:var(--cream);padding:11px 14px;color:var(--brown)}
.qitem .qa ul.gaps li b{color:var(--ink);font-weight:600}
.foot-practices{margin:34px 0 6px;padding-top:26px;border-top:1px solid rgba(247,241,230,.12)}
.foot-practices h4{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,241,230,.5);font-weight:600;margin-bottom:14px}
.fp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:7px 22px}
.fp-list a{font-size:.84rem;color:rgba(247,241,230,.62);text-decoration:none;transition:color .3s}
.fp-list a:hover{color:var(--gold-2)}
.fullpage{margin:18px 0 4px;font-size:.92rem}
.fullpage a{color:var(--clay-deep);border-bottom:1px solid rgba(154,82,51,.35);text-decoration:none;padding-bottom:2px;transition:border-color .3s}
.fullpage a:hover{border-bottom-color:var(--clay-deep)}
.fullpage span{display:inline-block;transition:transform .3s var(--ease)}
.fullpage a:hover span{transform:translateX(4px)}
.ev-links{display:flex;flex-wrap:wrap;gap:4px 18px}
.structured{margin-top:14px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600}
.pfmt{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:-4px 0 10px}
.regfees{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.rf{display:inline-flex;align-items:baseline;gap:.45em;padding:10px 16px;border-radius:100px;background:rgba(247,241,230,.08);border:1px solid rgba(247,241,230,.16);color:rgba(247,241,230,.8);font-size:.78rem;letter-spacing:.04em}
.rf b{display:inline-flex;align-items:baseline;gap:.35em;color:var(--gold-2);font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
.rf i{font-style:normal;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,241,230,.5)}
.rf.note{background:transparent;border-style:dashed;color:rgba(247,241,230,.6)}
/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:.65em;padding:1em 1.75em;border-radius:100px;font-weight:600;font-size:.95rem;line-height:1;transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .3s,color .3s,border-color .3s;isolation:isolate;overflow:hidden;white-space:nowrap}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn-primary{background:var(--clay);color:#fff;box-shadow:0 18px 40px -18px rgba(154,82,51,.8)}
.btn-primary::before{content:"";position:absolute;inset:0;background:var(--clay-deep);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1;border-radius:inherit}
.btn-primary:hover::before{transform:translateY(0)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 26px 50px -20px rgba(154,82,51,.9)}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 18px 40px -18px rgba(201,162,94,.8)}
.btn-gold::before{content:"";position:absolute;inset:0;background:var(--gold-2);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1;border-radius:inherit}
.btn-gold:hover::before{transform:translateY(0)}
.btn-gold:hover{transform:translateY(-3px)}
.btn-ghost{background:transparent;border:1.5px solid rgba(46,40,32,.3);color:var(--espresso)}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--espresso);background:rgba(46,40,32,.05)}
.on-dark .btn-ghost,.btn-ghost.on-dark{border-color:rgba(247,241,230,.32);color:var(--cream)}
.on-dark .btn-ghost:hover,.btn-ghost.on-dark:hover{border-color:var(--cream);background:rgba(247,241,230,.08)}
.nav-links .cta{white-space:nowrap}
.dir-alt{display:inline-block;margin-left:14px;font-size:.82rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.dir-alt:hover{color:var(--clay-deep)}
.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.9rem;color:var(--clay-deep)}
.link-arrow svg{width:1em;height:1em;transition:transform .35s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}
.link-arrow.link-wa svg{width:1.05em;height:1.05em}
.link-arrow.link-wa:hover svg{transform:scale(1.12)}
/* ============================================================
   LOADER
   ============================================================ */
#loader{position:fixed;inset:0;z-index:20000;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;color:var(--cream);transition:clip-path 1.1s var(--ease)}
#loader.done{clip-path:inset(0 0 100% 0);pointer-events:none}
#loader .lotus{width:120px;height:auto;}
#loader .brand-logo{width:200px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));animation:breathe 3s ease-in-out infinite;filter:drop-shadow(0 20px 40px rgba(226,100,30,.35))}
#loader .word{font-family:var(--serif);font-style:italic;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:300;letter-spacing:.02em}
#loader .hint{font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-2);opacity:.85}
#loader .bar{width:180px;height:1px;background:rgba(247,241,230,.15);overflow:hidden}
#loader .bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .4s ease}
@keyframes breathe{0%,100%{transform:scale(.92);opacity:.8}50%{transform:scale(1.06);opacity:1}}
/* ============================================================
   CURSOR (desktop only)
   ============================================================ */
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:15000;border-radius:50%;transform:translate(-50%,-50%);display:none}
@media(hover:hover) and (pointer:fine){
  .cursor,.cursor-dot{display:block}
  .cursor{width:38px;height:38px;border:1.5px solid rgba(201,162,94,.9);transition:width .35s var(--ease),height .35s var(--ease),background .35s,border-color .35s;mix-blend-mode:difference}
  .cursor-dot{width:5px;height:5px;background:var(--gold)}
  .cursor.hot{width:70px;height:70px;background:rgba(201,162,94,.18);border-color:transparent}
  .cursor.txt{width:12px;height:12px;background:var(--gold);border-color:transparent}
  body.has-cursor a,body.has-cursor button{cursor:none}
  body.has-cursor{cursor:none}
}
/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:18px 0;transition:padding .5s var(--ease),background .5s,backdrop-filter .5s,box-shadow .5s}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav .brand{display:flex;align-items:center;gap:12px;color:var(--cream)}
.nav-left{display:flex;align-items:center;gap:20px;min-width:0}
.nav .brand img{height:96px;width:auto;transition:height .5s var(--ease);filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
.nav-cert{display:flex;align-items:center;gap:14px;padding-left:20px;border-left:1px solid rgba(247,241,230,.18);flex:none}
.nav-cert img{height:52px;width:auto;transition:height .5s var(--ease)}
.nav-cert span{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,241,230,.62);line-height:1.45;white-space:nowrap}
.nav.scrolled .nav-cert img{height:40px}
.nav-links{display:flex;align-items:center;gap:6px;padding:6px;border-radius:100px;background:rgba(28,24,19,.35);border:1px solid rgba(247,241,230,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav-links a{position:relative;font-size:.86rem;font-weight:600;color:rgba(247,241,230,.85);padding:10px 16px;border-radius:100px;transition:color .3s,background .3s}
.nav-links a:hover,.nav-links a.active{color:var(--cream);background:rgba(247,241,230,.1)}
.nav-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--cream);background:rgba(247,241,230,.1);border:1px solid rgba(247,241,230,.22);flex:none;padding:0;transition:background .3s,color .3s,transform .3s var(--ease)}
.nav-icon svg{width:20px;height:20px;flex:none;display:block}
.nav-icon+.nav-icon{margin-left:2px}
.nav-icon:hover{background:var(--gold);color:var(--ink);border-color:transparent;transform:translateY(-2px)}
.nav-links a.cta{background:var(--gold);color:var(--ink);margin-left:6px}
.nav-links a.cta:hover{background:var(--gold-2);color:var(--ink)}
.nav.scrolled{padding:10px 0;background:rgba(28,24,19,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 40px -20px rgba(0,0,0,.6)}
.nav.scrolled .brand img{height:64px}
.nav.light:not(.scrolled) .brand{color:var(--espresso)}
.burger{display:none;width:48px;height:48px;border-radius:50%;border:1px solid rgba(247,241,230,.25);background:rgba(28,24,19,.4);backdrop-filter:blur(10px);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:20px;height:1.5px;background:var(--cream);transition:.4s var(--ease)}
.burger.open i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:900;background:var(--ink);color:var(--cream);display:flex;flex-direction:column;justify-content:flex-start;padding:110px var(--pad) 110px;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);overflow-y:auto;-webkit-overflow-scrolling:touch;justify-content:center}
.menu.open{clip-path:inset(0 0 0 0)}
.menu a{font-family:var(--serif);font-size:clamp(1.9rem,7vw,3.2rem);font-weight:300;padding:.18em 0;border-bottom:1px solid rgba(247,241,230,.1);display:flex;justify-content:space-between;align-items:baseline;opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.menu.open a{opacity:1;transform:none}
.menu a small{font-family:var(--sans);font-size:.7rem;letter-spacing:.3em;color:var(--gold-2)}
.menu .m-foot{margin-top:40px;display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:1200px){.nav-cert img{height:44px}}
@media(max-width:1120px){.nav-links{display:none}.burger{display:flex}.nav .brand img{height:76px}.nav-cert img{height:38px}}
@media(max-width:560px){.nav-cert{padding-left:12px}.nav-cert img{height:30px}.nav .brand img{height:64px}.nav.scrolled .brand img{height:52px}}
/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;background:radial-gradient(ellipse 80% 60% at 70% 30%,#2B221A 0%,#1C1813 55%,#151210 100%);color:var(--cream);display:flex;align-items:center;padding:clamp(150px,16vh,200px) 0 90px;overflow:hidden}
#hero3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-fallback{position:absolute;right:-10%;top:10%;width:60vw;height:60vw;max-width:900px;max-height:900px;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(226,100,30,.35),rgba(201,162,94,.12) 40%,transparent 70%);filter:blur(40px);pointer-events:none}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center}
.hero .eyebrow{color:var(--gold-2)}
.hero h1{font-size:clamp(3rem,7.2vw,6.4rem);margin:.35em 0 .4em;color:var(--cream)}
.hero h1 em{color:var(--gold-2)}
.hero .attribution{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--sand);display:flex;align-items:center;gap:14px;margin-bottom:1.6em}
.hero .attribution::before{content:"";width:40px;height:1px;background:var(--gold)}
.hero .lede{font-size:clamp(1.05rem,1.4vw,1.25rem);color:rgba(247,241,230,.78);max-width:40ch;font-weight:300;line-height:1.7}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.hero-badge{margin-top:44px;display:inline-flex;align-items:center;gap:18px;padding:14px 20px;border-radius:16px;background:rgba(247,241,230,.06);border:1px solid rgba(247,241,230,.12);backdrop-filter:blur(10px)}
.hero-badge img{height:44px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.hero-badge span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,241,230,.6);line-height:1.5;border-left:1px solid rgba(247,241,230,.15);padding-left:18px}
.hero-visual{position:relative;justify-self:end;width:min(100%,460px);margin-right:clamp(0px,5vw,72px)}
.portrait{position:relative;aspect-ratio:3/4;border-radius:999px 999px 34px 34px;overflow:hidden;box-shadow:0 60px 120px -40px rgba(0,0,0,.8),inset 0 0 0 1px rgba(247,241,230,.06)}
.portrait img{width:100%;height:110%;object-fit:cover;object-position:50% 8%;will-change:transform}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(28,24,19,.55));pointer-events:none}
.portrait-ring{position:absolute;inset:-18px;border-radius:999px 999px 46px 46px;border:1px solid rgba(201,162,94,.35);pointer-events:none}
.portrait-ring::before{content:"";position:absolute;top:-6px;left:50%;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 24px var(--gold);transform:translateX(-50%)}
.float-card{position:absolute;padding:14px 18px;border-radius:16px;background:rgba(28,24,19,.72);border:1px solid rgba(247,241,230,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);display:flex;flex-direction:column;gap:2px;min-width:150px}
.float-card b{font-family:var(--serif);font-weight:400;font-size:1.6rem;line-height:1;color:var(--gold-2)}
.float-card small{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,241,230,.6)}
.float-card .stars{color:var(--gold);font-size:.8rem;letter-spacing:2px}
.fc-1{left:-96px;top:40%}
.fc-2{right:-64px;top:60%}
.fc-3{left:-44px;bottom:4%}
.scroll-hint{position:absolute;left:var(--pad);bottom:34px;z-index:3;display:flex;align-items:center;gap:14px;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(247,241,230,.55)}
.scroll-hint i{width:1px;height:56px;background:linear-gradient(180deg,var(--gold),transparent);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--cream);animation:drop 2.2s var(--ease) infinite}
@keyframes drop{to{top:100%}}
.hero-om{position:absolute;right:var(--pad);bottom:24px;z-index:3;font-family:var(--serif);font-size:3rem;color:rgba(201,162,94,.28);line-height:1}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .hero-visual{justify-self:center;width:min(78vw,380px)}
  .fc-1{left:-40px}.fc-2{right:-34px}.fc-3{left:-18px}
  .hero{padding-top:130px}
}
@media(max-width:560px){
  .eyebrow{font-size:.64rem;letter-spacing:.22em}
  .hero-badge{gap:14px;padding:12px 16px}
  .hero-badge span{font-size:.6rem;letter-spacing:.12em;padding-left:14px}
  .hero h1{font-size:clamp(2.6rem,12vw,3.6rem)}
  .fc-1,.fc-2,.fc-3{transform:scale(.85)}
  .fc-1{left:-34px;top:36%}.fc-2{right:-34px;top:58%}.fc-3{left:-24px;bottom:0}
  .hero-om{display:none}
}
/* ============================================================
   MARQUEE STRIP
   ============================================================ */
.strip{background:var(--gold);color:var(--ink);padding:18px 0;overflow:hidden;position:relative;z-index:2}
.marquee{display:flex;width:max-content;animation:marq 60s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee span{font-family:var(--serif);font-style:italic;font-size:1.25rem;font-weight:400;padding:0 28px;display:inline-flex;align-items:center;gap:28px;white-space:nowrap}
.marquee span::after{content:"✦";font-style:normal;font-size:.7rem;opacity:.7}
@keyframes marq{to{transform:translateX(-50%)}}
/* ============================================================
   ABOUT
   ============================================================ */
.about{background:var(--cream)}
.about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(40px,6vw,96px);align-items:center}
.about-media{position:relative}
.about-media .main{aspect-ratio:4/5;border-radius:28px;overflow:hidden;box-shadow:0 50px 100px -40px rgba(87,74,59,.5)}
.about-media .main img{width:100%;height:112%;object-fit:cover;object-position:50% 40%;will-change:transform}
.about-media .inset{position:absolute;right:-34px;bottom:-28px;width:38%;margin:0;background:var(--cream);padding:8px 8px 12px;border-radius:18px;box-shadow:0 30px 60px -24px rgba(0,0,0,.45);transform:rotate(2.5deg)}
.about-media .inset img{width:100%;height:auto;border-radius:12px;display:block}
.about-media .inset figcaption{padding:10px 6px 0;font-size:.72rem;line-height:1.45;color:var(--brown)}
.about-media .inset figcaption b{display:block;font-family:var(--serif);font-weight:500;font-size:.95rem;color:var(--espresso);margin-bottom:2px}
.about-media .stamp{position:absolute;right:-28px;bottom:48px;width:150px;height:150px;border-radius:50%;background:var(--ink);color:var(--cream);display:flex;align-items:center;justify-content:center;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.about-media .stamp svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.about-media .stamp svg text{font-family:var(--sans);font-size:9.5px;letter-spacing:2.6px;text-transform:uppercase;font-weight:700;fill:var(--gold-2)}
.about-media .stamp img{width:56px;height:auto;position:relative}
@keyframes spin{to{transform:rotate(360deg)}}
.about-text h2{margin:.45em 0 .55em}
.about-text p{color:var(--brown);margin-bottom:1.15em;font-size:1.02rem}
.about-text p.big{font-family:var(--serif);font-size:1.35rem;line-height:1.45;color:var(--espresso);font-weight:300}
.isha{margin-top:26px;display:inline-grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:18px 24px;border-radius:18px;background:var(--oat);border:1px solid var(--line)}
.isha .mark{font-family:var(--serif);font-style:italic;font-size:2.2rem;color:var(--clay-deep);line-height:1}
.isha .mark-sg{font-size:1.25rem;line-height:1.05;font-style:normal;font-weight:500;letter-spacing:.01em}
.isha small{display:block;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--clay-deep);margin-bottom:4px}
.isha span{font-size:.85rem;color:var(--brown)}
/* timeline */
.timeline{margin-top:clamp(70px,8vw,110px);position:relative}
.timeline .track{position:absolute;left:0;right:0;top:11px;height:1px;background:var(--line)}
.timeline .track i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--clay),var(--gold));transform-origin:left;transform:scaleX(0)}
.tl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.tl{position:relative;padding-top:38px}
.tl::before{content:"";position:absolute;top:5px;left:0;width:13px;height:13px;border-radius:50%;background:var(--cream);border:2px solid var(--clay);transition:background .4s}
.tl.lit::before{background:var(--clay);box-shadow:0 0 0 6px rgba(184,104,63,.15)}
.tl b{font-family:var(--serif);font-weight:400;font-size:1.5rem;color:var(--clay-deep);display:block;line-height:1;margin-bottom:8px}
.tl span{font-size:.9rem;color:var(--brown);line-height:1.5;display:block}
@media(max-width:980px){.about-grid{grid-template-columns:1fr}.about-media{max-width:460px}.tl-grid{grid-template-columns:repeat(2,1fr)}.timeline .track{display:none}.about-media .stamp{right:-10px}.about-media .inset{right:-10px}}
/* ============================================================
   LINEAGE
   ============================================================ */
.lineage{background:var(--oat);overflow:hidden}
.lineage .wrap{text-align:center}
.lineage h2{margin:.45em auto .4em;max-width:16ch}
.lineage .date{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--clay-deep);margin-bottom:44px}
.frame3d{perspective:1400px;max-width:980px;margin:0 auto}
.frame3d .card{border-radius:22px;overflow:hidden;box-shadow:0 60px 120px -50px rgba(87,74,59,.6);transform-style:preserve-3d;transition:transform .6s var(--ease);background:var(--ink)}
.frame3d .card img{width:100%;height:auto;display:block}
/* The graduation photograph. On a phone it is shown big enough to recognise
   faces and scrolls sideways, instead of being shrunk to fit the screen.
   The visible band and the height are worked out in script, from the picture. */
.gp{overflow:hidden}
.gp-track{display:block}
.gp-track img{width:100%;height:auto;display:block}
@media(max-width:760px){
  .gp{overflow-x:hidden;overflow-y:hidden;height:min(62vh,470px);display:flex;align-items:flex-start;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-y pinch-zoom;cursor:grab}
  .gp::-webkit-scrollbar{display:none}
  .gp.gp-free{overflow-x:auto;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior-x:contain}
  .gp.gp-free.gp-zoomed{overflow-y:auto}
  .gp-zoom{position:absolute;right:10px;bottom:10px;z-index:3;display:none;align-items:center;gap:2px;
    padding:3px;border-radius:999px;background:rgba(30,24,16,.62);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .4s}
  .gp-zoom.on{opacity:1}
  .gp-zoom button{width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#fff;
    font:400 20px/1 var(--sans);cursor:pointer;display:grid;place-items:center}
  .gp-zoom button:disabled{opacity:.35}
  .gp-zoom span{min-width:28px;text-align:center;color:#fff;font:500 12px/1 var(--sans)}
  @media(max-width:760px){.gp-zoom{display:flex}}
  .gp.gp-drag{cursor:grabbing}
  .gp-track{flex:none;height:100%;transform-origin:0 0;will-change:transform}
  /* deliberately more specific than ".frame3d .card img", which sets width:100% */
  .frame3d .card .gp-track img{height:100%;width:auto;max-width:none}
  /* if script never runs, at least show the middle of the photograph rather than its edge */
  .gp:not(.gp-js){justify-content:center}
  .gp-hint{position:absolute;left:12px;bottom:14px;z-index:3;
    display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
    font:500 12px/1 var(--sans);letter-spacing:.04em;color:#fff;
    background:rgba(30,24,16,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    opacity:0;transition:opacity .5s;pointer-events:none;white-space:nowrap}
  .gp-hint.on{opacity:1}
  .gp-hint b{animation:gpnudge 1.5s ease-in-out infinite;font-size:15px}
  @keyframes gpnudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
}
.mapstage{position:relative;width:100%;height:100%;min-height:320px}
.mapstage iframe{width:100%;height:100%;display:block;border:0}
.mapfacade{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;cursor:pointer;border:0;
  background:linear-gradient(150deg,#e9e2d4,#dcd3c1 55%,#cfc6b2);color:var(--ink);font:inherit}
.mf-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(120,104,80,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(120,104,80,.22) 1px,transparent 1px),
    linear-gradient(115deg,transparent 46%,rgba(150,132,102,.5) 46%,rgba(150,132,102,.5) 49%,transparent 49%);
  background-size:44px 44px,44px 44px,100% 100%}
.mf-pin{position:relative;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:var(--accent,#8a6d3b);color:#fff;box-shadow:0 10px 26px -8px rgba(60,45,25,.7)}
.mf-pin svg{width:24px;height:24px}
.mf-label{position:relative;text-align:center;line-height:1.35}
.mf-label b{display:block;font-family:var(--serif);font-size:1.05rem}
.mf-label{font-size:.86rem;color:var(--muted)}
.mf-cta{position:relative;margin-top:4px;padding:9px 18px;border-radius:999px;font-size:.82rem;letter-spacing:.04em;
  background:rgba(30,24,16,.85);color:#fff;transition:transform .3s var(--ease),background .3s}
.mapfacade:hover .mf-cta{transform:translateY(-2px);background:rgba(30,24,16,1)}
.frame3d .card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 40%);opacity:0;transition:opacity .6s;pointer-events:none}
.frame3d .card:hover::after{opacity:1}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:980px;margin:56px auto 0}
.stat{padding:26px 20px;border-radius:20px;background:var(--cream);border:1px solid var(--line)}
.stat b{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,4vw,3rem);color:var(--clay-deep);display:block;line-height:1}
.stat small{display:block;margin-top:8px;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stat.stat-text b{font-size:clamp(1.35rem,2.2vw,1.7rem);font-style:italic;line-height:1.15;padding:.2em 0}
.stat .star{font-size:.55em;vertical-align:.35em;margin-left:.15em;color:var(--gold)}
.lineage .note{max-width:66ch;margin:40px auto 0;color:var(--brown)}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}
/* ============================================================
   PHILOSOPHY (dark sage) + ORBIT
   ============================================================ */
.philo{background:radial-gradient(ellipse 70% 60% at 30% 40%,#3B3F2B,#2E3123 60%,#23261B);color:var(--cream);overflow:hidden}
.philo-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.philo .om{font-family:var(--serif);font-size:4rem;color:var(--gold-2);line-height:1;opacity:.9}
.philo h2{margin:.35em 0 .55em;color:var(--cream)}
.philo h2 em{color:var(--gold-2)}
.philo p{color:rgba(247,241,230,.78);font-size:1.08rem;max-width:52ch}
.philo .duo{display:flex;gap:28px;margin-top:38px}
.philo .duo div{flex:1;padding:22px 0 0;border-top:1px solid rgba(247,241,230,.18)}
.philo .duo b{font-family:var(--serif);font-size:1.7rem;font-weight:300;display:block;line-height:1;margin-bottom:8px}
.philo .duo small{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-2);font-weight:700;display:block;margin-bottom:8px}
.philo .duo span{font-size:.9rem;color:rgba(247,241,230,.7);display:block;line-height:1.5}
.orbit-wrap{position:relative;aspect-ratio:1;max-width:560px;justify-self:center;width:100%}
#orbit{width:100%;height:100%;display:block}
.orbit-wrap .caption{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(247,241,230,.5);white-space:nowrap}
@media(max-width:980px){.philo-grid{grid-template-columns:1fr}.orbit-wrap{max-width:420px}}
/* ============================================================
   BREATH
   ============================================================ */
.breath{background:var(--ink);color:var(--cream);text-align:center;padding:clamp(90px,11vw,140px) 0;overflow:hidden}
.breath h2{margin:.4em auto .3em;max-width:18ch}
.breath p{color:rgba(247,241,230,.65);max-width:46ch;margin:0 auto}
.breath-ring{position:relative;width:min(70vw,320px);height:min(70vw,320px);margin:56px auto 36px;display:flex;align-items:center;justify-content:center}
.breath-ring .r{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(201,162,94,.35);transform:scale(.72);transition:transform 4s cubic-bezier(.45,0,.55,1)}
.breath-ring .r2{inset:10%;border-color:rgba(201,162,94,.55);background:radial-gradient(circle,rgba(226,100,30,.25),rgba(201,162,94,.06) 60%,transparent 75%)}
.breath-ring .r3{inset:22%;border:0;background:radial-gradient(circle,rgba(228,194,126,.9),rgba(226,100,30,.55) 45%,rgba(226,100,30,0) 72%);filter:blur(2px)}
.breath.in .r{transform:scale(1)}
.breath.hold .r{transform:scale(1)}
.breath.out .r{transform:scale(.72);transition-duration:6s}
.breath .phase{position:relative;z-index:2;cursor:default;user-select:none;-webkit-user-select:none;font-family:var(--serif);font-style:italic;font-size:1.7rem;font-weight:300;color:var(--cream);text-shadow:0 2px 30px rgba(0,0,0,.6)}
.breath .count{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-2);margin-top:14px;min-height:1.2em}
/* ============================================================
   PRACTICES
   ============================================================ */
.practices{background:var(--oat)}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px}
.chip{padding:11px 20px;border-radius:100px;border:1px solid var(--line);background:transparent;font-weight:600;font-size:.85rem;color:var(--brown);transition:.35s var(--ease)}
.chip:hover{border-color:var(--clay);color:var(--clay-deep)}
.chip.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.chip small{opacity:.55;margin-left:6px;font-weight:700}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pgrid:not(.all) .pcard.folded{display:none}
.pgrid-more,.sx-more{text-align:center;margin-top:28px}
.about-quotes{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px}
.about-quotes li{position:relative;padding-left:22px;border-left:2px solid var(--gold)}
.about-quotes blockquote{font-family:var(--serif);font-size:1.02rem;line-height:1.5;font-weight:300;color:var(--ink);margin:0 0 4px}
.about-quotes cite{font-style:normal;font-size:.78rem;font-weight:700;color:var(--muted);letter-spacing:.04em}
.about-quotes li.more{border-left:0;padding-left:0}
.about-quotes li.more a{font-size:.85rem;font-weight:700;color:var(--clay-deep);text-decoration:none;border-bottom:1px solid currentColor}
.pcard{position:relative;background:var(--cream);border-radius:24px;overflow:hidden;border:1px solid var(--line);cursor:pointer;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .6s var(--ease),box-shadow .6s var(--ease),opacity .4s;transform-style:preserve-3d}
.pcard:hover{transform:translateY(-8px);box-shadow:0 50px 90px -40px rgba(87,74,59,.55)}
.pcard .pimg{aspect-ratio:4/3;overflow:hidden;position:relative}
.pcard .pimg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pcard:hover .pimg img{transform:scale(1.08)}
.pcard .pimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(28,24,19,.55))}
.pcard .num{position:absolute;top:16px;left:18px;font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--cream);opacity:.9;z-index:2;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.pcard .tag{position:absolute;top:16px;right:16px;z-index:2;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ink);background:rgba(247,241,230,.9);padding:6px 10px;border-radius:100px}
.pcard .pbody{padding:24px 26px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard h3{font-size:1.5rem}
.pcard p{color:var(--brown);font-size:.95rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard .more{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:12px;font-size:.82rem;font-weight:700;color:var(--clay-deep)}
.pcard .more i{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.4s var(--ease)}
.pcard .more i svg{width:15px;height:15px}
.pcard:hover .more i{background:var(--ink);color:var(--cream);border-color:var(--ink);transform:rotate(-45deg)}
.pcard.hide{display:none}
/* a moment of "here you are" when you come back from a practice page */
.pcard.justback{box-shadow:0 0 0 2px var(--gold-2),0 50px 90px -40px rgba(87,74,59,.55)}
@media(max-width:980px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.pgrid{grid-template-columns:1fr;gap:18px}}
/* modal (shared: practices + reviews) */
.modal{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .45s}
.modal.open{opacity:1;pointer-events:auto}
.modal .bg{position:absolute;inset:0;background:rgba(28,24,19,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal .box{position:relative;width:min(1000px,100%);max-height:min(88vh,860px);background:var(--cream);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:.9fr 1.1fr;grid-template-rows:minmax(0,1fr);transform:translateY(30px) scale(.97);transition:transform .6s var(--ease);box-shadow:0 80px 160px -60px rgba(0,0,0,.8)}
.modal.open .box{transform:none}
.modal .box.single{grid-template-columns:1fr;width:min(720px,100%)}
.modal .mimg{position:relative;min-height:260px;background:var(--ink);display:flex;flex-direction:column}
.modal .mphoto{position:relative;flex:1;min-height:200px}
.modal .mphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal .mimg .mvideo{flex:none;margin:0;padding:0;border:0}
.modal .mimg .mvideo .frame{border-radius:0}
.modal .vcap{position:absolute;left:16px;bottom:12px;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);text-shadow:0 2px 10px rgba(0,0,0,.7);pointer-events:none}
.modal .verr{position:absolute;left:0;right:0;bottom:0;margin:0;padding:10px 16px;background:rgba(28,24,19,.85);color:var(--cream);font-size:.8rem}
.modal .verr a{color:var(--gold-2);text-decoration:underline}
.modal .mphoto .num{position:absolute;left:24px;top:22px;font-family:var(--serif);font-style:italic;color:var(--cream);font-size:1.1rem}
.modal .mbody{padding:clamp(28px,4vw,52px) clamp(28px,4vw,52px) 72px;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--sand) transparent}
.modal .mbody::-webkit-scrollbar{width:8px}
.modal .mbody::-webkit-scrollbar-thumb{background:var(--sand);border-radius:8px}
.modal .mimg{min-height:0}
.modal .scrollhint{position:absolute;right:0;bottom:0;width:55%;height:84px;pointer-events:none;background:linear-gradient(180deg,rgba(247,241,230,0),var(--cream) 70%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--clay-deep);gap:8px;transition:opacity .4s}
.modal .scrollhint svg{width:14px;height:14px;animation:nudge 1.6s ease-in-out infinite}
.modal .box.at-end .scrollhint,.modal .box.single .scrollhint,.modal .box.no-scroll .scrollhint{opacity:0}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.modal .mbody .eyebrow{margin-bottom:14px}
.modal .mbody h3{font-size:clamp(1.9rem,3vw,2.6rem);margin-bottom:.5em}
.modal .mbody p{color:var(--brown);margin-bottom:1em}
.modal .mbody ul{margin:0 0 1.2em 1.1em;color:var(--brown);display:grid;gap:.4em;font-size:.95rem}
.modal .mbody li::marker{color:var(--clay)}
.modal .mbody .meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.modal .mbody .meta span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:7px 12px;border-radius:100px;background:var(--oat);color:var(--brown)}
.modal .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.modal .mvideo{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.modal .mvideo .eyebrow{margin-bottom:14px}
.modal .mvideo .frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;cursor:pointer}
.modal .mvideo .frame img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform 1s var(--ease),opacity .5s}
.modal .mvideo .frame:hover img{transform:scale(1.05);opacity:1}
.modal .mvideo .frame iframe,.modal .mvideo .frame .ytmount{position:absolute;inset:0;width:100%;height:100%;border:0}
.modal .mvideo .play.again::after{content:"Watch again";position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);white-space:nowrap;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.modal .mvideo .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(247,241,230,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:.4s var(--ease)}
.modal .mvideo .play svg{width:22px;height:22px;margin-left:3px}
.modal .mvideo .frame:hover .play{background:var(--gold);transform:translate(-50%,-50%) scale(1.08)}
.modal .close{position:absolute;top:16px;right:16px;z-index:3;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--cream);display:flex;align-items:center;justify-content:center;transition:transform .4s var(--ease),background .3s}
.modal .close:hover{transform:rotate(90deg);background:var(--clay)}
.modal .close svg{width:18px;height:18px}
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:var(--cream);padding:14px 22px;border-radius:100px;font-size:.9rem;font-weight:600;opacity:0;pointer-events:none;transition:.4s var(--ease);z-index:13000;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
#toast.on{opacity:1;transform:translate(-50%,0)}
.modal blockquote{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.45;font-weight:300;color:var(--espresso);margin:14px 0 22px}
.modal cite{font-style:normal;font-weight:700;display:block}
.modal cite small{display:block;font-weight:400;color:var(--muted);font-size:.8rem;margin-top:2px}
@media(max-width:760px){.modal .box{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);max-height:92vh}.modal .scrollhint{width:100%}.modal .mimg{min-height:0}.modal .mimg:not(.has-video) .mphoto{aspect-ratio:16/9;min-height:0}.modal .mimg.has-video .mphoto{display:none}}
/* ============================================================
   SCHEDULE
   ============================================================ */
.schedule{background:var(--cream)}
.sch-top{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-bottom:clamp(34px,4vw,54px)}
.sch-months{display:flex;gap:6px;padding:6px;border-radius:100px;background:var(--oat);border:1px solid var(--line)}
.sch-months button{padding:10px 18px;border-radius:100px;font-weight:600;font-size:.86rem;color:var(--brown);transition:.3s}
.sch-months button.active{background:var(--ink);color:var(--cream)}
.sch-months button:not(.active):hover{background:var(--cream)}
.sch-layout{display:grid;grid-template-columns:380px 1fr;gap:clamp(24px,3.5vw,54px);align-items:start}
.sch-side{position:sticky;top:120px}
.cal{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 40px 80px -50px rgba(87,74,59,.4)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-head .mlabel{font-family:var(--serif);font-size:1.35rem}
.cal-nav{display:flex;gap:8px}
.cal-nav button{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--brown);transition:.3s}
.cal-nav button:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.dow span{text-align:center;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:4px 0}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.day{aspect-ratio:1;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:.88rem;font-weight:600;color:var(--brown);position:relative;border:1.5px solid transparent;transition:.25s}
.day.blank{visibility:hidden}
.day.past{color:rgba(87,74,59,.35)}
.day.today{border-color:var(--sand)}
.day.has{cursor:pointer;background:var(--oat)}
.day.has:hover{background:var(--sand)}
.day.sel{background:var(--ink);color:#fff}
.day .pips{position:absolute;bottom:6px;display:flex;gap:3px}
.day .pip{width:5px;height:5px;border-radius:50%;display:block}
.pip-workshop,.lg-workshop{background:var(--clay)}
.pip-course,.lg-course{background:var(--gold)}
.pip-review,.lg-review{background:var(--espresso)}
.day.sel .pip{background:var(--cream)}
.cal-legend{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.72rem;color:var(--muted)}
.cal-legend span{display:inline-flex;align-items:center;gap:6px}
.cal-legend .lg{width:7px;height:7px;border-radius:50%;display:inline-block}
.sch-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sch-filters .chip{padding:9px 16px;font-size:.8rem}
.agenda-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.agenda-head h3{font-size:1.7rem}
.cal-hint{margin-top:14px;font-size:.78rem;color:var(--muted);line-height:1.5}
[hidden]{display:none!important}
.dayfilter{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:-6px 0 18px;padding:12px 16px;border-radius:16px;background:var(--ink);color:var(--cream)}
.dayfilter b{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2)}
.dayfilter em{font-style:normal;font-family:var(--serif);font-size:1.05rem}
.dayfilter .chip{background:var(--cream);color:var(--ink);border-color:transparent;font-weight:700}
@media(hover:hover){.dayfilter .chip:hover{background:var(--gold)}}
@media(hover:none){.chip:hover{border-color:var(--line);color:var(--brown)}.sch-months button:not(.active):hover{background:transparent}.rtag:hover{background:var(--oat);color:var(--clay-deep)}}
.day.sel{outline:3px solid var(--gold);outline-offset:1px}
.resetlink.on{display:inline-flex}
.sch-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sx{position:relative;display:grid;grid-template-rows:auto 1fr auto;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 22px 20px;transition:transform .5s var(--ease),box-shadow .5s var(--ease);overflow:hidden}
.sx::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--clay)}
.sx.k-Course::before{background:var(--gold)}
.sx.k-Review::before{background:var(--espresso)}
.sx:hover{transform:translateY(-4px);box-shadow:0 34px 60px -40px rgba(87,74,59,.5)}
.sx-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.sx-when{display:flex;align-items:baseline;gap:8px}
.sx-when b{font-family:var(--serif);font-weight:400;font-size:1.9rem;line-height:1;color:var(--clay-deep)}
.sx-when span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.ev-pill{display:inline-block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:20px;white-space:nowrap}
.pill-Workshop{background:rgba(184,104,63,.14);color:var(--clay-deep)}
.pill-Course{background:rgba(201,162,94,.28);color:#7a5a1f}
.pill-Review{background:rgba(46,40,32,.1);color:var(--espresso)}
.sx h4{font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.2;margin:4px 0 10px}
.sx-sessions{list-style:none;display:grid;gap:5px;margin:0 0 12px}
.sx-sessions li{display:grid;grid-template-columns:78px 1fr;gap:10px;font-size:.84rem;color:var(--brown);font-variant-numeric:tabular-nums}
.sx-sessions li b{font-weight:700;color:var(--espresso)}
.sx-sessions li i{font-style:normal;color:var(--muted)}
.sx-note{font-size:.84rem;color:var(--muted);margin-bottom:12px}
.sx-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.sx-cap{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--sage-deep)}
.sx-cap.sx-full{color:#B3402E}
.reserve{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-weight:600;font-size:.82rem;padding:10px 16px;border-radius:100px;transition:.3s;white-space:nowrap}
.reserve:hover{background:var(--clay)}
.ev-link{font-size:.78rem;font-weight:700;color:var(--clay-deep);background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.ev-link:hover{text-decoration:underline}
.sx-count{grid-column:1/-1;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-top:8px}
.empty{grid-column:1/-1;background:#fff;border:1px dashed var(--sand);border-radius:22px;padding:48px 28px;text-align:center}
.empty svg{color:var(--sand);margin:0 auto 14px}
.empty b{font-family:var(--serif);font-weight:400;font-size:1.4rem;display:block;margin-bottom:6px}
.empty p{color:var(--muted);margin-bottom:20px}
/* weekly timetable */
.weekly{margin-top:clamp(50px,6vw,80px);background:var(--ink);border-radius:30px;padding:clamp(28px,4vw,48px);position:relative;overflow:hidden}
.weekly::before{content:"";position:absolute;right:-20%;top:-60%;width:60%;height:200%;background:radial-gradient(ellipse,rgba(201,162,94,.14),transparent 60%);pointer-events:none}
.weekly-head{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:end;margin-bottom:28px;position:relative}
.weekly-head h3{font-size:clamp(1.7rem,3vw,2.4rem);margin:.35em 0 0;color:var(--cream)}
.weekly-head p{color:rgba(247,241,230,.7);font-size:.95rem;max-width:52ch}
.tt{display:grid;grid-template-columns:70px repeat(7,1fr);gap:6px;position:relative}
.tt .th{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold-2);padding:6px 4px;text-align:center}
.tt .tm{font-size:.74rem;color:rgba(247,241,230,.6);padding:10px 4px 0;font-variant-numeric:tabular-nums}
.tt .tm,.tt .th:first-child{position:sticky;left:0;z-index:2;background:var(--ink)}
.tt .td{min-height:54px;border-radius:12px;background:rgba(247,241,230,.04);border:1px solid rgba(247,241,230,.06)}
.tt .td.cls{background:rgba(201,162,94,.16);border-color:rgba(201,162,94,.35);padding:8px 10px;font-size:.76rem;color:var(--cream);line-height:1.35}
.tt .td.cls small{display:block;color:rgba(247,241,230,.55);font-size:.68rem;margin-top:2px}
.tt .td.prenatal{background:rgba(184,104,63,.22);border-color:rgba(184,104,63,.45)}
.tt .td.open{background:transparent;border:1px dashed rgba(247,241,230,.13);color:rgba(247,241,230,.45);
  display:flex;align-items:center;justify-content:center}
.td.open span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.td.open{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px}
.td.ask{text-decoration:none;color:inherit;transition:background .25s var(--ease),border-color .25s var(--ease)}
.td.ask b{font-weight:500;font-size:.58rem;line-height:1.2;display:flex;align-items:center;gap:4px;margin-top:5px;opacity:.9}
.td.ask b::before{content:"";width:11px;height:11px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.5 3.5A11.8 11.8 0 0012 0C5.5 0 .2 5.3.2 11.8c0 2.1.5 4.1 1.6 5.9L0 24l6.4-1.7c1.7 1 3.6 1.4 5.6 1.4 6.5 0 11.8-5.3 11.8-11.8 0-3.2-1.2-6.1-3.3-8.4zM12 21.8c-1.8 0-3.5-.5-5-1.4l-.4-.2-3.7 1 1-3.6-.2-.4a9.8 9.8 0 01-1.5-5.4c0-5.4 4.4-9.8 9.8-9.8 2.6 0 5.1 1 7 2.9a9.8 9.8 0 012.9 7c0 5.4-4.4 9.9-9.9 9.9zm5.4-7.4c-.3-.1-1.8-.9-2-1s-.5-.1-.7.1c-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.4-.5c.2-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-1-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.5-.3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.5 3.5A11.8 11.8 0 0012 0C5.5 0 .2 5.3.2 11.8c0 2.1.5 4.1 1.6 5.9L0 24l6.4-1.7c1.7 1 3.6 1.4 5.6 1.4 6.5 0 11.8-5.3 11.8-11.8 0-3.2-1.2-6.1-3.3-8.4zM12 21.8c-1.8 0-3.5-.5-5-1.4l-.4-.2-3.7 1 1-3.6-.2-.4a9.8 9.8 0 01-1.5-5.4c0-5.4 4.4-9.8 9.8-9.8 2.6 0 5.1 1 7 2.9a9.8 9.8 0 012.9 7c0 5.4-4.4 9.9-9.9 9.9zm5.4-7.4c-.3-.1-1.8-.9-2-1s-.5-.1-.7.1c-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.4-.5c.2-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-1-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.5-.3z'/%3E%3C/svg%3E") center/contain no-repeat}
.td.cls.ask{display:flex;flex-direction:column}
.td.cls.ask b{color:var(--gold-2);margin-top:auto}
.td.cls.ask:hover{background:rgba(201,162,94,.26);border-color:rgba(201,162,94,.6)}
.td.open.ask{background:rgba(37,211,102,.08);border-color:rgba(37,211,102,.32)}
.td.open.ask span{color:#5FD98C}
.td.open.ask b{color:#F7F1E6;text-transform:none;letter-spacing:0;justify-content:center;margin-top:2px}
.td.open.ask:hover{background:rgba(37,211,102,.18);border-color:rgba(37,211,102,.55)}
.td.cls.open.ask{background:rgba(37,211,102,.10);border-color:rgba(37,211,102,.4)}
.td.cls.open.ask b{color:#5FD98C}
.td.cls.open.ask:hover{background:rgba(37,211,102,.2);border-color:rgba(37,211,102,.6)}
@media(max-width:700px){.td.ask b{display:none}}
.ttnote{margin-top:16px;font-size:.84rem;line-height:1.6;color:var(--muted);text-align:center}
.ttnote b{color:rgba(247,241,230,.72);font-weight:500}
.tt .td.busy{background:repeating-linear-gradient(135deg,rgba(247,241,230,.05) 0 6px,transparent 6px 12px);color:rgba(247,241,230,.35);font-size:.7rem;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px}
@media(max-width:1100px){.sch-layout{grid-template-columns:320px 1fr}.sch-cards{grid-template-columns:1fr}}
@media(max-width:980px){.sch-top{grid-template-columns:1fr}.sch-layout{grid-template-columns:1fr}.sch-side{position:static}.cal{max-width:480px}.sch-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.weekly-head{grid-template-columns:1fr}}
@media(max-width:720px){.sch-cards{grid-template-columns:1fr}.tt{grid-template-columns:56px repeat(7,1fr);gap:4px}.tt .td.cls{font-size:.62rem;padding:6px}.tt .td.cls small{display:none}.tt .th{font-size:.56rem;letter-spacing:.08em}}
@media(max-width:520px){.sch-months{flex-wrap:wrap;border-radius:20px}.tt{overflow-x:auto;grid-template-columns:50px repeat(7,minmax(64px,1fr))}}
/* ============================================================
   FORMATS
   ============================================================ */
.formats{background:var(--ink);color:var(--cream);overflow:hidden}
.formats::before{content:"";position:absolute;left:-20%;top:-40%;width:70%;height:120%;background:radial-gradient(ellipse,rgba(184,104,63,.18),transparent 60%);pointer-events:none}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fcard{position:relative;padding:36px 30px;border-radius:24px;background:rgba(247,241,230,.04);border:1px solid rgba(247,241,230,.1);transition:transform .6s var(--ease),background .5s,border-color .5s;overflow:hidden;transform-style:preserve-3d}
.fcard::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,rgba(201,162,94,.5),transparent 40%,transparent 60%,rgba(184,104,63,.4));opacity:0;transition:opacity .6s;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;pointer-events:none}
.fcard:hover{transform:translateY(-8px);background:rgba(247,241,230,.07)}
.fcard:hover::before{opacity:1}
.fcard .icn{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(201,162,94,.12);color:var(--gold-2);margin-bottom:26px;border:1px solid rgba(201,162,94,.25)}
.fcard .icn svg{width:26px;height:26px}
.fcard .idx{position:absolute;top:26px;right:26px;font-family:var(--serif);font-style:italic;color:rgba(247,241,230,.3)}
.fcard h3{font-size:1.5rem;margin-bottom:.5em;color:var(--cream)}
.fcard p{color:rgba(247,241,230,.68);font-size:.93rem;margin-bottom:1.4em;min-height:4.5em}
.fcard .link-arrow{color:var(--gold-2)}
@media(max-width:980px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
/* ============================================================
   VIDEOS
   ============================================================ */
.videos{background:linear-gradient(180deg,var(--ink),var(--espresso));color:var(--cream)}
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:26px}
.vcard{border-radius:22px;overflow:hidden;background:rgba(247,241,230,.04);border:1px solid rgba(247,241,230,.1)}
.vcard .frame{position:relative;aspect-ratio:16/9;background:#000;cursor:pointer;overflow:hidden}
.vcard .frame img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),opacity .6s;opacity:.85}
.vcard .frame:hover img{transform:scale(1.05);opacity:1}
.vcard .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vcard .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;background:rgba(247,241,230,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:.5s var(--ease);box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.vcard .play::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(247,241,230,.5);animation:pulse 2.4s ease-out infinite}
.vcard .frame:hover .play{transform:translate(-50%,-50%) scale(1.1);background:var(--gold)}
.vcard .play svg{width:26px;height:26px;margin-left:4px}
@keyframes pulse{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.vcard .vmeta{padding:22px 24px}
.vcard h3{font-size:1.25rem;color:var(--cream);margin-bottom:.35em}
.vcard p{font-size:.88rem;color:rgba(247,241,230,.6)}
.videos .note{margin-top:34px;font-size:.82rem;color:rgba(247,241,230,.45);text-align:center}
/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{background:var(--oat);overflow:hidden;padding-bottom:clamp(90px,11vw,150px)}
.rev-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.gscore{display:flex;align-items:center;gap:22px;margin-top:22px}
.gscore .num{font-family:var(--serif);font-size:clamp(4rem,8vw,6.5rem);line-height:.9;color:var(--clay-deep);font-weight:300}
.gscore .stars{color:var(--gold);letter-spacing:3px;font-size:1.3rem}
.gscore .count{color:var(--brown);font-size:.95rem;margin-top:4px}
.rev-head p{color:var(--brown);font-size:1.05rem;max-width:44ch}
.rev-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.rows{display:flex;flex-direction:column;gap:22px;position:relative;overflow:hidden}
.rows::before,.rows::after{content:"";position:absolute;top:0;bottom:0;width:12vw;z-index:2;pointer-events:none}
.rows::before{left:0;background:linear-gradient(90deg,var(--oat),transparent)}
.rows::after{right:0;background:linear-gradient(270deg,var(--oat),transparent)}
.row{display:flex;width:max-content;gap:22px;will-change:transform}
.rcard{background:var(--cream);border:1px solid var(--line);border-radius:22px;padding:28px;cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease);display:flex;flex-direction:column}
.rcard:hover{transform:translateY(-6px);box-shadow:0 40px 80px -40px rgba(87,74,59,.5)}
.row .rcard{width:380px;flex:none}
.rcard .stars{color:var(--gold);letter-spacing:2px;font-size:.8rem;margin-bottom:14px}
.rcard blockquote{font-family:var(--serif);font-size:1.12rem;line-height:1.45;font-weight:300;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:18px;flex:1}
.rcard cite{font-style:normal;font-weight:700;font-size:.88rem;display:flex;align-items:center;gap:12px}
.rcard cite .av{width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--gold-2);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:400;font-size:1rem;flex:none}
.rcard cite small{display:block;font-weight:400;color:var(--muted);font-size:.76rem;margin-top:2px}
.vtest{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,5vw,70px);align-items:center;margin:0 0 clamp(50px,6vw,80px);padding:clamp(28px,4vw,48px);border-radius:28px;background:var(--cream);border:1px solid var(--line)}
.vt-head h3{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:.4em 0 .5em}
.vt-head p{color:var(--brown);max-width:40ch}
.vt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.vt{position:relative;margin:0;border-radius:20px;overflow:hidden;background:var(--ink);aspect-ratio:9/16;box-shadow:0 30px 60px -30px rgba(87,74,59,.5)}
.vt video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.vt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;background:rgba(247,241,230,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:.4s var(--ease);box-shadow:0 20px 40px -16px rgba(0,0,0,.7)}
.vt-play svg{width:24px;height:24px;margin-left:3px}
.vt:hover .vt-play{background:var(--gold);transform:translate(-50%,-50%) scale(1.08)}
.vt.playing .vt-play{opacity:0;pointer-events:none}
.vt figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;background:linear-gradient(180deg,transparent,rgba(28,24,19,.85));color:var(--cream);font-size:.72rem;letter-spacing:.06em;pointer-events:none;transition:opacity .4s}
.vt figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:1.05rem;letter-spacing:0;margin-bottom:2px}
.vt.playing figcaption{opacity:0}
@media(max-width:980px){.vtest{grid-template-columns:1fr}.vt-grid{max-width:520px}}
@media(max-width:480px){.vt-grid{grid-template-columns:1fr;max-width:300px}}
.rtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.rtag{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:100px;text-decoration:none;display:inline-block;background:var(--oat);color:var(--clay-deep);border:1px solid transparent;transition:.3s}
.rtag:hover{background:var(--ink);color:var(--cream)}
.rows.static{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);overflow:visible}
.rows.static::before,.rows.static::after{display:none}
.rows.static .rcard{width:auto}
.rows.static .rcard blockquote{-webkit-line-clamp:8}
.rev-filter{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:-20px 0 26px;padding:14px 20px;border-radius:16px;background:var(--cream);border:1px solid var(--line);font-size:.95rem;color:var(--brown)}
.mreviews{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.mreviews .eyebrow{margin-bottom:14px}
.mrev-list{display:grid;gap:12px}
.mrev-list .rcard{width:auto;padding:18px 20px;cursor:pointer}
.mrev-list .rcard blockquote{font-size:1rem;-webkit-line-clamp:3;margin-bottom:12px}
.mrev-list .rcard .rtags{display:none}
.mreviews .link-arrow{background:none;border:0;padding:0;cursor:pointer}
@media(max-width:980px){.rev-head{grid-template-columns:1fr}.row .rcard{width:320px}}
/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:linear-gradient(160deg,#F3EADB,#E6D6BC);overflow:hidden}
.contact::before{content:"";position:absolute;right:-10%;top:-30%;width:60%;height:120%;background:radial-gradient(ellipse,rgba(226,100,30,.14),transparent 60%);pointer-events:none}
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;position:relative}
.c-card,.m-card{background:var(--cream);border-radius:30px;box-shadow:0 60px 120px -60px rgba(87,74,59,.6);overflow:hidden}
.c-card{padding:clamp(34px,4.5vw,60px);display:flex;flex-direction:column;justify-content:center}
.c-card h2{margin:.4em 0 .5em}
.c-card p{color:var(--brown);margin-bottom:1.6em;max-width:44ch}
.c-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.addr{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;color:var(--brown);font-size:.95rem;line-height:1.55;padding-top:26px;border-top:1px solid var(--line)}
.addr svg{width:22px;height:22px;color:var(--clay-deep);margin-top:3px}
.addr strong{display:block;color:var(--espresso)}
.m-card{min-height:420px;display:flex;flex-direction:column;position:relative}
.m-card iframe{display:block;width:100%;border:0;flex:1;min-height:380px;filter:saturate(.85) contrast(1.05)}
.m-card .dir{padding:18px 20px;text-align:center;background:var(--cream)}
@media(max-width:980px){.c-grid{grid-template-columns:1fr}}
/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink);color:var(--cream);padding:clamp(80px,9vw,120px) 0 30px;overflow:hidden;position:relative}
footer .word{display:flex;justify-content:center}
footer .word img{width:min(58vw,420px);height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
.f-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;margin-top:60px;padding-top:50px;border-top:1px solid rgba(247,241,230,.1)}
.f-grid p{color:rgba(247,241,230,.55);font-size:.92rem;max-width:36ch;margin-top:14px}
.f-grid h5{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-2);margin-bottom:18px;font-weight:700}
.f-grid ul{list-style:none;display:grid;gap:10px}
.f-grid li a{color:rgba(247,241,230,.75);font-size:.95rem;transition:color .3s;display:inline-flex;gap:8px;align-items:center}
.f-grid li a:hover{color:var(--gold-2)}
.f-grid .badge{margin-top:26px;height:56px;width:auto}
.copy{margin-top:56px;padding-top:22px;border-top:1px solid rgba(247,241,230,.08);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.76rem;color:rgba(247,241,230,.4)}
@media(max-width:760px){.f-grid{grid-template-columns:1fr}}
/* mobile bar */
.mobile-bar{display:none}
@media(max-width:760px){
  body{padding-bottom:78px}
  .mobile-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:1500;background:rgba(28,24,19,.9);backdrop-filter:blur(16px);padding:12px 14px;gap:10px;border-top:1px solid rgba(247,241,230,.1)}
  .mobile-bar .btn{flex:1;justify-content:center;padding:.95em 1em;font-size:.9rem}
}
/* reveal defaults (JS animates) */
[data-reveal],[data-reveal-group]>*{opacity:0}
.no-js [data-reveal],.no-js [data-reveal-group]>*{opacity:1}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.w>span{display:inline-block;will-change:transform}
/* A phone held sideways: barely 375px of height, so the hero has to give ground and
   the graduation photograph needs more of what is left. */
@media(orientation:landscape) and (max-height:560px){
  .hero{padding-top:92px;padding-bottom:44px;min-height:0}
  .hero h1{font-size:clamp(1.6rem,4.6vw,2.5rem)}
  .hero .lede{font-size:.9rem}
  .hero .scrollcue,.hero .cue{display:none}
  .sec{padding-top:52px;padding-bottom:52px}
  .modal .box{max-height:96vh}
}
@media(orientation:landscape) and (max-height:560px) and (max-width:760px){
  .gp{height:min(80vh,300px)}
  .gp-hint{bottom:8px;padding:5px 11px;font-size:11px}
  .gp-zoom{bottom:8px}
}
/* A phone on its side is wide, not narrow: the max-width:980px rule stacks the hero
   into one column, which pushed it to nearly 900px of content inside a 375px window.
   With the width available, the two columns come back and the portrait is capped so
   the whole hero fits the screen it is being read on. */
@media(orientation:landscape) and (max-height:560px) and (min-width:660px){
  .hero{padding-top:88px;padding-bottom:30px}
  /* the certification badge is already in the fixed bar on this screen; repeating it
     here costs the height the "Find a class" button needs */
  .hero-badge{display:none}
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:clamp(20px,4vw,46px);align-items:center}
  .hero-visual{justify-self:end;width:min(34vw,215px);margin-right:0}
  .hero h1{margin:.2em 0 .3em}
  .hero .attribution{margin-bottom:.9em;font-size:.95rem}
  .hero .lede{line-height:1.55}
  .hero-cta{margin-top:20px}
  .hero-badge{margin-top:18px;padding:9px 13px;gap:12px}
  .hero-badge img{height:30px}
  .hero-badge span{font-size:.58rem;letter-spacing:.12em;padding-left:12px}
  /* three floating cards collide against a portrait this short: keep the two that
     carry the strongest proof and give them the full height to sit in */
  .fc-1,.fc-3{transform:scale(.72);transform-origin:left center}
  .fc-1{left:-26px;top:4%}
  .fc-3{left:-26px;bottom:4%;transform-origin:left center}
  .fc-2{display:none}
}
/* a small phone sideways (still under 660px): keep one column, but stop the portrait
   from taking the whole screen before a word has been read */
@media(orientation:landscape) and (max-height:560px) and (max-width:659px){
  .hero-grid{gap:26px}
  .hero-visual{width:min(46vw,200px)}
  .hero-badge{margin-top:18px}
}
/* the studio filmstrip and its lightbox on a short screen */
@media(orientation:landscape) and (max-height:560px){
  .filmstrip-wrap{--fh:min(58vh,240px)}
  .filmstrip{padding-top:30px;padding-bottom:26px}
  .lb figure{padding:14px 64px 12px}
  .lb button{width:38px;height:38px;font-size:1.4rem}
  .lb-x{top:10px;right:10px}
  .lb figcaption{font-size:.8rem}
}
@media(max-width:760px){h1,h2,h3,.serif{font-variation-settings:"opsz" 72;font-weight:400}.hero h1 em,h2 em{font-weight:400}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  [data-reveal],[data-reveal-group]>*{opacity:1}
}

/* ---------- studio: a real film strip of the room, opened in a lightbox ----------
   The class is "filmstrip", not "strip": the gold marquee band above already owns
   .strip. Every frame is the same height, as on real film; the width follows each
   picture's own proportions (--ar), so nothing is ever cropped. */
.studio{padding-bottom:clamp(40px,5vw,72px)}
.studio .sec-head{margin-bottom:clamp(24px,3vw,40px)}
.filmstrip-wrap{--fh:clamp(186px,25vw,340px);--pad:5px;
  position:relative;background:#141110;overflow:hidden}
/* the sprocket holes, tiled along the top and bottom edges */
.filmstrip-wrap::before,.filmstrip-wrap::after{
  content:"";position:absolute;left:0;right:0;height:24px;z-index:3;pointer-events:none;
  background-image:radial-gradient(circle at 9px 50%, #F7F1E6 0 5px, transparent 5.5px);
  background-size:28px 24px;background-repeat:repeat-x;opacity:.9}
.filmstrip-wrap::before{top:0}
.filmstrip-wrap::after{bottom:0}
.filmstrip{list-style:none;display:flex;gap:10px;overflow-x:auto;margin:0;
  padding:34px 14px 30px;scrollbar-width:none;cursor:grab;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.filmstrip::-webkit-scrollbar{display:none}
.filmstrip.dragging{cursor:grabbing}
.filmstrip li{flex:0 0 auto}
.filmstrip figure{margin:0;width:calc((var(--fh) - var(--pad)*2) * var(--ar,1.3333) + var(--pad)*2)}
.filmstrip button{display:block;width:100%;height:var(--fh);padding:var(--pad);border:0;
  background:#241f1b;border-radius:3px;overflow:hidden;cursor:inherit;
  box-shadow:inset 0 0 0 1px rgba(247,241,230,.09)}
.filmstrip img{display:block;width:100%;height:100%;object-fit:cover;border-radius:1px;
  transition:transform .8s var(--ease);
  -webkit-user-drag:none;user-drag:none;user-select:none;-webkit-user-select:none}
.filmstrip button:hover img{transform:scale(1.04)}
.filmstrip button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.filmstrip figcaption{margin-top:9px;font-size:.78rem;line-height:1.4;
  color:rgba(247,241,230,.6);max-width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the little bar under the film: which way it runs, and how to stop it */
.filmstrip-hint{display:flex;align-items:center;gap:10px;justify-content:flex-end;
  margin:0;padding:0 16px 14px;background:#141110;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,241,230,.42)}
.filmstrip-hint .fs-note{margin-right:auto;padding-left:2px}
.filmstrip-hint button{width:30px;height:30px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(247,241,230,.2);background:rgba(247,241,230,.06);
  color:rgba(247,241,230,.7);display:grid;place-items:center;transition:.25s;padding:0}
.filmstrip-hint button svg{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.filmstrip-hint button:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.filmstrip-hint button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
@media(max-width:640px){.filmstrip-hint .fs-note{display:none}
  .filmstrip-hint{justify-content:flex-end;padding-bottom:12px}}
.lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;inset:0;color:var(--cream)}
.lb::backdrop{background:rgba(28,24,19,.94);backdrop-filter:blur(10px)}
.lb figure{margin:0;position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:center;padding:64px 80px 28px;gap:14px}
.lb .lb-stage{width:100%;height:100%;min-height:0;display:grid;place-items:center;overflow:hidden;cursor:zoom-in}
.lb img{max-width:100%;max-height:100%;min-height:0;object-fit:contain;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.5);
  transition:transform .35s var(--ease);transform-origin:center center;
  -webkit-user-drag:none;user-drag:none;user-select:none;-webkit-user-select:none}
/* zoomed: the picture is scaled about the point that was clicked and dragged around */
.lb.zoomed .lb-stage{cursor:grab}
.lb.zoomed.panning .lb-stage{cursor:grabbing}
.lb.zoomed img{transition:none;border-radius:2px}
/* This used to be a line of text reading "click the photo to zoom", sitting just above
   the caption. On a phone it landed on top of the caption and hid it, and it told you
   about a thing instead of being the thing. A magnifier in the free corner does the job
   in less room: it says zoom, and it zooms. */
.lb-zoom{top:18px;left:18px}
.lb-zoom svg{width:21px;height:21px}
.lb-zoom .lb-minus{display:none}
.lb.zoomed .lb-zoom .lb-plus{display:none}
.lb.zoomed .lb-zoom .lb-minus{display:block}
.lb.zoomed .lb-zoom{background:var(--saffron);border-color:var(--saffron);color:var(--ink)}
.lb figcaption{color:var(--sand);font-size:.9rem;text-align:center}
.lb button{position:absolute;z-index:1;border:1px solid rgba(247,241,230,.25);background:rgba(247,241,230,.08);color:var(--cream);width:46px;height:46px;border-radius:50%;font-size:1.7rem;line-height:1;display:grid;place-items:center;cursor:pointer;transition:.3s;padding:0 0 3px}
.lb button:hover{background:var(--saffron);border-color:var(--saffron)}
.lb.solo .lb-prev,.lb.solo .lb-next{display:none}
.lb-x{top:18px;right:18px}.lb-prev{left:16px;top:50%;transform:translateY(-50%)}.lb-next{right:16px;top:50%;transform:translateY(-50%)}
@media(max-width:640px){.lb figure{padding:60px 12px 74px}.lb-prev,.lb-next{top:auto;bottom:16px;transform:none}.lb-prev{left:16px}.lb-next{right:16px}
  .lb-zoom{top:14px;left:14px;width:40px;height:40px}.lb-zoom svg{width:19px;height:19px}
  .lb figcaption{font-size:.82rem;line-height:1.45;padding:0 4px}}

/* ============ pages for a single practice ============ */
.practice-page main{padding-top:96px}
.crumbs{font-size:.82rem;color:var(--muted);margin-bottom:22px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--clay-deep);border-bottom-color:currentColor}
.crumbs b{color:var(--ink);font-weight:600}
.pr-top{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.pr-copy h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.05;margin:6px 0 16px}
.pr-copy h1 em{font-size:.5em;font-style:italic;color:var(--muted)}
.pr-copy .lede{font-size:1.06rem;color:var(--brown);line-height:1.72;margin-bottom:14px}
.pr-benefits{list-style:none;display:grid;gap:8px;margin:18px 0 4px}
.pr-benefits li{position:relative;padding-left:22px;color:var(--brown);font-size:.95rem}
.pr-benefits li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.pr-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.pr-cta.center{justify-content:center}
.pr-photo{margin:0;border-radius:22px;overflow:hidden;box-shadow:0 50px 100px -50px rgba(87,74,59,.6)}
.pr-photo img{width:100%;height:auto;display:block}
.pr-video .frame{position:relative;max-width:820px;margin:0 auto;border-radius:20px;overflow:hidden;cursor:pointer;background:var(--ink);aspect-ratio:16/9}
.pr-video .frame img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82;transition:opacity .4s,transform .6s var(--ease)}
.pr-video .frame:hover img{opacity:1;transform:scale(1.03)}
.pr-video .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pr-video .frame .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(247,241,230,.94);color:var(--ink);display:grid;place-items:center}
.pr-video .frame .play svg{width:30px;height:30px;margin-left:3px}
.pr-fees .mprice{max-width:560px;margin:0 auto}
.pr-dates-list{list-style:none;max-width:640px;margin:0 auto;display:grid;gap:2px}
.pr-more{margin-top:26px;text-align:center}
.pr-dates-list li{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;padding:15px 4px;border-top:1px solid var(--line)}
.pr-dates-list li b{font-family:var(--serif);font-weight:400;font-size:1.12rem;color:var(--ink)}
.pr-dates-list li span{grid-column:1;font-size:.86rem;color:var(--muted)}
.pr-dates-list li a{grid-row:1/3;grid-column:2;font-size:.85rem;color:var(--clay-deep);border-bottom:1px solid currentColor;text-decoration:none}
.pr-dates-list li .full{grid-row:1/3;grid-column:2;font-style:normal;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pr-revgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:26px}
.pr-relgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-top:26px}
.pr-rel{display:block;border-radius:16px;overflow:hidden;background:var(--cream);border:1px solid var(--line);text-decoration:none;transition:transform .4s var(--ease),box-shadow .4s}
.pr-rel:hover{transform:translateY(-4px);box-shadow:0 24px 44px -28px rgba(87,74,59,.6)}
.pr-rel img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.pr-rel span{display:block;padding:12px 14px;font-family:var(--serif);font-size:1rem;color:var(--ink)}
.pr-end{background:var(--oat)}
.pr-end .wrap.center{text-align:center;max-width:640px}
@media(max-width:860px){
  .pr-top{grid-template-columns:1fr;gap:28px}
  .pr-photo{order:-1}
  .practice-page main{padding-top:78px}
}

/* ============ the experience piece ============ */
.pr-exp{position:relative;background:var(--ink);color:var(--cream);overflow:hidden;isolation:isolate;scroll-margin-top:0;
  min-height:100svh;display:flex;align-items:stretch;
  padding:clamp(84px,11vh,124px) 0 clamp(26px,4vh,54px);
  padding-top:max(clamp(84px,11vh,124px),calc(var(--nav-h,84px) + 6px))}
/* the storm is the whole section, not a panel in it: rays cross behind the words */
.exp-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.exp-canvas canvas{width:100%;height:100%;display:block}
.pr-exp .wrap{position:relative;z-index:2}

/* Title at the top, the star in the middle of the screen, the words underneath. */
.exp-grid{display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  text-align:center;gap:clamp(10px,2vh,26px);min-height:0;flex:1 1 auto}
.exp-copy{max-width:1180px;position:relative;width:100%}
.exp-foot{max-width:600px;position:relative;width:100%}
/* a soft pool of dark at the top and the bottom so type survives a flare */
.exp-grid:before{content:"";position:absolute;inset:-40px -50vw;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,24,19,.80) 0%,rgba(28,24,19,.30) 26%,
    rgba(28,24,19,0) 45%,rgba(28,24,19,0) 58%,rgba(28,24,19,.42) 78%,rgba(28,24,19,.82) 100%)}
.exp-stage{width:min(560px,72vw);flex:1 1 auto;min-height:120px}
.exp-eyebrow{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:clamp(16px,3vh,34px)}

/* The title carries the count: twenty letters and a full stop, one per step.
   Roman inscriptional capitals, all one colour, and the letters are set alight
   one at a time. Unlit letters are dimmed rather than hidden, so the words read
   perfectly well to anyone who does not stay long enough to notice. */
.exp-title{font-family:"Forum",Georgia,"Times New Roman",serif;
  font-weight:400;font-size:clamp(1.3rem,4.4vw,2.9rem);line-height:1.26;letter-spacing:.15em;
  text-transform:uppercase;color:#fff;margin:0}
.exp-title .wd{white-space:nowrap}          /* letters are boxes; keep words whole */

/* The title carries the count: twenty letters and a full stop, one per step.
   Before a letter is reached it sits at low contrast, barely there. When its step
   closes the letter is simply illuminated -- gold, steady, with a soft bloom. It
   brightens once as it catches and then holds; nothing about it moves. */
.exp-title .gl{position:relative;display:inline-block;color:#fff;opacity:.20;
  transition:opacity 1.2s ease,color 1.2s ease,text-shadow 1.2s ease}
.exp-title .gl.lit{opacity:1;color:#E9C07A;
  text-shadow:0 0 14px rgba(233,192,122,.42),0 0 38px rgba(206,148,62,.24)}
.exp-title .gl.fire{animation:yqCatch .95s ease-out}
@keyframes yqCatch{
  0%{color:#FFF1CE;
    text-shadow:0 0 10px rgba(255,241,206,.95),0 0 34px rgba(240,196,110,.7),0 0 80px rgba(206,148,62,.4)}
  100%{color:#E9C07A;
    text-shadow:0 0 14px rgba(233,192,122,.42),0 0 38px rgba(206,148,62,.24)}
}

/* ---- the pool ---- */
.pr-exp-water .exp-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.exp-water{width:100%;height:100%;display:block;touch-action:pan-y}
.pr-exp-water .exp-stage{flex:1 1 auto;min-height:120px;width:100%;display:flex;align-items:center;justify-content:center}
/* the heading is the instruction, and it yields to the water as the pool clears */
.pr-exp-water .exp-title{opacity:calc(1 - var(--still,0) * .5)}
.pr-exp-water.still .exp-canvas{background:radial-gradient(ellipse at 50% 56%,rgba(233,192,122,.32),transparent 60%)}
.exp-line em{color:inherit;font-style:normal;font-weight:700}
.exp-line{color:rgba(247,241,230,.78);font-size:clamp(.88rem,1.7vh,.98rem);line-height:1.65;
  margin-bottom:clamp(14px,2.4vh,26px)}
.exp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.exp-btn{border:1px solid rgba(247,241,230,.34);background:transparent;color:var(--cream);
  padding:13px 28px;border-radius:999px;font:inherit;font-size:.86rem;cursor:pointer;
  transition:background .35s,border-color .35s,transform .35s}
.exp-btn:hover{background:rgba(247,241,230,.1);border-color:rgba(247,241,230,.6);transform:translateY(-2px)}
.pr-exp.following .exp-btn{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.pr-exp.still .exp-stage{background:radial-gradient(circle at 50% 50%,#C9873E 0%,#8A4A22 32%,#1C1813 70%);border-radius:50%}
/* ---- the field of invitations ---- */
.pr-exp-yes .exp-stage{width:100%;position:relative;min-height:160px}
.yes-field{position:absolute;inset:0;overflow:visible}
.inv{position:absolute;left:0;top:0;text-align:center;pointer-events:none;white-space:nowrap;
  will-change:transform,opacity;opacity:0}
.inv .q{display:block;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(.98rem,1.9vw,1.3rem);letter-spacing:.01em;color:rgba(247,241,230,.50);
  transition:color .8s}
.inv .a{display:block;margin-top:.3em;font-size:.82rem;color:rgba(247,241,230,.34);
  opacity:0;transform:translateY(5px);transition:opacity .4s ease,transform .4s ease}
.inv .a.show{opacity:1;transform:none}
.inv.maybe .a{color:rgba(233,192,122,.62);font-style:italic}
.inv.yes .q{color:rgba(247,241,230,.88)}
.inv.yes .a{font-family:"Forum",Georgia,serif;text-transform:uppercase;letter-spacing:.16em;
  font-size:clamp(1.05rem,2.3vw,1.6rem);color:#E9C07A;
  text-shadow:0 0 14px rgba(233,192,122,.45),0 0 40px rgba(206,148,62,.25)}
.inv.yes .a.show{animation:yqPop .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes yqPop{0%{transform:scale(.6) translateY(6px);color:#FFF1CE}100%{transform:none;color:#E9C07A}}
/* the heading warms with the body */
.pr-exp-yes .exp-title{color:#fff;color:color-mix(in srgb,#fff,#E9C07A calc(var(--fit,0) * 100%));
  transition:text-shadow 1.2s}
.pr-exp-yes.charged .exp-title{text-shadow:0 0 18px rgba(233,192,122,.35)}
@media(max-width:860px){
  .inv{white-space:normal;max-width:64vw}
  .inv .q{font-size:clamp(.9rem,3.6vw,1.05rem)}
  .inv.yes .a{font-size:clamp(1rem,4.2vw,1.25rem)}
}
@media(prefers-reduced-motion:reduce){.inv .a{transition:none}.inv.yes .a.show{animation:none}}

/* ---- the smaller pieces on the shared kit ---- */
.pr-exp-kit{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y}
.pr-exp-kit .exp-stage{width:100%}
/* pieces that are drawn or dragged keep the touch for themselves inside the stage */
.pr-exp-kit[data-piece="namaskar"] .exp-stage,.pr-exp-kit[data-piece="mantra"] .exp-stage,
.pr-exp-kit[data-piece="chit"] .exp-stage,.pr-exp-kit[data-piece="ishakriya"] .exp-stage{touch-action:none}
.pr-exp-kit .exp-title{color:#fff;color:color-mix(in srgb,#fff,#E9C07A calc(var(--prog,0) * 100%))}
.pr-exp-kit .exp-grid:before{background:linear-gradient(180deg,rgba(28,24,19,.86) 0%,rgba(28,24,19,.34) 26%,
    rgba(28,24,19,0) 45%,rgba(28,24,19,0) 58%,rgba(28,24,19,.50) 78%,rgba(28,24,19,.88) 100%)}

/* ---- the body (Bhuta Shuddhi): on a wide screen the words step aside so the
   figure can have the whole height; on a phone it stacks, still one screen ---- */
@media(min-width:900px){
  .pr-exp-kit[data-piece="bhuta"] .exp-grid,.pr-exp-kit[data-piece="pregnancy"] .exp-grid{display:grid;grid-template-columns:minmax(180px,1fr) minmax(280px,1.15fr) minmax(220px,1fr);
    grid-template-areas:"copy stage foot";align-items:center;column-gap:clamp(20px,3vw,56px);text-align:left;gap:clamp(20px,3vw,56px)}
  .pr-exp-kit[data-piece="bhuta"] .exp-copy,.pr-exp-kit[data-piece="pregnancy"] .exp-copy{grid-area:copy;max-width:none;width:auto}
  .pr-exp-kit[data-piece="bhuta"] .exp-stage,.pr-exp-kit[data-piece="pregnancy"] .exp-stage{grid-area:stage;align-self:stretch;height:auto;min-height:0;width:100%}
  .pr-exp-kit[data-piece="bhuta"] .exp-foot,.pr-exp-kit[data-piece="pregnancy"] .exp-foot{grid-area:foot;max-width:none;width:auto}
  .pr-exp-kit[data-piece="bhuta"] .exp-eyebrow,.pr-exp-kit[data-piece="pregnancy"] .exp-eyebrow{margin-bottom:clamp(10px,1.6vh,18px)}
  .pr-exp-kit[data-piece="bhuta"] .exp-title,.pr-exp-kit[data-piece="pregnancy"] .exp-title{font-size:clamp(1.5rem,2.6vw,2.4rem);letter-spacing:.12em;line-height:1.2}
  .pr-exp-kit[data-piece="bhuta"] .exp-line,.pr-exp-kit[data-piece="pregnancy"] .exp-line{margin-bottom:0;font-size:clamp(.84rem,1.0vw,.96rem)}
  /* the page's top-and-bottom shade would dim the body's head and feet here */
  .pr-exp-kit[data-piece="bhuta"] .exp-grid:before,.pr-exp-kit[data-piece="pregnancy"] .exp-grid:before{background:none}
}

/* ---- the five elements ---- */
.pr-exp-elements{cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y}
.pr-exp-elements.holding{cursor:grabbing}
.pr-exp-elements .exp-stage{width:100%}
/* the instruction, and it warms as the five come apart; while the hand is on it, it breathes */
.pr-exp-elements .exp-title{color:#fff;color:color-mix(in srgb,#fff,#E9C07A calc(var(--pure,0) * 100%));
  transition:opacity .6s}
.pr-exp-elements.holding .exp-title{animation:yqBreathe 2.6s ease-in-out infinite}
.pr-exp-elements.sorted .exp-title{text-shadow:0 0 18px rgba(233,192,122,.35)}
@keyframes yqBreathe{0%,100%{opacity:.75}50%{opacity:1}}
/* the copy keeps out of the grains' way: a little more shade behind it here */
.pr-exp-elements .exp-grid:before{background:linear-gradient(180deg,rgba(28,24,19,.86) 0%,rgba(28,24,19,.34) 26%,
    rgba(28,24,19,0) 45%,rgba(28,24,19,0) 58%,rgba(28,24,19,.50) 78%,rgba(28,24,19,.88) 100%)}
@media(prefers-reduced-motion:reduce){.pr-exp-elements.holding .exp-title{animation:none}}

@media(max-width:860px){
  .exp-stage{width:min(420px,78vw)}
  .exp-title{letter-spacing:.07em}
  /* the sutra copy runs long on a phone; tighten it so the section keeps to one screen */
  .exp-line{font-size:clamp(.76rem,1.7vh,.84rem);line-height:1.52;margin-bottom:clamp(6px,1.3vh,14px)}
  .pr-exp-water .exp-stage{min-height:48px}
  .exp-eyebrow{margin-bottom:clamp(8px,1.5vh,16px)}
  .pr-exp{padding-top:max(clamp(68px,8.5vh,90px),calc(var(--nav-h,72px) + 6px));padding-bottom:clamp(16px,2.5vh,30px)}
}
/* a short landscape window: give the star less and the words more */
@media(max-height:620px){
  .pr-exp{padding-top:max(clamp(70px,10vh,92px),calc(var(--nav-h,72px) + 6px))}
  .exp-eyebrow{margin-bottom:10px}
  .exp-stage{min-height:90px}
}
@media(prefers-reduced-motion:reduce){
  .exp-title .gl{transition:none}
  .exp-title .gl.fire{animation:none}
}

/* ---- a course is one offering: grouped programmes under "When it is next taught" ---- */
.pr-progs{list-style:none;max-width:720px;margin:0 auto;padding:0;display:grid;gap:2px}
.pr-prog{display:grid;grid-template-columns:auto 1fr auto;gap:4px 20px;align-items:start;padding:18px 4px;border-top:1px solid var(--line)}
.pr-prog .pp-when{font-family:var(--serif);text-align:center;min-width:72px;line-height:1;padding-top:2px}
.pr-prog .pp-when b{display:block;font-weight:400;font-size:1.9rem;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.pr-prog .pp-when small{display:block;margin-top:6px;font-family:var(--sans);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pr-prog.k-Review .pp-when b{color:var(--muted)}
.pr-prog .pp-body b{display:block;font-family:var(--serif);font-weight:400;font-size:1.12rem;color:var(--ink)}
.pr-prog .pp-where{margin:2px 0 0;font-size:.8rem;color:var(--muted)}
.pr-prog .pp-sess{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;font-size:.86rem;color:var(--brown);font-variant-numeric:tabular-nums}
.pr-prog .pp-sess li{display:grid;grid-template-columns:92px 1fr;gap:10px}
.pr-prog .pp-sess li i{font-style:normal;color:var(--muted)}
.pr-prog .ev-pill{margin-top:10px;white-space:normal;line-height:1.5}
.pr-prog .reserve{margin-top:4px}
.pr-prog .reserve:hover{background:var(--saffron)}
.pr-prog-note{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:8px}
@media(max-width:640px){
  .pr-prog{grid-template-columns:auto 1fr}
  .pr-prog .reserve,.pr-prog .pr-prog-note{grid-column:2;justify-self:start;margin-top:10px}
}
@media(max-width:640px){
  .pr-prog{gap:4px 14px}
  .pr-prog .pp-when{min-width:58px}
  .pr-prog .pp-when b{font-size:1.6rem}
  .pr-prog .pp-sess li{grid-template-columns:82px 1fr}
}

/* ---- the little facts under the lede ----
   These chips were styled only as ".modal .mbody .meta", which exists on the home
   page and nowhere else, so on a practice page the spans fell out unstyled and ran
   together: "3-month commitment6-8 hrs / week". */
.pr-copy .meta{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.pr-copy .meta span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;padding:7px 12px;border-radius:100px;background:var(--oat);color:var(--brown)}

/* ---- a programme is made of other practices, and each one is a page of its own ---- */
.pr-madeof{background:var(--oat)}
.pr-madeof .pr-runs{max-width:60ch;margin:14px auto 0;text-align:center;color:var(--brown)}
/* the count varies from three to seven, so the cards flow and the last row centres
   rather than leaving one stranded at the left */
.pr-madeof .pr-relgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:30px}
.pr-madeof .pr-rel{flex:0 1 200px;max-width:240px;display:flex;flex-direction:column}
.pr-madeof .pr-rel span{flex:1}
.pr-madeof .pr-rel{background:#fff}
.pr-madeof .pr-rel span{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pr-madeof .pr-rel span::after{content:"→";font-family:var(--sans);font-size:.85rem;
  color:var(--clay);transition:transform .35s var(--ease)}
.pr-madeof .pr-rel:hover span::after{transform:translateX(4px)}

/* ---- "start with X" : the one thing to do next on a programme page ---- */
.pr-start{padding-top:clamp(30px,4vw,52px);padding-bottom:0}
.startbox{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,3vw,44px);align-items:center;
  background:var(--ink);color:var(--cream);border-radius:26px;padding:clamp(24px,3.4vw,44px)}
.startbox .eyebrow{color:var(--gold-2);justify-content:flex-start}
.startbox h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.05;margin:12px 0 10px}
.startbox h2 em{font-style:italic;color:var(--gold-2)}
.startbox-copy p{color:rgba(247,241,230,.72);margin:0;max-width:46ch;font-size:.96rem}
.startbox-next{background:rgba(247,241,230,.06);border:1px solid rgba(247,241,230,.14);
  border-radius:18px;padding:20px 22px;text-align:center}
.startbox-next .note{color:rgba(247,241,230,.6);margin:0 0 12px}
/* The count and the link sat in identical muted type, so nobody could tell that
   half the sentence was clickable. The link takes the gold and an underline it
   keeps at rest -- an underline that only appears on hover is no use to someone
   deciding whether a thing is a link. */
.pr-revs .note a{color:var(--gold-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(228,194,126,.5);transition:color .2s,text-decoration-color .2s}
.pr-revs .note a:hover{color:#fff;text-decoration-color:#fff}
.startnext-label{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0;font-weight:800}
.startnext-date{font-family:var(--serif);font-size:1.5rem;font-weight:400;margin:6px 0 0;color:var(--cream)}
.startnext-sess{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px;font-size:.84rem;
  color:rgba(247,241,230,.74);font-variant-numeric:tabular-nums}
.startnext-sess li{display:flex;gap:10px;justify-content:center}
.startnext-sess li i{font-style:normal;color:rgba(247,241,230,.5);min-width:64px;text-align:right}
.startnext-sess li span{min-width:118px;text-align:left}
.startnext-where{font-size:.78rem;color:rgba(247,241,230,.5);margin:10px 0 0}
.startbox-next .btn{margin-top:16px}
@media(max-width:820px){.startbox{grid-template-columns:1fr;text-align:left}
  .startbox-copy p{max-width:none}}

/* ---- the weekly slots, on a programme page ---- */
.pr-times{padding-bottom:0}
.timesbox{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,3vw,44px);align-items:center;
  background:var(--oat);border-radius:26px;padding:clamp(24px,3.2vw,40px)}
.timesbox h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.7vw,2.1rem);line-height:1.06;margin:12px 0 10px}
.timesbox h2 em{font-style:italic;color:var(--clay)}
.timesbox>div>p{color:var(--brown);margin:0;font-size:.95rem;max-width:40ch}
.timesgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.timeslot{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.timeslot b{display:block;font-family:var(--serif);font-weight:400;font-size:1.12rem;color:var(--ink);font-variant-numeric:tabular-nums}
.timeslot span{display:block;margin-top:3px;font-size:.8rem;color:var(--muted)}
.timeslot i{display:block;margin-top:5px;font-style:normal;font-size:.76rem;color:var(--clay-deep)}
.pr-times .pr-more{margin-top:20px;text-align:center}
@media(max-width:820px){.timesbox{grid-template-columns:1fr}}

/* ---- which practice a review on a programme page is about ---- */
.pr-revnote{text-align:center;color:var(--muted);font-size:.9rem;margin:10px 0 0}
.pr-revtag{display:inline-block;margin-top:10px;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:800;padding:5px 10px;border-radius:20px;background:var(--oat);color:var(--clay-deep);text-decoration:none}
.pr-revtag:hover{background:var(--gold);color:var(--ink)}

/* ---- a corporate programme is arranged, not booked off the public list ---- */
.pr-corpnote{max-width:60ch;margin:22px auto 0;padding:14px 18px;background:var(--oat);
  border-radius:14px;font-size:.9rem;color:var(--brown);text-align:center}
.pr-corpnote b{color:var(--ink)}