/* =========================================================
   Ko'ox Na'ay — Centro de Desarrollo
   Design system
   ========================================================= */

:root{
  --forest:      #1F3A2E;
  --forest-deep: #14261D;
  --green:       #2F6B52;
  --green-mid:   #4F9576;
  --teal:        #4FA6A0;
  --sand:        #FBF5E9;
  --sand-deep:   #F3E9D3;
  --cream:       #FFFDF8;
  --amber:       #E7A13B;
  --amber-deep:  #C9822A;
  --terracotta:  #C4623F;
  --ink:         #22291F;
  --ink-soft:    #566056;
  --white:       #FFFFFF;

  --font-head: "Fraunces", "Georgia", serif;
  --font-body: "Work Sans", "Segoe UI", Arial, sans-serif;

  --container: 1180px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(20, 38, 29, .08);
  --shadow-md: 0 14px 40px rgba(20, 38, 29, .14);

  /* signature clipped corner — the site's one repeated shape motif */
  --cut: 16px;
  /* step-fret (greca) frieze, used as a small cultural marker instead of a plain rule */
  --greca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'%3E%3Cpath d='M0 14V8h6V2h6v6h6v6h6' fill='none' stroke='%23E7A13B' stroke-width='2'/%3E%3C/svg%3E");
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* faint fixed grain — keeps flat colour fields from reading as plain vector fills */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.035;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:2000;
}
::selection{ background:var(--amber); color:var(--forest-deep); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--forest-deep);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:600;
  text-wrap:balance;
}
h1{ font-size:clamp(2.4rem, 4.4vw, 3.8rem); font-weight:600; }
h2{ font-size:clamp(1.9rem, 3vw, 2.7rem); }
h3{ font-size:clamp(1.25rem, 1.8vw, 1.55rem); }
p{ margin:0 0 1em; }
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}
section{ position:relative; }
.section-pad{ padding-block:clamp(60px, 9vw, 108px); }

