/* ==========================================================================
   Alabamians for Legal Reform - shared stylesheet (v2)
   Design system reference for future ALR creative assets:
     Navy   #283d50 - headings, primary buttons, dark blocks (used sparingly)
     Tan    #c38f67 - accents: tags, icons, small highlights
     Base   #ffffff / #f6f6f3 - page backgrounds
     Serif  "Source Serif 4" - all reading copy + headings
     Sans   "Inter" - nav, buttons, labels, meta text (UI chrome only)
   ========================================================================== */

:root {
  --navy: #283d50;
  --navy-dark: #182530;
  --navy-mid: #33495e;
  --tan: #c38f67;
  --tan-dark: #a8734c;
  --tan-tint: rgba(195, 143, 103, 0.14);
  --navy-tint: rgba(40, 61, 80, 0.06);
  --cream: #fffdf4;
  --white: #ffffff;
  --bg-alt: #f6f6f3;
  --text: #26313c;
  --text-muted: #62707c;
  --border: #e6e6e1;
  --shadow-sm: 0 6px 18px -10px rgba(24, 37, 48, 0.18);
  --shadow: 0 18px 40px -18px rgba(24, 37, 48, 0.28);
  --radius-lg: 22px;
  --radius: 14px;
  --radius-sm: 10px;
  --container: 1180px;
}

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

body {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Source Serif 4", Georgia, serif;
  color: var(--navy);
  margin: 0 0 .5em;
  line-height: 1.2;
  font-weight: 700;
}

p { margin: 0 0 1em; color: var(--text-muted); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

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

/* UI chrome (nav, buttons, labels, meta) uses the sans face for clarity */
.ui, nav, .btn, .tag, .meta, .chip, .site-footer .footer-col h4,
.form-field label, .nav-desktop a, .nav-mobile a, .topbar, .steps-row .step-num {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

/* Small category badge used on cards (Report, Survey, Guide, etc.) */
.chip {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tan-dark);
  background: var(--tan-tint);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.section { padding: 76px 0; }
.section--alt { background: var(--bg-alt); }
.section--navy { background: var(--navy); }
.section--navy h2, .section--navy h3, .section--navy h4 { color: var(--cream); }
.section--navy p { color: rgba(255,253,244,.75); }

.section-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 42px;
  flex-wrap: wrap;
}
.section-row h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 0; max-width: 460px; }
.section-row p { max-width: 420px; margin-bottom: 0; font-size: 15.5px; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14.5px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn--navy { background: var(--navy); color: var(--cream); }
.btn--navy:hover { background: var(--navy-dark); }
.btn--tan { background: var(--tan); color: var(--navy-dark); }
.btn--tan:hover { background: var(--tan-dark); }
.btn--white { background: var(--white); color: var(--navy); }
.btn--white:hover { background: var(--cream); }
.btn--outline-light { border-color: rgba(255,253,244,.55); color: var(--cream); background: transparent; }
.btn--outline-light:hover { background: rgba(255,253,244,.12); }
.btn--outline { border-color: var(--border); color: var(--navy); background: var(--white); }
.btn--outline:hover { border-color: var(--navy); }
.btn--sm { padding: 9px 20px; font-size: 13.5px; }

/* ---------------- Header ---------------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 82px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; height: 100%; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.brand img { height: 38px; width: auto; flex-shrink: 0; }
.brand .brand-word {
  font-family: "Source Serif 4", serif;
  font-weight: 700;
  font-size: 16.5px;
  color: var(--navy);
  line-height: 1.2;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-desktop { display: flex; align-items: center; gap: 30px; }
.nav-desktop a {
  color: var(--text);
  font-weight: 500;
  font-size: 14.5px;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav-desktop a:hover, .nav-desktop a.active { color: var(--navy); border-color: var(--tan); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nav-toggle { display: none; background: none; border: none; color: var(--navy); font-size: 24px; cursor: pointer; flex-shrink: 0; }

.nav-mobile {
  display: none;
  flex-direction: column;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 8px 24px 20px;
  /* Positioned as a standalone overlay panel (not part of the header's flow box) so
     opening it never changes the sticky header's height. Letting it grow the header's
     own box while stuck is what caused it to paint see-through over whatever section
     was currently in view on some mobile browsers. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  box-shadow: var(--shadow);
  max-height: calc(100vh - 82px);
  overflow-y: auto;
}
.nav-mobile a { color: var(--text); padding: 12px 0; border-bottom: 1px solid var(--border); font-weight: 500; }
.nav-mobile.open { display: flex; }

/* ---------------- Hero (rounded card, like reference) ---------------- */
.hero-wrap { padding: 28px 0 0; }
.hero-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-dark);
  min-height: 420px;
  display: flex;
  align-items: center;
}
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(24,37,48,.92) 25%, rgba(40,61,80,.68) 80%);
  z-index: 1;
}
.hero-inner { position: relative; z-index: 2; padding: 64px 56px; max-width: 640px; }
.hero-inner h1 {
  color: var(--cream);
  font-size: clamp(32px, 4.6vw, 50px);
  margin-bottom: 18px;
}
.hero-inner h1 span { color: var(--tan); font-style: italic; }
.hero-inner p {
  color: rgba(255,253,244,.82);
  font-size: 17px;
  max-width: 540px;
  margin-bottom: 30px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Smaller page-header version of the hero card, used on About/News/Resources */
.page-hero-wrap { padding: 28px 0 0; }
.page-hero-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-dark);
  min-height: 230px;
  display: flex;
  align-items: center;
}
.page-hero-card img.hero-bg-img { object-position: center 30%; }
.page-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(24,37,48,.90) 30%, rgba(40,61,80,.6) 85%);
  z-index: 1;
}
.page-hero-card .page-hero-inner { position: relative; z-index: 2; padding: 48px 52px; max-width: 620px; }
.page-hero-card h1 { color: var(--cream); font-size: clamp(28px, 4vw, 40px); }
.page-hero-card p { color: rgba(255,253,244,.85); font-size: 16.5px; max-width: 560px; margin-bottom: 0; }

