/* Rescue Kitties of Hawaiʻi. Blues from the logo's ocean and lettering lead; the sand of its beach is an accent used in a few places. */
:root {
  --navy: #0c3247;
  --ocean-deep: #0a5a80;
  --ocean: #0f78a8;
  --sky: #38a3d1;
  --mist: #9fd8f5;
  --foam: #f1f7fb;        /* tinted section background */
  --sand: #f8f2e6;        /* accent: one section, the appeal box, photo backdrops */
  --sand-deep: #efe4cf;
  --sand-ink: #8a6a2c;
  --line: #dce8f0;
  --ink: #12232d;
  --muted: #536977;
  --white: #fff;            /* text and shapes on dark blocks; stays white in both themes */
  --page: #fff;             /* the page itself */
  --surface: #fff;          /* cards, inputs and other raised surfaces */
  --link: #0a5a80;
  --field-line: #c3d5e1;
  --glass: rgba(255, 255, 255, 0.5);
  --glass-strong: rgba(255, 255, 255, 0.66);
  --glass-line: rgba(255, 255, 255, 0.55);
  --error: #c9335a;
  --brand: linear-gradient(150deg, var(--navy) 0%, #0f6f9c 58%, #2f9fd0 100%);
  --brand-soft: linear-gradient(135deg, #eef7fc 0%, #d9edf8 55%, #c4e2f4 100%);
  --radius: 24px;
  --shadow: 0 12px 34px rgba(12, 50, 71, 0.1);
  --shadow-lift: 0 22px 48px rgba(12, 50, 71, 0.18);
  --display: 'Urbanist', 'Public Sans', system-ui, sans-serif;
  --body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body { margin: 0; font-family: var(--body); font-size: 1.0625rem; line-height: 1.7; color: var(--ink); background: var(--page); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--ocean); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.12; margin: 0 0 0.5em; text-wrap: balance; letter-spacing: -0.015em; }
h3 { font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--ocean); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 780px; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--navy); color: var(--white); padding: 0.6rem 1rem; z-index: 100; }
.skip:focus { left: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--link); margin: 0 0 0.7rem; }
.eyebrow::before { content: ''; width: 28px; height: 3px; border-radius: 3px; background: var(--sky); }
.eyebrow.center { display: flex; justify-content: center; }
.eyebrow.center::after { content: ''; width: 28px; height: 3px; border-radius: 3px; background: var(--sky); }
.lede { font-size: 1.22rem; line-height: 1.55; }
.section-intro { max-width: 44rem; margin: 0 auto 0.5rem; color: var(--muted); font-size: 1.1rem; }

/* Sections fade up as they scroll into view (only when the script has switched this on). */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.seen { opacity: 1; transform: none; }

/* ---- Buttons ---- */
.btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; padding: 0.72rem 1.5rem; border-radius: 999px;
  border: 2px solid transparent; font: 700 1rem/1.2 var(--body); text-decoration: none; cursor: pointer; text-align: center; transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20, 36, 44, 0.18); }
.btn small { font-weight: 600; font-size: 0.75rem; opacity: 0.92; }
.btn-large { padding: 0.95rem 2rem; font-size: 1.1rem; }
.btn-primary, .btn-donate { background: var(--navy); color: var(--white); box-shadow: 0 6px 16px rgba(12, 50, 71, 0.28); }
.btn-primary:hover, .btn-donate:hover { background: var(--ocean-deep); color: var(--white); }
.btn-secondary { background: var(--ocean); color: var(--white); }
.btn-secondary:hover { background: var(--ocean-deep); color: var(--white); }
.btn-light { background: var(--white); color: var(--navy); }
.btn-light:hover { color: var(--navy); }
.btn-ghost { background: rgba(255, 255, 255, 0.7); color: var(--navy); border-color: var(--navy); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: var(--navy); color: var(--white); }
.btn-outline { background: var(--surface); color: var(--link); border-color: var(--ocean); }
.btn-outline:hover { background: var(--ocean); color: var(--white); }
.btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.6rem 0 0; }
.actions.center { justify-content: center; }
.actions + p { margin-top: 1.5rem; }

