/* ==========================================================================
   Africa Coalition for Social Impact (ACSI)
   Design system + component styles (vanilla CSS)
   ========================================================================== */

/* ---- Design tokens ---- */
:root {
  /* Brand palette — picked directly from the real ACSI logo's colors
     (extracted and verified for WCAG AA contrast, both as white text on
     these backgrounds and as colored text on the site's light background).
     --gold is a new accent pulled from the logo too, for small decorative
     touches where legibility isn't a concern (it doesn't pass contrast on
     its own, so it's not used for text or anything carrying white text). */
  --red: #b52125;          /* warm red — headings / CTAs */
  --red-dark: #8d1a1d;
  --green: #537c39;        /* green — section headers / banners */
  --green-dark: #41612c;
  --orange: #a2631c;       /* orange — numbers / accents */
  --orange-dark: #7e4d16;
  --gold: #e8b04d;         /* decorative accent only — not contrast-safe for text */

  /* Neutrals */
  --ink: #1f2223;          /* near-black text */
  --muted: #5c6466;        /* secondary text */
  --line: #e6e2da;         /* hairlines / borders */
  --surface: #ffffff;      /* cards */
  --bg: #faf7f2;           /* warm off-white page background */
  --bg-alt: #f2ede4;       /* alternating band */

  /* Type */
  --font-head: "Poppins", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Layout */
  --maxw: 1120px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(31, 34, 35, .06), 0 8px 24px rgba(31, 34, 35, .06);
  --shadow-lg: 0 18px 48px rgba(31, 34, 35, .14);

  --header-h: 74px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; color: var(--ink); }

/* ---- Utilities ---- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.section { padding: 52px 0; }
.section--alt { background: var(--bg-alt); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--orange); display: inline-block;
}

.section-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-top: 12px; text-wrap: balance; }
.section-lead { color: var(--muted); font-size: 1.05rem; max-width: 62ch; margin-top: 14px; }
.section-head--center { max-width: 720px; margin-inline: auto; }
.section-head--center .section-lead { margin-inline: auto; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  padding: 13px 24px; border-radius: 999px; transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(198,40,40,.28); }
.btn-primary:hover { background: var(--red-dark); box-shadow: 0 10px 24px rgba(198,40,40,.34); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: #fff; color: var(--red); }
.btn-light:hover { background: #fff2ee; }
.btn .ico { width: 18px; height: 18px; }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(250,247,242,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 42px; width: auto; }
.brand-fallback {
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; line-height: 1.05;
  color: var(--ink); letter-spacing: -.01em;
}
.brand-fallback span { color: var(--red); }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  font-family: var(--font-head); font-weight: 500; font-size: .88rem;
  padding: 9px 10px; border-radius: 999px; color: var(--muted);
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.nav-links a:hover { color: var(--ink); background: rgba(46,125,50,.08); }
.nav-links a.active { color: var(--green-dark); background: rgba(46,125,50,.12); }
.nav-donate-mobile { display: none; }

.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 10px;
  align-items: center; justify-content: center; color: var(--ink);
}
.nav-toggle svg { width: 26px; height: 26px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: #d9d5cd; padding: 60px 0 26px; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; align-items: start;
}
.footer-brand p { color: #a9a49a; margin-top: 14px; max-width: 42ch; font-size: .95rem; }
.footer-col h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col a { display: block; color: #cbc7bf; padding: 5px 0; font-size: .95rem; transition: color .15s; }
.footer-col a:hover { color: #fff; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #fff; transition: background .18s, transform .18s;
}
.footer-social a:hover { background: var(--red); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-social .social-disabled,
.contact-info .social-disabled {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.35); cursor: not-allowed;
}
.contact-info .social-disabled { background: rgba(0,0,0,.05); color: rgba(0,0,0,.25); }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: #8f8a80; font-size: .86rem;
}
.footer-tag { font-family: var(--font-head); color: #fff; font-weight: 600; }
.footer-tag b { color: var(--orange); font-weight: 600; }

/* ==========================================================================
   Page transition
   ========================================================================== */
