/* ============================================================
   Panels for Panama
   ============================================================ */

:root{
  --surface:#FBFBF9;
  --ink:#14201F;
  --brand:#06A77D;
  --accent:#FFD23F;
  --deep:#05445E;

  --forest:#0E1F1B;          /* dark band background */
  --warm:#F5F1E8;            /* warm tint band */

  --ink-70:rgba(20,32,31,.70);
  --ink-55:rgba(20,32,31,.55);
  --ink-40:rgba(20,32,31,.40);
  --ink-58:rgba(20,32,31,.58);
  --ink-14:rgba(20,32,31,.14);
  --ink-08:rgba(20,32,31,.08);

  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1:clamp(.78rem, .74rem + .12vw, .86rem);
  --step-0:clamp(1rem, .96rem + .2vw, 1.08rem);
  --step-1:clamp(1.08rem, 1rem + .38vw, 1.26rem);
  --step-2:clamp(1.35rem, 1.2rem + .6vw, 1.65rem);
  --step-3:clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);
  --step-4:clamp(2.4rem, 1.5rem + 3.9vw, 4.3rem);

  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:150ms;
  --t-med:220ms;

  --shell:1200px;
  --gutter:clamp(1.25rem,5vw,4rem);
  --band:clamp(4.5rem,9vw,8rem);

  --hatch-dark:repeating-linear-gradient(45deg,#2E3B36 0 16px,#27332F 16px 32px);
  --hatch-warm:repeating-linear-gradient(45deg,#EEE6D4 0 16px,#E6DCC6 16px 32px);
  --hatch-night:repeating-linear-gradient(45deg,#232C36 0 16px,#1C242C 16px 32px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5rem}

body{
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit}
img,video{max-width:100%;display:block}
::selection{background:rgba(255,210,63,.4);color:var(--ink)}

:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);width:100%}

.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:.75rem 1.1rem;
  background:var(--surface);color:var(--ink);border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

/* ---------- shared type ---------- */
.eyebrow{
  font-size:var(--step--1);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.8);
  margin-bottom:clamp(.9rem,2vw,1.3rem);
}
.eyebrow--dark{color:var(--brand)}

.h2{
  font-family:var(--font-display);font-optical-sizing:auto;font-weight:600;
  font-size:var(--step-3);line-height:1.08;letter-spacing:-.02em;
  text-wrap:balance;max-width:18ch;
}
.h2--light{color:#fff}

.lede{font-size:var(--step-1);color:var(--ink-70);max-width:46ch;margin-top:1rem;text-wrap:pretty}
.lede--light{color:rgba(255,255,255,.82)}

/* ---------- reveal ---------- */
.anim .reveal{opacity:0;transform:translateY(16px)}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity 620ms var(--ease) var(--d,0ms), transform 620ms var(--ease) var(--d,0ms);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.95em 2em;border-radius:999px;font-weight:600;font-size:var(--step-0);
  text-decoration:none;border:0;cursor:pointer;font-family:inherit;
  transition:transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn--solid{background:var(--accent);color:var(--ink);box-shadow:0 10px 30px -16px rgba(255,210,63,.9)}
.btn--solid:hover{background:#F3C42F;transform:scale(.97)}
.btn--solid:active{transform:scale(.95)}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink-14)}
.btn--ghost:hover{border-color:var(--ink);transform:scale(.97)}
.btn--sm{padding:.6em 1.3em;font-size:.9rem}
.btn--block{width:100%}

