/* ============================================================
   MARAKUCHA — design system
   Encre nuit / sable / framboise / moka-or / teal
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap');

:root{
  --ink:#1a1626;
  --ink-soft:#2b2438;
  --cloth:#f2e9d8;
  --cloth-deep:#e8dcc4;
  --raspberry:#c31e43;
  --raspberry-deep:#9c1735;
  --marigold:#e9a23b;
  --teal:#0a7f8c;
  --teal-deep:#065460;
  --lagoon:#076a5c;
  --sun:#ffd43b;
  --white:#fffaf1;
  --line:rgba(26,22,38,.12);
  --line-light:rgba(255,250,241,.22);
  --shadow:0 18px 46px rgba(26,22,38,.16);
  --radius-a:28px 6px 28px 6px;
  --radius-b:6px 28px 6px 28px;
  --serif:'Bricolage Grotesque',sans-serif;
  --sans:'Figtree',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--cloth);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--raspberry);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--white);color:var(--ink);padding:.8rem 1.2rem;z-index:99;border-radius:0 0 8px 0}
.skip:focus{left:0}

h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.035em;margin:0 0 .4em}
em{font-style:normal;color:var(--marigold)}
h1{font-size:clamp(2.8rem,7vw,5.6rem);line-height:.98}
h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.08}
h3{font-size:1.3rem;font-weight:600}
p{margin:0 0 1em}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:620px;color:var(--ink-soft)}

/* --- eyebrow / kicker: quiet marker, not shouty caps --- */
.eyebrow,.kicker{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.01em;
  color:var(--raspberry-deep);margin-bottom:.9rem;
}
.eyebrow::before,.kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--marigold);flex:none}

/* --- header --- */
header{
  height:84px;display:flex;align-items:center;gap:1.5rem;
  padding:0 clamp(1rem,4vw,3.5rem);position:sticky;top:0;z-index:30;
  background:var(--lagoon);color:var(--ink);
  border-bottom:3px solid var(--marigold);
}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--serif);font-weight:600;font-size:1.15rem}
.brand img{width:42px;height:42px;object-fit:contain;border-radius:10px}
nav{display:flex;align-items:center;gap:1.6rem;margin:auto;font-size:.94rem;font-weight:500}
nav a{position:relative;padding:.2rem 0}
nav a:not(.donate)::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--raspberry);transition:width .2s ease}
nav a:not(.donate):hover::after{width:100%}
.donate,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1.4rem;font-weight:600;font-size:.95rem;border:2px solid var(--ink);
  border-radius:var(--radius-a);transition:transform .15s ease,background .15s ease,color .15s ease;
}
.donate,.btn.primary{background:var(--raspberry);color:var(--white);border-color:var(--raspberry)}
.donate:hover,.btn.primary:hover{background:var(--raspberry-deep);border-color:var(--raspberry-deep);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--cloth);transform:translateY(-2px)}
.langs{display:flex;gap:.6rem;font-size:.8rem;font-weight:600}
.langs a{opacity:.55}
.langs a:hover{opacity:1}
.menu{display:none;background:none;border:2px solid var(--ink);border-radius:10px;padding:.5rem .9rem;font-weight:600;font-family:var(--sans)}

@media (max-width:880px){
  nav{position:fixed;inset:84px 0 0 0;background:var(--cloth);flex-direction:column;align-items:flex-start;
    padding:2rem clamp(1.25rem,6vw,3rem);gap:1.4rem;font-size:1.2rem;transform:translateY(-8px);opacity:0;
    pointer-events:none;transition:opacity .2s ease,transform .2s ease}
  nav.open{opacity:1;transform:none;pointer-events:auto}
  .menu{display:block}
  .langs{display:none}
}

main>section{padding:clamp(3rem,8vw,7rem) clamp(1.25rem,6vw,5rem)}