#view { min-height: 60vh; }
.page-fade { animation: fadeUp .45s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Reveal on scroll */
.reveal {
  opacity: 0; transform: translateY(26px) scale(.97);
  transition: opacity .65s cubic-bezier(.22,.8,.3,1), transform .65s cubic-bezier(.22,.8,.3,1);
}
.reveal.in { opacity: 1; transform: translateY(0) scale(1); }
/* Staggered cascade for cards in the same row/grid, so they settle in one
   after another instead of all popping in at once. */
.grid-2 > .reveal:nth-child(2), .grid-3 > .reveal:nth-child(2) { transition-delay: .08s; }
.grid-3 > .reveal:nth-child(3) { transition-delay: .16s; }
.grid-2 > .reveal:nth-child(3) { transition-delay: .16s; }
.grid-2 > .reveal:nth-child(4) { transition-delay: .24s; }

/* ==========================================================================
   Hero (Home)
   ========================================================================== */
.hero { position: relative; overflow: hidden; background: var(--bg); }
.hero-inner {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
  padding: 52px 0 60px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(46,125,50,.1); color: var(--green-dark);
  font-family: var(--font-head); font-weight: 600; font-size: .8rem;
  padding: 7px 15px; border-radius: 999px; letter-spacing: .02em;
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.1rem); letter-spacing: -.02em; margin: 22px 0 0;
  text-wrap: balance;
}
.hero h1 .accent { color: var(--red); }
.hero-sub { color: var(--muted); font-size: 1.12rem; margin-top: 22px; max-width: 54ch; }
.hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 30px; margin-top: 40px; flex-wrap: wrap; }
.hero-stat .num { font-family: var(--font-head); font-weight: 700; font-size: 1.9rem; color: var(--orange); line-height: 1; }
.hero-stat .lbl { color: var(--muted); font-size: .88rem; margin-top: 6px; }

.hero-visual { position: relative; }
.hero-visual::before {
  content: ""; position: absolute; top: -8%; right: -12%; width: 62%; height: 62%; z-index: 0;
  background: var(--orange); opacity: .16;
  border-radius: 58% 42% 39% 61% / 55% 45% 55% 45%;
}
.hero-visual .frame {
  position: relative; z-index: 1;
  border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
}
.hero-visual .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hero-visual .frame:hover img { transform: scale(1.06); }
.hero-float {
  position: absolute; left: -26px; bottom: 34px; z-index: 2;
  background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 16px 18px; display: flex; align-items: center; gap: 13px; max-width: 240px;
}
.hero-float .ring {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: rgba(198,40,40,.12); color: var(--red); display: grid; place-items: center;
}
.hero-float .ring svg { width: 22px; height: 22px; }
.hero-float .t { font-family: var(--font-head); font-weight: 700; font-size: .98rem; }
.hero-float .s { font-size: .78rem; color: var(--muted); }

/* Coalition marquee strip */
.trust {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface); padding: 22px 0;
}
.trust p { text-align: center; color: var(--muted); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-head); font-weight: 600; }
.trust-marquee {
  margin-top: 16px; overflow: hidden; position: relative; width: 100%;
}
.trust-marquee::before, .trust-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none;
}
.trust-marquee::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.trust-marquee::after { right: 0; background: linear-gradient(270deg, var(--surface), transparent); }
.trust-track {
  display: flex; align-items: center; gap: 34px; width: max-content;
  animation: trust-scroll 32s linear infinite;
  will-change: transform;
}
.trust-marquee:hover .trust-track { animation-play-state: paused; }
.trust-track span {
  color: var(--ink); font-family: var(--font-head); font-weight: 600; font-size: .95rem; opacity: .8;
  white-space: nowrap; flex: none;
}
@keyframes trust-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   Pillars / What We Do cards
   ========================================================================== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.pillar {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease;
  position: relative; overflow: hidden;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pillar-photo {
  margin: -30px -30px 20px; aspect-ratio: 16/10; overflow: hidden;
}
.pillar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.pillar:hover .pillar-photo img { transform: scale(1.06); }
.pillar .icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
}
.pillar .icon svg { width: 26px; height: 26px; }
.pillar--health .icon { background: rgba(198,40,40,.1); color: var(--red); }
.pillar--edu .icon { background: rgba(46,125,50,.12); color: var(--green); }
.pillar--live .icon { background: rgba(239,108,0,.12); color: var(--orange); }
.pillar h3 { font-size: 1.25rem; }
.pillar p { color: var(--muted); margin-top: 10px; font-size: .97rem; }
.pillar .bar { height: 4px; width: 46px; border-radius: 2px; margin-top: 18px; background: var(--gold); }
.pillar--health .bar { background: var(--red); }
.pillar--edu .bar { background: var(--green); }
.pillar--live .bar { background: var(--orange); }

/* ==========================================================================
   Approach / How we work
   ========================================================================== */