/* ---- Announcement and header ---- */
.announce { display: block; background: var(--navy); color: var(--white); text-align: center; padding: 0.55rem 1rem; font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.announce span { color: var(--mist); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.announce:hover { color: var(--white); background: #0a2838; }
.site-header { position: sticky; top: 12px; z-index: 50; width: min(1200px, 100% - 1.5rem); margin: 12px auto -86px; border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid var(--glass-line); box-shadow: 0 8px 30px rgba(12, 50, 71, 0.1); transition: background 0.25s, box-shadow 0.25s; }
.site-header.scrolled { background: var(--glass-strong); box-shadow: 0 12px 36px rgba(12, 50, 71, 0.2); }
.header-row { display: flex; align-items: center; gap: 1rem; min-height: 72px; width: auto; padding: 0 0.75rem 0 1.5rem; }
.logo img { height: 48px; width: auto; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 0.15rem; }
.site-nav a:not(.btn) { position: relative; padding: 0.5rem 0.75rem; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.98rem; }
.site-nav a:not(.btn)::after { content: ''; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.2rem; height: 3px; border-radius: 3px; background: var(--sky); transform: scaleX(0); transition: transform 0.2s; }
.site-nav a:not(.btn):hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); }
.site-nav .btn { margin-left: 0.6rem; }
.menu-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--foam); cursor: pointer; }
.bars, .bars::before, .bars::after { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--ink); margin: 0 auto; position: relative; transition: transform 0.2s; }
.bars::before, .bars::after { content: ''; position: absolute; left: 0; }
.bars::before { top: -7px; }
.bars::after { top: 7px; }
.menu-toggle[aria-expanded='true'] .bars { background: transparent; }
.menu-toggle[aria-expanded='true'] .bars::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  .menu-toggle { display: block; }
  .site-header { margin-bottom: -76px; }
  .header-row { min-height: 62px; padding: 0 0.5rem 0 1.1rem; }
  .logo img { height: 42px; }
  .site-nav { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 1.25rem 1.25rem;
    background: var(--surface); backdrop-filter: blur(18px); border-radius: 26px; border: 1px solid var(--line); box-shadow: var(--shadow-lift); }
  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { padding: 0.9rem 0.25rem; border-bottom: 1px solid var(--line); font-size: 1.08rem; }
  .site-nav a:not(.btn)::after { display: none; }
  .site-nav a[aria-current] { color: var(--ocean); }
  .site-nav .btn { margin: 1rem 0 0; }
}

/* ---- Home hero: words on the left; on the right, the faded sunset, palm and cats from the table banner,
   standing on a beach that runs the full width. Everything in the scene is sized from --s (the sunset's width)
   and --b (how high the beach sits, clear of the quick links that overlap the bottom of the hero). In the
   palm shape the sea line is 0.197 of its width up from the bottom edge and the sand 0.096; the sunset picture
   stops at the sea line, so it sits on the sea. The palm and cats are a cut-out filled with one solid colour,
   so they are the same tone over the sky, sea and sand in both themes. ---- */
.hero { --s: clamp(440px, 54vw, 820px); --b: calc(clamp(3rem, 6vw, 4.5rem) + 14px); --sea-top: calc(var(--b) + var(--s) * 0.197);
  position: relative; overflow: hidden; background: var(--page);
  padding: calc(clamp(2.5rem, 5vw, 4.5rem) + 5.5rem) 0 calc(var(--sea-top) + clamp(2rem, 4vw, 3.5rem)); }