/* ---------- eyebrow / kicker ---------- */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--amber-deep);
  margin-bottom:14px;
}
.kicker::before{
  content:"";
  width:22px; height:2px;
  background:var(--amber);
  display:inline-block;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.98rem;
  padding:14px 28px;
  border-radius:999px;
  border:2px solid transparent;
  cursor:pointer;
  position:relative;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--amber);
  color:var(--forest-deep);
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover{ background:var(--amber-deep); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline{
  background:transparent;
  border-color:rgba(255,255,255,.55);
  color:inherit;
}
.btn-outline:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); }
.btn-dark{
  background:var(--forest-deep);
  color:var(--cream);
}
.btn-dark:hover{ background:var(--green); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-sm{ padding:10px 20px; font-size:.88rem; }
.btn-paypal{ background:#FFC439; color:#003087; box-shadow:var(--shadow-sm); }
.btn-paypal:hover{ background:#F2B32A; transform:translateY(-2px); box-shadow:var(--shadow-md); }
/* stronger call-to-action treatment for donation buttons */
.btn-cta{
  font-weight:700; letter-spacing:.01em;
  box-shadow:0 8px 22px rgba(201,130,42,.35);
}
.btn-cta:not(.btn-sm){ padding-block:16px; font-size:1.02rem; }
.btn-cta:hover{ box-shadow:0 12px 30px rgba(201,130,42,.5); }
.btn-paypal.btn-cta{ box-shadow:0 6px 18px rgba(255,196,57,.45); animation:cta-pulse 2.6s ease-out infinite; }
.btn-paypal.btn-cta.btn-sm{ padding:12px 22px; font-size:.92rem; }
.btn-paypal svg{ width:17px; height:17px; flex:none; color:#C4462E; }
.paypal-form{ margin:0; display:flex; }
@keyframes cta-pulse{
  0%{ box-shadow:0 6px 18px rgba(255,196,57,.45), 0 0 0 0 rgba(255,196,57,.55); }
  70%{ box-shadow:0 6px 18px rgba(255,196,57,.45), 0 0 0 12px rgba(255,196,57,0); }
  100%{ box-shadow:0 6px 18px rgba(255,196,57,.45), 0 0 0 0 rgba(255,196,57,0); }
}
@media (prefers-reduced-motion: reduce){ .btn-paypal.btn-cta{ animation:none; } }
@media (max-width:520px){ .hide-sm{ display:none; } .btn-paypal.btn-cta.btn-sm{ padding:10px 16px; } }
.paypal-card{
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  margin-bottom:24px; padding:34px;
}
.paypal-card > div{ flex:1 1 380px; max-width:640px; }
.paypal-card p:last-child{ margin-bottom:0; }
.paypal-card .kicker{ color:var(--amber-deep); margin-bottom:8px; }
.paypal-card form{ margin:0; }
/* arrow reveal on the two primary CTA styles — skipped on compact/nav buttons */
.btn-primary:not(.btn-sm),.btn-dark:not(.btn-sm){ padding-right:38px; }
.btn-primary:not(.btn-sm)::after,.btn-dark:not(.btn-sm)::after{
  content:"→"; position:absolute; right:18px; top:50%; translate:0 -50%;
  opacity:0; transition:opacity .25s ease, right .25s ease;
}
.btn-primary:not(.btn-sm):hover::after,.btn-dark:not(.btn-sm):hover::after{ opacity:1; right:14px; }

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255, 253, 248, .86);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid rgba(31,58,46,.08);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-head); font-weight:600;
  font-size:1.25rem; color:var(--forest-deep);
}
.brand svg{ width:40px; height:40px; flex:none; }
.brand-logo{ height:76px; width:auto; flex:none; }
@media (max-width:900px){ .brand-logo{ height:56px; } }
@media (max-width:520px){ .brand-logo{ height:46px; } }
.brand .brand-sub{
  display:block; font-family:var(--font-body); font-weight:600;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green); margin-top:1px;
}
.nav-links{
  display:flex; align-items:center; gap:30px;
}
.nav-links a{
  font-weight:600; font-size:.95rem; color:var(--ink);
  position:relative; padding-block:4px;
}
.nav-links a.active,.nav-links a:hover{ color:var(--green); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--amber);
}
.nav-actions{ display:flex; align-items:center; gap:14px; }
.lang-toggle{
  display:flex; border:1.5px solid rgba(31,58,46,.25); border-radius:999px; overflow:hidden;
  font-size:.78rem; font-weight:700;
}
.lang-toggle button{
  border:none; background:transparent; padding:7px 12px; cursor:pointer; color:var(--ink-soft);
  font-family:var(--font-body); font-weight:700; letter-spacing:.03em;
}
.lang-toggle button.active{ background:var(--forest-deep); color:var(--cream); }
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{ width:24px; height:2px; background:var(--forest-deep); border-radius:2px; }

@media (max-width:900px){
  .nav-links{
    position:fixed; inset:86px 16px auto 16px; flex-direction:column; align-items:stretch;
    background:var(--cream); border-radius:var(--radius-md); box-shadow:var(--shadow-md);
    padding:18px 22px; gap:4px; transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:all .22s ease; border:1px solid rgba(31,58,46,.08);
  }
  .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a{ padding:12px 4px; border-bottom:1px solid rgba(31,58,46,.08); }
  .nav-links a:last-child{ border-bottom:none; }
  .nav-toggle{ display:flex; }
}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(180deg, var(--sand) 0%, var(--sand-deep) 100%);
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
  padding-block:clamp(56px,8vw,96px);
}
.hero h1{ margin-bottom:.4em; }
.hero .lede{ font-size:1.15rem; color:var(--ink-soft); max-width:52ch; margin-bottom:1.8em; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-art{ position:relative; }

/* hero — full-width typographic layout */
.hero-center{
  text-align:center; max-width:900px; margin-inline:auto;
  padding-block:clamp(64px,9vw,104px) clamp(40px,6vw,56px);
}
.hero-center .kicker{ justify-content:center; }
.hero-center .kicker::before{
  display:inline-block; width:7px; height:7px; background:var(--amber-deep);
  transform:rotate(45deg); margin-right:2px;
}
.hero-title{
  font-size:clamp(2.6rem, 6.4vw, 5.2rem);
  line-height:1.04;
  max-width:17ch;
  margin-inline:auto;
  margin-bottom:.5em;
}
.hero-title em{ font-style:italic; color:var(--green); }
.hero-center .lede{ margin-inline:auto; font-size:1.18rem; }
.hero-center .hero-cta{ justify-content:center; }

/* ---------- hero slider ---------- */
.hero-slider{
  position:relative;
  height:min(94vh, 860px);
  min-height:560px;
  overflow:hidden;
  background:var(--forest-deep);
}
.hero-slide{
  position:absolute; inset:0;
  display:flex; align-items:center;
  opacity:0; visibility:hidden;
  transition:opacity 1.2s ease;
  z-index:1;
}
.hero-slide.is-active{ opacity:1; visibility:visible; z-index:2; }
.hero-slide__scene{
  position:absolute; inset:0; transform:scale(1.04);
}
.hero-slide.is-active .hero-slide__scene{ animation:hero-kenburns 16s ease-in-out infinite alternate; }
@keyframes hero-kenburns{
  from{ transform:scale(1.04) translate3d(0,0,0); }
  to{ transform:scale(1.14) translate3d(-1%,-1%,0); }
}
.hero-slide__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,26,20,.32) 0%, rgba(15,26,20,.62) 68%, rgba(15,26,20,.8) 100%);
}
/* Temporary stock photography (Unsplash, free license) until real project
   photos are available — see scene-* rules to swap for local files later. */
