/* NeuroCove Foundation — brand colors from logo */
:root {
  --navy: #0b2d39;
  --navy-light: #123d4d;
  --navy-dark: #071e26;
  --teal: #4fb3a5;
  --teal-light: #6ec9bc;
  --teal-dark: #3a9a8d;
  --blue: #2a7a9b;
  --blue-light: #3d96b8;
  --cream: #d1e1e4;
  --cream-dark: #b8cdd2;
  --white: #f7fbfc;
  --text: #1a3a45;
  --text-muted: #4a6b75;
  --shadow: 0 8px 32px rgba(11, 45, 57, 0.12);
  --shadow-lg: 0 16px 48px rgba(11, 45, 57, 0.18);
  --radius: 16px;
  --radius-lg: 24px;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --header-height: 72px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
}

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

a {
  color: var(--teal-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--teal);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
}

h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: -0.015em;
}

h3 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 1rem;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  width: min(1120px, calc(100% - 2.5rem));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--teal);
  color: var(--navy-dark);
  font-weight: 600;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-dark);
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  background: rgba(247, 251, 252, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(79, 179, 165, 0.15);
}

.site-header .nav {
  position: relative;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
}

.nav-brand img {
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(11, 45, 57, 0.15);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.nav-menu a {
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  transition: color 0.2s;
}

.nav-menu a:hover {
  color: var(--teal-dark);
}

.nav-menu a.is-active:not(.nav-cta) {
  color: var(--teal-dark);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--teal);
}

.nav-cta {
  padding: 0.5rem 1.25rem !important;
  background: var(--teal);
  color: var(--navy-dark) !important;
  border-radius: 999px;
  font-weight: 600 !important;
  transition: background 0.2s, transform 0.2s !important;
}

.nav-cta:hover {
  background: var(--teal-light);
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin-inline: auto;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--teal);
  color: var(--navy-dark);
}

.btn-primary:hover {
  background: var(--teal-light);
  color: var(--navy-dark);
}

.btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--cream-dark);
}

.btn-secondary:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
}

.btn-instagram {
  background: var(--teal);
  color: var(--navy-dark);
}

.btn-instagram:hover {
  background: var(--teal-light);
  color: var(--navy-dark);
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem;
}

/* Hero */
.hero {
  position: relative;
  min-height: clamp(560px, 88vh, 820px);
  padding-top: calc(var(--header-height) + 2.5rem);
  padding-bottom: 4rem;
  background: linear-gradient(165deg, var(--white) 0%, var(--cream) 55%, rgba(79, 179, 165, 0.2) 100%);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35%;
  opacity: 0.45;
}

.hero-content {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  min-height: calc(88vh - var(--header-height) - 4rem);
}

.hero-lead {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 34rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.hero-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-logo img {
  width: min(320px, 80%);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.85),
    var(--shadow-lg);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Sections */
.section {
  padding: 6rem 0;
}

.section--home {
  padding: 4.5rem 0;
}

.section--home .section-header {
  margin-bottom: 2.5rem;
}

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.5rem;
}

.section-header-light .eyebrow,
.section-header-light h2,
.section-header-light .section-sub {
  color: var(--cream);
}

.section-header-light h2 {
  color: var(--white);
}

.section-sub {
  color: var(--text-muted);
  font-size: 1.0625rem;
}

/* About */
.about {
  background: var(--white);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.about-card {
  padding: 2rem;
  background: var(--white);
  border: 1px solid rgba(79, 179, 165, 0.2);
  border-radius: var(--radius-lg);
}

.about-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1.25rem;
  color: var(--teal);
}

.about-icon svg {
  width: 100%;
  height: 100%;
}

.about-card h3 {
  margin: 0 0 0.75rem;
}

.about-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.975rem;
}

/* Mission */
.mission {
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
}

.mission-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4rem;
  align-items: center;
}

.mission-ring {
  width: min(280px, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 12px;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  box-shadow: var(--shadow-lg);
}

.mission-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.mission-text h2 {
  margin: 0 0 1.25rem;
}

.mission-list {
  margin-top: 1.5rem;
}

.mission-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--text-muted);
}

.mission-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}

/* Get Involved — see page content styles below */

/* Stories */
.stories {
  background: var(--white);
}

.stories-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.stories-text h2 {
  margin: 0 0 1rem;
}

.stories-text p {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.stories-preview {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.story-card {
  padding: 2rem;
  background: linear-gradient(135deg, var(--cream) 0%, rgba(79, 179, 165, 0.15) 100%);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--teal);
}

.story-card-offset {
  margin-left: 2rem;
}

.story-quote {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--teal);
  opacity: 0.5;
  margin-bottom: 0.5rem;
}

.story-card p {
  margin: 0;
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--navy);
}

/* Footer */
.site-footer {
  position: relative;
  background: var(--navy-dark);
  color: var(--cream);
  padding-top: 4rem;
}

.footer-waves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  transform: translateY(-99%);
}

.footer-waves svg {
  width: 100%;
  height: 100%;
  display: block;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(209, 225, 228, 0.1);
}

.footer-brand {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.footer-brand img {
  border-radius: 50%;
  flex-shrink: 0;
}

.footer-brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--white);
  margin-bottom: 0.25rem;
}

.footer-brand p {
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.7;
}

.footer-instagram {
  flex: 1;
  max-width: 360px;
  text-align: center;
}

