/* Indigenius — shared styles */

:root {
  /* Turquoise — emphasis */
  --mist:          #d6f3f4;
  --accent-bright: #2bc4c9;
  --accent:        #0f7f86;
  --accent-dark:   #0c6b71;
  --accent-on-mist:#0a5d63;  /* small text on the mist tint — AA */

  /* Light gray — space and structure */
  --white:         #ffffff;
  --gray-bg:       #f3f4f5;
  --gray-200:      #e4e7e9;
  --border:        #e4e7e9;

  /* Neutral text (palette colors are not legible at body size) */
  --ink:           #1f2933;
  --ink-soft:      #5a6872;
  --ink-faint:     #8a96a0;

  --radius:      10px;
  --shadow:      0 1px 2px rgba(31, 41, 51, .05), 0 8px 24px -12px rgba(31, 41, 51, .14);
  --serif:       "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:        -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --wrap:        1120px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--gray-bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

[hidden] { display: none !important; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-dark); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.22rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

.wrap-narrow { max-width: 760px; }

/* ---------- Skip link ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* ---------- Header ---------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* equal side columns => nav sits on the page centre */
  align-items: center;
  gap: 20px;
  min-height: 104px;
}

.brand {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  min-width: 0;
}

.brand-logo {
  height: 68px;
  width: auto;
  display: block;
}

.nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  padding: 8px 13px;
  border-radius: 7px;
  white-space: nowrap;
}
.nav a:hover { background: var(--gray-200); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--accent-on-mist); background: var(--mist); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 11px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}


@media (max-width: 1000px) {
  .header-inner {
    grid-template-columns: auto 1fr;
    min-height: 76px;
  }
  .brand { grid-column: 1; }
  .nav-toggle { display: block; grid-column: 2; justify-self: end; }
  .nav {
    grid-column: 1 / -1;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 10px 18px 18px;
    gap: 2px;
    box-shadow: var(--shadow);
    z-index: 30;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 13px; }
  .site-header { position: relative; }
  .brand-logo { height: 52px; }
}

@media (max-width: 520px) {
  .brand-logo { height: 42px; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: linear-gradient(170deg, var(--mist) 0%, #e3f6f7 48%, var(--gray-bg) 100%);
  border-bottom: 1px solid var(--border);
  padding: clamp(48px, 7vw, 80px) 0 clamp(52px, 8vw, 88px);
  overflow: hidden;
}

/* bright turquoise hairline so the band is anchored by the accent colour */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--accent-bright);
}

/* soft turquoise bloom behind the mark — depth without another hard edge */
.hero::after {
  content: "";
  position: absolute;
  top: -28%;
  left: 50%;
  width: min(760px, 95vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(43,196,201,.22) 0%, rgba(43,196,201,0) 68%);
  pointer-events: none;
}

.hero > .wrap { position: relative; z-index: 1; }

/* ---------- Centred hero (home page) ---------- */

.hero-centered { text-align: center; }

.hero-logo {
  height: clamp(104px, 15vw, 184px);
  width: auto;
  margin: 0 auto clamp(20px, 3vw, 32px);
}

.hero-centered h1 { max-width: 18ch; margin-inline: auto; }
.hero-centered .lede { margin-inline: auto; }
/* consecutive hero ledes read as one passage, not separated blocks */
.hero-centered .lede:has(+ .lede) { margin-bottom: 0.35em; }
.hero-centered .hero-actions { justify-content: center; }

/* on the tinted ground the standard accent is 4.09:1 — use the darker tone */
.hero .eyebrow { color: var(--accent-on-mist); }
.hero-centered .eyebrow { margin-bottom: 14px; }

/* hero quick links: solid white on the tinted ground, filling turquoise on hover */
.hero .btn-ghost {
  background: var(--white);
  color: var(--ink);
  border-color: #9fd9dc;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hero .btn-ghost:hover,
.hero .btn-ghost:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .76rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 18px;
}

/* Keeps an eyebrow's own capitalisation instead of forcing all-caps */
.eyebrow-cased {
  text-transform: none;
  letter-spacing: .04em;
  font-size: .95rem;
}

