/* ==========================================================================
   Francophone Africans Alliance — Site styles
   Brand: teal #1795B5 · orange #F0940A · charcoal #26333B
   ========================================================================== */

:root {
  --teal-900: #083d4c;
  --teal-800: #0b5468;
  --teal-700: #0e6f88;
  --teal-600: #12809c;
  --teal-500: #1795b5;
  --teal-400: #33c0d4;   /* bright logo teal — highlights/accents */
  --teal-300: #7fd6e2;
  --teal-200: #bfe5ef;
  --teal-100: #ddf1f6;
  --teal-50:  #f2fafc;

  --orange-700: #b96a05;
  --orange-600: #d97a06;
  --orange-500: #f0940a;
  --orange-400: #f8ab2e;
  --orange-100: #fdebd0;

  --ink: #1c2b33;
  --ink-soft: #51636e;
  --line: #e3edf1;
  --bg: #ffffff;
  --bg-soft: #f4fafc;
  --bg-warm: #fbfaf7;
  --white: #ffffff;

  /* Brand gradients */
  --grad-hero: linear-gradient(152deg, #072f3c 0%, #0d6076 42%, #12879f 74%, #1aa2bf 100%);
  --grad-teal: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  --grad-accent: linear-gradient(130deg, var(--teal-600), var(--teal-400));
  --grad-orange: linear-gradient(130deg, var(--orange-600), var(--orange-400));

  --radius: 18px;
  --radius-sm: 11px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* Soft, layered, slightly cool shadows */
  --shadow-sm: 0 1px 2px rgba(8,61,76,.06), 0 3px 10px rgba(8,61,76,.05);
  --shadow-md: 0 4px 12px rgba(8,61,76,.07), 0 14px 30px rgba(8,61,76,.09);
  --shadow-lg: 0 10px 26px rgba(8,61,76,.10), 0 28px 64px rgba(8,61,76,.15);
  --shadow-glow-teal: 0 10px 30px rgba(18,128,156,.30);
  --shadow-glow-orange: 0 10px 30px rgba(240,148,10,.32);

  --ease: cubic-bezier(.22,.61,.36,1);

  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Fraunces", "Plus Jakarta Sans", Georgia, serif;

  --container: 1160px;
  --header-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--teal-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 0.5em; font-weight: 800; letter-spacing: -0.015em; }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.08; }
h1 { font-size: clamp(2.25rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.24rem; }
.grad-text { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--orange-500); outline-offset: 2px; border-radius: 4px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--teal-900); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 1rem; font-family: inherit;
  border: 2px solid transparent; cursor: pointer; text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-primary { background: var(--teal-600); color: #fff; }
.btn-primary:hover { background: var(--teal-700); color: #fff; }
.btn-accent { background: var(--orange-500); color: #fff; }
.btn-accent:hover { background: var(--orange-600); color: #fff; }
.btn-outline { background: transparent; color: var(--teal-700); border-color: var(--teal-500); }
.btn-outline:hover { background: var(--teal-50); }
.btn-light { background: #fff; color: var(--teal-800); }
.btn-light:hover { background: var(--teal-100); color: var(--teal-900); }
.btn-ghost-light { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.55); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.25); color: #fff; }
.btn-lg { padding: 16px 34px; font-size: 1.08rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.header-inner {
  display: flex; align-items: center; gap: 18px;
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none !important; margin-right: auto; }
.brand-logo { width: 46px; height: 46px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 800; font-size: 1.02rem; color: var(--teal-700); letter-spacing: 0.01em; max-width: 175px; }
.brand-tag { font-size: 0.72rem; color: var(--ink-soft); font-weight: 600; }

.site-nav { display: flex; align-items: center; gap: clamp(8px, 1.2vw, 18px); }
.site-nav a:not(.btn) {
  color: var(--ink); font-weight: 600; font-size: 0.93rem; white-space: nowrap;
  padding: 6px 2px; border-bottom: 2px solid transparent; text-decoration: none;
}
.site-nav a:not(.btn):hover { color: var(--teal-600); }
.site-nav a[aria-current="page"] { color: var(--teal-600); border-bottom-color: var(--orange-500); }
.site-nav .btn { padding: 10px 22px; font-size: 0.93rem; white-space: nowrap; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-toggle {
  font-family: inherit; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em;
  color: var(--teal-700); background: var(--teal-50);
  border: 2px solid var(--teal-200); border-radius: var(--radius-pill);
  padding: 8px 15px; cursor: pointer; transition: background 0.15s ease;
}
.lang-toggle:hover { background: var(--teal-100); }

.nav-toggle {
  display: none; background: none; border: none; cursor: pointer; padding: 8px;
  color: var(--teal-800);
}
.nav-toggle svg { width: 28px; height: 28px; }

@media (max-width: 1439px) {
  .brand-tag { display: none; }
  .brand-name { font-size: 0.95rem; }
  .site-nav { gap: 10px; }
  .site-nav a:not(.btn) { font-size: 0.88rem; }
  .site-nav .btn { padding: 9px 16px; font-size: 0.88rem; }
}

@media (max-width: 1279px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 10px 22px 22px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.btn) {
    padding: 13px 6px; font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
  }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--line); color: var(--teal-600); }
  .site-nav .btn { margin-top: 16px; }
}
@media (max-width: 480px) {
  .brand-name { font-size: 0.9rem; max-width: 160px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--teal-800) 0%, var(--teal-600) 55%, var(--teal-500) 100%);
  color: #fff;
  padding: clamp(60px, 9vw, 110px) 0 clamp(70px, 10vw, 120px);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.13) 1.6px, transparent 1.6px);
  background-size: 26px 26px;
  mask-image: linear-gradient(120deg, transparent 42%, black 100%);
  -webkit-mask-image: linear-gradient(120deg, transparent 42%, black 100%);
}
.hero-inner { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.hero h1 { color: #fff; margin-bottom: 0.45em; }
.hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: rgba(255,255,255,0.92); max-width: 56ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero-art { display: flex; justify-content: center; }
.hero-art svg { width: min(100%, 420px); height: auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,0.18)); }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-pill); padding: 7px 16px;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.03em;
  margin-bottom: 22px;
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .hero-art svg { width: min(70%, 300px); }
}