.footer-instagram p {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  opacity: 0.85;
}

.footer-links {
  text-align: right;
}

.footer-links h4 {
  margin: 0 0 1rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.footer-links a {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.9375rem;
  opacity: 0.85;
  transition: opacity 0.2s, color 0.2s;
}

.footer-links a:hover {
  opacity: 1;
  color: var(--teal-light);
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-link-instagram {
  font-weight: 600;
  color: var(--teal-light) !important;
  opacity: 1 !important;
}

.instagram-promo {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 60%, var(--blue) 100%);
  color: var(--cream);
}

.instagram-promo--home {
  padding-block: 3.5rem;
}

.instagram-promo--home .instagram-promo-inner {
  gap: 2.5rem;
}

.instagram-promo--home h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.instagram-promo--home p {
  max-width: 36rem;
}

.instagram-promo-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.instagram-promo-content {
  flex: 1;
  min-width: 0;
}

.instagram-preview {
  display: grid;
  grid-template-columns: repeat(6, 72px);
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.instagram-preview img {
  width: 72px;
  height: 72px;
  border-radius: calc(var(--radius) * 0.75);
  object-fit: cover;
  object-position: center;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.instagram-promo .eyebrow {
  color: var(--teal-light);
}

.instagram-promo h2 {
  color: var(--white);
  margin: 0 0 0.75rem;
}

.instagram-promo p {
  margin: 0;
  max-width: 480px;
  opacity: 0.9;
}

.cove-stories {
  background: var(--white);
}

.cove-stories-inner {
  text-align: center;
  max-width: 1100px;
  margin-inline: auto;
}

.cove-stories-inner h2 {
  margin: 0 0 0.75rem;
}

.cove-stories-lead {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  color: var(--text-muted);
}

.cove-stories-caption {
  margin: 0 0 3rem;
  max-width: 42rem;
  margin-inline: auto;
  color: var(--text-muted);
  line-height: 1.6;
}

.cove-stories-collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem 2rem;
  text-align: left;
  margin-bottom: 2.5rem;
  padding: 1rem 0 2rem;
}

.collage-wave-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.collage-wave-bg svg {
  width: 100%;
  height: 100%;
}

.collage-piece {
  position: relative;
  z-index: 1;
  max-width: 26rem;
}

.collage-piece--top-right {
  grid-column: 7 / 13;
  grid-row: 1;
  justify-self: end;
  transform: rotate(0.6deg);
}

.collage-piece--top-left {
  grid-column: 1 / 7;
  grid-row: 2;
  justify-self: start;
  margin-top: -1.5rem;
  transform: rotate(-0.8deg);
}

.collage-piece--center-right {
  grid-column: 6 / 13;
  grid-row: 3;
  justify-self: end;
  margin-top: -0.5rem;
  transform: rotate(0.4deg);
}

.collage-piece--center-left {
  grid-column: 1 / 7;
  grid-row: 4;
  justify-self: start;
  margin-top: -1rem;
  transform: rotate(-0.5deg);
}

.collage-piece--bottom-right {
  grid-column: 7 / 13;
  grid-row: 5;
  justify-self: end;
  margin-top: -0.75rem;
  transform: rotate(0.7deg);
}

.collage-piece--bottom-left {
  grid-column: 1 / 6;
  grid-row: 6;
  justify-self: start;
  margin-top: -1.25rem;
  transform: rotate(-0.6deg);
}

.collage-identity {
  position: relative;
  margin-bottom: 0.5rem;
}

.collage-index {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--teal);
  opacity: 0.16;
  margin-bottom: 0.15rem;
}

.collage-name {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color: var(--navy);
}

.collage-location {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-dark);
}

.collage-quote {
  position: relative;
  margin: 0;
  padding: 0 0 0 1.25rem;
  border: none;
  border-left: 2px solid rgba(79, 179, 165, 0.45);
}

.collage-quote-mark {
  position: absolute;
  top: -0.2em;
  left: -0.1rem;
  font-family: var(--font-display);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--teal);
  opacity: 0.3;
  pointer-events: none;
}

.collage-quote p {
  margin: 0;
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  line-height: 1.65;
  font-style: italic;
  color: var(--text-muted);
}

.cove-stories-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* Get Involved page content */
.get-involved {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-light) 40%, var(--blue) 100%);
  color: var(--cream);
  padding-bottom: 5rem;
}

.page-hero-dark + .get-involved {
  padding-top: 0;
}

.hiring-hero-band {
  position: relative;
  padding: 4rem 0 5rem;
  background: linear-gradient(135deg, rgba(79, 179, 165, 0.18) 0%, rgba(42, 122, 155, 0.25) 100%);
  text-align: center;
}

.hiring-hero-waves {
  position: absolute;
  left: 0;
  width: 100%;
  height: 80px;
  line-height: 0;
  pointer-events: none;
}

.hiring-hero-waves svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hiring-hero-waves--top {
  top: 0;
  transform: translateY(-99%);
}

.hiring-hero-waves--bottom {
  bottom: 0;
  transform: translateY(99%);
}

.hiring-hero-inner {
  max-width: 720px;
  margin-inline: auto;
}

