/* ==========================================================
   YOGASHREE HEALTH WELLNESS
   "Close to Nature" Design System
   Palette grounded in: forest canopy, moss, turmeric,
   sun-baked earth, and the rhythm of breath.
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Jost:wght@400;500;600&display=swap');

:root{

/* ---- Core nature palette ---- */
--canvas:#F6F1E4;         /* warm paper mist - page background */
--canvas-alt:#EDE6D2;     /* soft clay-tinted panel background */
--paper:#FBFAF3;          /* warm ivory - card surfaces */

--forest:#1F4B3F;         /* deep forest green - nav / footer / dark surfaces */
--forest-deep:#0E241E;    /* darker forest for gradients */

--moss:#4C7A54;           /* moss green - primary accent (replaces bootstrap success) */
--moss-dark:#3A5F41;

--turmeric:#C98A2B;       /* turmeric gold - warm CTA accent (replaces bootstrap warning) */
--turmeric-dark:#A96F1E;

--clay:#B5622E;           /* terracotta clay - third accent, mud/earth therapies */
--clay-dark:#96501F;

--bark:#20291F;           /* warm near-black - body text */
--bark-soft:#5B5546;      /* muted secondary text */

--shadow-natural:0 14px 32px rgba(31,75,63,.14);
--shadow-soft:0 8px 20px rgba(46,42,34,.08);

/* ---- Legacy tokens kept so the rest of the sheet re-themes automatically ---- */
--primary:var(--moss);
--secondary:var(--turmeric);
--dark:var(--forest);
--light:var(--canvas);
--white:#ffffff;
--text:var(--bark);
--shadow:var(--shadow-natural);

}

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
}

html{
background:var(--canvas);
}

body{

font-family:'Jost',sans-serif;
background:transparent;
color:var(--text);
position:relative;
/* base body size - headings are set separately and are unaffected */
font-size:18px;
line-height:1.65;

}

/* Body copy, lists, tables and form text scaled up together.
   Headings (h1-h6) keep their own sizes. */

p,
li,
td,
th,
label,
.bento-lede,
.bento-list,
.review-card .card-body p{
font-size:1.02rem;
}

/* Diploma course table. Fees and durations are the numbers people come to
   this section for, so they are set noticeably larger than body copy. */
.table td,
.table th{
font-size:1.22rem;
padding:16px 18px;
}

form input,
form textarea,
form select,
.form-control{
font-size:1.02rem;
}

.nav-link{
font-size:17px;
}

.top-bar{
font-size:16px;
}

footer p{
font-size:1.05rem;
}

/* Day-cycle backdrop: a fixed layer behind the page whose gradient is
   repainted on scroll (see main.js) to trace dawn -> morning -> midday ->
   golden hour -> dusk, echoing Yogashree's 6am-7pm class day. Sections with
   their own solid background (hero, bg-light, bg-success, bg-dark) sit
   opaquely on top of it; sections left plain let it show through. */
.day-cycle-bg{
position:fixed;
inset:0;
z-index:-2;
background:linear-gradient(160deg, var(--canvas), var(--canvas-alt));
}

/* subtle organic dot texture, like morning dew on grass - decorative only */
body::before{
content:"";
position:fixed;
inset:0;
background-image:radial-gradient(rgba(76,122,84,.07) 1px, transparent 1px);
background-size:26px 26px;
pointer-events:none;
z-index:0;
}

h1,h2,h3,h4,h5,.navbar-brand{
font-family:'Cormorant Garamond',serif;
}

/* ================= NAVBAR ================= */

.navbar{

transition:.4s;

}

