:root {
  --blue: #1769d4;
  --turquoise: #23c6c8;
  --green: #26b96b;
  --yellow: #ffc52e;
  --orange: #ff7a19;
  --pink: #ef2e67;
  --purple: #9344b8;
  --ink: #252735;
  --muted: #687080;
  --paper: #fffdf8;
  --soft: #f4f7f2;
  --line: #e7e9e3;
  --shadow: 0 18px 45px rgba(37, 39, 53, .11);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Trebuchet MS", "Segoe UI", sans-serif; line-height: 1.6; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.05; letter-spacing: 0; }
h1 { font-size: clamp(3.1rem, 8vw, 7.5rem); max-width: 900px; }
h2 { font-size: clamp(2.3rem, 5vw, 5rem); }
h3 { font-size: 1.5rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { width: min(1160px, calc(100% - 40px)); margin: auto; }
.eyebrow { color: var(--blue); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.muted { color: var(--muted); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ink); color: white; font-weight: 800; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(37,39,53,.18); }
.button.alt { background: var(--yellow); color: var(--ink); }
.button.light { background: white; color: var(--ink); }
.button.outline { border: 2px solid var(--ink); background: transparent; color: var(--ink); }

.site-header { position: sticky; top: 0; z-index: 10; height: 82px; background: rgba(255,253,248,.78); backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: .25s; }
.site-header.scrolled { border-color: var(--line); box-shadow: 0 5px 20px rgba(37,39,53,.07); }
.nav { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 82px; padding-left: 245px; gap: 22px; }
.brand { position: absolute; z-index: 2; left: 0; top: -13px; width: 226px; height: 226px; overflow: hidden; border-radius: 50%; background: white; box-shadow: 0 12px 28px rgba(37,39,53,.12); }
.brand img { width: 226px; height: 226px; object-fit: cover; object-position: center; }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: .9rem; font-weight: 700; }
.nav-links a:hover, .nav-links a.active { color: var(--pink); }
.menu-toggle { display: none; border: 0; background: none; font-size: 1.7rem; }

.hero { position: relative; overflow: hidden; padding: 90px 0 100px; background: linear-gradient(120deg, #effcf7 0%, #fffdf8 55%, #fff3df 100%); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 50px; }
.hero h1 { margin: 15px 0 25px; }
.hero h1 span { color: var(--pink); }
.hero-eyebrow { display: none; }
.hero-copy { max-width: 590px; font-size: 1.14rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-art { position: relative; min-height: 420px; display: grid; place-items: center; }
.hero-art:before, .hero-art:after { content: ""; position: absolute; border-radius: 50%; animation: drift 7s ease-in-out infinite; }
.hero-art:before { width: 390px; height: 390px; background: var(--turquoise); opacity: .24; }
.hero-art:after { width: 170px; height: 170px; right: 4%; top: 9%; background: var(--yellow); opacity: .8; animation-delay: -2s; }
.logo-orbit { position: relative; z-index: 1; width: min(100%, 380px); aspect-ratio: 1; padding: 28px; border-radius: 50%; background: white; box-shadow: var(--shadow); border: 13px solid rgba(239,46,103,.13); }
.logo-orbit img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
@keyframes drift { 50% { transform: translate(10px, -14px) rotate(5deg); } }

.impact { padding: 28px 0; background: var(--ink); color: white; }
.impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.impact-item { padding: 8px 18px; border-left: 3px solid var(--yellow); }
.impact-item:nth-child(2) { border-color: var(--turquoise); }.impact-item:nth-child(3) { border-color: var(--pink); }.impact-item:nth-child(4) { border-color: var(--green); }
.impact-number { display: block; font-size: 2.3rem; font-weight: 900; }

section { padding: 105px 0; }
.section-intro { max-width: 700px; margin-bottom: 50px; }
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.split--donation { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 35px; }
.quote { font-size: clamp(2.6rem, 6vw, 5.5rem); max-width: 550px; }
.quote em { color: var(--orange); font-style: normal; }
.colour-panel { min-height: 410px; padding: 42px; display: flex; align-items: end; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--yellow); box-shadow: var(--shadow); }
.colour-panel:after { content: ""; position: absolute; width: 260px; height: 260px; right: -60px; top: -60px; border-radius: 50%; background: var(--green); opacity: .8; }
.panel-note { position: relative; z-index: 1; max-width: 370px; font-size: 1.25rem; font-weight: 800; }
.split > div:first-child .panel-note { margin: 30px 0 0; }
.food-photo { min-height: 410px; position: relative; isolation: isolate; overflow: visible; border-radius: var(--radius); background: var(--yellow); box-shadow: 0 28px 55px rgba(37, 39, 53, .18), 0 8px 16px rgba(37, 39, 53, .1); transform: rotate(1.5deg); transition: transform .45s var(--ease-premium), box-shadow .45s var(--ease-premium); }
.food-photo::before { content: ""; position: absolute; inset: 12px -12px -12px 12px; z-index: -1; border-radius: var(--radius); background: var(--yellow); transform: rotate(-3deg); }
.food-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius); background: linear-gradient(120deg, rgba(255, 255, 255, .3), transparent 30% 70%, rgba(37, 39, 53, .12)); opacity: .55; transition: opacity .45s ease; }
.food-photo:hover { transform: rotate(0) translateY(-8px); box-shadow: 0 38px 70px rgba(37, 39, 53, .22), 0 10px 20px rgba(37, 39, 53, .12); }
.food-photo:hover::after { opacity: .2; }
.food-photo img { width: 100%; height: 100%; min-height: 410px; object-fit: cover; object-position: center; border-radius: var(--radius); transition: transform .7s var(--ease-premium); }
.food-photo:hover img { transform: scale(1.035); }
.programme { background: var(--soft); }
.programme--photo { position: relative; overflow: hidden; isolation: isolate; background: #34434b url("../images/bontekids.jpg") center 45% / cover no-repeat; color: white; }
.programme--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(20, 29, 35, .58); }
.programme--photo > .wrap { position: relative; z-index: 1; }
.programme--photo .eyebrow { color: var(--yellow); }
.programme--photo .muted { color: rgba(255, 255, 255, .88); }
.programme--photo .section-intro > p { max-width: 720px; padding: 18px 22px; background: rgba(8, 18, 24, .78); border-left: 4px solid var(--yellow); border-radius: 4px; color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.payfast-form { position: relative; width: 100%; max-width: none; margin-top: 24px; padding: 24px; border: 1px solid rgba(35, 89, 106, .16); border-radius: var(--radius); background: rgba(255, 255, 255, .92); box-shadow: 0 14px 34px rgba(35, 89, 106, .12); }
.payfast-form__intro { display: grid; gap: 4px; margin-bottom: 20px; padding-right: 240px; color: var(--ink); }
.payfast-form__intro strong { font-family: var(--display); font-size: 1.35rem; }
.payfast-form__intro span, .payfast-form__currency small { color: var(--muted); font-size: .9rem; }
.payfast-form__currency { position: absolute; top: 24px; right: 24px; display: flex; align-items: center; gap: 8px; }
.payfast-form label, .payfast-form legend { color: var(--ink); font-weight: 800; }
.payfast-form__currency label { font-size: .75rem; }
.payfast-form select { width: auto; padding: 8px 10px; border: 2px solid rgba(35, 89, 106, .25); border-radius: 8px; background: white; color: var(--ink); font: inherit; }
.payfast-form__currency small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.payfast-form__presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 9px; margin: 0 0 20px; padding: 0; border: 0; }
.payfast-form__presets legend { width: 100%; margin-bottom: 9px; }
.payfast-form__presets button { width: 100%; min-width: 82px; padding: 11px 14px; border: 2px solid rgba(35, 89, 106, .22); border-radius: 8px; background: white; color: var(--blue); cursor: pointer; font: inherit; font-weight: 800; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.payfast-form__presets button:hover, .payfast-form__presets button:focus-visible, .payfast-form__presets button.is-selected { border-color: var(--blue); background: var(--blue); color: white; transform: translateY(-2px); }
.payfast-form__custom { display: grid; gap: 7px; margin-bottom: 20px; }
.payfast-form__custom > div { display: flex; align-items: center; overflow: hidden; border: 2px solid rgba(35, 89, 106, .25); border-radius: 8px; background: white; }
.payfast-form__custom > div > span { padding-left: 14px; color: var(--blue); font-size: 1.1rem; font-weight: 900; }
.payfast-form__amount-note { display: block; margin-top: 8px; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.payfast-form input[type="number"] { width: 100%; min-width: 0; padding: 13px 14px 13px 8px; border: 0; outline: 0; font: inherit; }
.payfast-form__submit { width: 100%; justify-content: center; }
.donation-confirmation[hidden] { display: none; }
.donation-confirmation { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; }
.donation-confirmation__backdrop { position: absolute; inset: 0; background: rgba(20, 32, 38, .72); backdrop-filter: blur(5px); }
.donation-confirmation__panel { position: relative; width: min(100%, 540px); padding: 36px; border: 1px solid rgba(35, 89, 106, .2); border-radius: var(--radius); background: white; box-shadow: 0 24px 70px rgba(20, 32, 38, .3); }
.donation-confirmation__image { display: block; width: 100%; height: 150px; margin: -12px 0 24px; border-radius: calc(var(--radius) - 2px); object-fit: cover; object-position: center; }
.donation-confirmation__panel h2 { margin: 8px 40px 12px 0; color: var(--ink); }
.donation-confirmation__panel p { color: var(--muted); line-height: 1.6; }
.donation-confirmation__summary { font-size: 1.15rem; font-weight: 800; color: var(--ink) !important; }
.donation-confirmation__rate { margin-bottom: 28px; }
.donation-confirmation__close { position: absolute; top: 16px; right: 18px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(35, 89, 106, .08); color: var(--ink); cursor: pointer; font-size: 1.5rem; line-height: 1; }
.donation-confirmation__actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
@media (max-width: 520px) { .donation-confirmation__panel { padding: 28px 22px; }.donation-confirmation__image { height: 120px; margin-top: -4px; }.donation-confirmation__actions { display: grid; grid-template-columns: 1fr; }.donation-confirmation__actions .button { width: 100%; } }
.donation-column { display: grid; gap: 35px; }
.donation-column .bank-card { max-width: none; }
.donation-photo { position: sticky; top: 110px; height: min(720px, 70vh); margin: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.donation-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (max-width: 600px) { .payfast-form__intro { padding-right: 0; }.payfast-form__currency { position: static; margin-bottom: 20px; }.payfast-form__currency select { flex: 1; } }
@media (max-width: 800px) { .split--donation { grid-template-columns: 1fr; }.donation-photo { position: static; height: 360px; order: 2; }.donation-column { order: 1; } }
.program-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.program-card { min-height: 175px; padding: 25px; border-radius: 18px; display: flex; align-items: end; color: white; font-size: 1.5rem; font-weight: 900; box-shadow: var(--shadow); }
.program-card:nth-child(1) { background: var(--blue); }.program-card:nth-child(2) { background: var(--orange); }.program-card:nth-child(3) { background: var(--green); }.program-card:nth-child(4) { background: var(--purple); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 35px; position: relative; }
.step { position: relative; }.step:before { content: attr(data-step); display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 25px; border-radius: 50%; background: var(--pink); color: white; font-weight: 900; }.step:nth-child(2):before { background: var(--blue); }.step:nth-child(3):before { background: var(--yellow); color: var(--ink); }.step:nth-child(4):before { background: var(--green); }
.feature-band { background: var(--orange); color: var(--ink); }
.feature-band--photo { position: relative; overflow: hidden; isolation: isolate; background: #35444b url("../images/kidsroof.jpeg") center 50% / cover no-repeat; color: white; }
.feature-band--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(19, 29, 34, .57); }
.feature-band--photo > .wrap { position: relative; z-index: 1; }
.feature-band--photo .eyebrow { color: var(--yellow); }
.feature-band--photo .goal-card { color: var(--ink); }
.feature-band--photo .button.light { background: white; color: var(--ink); }
.feature-band .split { grid-template-columns: 1.2fr .8fr; }
.goal-card { padding: 35px; border-radius: var(--radius); background: white; box-shadow: var(--shadow); transform: rotate(2deg); }
.goal-card strong { display: block; font-size: 2rem; line-height: 1.1; }
.stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.story-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; transition: transform .25s, box-shadow .25s; }.story-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.story-visual { height: 180px; padding: 22px; display: flex; align-items: end; font-size: 1.4rem; font-weight: 900; }.visual-blue { background: var(--blue); color: white; }.visual-pink { background: var(--pink); color: white; }.visual-green { background: var(--green); color: white; }
.story-card[href="news/two-oceans-aquarium.html"] .story-visual { position: relative; isolation: isolate; background: #23596a url("../images/aquariumkids.jpg") center / cover no-repeat; }
.story-card[href="news/two-oceans-aquarium.html"] .story-visual::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 25%, rgba(12, 29, 35, .72)); }
.story-card[href="news/two-oceans-aquarium.html"] .story-visual::before { content: ""; position: absolute; z-index: 3; top: 12px; right: 12px; width: 58px; height: 58px; border: 3px solid rgba(255, 255, 255, .9); border-radius: 50%; background: white url("../images/2oceans.jpg") center / contain no-repeat; box-shadow: 0 5px 14px rgba(12, 29, 35, .3); }
.story-card[href="news/two-oceans-aquarium.html"] .story-visual { font-size: 0; }
.story-card[href="news/two-oceans-aquarium.html"] .story-visual > * { position: relative; z-index: 1; }
.story-card[href="news/roof-for-reading.html"] .story-visual { position: relative; isolation: isolate; background: #35444b url("../images/bontekids2.jpg") center / cover no-repeat; }
.story-card[href="news/roof-for-reading.html"] .story-visual::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 25%, rgba(12, 29, 35, .72)); }
.story-card[href="news/roof-for-reading.html"] .story-visual { font-size: 0; }
.story-card[href="news/roof-for-reading.html"] .story-visual .paper-stroke { display: none; }
.story-card[href="news/roof-for-reading.html"] .story-visual > * { position: relative; z-index: 1; }
.story-card[href="news/museum-came-to-bontekids.html"] .story-visual { background: linear-gradient(180deg, rgba(12, 29, 35, .08) 20%, rgba(12, 29, 35, .7) 100%), url("../images/iziko3.jpg") center / cover no-repeat; color: white; }
.story-card[href="news/museum-came-to-bontekids.html"] .story-visual .paper-sheet { display: none; }
.story-card[href="news/museum-came-to-bontekids.html"] .story-visual { font-size: 0; }
.story-body { padding: 24px; }.story-body h3 { font-size: 1.35rem; }.story-link { color: var(--pink); font-weight: 800; }
.donate-band { background: var(--purple); color: white; }.donate-band .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); align-items: center; gap: 55px; }.donate-band .wrap:after { content: ""; display: block; min-height: 280px; border-radius: 18px; background: url("../images/food1.jpg") center / cover no-repeat; }.donate-band img { display: none; }.donate-band h2 { max-width: 650px; font-size: clamp(2rem, 4vw, 3.8rem); }.donate-band .muted { color: #f1d9f6; }.support-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 30px 0; padding: 0; list-style: none; }.support-list li:before { content: "✓"; margin-right: 10px; color: var(--yellow); font-weight: 900; }
.donate-band__copy { min-width: 0; }.donate-band__photo { aspect-ratio: 2 / 3; height: auto; margin: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }.donate-band__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-hero { padding: 90px 0; background: linear-gradient(130deg, #eaf8ff, #fff5ed); }.page-hero h1 { margin: 12px 0; }
.page-hero > .wrap > .eyebrow { display: none; }
.page-hero--aquarium { position: relative; overflow: hidden; isolation: isolate; background: #23596a url("../images/aquariumkids.jpg") center 48% / cover no-repeat; color: white; }
.page-hero--aquarium::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12, 29, 35, .52); }
.page-hero--aquarium > .wrap { position: relative; z-index: 1; }
.page-hero--aquarium .eyebrow { color: var(--yellow); }
.page-hero--aquarium h1 { max-width: 820px; font-size: clamp(2.5rem, 5.5vw, 4.8rem); }
.page-hero--roof { position: relative; overflow: hidden; isolation: isolate; background: #35444b url("../images/bontekids2.jpg") center 48% / cover no-repeat; color: white; }
.page-hero--roof::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12, 29, 35, .52); }
.page-hero--roof > .wrap { position: relative; z-index: 1; }
.page-hero--roof .eyebrow { color: var(--yellow); }
.page-hero--roof h1 { max-width: 820px; font-size: clamp(2.5rem, 5.5vw, 4.8rem); }
.page-hero--museum { position: relative; overflow: hidden; isolation: isolate; background: #35444b url("../images/izikomain.jpg") center 48% / cover no-repeat; color: white; }
.page-hero--museum::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12, 29, 35, .52); }
.page-hero--museum > .wrap { position: relative; z-index: 1; }
.page-hero--museum .eyebrow { color: var(--yellow); }
.page-hero--museum h1 { max-width: 820px; font-size: clamp(2.5rem, 5.5vw, 4.8rem); }
.page-hero--donate { position: relative; overflow: hidden; isolation: isolate; background: #35444b url("../images/kidsfood1.png") center 48% / cover no-repeat; color: white; }
.page-hero--donate::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(19, 29, 34, .56); }
.page-hero--donate > .wrap { position: relative; z-index: 1; }
.page-hero--donate .eyebrow { color: var(--yellow); }
.page-hero--donate h1 { max-width: 820px; font-size: clamp(3rem, 6vw, 5.6rem); }
.page-hero--newsroom { position: relative; overflow: hidden; isolation: isolate; background: #35444b url("../images/shaylexfood2.jpeg") center 48% / cover no-repeat; color: white; }
.page-hero--newsroom::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(19, 29, 34, .56); }
.page-hero--newsroom > .wrap { position: relative; z-index: 1; }
.page-hero--bontekids { position: relative; overflow: hidden; isolation: isolate; background: #35444b url("../images/bontekids.jpg") center 48% / cover no-repeat; color: white; }
.page-hero--bontekids::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(19, 29, 34, .56); }
.page-hero--bontekids > .wrap { position: relative; z-index: 1; }
.content-narrow { max-width: 780px; }.content-narrow p, .content-narrow li { font-size: 1.08rem; }.content-narrow li { margin: 8px 0; }
.article-photo { width: min(44%, 300px); margin: 8px 0 24px 32px; float: right; position: relative; isolation: isolate; overflow: visible; border-radius: var(--radius); box-shadow: 0 28px 55px rgba(37, 39, 53, .18), 0 8px 16px rgba(37, 39, 53, .1); transform: rotate(-1deg); will-change: transform; }
.article-photo::before { content: ""; position: absolute; inset: 12px 12px -12px -12px; z-index: -1; border-radius: var(--radius); background: var(--turquoise); transform: rotate(2.5deg); }
.article-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.article-photo { cursor: zoom-in; }
.iziko-collage { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 132px 132px; gap: 16px; margin: 48px 0 52px; }
.iziko-collage__image { overflow: hidden; border: 7px solid white; border-radius: 18px; box-shadow: 0 22px 36px rgba(37, 39, 53, .2), 0 5px 10px rgba(37, 39, 53, .1); background: var(--turquoise); transition: transform .7s var(--ease-premium), box-shadow .7s var(--ease-premium); }
.iziko-collage__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-premium); }
.iziko-collage__image--one { grid-row: 1 / 3; transform: rotate(-2deg); }
.iziko-collage__image--two { transform: rotate(2deg) translateY(5px); }
.iziko-collage__image--three { transform: rotate(-1deg) translateY(-4px); }
.iziko-collage__image:hover { z-index: 2; transform: rotate(0) translateY(-6px) scale(1.025); box-shadow: 0 30px 46px rgba(37, 39, 53, .24); }
.iziko-collage__image:hover img { transform: scale(1.06); }
.iziko-partner-logo { width: min(100%, 250px); margin: 26px 0 36px; padding: 14px 18px; border-radius: 16px; background: white; box-shadow: 0 18px 34px rgba(37, 39, 53, .16), 0 4px 10px rgba(37, 39, 53, .08); transform: rotate(-1deg); }
.iziko-partner-logo img { width: 100%; height: auto; display: block; object-fit: contain; }
.iziko-collage__image { cursor: zoom-in; }
.image-lightbox { display: none; position: fixed; inset: 0; z-index: 30; place-items: center; padding: 5vw; background: rgba(19, 29, 34, .86); }
.image-lightbox.is-open { display: grid; animation: lightboxFade .25s ease both; }
.image-lightbox__image { max-width: min(100%, 1100px); max-height: 88vh; width: auto; height: auto; border: 8px solid white; border-radius: 14px; box-shadow: 0 28px 70px rgba(0, 0, 0, .4); object-fit: contain; animation: lightboxZoom .35s var(--ease-premium) both; }
.image-lightbox__close { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border: 2px solid white; border-radius: 50%; background: white; color: var(--ink); font-size: 1.8rem; line-height: 1; cursor: pointer; box-shadow: 0 8px 18px rgba(0, 0, 0, .2); }
.image-lightbox__close:focus-visible, .iziko-collage__image:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
body.lightbox-open { overflow: hidden; }
@keyframes lightboxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightboxZoom { from { transform: scale(.94); } to { transform: scale(1); } }
html.js-anim .iziko-collage { opacity: 0; transform: translate3d(28px, 0, 0); transition: opacity var(--motion-slow) var(--ease-premium), transform var(--motion-slow) var(--ease-premium); }
html.js-anim .iziko-collage.is-revealed { opacity: 1; transform: none; }
html.js-anim .iziko-collage.is-revealed .iziko-collage__image--one { transition-delay: 80ms; }
html.js-anim .iziko-collage.is-revealed .iziko-collage__image--two { transition-delay: 220ms; }
html.js-anim .iziko-collage.is-revealed .iziko-collage__image--three { transition-delay: 360ms; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.info-card { padding: 28px; border-radius: 18px; background: var(--soft); border-top: 7px solid var(--turquoise); }.info-card:nth-child(2) { border-color: var(--orange); }.info-card:nth-child(3) { border-color: var(--purple); }
.bank-card { padding: 35px; border-radius: var(--radius); background: var(--ink); color: white; max-width: 620px; }.bank-row { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid #484a58; }.bank-row small { color: #bfc2cd; }.copy-btn { border: 1px solid #767987; border-radius: 99px; background: none; color: white; cursor: pointer; padding: 5px 10px; }
.contact-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }.contact-card { padding: 22px 16px; min-height: 140px; border-radius: 18px; background: var(--yellow); }.contact-card:nth-child(2) { background: var(--turquoise); }.contact-card:nth-child(3) { background: var(--green); }.contact-card:nth-child(4) { background: var(--pink); color: white; }.contact-card:nth-child(5) { background: var(--purple); color: white; }
form { display: grid; gap: 14px; max-width: 700px; } label { font-weight: 800; } input, textarea, select { width: 100%; margin-top: 5px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: white; font: inherit; } textarea { min-height: 140px; }
.site-footer { padding: 75px 0 25px; background: #18384a; color: white; }.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }.footer-grid h2 { font-size: 2.5rem; }.footer-grid h3 { color: var(--yellow); font-size: 1rem; }.footer-links { display: grid; gap: 8px; color: #d8e4e8; }.copyright { margin-top: 60px; padding-top: 18px; border-top: 1px solid #416171; color: #b5c9cf; font-size: .85rem; }.footer-credit { margin: 10px 0 0; color: #b5c9cf; font-size: .85rem; text-align: center; }.footer-credit a { color: white; font-weight: 800; }
.reveal { opacity: 0; transform: translateY(24px); transition: .65s ease; }.reveal.visible { opacity: 1; transform: none; }
@media (max-width: 800px) { .wrap { width: min(100% - 28px, 600px); }.site-header { height: 70px; }.nav { min-height: 70px; padding-left: 190px; }.brand { top: -9px; width: 171px; height: 171px; }.brand img { width: 171px; height: 171px; }.menu-toggle { display: block; }.nav-links { display: none; position: absolute; top: 69px; left: 14px; right: 14px; padding: 18px; flex-direction: column; align-items: stretch; background: white; border-radius: 16px; box-shadow: var(--shadow); }.nav-links.open { display: flex; }.nav-links .button { text-align: center; }.hero { padding: 55px 0 60px; }.hero-grid, .split, .feature-band .split, .donate-band .wrap { grid-template-columns: 1fr; gap: 35px; }.hero-art { min-height: 300px; }.logo-orbit { width: 280px; }.impact-grid { grid-template-columns: repeat(2, 1fr); }.impact-item { padding: 4px 12px; }.program-cards, .steps, .stories-grid, .info-grid { grid-template-columns: 1fr 1fr; }.contact-grid { grid-template-columns: 1fr 1fr; }.footer-grid { grid-template-columns: 1fr 1fr; }.footer-grid h2 { font-size: 2rem; }.support-list { grid-template-columns: 1fr; } section { padding: 70px 0; } }
@media (max-width: 470px) { h1 { font-size: clamp(2.8rem, 15vw, 4.6rem); }.impact-grid, .program-cards, .steps, .stories-grid, .info-grid, .contact-grid, .footer-grid { grid-template-columns: 1fr; }.bank-row { align-items: flex-start; flex-wrap: wrap; }.hero-art:before { width: 280px; height: 280px; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } }
@media (max-width: 800px) { .article-photo { width: 48%; margin-left: 22px; } }
@media (max-width: 600px) { .iziko-collage { grid-template-columns: 1fr 1fr; grid-template-rows: 170px 110px; gap: 10px; } .iziko-collage__image--one { grid-column: 1 / 3; grid-row: auto; } }
@media (max-width: 470px) { .article-photo { width: 100%; float: none; margin: 0 0 30px; } }

.donate-band .wrap:after { display: none; }
.donate-band__photo { background: #70408f url("../images/food1.jpg") center / cover no-repeat; }
@media (max-width: 800px) { .donate-band__photo { display: none; } }
body:has(nav a.active[href="volunteer.html"]) .page-hero { position: relative; overflow: hidden; isolation: isolate; background: #23596a url("../images/aquarium1.jpg") center 48% / cover no-repeat; color: white; }
body:has(nav a.active[href="volunteer.html"]) .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12, 29, 35, .54); }
body:has(nav a.active[href="volunteer.html"]) .page-hero > .wrap { position: relative; z-index: 1; }
body:has(nav a.active[href="volunteer.html"]) .page-hero .eyebrow { color: var(--yellow); }
body:has(nav a.active[href="volunteer.html"]) .page-hero > .wrap { text-align: right; }
body:has(nav a.active[href="volunteer.html"]) .page-hero .hero-copy { margin-left: auto; }