/* =========================================================================
   AARUNYA — REFERENCE-GRADE EDITORIAL SYSTEM (v9)
   Structural DNA borrowed from premium editorial startup sites:
   oversized type, generous whitespace, minimal sticky nav, full-bleed
   imagery, staggered scroll reveals, cubic-bezier motion.
   Palette is Aarunya's own — a soft sunrise: blush, saffron, warm gold.
   ========================================================================= */

:root{
  /* ---- Sunrise palette ---- */
  --s-cream:#fdf6ee;
  --s-paper:#fffbf5;
  --s-blush:#f6ddc9;
  --s-blush-soft:#fae9d9;
  --s-saffron:#f2a65a;
  --s-saffron-deep:#e2883b;
  --s-gold:#c98a3e;
  --s-gold-deep:#9c6428;
  --s-ink:#241a12;
  --s-ink-soft:#4a3a2c;
  --s-navy:#16214a;
  --s-forest:#2f5233;
  --s-muted:#7a6a5a;
  --s-line:rgba(36,26,18,.12);
  --s-line-soft:rgba(36,26,18,.07);

  --s-sunrise:linear-gradient(135deg,#f6ddc9 0%,#f2a65a 52%,#c98a3e 100%);
  --s-sunrise-soft:linear-gradient(160deg,#fae9d9 0%,#f6ddc9 60%,#f2c896 100%);
  --s-sunrise-text:linear-gradient(100deg,#e2883b 0%,#c98a3e 60%,#9c6428 100%);

  --s-display:'Manrope',sans-serif;
  --s-body:'DM Sans',sans-serif;

  --s-ease:cubic-bezier(.22,1,.36,1);
  --s-fast:420ms;
  --s-med:640ms;
  --s-slow:820ms;

  --s-container:1360px;
  --s-gutter:clamp(20px,5vw,72px);
}

/* ---- Reset scoped to reference system ---- */
.ref *{box-sizing:border-box;}
.ref{
  background:var(--s-cream);
  color:var(--s-ink);
  font-family:var(--s-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.ref img{max-width:100%;display:block;}
.ref a{color:inherit;text-decoration:none;}
.ref .container{max-width:var(--s-container);margin:0 auto;padding:0 var(--s-gutter);}

/* =========================================================================
   TYPE SCALE
   ========================================================================= */
.ref .kicker{
  font-family:var(--s-body);
  font-weight:600;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--s-gold-deep);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.ref .kicker::before{
  content:'';
  width:26px;height:1px;
  background:var(--s-gold-deep);
  display:inline-block;
}
.ref .h-hero{
  font-family:var(--s-display);
  font-weight:800;
  font-size:clamp(52px,9.4vw,148px);
  line-height:.96;
  letter-spacing:-.035em;
  margin:0;
}
.ref .h-xl{
  font-family:var(--s-display);
  font-weight:800;
  font-size:clamp(36px,6vw,86px);
  line-height:1.01;
  letter-spacing:-.025em;
  margin:0;
}
.ref .h-lg{
  font-family:var(--s-display);
  font-weight:700;
  font-size:clamp(26px,3.2vw,42px);
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0;
}
.ref .h-md{
  font-family:var(--s-display);
  font-weight:700;
  font-size:clamp(20px,2vw,26px);
  line-height:1.2;
  margin:0;
}
.ref .lede{
  font-size:clamp(17px,1.6vw,21px);
  line-height:1.6;
  color:var(--s-ink-soft);
  font-weight:400;
  max-width:52ch;
}
.ref p{font-size:16px;line-height:1.75;color:var(--s-ink-soft);}
.ref .num{
  font-family:var(--s-display);
  font-weight:800;
  font-size:14px;
  color:var(--s-gold);
  letter-spacing:.04em;
}
.ref .grad-text{
  background:var(--s-sunrise-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* =========================================================================
   NAVIGATION — minimal, generous spacing, sticky shrink, pill CTA
   ========================================================================= */
.ref-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px var(--s-gutter);
  transition:padding var(--s-fast) var(--s-ease),
             background var(--s-fast) var(--s-ease),
             box-shadow var(--s-fast) var(--s-ease);
}
.ref-header.is-scrolled{
  padding:14px var(--s-gutter);
  background:rgba(253,246,238,.82);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 1px 0 var(--s-line-soft);
}
.ref-header .brand{display:flex;align-items:center;gap:10px;}
.ref-header .brand img{height:42px;width:auto;transition:height var(--s-fast) var(--s-ease);}
.ref-header.is-scrolled .brand img{height:34px;width:auto;}
.ref-header .brand-word{
  font-family:var(--s-display);font-weight:800;font-size:17px;
  letter-spacing:-.01em;color:var(--s-ink);
}
.ref-nav{display:flex;align-items:center;gap:40px;}
.ref-nav a{
  font-size:14.5px;font-weight:500;color:var(--s-ink-soft);
  position:relative;padding:4px 0;
  transition:color var(--s-fast) var(--s-ease);
}
.ref-nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--s-gold-deep);
  transition:width var(--s-fast) var(--s-ease);
}
.ref-nav a:hover{color:var(--s-ink);}
.ref-nav a:hover::after{width:100%;}
.ref-header-actions{display:flex;align-items:center;gap:14px;}
.btn-pill{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--s-sunrise);
  color:var(--s-ink);
  font-weight:700;font-size:14px;
  padding:13px 24px;border-radius:999px;
  border:none;cursor:pointer;
  transition:transform var(--s-fast) var(--s-ease),box-shadow var(--s-fast) var(--s-ease);
  box-shadow:0 6px 18px -6px rgba(201,138,62,.55);
}
.btn-pill:hover{transform:translateY(-2px);box-shadow:0 10px 24px -6px rgba(201,138,62,.65);}
.btn-pill:active{transform:scale(.94);box-shadow:0 3px 10px -4px rgba(201,138,62,.6);}
.btn-pill .arrow-dot{
  width:26px;height:26px;border-radius:50%;
  background:var(--s-ink);color:var(--s-cream);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
  transition:transform var(--s-fast) var(--s-ease);
}
.btn-pill:hover .arrow-dot{transform:translateX(3px) rotate(45deg);}
.btn-ghost{
  font-weight:700;font-size:14px;color:var(--s-ink);
  border:1.5px solid var(--s-ink);border-radius:999px;
  padding:12px 22px;background:var(--s-paper);
  transition:border-color var(--s-fast) var(--s-ease),background var(--s-fast) var(--s-ease),transform var(--s-fast) var(--s-ease),color var(--s-fast) var(--s-ease);
}
.btn-ghost:hover{background:var(--s-ink);color:#fdf6ee;border-color:var(--s-ink);}
.btn-ghost:active{transform:scale(.94);}
.btn-ghost-dark{
  color:#fffaf2!important;border-color:rgba(253,246,238,.55)!important;
  background:rgba(253,246,238,.12)!important;backdrop-filter:blur(6px);
}
.btn-ghost-dark:hover{background:rgba(253,246,238,.24)!important;border-color:#fffaf2!important;}

.menu-toggle{
  /* Hidden by default: on wide screens the full .ref-nav is already
     showing, so a hamburger next to it is redundant and confusing.
     It's switched back on for the same breakpoint where .ref-nav
     hides (see the max-width:1024px block below). */
  display:none;
  width:52px;height:52px;border-radius:50%;
  background:var(--s-saffron-deep);
  align-items:center;justify-content:center;
  cursor:pointer;border:none;position:relative;
  flex-shrink:0;
  transition:transform var(--s-fast) var(--s-ease);
}
.menu-toggle:hover{transform:scale(1.06);}
.menu-toggle:active{transform:scale(.88);}
.menu-toggle span{
  position:absolute;width:18px;height:2px;background:#fff;border-radius:2px;
  transition:transform var(--s-fast) var(--s-ease),opacity var(--s-fast) var(--s-ease);
}
.menu-toggle span:nth-child(1){transform:translateY(-6px);}
.menu-toggle span:nth-child(2){transform:translateY(0);}
.menu-toggle span:nth-child(3){transform:translateY(6px);}
.menu-toggle.is-open span:nth-child(1){transform:translateY(0) rotate(45deg);}
.menu-toggle.is-open span:nth-child(2){opacity:0;transform:scaleX(.4);}
.menu-toggle.is-open span:nth-child(3){transform:translateY(0) rotate(-45deg);}

/* ---- Fullscreen mobile/overlay menu ---- */
.ref-menu{
  position:fixed;inset:0;z-index:999;
  background:var(--s-ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:100px var(--s-gutter) 60px;
  clip-path:circle(0px at calc(100% - 46px) 46px);
  transition:clip-path var(--s-slow) var(--s-ease);
  pointer-events:none;
  /* On shorter screens the 10 links + footer links can be taller than
     the viewport. Without this, justify-content:center pushes the
     overflow equally off the top AND bottom of the screen with no way
     to reach it — the menu opens but looks empty/broken because most
     items are simply off-screen. Scrolling makes everything reachable. */
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.ref-menu.is-open{
  clip-path:circle(150% at calc(100% - 46px) 46px);
  pointer-events:auto;
}
.ref-menu-links{list-style:none;margin:0;padding:0;width:100%;}
.ref-menu-links li{overflow:hidden;}
.ref-menu-links a{
  display:block;
  font-family:var(--s-display);font-weight:800;
  font-size:clamp(32px,7vw,64px);
  color:var(--s-blush-soft);
  padding:10px 0;
  transform:translateY(110%);
  opacity:0;
  transition:transform var(--s-slow) var(--s-ease),
             opacity var(--s-slow) var(--s-ease),
             color var(--s-fast) var(--s-ease);
}
/* Numbered items ("01 India — One Nation...") use a fixed hanging
   indent instead of flexbox: the number is pulled out with
   position:absolute and the text sits in normal document flow. This
   guarantees standard, reliable text wrapping — long titles wrap
   cleanly under the text (not the number) instead of refusing to
   wrap and running off the edge of the screen, which is what a
   flex-based layout was doing here. */
.ref-menu-links a.numbered{
  position:relative;
  padding-left:1.65em;
}
.ref-menu-links a.numbered em{
  position:absolute;
  left:0;
  top:0.3em;
}
.ref-menu.is-open .ref-menu-links a{transform:translateY(0);opacity:1;}
.ref-menu-links a:hover{color:var(--s-saffron);}
.ref-menu-foot{
  margin-top:48px;display:flex;gap:28px;flex-wrap:wrap;
  width:100%;
  opacity:0;transition:opacity var(--s-slow) var(--s-ease) .3s;
}
.ref-menu.is-open .ref-menu-foot{opacity:1;}
.ref-menu-foot a{color:rgba(253,246,238,.6);font-size:14px;}

/* ---- Overflow-proofing the overlay menu ----
   The site-wide box-sizing reset is scoped to ".ref *", so it only
   applies when the fullscreen menu markup happens to be nested inside
   a ".ref" wrapper. On the live Hostinger build the menu overlay is
   appended near the end of <body>, outside that wrapper, so it falls
   back to the browser default content-box: the horizontal padding on
   .ref-menu gets added on top of width:100% instead of being
   subtracted from it, making the box wider than the viewport. Because
   .ref-menu also sets overflow-x:hidden, that extra width never
   scrolls into view — it's simply sliced off flat at the right edge,
   which is why long headings ("...One Record") and footer links
   ("Partner With Us") look cut off instead of wrapping. These rules
   make the menu size and wrap itself correctly no matter where in the
   DOM it's mounted. */
.ref-menu,
.ref-menu *{
  box-sizing:border-box;
}
.ref-menu{
  width:100%;
  max-width:100vw;
}
.ref-menu-links,
.ref-menu-foot{
  max-width:100%;
}
.ref-menu-links a{
  max-width:100%;
  overflow-wrap:break-word;
  word-break:break-word;
  white-space:normal;
}
.ref-menu-foot a{
  overflow-wrap:break-word;
  word-break:break-word;
  white-space:normal;
}

/* On phones, shrink the fullscreen menu's own type scale and spacing so
   all 10 links + footer links fit (or need only a little scrolling)
   instead of being centered off both edges of a short screen. */
@media (max-width:640px){
  .ref-menu{
    justify-content:flex-start;
    padding:96px 24px 48px;
  }
  .ref-menu-links a{
    font-size:clamp(19px,5.6vw,26px);
    line-height:1.3;
    padding:9px 0;
  }
  .ref-menu-links a.numbered{
    padding-left:1.5em;
  }
  .ref-menu-foot{
    margin-top:28px;gap:16px;
  }
  .ref-menu-foot a{font-size:13px;}
}


/* =========================================================================
   HERO — full viewport, video bg, oversized type, line reveal
   ========================================================================= */
.ref-hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;color:#fdf6ee;
}
.ref-hero video,.ref-hero .hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);
}
.ref-hero .hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,15,8,.15) 0%,rgba(22,15,8,.35) 55%,rgba(22,15,8,.82) 100%);
}
.ref-hero .hero-content{position:relative;z-index:2;padding:0 var(--s-gutter) 72px;}
.ref-hero .kicker{color:var(--s-blush);}
.ref-hero .kicker::before{background:var(--s-blush);}
.ref-hero .h-hero{color:#fffaf2;margin-top:18px;}
.ref-hero .h-hero .line{display:block;overflow:hidden;}
.ref-hero .h-hero .line span{display:inline-block;transform:translateY(115%);transition:transform 1s var(--s-ease);}
.ref-hero.is-ready .h-hero .line span{transform:translateY(0);}
.ref-hero .hero-foot{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-top:40px;flex-wrap:wrap;gap:24px;
}
.ref-hero .hero-sub{max-width:38ch;color:rgba(253,246,238,.82);font-size:16px;line-height:1.6;}
.scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(253,246,238,.7);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  z-index:2;
}
.scroll-cue .stick{width:1px;height:34px;background:rgba(253,246,238,.4);position:relative;overflow:hidden;}
.scroll-cue .stick::after{
  content:'';position:absolute;left:0;top:-100%;width:100%;height:100%;
  background:#fdf6ee;animation:scrollDrop 1.8s var(--s-ease) infinite;
}
@keyframes scrollDrop{0%{top:-100%;}60%{top:100%;}100%{top:100%;}}

/* =========================================================================
   REVEAL SYSTEM — including directional card swap (right<->left on scroll)
   ========================================================================= */
.reveal{opacity:1;transform:none;}
html.motion-ready .reveal{opacity:0;transform:translateY(36px);transition:opacity var(--s-slow) var(--s-ease),transform var(--s-slow) var(--s-ease);will-change:transform,opacity;}
html.motion-ready .reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal-img{overflow:hidden;}
.reveal-img img{transform:scale(1.15);transition:transform 1.1s var(--s-ease);}
.reveal-img.is-visible img{transform:scale(1);}

/* directional swap-in — cards glide horizontally into place as they enter view */
[data-dir="right"]{opacity:0;transform:translateX(90px) translateY(14px);transition:opacity var(--s-slow) var(--s-ease),transform var(--s-slow) var(--s-ease);}
[data-dir="right"].is-visible{opacity:1;transform:translateX(0) translateY(0);}
[data-dir="left"]{opacity:0;transform:translateX(-90px) translateY(14px);transition:opacity var(--s-slow) var(--s-ease),transform var(--s-slow) var(--s-ease);}
[data-dir="left"].is-visible{opacity:1;transform:translateX(0) translateY(0);}

[data-stagger] [data-dir]:nth-child(1),[data-stagger] .reveal:nth-child(1){transition-delay:0ms;}
[data-stagger] [data-dir]:nth-child(2),[data-stagger] .reveal:nth-child(2){transition-delay:120ms;}
[data-stagger] [data-dir]:nth-child(3),[data-stagger] .reveal:nth-child(3){transition-delay:240ms;}
[data-stagger] [data-dir]:nth-child(4),[data-stagger] .reveal:nth-child(4){transition-delay:360ms;}

/* subtle scroll parallax for large imagery */
.parallax{will-change:transform;}

/* =========================================================================
   HERO PARTICLE CANVAS (three.js) — soft drifting light over the video
   ========================================================================= */
#hero-canvas{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.85;}

/* =========================================================================
   SECTION LAYOUTS
   ========================================================================= */
.ref section{padding:clamp(70px,10vw,150px) 0;position:relative;}
.section-tight{padding:clamp(50px,7vw,100px) 0;}

.split{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,100px);align-items:center;
}
.split.rev .split-media{order:2;}
.split.rev .split-text{order:1;}
.split-media{border-radius:22px;overflow:hidden;position:relative;aspect-ratio:4/5;}
.split-media img,.split-media video{width:100%;height:100%;object-fit:cover;transition:transform var(--s-slow) var(--s-ease);}
.split-media:hover img,.split-media:hover video{transform:scale(1.045);}
.split-text .num{display:block;margin-bottom:14px;}
.split-text .h-xl{margin:16px 0 20px;}