/* Page hero (interior pages) */
.page-hero {
  background: linear-gradient(140deg, var(--teal-800), var(--teal-600));
  color: #fff; padding: clamp(46px, 7vw, 80px) 0;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.12) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  mask-image: linear-gradient(110deg, transparent 55%, black 100%);
  -webkit-mask-image: linear-gradient(110deg, transparent 55%, black 100%);
}
.page-hero .container { position: relative; }
.page-hero h1 { color: #fff; margin-bottom: 0.3em; }
.page-hero p { color: rgba(255,255,255,0.92); max-width: 62ch; font-size: 1.08rem; margin-bottom: 0; }

/* ---------- Sections ---------- */
.section { padding: clamp(52px, 7.5vw, 90px) 0; }
.section--soft { background: var(--bg-soft); }
.section--teal { background: var(--teal-900); color: #fff; }
.section--teal h2 { color: #fff; }
.section-head { max-width: 720px; margin-bottom: clamp(30px, 4vw, 48px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker {
  display: inline-block; font-size: 0.82rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange-600); margin-bottom: 10px;
}
.section--teal .kicker { color: var(--orange-500); }
.section-head p { color: var(--ink-soft); font-size: 1.06rem; }
.section--teal .section-head p { color: rgba(255,255,255,0.85); }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .grid-5 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card h3 { margin-top: 0; }
.card p { color: var(--ink-soft); margin-bottom: 0; }
.card .card-link { display: inline-block; margin-top: 14px; font-weight: 700; }

.icon-badge {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-100); color: var(--teal-700);
  margin-bottom: 18px;
}
.icon-badge svg { width: 26px; height: 26px; }
.icon-badge.orange { background: var(--orange-100); color: var(--orange-600); }

/* ---------- Stats band ---------- */
.stats-band { background: var(--teal-900); color: #fff; padding: 40px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.stat-num { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: var(--orange-500); line-height: 1.1; }
.stat-label { font-size: 0.98rem; color: rgba(255,255,255,0.85); margin-top: 6px; }
@media (max-width: 640px) { .stats-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Integration Pathway ---------- */
.pathway { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.pathway-card {
  position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 22px 24px; box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pathway-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pathway-card .icon-badge { margin-bottom: 16px; }
.pathway-card h3 { margin: 0 0 8px; font-size: 1.14rem; }
.pathway-card p { color: var(--ink-soft); font-size: 0.94rem; margin-bottom: 12px; }
.pathway-card .card-link { font-weight: 700; font-size: 0.92rem; }
.pathway-num {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--teal-50); color: var(--teal-700);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem;
}
@media (max-width: 1100px) { .pathway { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .pathway { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .pathway { grid-template-columns: 1fr; } }

/* ---------- Steps ---------- */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 0; }
.step-num {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--orange-500); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.15rem; margin-bottom: 16px;
}

/* ---------- Mission quote ---------- */
.mission-quote {
  border-left: 5px solid var(--orange-500);
  background: var(--teal-50); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 26px 30px; font-size: 1.15rem; font-weight: 600;
  color: var(--teal-900); margin: 0;
}
.mission-quote footer { font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); margin-top: 12px; }

/* ---------- Split layout ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- Checklist ---------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist .check {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--teal-100); color: var(--teal-700);
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.checklist .check svg { width: 13px; height: 13px; }

/* ---------- Events ---------- */
.event-card {
  display: flex; gap: 22px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px; box-shadow: var(--shadow-sm);
}
.event-date {
  flex: none; width: 74px; text-align: center;
  background: var(--teal-50); border: 1px solid var(--teal-200);
  border-radius: var(--radius-sm); padding: 10px 6px;
}
.event-date .ev-month { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--orange-600); }
.event-date .ev-day { font-size: 1.7rem; font-weight: 800; color: var(--teal-800); line-height: 1.1; }
.event-body h3 { margin-bottom: 4px; }
.event-meta { font-size: 0.9rem; color: var(--ink-soft); font-weight: 600; margin-bottom: 8px; }
.event-body p { color: var(--ink-soft); margin-bottom: 0; }
.events-list { display: grid; gap: 18px; }
.events-empty {
  background: var(--teal-50); border: 1px dashed var(--teal-200);
  border-radius: var(--radius); padding: 34px; text-align: center; color: var(--ink-soft);
}

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--orange-600), var(--orange-500));
  color: #fff; border-radius: calc(var(--radius) + 6px);
  padding: clamp(36px, 5vw, 56px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; margin-bottom: 0.25em; }
.cta-band p { color: rgba(255,255,255,0.94); margin: 0; max-width: 52ch; }
.cta-band .btn-light { color: var(--orange-700); }
.cta-band .btn-light:hover { background: #fff7ea; color: var(--orange-700); }

/* ---------- Team ----------
   Flex (not grid) so an odd last row stays centred instead of
   leaving a lone card stranded on the left. */
.team-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 24px;
}
.team-grid > * { flex: 0 1 calc((100% - 48px) / 3); min-width: 250px; }
@media (max-width: 980px) { .team-grid > * { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 640px) { .team-grid > * { flex-basis: 100%; } }

.team-card { text-align: center; }
.avatar {
  width: 108px; height: 108px; border-radius: 50%; margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800;
}
.team-card .role { color: var(--orange-600); font-weight: 700; font-size: 0.92rem; }
.avatar-photo {
  width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 16px;
  object-fit: cover; object-position: center top;
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--teal-200), var(--shadow-md);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.team-card:hover .avatar-photo {
  transform: scale(1.05);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--orange-500), var(--shadow-lg);
}
.team-card .bio {
  color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6;
  margin-top: 12px; margin-bottom: 0; text-align: left;
}

/* ---------- Forms ---------- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-md);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 700; font-size: 0.92rem; }
.form-field input, .form-field textarea, .form-field select {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; background: var(--bg-soft);
  transition: border-color 0.15s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none; border-color: var(--teal-500); background: #fff;
}
.form-note { font-size: 0.88rem; color: var(--ink-soft); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Contact info ---------- */
.info-tile { display: flex; gap: 16px; align-items: flex-start; }
.info-tile .icon-badge { margin-bottom: 0; width: 46px; height: 46px; flex: none; }
.info-tile h3 { font-size: 1.02rem; margin-bottom: 3px; }
.info-tile p, .info-tile a { color: var(--ink-soft); margin: 0; font-size: 0.97rem; }
.info-tile a { color: var(--teal-700); font-weight: 600; }

.map-frame {
  border: 0; width: 100%; height: 340px;
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}

/* ---------- Donate ---------- */
.give-amounts { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 26px; }
.give-chip {
  border: 2px solid var(--teal-200); background: var(--teal-50);
  color: var(--teal-800); font-weight: 800; font-size: 1.05rem;
  border-radius: var(--radius-pill); padding: 10px 22px;
  text-decoration: none !important; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.give-chip:hover { background: var(--teal-100); border-color: var(--teal-500); transform: translateY(-2px); }
.placeholder-note {
  display: none; margin-top: 16px;
  background: var(--orange-100); border: 1px solid #f3cf9a;
  border-radius: var(--radius-sm); padding: 12px 16px;
  font-size: 0.92rem; color: var(--orange-700); font-weight: 600;
}
.placeholder-note.is-visible { display: block; }

/* ---------- FAQ ---------- */
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 4px 22px; margin-bottom: 12px;
}
.faq summary { font-weight: 700; cursor: pointer; padding: 14px 0; list-style: none; position: relative; padding-right: 30px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 700; color: var(--orange-500);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-soft); padding-bottom: 14px; margin: 0; }

/* ---------- Real photos ---------- */
.photo {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--teal-50);
  position: relative;
}
.photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  border-radius: inherit;
}
.photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s var(--ease);
}
.photo:hover img { transform: scale(1.035); }