.hiring-hero-inner h2 {
  margin: 0 0 0.75rem;
  color: var(--white);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.hiring-lead {
  margin: 0 0 2rem;
  opacity: 0.9;
  line-height: 1.6;
  font-size: 1.125rem;
}

.hiring-requirements {
  margin-bottom: 2rem;
  padding: 0;
  border: none;
  text-align: left;
  max-width: 32rem;
  margin-inline: auto;
}

.hiring-requirements h3 {
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-light);
}

.hiring-requirements ul {
  margin: 0;
  padding-left: 1.35rem;
  list-style: disc;
}

.hiring-requirements li {
  margin-bottom: 0.65rem;
  line-height: 1.55;
  padding-left: 0.25rem;
}

.hiring-requirements li::marker {
  color: var(--teal);
}

.hiring-requirements li:last-child {
  margin-bottom: 0;
}

.hiring-contact-label {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: var(--white);
}

.hiring-emails {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 1.0625rem;
}

.hiring-emails a {
  color: var(--teal-light);
  text-decoration: none;
  font-weight: 600;
}

.hiring-emails a:hover {
  text-decoration: underline;
}

.hiring-cc {
  font-size: 0.9375rem;
  opacity: 0.85;
}

.involve-actions-wrap {
  padding-top: 5rem;
  max-width: 680px;
}

.involve-actions-heading {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--white);
  text-align: left;
}

.involve-bullet-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.involve-bullet-item {
  position: relative;
  padding: 1.25rem 0 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(209, 225, 228, 0.12);
}

.involve-bullet-item:first-child {
  border-top: 1px solid rgba(209, 225, 228, 0.12);
}

.involve-bullet-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.65rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

.involve-bullet-item h3 {
  margin: 0 0 0.4rem;
  color: var(--white);
  font-size: 1.125rem;
  font-family: var(--font-body);
  font-weight: 600;
}

.involve-bullet-item > p {
  margin: 0 0 0.65rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  opacity: 0.88;
}

.involve-bullet-links {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.involve-bullet-links li {
  margin-bottom: 0.35rem;
  line-height: 1.5;
}

.involve-bullet-links li:last-child {
  margin-bottom: 0;
}

.involve-bullet-links li::marker {
  color: var(--teal-light);
}

.involve-bullet-links a {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--teal-light);
  text-decoration: none;
}

.involve-bullet-links a:hover {
  text-decoration: underline;
  color: var(--white);
}

.involve-link-accent {
  color: var(--cream);
}

.involve-link-accent:hover {
  color: var(--teal-light);
}

.get-involved .eyebrow {
  color: var(--teal-light);
}

.footer-bottom {
  padding: 1.5rem 0 2rem;
}

.footer-bottom p {
  margin: 0;
  font-size: 0.8125rem;
  opacity: 0.55;
  text-align: center;
}

/* Inner page hero */
.page-hero {
  padding: calc(var(--header-height) + 4rem) 0 3rem;
  background: linear-gradient(165deg, var(--white) 0%, var(--cream) 100%);
  text-align: center;
}

.page-hero-dark {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 60%, var(--blue) 100%);
}

.page-hero-dark .eyebrow {
  color: var(--teal-light);
}

.page-hero-dark h1 {
  color: var(--white);
}

.page-hero-dark .page-hero-lead {
  color: var(--cream);
  opacity: 0.9;
}

.page-hero h1 {
  margin: 0 0 1rem;
  max-width: 720px;
  margin-inline: auto;
}

.page-hero-lead {
  margin: 0 auto;
  max-width: 560px;
  font-size: 1.125rem;
  color: var(--text-muted);
}

/* About extra section */
.about-extra {
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
}

.about-extra-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  align-items: center;
}

.about-extra-text h2 {
  margin: 0 0 1.25rem;
}

.about-extra-visual img {
  width: min(280px, 70vw);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
}

.stories-content {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.stories-content h2 {
  margin: 0 0 1rem;
}

.stories-content p {
  color: var(--text-muted);
}

.stories-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Home mission statement */
.mission-statement {
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
  text-align: center;
}

.mission-statement-inner {
  max-width: 800px;
  margin-inline: auto;
}

.mission-statement-inner::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(90deg, var(--teal), var(--blue));
  border-radius: 2px;
}

.mission-statement-quote {
  margin: 0 0 1.5rem;
  padding: 0;
  border: none;
}

.mission-statement-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.mission-statement-sub {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 540px;
  margin-inline: auto;
}

/* Scroll reveal (homepage) */
.reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Timeline */
.timeline-section {
  background: linear-gradient(180deg, var(--white) 0%, rgba(209, 225, 228, 0.45) 45%, var(--white) 100%);
}

.timeline-layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.timeline-header {
  margin: 0 0 0;
  max-width: none;
  text-align: left;
}

.timeline-header .section-sub {
  max-width: 36rem;
}

.timeline-content {
  min-width: 0;
}

.timeline {
  position: relative;
  max-width: none;
  margin: 0;
  padding-left: 1.75rem;
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(180deg, var(--teal), var(--teal-dark));
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  padding: 0 0 1.75rem 1.5rem;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 0.45rem;
  width: 12px;
  height: 12px;
  margin-left: -5px;
  background: var(--teal);
  border: 2px solid var(--cream);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--teal);
}

.timeline-date {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--navy);
}

.timeline-headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
}

.timeline-item p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Homepage split timeline layout */
.timeline-visual {
  margin: 0;
  min-width: 0;
}