.hero h1 { max-width: 16ch; margin-bottom: .35em; }

.lede {
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  color: var(--ink-soft);
  max-width: 62ch;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: .97rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { background: var(--white); color: var(--ink); border-color: var(--ink-faint); }

/* ---------- Page head (interior pages) ---------- */

/* same turquoise band as the home hero, scaled down for interior pages */
.page-head {
  position: relative;
  background: linear-gradient(170deg, var(--mist) 0%, #e3f6f7 52%, var(--gray-bg) 100%);
  border-bottom: 1px solid var(--border);
  padding: clamp(44px, 6vw, 72px) 0 clamp(36px, 5vw, 56px);
  overflow: hidden;
}

/* the bright accent hairline that anchors the band */
.page-head::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--accent-bright);
}

/* soft bloom, pulled left to sit behind the left-aligned heading */
.page-head::after {
  content: "";
  position: absolute;
  top: -42%;
  left: 0;
  width: min(680px, 90vw);
  aspect-ratio: 1;
  transform: translateX(-24%);
  background: radial-gradient(circle, rgba(43,196,201,.20) 0%, rgba(43,196,201,0) 68%);
  pointer-events: none;
}

.page-head > .wrap { position: relative; z-index: 1; }
.page-head h1 { max-width: 20ch; }

/* on the tinted ground the standard accent is 4.09:1 — use the darker tone */
.page-head .eyebrow { color: var(--accent-on-mist); }

/* ---------- Mission statement (About) ---------- */

/* turquoise ground, logo above a white card — the mark overlaps the card edge */
.mission {
  position: relative;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: clamp(40px, 6vw, 68px) 0 clamp(52px, 7vw, 86px);
  overflow: hidden;
  text-align: center;
}

.mission::after {
  content: "";
  position: absolute;
  top: -34%;
  left: 50%;
  width: min(760px, 95vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(43,196,201,.10) 0%, rgba(43,196,201,0) 68%);
  pointer-events: none;
}

.mission > .wrap { position: relative; z-index: 1; }

.mission-logo {
  height: clamp(84px, 11vw, 132px);
  width: auto;
  display: block;
  margin: 0 auto clamp(14px, 2vw, 24px);
  position: relative;
  z-index: 2;
}