/* ---------------- Coalition line ---------------- */
.coalition-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 18px;
}
.coalition-line span:not(:last-child)::after { content: "•"; margin: 0 10px; color: var(--tan); }

/* ---------------- Who we are: text + feature list ---------------- */
.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.split-row.reverse > *:first-child { order: 2; }
.split-row.reverse > *:last-child { order: 1; }
.split-row.align-center { align-items: center; }

.priority-detail__media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4/3;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.priority-detail__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.priority-detail__media svg { width: 56px; height: 56px; color: var(--tan); position: relative; z-index: 1; }
.priority-detail__num {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--tan-dark);
  background: var(--tan-tint);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.fact-badges { display: flex; gap: 30px; margin-top: 26px; flex-wrap: wrap; }
.fact-badge { display: flex; align-items: center; gap: 12px; }
.fact-badge .circle {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy-tint); color: var(--navy);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fact-badge .circle svg { width: 20px; height: 20px; }
.fact-badge strong { display: block; font-family: "Inter", sans-serif; font-size: 13.5px; color: var(--navy); font-weight: 700; }
.fact-badge span { font-family: "Inter", sans-serif; font-size: 12px; color: var(--text-muted); }

.feature-list { display: flex; flex-direction: column; gap: 18px; }
.feature-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.feature-item:hover { box-shadow: var(--shadow-sm); border-color: transparent; }
.feature-item .icon-box {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--navy); color: var(--cream);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.feature-item .icon-box svg { width: 22px; height: 22px; }
.feature-item h3 { font-size: 17px; margin-bottom: 4px; }
.feature-item p { font-size: 14.5px; margin-bottom: 0; }

/* ---------------- Scroll row (priorities) ---------------- */
.scroll-controls { display: flex; gap: 10px; }
.scroll-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--navy);
  transition: border-color .2s ease, background .2s ease;
}
.scroll-btn:hover { border-color: var(--navy); background: var(--navy); color: var(--cream); }
.scroll-btn svg { width: 16px; height: 16px; }

.scroll-row {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-row > * { scroll-snap-align: start; flex: 0 0 270px; }

/* Auto-scrolling marquee variant (priorities row) */
.scroll-row.marquee {
  overflow: hidden;
  scroll-snap-type: none;
  padding-bottom: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
}
.marquee-track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: marquee-scroll 34s linear infinite;
}
.marquee-track > * { flex: 0 0 270px; }
.marquee-track.wide > * { flex: 0 0 320px; }
.scroll-row.marquee:hover .marquee-track,
.marquee-track:focus-within { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

.priority-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.priority-card .card-top {
  height: 168px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.priority-card .card-top svg { width: 34px; height: 34px; color: var(--tan); }
.priority-card .card-top .tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,253,244,.92); color: var(--navy);
  font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 5px 10px; border-radius: 999px;
}
.priority-card .card-body { padding: 20px 20px 22px; }
.priority-card h3 { font-size: 17.5px; margin-bottom: 8px; }
.priority-card p { font-size: 14px; margin-bottom: 12px; }
.priority-card .link { font-family: "Inter", sans-serif; font-size: 13.5px; font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; gap: 5px; }