.navbar-brand{

font-size:30px;
font-weight:700;
letter-spacing:1px;
background:linear-gradient(100deg,#fff 0%,#fff 45%,var(--turmeric) 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;

}

.navbar-brand::before{
font-family:"Font Awesome 6 Free";
font-weight:900;
content:"\f06c";
color:var(--turmeric);
margin-right:10px;
font-size:22px;
vertical-align:middle;
-webkit-text-fill-color:var(--turmeric);
}

.nav-link{

font-size:16px;
font-weight:500;
margin-left:12px;
transition:.3s;

}

.nav-link:hover{

color:var(--turmeric)!important;

}

/* ================= BOOTSTRAP RE-THEME ================= */
/* Re-map Bootstrap's utility/component colors onto the nature palette */

.bg-success{ background-color:var(--moss)!important; }
.bg-dark{ background-color:var(--forest)!important; }
.bg-light{ background-color:var(--canvas-alt)!important; }

.text-success{ color:var(--moss)!important; }
.text-warning{ color:var(--turmeric)!important; }

.btn-success{
background:var(--moss);
border-color:var(--moss);
color:#fff;
}
.btn-success:hover,
.btn-success:focus{
background:var(--moss-dark);
border-color:var(--moss-dark);
color:#fff;
}

.btn-warning{
background:var(--turmeric);
border-color:var(--turmeric);
color:#fff;
}
.btn-warning:hover,
.btn-warning:focus{
background:var(--turmeric-dark);
border-color:var(--turmeric-dark);
color:#fff;
}

.btn-light{
background:var(--paper);
border-color:var(--paper);
}

table.table-bordered thead.table-success,
thead.table-success{
background-color:var(--canvas-alt)!important;
}
thead.table-success th{
color:var(--forest);
border-color:rgba(76,122,84,.3);
}

/* ================= HERO ================= */

.hero{

min-height:90vh;

display:flex;

align-items:center;

background:

radial-gradient(ellipse 60% 80% at 85% 20%, rgba(201,138,43,.20), transparent 60%),
linear-gradient(120deg, var(--forest-deep) 0%, var(--forest) 60%, #2b5a45 100%);

color:white;

/* the tree overhangs the right edge - clip it rather than letting it
   push a horizontal scrollbar onto the page */
overflow:hidden;

}

.hero h5.text-warning{
letter-spacing:5px;
font-size:13px;
font-weight:600;
}

.hero h5.text-warning::before{
content:"";
display:inline-block;
width:9px;
height:9px;
margin-right:10px;
border-radius:50%;
background:var(--turmeric);
vertical-align:middle;
animation:breathe 4s ease-in-out infinite;
}

.hero h1{

font-size:68px;

font-weight:700;
font-style:italic;
line-height:1.05;
letter-spacing:-.5px;

margin-bottom:20px;

}

.hero h3{

margin-bottom:20px;
font-weight:500;

}

.hero p{

font-size:19px;

margin-bottom:30px;
line-height:1.7;
opacity:.92;

}

.hero img{

animation:float 5s infinite;

max-width:500px;

}

/* Decorative "breathing" rings around the hero image - a quiet nod
   to the rhythm of pranayama. Purely ambient, respects reduced motion. */
.hero-visual{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
}

.hero-visual::before,
.hero-visual::after{
content:"";
position:absolute;
border-radius:50%;
pointer-events:none;
}

.hero-visual::before{
width:78%;
padding-top:78%;
top:11%;
left:11%;
border:1.5px solid rgba(201,138,43,.45);
animation:breathe 8s ease-in-out infinite;
}

.hero-visual::after{
width:96%;
padding-top:96%;
top:2%;
left:2%;
border:1.5px solid rgba(181,98,46,.3);
animation:breathe 8s ease-in-out infinite;
animation-delay:2s;
}

@keyframes breathe{
0%,100%{ transform:scale(.92); opacity:.35; }
50%{ transform:scale(1.04); opacity:.9; }
}

@media (prefers-reduced-motion: reduce){
.hero-visual::before,
.hero-visual::after,
.hero img{
animation:none;
}
}

/* ---- Peepal tree backdrop ---- */

/* In normal flow, below the banner - keeping it absolute is what let the
   canopy drift up over the banner and merge with it. Flow order
   guarantees they stay separated whatever the sizes. */
.hero-tree{
position:relative;
align-self:flex-end;
width:76%;
max-width:410px;
margin-right:-6%;
z-index:0;
pointer-events:none;
}

.hero-tree-svg{
width:100%;
height:auto;
display:block;
overflow:visible;
}

/* Wood: trunk and limbs, generated as tapered polygons in main.js */

.tree-wood path{
fill:#4a3b2a;
opacity:.85;
}

/* Foliage: leaf clumps in three tones, painted darkest-first so the
   lighter ones read as canopy catching light. */

.leaf-deep{
fill:#1d4034;
opacity:.9;
}

.leaf-mid{
fill:#3d6b42;
opacity:.85;
}

.leaf-light{
fill:#5d8c46;
opacity:.8;
}

/* The whole canopy sways gently, as if in a light breeze. */
.tree-canopy{
transform-origin:100px 240px;
animation:canopy-sway 11s ease-in-out infinite;
}

@keyframes canopy-sway{
0%,100%{ transform:rotate(-.7deg); }
50%{ transform:rotate(.7deg); }
}

/* Leaves detaching from the canopy and drifting down */

.falling-leaf{
position:absolute;
left:var(--x);
top:var(--y);
font-size:18px;
color:var(--turmeric);
opacity:0;
animation-name:leaf-fall;
animation-timing-function:cubic-bezier(.45,.05,.55,.95);
animation-iteration-count:infinite;
will-change:transform,opacity;
}

@keyframes leaf-fall{
0%{ opacity:0; transform:translate(0,0) rotate(0deg); }
8%{ opacity:.9; }
70%{ opacity:.65; }
100%{ opacity:0; transform:translate(var(--drift),320px) rotate(var(--spin)); }
}

/* ---- Birds roaming around the canopy ---- */
/* Each bird follows its own motion path with offset-rotate:auto, so it
   banks into the turns instead of sliding sideways. */

.hero-birds{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
}

.bird{
position:absolute;
top:0;
left:0;
width:26px;
height:13px;
offset-rotate:auto;
animation:bird-roam linear infinite;
}

.bird .wing{
stroke:rgba(246,241,228,.65);
stroke-width:2;
stroke-linecap:round;
fill:none;
transform-origin:20px 13px;
animation:flap .55s ease-in-out infinite alternate;
}

.bird .wing-r{
animation-name:flap-right;
}

@keyframes flap{
from{ transform:rotate(-16deg); }
to{ transform:rotate(15deg); }
}

@keyframes flap-right{
from{ transform:rotate(16deg); }
to{ transform:rotate(-15deg); }
}

@keyframes bird-roam{
from{ offset-distance:0%; }
to{ offset-distance:100%; }
}

.bird-1{
offset-path:path("M -40 60 C 60 20 160 90 260 40 C 320 10 340 60 400 50");
animation-duration:26s;
}

/* birds 2 and 4 travel right-to-left: offset-rotate:auto alone would spin
   them 180deg to face that way and leave them upside down, so add 180deg
   to bring them upright again. */
.bird-2{
offset-path:path("M 420 30 C 320 80 220 10 120 70 C 60 100 10 60 -50 90");
offset-rotate:auto 180deg;
animation-duration:32s;
animation-delay:-6s;
transform:scale(.75);
}

.bird-3{
offset-path:path("M -30 130 C 80 90 150 150 250 100 C 310 70 360 110 420 80");
animation-duration:38s;
animation-delay:-14s;
transform:scale(.6);
}

.bird-4{
offset-path:path("M 400 150 C 300 110 200 170 90 120 C 40 96 -10 130 -60 110");
offset-rotate:auto 180deg;
animation-duration:29s;
animation-delay:-20s;
transform:scale(.85);
}

@media (prefers-reduced-motion: reduce){
.tree-canopy,
.bird,
.bird .wing{
animation:none;
}
.hero-birds{
display:none;
}
}

@media(max-width:768px){
.hero-birds{
display:none;
}
}

/* ---- Sunrise behind the banner ---- */
/* Warm halo + sun disc + slow-turning rays. Sits behind the tree in the
   DOM so the branches silhouette against the light. */

/* Positioned over the canopy, painted under the SVG, so the leaf clusters
   and limbs break the disc up instead of it floating in clear sky. */
/* Offset to the upper-left of the canopy so roughly half the disc clears
   the foliage - centred, a sun this size is swallowed whole. */
.hero-sunrise{
position:absolute;
left:24%;
top:19%;
transform:translate(-50%,-50%);
width:95%;
aspect-ratio:1;
z-index:0;
pointer-events:none;
background:radial-gradient(circle at 50% 50%,
    rgba(255,226,168,.38) 0%,
    rgba(243,180,92,.21) 20%,
    rgba(201,138,43,.09) 38%,
    transparent 64%);
}

.hero-tree-svg{
position:relative;
z-index:1;
}

.hero-sunrise::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:33%;
aspect-ratio:1;
transform:translate(-50%,-50%);
border-radius:50%;
/* crisp core with a tight falloff - a soft blob doesn't read as a sun */
background:radial-gradient(circle,
    rgba(255,250,232,.95) 0%,
    rgba(255,236,186,.9) 40%,
    rgba(255,210,132,.55) 55%,
    rgba(255,192,104,.2) 67%,
    transparent 76%);
animation:sun-glow 7s ease-in-out infinite;
}

.hero-sunrise::after{
content:"";
position:absolute;
inset:0;
background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,219,152,.07) 0deg 5deg,
    transparent 5deg 19deg);