.link-ghost{
  position:relative;display:inline-block;font-weight:500;
  color:rgba(255,255,255,.85);text-decoration:none;padding-bottom:.2em;
  transition:color var(--t-fast) var(--ease);
}
.link-ghost::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-med) var(--ease);
}
.link-ghost:hover{color:#fff}
.link-ghost:hover::after{transform:scaleX(1)}
.link-ghost--dark{color:var(--ink-70)}
.link-ghost--dark:hover{color:var(--ink)}

/* ---------- placeholders ---------- */
.ph{
  position:relative;display:grid;place-items:center;
  background:var(--hatch-warm);border-radius:18px;overflow:hidden;
}
.ph span{
  max-width:34ch;margin:1rem;padding:.55rem .8rem;border-radius:8px;
  background:rgba(251,251,249,.9);color:var(--ink);
  font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  line-height:1.5;text-align:center;
}
.ph--hero{position:absolute;inset:0;border-radius:0;background:var(--hatch-dark);place-items:end start}
.ph__tag{
  margin:1.25rem;background:rgba(251,251,249,.72);font-size:.62rem;
  max-width:30ch;text-align:left;
}
.ph--wide{aspect-ratio:16/9;margin-top:1.5rem}
.ph--portrait{aspect-ratio:4/5}
.ph--map{aspect-ratio:16/7;margin-top:clamp(2rem,4vw,3rem);background:var(--hatch-night)}
.ph--map span{background:rgba(251,251,249,.92)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;color:#fff;
  transition:background-color var(--t-med) var(--ease),
             box-shadow var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.nav__bar{
  max-width:var(--shell);margin-inline:auto;
  padding:clamp(.9rem,2vw,1.35rem) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.nav.is-stuck{
  background:rgba(251,251,249,.93);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  color:var(--ink);box-shadow:0 1px 0 var(--ink-08);
}
.nav.is-stuck .nav__bar{padding-block:clamp(.65rem,1.3vw,.95rem)}

.nav__brand{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;
  letter-spacing:-.01em;text-decoration:none;white-space:nowrap;
}
.nav__mark{width:1.15em;height:1.15em;color:var(--accent);flex:none}
.nav.is-stuck .nav__mark{color:var(--brand)}

.nav__menu{display:flex;align-items:center;gap:clamp(1rem,2.2vw,1.9rem);font-size:.94rem}
.nav__menu a:not(.btn){
  position:relative;color:inherit;opacity:.85;text-decoration:none;padding-block:.25rem;
  transition:opacity var(--t-fast) var(--ease);
}
.nav__menu a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease);
}
.nav__menu a:not(.btn):hover{opacity:1}
.nav__menu a:not(.btn):hover::after{transform:scaleX(1)}
.nav__menu a.is-current{opacity:1}
.nav__menu a.is-current::after{transform:scaleX(1);background:var(--brand)}

.nav__toggle{
  display:none;width:44px;height:44px;margin-right:-10px;
  align-items:center;justify-content:center;background:none;border:0;color:inherit;cursor:pointer;
}
.nav__burger,.nav__burger::before,.nav__burger::after{
  display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
  transition:transform var(--t-med) var(--ease), background-color var(--t-fast) var(--ease);
}
.nav__burger{position:relative}
.nav__burger::before,.nav__burger::after{content:"";position:absolute;left:0;top:0}
.nav__burger::before{transform:translateY(-7px)}
.nav__burger::after{transform:translateY(7px)}
.nav.is-open .nav__burger{background:transparent}
.nav.is-open .nav__burger::before{transform:rotate(45deg)}
.nav.is-open .nav__burger::after{transform:rotate(-45deg)}

@media (max-width:900px){
  .nav__toggle{display:inline-flex;position:relative}
  .nav__menu{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:1.05rem;
    padding:1.5rem var(--gutter) 2rem;
    background:rgba(251,251,249,.98);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    color:var(--ink);box-shadow:0 18px 40px -24px rgba(20,32,31,.5);
    font-size:1.05rem;opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease),
               visibility 0s linear var(--t-med);
  }
  .nav.is-open .nav__menu{
    opacity:1;visibility:visible;transform:none;
    transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s;
  }
  .nav__menu .btn{margin-top:.35rem}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;isolation:isolate;min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(6rem,12vh,9rem) 0 clamp(4rem,8vh,6rem);
  color:#fff;overflow:hidden;background:var(--forest);
}
.hero__media{position:absolute;inset:0;z-index:-1}
/* Kept light on purpose. Just enough to hold white text, not enough to
   flatten the photograph. */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(8,16,14,.34) 0%, rgba(8,16,14,.10) 32%, rgba(8,16,14,.26) 72%, rgba(8,16,14,.52) 100%),
    linear-gradient(to right, rgba(8,16,14,.42) 0%, rgba(8,16,14,.06) 52%, rgba(8,16,14,0) 100%);
}

.hero__inner{
  position:relative;width:100%;max-width:var(--shell);margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1fr;align-items:center;
}
@media (min-width:960px){
  .hero__inner{grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);gap:clamp(2.5rem,5vw,5rem)}
}

.hero__title{
  font-family:var(--font-display);font-optical-sizing:auto;font-weight:600;
  font-size:clamp(2.4rem, 1.6rem + 2.9vw, 3.7rem);
  line-height:1.06;letter-spacing:-.022em;text-wrap:balance;max-width:13ch;
  text-shadow:0 1px 2px rgba(0,0,0,.28), 0 2px 30px rgba(0,0,0,.45);
}

.trust{
  list-style:none;margin-top:clamp(1.1rem,2.2vw,1.6rem);
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;
  font-size:.88rem;color:rgba(255,255,255,.75);
}
.trust li{display:flex;align-items:center;gap:.45rem}
.trust li::before{
  content:"";width:14px;height:14px;flex:none;border-radius:50%;
  background:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.link-ghost--arrow::before{
  content:"";display:inline-block;width:.85em;height:.85em;margin-right:.5em;
  vertical-align:-.06em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hero__sub{
  margin-top:clamp(1rem,2vw,1.4rem);font-size:var(--step-1);
  color:rgba(255,255,255,.88);max-width:40ch;text-wrap:pretty;
  text-shadow:0 1px 2px rgba(0,0,0,.3), 0 1px 18px rgba(0,0,0,.5);
}
.hero__copy .link-ghost{margin-top:clamp(1.2rem,2.4vw,1.8rem)}

.hero__cue{
  position:absolute;left:50%;bottom:1.6rem;translate:-50% 0;
  width:26px;height:42px;border:1.5px solid rgba(255,255,255,.5);border-radius:999px;
  display:grid;place-items:start center;padding-top:8px;
}
.hero__cue span{
  width:3px;height:8px;border-radius:2px;background:rgba(255,255,255,.9);
  animation:cue 1.8s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* ---------- give panel ---------- */
.give{
  background:var(--surface);color:var(--ink);border-radius:22px;
  padding:clamp(1.4rem,2.4vw,2rem);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
}
.give__title{font-family:var(--font-display);font-weight:600;font-size:var(--step-2);line-height:1.1}
.give__note{margin-top:.4rem;font-size:.92rem;color:var(--ink-55)}

.give__toggle{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:1.2rem;
  background:var(--ink-08);border-radius:999px;padding:4px;
}
.give__freq{
  border:0;background:none;font:inherit;font-size:.92rem;font-weight:600;color:var(--ink-55);
  padding:.55em 1em;border-radius:999px;cursor:pointer;
  transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.give__freq.is-active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(20,32,31,.14)}

.give__amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.9rem}
.give__chip{
  border:1.5px solid var(--ink-14);background:transparent;border-radius:12px;
  font:inherit;font-weight:600;font-size:.95rem;padding:.7em .2em;cursor:pointer;color:var(--ink);
  transition:border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.give__chip:hover{border-color:var(--ink-40)}
.give__chip:active{transform:scale(.96)}
.give__chip.is-active{border-color:var(--brand);background:rgba(6,167,125,.09)}

.give__custom{margin-top:.9rem}
.give__label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-58);margin-bottom:.35rem}
.give__field{
  display:flex;align-items:center;gap:.4rem;border:1.5px solid var(--ink-14);
  border-radius:12px;padding:.55em .85em;
  transition:border-color var(--t-fast) var(--ease);
}
.give__field:focus-within{border-color:var(--brand)}
.give__field span{color:var(--ink-58);font-weight:600}
.give__field input{border:0;background:none;font:inherit;width:100%;color:var(--ink)}
.give__field input:focus{outline:none}

.give .btn{margin-top:1.1rem}
.give__fine{margin-top:.6rem;font-size:.78rem;color:var(--ink-58);text-align:center}
.give__proof{
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--ink-08);
  font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);
}