.timeline-visual-frame {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: min(68vh, 640px);
  margin-inline: auto;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  background: linear-gradient(145deg, var(--cream) 0%, var(--white) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(79, 179, 165, 0.18);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.timeline-visual-frame img {
  display: block;
  width: min(100%, 420px);
  height: auto;
  max-height: min(56vh, 480px);
  object-fit: contain;
  object-position: center;
  border-radius: calc(var(--radius-lg) - 0.65rem);
}

.timeline-visual-caption {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  font-style: italic;
  text-align: center;
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .timeline-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
  }

  .timeline--split {
    margin-top: 2rem;
  }
}

@media (max-width: 767px) {
  .timeline-layout {
    grid-template-areas:
      "visual"
      "content";
  }

  .timeline-visual {
    grid-area: visual;
  }

  .timeline-content {
    grid-area: content;
  }

  .timeline-header {
    text-align: center;
  }

  .timeline-header .section-sub {
    margin-inline: auto;
  }

  .timeline--split {
    margin-top: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .timeline-layout {
    grid-template-columns: minmax(0, 58%) minmax(0, 42%);
  }
}

/* Media collage (homepage community gallery) — curated bento grid */
.media-section {
  background: linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);
}

.media-collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.625rem, 1.4vw, 1rem);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.25rem 0 2rem;
}

.media-collage-piece {
  --tilt: 0deg;
  --img-pos: center;
  --img-scale: 1;
  position: relative;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  font-size: 0;
  line-height: 0;
  border-radius: var(--radius);
  border: 2px solid rgba(255, 255, 255, 0.92);
  outline: 1px solid rgba(79, 179, 165, 0.16);
  box-shadow: 0 6px 24px rgba(11, 45, 57, 0.1);
  background: var(--cream);
  transform: rotate(var(--tilt));
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.media-collage-piece img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--img-pos);
  transform: scale(var(--img-scale));
  transition: transform 0.35s ease;
}

.media-collage-piece:hover {
  z-index: 2;
  box-shadow: 0 14px 40px rgba(11, 45, 57, 0.18);
  transform: rotate(var(--tilt)) scale(1.01);
}

.media-collage-piece:hover img {
  transform: scale(calc(var(--img-scale) * 1.03));
}

/* Row 1–2: hero pair — portrait team photos */
.media-collage-piece--1 {
  --tilt: -1deg;
  --img-pos: center 28%;
  grid-column: 1 / 7;
  grid-row: 1 / 3;
  aspect-ratio: 3 / 4;
}

.media-collage-piece--2 {
  --tilt: 0.75deg;
  --img-pos: center 22%;
  grid-column: 7 / 13;
  grid-row: 1 / 3;
  aspect-ratio: 3 / 4;
}

/* Row 3: events & storytelling */
.media-collage-piece--3 {
  --img-pos: center 58%;
  grid-column: 1 / 4;
  grid-row: 3;
  aspect-ratio: 4 / 3;
}

.media-collage-piece--4 {
  --img-pos: center 30%;
  grid-column: 4 / 7;
  grid-row: 3;
  aspect-ratio: 4 / 3;
}

.media-collage-piece--5 {
  --img-pos: center 32%;
  grid-column: 7 / 10;
  grid-row: 3;
  aspect-ratio: 4 / 3;
}

.media-collage-piece--6 {
  --img-pos: center 40%;
  grid-column: 10 / 13;
  grid-row: 3;
  aspect-ratio: 4 / 3;
}

/* Row 4: community programs */
.media-collage-piece--7 {
  --img-pos: center 35%;
  grid-column: 1 / 4;
  grid-row: 4;
  aspect-ratio: 4 / 3;
}

.media-collage-piece--8 {
  --img-pos: center 42%;
  grid-column: 4 / 7;
  grid-row: 4;
  aspect-ratio: 4 / 3;
}

.media-collage-piece--9 {
  --img-pos: center 38%;
  grid-column: 7 / 10;
  grid-row: 4;
  aspect-ratio: 4 / 3;
}

.media-collage-piece--10 {
  --img-pos: center 38%;
  grid-column: 10 / 13;
  grid-row: 4;
  aspect-ratio: 4 / 3;
}

/* Row 5–6: team + advocacy secondary features */
.media-collage-piece--11 {
  --img-pos: center 40%;
  grid-column: 1 / 5;
  grid-row: 5 / 7;
  aspect-ratio: 5 / 4;
}

.media-collage-piece--12 {
  --tilt: -0.75deg;
  --img-pos: center 35%;
  grid-column: 5 / 9;
  grid-row: 5 / 7;
  aspect-ratio: 5 / 4;
}

.media-collage-piece--13 {
  --img-pos: center 30%;
  grid-column: 9 / 11;
  grid-row: 5 / 7;
  aspect-ratio: 1;
}

.media-collage-piece--14 {
  --img-pos: center 38%;
  grid-column: 11 / 13;
  grid-row: 5 / 7;
  aspect-ratio: 1;
}

/* Row 7: advocacy graphics + illustrated collage */
.media-collage-piece--15 {
  --img-pos: center;
  grid-column: 1 / 5;
  grid-row: 7;
  aspect-ratio: 5 / 4;
}

.media-collage-piece--16 {
  --img-pos: center;
  grid-column: 5 / 9;
  grid-row: 7;
  aspect-ratio: 5 / 4;
}