.approach {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; transition: border-color .2s;
}
.approach:hover { border-color: var(--green); }
.approach .k {
  font-family: var(--font-head); font-weight: 700; color: var(--green);
  font-size: .9rem; letter-spacing: .04em;
}
.approach h3 { font-size: 1.12rem; margin: 8px 0 8px; }
.approach p { color: var(--muted); font-size: .95rem; }

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */
.page-hero {
  background: linear-gradient(180deg, var(--bg-alt), var(--bg));
  border-bottom: 1px solid var(--line); padding: 40px 0;
}
/* Split variant: text left, photo right — used where a page-hero would
   otherwise leave an empty gap on wide screens (e.g. approach.html). */
.page-hero--split .container { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.page-hero--split .page-hero-photo { position: relative; }
.page-hero--split .page-hero-photo .frame { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.page-hero--split .page-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .page-hero--split .container { grid-template-columns: 1fr; }
  .page-hero--split .page-hero-photo { max-width: 420px; margin-inline: auto; width: 100%; }
}
.page-hero .eyebrow { justify-content: flex-start; }
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); margin-top: 12px; letter-spacing: -.02em; text-wrap: balance; }
.page-hero p { color: var(--muted); font-size: 1.08rem; margin-top: 16px; max-width: 64ch; }

/* Full-bleed photo variant: the photo fills the entire banner as a
   background, with text overlaid directly on top of a dark gradient —
   borrowed as a style from a reference site the user shared, built as
   original code (not their actual file). */
.page-hero--photo {
  position: relative; overflow: hidden; border-bottom: none;
  padding: 100px 0; background-size: cover; background-position: center;
}
.page-hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(31,34,35,.5), rgba(31,34,35,.8));
}
.page-hero--photo .container { position: relative; z-index: 1; }
.page-hero--photo .eyebrow { color: #fff; }
.page-hero--photo h1 { color: #fff; }
.page-hero--photo p { color: rgba(255,255,255,.92); }
.page-hero--photo-about { background-image: url('../assets/img/stories/story-refugee.jpg'); }
.page-hero--photo-approach { background-image: url('../assets/img/stories/story-livelihood.jpg'); }
.page-hero--photo-impact { background-image: url('../assets/img/stories/story-education.jpg'); }
.page-hero--photo-stories { background-image: url('../assets/img/about.jpg'); }
.page-hero--photo-members { background-image: url('../assets/img/hero.jpg'); }
.page-hero--photo-contact { background-image: url('../assets/img/stories/story-poultry.jpg'); }
.page-hero--photo-donate { background-image: url('../assets/img/stories/story-health.jpg'); }
@media (max-width: 560px) {
  .page-hero--photo { padding: 64px 0; }
}

/* Tag-labeled card: full-bleed photo at the top (no inset frame), a small
   pill-shaped category label, title, short text, hover-arrow link —
   another style borrowed from the same reference site, built fresh. */
.tag-card {
  border-radius: var(--radius); overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tag-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tag-card .tag-card-photo { aspect-ratio: 16/10; overflow: hidden; }
.tag-card .tag-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.tag-card:hover .tag-card-photo img { transform: scale(1.06); }
.tag-card .tag-card-body { padding: 20px 22px 24px; }
.tag-card .tag-label {
  display: inline-block; font-family: var(--font-head); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--green-dark);
  background: rgba(83,124,57,.1); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.tag-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.tag-card p { color: var(--muted); font-size: .92rem; }

/* ==========================================================================
   About page
   ========================================================================== */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.photo-accent { position: relative; }
/* Decorative background for flat, text-only sections that otherwise feel
   empty — a repeating row of concentric arcs along the bottom edge,
   modeled on the pattern used by Reach A Hand Uganda's site (given as a
   reference), instead of the plain blurred circles used in an earlier
   version. */
.section--decorated { position: relative; overflow: hidden; }
.section--decorated::after {
  content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 60px;
  opacity: .16; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cg fill='none' stroke='%23537c39' stroke-width='1.5'%3E%3Ccircle cx='30' cy='30' r='6'/%3E%3Ccircle cx='30' cy='30' r='12'/%3E%3Ccircle cx='30' cy='30' r='18'/%3E%3Ccircle cx='30' cy='30' r='24'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: bottom center; background-size: 60px 30px;
}
.section--decorated .container { position: relative; z-index: 1; }

.photo-accent::before {
  content: ""; position: absolute; bottom: -10%; left: -10%; width: 55%; height: 55%; z-index: 0;
  background: var(--green); opacity: .14;
  border-radius: 42% 58% 61% 39% / 46% 54% 46% 54%;
}
.about-grid .img-frame { position: relative; z-index: 1; border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; aspect-ratio: 5/4; }
.about-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.about-grid .img-frame:hover img { transform: scale(1.06); }
.about-body p { color: var(--ink); margin-bottom: 16px; }
.about-body p.muted { color: var(--muted); }

.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mv-card {
  border-radius: var(--radius); padding: 34px; color: #fff; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.mv-card::before {
  content: "\201C"; position: absolute; top: -6px; left: 16px; font-family: var(--font-head);
  font-size: 6.5rem; line-height: 1; color: rgba(255,255,255,.16); font-weight: 700; pointer-events: none;
}
.mv-card.mission { background: linear-gradient(140deg, var(--green), var(--green-dark)); }
.mv-card.vision { background: linear-gradient(140deg, var(--red), var(--red-dark)); }
.mv-card .k {
  position: relative; display: inline-flex; align-items: center; padding-bottom: 10px;
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; opacity: .85;
}
.mv-card .k::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: rgba(255,255,255,.55); border-radius: 2px; }
.mv-card h3 { position: relative; color: #fff; font-size: 1.65rem; line-height: 1.32; margin-top: 14px; text-wrap: balance; }

/* ==========================================================================
   Impact page
   ========================================================================== */
.impact-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.impact-tab {
  font-family: var(--font-head); font-weight: 600; font-size: .92rem;
  padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--muted);
  transition: all .18s;
}
.impact-tab:hover { border-color: var(--ink); color: var(--ink); }
.impact-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow); border-top: 4px solid var(--orange);
}
.stat-card .num { font-family: var(--font-head); font-weight: 700; font-size: 2rem; color: var(--ink); line-height: 1.05; }
.stat-card .det { color: var(--muted); margin-top: 8px; font-size: .95rem; }
.stat-card[data-cat="health"] { border-top-color: var(--red); }
.stat-card[data-cat="livelihoods"] { border-top-color: var(--orange); }
.stat-card[data-cat="education"] { border-top-color: var(--green); }