/* ---------- progress ---------- */
.progress{margin-top:1.2rem}
.progress__track{height:8px;border-radius:999px;background:var(--ink-08);overflow:hidden}
.progress__fill{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--brand),#3FD3A8);
  transition:width 1200ms var(--ease);
}
.progress__line{
  margin-top:.55rem;font-size:.88rem;color:var(--ink-55);
  display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;
}
.progress__line strong{color:var(--ink);font-weight:600}
.progress__pct{margin-left:auto;font-weight:600;color:var(--brand)}
.progress--light .progress__track{background:rgba(255,255,255,.16)}
.progress--light .progress__line{color:rgba(255,255,255,.7)}
.progress--light .progress__line strong{color:#fff}
.progress--light .progress__pct{color:var(--accent)}

/* ============================================================
   IMPACT STRIP
   ============================================================ */
.strip{background:var(--warm);padding-block:clamp(2.5rem,5vw,3.75rem)}
.strip__grid{display:grid;gap:clamp(1.5rem,3vw,2rem);grid-template-columns:repeat(2,1fr)}
@media (min-width:800px){.strip__grid{grid-template-columns:repeat(4,1fr)}}
.stat{display:flex;flex-direction:column;gap:.3rem}
.stat__num{
  font-family:var(--font-display);font-weight:600;font-size:var(--step-3);
  line-height:1;letter-spacing:-.02em;
}
.stat__label{font-size:.9rem;color:var(--ink-55);max-width:20ch}

/* ============================================================
   PROJECT SPLIT
   ============================================================ */
.split{padding-block:var(--band)}
.split__grid{display:grid;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:960px){
  .split__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(3rem,6vw,6rem)}
  .split__rail{position:sticky;top:7rem;align-self:start}
}
.split__rail .btn{margin-top:1.6rem}
.split__flow{display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,4rem)}

.kit__title{
  font-family:var(--font-display);font-weight:600;font-size:var(--step-2);
  line-height:1.15;display:flex;gap:.7rem;align-items:baseline;
}
.kit__n{
  font-family:var(--font-body);font-size:.8rem;font-weight:600;letter-spacing:.1em;
  color:var(--brand);
}
.kit p{margin-top:.8rem;color:var(--ink-70);max-width:52ch}
.kit__list{margin-top:1rem;list-style:none;display:flex;flex-direction:column;gap:.7rem;max-width:52ch}
.kit__list li{padding-left:1.4rem;position:relative;color:var(--ink-70)}
.kit__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--accent);
}
.kit__list strong{color:var(--ink);font-weight:600}

/* ============================================================
   SWITCH SECTION
   ============================================================ */
.switchsec{background:var(--warm);padding-block:var(--band)}
.switchsec__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:960px){
  .switchsec__grid{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(3rem,6vw,5rem)}
}

.scene{--p:0;width:100%}
.scene__stack{
  position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(20,32,31,.5);
}
@media (min-width:960px){.scene__stack{aspect-ratio:1/1}}

.layer{position:absolute;inset:0;background-size:cover;background-position:center;display:grid;place-items:center}
.layer--lit{background-image:url("../assets/img/home-lit.jpg")}
/* the same frame, dimmed, until the matched dark photo exists */
.layer--dark{
  background-image:url("../assets/img/home-lit.jpg");
  filter:brightness(.22) saturate(.55) hue-rotate(190deg);
  opacity:calc(1 - var(--p));z-index:2;
}

.glow{
  position:absolute;left:50%;top:56%;width:120%;aspect-ratio:1;z-index:1;
  transform:translate(-50%,-50%) scale(calc(.72 + var(--p) * .38));
  background:radial-gradient(circle at center, rgba(255,210,63,.6) 0%, rgba(255,210,63,.3) 28%, rgba(255,210,63,0) 66%);
  opacity:calc(var(--p) * .9);mix-blend-mode:screen;pointer-events:none;
}

.ph__note{
  position:absolute;left:1rem;max-width:min(78%,32ch);
  padding:.5rem .7rem;border-radius:8px;background:rgba(251,251,249,.9);color:var(--ink);
  font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.45;
}
.ph__note--lit{bottom:1rem}
.ph__note--dark{top:1rem}
.has-photos .ph__note{display:none}

.switch{margin-top:clamp(1.6rem,3vw,2.2rem);max-width:420px}
.switch__control{
  display:block;width:100%;cursor:grab;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  border-radius:30px;
  filter:drop-shadow(0 10px 24px rgba(20,32,31,.12));
  transition:filter var(--t-med) var(--ease);
}
.switch__control:active,.switch__control.is-dragging{cursor:grabbing}
.scene.is-on ~ .switchsec__copy .switch__control{
  filter:drop-shadow(0 12px 30px rgba(255,210,63,.45));
}
.switch__svg{display:block;width:100%;height:auto}