.full-bleed{position:relative;width:100%;aspect-ratio:16/8;border-radius:0;overflow:hidden;}
.full-bleed img{width:100%;height:100%;object-fit:cover;}

.statement{text-align:center;max-width:920px;margin:0 auto;padding:clamp(60px,9vw,120px) var(--s-gutter);}
.statement .h-xl{margin-top:20px;}

.pillar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--s-line);border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line);}
.pillar-card{background:var(--s-cream);padding:44px 38px;transition:background var(--s-fast) var(--s-ease);}
.pillar-card:hover{background:var(--s-blush-soft);}
.pillar-card .num{display:block;margin-bottom:20px;}
.pillar-card .h-md{margin-bottom:12px;}

/* =========================================================================
   FEATURE SPOTLIGHT — Meditation / Singing / Yoga / Fundraising, big & bold,
   cards swap in right<->left as the user scrolls (see [data-dir] above)
   ========================================================================= */
.spotlight-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.spotlight-card{
  position:relative;overflow:hidden;border-radius:24px;
  aspect-ratio:3/4.1;display:flex;flex-direction:column;justify-content:flex-end;
  padding:34px 28px;color:#fffaf2;
  transition:transform var(--s-med) var(--s-ease),box-shadow var(--s-med) var(--s-ease);
}
.spotlight-card:hover{transform:translateY(-10px);box-shadow:0 30px 60px -24px rgba(36,26,18,.35);}
.spotlight-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--s-ease);}
.spotlight-card:hover img{transform:scale(1.08);}
.spotlight-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,15,8,.05) 0%,rgba(22,15,8,.75) 100%);
}
.spotlight-card .sc-icon{
  position:relative;z-index:2;width:46px;height:46px;border-radius:50%;
  background:rgba(253,246,238,.16);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  border:1px solid rgba(253,246,238,.3);
}
.spotlight-card .sc-icon svg{width:22px;height:22px;stroke:#fdf6ee;fill:none;stroke-width:1.6;}
.spotlight-card .sc-kicker{position:relative;z-index:2;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--s-blush);font-weight:700;}
.spotlight-card .sc-title{position:relative;z-index:2;font-family:var(--s-display);font-weight:800;font-size:clamp(26px,2.4vw,34px);line-height:1.05;margin:10px 0 12px;letter-spacing:-.01em;}
.spotlight-card .sc-desc{position:relative;z-index:2;font-size:14.5px;line-height:1.55;color:rgba(253,246,238,.82);max-width:26ch;}
.spotlight-card.is-fund{background:var(--s-ink);}
.spotlight-card.is-fund::after{background:linear-gradient(180deg,rgba(22,15,8,.1) 0%,rgba(22,15,8,.55) 60%,rgba(22,15,8,.92) 100%);}
.spotlight-card.is-fund .sc-kicker{color:var(--s-saffron);}

