/* ==========================================================================
   Kalpavruksha Foundation — Design System
   Palette: Green (growth) · Pink (girlhood) · Marigold · Teal
   Green symbolises the growth and prosperity of every girl we support.
   ========================================================================== */

:root{
  /* --- Brand: GREEN — growth, prosperity, the living tree --- */
  --green:#1FA75C;
  --green-dk:#137A41;
  --green-lt:#6FE0A0;
  --green-pale:#E6F9EE;

  /* --- Brand: PINK — girlhood, warmth, care --- */
  --pink:#E52D74;
  --pink-dk:#B81A57;
  --pink-lt:#FF7FAC;
  --pink-pale:#FFEFF5;

  /* --- Supporting brights --- */
  --marigold:#F5A623;
  --marigold-dk:#D4860B;
  --marigold-lt:#FFD166;
  --teal:#00A6A0;
  --teal-dk:#0E7C86;
  --teal-lt:#5FD8CF;
  --violet:#7B3FA0;

  /* --- Legacy aliases (kept so existing markup keeps working) --- */
  --magenta:var(--pink);
  --magenta-dk:var(--pink-dk);
  --magenta-lt:var(--pink-lt);
  --blush:var(--pink-pale);
  --mint:var(--green-pale);

  /* --- Neutrals --- */
  --ink:#20222A;
  --ink-2:#464C57;
  --ink-3:#6B7280;
  --line:#E6E9E4;
  --cream:#FFFCF5;
  --cream-2:#FFF4E2;
  --white:#fff;

  /* --- Signature gradients --- */
  --grad-brand:linear-gradient(90deg,var(--marigold) 0%,var(--pink) 34%,var(--green) 70%,var(--teal) 100%);
  --grad-growth:linear-gradient(135deg,var(--green-dk),var(--green-lt));
  --grad-pink:linear-gradient(135deg,var(--pink),var(--pink-lt));

  /* --- Type --- */
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* --- Shape --- */
  --r-sm:10px; --r:16px; --r-lg:26px; --r-xl:38px;
  --shadow:0 4px 24px rgba(32,34,42,.08);
  --shadow-md:0 14px 40px rgba(32,34,42,.12);
  --shadow-lg:0 28px 70px rgba(32,34,42,.18);
  --shadow-pink:0 16px 40px rgba(229,45,116,.28);
  --shadow-green:0 16px 40px rgba(31,167,92,.30);
  --shadow-gold:0 16px 40px rgba(245,166,35,.32);

  --wrap:1220px;
  --head-h:84px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:var(--white); font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--green-dk);text-decoration:none;transition:color .2s}
a:hover{color:var(--pink)}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin:.4em 0}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.14;margin:0 0 .5em;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
h1{font-size:clamp(2.5rem,5.4vw,4.15rem);font-weight:900}
h2{font-size:clamp(1.95rem,3.5vw,2.9rem)}
h3{font-size:clamp(1.25rem,1.9vw,1.6rem)}
h4{font-size:1.12rem;font-family:var(--sans);font-weight:800;letter-spacing:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.narrow{max-width:860px;margin-left:auto;margin-right:auto}
.ico{width:1.25em;height:1.25em;flex:none;vertical-align:-.22em}
.ico-sm{width:1em;height:1em}
.ico-lg{width:1.9em;height:1.9em}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--green-dk);color:#fff;padding:12px 20px;z-index:999;border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0;color:#fff}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}

/* ============================== TOP BAR ================================= */
.topbar{
  background:linear-gradient(90deg,var(--pink) 0%,var(--violet) 38%,var(--green-dk) 74%,var(--teal-dk) 100%);
  color:#fff;font-size:.83rem;letter-spacing:.01em
}
.topbar-in{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:42px;flex-wrap:wrap}
.topbar-msg{display:inline-flex;align-items:center;gap:8px;font-weight:600;opacity:.97}
.topbar-links{display:flex;gap:20px;flex-wrap:wrap}
.topbar-links a{color:#fff;display:inline-flex;align-items:center;gap:6px;font-weight:600;opacity:.95}
.topbar-links a:hover{color:var(--marigold-lt)}

/* ============================== HEADER ================================== */
.site-head{
  position:sticky;top:0;z-index:200;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(32,34,42,.03);
  transition:box-shadow .25s
}
.site-head.stuck{box-shadow:0 8px 30px rgba(32,34,42,.10)}
.site-head::after{content:'';display:block;height:4px;background:var(--grad-brand)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--head-h)}

