/* ==========================================================================
   ABLE Initiatives: shared styles
   ========================================================================== */

/* Palette derived from the logo: the "A" monogram samples to indigo #1818A8
   shading to navy #303060, and the swoosh to gold #F0C048. The original coral
   accent (#FF5A36) appeared nowhere in the mark and failed WCAG contrast at
   3.1:1 for white text on the Donate button. */
:root {
  --bg: #F7F8FD;
  --bg-alt: #E9EBF8;
  --paper: #FFFFFF;
  --ink: #14143A;
  --ink-soft: #4A4D70;
  /* Darkened from the original soft grey, which sat at 3.1:1 and failed WCAG AA
     for the small print it is used on (captions, dates, source credits, footer). */
  --muted: #63688C;
  --line: #E0E3F2;
  --line-strong: #C7CBE6;

  --accent: #2B2BC4;
  --accent-dark: #1B1B8F;
  --accent-tint: #E4E4FA;
  /* Text on --accent, and on a branch colour. Both flip together with the
     palette, which is why they are variables rather than a hardcoded #fff. */
  --accent-ink: #FFFFFF;
  --on-brand: #FFFFFF;
  /* The gold from the logo's swoosh, as a colour in its own right. The hero
     accents used to borrow var(--business) purely because it happened to be
     gold, which quietly tied the hero to a branch colour — change the Business
     branch and the homepage headline would have changed with it. */
  --gold: #F0C048;
  --header-bg: rgba(247, 248, 253, 0.88);

  /* Dark blocks (CTA band, contact panel, primary button, skip link). Kept
     separate from --ink so the palette can be inverted without rewriting rules:
     --ink is "text colour", --panel is "dark surface". */
  --panel: #14143A;
  --on-panel: #FFFFFF;
  --on-panel-soft: #AFB4D8;
  --on-panel-line: #3A3E7A;

  --sat: #2B2BC4;
  --sat-tint: #E4E4FA;
  --health: #10B76E;
  --health-tint: #DEF7EA;
  --business: #F0C048;
  --business-tint: #FCF1D5;
  /* Darkened branch colours, for text sitting on the matching tint. The
     branch colours themselves fail there — health reads 2.3:1 on its own
     tint and business 1.5:1. These land at 5.6:1 and 5.7:1. */
  --sat-ink: #2B2BC4;
  --health-ink: #0A6E42;
  --business-ink: #7A5A08;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(20, 20, 58, 0.07);
  --shadow-md: 0 8px 24px rgba(20, 20, 58, 0.10);

  --container: 1160px;

  --font-display: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}



* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ---------- accessibility ---------- */
/* Keyboard users need to see where they are. :focus-visible keeps this off
   mouse clicks, so it costs the pointer experience nothing. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  background: var(--panel);
  color: var(--on-panel);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* The reveal animation is the only thing hiding this content, so make sure
     it is shown outright rather than transitioned into view. */
  .reveal { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.02em;
}

p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- utility ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}
.section { padding: 96px 0; }
.section-alt { background: var(--bg-alt); }
.section-tight { padding: 64px 0; }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.lede { font-size: 19px; color: var(--ink-soft); }
.muted { color: var(--muted); }
.divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--panel); color: var(--on-panel); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-dark); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--ink); }
.btn-sm { padding: 9px 18px; font-size: 13.5px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  max-width: var(--container);
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  white-space: nowrap;
}
/* No background or border: those framed an opaque logo. The transparent
   monogram sits straight on the header. The tinted box moves to the fallback,
   which still needs to read as a deliberate placeholder. */
.brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
/* logo-main.png is the bare "A" monogram on a transparent background, so it
   simply fits the square. (This previously scaled a wide lockup to 272% and
   pinned it top-left to crop the monogram out of it.) */
.brand-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-mark-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
/* ---- About submenu ---------------------------------------------------- */
/* The parent is a <button>, not a link: it goes nowhere on its own, and a
   button is what screen readers and keyboards expect for something that
   expands. It is styled to match the sibling links exactly. */
.nav-parent {
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-parent::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.18s ease;
}
.nav-parent:hover, .has-submenu.is-open .nav-parent { color: var(--ink); }
/* Underline the parent when one of its children is the current page. */
.has-submenu.is-current .nav-parent { color: var(--ink); border-bottom-color: var(--accent); }
.has-submenu.is-open .nav-parent::after { transform: rotate(-135deg) translate(-2px, -2px); }
.has-submenu { position: relative; }
.submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: -14px;
  min-width: 190px;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 20;
}
.has-submenu.is-open .submenu,
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border-bottom: none;
  font-size: 14.5px;
  white-space: nowrap;
}
.submenu a:hover, .submenu a[aria-current="page"] {
  background: var(--accent-tint);
  color: var(--accent-dark);
  border-bottom: none;
}