/* the track fill and the pip follow the drag, 0 to 1 */
.switch__fill{opacity:calc(var(--sp,0) * .9)}
.switch__pip{opacity:calc(.35 + var(--sp,0) * .65)}

.switch__ends{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:.7rem;padding-inline:.4rem;
  font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-58);
}
.switch__hint{color:var(--ink-40);letter-spacing:.22em}
/* two lines share one cell so nothing jumps when they swap */
.scene__notes{display:grid;margin-top:1.4rem;max-width:46ch}
.scene__notes > *{grid-area:1 / 1}
.scene__note{
  color:var(--ink-70);
  transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.scene__note--off{opacity:1;transform:none;color:var(--ink-58)}
.scene__note--on{opacity:0;transform:translateY(6px);pointer-events:none}

.scene.is-on ~ .switchsec__copy .scene__note--off{opacity:0;transform:translateY(-6px);pointer-events:none}
.scene.is-on ~ .switchsec__copy .scene__note--on{opacity:1;transform:none;pointer-events:auto}

/* ============================================================
   PANAMA
   ============================================================ */
.panama{background:var(--forest);color:#fff;padding-block:var(--band)}
.panama__head{display:grid;gap:.2rem}
@media (min-width:900px){
  .panama__head{grid-template-columns:1.05fr .95fr;column-gap:clamp(2.5rem,5vw,5rem);align-items:end}
  .panama__head .eyebrow{grid-column:1;grid-row:1}
  .panama__head .h2{grid-column:1;grid-row:2;max-width:14ch}
  .panama__head .lede{grid-column:2;grid-row:1 / span 2;align-self:end;margin-top:0}
}
.filmstrip{margin-top:clamp(2rem,4vw,3rem)}
.filmstrip__video,.filmstrip .ph{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:22px;
  background:var(--hatch-dark);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.filmstrip__cap{margin-top:.8rem;font-size:.86rem;color:rgba(255,255,255,.55)}

.panama__facts{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
}
@media (min-width:760px){.panama__facts{grid-template-columns:repeat(3,1fr)}}
.fact{border-top:1px solid rgba(255,255,255,.18);padding-top:1.1rem}
.fact h3{
  font-family:var(--font-display);font-weight:600;font-size:1.15rem;margin-bottom:.4rem;
}
.fact p{color:rgba(255,255,255,.72);font-size:.96rem}

/* ============================================================
   STORIES
   ============================================================ */
.stories{padding-block:var(--band)}
.stories__head .lede{margin-top:.9rem}
.stories__grid{
  list-style:none;margin-top:clamp(2rem,4vw,3rem);
  display:grid;gap:clamp(1.2rem,2.5vw,2rem);
}
@media (min-width:780px){.stories__grid{grid-template-columns:repeat(3,1fr)}}
.story{
  display:flex;flex-direction:column;
  transition:transform var(--t-med) var(--ease);
}
.story:hover{transform:translateY(-4px)}
.story:hover .ph--story{box-shadow:0 24px 40px -28px rgba(20,32,31,.55)}
.ph--story{transition:box-shadow var(--t-med) var(--ease)}
.ph--story{aspect-ratio:4/3;margin-bottom:1.1rem}
.ph--story span{font-size:.64rem;max-width:26ch}
.story h3{font-family:var(--font-display);font-weight:600;font-size:1.25rem;line-height:1.2}
.story p{margin-top:.5rem;color:var(--ink-70);font-size:.96rem}
.story__meta{
  margin-top:.9rem;font-size:.7rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-58);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{grid-column:1 / -1;margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid rgba(255,255,255,.16)}
.faq details{border-bottom:1px solid rgba(255,255,255,.16)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.1rem 2rem 1.1rem 0;position:relative;
  font-weight:600;color:#fff;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.2rem;top:50%;width:12px;height:12px;
  margin-top:-6px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--t-med) var(--ease);
}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq p{padding-bottom:1.2rem;color:rgba(255,255,255,.72);max-width:60ch}

/* ============================================================
   MOBILE GIVE BAR
   ============================================================ */
.givebar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:none;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem clamp(1rem,4vw,1.5rem);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom, 0px));
  background:rgba(251,251,249,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 -1px 0 var(--ink-08), 0 -18px 40px -30px rgba(20,32,31,.6);
  transform:translateY(110%);
  transition:transform var(--t-med) var(--ease);
}
.givebar.is-up{transform:none}
.givebar__line{font-size:.9rem;color:var(--ink-55)}
.givebar__line strong{color:var(--ink)}
@media (max-width:760px){.givebar:not([hidden]){display:flex}}

/* ============================================================
   ABOUT
   ============================================================ */
.about{padding-block:var(--band);border-top:1px solid var(--ink-08)}
.about__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:900px){
  .about__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(3rem,6vw,5rem)}
}
.about__copy p{color:var(--ink-70);margin-top:1rem;max-width:52ch}
.quote{
  margin-top:clamp(1.5rem,3vw,2rem);padding-left:1.4rem;border-left:3px solid var(--accent);
}
.quote p{
  font-family:var(--font-display);font-weight:600;font-size:var(--step-2);
  line-height:1.25;color:var(--ink);max-width:26ch;
}
.quote cite{display:block;margin-top:.7rem;font-style:normal;font-size:.86rem;color:var(--ink-58)}

/* ============================================================
   EVENTS
   ============================================================ */