.hero-scene { position: absolute; inset: 0; pointer-events: none; }
.hero-scene::before { content: ''; position: absolute; left: 0; right: 0; bottom: var(--sea-top); height: calc(var(--s) * 0.22); background: linear-gradient(rgba(242, 120, 133, 0), rgba(239, 103, 136, 0.16)); }
.hero-sea { position: absolute; left: 0; right: 0; bottom: 0; height: var(--sea-top);
  background: radial-gradient(ellipse 50% 150% at 72% 0, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 80%), linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.28)), linear-gradient(#0084bf, #0e6393); }
.hero-sand { position: absolute; left: 0; bottom: 0; width: 100%; height: calc((var(--b) + var(--s) * 0.096) * 1.17); display: block; fill: var(--sand); stroke: none; }
.hero-sun, .hero-palm { position: absolute; right: max(-4vw, calc(50% - 700px)); width: var(--s); height: auto; }
.hero-sun { bottom: calc(var(--sea-top) - 2px); opacity: 0.42; }
.hero-palm { bottom: var(--b); aspect-ratio: 1100 / 1045; background: #595c5f;
  -webkit-mask: url(/img/hero-palm.webp) center / 100% 100% no-repeat; mask: url(/img/hero-palm.webp) center / 100% 100% no-repeat; }
.hero-text { position: relative; z-index: 1; }
.hero-text > * { max-width: 36rem; }
.hero h1 { font-size: clamp(2.4rem, 4.8vw, 4.1rem); }
.hero h1 em { font-style: normal; color: var(--ocean); }
.hero h1, .hero .lede { text-shadow: 0 0 24px var(--page), 0 0 10px var(--page); }
@media (max-width: 860px) {
  .hero { --s: min(94vw, 480px); padding-top: 6.5rem; padding-bottom: calc(var(--b) + var(--s) * 0.95 + 1.5rem); }
  .hero-sun, .hero-palm { right: 50%; transform: translateX(50%); }
  .hero-sea { background: radial-gradient(ellipse 75% 150% at 50% 0, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 80%), linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.28)), linear-gradient(#0084bf, #0e6393); }
}

/* Four doors into the site, overlapping the bottom of the hero */
/* The hero's beach carries on behind the quick links and into the Molokaʻi section below */
.quick { position: relative; z-index: 3; margin-top: clamp(-4.5rem, -6vw, -3rem); background: var(--sand); }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.quick-card { display: flex; align-items: center; gap: 0.9rem; background: var(--surface); border-radius: 18px; padding: 1.1rem 1.2rem; box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); transition: transform 0.2s, box-shadow 0.2s; }
.quick-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); color: var(--ink); }
.quick-card strong { display: block; font-family: var(--display); font-size: 1.2rem; line-height: 1.2; }
.quick-card small { color: var(--muted); font-size: 0.9rem; line-height: 1.3; display: block; }
.quick-card.accent { background: var(--navy); border-color: var(--navy); color: var(--white); }
.quick-card.accent small { color: #cfe6f2; }
.quick-card.accent:hover { color: var(--white); }
.icon { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--brand-soft); color: var(--link); }
.icon svg { width: 26px; height: 26px; }
.quick-card.accent .icon { background: rgba(255, 255, 255, 0.18); color: var(--white); }
@media (max-width: 900px) { .quick-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .quick-grid { grid-template-columns: 1fr; } }

/* ---- Inner page heroes ---- */
.page-hero { position: relative; overflow: hidden; background: var(--brand); padding: calc(clamp(3rem, 7vw, 5.5rem) + 5.5rem) 0 clamp(5rem, 10vw, 7.5rem); }
.page-hero::before { content: ''; position: absolute; right: -6%; top: -60%; width: min(46vw, 560px); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.09); }
.page-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(40px, 6vw, 84px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%2338a3d1' d='M0 30c240 30 480 30 720 8s480-30 720 0v62H0z'/%3E%3Cpath fill='%23fff' d='M0 70c200-26 420-30 720-6s520 22 720-4v40H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--mist); }
.page-hero .eyebrow::before { background: var(--mist); }
.page-hero h1 { margin: 0; max-width: 18ch; color: var(--white); }

