@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600&display=swap");
@import "tailwindcss" source(none);
@source "../src";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

/*
 * Design system definition.
 *
 * The @theme inline block maps CSS custom properties to Tailwind utility
 * classes (e.g. --color-primary -> bg-primary, text-primary).
 *
 * The :root and .dark blocks define the actual color values using oklch.
 * All colors MUST use oklch format.
 *
 * To add a new semantic color:
 * 1. Add the variable to :root (light value) and .dark (dark value)
 * 2. Register it in @theme inline as --color-<name>: var(--<name>)
 */

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-ring-offset-background: var(--background);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --radius: 0.25rem;
  --background: oklch(0.975 0.008 84);
  --foreground: oklch(0.205 0.035 255);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.129 0.042 264.695);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.129 0.042 264.695);
  --primary: oklch(0.235 0.052 255);
  --primary-foreground: oklch(0.984 0.003 247.858);
  --secondary: oklch(0.968 0.007 247.896);
  --secondary-foreground: oklch(0.208 0.042 265.755);
  --muted: oklch(0.968 0.007 247.896);
  --muted-foreground: oklch(0.554 0.046 257.417);
  --accent: oklch(0.68 0.095 78);
  --accent-foreground: oklch(0.18 0.03 255);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(0.929 0.013 255.508);
  --input: oklch(0.929 0.013 255.508);
  --ring: oklch(0.704 0.04 256.788);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.984 0.003 247.858);
  --sidebar-foreground: oklch(0.129 0.042 264.695);
  --sidebar-primary: oklch(0.208 0.042 265.755);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.968 0.007 247.896);
  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
  --sidebar-border: oklch(0.929 0.013 255.508);
  --sidebar-ring: oklch(0.704 0.04 256.788);
}

.dark {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.208 0.042 265.755);
  --card-foreground: oklch(0.984 0.003 247.858);
  --popover: oklch(0.208 0.042 265.755);
  --popover-foreground: oklch(0.984 0.003 247.858);
  --primary: oklch(0.929 0.013 255.508);
  --primary-foreground: oklch(0.208 0.042 265.755);
  --secondary: oklch(0.279 0.041 260.031);
  --secondary-foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);
  --accent: oklch(0.279 0.041 260.031);
  --accent-foreground: oklch(0.984 0.003 247.858);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.208 0.042 265.755);
  --sidebar-foreground: oklch(0.984 0.003 247.858);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.279 0.041 260.031);
  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.551 0.027 264.364);
}