.events{background:var(--warm);padding-block:var(--band)}
.events__list{list-style:none;margin-top:clamp(2rem,4vw,3rem);display:flex;flex-direction:column}
.event{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,2.5vw,2rem);align-items:center;
  padding:clamp(1.2rem,2.4vw,1.7rem) 0;border-top:1px solid var(--ink-14);
  transition:background-color var(--t-fast) var(--ease);
}
.event:last-child{border-bottom:1px solid var(--ink-14)}
.event:hover .event__date{border-color:var(--brand);transform:translateY(-2px)}
.event__date{transition:transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)}
.event__date{
  display:grid;place-items:center;width:64px;height:64px;border-radius:14px;
  background:var(--surface);border:1px solid var(--ink-08);
}
.event__day{font-family:var(--font-display);font-weight:600;font-size:1.4rem;line-height:1}
.event__mon{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-58)}
.event__body h3{font-family:var(--font-display);font-weight:600;font-size:1.2rem;line-height:1.2}
.event__body p{color:var(--ink-55);font-size:.94rem;margin-top:.25rem;max-width:50ch}
.event__tag{
  font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);border:1px solid rgba(6,167,125,.35);border-radius:999px;padding:.35em .8em;
  white-space:nowrap;
}
.events__foot{margin-top:1.6rem;color:var(--ink-55)}
@media (max-width:620px){
  .event{grid-template-columns:auto 1fr;row-gap:.6rem}
  .event__tag{grid-column:2;justify-self:start}
}

/* ============================================================
   DONATE
   ============================================================ */