-webkit-mask-image:radial-gradient(circle at 50% 50%, #000 4%, transparent 55%);
mask-image:radial-gradient(circle at 50% 50%, #000 4%, transparent 55%);
animation:ray-turn 120s linear infinite;
}

@keyframes sun-glow{
0%,100%{ opacity:.8; transform:translate(-50%,-50%) scale(1); }
50%{ opacity:1; transform:translate(-50%,-50%) scale(1.07); }
}

@keyframes ray-turn{
from{ transform:rotate(0deg); }
to{ transform:rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
.hero-sunrise::before,
.hero-sunrise::after{
animation:none;
}
}

/* the hero banner and badge sit in front of the tree.
   Raised with `top`, not transform - the float animation owns transform. */
.hero-visual img{
position:relative;
z-index:1;
top:-30px;
}

@media (prefers-reduced-motion: reduce){
.falling-leaf{
animation:none;
opacity:.6;
}
}

@media(max-width:992px){
.hero-tree{
width:64%;
max-width:300px;
opacity:.85;
margin-right:0;
}
.falling-leaf{
display:none;
}
}

/* Floating leaf badge - drifts on its own, and pulls toward the cursor
   with an elastic lag when hovering the hero (see main.js). */
.floating-icon{
position:absolute;
top:6%;
left:2%;
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
color:#fff;
background:radial-gradient(circle at 32% 28%, var(--turmeric), var(--turmeric-dark));
box-shadow:var(--shadow-natural);
will-change:transform;
transition:box-shadow .3s ease, scale .3s ease;
z-index:2;
}

.floating-icon:hover{
box-shadow:0 18px 36px rgba(201,138,43,.45);
scale:1.08;
}

/* Shown once the visitor has spent ~3s chasing the leaf around. Anchored
   to the leaf's home spot; main.js translates it to follow the leaf.
   The pop uses `scale`/`opacity`, NOT transform - transform belongs to
   the JS follow, and the two would cancel each other out. */
.leaf-taunt{
position:absolute;
top:6%;
left:2%;
margin:0;
padding:9px 17px;
border-radius:999px;
background:rgba(14,36,30,.85);
border:1px solid rgba(201,138,43,.45);
color:#F6F1E4;
font-size:14px;
white-space:nowrap;
opacity:0;
scale:.94;
transition:opacity .4s ease, scale .4s ease;
pointer-events:none;
will-change:transform;
z-index:3;
}

.leaf-taunt.show{
opacity:1;
scale:1;
}

/* Speech-bubble tail. --tail is set per-frame in main.js to the leaf's
   centre, so it keeps pointing at the leaf even when the bubble has been
   nudged sideways to stay inside the hero. */
.leaf-taunt::after{
content:"";
position:absolute;
top:-6px;
left:var(--tail,50%);
margin-left:-6px;
width:12px;
height:12px;
background:rgba(14,36,30,.85);
border-left:1px solid rgba(201,138,43,.45);
border-top:1px solid rgba(201,138,43,.45);
transform:rotate(45deg);
}

.leaf-taunt strong{
color:var(--turmeric);
letter-spacing:1.5px;
font-weight:600;
}

@media(max-width:992px){
.leaf-taunt{
display:none;
}
}

@media (prefers-reduced-motion: reduce){
.floating-icon{
transition:none;
}
}

@media(max-width:992px){
.floating-icon{
display:none;
}
}

/* ================= SCROLL PROGRESS ================= */

.scroll-progress{
position:fixed;
top:0;
left:0;
height:3px;
width:0;
background:linear-gradient(90deg,var(--moss),var(--turmeric),var(--clay));
z-index:10000;
pointer-events:none;
}

/* ================= PRACTICE MARQUEE ================= */
/* A continuous band of the practices actually taught here, in Devanagari
   and transliteration. Duplicated twice so the loop is seamless. */

.practice-band{
background:var(--forest-deep);
border-top:1px solid rgba(201,138,43,.25);
border-bottom:1px solid rgba(201,138,43,.25);
overflow:hidden;
padding:20px 0;
position:relative;
z-index:1;
}

.practice-track{
display:flex;
width:max-content;
animation:marquee 38s linear infinite;
}

.practice-run{
display:flex;
flex:0 0 auto;
}

.practice-run > span{
display:inline-flex;
align-items:baseline;
gap:10px;
padding:0 34px;
font-family:'Cormorant Garamond',serif;
font-size:26px;
font-weight:600;
color:#F6F1E4;
white-space:nowrap;
}

.practice-run > span i{
font-family:'Jost',sans-serif;
font-style:normal;
font-size:13px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--turmeric);
}

.practice-run > span::after{
content:"";
width:6px;
height:6px;
border-radius:50%;
background:rgba(201,138,43,.5);
margin-left:34px;
align-self:center;
}

@keyframes marquee{
from{ transform:translateX(0); }
to{ transform:translateX(-50%); }
}

.practice-band:hover .practice-track{
animation-play-state:paused;
}

@media (prefers-reduced-motion: reduce){
.practice-track{
animation:none;
}
}

@media(max-width:576px){
.practice-run > span{
font-size:20px;
padding:0 22px;
}
.practice-run > span::after{
margin-left:22px;
}
}

/* ================= BUTTONS ================= */

.btn-success,
.btn-warning{

padding:14px 32px;

border-radius:40px;

font-weight:600;

}

.btn:hover{

transform:translateY(-3px);

transition:.3s;

}

.btn-success:hover{ box-shadow:0 10px 22px rgba(76,122,84,.35); }
.btn-warning:hover{ box-shadow:0 10px 22px rgba(201,138,43,.35); }

/* ================= SECTION RHYTHM ================= */
/* The page is paced, not evenly spaced. Sections opt into a size:
   .band-sm for compact factual blocks, default for standard content,
   .band-lg for the moments that should feel like arrivals. Uniform
   padding on every section is what makes a long page read as flat. */

section{

padding-top:96px;

padding-bottom:96px;
position:relative;
z-index:1;

}

.band-sm{
padding-top:60px;
padding-bottom:60px;
}

.band-lg{
padding-top:150px;
padding-bottom:150px;
}

@media(max-width:768px){
section{
padding-top:64px;
padding-bottom:64px;
}
.band-lg{
padding-top:88px;
padding-bottom:88px;
}
.band-sm{
padding-top:44px;
padding-bottom:44px;
}
}

/* Full-bleed escape hatch: lets a child break the .container and run
   edge to edge. Used sparingly - it is the strongest scale signal on
   the page, so it only marks genuine peaks. */
.bleed{
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
}

/* breath-ring divider - a single pulsing ring, the same motif as the
   hero. Opt-in now rather than automatic after every section: a pause
   only means something if it isn't everywhere. */
.breath-pause::after{
content:"";
display:block;
width:14px;
height:14px;
margin:70px auto 0;
border:1.5px solid var(--turmeric);
border-radius:50%;
opacity:.55;
animation:breathe 8s ease-in-out infinite;
}

h2{

font-weight:700;
font-style:italic;
margin-bottom:20px;

color:var(--dark);

}

/* Display heading for the page's peak moments. Cormorant holds up at
   very large sizes where the default h2 scale would look timid. */
.h-display{
font-family:'Cormorant Garamond',serif;
font-weight:600;
font-style:italic;
font-size:clamp(2.6rem, 6.2vw, 5.2rem);
line-height:1.02;
letter-spacing:-.015em;
color:var(--forest);
margin-bottom:24px;
}

h6{

font-weight:600;

letter-spacing:3px;

color:var(--primary);

font-size:13px;
display:inline-flex;
align-items:center;
gap:9px;

}

h6::before{
content:"";
width:8px;
height:8px;
flex:0 0 auto;
border-radius:50%;
background:var(--primary);
animation:breathe 8s ease-in-out infinite;
}

/* ================= CARDS ================= */

.card{

border:none;
border-top:3px solid var(--moss);

border-radius:28px 10px 28px 10px;

overflow:hidden;

transition:.4s;

box-shadow:var(--shadow-soft);

background:var(--paper);

}

/* ================= SERVICES BENTO ================= */
/* Asymmetric tiles: Yoga is the flagship offering so it gets the large
   tile, the two therapy tracks stack beside it, and the free-week
   invitation runs full width underneath. */

.bento{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}

.bento-tile{
background:var(--paper);
border-radius:26px;
border-top:3px solid var(--moss);
padding:32px;
box-shadow:var(--shadow-soft);
transition:transform .35s ease, box-shadow .35s ease;
}

.bento-tile:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-natural);
}