/* ---- Sections ---- */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section.tint { background: var(--foam); }
.section.sand { background: var(--sand); }
.band { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split.top { align-items: start; }
.split.reverse > :first-child { order: 2; }
.split-photo { position: relative; }
.split-photo::before { content: ''; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem; border-radius: var(--radius); background: var(--sand-deep); z-index: 0; }
.split.reverse .split-photo::before { inset: 1.1rem 1.1rem -1.1rem -1.1rem; }
.split-photo img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 120px var(--radius) var(--radius) var(--radius); box-shadow: var(--shadow); }
.split.reverse .split-photo img { border-radius: var(--radius) 120px var(--radius) var(--radius); }
.split-photo::before { border-radius: 120px var(--radius) var(--radius) var(--radius); }
.split.reverse .split-photo::before { border-radius: var(--radius) 120px var(--radius) var(--radius); }
.collage { position: relative; padding: 0 0 12% 0; }
.collage .main { width: 88%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.collage .inset { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 6px solid var(--page); box-shadow: var(--shadow-lift); }
@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }
  .split-photo::before { display: none; }
}

.cards { display: grid; gap: 1.4rem; margin: 2.5rem 0 2rem; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cards.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards.three { grid-template-columns: 1fr; } }
.card { background: var(--surface); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow); border: 1px solid var(--line); transition: transform 0.2s, box-shadow 0.2s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card .icon { margin-bottom: 1.1rem; }
/* The card icons step through the site's blues: pale, ocean, navy. */
.card:nth-child(3n + 2) .icon { background: var(--ocean); color: var(--white); }
.card:nth-child(3n) .icon { background: var(--navy); color: var(--mist); }
.card p:last-child { margin-bottom: 0; }
.tint .card { border-color: transparent; }
.tint .form-section, .tint .partners li { background: var(--surface); }

/* Photo cards: text sits on the picture */
.photo-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; color: var(--white); text-decoration: none; box-shadow: var(--shadow); aspect-ratio: 4 / 5; background: var(--navy); }
.photo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.photo-card:hover img { transform: scale(1.06); }
.photo-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 50, 71, 0) 25%, rgba(12, 50, 71, 0.55) 55%, rgba(12, 50, 71, 0.94) 100%); }
.photo-card-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.6rem; display: flex; flex-direction: column; gap: 0.35rem; }
.photo-card strong { font-family: var(--display); font-size: 1.8rem; line-height: 1.1; }
.photo-card:hover { color: var(--white); }
.photo-card .more { font-weight: 700; color: var(--mist); margin-top: 0.4rem; }
.photo-card .more::after { content: ' →'; }

.places { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.5rem; }
.place { background: var(--surface); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: var(--shadow); border-top: 6px solid var(--ocean); }
.place:nth-child(2) { border-top-color: var(--sky); }
.places.one { grid-template-columns: minmax(0, 46rem); justify-content: center; }
.places.one .place { font-size: 1.08rem; }
.place h3 { font-size: 1.6rem; display: flex; align-items: center; gap: 0.6rem; }
.place h3 small { font: 700 0.72rem/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); background: var(--ocean); padding: 0.35rem 0.6rem; border-radius: 999px; }
.place p:last-child { margin: 0; }
@media (max-width: 760px) { .places { grid-template-columns: 1fr; } }

.appeal { background: var(--sand); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: clamp(1.75rem, 5vw, 3rem); box-shadow: none; text-align: center; }
.donate-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.6rem; }
.give { background: var(--foam); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); }
.give .donate-buttons { justify-content: flex-start; margin: 0 0 2rem; }
.give .donate-buttons .btn { flex: 1 1 180px; }

.notice { background: var(--foam); border-left: 6px solid var(--ocean); border-radius: 14px; padding: 1.3rem 1.6rem; margin: 0 0 2rem; }
.notice h2 { font-size: 1.3rem; }
.notice p:last-child { margin: 0; }