/* --- hero: full-bleed turquoise photo --- */
main>.hero{position:relative;display:flex;align-items:flex-end;min-height:calc(100svh - 92px);padding:0!important;overflow:hidden;background:var(--teal-deep);color:var(--white)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 6%;border:0;border-radius:0;aspect-ratio:auto}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,84,96,.97) 0%,rgba(6,84,96,.88) 30%,rgba(10,127,140,.25) 58%,rgba(10,127,140,0) 75%)}
.hero-media span{position:absolute;top:1rem;right:1rem;bottom:auto;left:auto;z-index:2;background:rgba(255,250,241,.9);color:var(--ink);font-size:.7rem;font-weight:600;padding:.3rem .65rem;border-radius:999px;box-shadow:none;max-width:none}
.photo-donate{display:none}
.hero-copy{position:relative;z-index:1;width:min(100%,900px);padding:0 clamp(1.25rem,6vw,5rem) clamp(2.5rem,7vw,5rem)}
.hero-copy h1{color:var(--white);text-shadow:0 2px 24px rgba(6,84,96,.35)}
.hero-copy .lead{color:rgba(255,250,241,.94);max-width:640px}
.hero-copy .eyebrow{color:var(--white)}
.hero-copy .actions{display:flex;gap:1rem;flex-wrap:wrap;margin:1.6rem 0 0}
.hero-copy .btn.ghost{color:var(--white);border-color:var(--white)}
.hero-copy .btn.ghost:hover{background:var(--white);color:var(--teal-deep)}
.hero-copy audio{width:min(100%,380px);height:40px;margin-top:1.2rem;opacity:.92}
main>.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:34px;z-index:2;background:var(--marigold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V18C150 34 300 2 450 14s300 22 450 6 200-14 300-4v14z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V18C150 34 300 2 450 14s300 22 450 6 200-14 300-4v14z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.page-hero{padding-top:clamp(4rem,10vw,7rem)!important}
.page-hero h1,.page-hero .lead{max-width:800px}
.page-hero .btn{margin-top:.5rem}

/* --- sections --- */
.light{background:var(--white)}
.sunny{background:var(--marigold);color:var(--ink)}
.sunny .kicker,.sunny .eyebrow{color:var(--ink)}
.mission{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.two{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
@media (max-width:760px){.mission,.two{grid-template-columns:1fr}}

/* --- program cards (legit sequence: 01-04) --- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:2rem}
.card{
  display:block;padding:2rem 1.6rem;border-radius:var(--radius-a);border:2px solid var(--ink);
  background:var(--white);transition:transform .16s ease,box-shadow .16s ease;position:relative;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card b{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  font-family:var(--serif);font-size:1.05rem;font-weight:600;margin-bottom:1rem;border:2px solid var(--ink);
}
.card-sun b{background:var(--marigold)}
.card-coral b{background:var(--raspberry);color:var(--white);border-color:var(--raspberry)}
.card-blue b{background:var(--teal);color:var(--white);border-color:var(--teal)}
.card-lime b{background:var(--cloth-deep)}
.card h3{margin-bottom:.4rem}
.card p{margin:0;color:var(--ink-soft);font-size:.96rem}

/* --- funding note / trust preview --- */
.funding-note,.trust-preview{background:var(--ink);color:var(--cloth);border-radius:var(--radius-b);margin:0 clamp(1.25rem,6vw,5rem)}
.funding-note{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;padding:clamp(2.5rem,6vw,4rem)!important}
.funding-note h2,.trust-preview h2{color:var(--white)}
.funding-note .kicker,.trust-preview .kicker{color:var(--marigold)}
.funding-note .kicker::before,.trust-preview .kicker::before{background:var(--raspberry)}
.trust-preview{padding:clamp(2.5rem,6vw,4rem)!important;text-align:left}
.trust-preview .btn.ghost{color:var(--white);border-color:var(--cloth)}
.trust-preview .btn.ghost:hover{background:var(--cloth);color:var(--ink)}
@media (max-width:760px){.funding-note{grid-template-columns:1fr}}

/* --- impact stats --- */
.impact{background:var(--raspberry);color:var(--white);text-align:left}
.impact h2{color:var(--white)}
.impact .kicker{color:var(--white)}
.impact .kicker::before{background:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2rem;margin-top:2rem}
.stats strong{display:block;font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.4rem);line-height:1}
.stats span{font-size:.92rem;opacity:.9}

/* --- photo story --- */
.photo-story{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center}
.photo-story img{border-radius:var(--radius-a);aspect-ratio:5/4;object-fit:cover}
@media (max-width:760px){.photo-story{grid-template-columns:1fr}}
.text-link{font-weight:600;color:var(--raspberry-deep);border-bottom:2px solid currentColor;padding-bottom:2px}
.text-link::after{content:" →";display:inline-block;transition:transform .15s ease}
.text-link:hover::after{transform:translateX(4px)}

/* --- newsletter --- */
.newsletter{background:var(--teal);color:var(--white);display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.newsletter h2,.newsletter .kicker{color:var(--white)}
.newsletter .kicker::before{background:var(--marigold)}
.newsletter form{display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:flex-start}
.newsletter label:not(.consent):not(.hp){flex:1 1 240px;font-size:.85rem;font-weight:600}
.newsletter input[type=email]{width:100%;margin-top:.4rem;padding:.8rem 1rem;border-radius:10px;border:none;font-size:1rem}
.newsletter .consent{flex-basis:100%;font-size:.82rem;display:flex;gap:.5rem;align-items:flex-start;opacity:.92}
.newsletter .btn.primary{background:var(--marigold);color:var(--ink);border-color:var(--marigold);align-self:flex-end}
@media (max-width:760px){.newsletter{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px}

/* --- forms (contact) --- */
.form-wrap{max-width:820px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem}
.form-grid label,.form-wrap>form>label{display:flex;flex-direction:column;gap:.4rem;font-size:.88rem;font-weight:600;margin-bottom:1.1rem}
input,select,textarea{
  font:inherit;padding:.75rem .9rem;border-radius:10px;border:2px solid var(--line);background:var(--white);color:var(--ink);
}
input:focus,select:focus,textarea:focus{border-color:var(--raspberry)}
.consent{flex-direction:row!important;align-items:flex-start;font-weight:400!important;font-size:.86rem}
.fine{font-size:.82rem;color:var(--ink-soft)}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}

/* --- partners / trust logos --- */
.partner-logos,.logos{display:flex;flex-wrap:wrap;gap:2.2rem 3rem;align-items:flex-start;margin-top:2rem}
.partner-logos figure,.logos figure{margin:0;max-width:200px;display:flex;flex-direction:column;gap:.65rem}
.partner-logos img,.logos img{max-height:56px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.8;transition:opacity .15s ease,filter .15s ease}
.partner-logos figure:hover img,.logos figure:hover img{filter:none;opacity:1}
.partner-logos figcaption,.logos figcaption{font-size:.82rem;color:var(--ink-soft);line-height:1.4}
.wordmark strong{font-family:var(--serif);font-size:1.4rem;display:block}
.partner-strip{display:flex;align-items:center;gap:1.5rem;background:var(--white);border-radius:var(--radius-b);margin:0 clamp(1.25rem,6vw,5rem)}
.partner-strip img{max-height:64px;border-radius:8px}
.trusted{margin-top:0}
.verified-card{border:2px solid var(--ink);border-radius:var(--radius-a);padding:1.6rem;background:var(--white)}

/* --- timeline / activity list / city list --- */
.timeline{border-left:3px solid var(--ink);margin-top:2rem;padding-left:2rem;display:flex;flex-direction:column;gap:2rem}
.city-list{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0}
.city-list span{border:2px solid var(--ink);border-radius:999px;padding:.4rem .9rem;font-size:.85rem;font-weight:600;background:var(--white)}

/* --- service / project grids --- */
.service-hero{background:var(--ink);color:var(--cloth)}
.service-hero h1,.service-hero .kicker{color:var(--white)}
.service-hero .kicker::before{background:var(--marigold)}
.service-grid,.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem;margin-top:2rem}
.project,.service-grid>article,.project-grid>article{border:2px solid var(--ink);border-radius:var(--radius-a);padding:1.8rem 1.6rem;background:var(--cloth)}
.service-grid>article>span,.project-grid>article>span{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  border:2px solid var(--ink);font-family:var(--serif);font-weight:600;margin-bottom:1rem;background:var(--marigold);
}
.service-grid h2,.project-grid h2{font-size:1.35rem}
.service-showcase{display:grid;grid-template-columns:.85fr .85fr 1.15fr;gap:1.8rem;align-items:center}
.service-showcase img{aspect-ratio:3/4;object-fit:cover;border:2px solid var(--ink);border-radius:var(--radius-a)}
.service-showcase img:nth-child(2){margin-top:2.5rem}
@media (max-width:900px){.service-showcase{grid-template-columns:1fr 1fr}.service-showcase>div{grid-column:1/-1}}
@media (max-width:600px){.service-showcase{grid-template-columns:1fr}.service-showcase img:nth-child(2){margin-top:0}}
.full-video,.video-feature video{width:100%;border-radius:var(--radius-a);border:2px solid var(--ink)}
.pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.pills span{border:2px solid var(--ink);border-radius:999px;padding:.4rem .9rem;font-size:.85rem;font-weight:600}

/* --- support / verified cards --- */
.support-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem;margin-top:2rem}
.support-cards>*{border:2px solid var(--ink);border-radius:var(--radius-b);padding:1.8rem;background:var(--white)}

/* --- genk / saka backgrounds --- */
.genk-bg{background:linear-gradient(160deg,var(--teal),var(--ink))}
.saka-bg{background:linear-gradient(160deg,var(--marigold),var(--raspberry))}
.genk-bg h1,.genk-bg .lead,.saka-bg h1,.saka-bg .lead,.genk-bg .eyebrow,.saka-bg .eyebrow{color:var(--white)}
.genk-bg .eyebrow::before,.saka-bg .eyebrow::before{background:var(--white)}

/* --- museum-collab / school-gallery / festival --- */
.school-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1.5rem}
.school-gallery img{border-radius:14px;aspect-ratio:1;object-fit:cover}
.museum-collab{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.festival{border:2px solid var(--ink);border-radius:var(--radius-a);padding:2rem;background:var(--white);margin-top:1.5rem}
.legal-copy{max-width:760px}
.legal-copy p,.legal-copy h2{margin-bottom:1.1rem}

/* --- footer --- */
footer{
  background:var(--ink);color:var(--cloth);padding:clamp(3rem,6vw,5rem) clamp(1.25rem,6vw,5rem) 2.5rem;
  display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.5rem;
}
footer h3{color:var(--white);font-size:1rem;font-family:var(--sans);font-weight:700;margin-bottom:.9rem}
footer p{color:var(--cloth-deep)}
footer img{width:40px;height:40px;border-radius:8px;margin-bottom:1rem}
footer a{display:block;margin-bottom:.55rem;color:var(--cloth-deep)}
footer a:hover{color:var(--marigold)}
.socials{display:flex;gap:1rem;flex-wrap:wrap}
.socials a{display:inline;margin:0}
@media (max-width:760px){footer{grid-template-columns:1fr}}

/* --- cookie banner --- */
.cookie{
  position:fixed;left:1rem;right:1rem;bottom:1rem;max-width:520px;background:var(--ink);color:var(--cloth);
  padding:1.4rem;border-radius:var(--radius-a);box-shadow:var(--shadow);z-index:50;
}
.cookie p{font-size:.9rem;margin-bottom:1rem}
.cookie button{
  font:inherit;font-weight:600;padding:.6rem 1.1rem;border-radius:999px;border:2px solid var(--cloth);
  background:transparent;color:var(--cloth);margin-right:.6rem;cursor:pointer;
}
.cookie button[data-cookie="all"]{background:var(--marigold);color:var(--ink);border-color:var(--marigold)}

/* --- reveal: one quiet entrance on the hero only, everything else appears normally --- */
.reveal{opacity:1;transform:none}
.hero .hero-copy,.hero .hero-media{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.hero .hero-copy.visible,.hero .hero-media.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hero .hero-copy,.hero .hero-media{opacity:1;transform:none}}

/* --- wax-dot texture --- */
.impact,.newsletter{background-image:radial-gradient(rgba(255,250,241,.13) 2.5px,transparent 2.5px);background-size:26px 26px}
.newsletter{background-color:var(--teal)}
.impact{background-color:var(--raspberry)}
.card:hover{transform:translateY(-6px) rotate(-.6deg)}
@media (max-width:700px){.hero-media span{display:none}}

header .langs a{opacity:.75}header .langs a:hover{opacity:1}
header nav a:not(.donate)::after{background:var(--ink)}
header .menu{border-color:var(--ink);background:transparent}
@media (max-width:880px){nav{background:var(--lagoon)}}

/* --- header v2: deep tropical green, sun-yellow text, white logo tile --- */
header{height:92px}
.brand img{width:64px;height:64px;padding:5px;background:#fff;border-radius:14px;object-fit:contain;box-shadow:0 4px 14px rgba(0,0,0,.25)}
header nav a:not(.donate){color:var(--sun);font-weight:600}
header nav a:not(.donate)::after{background:var(--sun)}
header .langs a{color:var(--sun);opacity:.8}
header .langs a:hover{opacity:1}
header .menu{color:var(--sun);border-color:var(--sun)}
@media (max-width:880px){nav{inset:92px 0 0 0;background:var(--lagoon)}}
h1,h2,h3,p,li,a{overflow-wrap:break-word}
main{overflow-x:clip}