/* ═══════════════════════════════════════════════════════════
   GOBIND SARVAR — "MORNING AT THE SARVAR" · FABLE redesign
   Warm storybook classroom: cream paper, royal-blue ink,
   marigold / saffron / leaf accents, sticker cards, waves.
   ═══════════════════════════════════════════════════════════ */

:root {
  --cream:     #FFF6E8;
  --paper:     #FFFDF7;
  --w:         #FFFFFF;
  --ink:       #1E2C66;   /* deep blue ink for text */
  --ink-soft:  #4A5688;
  --ink-mute:  #8890AF;
  --royal:     #1A56DB;
  --navy:      #12225C;
  --sky:       #7EB5FF;
  --sky-soft:  #EAF3FF;
  --mari:      #FFB020;
  --mari-soft: #FFF3D6;
  --saffron:   #FF8A3C;
  --leaf:      #33B679;
  --leaf-soft: #E4F7EC;
  --rose:      #FF6B8A;
  --line:      #F0E5CF;
  --disp:      'Fraunces', Georgia, serif;
  --body:      'Nunito', system-ui, sans-serif;
  --pa:        'Noto Sans Gurmukhi', sans-serif;
  --r:         22px;
  --rr:        30px;
  --bounce:    cubic-bezier(.34,1.56,.64,1);
  --ease:      cubic-bezier(.22,1,.36,1);
  --card-sh:   0 3px 0 rgba(30,44,102,.08), 0 14px 34px -14px rgba(30,44,102,.16);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  font-family:var(--body);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-size:16px;
}
::selection{background:var(--mari);color:var(--navy)}
img{max-width:100%;display:block}
a{color:inherit}

/* ── Cursor blob ── */
.cursor-blob{
  position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;
  border:2px solid var(--royal);background:transparent;
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  transition:width .35s var(--bounce),height .35s var(--bounce),background .3s,border-color .3s;
}
.cursor-blob.is-hover{width:52px;height:52px;background:rgba(255,176,32,.25);border-color:var(--mari)}
.cursor-blob.is-drag{width:66px;height:66px;background:rgba(126,181,255,.25);border-color:var(--sky)}
@media (hover:none),(pointer:coarse){.cursor-blob{display:none}}

/* ── Scroll progress ── */
.scroll-progress{
  position:fixed;top:0;left:0;height:4px;width:100%;z-index:1200;
  background:linear-gradient(90deg,var(--mari),var(--saffron),var(--rose),var(--royal));
  border-radius:0 99px 99px 0;
  transform-origin:0 50%;transform:scaleX(0);
}

/* ═══════════ PRELOADER ═══════════ */
.preloader{
  position:fixed;inset:0;z-index:5000;background:var(--cream);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  /* safety: if JS never runs, uncover the page anyway */
  animation:preSafety .5s ease 2.5s forwards;
}
@keyframes preSafety{to{opacity:0;visibility:hidden}}
.preloader-inner{text-align:center;position:relative;z-index:2}
.pre-crest{width:96px;margin:0 auto;transform:scale(0);filter:drop-shadow(0 10px 24px rgba(30,44,102,.25))}
.pre-name{margin-top:22px;font-family:var(--disp);font-weight:800;font-size:34px;color:var(--ink)}
.pre-ch{display:inline-block;transform:translateY(40px);opacity:0}
.pre-ch-b{color:var(--royal)}
.pre-wave{
  position:absolute;left:0;right:0;bottom:-2px;width:100%;height:16vh;z-index:1;
}
.pre-wave path{fill:var(--royal)}