@media (max-width:1024px){
  .spotlight-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .spotlight-grid{grid-template-columns:1fr;}
  .spotlight-card{aspect-ratio:4/5;}
}

.card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.info-card{
  background:var(--s-paper);border:1px solid var(--s-line);border-radius:18px;
  padding:32px 28px;transition:transform var(--s-fast) var(--s-ease),box-shadow var(--s-fast) var(--s-ease),border-color var(--s-fast) var(--s-ease);
}
.info-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -18px rgba(36,26,18,.18);border-color:var(--s-gold);}
.info-card .h-md{margin:14px 0 10px;}

/* ---- Fundraising banner ---- */
.fund-banner{
  position:relative;border-radius:28px;overflow:hidden;
  background:var(--s-ink);color:#fdf6ee;
  padding:clamp(50px,7vw,96px) clamp(28px,6vw,80px);
}
.fund-banner::before{
  content:'';position:absolute;inset:0;
  background:var(--s-sunrise);opacity:.14;
}
.fund-banner .h-xl{color:#fffaf2;position:relative;}
.fund-banner p,.fund-banner .lede{color:rgba(253,246,238,.82);position:relative;}
.fund-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:52px;position:relative;}
.fund-item{border-top:1px solid rgba(253,246,238,.2);padding-top:20px;}
.fund-item .num{color:var(--s-saffron);}
.fund-item h4{font-family:var(--s-display);font-weight:700;font-size:18px;margin:10px 0 8px;color:#fffaf2;}
.fund-item p{font-size:14.5px;color:rgba(253,246,238,.72);}

/* ---- CTA final ---- */
.cta-final{
  position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;border-radius:0;
}
.cta-final .cta-bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;}
.cta-final .cta-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,15,8,.4),rgba(22,15,8,.78));}
.cta-final .cta-content{position:relative;z-index:2;color:#fdf6ee;padding:0 var(--s-gutter);}
.cta-final .h-xl{color:#fffaf2;margin:18px 0 34px;}
.cta-final .kicker{color:var(--s-blush);}
.cta-final .kicker::before{background:var(--s-blush);}

/* ---- Footer ---- */
.ref-footer{background:var(--s-ink);color:rgba(253,246,238,.7);padding:70px 0 30px;}
.ref-footer .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(253,246,238,.14);}
.ref-footer h5{color:#fdf6ee;font-family:var(--s-display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;}
.ref-footer a{display:block;font-size:14.5px;padding:5px 0;color:rgba(253,246,238,.68);transition:color var(--s-fast) var(--s-ease);}
.ref-footer a:hover{color:var(--s-saffron);}
.ref-footer .foot-bottom{display:flex;justify-content:space-between;padding-top:26px;font-size:13px;flex-wrap:wrap;gap:10px;color:rgba(253,246,238,.5);}
.ref-footer .foot-brand img{height:38px;width:auto;margin-bottom:14px;}
.ref-footer .foot-brand p{color:rgba(253,246,238,.6);font-size:14px;max-width:32ch;}

/* =========================================================================
   SMOOTH INERTIA SCROLL (Lenis) — buttery scroll feel
   ========================================================================= */
html.lenis{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-stopped{overflow:hidden;}

/* =========================================================================
   NAV — duplicate-text hover swap (two stacked copies slide on hover)
   ========================================================================= */
.ref-nav a{overflow:hidden;position:relative;display:inline-block;height:20px;}
.ref-nav a .txt-stack{display:block;transition:transform var(--s-med) var(--s-ease);}
.ref-nav a .txt-stack span{display:block;height:20px;line-height:20px;}
.ref-nav a:hover .txt-stack{transform:translateY(-20px);}
.ref-nav a::after{bottom:-2px;}

/* =========================================================================
   MARQUEE TICKER — continuous horizontal scroll of the four pillars
   ========================================================================= */
.marquee{
  overflow:hidden;white-space:nowrap;border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line);
  padding:26px 0;background:var(--s-blush-soft);
}
.marquee-track{display:inline-flex;align-items:center;gap:0;animation:marqueeScroll 28s linear infinite;}
.marquee-track span{
  font-family:var(--s-display);font-weight:800;
  font-size:clamp(22px,3vw,38px);letter-spacing:-.01em;
  color:var(--s-ink);padding:0 34px;display:inline-flex;align-items:center;gap:34px;
}
.marquee-track span.outline{-webkit-text-stroke:1.4px var(--s-gold-deep);color:transparent;}
.marquee-track span::after{content:'✦';font-size:16px;color:var(--s-gold);margin-left:34px;}
@keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee:hover .marquee-track{animation-play-state:paused;}

/* =========================================================================
   MAGNETIC BUTTON — slight cursor-pull on hover (JS sets --mx/--my)
   ========================================================================= */
.magnetic{transform:translate(calc(var(--mx,0)*1px),calc(var(--my,0)*1px));transition:transform .25s var(--s-ease);}

/* =========================================================================
   HERO ROLE ROTATOR
   ========================================================================= */
.role-rotator{position:relative;display:inline-block;height:1.15em;overflow:hidden;vertical-align:bottom;}
.role-rotator span{
  display:block;position:absolute;left:0;top:0;
  opacity:0;transform:translateY(100%);
  transition:opacity var(--s-med) var(--s-ease),transform var(--s-med) var(--s-ease);
}
.role-rotator span.is-active{opacity:1;transform:translateY(0);position:relative;}
.role-rotator span.is-leaving{opacity:0;transform:translateY(-100%);}

/* =========================================================================
   DONATION / GIVE CARD — QR + account details, admin-toggleable
   ========================================================================= */
.give-card{
  display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(30px,4vw,60px);
  background:var(--s-paper);border:1px solid var(--s-line);border-radius:28px;
  padding:clamp(28px,4vw,52px);align-items:center;
}
.qr-box{
  aspect-ratio:1;border-radius:20px;
  border:2px dashed var(--s-gold);background:var(--s-blush-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:20px;overflow:hidden;position:relative;
}
.qr-box img{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;}
.qr-box svg{width:44px;height:44px;stroke:var(--s-gold-deep);fill:none;stroke-width:1.4;}
.qr-box span{font-size:13px;color:var(--s-gold-deep);font-weight:600;max-width:20ch;position:relative;}
.give-details h3{font-family:var(--s-display);font-weight:800;font-size:clamp(22px,2.2vw,30px);margin-bottom:8px;letter-spacing:-.01em;}
.give-details > p{margin-bottom:22px;}
.give-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--s-line);
}
.give-row:last-of-type{border-bottom:none;}
.give-row .gr-label{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--s-muted);}
.give-row .gr-value{font-family:var(--s-display);font-weight:700;font-size:16px;color:var(--s-ink);}
.copy-btn{
  font-size:12.5px;font-weight:700;color:var(--s-gold-deep);
  border:1px solid var(--s-gold);border-radius:999px;padding:6px 14px;
  background:transparent;cursor:pointer;transition:background var(--s-fast) var(--s-ease),color var(--s-fast) var(--s-ease);
  flex-shrink:0;
}
.copy-btn:hover{background:var(--s-gold);color:#fff;}
.copy-btn.is-copied{background:var(--s-forest);border-color:var(--s-forest);color:#fff;}

/* =========================================================================
   ADMIN — header button, login/control modal
   ========================================================================= */
.admin-btn{
  display:inline-flex;
  text-decoration:none;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;color:var(--s-muted);
  border:1px solid var(--s-line);border-radius:999px;padding:9px 16px;
  background:transparent;cursor:pointer;transition:border-color var(--s-fast) var(--s-ease),color var(--s-fast) var(--s-ease);
}
.admin-btn:hover{border-color:var(--s-gold);color:var(--s-gold-deep);}
.admin-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;}

.admin-overlay{
  position:fixed;inset:0;z-index:3000;background:rgba(22,15,8,.55);
  display:none;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(4px);
}
.admin-overlay.is-open{display:flex;}
.admin-modal{
  background:var(--s-paper);border-radius:22px;padding:34px 30px;
  width:100%;max-width:360px;box-shadow:0 30px 70px -20px rgba(22,15,8,.4);
}
.admin-modal h4{font-family:var(--s-display);font-weight:800;font-size:20px;margin-bottom:6px;}
.admin-modal p{font-size:13.5px;margin-bottom:18px;}
.admin-modal input[type=password]{
  width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--s-line);
  font-size:15px;margin-bottom:12px;background:var(--s-cream);color:var(--s-ink);
}
.admin-modal .admin-error{color:#b3432b;font-size:13px;margin:-4px 0 12px;display:none;}
.admin-modal .admin-error.is-shown{display:block;}
.admin-modal-actions{display:flex;gap:10px;margin-top:6px;}
.admin-modal-actions .btn-pill,.admin-modal-actions .btn-ghost{flex:1;justify-content:center;padding:12px 14px;}
.admin-toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--s-cream);border-radius:14px;padding:14px 16px;margin-bottom:16px;
}
.admin-toggle-row span{font-size:14px;font-weight:600;}
.switch{position:relative;width:44px;height:26px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch .slider{position:absolute;inset:0;background:var(--s-line);border-radius:999px;cursor:pointer;transition:background var(--s-fast) var(--s-ease);}
.switch .slider::before{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform var(--s-fast) var(--s-ease);box-shadow:0 1px 3px rgba(0,0,0,.3);}
.switch input:checked + .slider{background:var(--s-forest);}
.switch input:checked + .slider::before{transform:translateX(18px);}
.admin-status{font-size:12px;color:var(--s-muted);margin-bottom:14px;}
.admin-section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--s-gold-deep);margin:18px 0 10px;}
.admin-qr-preview{
  aspect-ratio:1;max-width:140px;border-radius:14px;border:1.5px dashed var(--s-line);
  background:var(--s-cream);display:flex;align-items:center;justify-content:center;
  overflow:hidden;margin-bottom:10px;
}
.admin-qr-preview img{width:100%;height:100%;object-fit:contain;}
.admin-qr-preview span{font-size:11.5px;color:var(--s-muted);text-align:center;padding:8px;}
.admin-file-btn{
  display:inline-block;font-size:13px;font-weight:600;color:var(--s-gold-deep);
  border:1px solid var(--s-gold);border-radius:999px;padding:9px 16px;cursor:pointer;
  transition:background var(--s-fast) var(--s-ease),color var(--s-fast) var(--s-ease);
}
.admin-file-btn:hover{background:var(--s-gold);color:#fff;}
.admin-field{display:block;font-size:12.5px;font-weight:600;color:var(--s-ink-soft);margin-bottom:10px;}
.admin-field input{
  display:block;width:100%;margin-top:5px;padding:10px 13px;border-radius:10px;
  border:1px solid var(--s-line);background:var(--s-cream);color:var(--s-ink);font-size:14px;
}
.admin-logout-link{
  display:block;width:100%;text-align:center;margin-top:14px;
  background:none;border:none;color:var(--s-muted);font-size:12.5px;text-decoration:underline;cursor:pointer;
}
.admin-modal{max-height:88vh;overflow-y:auto;}

/* =========================================================================
   SIMPLE FORMS — contact / join (client-side only, mailto fallback)
   ========================================================================= */
.ref-form{display:flex;flex-direction:column;gap:18px;}
.ref-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.ref-form label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600;color:var(--s-ink-soft);}
.ref-form input,.ref-form select,.ref-form textarea{
  font-family:var(--s-body);font-size:15px;color:var(--s-ink);
  border:1px solid var(--s-line);border-radius:12px;padding:13px 15px;
  background:var(--s-paper);resize:vertical;
}
.ref-form input:focus,.ref-form select:focus,.ref-form textarea:focus{outline:2px solid var(--s-gold);outline-offset:1px;}
.ref-form .btn-pill{align-self:flex-start;margin-top:6px;}
.form-success{
  display:none;margin-top:8px;padding:14px 18px;border-radius:12px;
  background:var(--s-blush-soft);color:var(--s-gold-deep);font-size:14px;font-weight:600;
}
.form-success.is-shown{display:block;}
@media (max-width:640px){
  .ref-form .form-row{grid-template-columns:1fr;}
}