.donate{background:var(--deep);color:#fff;padding-block:var(--band)}
.donate__grid{display:grid;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:900px){
  .donate__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(3rem,6vw,5rem);align-items:center}
}
.ways{list-style:none;display:grid;gap:.8rem;grid-template-columns:repeat(3,1fr)}
.way{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:1.1rem 1rem;
}
.way h3{font-family:var(--font-display);font-weight:600;font-size:1.4rem;line-height:1}
.way p{margin-top:.35rem;font-size:.86rem;color:rgba(255,255,255,.68)}
.way--cta{grid-column:1 / -1;background:none;border:0;padding:0;margin-top:.4rem}
.way__fine{margin-top:.5rem;font-size:.78rem;color:rgba(255,255,255,.5);text-align:center}
@media (max-width:560px){
  .ways{grid-template-columns:1fr 1fr}
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{padding-block:var(--band)}
.contact__grid{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:900px){
  .contact__grid{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(3rem,6vw,5rem)}
}
.contact__direct{margin-top:1.4rem;font-size:var(--step-1)}
.contact__direct a{color:var(--brand);text-decoration:none;border-bottom:1.5px solid rgba(6,167,125,.35)}
.contact__direct a:hover{border-color:var(--brand)}

.form{
  background:var(--warm);border-radius:22px;padding:clamp(1.4rem,2.6vw,2rem);
  display:flex;flex-direction:column;gap:1rem;
}
.form__row{display:flex;flex-direction:column;gap:.35rem}
.form__row label{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-58)}
.form__row input,.form__row textarea{
  font:inherit;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--ink-14);border-radius:12px;padding:.7em .9em;resize:vertical;
  transition:border-color var(--t-fast) var(--ease);
}
.form__row input:focus,.form__row textarea:focus{outline:none;border-color:var(--brand)}
.form__row.is-bad input,.form__row.is-bad textarea{border-color:#C2453B}
.form__fine{font-size:.78rem;color:var(--ink-58);text-align:center}
.form__fine.is-error{color:#C2453B}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--forest);color:rgba(255,255,255,.7);padding-block:clamp(2.5rem,5vw,4rem)}
.foot__grid{display:grid;gap:1.6rem}
@media (min-width:800px){
  .foot__grid{grid-template-columns:1.2fr 1fr auto;align-items:start;gap:3rem}
}
.foot__brand{
  font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:#fff;
  display:flex;align-items:center;gap:.55rem;
}
.foot__mark{width:1.15em;height:1.15em;color:var(--accent);flex:none}
.foot__top{display:inline-block;margin-top:.4rem;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.foot__top:hover{border-color:#fff;color:#fff}
.foot__line{margin-top:.4rem;font-size:.9rem;max-width:38ch}
.foot__nav{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.9rem}
.foot__nav a{text-decoration:none;opacity:.8}
.foot__nav a:hover{opacity:1;text-decoration:underline}
.foot__fine{font-size:.82rem;opacity:.75}

/* QA only: ?flat drops the viewport sized hero so a full page
   screenshot keeps real proportions. */
.flat .hero{min-height:0;padding-block:7rem}
.flat .hero__cue{display:none}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
  .reveal{opacity:1;transform:none}
  .btn:hover,.btn:active{transform:none}
  .link-ghost::after{transform:scaleX(1);opacity:0}
  .link-ghost:hover::after{opacity:1}
  .hero__cue{display:none}
}

/* ============================================================
   SUB PAGES
   ============================================================ */
.pagehead{
  background:var(--forest);color:#fff;
  padding:calc(var(--band) + 3rem) 0 var(--band);
}
.pagehead .lede{color:rgba(255,255,255,.82);max-width:52ch}
.pagehead__grid{display:grid;gap:.2rem}
@media (min-width:1000px){
  .pagehead__grid{grid-template-columns:1.15fr .85fr;column-gap:clamp(2.5rem,5vw,5rem);align-items:end}
  .pagehead__grid .eyebrow{grid-column:1;grid-row:1}
  .pagehead__title{grid-column:1;grid-row:2}
  .pagehead__grid .lede{grid-column:2;grid-row:1 / span 2;align-self:end;margin-top:0}
  .pagehead__meta{grid-column:1 / -1;grid-row:3}
}
.pagehead__title{
  font-family:var(--font-display);font-optical-sizing:auto;font-weight:600;
  font-size:var(--step-4);line-height:1.05;letter-spacing:-.022em;
  text-wrap:balance;max-width:16ch;
}
.pagehead__meta{
  margin-top:clamp(1.6rem,3vw,2.4rem);padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-wrap:wrap;gap:.6rem 2.5rem;
  font-size:.86rem;color:rgba(255,255,255,.66);
}

.back{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.88rem;color:rgba(255,255,255,.7);text-decoration:none;
  margin-bottom:clamp(1.2rem,2.5vw,1.8rem);
}
.back::before{content:"";width:.8em;height:.8em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.back:hover{color:#fff}

/* long form body copy.
   Wide screens get three tracks: a sticky contents rail, a measure capped
   text column, and a right hand track that figures and tables spill into. */
.prose{padding-block:var(--band)}
.prose .shell{max-width:1400px}   /* long form gets more room than the rest */
.prose__wrap{display:grid;gap:0 clamp(2rem,4vw,4.5rem)}

.prose__rail{display:none}
@media (min-width:1080px){
  .prose__wrap{grid-template-columns:minmax(170px,210px) minmax(0,64ch) minmax(0,1fr)}
  .prose__wrap > *{grid-column:2}
  .prose__rail{
    display:block;grid-column:1;grid-row:1 / span 999;
    position:sticky;top:7rem;align-self:start;
  }
  /* anything visual uses the right hand track as well */
  .prose figure,
  .prose .costs,
  .prose .buys,
  .prose .evening,
  .prose ul.timeline{grid-column:2 / 4}
}

.prose__railtitle{
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-58);margin-bottom:.9rem;
}
.prose__rail ol{list-style:none;display:flex;flex-direction:column;gap:.55rem;counter-reset:toc}
.prose__rail a{
  display:block;font-size:.9rem;line-height:1.4;color:var(--ink-58);
  text-decoration:none;padding-left:.9rem;border-left:2px solid var(--ink-14);
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.prose__rail a:hover{color:var(--ink)}
.prose__rail a.is-current{color:var(--ink);border-color:var(--accent);font-weight:600}
.prose h2{
  font-family:var(--font-display);font-weight:600;font-size:var(--step-3);
  line-height:1.1;letter-spacing:-.02em;margin-top:clamp(2.5rem,5vw,3.5rem);max-width:20ch;
}
.prose h2:first-child{margin-top:0}
.prose h3{
  font-family:var(--font-display);font-weight:600;font-size:var(--step-2);
  line-height:1.2;margin-top:2.2rem;
}
.prose p{margin-top:1.1rem;color:var(--ink-70)}
.prose p.first{font-size:var(--step-1);color:var(--ink)}
.prose ul{margin-top:1.1rem;list-style:none;display:flex;flex-direction:column;gap:.7rem}
.prose ul li{padding-left:1.4rem;position:relative;color:var(--ink-70)}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}
.prose .ph{margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.prose figcaption{margin-top:.7rem;font-size:.84rem;color:var(--ink-58)}

.pull{
  margin:clamp(2.2rem,4.5vw,3.2rem) 0;padding:clamp(1.4rem,3vw,2rem) 0;
  border-top:1px solid var(--ink-14);border-bottom:1px solid var(--ink-14);
}
.pull p{
  font-family:var(--font-display);font-weight:600;font-size:var(--step-2);
  line-height:1.3;color:var(--ink);margin:0;max-width:30ch;
}
.pull cite{display:block;margin-top:.8rem;font-style:normal;font-size:.86rem;color:var(--ink-58)}

/* story entries */
.entry{padding-block:var(--band);border-top:1px solid var(--ink-08)}
.entry:nth-of-type(even){background:var(--warm)}
.entry__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (min-width:960px){
  .entry__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,5vw,4.5rem)}
  .entry__media{position:sticky;top:7rem}
}
.entry__tag{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);
}
.entry h2{
  font-family:var(--font-display);font-weight:600;font-size:var(--step-3);
  line-height:1.08;letter-spacing:-.02em;margin-top:.6rem;max-width:18ch;
}
.entry p{margin-top:1.1rem;color:var(--ink-70);max-width:56ch}
.entry p.first{color:var(--ink);font-size:var(--step-1)}
.changed{
  margin-top:clamp(1.6rem,3vw,2.2rem);padding:clamp(1.1rem,2.2vw,1.5rem);
  border-radius:16px;background:var(--surface);border:1px solid var(--ink-08);
  list-style:none;display:flex;flex-direction:column;gap:.65rem;max-width:46ch;
}
.entry:nth-of-type(even) .changed{background:rgba(251,251,249,.75)}
.changed li{padding-left:1.6rem;position:relative;font-size:.95rem;color:var(--ink-70)}
.changed li::before{
  content:"";position:absolute;left:0;top:.28em;width:14px;height:14px;background:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.changed__title{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-58);padding-left:0 !important;
}
.changed__title::before{display:none}

/* costs table */
.costs{width:100%;border-collapse:collapse;margin-top:1.6rem;font-size:.96rem}
.costs th,.costs td{text-align:left;padding:.85rem 0;border-bottom:1px solid var(--ink-14)}
.costs th{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-58)}
.costs td:last-child,.costs th:last-child{text-align:right;white-space:nowrap}
.costs tfoot td{font-weight:600;color:var(--ink);border-bottom:0}

/* timeline */
.timeline{list-style:none;margin-top:2rem;display:flex;flex-direction:column;gap:0}
/* .prose ul li also styles these, so the timeline rules are scoped to win */
.prose ul.timeline li,
.timeline li{
  display:grid;grid-template-columns:auto 1fr;gap:1.4rem;
  padding:0 0 2rem 0;position:relative;
}
.prose ul.timeline li::before,
.timeline li::before{
  content:"";position:absolute;left:6px;top:1.5rem;bottom:0;width:1px;height:auto;
  border-radius:0;background:var(--ink-14);
}
.prose ul.timeline li:last-child::before,
.timeline li:last-child::before{display:none}
.timeline__dot{width:13px;height:13px;border-radius:50%;background:var(--accent);margin-top:.45rem;position:relative;z-index:1}
.timeline h3{font-family:var(--font-display);font-weight:600;font-size:1.15rem;line-height:1.25}
.timeline p{margin-top:.35rem;color:var(--ink-70);font-size:.96rem;max-width:52ch}

/* keep reading cards */
.next{padding-block:var(--band);background:var(--warm)}
.next__grid{list-style:none;display:grid;gap:1rem;margin-top:clamp(1.6rem,3vw,2.2rem)}
@media (min-width:760px){.next__grid{grid-template-columns:repeat(3,1fr)}}
.next__card{
  display:flex;flex-direction:column;gap:.5rem;height:100%;
  padding:clamp(1.2rem,2.4vw,1.6rem);border-radius:18px;
  background:var(--surface);border:1px solid var(--ink-08);text-decoration:none;
  transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.next__card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -30px rgba(20,32,31,.5)}
.next__card h3{font-family:var(--font-display);font-weight:600;font-size:1.2rem;line-height:1.2}
.next__card p{font-size:.92rem;color:var(--ink-70)}
.next__card span{
  margin-top:auto;padding-top:.7rem;font-size:.78rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brand);
}