.impact-banner {
  position: relative; overflow: hidden;
  color: #fff; border-radius: var(--radius); padding: 40px; text-align: center; margin-bottom: 30px;
}
/* Background photo slideshow — the text/stats stay fixed, only the
   backdrop photo slowly crossfades between a few real ACSI photos.
   Ambient visual variety, not a content carousel: nothing here ever
   needs to be clicked through or waited on to read the actual message. */
.impact-banner .banner-slide {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 2s ease;
}
.impact-banner .banner-slide.is-active { opacity: 1; }
.impact-banner .banner-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(83,124,57,.88), rgba(65,97,44,.93));
}
.impact-banner > *:not(.banner-slide) { position: relative; z-index: 1; }
.impact-banner h2 { color: #fff; font-size: 1.6rem; }
.impact-banner p { max-width: 70ch; margin: 12px auto 0; opacity: .92; }
@media (prefers-reduced-motion: reduce) {
  .impact-banner .banner-slide { transition: none; }
}

/* ==========================================================================
   Stories page
   ========================================================================== */
.story-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.story-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.story-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.story-card .thumb { aspect-ratio: 16/10; overflow: hidden; }
.story-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.story-card:hover .thumb img { transform: scale(1.05); }
.story-card .body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.story-tag {
  align-self: flex-start; font-family: var(--font-head); font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--green-dark);
  background: rgba(46,125,50,.1); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.story-card h3 { font-size: 1.2rem; }
.story-card .org { color: var(--red); font-family: var(--font-head); font-weight: 600; font-size: .85rem; margin-top: 4px; }
.story-card p { color: var(--muted); margin-top: 12px; font-size: .96rem; }
.story-card .credit { color: #9a948a; font-size: .78rem; margin-top: 14px; font-style: italic; }

/* ==========================================================================
   Members page
   ========================================================================== */
.member-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.member-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow);
  transition: transform .18s, border-color .18s, box-shadow .18s; text-decoration: none; color: inherit;
  position: relative;
}
a.member-card:hover { transform: translateY(-3px); border-color: var(--orange); box-shadow: var(--shadow-lg); cursor: pointer; }
.member-card.no-link { cursor: default; }
.member-badge {
  width: 92px; height: 64px; border-radius: 10px; flex: none; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 1.05rem;
  overflow: hidden; background: #fff; border: 1px solid var(--line); padding: 8px;
}
.member-badge img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  transition: transform .35s ease;
}
a.member-card:hover .member-badge img { transform: scale(1.08); }
.member-card h3 { font-size: 1.02rem; line-height: 1.25; }
.member-card p { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.member-card .visit-ico {
  position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; color: var(--muted); opacity: 0;
  transition: opacity .18s;
}
a.member-card:hover .visit-ico { opacity: 1; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-info .info-item { display: flex; gap: 14px; margin-bottom: 22px; }
.contact-info .info-item .ic {
  width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: rgba(198,40,40,.1); color: var(--red);
}
.contact-info .info-item .ic svg { width: 20px; height: 20px; }
.contact-info h4 { font-family: var(--font-head); font-size: 1rem; }
.contact-info p, .contact-info a { color: var(--muted); font-size: .95rem; }

.form-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px; box-shadow: var(--shadow);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-head); font-weight: 600; font-size: .88rem; margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%; font: inherit; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 10px; background: var(--bg); color: var(--ink); transition: border-color .15s, background .15s;
}
.field input:focus, .field textarea:focus { border-color: var(--green); background: #fff; outline: none; }
.field textarea { resize: vertical; min-height: 130px; }
.field .err { color: var(--red); font-size: .82rem; margin-top: 6px; display: none; }
.field.invalid input, .field.invalid textarea { border-color: var(--red); }
.field.invalid .err { display: block; }
.form-note {
  display: none; margin-top: 6px; padding: 14px 16px; border-radius: 10px;
  background: rgba(46,125,50,.1); color: var(--green-dark); font-weight: 600; font-family: var(--font-head);
}
.form-note.show { display: block; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: #fff; border-radius: 20px; padding: 54px; text-align: center; box-shadow: var(--shadow-lg);
}
/* Photo-backed variants — a real ACSI photo behind a tinted overlay so the
   white text stays legible, used selectively (not on every CTA band) for
   visual variety rather than another flat color block. */
.cta-band--photo {
  background-size: cover; background-position: center; position: relative;
}
.cta-band--hero { background-image: linear-gradient(135deg, rgba(181,33,37,.72), rgba(141,26,29,.8)), url('../assets/img/hero.jpg'); }
.cta-band--about { background-image: linear-gradient(135deg, rgba(181,33,37,.72), rgba(141,26,29,.8)), url('../assets/img/about.jpg'); }
.cta-band--health { background-image: linear-gradient(135deg, rgba(181,33,37,.72), rgba(141,26,29,.8)), url('../assets/img/stories/story-health.jpg'); }
.cta-band--poultry { background-image: linear-gradient(135deg, rgba(181,33,37,.72), rgba(141,26,29,.8)), url('../assets/img/stories/story-poultry.jpg'); }
.cta-band--livelihood { background-image: linear-gradient(135deg, rgba(181,33,37,.72), rgba(141,26,29,.8)), url('../assets/img/stories/story-livelihood.jpg'); }
.cta-band--refugee { background-image: linear-gradient(135deg, rgba(181,33,37,.72), rgba(141,26,29,.8)), url('../assets/img/stories/story-refugee.jpg'); }
.cta-band h2 { color: #fff; font-size: clamp(1.6rem, 3.5vw, 2.3rem); text-wrap: balance; }
.cta-band--photo h2, .cta-band--photo p { text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.cta-band p { max-width: 60ch; margin: 14px auto 0; opacity: .92; }
.cta-band .hero-actions { justify-content: center; margin-top: 28px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 48px 0 60px; }
  .hero-visual { max-width: 440px; margin-inline: auto; width: 100%; }
  .about-grid, .contact-grid, .mv-grid { grid-template-columns: 1fr; gap: 28px; }
  .grid-3, .stat-grid, .member-grid { grid-template-columns: repeat(2, 1fr); }
  .story-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Nav switches to the mobile dropdown at a wider breakpoint than the
   general tablet layout above (900px) — 9 nav items need more horizontal
   room than 8 did, so this needs its own, higher threshold rather than
   sharing the 900px breakpoint, or the horizontal nav gets squeezed and
   wraps mid-label on medium/laptop-width screens before switching. */
@media (max-width: 1180px) {
  .nav-links {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 12px; box-shadow: var(--shadow-lg);
    transform: translateY(-120%); transition: transform .28s ease; z-index: 40;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: 13px 16px; border-radius: 10px; white-space: normal; }
  .nav-donate-mobile {
    display: block; margin-top: 8px; text-align: center;
    background: var(--red); color: #fff !important; font-weight: 700;
  }
  .nav-donate-mobile:hover { background: var(--red-dark); }
  .nav-toggle { display: inline-flex; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn {
    display: inline-flex; padding: 8px 14px; font-size: .82rem; white-space: nowrap;
  }
  .nav-cta .btn .ico { display: none; }
  .brand img { height: 32px; }
}

@media (max-width: 560px) {
  .section { padding: 40px 0; }
  .grid-3, .stat-grid, .grid-2, .member-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 36px 24px; }
  .impact-banner { padding: 32px 22px; }
  .hero-actions .btn, .cta-band .btn { width: 100%; justify-content: center; }
  .hero-float { left: 10px; right: 10px; max-width: none; }
  .nav-cta .btn { padding: 7px 12px; font-size: .78rem; }
  .brand img { height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  /* The member-name strip is decorative, not essential motion, so it keeps
     scrolling even when the visitor's device has Reduce Motion enabled —
     otherwise the marquee would silently freeze on many phones. */
  .trust-track { animation: trust-scroll 32s linear infinite !important; }
}

/* ==========================================================================
   Back to top button
   ========================================================================== */
.back-to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--red); color: #fff; box-shadow: var(--shadow-lg);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--red-dark); }
.back-to-top .ico { width: 20px; height: 20px; }

/* ==========================================================================
   Donate page
   ========================================================================== */
.donate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.donate-why h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.donate-why p { color: var(--muted); margin-top: 14px; }
.donate-points { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.donate-point { display: flex; gap: 14px; align-items: flex-start; }
.donate-point .ic {
  width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: rgba(46,125,50,.12); color: var(--green);
}
.donate-point .ic svg { width: 18px; height: 18px; }
.donate-point h4 { font-family: var(--font-head); font-size: .98rem; }
.donate-point p { color: var(--muted); font-size: .9rem; margin-top: 2px; }

.donate-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow);
}
.donate-freq { display: flex; background: var(--bg-alt); border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: 22px; }
.donate-freq button {
  flex: 1; padding: 10px 12px; border-radius: 999px; font-family: var(--font-head);
  font-weight: 600; font-size: .9rem; color: var(--muted); transition: all .18s;
}
.donate-freq button.active { background: var(--ink); color: #fff; }

.donate-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.donate-amounts button {
  padding: 14px 8px; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--ink);
  background: var(--bg); transition: all .18s;
}
.donate-amounts button:hover { border-color: var(--orange); }
.donate-amounts button.active { background: var(--red); border-color: var(--red); color: #fff; }

.donate-custom { margin-bottom: 18px; }
.donate-custom label { display: block; font-family: var(--font-head); font-weight: 600; font-size: .85rem; margin-bottom: 7px; }
.donate-custom-wrap { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg); overflow: hidden; }
.donate-custom-wrap span { padding: 12px 4px 12px 14px; color: var(--muted); font-weight: 600; }
.donate-custom-wrap input { border: none; background: transparent; padding: 12px 14px 12px 4px; font: inherit; width: 100%; color: var(--ink); }
.donate-custom-wrap input:focus { outline: none; }
.donate-custom-wrap:focus-within { border-color: var(--green); background: #fff; }

.donate-summary {
  background: var(--bg-alt); border-radius: 10px; padding: 14px 16px; margin-bottom: 20px;
  display: flex; justify-content: space-between; align-items: center; font-family: var(--font-head);
}
.donate-summary .amt { color: var(--orange); font-weight: 700; font-size: 1.3rem; }

.donate-panel { display: none; }
.donate-panel.active { display: block; }

.donate-thanks {
  text-align: center; padding: 30px 10px;
}
.donate-thanks .ic {
  width: 64px; height: 64px; border-radius: 50%; background: rgba(46,125,50,.12); color: var(--green);
  display: grid; place-items: center; margin: 0 auto 18px;
}
.donate-thanks .ic svg { width: 30px; height: 30px; }
.donate-thanks h3 { font-size: 1.3rem; }
.donate-thanks p { color: var(--muted); margin-top: 10px; }

.donate-note {
  margin-top: 18px; font-size: .82rem; color: var(--muted); background: var(--bg-alt);
  border-radius: 10px; padding: 12px 14px;
}
.donate-note a { color: var(--red); font-weight: 600; }

.donate-soon-icon {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(230,126,34,.14); color: var(--orange);
  display: grid; place-items: center; margin: 0 auto 16px;
}
.donate-soon-icon svg { width: 26px; height: 26px; }
#comingSoonPanel { text-align: center; }
#comingSoonPanel form { text-align: left; margin-top: 6px; }

/* ==========================================================================
   Admin page
   ========================================================================== */
.admin-shell { max-width: 620px; margin: 0 auto; }
.admin-login {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px; box-shadow: var(--shadow);
}
.admin-banner {
  background: rgba(239,108,0,.1); border: 1px solid rgba(239,108,0,.3); color: #9a4b00;
  border-radius: 10px; padding: 14px 16px; font-size: .88rem; margin-bottom: 22px;
}
.admin-panel { display: none; }
.admin-panel.active { display: block; }
.admin-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow); margin-bottom: 26px;
}
.admin-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.admin-card .sub { color: var(--muted); font-size: .88rem; margin-bottom: 18px; }
.admin-row { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; margin-bottom: 14px; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.admin-table th, .admin-table td {
  text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); font-size: .92rem;
}
.admin-table th { color: var(--muted); font-family: var(--font-head); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.admin-table .del-btn { color: var(--red); font-weight: 600; font-size: .85rem; }
.admin-table .del-btn:hover { text-decoration: underline; }
.admin-empty { color: var(--muted); font-size: .9rem; padding: 14px 0; }

/* Impact stats editor (admin.html) */
.stats-row {
  display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: start; margin-bottom: 10px;
}
.stats-row input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--font-body); font-size: .92rem; background: #fff;
}
.stats-row input:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.stats-row .remove-row {
  color: var(--red); background: none; border: none; font-size: .85rem; font-weight: 600;
  cursor: pointer; padding: 10px 4px;
}
.stats-row .remove-row:hover { text-decoration: underline; }
.stats-editor + .stats-editor { border-top: 1px solid var(--line); padding-top: 4px; }
@media (max-width: 560px) {
  .stats-row { grid-template-columns: 1fr; }
}
.admin-logout { margin-left: auto; }
.admin-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }

/* ==========================================================================
   Annual reports (Impact page)
   ========================================================================== */
.reports-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.report-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
}
.report-card .yr { font-family: var(--font-head); font-weight: 700; color: var(--green); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.report-card h4 { font-size: 1.02rem; }
.report-card .meta { color: var(--muted); font-size: .8rem; }
.report-card .btn { align-self: flex-start; margin-top: 4px; }
.reports-empty {
  grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 30px; border: 1.5px dashed var(--line);
  border-radius: var(--radius);
}

/* Members / Stories admin editors */
.admin-item {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
  padding: 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px;
}
.admin-item img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.admin-item .admin-item-body h5 { font-size: .98rem; margin-bottom: 2px; }
.admin-item .admin-item-body p { font-size: .85rem; color: var(--muted); margin: 0; }
.admin-item .admin-item-actions { display: flex; gap: 8px; }
.admin-item .admin-item-actions button {
  font-size: .82rem; font-weight: 600; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line); background: #fff; cursor: pointer;
}
.admin-item .admin-item-actions .edit-btn:hover { border-color: var(--green); color: var(--green); }
.admin-item .admin-item-actions .remove-btn { color: var(--red); border-color: var(--red); }
.admin-item .admin-item-actions .remove-btn:hover { background: var(--red); color: #fff; }
.admin-item.editing { grid-template-columns: 1fr; }
.admin-item.editing .admin-item-edit-fields { display: grid; gap: 10px; width: 100%; }
.admin-item.editing .admin-item-edit-fields input,
.admin-item.editing .admin-item-edit-fields textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-family: var(--font-body); font-size: .9rem;
}