/* =========================================================================
   HORIZONTAL SCROLL GALLERY — big bold cards that slide sideways as the
   page scrolls down (pinned section, JS-driven translateX)
   ========================================================================= */
.hscroll-section{position:relative;padding:0;}
.ref section.hscroll-section{padding:0;}
.hscroll-sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;
}
.hscroll-track{display:flex;gap:clamp(20px,3vw,40px);padding:0 var(--s-gutter);will-change:transform;}
.hscroll-card{
  flex:0 0 clamp(340px,58vw,760px);
  min-height:clamp(360px,52vh,520px);
  background:var(--s-paper);border:1px solid var(--s-line);border-radius:26px;
  padding:clamp(32px,4vw,56px);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,3vw,48px);align-items:start;
  position:relative;overflow:hidden;
}
.hscroll-card .hc-num{
  font-family:var(--s-display);font-weight:800;color:var(--s-gold);
  font-size:clamp(50px,6vw,90px);line-height:.85;letter-spacing:-.02em;
}
.hscroll-card .hc-body h3{
  font-family:var(--s-display);font-weight:800;
  font-size:clamp(30px,3.4vw,52px);line-height:1.02;letter-spacing:-.02em;
  color:var(--s-ink);margin:0 0 18px;
}
.hscroll-card .hc-body p{font-size:clamp(15px,1.2vw,18px);line-height:1.65;color:var(--s-ink-soft);max-width:42ch;}
.hscroll-card.is-accent{background:var(--s-ink);border-color:var(--s-ink);}
.hscroll-card.is-accent .hc-num{color:var(--s-saffron);}
.hscroll-card.is-accent .hc-body h3{color:#fffaf2;}
.hscroll-card.is-accent .hc-body p{color:rgba(253,246,238,.75);}
.hscroll-progress{position:absolute;left:var(--s-gutter);right:var(--s-gutter);bottom:34px;height:2px;background:var(--s-line);border-radius:2px;z-index:3;}
.hscroll-progress-bar{height:100%;width:0%;background:var(--s-sunrise);border-radius:2px;transition:width .05s linear;}
.hscroll-hint{position:absolute;top:34px;right:var(--s-gutter);z-index:3;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--s-muted);display:flex;align-items:center;gap:8px;}