.media-collage-piece--17 {
  --img-pos: center 18%;
  grid-column: 9 / 13;
  grid-row: 7;
  aspect-ratio: 4 / 5;
}

/* Row 8: event photography */
.media-collage-piece--18 {
  --img-pos: center 24%;
  grid-column: 1 / 4;
  grid-row: 8;
  aspect-ratio: 4 / 3;
}

.media-collage-piece--19 {
  --img-pos: center 38%;
  grid-column: 4 / 7;
  grid-row: 8;
  aspect-ratio: 4 / 3;
}

.media-collage-piece--20 {
  --img-pos: center 22%;
  grid-column: 7 / 10;
  grid-row: 8;
  aspect-ratio: 4 / 3;
}

.media-collage-piece--21 {
  --img-pos: center 28%;
  grid-column: 10 / 13;
  grid-row: 8;
  aspect-ratio: 4 / 3;
}

/* Row 9: closing community moments */
.media-collage-piece--22 {
  --img-pos: 78% 82%;
  grid-column: 1 / 5;
  grid-row: 9;
  aspect-ratio: 4 / 3;
}

.media-collage-piece--23 {
  --tilt: 1deg;
  --img-pos: center 35%;
  grid-column: 5 / 9;
  grid-row: 9;
  aspect-ratio: 16 / 10;
}

.media-collage-piece--24 {
  --img-pos: center 18%;
  grid-column: 9 / 13;
  grid-row: 9;
  aspect-ratio: 4 / 3;
}

@media (max-width: 900px) {
  .media-collage {
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    padding-bottom: 0.5rem;
  }

  .media-collage-piece {
    grid-row: auto !important;
    transform: rotate(var(--tilt));
  }

  .media-collage-piece--1,
  .media-collage-piece--2 {
    grid-column: span 3;
    aspect-ratio: 3 / 4;
  }

  .media-collage-piece--11,
  .media-collage-piece--12 {
    grid-column: span 3;
    aspect-ratio: 5 / 4;
  }

  .media-collage-piece--15,
  .media-collage-piece--16 {
    grid-column: span 2;
    aspect-ratio: 5 / 4;
  }

  .media-collage-piece--17 {
    grid-column: span 2;
    aspect-ratio: 4 / 5;
  }

  .media-collage-piece--22,
  .media-collage-piece--23,
  .media-collage-piece--24 {
    grid-column: span 2;
    aspect-ratio: 4 / 3;
  }

  .media-collage-piece--7,
  .media-collage-piece--4,
  .media-collage-piece--13 {
    grid-column: span 2;
    aspect-ratio: 3 / 4;
  }

  .media-collage-piece--3,
  .media-collage-piece--5,
  .media-collage-piece--6,
  .media-collage-piece--8,
  .media-collage-piece--9,
  .media-collage-piece--10,
  .media-collage-piece--14,
  .media-collage-piece--18,
  .media-collage-piece--19,
  .media-collage-piece--20,
  .media-collage-piece--21 {
    grid-column: span 2;
    aspect-ratio: 1;
  }

  .media-collage-piece--18 { --img-pos: center 22%; }
  .media-collage-piece--19 { --img-pos: center 32%; }
  .media-collage-piece--20 { --img-pos: center 18%; }
  .media-collage-piece--24 { --img-pos: center 15%; }
}

@media (max-width: 600px) {
  .media-collage {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
  }

  .media-collage-piece--1,
  .media-collage-piece--2,
  .media-collage-piece--11,
  .media-collage-piece--12,
  .media-collage-piece--23 {
    grid-column: span 2;
    aspect-ratio: 3 / 4;
  }

  .media-collage-piece--7,
  .media-collage-piece--4,
  .media-collage-piece--13 {
    grid-column: span 2;
    aspect-ratio: 3 / 4;
  }

  .media-collage-piece--15,
  .media-collage-piece--16,
  .media-collage-piece--17 {
    grid-column: span 2;
    aspect-ratio: 4 / 5;
  }

  .media-collage-piece--22,
  .media-collage-piece--24 {
    grid-column: span 1;
    aspect-ratio: 1;
  }

  .media-collage-piece--22 {
    --img-pos: 75% 80%;
  }

  .media-collage-piece--18 { --img-pos: center 20%; }
  .media-collage-piece--19 { --img-pos: center 30%; }
  .media-collage-piece--20 { --img-pos: center 16%; }
  .media-collage-piece--24 { --img-pos: center 14%; }

  .media-collage-piece--3,
  .media-collage-piece--5,
  .media-collage-piece--6,
  .media-collage-piece--8,
  .media-collage-piece--9,
  .media-collage-piece--10,
  .media-collage-piece--14,
  .media-collage-piece--18,
  .media-collage-piece--19,
  .media-collage-piece--20,
  .media-collage-piece--21 {
    grid-column: span 1;
    aspect-ratio: 1;
    --tilt: 0deg;
  }
}

/* Legacy media grid (other pages) */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 1rem;
}

.media-grid-item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 1;
  box-shadow: var(--shadow);
  background: var(--cream);
}

.media-grid-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.media-grid-item:hover img {
  transform: scale(1.03);
}

.media-grid-item--featured {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
  min-height: 280px;
}