.admin-add-form { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.admin-add-form summary::-webkit-details-marker { display: none; }
.admin-add-form summary { list-style: none; }
.admin-add-form label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: 5px; font-weight: 600; }
.admin-add-form input[type="text"],
.admin-add-form input[type="url"],
.admin-add-form input[type="file"],
.admin-add-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: var(--font-body); font-size: .92rem; background: #fff;
}
.admin-add-form button.btn-primary { margin-top: 6px; }

@media (max-width: 900px) {
  .donate-grid { grid-template-columns: 1fr; gap: 30px; }
  .reports-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-row { grid-template-columns: 1fr; }
  .admin-item { grid-template-columns: 48px 1fr; }
  .admin-item .admin-item-actions { grid-column: 1 / -1; margin-top: 8px; }
}
@media (max-width: 560px) {
  .donate-amounts { grid-template-columns: repeat(3, 1fr); }
  .reports-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Skeleton loading placeholders — shown in member-grid, story-grid,
   stat-grid, and reports-grid while their real content is being fetched.
   Reduced-motion visitors get a static block instead of the shimmer.
   ========================================================================== */
.skeleton-block {
  background: linear-gradient(90deg, #ece7dd 25%, #f6f2ea 37%, #ece7dd 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 8px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-block { animation: none; background: #ece7dd; }
}

.skeleton-member {
  display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center;
  padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
}
.skeleton-member .skeleton-block:first-child { width: 56px; height: 56px; border-radius: 50%; }
.skeleton-member .skel-lines { display: flex; flex-direction: column; gap: 8px; }
.skeleton-member .skel-lines .skeleton-block:first-child { width: 70%; height: 14px; }
.skeleton-member .skel-lines .skeleton-block:last-child { width: 90%; height: 11px; }

.skeleton-story {
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow: hidden;
}
.skeleton-story .skel-thumb { aspect-ratio: 16/10; }
.skeleton-story .skel-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.skeleton-story .skel-body .skeleton-block:nth-child(1) { width: 40%; height: 11px; }
.skeleton-story .skel-body .skeleton-block:nth-child(2) { width: 75%; height: 18px; margin-top: 4px; }
.skeleton-story .skel-body .skeleton-block:nth-child(3) { width: 100%; height: 11px; margin-top: 6px; }
.skeleton-story .skel-body .skeleton-block:nth-child(4) { width: 88%; height: 11px; }
.skeleton-story .skel-body .skeleton-block:nth-child(5) { width: 60%; height: 11px; }

.skeleton-stat {
  border-radius: var(--radius); border: 1px solid var(--line); border-top: 3px solid var(--line);
  background: var(--surface); padding: 22px; display: flex; flex-direction: column; gap: 10px;
}
.skeleton-stat .skeleton-block:first-child { width: 55%; height: 28px; }
.skeleton-stat .skeleton-block:last-child { width: 90%; height: 12px; }

.skeleton-report {
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
}
.skeleton-report .skeleton-block:nth-child(1) { width: 30%; height: 11px; }
.skeleton-report .skeleton-block:nth-child(2) { width: 80%; height: 16px; }
.skeleton-report .skeleton-block:nth-child(3) { width: 50%; height: 11px; }
.skeleton-report .skeleton-block:nth-child(4) { width: 40%; height: 34px; border-radius: var(--radius); margin-top: 6px; }

/* ==========================================================================
   Language selector — a custom floating flag/language pill (bottom-left),
   driven by Google Translate underneath. Google's own default UI
   (#google_translate_element itself) is hidden entirely; we build our own
   button + dropdown and drive Google's hidden <select> programmatically.
   ========================================================================== */
#google_translate_element { display: none !important; }

.lang-floating { position: fixed; left: 16px; bottom: 16px; z-index: 60; }
.lang-floating-btn {
  display: flex; align-items: center; gap: 6px; padding: 9px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-lg); font-family: var(--font-body); font-size: .85rem; font-weight: 600;
  color: var(--ink); cursor: pointer;
}
.lang-floating-btn .lang-flag { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.lang-floating-btn .lang-caret { font-size: .7rem; color: var(--muted); margin-left: 2px; }
.lang-floating-menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); min-width: 180px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
  list-style: none; margin: 0; padding: 6px; max-height: 320px; overflow-y: auto;
}
.lang-floating-menu[hidden] { display: none; }
.lang-floating-menu li {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  font-size: .88rem; color: var(--ink); cursor: pointer;
}
.lang-floating-menu li:hover, .lang-floating-menu li:focus-visible { background: var(--bg); }
.lang-floating-menu .lang-flag { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex: none; }