@media (max-width:768px){
  .hscroll-sticky{height:auto;position:relative;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 0;}
  .hscroll-track{transform:none!important;}
  .hscroll-card{flex:0 0 84vw;scroll-snap-align:center;}
  .hscroll-progress,.hscroll-hint{display:none;}
}

@media (max-width:1024px){
  .ref-nav,.ref-header .btn-ghost{display:none;}
  .menu-toggle{display:flex;}
  .split{grid-template-columns:1fr;}
  .split.rev .split-media{order:1;}
  .split.rev .split-text{order:2;}
  .pillar-grid{grid-template-columns:1fr;}
  .card-row{grid-template-columns:1fr 1fr;}
  .fund-grid{grid-template-columns:1fr 1fr;}
  .ref-footer .foot-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .ref-header{padding:18px 20px;}
  .ref-header.is-scrolled{padding:12px 20px;}
  .card-row{grid-template-columns:1fr;}
  .fund-grid{grid-template-columns:1fr;}
  .ref-footer .foot-top{grid-template-columns:1fr;gap:30px;}
  .btn-ghost{display:none;}
  .ref-hero .hero-foot{flex-direction:column;align-items:flex-start;}
  .admin-btn span{display:none;}
  .admin-btn{padding:10px;}
  .give-card{grid-template-columns:1fr;}
  .qr-box{max-width:220px;margin:0 auto;}
}