@media (min-width: 768px) {
  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (min-width: 1024px) {
  .media-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .media-grid-item--featured {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* Stats */
.stats-section {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 60%, var(--blue) 100%);
  padding: 4rem 0;
}

.stats-section--home {
  padding: 3rem 0;
}

.stats-home-link {
  margin: 1.75rem 0 0;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
}

.stats-home-link a {
  color: var(--teal-light);
  text-decoration: none;
}

.stats-home-link a:hover,
.stats-home-link a:focus-visible {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.75rem 1rem;
  background: rgba(247, 251, 252, 0.08);
  border: 1px solid rgba(209, 225, 228, 0.15);
  border-radius: var(--radius-lg);
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--teal-light);
  line-height: 1.1;
}

.stat-label {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--cream);
  opacity: 0.9;
}

/* Quotes */
.quotes-section {
  background: var(--white);
}

.quotes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.quote-block {
  margin: 0;
  padding: 2rem;
  background: linear-gradient(135deg, var(--cream) 0%, rgba(79, 179, 165, 0.12) 100%);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--teal);
}

.quote-block p {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--navy);
  line-height: 1.55;
}

.quote-block footer {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--teal-dark);
}

/* Partners */
.partners-section {
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 0 auto 2rem;
}

.partner-card {
  list-style: none;
}

.partner-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  height: 100%;
  padding: 1.25rem 1rem;
  background: var(--white);
  border: 1px solid rgba(11, 45, 57, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

a.partner-card-link:hover,
a.partner-card-link:focus-visible {
  border-color: rgba(79, 179, 165, 0.45);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  color: inherit;
}

.partner-card-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 5rem;
  padding: 0.5rem;
}

.partner-card-visual img {
  max-width: 100%;
  max-height: 4.5rem;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.72);
  transition: filter 0.3s ease;
}

.partner-card:hover .partner-card-visual img,
.partner-card:focus-within .partner-card-visual img {
  filter: grayscale(0%) opacity(1);
}

.partner-card-wordmark {
  min-height: 5rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(145deg, var(--white) 0%, var(--cream) 100%);
  border: 1px dashed rgba(79, 179, 165, 0.35);
  border-radius: calc(var(--radius) - 4px);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.partner-wordmark-text {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--navy);
}

.partner-card--placeholder:hover .partner-card-wordmark,
.partner-card--placeholder:focus-within .partner-card-wordmark {
  border-color: var(--teal);
  background: var(--white);
}

.partner-card-name {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: var(--text-muted);
}

a.partner-card-link:hover .partner-card-name,
a.partner-card-link:focus-visible .partner-card-name {
  color: var(--navy);
}

/* Compact partner strip (homepage) */
.partners-strip {
  background: var(--navy);
  color: var(--cream);
  padding-block: 1.75rem;
}

.partners-strip-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.partners-strip .eyebrow {
  color: var(--teal-light);
}

.partners-strip-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2rem;
  width: 100%;
}

.partners-strip-logos a,
.partners-strip-logos span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 7rem;
  max-width: 10rem;
  text-decoration: none;
}

.partners-strip-logos img {
  max-height: 2.25rem;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) brightness(1.4) opacity(0.8);
  transition: filter 0.3s ease;
}

.partners-strip-logos a:hover img,
.partners-strip-logos a:focus-visible img {
  filter: grayscale(0%) brightness(1) opacity(1);
}

.partners-strip-wordmark {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(209, 225, 228, 0.85);
  text-align: center;
}

.partners-strip-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--teal-light);
  text-decoration: none;
}

.partners-strip-link:hover,
.partners-strip-link:focus-visible {
  color: var(--white);
}

.partners-cta {
  text-align: center;
  margin: 0;
  color: var(--text-muted);
}

.partners-cta a {
  font-weight: 600;
}

/* Founder */
.founder-section {
  background: var(--white);
}

.founder-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 800px;
  margin-inline: auto;
}

.founder-visual img {
  width: min(240px, 60vw);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
}

.founder-content h2 {
  margin: 0 0 0.25rem;
}

.founder-role {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-dark);
}

.founder-content p:last-child {
  margin-bottom: 0;
  color: var(--text-muted);
}

/* Team lists */
.team-section {
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
}

.team-group {
  margin-bottom: 3rem;
}

.team-group:last-child {
  margin-bottom: 0;
}

.team-group-title {
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(79, 179, 165, 0.25);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-dark);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.team-member {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 1px solid rgba(79, 179, 165, 0.15);
  border-radius: var(--radius);
}

.team-name {
  font-weight: 600;
  color: var(--navy);
}

.team-location {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Initiatives */
.initiative-block {
  background: var(--white);
}

.initiative-block-alt {
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
}

.initiative-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
}

.initiative-inner-reverse {
  direction: rtl;
}

.initiative-inner-reverse > * {
  direction: ltr;
}

.initiative-content h2 {
  margin: 0 0 1rem;
}

.initiative-content p {
  color: var(--text-muted);
}

.initiative-content p:last-of-type {
  margin-bottom: 1.5rem;
}

.initiative-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.initiative-visual img {
  width: min(480px, 40vw);
  max-height: min(520px, 55vh);
  aspect-ratio: 4 / 5;
  object-fit: contain;
  object-position: center top;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);
}

#care-package-drives .initiative-visual img {
  object-fit: cover;
  object-position: center 42%;
}

.initiative-visual-placeholder img {
  width: min(280px, 50vw);
  border-radius: 50%;
}

.about-extra-visual img {
  border-radius: var(--radius-lg);
  object-fit: cover;
}