/* ═══════════ NAV — floating pill ═══════════ */
nav{
  position:fixed;top:18px;left:0;right:0;z-index:900;
  display:flex;justify-content:center;padding:0 18px;
  transition:transform .5s var(--ease);
}
nav.is-hidden{transform:translateY(-130%)}
.nav-pill-wrap{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  width:100%;max-width:1200px;height:66px;padding:0 12px 0 18px;
  background:rgba(255,253,247,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:2px solid var(--ink);border-radius:99px;
  box-shadow:0 4px 0 rgba(30,44,102,.9);
  transition:box-shadow .3s,background .3s;
}
nav.is-scrolled .nav-pill-wrap{box-shadow:0 6px 0 rgba(30,44,102,.9),0 18px 40px -18px rgba(30,44,102,.35)}
.nav-logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.nav-logo img{width:40px;height:auto}
.nav-logo-txt{display:flex;flex-direction:column;line-height:1.15}
.nav-logo-txt strong{font-family:var(--disp);font-size:16px;font-weight:800;color:var(--ink)}
.nav-logo-txt em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.nav-links{display:flex;gap:2px;list-style:none}
.nav-links a{
  display:block;padding:9px 15px;border-radius:99px;
  font-size:14px;font-weight:800;color:var(--ink-soft);text-decoration:none;
  transition:background .25s,color .25s,transform .25s var(--bounce);
}
.nav-links a:hover{background:var(--mari-soft);color:var(--ink);transform:rotate(-2deg) scale(1.05)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-donate{
  display:inline-block;padding:11px 22px;border-radius:99px;
  background:var(--mari);color:var(--navy);text-decoration:none;
  font-size:13.5px;font-weight:900;
  border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);
  transition:transform .2s var(--bounce),box-shadow .2s;
}
.nav-donate:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.nav-donate:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.nav-burger{
  width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);
  background:var(--w);cursor:pointer;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 3px 0 var(--ink);
  transition:transform .2s var(--bounce);
}
.nav-burger:hover{transform:rotate(6deg)}
.nav-burger span{display:block;width:18px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .35s var(--bounce)}
.nav-burger.open span:nth-child(1){transform:translateY(4.2px) rotate(45deg)}
.nav-burger.open span:nth-child(2){transform:translateY(-4.2px) rotate(-45deg)}

/* ═══════════ MENU OVERLAY ═══════════ */
.menu-overlay{
  position:fixed;inset:0;z-index:800;background:var(--royal);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 9vw;visibility:hidden;
  clip-path:circle(0% at calc(100% - 60px) 50px);
}
.menu-doodle{
  position:absolute;color:rgba(255,255,255,.16);user-select:none;pointer-events:none;
  font-family:var(--pa);
}
.md-1{top:12%;left:8%;font-size:44px}
.md-2{top:20%;right:14%;font-size:60px}
.md-3{bottom:14%;right:8%;font-size:26vh}
.md-4{bottom:28%;left:16%;font-size:52px}
.menu-links{display:flex;flex-direction:column;gap:4px}
.menu-link{
  position:relative;text-decoration:none;color:var(--cream);
  font-family:var(--disp);font-size:clamp(34px,6.4vh,56px);font-weight:800;
  padding:6px 0;overflow:hidden;width:fit-content;
  transition:transform .3s var(--bounce);
}
.menu-link span{display:inline-block;transform:translateY(120%)}
.menu-link::before{
  content:attr(data-index);position:absolute;left:-2em;top:50%;transform:translateY(-50%);
  font-family:var(--body);font-size:12px;font-weight:900;letter-spacing:.18em;
  color:var(--mari);
}
.menu-link:hover{transform:rotate(-1.5deg) translateX(8px);color:var(--mari)}
.menu-footer{position:absolute;bottom:5vh;left:9vw;display:flex;gap:24px}
.menu-footer a{
  color:rgba(255,246,232,.75);text-decoration:none;font-size:13.5px;font-weight:800;
  transition:color .3s;
}
.menu-footer a:hover{color:var(--mari)}
@media (max-width:640px){.menu-link::before{display:none}}

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  background:linear-gradient(180deg,#FFF9EE 0%,var(--cream) 46%,#EAF3FF 100%);
  overflow:hidden;padding:120px 0 90px;
}
#pond-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero-float{
  position:absolute;font-size:26px;color:var(--mari);opacity:.7;
  pointer-events:none;user-select:none;
}
.hf-1{top:16%;left:6%;color:var(--sky)}
.hf-2{top:24%;right:8%;color:var(--rose);font-size:30px}
.hf-3{bottom:22%;left:12%;color:var(--leaf)}
.hf-4{bottom:30%;right:16%;color:var(--mari);font-size:20px}