.brand{display:flex;align-items:center;gap:13px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.logo-mark{flex:none;transition:transform .5s cubic-bezier(.2,.9,.3,1.4)}
.brand:hover .logo-mark{transform:rotate(-8deg) scale(1.07)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{
  font-family:var(--serif);font-weight:900;font-size:1.62rem;letter-spacing:-.02em;
  background:linear-gradient(92deg,var(--marigold-dk) 0%,var(--pink) 46%,var(--green-dk) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.brand-sub{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green-dk);white-space:nowrap}

.nav{display:flex;align-items:center;gap:6px}
.nav-list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-item{position:relative}
.nav-link{
  display:flex;align-items:center;gap:5px;padding:11px 13px;border-radius:var(--r-sm);
  font-size:.9rem;font-weight:700;color:var(--ink-2);white-space:nowrap;position:relative
}
.nav-link::after{
  content:'';position:absolute;left:13px;right:13px;bottom:5px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--pink),var(--green));
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.8,.3,1)
}
.nav-link:hover{color:var(--pink);background:var(--pink-pale)}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1)}
.nav-link.is-active{color:var(--pink-dk)}
.caret{width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}

.sub{
  position:absolute;top:calc(100% + 10px);left:0;min-width:250px;list-style:none;margin:0;padding:10px;
  background:#fff;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.24s cubic-bezier(.2,.8,.3,1);z-index:20
}
.sub::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}
.nav-item:hover .sub,.nav-item:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub li{margin:0}
.sub a{display:block;padding:10px 14px;border-radius:var(--r-sm);font-size:.9rem;font-weight:600;color:var(--ink-2)}
.sub a:hover{background:linear-gradient(90deg,var(--pink-pale),var(--green-pale));color:var(--green-dk);transform:translateX(4px)}

.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;flex-direction:column;gap:5px}
.burger span{display:block;width:26px;height:3px;border-radius:3px;background:var(--ink);transition:.3s}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ============================== BUTTONS ================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:100px;font-family:var(--sans);font-weight:800;font-size:.93rem;
  letter-spacing:.005em;border:2px solid transparent;cursor:pointer;text-align:center;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.3),box-shadow .22s,background .22s,color .22s
}
.btn:hover{transform:translateY(-3px)}
.btn-sm{padding:9px 18px;font-size:.84rem}
.btn-lg{padding:17px 36px;font-size:1.02rem}