@layer base {
  * {
    border-color: var(--color-border);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    margin: 0;
    font-family: "DM Sans", sans-serif;
    line-height: 1.65;
    letter-spacing: 0;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Cormorant Garamond", serif; letter-spacing: 0; line-height: 1.05; }
h2 { font-size: clamp(2.5rem, 5vw, 4.6rem); font-weight: 600; }
h2 em, h1 em { font-weight: 500; }
.wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.section { padding: 110px 0; }
.eyebrow { font: 600 .72rem/1 "DM Sans", sans-serif; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 22px; }
.gold { color: oklch(0.7 0.1 78); }
.gradient-gold { color: oklch(0.75 0.1 79); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 25px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: .3s ease; }
.gold-button { background: oklch(0.7 0.1 78); color: oklch(0.18 0.03 255); }
.gold-button:hover { background: oklch(0.78 0.09 82); transform: translateY(-2px); }
.outline-button { border-color: oklch(0.7 0.1 78); color: oklch(0.31 0.04 255); }
.outline-button:hover { background: oklch(0.7 0.1 78); color: oklch(0.18 0.03 255); }
.inline-link, .text-link { display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid oklch(0.7 0.1 78); padding-bottom: 5px; }
.text-link { color: oklch(0.94 0.012 85); }

.site-nav { position: fixed; inset: 0 0 auto; height: 88px; z-index: 50; color: oklch(0.97 0.008 85); transition: .35s ease; }
.site-nav.scrolled { height: 74px; background: oklch(0.2 0.045 255 / 96%); box-shadow: 0 12px 35px oklch(0.1 0.02 250 / 25%); }
.nav-inner { height: 100%; display: flex; align-items: center; gap: 38px; }
.brand { display: inline-flex; align-items: center; gap: 11px; margin-right: auto; }
.brand-logo { width: 41px; height: 50px; object-fit: contain; }
.brand span span { display: block; }
.brand-name { font: 600 1.35rem/1 "Cormorant Garamond", serif; letter-spacing: .16em; }
.brand-sub { font-size: .58rem; letter-spacing: .28em; text-transform: uppercase; color: oklch(0.73 0.09 78); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { position: relative; font-size: .73rem; letter-spacing: .07em; text-transform: uppercase; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: oklch(0.72 0.1 78); transition: .25s; }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-cta { border: 1px solid oklch(0.72 0.1 78); padding: 11px 18px; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; }
.menu-button { display: none; color: inherit; background: none; border: 0; padding: 8px; }
.mobile-menu { display: none; }
.mobile-menu.open { display: grid; }

.hero { position: relative; min-height: min(92vh, 850px); color: oklch(0.97 0.008 85); display: flex; align-items: center; overflow: hidden; }
.hero.small { min-height: 610px; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .veil { position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.13 0.04 255 / 92%) 0%, oklch(0.16 0.04 255 / 67%) 52%, oklch(0.1 0.03 255 / 18%) 100%); }
.hero-content { position: relative; z-index: 2; padding-top: 72px; }
.hero-content h1 { max-width: 890px; margin-bottom: 26px; font-size: clamp(3.2rem, 6.2vw, 6.4rem); font-weight: 600; }
.hero.small .hero-content h1 { max-width: 800px; font-size: clamp(3.4rem, 5.4vw, 5.7rem); }
.hero-content > p:not(.eyebrow) { max-width: 610px; font-size: 1.06rem; color: oklch(0.9 0.012 85); }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 36px; }
.fade { animation: rise .8s both; }
.delay1 { animation-delay: .12s; } .delay2 { animation-delay: .24s; } .delay3 { animation-delay: .36s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.intro-band { background: oklch(0.975 0.008 84); }
.intro-grid, .impact-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 100px; align-items: center; }
.intro-grid h2, .impact-intro h2 { margin-bottom: 0; color: oklch(0.23 0.045 255); }
.intro-grid h2 em, .impact-intro h2 em, .story-copy h2 em { color: oklch(0.63 0.09 78); }
.intro-grid > div:last-child p, .impact-intro > p { color: oklch(0.42 0.025 255); font-size: 1.04rem; }
.sectors-section { background: oklch(0.215 0.046 255); color: oklch(0.96 0.01 85); }
.section-heading { margin-bottom: 50px; }
.sector-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.sector-card { min-height: 380px; grid-column: span 2; position: relative; overflow: hidden; }
.sector-card.featured, .sector-card:nth-child(2) { grid-column: span 3; min-height: 440px; }
.sector-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.sector-card:hover > img { transform: scale(1.04); }
.card-veil { position: absolute; inset: 0; background: linear-gradient(0deg, oklch(0.11 0.04 255 / 94%), transparent 78%); }
.sector-card-content { position: absolute; inset: auto 28px 25px; }
.sector-card-content > span { float: right; color: oklch(0.75 0.09 78); font-size: .7rem; letter-spacing: .1em; }
.sector-card-content h3 { margin: 12px 0 7px; font-size: 2rem; }
.sector-card-content p { color: oklch(0.85 0.01 85); font-size: .86rem; line-height: 1.55; margin: 0; }
.centered { text-align: center; margin-top: 42px; }
.cta-band { background: oklch(0.175 0.043 255); color: oklch(0.97 0.008 85); padding: 90px 0; text-align: center; }
.cta-band h2 { margin-bottom: 30px; }
.cta-band h2 em { color: oklch(0.73 0.1 78); }

.story-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; }
.story-grid.reverse .story-image { order: 2; }
.story-image { position: relative; margin: 16px; }
.story-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; position: relative; z-index: 1; }
.image-frame { position: absolute; inset: -16px 16px 16px -16px; border: 1px solid oklch(0.68 0.09 78); }
.story-copy p { color: oklch(0.42 0.025 255); }
.story-copy .eyebrow { color: oklch(0.65 0.09 78); }
.purpose-band, .principles { padding: 100px 0; background: oklch(0.225 0.046 255); color: oklch(0.96 0.01 85); }
.purpose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: oklch(0.72 0.08 78 / 35%); }
.purpose-grid article { background: oklch(0.225 0.046 255); padding: 54px; }
.purpose-grid article > svg { color: oklch(0.72 0.1 78); margin-bottom: 24px; }
.purpose-grid h3, .principle-grid h3 { font-size: 2rem; margin-bottom: 15px; }
.purpose-grid p:last-child, .principle-grid p { color: oklch(0.82 0.015 85); }
.service-list { padding-top: 70px; }
.service-row { display: grid; grid-template-columns: 1.05fr .95fr; gap: 100px; align-items: center; padding: 55px 0; border-bottom: 1px solid oklch(0.83 0.015 80); }
.service-row:nth-child(even) .service-image { order: 2; }
.service-image { position: relative; }
.service-image img { width: 100%; height: 410px; object-fit: cover; }
.service-image span { position: absolute; left: -18px; bottom: 20px; background: oklch(0.21 0.046 255); color: oklch(0.73 0.1 78); width: 70px; height: 70px; display: grid; place-items: center; font-family: "Cormorant Garamond"; font-size: 1.45rem; }
.service-copy > svg { color: oklch(0.65 0.09 78); }
.service-copy h2 { font-size: clamp(2.7rem, 4.5vw, 4.2rem); margin-bottom: 20px; }
.service-copy p:not(.eyebrow) { color: oklch(0.42 0.025 255); }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.principle-grid article { padding: 20px 48px; border-right: 1px solid oklch(0.72 0.08 78 / 35%); }
.principle-grid article:last-child { border: 0; }
.principle-grid article > span { display: block; color: oklch(0.7 0.09 78); font-size: .72rem; margin-bottom: 45px; }
.principle-grid article > svg { color: oklch(0.72 0.1 78); margin-bottom: 20px; }

