@font-face {
  font-family: "Jali Latin";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url("assets/fonts/jali-latin-regular.woff2") format("woff2"),
    url("assets/fonts/jali-latin-regular.woff") format("woff");
}

@font-face {
  font-family: "Jali Latin";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    url("assets/fonts/jali-latin-bold.woff2") format("woff2"),
    url("assets/fonts/jali-latin-bold.woff") format("woff");
}

:root {
  --ink: #26262b;
  --ink-deep: #141417;
  --muted: #5d5d63;
  --cream: #fff8eb;
  --paper: #fffdf7;
  --yellow: #f39a00;
  --yellow-soft: #ffc87f;
  --yellow-glow: rgba(243, 154, 0, 0.22);
  --green-soft: #e9eee2;
  --line: rgba(38, 38, 43, 0.12);
  --line-strong: rgba(38, 38, 43, 0.22);
  --shadow: 0 14px 38px rgba(38, 38, 43, 0.08);
  --shadow-lift: 0 22px 60px rgba(38, 38, 43, 0.12);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --max: 1120px;
}

* {
  box-sizing: border-box;
}

::selection {
  background: var(--yellow-soft);
  color: var(--ink-deep);
}

html {
  scroll-behavior: smooth;
  /* Sticky header has variable height (logo + paddings ~= 4-5rem). When
     someone clicks an in-page anchor, leave room so the targeted heading
     isn't hidden behind the header. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: linear-gradient(180deg, var(--cream) 0%, #fffdf7 60%, #f6efe3 100%);
  font-size: 0.92rem;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

img {
  display: block;
  max-width: 100%;
  filter: none;
  mix-blend-mode: normal;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Visible focus ring for keyboard users on every interactive element. The
   default browser ring varies by OS and is sometimes invisible against the
   warm cream background. */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
.team-card:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 6px;
}

p,
h1,
h2,
h3 {
  margin-top: 0;
}

p {
  color: var(--muted);
}

h1,
h2,
h3 {
  font-family: "Jali Latin", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

h1 {
  margin-bottom: 0.85rem;
  font-size: clamp(2rem, 4.6vw, 3.7rem);
}

h2 {
  max-width: 22ch;
  margin-bottom: 0.65rem;
  font-size: clamp(1.4rem, 2.6vw, 2.05rem);
}

h3 {
  margin-bottom: 0.35rem;
  font-size: 1rem;
}

/* Decorative inline mark — used sparingly on key words */
.mark {
  display: inline;
  background-image: linear-gradient(120deg, rgba(243, 154, 0, 0.32) 0%, rgba(243, 154, 0, 0.32) 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.42em;
  background-position: 0 86%;
  padding: 0 0.05em;
}

/* HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.1rem;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding-block: 1rem;
  padding-inline: max(1rem, calc((100% - var(--max)) / 2));
  background: rgba(20, 20, 23, 0.97);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* The .nav-shell-panel is the centered desktop grid item that holds the nav.
   Using the wrapper itself is more reliable than
   `display: contents`, which can drop the nav onto a second row in some
   browsers. The hamburger checkbox + label are hidden on desktop and only
   revealed in the mobile media queries below. */
.nav-shell-panel {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  min-width: 0;
}

/* Visually hide the checkbox while keeping it focusable via keyboard so
   pressing Space/Enter still toggles the menu without JavaScript. */
.nav-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.nav-toggle-input:focus-visible + .nav-toggle {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.nav-toggle-bars {
  position: relative;
  display: inline-block;
  width: 1.05rem;
  height: 0.78rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 2px;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-size 180ms ease;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 200ms ease, top 200ms ease, bottom 200ms ease;
}

.nav-toggle-bars::before {
  top: 0;
}

.nav-toggle-bars::after {
  bottom: 0;
}

.nav-toggle-input:checked + .nav-toggle .nav-toggle-bars {
  background-size: 0 2px;
}

.nav-toggle-input:checked + .nav-toggle .nav-toggle-bars::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.nav-toggle-input:checked + .nav-toggle .nav-toggle-bars::after {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

.nav-toggle-input:checked + .nav-toggle {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.brand {
  display: inline-flex;
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  gap: 0.6rem;
  font-weight: 900;
}

.brand-logo {
  width: clamp(7.4rem, 13vw, 9.4rem);
  height: auto;
}

.nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.25rem;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}

.nav a {
  padding: 0.4rem 0.65rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: color 160ms ease;
}

.nav a:hover {
  color: #fff;
}

/* Current page indicator. */
.nav a.is-active {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

/* BUTTONS */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.6rem 1.05rem;
  color: #fff;
  background: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  transition: transform 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
  background: #000;
}

.button-secondary {
  color: var(--ink);
  background: transparent;
}

.button-secondary:hover {
  background: rgba(38, 38, 43, 0.06);
}

.button-small {
  min-height: 2.15rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.78rem;
}

/* HEADER ACTIONS: language switch + CTA */
.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.18rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: border-color 160ms ease, background 160ms ease;
}

.lang-switch:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}

.lang-switch-link {
  display: inline-flex;
  min-width: 1.85rem;
  justify-content: center;
  padding: 0.18rem 0.35rem;
  color: rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  text-transform: uppercase;
  transition: color 160ms ease, background 160ms ease;
}

.lang-switch-link.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

.lang-switch-sep {
  color: rgba(255, 255, 255, 0.25);
  line-height: 1;
}

/* Orange CTA button in the header */
.header-actions .button {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink-deep);
}

.header-actions .button:hover {
  background: #d98a00;
  border-color: #d98a00;
  color: var(--ink-deep);
}

.header-cta-label-short,
.mobile-lang-link,
.footer-lang-link {
  display: none;
}

/* SHELL */
.section-shell {
  width: min(calc(100% - 2rem), var(--max));
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.6rem) 0;
}

/* HERO */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
  padding-top: clamp(2rem, 4vw, 3.6rem);
}