/* end of page donate band */
.endcta{background:var(--deep);color:#fff;padding-block:var(--band);text-align:center}
.endcta h2{
  font-family:var(--font-display);font-weight:600;font-size:var(--step-3);line-height:1.1;
  max-width:20ch;margin-inline:auto;color:#fff;
}
.endcta p{margin-top:1rem;color:rgba(255,255,255,.78);max-width:48ch;margin-inline:auto}
.endcta .btn{margin-top:1.8rem}
.endcta__fine{margin-top:.8rem;font-size:.8rem;color:rgba(255,255,255,.55)}

/* the read more link that sits at the end of a home page section */
.more{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:clamp(1.4rem,2.6vw,2rem);
  font-weight:600;font-size:.95rem;text-decoration:none;color:var(--ink);
  border-bottom:1.5px solid var(--accent);padding-bottom:.15rem;
  transition:gap var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.more::after{
  content:"";width:.85em;height:.85em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.more:hover{gap:.85rem}
.more--light{color:#fff}

/* ============================================================
   WHAT YOUR MONEY BUYS  (project page)
   ============================================================ */
.buys{
  margin-top:1.6rem;padding:clamp(1.4rem,3vw,2rem);
  border-radius:20px;background:var(--warm);border:1px solid var(--ink-08);
}
.buys__amount{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.2rem,1.4rem + 3vw,3.2rem);line-height:1;letter-spacing:-.02em;
}
.buys__label{
  display:block;margin-top:.5rem;font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-58);
}
.buys__range{
  -webkit-appearance:none;appearance:none;width:100%;margin-top:1rem;
  height:26px;background:none;cursor:grab;
}
.buys__range:active{cursor:grabbing}
.buys__range::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:var(--ink-14)}
.buys__range::-moz-range-track{height:8px;border-radius:999px;background:var(--ink-14)}
.buys__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-9px;
  border-radius:50%;background:var(--accent);border:2px solid var(--surface);
  box-shadow:0 2px 10px rgba(20,32,31,.28);
}
.buys__range::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--accent);
  border:2px solid var(--surface);box-shadow:0 2px 10px rgba(20,32,31,.28);
}
.buys__ticks{
  display:flex;justify-content:space-between;margin-top:.2rem;
  font-size:.74rem;color:var(--ink-58);
}
.buys__result{
  margin-top:1.2rem;font-family:var(--font-display);font-weight:600;
  font-size:var(--step-2);line-height:1.25;color:var(--ink);
}
.buys__fine{margin-top:.5rem;font-size:.9rem;color:var(--ink-58)}

/* ============================================================
   ONE EVENING, TWO HOUSES  (stories page)
   ============================================================ */
.evening{
  margin-top:1.6rem;padding:clamp(1.4rem,3vw,2rem);
  border-radius:20px;background:var(--warm);border:1px solid var(--ink-08);
}
.evening__label{
  display:block;font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-58);
}
.evening__time{
  display:block;margin-top:.3rem;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.8rem,1.2rem + 2vw,2.4rem);line-height:1;
}
.evening__range{
  -webkit-appearance:none;appearance:none;width:100%;margin-top:1rem;height:26px;
  background:none;cursor:grab;
}
.evening__range:active{cursor:grabbing}
.evening__range::-webkit-slider-runnable-track{
  height:8px;border-radius:999px;
  background:linear-gradient(90deg,#F0C24A,#7C6B8E 55%,#1B2430);
}
.evening__range::-moz-range-track{
  height:8px;border-radius:999px;
  background:linear-gradient(90deg,#F0C24A,#7C6B8E 55%,#1B2430);
}
.evening__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-9px;
  border-radius:50%;background:var(--surface);border:2px solid var(--ink);
  box-shadow:0 2px 10px rgba(20,32,31,.3);
}
.evening__range::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--surface);
  border:2px solid var(--ink);box-shadow:0 2px 10px rgba(20,32,31,.3);
}
.evening__ticks{
  display:flex;justify-content:space-between;margin-top:.2rem;
  font-size:.74rem;color:var(--ink-58);
}
.evening__panes{display:grid;gap:.8rem;margin-top:1.4rem}
@media (min-width:640px){.evening__panes{grid-template-columns:1fr 1fr}}
.pane{border-radius:16px;padding:1.1rem;min-height:9.5rem}
.pane--dark{background:#1B2430;color:rgba(255,255,255,.8)}
.pane--lit{background:#FFF6DE;color:var(--ink);box-shadow:inset 0 0 60px rgba(255,210,63,.35)}
.pane__tag{
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  opacity:.7;margin-bottom:.6rem;
}
.pane--lit .pane__tag{color:#8A6A00;opacity:1}
.pane__line{font-size:1.02rem;line-height:1.5;transition:opacity var(--t-med) var(--ease)}
/* these live inside .prose, whose `p` rule would otherwise win over
   the colour inherited from the pane */
.prose .pane--dark p.pane__line{color:rgba(255,255,255,.86);margin-top:0}
.prose .pane--dark p.pane__tag{color:rgba(255,255,255,.6);margin-top:0}
.prose .pane--lit p.pane__line{color:var(--ink);margin-top:0}
.prose .pane--lit p.pane__tag{color:#8A6A00;margin-top:0}
.pane__line.is-swapping{opacity:0}

/* ============================================================
   HERO MONTAGE
   Stills that cross fade, with a slow push on the active one.
   ============================================================ */
.montage{position:absolute;inset:0;overflow:hidden;background:var(--forest)}
.montage .slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);
  transition:opacity 1200ms var(--ease);
  will-change:opacity,transform;
}
.montage .slide.is-on{opacity:1;animation:kenburns 9s linear forwards}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.1)}}