.scene-jungle{ background:
  linear-gradient(150deg, rgba(15,30,23,.35) 0%, rgba(47,107,82,.25) 100%),
  url("https://images.unsplash.com/photo-1550641575-fd3917d20b8f?w=1800&q=70&auto=format&fit=crop") center/cover no-repeat,
  linear-gradient(150deg, #0F1E17 0%, #1F3A2E 45%, #2F6B52 100%); }
.scene-culture{ background:
  linear-gradient(150deg, rgba(36,27,18,.4) 0%, rgba(196,98,63,.3) 100%),
  url("https://images.unsplash.com/photo-1537917509981-11951422446f?w=1800&q=70&auto=format&fit=crop") center/cover no-repeat,
  linear-gradient(150deg, #241B12 0%, #5C3A24 45%, #C4623F 100%); }
.scene-ocean{ background:
  linear-gradient(150deg, rgba(13,36,34,.35) 0%, rgba(79,166,160,.25) 100%),
  url("https://images.unsplash.com/photo-1505870000807-1481b8924f11?w=1800&q=70&auto=format&fit=crop") center/cover no-repeat,
  linear-gradient(150deg, #0D2422 0%, #1B4640 45%, #4FA6A0 100%); }

.hero-slide__content{ position:relative; z-index:3; text-align:center; max-width:920px; margin-inline:auto; }
.hero-slide__content .kicker{ justify-content:center; color:var(--amber); }
.hero-slide__content .kicker::before{
  display:inline-block; width:7px; height:7px; background:var(--amber);
  transform:rotate(45deg); margin-right:2px;
}
.hero-slide__content .hero-title{ color:var(--cream); }
.hero-slide__content .hero-title em{ color:var(--amber); font-style:italic; }
.hero-slide__content .lede{ color:rgba(251,245,233,.88); margin-inline:auto; }
.hero-slide__content .hero-cta{ justify-content:center; }
.hero-slide__content .btn-outline{ color:var(--cream); }

.hero-nav{
  position:absolute; top:50%; translate:0 -50%;
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  color:var(--cream); display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:5; backdrop-filter:blur(4px);
  transition:background .2s ease, transform .2s ease;
}
.hero-nav svg{ width:20px; height:20px; }
.hero-nav:hover{ background:rgba(255,255,255,.28); }
.hero-nav.prev{ left:18px; } .hero-nav.next{ right:18px; }
@media (max-width:700px){ .hero-nav{ width:38px; height:38px; } .hero-nav.prev{ left:8px; } .hero-nav.next{ right:8px; } }

.hero-dots{
  position:absolute; left:50%; translate:-50% 0; bottom:26px;
  display:flex; gap:10px; z-index:5;
}
.hero-dots .dot{
  width:9px; height:9px; border-radius:50%; padding:0; border:none;
  background:rgba(255,255,255,.4); cursor:pointer; transition:all .25s ease;
}
.hero-dots .dot.is-active{ width:28px; border-radius:6px; background:var(--amber); }

.marquee{
  overflow:hidden;
  background:var(--forest-deep);
  padding-block:16px;
  border-top:1px solid rgba(251,245,233,.08);
}
.marquee::after{
  content:"";
  display:block;
  height:12px;
  margin-top:14px;
  background-image:var(--greca);
  background-repeat:repeat-x;
  background-position:center;
  opacity:.5;
}
.marquee-track{
  display:flex; align-items:center; gap:40px; width:max-content;
  animation:marquee-scroll 26s linear infinite;
  will-change:transform;
}
.marquee-track .grp{ display:flex; align-items:center; gap:40px; }
.marquee-track span{
  font-family:var(--font-head); font-weight:500;
  font-size:clamp(1.05rem, 2vw, 1.5rem);
  color:var(--cream); white-space:nowrap;
}
.marquee-track .dot{
  font-size:0; width:6px; height:6px; background:var(--amber);
  display:inline-block; transform:rotate(45deg);
}
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
  .hero-slide.is-active .hero-slide__scene{ animation:none; }
  .hero-slide{ transition:none; }
}
.page-hero{
  position:relative;
  overflow:hidden;
  background:var(--forest-deep);
  padding-block:clamp(96px,11vw,140px) clamp(48px,7vw,68px);
  isolation:isolate;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,26,20,.58) 0%, rgba(15,26,20,.88) 100%),
    var(--section-bg, none) center/cover no-repeat;
  z-index:0;
}
.page-hero > .container{ position:relative; z-index:1; }
.page-hero .breadcrumb{ color:rgba(251,245,233,.72); }
.page-hero .breadcrumb a{ color:var(--amber); }
.page-hero .kicker{ color:var(--amber); }
.page-hero h1{ color:var(--cream); }
.page-hero .lede{ max-width:60ch; color:rgba(251,245,233,.86); font-size:1.08rem; }

/* dark sections with optional background photography */
.band-forest{ position:relative; overflow:hidden; isolation:isolate; }
.band-forest::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,26,20,.62) 0%, rgba(15,26,20,.9) 100%),
    var(--section-bg, none) center/cover no-repeat;
  z-index:0;
}
.band-forest > .container{ position:relative; z-index:1; }

