/* =============================================================
   FLOWER PALETTE  (drawn from the Sanskar Kendra logo)
   ============================================================= */
:root{
  --cream:#FFFCF6; --cream2:#FBF3E7; --line:#EEE1CC;
  --ink:#4A3524; --ink-soft:#7A6350; --brown:#86573D;

  --red:#E24234; --pink:#FABED5; --pink-strong:#E1589A;
  --blue:#3E9CC7; --blue-flower:#6AADD7;
  --yellow:#F2AF34; --yellow-deep:#D8920A; --yellow-soft:#FDECC2;
  --magenta:#E73F87; --green:#7FB03A; --green-deep:#5C8C28; --green-soft:#EAF3D9;

  --foundation:#E73F87; --foundation-soft:#FCE6F0; --foundation-ink:#B12C6A;
  --ramayan:#EF6A1E; --ramayan-soft:#FDE8D8; --ramayan-ink:#C24810;
  --sun:#F2AF34;

  --shadow:0 20px 44px -26px rgba(74,53,36,.45);
  --shadow-sm:0 10px 24px -18px rgba(74,53,36,.55);
  --r:22px; --r-lg:30px; --wrap:1120px;
  --serif:"Fraunces",Georgia,serif; --sans:"Nunito",system-ui,sans-serif; --round:"Baloo 2","Nunito",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.1; margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.eyebrow{font-family:var(--round); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:600; color:var(--green-deep)}

/* flower rule under headings (echoes the logo's flowers-on-grass) */
.frule{display:block; width:154px; height:24px; margin:14px auto 0}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.55em; cursor:pointer; font-family:var(--round); font-weight:600; font-size:1.02rem;
  padding:.9em 1.7em; border-radius:999px; border:2px solid transparent; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.btn:focus-visible{outline:3px solid var(--yellow); outline-offset:3px}
.btn-primary{background:var(--magenta); color:#fff; box-shadow:0 14px 26px -12px rgba(231,63,135,.75)}
.btn-primary:hover{transform:translateY(-2px); background:#d22f78}
.btn .arrow{transition:transform .18s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* =============================================================
   NAV
   ============================================================= */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,252,246,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:18px; height:72px}
.nav .brand{margin-right:auto; display:flex; align-items:center}
.nav .brand img{height:46px; width:auto}
.nav-links{display:flex; gap:26px}
.nav-links a{font-family:var(--round); font-weight:600; font-size:.95rem; color:var(--brown); text-decoration:none; opacity:.9}
.nav-links a:hover{opacity:1; color:var(--magenta)}

/* =============================================================
   HERO  (no CTAs — logo, tagline, one line, children photo)
   ============================================================= */
.hero{background:linear-gradient(180deg,#FFF7EA 0%, #FFFCF6 100%); position:relative; overflow:hidden}
.hero-inner{max-width:960px; margin:0 auto; padding:56px 24px 8px; text-align:center; position:relative; z-index:2}
.hero .logo{width:min(360px,74vw); margin:0 auto 6px}
.hero .tagline{font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,2.6vw,1.6rem); color:var(--brown); margin:6px auto 0; max-width:620px}
.hero p.lead{max-width:560px; margin:16px auto 0; color:var(--ink-soft); font-size:1.06rem}
.hero .initiative{display:flex; flex-direction:column; align-items:center; gap:9px; margin-top:26px; color:var(--ink-soft); font-family:var(--round); font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase}
.hero .initiative img{height:54px; width:auto; opacity:.95}
.hero-photo{max-width:920px; margin:34px auto 0; padding:0 24px 56px}
.hero-photo figure{margin:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); border:6px solid #fff; position:relative}
.hero-photo img{width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover}
/* petal accents */
.petal{position:absolute; border-radius:50% 50% 50% 0; opacity:.5; z-index:1}

/* =============================================================
   SECTION SCAFFOLD
   ============================================================= */
section{position:relative}
.pad{padding:74px 0}
.section-head{max-width:720px; margin:0 auto 42px; text-align:center}
.section-head h2{font-size:clamp(1.9rem,4.2vw,2.9rem); color:var(--brown)}
.section-head h2 em{font-style:italic; color:var(--magenta)}
.section-head p{color:var(--ink-soft); margin:16px auto 0; max-width:620px}

/* ABOUT */
.about{background:var(--cream)}
.about .prose{max-width:760px; margin:0 auto; text-align:center}
.about .prose p{margin:0 0 16px}
.chips{display:flex; flex-wrap:wrap; gap:11px; justify-content:center; margin-top:26px}
.chips span{font-family:var(--round); font-weight:600; font-size:.92rem; padding:.5em 1.15em; border-radius:999px; border:1.5px solid currentColor}
.chips span::before{content:"✿ "; opacity:.65}

/* GURUDEV band */
.guru{background:linear-gradient(135deg,#FFF3DE 0%, #FDE7C8 60%, #FCE0D2 100%)}
.guru .wrap{display:grid; grid-template-columns:280px 1fr; gap:44px; align-items:center}
.guru .portrait{border-radius:26px; overflow:hidden; box-shadow:var(--shadow); border:6px solid #fff}
.guru .portrait img{width:100%; height:340px; object-fit:cover; object-position:center 30%}
.guru blockquote{margin:0; font-family:var(--serif); font-style:italic; font-size:clamp(1.25rem,2.5vw,1.7rem); color:var(--brown); line-height:1.45}
.guru blockquote .qm{color:var(--yellow); font-size:2.4rem; line-height:0; vertical-align:-.35em; margin-right:.1em}
.guru cite{display:block; font-style:normal; font-family:var(--round); font-weight:700; color:var(--ramayan); margin-top:18px; letter-spacing:.03em; font-size:.95rem}

/* PROGRAMS OVERVIEW */
.programs{background:var(--green-soft)}
.overview{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.ov-card{border-radius:var(--r-lg); padding:32px; color:#fff; position:relative; overflow:hidden; box-shadow:var(--shadow); text-decoration:none; display:block; transition:transform .2s ease}
.ov-card:hover{transform:translateY(-4px)}
.ov-card.f{background:linear-gradient(135deg,#EE5AA0,#C4327A)}
.ov-card.r{background:linear-gradient(135deg,#F5822F,#DA4E13)}
.ov-card .tag{font-family:var(--round); font-weight:600; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; opacity:.95}
.ov-card h3{font-size:1.75rem; margin:8px 0 10px; color:#fff}
.ov-card p{margin:0; opacity:.96; font-size:.99rem}
.ov-card .meta{display:flex; gap:12px; margin-top:20px; font-family:var(--round); font-weight:600; font-size:.84rem; flex-wrap:wrap}
.ov-card .meta span{background:rgba(255,255,255,.2); padding:.35em .85em; border-radius:999px}
.programs .cta{text-align:center; margin-top:38px}

/* LANGUAGE CLOUD */
.lang{background:#FFFBF0}
.lang-cloud{display:flex; flex-wrap:wrap; gap:6px 26px; justify-content:center; align-items:center; max-width:820px; margin:6px auto 0; line-height:1.25}
.lang-cloud b{font-family:var(--round); font-weight:700; display:inline-block}
@media (prefers-reduced-motion: no-preference){ .lang-cloud b{animation:float 6s ease-in-out infinite} }
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* PROGRAM DETAIL */
.program{padding:78px 0}
.program.foundation{background:var(--foundation-soft)}
.program.ramayan{background:var(--ramayan-soft)}
.p-head{max-width:760px; margin:0 auto; text-align:center}
.p-kicker{font-family:var(--round); font-weight:700; letter-spacing:.13em; text-transform:uppercase; font-size:.76rem}
.foundation .p-kicker{color:var(--foundation-ink)} .ramayan .p-kicker{color:var(--ramayan-ink)}
.p-head h2{font-size:clamp(2rem,4.5vw,3rem); margin:8px 0 12px}
.foundation .p-head h2{color:var(--foundation-ink)} .ramayan .p-head h2{color:var(--ramayan-ink)}
.p-head p{color:var(--ink); max-width:640px; margin:0 auto; opacity:.92}
.p-age{display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-family:var(--round); font-weight:700; padding:.5em 1.2em; border-radius:999px; color:#fff}
.foundation .p-age{background:var(--foundation)} .ramayan .p-age{background:var(--ramayan)}

/* program featured photo */
.p-photo{max-width:720px; margin:34px auto 0}
.p-photo figure{margin:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); border:6px solid #fff}
.p-photo img{width:100%; height:auto; display:block; max-height:420px; object-fit:cover}
.p-photo figcaption{text-align:center; margin-top:12px; font-size:.9rem; color:var(--ink-soft); font-style:italic}

.p-cols{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:40px}
.panel{background:#fff; border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow)}
.panel h3{font-size:1.25rem; font-style:italic; margin-bottom:14px}
.foundation .panel h3{color:var(--foundation-ink)} .ramayan .panel h3{color:var(--ramayan-ink)}
.tick{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.tick li{display:flex; gap:12px; align-items:flex-start; font-size:.98rem}
.tick li .dot{flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; margin-top:2px; font-size:.7rem; color:#fff; font-weight:700}
.foundation .tick li .dot{background:var(--foundation)} .ramayan .tick li .dot{background:var(--ramayan)}
.tick li b{color:var(--ink)}

/* formats */
.formats{margin-top:22px}
.format-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-top:16px}
.fmt{background:#fff; border-radius:18px; padding:18px 20px; box-shadow:var(--shadow-sm); border-top:4px solid}
.foundation .fmt{border-color:var(--foundation)} .ramayan .fmt{border-color:var(--ramayan)}
.fmt .code{font-family:var(--round); font-weight:700; font-size:.7rem; letter-spacing:.1em; color:var(--ink-soft); text-transform:uppercase}
.fmt strong{display:block; font-size:1.05rem; margin:4px 0 2px; color:var(--ink)}
.fmt span{font-size:.9rem; color:var(--ink-soft)}

/* optional sheet gallery strip */
.gallery{margin-top:32px}
.gallery h4{font-family:var(--round); font-weight:700; text-align:center; color:var(--ink-soft); letter-spacing:.05em; margin:0 0 16px}
.gscroll{display:grid; grid-auto-flow:column; grid-auto-columns:min(78%,300px); gap:16px; overflow-x:auto; padding:6px 4px 16px; scroll-snap-type:x mandatory}
.gscroll::-webkit-scrollbar{height:8px} .gscroll::-webkit-scrollbar-thumb{background:var(--green); border-radius:999px}
.gcard{scroll-snap-align:start; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); background:#fff}
.gcard img{width:100%; height:210px; object-fit:cover}
.gcard figcaption{padding:12px 16px; font-size:.9rem; color:var(--ink-soft)}

/* TESTIMONIALS (parents only) */
.voices{background:#FFF6E0; padding:78px 0}
.voice-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; max-width:1080px; margin:0 auto}
.voice{background:#fff; border-radius:20px; padding:22px 22px 20px; box-shadow:var(--shadow); border-top:5px solid var(--magenta); position:relative}
.voice[data-program="Foundation"]{border-color:var(--foundation)}
.voice[data-program="Ramayan"]{border-color:var(--ramayan)}
.voice .quotemark{font-family:var(--serif); font-size:2.2rem; line-height:.4; color:var(--yellow); height:18px; display:block}
.voice p{font-size:.95rem; color:var(--ink); margin:0 0 16px}
.voice .who{display:flex; align-items:center; gap:12px}
.voice .avatar{width:46px; height:46px; border-radius:50%; flex:0 0 auto; object-fit:cover; display:grid; place-items:center; font-family:var(--round); font-weight:700; color:#fff; font-size:1.05rem}
.voice .who b{display:block; font-family:var(--round); font-weight:700; color:var(--brown); font-size:.99rem}
.voice .who small{color:var(--ink-soft); font-size:.83rem}
.voice .rolechip{margin-left:auto; font-family:var(--round); font-weight:600; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; padding:.3em .7em; border-radius:999px; background:var(--green-soft); color:var(--green-deep)}

/* CONTACT */
.contact{padding:74px 0}
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px}
.ccard{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow-sm)}
.ccard h4{font-family:var(--round); font-weight:700; color:var(--green-deep); margin:0 0 10px; font-size:1rem}
.ccard p{margin:0; font-size:.94rem; color:var(--ink)}
.ccard a{color:var(--magenta); font-weight:700; text-decoration:none}

/* FOOTER */
.footer{background:var(--cream2); border-top:1px solid var(--line); padding:38px 0 30px; text-align:center}
.footer .logos{display:flex; gap:30px; justify-content:center; align-items:center; flex-wrap:wrap; margin-bottom:16px}
.footer .logos img.sk{height:56px} .footer .logos img.aol{height:40px; opacity:.9}
.footer p{margin:4px 0; color:var(--ink-soft); font-size:.86rem}
.footer .grass{height:10px; margin-top:22px; background:
  radial-gradient(circle at 12% 0,var(--red) 3px,transparent 4px),
  radial-gradient(circle at 30% 0,var(--yellow) 3px,transparent 4px),
  radial-gradient(circle at 50% 0,var(--blue-flower) 3px,transparent 4px),
  radial-gradient(circle at 70% 0,var(--magenta) 3px,transparent 4px),
  radial-gradient(circle at 88% 0,var(--pink-strong) 3px,transparent 4px),
  linear-gradient(var(--green),var(--green))}
.footer .grass{background-repeat:no-repeat; background-size:100% 3px,100% 3px,100% 3px,100% 3px,100% 3px,100% 3px; background-position:0 6px}

/* reveal */
.reveal{opacity:0; transform:translateY(18px)}
.reveal.in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none} }

/* responsive */
@media (max-width:900px){ .about-cols,.overview,.p-cols,.guru .wrap{grid-template-columns:1fr} .guru .portrait{max-width:320px; margin:0 auto} }
@media (max-width:640px){ body{font-size:16px} .nav-links{display:none} .pad,.program,.voices,.contact{padding:52px 0} }