.hero-w{
  position:relative;z-index:3;max-width:1250px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;width:100%;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px;border-radius:99px;
  background:var(--w);border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);
  font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);
}
.hero-dot{
  width:9px;height:9px;border-radius:50%;background:var(--leaf);
  animation:heroDot 2s ease-in-out infinite;
}
@keyframes heroDot{0%,100%{transform:scale(1)}50%{transform:scale(.55)}}

.hero-h{
  margin-top:30px;font-family:var(--disp);font-weight:900;
  font-size:clamp(42px,6.4vw,84px);line-height:1.02;letter-spacing:-.01em;
  color:var(--ink);
}
.hero-word-row{display:block}
.hero-word{display:inline-block;transform-origin:50% 100%}
.hero-word-em{
  font-style:italic;font-weight:700;color:var(--royal);position:relative;
}
.squiggle{
  position:absolute;left:0;right:0;bottom:-.18em;width:100%;height:.22em;
  overflow:visible;
}
.squiggle path{
  stroke:var(--mari);stroke-width:5;stroke-linecap:round;
}
.hero-desc{
  max-width:520px;margin-top:26px;font-size:17px;line-height:1.75;
  color:var(--ink-soft);font-weight:600;
}
.hero-desc strong{color:var(--ink);font-weight:900}
.hero-btns{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

.btn{
  display:inline-block;padding:16px 30px;border-radius:99px;
  font-family:var(--body);font-size:15px;font-weight:900;text-decoration:none;
  border:2px solid var(--ink);
  transition:transform .2s var(--bounce),box-shadow .2s;
}
.btn-royal{background:var(--royal);color:var(--w);box-shadow:0 4px 0 var(--ink)}
.btn-outline{background:var(--w);color:var(--ink);box-shadow:0 4px 0 var(--ink)}
.btn:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 7px 0 var(--ink)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}

.hero-meta{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap}
.hero-stat strong{
  display:block;font-family:var(--disp);font-size:26px;font-weight:900;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.hero-stat span{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}

/* hero visual */
.hero-visual{position:relative}
.hero-frame{
  border-radius:44% 56% 52% 48% / 46% 44% 56% 54%;
  overflow:hidden;border:4px solid var(--ink);
  box-shadow:0 8px 0 rgba(30,44,102,.85),0 30px 60px -20px rgba(30,44,102,.3);
  transform:rotate(1.6deg);
  animation:blobMorph 12s ease-in-out infinite alternate;
}
@keyframes blobMorph{
  0%{border-radius:44% 56% 52% 48% / 46% 44% 56% 54%}
  100%{border-radius:56% 44% 46% 54% / 52% 58% 42% 48%}
}
.hero-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.hero-sticker{
  position:absolute;padding:12px 18px;border-radius:16px;
  background:var(--w);border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);
  font-weight:900;font-size:14px;line-height:1.25;text-align:center;color:var(--ink);
}
.hero-sticker small{font-weight:800;font-size:10.5px;color:var(--ink-mute);letter-spacing:.06em;text-transform:uppercase}
.hs-1{top:-18px;right:6%;transform:rotate(5deg);background:var(--mari)}
.hs-2{bottom:12%;left:-26px;transform:rotate(-7deg);background:var(--sky-soft)}
.hs-3{bottom:-14px;right:12%;transform:rotate(3deg);background:var(--leaf-soft)}