.nav-links a:hover, .nav-links a[aria-current="page"] {
  color: var(--ink);
  border-color: var(--accent);
}
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* Switch to the mobile nav at 1040px, not 860px. The full nav row needs
   about 1040px before the brand, links and buttons stop colliding, so
   between 861px and 1040px the desktop nav was rendering on top of itself.
   Measure before lowering this: brand-right to links-left should stay
   positive at the breakpoint width. */
@media (max-width: 1040px) {
  /* Dropdown panel anchored to the bottom of the header, so it never
     overlaps a taller-than-expected header. */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 16px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    /* Without visibility the closed menu is invisible but still focusable, so
       tabbing on a phone lands you in links you can't see. It is deliberately
       left out of the transition: delaying it to preserve the fade-out makes
       correctness depend on a timer, and the menu simply disappearing is a
       fine trade for a guarantee that it is never focusable while closed. */
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  .nav-links a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  /* The submenu drops out of the floating-card treatment here and becomes an
     indented list inside the panel; a positioned dropdown would render off
     the edge of a phone screen. */
  .has-submenu { width: 100%; }
  .nav-parent {
    width: 100%;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 17px;
  }
  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 0 0 16px;
    display: none;
  }
  .has-submenu.is-open .submenu { display: block; }
  .submenu a { font-size: 15.5px; padding: 12px 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .submenu a:hover, .submenu a[aria-current="page"] { background: none; }
  .nav-links li:last-child a { border-bottom: none; }
  .site-header.nav-open .nav-links {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
  }
  .nav-toggle { display: flex; }
  .nav-actions .btn-outline { display: none; }
}

@media (max-width: 560px) {
  .nav { padding: 14px 18px; }
  .brand { font-size: 18px; }
  .brand-mark { width: 42px; height: 42px; }
  /* Donate stays reachable inside the menu; drop the top-bar button so the
     brand name fits on one line on narrow phones. */
  .nav-actions .btn-accent { display: none; }
}

/* ---------- hero banner (full-bleed photo + headline) ---------- */
.hero-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(440px, 62vh, 660px);
  padding: 72px 0 64px;
  overflow: hidden;
  /* The text on top is white. If the photo fails to load there would otherwise
     be nothing behind it but the light page background, so the section carries
     its own dark ground as a floor. */
  background: #0B0B20;
}
.hero-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* The scrim. A flat overlay would either wash out the photo or leave the text
   unreadable where the image is bright, so it is a gradient: heaviest behind the
   text at the bottom-left, lifting towards the top right where the photo is
   worth seeing. The floor keeps the lightest area dark enough for white text. */
.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(11, 11, 32, 0.95) 0%, rgba(11, 11, 32, 0.82) 45%, rgba(11, 11, 32, 0.72) 100%),
    linear-gradient(to right, rgba(11, 11, 32, 0.55) 0%, rgba(11, 11, 32, 0) 65%);
}
.hero-banner-content { position: relative; max-width: var(--container); }
.hero-banner-content > * { max-width: 760px; }
.hero-banner h1 {
  font-size: clamp(36px, 5.4vw, 60px);
  color: #fff;
  margin-bottom: 22px;
  text-wrap: balance;
}
.hero-banner .eyebrow { color: var(--gold); }
.hero-banner .eyebrow::before { background: var(--gold); }
/* Spells out the acronym, with the initials picked out in gold so the letters
   read as A.B.L.E. without needing to write the dotted form separately. It is
   plain text, so a screen reader still reads the phrase normally. */