/* =========================================================================
   MOBILE HEADER FIX — Hostinger deployment safe
   Keeps the complete header inside narrow phone AND tablet viewports
   without clipping. This used to only kick in below 640px; between
   641–1024px (the range where .ref-nav is already hidden and the
   hamburger is the only way to open the menu) the header actions were
   still full desktop size and could add up to more than the viewport
   width. Because the page disables horizontal scrolling, anything that
   overflowed the header row was pushed past the right edge and became
   invisible and unclickable — most often the admin button and/or the
   hamburger itself. Widening this block to 1024px guarantees the
   hamburger and every other header control always stays on-screen.
   ========================================================================= */
@media (max-width:1024px){
  .ref-header,
  .ref-header.is-scrolled{
    width:100%;
    max-width:100vw;
    padding:10px 14px;
    gap:8px;
    min-height:64px;
    overflow:visible;
  }

  .ref-header .brand{
    flex:1 1 auto;
    min-width:0;
    max-width:none;
    gap:7px;
  }

  .ref-header .brand img,
  .ref-header.is-scrolled .brand img{
    width:34px;
    height:34px;
    max-width:34px;
    object-fit:contain;
    flex:0 0 34px;
  }

  .ref-header .brand-word{
    font-size:15px;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .ref-header-actions{
    flex:0 0 auto;
    min-width:0;
    gap:7px;
    margin-left:auto;
  }

  .ref-header-actions .btn-ghost{
    display:none !important;
  }

  .ref-header-actions .admin-btn{
    width:38px;
    height:38px;
    min-width:38px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0;
    border-radius:999px;
  }

  .ref-header-actions .admin-btn span{
    display:none !important;
  }

  .ref-header-actions .admin-btn svg{
    width:15px;
    height:15px;
  }

  .ref-header-actions > .btn-pill{
    height:40px;
    min-width:112px;
    max-width:128px;
    padding:8px 10px 8px 13px;
    gap:6px;
    justify-content:space-between;
    white-space:nowrap;
    font-size:11.5px;
    line-height:1;
    flex:0 0 auto;
    box-shadow:0 5px 14px -6px rgba(201,138,62,.55);
  }

  .ref-header-actions > .btn-pill .arrow-dot{
    width:22px;
    height:22px;
    min-width:22px;
    font-size:11px;
  }

  .ref-header-actions .menu-toggle{
    width:42px;
    height:42px;
    min-width:42px;
    flex:0 0 42px;
  }

  .ref-header-actions .menu-toggle span{
    width:17px;
  }
}

@media (max-width:380px){
  .ref-header,
  .ref-header.is-scrolled{padding-left:10px;padding-right:10px;gap:5px;}
  .ref-header .brand-word{font-size:14px;}
  .ref-header-actions{gap:5px;}
  .ref-header-actions > .btn-pill{min-width:100px;max-width:108px;font-size:10.5px;padding-left:10px;padding-right:8px;}
  .ref-header-actions .admin-btn{width:36px;min-width:36px;height:36px;}
  .ref-header-actions .menu-toggle{width:40px;height:40px;min-width:40px;flex-basis:40px;}
}


/* =========================================================================
   HEADING EMPHASIS — Proper Case heading + handwritten script accent
   One treatment for the whole site: the heading runs in Manrope and the
   emphasised phrase in Caveat at the brand saffron. This used to live in
   page-polish.css, so only the two pages loading that sheet had it; it is
   defined here so every reference-system page renders headings identically.
   ========================================================================= */
.ref .script-accent{
  font-family:'Caveat',cursive;
  font-style:normal;
  font-weight:600;

  /* Caveat's lowercase runs small next to Manrope, so it is sized up to sit
     on the same optical line as the rest of the heading. */
  font-size:1.24em;
  line-height:.9;
  letter-spacing:0;

  color:var(--s-saffron-deep);
}

/* The deep saffron goes muddy on the ink sections and the photographic
   heroes, so the accent lifts to the lighter tone there. */
.ref .tone-ink .script-accent,
.ref .cta-final .script-accent,
.ref .ref-hero .script-accent,
.ref .flag-hero .script-accent{
  color:var(--s-saffron);
}