.contact-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 85px; align-items: start; }
.contact-details > p:not(.eyebrow) { color: oklch(0.42 0.025 255); }
.contact-details address { display: grid; gap: 22px; margin: 35px 0; font-style: normal; }
.contact-details address a { display: flex; gap: 16px; align-items: flex-start; }
.contact-details address svg { width: 20px; color: oklch(0.63 0.09 78); flex: none; }
.contact-details address small { display: block; text-transform: uppercase; letter-spacing: .12em; font-size: .62rem; margin-bottom: 3px; color: oklch(0.53 0.02 255); }
.contact-socials { display: flex; gap: 16px; flex-wrap: wrap; }
.contact-socials a { display: flex; gap: 7px; align-items: center; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }
.contact-socials svg { width: 17px; }
.form-panel { background: oklch(0.93 0.014 82); padding: 46px; border-top: 3px solid oklch(0.67 0.095 78); }
.form-panel h2 { font-size: 3rem; margin-bottom: 28px; }
.form-panel form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-panel label { display: grid; gap: 8px; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.form-panel input, .form-panel select, .form-panel textarea { width: 100%; border: 0; border-bottom: 1px solid oklch(0.67 0.025 255); background: transparent; padding: 11px 2px; border-radius: 0; color: oklch(0.2 0.04 255); font: 400 .92rem/1.5 "DM Sans", sans-serif; outline: none; }
.form-panel textarea { border: 1px solid oklch(0.75 0.02 255); padding: 12px; resize: vertical; }
.form-panel input:focus, .form-panel select:focus, .form-panel textarea:focus { border-color: oklch(0.55 0.1 78); }
.field-error { color: oklch(0.49 0.19 28); font-size: .7rem; letter-spacing: 0; text-transform: none; }
.navy-button { background: oklch(0.225 0.046 255); color: oklch(0.97 0.008 85); justify-self: start; }
.form-note { font-size: .76rem; color: oklch(0.48 0.02 255); margin: -8px 0 0; }

.footer { position: relative; background: oklch(0.135 0.036 255); color: oklch(0.84 0.01 85); padding-top: 75px; }
.gold-rule { position: absolute; inset: 0 0 auto; height: 2px; background: oklch(0.7 0.1 78); }
.footer-grid { display: grid; grid-template-columns: 1.5fr .7fr .9fr 1.15fr; gap: 55px; padding-bottom: 65px; }
.footer .brand { color: oklch(0.97 0.008 85); margin-bottom: 22px; }
.footer-tagline { color: oklch(0.73 0.09 78); font-family: "Cormorant Garamond", serif; font-size: 1.28rem; line-height: 1.35; }
.footer p { font-size: .84rem; }
.footer h3 { font-family: "DM Sans", sans-serif; color: oklch(0.73 0.09 78); text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; margin-bottom: 20px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: .82rem; }
.footer address { display: grid; gap: 13px; font-style: normal; font-size: .79rem; }
.footer address a { display: flex; gap: 9px; align-items: flex-start; }
.footer address svg { flex: none; margin-top: 3px; color: oklch(0.72 0.09 78); }
.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a { width: 36px; height: 36px; border: 1px solid oklch(0.7 0.08 78 / 55%); display: grid; place-items: center; }
.footer-bottom { border-top: 1px solid oklch(0.9 0.01 85 / 12%); padding: 20px 0; display: flex; justify-content: space-between; gap: 20px; font-size: .67rem; letter-spacing: .04em; }
.whatsapp, .top-button { position: fixed; right: 22px; z-index: 45; width: 48px; height: 48px; border: 0; display: grid; place-items: center; box-shadow: 0 8px 25px oklch(0.1 0.03 255 / 28%); cursor: pointer; }
.whatsapp { bottom: 24px; background: oklch(0.7 0.17 150); color: oklch(1 0 0); border-radius: 50%; }
.top-button { bottom: 82px; background: oklch(0.22 0.045 255); color: oklch(0.96 0.01 85); opacity: 0; visibility: hidden; transition: .25s; }
.top-button.show { opacity: 1; visibility: visible; }

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .menu-button { display: block; }
  .mobile-menu { display: grid; position: absolute; top: 100%; inset-inline: 0; background: oklch(0.18 0.045 255 / 98%); padding: 18px 24px 28px; gap: 0; }
  .mobile-menu a { padding: 13px 0; border-bottom: 1px solid oklch(1 0 0 / 10%); text-transform: uppercase; font-size: .75rem; letter-spacing: .08em; }
  .intro-grid, .impact-intro, .story-grid, .service-row, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .story-grid.reverse .story-image, .service-row:nth-child(even) .service-image { order: initial; }
  .sector-grid { grid-template-columns: 1fr 1fr; }
  .sector-card, .sector-card.featured, .sector-card:nth-child(2) { grid-column: auto; min-height: 380px; }
  .footer-grid { grid-template-columns: 1.5fr 1fr; }
  .principle-grid { grid-template-columns: 1fr; }
  .principle-grid article { border-right: 0; border-bottom: 1px solid oklch(0.72 0.08 78 / 35%); padding: 35px 15px; }
  .principle-grid article > span { margin-bottom: 22px; }
}