.btn-donate{background:linear-gradient(135deg,var(--pink),#FF5C93);color:#fff;box-shadow:var(--shadow-pink)}
.btn-donate:hover{color:#fff;box-shadow:0 22px 48px rgba(229,45,116,.42)}
.btn-green{background:var(--grad-growth);color:#fff;box-shadow:var(--shadow-green)}
.btn-green:hover{color:#fff;box-shadow:0 22px 48px rgba(31,167,92,.44)}
.btn-gold{background:linear-gradient(135deg,var(--marigold),var(--marigold-lt));color:#4A2E00;box-shadow:var(--shadow-gold)}
.btn-gold:hover{color:#3a2400;box-shadow:0 22px 48px rgba(245,166,35,.45)}
/* btn-teal is used across the pages — it now carries the growth green */
.btn-teal{background:var(--grad-growth);color:#fff;box-shadow:var(--shadow-green)}
.btn-teal:hover{color:#fff;box-shadow:0 22px 48px rgba(31,167,92,.44)}
.btn-outline{border-color:var(--pink);color:var(--pink-dk);background:#fff}
.btn-outline:hover{background:var(--pink);color:#fff;box-shadow:var(--shadow-pink)}
.btn-outline-green{border-color:var(--green);color:var(--green-dk);background:#fff}
.btn-outline-green:hover{background:var(--green);color:#fff;box-shadow:var(--shadow-green)}
.btn-ghost-light{border-color:rgba(255,255,255,.7);color:#fff;background:rgba(255,255,255,.1)}
.btn-ghost-light:hover{background:#fff;color:var(--green-dk)}
.nav-cta{margin-left:10px}

/* ============================== HERO ==================================== */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1000px 560px at 12% -10%,rgba(245,166,35,.28),transparent 62%),
    radial-gradient(880px 520px at 92% 6%,rgba(229,45,116,.24),transparent 60%),
    radial-gradient(820px 640px at 58% 108%,rgba(31,167,92,.30),transparent 64%),
    linear-gradient(160deg,var(--cream) 0%,#FFF6FA 52%,var(--green-pale) 100%);
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle,rgba(31,167,92,.18) 1.5px,transparent 1.6px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);
  mask-image:linear-gradient(180deg,#000,transparent 72%)
}
.hero-in{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;padding-top:78px;padding-bottom:92px}
.hero-copy{position:relative;z-index:2}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:100px;
  background:#fff;border:1.5px solid var(--green);color:var(--green-dk);
  font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  box-shadow:0 6px 18px rgba(31,167,92,.20);margin-bottom:22px
}
.eyebrow .ico{color:var(--green)}

.hero h1{margin-bottom:.34em;font-size:clamp(2.1rem,4.1vw,3.15rem)}

/* Big animated Kalpavruksha wordmark above the headline */
.wordmark-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5em;margin:0 0 .18em;line-height:1}
.wordmark-line .kalpa{font-size:clamp(2.9rem,6.6vw,5.2rem);line-height:1.02}
.wordmark-sub{
  font-family:var(--sans);font-weight:900;font-size:clamp(.72rem,1.1vw,.92rem);
  letter-spacing:.34em;text-transform:uppercase;color:var(--green-dk);
  padding-bottom:.35em
}

/* The signature Kalpavruksha wordmark — pink into green, the growing tree */
.kalpa{
  font-family:var(--serif);font-weight:900;font-style:italic;
  background:linear-gradient(96deg,#D4860B 0%,#F5A623 14%,#E52D74 38%,#B81A57 52%,#1FA75C 76%,#137A41 100%);
  background-size:145% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:kalpaFlow 9s ease-in-out infinite;
  position:relative;white-space:nowrap;padding-right:.06em
}
@keyframes kalpaFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.wordmark-line .kalpa::after{
  content:'';position:absolute;left:2%;right:2%;bottom:-.06em;height:.09em;border-radius:100px;
  background:linear-gradient(90deg,var(--marigold),var(--pink),var(--green));
  opacity:.5;transform:scaleX(0);transform-origin:left;
  animation:kalpaUnderline 1.5s .5s cubic-bezier(.2,.9,.3,1) forwards
}
@keyframes kalpaUnderline{to{transform:scaleX(1)}}
/* Inline mentions of the name stay bold and colourful, without the underline */
p .kalpa{font-weight:700;font-style:italic}
.kalpa-sparkle{
  position:absolute;top:-.28em;right:-.42em;width:.42em;height:.42em;color:var(--marigold);
  animation:twinkle 2.6s ease-in-out infinite
}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:.95}50%{transform:scale(1.35) rotate(22deg);opacity:.6}}

.hero-lead{font-size:1.2rem;color:var(--ink-2);max-width:56ch;margin-bottom:1.5em}
.hero-lead strong{color:var(--pink-dk);font-weight:700}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}

.hero-stats{display:flex;gap:34px;flex-wrap:wrap;padding-top:26px;border-top:2px dashed rgba(31,167,92,.30)}
.hero-stat b{display:block;font-family:var(--serif);font-size:2.1rem;font-weight:900;line-height:1;color:var(--pink)}
.hero-stat:nth-child(2) b{color:var(--marigold-dk)}
.hero-stat:nth-child(3) b{color:var(--green-dk)}
.hero-stat span{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

.hero-visual{position:relative}
.hero-art{width:100%;height:auto;filter:drop-shadow(0 28px 56px rgba(32,34,42,.16));animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-badge{
  position:absolute;background:#fff;border-radius:var(--r);padding:12px 18px;box-shadow:var(--shadow-md);
  display:flex;align-items:center;gap:11px;font-weight:800;font-size:.85rem;border:1px solid var(--line)
}
.hero-badge .ico{color:var(--pink)}
.hero-badge.b1{top:8%;left:-2%;animation:floaty 6s ease-in-out infinite .6s}
.hero-badge.b2{bottom:14%;right:-3%;animation:floaty 6.6s ease-in-out infinite 1.2s}
.hero-badge.b2 .ico{color:var(--green-dk)}

/* Wave divider */
.wave{display:block;width:100%;height:auto;margin-bottom:-6px}

/* ============================== SECTIONS ================================ */
.sec{padding:86px 0}
.sec-sm{padding:60px 0}
.sec-cream{background:var(--cream)}
.sec-blush{background:linear-gradient(180deg,var(--pink-pale),#fff)}
/* sec-mint is used across the pages — it now reads as fresh growth green */
.sec-mint{background:linear-gradient(180deg,var(--green-pale),#fff)}
.sec-leaf{background:linear-gradient(160deg,var(--green-pale) 0%,#F4FBF0 55%,var(--cream) 100%)}
.sec-dark{
  background:linear-gradient(135deg,#16281F 0%,#123B2A 34%,#4A1F52 72%,#0E4A52 100%);
  color:#F2F7F3;position:relative;overflow:hidden
}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark p{color:rgba(242,247,243,.86)}
.sec-dark::before{
  content:'';position:absolute;inset:0;opacity:.18;
  background-image:radial-gradient(circle,rgba(111,224,160,.9) 1.4px,transparent 1.5px);background-size:30px 30px
}
.sec-dark>*{position:relative;z-index:1}

.sec-head{max-width:760px;margin:0 0 52px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* --------------------------------------------------------------------------
   KICKER — the small uppercase label above a heading.
   The accent bar is a FLEX ITEM, not an absolutely-positioned overlay, so it
   sits beside the text and can never print through it, whatever padding is
   applied later. Do not add padding-left to .kicker in markup.
   -------------------------------------------------------------------------- */
.kicker{
  display:inline-flex;align-items:center;gap:11px;
  font-size:.78rem;font-weight:900;letter-spacing:.17em;text-transform:uppercase;
  color:var(--green-dk);margin-bottom:14px
}
.kicker::before{
  content:'';flex:none;width:28px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--pink),var(--green))
}
.center .kicker{display:inline-block}
.center .kicker::before{display:none}
.center .kicker::after{content:'';display:block;width:64px;height:3px;border-radius:3px;margin:10px auto 0;background:var(--grad-brand)}
.sec-dark .kicker{color:var(--green-lt)}

.sec-lead{font-size:1.12rem;color:var(--ink-2)}
.sec-dark .sec-lead{color:rgba(242,247,243,.9)}

/* ============================== CARDS =================================== */
.grid{display:grid;gap:26px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff;border-radius:var(--r-lg);padding:34px 30px;border:1px solid var(--line);
  box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2),box-shadow .3s,border-color .3s
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background:var(--grad-brand);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.3,1)
}
.card:hover{transform:translateY(-9px);box-shadow:var(--shadow-lg);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card h3{margin-bottom:.45em}
.card p:last-child{margin-bottom:0}

.card-ico{
  width:62px;height:62px;border-radius:19px;display:grid;place-items:center;margin-bottom:20px;color:#fff;
  box-shadow:0 12px 26px rgba(32,34,42,.16)
}
.card-ico .ico{width:28px;height:28px}
.c-gold .card-ico{background:linear-gradient(135deg,var(--marigold),var(--marigold-lt));color:#4A2E00}
.c-pink .card-ico{background:var(--grad-pink)}
.c-green .card-ico{background:var(--grad-growth)}
/* c-teal appears throughout the pages — it now renders in growth green */
.c-teal .card-ico{background:var(--grad-growth)}
.c-violet .card-ico{background:linear-gradient(135deg,var(--violet),#B36FDB)}
.c-aqua .card-ico{background:linear-gradient(135deg,var(--teal-dk),var(--teal-lt))}

.card-num{
  font-family:var(--serif);font-size:3rem;font-weight:900;line-height:1;
  background:linear-gradient(135deg,var(--pink),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:12px;display:block
}
.c-gold .card-num{background:linear-gradient(135deg,var(--marigold-dk),var(--marigold));-webkit-background-clip:text;background-clip:text}
.c-green .card-num,.c-teal .card-num{background:linear-gradient(135deg,var(--green-dk),var(--green));-webkit-background-clip:text;background-clip:text}

/* Feature card with big art */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feature.flip .feature-art{order:2}
.feature-art{position:relative}
.feature-art svg{width:100%;height:auto}
.art-frame{
  border-radius:var(--r-xl);padding:34px;position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--cream-2),var(--pink-pale) 52%,var(--green-pale));
  box-shadow:var(--shadow-md)
}
.art-frame::before{
  content:'';position:absolute;inset:0;opacity:.35;
  background-image:radial-gradient(circle,rgba(31,167,92,.42) 1.3px,transparent 1.4px);background-size:22px 22px
}
.rangoli{position:absolute;width:200px;height:200px;opacity:.35;pointer-events:none}
.rangoli.tr{top:-60px;right:-60px}
.rangoli.bl{bottom:-60px;left:-60px}

/* ============================== STATS =================================== */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.stat{
  text-align:center;padding:38px 20px;border-radius:var(--r-lg);background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);transition:transform .3s,background .3s
}
.stat:hover{transform:translateY(-8px);background:rgba(255,255,255,.15)}
.stat b{
  display:block;font-family:var(--serif);font-size:3.3rem;font-weight:900;line-height:1;margin-bottom:8px;
  background:linear-gradient(135deg,var(--green-lt),var(--marigold-lt) 55%,var(--pink-lt));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.stat span{font-size:.85rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.84)}

/* ============================== LISTS =================================== */
.tick-list{list-style:none;padding:0;margin:0}
.tick-list li{position:relative;padding-left:40px;margin:14px 0;font-weight:600;color:var(--ink-2)}
.tick-list li::before{
  content:'';position:absolute;left:0;top:.35em;width:24px;height:24px;border-radius:50%;
  background:var(--grad-growth);
  box-shadow:0 4px 12px rgba(31,167,92,.32)
}
.tick-list li::after{
  content:'';position:absolute;left:8px;top:.72em;width:8px;height:4px;
  border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:rotate(-45deg)
}
.tick-list.gold li::before{background:linear-gradient(135deg,var(--marigold-dk),var(--marigold));box-shadow:0 4px 12px rgba(245,166,35,.35)}
.tick-list.pink li::before{background:var(--grad-pink);box-shadow:var(--shadow-pink)}
.tick-list.green li::before{background:var(--grad-growth);box-shadow:var(--shadow-green)}

.chips{display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:0;list-style:none}
.chip{
  padding:11px 22px;border-radius:100px;font-weight:800;font-size:.9rem;margin:0;
  background:#fff;border:2px solid var(--line);color:var(--ink-2);transition:.26s cubic-bezier(.2,.9,.3,1.3)
}
.chip:nth-child(5n+1){border-color:var(--green);color:var(--green-dk);background:var(--green-pale)}
.chip:nth-child(5n+2){border-color:var(--pink);color:var(--pink-dk);background:var(--pink-pale)}
.chip:nth-child(5n+3){border-color:var(--marigold);color:var(--marigold-dk);background:var(--cream-2)}
.chip:nth-child(5n+4){border-color:var(--violet);color:var(--violet);background:#F6EDFB}
.chip:nth-child(5n+5){border-color:var(--teal);color:var(--teal-dk);background:#E8FAF7}
.chip:hover{transform:translateY(-4px) scale(1.04);box-shadow:var(--shadow)}
.chip-on{
  background:var(--grad-pink) !important;
  border-color:var(--pink) !important;color:#fff !important;box-shadow:var(--shadow-pink)
}

/* ============================== QUOTE =================================== */
.pull-quote{
  position:relative;text-align:center;max-width:900px;margin:0 auto;padding:56px 40px;
  border-radius:var(--r-xl);
  background:linear-gradient(135deg,var(--marigold) 0%,var(--pink) 42%,var(--violet) 68%,var(--green) 100%);
  color:#fff;box-shadow:var(--shadow-lg);overflow:hidden
}
.pull-quote::before{
  content:'';position:absolute;inset:0;opacity:.18;
  background-image:radial-gradient(circle,#fff 1.6px,transparent 1.7px);background-size:28px 28px
}
.pull-quote .ico{width:52px;height:52px;opacity:.55;margin-bottom:12px;position:relative}
.pull-quote p{
  font-family:var(--serif);font-size:clamp(1.4rem,2.9vw,2.2rem);font-style:italic;font-weight:600;
  line-height:1.35;margin:0;position:relative;color:#fff
}
.pull-quote cite{display:block;margin-top:20px;font-family:var(--sans);font-style:normal;font-weight:800;font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9;position:relative}

/* ============================== PAGE HERO =============================== */
.page-hero{
  position:relative;overflow:hidden;padding:64px 0 72px;
  background:
    radial-gradient(700px 400px at 6% 0%,rgba(245,166,35,.30),transparent 60%),
    radial-gradient(700px 420px at 96% 16%,rgba(229,45,116,.24),transparent 62%),
    radial-gradient(760px 460px at 62% 100%,rgba(31,167,92,.28),transparent 64%),
    linear-gradient(140deg,var(--cream) 0%,#FFF3F8 55%,var(--green-pale) 100%)
}
.page-hero::before{
  content:'';position:absolute;inset:0;opacity:.45;
  background-image:radial-gradient(circle,rgba(31,167,92,.24) 1.4px,transparent 1.5px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)
}
.page-hero-in{position:relative;z-index:1;max-width:900px}
.page-hero h1{font-size:clamp(2.2rem,4.6vw,3.5rem);margin-bottom:.3em}
.page-hero p{font-size:1.14rem;color:var(--ink-2);max-width:64ch;margin-bottom:0}
.crumbs{font-size:.82rem;font-weight:700;letter-spacing:.06em;color:var(--ink-3);margin-bottom:16px}
.crumbs a{color:var(--green-dk)}
.crumbs span{opacity:.5;margin:0 8px}

/* ============================== PROSE =================================== */
.prose h2{margin-top:1.5em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.4em;color:var(--green-dk)}
.prose p{color:var(--ink-2)}
.prose blockquote{
  margin:32px 0;padding:22px 28px;border-left:5px solid var(--green);
  background:var(--green-pale);border-radius:0 var(--r) var(--r) 0;font-family:var(--serif);
  font-style:italic;font-size:1.16rem;color:var(--ink)
}
.prose blockquote p:last-child{margin-bottom:0}

.lead-box{
  padding:30px 34px;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--pink-pale),var(--green-pale));
  border:2px solid rgba(31,167,92,.20);font-size:1.1rem;color:var(--ink-2);margin-bottom:34px
}
.lead-box p:last-child{margin-bottom:0}

/* ============================== TIMELINE ================================ */
.timeline{position:relative;padding-left:44px;margin:0}
.timeline::before{content:'';position:absolute;left:14px;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--marigold),var(--pink) 45%,var(--green))}
.tl-item{position:relative;margin-bottom:34px}
.tl-item::before{
  content:'';position:absolute;left:-37px;top:6px;width:17px;height:17px;border-radius:50%;
  background:#fff;border:4px solid var(--pink);box-shadow:0 0 0 5px rgba(229,45,116,.18)
}
.tl-item:nth-child(3n+2)::before{border-color:var(--marigold);box-shadow:0 0 0 5px rgba(245,166,35,.2)}
.tl-item:nth-child(3n+3)::before{border-color:var(--green);box-shadow:0 0 0 5px rgba(31,167,92,.2)}
.tl-item h3{margin-bottom:.25em}
.tl-year{font-size:.78rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--green-dk)}

/* ============================== STORY CARD ============================== */
.story{
  background:#fff;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column
}
.story:hover{transform:translateY(-9px);box-shadow:var(--shadow-lg)}
.story-top{padding:28px;background:linear-gradient(135deg,var(--pink-pale),var(--cream-2));display:flex;align-items:center;gap:18px}
.story:nth-child(3n+2) .story-top{background:linear-gradient(135deg,var(--green-pale),#F2FBEA)}
.story:nth-child(3n+3) .story-top{background:linear-gradient(135deg,#F6EDFB,var(--green-pale))}
.avatar-art{width:82px;height:82px;flex:none;border-radius:50%;background:#fff;box-shadow:0 8px 20px rgba(32,34,42,.14)}
.story-name{font-family:var(--serif);font-weight:800;font-size:1.22rem;line-height:1.2;margin:0}
.story-meta{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--green-dk)}
.story-body{padding:26px 28px 30px;flex:1}
.story-body p{color:var(--ink-2);margin-bottom:0}

/* ============================== ACCORDION =============================== */
.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;margin-bottom:14px;box-shadow:var(--shadow)}
.acc-q{
  width:100%;text-align:left;background:none;border:0;padding:22px 58px 22px 26px;cursor:pointer;
  font-family:var(--sans);font-size:1.03rem;font-weight:800;color:var(--ink);position:relative;line-height:1.4
}
.acc-q::after{
  content:'';position:absolute;right:24px;top:50%;width:11px;height:11px;margin-top:-8px;
  border-right:3px solid var(--green);border-bottom:3px solid var(--green);
  transform:rotate(45deg);transition:transform .3s
}
.acc.open .acc-q::after{transform:rotate(-135deg);margin-top:-2px;border-color:var(--pink)}
.acc.open .acc-q{color:var(--green-dk);background:var(--green-pale)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.2,.8,.3,1)}
.acc-a-in{padding:4px 26px 24px;color:var(--ink-2)}

/* ============================== FORMS =================================== */
.form-card{
  background:#fff;border-radius:var(--r-xl);padding:40px;box-shadow:var(--shadow-md);
  border:1px solid var(--line);position:relative;overflow:hidden
}
.form-card::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:var(--grad-brand)}
.field{margin-bottom:20px}
.field label{display:block;font-weight:800;font-size:.87rem;margin-bottom:8px;color:var(--ink)}
.field label .req{color:var(--pink)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 17px;border:2px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--sans);font-size:.98rem;color:var(--ink);background:var(--cream);transition:.22s
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green);background:#fff;box-shadow:0 0 0 4px rgba(31,167,92,.15)
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hp{position:absolute;left:-9999px}

.alert{padding:16px 22px;border-radius:var(--r);font-weight:700;margin-bottom:24px;display:flex;gap:11px;align-items:flex-start}
.alert-ok{background:var(--green-pale);border:2px solid var(--green);color:var(--green-dk)}
.alert-err{background:var(--pink-pale);border:2px solid var(--pink);color:var(--pink-dk)}

.contact-tile{
  display:flex;gap:18px;align-items:flex-start;padding:26px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s
}
.contact-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.contact-tile .card-ico{margin-bottom:0;width:52px;height:52px;border-radius:15px}
.contact-tile h3{font-size:1.1rem;margin-bottom:.2em}
.contact-tile p{margin-bottom:0;font-size:.95rem;color:var(--ink-2)}

/* Map embed — keeps a square-ish frame and never collapses to zero height */
.map-embed{position:relative;width:100%;padding-bottom:100%;min-height:340px;border-radius:var(--r-lg);overflow:hidden}
.map-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* ============================== GALLERY ================================= */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gal-item{
  border-radius:var(--r-lg);overflow:hidden;position:relative;box-shadow:var(--shadow);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2),box-shadow .35s;background:var(--green-pale)
}
.gal-item:hover{transform:translateY(-8px) scale(1.015);box-shadow:var(--shadow-lg)}
.gal-art{aspect-ratio:4/3;display:grid;place-items:center;padding:22px}
.gal-art svg{width:100%;height:100%}
.gal-cap{padding:16px 20px 20px;background:#fff}
.gal-cap b{display:block;font-family:var(--serif);font-size:1.05rem}
.gal-cap span{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--green-dk)}

/* ============================== TABLE =================================== */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--shadow);border:1px solid var(--line)}
table.data{width:100%;border-collapse:collapse;background:#fff;min-width:520px}
table.data th{
  background:linear-gradient(135deg,var(--green-dk),var(--pink-dk));color:#fff;text-align:left;
  padding:16px 20px;font-size:.8rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase
}
table.data td{padding:15px 20px;border-top:1px solid var(--line);color:var(--ink-2);font-weight:600}
table.data tr:nth-child(even) td{background:var(--cream)}
table.data tr:hover td{background:var(--green-pale)}

/* Donation / utilisation bars */
.bar-row{margin-bottom:22px}
.bar-top{display:flex;justify-content:space-between;font-weight:800;font-size:.92rem;margin-bottom:8px}
.bar{height:14px;border-radius:100px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--green-dk),var(--green-lt));width:0;transition:width 1.3s cubic-bezier(.2,.8,.3,1)}
.bar-row:nth-child(2) .bar i{background:linear-gradient(90deg,var(--pink),var(--pink-lt))}
.bar-row:nth-child(3) .bar i{background:linear-gradient(90deg,var(--marigold-dk),var(--marigold-lt))}

/* ============================== CTA BAND ================================ */
.cta-band{
  position:relative;overflow:hidden;padding:72px 0;
  background:linear-gradient(120deg,var(--pink) 0%,#C0288E 34%,var(--violet) 58%,var(--green-dk) 100%);
  color:#fff
}
.cta-band::before{
  content:'';position:absolute;inset:0;opacity:.2;
  background-image:radial-gradient(circle,#fff 1.6px,transparent 1.7px);background-size:30px 30px
}
.cta-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap}
.cta-title{color:#fff;font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:.3em}
.cta-text{color:rgba(255,255,255,.9);max-width:58ch;margin-bottom:0}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}
.cta-actions .btn-donate{background:#fff;color:var(--pink-dk);box-shadow:0 16px 40px rgba(0,0,0,.22)}
.cta-actions .btn-donate:hover{color:var(--pink-dk)}

/* ============================== FOOTER ================================== */
.site-foot{background:#14251C;color:rgba(242,247,243,.72);padding-top:70px;font-size:.95rem}
.site-foot::before{content:'';display:block;height:5px;margin:-70px 0 70px;background:var(--grad-brand)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:52px}
.brand-foot .brand-sub{color:rgba(242,247,243,.55)}
.foot-desc{margin-top:18px;line-height:1.7}
.foot-quote{
  font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--green-lt);
  padding-left:16px;border-left:3px solid var(--pink)
}
.foot-col h3{color:#fff;font-family:var(--sans);font-size:.83rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;margin-bottom:18px}
.foot-col ul{list-style:none;padding:0;margin:0}
.foot-col li{margin:9px 0}
.foot-col a{color:rgba(242,247,243,.72);transition:.22s;display:inline-block}
.foot-col a:hover{color:var(--green-lt);padding-left:5px}
.foot-contact p{display:flex;gap:9px;align-items:flex-start;margin-bottom:12px}
.foot-contact .ico{color:var(--pink-lt);margin-top:.35em}
.foot-contact a{color:rgba(242,247,243,.86)}
.foot-contact a:hover{color:var(--green-lt)}
.foot-contact .pad{padding-left:0}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0}
.foot-bottom-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.85rem}
.foot-bottom p{margin:0}
.foot-legal a{color:rgba(242,247,243,.72)}
.foot-legal span{margin:0 9px;opacity:.4}

.to-top{
  position:fixed;right:24px;bottom:24px;width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--green),var(--pink));color:#fff;display:grid;place-items:center;
  box-shadow:var(--shadow-green);opacity:0;visibility:hidden;transform:translateY(16px);transition:.3s;z-index:150
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{transform:translateY(-4px) scale(1.06)}
.to-top .ico{transform:rotate(-90deg);width:22px;height:22px}

/* ============================== REVEAL ================================== */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}.rv-d4{transition-delay:.36s}

/* ============================== RESPONSIVE ============================== */
@media (max-width:1080px){
  .nav-list{display:none}
  .burger{display:flex}
  .nav{
    position:fixed;top:0;right:-100%;width:min(400px,88vw);height:100vh;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:96px 24px 40px;overflow-y:auto;
    box-shadow:-20px 0 60px rgba(32,34,42,.22);transition:right .38s cubic-bezier(.2,.8,.3,1);z-index:190
  }
  .nav.open{right:0}
  .nav.open .nav-list{display:flex;flex-direction:column;align-items:stretch;gap:2px;width:100%}
  .nav-link{padding:15px 14px;font-size:1rem;border-bottom:1px solid var(--line);border-radius:0;justify-content:space-between}
  .nav-link::after{display:none}
  .sub{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    padding:4px 0 10px 14px;min-width:0;display:none
  }
  .nav-item.open-sub .sub{display:block}
  .nav-cta{margin:22px 14px 0;justify-content:center}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .hero-in{grid-template-columns:1fr;gap:44px;padding-top:56px;padding-bottom:70px}
  .hero-visual{max-width:520px;margin:0 auto}
  .hero-badge.b1{left:2%}.hero-badge.b2{right:2%}
  .feature{grid-template-columns:1fr;gap:36px}
  .feature.flip .feature-art{order:0}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .sec{padding:62px 0}
  .hero-in{padding-top:44px;padding-bottom:56px}
  .eyebrow{font-size:.68rem;padding:7px 14px;letter-spacing:.09em}
  .hero-lead{font-size:1.02rem;line-height:1.65}
  .wordmark-line{gap:.15em}
  .brand-sub{display:none}
  .hero-badge{padding:9px 13px;font-size:.75rem}
  .hero-badge.b1{left:0}.hero-badge.b2{right:0}
  .art-frame{padding:20px}
  .rangoli{width:150px;height:150px}
  .g-2,.g-3,.g-4,.gal{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .topbar-msg{display:none}
  .topbar-in{justify-content:center}
  .topbar-links{gap:14px;font-size:.78rem}
  .hero-stats{gap:22px}
  .hero-stat b{font-size:1.7rem}
  .form-card{padding:26px 22px}
  .pull-quote{padding:38px 24px}
  .foot-grid{grid-template-columns:1fr}
  .cta-in{flex-direction:column;align-items:flex-start}
  .brand-name{font-size:1.32rem}
  /* the wordmark is allowed to wrap here, so the absolute underline is dropped —
     on a wrapped inline element it lands across the text instead of under it */
  .kalpa{white-space:normal}
  .wordmark-line .kalpa::after{display:none}
  .kicker{letter-spacing:.13em}
  .map-embed{padding-bottom:75%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
}

@media print{
  .topbar,.site-head,.cta-band,.to-top,.hero-art{display:none}
  body{font-size:12pt}
}


/* ===== v2: real logo + coconut-tree K ===== */
.logo-mark{border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(36,26,46,.18);object-fit:cover}
.brand:hover .logo-mark{transform:scale(1.05)}
.kmark{display:inline-block;height:.98em;width:.7em;vertical-align:-.1em;margin-right:.02em;overflow:visible}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-logo{position:absolute;bottom:6px;left:-6px;width:128px;height:128px;border-radius:50%;background:#fff;
  box-shadow:0 10px 30px rgba(36,26,46,.22);z-index:3;border:4px solid #fff}
.logo-feature{display:flex;align-items:center;justify-content:center}
.logo-feature img{width:min(340px,80%);height:auto;border-radius:50%;background:#fff;box-shadow:0 18px 50px rgba(36,26,46,.18)}
.empty-state{text-align:center;max-width:640px;margin:0 auto}
.alert-wrap{max-width:720px;margin:0 auto 24px}
@media (max-width:640px){.hero-logo{width:84px;height:84px;bottom:4px;left:0}}