@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ order:-1; }
}

/* ---------- band variants ---------- */
.band-forest{ background:var(--forest-deep); color:var(--sand); }
.band-forest h2,.band-forest h3{ color:var(--cream); }
.band-forest .kicker{ color:var(--amber); }
.band-teal{ background:var(--teal); color:var(--forest-deep); }
.band-sand{ background:var(--sand); }
.band-cream{ background:var(--cream); }

/* ---------- cards ---------- */
.grid{ display:grid; gap:26px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:920px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--white);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  padding:30px 28px;
  filter:drop-shadow(var(--shadow-sm));
  transition:transform .25s ease, filter .25s ease;
  border:1px solid rgba(31,58,46,.08);
}
.card:hover{ transform:translateY(-5px); filter:drop-shadow(var(--shadow-md)); }
.card .icon{
  width:auto; height:auto; background:none;
  display:inline-flex; margin-bottom:26px;
  color:var(--green); position:relative;
}
.card .icon svg{ width:30px; height:30px; }
.card .icon::after{
  content:""; position:absolute; left:0; bottom:-11px; width:26px; height:2px; background:var(--amber);
}
.card h3{ margin-bottom:.5em; }
.card p{ color:var(--ink-soft); margin-bottom:0; font-size:.97rem; }

.story-card{
  background:var(--white);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  filter:drop-shadow(var(--shadow-sm));
  display:flex; flex-direction:column; height:100%;
  border:1px solid rgba(31,58,46,.08);
  transition:transform .25s ease, filter .25s ease;
}
.story-card:hover{ transform:translateY(-4px); filter:drop-shadow(var(--shadow-md)); }

/* line-of-action photo (que-hacemos.html) — temporary stock photography until
   real project photos are available */
.line-photo{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  clip-path:polygon(0 0, calc(100% - var(--cut) * 1.6) 0, 100% calc(var(--cut) * 1.6), 100% 100%, 0 100%);
  filter:drop-shadow(var(--shadow-sm));
  margin-bottom:22px;
}
.story-card .swatch{
  height:120px; display:flex; align-items:center; justify-content:center;
}
.story-card .swatch svg{ width:52px; height:52px; }
.story-card .body{ padding:22px 22px 26px; flex:1; display:flex; flex-direction:column; }
.story-card h4{ font-family:var(--font-head); font-size:1.08rem; margin:0 0 .4em; color:var(--forest-deep); }
.story-card p{ color:var(--ink-soft); font-size:.93rem; margin-bottom:0; }