.hero-scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:11px;font-weight:900;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-mute);
}
.hero-scroll svg{animation:dipDown 1.8s var(--ease) infinite}
@keyframes dipDown{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ═══════════ RIBBONS ═══════════ */
.ribbons{position:relative;z-index:5;margin:-30px 0 0;pointer-events:none;overflow-x:clip;padding:14px 0}
.ribbon{overflow:hidden;white-space:nowrap;padding:15px 0;width:110vw;margin-left:-5vw}
.ribbon-blue{background:var(--royal);transform:rotate(-1.4deg);box-shadow:0 6px 24px -8px rgba(26,86,219,.4)}
.ribbon-gold{background:var(--mari);transform:rotate(1deg);margin-top:-14px}
.ribbon-track{display:inline-flex;align-items:center;gap:30px;will-change:transform}
.ribbon-blue .ribbon-track span{font-family:var(--disp);font-weight:800;font-style:italic;font-size:21px;color:var(--cream)}
.ribbon-blue .ribbon-track i{font-style:normal;font-size:13px;color:var(--mari)}
.ribbon-gold .ribbon-track span{font-family:var(--pa);font-weight:700;font-size:19px;color:var(--navy)}
.ribbon-gold .ribbon-track i{font-style:normal;font-size:13px;color:var(--royal)}

/* ═══════════ SHARED ═══════════ */
.sec-w{max-width:1250px;margin:0 auto;padding:0 40px}
.sec-head{max-width:640px;margin-bottom:56px}
.sec-head-center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{
  display:inline-block;padding:7px 16px;border-radius:99px;margin-bottom:20px;
  background:var(--w);border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);
  font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);transform:rotate(-1.5deg);
}
.eyebrow-cream{background:var(--mari);color:var(--navy)}
.eyebrow-ink{background:var(--navy);color:var(--cream);border-color:var(--navy);box-shadow:0 3px 0 rgba(0,0,0,.25)}
.sec-h{
  font-family:var(--disp);font-weight:900;color:var(--ink);
  font-size:clamp(32px,4.4vw,54px);line-height:1.08;letter-spacing:-.01em;
}
.sec-h-cream{color:var(--cream)}
.sec-h em.hl,.donate-h em{font-style:italic;font-weight:700}
/* highlighter swipes */
.hl{position:relative;display:inline-block;padding:0 .12em;z-index:1;white-space:nowrap}
.hl::before{
  content:'';position:absolute;inset:.12em -.06em;z-index:-1;
  border-radius:.4em .6em .5em .7em/.7em .4em .8em .4em;
  transform:rotate(-1.2deg) scaleX(0);transform-origin:0 50%;
  transition:transform .7s var(--ease) .15s;
}
.hl.hl-on::before{transform:rotate(-1.2deg) scaleX(1)}
.hl-gold::before{background:var(--mari)}
.hl-sky::before{background:var(--sky)}
.hl-leaf::before{background:#9FE8C3}
.hl-rose::before{background:#FFC6D2}
.hl-mari::before{background:var(--saffron)}
.sec-sub{margin-top:16px;font-size:16px;line-height:1.7;color:var(--ink-soft);font-weight:600}
.sec-foot{margin-top:44px;text-align:center}
.sec-foot a{
  display:inline-block;font-size:14.5px;font-weight:900;color:var(--royal);text-decoration:none;
  border-bottom:2.5px dashed var(--sky);padding-bottom:3px;
  transition:transform .25s var(--bounce),border-color .3s;
}
.sec-foot a:hover{transform:rotate(-1deg) scale(1.04);border-color:var(--royal)}

[data-reveal]{opacity:0;transform:translateY(40px) rotate(.5deg)}

/* wave dividers */
.wave-div{line-height:0;position:relative;z-index:2}
.wave-div svg{width:100%;height:70px;display:block}
.wave-into-blue{background:var(--cream)}
.wave-into-blue path{fill:var(--royal)}
.wave-outof-blue{background:var(--paper)}
.wave-outof-blue path{fill:var(--royal)}
.wave-into-gold{background:var(--cream)}
.wave-into-gold path{fill:var(--mari)}
.wave-into-navy{background:var(--cream)}
.wave-into-navy path{fill:var(--navy)}

/* ═══════════ PILLARS ═══════════ */
.pillars-sec{background:var(--cream);padding:100px 0 110px}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.pillar-card{
  position:relative;background:var(--w);
  border:2.5px solid var(--ink);border-radius:var(--rr);
  padding:40px 34px 38px;
  box-shadow:var(--card-sh);
  transform:rotate(var(--card-rot,0deg));
  transition:transform .3s var(--bounce),box-shadow .3s;
}
.wiggle-card:hover{transform:rotate(0deg) translateY(-8px) scale(1.02);box-shadow:0 6px 0 rgba(30,44,102,.85),0 26px 44px -16px rgba(30,44,102,.25)}
.pillar-glyph{
  font-size:34px;width:72px;height:72px;border-radius:24px;
  background:var(--card-soft);border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s var(--bounce);
}
.pillar-card:hover .pillar-glyph{transform:rotate(-8deg) scale(1.12)}
.pillar-card h3{margin-top:22px;font-family:var(--disp);font-size:28px;font-weight:900;color:var(--card-accent)}
.pillar-pa{font-family:var(--pa);font-size:16px;color:var(--ink-mute);margin-top:2px;font-weight:700}
.pillar-card>p:last-of-type{margin-top:12px;font-size:14.5px;line-height:1.7;color:var(--ink-soft);font-weight:600}

/* ═══════════ GOALS ═══════════ */
.goals-sec{background:var(--royal);position:relative}
.goals-pin{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;padding:80px 0 60px;
}
.goals-head{max-width:1250px;width:100%;margin:0 auto;padding:0 40px 44px}
.goals-hint{
  margin-top:14px;font-size:11.5px;font-weight:900;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,246,232,.55);
}
.goals-track{display:flex;gap:26px;padding:20px 40px;width:max-content;will-change:transform}
.goal-card{
  position:relative;width:min(380px,76vw);flex-shrink:0;
  background:var(--paper);border:2.5px solid var(--navy);border-radius:var(--rr);
  padding:38px 34px 42px;color:var(--ink);
  box-shadow:0 5px 0 var(--navy);
  transform:rotate(var(--goal-rot,0deg));
  transition:transform .3s var(--bounce);
}
.goal-card:nth-child(odd){--goal-rot:-1deg}
.goal-card:nth-child(even){--goal-rot:1deg}
.goal-card:hover{transform:rotate(0deg) translateY(-8px)}
.goal-num{
  position:absolute;top:-20px;left:28px;
  width:52px;height:52px;border-radius:50%;
  background:var(--g,var(--mari));border:2.5px solid var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:24px;font-weight:900;color:var(--navy);
  box-shadow:0 3px 0 var(--navy);
}
.goal-emoji{font-size:40px;margin-top:14px}
.goal-card h3{margin-top:16px;font-family:var(--disp);font-size:26px;font-weight:900;letter-spacing:-.01em}
.goal-pa{font-family:var(--pa);font-size:17px;color:var(--royal);margin-top:6px;font-weight:700}
.goal-sub{margin-top:12px;font-size:14.5px;line-height:1.65;color:var(--ink-soft);font-weight:600}
.goal-card::after{
  content:'';position:absolute;left:26px;right:26px;bottom:16px;height:8px;
  background:radial-gradient(circle at 4px 4px,var(--g,var(--mari)) 2.6px,transparent 3px);
  background-size:14px 8px;background-repeat:repeat-x;opacity:.9;
}
.goal-card-tagline{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;
  background:var(--mari);border-color:var(--navy);
}
.goal-card-tagline::after{display:none}
.goal-tagline{font-family:var(--disp);font-size:32px;line-height:1.2;font-weight:900;color:var(--navy)}
.goal-tagline em{font-style:italic;font-weight:700;color:var(--royal)}
.goal-cta{
  display:inline-block;font-size:14px;font-weight:900;color:var(--cream);text-decoration:none;
  padding:13px 24px;border-radius:99px;background:var(--navy);
  border:2px solid var(--navy);box-shadow:0 3px 0 rgba(0,0,0,.3);
  transition:transform .2s var(--bounce);
}
.goal-cta:hover{transform:translateY(-3px) rotate(-1.5deg)}
.goals-progress{
  max-width:1250px;width:calc(100% - 80px);margin:44px auto 0;
  height:10px;background:rgba(255,246,232,.22);border-radius:99px;position:relative;
  border:2px solid rgba(255,246,232,.35);
}
.goals-progress span{
  position:absolute;inset:1px;background:var(--mari);border-radius:99px;
  transform-origin:0 50%;transform:scaleX(0);display:block;
}
@media (max-width:1023px){
  .goals-pin{min-height:0;padding:90px 0 70px}
  .goals-track{
    width:auto;overflow-x:auto;padding-bottom:26px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  }
  .goal-card{scroll-snap-align:center}
  .goals-progress{display:none}
}

/* ═══════════ TIMETABLE ═══════════ */
.tt-sec{background:var(--paper);padding:100px 0 110px}
.tt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.tt-card{
  position:relative;background:var(--w);border:2.5px solid var(--ink);
  border-radius:var(--rr);padding:46px 34px 40px;text-align:center;
  box-shadow:var(--card-sh);
  transform:rotate(var(--card-rot,0deg));
  transition:transform .3s var(--bounce),box-shadow .3s;
}
.tt-tape{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:110px;height:28px;background:var(--tt-soft);
  border:2px dashed var(--tt);border-radius:6px;opacity:.9;
}
.tt-arc{width:124px;height:124px;margin:0 auto;transform:rotate(-90deg)}
.tt-arc-bg{fill:none;stroke:var(--tt-soft);stroke-width:9}
.tt-arc-fill{
  fill:none;stroke:var(--tt);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:326.7;stroke-dashoffset:326.7;
}
.tt-arc-label{
  transform:rotate(90deg);transform-origin:60px 60px;
  font-family:var(--body);font-size:17px;font-weight:900;fill:var(--tt);
}
.tt-day{margin-top:22px;font-family:var(--disp);font-size:30px;font-weight:900;color:var(--ink)}
.tt-pa{font-family:var(--pa);font-size:15px;font-weight:700;color:var(--tt);margin-top:2px}
.tt-time{
  display:flex;justify-content:center;align-items:center;gap:10px;margin-top:18px;
  font-size:16.5px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;
}
.tt-time i{font-style:normal;color:var(--ink-mute);font-size:13px}
.tt-dur{
  margin-top:16px;display:inline-block;padding:8px 18px;border-radius:99px;
  background:var(--tt-soft);border:2px solid var(--tt);
  color:var(--tt);font-size:13px;font-weight:900;font-variant-numeric:tabular-nums;
}

/* ═══════════ CALENDAR ═══════════ */
.cal-sec{background:var(--cream);padding:100px 0 110px}
.cal-filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.cal-chip{
  padding:11px 20px;border-radius:99px;
  border:2px solid var(--ink);background:var(--w);color:var(--ink-soft);
  font-family:var(--body);font-size:13.5px;font-weight:900;cursor:pointer;
  box-shadow:0 3px 0 var(--ink);
  transition:transform .2s var(--bounce),background .25s,color .25s;
}
.cal-chip:hover{transform:translateY(-2px) rotate(-1.5deg)}
.cal-chip.active{background:var(--royal);color:var(--w)}
.cal-list{
  background:var(--w);border:2.5px solid var(--ink);border-radius:var(--rr);
  padding:14px 26px 26px;box-shadow:var(--card-sh);
}
.cal-q::before{
  content:attr(data-q);display:block;margin:26px 0 10px;
  font-family:var(--disp);font-style:italic;
  font-size:15px;font-weight:700;color:var(--ink-mute);
}
.cal-row{
  display:flex;align-items:center;gap:18px;
  padding:14px 16px;border-radius:16px;border:2px solid transparent;
  transition:background .25s,border-color .25s,transform .25s var(--bounce),opacity .3s,filter .3s;
}
.cal-row:hover{background:var(--cream);border-color:var(--line);transform:translateX(8px) rotate(-.3deg)}
.cal-row.is-dim{opacity:.16;filter:saturate(0)}
.cal-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:2px solid var(--ink)}
.cal-row[data-type="kd"] .cal-dot{background:var(--sky)}
.cal-row[data-type="ex"] .cal-dot{background:var(--saffron)}
.cal-row[data-type="hol"] .cal-dot{background:var(--leaf)}
.cal-date{
  display:flex;flex-direction:column;min-width:66px;
  font-size:17px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;
}
.cal-date em{font-style:normal;font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.cal-name{flex:1;font-size:15px;font-weight:800;color:var(--ink-soft)}
.cal-tag{
  padding:6px 14px;border-radius:99px;font-size:11px;font-weight:900;
  border:2px solid var(--ink);
}
.cal-tag.kd{background:var(--sky-soft);color:var(--royal)}
.cal-tag.ex{background:#FFF0DC;color:#C05A00}
.cal-tag.hol{background:var(--leaf-soft);color:#177A4B}

/* ═══════════ INSTAGRAM ═══════════ */
.ig-sec{background:var(--cream);padding:20px 0 120px;overflow:hidden}
.ig-rail-wrap{cursor:grab}
.ig-rail-wrap:active{cursor:grabbing}
.ig-rail{
  display:flex;gap:26px;padding:26px 40px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.ig-rail::-webkit-scrollbar{display:none}
.ig-tile{
  position:relative;flex-shrink:0;width:290px;
  border-radius:20px;text-decoration:none;
  background:var(--w);border:2.5px solid var(--ink);
  padding:12px 12px 0;box-shadow:var(--card-sh);
  transform:rotate(var(--tile-rot,0deg));
  transition:transform .3s var(--bounce),box-shadow .3s;
}
.ig-tile:hover{transform:rotate(0deg) translateY(-10px) scale(1.03);box-shadow:0 6px 0 rgba(30,44,102,.85),0 30px 50px -18px rgba(30,44,102,.3)}
.ig-tile img{
  width:100%;height:300px;object-fit:cover;border-radius:12px;
  border:2px solid var(--line);
  user-select:none;-webkit-user-drag:none;
}
.ig-tile-label{
  padding:14px 6px 16px;text-align:center;
  font-family:var(--disp);font-style:italic;font-weight:700;
  font-size:17px;color:var(--ink);
}
.ig-tile-follow{
  display:flex;align-items:center;justify-content:center;
  background:var(--royal);min-height:360px;padding:12px;
}
.ig-follow-inner{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.ig-follow-emoji{font-size:44px}
.ig-follow-at{font-size:12.5px;font-weight:800;color:rgba(255,246,232,.75)}
.ig-follow-cta{font-family:var(--disp);font-style:italic;font-weight:800;font-size:26px;color:var(--cream)}

/* ═══════════ DONATE ═══════════ */
.donate-sec{
  position:relative;background:var(--mari);
  padding:110px 0 130px;text-align:center;overflow:hidden;
}
.donate-sun{
  position:absolute;color:rgba(18,34,92,.14);user-select:none;pointer-events:none;
}
.ds-1{top:12%;left:8%;font-size:70px}
.ds-2{bottom:16%;right:9%;font-size:90px}
.ds-3{top:22%;right:20%;font-size:40px}
.donate-w{position:relative;z-index:2;max-width:800px}
.donate-h{
  font-family:var(--disp);font-weight:900;color:var(--navy);
  font-size:clamp(36px,5.4vw,64px);line-height:1.1;letter-spacing:-.01em;
}
.donate-h em{font-style:italic;font-weight:700;color:var(--royal)}
.donate-sub{
  max-width:600px;margin:24px auto 0;font-size:16px;line-height:1.75;
  color:rgba(18,34,92,.78);font-weight:700;
}
.donate-cta-wrap{margin-top:42px;display:flex;flex-direction:column;align-items:center;gap:16px}
.donate-btn{
  display:inline-flex;align-items:center;
  padding:20px 48px;border-radius:99px;background:var(--navy);color:var(--cream);
  font-size:17px;font-weight:900;text-decoration:none;
  border:2.5px solid var(--navy);box-shadow:0 6px 0 rgba(0,0,0,.3);
  transition:transform .2s var(--bounce),box-shadow .2s;
}
.donate-btn .magnetic-inner{display:inline-flex;align-items:center;gap:10px}
.donate-btn:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 10px 0 rgba(0,0,0,.3)}
.donate-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.3)}
.donate-secure{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:800;color:rgba(18,34,92,.65);
}

/* ═══════════ CONNECT ═══════════ */
.connect-sec{background:var(--cream);padding:110px 0 120px}
.connect-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;
  max-width:1150px;margin:0 auto;
}
.cn-card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  background:var(--w);border:2.5px solid var(--ink);border-radius:var(--rr);
  padding:32px 28px 30px;text-decoration:none;
  box-shadow:var(--card-sh);
  transform:rotate(var(--card-rot,0deg));
  transition:transform .3s var(--bounce),box-shadow .3s;
}
.cn-icon{
  width:56px;height:56px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  color:var(--w);border:2px solid var(--ink);
  transition:transform .35s var(--bounce);
}
.cn-card:hover .cn-icon{transform:rotate(-10deg) scale(1.12)}
.cn-ig{background:linear-gradient(135deg,#7C3AED,#E1306C,#F59E0B)}
.cn-fb{background:#1877F2}
.cn-wa{background:#25D366}
.cn-map{background:var(--royal)}
.cn-card strong{margin-top:18px;font-family:var(--disp);font-size:17px;font-weight:900;color:var(--ink);line-height:1.3}
.cn-card span{margin-top:8px;font-size:13px;line-height:1.65;color:var(--ink-soft);font-weight:700}
.cn-arrow{
  position:absolute;top:22px;right:24px;font-style:normal;font-size:16px;color:var(--ink-mute);
  transition:transform .3s var(--bounce),color .3s;
}
.cn-card:hover .cn-arrow{transform:translate(4px,-4px) rotate(8deg);color:var(--royal)}
.cn-static{cursor:default}

/* ═══════════ FOOTER ═══════════ */
.footer{background:var(--navy);color:var(--cream);padding:90px 0 0}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:52px;
  padding-bottom:64px;border-bottom:2px dashed rgba(255,246,232,.25);
}
.footer-brand img{width:62px;height:auto}
.footer-brand strong{display:block;margin-top:18px;font-family:var(--disp);font-size:20px;font-weight:900}
.footer-brand p{margin-top:12px;font-size:13.5px;line-height:1.75;color:rgba(255,246,232,.65);max-width:340px;font-weight:600}
.footer-addr{font-size:12.5px!important}
.footer-col h4{
  font-size:11.5px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mari);margin-bottom:20px;
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:12px}
.footer-col a{
  display:inline-block;color:rgba(255,246,232,.75);text-decoration:none;
  font-size:14.5px;font-weight:800;
  transition:color .25s,transform .25s var(--bounce);
}
.footer-col a:hover{color:var(--mari);transform:rotate(-1.5deg) translateX(4px)}
.footer-muted{color:rgba(255,246,232,.35);font-size:14px;font-weight:700}
.footer-bottom{
  max-width:1250px;margin:0 auto;padding:28px 40px 34px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12.5px;font-weight:700;color:rgba(255,246,232,.5);
}
.footer-tagline{font-family:var(--disp);font-size:14px}
.footer-tagline em{color:var(--mari);font-style:italic}

/* ═══════════ MAGNETIC ═══════════ */
.magnetic{will-change:transform}
.magnetic-inner{display:inline-block;will-change:transform}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1080px){
  .nav-links{display:none}
  .nav-burger{display:flex}
}
@media (max-width:960px){
  .hero-w{grid-template-columns:1fr;gap:60px}
  .hero-visual{max-width:440px;margin:0 auto}
  .hero-copy{text-align:center}
  .hero-desc{margin-left:auto;margin-right:auto}
  .hero-btns,.hero-meta{justify-content:center}
}
@media (max-width:900px){
  .pillars-grid,.tt-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .footer-grid{grid-template-columns:1fr;gap:40px}
  .sec-w{padding:0 24px}
  .goals-head{padding:0 24px 40px}
  .goals-track{padding:20px 24px 26px}
  .ig-rail{padding:26px 24px}
  .footer-bottom{justify-content:center;text-align:center}
  .hero{padding:130px 0 90px}
}
@media (max-width:560px){
  .cal-row{flex-wrap:wrap;row-gap:8px;padding:13px 10px}
  .cal-name{flex-basis:100%;order:3;padding-left:32px}
  .cal-list{padding:10px 14px 18px}
  .hero-meta{gap:22px}
  .nav-donate{padding:10px 16px;font-size:12px}
  .nav-logo-txt em{display:none}
  .ig-tile{width:250px}
  .ig-tile img{height:250px}
  .hero-sticker{font-size:12px;padding:9px 13px}
}

/* Animations always run — reduced-motion overrides intentionally omitted (client request). */

/* ═══════════ RESILIENCE FALLBACK ═══════════
   Applied by JS watchdogs when the browser starves animation frames
   (battery/efficiency modes, embedded webviews) or the intro fails:
   everything becomes visible and usable with native scrolling. */
html.force-reveal [data-reveal],
html.static-mode [data-reveal]{opacity:1;transform:none}
html.static-mode .goals-pin{min-height:0;padding:90px 0 70px}
html.static-mode .goals-track{width:auto;overflow-x:auto;padding-bottom:26px}
html.static-mode .goal-card{scroll-snap-align:center}
html.static-mode .goals-progress{display:none}
html.static-mode .menu-link span{transform:none}
html.static-mode .menu-footer a{opacity:1}
body.menu-open{overflow:hidden}