.bento-lead{
grid-column:1 / 3;
grid-row:1 / 3;
display:flex;
flex-direction:column;
justify-content:center;
text-align:center;
}

.bento-lead .bento-icon{
margin-left:auto;
margin-right:auto;
}

.bento-clay{ border-top-color:var(--clay); }
.bento-turmeric{ border-top-color:var(--turmeric); }

.bento-icon{
font-size:30px;
color:var(--moss);
margin-bottom:16px;
display:block;
}

.bento-clay .bento-icon{ color:var(--clay); }
.bento-turmeric .bento-icon{ color:var(--turmeric); }

.bento-lead .bento-icon{
font-size:42px;
}

.bento-tile h4{
font-style:italic;
margin-bottom:14px;
color:var(--forest);
}

.bento-lede{
color:var(--bark-soft);
line-height:1.7;
margin-bottom:18px;
max-width:46ch;
margin-left:auto;
margin-right:auto;
}

.bento-list{
list-style:none;
margin:0;
padding:0;
color:var(--bark-soft);
}

.bento-list li{
padding:5px 0;
padding-left:20px;
position:relative;
}

.bento-list li::before{
content:"";
position:absolute;
left:0;
top:14px;
width:7px;
height:7px;
border-radius:50%;
background:currentColor;
opacity:.4;
}