/* ---------------- Video embed (reel) ---------------- */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--navy-dark);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------------- Grid cards (generic) ---------------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* ---------------- News cards w/ thumbnail placeholder ---------------- */
.news-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.card-top-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-alt);
}
.card-top-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-top-photo .tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--navy); color: var(--cream);
  font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 5px 10px; border-radius: 999px;
}
.thumb-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(45deg, rgba(40,61,80,.04) 0 10px, transparent 10px 20px),
    var(--bg-alt);
  border-bottom: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  gap: 6px;
}
.thumb-placeholder svg { width: 30px; height: 30px; opacity: .5; }
.thumb-placeholder span { font-family: "Inter", sans-serif; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; opacity: .7; }
.thumb-placeholder .tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--navy); color: var(--cream);
  font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 5px 10px; border-radius: 999px;
}
.news-card .card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex-grow: 1; }
.news-card .meta, .resource-card .meta { font-size: 12.5px; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.news-card h3 { font-size: 18px; margin-bottom: 8px; }
.news-card p { font-size: 14.5px; flex-grow: 1; }
.news-card .link { font-family: "Inter", sans-serif; font-size: 13.5px; font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; }

/* ---------------- Resource cards ---------------- */
.resource-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.resource-card .chip { margin-bottom: 10px; }
.resource-card h3 { font-size: 17.5px; margin-bottom: 10px; }
.resource-card p { font-size: 14px; flex-grow: 1; }
.resource-card .link { font-family: "Inter", sans-serif; font-size: 13.5px; font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; }

/* ---------------- CTA split (Get Involved) ---------------- */
.cta-split { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 22px; }
.cta-split .cta-main {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cta-split .cta-main h3 { color: var(--cream); font-size: 22px; }
.cta-split .cta-main p { color: rgba(255,253,244,.75); font-size: 14.5px; }
.cta-split .cta-side {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cta-split .cta-side .icon-box {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--tan-tint); color: var(--tan-dark);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.cta-split .cta-side .icon-box svg { width: 20px; height: 20px; }
.cta-split .cta-side h3 { font-size: 17px; }
.cta-split .cta-side p { font-size: 14px; margin-bottom: 14px; }

/* ---------------- Steps row ---------------- */
.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.step-num {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--tan);
  color: var(--tan-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.step h3 { font-size: 16.5px; margin-bottom: 4px; }
.step p { font-size: 14px; margin-bottom: 0; }

/* ---------------- Bio / leadership ---------------- */
.bio-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.bio-card img { border-radius: var(--radius-sm); width: 100%; }
.bio-card h3 { margin-bottom: 4px; }
.bio-card .role { font-family: "Inter", sans-serif; color: var(--tan-dark); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; display: block; }
.bio-card .link { font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px; color: var(--navy); display: inline-flex; align-items: center; gap: 5px; }
a.bio-card { cursor: pointer; }

/* ---------------- FAQ ---------------- */
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 4px;
  font-size: 17px;
  color: var(--navy);
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after {
  content: "+";
  font-family: "Inter", sans-serif;
  color: var(--tan-dark);
  font-size: 20px;
}
.accordion-item[open] summary::after { content: "\2212"; }
.accordion-item .accordion-body { padding: 0 4px 20px; font-size: 15px; color: var(--text-muted); }

/* ---------------- Article content ---------------- */
.article-body { max-width: 720px; margin: 0 auto; }
.article-meta { font-family: "Inter", sans-serif; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.article-body ul { margin: 0 0 22px; padding-left: 0; list-style: none; }
.article-body ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  color: var(--text-muted);
}
.article-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tan);
}
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  margin-top: 12px;
}

/* ---------------- Quote / mission callout ---------------- */
.callout {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin: 24px 0;
}
.callout p { color: var(--text); font-size: 15.5px; margin: 0; font-style: italic; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--navy-dark); color: rgba(255,253,244,.7); padding: 56px 0 0; font-family: "Inter", sans-serif; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,253,244,.12); }
.footer-brand img { height: 30px; margin-bottom: 14px; }
.footer-brand p { font-size: 13.5px; color: rgba(255,253,244,.6); max-width: 280px; font-family: "Source Serif 4", serif; font-style: italic; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,253,244,.08);
  color: rgba(255,253,244,.75);
  transition: background .2s ease, color .2s ease;
}
.social-icon svg { width: 16px; height: 16px; }
a.social-icon:hover { background: var(--tan); color: var(--navy-dark); }
/* Instagram and X accounts don't exist yet -- rendered as non-interactive
   placeholders (no href, dimmed) so they don't read as live, clickable links
   that go nowhere. Swap in a real href and drop this class once each account
   is live. */