/* ---------- stats ---------- */
.stats-strip{
  display:grid; grid-template-columns:repeat(6,1fr); text-align:center;
  border-block:1px solid rgba(251,245,233,.16);
}
.stat{ padding:26px 12px 22px; border-left:1px solid rgba(251,245,233,.16); }
.stat:first-child{ border-left:none; }
.stat .num{
  font-family:var(--font-head); font-size:clamp(1.9rem,2.6vw,2.6rem); font-weight:600;
  color:var(--amber); display:block; margin-bottom:.2em; line-height:1.1;
}
.stat .label{ font-size:.86rem; letter-spacing:.02em; opacity:.88; display:block; }
.stat .spark{ display:block; margin:14px auto 0; color:var(--amber); }
.stats-caption{ text-align:center; margin:18px 0 0; font-size:.84rem; opacity:.85; }
.stats-caption a{ color:var(--amber); font-weight:600; }
@media (max-width:1080px){
  .stats-strip{ grid-template-columns:repeat(3,1fr); }
  .stat{ border-top:none; }
  .stat:nth-child(3n+1){ border-left:none; }
  .stat:nth-child(n+4){ border-top:1px solid rgba(251,245,233,.16); }
}
@media (max-width:600px){
  .stats-strip{ grid-template-columns:repeat(2,1fr); }
  .stat{ border-top:none; border-left:1px solid rgba(251,245,233,.16); }
  .stat:nth-child(2n+1){ border-left:none; }
  .stat:nth-child(n+3){ border-top:1px solid rgba(251,245,233,.16); }
}