.bento-lead .bento-list{
display:grid;
grid-template-columns:1fr 1fr;
column-gap:20px;
margin-top:4px;
max-width:420px;
margin-left:auto;
margin-right:auto;
text-align:left;
}

.bento-cta{
grid-column:1 / -1;
border-top-color:var(--turmeric);
background:var(--forest);
color:#F6F1E4;
display:flex;
align-items:center;
justify-content:space-between;
gap:26px;
flex-wrap:wrap;
}

.bento-cta h4{
color:#fff;
}

.bento-cta p{
color:#cfdac9;
max-width:52ch;
}

@media(max-width:768px){
.bento{
grid-template-columns:1fr;
}
.bento-lead{
grid-column:auto;
grid-row:auto;
}
.bento-lead .bento-list{
grid-template-columns:1fr;
}
.bento-cta{
grid-column:auto;
}
}

.card:hover{

transform:translateY(-10px);
box-shadow:var(--shadow-natural);

}

/* Scroll-triggered stagger reveal for cards, certificates, gallery
   photos and reviews - JS adds .reveal-item + a per-item transition-delay,
   then flips .in-view via IntersectionObserver as each one enters view. */
/* Uses the standalone `translate` property, NOT transform: the hover-lift
   rules on .card/.bento-tile use transform at the same specificity, and
   whichever came last in the sheet would cancel the other out. These two
   properties compose instead of fighting. */
.reveal-item{
opacity:0;
translate:0 28px;
transition:opacity .6s ease, translate .6s ease;
}

.reveal-item.in-view{
opacity:1;
translate:0 0;
}

@media (prefers-reduced-motion: reduce){
.reveal-item{
opacity:1;
translate:none;
transition:none;
}
}

.card-body{

padding:35px;

}

.card i{

margin-bottom:20px;

}

.card ul{
color:var(--bark-soft);
}

.card ul li{
padding:3px 0;
}

/* ================= FOUNDER ================= */
/* The portrait holds while his credentials scroll past it.
   align-self is required - Bootstrap's .row is a flex container, and a
   stretched flex child has no room to travel. */

.founder-sticky{
position:sticky;
top:110px;
align-self:flex-start;
}

@media(max-width:992px){
.founder-sticky{
position:static;
margin-bottom:30px;
}
}

/* Counters were four numbers in four equal columns. They now read as a
   sentence instead - see .stat-statement further down. */

/* The affiliation is the credential that makes these diplomas worth
   anything, so the university's name carries the weight, not the
   "Study Centre Affiliated with" that introduces it. */
.affil-name{

font-weight:700;

color:var(--forest);

}

/* ================= TABLE ================= */

.table{

background:var(--paper);

box-shadow:var(--shadow-soft);

}

.table th{

/* rem, not px: a fixed 18px here used to silently undo the larger
   .table td/.table th size set near the top of this sheet */
font-size:1.26rem;

letter-spacing:.01em;

}

/* ================= TESTIMONIAL ================= */

.testimonial{

background:var(--paper);

padding:35px;

border-radius:20px;

box-shadow:var(--shadow-soft);

}

/* ================= REVIEWS CAROUSEL ================= */
/* The gallery carousel below reuses this same nav-button pattern
   under its own .gallery-nav class; the certificate wall stays a
   grid, so these rules remain scoped to reviews alone. */