.hero h1 {
  max-width: 17ch;
  font-size: clamp(1.85rem, 3.6vw, 2.85rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

/* Save-the-date ticket — replaces the old hero status pill.
   A small paper card with a date stub on the left, dashed perforation,
   event/location/CTA on the right, and an angled "applications open"
   stamp pinned to the top-right corner. */
.save-the-date {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto auto 1fr;
  align-items: stretch;
  margin: 0.4rem 0 1.4rem;
  background: var(--paper);
  border: 1px solid rgba(38, 38, 43, 0.10);
  border-radius: 14px;
  box-shadow:
    0 14px 32px rgba(220, 178, 58, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transform: rotate(-0.6deg);
  transform-origin: top left;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.save-the-date:hover {
  transform: rotate(-2.1deg) perspective(720px) rotateX(2deg) rotateY(-2.5deg);
  box-shadow:
    0 18px 40px rgba(220, 178, 58, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

.save-the-date:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.save-the-date-date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.85rem 1.05rem 0.9rem;
  text-align: center;
}

.save-the-date-kicker {
  margin-bottom: 0.3rem;
  color: var(--yellow);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.save-the-date-day {
  display: block;
  color: var(--ink-deep);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.save-the-date-month {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Dashed perforation between the stub and the body. */
.save-the-date-perf {
  align-self: stretch;
  width: 1px;
  margin: 0.7rem 0;
  background-image: radial-gradient(
    circle,
    rgba(38, 38, 43, 0.32) 1.1px,
    transparent 1.4px
  );
  background-size: 1px 6px;
  background-repeat: repeat-y;
  background-position: center;
}

.save-the-date-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.05rem;
  padding: 0.85rem 1.2rem 0.9rem 1.05rem;
}

.save-the-date-event {
  margin: 0;
  color: var(--ink-deep);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.save-the-date-location {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.save-the-date-link {
  margin-top: 0.35rem;
  width: fit-content;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(243, 154, 0, 0.6);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.15s ease;
}

.save-the-date:hover .save-the-date-link {
  text-decoration-color: var(--yellow);
}

/* "Applications open" sticker — angled, pinned to the top-right corner. */
.save-the-date-status {
  position: absolute;
  top: -0.55rem;
  right: -0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.65rem;
  background: var(--yellow);
  color: var(--ink-deep);
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(214, 58, 20, 0.22);
  transform: rotate(5deg);
}

.save-the-date-pulse {
  width: 0.42rem;
  height: 0.42rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.65);
  animation: save-the-date-pulse 1.8s ease-out infinite;
}

@keyframes save-the-date-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.65);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* Closed-application state: swap the live yellow sticker for a muted, static one. */
.save-the-date-status.is-closed {
  background: var(--ink-deep);
  color: var(--paper);
  box-shadow: 0 6px 14px rgba(38, 38, 43, 0.18);
}

.save-the-date-status.is-closed .save-the-date-pulse {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: none;
  animation: none;
}

@media (max-width: 480px) {
  .save-the-date {
    grid-template-columns: 1fr;
    transform: rotate(-0.4deg);
  }

  .save-the-date:hover {
    transform: rotate(-1.6deg) perspective(720px) rotateX(1.5deg) rotateY(-2deg);
  }

  /* Pull the angled status sticker inward on the smallest screens so the
     rotated edge does not get clipped by the body's overflow-x: hidden rule. */
  .save-the-date-status {
    top: -0.45rem;
    right: 0.4rem;
    padding: 0.24rem 0.55rem;
    font-size: 0.55rem;
  }

  .save-the-date-date {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.7rem 1rem 0.55rem;
    text-align: center;
  }

  .save-the-date-kicker {
    margin: 0;
  }

  .save-the-date-day {
    font-size: 1.15rem;
  }

  .save-the-date-month {
    margin-top: 0;
    font-size: 0.62rem;
  }

  /* Switch the perforation from vertical to horizontal. */
  .save-the-date-perf {
    width: auto;
    height: 1px;
    margin: 0 0.85rem;
    background-image: radial-gradient(
      circle,
      rgba(38, 38, 43, 0.32) 1.1px,
      transparent 1.4px
    );
    background-size: 6px 1px;
    background-repeat: repeat-x;
    background-position: center;
  }

  .save-the-date-body {
    align-items: center;
    padding: 0.7rem 1rem 0.85rem;
    text-align: center;
  }
}

.hero-media {
  position: relative;
}

.hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 58%;
  filter: saturate(0.96) sepia(0.045) contrast(1.02);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

/* Decorative dot accent on hero image */
.hero-media::before {
  content: "";
  position: absolute;
  top: -1.2rem;
  right: -0.5rem;
  width: 5.5rem;
  height: 5.5rem;
  background-image: radial-gradient(var(--line-strong) 1.2px, transparent 1.2px);
  background-size: 12px 12px;
  opacity: 0.6;
  z-index: -1;
}

.eyebrow {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0.45rem;
  color: var(--eyebrow-color, rgba(38, 38, 43, 0.62));
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* Eyebrows are intentionally quiet labels. Dark or high-contrast cards retint
   them locally so they stay readable without turning into heavy UI pills. */

.cta-panel,
.event-card {
  --eyebrow-color: var(--ink-deep);
}

.bento-tile.accent-ink,
.contact-card,
.team-cta-card {
  --eyebrow-color: var(--yellow-soft);
}

.lead {
  max-width: 38rem;
  font-size: clamp(0.98rem, 1.4vw, 1.08rem);
  color: var(--muted);
}

/* STATS — flat numbers with subtle dotted divider below. Sits between
   team preview and news/contact bands on the home page; the dashed
   border-bottom signals "this is a quick-stat strip, not a full section". */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
  padding-top: clamp(1.2rem, 2.4vw, 1.8rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px dashed var(--line-strong);
  border-bottom: 1px dashed var(--line-strong);
}

.stats article {
  padding: 0;
}

.stats-note {
  grid-column: 1 / -1;
  max-width: 50rem;
  margin: 0.1rem 0 0;
  color: rgba(38, 38, 43, 0.62);
  font-size: 0.76rem;
  font-weight: 600;
}

.stats strong {
  display: block;
  color: var(--ink);
  font-family: "Jali Latin", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.stats span {
  display: block;
  max-width: 14rem;
  margin-top: 0.4rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.84rem;
}

/* INTRO */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.4rem, 3.6vw, 3rem);
  align-items: start;
  padding-bottom: clamp(1.4rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--line);
}

/* Intro is the only place where the inline link sits on an indented column,
   so we just nudge its top margin a touch tighter. The underline + colour
   treatment now matches the global .inline-link. */
.intro .inline-link {
  margin-top: 0.1rem;
}

.intro + .section-shell {
  padding-top: clamp(1.4rem, 2.6vw, 2rem);
}

.university-carousel {
  display: grid;
  gap: 0.8rem;
  padding-top: clamp(0.6rem, 1.6vw, 1rem);
  padding-bottom: clamp(1rem, 2.4vw, 1.7rem);
  border-bottom: 1px solid var(--line);
}

.university-carousel-label {
  margin: 0;
  color: rgba(38, 38, 43, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.university-carousel-viewport {
  position: relative;
  overflow: hidden;
  padding: 0.3rem 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.university-carousel-track {
  display: flex;
  width: max-content;
  gap: 0.9rem;
  animation: university-scroll 34s linear infinite;
}


.university-logo {
  display: grid;
  min-width: clamp(7.5rem, 15vw, 12rem);
  height: 3.4rem;
  place-items: center;
  padding: 0.75rem 1.2rem;
}

.university-logo img {
  width: auto;
  max-width: 100%;
  max-height: 2rem;
  filter: none;
}

@keyframes university-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 0.45rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .university-carousel-track {
    animation: none;
  }

  .save-the-date {
    transition: none;
  }

  .save-the-date:hover {
    transform: rotate(-0.6deg);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 480px) {
  .save-the-date,
  .save-the-date:hover {
    transform: rotate(-0.4deg);
  }
}

.text-stack {
  display: grid;
  gap: 0.75rem;
  font-size: 0.95rem;
}

.section-heading {
  display: grid;
  justify-items: start;
  max-width: 660px;
  margin-bottom: 1.4rem;
}

.section-heading > p:not(.eyebrow) {
  max-width: 44rem;
  margin: 0.2rem 0 0;
  font-size: 0.94rem;
}

/* PROGRAMM — numbered list */
.program-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 2.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: prog;
}

.program-list li {
  position: relative;
  padding-left: 2.6rem;
  counter-increment: prog;
}

.program-list li::before {
  content: counter(prog, decimal-leading-zero);
  position: absolute;
  top: 0.05rem;
  left: 0;
  color: var(--yellow);
  font-family: "Jali Latin", Inter, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.program-list h3 {
  font-size: 1.02rem;
}

.program-list p {
  font-size: 0.9rem;
}

/* BOOTCAMP card */
.bootcamp {
  display: grid;
  grid-template-columns: minmax(16rem, 0.75fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3.4vw, 2.6rem);
  align-items: center;
  width: 100%;
  max-width: none;
  padding: clamp(1.5rem, 3.4vw, 2.8rem) max(1rem, calc((100% - var(--max)) / 2));
  background: var(--green-soft);
}

.bootcamp-copy h2 {
  max-width: 18ch;
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
}

.bootcamp-copy > p {
  font-size: 0.92rem;
}

/* Two-photo collage in the home Bootcamp section: a tall main shot on the
   left with a small square inset overlapping its bottom-right corner. The
   asymmetry reinforces the "behind the scenes" feel of the section. */
.image-collage {
  position: relative;
  min-height: 0;
  padding-bottom: 2.4rem;
  padding-right: 1.6rem;
}

.image-collage img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.96) sepia(0.045) contrast(1.02);
  border: 4px solid var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.image-collage .image-large {
  width: 88%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
}

.image-collage .image-small {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
}

.bootcamp-copy p {
  max-width: 40rem;
}

.details {
  display: grid;
  gap: 0;
  margin: 0.9rem 0;
}

.details > div {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(24, 55, 47, 0.18);
  font-size: 0.88rem;
}

.details > div:last-child {
  border-bottom: 1px solid rgba(24, 55, 47, 0.18);
}

.details dt {
  color: var(--muted);
  font-weight: 800;
  font-size: 0.82rem;
}

.details dd {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}

/* BENTO — engagement on home + partners support */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(9.5rem, auto);
  gap: 0.8rem;
}

.bento-tile {
  display: grid;
  align-content: space-between;
  gap: 0.6rem;
  padding: 1.05rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.bento-tile:hover {
  transform: translateY(calc(var(--tile-offset, 0px) - 1px));
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}

.bento-tile h3 {
  font-size: 1rem;
}

.bento-tile p {
  margin: 0;
  font-size: 0.86rem;
}

.bento-tile .tile-link {
  margin-top: 0.25rem;
  color: var(--ink);
  font-weight: 800;
  font-size: 0.86rem;
}

.bento-tile .tile-link:hover {
  color: var(--yellow);
}

/* Tile spans: w = columns, h = rows */
.bento-tile.w-3 { grid-column: span 3; }
.bento-tile.w-4 { grid-column: span 4; }
.bento-tile.w-2 { grid-column: span 2; }
.bento-tile.h-2 { grid-row: span 2; }

/* Accent tile variant — at most one per bento grid, reserved for the
   single most important tile so grids read as one family of cards. */
.bento-tile.accent-ink {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.bento-tile.accent-ink h3,
.bento-tile.accent-ink .tile-link {
  color: #fff;
}

.bento-tile.accent-ink p {
  color: rgba(255, 255, 255, 0.72);
}

.bento-tile.accent-ink .eyebrow {
  color: var(--yellow-soft);
}

.bento-tile.accent-ink .tile-link:hover {
  color: var(--yellow-soft);
}

.support-bento {
  grid-auto-rows: minmax(7.5rem, auto);
}

.support-bento .bento-tile {
  align-content: start;
}

@media (min-width: 721px) {
  /* A gentle stagger keeps the grid playful without reading as misalignment. */
  .bento-tile:nth-child(even) {
    --tile-offset: 0.45rem;
    transform: translateY(var(--tile-offset));
  }
}

/* PARTNER LOGOS — full-width strip with intro copy above the row. */
.partner-logos-section {
  display: grid;
  gap: clamp(0.9rem, 2.2vw, 1.4rem);
}

.partner-logos-heading {
  display: grid;
  gap: 0.35rem;
  max-width: 44rem;
}

.partner-logos-heading h2 {
  margin: 0;
}

.partner-logos-heading p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.partner-logo-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.partner-logo-item {
  display: grid;
  min-height: 5.4rem;
  place-items: center;
  padding: 0.9rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

/* Only linked logos lift on hover — hover motion means "clickable". */
.partner-logo-item:has(.partner-logo-link):hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.partner-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.partner-logo-item img {
  width: auto;
  max-width: 100%;
  /* Matched height + width caps keep wide wordmarks (McKinsey) and tall
     monograms (Schwarzman) visually similar in size in the grid. */
  max-height: 2.6rem;
  object-fit: contain;
  filter: none;
}

.partner-logo-text {
  font-family: "Jali Latin", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
}

/* PARTNERS / QUOTE — with decorative glyph */
.partners .quote {
  position: relative;
  max-width: 46rem;
  margin: 0 0 1.2rem;
  padding: 0.4rem 0 0 2.4rem;
}

.partners .quote::before {
  content: "\201C";
  position: absolute;
  top: -0.6rem;
  left: 0;
  font-family: "Jali Latin", Inter, sans-serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--yellow);
}

.quote p {
  color: var(--ink);
  font-family: "Jali Latin", Inter, sans-serif;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.quote footer {
  margin-top: 0.7rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.partners-cta {
  max-width: 44rem;
  font-size: 0.95rem;
}

.partners-cta a {
  margin-left: 0.4rem;
  border-bottom: 2px solid var(--yellow);
  color: var(--ink);
  font-weight: 800;
}

/* TEAM */
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
}


.team-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.team-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}

.team-card img {
  width: 100%;
  aspect-ratio: 1 / 1.05;
  object-fit: cover;
  filter: saturate(0.97) sepia(0.035) contrast(1.02);
}

.team-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.75rem;
}

.team-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.team-card h3,
.team-card p {
  padding-inline: 0;
}

.team-card h3 {
  margin: 0;
  font-size: 0.95rem;
}

.team-card p {
  margin: 0;
  font-size: 0.78rem;
  /* Cards land in regular grids next to each other; reserving consistent
     vertical room for two lines of role text keeps the row of photos aligned
     even when one role wraps. */
  min-height: 2.4em;
}

.team-card-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(10, 102, 194, 0.2);
  background: rgba(10, 102, 194, 0.08);
  color: #0a66c2;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.team-card-linkedin:hover,
.team-card-linkedin:focus-visible {
  border-color: #0a66c2;
  background: #0a66c2;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(10, 102, 194, 0.18);
}

.team-card-linkedin-icon {
  display: inline-flex;
  width: 0.95rem;
  height: 0.95rem;
}

.team-card-linkedin-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.team-cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.team-cta-card:hover {
  background: var(--ink-deep);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.team-cta-card h3,
.team-cta-card p {
  padding-inline: 0;
  margin: 0 0 0.35rem;
  min-height: 0;
}

.team-cta-card strong {
  margin-top: 0.4rem;
  color: var(--yellow-soft);
  font-weight: 900;
  font-size: 0.86rem;
}

/* The link label already carries its own arrow; nudge it on hover instead of
   stacking a second decorative arrow in the corner. */
.team-cta-card strong {
  display: inline-block;
  transition: transform 160ms ease;
}

.team-cta-card:hover strong {
  transform: translateX(3px);
}

/* PAGE HEROES */
.page-hero {
  display: grid;
  gap: 0.85rem;
  padding-top: clamp(1.8rem, 4vw, 3rem);
  padding-bottom: clamp(1.6rem, 3.2vw, 2.6rem);
}

.page-hero h1 {
  max-width: 19ch;
  font-size: clamp(1.85rem, 3.4vw, 2.65rem);
}

.page-hero .lead {
  max-width: 44rem;
}

/* Full roster: auto-fill keeps every card the same width, so a short last
   row never stretches its cards wider than the rest of the grid. */
.full-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.7rem;
}

/* SUBPAGES */
.page-hero-split {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.85fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: center;
}

.page-hero-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.96) sepia(0.045) contrast(1.02);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.compact-section {
  padding-top: 0;
}

.two-column-section,
.image-text-card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.3rem, 3.6vw, 3rem);
  align-items: start;
}

.details-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.details-grid > div {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.45rem 1.05rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.details-grid > div::before {
  content: "";
  position: absolute;
  top: 0.95rem;
  left: 1.05rem;
  width: 1.7rem;
  height: 0.28rem;
  border-radius: 999px;
  background: var(--yellow);
}

.details-grid > div:last-child {
  border-bottom: 1px solid var(--line);
}

.details-grid dt {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.details-grid dd {
  margin: 0;
  color: var(--ink-deep);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-list li {
  position: relative;
  padding: 0.8rem 0.9rem 0.8rem 2.35rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Checkmark for plain feature lists; the numbered bootcamp variant
   overrides this with its own counter. */
.feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0.95rem;
  color: var(--yellow);
  font-weight: 900;
}

/* Tinted panel — section-level grouping on a soft colored strip, no border,
   no shadow. Shared look with .image-text-card / .next-event-card / .bootcamp. */
.topics-section {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: start;
  padding: clamp(1.5rem, 3.2vw, 2.4rem);
  background: var(--green-soft);
  border-radius: var(--radius-lg);
}

.topics-section .section-heading {
  margin: 0;
}

.topics-section .section-heading p:not(.eyebrow) {
  max-width: 42rem;
  margin-bottom: 0;
}

.feature-list-prominent {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-self: stretch;
  counter-reset: bootcamp-topic;
}

.feature-list-prominent li {
  position: relative;
  min-height: 0;
  padding: 1rem 1rem 1rem 3.35rem;
  border-color: rgba(38, 38, 43, 0.1);
  box-shadow: none;
  counter-increment: bootcamp-topic;
}

.feature-list-prominent li::before {
  content: counter(bootcamp-topic, decimal-leading-zero);
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: var(--yellow);
  font-family: "Jali Latin", Inter, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.feature-list-prominent li::after {
  content: none;
}

.image-band {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr 1.1fr;
  gap: 0.7rem;
  padding-top: clamp(0.4rem, 1vw, 0.7rem);
  padding-bottom: clamp(1.2rem, 2.6vw, 2rem);
}

.image-band img,
.image-text-card img {
  width: 100%;
  object-fit: cover;
  filter: saturate(0.96) sepia(0.045) contrast(1.02);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.image-band img {
  aspect-ratio: 4 / 3;
}

.image-band img:nth-child(1) {
  aspect-ratio: 5 / 3;
}

.image-band img:nth-child(2) {
  margin-top: 1.2rem;
}

/* Video sits free on the page — the dark embed is enough of a frame on its
   own, no wrapper card. */
.video-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.3rem, 3.6vw, 3rem);
  align-items: center;
}

.video-section .section-heading {
  margin: 0;
}

.video-section .section-heading p:not(.eyebrow) {
  max-width: 34rem;
  margin-bottom: 0;
}

.video-embed {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink-deep);
  border-radius: var(--radius-lg);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.image-text-card {
  align-items: center;
  width: min(calc(100% - 2rem), 1160px);
  padding: clamp(1.3rem, 3vw, 2.2rem);
  background: var(--green-soft);
  border-radius: var(--radius-lg);
}

.image-text-card img {
  aspect-ratio: 4 / 3;
}

/* SCHOOLS CHAPTER — chapter break inside partners.html announcing the
   schools section. Tinted panel, image right, copy left, two CTAs.
   Replaces the older .school-partnership-section that re-used hero styling
   mid-page and looked like a second hero. */
.schools-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.85fr);
  gap: clamp(1.4rem, 3.2vw, 2.6rem);
  align-items: center;
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
  background: var(--green-soft);
  border-radius: var(--radius-lg);
}

.schools-chapter-copy h2 {
  max-width: 18ch;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}

.schools-chapter-facts {
  display: grid;
  gap: 0.45rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.schools-chapter-facts li {
  display: flex;
  gap: 0.55rem;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}

.schools-chapter-facts li::before {
  content: "";
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.45rem;
  background: var(--yellow);
  border-radius: 50%;
}

.schools-chapter-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.96) sepia(0.045) contrast(1.02);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* PARTNER QUOTE — free-floating pull quote with refined attribution, same
   treatment as the home page's .partners .quote (no card chrome). */
.partner-quote-section {
  display: grid;
  gap: 0.85rem;
}

.partner-quote-card {
  position: relative;
  display: grid;
  gap: 1rem;
  max-width: 52rem;
  margin: 0;
  padding: 0.4rem 0 0;
}

.partner-quote-card::before {
  content: "\201C";
  position: absolute;
  top: -0.6rem;
  left: 0;
  font-family: "Jali Latin", Inter, sans-serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--yellow);
  pointer-events: none;
}

.partner-quote-card blockquote {
  margin: 0;
  padding: 0 0 0 2.4rem;
}

.partner-quote-card blockquote p {
  margin: 0;
  color: var(--ink);
  font-family: "Jali Latin", Inter, sans-serif;
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.015em;
}

.partner-quote-card figcaption {
  display: grid;
  gap: 0.1rem;
  padding: 0 0 0 2.4rem;
}

.partner-quote-card figcaption strong {
  color: var(--ink-deep);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.005em;
}

.partner-quote-card figcaption span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* NEXT EVENT CARD — featured "next event" card on events.html. Image left,
   copy with status pill, summary, detail list and two CTAs on the right.
   Distinct from .image-text-card (which keeps a smaller, secondary feel). */
.next-event-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: center;
  width: min(calc(100% - 2rem), 1160px);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--green-soft);
  border-radius: var(--radius-lg);
}

.next-event-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.96) sepia(0.045) contrast(1.02);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.next-event-copy h2 {
  max-width: 18ch;
  margin-bottom: 0.4rem;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.next-event-copy > p {
  max-width: 36rem;
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
}

.next-event-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
}

.next-event-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.6rem 0.22rem 0.55rem;
  background: var(--ink-deep);
  color: #fff;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.next-event-pulse {
  flex-shrink: 0;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--yellow);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(243, 154, 0, 0.55);
  animation: next-event-pulse 1.8s ease-out infinite;
}

@keyframes next-event-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(243, 154, 0, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(243, 154, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(243, 154, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .next-event-pulse { animation: none; }
}

/* Closed-application state for the next-event card status chip. */
.next-event-status.is-closed .next-event-pulse {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: none;
  animation: none;
}

/* Inline notice used to flag a closed application round in a page hero. */
.hero-notice {
  margin: 0 0 1.6rem;
  padding: 0.85rem 1.1rem;
  background: var(--green-soft);
  border-left: 4px solid var(--yellow);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 46ch;
}

/* STAY UPDATED — compact section pairing copy with a short list of contact
   channel cards. Replaces the older yellow CTA panel that just said
   "follow us". */
.stay-updated {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
}

.stay-updated-copy h2 {
  max-width: 22ch;
  margin-bottom: 0.5rem;
}

.stay-updated-copy > p {
  margin: 0;
  max-width: 32rem;
  font-size: 0.92rem;
}

.stay-updated-channels {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stay-updated-channels a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: center;
  padding: 0.85rem 1.05rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}

.stay-updated-channels a:hover {
  color: var(--cream);
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.stay-updated-icon {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  background: var(--yellow);
  color: var(--ink-deep);
  border-radius: 999px;
  flex-shrink: 0;
  transition: background 160ms ease, color 160ms ease;
}

.stay-updated-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.stay-updated-channels a:hover .stay-updated-icon {
  background: var(--cream);
  color: var(--ink-deep);
}

.stay-updated-text {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.stay-updated-sub {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: color 160ms ease;
}

.stay-updated-channels a:hover .stay-updated-sub {
  color: rgba(255, 253, 247, 0.72);
}

.stay-updated-label {
  color: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}

/* RICH ARCHIVE — variant of .archive-grid with cover image, tag pill and
   date for past events on events.html. Selectors are chained against
   .archive-grid so they beat the base .archive-grid article rules later in
   the file regardless of source order. */
.archive-grid.archive-grid-rich {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem;
}

.archive-grid.archive-grid-rich article {
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 0.4rem;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.archive-grid.archive-grid-rich article > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(0.96) sepia(0.045) contrast(1.02);
}

.archive-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 1.05rem 1.05rem 0;
}

.archive-tag {
  display: inline-flex;
  padding: 0.2rem 0.6rem;
  background: var(--yellow);
  color: var(--ink-deep);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.archive-date {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.archive-grid.archive-grid-rich h3 {
  padding: 0 1.05rem;
  margin: 0;
  font-size: 1.05rem;
}

.archive-grid.archive-grid-rich p {
  padding: 0 1.05rem 1.1rem;
  margin: 0;
  font-size: 0.86rem;
}

.faq-grid,
.archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.faq-grid article,
.archive-grid article {
  padding: 0.95rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.faq-grid h3 {
  font-size: 0.98rem;
}

.faq-grid p,
.archive-grid p {
  margin-bottom: 0;
  font-size: 0.86rem;
}

.cta-panel {
  /* Boxed panels carry their section padding inside the colored box, so give
     them outer breathing room — otherwise they sit glued to neighbouring
     cards (schools chapter, newsletter postcard). */
  margin-block: clamp(1.2rem, 2.6vw, 2rem);
  padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--yellow);
  border-radius: var(--radius-lg);
  color: var(--ink-deep);
}

.cta-panel h2 {
  max-width: 24ch;
}

.cta-panel p {
  max-width: 46rem;
  color: var(--ink-deep);
}

.cta-panel .eyebrow {
  color: var(--ink-deep);
}

/* IMPACT STATS — flat stat strip with heading above and 4-up stats behind a
   dashed divider, mirroring the free-floating .stats strip on the home page. */
.impact-stats {
  display: grid;
  gap: 1.1rem;
}

.impact-stats-heading {
  display: grid;
  gap: 0.15rem;
  max-width: 42rem;
}

.impact-stats-heading h2 {
  margin: 0;
}

.impact-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line-strong);
}

.impact-stats-grid article {
  display: grid;
  gap: 0.35rem;
}

.impact-stats-grid strong {
  display: block;
  color: var(--ink);
  font-family: "Jali Latin", Inter, sans-serif;
  font-size: clamp(1.7rem, 3.1vw, 2.35rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.impact-stats-grid span {
  display: block;
  max-width: 14rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.83rem;
  line-height: 1.45;
}

.impact-stats-note {
  margin: 0;
  color: rgba(38, 38, 43, 0.55);
  font-size: 0.74rem;
  font-weight: 600;
}

.inline-link {
  display: inline-flex;
  margin-top: 0.4rem;
  color: var(--ink);
  font-weight: 800;
  font-size: 0.88rem;
  text-decoration: underline;
  text-decoration-color: rgba(243, 154, 0, 0.6);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.inline-link:hover,
.inline-link:focus-visible {
  color: var(--ink-deep);
  text-decoration-color: var(--yellow);
}

/* NEWS / CONTACT */
.news-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.8rem;
  align-items: stretch;
}

.event-card,
.contact-card {
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border-radius: var(--radius-lg);
}

.event-card {
  position: relative;
  background: var(--yellow);
  color: var(--ink-deep);
}

.news-icon {
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
}

.event-card .eyebrow,
.event-card p {
  color: var(--ink-deep);
}

.contact-card {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  background: var(--ink);
  color: #fff;
}

.contact-card p {
  color: rgba(255, 255, 255, 0.72);
}

.contact-card .eyebrow {
  color: var(--yellow-soft);
}

.contact-card a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  transition: color 160ms ease, background 160ms ease;
}

.contact-card a:hover {
  color: var(--ink);
  background: var(--yellow);
}

.contact-icon {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
}

/* PRESS */
.press {
  padding-top: clamp(1.4rem, 3vw, 2.4rem);
}

.press-eyebrow,
.news-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.press-icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.28rem;
  color: var(--ink-deep);
  background: var(--yellow);
  border: 1px solid rgba(38, 38, 43, 0.18);
  border-radius: 999px;
  flex-shrink: 0;
}

.press-list {
  display: grid;
  gap: 0;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.press-list li {
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  transition: background 160ms ease;
}

.press-list li:hover {
  background: rgba(255, 253, 247, 0.55);
}

.press-list a {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.7rem 0;
  color: var(--ink);
  font-weight: 600;
  transition: color 160ms ease;
}

.press-list a::after {
  content: "→";
  margin-left: auto;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.95rem;
  transform: translateX(-0.2rem);
  transition: transform 160ms ease, color 160ms ease;
}

.press-list a:hover {
  color: var(--ink-deep);
}

.press-list a:hover::after {
  color: var(--yellow);
  transform: translateX(0.1rem);
}

/* Section divider — subtle dotted variation between sections */
.divider-dots {
  display: block;
  width: min(calc(100% - 2rem), var(--max));
  margin: clamp(0.6rem, 1.4vw, 1.2rem) auto;
  height: 14px;
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1px);
  background-size: 14px 14px;
  background-position: center;
  opacity: 0.55;
}

/* NEWSLETTER — sitewide pre-footer signup CTA on a tilted paper card with
   a perforated stamp + circular postmark pinned to the top-right corner.
   The whole card is a single link to the signup form, mirroring the
   save-the-date ticket. */
.newsletter {
  padding-top: 0;
}

.newsletter-postcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.1rem, 2.6vw, 2rem);
  align-items: start;
  padding: clamp(1.3rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2.2rem);
  background: var(--paper);
  border: 1px solid rgba(38, 38, 43, 0.1);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--shadow),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
  transform: rotate(-0.4deg);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.newsletter-postcard:hover {
  transform: rotate(0.25deg) translateY(-3px);
  box-shadow:
    var(--shadow-lift),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

.newsletter-postcard:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.newsletter-copy h2 {
  margin-bottom: 0.5rem;
  max-width: none;
}

.newsletter-copy p:not(.eyebrow) {
  max-width: none;
  margin: 0 0 1.15rem;
  font-size: 0.92rem;
}

/* The card itself is the link, so the "button" is decorative; echo the
   real button hover when the card is hovered. */
.newsletter-postcard:hover .newsletter-button {
  transform: translateY(-1px);
  background: #000;
}

.newsletter-postage {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

/* Circular postmark, slightly overlapping the stamp. */
.newsletter-postmark {
  display: inline-grid;
  place-items: center;
  align-content: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-right: -0.8rem;
  margin-top: 0.55rem;
  z-index: 1;
  border: 1.5px dashed rgba(38, 38, 43, 0.38);
  border-radius: 50%;
  color: rgba(38, 38, 43, 0.55);
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  transform: rotate(-8deg);
}

/* Postage stamp: paper-coloured dots straddle the yellow edge to fake the
   perforation, the inner frame holds the white PA logomark. */
.newsletter-stamp {
  display: inline-block;
  padding: 0.3rem;
  background-color: var(--yellow);
  background-image: radial-gradient(var(--paper) 1.5px, transparent 1.7px);
  background-size: 0.55rem 0.55rem;
  background-position: -0.275rem -0.275rem;
  border-radius: 2px;
  transform: rotate(4deg);
  box-shadow: 0 8px 18px rgba(243, 154, 0, 0.28);
  transition: transform 0.22s ease;
}

.newsletter-postcard:hover .newsletter-stamp {
  transform: rotate(7deg) translateY(-2px);
}

.newsletter-stamp-inner {
  display: grid;
  place-items: center;
  padding: 0.45rem;
  background: var(--yellow);
  border: 1.5px solid rgba(255, 253, 247, 0.75);
  border-radius: 2px;
}

.newsletter-stamp-inner img {
  width: 1.9rem;
  height: 1.9rem;
}

@media (max-width: 560px) {
  .newsletter-postcard {
    grid-template-columns: 1fr;
    transform: rotate(-0.3deg);
  }

  .newsletter-postcard:hover {
    transform: rotate(0.2deg) translateY(-2px);
  }

  /* Postage moves above the copy once the card stacks. */
  .newsletter-postage {
    order: -1;
    margin-bottom: 0.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .newsletter-postcard,
  .newsletter-stamp {
    transition: none;
  }

  .newsletter-postcard:hover {
    transform: rotate(-0.4deg);
  }

  .newsletter-postcard:hover .newsletter-stamp {
    transform: rotate(4deg);
  }
}

/* FOOTER */
.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.3rem;
  width: min(calc(100% - 2rem), var(--max));
  margin: 0 auto;
  /* Extra bottom padding leaves clear space below the legal info so the
     floating Calendly badge doesn't sit on top of it at end of scroll. */
  padding: 1.5rem 0 5rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--muted);
}

.footer p {
  margin: 0.2rem 0 0;
}

.footer a {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}

.footer a:hover {
  border-color: var(--yellow);
}

.footer-info {
  flex: 1 1 22rem;
  min-width: 0;
}

.footer-socials {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.7rem;
  flex: 0 0 auto;
}

.footer-socials-heading {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.footer-socials-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fffdf7;
  color: var(--ink);
  font-weight: 600;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.footer-social:hover,
.footer-social:focus-visible {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(38, 38, 43, 0.12);
}

.footer-social-icon {
  display: inline-flex;
  width: 1.05rem;
  height: 1.05rem;
}

.footer-social-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

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

/* CALENDLY BADGE */
.calendly-badge-widget {
  right: max(1rem, calc((100vw - var(--max)) / 2)) !important;
  bottom: 1.1rem !important;
  left: auto !important;
  z-index: 25 !important;
}

.calendly-badge-content {
  display: inline-flex !important;
  align-items: center;
  gap: 0.55rem;
  min-height: 3rem !important;
  padding: 0.78rem 1.05rem 0.78rem 1.15rem !important;
  color: var(--paper) !important;
  background: var(--ink) !important;
  border: 1.5px solid rgba(255, 253, 247, 0.65) !important;
  border-radius: 999px !important;
  box-shadow: 0 16px 36px rgba(20, 20, 23, 0.2), 0 0 0 5px rgba(243, 154, 0, 0.12) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  line-height: 1.1 !important;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.calendly-badge-content::before {
  content: "";
  flex: 0 0 auto;
  width: 0.68rem;
  height: 0.68rem;
  background: var(--yellow);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(243, 154, 0, 0.2);
}

.calendly-badge-content:hover {
  background: var(--ink-deep) !important;
  box-shadow: 0 20px 46px rgba(20, 20, 23, 0.24), 0 0 0 6px rgba(243, 154, 0, 0.16) !important;
  transform: translateY(-2px);
}

.calendly-badge-content span {
  margin-top: 0.12rem;
  color: rgba(255, 253, 247, 0.72) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
}

/* ============================================================================
   RESPONSIVE
   Breakpoints:
     1080px — desktop comfort tweaks (denser nav)
      900px — switch to hamburger nav, light grid reductions
      720px — stack hero/page-hero-split/two-col/news-contact, tighter grids
      520px — compact mobile cleanup
   ============================================================================ */

/* --- 1080px: desktop comfort --- */
@media (max-width: 1080px) {
  .nav a {
    padding: 0.4rem 0.55rem;
    font-size: 0.8rem;
  }

  .stats {
    gap: 1rem;
  }

  .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- 900px: hamburger nav + light grid reductions --- */
@media (max-width: 900px) {
  /* Header collapses to brand + hamburger toggle on the right.
     The panel drops down below the header when the toggle is checked. */
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
  }

  .nav-toggle {
    display: inline-flex;
    grid-column: 3;
    justify-self: end;
    width: 2.35rem;
    height: 2.35rem;
    justify-content: center;
    padding: 0;
  }

  .nav-shell-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    /* Reset the desktop grid placement: an absolutely positioned grid item
       with an explicit grid-column resolves left/right against that narrow
       grid area, which pinned the open menu under the middle column instead
       of spanning the header. Auto placement makes the header's padding box
       the containing block, so the panel runs edge to edge. */
    grid-area: auto;
    justify-self: auto;
    display: none;
    flex-direction: column;
    gap: 0.85rem;
    padding-block: 1rem;
    padding-inline: max(1rem, calc((100% - var(--max)) / 2));
    background: #141417;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4);
  }

  .nav-toggle-input:checked ~ .nav-shell-panel {
    display: flex;
  }

  .nav {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
  }

  .nav a {
    padding: 0.85rem 0.25rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
  }

  .nav a:first-child {
    border-top: none;
  }

  .header-actions {
    grid-column: 2;
    justify-self: end;
    justify-content: flex-end;
    gap: 0.55rem;
  }

  .header-actions .lang-switch {
    display: none;
  }

  .header-cta-shortenable .header-cta-label-full {
    display: none;
  }

  .header-cta-shortenable .header-cta-label-short {
    display: inline;
  }

  .mobile-lang-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 0.15rem;
    padding: 0.55rem 0.8rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
  }

  .footer-lang-link {
    display: block;
  }

  /* Tablet grid relaxations */
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(8.5rem, auto);
  }

  .bento-tile.w-4 {
    grid-column: span 4;
  }

  .bento-tile.w-3 {
    grid-column: span 2;
  }

  .bento-tile.w-2 {
    grid-column: span 2;
  }

  .full-team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .partner-logo-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .partner-logo-strip > li:nth-child(n+4) {
    grid-column: auto;
  }
}

/* --- 720px: stack splits, reduce major grids --- */
@media (max-width: 720px) {
  .section-shell {
    padding: clamp(1.6rem, 5vw, 2.4rem) 0;
  }

  .hero,
  .page-hero-split,
  .intro,
  .bootcamp,
  .two-column-section,
  .topics-section,
  .video-section,
  .image-text-card,
  .news-contact,
  .next-event-card,
  .schools-chapter,
  .stay-updated {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .hero {
    padding-top: clamp(1.4rem, 5vw, 2.2rem);
  }

  /* Keep the date ticket first on mobile so the event timing stays visible
     right away when the hero stacks. */
  .hero-copy > .save-the-date {
    display: grid;
    margin: 0 0 1rem;
    transform-origin: top left;
  }

  /* Constrain stacked hero/page-hero images so they don't dominate the fold. */
  .hero-media img,
  .page-hero-image {
    aspect-ratio: 16 / 10;
    max-height: 60vh;
  }

  .image-collage {
    min-height: 0;
    padding: 0 0 1.8rem;
  }

  .image-collage > .image-large {
    aspect-ratio: 4 / 3;
    width: 86%;
  }

  .image-collage > .image-small {
    width: 50%;
    aspect-ratio: 1;
  }

  .bootcamp {
    width: 100%;
    max-width: none;
    padding: clamp(1.4rem, 5vw, 2.2rem) max(0.85rem, calc((100% - var(--max)) / 2));
  }

  /* Hide the floating dot accent that gets clipped/awkward when the hero
     stacks. */
  .hero-media::before {
    display: none;
  }

  /* Bento becomes a clean 2-col masonry; reset oversized spans. */
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  .bento-tile.w-4,
  .bento-tile.w-3,
  .bento-tile.w-2 {
    grid-column: span 2;
  }

  .bento-tile.h-2 {
    grid-row: span 1;
  }

  /* Featured/highlight tiles keep their visual weight; non-featured tiles
     can sit in pairs. */
  .bento-tile.w-3:not(.h-2),
  .bento-tile.w-2:not(.h-2) {
    grid-column: span 1;
  }

  .program-list,
  .details-grid,
  .feature-list,
  .faq-grid,
  .archive-grid,
  .archive-grid.archive-grid-rich,
  .partner-logo-strip,
  .impact-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem 1rem;
  }

  .team-grid,
  .full-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-cta-card {
    grid-column: span 2;
  }

  .image-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .image-band img {
    aspect-ratio: 1 / 1;
  }

  .schools-chapter-image {
    order: -1;
    max-height: 20rem;
  }

  .next-event-card > img {
    order: -1;
    max-height: 20rem;
  }

  .section-shell.image-text-card,
  .section-shell.topics-section,
  .section-shell.cta-panel,
  .section-shell.schools-chapter,
  .section-shell.next-event-card {
    width: 100%;
    max-width: none;
    padding: clamp(1.5rem, 5vw, 2.4rem) max(1rem, calc((100% - var(--max)) / 2));
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .news-contact.section-shell {
    width: 100%;
    max-width: none;
    gap: 0;
    padding: 0;
  }

  .news-contact .event-card,
  .news-contact .contact-card {
    padding: clamp(1.5rem, 5vw, 2.4rem) max(1rem, calc((100% - var(--max)) / 2));
    border-radius: 0;
  }

  .footer {
    gap: 0.8rem;
  }
}

/* --- 520px: compact mobile cleanup --- */
@media (max-width: 520px) {
  .section-shell {
    width: min(calc(100% - 1.5rem), var(--max));
  }

  .site-header {
    padding-inline: 0.85rem;
  }

  .nav-shell-panel {
    padding-inline: 0.85rem;
  }

  .header-actions {
    gap: 0.4rem;
  }

  .header-actions .button-small {
    padding-inline: 0.7rem;
  }

  h1 {
    font-size: clamp(1.85rem, 8.2vw, 2.6rem);
  }

  h2 {
    font-size: clamp(1.3rem, 6vw, 1.75rem);
  }

  /* Buttons stay inline-block but stretch full-width within their flex row
     when there's only one button per visual line. Multiple buttons in a
     row keep a min readable width and wrap as needed. */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .button {
    width: 100%;
    text-align: center;
  }

  .program-list,
  .feature-list,
  .faq-grid,
  .archive-grid,
  .archive-grid.archive-grid-rich,
  .partner-logo-strip {
    grid-template-columns: 1fr;
  }

  .feature-list-prominent li:nth-child(1),
  .feature-list-prominent li:nth-child(4) {
    grid-column: span 1;
  }

  /* Stats and details stay 2x2 — small numerical cards still scan well. */
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .stats article {
    padding: 0.85rem 0.75rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    text-align: center;
  }

  .stats strong {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .stats span {
    font-size: 0.74rem;
    margin-top: 0.25rem;
    margin-inline: auto;
  }

  .stats-note {
    text-align: center;
    margin-top: 0.5rem;
  }

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

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

  .impact-stats-grid > article:nth-child(3):last-child {
    grid-column: span 2;
  }

  /* Bento collapses to single column on the smallest screens, but featured
     tiles (.h-2 / .accent-ink) keep their visual prominence. */
  .bento {
    grid-template-columns: 1fr;
  }

  .bento-tile.w-3,
  .bento-tile.w-2,
  .bento-tile.w-4 {
    grid-column: span 1;
  }

  /* News + contact cards stack with comfortable spacing. */
  .news-contact {
    gap: 0.7rem;
  }

  .image-text-card,
  .topics-section,
  .cta-panel,
  .schools-chapter,
  .next-event-card,
  .event-card,
  .contact-card {
    border-radius: 18px;
  }

  .image-collage {
    display: block;
    min-height: 0;
    aspect-ratio: auto;
    padding: 0;
  }

  .bootcamp {
    width: 100%;
    max-width: none;
    padding-inline: 0.85rem;
  }

  .image-collage img {
    position: static;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-width: 4px;
  }

  /* On the smallest screens the inset photo would just stack as another
     16:10 image, which adds bulk without visual reward. The large photo
     alone reads better. */
  .image-collage .image-large {
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .image-collage .image-small {
    display: none;
  }

  /* Image band: keep three thumbnails inline so it still reads as a band. */
  .image-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .image-band img {
    border-radius: 14px;
  }

  /* Team grid stays 2-up; full team also 2-up so faces remain recognizable. */
  .team-grid,
  .full-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-card h3 {
    margin-top: 0.55rem;
    font-size: 0.9rem;
  }

  .team-card p {
    font-size: 0.74rem;
  }

  .details:not(.details-grid) > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .footer {
    flex-direction: column;
    padding-bottom: 1.6rem;
  }

  .footer-socials {
    order: -1;
    align-items: flex-start;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--line);
  }

  .footer-socials-list {
    justify-content: flex-start;
  }

  .calendly-badge-widget {
    right: 0.85rem !important;
    bottom: 0.85rem !important;
    left: 0.85rem !important;
  }

  .calendly-badge-content {
    justify-content: center;
    width: 100% !important;
    min-height: 2.75rem !important;
    padding: 0.72rem 0.9rem !important;
    font-size: 0.78rem !important;
  }

  .partners .quote {
    padding-left: 1.6rem;
  }

  .partners .quote::before {
    font-size: 3rem;
  }

  .partner-quote-card::before {
    top: -0.4rem;
    font-size: 3rem;
  }

  .partner-quote-card blockquote,
  .partner-quote-card figcaption {
    padding-left: 1.6rem;
  }

  .stay-updated-channels a {
    padding: 0.75rem 0.85rem;
  }
}

/* --- 380px: ultra-compact safety net --- */
@media (max-width: 380px) {
  .nav-toggle {
    padding: 0.4rem 0.6rem;
  }

  .stats,
  .details-grid {
    grid-template-columns: 1fr;
  }

  .team-grid,
  .full-team-grid {
    grid-template-columns: 1fr;
  }

  .image-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .image-band > :nth-child(3) {
    grid-column: span 2;
  }
}