/* Join Us page */
.join-linktree-cta {
  margin-top: 1.5rem;
}

.page-hero-dark .join-linktree-cta {
  display: inline-flex;
}

/* Responsive */
@media (max-width: 900px) {
  .hero-content,
  .mission-inner,
  .stories-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-logo {
    order: -1;
  }

  .hero-logo img {
    width: min(220px, 60vw);
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, 0.85),
      var(--shadow-lg);
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-lead {
    margin-inline: auto;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .mission-visual {
    display: flex;
    justify-content: center;
  }

  .mission-list {
    text-align: left;
    max-width: 400px;
    margin-inline: auto;
  }

  .stories-preview {
    max-width: 400px;
    margin-inline: auto;
  }

  .story-card-offset {
    margin-left: 0;
  }

  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-brand {
    flex-direction: column;
    align-items: center;
  }

  .footer-instagram {
    max-width: none;
  }

  .footer-links {
    text-align: center;
  }

  .instagram-promo-inner {
    flex-direction: column;
    text-align: center;
  }

  .instagram-preview {
    justify-content: center;
    grid-template-columns: repeat(3, 72px);
    margin-inline: auto;
  }

  .about-extra-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-extra-visual {
    display: flex;
    justify-content: center;
  }

  .cove-stories-collage {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 0.5rem 0 1rem;
  }

  .collage-piece,
  .collage-piece--top-right,
  .collage-piece--top-left,
  .collage-piece--center-right,
  .collage-piece--center-left,
  .collage-piece--bottom-right,
  .collage-piece--bottom-left {
    grid-column: auto;
    grid-row: auto;
    max-width: none;
    margin-top: 0;
    justify-self: stretch;
    transform: none;
  }

  .collage-wave-bg {
    display: none;
  }

  .collage-quote {
    padding-left: 1rem;
  }

  .collage-quote-mark {
    font-size: 2.5rem;
  }

  .involve-bullet-item {
    padding: 1rem 0 1rem 1.35rem;
  }

  .involve-bullet-item::before {
    top: 1.4rem;
  }

  .hiring-hero-band {
    padding: 3rem 0 4rem;
  }

  .involve-actions-wrap {
    padding-top: 4rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quotes-grid {
    grid-template-columns: 1fr;
  }

  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .partner-card-link {
    padding: 1rem 0.75rem;
  }

  .partners-strip-logos {
    gap: 1rem 1.25rem;
  }

  .partners-strip-logos img {
    max-height: 1.75rem;
  }

  .media-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .media-grid-item--featured {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 220px;
  }

  .founder-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .founder-visual {
    display: flex;
    justify-content: center;
  }

  .initiative-inner,
  .initiative-inner-reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    text-align: center;
  }

  .initiative-visual {
    display: flex;
    justify-content: center;
  }

  .initiative-visual img {
    width: min(360px, 90vw);
    max-height: none;
    aspect-ratio: 4 / 5;
  }

  .initiative-actions {
    justify-content: center;
  }

}

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

  .media-grid {
    grid-template-columns: 1fr;
  }

  .media-grid-item--featured {
    grid-column: span 1;
  }
}

@media (max-width: 960px) {
  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 1rem 0 1.5rem;
    background: rgba(247, 251, 252, 0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(79, 179, 165, 0.15);
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
  }

  .nav-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-menu li {
    width: 100%;
    text-align: center;
  }

  .nav-menu a {
    display: block;
    padding: 0.875rem 1.5rem;
  }

  .nav-cta {
    display: inline-block;
    margin-top: 0.5rem;
  }

  .section {
    padding: 4rem 0;
  }

  .hero {
    min-height: auto;
    padding-bottom: 4rem;
  }

  .hero-content {
    min-height: auto;
  }
}

/* Resources page */
.resources-hub {
  padding-top: 2rem;
  padding-bottom: 4rem;
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
}

.resources-layout {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.resources-nav-col {
  position: sticky;
  top: calc(var(--header-height) + 1rem);
}

.resources-nav-col > .eyebrow {
  margin-bottom: 1rem;
}

.resources-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.resources-tab {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--white);
  border: 1px solid rgba(79, 179, 165, 0.25);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.resources-tab:hover {
  background: rgba(79, 179, 165, 0.08);
  border-color: var(--teal);
}

.resources-tab.is-active,
.resources-tab[aria-selected="true"] {
  background: linear-gradient(135deg, rgba(79, 179, 165, 0.18) 0%, rgba(79, 179, 165, 0.06) 100%);
  border-color: var(--teal);
  box-shadow: var(--shadow);
}

.resources-tab:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.resources-tab-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(79, 179, 165, 0.22);
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 600;
}

.resources-tab.is-active .resources-tab-num,
.resources-tab[aria-selected="true"] .resources-tab-num {
  background: var(--teal);
  color: var(--white);
}

.resources-tab-label {
  flex: 1;
}

.resources-nav-select-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.resources-nav-select {
  display: none;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(79, 179, 165, 0.35);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
}

.resources-nav-select:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.resources-panels {
  min-width: 0;
}

.resource-panel {
  display: none;
}

.resource-panel.is-active {
  display: block;
  animation: resource-panel-in 0.35s ease;
}

