@font-face {
  font-family: "Gobold High Bold";
  src: url("../assets/fonts/Gobold-High-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --color-white: #fff;
  --color-black: #000;
  --color-orange: #ff4000;
  --color-orange-bright: #ff9900;
  --color-orange-pressed: #e33900;
  --color-yellow: #ffcb00;
  --color-deep-green: #004004;
  --color-lime: #cae362;
  --color-soft-pink: #fcf3f2;
  --color-soft-gray: #f6f6f6;
  --color-border: #e1e1e1;

  --font-body: Inter, Arial, Helvetica, sans-serif;
  --font-display: "Gobold High Bold", "Arial Narrow", Impact, sans-serif;

  /* Desktop source of truth: 1920px canvas, 120px margins, 12 columns, 20px gutters. */
  --grid-count: 12;
  --grid-max: 1680px;
  --grid-margin: clamp(40px, 6.25vw, 120px);
  --grid-gutter: 20px;
  --radius-card: 20px;
  --radius-control: 4px;
  --section-space: 160px;
  --motion-fast: 180ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
body { margin: 0; color: var(--color-black); background: var(--color-white); font-family: var(--font-body); font-size: 18px; line-height: 1.4; letter-spacing: -.01em; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h2 { margin-bottom: 30px; font-size: 50px; line-height: 1; letter-spacing: -.04em; }
:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 3px; }

.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 12px 18px; color: white; background: black; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.section-grid { display: grid; grid-template-columns: repeat(var(--grid-count), minmax(0, 1fr)); column-gap: var(--grid-gutter); width: min(calc(100% - (2 * var(--grid-margin))), var(--grid-max)); margin-inline: auto; }
.display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; }
.media-frame { position: relative; overflow: hidden; }
[data-parallax] { --parallax-y: 0px; --media-scale: 1.07; transform: translate3d(0, var(--parallax-y), 0) scale(var(--media-scale)); transform-origin: center; transition: transform 420ms ease-out; will-change: transform; }
.button { display: inline-flex; min-height: 60px; align-items: center; justify-content: center; padding: 18px 40px; border: 0; border-radius: var(--radius-control); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; cursor: pointer; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.button-dark { color: white; background: black; }
.button-orange { color: white; background: var(--color-orange); }
.button-dark:hover, .button-dark:focus-visible { background: var(--color-orange); }
.button-dark:active { background: var(--color-orange-pressed); }
.button-orange:hover, .button-orange:focus-visible { background: var(--color-orange-bright); }
.button-orange:active { background: var(--color-orange-pressed); }
.button:disabled { color: white; background: var(--color-border); cursor: not-allowed; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; line-height: 1.5; transition: color var(--motion-fast) ease; }
.text-link:not(.underlined):hover, .text-link:not(.underlined):focus-visible { text-decoration: underline; }
.text-link.underlined:hover, .text-link.underlined:focus-visible { color: var(--color-orange); }
.underlined { text-decoration: underline; text-underline-offset: 3px; }

.site-header { position: relative; z-index: 20; height: 80px; border-bottom: 1px solid var(--color-border); background: white; }
.header-inner { display: flex; height: 100%; align-items: center; padding: 0 40px 0 35px; }
.brand { width: 165px; flex: 0 0 165px; }
.brand img { width: 100%; height: auto; }
.main-nav { display: flex; height: 60px; align-items: center; gap: 30px; font-weight: 500; }
.main-nav > a:not(.button), .nav-trigger { display: flex; height: 60px; align-items: center; border: 0; background: transparent; cursor: pointer; }
.main-nav > a:not(.button), .nav-trigger, .dropdown a, .footer-nav a, .legal-nav a { transition: color var(--motion-fast) ease; }
.main-nav > a:not(.button):hover, .main-nav > a:not(.button):focus-visible, .nav-trigger:hover, .nav-trigger:focus-visible, .dropdown a:hover, .dropdown a:focus-visible, .footer-nav a:hover, .footer-nav a:focus-visible, .legal-nav a:hover, .legal-nav a:focus-visible { color: var(--color-orange); }
.nav-menu { position: relative; height: 60px; }
.nav-trigger { gap: 6px; padding: 0; }
.nav-language img { width: 20px; height: 20px; }
.nav-trigger[aria-expanded="true"]::after { content: ""; position: absolute; right: 0; bottom: -9px; left: 0; height: 2px; background: var(--color-orange); }
.dropdown { position: absolute; top: 58px; left: 50%; min-width: 223px; padding: 20px 40px; border: 1px solid var(--color-border); border-radius: 4px; background: white; box-shadow: 4px 8px 20px rgb(0 0 0 / 12%); text-align: center; transform: translateX(-50%); }
.dropdown a { display: block; white-space: nowrap; }
.dropdown a + a { margin-top: 20px; }
.dropdown-wide { min-width: 300px; }
.dropdown-language { min-width: 168px; }
.header-cta { margin-left: 0; }

.hero { position: relative; min-height: 1180px; padding-top: 80px; }
.hero-curve { position: absolute; z-index: 2; top: -150px; left: 23%; width: 81%; max-width: none; pointer-events: none; }
.hero-content { z-index: 3; grid-column: 1 / span 5; align-self: start; padding-top: 92px; }
.hero-title { margin: 0; color: var(--color-orange); font-size: clamp(88px, 6.77vw, 130px); line-height: 1.2; }
.hero-copy { max-width: 547px; margin: 60px 0 0; }
.hero-actions { display: flex; flex-direction: column; align-items: start; gap: 14px; margin-top: 35px; }
.hero-media { position: relative; z-index: 1; grid-column: 7 / -1; height: 940px; }
.hero-image { width: 100%; height: 100%; margin: 0; border-radius: var(--radius-card); }
.hero-image img { position: absolute; top: -21.47%; left: -20.37%; width: 121.42%; height: 160.79%; max-width: none; object-fit: cover; }
.story-card { position: absolute; z-index: 4; top: 604px; left: -425px; width: 331px; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: 4px; background: white; box-shadow: 4px 8px 40px rgb(0 0 0 / 12%); text-align: left; cursor: pointer; }
.story-card-image { display: block; width: 100%; height: 174px; padding: 0; }
.story-card-image img { position: absolute; top: -36.8%; left: 0; width: 100.57%; height: 285.31%; max-width: none; object-fit: cover; }
.story-card-label { display: flex; height: 60px; align-items: center; gap: 10px; padding: 0 24px; font-weight: 500; }
.story-card-label img { width: 20px; height: 20px; transform: none; }

.intro { align-items: start; padding: 0 0 var(--section-space); }
.intro-image { grid-column: 1 / span 4; width: min(100%, 500px); aspect-ratio: 1; border-radius: var(--radius-card); }
.intro-image img { position: absolute; top: -12.95%; left: -35.82%; width: 229.62%; height: 153.25%; max-width: none; object-fit: cover; }
.intro-copy { grid-column: 5 / span 8; padding-top: 134px; }
.intro-copy p { max-width: 546px; }
.intro-copy .text-link { margin-top: 5px; }

.donation-section { position: relative; padding: var(--section-space) 0; overflow: visible; background: var(--color-orange); }
.donation-curve { position: absolute; top: 0; left: -2px; width: 100.2%; height: 100%; max-width: none; object-fit: fill; pointer-events: none; }
.donation-panel { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; width: min(calc(100% - (2 * var(--grid-margin)) - 284px), 1396px); min-height: 610px; margin: auto; padding: 80px 100px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.donation-intro { display: flex; min-width: 0; flex-direction: column; padding-right: 0; }
.donation-intro h2 { max-width: 528px; }
.donation-intro > p { margin: auto 0 0; font-weight: 500; }
.qr-code { display: block; width: 150px; height: auto; max-width: 100%; margin-top: 18px; }
.qr-code img { display: block; width: 100%; height: auto; }
.qr-code:focus-visible { outline: 3px solid var(--color-orange); outline-offset: 5px; }
.donation-widget { display: flex; min-width: 0; flex-direction: column; }
.amounts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 18px 0 12px; }
.amounts button { min-width: 0; height: 60px; padding: 0 18px; border: 0; color: black; background: var(--color-soft-gray); cursor: pointer; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, outline-color var(--motion-fast) ease; }
.amounts button:not(.is-selected):hover, .amounts button:not(.is-selected):focus-visible { color: black; background: var(--color-yellow); }
.amounts button:active { background: var(--color-orange-pressed); color: white; }
.amounts .is-selected, .amounts button[aria-pressed="true"] { color: white; background: black; outline: 2px solid black; outline-offset: 2px; }
.amounts .is-selected:hover, .amounts .is-selected:focus-visible { color: white; background: black; }
.custom-amount-link { align-self: flex-start; margin-bottom: 32px; }
.donation-benefits p { margin-bottom: 10px; }
.donation-benefits ul { margin: 0; padding: 0; list-style: none; }
.donation-benefits li { position: relative; padding-left: 25px; }
.donation-benefits li::before { content: "→"; position: absolute; left: 0; }
.donation-submit { margin-top: 28px; }
.integration-note { margin: 10px 0 0; color: #555; font-size: 14px; }
.one-time-link { margin-top: 20px; align-self: flex-start; }

.impact { position: relative; padding: var(--section-space) 0; overflow: hidden; }
.impact-intro { position: relative; z-index: 2; width: 830px; margin: 0 auto var(--section-space); text-align: center; }
.impact-intro p { margin-bottom: 0; }
.approach-grid { position: relative; z-index: 2; }
.approach-card { position: relative; grid-column: span 4; display: flex; height: 805px; flex-direction: column; padding: 40px; overflow: hidden; border-radius: var(--radius-card); }
.approach-card-art { position: relative; flex: 0 0 auto; width: calc(100% + 80px); aspect-ratio: 547 / 212; margin: -40px -40px 0; pointer-events: none; }
.approach-card-art > img { width: 100%; height: 100%; object-fit: fill; }
.approach-card h3 { position: relative; z-index: 1; margin: 0 0 30px; font-size: clamp(54px, 4.16vw, 80px); line-height: 1.2; }
.approach-card-title-fixed span { display: block; white-space: nowrap; }
.approach-card p { position: relative; z-index: 1; margin-top: auto; margin-bottom: 0; }
.approach-card-green { color: var(--color-lime); background: var(--color-deep-green); }
.approach-card-light { color: var(--color-orange); background: var(--color-soft-pink); }
.approach-card-orange { color: white; background: #ff9900; }

.support-panel { display: grid; grid-template-columns: 1fr 1fr; width: min(calc(100% - (2 * var(--grid-margin)) - 284px), 1396px); min-height: 546px; margin: 0 auto; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.support-image { min-width: 0; height: 100%; }
.support-image img { position: absolute; top: -1.24%; left: -6.25%; width: 120.29%; height: 102.58%; max-width: none; object-fit: cover; }
.support-copy { padding: 80px; }
.support-copy h2 { max-width: 536px; }
.support-copy p { max-width: 477px; margin: 126px 0 34px; }

.metrics { position: relative; grid-template-rows: 110px 334px; padding: var(--section-space) 0; }
.metrics-curve { position: absolute; z-index: -1; top: calc(var(--section-space) + 150px); left: calc(50% - 960px); width: 1929px; max-width: none; pointer-events: none; }
.metrics h2 { grid-column: 1 / span 7; grid-row: 1; margin: 0; }
.metric { grid-column: span 3; grid-row: 2; min-height: 0; }
.metric-2 { grid-column-start: 5; }
.metric-3 { grid-column-start: 9; }
.metric strong { display: block; font-size: clamp(120px, 10.42vw, 200px); line-height: 1; }
.metric p { max-width: 405px; }
.metrics-button { grid-column: 1 / span 3; grid-row: 3; justify-self: start; }

.help { grid-template-rows: 110px 446px; padding: 0 0 var(--section-space); }
.help h2 { grid-column: 1 / span 7; grid-row: 1; margin: 0; }
.help-card { grid-column: span 4; grid-row: 2; font-weight: 500; }
.help-image { display: block; width: 100%; height: 411px; padding: 0; border-radius: var(--radius-card); }
.help-image img { position: absolute; max-width: none; object-fit: cover; }
.help-card-1 .help-image img { top: -17.76%; left: -.04%; width: 100.07%; height: 199.76%; }
.help-card-2 .help-image img { top: -.11%; left: 0; width: 100%; height: 199.25%; }
.help-card-3 .help-image img { top: -11.68%; left: -18.39%; width: 143.27%; height: 126.91%; }
.help-card:hover .help-image img, .help-card:focus-visible .help-image img { --media-scale: 1.14; }
.help-card > span:last-child { transition: color var(--motion-fast) ease; }
.help-card:hover > span:last-child, .help-card:focus-visible > span:last-child { color: var(--color-orange); }
.help-card > span:last-child { display: block; padding-top: 8px; line-height: 1.5; }

.video-dialog { width: min(900px, calc(100% - 40px)); padding: 0; border: 0; border-radius: var(--radius-card); background: white; box-shadow: 0 24px 80px rgb(0 0 0 / 32%); }
.video-dialog::backdrop { background: rgb(0 0 0 / 64%); backdrop-filter: blur(4px); }
.video-dialog-inner { position: relative; padding: 24px; }
.video-close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; color: white; background: black; font-size: 30px; line-height: 1; cursor: pointer; }
.story-video-player { display: block; width: 100%; max-height: min(75vh, 760px); border-radius: 12px; background: black; }

.site-footer { border-top: 1px solid var(--color-border); }
.footer-grid { position: relative; min-height: 190px; padding: 40px 0; }
.footer-logo { grid-column: 1 / span 3; }
.footer-logo img { width: 165px; height: 37px; object-fit: contain; }
.footer-address { grid-column: 4 / span 3; }
.footer-registration { grid-column: 7 / span 3; }
.footer-address, .footer-registration { font-size: 14px; font-style: normal; line-height: 1.3; }
.footer-nav { display: flex; flex-direction: column; gap: 3px; font-weight: 500; line-height: 1.5; }
.footer-nav:nth-of-type(1) { grid-column: 4 / span 2; }
.footer-nav:nth-of-type(2) { grid-column: 7 / span 2; }
.footer-nav:nth-of-type(3) { grid-column: 10 / span 2; }
.legal-nav { position: absolute; bottom: 0; left: calc((3 * ((100% - (11 * var(--grid-gutter))) / 12)) + (3 * var(--grid-gutter))); display: flex; gap: 40px; font-size: 16px; font-weight: 500; }

@media (max-width: 1599px) {
  .hero { min-height: auto; padding: 60px 0 var(--section-space); }
  .hero-content { grid-column: 1 / span 5; padding-top: 35px; }
  .hero-title { font-size: clamp(76px, 8vw, 110px); }
  .hero-copy { margin-top: 45px; }
  .hero-media { grid-column: 6 / -1; height: min(72vw, 780px); }
  .story-card { top: auto; bottom: 24px; left: 24px; }
}

@media (max-width: 1280px) {
  .main-nav { gap: 18px; font-size: 15px; }
  .header-cta { padding-inline: 24px; }
  .donation-section { padding: var(--section-space) 0; }
  .donation-panel, .support-panel { width: calc(100% - (2 * var(--grid-margin))); }
  .donation-panel { min-height: 610px; gap: 50px; padding: 60px; }
  .amounts button { padding-inline: 10px; }
  .approach-card h3 { font-size: 54px; }
}

@media (max-width: 1050px) {
  .brand { width: 145px; flex-basis: 145px; }
  .main-nav > a:not(.button), .nav-menu { display: none; }
  .hero { row-gap: 50px; }
  .hero-content, .hero-media { grid-column: 1 / -1; }
  .hero-content { max-width: 760px; }
  .hero-media { grid-row: 2; height: min(110vw, 820px); }
  .hero-copy { max-width: 620px; }
  .intro { row-gap: 50px; }
  .intro-image { grid-column: 1 / span 5; width: 100%; }
  .intro-copy { grid-column: 6 / -1; }
  .donation-section { padding: var(--section-space) 40px; }
  .donation-panel { grid-template-columns: minmax(0, 1fr); width: 100%; min-height: 0; gap: 60px; }
  .donation-intro { display: grid; grid-template-columns: minmax(0, 1fr) 150px; column-gap: 30px; padding: 0; }
  .donation-intro h2 { grid-column: 1 / -1; }
  .donation-intro > p { margin: 30px 0 0; }
  .qr-code { grid-column: 2; grid-row: 2; margin-top: 0; justify-self: end; }
  .one-time-link { position: static; margin-top: 24px; }
  .approach-grid { row-gap: 20px; }
  .approach-card { grid-column: span 12; width: min(100%, 547px); height: auto; min-height: 620px; justify-self: center; }
  .support-copy { padding: 50px; }
  .support-copy p { margin-top: 70px; }
}

@media (max-width: 900px) {
  :root { --section-space: 60px; }
  .site-header { height: auto; }
  .header-inner { min-height: 70px; }
  .section-grid { grid-template-columns: 1fr; width: calc(100% - 40px); }
  .section-grid > *, .hero-content, .hero-media, .intro-image, .intro-copy, .approach-card, .metrics h2, .metric, .metric-2, .metric-3, .metrics-button, .help h2, .help-card, .footer-logo, .footer-address, .footer-registration { grid-column: 1; grid-row: auto; }
  .hero { width: calc(100% - 40px); row-gap: 40px; padding: 40px 0 var(--section-space); }
  .hero-content { padding-top: 0; }
  .hero-title { font-size: 60px; }
  .hero-copy { margin-top: 30px; }
  .hero-actions { margin-top: 30px; }
  .hero-media { display: block; height: auto; }
  .hero-image { height: 396px; }
  .hero-curve { top: 448px; left: -94px; width: 539px; }
  .story-card { position: relative; top: auto; right: auto; bottom: auto; left: auto; display: grid; grid-template-rows: minmax(0, 1fr) 60px; width: 100%; height: auto; aspect-ratio: 1; margin-top: 60px; }
  .story-card-image { height: auto; min-height: 0; }
  .story-card-image img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 14%; }
  .intro { gap: 23px; padding: 0 0 var(--section-space); }
  .intro-copy { order: 1; }
  .intro-image { order: 2; width: 100%; height: auto; aspect-ratio: 1; }
  .intro-copy { padding-top: 0; }
  .donation-section { padding: var(--section-space) 20px; }
  .donation-curve { top: 0; left: -80px; width: calc(100% + 160px); height: 100%; }
  .donation-panel, .support-panel { grid-template-columns: minmax(0, 1fr); width: 100%; padding: 40px 20px; }
  .donation-intro { grid-template-columns: minmax(0, 1fr) 120px; }
  .donation-intro > p { margin-top: 30px; }
  .amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .impact { padding: var(--section-space) 0; }
  .impact-intro { width: calc(100% - 40px); margin-bottom: var(--section-space); }
  .approach-grid { gap: 20px; }
  .approach-card {
    --card-inset: clamp(28px, calc(11.4286vw - 4.5714px), 62.5px);
    width: min(100%, 547px);
    min-height: 0;
    padding: var(--card-inset);
    border-radius: clamp(14px, calc(5.7143vw - 2.2857px), 31.25px);
    justify-self: center;
  }
  .approach-card-art { width: calc(100% + (2 * var(--card-inset))); margin: calc(0px - var(--card-inset)) calc(0px - var(--card-inset)) 0; }
  .approach-card:nth-child(1) { height: auto; aspect-ratio: 350 / 565; }
  .approach-card:nth-child(2), .approach-card:nth-child(3) { height: auto; aspect-ratio: 350 / 631; }
  .approach-card:nth-child(3) { margin-top: 10px; }
  .approach-card h3 { margin-bottom: clamp(21px, calc(8.5714vw - 3.4286px), 46.9px); font-size: clamp(31px, calc(12.5714vw - 5.0286px), 68.75px); line-height: 1.2; }
  .approach-card p { width: 96%; font-size: clamp(11px, calc(4.5714vw - 1.8286px), 25px); letter-spacing: 0; }
  .support-panel { width: calc(100% - 40px); height: 573px; min-height: 573px; grid-template-rows: 273px 300px; margin-bottom: 0; padding: 0; }
  .support-image { min-height: 273px; }
  .support-copy { padding: 30px; }
  .support-copy p { margin: 25px 0 20px; }
  .metrics, .help { height: auto; grid-template-rows: none; gap: 30px; }
  .metrics { min-height: 0; padding: var(--section-space) 0; }
  .help { padding-bottom: var(--section-space); }
  .help { gap: 40px; }
  .metrics-curve { top: calc(var(--section-space) + 310px); left: -97px; width: 545px; }
  .metric strong { font-size: 80px; }
  .help-image { height: 263px; }
  .footer-grid { row-gap: 30px; }
  .legal-nav { position: static; grid-column: 1; flex-wrap: wrap; margin-top: 30px; }
  .footer-nav { grid-column: 1 !important; margin-top: 24px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  h2 { font-size: 32px; }
  .header-inner { padding-inline: 20px; }
  .brand { width: 130px; flex-basis: 130px; }
  .header-cta { min-height: 48px; padding: 12px 18px; font-size: 15px; }
  .donation-panel { display: grid; height: auto; min-height: 0; gap: 0; align-content: start; padding: 30px; }
  .donation-intro, .donation-widget { display: contents; }
  .donation-intro h2 { order: 1; margin: 0 0 20px; }
  .donation-widget > p:first-child { order: 2; margin: 0; }
  .amounts { order: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin: 46px 0 0; }
  .amounts button { height: 52px; }
  .custom-amount-link { order: 4; margin: 18px 0 0; }
  .donation-benefits { order: 5; margin-top: 28px; }
  .donation-benefits p { margin-bottom: 24px; }
  .donation-submit { order: 6; justify-self: start; margin-top: 32px; }
  .donation-intro > p { order: 7; margin: 35px 0 0; }
  .qr-code { order: 8; grid-column: auto; grid-row: auto; width: 150px; margin-top: 12px; justify-self: start; }
  .one-time-link { display: none; }
  .integration-note { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .video-dialog-inner { padding: 12px; }
  .story-video-player { border-radius: 8px; }
  .footer-logo img { width: 130px; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-parallax] { --parallax-y: 0px !important; transition: none !important; }
}