/* ===== THEME COLOURS & GLOBAL STYLES START ===== */
:root{--paper:#f4efe5;--ink:#262d24;--moss:#475b43;--sage:#b6c0a5;--clay:#b96e4d;--cream:#fffaf1;--line:rgba(38,45,36,.16);--maroon:#843f3e;--logo:url("../images/logo.png")}
/* ===== THEME COLOURS & GLOBAL STYLES END ===== */
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}.serif{font-family:'Playfair Display',serif}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;font-weight:700}.wrap{width:min(1160px,calc(100% - 44px));margin:auto}
/* ===== HEADER STYLES START ===== */
header{height:88px;display:flex;align-items:center;justify-content:space-between;gap:22px;position:absolute;top:0;left:0;right:0;z-index:10;padding:0 max(22px,calc((100vw - 1160px)/2));color:#fff;transition:.3s}
/* ===== HEADER STYLES END ===== */
header.scrolled{position:fixed;background:rgba(244,239,229,.94);backdrop-filter:blur(16px);color:var(--ink);box-shadow:0 6px 24px #1d24151a}
/* ===== LOGO / BRAND STYLES START ===== */
.brand{display:flex;align-items:center;gap:12px;font-family:'Playfair Display',serif;font-size:1.2rem;line-height:1.05}.brand small{display:block;font:600 .56rem 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;margin-top:5px}
/* ===== LOGO / BRAND STYLES END ===== */
/* ===== NAVIGATION STYLES START ===== */
nav{display:flex;align-items:center;gap:30px;font-size:.83rem}nav a{opacity:.9}nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--clay);color:#fff;border:0;padding:14px 21px;border-radius:999px;font-weight:600;font-size:.82rem;transition:transform .25s,background .25s;cursor:pointer}.nav-cta{background:#fff;color:var(--ink)}.btn:hover,.nav-cta:hover{transform:translateY(-3px);background:var(--moss);color:#fff}.menu{display:none;background:none;border:1px solid #ffffff80;color:inherit;border-radius:50%;width:44px;height:44px;font-size:1.2rem}
/* ===== NAVIGATION STYLES END ===== */
/* ===== HERO + VIDEO STYLES START ===== */
.hero{min-height:760px;height:min(900px,100svh);position:relative;display:flex;align-items:center;overflow:hidden;background:#343d30;color:#fff}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.66;filter:saturate(.72)}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,28,20,.78) 0%,rgba(19,28,20,.45) 48%,rgba(19,28,20,.1) 100%),linear-gradient(0deg,rgba(19,28,20,.45),transparent 40%)}.hero-content{position:relative;z-index:1;padding-top:80px;width:min(1160px,calc(100% - 44px));margin:auto}.hero .eyebrow{color:#e5c4a6;display:flex;align-items:center;gap:12px}.hero .eyebrow:before{content:"";width:34px;height:1px;background:#e5c4a6}.hero h1{font:500 clamp(3.4rem,8vw,7.4rem)/.98 'Playfair Display',serif;letter-spacing:-.055em;max-width:760px;margin:25px 0}.hero h1 em{font-weight:500;color:#e6c7a8}.hero p{font-size:1.02rem;line-height:1.8;max-width:490px;color:#f4f0e8;margin:0 0 30px}.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.play-link{display:flex;align-items:center;gap:10px;font-size:.82rem}.play{display:grid;place-items:center;width:43px;height:43px;border:1px solid #ffffffa0;border-radius:50%;font-size:.8rem}.hero-note{position:absolute;z-index:2;right:max(22px,calc((100vw - 1160px)/2));bottom:44px;writing-mode:vertical-rl;text-transform:uppercase;letter-spacing:.2em;font-size:.66rem;color:#ffffffc9}
/* ===== HERO + VIDEO STYLES END ===== */
/* ===== SCROLLING TEXT STRIP STYLES START ===== */
.marquee{overflow:hidden;background:var(--moss);color:#fff;padding:17px 0;white-space:nowrap}.marquee-track{display:flex;width:max-content;animation:drift 32s linear infinite}.marquee span{font:italic 1.15rem 'Playfair Display',serif;margin:0 25px}.marquee b{font-size:.7rem;color:#d6b18f}@keyframes drift{to{transform:translateX(-50%)}}
/* ===== SCROLLING TEXT STRIP STYLES END ===== */
/* ===== ABOUT SECTION STYLES (incl. large logo) START ===== */
section{padding:110px 0}.intro{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px;align-items:center}.intro-art{position:relative;min-height:440px;display:grid;place-items:center}.moon{position:absolute;width:min(370px,90%);aspect-ratio:1;border:1px solid #a9a18e;border-radius:50%}.moon:before{content:"";position:absolute;inset:24px;border:1px solid #c8bfad;border-radius:50%}.stamp{position:absolute;right:2%;bottom:12%;background:var(--clay);color:#fff;border-radius:50%;width:105px;height:105px;display:grid;place-items:center;text-align:center;font:italic 1rem 'Playfair Display',serif;transform:rotate(12deg);padding:15px}.section-kicker{color:var(--clay);margin-bottom:18px}.section-title{font:500 clamp(2.7rem,5vw,4.8rem)/1.05 'Playfair Display',serif;letter-spacing:-.04em;margin:0 0 25px}.section-title em{color:var(--moss)}.copy{line-height:1.9;color:#64675d;font-size:.97rem;max-width:580px}.text-link{display:inline-flex;align-items:center;gap:12px;margin-top:18px;font-size:.84rem;font-weight:700;border-bottom:1px solid var(--clay);padding-bottom:8px}.text-link span{font-size:1.2rem;transition:transform .2s}.text-link:hover span{transform:translateX(5px)}
/* ===== ABOUT SECTION STYLES (incl. large logo) END ===== */
/* ===== CLASSES SECTION STYLES START ===== */
.classes{background:#e9e5d9}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:48px}.section-head .copy{max-width:350px}.class-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.class-card{background:var(--cream);padding:30px;border-radius:4px;min-height:315px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .3s}.class-card:hover{transform:translateY(-7px)}.class-no{font-size:.7rem;letter-spacing:.16em;color:var(--clay)}.class-icon{margin:24px 0 16px;color:var(--moss)}.class-card h3{font:500 1.7rem 'Playfair Display',serif;margin:0 0 12px}.class-card p{color:#707166;font-size:.88rem;line-height:1.75;margin:0}.class-card a{margin-top:auto;padding-top:22px;font-weight:700;font-size:.8rem}
/* ===== CLASSES SECTION STYLES END ===== */
/* ===== QUOTE BAND STYLES START ===== */
.quote-band{background:var(--moss);color:#fff;text-align:center;padding:100px 20px}.quote-band .eyebrow{color:#e2c3a5}.quote-band blockquote{font:500 clamp(2rem,4.5vw,4.4rem)/1.2 'Playfair Display',serif;max-width:900px;margin:28px auto}.quote-band cite{font-style:normal;font-size:.78rem;color:#d7ddce;letter-spacing:.12em;text-transform:uppercase}
/* ===== QUOTE BAND STYLES END ===== */
/* ===== JOURNEY SECTION STYLES (incl. logo panel) START ===== */
.journey{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.journey-visual{min-height:560px;position:relative;background:#d9d7c7;overflow:hidden;border-radius:48% 48% 4px 4px}.journey-visual:after{content:"Breathe • Move • Be";position:absolute;bottom:24px;left:0;right:0;text-align:center;color:#fff;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;text-shadow:0 1px 8px #0008}.steps{margin-top:30px;border-top:1px solid var(--line)}.step{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}.step-num{font:italic 1.2rem 'Playfair Display',serif;color:var(--clay)}.step h3{font:500 1.3rem 'Playfair Display',serif;margin:0 0 7px}.step p{margin:0;color:#6d6e63;font-size:.87rem;line-height:1.7}
/* ===== JOURNEY SECTION STYLES (incl. logo panel) END ===== */
/* ===== SCHEDULE SECTION STYLES START ===== */
.schedule{background:#f9f5ec}.schedule-box{display:grid;grid-template-columns:.8fr 1.2fr;background:var(--cream);border:1px solid var(--line)}.schedule-intro{padding:48px;background:var(--moss);color:#fff}.schedule-intro .copy{color:#e0e3d9}.schedule-intro .section-title{font-size:3.2rem}.tabs{display:flex;gap:8px;margin:24px 0 0;flex-wrap:wrap}.tab{border:1px solid #ffffff55;background:transparent;color:#fff;border-radius:30px;padding:9px 13px;font-size:.76rem;cursor:pointer}.tab.active,.tab:hover{background:var(--paper);color:var(--ink)}.schedule-list{padding:35px}.class-row{display:grid;grid-template-columns:92px 1fr auto;gap:15px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}.class-row:last-child{border:0}.class-time{font-size:.78rem;color:var(--clay);font-weight:700}.class-row h4{font:500 1.2rem 'Playfair Display',serif;margin:0 0 5px}.class-row p{margin:0;font-size:.78rem;color:#76766b}.pill{font-size:.68rem;border-radius:30px;padding:7px 10px;background:#e7eadf;color:var(--moss);white-space:nowrap}
/* ===== SCHEDULE SECTION STYLES END ===== */
/* ===== TESTIMONIALS SECTION STYLES START ===== */
.testimonials{padding-bottom:120px}.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.review{border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;min-height:260px}.stars{color:var(--clay);letter-spacing:.15em}.review blockquote{font:italic 1.25rem/1.55 'Playfair Display',serif;margin:22px 0 28px}.review .who{margin-top:auto;font-size:.78rem;font-weight:700}.review .who small{display:block;font-weight:400;color:#77796f;margin-top:5px}
/* ===== TESTIMONIALS SECTION STYLES END ===== */
/* ===== FAQ SECTION STYLES START ===== */
.faq{background:#e9e5d9}.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.faq-item{border-bottom:1px solid #c9c7ba}.faq-q{width:100%;border:0;background:none;display:flex;justify-content:space-between;gap:20px;text-align:left;padding:22px 0;font:500 1.2rem 'Playfair Display',serif;cursor:pointer;color:var(--ink)}.faq-q span{font:400 1.3rem 'DM Sans',sans-serif;color:var(--clay)}.faq-a{display:none;padding:0 30px 22px 0;color:#67695e;line-height:1.8;font-size:.9rem}.faq-item.open .faq-a{display:block}.faq-item.open .faq-q span{transform:rotate(45deg)}
/* ===== FAQ SECTION STYLES END ===== */
/* ===== CONTACT SECTION STYLES START ===== */
.contact{padding:110px 0;background:var(--clay);color:#fff;text-align:center;position:relative;overflow:hidden}.contact:before,.contact:after{content:"";position:absolute;width:380px;height:380px;border:1px solid #ffffff3d;border-radius:50%;top:-210px;left:-100px}.contact:after{top:auto;left:auto;right:-120px;bottom:-270px;width:520px;height:520px}.contact .eyebrow{color:#f3d8c6}.contact .section-title{max-width:800px;margin:20px auto}.contact p{color:#f8e8dd;line-height:1.8}.contact .btn{background:var(--cream);color:var(--ink);margin-top:20px}.contact .btn:hover{background:var(--moss);color:#fff}
/* ===== CONTACT SECTION STYLES END ===== */
/* ===== FOOTER STYLES START ===== */
footer{padding:35px 0;background:#20281f;color:#f4efe5}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px}.footer-brand{font:500 1.25rem 'Playfair Display',serif}.footer-brand small{display:block;font: .65rem 'DM Sans',sans-serif;color:#b9c1af;letter-spacing:.13em;margin-top:6px}.footer-links{display:flex;gap:20px;font-size:.78rem;color:#d5d9ce}.copyright{font-size:.7rem;color:#9fa99a}
/* ===== FOOTER STYLES END ===== */
/* ===== SCROLL ANIMATION STYLES START ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease}.reveal.visible{opacity:1;transform:none}
/* ===== SCROLL ANIMATION STYLES END ===== */
/* ===== TABLET RESPONSIVE STYLES START ===== */
@media(max-width:850px){nav{gap:15px}nav a:not(.nav-cta){display:none}.menu{display:block}nav.mobile-open{position:absolute;top:78px;right:22px;display:flex;flex-direction:column;align-items:stretch;background:var(--cream);color:var(--ink);padding:20px;width:220px;border-radius:12px;box-shadow:0 12px 35px #0002}nav.mobile-open a{display:block;padding:8px}.intro,.journey,.faq-layout{grid-template-columns:1fr;gap:35px}.intro-art{min-height:350px;order:2}.class-grid,.testimonial-grid{grid-template-columns:1fr 1fr}.schedule-box{grid-template-columns:1fr}.schedule-intro{padding:35px}.journey-visual{min-height:420px;max-width:540px;width:100%;margin:auto}.section-head{align-items:start;flex-direction:column;gap:8px}}
/* ===== TABLET RESPONSIVE STYLES END ===== */
/* ===== MOBILE RESPONSIVE STYLES START ===== */
@media(max-width:560px){.wrap{width:calc(100% - 34px)}header{padding:0 17px;height:76px}.brand{font-size:1rem}.hero{min-height:700px;height:90svh}.hero-content{width:calc(100% - 34px);padding-top:55px}.hero h1{font-size:clamp(3.35rem,15vw,5rem)}.hero p{font-size:.93rem}.hero-note{display:none}section{padding:75px 0}.class-grid,.testimonial-grid{grid-template-columns:1fr}.class-card{min-height:270px}.section-title{font-size:3rem}.intro-art{min-height:300px}.stamp{width:85px;height:85px;font-size:.85rem}.schedule-intro{padding:28px}.schedule-intro .section-title{font-size:2.8rem}.schedule-list{padding:20px}.class-row{grid-template-columns:70px 1fr;gap:12px}.class-row .pill{grid-column:2;justify-self:start}.footer-inner{align-items:flex-start;flex-direction:column}.footer-links{flex-wrap:wrap}.quote-band{padding:75px 22px}}
/* ===== MOBILE RESPONSIVE STYLES END ===== */
/* ===== REDUCED MOTION STYLES START ===== */
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
/* ===== REDUCED MOTION STYLES END ===== */
/* ===== LOGO INTEGRATION STYLES START =====
   The logo is stored ONCE in the --logo variable (top of this file) and used as a "mask",
   so it can take any colour or gradient. Change colours below to restyle it everywhere. */
.mark{display:block;flex:none;width:42px;height:48px;background:currentColor;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;transition:background .3s;animation:markIn 1.4s cubic-bezier(.2,.7,.2,1) both}
header .mark{background:linear-gradient(170deg,#fff,#f0d5bb)}
header.scrolled .mark{background:linear-gradient(170deg,var(--clay),var(--maroon))}
.brand{gap:14px}
@keyframes markIn{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
@keyframes floaty{50%{transform:translateY(-14px) rotate(1.5deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
/* hero watermark */
.hero-mark{position:absolute;z-index:1;right:max(3%,calc((100vw - 1160px)/2));top:50%;margin-top:-210px;width:min(32vw,360px);aspect-ratio:.866;background:linear-gradient(165deg,#f6e2cc,#e0a982 55%,#b96e4d);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;opacity:.3;pointer-events:none;animation:floaty 10s ease-in-out infinite}
/* about section */
.moon{background:radial-gradient(circle at 35% 28%,#fffaf1,#ebe5d5 70%);box-shadow:0 30px 70px -30px #475b4355}
.moon:after{content:"";position:absolute;inset:-20px;border:1px dashed #b4a88f;border-radius:50%;animation:spin 70s linear infinite}
.logo-large{position:relative;width:min(190px,50%);aspect-ratio:.866;background:linear-gradient(165deg,var(--clay),var(--maroon) 55%,var(--moss));-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;animation:floaty 9s ease-in-out infinite}
/* journey panel */
.journey-visual{background:radial-gradient(circle at 50% 30%,#6f8869,#475b43 58%,#2f3f2c)}
.journey-visual:before{content:"";position:absolute;width:130%;aspect-ratio:1;left:-15%;top:2%;border:1px solid #ffffff2e;border-radius:50%;box-shadow:inset 0 0 0 30px #ffffff08}
.jmark{position:absolute;left:20%;top:13%;width:60%;height:68%;background:linear-gradient(175deg,#fffaf1,#ecc9a6);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;filter:drop-shadow(0 12px 18px #0003)}
/* contact + footer */
.contact .wrap{position:relative;z-index:1}
.cmark{position:absolute;left:50%;top:50%;height:150%;aspect-ratio:.866;transform:translate(-50%,-50%);background:#fff;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;opacity:.08;pointer-events:none}
.footer-brand{display:flex;align-items:center;gap:14px}.footer-brand .mark{width:34px;height:40px;animation:none}
@media(max-width:850px){.hero-mark{width:56vw;right:-12vw;opacity:.18;margin-top:-170px}}
@media(max-width:560px){.mark{width:34px;height:40px}.hero-mark{width:70vw;right:-18vw;opacity:.14}}
/* ===== LOGO INTEGRATION STYLES END ===== */

/* ===== CLASS ICON STYLES (icons live in assets/icons/*.svg — replace a file to change an icon) START ===== */
.class-icon{width:40px;height:40px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.class-icon[data-icon=hatha]{--icon:url("../icons/hatha.svg")}
.class-icon[data-icon=pranayama]{--icon:url("../icons/pranayama.svg")}
.class-icon[data-icon=meditation]{--icon:url("../icons/meditation.svg")}
.class-icon[data-icon=surya]{--icon:url("../icons/surya.svg")}
.class-icon[data-icon=kids]{--icon:url("../icons/kids.svg")}
.class-icon[data-icon=guidance]{--icon:url("../icons/guidance.svg")}
/* ===== CLASS ICON STYLES END ===== */