.resource-panel-inner {
  padding: 2rem 2.25rem;
  background: var(--white);
  border: 1px solid rgba(79, 179, 165, 0.15);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

@keyframes resource-panel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-logo img {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .media-collage-piece {
    transition: none;
  }

  .media-collage-piece img {
    transition: none;
  }

  .media-collage-piece:hover {
    box-shadow: 0 8px 28px rgba(11, 45, 57, 0.12);
    transform: rotate(var(--tilt));
  }

  .media-collage-piece:hover img {
    transform: scale(var(--img-scale));
  }

  .resource-panel.is-active {
    animation: none;
  }

  .resources-tab {
    transition: none;
  }
}

.resource-content {
  max-width: 720px;
  margin-inline: auto;
}

.resource-content > .eyebrow {
  margin-bottom: 0.5rem;
}

.resource-content h2 {
  margin: 0 0 1.5rem;
}

.resource-content h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1.25rem;
}

.resource-content p {
  color: var(--text-muted);
}

.resource-byline,
.resource-subtitle {
  margin: -0.75rem 0 1.5rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
  font-style: italic;
}

.resource-callout {
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(135deg, var(--cream) 0%, rgba(79, 179, 165, 0.12) 100%);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--teal);
}

.resource-callout h3 {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
}

.resource-callout p,
.resource-callout li {
  margin: 0;
  color: var(--text);
}

.resource-callout ol,
.resource-callout ul {
  margin: 0;
  padding-left: 1.25rem;
}

.resource-callout li + li {
  margin-top: 0.75rem;
}

.resource-reference {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.resource-references {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(79, 179, 165, 0.2);
}

.resource-references h3 {
  margin-top: 0;
}

.resource-references ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--text-muted);
}

.resource-references li + li {
  margin-top: 0.5rem;
}

.resource-definitions {
  margin: 0 0 1.5rem;
}

.resource-definitions dt {
  font-weight: 600;
  color: var(--navy);
}

.resource-definitions dd {
  margin: 0 0 1rem;
  color: var(--text-muted);
}

.resource-stats-list {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  color: var(--text-muted);
}

.resource-stats-list li + li {
  margin-top: 0.5rem;
}

.resource-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 1.5rem 0;
}

.resource-two-col h3 {
  margin-top: 0;
}

.resource-two-col ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--text-muted);
}

.resource-follow {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(79, 179, 165, 0.2);
}

@media (max-width: 899px) {
  .resources-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .resources-nav-col {
    position: sticky;
    top: var(--header-height);
    z-index: 20;
    margin-inline: -1rem;
    padding: 0.75rem 1rem 0.5rem;
    background: linear-gradient(180deg, var(--cream) 0%, rgba(209, 225, 228, 0.95) 85%, transparent 100%);
  }

  .resources-nav-col > .eyebrow {
    margin-bottom: 0.75rem;
  }

  .resources-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--teal) transparent;
  }

  .resources-tab {
    flex: 0 0 auto;
    width: auto;
    max-width: 16rem;
    padding: 0.625rem 0.875rem;
  }

  .resources-tab-num {
    display: none;
  }
}

@media (max-width: 479px) {
  .resources-nav {
    display: none;
  }

  .resources-nav-select {
    display: block;
  }

  .resource-panel-inner {
    padding: 1.5rem 1.25rem;
  }
}

@media (max-width: 640px) {
  .resource-two-col {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Resources: Immigrant Wellness Hub */
.resources-wellness-cta {
  padding-top: 0;
  padding-bottom: 0;
}

.resources-wellness-banner {
  padding: 2rem 2.25rem;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 55%, rgba(79, 179, 165, 0.35) 100%);
  border-radius: var(--radius-lg);
  color: var(--white);
  box-shadow: var(--shadow);
}

.resources-wellness-banner .eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

.resources-wellness-banner h2 {
  color: var(--white);
  margin-bottom: 0.75rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.resources-wellness-banner p {
  color: rgba(255, 255, 255, 0.92);
  max-width: 52rem;
  margin-bottom: 1.5rem;
}

.resources-wellness-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.resources-wellness-actions .btn-secondary {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--white);
}

.resources-wellness-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--white);
  color: var(--white);
}

@media (max-width: 640px) {
  .resources-wellness-banner {
    padding: 1.5rem 1.25rem;
  }

  .resources-wellness-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .presentation-grid {
    grid-template-columns: 1fr;
  }

  .resources-wellness-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.resources-presentations {
  background: linear-gradient(180deg, rgba(209, 225, 228, 0.35) 0%, var(--cream) 100%);
}

.resources-presentations-header {
  max-width: 42rem;
  margin-bottom: 2rem;
}

.resources-presentations-header h2 {
  margin: 0 0 0.75rem;
}

.resources-presentations-header p {
  margin: 0;
  color: var(--text-muted);
}

.presentation-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

a.presentation-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid rgba(79, 179, 165, 0.2);
  border-radius: var(--radius-lg);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.presentation-card:hover {
  border-color: var(--teal);
  box-shadow: 0 8px 24px rgba(26, 54, 93, 0.08);
  transform: translateY(-2px);
}

a.presentation-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.presentation-card-tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 0.75rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  background: rgba(79, 179, 165, 0.15);
  border-radius: 999px;
}

a.presentation-card h3 {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--navy);
}

a.presentation-card p {
  flex: 1;
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.presentation-card-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--teal);
}

@media (max-width: 1024px) {
  .presentation-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}