.partner { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.partner img { width: 190px; border-radius: 50%; box-shadow: var(--shadow); transition: transform 0.3s; }
.partner a:hover img { transform: rotate(-4deg) scale(1.04); }
@media (max-width: 640px) { .partner { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

.letter { margin-top: 2.6rem; background: var(--sand); border-radius: var(--radius); padding: clamp(1.75rem, 5vw, 3rem); position: relative; border: 1px solid var(--line); font-size: 1.08rem; }
.letter::before { content: '“'; position: absolute; top: -0.32em; left: 0.3em; font: 700 7rem/1 var(--display); color: var(--sky); }
.signed { font-family: var(--display); font-weight: 600; font-size: 1.2rem; margin: 1.5rem 0 0; }
.signed::before { content: '— '; }

.gallery { columns: 4 230px; column-gap: 1rem; }
.gallery img { width: 100%; margin: 0 0 1rem; border-radius: 18px; break-inside: avoid; box-shadow: 0 4px 14px rgba(20, 36, 44, 0.12); cursor: zoom-in; transition: transform 0.25s, box-shadow 0.25s; }
.gallery img:hover { transform: scale(1.02); box-shadow: var(--shadow-lift); }
.gallery + p { margin-top: 2rem; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8, 24, 33, 0.92); display: grid; place-items: center; padding: 1.5rem; cursor: zoom-out; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; }
.lightbox img { max-width: min(1100px, 100%); max-height: 88vh; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }

.partners { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.75rem; }
.partners li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem; background: var(--foam); border-radius: 14px; border: 1px solid var(--line); }
.partners a { font-weight: 700; text-decoration: none; }
.partners a:hover { text-decoration: underline; }
.partners span { color: var(--muted); white-space: nowrap; font-size: 0.92rem; }

.ticks { list-style: none; padding: 0; }
.ticks li { padding-left: 1.9rem; position: relative; margin-bottom: 0.55rem; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px #d9edf8; }

.stories { display: grid; gap: 1.6rem; }
.story { display: grid; grid-template-columns: 320px 1fr; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); transition: transform 0.2s, box-shadow 0.2s; }
.story:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.story img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.story-text { padding: clamp(1.4rem, 3.5vw, 2.4rem); }
.story-text:only-child { grid-column: 1 / -1; border-left: 8px solid var(--sky); }
.story h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.source { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--link); margin: 0 0 0.5rem; }
@media (max-width: 760px) { .story { grid-template-columns: 1fr; } .story img { aspect-ratio: 16 / 10; min-height: 0; } }