/* ---------- impact chart (home) ---------- */
.impact-card{
  background:var(--white);
  clip-path:polygon(0 0, calc(100% - var(--cut) * 1.6) 0, 100% calc(var(--cut) * 1.6), 100% 100%, 0 100%);
  filter:drop-shadow(var(--shadow-sm));
  border:1px solid rgba(31,58,46,.08);
  padding:clamp(22px,3vw,38px);
}
.metric-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.metric-tabs button{
  font-family:var(--font-body); font-weight:600; font-size:.84rem; white-space:nowrap;
  padding:8px 16px; border-radius:999px; cursor:pointer;
  border:1.5px solid rgba(31,58,46,.2); background:transparent; color:var(--ink-soft);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.metric-tabs button:hover{ border-color:var(--green); color:var(--green); }
.metric-tabs button[aria-checked="true"]{ background:var(--forest-deep); border-color:var(--forest-deep); color:var(--cream); }
.metric-tabs button:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
@media (max-width:640px){ .metric-tabs{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; } }
.impact-head{ display:flex; align-items:baseline; justify-content:space-between; gap:6px 24px; flex-wrap:wrap; margin-bottom:6px; }
.impact-head h3{ margin:0; font-size:clamp(1.3rem,2vw,1.7rem); }
.impact-summary{ margin:0; color:var(--ink-soft); font-size:.92rem; }
.impact-summary strong{ color:var(--ink); font-variant-numeric:tabular-nums; }
.impact-summary .sep{ margin:0 8px; opacity:.5; }
.impact-chart{ position:relative; min-height:300px; }
.impact-chart svg{ display:block; width:100%; height:300px; overflow:visible; }
.impact-chart .grid{ stroke:rgba(31,58,46,.10); stroke-width:1; }
.impact-chart .axis-base{ stroke:rgba(31,58,46,.28); stroke-width:1; }
.impact-chart .ax{ font:500 12px var(--font-body); fill:var(--ink-soft); }
.impact-chart .val{ font:700 13px var(--font-body); fill:var(--ink); }
.impact-chart .band{ fill:rgba(31,58,46,.06); opacity:0; transition:opacity .15s ease; }
.impact-chart .band.on{ opacity:1; }
.impact-chart .bar{ fill:var(--green); transform-box:fill-box; transform-origin:50% 100%; transition:fill .15s ease; }
.impact-chart .bar.hot{ fill:var(--green-mid); }
.impact-chart .bar.partial{ fill:url(#hatchPat); }
.impact-chart .hit{ fill:transparent; cursor:pointer; outline:none; }
.impact-chart .hit:focus-visible{ stroke:var(--amber); stroke-width:2; }
.impact-chart.pending .bar{ transform:scaleY(0); }
.impact-chart.play .bar{ animation:bar-grow .8s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 55ms); }
.impact-chart.noanim .bar{ animation:none; }
@keyframes bar-grow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@media (prefers-reduced-motion: reduce){ .impact-chart .bar{ animation:none !important; transform:none !important; } }
.chart-tip{
  position:absolute; z-index:5; min-width:200px; pointer-events:none;
  background:var(--forest-deep); color:var(--cream); padding:12px 14px 10px;
  border-radius:var(--radius-sm); box-shadow:var(--shadow-md); font-size:.84rem;
}
.tip-year{ font-family:var(--font-head); font-weight:600; font-size:1.05rem; padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid rgba(251,245,233,.2); }
.tip-row{ display:flex; align-items:baseline; gap:10px; padding:2px 0; }
.tip-row::before{ content:""; flex:none; width:12px; height:2px; align-self:center; background:transparent; }
.tip-row.on::before{ background:var(--green-mid); }
.tip-row strong{ min-width:54px; text-align:right; font-variant-numeric:tabular-nums; }
.tip-row span{ opacity:.72; }
.tip-row.on span{ opacity:1; }
.impact-legend{ display:flex; align-items:center; gap:10px; margin:14px 0 0; font-size:.84rem; color:var(--ink-soft); }
.swatch-hatch{ flex:none; width:18px; height:12px; border-radius:3px; background:repeating-linear-gradient(45deg,#2F6B52 0 2px,#DCE9E2 2px 5px); }
.impact-table{ margin-top:22px; border-top:1px solid rgba(31,58,46,.12); padding-top:16px; }
.impact-table summary{ cursor:pointer; font-weight:600; font-size:.92rem; color:var(--green); list-style:none; display:inline-flex; align-items:center; gap:8px; }
.impact-table summary::-webkit-details-marker{ display:none; }
.impact-table summary::before{ content:"+"; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border:1.5px solid currentColor; border-radius:50%; line-height:1; font-size:.9rem; }
.impact-table[open] summary::before{ content:"\2013"; }
.impact-table summary:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
.table-scroll{ overflow-x:auto; margin-top:14px; }
.impact-table table{ width:100%; min-width:760px; border-collapse:collapse; font-size:.9rem; font-variant-numeric:tabular-nums; }
.impact-table caption{ text-align:left; font-weight:600; font-size:.85rem; color:var(--ink-soft); padding-bottom:10px; }
.impact-table th, .impact-table td{ padding:9px 12px; text-align:right; border-bottom:1px solid rgba(31,58,46,.08); }
.impact-table thead th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); vertical-align:bottom; }
.impact-table th[scope="row"]{ text-align:left; font-family:var(--font-head); }
.impact-table tfoot th, .impact-table tfoot td{ font-weight:700; border-top:1.5px solid rgba(31,58,46,.35); border-bottom:none; }
.table-note{ font-size:.82rem; color:var(--ink-soft); margin:10px 0 0; }

/* ---------- two-column / axis blocks ---------- */
.axis-block{
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px;
}
@media (max-width:800px){ .axis-block{ grid-template-columns:1fr; } }
.axis-card{
  position:relative; overflow:hidden;
  background:var(--white);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  padding:34px;
  border:1px solid rgba(31,58,46,.08); filter:drop-shadow(var(--shadow-sm));
}
.axis-card > *{ position:relative; z-index:1; }
.axis-card .num-badge{
  all:unset;
  position:absolute; z-index:0; top:-14px; right:16px;
  font-family:var(--font-head); font-weight:700; font-size:5.4rem; line-height:1;
  color:rgba(31,58,46,.07);
}
.axis-card ul{ margin-top:14px; }
.axis-card li{
  position:relative; padding-left:22px; margin-bottom:10px; color:var(--ink-soft); font-size:.96rem;
}
.axis-card li::before{
  content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; background:var(--amber); transform:rotate(45deg);
}

/* ---------- checklist columns (si/no) ---------- */
.yesno{
  display:grid; grid-template-columns:1fr 1fr; gap:26px;
}
@media (max-width:760px){ .yesno{ grid-template-columns:1fr; } }
.yesno .col{
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  padding:30px 30px 26px;
}
.yesno .col.yes{ background:rgba(79,149,118,.1); border:1.5px solid rgba(79,149,118,.35); }
.yesno .col.no{ background:rgba(196,98,63,.08); border:1.5px solid rgba(196,98,63,.3); }
.yesno h3{ display:flex; align-items:center; gap:10px; }
.yesno li{ padding:8px 0; border-bottom:1px dashed rgba(34,41,31,.14); font-size:.96rem; color:var(--ink-soft); }
.yesno li:last-child{ border-bottom:none; }
/* this block only ever sits on a dark photo band — recolour text/icons for contrast there */
.band-forest .yesno .col.yes h3{ color:#9FE3C2; }
.band-forest .yesno .col.no h3{ color:#F3B79C; }
.band-forest .yesno li{ color:rgba(251,245,233,.82); border-bottom-color:rgba(251,245,233,.18); }

/* ---------- quote ---------- */
.quote-block{
  max-width:820px; margin-inline:auto; text-align:center;
}
.quote-block .mark{ font-family:var(--font-head); font-size:3.6rem; color:var(--amber); line-height:0; display:block; margin-bottom:8px; }
.quote-block p{ font-family:var(--font-head); font-size:clamp(1.3rem,2.4vw,1.8rem); color:var(--cream); line-height:1.5; }
.quote-block cite{ font-style:normal; font-size:.9rem; opacity:.75; display:block; margin-top:18px; }

/* ---------- CTA banner ---------- */
.cta-banner{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(120deg, var(--green) 0%, var(--teal) 100%);
  clip-path:polygon(0 0, calc(100% - var(--cut) * 1.4) 0, 100% calc(var(--cut) * 1.4), 100% 100%, 0 100%);
  padding:clamp(36px,5vw,60px);
  color:var(--cream);
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-banner::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:var(--greca); background-repeat:repeat; background-size:48px 28px;
  opacity:.1; mix-blend-mode:overlay;
}
.cta-banner h2{ color:var(--cream); margin-bottom:.25em; }
.cta-banner p{ opacity:.92; margin-bottom:0; max-width:46ch; }

/* ---------- donate cards ---------- */
.donate-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:900px){ .donate-grid{ grid-template-columns:1fr; } }
.bank-box{
  background:var(--white);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  padding:34px;
  border:1.5px dashed rgba(196,98,63,.45);
}
.donate-grid + .bank-box, .bank-box + .donate-grid{ margin-top:24px; }
.bank-table-wrap{ overflow-x:auto; margin:18px 0 4px; }
.bank-table{ width:100%; min-width:700px; border-collapse:collapse; text-align:left; }
.bank-table th{
  font-weight:700; color:var(--ink-soft); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em;
  padding:0 20px 12px 0; border-bottom:1.5px solid rgba(31,58,46,.14); white-space:nowrap;
}
.bank-table td{ font-family:var(--font-head); font-size:1.08rem; padding:16px 20px 0 0; vertical-align:top; white-space:nowrap; }
.bank-table td.holder{ white-space:normal; min-width:200px; }
.bank-box .note-pill{ margin-top:26px; }
.note-pill{
  display:block; background:var(--sand-deep); color:var(--amber-deep);
  font-size:.86rem; font-weight:600; line-height:1.5;
  padding:12px 16px; border-radius:var(--radius-sm); border-left:3px solid var(--amber);
  margin-top:16px;
}

/* ---------- timeline ---------- */
.timeline{ position:relative; padding-left:34px; }
.timeline::before{ content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:rgba(31,58,46,.18); }
.timeline .step{ position:relative; padding-bottom:34px; }
.timeline .step:last-child{ padding-bottom:0; }
.timeline .step::before{
  content:""; position:absolute; left:-34px; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--amber); border:4px solid var(--sand);
}
.timeline h4{ font-family:var(--font-head); margin-bottom:.3em; color:var(--forest-deep); }
.timeline p{ color:var(--ink-soft); margin-bottom:0; }

/* ---------- footer ---------- */
.site-footer{ position:relative; background:var(--forest-deep); color:rgba(251,245,233,.85); padding-block:60px 28px; }
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:12px;
  background-image:var(--greca); background-repeat:repeat-x; background-position:center;
  opacity:.55;
}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:36px; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h4{ color:var(--cream); font-family:var(--font-body); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; }
.site-footer a{ color:rgba(251,245,233,.78); }
.site-footer a:hover{ color:var(--amber); }
.site-footer li{ margin-bottom:10px; font-size:.94rem; }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand svg{ width:38px; height:38px; }
.footer-brand span{ font-family:var(--font-head); font-size:1.15rem; color:var(--cream); }
.logo-badge{
  display:inline-flex; align-items:center; background:var(--cream);
  border-radius:12px; padding:8px 14px;
}
.logo-badge img{ height:64px; width:auto; display:block; }

/* logo card shown on the first hero slide */
.hero-logo{
  display:block; width:fit-content; margin:0 auto 26px;
  background:rgba(255,253,248,.94);
  border-radius:var(--radius-lg);
  padding:16px 30px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.hero-logo img{ display:block; height:clamp(84px, 11vw, 132px); width:auto; }
@media (max-width:600px){
  .hero-slider{ min-height:660px; }
  .hero-logo{ padding:10px 18px; margin:0 auto 16px; border-radius:var(--radius-md); }
  .hero-logo img{ height:62px; }
}
.social-row{ display:flex; gap:12px; margin-top:18px; }
.social-row a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(251,245,233,.3);
  display:flex; align-items:center; justify-content:center;
}
.social-row a:hover{ border-color:var(--amber); background:rgba(231,161,59,.12); }
.social-row svg{ width:17px; height:17px; }
.footer-bottom{
  border-top:1px solid rgba(251,245,233,.14); margin-top:44px; padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; opacity:.7;
}

/* ---------- misc ---------- */
.center{ text-align:center; }
.section-head{ max-width:760px; margin-bottom:44px; }
.section-head.center{ margin-inline:auto; }
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.badge-blob{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; z-index:0; pointer-events:none;
}
.tag{
  display:inline-block; background:rgba(79,149,118,.12); color:var(--green);
  font-size:.78rem; font-weight:700; padding:5px 13px; border-radius:999px; margin:0 6px 8px 0;
}
.breadcrumb{ font-size:.86rem; color:var(--ink-soft); margin-bottom:16px; }
.breadcrumb a{ color:var(--green); font-weight:600; }
.divider-wave{ height:60px; }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.form-row{ margin-bottom:18px; }
.form-row label{ display:block; font-weight:700; font-size:.86rem; margin-bottom:7px; color:var(--forest-deep); }
.form-row input,.form-row textarea,.form-row select{
  width:100%; padding:13px 15px; border-radius:12px; border:1.5px solid rgba(31,58,46,.2);
  font-family:var(--font-body); font-size:.96rem; background:var(--white); color:var(--ink);
}
.form-row input:focus,.form-row textarea:focus{ outline:2px solid var(--amber); border-color:transparent; }
.info-list{ display:flex; flex-direction:column; gap:22px; }
.info-list .item{ display:flex; gap:16px; align-items:flex-start; }
.info-list .icon{
  width:46px; height:46px; border-radius:50%; background:transparent;
  border:1.5px solid rgba(47,107,82,.3); color:var(--green);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.info-list .icon svg{ width:22px; height:22px; }
.info-list h4{ margin:0 0 3px; font-family:var(--font-head); font-size:1.02rem; color:var(--forest-deep); }
.info-list p{ margin:0; color:var(--ink-soft); font-size:.94rem; }

.map-frame{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid rgba(31,58,46,.1); box-shadow:var(--shadow-sm); }
.map-frame iframe{ width:100%; height:320px; border:0; display:block; }

.back-top{
  position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
  background:var(--forest-deep); color:var(--cream); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  z-index:90;
}
.back-top.show{ opacity:1; pointer-events:auto; }
.back-top:hover{ transform:translateY(-3px); }
.back-top svg{ width:18px; height:18px; }

/* SII-Balam developer credit (footer) — always orange */
.sii{ color:#ff8a1f; font-weight:700; }
.sii:hover{ color:#ffa54d; }