@media (max-width: 620px) {
  .wrap { width: min(100% - 32px, 1180px); }
  .section { padding: 76px 0; }
  .site-nav { height: 76px; }
  .brand-logo { width: 34px; height: 43px; }
  .brand-name { font-size: 1.1rem; }
  .hero { min-height: 760px; align-items: flex-end; padding-bottom: 70px; }
  .hero.small { min-height: 570px; padding-bottom: 55px; }
  .hero .veil { background: linear-gradient(0deg, oklch(0.12 0.04 255 / 96%), oklch(0.14 0.04 255 / 40%)); }
  .hero-content h1, .hero.small .hero-content h1 { font-size: 3.15rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 22px; }
  .intro-grid, .impact-intro { gap: 28px; }
  .sector-grid { grid-template-columns: 1fr; }
  .sector-card, .sector-card.featured, .sector-card:nth-child(2) { min-height: 390px; }
  .story-grid { gap: 42px; }
  .purpose-grid { grid-template-columns: 1fr; }
  .purpose-grid article { padding: 38px 28px; }
  .service-row { padding: 40px 0; }
  .service-image img { height: 310px; }
  .form-panel { padding: 30px 22px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 35px; }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
/* =========================
   DONATION SECTION ONLY
   ========================= */

.donations {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 50px;
}

.donation {
  width: 100%;
  min-height: 145px;
  padding: 25px 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: oklch(1 0 0);
  color: oklch(0.205 0.035 255);

  border: 1px solid oklch(0.72 0.08 78 / 45%);
  border-radius: 0;

  cursor: pointer;
  transition: 0.3s ease;
}

.donation > span:first-child {
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: oklch(0.205 0.035 255);
}

.donation .eyebrow {
  margin-bottom: 0;
  color: oklch(0.554 0.046 257.417) !important;
  font-size: .65rem;
  letter-spacing: .15em;
}

.donation:hover {
  background: oklch(0.235 0.052 255);
  border-color: oklch(0.7 0.1 78);
  transform: translateY(-3px);
}

.donation:hover > span:first-child {
  color: oklch(0.75 0.1 79);
}

.donation:hover .eyebrow {
  color: oklch(0.984 0.003 247.858) !important;
}

.donations + .body {
  margin-top: 30px !important;
  font-size: 12px !important;
}


/* TABLET */

@media (max-width: 900px) {
  .donations {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}


/* MOBILE */

@media (max-width: 620px) {
  .donations {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .donation {
    min-height: 120px;
  }
}
/* =========================================================
   RESPONSIVE / MOBILE POLISH — 2026
   ========================================================= */

/* Prevent long words / links from creating horizontal overflow. */
html, body { max-width: 100%; overflow-x: clip; }

/* Better touch targets and predictable media sizing. */
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, .button, .nav-cta, .menu-button { touch-action: manipulation; }

@media (max-width: 1100px) {
  .wrap { width: min(100% - 40px, 1180px); }
  .nav-inner { gap: 22px; }
  .nav-links { gap: 20px; }
  .footer-grid { gap: 36px; }
  .intro-grid, .impact-intro { gap: 60px; }
}

@media (max-width: 900px) {
  .site-nav { height: 76px; }
  .site-nav.scrolled { height: 68px; }

  .nav-inner { gap: 12px; }
  .brand { min-width: 0; }
  .brand-name { white-space: nowrap; }
  .menu-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: 8px;
    flex: 0 0 44px;
    border: 1px solid oklch(1 0 0 / 18%);
  }

  /* IMPORTANT: closed mobile menu must actually stay hidden. */
  .mobile-menu {
    display: none;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-menu.open { display: grid; }
  .mobile-menu a { min-height: 48px; display: flex; align-items: center; }

  .hero { min-height: 720px; }
  .hero.small { min-height: 540px; }
  .hero-content { padding-top: 96px; padding-bottom: 20px; }
  .hero-content h1,
  .hero.small .hero-content h1 { max-width: 760px; }

  .section { padding: 88px 0; }
  .intro-grid, .impact-intro, .story-grid, .service-row, .contact-grid {
    gap: 42px;
  }

  .sector-card,
  .sector-card.featured,
  .sector-card:nth-child(2) {
    min-height: 350px;
  }

  .form-panel { padding: 38px; }
  .form-panel h2 { font-size: clamp(2.4rem, 5vw, 3rem); }

  .footer { padding-top: 60px; }
  .footer-grid { grid-template-columns: 1.2fr 1fr; }
}

@media (max-width: 620px) {
  :root { --mobile-gutter: 16px; }

  .wrap { width: calc(100% - 32px); }
  .section { padding: 64px 0; }
  h2 { font-size: clamp(2.35rem, 11vw, 3.45rem); }

  .site-nav { height: 68px; }
  .site-nav.scrolled { height: 64px; }
  .brand { gap: 8px; }
  .brand-logo { width: 30px; height: 38px; }
  .brand-name { font-size: 1rem; letter-spacing: .13em; }
  .brand-sub { font-size: .5rem; letter-spacing: .22em; }
  .menu-button { width: 42px; height: 42px; flex-basis: 42px; margin-left: 4px; }
  .mobile-menu {
    max-height: calc(100vh - 68px);
    padding: 8px 16px 20px;
  }

  .hero {
    min-height: 680px;
    padding-bottom: 46px;
    align-items: flex-end;
  }
  .hero.small {
    min-height: 500px;
    padding-bottom: 42px;
  }
  .hero-content { padding-top: 100px; }
  .hero-content h1,
  .hero.small .hero-content h1 {
    font-size: clamp(2.65rem, 12.8vw, 4rem);
    line-height: .98;
    margin-bottom: 20px;
    max-width: 100%;
  }
  .hero-content > p:not(.eyebrow) {
    font-size: .94rem;
    line-height: 1.6;
    max-width: 100%;
  }
  .eyebrow { font-size: .65rem; letter-spacing: .15em; margin-bottom: 16px; }

  .hero-actions {
    width: 100%;
    margin-top: 28px;
    gap: 16px;
    align-items: stretch;
  }
  .hero-actions .button { width: 100%; }
  .hero-actions .text-link { align-self: flex-start; }

  .button {
    min-height: 50px;
    padding-inline: 18px;
    font-size: .7rem;
  }

  .intro-grid, .impact-intro { gap: 24px; }
  .intro-grid h2, .impact-intro h2 { margin-bottom: 0; }
  .intro-grid > div:last-child p, .impact-intro > p { font-size: .96rem; }

  .sector-grid { gap: 12px; }
  .sector-card,
  .sector-card.featured,
  .sector-card:nth-child(2) {
    min-height: 330px;
  }
  .sector-card-content { padding: 24px; }
  .sector-card-content h3 { font-size: 2rem; }
  .sector-card-content p { font-size: .84rem; line-height: 1.55; }

  .story-grid, .service-row, .contact-grid { gap: 30px; }
  .story-image img { min-height: 280px; height: auto; object-fit: cover; }
  .service-image img { height: 280px; }
  .service-image span { left: -8px; width: 56px; height: 56px; font-size: 1.2rem; }

  .purpose-grid { grid-template-columns: 1fr; }
  .purpose-grid article { padding: 30px 22px; }

  .principle-grid article { padding: 28px 0; }
  .principle-grid article > span { margin-bottom: 18px; }

  .form-panel { padding: 28px 20px; }
  .form-panel h2 { font-size: 2.35rem; }
  .form-panel form { gap: 16px; }
  .form-row { gap: 16px; }
  .form-panel input, .form-panel select, .form-panel textarea { font-size: 16px; } /* prevents iOS zoom */
  .form-panel .button { width: 100%; }

  .donations { grid-template-columns: 1fr; gap: 10px; margin-top: 32px; }
  .donation { min-height: 104px; padding: 20px 16px; }
  .donation > span:first-child { font-size: 1.75rem; }

  .cta-band { padding: 70px 0; }
  .cta-band h2 { font-size: clamp(2.35rem, 11vw, 3.4rem); }
  .cta-band .button { width: 100%; }

  .footer { padding-top: 52px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; padding-bottom: 42px; }
  .footer-tagline { font-size: 1.15rem; }
  .footer p { font-size: .8rem; }
  .footer-bottom { padding: 16px 0; gap: 8px; font-size: .62rem; }
  .footer-bottom span { max-width: 100%; }

  .whatsapp, .top-button { right: 14px; width: 46px; height: 46px; }
  .whatsapp { bottom: 16px; }
  .top-button { bottom: 72px; }
}

@media (max-width: 380px) {
  .wrap { width: calc(100% - 28px); }
  .brand-name { font-size: .9rem; }
  .brand-sub { font-size: .46rem; }
  .hero-content h1,
  .hero.small .hero-content h1 { font-size: 2.55rem; }
  .hero { min-height: 640px; }
  .hero.small { min-height: 480px; }
  .sector-card,
  .sector-card.featured,
  .sector-card:nth-child(2) { min-height: 310px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu { scroll-behavior: auto; }
}

@media (max-width: 900px) {
  body.menu-open { overflow: hidden; }
}