/* ---- Forms ---- */
.apply { margin-top: 2rem; }
.form-section { background: var(--foam); border-radius: var(--radius); padding: clamp(1.4rem, 4vw, 2.2rem); margin: 0 0 1.5rem; border: 1px solid var(--line); }
.form-section h2, .contact-form h2 { font-size: 1.45rem; margin-bottom: 1.1rem; }
.contact-form { background: var(--foam); border-radius: var(--radius); padding: clamp(1.4rem, 4vw, 2.2rem); margin: 0; border: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.field { display: block; min-width: 0; margin: 0; padding: 0; border: 0; }
.field.wide { grid-column: 1 / -1; }
.field .label, .field legend { display: block; font-weight: 700; margin: 0 0 0.35rem; padding: 0; line-height: 1.4; }
.req { color: var(--error); }
.field input[type='text'], .field input[type='email'], .field input[type='tel'], .field input[type='date'], .field input[type='number'], .field textarea {
  width: 100%; padding: 0.75rem 0.9rem; border: 1.5px solid var(--field-line); border-radius: 12px; background: var(--surface); font: inherit; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; }
.field textarea { resize: vertical; min-height: 5.5rem; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ocean); box-shadow: 0 0 0 4px rgba(15, 120, 168, 0.18); }
.field small { display: block; color: var(--muted); margin-top: 0.35rem; }
.options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.option { position: relative; cursor: pointer; }
.option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.option span { display: block; padding: 0.5rem 1.05rem; border: 1.5px solid var(--field-line); border-radius: 999px; background: var(--surface); font-weight: 600; transition: background 0.15s, border-color 0.15s; }
.option:hover span { border-color: var(--ocean); }
.option input:checked + span { background: var(--ocean); border-color: var(--ocean); color: var(--white); }
.option input:focus-visible + span { outline: 3px solid var(--ocean); outline-offset: 2px; }
.agree { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; background: var(--surface); border-radius: 12px; padding: 0.9rem 1rem; cursor: pointer; border: 1px solid var(--line); }
.agree input { width: 1.3rem; height: 1.3rem; margin: 0.15rem 0 0; accent-color: var(--ocean); }
.signature input { font-family: var(--display); font-size: 1.3rem; }
.field.invalid input:not([type='checkbox']):not([type='radio']), .field.invalid textarea { border-color: var(--error); }
.field.invalid legend, .field.invalid .label, .agree.invalid span { color: var(--error); }
.agree.invalid { outline: 2px solid var(--error); }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.form-error { background: #fde8ec; border-left: 6px solid var(--error); border-radius: 10px; padding: 0.9rem 1.1rem; font-weight: 700; }
.form-note { color: var(--muted); font-size: 0.95rem; }
.thanks { background: var(--foam); border-radius: var(--radius); padding: clamp(1.5rem, 5vw, 3rem); text-align: center; margin-top: 2rem; }
.thanks img { width: 110px; margin: 0 auto 1rem; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

/* ---- Closing call to action and footer ---- */
.cta { position: relative; background: var(--brand); color: var(--white); text-align: center; padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem); overflow: hidden; }
.cta .wave-top { position: absolute; top: -1px; left: 0; width: 100%; height: clamp(30px, 5vw, 70px); fill: var(--page); stroke: none; display: block; }
.tint + .cta .wave-top { fill: var(--foam); }
.cta::after { content: ''; position: absolute; left: 50%; bottom: -55%; width: min(80vw, 760px); aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.07); }
.cta .wrap { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); max-width: 20ch; margin-inline: auto; }
.cta p { max-width: 38rem; margin-inline: auto; color: #e3f2f9; font-size: 1.12rem; }
.cta .btn-primary { background: var(--white); color: var(--navy); }
.cta .btn-primary:hover { background: var(--mist); color: var(--navy); }
.cta .btn-outline { background: transparent; color: var(--white); border-color: var(--white); }
.cta .btn-outline:hover { background: var(--white); color: var(--ocean-deep); }

.site-footer { background: var(--navy); color: #d9e8ef; padding: clamp(2.5rem, 6vw, 4rem) 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.footer-icon { width: 92px; height: 92px; margin-bottom: 0.9rem; }
.site-footer h2 { font-size: 1.15rem; color: var(--white); }
.site-footer a { color: var(--white); text-decoration-color: rgba(255, 255, 255, 0.4); }
.site-footer a:hover { color: var(--mist); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.4rem; }
.social { display: flex; gap: 0.6rem; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); transition: background 0.2s, transform 0.2s; }
.social a:hover { background: var(--ocean); color: var(--white); transform: translateY(-2px); }
.social svg { width: 22px; height: 22px; }
/* The same icons on a light background (Contact page) */
.social.on-light { margin: 1.4rem 0 1.6rem; gap: 0.75rem; }
.social.on-light a { width: 52px; height: 52px; background: var(--brand-soft); color: var(--link); }
.social.on-light a:hover { background: var(--ocean); color: var(--white); }
.social.on-light svg { width: 26px; height: 26px; }
.copyright { margin: 2.5rem auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.9rem; color: #a9c2ce; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover, .story:hover, .quick-card:hover, .photo-card:hover img { transform: none; }
}

/* Long-form text (privacy policy) */
.announce-text { font-weight: inherit; }
.policy h2 { font-size: 1.45rem; margin: 2.4rem 0 0.6rem; }
.policy ul { padding-left: 1.3rem; margin: 0.6rem 0 1rem; }
.policy li { margin-bottom: 0.5rem; }
.policy-date { color: var(--muted); font-size: 0.95rem; }

/* ---- Dark theme: chosen with the button in the header; the site is light otherwise ---- */
:root[data-theme=dark] {
  color-scheme: dark;
  --page: #0a1820;
  --surface: #122630;
  --foam: #0e2029;
  --sand: #1f2a30;
  --sand-deep: #3a3527;
  --sand-ink: #e6cd97;
  --line: #213a47;
  --field-line: #35566a;
  --ink: #e8f1f6;
  --muted: #a3bac6;
  --link: #8fd2f2;
  --brand-soft: linear-gradient(135deg, #0d2531 0%, #10384b 55%, #124a63 100%);
  --glass: rgba(10, 28, 37, 0.52);
  --glass-strong: rgba(10, 28, 37, 0.7);
  --glass-line: rgba(255, 255, 255, 0.12);
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 22px 48px rgba(0, 0, 0, 0.5);
}
[data-theme=dark] a:hover { color: var(--mist); }
[data-theme=dark] .btn-primary, [data-theme=dark] .btn-donate { background: var(--ocean); }
[data-theme=dark] .btn-primary:hover, [data-theme=dark] .btn-donate:hover { background: var(--sky); }
[data-theme=dark] .cta .btn-primary { background: var(--white); }
[data-theme=dark] .btn-ghost { background: rgba(255, 255, 255, 0.08); color: var(--white); border-color: var(--mist); }
[data-theme=dark] .btn-ghost:hover { background: var(--white); color: var(--navy); }
[data-theme=dark] .hero-sun { opacity: 0.32; }
[data-theme=dark] .hero-palm { background: #8f9295; }
[data-theme=dark] .hero-sea { background: radial-gradient(ellipse 50% 150% at 72% 0, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 80%), linear-gradient(#0b5d86, #08405d); }
[data-theme=dark] .hero-scene::before { opacity: 0.5; }
[data-theme=dark] .hero h1 em { color: var(--sky); }
/* The logo's lettering is drawn for a light background, so it sits on a light pill. */
[data-theme=dark] .logo { background: rgba(255, 255, 255, 0.92); border-radius: 999px; padding: 4px 14px; }
[data-theme=dark] .page-hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%2338a3d1' d='M0 30c240 30 480 30 720 8s480-30 720 0v62H0z'/%3E%3Cpath fill='%230a1820' d='M0 70c200-26 420-30 720-6s520 22 720-4v40H0z'/%3E%3C/svg%3E"); }
[data-theme=dark] .quick-card.accent, [data-theme=dark] .site-footer, [data-theme=dark] .announce { background: #0c2a3a; }
[data-theme=dark] .quick-card.accent { border-color: #1c4a61; }
[data-theme=dark] .card:nth-child(3n) .icon { background: #1a5674; }
[data-theme=dark] .ticks li::before { box-shadow: 0 0 0 4px #12384a; }
[data-theme=dark] .form-error { background: #3d1622; }
[data-theme=dark] .gallery img, [data-theme=dark] .split-photo img, [data-theme=dark] .story img { filter: brightness(0.94); }
[data-theme=dark] .option input:checked + span { background: var(--ocean); border-color: var(--sky); }

/* The light / dark button in the header */
.theme-toggle { order: 3; margin-left: 0.25rem; width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.theme-toggle:hover { background: var(--foam); }
.theme-toggle svg { width: 21px; height: 21px; }
.theme-toggle .sun, [data-theme=dark] .theme-toggle .moon { display: none; }
[data-theme=dark] .theme-toggle .sun { display: block; }
@media (max-width: 980px) { .theme-toggle { order: 0; margin-left: auto; } .theme-toggle + .menu-toggle { margin-left: 0; } }

/* Two photos in one spot: a main picture with a smaller one overlapping its lower corner */
.split-photo.pair { margin-bottom: 2.4rem; }
.split-photo.pair .inset { position: absolute; z-index: 1; width: 46%; right: -1.1rem; bottom: -2.4rem; border: 5px solid var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lift); }
.split.reverse .split-photo.pair .inset { border-radius: var(--radius); }
@media (max-width: 900px) { .split-photo.pair .inset { right: 0.6rem; } }

/* Molokaʻi petition callout on the home page */
.molokai { padding-top: clamp(4.5rem, 9vw, 7rem); }
/* Molokaʻi: a centred heading and introduction, then one centred petition card with a small kitten photo down its left side */
.molokai-intro { margin-bottom: clamp(2rem, 4vw, 3rem); }
.molokai-intro .section-intro { max-width: 48rem; }
.petition { background: var(--surface); border-radius: var(--radius); padding: clamp(1.6rem, 3.5vw, 2.4rem); box-shadow: var(--shadow-lift); border-top: 6px solid var(--ocean); }
.petition h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin: 0 0 0.7rem; }
.petition .btn { width: 100%; justify-content: center; }
.petition-note { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--muted); text-align: center; }
.molokai .petition { max-width: 860px; margin: 0 auto; padding: 0; overflow: hidden; display: grid; grid-template-columns: 34% 1fr; }
.petition-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.petition-body { padding: clamp(1.6rem, 3.5vw, 2.4rem); }
@media (max-width: 640px) {
  .molokai .petition { grid-template-columns: 1fr; }
  .petition-photo { height: auto; aspect-ratio: 16 / 9; }
}

/* A taller photo beside text, for portrait pictures */
.split-photo.portrait { width: min(100%, 440px); justify-self: center; }
.split-photo.portrait img { aspect-ratio: 4 / 5; }

/* Monthly giving: a line under the hero buttons, a band on the home page, and a note on the Donate page */
.hero-monthly { margin: 1.1rem 0 0; }
.hero-monthly a { display: inline-block; background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 1rem; font-size: 0.95rem; color: var(--ink); text-decoration: none; }
.hero-monthly a:hover { border-color: var(--ocean); color: var(--link); }
.monthly { position: relative; background: var(--brand); color: var(--white); overflow: hidden; }
.monthly::after { content: ''; position: absolute; right: -8%; top: -40%; width: min(50vw, 520px); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.07); }
.monthly-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.monthly .eyebrow { color: var(--mist); }
.monthly h2 { color: var(--white); font-size: clamp(2rem, 4.6vw, 3.1rem); margin: 0 0 0.8rem; }
.monthly .amount { color: var(--mist); white-space: nowrap; }
.monthly p { color: #e3f2f9; font-size: 1.1rem; margin: 0; }
.monthly-action { display: grid; gap: 0.7rem; justify-items: center; text-align: center; }
.monthly-action .btn { width: 100%; max-width: 320px; font-size: 1.25rem; }
.monthly .btn-primary, [data-theme=dark] .monthly .btn-primary { background: var(--white); color: var(--navy); }
.monthly .btn-primary:hover, [data-theme=dark] .monthly .btn-primary:hover { background: var(--mist); color: var(--navy); }
.monthly-action small { color: #cfe6f2; font-size: 0.88rem; max-width: 30ch; }
@media (max-width: 760px) { .monthly-grid { grid-template-columns: 1fr; } }
.give-monthly { background: var(--sand); border-radius: 14px; padding: 0.8rem 1rem; }

/* Foster portal page */
.login-card { background: var(--surface); border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 2.6rem); box-shadow: var(--shadow-lift); border-top: 6px solid var(--ocean); text-align: center; }
.login-card img { width: 72px; height: 72px; margin: 0 auto 0.8rem; }
.login-card .btn { width: 100%; max-width: 320px; }
.login-help { font-size: 0.92rem; color: var(--muted); margin-bottom: 0; }