.reviews-carousel{
display:flex;
align-items:center;
gap:14px;
}

.review-nav{
flex:0 0 auto;
width:44px;
height:44px;
border-radius:50%;
border:1.5px solid rgba(76,122,84,.35);
background:var(--paper);
color:var(--forest);
display:flex;
align-items:center;
justify-content:center;
transition:.25s;
}

.review-nav:hover{
background:var(--moss);
color:#fff;
border-color:var(--moss);
}

@media(max-width:576px){
.review-nav{
display:none;
}
}

.reviews-track{
display:flex;
gap:24px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
padding:10px 4px 20px;
flex:1;
scrollbar-width:none;
}

.reviews-track::-webkit-scrollbar{
display:none;
}

.review-card{
flex:0 0 calc(33.333% - 16px);
scroll-snap-align:start;
min-width:260px;
}

.review-card .card-body p{
font-size:16.5px;
color:var(--bark-soft);
line-height:1.65;
}

.review-stars{
color:var(--turmeric);
letter-spacing:2px;
}

.review-card-cta{
background:var(--canvas-alt);
border:1.5px dashed rgba(76,122,84,.4);
}

#reviewsSourceNote{
display:none;
}

@media(max-width:992px){
.review-card{
flex:0 0 calc(50% - 12px);
}
}

@media(max-width:576px){
.review-card{
flex:0 0 85%;
}
}

/* ================= SCHEDULE ================= */

.badge-turmeric{
background:var(--turmeric);
color:#fff;
font-weight:500;
}

.schedule-note{
background:var(--canvas-alt);
border-radius:24px 8px 24px 8px;
padding:30px;
margin-top:20px;
box-shadow:var(--shadow-soft);
}

/* ================= CONTACT ================= */

form input,

form textarea{

border-radius:14px;

padding:14px;

border:1px solid rgba(76,122,84,.3);

background:#fff;

}

form input:focus,

form textarea:focus{

border-color:var(--moss);

box-shadow:0 0 0 .2rem rgba(76,122,84,.18);

}

/* ================= FOOTER ================= */

footer{

background:var(--forest-deep);

}

footer h3{

margin-bottom:20px;
font-family:'Cormorant Garamond',serif;

}

footer p{

color:#d9e2d3;

}

/* ================= IMAGES ================= */

img{

max-width:100%;

}

/* ==========================================================
   ABOUT - EDITORIAL SPLIT
   The portrait runs to the viewport edge instead of sitting
   politely inside the container. First scale break on the page.
========================================================== */

.about-split{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:0;
}

.about-figure{
position:relative;
}

.about-figure img{
width:100%;
height:clamp(420px,62vh,660px);
object-fit:cover;
border-radius:0 180px 0 0;
display:block;
box-shadow:var(--shadow-natural);
}

.about-body{
padding:0 5vw 0 4.5vw;
max-width:660px;
}

.about-body p{
color:var(--bark-soft);
}

/* The six offerings as a typeset list with hairline rules - a checkbox
   grid reads as a feature matrix, which is not what these are. */
.offer-list{
display:grid;
grid-template-columns:1fr 1fr;
column-gap:34px;
margin:34px 0 0;
padding:0;
border-top:1px solid rgba(31,75,63,.2);
}

.offer-list li{
list-style:none;
padding:12px 2px;
border-bottom:1px solid rgba(31,75,63,.2);
display:flex;
align-items:baseline;
gap:11px;
font-size:1.02rem;
color:var(--forest);
}

.offer-list li::before{
content:"";
flex:0 0 auto;
width:6px;
height:6px;
border-radius:50%;
background:var(--turmeric);
}

@media(max-width:992px){
.about-split{
grid-template-columns:1fr;
}
.about-figure img{
height:340px;
border-radius:0 110px 0 0;
}
.about-body{
padding:44px 22px 0;
max-width:none;
}
.offer-list{
grid-template-columns:1fr;
}
}

/* ==========================================================
   BATCH BOARD - class schedule
   Batch times are the most practical fact on this page, so they
   are set plainly: one row per batch, identical shape at every
   width, all four times sharing a single left edge. Nothing here
   is curved, angled or staggered. The previous sunrise-arc
   version looked better in a screenshot and was much harder to
   actually read a time off.
========================================================== */

.batch-board{
border-top:2px solid rgba(31,75,63,.22);
}

.batch-row{
display:grid;
grid-template-columns:minmax(140px,180px) 1fr auto;
grid-template-areas:"time facts book";
align-items:center;
gap:18px 24px;
padding:22px 8px;
border-bottom:1px solid rgba(31,75,63,.16);
position:relative;
transition:background .25s ease;
}

.batch-row:hover{
background:rgba(201,138,43,.07);
}

.batch-time{
grid-area:time;
font-size:34px;
font-weight:600;
line-height:1;
color:var(--forest);
font-variant-numeric:tabular-nums;
letter-spacing:-.5px;
}

.batch-time span{
font-size:15px;
font-weight:500;
letter-spacing:1.6px;
color:var(--bark-soft);
margin-left:3px;
}

.batch-facts{
grid-area:facts;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px 22px;
}

.batch-facts span{
font-size:1rem;
color:var(--bark-soft);
}

/* two classes deep so it outranks `.batch-facts span` above without !important */
.batch-facts .batch-days{
font-weight:600;
color:var(--bark);
}