.hero-acronym {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #E6E8F5;
  margin: -6px 0 24px;
}
.hero-acronym .ini {
  color: var(--gold);
  font-weight: 800;
  font-size: 1.18em;
}
.hero-banner .lede { color: #E6E8F5; margin-bottom: 32px; }
.hero-banner .hero-note { color: #B9BEDC; }
/* A white button reads as the primary action on a dark photo; the navy
   .btn-primary would disappear into the scrim. */
.btn-on-image { background: #fff; color: var(--panel); }
.btn-on-image:hover { background: var(--gold); color: var(--panel); }
/* .btn-on-dark's border is tuned for the flat navy CTA band; over a photograph
   that dark indigo edge all but disappears, so lift it here. */
.hero-banner .btn-outline { border-color: rgba(255, 255, 255, 0.45); }
.hero-banner .btn-outline:hover { border-color: #fff; }

@media (max-width: 720px) {
  .hero-banner {
    min-height: 0;
    padding: 56px 0 48px;
    align-items: center;
  }
  /* Weight the scrim evenly on small screens, where the text covers most of
     the frame and there is no "clear" side of the photo left to protect. */
  .hero-banner::after {
    background: linear-gradient(to top, rgba(11, 11, 32, 0.94) 0%, rgba(11, 11, 32, 0.82) 100%);
  }
}

/* ---------- hero ---------- */
.hero {
  padding: 56px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -140px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-tint) 0%, rgba(255, 227, 218, 0) 70%);
  z-index: 0;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(36px, 5vw, 58px);
  margin-bottom: 22px;
}
.hero .lede { margin-bottom: 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.hero-note { font-size: 13.5px; color: var(--muted); }

/* photo-card: image-insertion slot used wherever a testimonial quote used to live */
.photo-card {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.photo-card.ratio-wide { aspect-ratio: 5 / 4; }
.photo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-card-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  color: var(--muted);
}
.photo-card-fallback svg { opacity: 0.5; }
.photo-card-fallback p { font-size: 13px; margin: 0; max-width: 220px; }
.photo-card-fallback code {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11.5px;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ---------- cards / grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }

/* program card */
.program-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.program-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.program-card.sat { border-top-color: var(--sat); }
.program-card.health { border-top-color: var(--health); }
.program-card.business { border-top-color: var(--business); }

.program-head { display: flex; align-items: center; gap: 14px; }
.program-name { font-size: 19px; margin: 0; }
.program-tag { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* logo slot (upload area for branch logos) */
.logo-slot {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--on-brand);
}
/* The large logo plate on each branch page. The branch logos are transparent
   PNGs, so this simply follows the palette. */
.branch-logo-plate {
  width: 170px;
  height: 170px;
  margin: 0 auto 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.branch-logo-plate img { width: 100%; height: 100%; object-fit: contain; padding: 20px; }
/* Shown only when the logo file is absent, so it needs the branch colour to sit
   on rather than the white plate. */
.branch-logo-plate .logo-slot-fallback {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  color: var(--on-brand);
}
.branch-logo-plate.sat .logo-slot-fallback { background: var(--sat); color: #FFFFFF; }
.branch-logo-plate.health .logo-slot-fallback { background: var(--health); color: var(--panel); }
.branch-logo-plate.business .logo-slot-fallback { background: var(--business); color: var(--panel); }

/* The branch logos are full-colour transparent PNGs (indigo, red, green), so
   the chip needs a neutral ground: a red Health mark on a green tile clashes.
   The branch colour moves to the fallback, which is the only part that still
   needs it. */
.logo-slot { background: var(--paper); border: 1px solid var(--line); }
.logo-slot .logo-slot-fallback {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  color: var(--on-brand);
}
/* Text colour is set per branch rather than from --on-brand: indigo is dark
   enough for white, but the green and gold are not (white on gold is 1.7:1).
   These only render when a logo file is missing, which is precisely when they
   need to be legible. */
.logo-slot.sat .logo-slot-fallback { background: var(--sat); color: #FFFFFF; }
.logo-slot.health .logo-slot-fallback { background: var(--health); color: var(--panel); }
.logo-slot.business .logo-slot-fallback { background: var(--business); color: var(--panel); }
.logo-slot img {
  width: 100%; height: 100%; object-fit: contain; padding: 4px;
  position: absolute; inset: 0;
}

.logo-slot-lg {
  width: 96px;
  height: 96px;
  border-radius: 18px;
}
.logo-slot-fallback { display: none; }
.logo-slot-lg .logo-slot-fallback { font-size: 26px; }

.logo-upload {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
}
.logo-upload code {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--ink-soft);
}

.program-body ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14.5px;
}
.program-body li { margin-bottom: 6px; }

/* ---------- branch detail sections (programs.html) ---------- */
.branch-section {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
  padding: 72px 0;
}
.branch-section:not(:last-child) { border-bottom: 1px solid var(--line); }
.branch-section.reverse { direction: rtl; }
.branch-section.reverse > * { direction: ltr; }
.branch-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 7px;
  border-radius: 999px;
  background: var(--bg-alt);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 18px;
}
.branch-visual {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.branch-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.branch-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--ink-soft);
}
.branch-list .dot {
  width: 7px; height: 7px; border-radius: 50%;
  margin-top: 7px; flex-shrink: 0;
}
.branch-section.sat .dot { background: var(--sat); }
.branch-section.health .dot { background: var(--health); }
.branch-section.business .dot { background: var(--business); }

@media (max-width: 900px) {
  .branch-section, .branch-section.reverse { grid-template-columns: 1fr; direction: ltr; }
}

/* ---------- steps / how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step-num {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { font-size: 14.5px; margin-bottom: 0; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---------- team ---------- */
/* Five executives, so five columns keeps them on one row rather than
   orphaning the last card. */
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.team-card { text-align: left; }
.avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, var(--panel) 0%, var(--line-strong) 100%);
  color: var(--on-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Officers without a headshot. The default .avatar gradient is a dark slab,
   and a grid of those reads as failed image loads; a soft branch tint with
   the branch initials reads as a deliberate placeholder instead, and it
   fills in with no markup change once a photo arrives. */
.avatar-initials { background: var(--line); color: var(--ink-soft); letter-spacing: 0.04em; }
.avatar-initials.sat { background: var(--sat-tint); color: var(--sat-ink); }
.avatar-initials.health { background: var(--health-tint); color: var(--health-ink); }
.avatar-initials.business { background: var(--business-tint); color: var(--business-ink); }
.team-subhead {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.team-grid + .team-subhead { margin-top: 56px; }

/* The two top-level headings on Our Team. These have to outrank .team-subhead,
   which labels the individual branches directly beneath "Branch officers" —
   at the same weight the two levels read as one flat list of five sections.
   The leading rule is the .eyebrow accent bar scaled up, so this stays in the
   vocabulary the rest of the site already uses. */
.team-section-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 26px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.team-section-title::before {
  content: "";
  flex: none;
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}
/* Trailing hairline: fills the width so the heading reads as a section
   divider rather than a stray line of large text. */
.team-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.team-grid + .team-section-title { margin-top: 76px; }
@media (max-width: 600px) {
  .team-section-title { font-size: 21px; gap: 12px; }
  .team-section-title::before { width: 20px; }
}



.team-name { font-weight: 600; color: var(--ink); font-size: 15.5px; margin-bottom: 2px; }
.team-role { font-size: 13px; color: var(--accent-dark); margin-bottom: 2px; }
.team-school { font-size: 12.5px; color: var(--muted); }
@media (max-width: 1080px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- values ---------- */
.value-card { display: flex; flex-direction: column; gap: 10px; }
.value-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
}

/* ---------- pathway cards (get-involved) ---------- */
.pathway-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.pathway-card h3 { font-size: 22px; }
.role-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.role-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.role-list strong { color: var(--ink); font-size: 14.5px; }
.role-list span { color: var(--ink-soft); }

.contact-panel {
  background: var(--panel);
  color: #E4E5F0;
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
}
.contact-panel h3 { color: var(--on-panel); }
/* The eyebrow sits on the dark panel, so it needs the on-panel scale rather
   than the page-background accent, which would nearly disappear here. */
.contact-panel .eyebrow { color: var(--on-panel-soft); }
.contact-panel .eyebrow::before { background: var(--on-panel-soft); }
.contact-panel a.btn-accent { margin-top: 10px; }
.contact-panel .muted { color: var(--on-panel-soft); }

/* ---------- events / gallery ---------- */
.event-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.event-photo {
  aspect-ratio: 4/3;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.event-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.event-photo-fallback {
  display: none;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  padding: 0 20px;
}
.event-photo-fallback svg { margin-bottom: 8px; opacity: 0.5; }
.event-body { padding: 20px 22px 24px; }
.event-branch {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.event-branch.sat { background: var(--sat-tint); color: var(--sat); }
.event-branch.health { background: var(--health-tint); color: var(--health); }
.event-branch.business { background: var(--business-tint); color: var(--business); }
.event-date { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.event-title { font-size: 17px; margin-bottom: 6px; }
.event-desc { font-size: 14px; margin-bottom: 0; }

.gallery-note {
  border: 1px dashed var(--line-strong);
  background: var(--bg-alt);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 48px;
}
.gallery-note code {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* ---------- quote ---------- */
.quote-block {
  border-left: 3px solid var(--accent);
  padding-left: 28px;
  margin: 0;
}
.quote-block p {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 14px;
}
.quote-block cite {
  font-style: normal;
  font-size: 13.5px;
  color: var(--muted);
}

/* ---------- donate ---------- */
.donate-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.donate-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-md);
}
.donate-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0 24px;
}
.amount-chip {
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 14px 8px;
  text-align: center;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  cursor: pointer;
  font-size: 15px;
  font-family: inherit;
  line-height: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.amount-chip:hover { border-color: var(--ink); }
.amount-chip.selected { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-dark); }
.donate-footnote { font-size: 12.5px; color: var(--muted); margin-top: 14px; text-align: center; }

.use-list { display: grid; gap: 18px; margin-top: 28px; }
.use-item { display: flex; gap: 16px; align-items: flex-start; }
.use-num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent-dark);
  font-size: 15px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.use-item h4 { font-size: 15.5px; margin-bottom: 4px; }
.use-item p { font-size: 14px; margin-bottom: 0; }

.give-other { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) {
  .donate-hero { grid-template-columns: 1fr; }
  .give-other { grid-template-columns: 1fr; }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--on-panel); margin-bottom: 6px; }
.cta-band p { color: var(--on-panel-soft); margin-bottom: 0; }
/* Outline buttons sitting on a dark panel. Replaces a hardcoded inline style
   that was duplicated in the markup and invisible to the palette. */
.btn-on-dark { color: var(--on-panel); border-color: var(--on-panel-line); }
.btn-on-dark:hover { border-color: var(--on-panel); }
.cta-band .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 64px 0 32px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-brand p { font-size: 14px; max-width: 280px; }
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { font-size: 14.5px; color: var(--ink-soft); }
.footer-col a:hover { color: var(--accent-dark); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- global education stats ---------- */
.world-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.world-stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.world-num {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-dark);
  margin-bottom: 14px;
}
.world-stat p {
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 16px;
  flex: 1;
}
/* Sourcing every figure is the whole point of this section: an uncited stat on
   a nonprofit site is a liability, not a credential. */
.world-stat cite {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.world-note {
  max-width: 720px;
  margin: 40px auto 0;
  text-align: center;
  color: var(--ink-soft);
}
@media (max-width: 860px) {
  .world-grid { grid-template-columns: 1fr; }
  .world-num { font-size: 38px; }
}

/* ---------- event timeline ---------- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 780px;
}
.timeline-item {
  position: relative;
  padding: 0 0 34px 38px;
}
.timeline-item:last-child { padding-bottom: 0; }
/* The spine is drawn per item rather than once down the whole list, so it stops
   at the final marker instead of trailing past it. */
.timeline-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 21px;
  bottom: -7px;
  width: 2px;
  background: var(--line-strong);
  border-radius: 1px;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muted);
  border: 3px solid var(--bg-alt);
  box-shadow: 0 0 0 2px var(--line-strong);
}
.timeline-item.sat::before { background: var(--sat); box-shadow: 0 0 0 2px var(--sat); }
.timeline-item.health::before { background: var(--health); box-shadow: 0 0 0 2px var(--health); }
.timeline-item.business::before { background: var(--business); box-shadow: 0 0 0 2px var(--business); }
.timeline-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.timeline-date { font-size: 13px; color: var(--muted); }
.timeline-body h3 { font-size: 19px; margin-bottom: 6px; }
.timeline-body p { font-size: 14.5px; margin-bottom: 0; max-width: 60ch; }

@media (max-width: 560px) {
  .timeline-item { padding-left: 30px; padding-bottom: 28px; }
  .timeline-body h3 { font-size: 17px; }
}

/* ---------- guest speakers ---------- */
.speaker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 380px));
  gap: 28px;
}
.speaker-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.speaker-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.speaker-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* With a single speaker the card would sit alone in a wide grid looking like a
   gap. Lay that one case out horizontally so it reads as deliberate; it reverts
   to the normal grid as soon as a second speaker is added. */