.social-icon--soon { opacity: .4; cursor: default; }
.footer-col h4 { color: var(--cream); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.footer-col a, .footer-col p { display: block; font-size: 14px; color: rgba(255,253,244,.68); margin-bottom: 9px; }
.footer-col a:hover { color: var(--tan); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font-size: 12.5px; color: rgba(255,253,244,.5); flex-wrap: wrap; gap: 10px; }

/* ---------------- Contact modal ---------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(24,37,48,.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal {
  background: var(--white); border-radius: var(--radius); max-width: 440px; width: 100%; padding: 36px; position: relative; box-shadow: var(--shadow);
  transform: translateY(10px) scale(.98);
  transition: transform .28s ease;
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); }
.modal img.modal-logo { height: 26px; margin-bottom: 20px; }
.form-field { margin-bottom: 15px; }
.form-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--navy); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.form-field input, .form-field textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 8px;
  font-family: "Source Serif 4", serif; font-size: 15px; background: var(--white);
}
.form-field textarea { resize: vertical; min-height: 96px; }
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--tan); }
.modal .btn { width: 100%; justify-content: center; }

.li-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--navy-tint);
  color: var(--navy);
  margin-bottom: 16px;
}

/* ---------------- Scroll-reveal animation ----------------
   Content is visible (opacity: 1) by default and only nudges up into place.
   It must never depend on the IntersectionObserver firing to become visible --
   fast flick-scrolling can skip elements past the observer's threshold entirely,
   which previously left them at opacity:0 (fully blank) until scrolled past again. */
.reveal {
  opacity: 1;
  transform: translateY(22px);
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* ---------------- Card hover polish ---------------- */
.priority-card, .news-card, .resource-card, a.bio-card {
  transition: transform .28s ease, box-shadow .28s ease;
}
.priority-card:hover, .news-card:hover, .resource-card:hover, a.bio-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
.priority-card .card-top { overflow: hidden; }
.priority-card .card-top img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.priority-card:hover .card-top img { transform: scale(1.06); }
.thumb-placeholder, .news-card .card-top-photo { overflow: hidden; }
.news-card .card-top-photo img { transition: transform .5s ease; }
.news-card:hover .card-top-photo img { transform: scale(1.06); }

.btn { transition: all .2s ease, transform .15s ease; }
.btn:active { transform: scale(.97); }

/* ---------------- Nav dropdown ---------------- */
.nav-item-dropdown { position: relative; }
.nav-item-dropdown > a::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  position: relative;
  top: -2px;
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  min-width: 220px;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 50;
}
.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  border-bottom: none !important;
}
.nav-dropdown-menu a:hover { background: var(--bg-alt); color: var(--navy); }
.nav-dropdown-menu .divider { height: 1px; background: var(--border); margin: 6px 4px; }

.nav-mobile-item { border-bottom: 1px solid var(--border); }
/* The label link and its expand caret live in one flex row so the caret is
   always vertically centered against the label, no matter the row's actual
   height -- a fixed top offset (the old approach) drifted out of alignment
   whenever font metrics or padding shifted it even slightly. */
.nav-mobile-item__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-mobile-item__head > a { flex: 1; border-bottom: none; }
.nav-mobile-sub {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  padding-left: 16px;
}
.nav-mobile-sub.open { max-height: 260px; }
.nav-mobile-sub a { display: block; padding: 10px 0; font-size: 14.5px; color: var(--text-muted); border-bottom: none; }
.nav-mobile-toggle {
  background: none; border: none; color: var(--text); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px; margin-right: -8px; cursor: pointer; flex-shrink: 0;
}

/* ---------------- Responsive ---------------- */
/* Switch to the hamburger nav well before the desktop nav items + brand
   wordmark run out of room and start overlapping (mid-size windows). */
@media (max-width: 1120px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: block; }
}

@media (max-width: 980px) {
  .split-row { grid-template-columns: 1fr; gap: 40px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .cta-split, .steps-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .bio-card { grid-template-columns: 1fr; text-align: center; }
  .bio-card img { max-width: 180px; margin: 0 auto; }
  .hero-inner { padding: 48px 32px; }
}

@media (max-width: 480px) {
  .brand .brand-word { display: none; }
}

@media (max-width: 720px) {
  .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .section { padding: 52px 0; }
  .section-row { flex-direction: column; align-items: flex-start; }
  .footer-top { grid-template-columns: 1fr; }
  .scroll-row > *, .marquee-track > *, .marquee-track.wide > * { flex-basis: 240px; }
}