/* Google's own translate chrome, forced off. Belt-and-suspenders: CSS
   here, plus a MutationObserver + interval in translate-init.js (which
   also re-applies these via JS directly on the element), since Google
   sometimes (re)inserts the banner iframe — or re-applies its own inline
   style on it — after this stylesheet has already run. */
iframe.goog-te-banner-frame,
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe[class*="goog-te-banner"],
.skiptranslate > iframe:first-child {
  display: none !important; visibility: hidden !important;
  height: 0 !important; max-height: 0 !important;
  overflow: hidden !important; border: none !important;
}
body, body.translated-ltr, body.translated-rtl {
  top: 0px !important; position: static !important;
}
html, html.translated-ltr, html.translated-rtl {
  margin-top: 0 !important;
}
.goog-text-highlight { background: none !important; box-shadow: none !important; }
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }

@media (max-width: 560px) {
  .lang-floating { left: 12px; bottom: 12px; }
  .lang-floating-btn { padding: 8px 12px; font-size: .8rem; }
}

/* ==========================================================================
   Hover-arrow link — a reusable "Learn more →" style used across cards
   site-wide: the arrow slides right and the text shifts color on hover.
   ========================================================================== */
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 600; font-size: .92rem;
  color: var(--green); margin-top: 16px;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .25s ease; }
.link-arrow:hover { color: var(--green-dark); }
.link-arrow:hover svg { transform: translateX(4px); }

/* Gallery grid (gallery.html, and the Home preview strip) */
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item .gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,0));
  color: #fff; font-family: var(--font-head); font-size: .88rem; font-weight: 600;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.gallery-item:hover .gallery-caption, .gallery-item:focus-within .gallery-caption { opacity: 1; transform: translateY(0); }
@media (hover: none) {
  /* Touch devices can't hover — show captions always rather than hide them behind an interaction that doesn't exist there. */
  .gallery-item .gallery-caption { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}