.batch-book{
grid-area:book;
justify-self:end;
display:inline-block;
padding:11px 24px;
border-radius:999px;
background:var(--moss);
color:#fff;
text-decoration:none;
font-size:1rem;
font-weight:500;
white-space:nowrap;
transition:background .2s ease, transform .2s ease;
}

.batch-book:hover,
.batch-book:focus{
background:var(--moss-dark);
color:#fff;
transform:translateY(-1px);
}

.batch-book:focus-visible{
outline:3px solid var(--turmeric);
outline-offset:3px;
}

/* The batch that is next on the visitor's own clock. Flagged in main.js. */
.batch-row.is-next{
background:rgba(201,138,43,.11);
}

.batch-row.is-next::before{
content:"";
position:absolute;
left:0;
top:8px;
bottom:8px;
width:4px;
border-radius:2px;
background:var(--turmeric);
}

.batch-facts .batch-next-flag{
display:inline-flex;
align-items:center;
gap:8px;
font-size:.8rem;
font-weight:600;
letter-spacing:1.4px;
text-transform:uppercase;
color:var(--turmeric-dark);
}

.batch-next-flag::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:var(--turmeric);
animation:breathe 3s ease-in-out infinite;
}

@media(prefers-reduced-motion:reduce){
.batch-next-flag::before{
animation:none;
}
}

@media(max-width:760px){
.batch-row{
grid-template-columns:1fr auto;
grid-template-areas:
  "time  book"
  "facts book";
gap:8px 18px;
padding:20px 6px;
}
.batch-time{
font-size:30px;
}
}

@media(max-width:460px){
.batch-row{
grid-template-columns:1fr;
grid-template-areas:
  "time"
  "facts"
  "book";
gap:12px;
}
.batch-book{
justify-self:stretch;
text-align:center;
}
}

/* ==========================================================
   STAT STATEMENT
   Replaces the four-column counter row. The numbers stay large
   but they now sit inside a sentence you actually read, rather
   than floating as four disconnected trophies.
========================================================== */

.stat-statement{
background:linear-gradient(135deg,var(--forest),var(--forest-deep));
color:#EDE6D2;
}

.stat-copy{
font-family:'Cormorant Garamond',serif;
font-size:clamp(1.7rem, 3.5vw, 3.05rem);
line-height:1.42;
font-weight:500;
max-width:20ch;
margin:0 auto;
text-align:center;
}

.stat-num{
font-style:italic;
font-weight:700;
color:var(--turmeric);
font-size:1.42em;
letter-spacing:-.02em;
}

.stat-num.is-clay{
color:#E08B52;
}

.stat-copy small{
display:block;
font-family:'Jost',sans-serif;
font-size:12px;
letter-spacing:3.4px;
text-transform:uppercase;
color:rgba(237,230,210,.6);
margin-top:38px;
}

@media(max-width:768px){
.stat-copy{
max-width:none;
}
}

/* ==========================================================
   GALLERY CAROUSEL
   A horizontal scroller: four photos visible at a time on desktop,
   the rest reached by the arrow buttons or a swipe. Tiles are all
   the same size so the row stays even as it scrolls.
========================================================== */

.gallery-carousel{
display:flex;
align-items:center;
gap:14px;
}

.gallery-nav{
flex:0 0 auto;
width:44px;
height:44px;
border-radius:50%;
border:1.5px solid rgba(76,122,84,.35);
background:var(--paper);
color:var(--forest);
display:flex;
align-items:center;
justify-content:center;
transition:.25s;
}

.gallery-nav:hover{
background:var(--moss);
color:#fff;
border-color:var(--moss);
}

@media(max-width:576px){
.gallery-nav{
display:none;
}
}

.mosaic{
display:flex;
gap:14px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
padding:4px 4px 20px;
flex:1;
min-width:0;
scrollbar-width:none;
}

.mosaic::-webkit-scrollbar{
display:none;
}

/* Tiles are real buttons so the track is keyboard reachable - hence
   the appearance reset before any of the visual styling. */
.mosaic-item{
position:relative;
flex:0 0 calc((100% - 3 * 14px) / 4);
scroll-snap-align:start;
aspect-ratio:4 / 3;
overflow:hidden;
border-radius:20px 5px 20px 5px;
cursor:pointer;
background:var(--canvas-alt);
border:none;
padding:0;
margin:0;
font:inherit;
color:inherit;
text-align:left;
display:block;
appearance:none;
-webkit-appearance:none;
}

.mosaic-item img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .7s cubic-bezier(.2,.7,.3,1);
}

.mosaic-item:hover img,
.mosaic-item:focus-visible img{
transform:scale(1.06);
}

.mosaic-cap{
position:absolute;
inset:auto 0 0 0;
padding:34px 15px 13px;
background:linear-gradient(transparent, rgba(14,36,30,.9));
color:#F6F1E4;
font-size:.83rem;
line-height:1.4;
}

.mosaic-item:focus-visible{
outline:3px solid var(--turmeric);
outline-offset:3px;
}

@media(max-width:992px){
.mosaic-item{
flex:0 0 calc((100% - 2 * 14px) / 3);
}
}

@media(max-width:576px){
.mosaic{
gap:10px;
padding:4px 4px 16px;
}
.mosaic-item{
flex:0 0 calc((100% - 10px) / 2);
}
.mosaic-cap{ font-size:.78rem; }
}