.mission-card {
  background: linear-gradient(165deg, var(--mist) 0%, #bfebed 52%, #d9f4f5 100%);
  border: 1px solid #a9e2e5;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 56px) clamp(24px, 4vw, 54px) clamp(32px, 4vw, 46px);
}

.mission-card h2 {
  display: inline-block;
  border-bottom: 3px solid var(--accent-on-mist);
  padding-bottom: .12em;
  margin-bottom: .7em;
  color: var(--ink);
}

/* on the mist tint the soft gray drops below AA — use full-strength ink */
.mission-card p {
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* ---------- Sections ---------- */

.section { padding: clamp(52px, 7vw, 88px) 0; }
.section + .section { border-top: 1px solid var(--border); }
.section-paper { background: var(--white); }

.section-head { max-width: 66ch; margin-bottom: 38px; }
.section-head p { color: var(--ink-soft); }

/* ---------- Stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.stat {
  background: var(--white);
  padding: 26px 24px;
  border-top: 3px solid var(--accent-bright);
  position: relative;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* hovering a figure lifts it out of the grid and deepens the turquoise */
.stat:hover,
.stat:focus-within {
  background: var(--mist);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px -12px rgba(31, 41, 51, .3);
  z-index: 1;
}

.stat-num {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  display: block;
  margin-bottom: 10px;
  transition: color .18s ease, transform .18s ease;
  transform-origin: left center;
}

.stat:hover .stat-num,
.stat:focus-within .stat-num {
  color: var(--accent-dark);
  transform: scale(1.09);
}

.stat-label {
  font-size: .93rem;
  color: var(--ink-soft);
  line-height: 1.45;
  transition: color .18s ease;
}

.stat:hover .stat-label,
.stat:focus-within .stat-label { color: var(--ink); }

/* respect a reduced-motion preference: keep the colour shift, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .stat,
  .stat-num { transition: background .18s ease, color .18s ease; }
  .stat:hover,
  .stat:focus-within { transform: none; }
  .stat:hover .stat-num,
  .stat:focus-within .stat-num { transform: none; }
}

.source-note {
  font-size: .83rem;
  color: var(--ink-faint);
  margin-top: 16px;
}
.source-note a { color: var(--ink-faint); }

/* ---------- Card grid ---------- */

.grid {
  display: grid;
  gap: 22px;
}
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.card h3 { margin-bottom: .4em; }
.card p { color: var(--ink-soft); font-size: .97rem; }

.card-link {
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.card-link:hover {
  border-color: var(--accent-bright);
  color: inherit;
  transform: translateY(-2px);
}
.card-more {
  margin-top: auto;
  padding-top: 18px;
  color: var(--accent);
  font-weight: 600;
  font-size: .93rem;
}


/* ---------- Pillars (three A's) ---------- */

.pillar {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 26px 28px;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease, border-left-width .18s ease;
}
.pillar:nth-child(2) { border-left-color: var(--accent-bright); }
.pillar:nth-child(3) { border-left-color: var(--ink-faint); }
.pillar h3 {
  margin-bottom: .35em;
  transition: color .18s ease;
}
.pillar p {
  color: var(--ink-soft);
  font-size: .97rem;
  margin: 0;
  transition: color .18s ease;
}

/* hovering a pillar lifts it and thickens its accent edge */
.pillar:hover,
.pillar:focus-within {
  background: var(--mist);
  border-left-width: 7px;
  transform: translateY(-3px);
  box-shadow: 0 10px 22px -12px rgba(31, 41, 51, .3);
}

.pillar:hover h3,
.pillar:focus-within h3 { color: var(--accent-dark); }

.pillar:hover p,
.pillar:focus-within p { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .pillar { transition: background .18s ease; }
  .pillar:hover,
  .pillar:focus-within { transform: none; border-left-width: 3px; }
}

/* ---------- Field search (Exploring Healthcare) ---------- */

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

.fieldsearch {
  position: relative;
  max-width: 520px;
  margin-bottom: 10px;
}

.fieldsearch input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 13px 44px 13px 46px;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.fieldsearch input::-webkit-search-cancel-button { display: none; }
.fieldsearch input::placeholder { color: var(--ink-faint); }
.fieldsearch input:focus {
  outline: none;
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(43, 196, 201, .22);
}

/* magnifier drawn in CSS — circle plus handle */
.fieldsearch-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -8px;
  border: 2px solid var(--ink-faint);
  border-radius: 50%;
  pointer-events: none;
}
.fieldsearch-icon::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 7px;
  height: 2px;
  background: var(--ink-faint);
  transform: rotate(45deg);
}
.fieldsearch input:focus ~ .fieldsearch-icon,
.fieldsearch:focus-within .fieldsearch-icon { border-color: var(--accent); }
.fieldsearch:focus-within .fieldsearch-icon::after { background: var(--accent); }

.fieldsearch-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.fieldsearch-clear:hover { background: var(--gray-200); color: var(--ink); }

.fieldsearch-count {
  font-size: .88rem;
  color: var(--ink-soft);
  min-height: 1.3em;
  margin: 0 0 20px;
}

.fieldsearch-empty {
  color: var(--ink-soft);
  background: var(--white);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  text-align: center;
}

/* ---------- Flip cards ---------- */

.flipgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px;
}

.flip {
  perspective: 1600px;
  min-height: 430px;
}

.flip-inner {
  position: relative;
  height: 100%;
  min-height: inherit;
}

/* Each face is rotated on its own rather than rotating a preserve-3d container —
   container 3D is unevenly supported, per-face rotation is not. */
.flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent-bright);
  border-radius: var(--radius);
  padding: 28px 26px 22px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transition: transform .55s cubic-bezier(.3, .7, .3, 1), visibility 0s .28s,
              background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* hover emphasis — the lift goes on the wrapper so it cannot disturb the
   rotateY transforms the faces depend on */