/* Community gallery */
.gallery {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
}
.gallery figure {
  margin: 0; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-md); position: relative; background: var(--teal-100);
}
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s var(--ease); }
.gallery figure:hover img { transform: scale(1.06); }
.gallery .g-tall { grid-row: span 2; }
.gallery .g-wide { grid-column: span 2; }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 16px 12px; color: #fff; font-size: 0.86rem; font-weight: 600;
  background: linear-gradient(transparent, rgba(8, 61, 76, 0.82));
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.gallery figure:hover figcaption { opacity: 1; transform: none; }
/* Touch devices have no hover, so the captions would never appear. */
@media (hover: none) {
  .gallery figcaption { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 168px; }
}
@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .gallery .g-tall, .gallery .g-wide { grid-row: auto; grid-column: auto; }
}

/* ---------- Photo placeholders ---------- */
.photo-slot {
  border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(135deg, var(--teal-100), var(--teal-200));
  border: 1px solid var(--teal-200);
  display: flex; align-items: center; justify-content: center;
  min-height: 280px; position: relative;
}
.photo-slot svg { width: 40%; opacity: 0.9; }
.photo-slot .photo-hint {
  position: absolute; bottom: 12px; left: 12px;
  background: rgba(255,255,255,0.85); border-radius: var(--radius-pill);
  font-size: 0.75rem; font-weight: 700; color: var(--teal-800);
  padding: 5px 13px;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--teal-900); color: rgba(255,255,255,0.85); padding: clamp(48px, 6vw, 72px) 0 0; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 38px;
  padding-bottom: 44px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand img { width: 44px; height: 44px; background: #fff; border-radius: 12px; padding: 4px; }
.footer-brand span { font-weight: 800; color: #fff; font-size: 1.05rem; line-height: 1.25; }
.site-footer h4 { color: #fff; font-size: 0.92rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-links a { color: rgba(255,255,255,0.82); font-size: 0.95rem; }
.footer-links a:hover { color: #fff; }
.footer-tagline { font-style: italic; color: var(--orange-500); font-weight: 600; margin-top: 14px; }
.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 0.95rem; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--orange-500); }
.footer-contact a { color: rgba(255,255,255,0.85); }
.social-row { display: flex; gap: 12px; margin-top: 18px; }
.social-row a {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.social-row a:hover { background: var(--teal-600); }
.social-row svg { width: 19px; height: 19px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding: 20px 0; font-size: 0.85rem; color: rgba(255,255,255,0.6);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Reveal animation ----------
   Content is ALWAYS visible by default. The entrance is a progressive
   enhancement only, so a blocked script, a failed observer, or an
   unsupported browser can never leave the page blank for a visitor. */
.reveal { opacity: 1; animation: faa-rise 0.75s cubic-bezier(0.22, 0.61, 0.36, 1); }
/* Only the position is animated — opacity is never touched, so the
   content stays readable even if the animation is frozen or skipped. */
@keyframes faa-rise {
  from { transform: translateY(24px); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { animation: none; opacity: 1; transform: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------- Testimonials carousel ---------- */
.testimonial-carousel {
  max-width: 780px; margin: 0 auto; text-align: center;
  background: var(--teal-50); border: 1px solid var(--teal-100);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 64px);
  position: relative;
}
.testimonial-carousel .quote-mark {
  width: 44px; height: 44px; margin: 0 auto 10px;
  color: var(--orange-500);
}
.testimonial { margin: 0; animation: t-fade 0.5s ease; }
.testimonial p {
  font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600;
  color: var(--teal-900); line-height: 1.55; margin-bottom: 18px;
}
.testimonial footer { color: var(--ink-soft); font-size: 0.95rem; }
.testimonial footer strong { color: var(--teal-700); }
@keyframes t-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.t-dots { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.t-dot {
  width: 11px; height: 11px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--teal-200); padding: 0; transition: background 0.2s ease, transform 0.2s ease;
}
.t-dot:hover { background: var(--teal-500); }
.t-dot.is-active { background: var(--orange-500); transform: scale(1.25); }

/* ---------- Newsletter ---------- */
.newsletter-card {
  background: #fff; border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow-md);
  padding: clamp(28px, 4vw, 44px);
  display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
}
.newsletter-card .nl-icon {
  width: 64px; height: 64px; border-radius: 18px;
  background: var(--teal-100); color: var(--teal-700);
  display: flex; align-items: center; justify-content: center;
}
.newsletter-card .nl-icon svg { width: 30px; height: 30px; }
.newsletter-card h2 { font-size: 1.45rem; margin-bottom: 0.25em; white-space: nowrap; }
.newsletter-card p { margin: 0; }
.newsletter-card .placeholder-note { max-width: 360px; }
@media (max-width: 860px) {
  .newsletter-card { grid-template-columns: 1fr; text-align: center; }
  .newsletter-card .nl-icon { margin: 0 auto; }
}

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--teal-600); color: #fff; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
}
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top:hover { background: var(--teal-700); }

/* ---------- Hero bubble float ---------- */
@keyframes floaty { from { transform: translateY(0); } to { transform: translateY(-9px); } }
.hero-art svg g { animation: floaty 3.6s ease-in-out infinite alternate; }
.hero-art svg g:nth-of-type(2) { animation-delay: 1.4s; }
@media (prefers-reduced-motion: reduce) {
  .hero-art svg g { animation: none; }
  .testimonial { animation: none; }
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--ink-soft); }

/* ==========================================================================
   PREMIUM AESTHETIC LAYER — refinements layered over the base styles
   ========================================================================== */

/* ---- Buttons: gradient fills + soft glow on hover ---- */
.btn { transition: transform .18s var(--ease), box-shadow .28s var(--ease), filter .18s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn-primary, .btn-primary:hover { background-image: var(--grad-accent); color: #fff; border-color: transparent; }
.btn-primary { box-shadow: 0 6px 16px rgba(18,128,156,.22); }
.btn-primary:hover { box-shadow: var(--shadow-glow-teal); filter: brightness(1.05); }
.btn-accent, .btn-accent:hover { background-image: var(--grad-orange); color: #fff; border-color: transparent; }
.btn-accent { box-shadow: 0 6px 16px rgba(240,148,10,.24); }
.btn-accent:hover { box-shadow: var(--shadow-glow-orange); filter: brightness(1.05); }
.btn-light:hover { box-shadow: var(--shadow-lg); }

/* ---- Header: airier glass + playful logo ---- */
.site-header { background: rgba(255,255,255,.80); backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); }
.site-header.is-scrolled { background: rgba(255,255,255,.90); }
.brand-logo { transition: transform .35s var(--ease); }
.brand:hover .brand-logo { transform: scale(1.07) rotate(-3deg); }

/* ---- Kicker: gradient eyebrow ---- */
.kicker { display: inline-flex; align-items: center; gap: 9px; }
.kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background-image: var(--grad-orange); }
.section--teal .kicker::before { background-image: linear-gradient(90deg, var(--teal-400), var(--orange-500)); }

/* ---- Section backgrounds: gentle depth ---- */
.section--soft { background: linear-gradient(180deg, var(--bg-soft) 0%, #eaf6f9 100%); }

/* ---- Cards: rounder, softer, animated accent bar ---- */
.card { border-radius: var(--radius-lg); border-color: #e9f1f4; position: relative; overflow: hidden;
  transition: transform .30s var(--ease), box-shadow .30s var(--ease); }
.card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background-image: var(--grad-accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card:hover::after { transform: scaleX(1); }

/* ---- Icon badges: gradient + gentle pop ---- */
.icon-badge { border-radius: 15px; transition: transform .3s var(--ease);
  background-image: linear-gradient(140deg, var(--teal-100), #c9e9f1); box-shadow: inset 0 0 0 1px rgba(18,128,156,.06); }
.icon-badge.orange { background-image: linear-gradient(140deg, #fdecd2, #fbdaa8); }
.card:hover .icon-badge, .pathway-card:hover .icon-badge { transform: scale(1.08) rotate(-2deg); }

/* ---- Checklist ticks: gradient ---- */
.checklist .check { background-image: var(--grad-accent); color: #fff; box-shadow: 0 3px 8px rgba(18,128,156,.25); }

/* ---- Hero: rich gradient + aurora glow ---- */
.hero { background: var(--grad-hero); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 55% at 84% 16%, rgba(51,192,212,.45), transparent 70%),
    radial-gradient(40% 52% at 10% 90%, rgba(240,148,10,.22), transparent 72%),
    radial-gradient(34% 42% at 52% 4%, rgba(255,255,255,.12), transparent 70%);
}
.hero-inner { position: relative; z-index: 1; }
.hero h1 { text-shadow: 0 2px 30px rgba(0,0,0,.14); }
.hero-kicker { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.42);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 18px rgba(0,0,0,.10); }
.hero-art svg { filter: drop-shadow(0 22px 48px rgba(0,0,0,.24)); }

/* ---- Interior page hero: same premium treatment ---- */
.page-hero { background: var(--grad-hero); }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 80% at 88% 12%, rgba(51,192,212,.38), transparent 70%),
    radial-gradient(40% 70% at 6% 92%, rgba(240,148,10,.16), transparent 72%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { text-shadow: 0 2px 24px rgba(0,0,0,.14); }
.page-hero .kicker { color: #ffd9a6; }

/* ---- Stats band: gradient + display numerals + dividers ---- */
.stats-band { background: linear-gradient(120deg, var(--teal-900), var(--teal-800)); position: relative; overflow: hidden; }
.stats-band::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(50% 130% at 85% 0%, rgba(51,192,212,.22), transparent 60%); }
.stats-grid { position: relative; }
.stat-num { font-family: var(--font-display); font-weight: 600;
  background-image: var(--grad-orange); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 641px) { .stats-grid > div:not(:first-child) { border-left: 1px solid rgba(255,255,255,.14); } }

/* ---- Mission quote: elegant serif ---- */
.mission-quote { background: linear-gradient(135deg, var(--teal-50), #ecf7fa); box-shadow: var(--shadow-sm);
  font-family: var(--font-display); font-weight: 500; font-size: 1.24rem; line-height: 1.5; letter-spacing: -0.005em; }

/* ---- Integration Pathway: gradient nodes + lift ---- */
.pathway-card { border-radius: var(--radius-lg); overflow: hidden; position: relative; z-index: 1;
  transition: transform .30s var(--ease), box-shadow .30s var(--ease); }
.pathway-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background-image: var(--grad-accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.pathway-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pathway-card:hover::after { transform: scaleX(1); }
.pathway-num { background-image: var(--grad-accent); color: #fff; box-shadow: 0 4px 12px rgba(18,128,156,.32); }

/* ---- CTA band: layered warmth ---- */
.cta-band { background-image: linear-gradient(125deg, var(--orange-600) 0%, var(--orange-500) 58%, var(--orange-400) 100%);
  border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.cta-band::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 90% at 90% 8%, rgba(255,255,255,.20), transparent 62%); }
.cta-band > * { position: relative; }

/* ---- Newsletter, testimonial, photo slots ---- */
.newsletter-card { border-radius: var(--radius-lg); background: linear-gradient(135deg, #fff, #f2fbfd); }
.newsletter-card .nl-icon { background-image: linear-gradient(140deg, var(--teal-100), #c9e9f1); }
.testimonial-carousel { border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--teal-50), #ecf7fa); }
.testimonial p { font-family: var(--font-display); font-weight: 500; }
.photo-slot { border-radius: var(--radius-lg); background: linear-gradient(140deg, var(--teal-100), var(--teal-200) 55%, #a6dbe7); }
.photo-slot svg { opacity: .5; }

/* ---- Footer: gradient crown + interactive socials ---- */
.site-footer { background: linear-gradient(180deg, #06333f, var(--teal-900) 55%); position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background-image: linear-gradient(90deg, var(--teal-400), var(--orange-500)); }
.footer-brand img { box-shadow: var(--shadow-sm); }
.social-row a { transition: transform .2s var(--ease), background .2s var(--ease); }
.social-row a:hover { background-image: var(--grad-accent); transform: translateY(-3px); }

/* ---- Back-to-top: gradient glow ---- */
.back-to-top { background-image: var(--grad-accent); box-shadow: var(--shadow-glow-teal); }

/* ==========================================================================
   CINEMATIC LAYER
   Rule for this whole block: motion may move, scale or tint things, but it
   must NEVER be the reason a visitor cannot read the page. Nothing here
   rests at opacity 0. If an animation is unsupported or frozen, the page
   simply looks static — never blank.
   ========================================================================== */

/* ---- Scroll progress ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0); z-index: 200;
  background: linear-gradient(90deg, var(--teal-400), var(--orange-500));
  box-shadow: 0 0 12px rgba(240, 148, 10, 0.55);
}
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: sp-grow linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes sp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---- Cinematic split hero ----
   The copy sits on the brand gradient (guaranteed contrast) while the
   photograph keeps its full brightness on the right, feathered into the
   gradient. Text is never laid over faces, so nothing has to be dimmed. */
.hero--photo {
  position: relative; overflow: hidden;
  min-height: clamp(540px, 84vh, 820px);
  display: flex; align-items: center;
  padding: clamp(84px, 11vw, 120px) 0 clamp(76px, 9vw, 110px);
  background: var(--grad-hero);
}
.hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(46% 60% at 88% 14%, rgba(51,192,212,.34), transparent 70%),
    radial-gradient(40% 52% at 4% 92%, rgba(240,148,10,.20), transparent 72%);
}
/* The photograph is the point — it must read as people, not as a texture.
   It is wide, at full brightness, and the fade is kept short so it becomes
   a real image just after the copy ends. */
/* The photograph is the point — it must read as people, not as a texture.
   The fade is deliberately short (14% of the panel) so the image resolves
   quickly, and the panel starts after the copy so the two never overlap. */
.hero-media {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 0;
  width: min(48%, 860px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 100%);
}
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 34%;
  transform: scale(1.05);
  animation: kenburns 30s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.6%, -1.4%, 0); }
}
/* A soft veil only where the copy column overlaps the image edge. */
/* Depth behind the words, then fully out of the way before the photograph
   starts — so the faces are seen at their true brightness. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(6,45,58,.86) 0%, rgba(6,45,58,.72) 34%,
    rgba(6,45,58,.22) 48%, rgba(6,45,58,0) 55%);
}
/* width:100% — the hero is a flex container, so without this the
   .container child shrinks to its content and drifts to the middle. */
.hero--photo .hero-inner { position: relative; z-index: 2; display: block; width: 100%; }
/* Kept narrow on purpose: the copy must finish before the photograph
   fades in, so no line of text ever sits on top of someone's face. */
.hero-copy { max-width: 560px; }
.hero--photo .lead { max-width: 30rem; }
@media (max-width: 900px) {
  /* On a phone there is no room beside the copy, so the photograph sits
     behind it: readable at the top, deepening under the text. */
  .hero-media {
    width: 100%; opacity: 1;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-media img { object-position: center 28%; }
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(6,45,58,.34) 0%, rgba(6,45,58,.80) 34%,
      rgba(6,45,58,.92) 62%, rgba(6,45,58,.95) 100%);
  }
  .hero-copy { max-width: none; }
  .hero--photo { padding-top: clamp(120px, 24vw, 180px); }
}
.hero--photo h1 {
  color: #fff; text-shadow: 0 2px 26px rgba(0,0,0,.35);
  font-size: clamp(2.4rem, 5.6vw, 4.1rem);
}
.hero--photo .lead {
  color: rgba(255,255,255,.94); max-width: 54ch;
  text-shadow: 0 1px 16px rgba(0,0,0,.32);
}
.hero-langs { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; }
.hero-langs span {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; font-weight: 700; font-size: .92rem;
  padding: 9px 18px; border-radius: var(--radius-pill);
}
.hero-langs span::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange-500); box-shadow: 0 0 0 0 rgba(240,148,10,.7);
  animation: dotpulse 2.4s ease-out infinite;
}
.hero-langs span:last-child::before { background: var(--teal-400); animation-delay: 1.2s; }
@keyframes dotpulse { 70% { box-shadow: 0 0 0 9px rgba(240,148,10,0); } 100% { box-shadow: 0 0 0 0 rgba(240,148,10,0); } }

.hero-scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: rgba(255,255,255,.82); font-size: .7rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; text-decoration: none !important;
}
.hero-scroll:hover { color: #fff; }
.hero-scroll .mouse {
  width: 25px; height: 40px; border: 2px solid currentColor;
  border-radius: 14px; position: relative;
}
.hero-scroll .mouse::after {
  content: ""; position: absolute; top: 7px; left: 50%; margin-left: -2px;
  width: 4px; height: 8px; border-radius: 3px; background: var(--orange-500);
  animation: scrolldot 1.8s ease-in-out infinite;
}
@keyframes scrolldot {
  0% { opacity: 0; top: 7px; } 28% { opacity: 1; }
  70% { opacity: 1; } 100% { opacity: 0; top: 21px; }
}
@media (max-width: 640px) { .hero-scroll { display: none; } }

/* ==========================================================================
   FORMS — real submissions handled by Netlify Forms
   ========================================================================== */
.faa-form {
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(23,149,181,.07), transparent 60%),
    #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 6px rgba(8,61,76,.05), 0 22px 60px rgba(8,61,76,.13);
  padding: clamp(28px, 4.4vw, 52px); max-width: 760px; margin: 0 auto;
  position: relative; overflow: hidden;
}
.faa-form::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background-image: linear-gradient(90deg, var(--teal-600), var(--teal-400) 45%, var(--orange-500));
}
.faa-form .hp { position: absolute; left: -9999px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

.field { position: relative; margin-bottom: 20px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg-soft); border: 1.5px solid var(--line);
  border-radius: 12px; padding: 24px 16px 10px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s;
  appearance: none;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--teal-200); }
.field textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.field select { cursor: pointer; padding-right: 42px; }
.field.has-select::after {
  content: ""; position: absolute; right: 16px; top: 30px; pointer-events: none;
  width: 9px; height: 9px; border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg);
}
.field label {
  position: absolute; left: 16px; top: 15px; pointer-events: none;
  color: var(--ink-soft); font-size: 1rem; font-weight: 500;
  transition: transform .18s var(--ease), color .18s var(--ease), font-size .18s var(--ease);
  transform-origin: left top;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: #fff; border-color: var(--teal-500);
  box-shadow: 0 0 0 4px rgba(23, 149, 181, .14);
}
/* Float the label when focused or filled */
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select.is-filled + label {
  transform: translateY(-9px) scale(.76); color: var(--teal-700);
}
.field textarea + label { top: 15px; }
.field .req { color: var(--orange-600); }
.field .hint { display: block; font-size: .82rem; color: var(--ink-soft); margin-top: 6px; }
.field input:user-invalid, .field textarea:user-invalid {
  border-color: #d4574a; box-shadow: 0 0 0 4px rgba(212, 87, 74, .12);
}

.form-legend {
  font-weight: 800; font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal-700);
  margin: 2px 0 26px; display: flex; align-items: center; gap: 12px;
}
.form-legend::before {
  content: ""; width: 26px; height: 3px; border-radius: 3px; flex: none;
  background-image: var(--grad-accent);
}
.form-legend::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.form-actions { margin-top: 30px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-submit { width: 100%; justify-content: center; gap: 10px; }
@media (min-width: 620px) { .btn-submit { width: auto; } }
.btn-submit::after {
  content: "→"; font-size: 1.15em; line-height: 1;
  transition: transform .22s var(--ease);
}
.btn-submit:hover::after { transform: translateX(4px); }
.faa-form.is-sending .btn-submit::after { content: ""; }

.form-privacy {
  font-size: .86rem; color: var(--ink-soft); margin: 16px 0 0;
  padding-left: 26px; position: relative; line-height: 1.55;
}
.form-privacy::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 15px; height: 15px; flex: none;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6f88' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

/* Submitting + success */
.faa-form.is-sending .btn-submit { opacity: .7; pointer-events: none; }
.faa-form.is-sending .btn-submit::after {
  content: ""; width: 15px; height: 15px; margin-left: 4px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.form-success {
  display: none; text-align: center; padding: 18px 4px 6px;
}
.faa-form.is-done .form-body { display: none; }
.faa-form.is-done .form-success { display: block; animation: faa-rise .6s var(--ease); }
.form-success .tick {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 18px;
  background-image: var(--grad-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-glow-teal);
}
.form-success .tick svg { width: 32px; height: 32px; }
.form-success h3 { font-size: 1.5rem; margin-bottom: 8px; }
.form-success p { color: var(--ink-soft); max-width: 42ch; margin: 0 auto; }
.form-error {
  display: none; margin-top: 16px; padding: 13px 16px; border-radius: var(--radius-sm);
  background: #fdecea; border: 1px solid #f0b7b0; color: #a33325; font-size: .93rem;
}
.faa-form.has-error .form-error { display: block; }
/* The contact form sits inside a .form-card, with its panels as siblings. */
.form-card.is-done > form,
.form-card.is-done > h2,
.form-card.is-done > p.muted,
.form-card.is-done > .form-error { display: none; }
.form-card.is-done .form-success { display: block; animation: faa-rise .6s var(--ease); }
.form-card.has-error .form-error { display: block; }
.form-card .hp { position: absolute; left: -9999px; }
.form-card form.is-sending .btn { opacity: .7; pointer-events: none; }

/* ==========================================================================
   PINNED INTEGRATION PATHWAY
   The pathway is a journey, so it is told as one: the visual stays pinned
   while the five steps scroll past it. Every step is ordinary, readable
   text — if the script never runs, this degrades to a plain list with the
   first photo. Nothing is ever hidden.
   ========================================================================== */
.ps { position: relative; }
.ps-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(30px, 5vw, 72px); align-items: start; }
.ps-sticky { position: sticky; top: clamp(90px, 14vh, 140px); }
.ps-media {
  position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-lg); background: var(--teal-900);
}
.ps-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity .7s var(--ease), transform 1.4s var(--ease);
}
/* The first image is visible by default, with or without JavaScript. */
.ps-media img:first-child { opacity: 1; transform: none; }
.ps-media img.is-on { opacity: 1; transform: none; }
.ps-media .ps-num {
  position: absolute; left: 20px; bottom: 16px; z-index: 2;
  font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1;
  text-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.ps-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(6,45,58,.72));
}
.ps-rail { margin-top: 20px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ps-rail span {
  display: block; height: 100%; width: 20%;
  background-image: var(--grad-accent); border-radius: 4px;
  transition: width .5s var(--ease);
}

.ps-steps { list-style: none; padding: 0; margin: 0; }
.ps-step {
  padding: clamp(34px, 6vh, 68px) 0;
  border-top: 1px solid var(--line);
  transition: opacity .45s var(--ease);
}
.ps-step:first-child { border-top: 0; padding-top: 0; }
.ps-step .ps-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .76rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft);
  transition: color .35s var(--ease);
}
.ps-step .ps-kicker::before {
  content: ""; width: 26px; height: 3px; border-radius: 3px;
  background: var(--line); transition: background .35s var(--ease), width .35s var(--ease);
}
.ps-step h3 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin: 14px 0 12px; }
.ps-step p { color: var(--ink-soft); max-width: 46ch; margin-bottom: 16px; }
/* Active state uses colour and weight — never visibility. */
.ps-step.is-current .ps-kicker { color: var(--orange-600); }
.ps-step.is-current .ps-kicker::before { background-image: var(--grad-orange); width: 40px; }
@media (min-width: 861px) {
  /* 0.72, not lower: an inactive step must still be comfortably readable
     for someone who is not scrolling — de-emphasis, never concealment. */
  .js .ps-step { opacity: .72; }
  .js .ps-step.is-current { opacity: 1; }
}
@media (max-width: 860px) {
  .ps-grid { grid-template-columns: 1fr; }
  .ps-sticky { position: static; margin-bottom: 26px; }
  .ps-media { aspect-ratio: 16/10; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-media img { transition: none; }
  .js .ps-step { opacity: 1; }
}

/* ---- Impact stories ---- */
.split.story--rev > *:first-child { order: 2; }
@media (max-width: 860px) { .split.story--rev > *:first-child { order: 0; } }
.story-body p { color: var(--ink-soft); margin-bottom: 1.1em; }
.story-body p:first-child::first-letter {
  float: left; font-family: var(--font-display); font-weight: 600;
  font-size: 3.1rem; line-height: .84; padding: 6px 10px 0 0;
  color: var(--teal-700);
}
.story-body p:last-child { margin-bottom: 0; }

/* ---- Interior page heroes, same split treatment ---- */
.page-hero--photo {
  position: relative; overflow: hidden;
  min-height: clamp(300px, 42vh, 440px);
  display: flex; align-items: center;
  padding: clamp(56px, 8vw, 92px) 0;
}
.page-hero--photo .ph-media {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 0;
  width: min(52%, 820px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 100%);
}
.page-hero--photo .ph-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
  transform: scale(1.04);
  animation: kenburns 34s ease-in-out infinite alternate;
}
.page-hero--photo .ph-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(6,45,58,.92) 0%, rgba(6,45,58,.84) 32%,
    rgba(6,45,58,.40) 52%, rgba(6,45,58,0) 68%);
}
.page-hero--photo .container { position: relative; z-index: 2; width: 100%; }
.page-hero--photo h1, .page-hero--photo p { max-width: 30rem; }
@media (max-width: 900px) {
  .page-hero--photo .ph-media {
    width: 100%; opacity: .32;
    -webkit-mask-image: none; mask-image: none;
  }
  .page-hero--photo .ph-scrim {
    background: linear-gradient(180deg, rgba(6,45,58,.86), rgba(6,45,58,.92));
  }
  .page-hero--photo h1, .page-hero--photo p { max-width: none; }
}

/* ---- Scroll-linked polish on real photos (enhancement only) ---- */
@supports (animation-timeline: view()) {
  .photo img {
    animation: photo-rise linear both;
    animation-timeline: view();
    animation-range: entry 6% cover 34%;
  }
  @keyframes photo-rise {
    from { transform: scale(1.1) translateY(14px); }
    to   { transform: scale(1); }
  }
  .gallery img {
    animation: gal-drift linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
  }
  @keyframes gal-drift {
    from { transform: scale(1.14); }
    to   { transform: scale(1.01); }
  }
  .gallery figure:hover img { animation: none; transform: scale(1.07); }
}

/* ---- Section rhythm ---- */
.section--soft { position: relative; }
.stats-band .stat-num { letter-spacing: -0.02em; }

@media (prefers-reduced-motion: reduce) {
  .hero-media img, .hero-langs span::before, .hero-scroll .mouse::after,
  .photo img, .gallery img, .scroll-progress { animation: none !important; }
  .hero-media img { transform: scale(1.02); }
}

/* ---- Motion: staggered entrances (enhancement only) ----
   Never hides content — see the base .reveal rule above. */
.grid > .reveal:nth-child(2), .pathway > .reveal:nth-child(2), .team-grid > .reveal:nth-child(2) { animation-delay: .07s; }
.grid > .reveal:nth-child(3), .pathway > .reveal:nth-child(3), .team-grid > .reveal:nth-child(3) { animation-delay: .14s; }
.grid > .reveal:nth-child(4), .pathway > .reveal:nth-child(4), .team-grid > .reveal:nth-child(4) { animation-delay: .21s; }
.grid > .reveal:nth-child(5), .pathway > .reveal:nth-child(5), .team-grid > .reveal:nth-child(5) { animation-delay: .28s; }
.grid > .reveal:nth-child(6), .team-grid > .reveal:nth-child(6) { animation-delay: .35s; }
.team-grid > .reveal:nth-child(7) { animation-delay: .42s; }
@media (prefers-reduced-motion: reduce) {
  .card:hover, .pathway-card:hover, .btn:hover, .brand:hover .brand-logo,
  .card:hover .icon-badge, .social-row a:hover { transform: none; }
}