/* ==========================================================
   CERTIFICATE WALL
   All of them at once. The count is the argument, and a carousel
   hides it one frame at a time.
========================================================== */

.cert-wall{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
gap:18px;
}

.cert-frame{
position:relative;
padding:10px;
background:var(--paper);
border:1px solid rgba(31,75,63,.16);
border-radius:4px;
box-shadow:var(--shadow-soft);
cursor:pointer;
transition:transform .35s ease, box-shadow .35s ease;
font:inherit;
color:inherit;
display:block;
width:100%;
appearance:none;
-webkit-appearance:none;
}

.cert-frame:hover,
.cert-frame:focus-visible{
transform:translateY(-5px) rotate(-.6deg);
box-shadow:var(--shadow-natural);
}

.cert-frame:focus-visible{
outline:3px solid var(--turmeric);
outline-offset:3px;
}

.cert-frame img{
width:100%;
aspect-ratio:3/4;
object-fit:cover;
display:block;
}

.cert-count{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:1.25rem;
color:var(--bark-soft);
}

/* ==========================================================
   LIGHTBOX - shared by mosaic + certificate wall
========================================================== */

.lightbox{
position:fixed;
inset:0;
z-index:11000;
background:rgba(10,22,18,.93);
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
gap:18px;
padding:34px 20px;
opacity:0;
visibility:hidden;
transition:opacity .3s ease, visibility .3s;
}

.lightbox.is-open{
opacity:1;
visibility:visible;
}

.lightbox img{
max-width:min(1040px,92vw);
max-height:76vh;
object-fit:contain;
border-radius:4px;
box-shadow:0 30px 70px rgba(0,0,0,.5);
}

.lightbox-cap{
color:#EDE6D2;
text-align:center;
max-width:62ch;
font-size:1rem;
line-height:1.55;
}

.lightbox-close{
position:absolute;
top:20px;
right:24px;
width:46px;
height:46px;
border-radius:50%;
border:1px solid rgba(237,230,210,.35);
background:transparent;
color:#EDE6D2;
font-size:22px;
line-height:1;
cursor:pointer;
transition:.25s;
}

.lightbox-close:hover{
background:rgba(237,230,210,.14);
}

.lightbox-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:52px;
height:52px;
border-radius:50%;
border:1px solid rgba(237,230,210,.35);
background:rgba(10,22,18,.5);
color:#EDE6D2;
cursor:pointer;
transition:.25s;
}

.lightbox-nav:hover{
background:rgba(237,230,210,.16);
}

.lightbox-prev{ left:20px; }
.lightbox-next{ right:20px; }

@media(max-width:576px){
.lightbox-nav{ width:42px; height:42px; }
.lightbox-prev{ left:8px; }
.lightbox-next{ right:8px; }
}

/* ==========================================================
   SYLLABUS BAND - teacher training curriculum
   Four tracks of one course, so they read as columns of a single
   syllabus separated by rules, not as four competing cards.
========================================================== */

.syllabus{
display:grid;
grid-template-columns:repeat(4,1fr);
border-top:2px solid var(--forest);
}

.syllabus-col{
padding:30px 26px 8px;
border-right:1px solid rgba(31,75,63,.18);
}

.syllabus-col:last-child{
border-right:none;
}

.syllabus-col h5{
font-style:italic;
font-size:1.5rem;
color:var(--forest);
margin-bottom:6px;
}

.syllabus-track{
font-size:11px;
letter-spacing:2.2px;
text-transform:uppercase;
color:var(--turmeric);
display:block;
margin-bottom:18px;
}

.syllabus-col ul{
list-style:none;
padding:0;
margin:0;
}

.syllabus-col li{
padding:7px 0;
border-bottom:1px solid rgba(31,75,63,.09);
color:var(--bark-soft);
font-size:.98rem;
}

.syllabus-col li:last-child{
border-bottom:none;
}

@media(max-width:900px){
.syllabus{
grid-template-columns:1fr 1fr;
}
.syllabus-col:nth-child(2n){
border-right:none;
}
.syllabus-col:nth-child(-n+2){
border-bottom:1px solid rgba(31,75,63,.18);
}
}

@media(max-width:576px){
.syllabus{
grid-template-columns:1fr;
}
.syllabus-col{
border-right:none;
border-bottom:1px solid rgba(31,75,63,.18);
padding:24px 4px 10px;
}
}

/* ================= ANIMATION ================= */

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

/* ================= MOBILE ================= */

@media(max-width:992px){

.hero{

text-align:center;

padding-top:60px;

}

.hero h1{

font-size:42px;

}

.hero img{

margin-top:40px;

max-width:320px;

}

.navbar-brand{

font-size:24px;

}

}

@media(max-width:768px){

.hero h1{

font-size:34px;

}

.hero h3{

font-size:20px;

}

.card{

margin-bottom:20px;

}

/* `table` alone never won against `.table td` above, so this had no effect.
   Scoped to the cells so the phone size is actually applied - still larger
   than body copy, just enough to keep three columns on a narrow screen. */
.table td,
.table th{

font-size:1.06rem;

padding:12px 12px;

}

}

@media(max-width:576px){

.hero{

padding:80px 15px;

}

.hero p{

font-size:17px;

}

.btn{

width:100%;

margin-bottom:15px;

}

}