.flip { transition: transform .18s ease; }
.flip:hover,
.flip:focus-within { transform: translateY(-4px); z-index: 2; }

.flip:hover .flip-face,
.flip:focus-within .flip-face {
  background: var(--mist);
  border-color: #a9dfe2;
  border-top-color: var(--accent);
  box-shadow: 0 12px 26px -14px rgba(31, 41, 51, .35);
}

.flip:hover .flip-front h3,
.flip:focus-within .flip-front h3 { color: var(--accent-on-mist); }

.flip:hover .flip-overview,
.flip:focus-within .flip-overview { color: var(--ink); }

.flip:hover .flip-btn,
.flip:focus-within .flip-btn { border-color: #8ed2d6; }

.flip-front { transform: rotateY(0deg); visibility: visible; }
.flip-back {
  transform: rotateY(-180deg);
  visibility: hidden;
  border-top-color: var(--accent);
  background: linear-gradient(170deg, var(--white) 0%, #f6fcfc 100%);
}

.flip.is-flipped .flip-front { transform: rotateY(180deg); visibility: hidden; }
.flip.is-flipped .flip-back { transform: rotateY(0deg); visibility: visible; }

.flip-kicker {
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: 10px;
}

.flip-front h3 { font-size: 1.45rem; margin-bottom: .45em; }
.flip-back h4 {
  font-size: 1.12rem;
  margin-bottom: 1em;
  color: var(--accent-on-mist);
}

.flip-overview {
  color: var(--ink-soft);
  font-size: .96rem;
  margin-bottom: 20px;
}

/* back content scrolls inside the card rather than overflowing it */
.flip-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 6px;
  -webkit-overflow-scrolling: touch;
}
.flip-scroll::-webkit-scrollbar { width: 7px; }
.flip-scroll::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 99px; }

.flip-label {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--accent-on-mist);
  margin: 18px 0 7px;
}
.flip-scroll > .flip-label:first-of-type { margin-top: 0; }

.flip-scroll ul {
  margin: 0;
  padding-left: 19px;
  color: var(--ink-soft);
  font-size: .9rem;
}
.flip-scroll li { margin-bottom: 7px; line-height: 1.5; }
.flip-scroll p { color: var(--ink-soft); font-size: .9rem; line-height: 1.55; margin: 0; }
.flip-scroll strong { color: var(--ink); }

.flip-btn {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 18px;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--accent-on-mist);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.flip-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.flip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.flip-btn-back { margin-top: 16px; }

/* chevrons */
.flip-arrow {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}
.flip-arrow-back { transform: rotate(-135deg); }

/* a card arrived at from the nav dropdown gets a brief ring */
.flip.is-target .flip-face {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(43, 196, 201, .3);
}

@media (max-width: 420px) {
  .flipgrid { grid-template-columns: 1fr; }
  .flip { min-height: 470px; }
  .flip-face { padding: 24px 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .flip-face { transition: visibility 0s; }
  .flip { transition: none; }
  .flip:hover,
  .flip:focus-within { transform: none; }
}

/* ---------- Filters ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
  align-items: center;
}

/* on Exploring Healthcare the chips sit under the search box, so they need
   less space beneath them before the result count */
.fieldsearch + .filters { margin: 16px 0 6px; }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.filter-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-right: 6px;
}

.chip {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: .9rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--ink-soft);
  cursor: pointer;
}
.chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---------- Career cards ---------- */

.career {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
}

.career h3 { margin-bottom: .3em; }

.career-tag {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
  background: var(--mist);
  color: var(--accent-on-mist);
}
.career-tag.t-mid  { background: var(--gray-200); color: var(--ink); }
.career-tag.t-long { background: var(--accent); color: #fff; }

.career p { color: var(--ink-soft); font-size: .96rem; }

.career-facts {
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--border);
  font-size: .91rem;
  display: grid;
  gap: 9px;
}
.career-facts div { display: flex; gap: 10px; }
.career-facts dt {
  flex: none;
  width: 92px;
  color: var(--ink-faint);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .76rem;
  padding-top: 2px;
}
.career-facts dd { margin: 0; color: var(--ink); }