.montage__cap{
  position:absolute;left:var(--gutter);bottom:1.6rem;z-index:2;
  max-width:32ch;font-size:.82rem;font-weight:500;letter-spacing:.01em;
  color:rgba(255,255,255,.82);
  padding-left:.85rem;border-left:2px solid var(--accent);
  transition:opacity var(--t-med) var(--ease);
}
.montage__cap.is-swapping{opacity:0}
@media (max-width:760px){.montage__cap{display:none}}

@media (prefers-reduced-motion:reduce){
  .montage .slide.is-on{animation:none;transform:none}
  .montage .slide{transition:none}
}

/* ============================================================
   REAL PHOTOGRAPHY
   Same shapes the hatched placeholders had, now holding images.
   ============================================================ */
.shot{
  width:100%;height:auto;object-fit:cover;border-radius:18px;background:var(--warm);
}
.shot--wide{aspect-ratio:16/9;margin-top:1.5rem}
.shot--portrait{aspect-ratio:4/5}
.shot--story{aspect-ratio:4/3;margin-bottom:1.1rem}
.shot--map{aspect-ratio:16/7;margin-top:clamp(2rem,4vw,3rem)}
.prose .shot{border-radius:20px}

.events__empty{
  margin-top:clamp(1.6rem,3vw,2.2rem);padding:clamp(1.2rem,2.4vw,1.7rem);
  border:1px dashed var(--ink-14);border-radius:16px;
  color:var(--ink-70);max-width:60ch;
}

.contact__alt{margin-top:.8rem;font-size:.95rem;color:var(--ink-58)}
.contact__alt a{color:var(--brand)}

/* ============================================================
   PHONES
   The hero art switches to a portrait crop, type steps down, and
   nothing sits under the fixed give bar.
   ============================================================ */
.montage picture{display:contents}
.montage .slide{width:100%;height:100%}

@media (max-width:760px){
  /* hero: shorter, tighter, and legible over a busy photo */
  .hero{min-height:auto;padding:7rem 0 3rem}
  .hero__inner{gap:2rem}
  .hero__title{font-size:clamp(2.1rem,7.4vw,2.9rem);max-width:16ch}
  .hero__sub{font-size:1.02rem;max-width:34ch}
  .hero__scrim{
    background:
      linear-gradient(to bottom, rgba(8,16,14,.44) 0%, rgba(8,16,14,.22) 42%, rgba(8,16,14,.55) 100%);
  }
  .trust{gap:.35rem 1rem;font-size:.82rem}
  .hero__cue{display:none}

  /* give panel reads as a card, not a full bleed slab */
  .give{border-radius:18px;padding:1.25rem}
  .give__amounts{gap:.4rem}
  .give__chip{padding:.7em .1em;font-size:.9rem}

  /* the switch scene should not eat a whole screen */
  .scene__stack{aspect-ratio:4/3}
  .switchsec__grid{gap:1.5rem}

  /* portrait story and entry art gets shorter too */
  .shot--portrait{aspect-ratio:3/4}
  .entry__grid{gap:1.5rem}

  /* the fixed give bar must not cover the last thing on the page */
  body{padding-bottom:4.5rem}
  .foot{padding-bottom:5.5rem}
}

@media (max-width:420px){
  .hero__title{font-size:clamp(1.95rem,8vw,2.4rem)}
  .give__title{font-size:1.3rem}
  .stat__num{font-size:2rem}
}

/* thumb sized tap targets on touch screens */
@media (max-width:760px){
  .nav__menu a:not(.btn){padding-block:.6rem}
  .link-ghost,.more,.foot__nav a,.contact__direct a{padding-block:.45rem}
  .give__field{padding:.85em .9em}
  .give__field input{font-size:1rem}          /* 16px stops iOS zooming on focus */
  .form__row input,.form__row textarea{font-size:1rem;padding:.85em .9em}
  .give__freq{padding:.75em 1em}
  .events__foot a,.story a{padding-block:.4rem}
}

@media (max-width:760px){
  .nav__brand{padding-block:.5rem}
  .give__field input{padding-block:.55em}     /* the input, not just its wrapper */
  .foot__nav a{padding-block:.55rem}
  .foot__top{padding-block:.5rem}
  .events__foot .link-ghost{display:inline-block;padding-block:.5rem}
}

@media (max-width:760px){
  .back{padding-block:.55rem}
  .contact__direct a{display:inline-block;padding-block:.2rem}
}