@media (min-width: 760px) {
  .speaker-card:only-child { grid-column: 1 / -1; max-width: 700px; flex-direction: row; }
  .speaker-card:only-child .speaker-photo { flex: 0 0 250px; aspect-ratio: auto; }
  .speaker-card:only-child .speaker-body { display: flex; flex-direction: column; justify-content: center; }
}
/* Column layout so the event line can sit at the bottom of the card. Without
   it the divider follows the title, and a two-line title (Michelle's) leaves
   the pair misaligned now that the descriptions are gone. */
.speaker-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.speaker-body h3 { font-size: 18px; margin-bottom: 2px; }
.speaker-body p { font-size: 14.5px; }
.speaker-org {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
  margin-bottom: 12px;
}
.speaker-event {
  font-size: 12.5px;
  color: var(--muted);
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.speaker-note {
  font-size: 14px;
  color: var(--muted);
  margin: 32px 0 0;
}
.speaker-note a { color: var(--accent-dark); font-weight: 600; text-decoration: underline; }

/* ---------- reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- page header (inner pages) ---------- */
.page-header { padding: 72px 0 56px; }
.page-header h1 { font-size: clamp(32px, 4.5vw, 46px); }
.page-header .lede { max-width: 620px; }

/* ---------- carousel (sliding photo feature) ---------- */
.carousel {
  position: relative;
  aspect-ratio: 16 / 8;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.carousel-track { position: absolute; inset: 0; }
.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease;
}
.carousel-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.carousel-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel-slide .photo-card-fallback { position: absolute; inset: 0; display: none; }
.carousel-slide .photo-card-fallback svg { width: 32px; height: 32px; }
.carousel-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 30px 22px;
  background: linear-gradient(to top, rgba(27, 42, 58, 0.82), rgba(27, 42, 58, 0));
  color: #fff;
  z-index: 2;
}
.carousel-caption .cap-event { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.9; }
.carousel-caption .cap-title { font-family: var(--font-display); font-size: 19px; margin-top: 4px; }
.carousel-dots {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.carousel-dots .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-dots .dot.is-active { background: #fff; transform: scale(1.2); }
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(27, 42, 58, 0.45);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.carousel-arrow:hover { background: rgba(27, 42, 58, 0.7); }
.carousel-arrow.prev { left: 18px; }
.carousel-arrow.next { right: 18px; }
/* Top-right: the caption gradient occupies the bottom edge and the arrows
   take the vertical middle. */
.carousel-pause {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  border: none;
  background: rgba(27, 42, 58, 0.45);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.carousel-pause:hover { background: rgba(27, 42, 58, 0.7); }
@media (max-width: 640px) {
  .carousel { aspect-ratio: 4 / 5; }
  .carousel-arrow { width: 32px; height: 32px; font-size: 15px; }
}

/* ---------- photo gallery (events.html) ---------- */
.gallery-event {
  padding: 56px 0;
}
.gallery-event:not(:last-child) { border-bottom: 1px solid var(--line); }
.gallery-event-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.gallery-event-head h2 { font-size: 24px; margin-bottom: 6px; }
.gallery-event-date {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-tint);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
  justify-content: center;
  gap: 18px;
}
.gallery-grid .event-photo { border-radius: var(--radius-md); border: 1px solid var(--line); }
/* Wide screenshots (e.g. the webinar capture) show in full instead of being
   cropped to the middle, so you can actually see what's on screen. */
.gallery-grid[data-event="preps-webinar"] .event-photo img { object-fit: contain; }

.gallery-add-tile {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--line-strong);
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  text-align: center;
  padding: 12px;
}
.gallery-add-tile:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-tint); }
.gallery-add-tile .plus {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  line-height: 1;
}
.gallery-add-tile span.label { font-size: 12.5px; font-weight: 600; }
.gallery-add-tile input[type="file"] { display: none; }

.gallery-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  background: var(--panel);
  color: var(--on-panel);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 200;
  max-width: 90vw;
  text-align: center;
}
.gallery-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.gallery-intro-note {
  border: 1px dashed var(--line-strong);
  background: var(--bg-alt);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 44px;
}
.gallery-intro-note code {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.gallery-manage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  margin-bottom: 16px;
}
.gallery-manage-status { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-soft); }
.gallery-manage-status .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  flex-shrink: 0;
}
.gallery-manage-status .dot.is-connected { background: var(--health); }

.event-photo-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(27, 42, 58, 0.72);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
  z-index: 2;
}
.event-photo:hover .event-photo-remove { opacity: 1; transform: translateY(0); }
.event-photo-remove:hover { background: var(--accent-dark); }

@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .cta-band { padding: 36px 24px; flex-direction: column; align-items: flex-start; }
}