/* ---------- Episodes ---------- */

.episode {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 26px;
}

.episode-body { padding: 30px; }

.episode-meta {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: 12px;
}

.episode h3 { font-size: 1.5rem; margin-bottom: .2em; }

.episode-affil {
  color: var(--ink-soft);
  font-size: .97rem;
  margin-bottom: 18px;
}

.embed-slot {
  aspect-ratio: 16 / 9;
  background: var(--gray-200);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--ink-faint);
  font-size: .92rem;
}
.embed-slot strong { color: var(--ink-soft); display: block; margin-bottom: 6px; font-size: 1rem; }
.embed-slot iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Click-to-load video player ---------- */
/* Shows the poster first; the YouTube iframe is only fetched on click, so the
   page stays fast and nothing is requested from YouTube until a visitor asks. */

.player {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--gray-200);
  cursor: pointer;
  overflow: hidden;
  font: inherit;
}

.player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.player:hover img { transform: scale(1.03); }

.player iframe { width: 100%; height: 100%; border: 0; display: block; }

/* The iframe that replaces the poster on click — must inherit the poster's box,
   otherwise the browser falls back to the default 300x150 iframe size. */
.player-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: #000;
}

.play-badge {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 6px 24px rgba(15, 127, 134, .4);
  display: grid;
  place-items: center;
  transition: transform .2s ease, background .2s ease;
}
.play-badge::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 22px solid #fff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}
.player:hover .play-badge { transform: scale(1.08); background: var(--accent-dark); }
.player:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: -3px; }

/* episode recorded but not yet hosted */
.player.is-pending { cursor: default; }
.player.is-pending img { filter: saturate(.35) brightness(.92); }
.player.is-pending .play-badge { background: var(--ink-faint); box-shadow: none; }
.player.is-pending:hover img { transform: none; }
.player.is-pending:hover .play-badge { transform: none; background: var(--ink-faint); }

.player-note {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: rgba(31, 41, 51, .85);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .play-badge { width: 60px; height: 60px; }
  .play-badge::after { border-left-width: 17px; border-top-width: 11px; border-bottom-width: 11px; }
}

details.questions {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
details.questions summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
  color: var(--accent);
  list-style: none;
}
details.questions summary::-webkit-details-marker { display: none; }
details.questions summary::before { content: "▸ "; }
details.questions[open] summary::before { content: "▾ "; }
details.questions ul { margin: 16px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: .95rem; }
details.questions li { margin-bottom: 9px; }

/* ---------- Resource list ---------- */

.resource {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.resource-main { flex: 1 1 auto; min-width: 0; }

/* logo sits in its own column on the right; the monogram is the fallback
   when no file exists at img/logos/<slug>.(svg|png|jpg) */
.resource-logo {
  flex: none;
  width: 118px;
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.resource-logo img {
  /* --logo-scale lets a single mark be nudged up without resizing the column */
  max-width: calc(100% * var(--logo-scale, 1));
  max-height: calc(100% * var(--logo-scale, 1));
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.resource-logo[data-logo="questbridge"] { --logo-scale: 1.22; }
.resource-logo .monogram {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent);
}

@media (max-width: 620px) {
  .resource { gap: 16px; }
  .resource-logo { width: 76px; height: 76px; }
  .resource-logo .monogram { font-size: 1.05rem; }
}
.resource h3 { font-size: 1.14rem; margin-bottom: .3em; }
.resource h3 a { text-decoration: none; }
.resource h3 a:hover { text-decoration: underline; }
.resource p { color: var(--ink-soft); font-size: .96rem; margin-bottom: 0; }

.resource-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.tag {
  font-size: .78rem;
  font-weight: 600;
  background: var(--gray-200);
  color: var(--ink-soft);
  padding: 4px 11px;
  border-radius: 999px;
}
.tag.deadline { background: var(--mist); color: var(--accent-on-mist); }
.tag.free { background: var(--accent); color: #fff; }

/* Opportunities: every resource tag reads as one neutral set, no colour ranking */
.resource-tags .tag,
.resource-tags .tag.deadline,
.resource-tags .tag.free {
  background: var(--gray-200);
  color: var(--ink-soft);
}

/* ---------- Collapsible section groups (Opportunities) ---------- */

.group { border: 0; }

.group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
}
.group > summary::-webkit-details-marker { display: none; }

.group > summary h2 { margin: 0; }

/* chevron rotates to point down when the group is open */
.group > summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin-left: auto;
  border-right: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.group[open] > summary::after { transform: rotate(45deg); }

.group > summary:hover h2 { color: var(--accent-on-mist); }
.group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.group-body { padding-top: 22px; }

/* ---------- Jump navigation ---------- */

.jumpnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.jumpnav a {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--accent-on-mist);
  text-decoration: none;
  white-space: nowrap;
}
.jumpnav a:hover,
.jumpnav a:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; }

/* on the tinted page head a grey hairline vanishes — tint it, and match the hero's hover fill */
.page-head .jumpnav a { border-color: #9fd9dc; transition: background .15s ease, border-color .15s ease, color .15s ease; }

/* a plain "also look at" list for links without a full card */
.minilist { list-style: none; margin: 0; padding: 0; }
.minilist li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: .96rem;
  color: var(--ink-soft);
}
.minilist li:last-child { border-bottom: 0; }
.minilist strong { color: var(--ink); font-weight: 600; }

/* ---------- Founder block ---------- */

/* The whole founder block sits in a tinted card so it reads as its own unit,
   separate from the project copy above it. */
.founder {
  background: var(--mist);
  border: 1px solid #a9dfe2;
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 36px);
}

/* the standard accent is 4.09:1 on mist — small text needs the darker tone */
.founder .founder-role { color: var(--accent-on-mist); }

/* Photo stacked above the text, left edge aligned with the copy below it. */
.founder-photo {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid #a9dfe2;
  box-shadow: var(--shadow);
  margin-bottom: 28px;
}

.founder-name { margin-bottom: .15em; }

.founder-role {
  color: var(--accent);
  font-weight: 600;
  font-size: .95rem;
  margin: 0 0 1.1em;
}

.founder-honors {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.founder-link {
  margin: 16px 0 0;
  font-size: .95rem;
}
.founder-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--accent-on-mist);
  text-decoration: none;
}
.founder-link a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.founder-link a:hover { text-decoration: underline; }
.founder-link a:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* ---------- Pull quote ---------- */

.pullquote {
  margin: clamp(32px, 5vw, 48px) 0 0;
  padding: 0 0 0 clamp(20px, 3vw, 32px);
  border-left: 4px solid var(--accent-bright);
}
.pullquote p {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 .6em;
}
.pullquote cite {
  font-style: normal;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: .03em;
}

/* ---------- Callout ---------- */

.callout {
  background: var(--mist);
  border: 1px solid #a9dfe2;
  border-radius: var(--radius);
  padding: 26px 28px;
  margin: 34px 0;
}
.callout h3 { margin-bottom: .35em; color: var(--accent-on-mist); }
.callout p { color: #14555b; font-size: .97rem; }
/* the standard accent link is 4.09:1 on the mist ground — darken it */
.callout a { color: var(--accent-on-mist); font-weight: 600; }
.callout a:hover { color: #084a4f; }

/* ---------- Prose ---------- */

.prose h2 { margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 22px; color: var(--ink-soft); }
.prose li { margin-bottom: 8px; }

/* ---------- Footer ---------- */

.site-footer {
  background: #101619;
  color: #c7ced3;
  padding: 56px 0 36px;
  font-size: .94rem;
}
.site-footer a { color: var(--mist); }
.site-footer h4 {
  font-family: var(--sans);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #8a96a0;
  margin-bottom: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-brand {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: .5em;
}
.footer-bottom {
  border-top: 1px solid #27313a;
  padding-top: 26px;
  color: #7d8a92;
  font-size: .86rem;
}
.footer-bottom p { margin-bottom: .6em; }