:root {
  --page-bg: color-mix(in srgb, var(--soft) 46%, var(--white));
  --page-line: color-mix(in srgb, var(--blue-dark) 14%, transparent);
  --page-muted: color-mix(in srgb, var(--ink) 70%, var(--white));
  --page-radius: 12px;
  --page-shadow: 0 18px 48px color-mix(in srgb, var(--blue-dark) 12%, transparent);
}

body.inner-page {
  background: var(--white);
  color: var(--blue-dark);
}

.inner-page .site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--white) 96%, transparent);
  color: var(--blue-dark);
  box-shadow: 0 1px 0 var(--page-line);
}

.inner-page .site-header .brand {
  color: var(--blue-dark);
}

.inner-page .button-contact {
  background: var(--orange-cta);
  color: var(--white);
}

.inner-page .button-contact::before {
  background-color: var(--white);
}

.inner-page .button-contact:hover {
  background: var(--orange-cta-hover);
}

.page-shell {
  overflow: hidden;
}

.page-hero {
  padding: clamp(38px, 6vw, 72px) 20px clamp(46px, 7vw, 86px);
  background:
    linear-gradient(180deg, var(--white), color-mix(in srgb, var(--soft) 45%, var(--white)));
}

.page-hero-inner,
.page-section,
.page-related,
.page-final,
.site-footer-inner {
  width: min(100% - 40px, 1440px);
  margin-inline: auto;
}

.page-hero-inner {
  display: grid;
  gap: clamp(28px, 5vw, 74px);
  align-items: center;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  color: color-mix(in srgb, var(--blue-dark) 62%, var(--white));
  font-size: 0.82rem;
  font-weight: 700;
}

.breadcrumbs a {
  color: var(--blue);
}

.breadcrumbs span::before {
  content: ">";
  margin-right: 8px;
  color: var(--aqua);
}

.page-kicker {
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--aqua) 58%, var(--blue));
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-hero h1 {
  max-width: 780px;
  margin: 0;
  color: var(--blue-dark);
  font-family: var(--font-body);
  font-size: clamp(2.7rem, 8vw, 5.85rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.98;
  text-wrap: balance;
}

.page-hero-intro {
  max-width: 680px;
  margin: 22px 0 0;
  color: color-mix(in srgb, var(--ink) 82%, var(--blue-dark));
  font-size: clamp(1rem, 1.65vw, 1.28rem);
  font-weight: 500;
  line-height: 1.68;
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.page-btn {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 21px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  transition: background 150ms ease, transform 150ms ease;
}

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

.page-btn-primary {
  background: var(--orange-cta);
  color: var(--white);
}

.page-btn-primary:hover {
  background: var(--orange-cta-hover);
}

.page-btn-secondary {
  border: 1px solid color-mix(in srgb, var(--blue-dark) 36%, transparent);
  color: var(--blue-dark);
}

.page-btn-secondary:hover {
  background: color-mix(in srgb, var(--blue-dark) 6%, transparent);
}

.hero-card {
  position: relative;
  min-height: 360px;
}

.hero-card::before {
  position: absolute;
  inset: 8% -2% auto auto;
  width: 62%;
  height: 72%;
  border-radius: 18px 18px 56px 18px;
  background: color-mix(in srgb, var(--aqua) 18%, var(--white));
  content: "";
}

.hero-card figure {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 16px 16px 52px 16px;
  box-shadow: var(--page-shadow);
}

.hero-card img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3.45;
  height: auto;
  object-fit: cover;
}

.hero-route-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: min(94%, 620px);
  margin: -34px auto 0;
  overflow: hidden;
  border: 1px solid var(--page-line);
  border-radius: 10px;
  background: var(--page-line);
  box-shadow: 0 18px 36px color-mix(in srgb, var(--blue-dark) 10%, transparent);
}

.hero-route-strip a,
.hero-route-strip span {
  min-height: 74px;
  padding: 16px;
  background: var(--white);
  color: var(--blue-dark);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.2;
}

.hero-route-strip small {
  display: block;
  margin-top: 4px;
  color: var(--page-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.page-section {
  padding: clamp(38px, 5.5vw, 72px) 0;
}

.page-section + .page-section {
  border-top: 1px solid var(--page-line);
}

.section-band {
  width: 100%;
  max-width: none;
  padding: clamp(38px, 5vw, 68px) 0;
  background: var(--page-bg);
}

.section-band > .page-section {
  padding: 0;
}

.section-dark {
  background: var(--blue-dark);
  color: var(--white);
}

.section-dark h2,
.section-dark h3,
.section-dark p,
.section-dark li {
  color: inherit;
}

.section-heading {
  max-width: 780px;
  margin-bottom: 32px;
}

.section-heading h2 {
  margin: 0;
  color: var(--blue-dark);
  font-size: clamp(2rem, 4vw, 3.55rem);
  line-height: 1.05;
  text-wrap: balance;
}

.section-dark .section-heading h2 {
  color: var(--white);
}

.section-heading p {
  margin: 16px 0 0;
  color: var(--page-muted);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.7;
}

.section-dark .section-heading p {
  color: color-mix(in srgb, var(--white) 78%, transparent);
}

.quick-panel {
  display: grid;
  gap: 26px;
  align-items: center;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid color-mix(in srgb, var(--aqua) 28%, transparent);
  border-radius: var(--page-radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--soft) 74%, var(--white)), var(--white));
}

.quick-panel strong {
  display: block;
  max-width: 620px;
  color: var(--blue-dark);
  font-size: clamp(1.35rem, 2.5vw, 2.15rem);
  line-height: 1.14;
}

.quick-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quick-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--blue-dark);
  font-weight: 700;
  line-height: 1.45;
}

.quick-list li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--aqua);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--aqua) 18%, transparent);
}

.route-grid,
.card-grid {
  display: grid;
  gap: 14px;
}

.route-card,
.info-card,
.person-card,
.document-card,
.news-card {
  overflow: hidden;
  border: 1px solid var(--page-line);
  border-radius: var(--page-radius);
  background: var(--white);
}

.route-card {
  display: grid;
  min-height: 0;
}

.route-card img,
.news-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.5;
  object-fit: cover;
}

.route-card-body,
.info-card,
.person-card,
.document-card,
.news-card-body {
  padding: 18px;
}

.route-card h3,
.info-card h3,
.person-card h3,
.document-card h3,
.news-card h3 {
  margin: 0;
  color: var(--blue-dark);
  font-size: clamp(1.08rem, 1.65vw, 1.42rem);
  line-height: 1.12;
}

.route-card p,
.info-card p,
.person-card p,
.document-card p,
.news-card p {
  margin: 10px 0 0;
  color: var(--page-muted);
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.55;
}

.text-link {
  display: inline-flex;
  gap: 8px;
  margin-top: 14px;
  color: color-mix(in srgb, var(--blue) 72%, var(--blue-dark));
  font-size: 0.92rem;
  font-weight: 800;
}

.text-link::after {
  content: ">";
}

.pathway {
  display: grid;
  gap: 10px;
}

.pathway-step {
  display: grid;
  gap: 12px;
  align-items: start;
  padding: 20px;
  border-left: 4px solid var(--aqua);
  background: var(--white);
}

.pathway-step span {
  color: var(--orange);
  font-weight: 900;
}

.split-feature {
  display: grid;
  gap: clamp(18px, 3vw, 30px);
  align-items: center;
  max-width: 1040px;
  margin-inline: auto;
  padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--page-line);
  border-radius: var(--page-radius);
  background: var(--white);
}

.split-feature img {
  display: block;
  width: 100%;
  max-height: 280px;
  aspect-ratio: 4 / 3;
  border-radius: var(--page-radius);
  object-fit: cover;
}

.split-feature h3 {
  max-width: 560px;
  margin: 0;
  color: var(--blue-dark);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.15;
}

.split-feature p {
  max-width: 620px;
  margin: 14px 0 0;
  color: var(--page-muted);
  font-size: 1rem;
  line-height: 1.62;
}

.timetable {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--page-line);
  border-radius: var(--page-radius);
  background: var(--white);
}

.timetable table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.timetable th,
.timetable td {
  padding: 16px;
  border-bottom: 1px solid var(--page-line);
  text-align: left;
  vertical-align: top;
}

.timetable th {
  background: color-mix(in srgb, var(--blue-dark) 8%, var(--white));
  color: var(--blue-dark);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timetable td {
  color: color-mix(in srgb, var(--blue-dark) 86%, var(--ink));
  font-weight: 600;
  line-height: 1.5;
}

.venue-grid,
.people-grid,
.document-grid,
.news-grid {
  display: grid;
  gap: 18px;
}

.venue-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--page-line);
  border-radius: var(--page-radius);
  background: var(--white);
}

.map-placeholder {
  display: grid;
  min-height: 180px;
  place-items: center;
  border-radius: 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--aqua) 22%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--aqua) 22%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--soft) 84%, var(--white));
  background-size: 26px 26px;
  color: var(--blue-dark);
  font-weight: 900;
}

.person-card {
  display: grid;
  gap: 14px;
}

.person-avatar {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 12%, var(--soft));
  color: var(--blue);
  font-weight: 900;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.tag-row span {
  padding: 7px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--aqua) 15%, var(--white));
  color: var(--blue-dark);
  font-size: 0.78rem;
  font-weight: 800;
}

.contact-form label {
  display: grid;
  gap: 8px;
  color: var(--blue-dark);
  font-weight: 800;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  margin-top: 10px;
  border: 1px solid color-mix(in srgb, var(--blue-dark) 22%, transparent);
  border-radius: 10px;
  background: var(--white);
  color: var(--blue-dark);
  font: 600 1rem / 1.4 var(--font-body);
}

.contact-form input,
.contact-form select {
  min-height: 50px;
  padding: 0 14px;
}

.contact-form textarea {
  min-height: 160px;
  padding: 14px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 3px solid color-mix(in srgb, var(--aqua) 45%, transparent);
  border-color: var(--blue);
}

.form-honeypot {
  position: absolute;
  left: -10000px;
}

.form-message-card {
  margin-top: 18px;
}

.form-message-card .page-btn {
  margin-top: 16px;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
}

.page-related {
  padding: 28px 0;
  border-top: 1px solid var(--page-line);
}

.page-related h2 {
  margin: 0 0 14px;
  color: var(--blue-dark);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
}

.related-links {
  display: grid;
  gap: 10px;
}

.related-links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 66px;
  padding: 16px 0;
  border-bottom: 1px solid var(--page-line);
  color: var(--blue-dark);
  font-weight: 800;
}

.related-links a span,
.related-links a small {
  display: block;
  grid-column: 1;
}

.related-links a small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.related-links a::after {
  content: ">";
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--aqua);
}

.page-final {
  margin-bottom: 56px;
  padding: clamp(26px, 4vw, 42px);
  border-radius: 8px;
  background: var(--blue-dark);
  color: var(--white);
}

.page-final h2 {
  max-width: 680px;
  margin: 0;
  color: var(--white);
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.08;
}

.page-final p {
  max-width: 680px;
  margin: 14px 0 0;
  color: color-mix(in srgb, var(--white) 82%, transparent);
  line-height: 1.65;
}

.page-final .page-hero-actions {
  margin-top: 24px;
}

.page-final .page-btn-secondary {
  border-color: color-mix(in srgb, var(--white) 36%, transparent);
  color: var(--white);
}

.site-footer {
  padding: 48px 0 22px;
  background: var(--blue-dark);
  color: var(--white);
}

.site-footer-inner {
  display: grid;
  gap: 34px;
}

.footer-brand::before {
  display: block;
  width: 72px;
  aspect-ratio: 1985 / 2083;
  background-image: url("/assets/brand/lbhsc-primary.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}

.footer-brand p,
.footer-col p,
.footer-bottom {
  color: color-mix(in srgb, var(--white) 76%, transparent);
  line-height: 1.62;
}

.footer-grid {
  display: grid;
  gap: 24px;
}

.footer-col h2 {
  margin: 0 0 12px;
  color: var(--white);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-col a {
  display: block;
  padding: 5px 0;
  color: color-mix(in srgb, var(--white) 84%, transparent);
  font-weight: 700;
}

.footer-col a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

.footer-grid .footer-social {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.footer-grid .footer-social a {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--white) 24%, transparent);
  border-radius: 10px;
}

.footer-bottom {
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--white) 16%, transparent);
  font-size: 0.82rem;
}

@media (min-width: 760px) {
  .page-hero-inner {
    grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1fr);
  }

  .quick-panel {
    grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1fr);
  }

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

  .route-card {
    grid-template-columns: minmax(170px, 38%) minmax(0, 1fr);
    align-items: stretch;
  }

  .route-card img {
    height: 100%;
    min-height: 168px;
    aspect-ratio: auto;
  }

  .route-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 168px;
    padding: 18px 20px;
  }

  .venue-grid,
  .people-grid,
  .document-grid,
  .related-links,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split-feature {
    grid-template-columns: minmax(0, 1.08fr) minmax(240px, 0.62fr);
  }
}

@media (min-width: 1080px) {
  .page-hero {
    padding-inline: 28px;
  }

  .page-hero-inner,
  .page-section,
  .page-related,
  .page-final,
  .site-footer-inner {
    width: min(100% - 72px, 1480px);
  }

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

  .route-card img {
    min-height: 174px;
  }

  .route-card-body {
    min-height: 174px;
  }

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

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

  .footer-grid {
    grid-template-columns: 1.2fr repeat(4, minmax(0, 0.8fr));
  }
}

@media (max-width: 760px) {
  .inner-page .site-header {
    min-height: 76px;
  }

  .inner-page .button-contact {
    display: none;
  }

  .quick-list,
  .hero-route-strip {
    grid-template-columns: 1fr;
  }

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

  .ip-person-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   KOROWA-STYLE INNER PAGE PATTERN
   Half-viewport photo hero + alternating 50/50 image/text sections
   ============================================================ */

.ip-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 54vh;
  min-height: 360px;
  max-height: 580px;
  overflow: hidden;
  background: var(--blue-dark);
}

.ip-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.ip-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(7, 23, 95, 0.82) 0%,
    rgba(7, 23, 95, 0.56) 52%,
    rgba(7, 23, 95, 0.22) 100%
  );
}

.ip-hero-content {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1440px);
  margin-inline: auto;
  padding-top: 52px;
  padding-bottom: clamp(28px, 4vw, 52px);
}

.ip-hero-content .breadcrumbs a,
.ip-hero-content .breadcrumbs span::before {
  color: rgba(255, 255, 255, 0.6);
}

.ip-hero-content .breadcrumbs span {
  color: rgba(255, 255, 255, 0.9);
}

.ip-hero-content .page-kicker {
  color: var(--aqua);
}

.ip-hero-content h1 {
  max-width: 640px;
  color: var(--white);
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  line-height: 1.1;
}

.ip-hero-intro {
  max-width: 480px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  font-weight: 500;
  line-height: 1.6;
}

.ip-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.ip-hero-actions .page-btn-secondary {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--white);
}

.ip-hero-note {
  margin: 16px 0 0;
  max-width: 480px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.ip-hero-note a {
  color: var(--aqua);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ip-hero-note a:hover,
.ip-hero-note a:focus-visible {
  color: var(--white);
}

.ip-hero-note strong {
  color: var(--white);
  font-weight: 700;
}

/* ALTERNATING SECTIONS */

.ip-section {
  padding: clamp(56px, 7.5vw, 100px) 0;
  border-top: 1px solid var(--page-line);
}

.ip-section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  width: min(100% - 48px, 1360px);
  margin-inline: auto;
}

.ip-section.is-reversed .ip-section-image {
  order: 2;
}

.ip-section.is-reversed .ip-section-copy {
  order: 1;
}

.ip-section-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 20px 52px color-mix(in srgb, var(--blue-dark) 12%, transparent);
}

.ip-label {
  display: block;
  margin-bottom: 12px;
  color: var(--aqua);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ip-section-copy h2 {
  margin: 0 0 18px;
  color: var(--blue-dark);
  font-size: clamp(1.75rem, 2.9vw, 2.65rem);
  font-weight: 800;
  line-height: 1.08;
  text-wrap: balance;
}

.ip-section-copy p {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 80%, var(--blue-dark));
  font-size: clamp(0.97rem, 1.2vw, 1.06rem);
  font-weight: 500;
  line-height: 1.74;
}

.ip-section-copy p + p {
  margin-top: 14px;
}

.ip-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  color: var(--blue);
  font-size: 0.92rem;
  font-weight: 800;
  transition: gap 160ms ease;
}

.ip-arrow-link::after {
  content: "→";
  font-size: 1.1em;
}

.ip-arrow-link:hover {
  gap: 18px;
}

/* DARK CTA BAND */

.ip-cta {
  padding: clamp(56px, 7.5vw, 96px) 0;
  background: var(--blue-dark);
  text-align: center;
}

.ip-cta-inner {
  width: min(100% - 48px, 760px);
  margin-inline: auto;
}

.ip-cta h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1.08;
}

.ip-cta p {
  margin: 16px 0 32px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.65;
}

/* PEOPLE DIRECTORY SECTION */

.ip-people-section {
  padding: clamp(56px, 7.5vw, 100px) 0;
  border-top: 1px solid var(--page-line);
}

.ip-people-section.is-shaded {
  background: color-mix(in srgb, var(--blue) 4%, var(--white));
}

.ip-people-inner {
  width: min(100% - 48px, 1360px);
  margin-inline: auto;
}

.ip-people-inner > .ip-label {
  margin-bottom: 10px;
}

.ip-people-inner > h2 {
  margin: 0;
  color: var(--blue-dark);
  font-size: clamp(1.75rem, 2.9vw, 2.65rem);
  font-weight: 800;
  line-height: 1.08;
  text-wrap: balance;
}

.ip-people-intro {
  max-width: 64ch;
  margin: 18px 0 0;
  color: color-mix(in srgb, var(--ink) 75%, var(--blue-dark));
  font-size: 1rem;
  line-height: 1.7;
}

/* PEOPLE GRID */

.ip-person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px;
  margin-top: 48px;
}

.ip-person-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  background: var(--white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 16px color-mix(in srgb, var(--blue-dark) 7%, transparent);
}

.ip-person-short-profile {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
}

.ip-person-description {
  font-size: 0.875rem;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
  color: color-mix(in srgb, var(--ink) 75%, var(--blue-dark));
}

.ip-person-card--with-bio .ip-person-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* One shared disclosure for staff, volunteers and trustees. Its overlay is
   removed from grid sizing, so opening a longer bio never moves the cards. */
.ip-person-bio {
  margin: auto 22px 20px;
  min-height: 44px;
}

.ip-person-bio > summary {
  display: flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  padding: 0 4px;
  list-style: none;
  color: var(--blue-dark);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.ip-person-bio > summary::-webkit-details-marker { display: none; }
.ip-person-bio-close-label { display: none; }
.ip-person-bio[open] .ip-person-bio-open-label { display: none; }
.ip-person-bio[open] .ip-person-bio-close-label { display: inline; }

.ip-person-bio[open] > summary {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 18px;
  color: var(--white);
}

.ip-person-long-profile {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  padding: 76px 22px 24px;
  background: var(--blue);
  color: var(--white);
  animation: person-bio-cover 250ms ease-out;
}

.ip-person-long-content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  overflow-wrap: anywhere;
}

.ip-person-long-name {
  display: block;
  margin-bottom: 6px;
  font-size: 1.125rem;
  line-height: 1.3;
}

.ip-person-long-role {
  display: block;
  margin-bottom: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ip-person-long-intro,
.ip-person-long-description {
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre-line;
}

.ip-person-long-intro { margin-bottom: 20px; }
.ip-person-long-intro p,
.ip-person-long-description p { color: inherit; }
.ip-person-long-profile .ip-person-email {
  display: inline-flex;
  min-height: 44px;
  margin-top: 16px;
  align-items: center;
  color: var(--white);
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ip-person-bio > summary:focus-visible,
.ip-person-long-content:focus-visible,
.ip-person-long-profile a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

@keyframes person-bio-cover {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ip-person-long-profile { animation: none; }
}

/* Full profile modal, opened by script.js from any card with a long bio. */
.ip-person-card--clickable {
  cursor: pointer;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.ip-person-card--clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--blue-dark) 14%, transparent);
}

.ip-person-dialog {
  position: fixed;
  width: min(880px, calc(100% - 32px));
  max-width: none;
  max-height: min(88vh, 760px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--page-radius);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--page-shadow);
  overflow: hidden;
}

.ip-person-dialog::backdrop {
  background: color-mix(in srgb, var(--blue-dark) 72%, transparent);
}

.ip-person-dialog[open] {
  animation: person-dialog-in 220ms ease-out;
}

html:has(.ip-person-dialog[open]) { overflow: hidden; }

.ip-person-dialog-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: min(440px, 88vh);
  max-height: inherit;
}

.ip-person-dialog-media {
  position: relative;
  min-height: 100%;
  background: var(--soft);
}

.ip-person-dialog-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ip-person-dialog-media[hidden] + .ip-person-dialog-body { grid-column: 1 / -1; }

.ip-person-dialog-body {
  min-height: 0;
  max-height: min(88vh, 760px);
  padding: 56px 48px 44px;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}

.ip-person-dialog-body:focus { outline: none; }

.ip-person-dialog-body .ip-person-long-name {
  display: block;
  margin: 0 0 8px;
  padding-right: 44px;
  color: var(--blue-dark);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}

.ip-person-dialog-body .ip-person-long-role {
  display: block;
  margin-bottom: 28px;
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.ip-person-dialog-body .ip-person-long-intro,
.ip-person-dialog-body .ip-person-long-description {
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.75;
  white-space: pre-line;
}

.ip-person-dialog-body .ip-person-long-intro {
  margin-bottom: 20px;
  color: var(--blue-dark);
  font-weight: 600;
}

.ip-person-dialog-body .ip-person-long-description {
  color: color-mix(in srgb, var(--ink) 82%, var(--blue-dark));
}

.ip-person-dialog-body .ip-person-qualifications { margin-top: 24px; }

.ip-person-dialog-body .ip-person-email {
  display: inline-flex;
  min-height: 44px;
  margin-top: 16px;
  align-items: center;
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ip-person-dialog-close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue-dark);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--blue-dark) 16%, transparent);
  cursor: pointer;
}

.ip-person-dialog-close:hover { background: var(--soft); }

.ip-person-dialog-close:focus-visible,
.ip-person-dialog-body .ip-person-email:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .ip-person-dialog { max-height: calc(100dvh - 32px); }

  .ip-person-dialog-panel {
    display: block;
    min-height: 0;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .ip-person-dialog-media { aspect-ratio: 4 / 3; min-height: 0; }

  .ip-person-dialog-body {
    max-height: none;
    padding: 28px 22px 32px;
    overflow: visible;
  }
}

@keyframes person-dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ip-person-dialog[open] { animation: none; }
  .ip-person-card--clickable,
  .ip-person-card--clickable:hover { transition: none; transform: none; }
}

.ip-person-card-media,
.ip-person-card > .ip-person-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: color-mix(in srgb, var(--aqua) 10%, var(--white));
}

.ip-person-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ip-person-card-media > .ip-person-card-img {
  position: absolute;
  inset: 0;
}

.ip-person-card > .ip-person-card-img {
  height: auto;
}

.ip-person-card-img-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--aqua) 10%, var(--white)) 0%,
    color-mix(in srgb, var(--blue) 6%, var(--white)) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.ip-person-card-img-placeholder span {
  display: grid;
  width: 82px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px dashed color-mix(in srgb, var(--blue-dark) 24%, transparent);
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-dark);
  opacity: 0.52;
  font-family: 'Montserrat', sans-serif;
}

.ip-person-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 22px 24px;
}

.ip-person-card-body strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue-dark);
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.ip-person-card-role {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue-dark);
  margin-bottom: 10px;
}

.ip-person-card-body p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 75%, var(--blue-dark));
}

.ip-person-card-body .ip-person-email {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 16px;
  color: var(--blue-dark);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.ip-person-qualifications {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.ip-person-qualifications li,
.ip-person-vacant {
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--aqua) 18%, var(--white));
  color: var(--blue-dark);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
}

.ip-person-vacant {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 12px;
  background: color-mix(in srgb, var(--orange) 14%, var(--white));
}

.ip-person-card--placeholder {
  border: 1px dashed color-mix(in srgb, var(--blue-dark) 20%, transparent);
  box-shadow: none;
}

.ip-person-card--placeholder .ip-person-card-body p {
  color: color-mix(in srgb, var(--ink) 62%, var(--white));
}

@media (max-width: 519px) {
  .ip-person-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (min-width: 520px) and (max-width: 760px) {
  .ip-person-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

.ip-people-group-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--aqua);
  margin: 48px 0 0;
  padding-bottom: 12px;
  border-bottom: 2px solid color-mix(in srgb, var(--aqua) 10%, var(--white));
}

.ip-people-group-label:first-child {
  margin-top: 0;
}

/* FULL-WIDTH TABLE SECTION */

.ip-table-section {
  padding: clamp(56px, 7.5vw, 100px) 0;
  border-top: 1px solid var(--page-line);
  background: #f7f8fc;
}

.ip-table-inner {
  width: min(100% - 48px, 1360px);
  margin-inline: auto;
}

.ip-table-inner h2 {
  margin: 0 0 12px;
  color: var(--blue-dark);
  font-size: clamp(1.75rem, 2.9vw, 2.65rem);
  font-weight: 800;
  line-height: 1.08;
}

.ip-table-note {
  margin: 0 0 36px;
  color: color-mix(in srgb, var(--ink) 65%, var(--blue-dark));
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.6;
}

.ip-table-scroll {
  overflow-x: auto;
  border-radius: 10px;
  box-shadow: 0 4px 24px color-mix(in srgb, var(--blue-dark) 8%, transparent);
}

.ip-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.92rem;
  line-height: 1.5;
}

.ip-table thead {
  background: var(--blue-dark);
  color: #fff;
}

.ip-table th {
  padding: 14px 20px;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.ip-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #e8eaf0;
  color: var(--ink);
  vertical-align: top;
}

.ip-table tbody tr:last-child td {
  border-bottom: none;
}

.ip-table tbody tr:hover td {
  background: #f0f3ff;
}

/* FORM SECTION */

.ip-form-section {
  padding: clamp(56px, 7.5vw, 100px) 0;
  border-top: 1px solid var(--page-line);
}

.ip-form-inner {
  width: min(100% - 48px, 960px);
  margin-inline: auto;
}

.ip-form-inner > .ip-label { margin-bottom: 10px; }

.ip-form-inner > h2 {
  margin: 0 0 12px;
  color: var(--blue-dark);
  font-size: clamp(1.75rem, 2.9vw, 2.65rem);
  font-weight: 800;
  line-height: 1.08;
}

.ip-form-inner > p {
  margin: 0 0 40px;
  color: color-mix(in srgb, var(--ink) 65%, var(--blue-dark));
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.6;
}

/* QUOTE CARDS (Testimonials) */

.ip-quotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}

.quote-card {
  background: #fff;
  border-radius: 10px;
  padding: 32px 28px 28px;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--blue-dark) 7%, transparent);
  border-top: 4px solid var(--aqua);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quote-card blockquote {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 80%, var(--blue-dark));
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.7;
  font-style: italic;
}

.quote-card blockquote::before {
  content: "\201C";
  font-size: 2.5rem;
  color: var(--aqua);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
  font-style: normal;
}

.quote-card footer {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--blue-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* FUNDER LOGOS STRIP */

.ip-funders-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.ip-funder-tag {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: #fff;
  border: 1.5px solid #dde0ef;
  border-radius: 100px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--blue-dark);
}

/* RESPONSIVE */

@media (max-width: 860px) {
  .ip-hero {
    height: auto;
    min-height: 52vw;
    max-height: none;
    align-items: center;
  }

  .ip-section-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ip-section.is-reversed .ip-section-image {
    order: 0;
  }

  .ip-section.is-reversed .ip-section-copy {
    order: 0;
  }
}

/* ============================================================
   EXTENDED LAYOUT VOCABULARY
   New section types added for full inner-page design system
   ============================================================ */

/* — Italic serif accent in headings —————————————————————————— */

.ip-hero-content h1 em,
.ip-section-copy h2 em,
.ip-cta h2 em,
.ip-intro-band h2 em,
.ip-text-section h2 em,
.ip-floating-cta-card h2 em,
.ip-card-grid-inner h2 em,
.ip-stats-inner h2 em,
.ip-pull-quote-inner h2 em,
.ip-people-inner h2 em {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-weight: 400;
}

.ip-hero-content h1 em {
  color: var(--aqua);
}

/* — Section background variants on ip-section ———————————————— */

.ip-section.bg-cream {
  background: #F7F4EF;
  border-top: none;
}

.ip-section.bg-aqua {
  background: #EAF9F7;
  border-top: none;
}

.ip-section.bg-blue-tint {
  background: #EEF0FB;
  border-top: none;
}

.ip-section.bg-dark {
  background: #1A1FDB;
  border-top: none;
}

.ip-section.bg-dark .ip-label {
  color: var(--aqua);
}

.ip-section.bg-dark .ip-section-copy h2 {
  color: #fff;
}

.ip-section.bg-dark .ip-section-copy p {
  color: rgba(255, 255, 255, 0.82);
}

.ip-section.bg-dark .ip-arrow-link {
  color: var(--aqua);
}

.ip-section.bg-dark .ip-section-image img {
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.32);
}

/* — INTRO BAND — dark-blue centred zone below hero ——————————— */

.ip-intro-band {
  padding: clamp(60px, 8vw, 104px) 0;
  background: #1A1FDB;
}

.ip-intro-band-inner {
  width: min(100% - 48px, 780px);
  margin-inline: auto;
  text-align: center;
}

.ip-intro-band .ip-label {
  color: var(--aqua);
  margin-bottom: 16px;
}

.ip-intro-band h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 3.8rem);
  font-weight: 800;
  line-height: 1.06;
  text-wrap: balance;
}

.ip-intro-band p {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.55vw, 1.15rem);
  font-weight: 500;
  line-height: 1.7;
}

.ip-intro-band .ip-hero-actions {
  justify-content: center;
}

/* — FULL-BLEED PHOTO BREAK ——————————————————————————————————— */

.ip-full-bleed {
  width: 100%;
  overflow: hidden;
}

.ip-full-bleed img {
  display: block;
  width: 100%;
  height: clamp(260px, 36vw, 480px);
  object-fit: cover;
  object-position: center 40%;
}

/* — CARD GRID SECTION ———————————————————————————————————————— */

.ip-card-grid-section {
  padding: clamp(60px, 8vw, 104px) 0;
  border-top: 1px solid var(--page-line);
}

.ip-card-grid-section.bg-cream {
  background: #F7F4EF;
  border-top: none;
}

.ip-card-grid-section.bg-aqua {
  background: #EAF9F7;
  border-top: none;
}

.ip-card-grid-section.bg-blue-tint {
  background: #EEF0FB;
  border-top: none;
}

.ip-card-grid-section.bg-dark {
  background: #1A1FDB;
  border-top: none;
}

.ip-card-grid-inner {
  width: min(100% - 48px, 1360px);
  margin-inline: auto;
}

.ip-card-grid-inner > .ip-label {
  margin-bottom: 12px;
}

.ip-card-grid-inner > h2 {
  margin: 0 0 14px;
  color: var(--blue-dark);
  font-size: clamp(1.75rem, 2.9vw, 2.65rem);
  font-weight: 800;
  line-height: 1.08;
  text-wrap: balance;
}

.ip-card-grid-section.bg-dark .ip-card-grid-inner > .ip-label {
  color: var(--aqua);
}

.ip-card-grid-section.bg-dark .ip-card-grid-inner > h2 {
  color: #fff;
}

.ip-card-grid-section.bg-dark .ip-card-grid-inner > p {
  color: rgba(255, 255, 255, 0.8);
}

.ip-card-grid-inner > p {
  max-width: 640px;
  margin: 0 0 44px;
  color: color-mix(in srgb, var(--ink) 72%, var(--blue-dark));
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.68;
}

.ip-card-grid-inner > h2 + .ip-card-grid {
  margin-top: 44px;
}

.ip-card-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.ip-card-grid.cols-2 {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.ip-card-grid.cols-4 {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.ip-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 28px;
  background: #fff;
  border: 1px solid var(--page-line);
  border-radius: 10px;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--blue-dark) 5%, transparent);
}

.ip-card-grid-section.bg-dark .ip-card {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.ip-card-grid-section.bg-dark .ip-card h3 {
  color: #fff;
}

.ip-card-grid-section.bg-dark .ip-card p {
  color: rgba(255, 255, 255, 0.78);
}

.ip-card.accent-aqua { border-top: 4px solid var(--aqua); }
.ip-card.accent-orange { border-top: 4px solid var(--orange); }
.ip-card.accent-blue { border-top: 4px solid var(--blue-dark); }

.ip-card h3 {
  margin: 0;
  color: var(--blue-dark);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  font-weight: 800;
  line-height: 1.15;
}

.ip-card p {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 72%, var(--blue-dark));
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.62;
}

.ip-card .ip-arrow-link {
  margin-top: auto;
  padding-top: 12px;
}

/* — STATS ROW ———————————————————————————————————————————————— */

.ip-stats-section {
  padding: clamp(60px, 8vw, 96px) 0;
  background: #0D0F2E;
  border-top: none;
}

.ip-stats-inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
  text-align: center;
}

.ip-stats-inner > .ip-label {
  color: var(--aqua);
  margin-bottom: 12px;
}

.ip-stats-inner > h2 {
  margin: 0 0 56px;
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.08;
}

.ip-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
}

.ip-stat {
  min-width: 0;
}

.ip-stat-number {
  display: block;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 800;
  color: var(--aqua);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.ip-stat-label {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
}

/* — TEXT SECTION — centred text passage, various bg —————————— */

.ip-text-section {
  padding: clamp(60px, 8vw, 100px) 0;
  border-top: 1px solid var(--page-line);
}

.ip-text-section.bg-cream { background: #F7F4EF; border-top: none; }
.ip-text-section.bg-aqua  { background: #EAF9F7; border-top: none; }
.ip-text-section.bg-blue-tint { background: #EEF0FB; border-top: none; }
.ip-text-section.bg-dark  { background: #1A1FDB;  border-top: none; }

.ip-text-inner {
  width: min(100% - 48px, 780px);
  margin-inline: auto;
  text-align: center;
}

.ip-text-section.is-left .ip-text-inner {
  text-align: left;
  max-width: min(100% - 48px, 900px);
}

.ip-text-inner > .ip-label {
  margin-bottom: 14px;
}

.ip-text-inner h2 {
  margin: 0;
  color: var(--blue-dark);
  font-size: clamp(1.9rem, 3.5vw, 3.1rem);
  font-weight: 800;
  line-height: 1.08;
  text-wrap: balance;
}

.ip-text-section.bg-dark .ip-text-inner h2 { color: #fff; }
.ip-text-section.bg-dark .ip-label { color: var(--aqua); }

.ip-text-inner p {
  margin: 20px 0 0;
  color: color-mix(in srgb, var(--ink) 78%, var(--blue-dark));
  font-size: clamp(1rem, 1.45vw, 1.12rem);
  font-weight: 500;
  line-height: 1.74;
}

.ip-text-section.bg-dark .ip-text-inner p { color: rgba(255, 255, 255, 0.82); }

.ip-text-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
  justify-content: center;
}

.ip-text-section.is-left .ip-text-actions { justify-content: flex-start; }

/* — PULL QUOTE ——————————————————————————————————————————————— */

.ip-pull-quote {
  padding: clamp(52px, 7vw, 88px) 0;
  border-top: 1px solid var(--page-line);
}

.ip-pull-quote.bg-cream { background: #F7F4EF; border-top: none; }
.ip-pull-quote.bg-dark  { background: #0D0F2E; border-top: none; }

.ip-pull-quote-inner {
  width: min(100% - 48px, 820px);
  margin-inline: auto;
  text-align: center;
}

.ip-pull-quote-mark {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-size: 6rem;
  line-height: 0.72;
  color: var(--aqua);
  margin-bottom: 20px;
}

.ip-pull-quote blockquote {
  margin: 0;
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  line-height: 1.38;
  color: var(--blue-dark);
}

.ip-pull-quote.bg-dark blockquote { color: #fff; }

.ip-pull-quote cite {
  display: block;
  margin-top: 22px;
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aqua);
}

/* — ACCORDION / FAQ —————————————————————————————————————————— */

.ip-accordion-section {
  padding: clamp(60px, 8vw, 100px) 0;
  border-top: 1px solid var(--page-line);
}

.ip-accordion-section.bg-cream { background: #F7F4EF; border-top: none; }
.ip-accordion-section.bg-blue-tint { background: #EEF0FB; border-top: none; }

.ip-accordion-inner {
  width: min(100% - 48px, 860px);
  margin-inline: auto;
}

.ip-accordion-inner > .ip-label { margin-bottom: 12px; }

.ip-accordion-inner > h2 {
  margin: 0 0 44px;
  color: var(--blue-dark);
  font-size: clamp(1.75rem, 2.9vw, 2.65rem);
  font-weight: 800;
  line-height: 1.08;
}

.ip-accordion {
  display: grid;
  gap: 0;
}

.ip-accordion details {
  border-bottom: 1px solid var(--page-line);
}

.ip-accordion details:first-child {
  border-top: 1px solid var(--page-line);
}

.ip-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  color: var(--blue-dark);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ip-accordion summary::-webkit-details-marker { display: none; }

.ip-accordion summary::after {
  content: "+";
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--aqua) 16%, #fff);
  color: var(--blue-dark);
  font-size: 1.2rem;
  font-weight: 900;
  transition: background 180ms ease;
}

.ip-accordion details[open] > summary::after {
  content: "−";
  background: var(--blue-dark);
  color: #fff;
}

.ip-accordion-body {
  padding: 0 0 24px;
  color: color-mix(in srgb, var(--ink) 78%, var(--blue-dark));
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.74;
}

.ip-accordion-body p { margin: 0; }
.ip-accordion-body p + p { margin-top: 12px; }

.lesson-steps-section {
  padding: clamp(58px, 7vw, 92px) 0;
  border-top: 1px solid var(--page-line);
  border-bottom: 1px solid var(--page-line);
  background: color-mix(in srgb, var(--soft) 56%, var(--white));
}

.lesson-steps-inner {
  display: grid;
  gap: clamp(26px, 4vw, 42px);
  width: min(100% - 48px, 1160px);
  margin-inline: auto;
}

.lesson-steps-heading {
  max-width: 780px;
}

.lesson-steps-heading h2 {
  margin: 0;
  color: var(--blue-dark);
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  line-height: 1.08;
}

.lesson-steps-heading p {
  margin: 14px 0 0;
  color: var(--page-muted);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-weight: 600;
  line-height: 1.62;
}

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

.lesson-steps-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--page-line);
}

.lesson-steps-list li > span {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--aqua);
  color: var(--blue-dark);
  font-size: 0.9rem;
  font-weight: 900;
}

.lesson-steps-list h3 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 1.02rem;
  line-height: 1.2;
}

.lesson-steps-list p {
  margin: 6px 0 0;
  color: var(--page-muted);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.55;
}

.lesson-steps-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* — DOCUMENT LIST ———————————————————————————————————————————— */

.ip-document-list-section {
  padding: clamp(60px, 8vw, 100px) 0;
  border-top: 1px solid var(--page-line);
}

.ip-document-list-section.bg-cream { background: #F7F4EF; border-top: none; }

.ip-document-list-inner {
  width: min(100% - 48px, 900px);
  margin-inline: auto;
}

.ip-document-list-inner > .ip-label { margin-bottom: 12px; }

.ip-document-list-inner > h2 {
  margin: 0 0 14px;
  color: var(--blue-dark);
  font-size: clamp(1.75rem, 2.9vw, 2.65rem);
  font-weight: 800;
  line-height: 1.08;
}

.ip-document-list-inner > p {
  margin: 0 0 44px;
  color: color-mix(in srgb, var(--ink) 65%, var(--blue-dark));
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.6;
}

.ip-document-list {
  display: grid;
  gap: 0;
}

.ip-document-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--page-line);
  text-decoration: none;
  transition: padding-left 160ms ease;
}

.ip-document-item:first-child { border-top: 1px solid var(--page-line); }
.ip-document-item:hover { padding-left: 6px; }

.ip-document-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue-dark) 9%, #fff);
  display: grid;
  place-items: center;
  color: var(--blue-dark);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  border: 1px solid var(--page-line);
}

.ip-document-info { flex: 1; min-width: 0; }

.ip-document-info strong {
  display: block;
  color: var(--blue-dark);
  font-size: 0.97rem;
  font-weight: 700;
}

.ip-document-info span {
  display: block;
  margin-top: 2px;
  color: color-mix(in srgb, var(--ink) 65%, var(--blue-dark));
  font-size: 0.82rem;
  font-weight: 500;
}

.ip-document-item::after {
  flex-shrink: 0;
  content: "↓";
  color: var(--blue);
  font-weight: 900;
  font-size: 1rem;
}

/* — FLOATING CTA — card overlaying photo ————————————————————— */

.ip-floating-cta {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  min-height: clamp(420px, 52vw, 640px);
  overflow: hidden;
}

.ip-floating-cta-bg {
  grid-area: 1 / 1;
  width: 100%;
  /* A fixed height stops the CMS image's own width/height attributes (a
     portrait upload is 1500x2000) from stretching the band past its design. */
  height: clamp(420px, 52vw, 640px);
  object-fit: cover;
  object-position: center 35%;
  min-height: clamp(420px, 52vw, 640px);
}

.ip-floating-cta-overlay {
  grid-area: 1 / 1;
  background: linear-gradient(
    90deg,
    rgba(7, 23, 95, 0.6) 0%,
    rgba(7, 23, 95, 0.12) 55%,
    transparent 100%
  );
}

.ip-floating-cta-card {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: start;
  margin: 0 0 clamp(36px, 6vw, 72px) clamp(32px, 6vw, 100px);
  padding: clamp(28px, 4vw, 48px);
  max-width: clamp(300px, 36vw, 500px);
  background: #1A1FDB;
  border-radius: 10px;
  color: #fff;
}

.ip-floating-cta-card .ip-label { color: var(--aqua); }

.ip-floating-cta-card h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
}

.ip-floating-cta-card p {
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.62;
}

.ip-floating-cta-card .page-btn-secondary {
  border-color: rgba(255, 255, 255, 0.36);
  color: #fff;
}

/* — NEXT PAGES GRID —————————————————————————————————————————— */

.ip-next-pages {
  padding: clamp(60px, 8vw, 100px) 0;
  background: #F7F4EF;
  border-top: none;
}

.ip-next-pages-inner {
  width: min(100% - 48px, 1360px);
  margin-inline: auto;
}

.ip-next-pages-inner > h2 {
  margin: 0 0 36px;
  color: var(--blue-dark);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
}

.ip-next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.ip-next-card {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 6px 28px color-mix(in srgb, var(--blue-dark) 10%, transparent);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.ip-next-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--blue-dark) 18%, transparent);
}

.ip-next-card-media,
.ip-next-card > img {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: color-mix(in srgb, var(--aqua) 10%, var(--white));
}

.ip-next-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ip-next-card-media > img {
  position: absolute;
  inset: 0;
}

.ip-next-card > img {
  height: auto;
}

.ip-next-card-body {
  padding: 20px 22px;
  background: #fff;
}

.ip-next-card-body .ip-label { margin-bottom: 6px; }

.ip-next-card-body strong {
  display: block;
  color: var(--blue-dark);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 800;
  line-height: 1.2;
}

.ip-next-card-body .ip-arrow-link {
  margin-top: 10px;
  font-size: 0.85rem;
}

/* — Responsive for extended components ——————————————————————— */

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

@media (max-width: 860px) {
  .ip-floating-cta {
    display: block;
    min-height: auto;
  }

  .ip-floating-cta-bg {
    display: block;
    width: 100%;
    height: 240px;
    min-height: 0;
  }

  .ip-floating-cta-overlay { display: none; }

  .ip-floating-cta-card {
    display: block;
    margin: 0;
    max-width: none;
    border-radius: 0;
  }

  .ip-next-grid {
    grid-template-columns: 1fr;
  }

  .ip-card-grid.cols-2,
  .ip-card-grid.cols-4 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CONTACT PAGE — two-column layout
   ============================================================ */

.ip-contact-section {
  background: var(--white);
  padding: clamp(48px, 7vw, 80px) clamp(20px, 5vw, 64px);
}

.ip-contact-inner {
  display: grid;
  gap: clamp(48px, 7vw, 80px);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 860px) {
  .ip-contact-inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.ip-contact-col-label {
  display: block;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(7, 23, 95, 0.12);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(7, 23, 95, 0.48);
}

.ip-contact-find h2 {
  margin: 0 0 20px;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--blue-dark);
}

.ip-contact-find h2 em {
  font-style: italic;
  font-family: var(--font-accent);
  font-weight: 400;
  color: var(--aqua);
}

.ip-contact-address {
  margin: 0 0 22px;
  font-style: normal;
  display: grid;
  gap: 4px;
}

.ip-contact-address p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(20, 20, 20, 0.76);
}

.ip-contact-address a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.ip-contact-address a:hover { text-decoration: underline; }

.ip-contact-transport {
  margin: 0 0 28px;
  padding: 16px 18px;
  background: var(--soft);
  border-radius: 10px;
  display: grid;
  gap: 6px;
}

.ip-contact-transport p {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(20, 20, 20, 0.62);
  line-height: 1.5;
}

.ip-contact-transport p strong {
  color: var(--blue-dark);
  font-weight: 700;
}

.ip-contact-map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(7, 23, 95, 0.05);
  border: 1px solid rgba(7, 23, 95, 0.1);
}

.ip-contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.ip-contact-map-link {
  position: absolute;
  inset: auto 12px 12px auto;
  z-index: 1;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--white);
  color: var(--blue-dark);
  font-size: 0.76rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--blue-dark) 16%, transparent);
}

.ip-contact-map-link:hover {
  color: var(--blue);
}

.ip-contact-form-col h2 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--blue-dark);
}

.ip-contact-form-intro {
  margin: 0 0 26px;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(20, 20, 20, 0.68);
}

.ip-form { display: grid; gap: 16px; }

.ip-form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ip-form-row {
  display: grid;
  gap: 16px;
}

@media (min-width: 480px) {
  .ip-form-row { grid-template-columns: 1fr 1fr; }
}

.ip-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ip-form-field label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--blue-dark);
  letter-spacing: 0.01em;
}

.ip-form-field input,
.ip-form-field textarea,
.ip-form-field select {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid rgba(7, 23, 95, 0.2);
  border-radius: 7px;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink);
  transition: border-color 150ms ease;
  box-sizing: border-box;
}

.ip-form-field input::placeholder,
.ip-form-field textarea::placeholder { color: rgba(20, 20, 20, 0.32); }

.ip-form-field input:focus,
.ip-form-field textarea:focus {
  outline: none;
  border-color: var(--blue);
}

.ip-form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.ip-form-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 480px) {
  .ip-form-footer {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
}

.ip-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 0;
  border-radius: 7px;
  background: var(--orange-cta);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.ip-form-submit:hover { background: var(--orange-cta-hover); }

.ip-form-note {
  font-size: 0.78rem;
  color: rgba(20, 20, 20, 0.48);
  line-height: 1.5;
  margin: 0;
}

.ip-form-status {
  margin: 0;
  min-height: 1.5em;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--blue-dark);
}

.ip-form-status[data-state="error"] { color: #a22d08; }
.ip-form-status[data-state="success"] { color: #08715a; }

/* Contact controls retain readable contrast and phone-sized touch targets. */
.ip-contact-form-col .ip-form-submit {
  min-height: 44px;
  background: var(--blue);
}
.ip-contact-form-col .ip-form-submit:hover { background: var(--blue-dark); }
.ip-contact-form-col .ip-form-submit:disabled { cursor: wait; }
.ip-contact-form-col .ip-form-field input:not([type="checkbox"]),
.ip-contact-form-col .ip-form-field select { min-height: 44px; }
.ip-contact-form-col .ip-form-field input,
.ip-contact-form-col .ip-form-field select,
.ip-contact-form-col .ip-form-field textarea { font-size: 1rem; }
.ip-contact-form-col .ip-form-field :is(input, select, textarea):focus-visible,
.ip-contact-form-col .ip-form-submit:focus-visible {
  outline: 2px solid var(--blue-dark);
  outline-offset: 3px;
}
.ip-contact-form-col .ip-form-status[data-state="error"] { color: var(--ink); }
.ip-contact-form-col .ip-form-status[data-state="success"] { color: var(--blue-dark); }

/* Consent checkbox */
.ip-form-consent .ip-form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.86rem;
  color: rgba(20, 20, 20, 0.72);
  line-height: 1.5;
}

.ip-form-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--blue);
}

.ip-form-consent a { color: var(--blue); text-decoration: underline; }

/* What happens next band */
.contact-next-steps {
  background: var(--blue-dark);
  color: var(--white);
  padding: clamp(48px, 7vw, 80px) clamp(20px, 5vw, 64px);
}

.contact-next-inner {
  max-width: 900px;
  margin: 0 auto;
}

.contact-next-inner > .ip-label { color: var(--aqua); margin-bottom: 10px; }

.contact-next-inner h2 {
  margin: 0 0 clamp(32px, 5vw, 52px);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--white);
}

.contact-next-list {
  display: grid;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 720px) {
  .contact-next-list { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

.contact-next-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-next-num {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--aqua);
  line-height: 1;
  letter-spacing: -0.04em;
}

.contact-next-item h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
}

.contact-next-item p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* FAQ band below contact form */
.ip-contact-faq {
  background: var(--soft);
  padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 64px);
}

.ip-contact-faq-inner {
  max-width: 800px;
  margin: 0 auto;
}

.ip-contact-faq h2 {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blue-dark);
}

/* ============================================================
   DOCUMENT LIBRARY — club-documents page
   ============================================================ */

.ip-doc-section {
  background: var(--white);
  padding: clamp(48px, 7vw, 80px) clamp(20px, 5vw, 64px);
}

.ip-doc-section-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.ip-doc-section-intro {
  margin: 0 0 clamp(32px, 5vw, 48px);
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(20, 20, 20, 0.72);
  max-width: 640px;
}

.ip-doc-group {
  margin-top: clamp(36px, 5vw, 56px);
}

.ip-doc-group:first-of-type { margin-top: 0; }

.ip-doc-group-title {
  margin: 0 0 2px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--blue);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

.ip-doc-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 14px 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(7, 23, 95, 0.08);
}

@media (min-width: 640px) {
  .ip-doc-row {
    grid-template-columns: 38px 1fr 80px auto;
  }
}

.ip-doc-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(239, 77, 11, 0.1);
  flex-shrink: 0;
}

.ip-doc-icon svg { width: 18px; height: 18px; }

.ip-doc-info strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue-dark);
  line-height: 1.3;
  margin-bottom: 2px;
}

.ip-doc-info span {
  font-size: 0.78rem;
  color: rgba(20, 20, 20, 0.52);
  line-height: 1.4;
}

.ip-doc-meta {
  display: none;
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(20, 20, 20, 0.38);
  white-space: nowrap;
}

@media (min-width: 640px) { .ip-doc-meta { display: block; } }

.ip-doc-download {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border: 1.5px solid rgba(7, 23, 95, 0.18);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--blue-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.ip-doc-download:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

.ip-doc-unavailable {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(20, 20, 20, 0.36);
  white-space: nowrap;
  padding: 6px 0;
}

.ip-doc-request-note {
  margin-top: clamp(28px, 4vw, 40px);
  padding: 18px 22px;
  background: var(--soft);
  border-radius: 8px;
  border-left: 4px solid var(--aqua);
  font-size: 0.87rem;
  line-height: 1.65;
  color: rgba(20, 20, 20, 0.76);
}

.ip-doc-request-note a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}

.ip-doc-request-note a:hover { text-decoration: underline; }

/* ============================================================
   DONATION WIDGET — donate page
   ============================================================ */

.ip-donate-section {
  background: var(--soft);
  padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 64px);
  border-bottom: 1px solid rgba(7, 23, 95, 0.08);
}

.ip-donate-wrap {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

@media (min-width: 900px) {
  .ip-donate-wrap {
    grid-template-columns: 1fr 480px;
  }
}

/* Left — context */

.ip-donate-context h2 {
  margin: 16px 0 28px;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--blue-dark);
}

.ip-donate-context h2 em {
  font-style: italic;
  font-family: var(--font-accent);
  font-weight: 400;
  color: var(--aqua);
}

.ip-donate-impact-list {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.ip-donate-impact-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(7, 23, 95, 0.1);
  font-size: 0.93rem;
  color: rgba(20, 20, 20, 0.78);
  line-height: 1.45;
}

.ip-donate-impact-list li:first-child { border-top: 1px solid rgba(7, 23, 95, 0.1); }

.ip-donate-impact-amount {
  flex-shrink: 0;
  min-width: 44px;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--blue-dark);
}

.ip-donate-context-note {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(20, 20, 20, 0.48);
  line-height: 1.6;
}

/* Giving route from Sanity, placed under the reason to give. */
.donate-giving {
  margin-top: 28px;
  max-width: 62ch;
}

.donate-giving p {
  margin: 0 0 10px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--blue-dark);
}

.donate-giving .cms-added-actions {
  margin-top: 22px;
}

/* Right — widget card */

.ip-donate-widget {
  background: var(--white);
  border-radius: 10px;
  padding: clamp(28px, 4vw, 40px);
  box-shadow:
    0 2px 8px rgba(7, 23, 95, 0.06),
    0 12px 40px rgba(7, 23, 95, 0.10);
  border: 1px solid rgba(7, 23, 95, 0.08);
}

/* Frequency toggle */

.ip-donate-freq-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  background: var(--soft);
  border-radius: 10px;
  padding: 4px;
}

.ip-donate-freq-btn {
  flex: 1;
  padding: 9px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(7, 23, 95, 0.52);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.ip-donate-freq-btn[aria-pressed="true"] {
  background: var(--white);
  color: var(--blue-dark);
  box-shadow: 0 1px 4px rgba(7, 23, 95, 0.14);
}

.ip-donate-freq-note {
  margin: 0 0 20px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(20, 20, 20, 0.52);
}

/* Amount buttons */

.ip-donate-amounts-fieldset {
  border: 0;
  margin: 0 0 4px;
  padding: 0;
}

.ip-donate-amounts-legend {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin-bottom: 10px;
}

.ip-donate-amounts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

@media (max-width: 440px) {
  .ip-donate-amounts { grid-template-columns: repeat(3, 1fr); }
}

.ip-donate-amount-btn {
  padding: 11px 6px;
  border: 2px solid rgba(7, 23, 95, 0.16);
  border-radius: 8px;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--blue-dark);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
  text-align: center;
}

.ip-donate-amount-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.ip-donate-amount-btn.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* Custom amount */

.ip-donate-custom-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.ip-donate-custom-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(20, 20, 20, 0.52);
  white-space: nowrap;
}

.ip-donate-custom-input-wrap {
  position: relative;
  flex: 1;
}

.ip-donate-custom-pound {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue-dark);
  pointer-events: none;
}

.ip-donate-custom-input {
  width: 100%;
  padding: 8px 10px 8px 24px;
  border: 2px solid rgba(7, 23, 95, 0.16);
  border-radius: 8px;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue-dark);
  box-sizing: border-box;
  transition: border-color 120ms ease;
}

.ip-donate-custom-input:focus {
  outline: none;
  border-color: var(--blue);
}

.ip-donate-custom-input::-webkit-inner-spin-button,
.ip-donate-custom-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.ip-donate-custom-input { -moz-appearance: textfield; }

/* Impact message */

.ip-donate-impact-msg {
  margin: 14px 0 0;
  padding: 10px 14px;
  background: rgba(35, 219, 198, 0.1);
  border-radius: 8px;
  border-left: 3px solid var(--aqua);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue-dark);
  line-height: 1.45;
  min-height: 38px;
}

/* Gift Aid */

.ip-donate-giftaid {
  margin-top: 20px;
  padding: 14px 16px;
  background: rgba(7, 23, 95, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(7, 23, 95, 0.1);
}

.ip-donate-giftaid-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.ip-donate-giftaid-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--blue);
  cursor: pointer;
}

.ip-donate-giftaid-text {
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(20, 20, 20, 0.7);
}

.ip-donate-giftaid-text strong {
  color: var(--blue-dark);
}

/* CTA */

.ip-donate-cta {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 16px 24px;
  border-radius: 10px;
  background: var(--orange-cta);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 150ms ease, transform 100ms ease;
  box-shadow: 0 4px 14px rgba(239, 77, 11, 0.35);
  box-sizing: border-box;
}

.ip-donate-cta:hover {
  background: var(--orange-cta-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(239, 77, 11, 0.45);
}

.ip-donate-cta:active { transform: translateY(0); }

/* Secure note */

.ip-donate-secure {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin: 12px 0 0;
  font-size: 0.74rem;
  color: rgba(20, 20, 20, 0.4);
  text-align: center;
}

/* ============================================================
   SQUADS & TIMETABLE PAGE
   Practical squad-entry and timetable layout
   ============================================================ */

.squad-glance {
  padding: clamp(26px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--page-line);
  background: var(--white);
}

.squad-glance-inner {
  display: grid;
  gap: 14px;
  width: min(100% - 48px, 1360px);
  margin-inline: auto;
}

.squad-glance-item {
  min-width: 0;
  height: auto;
  overflow: visible;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 104px;
  padding: clamp(18px, 2.2vw, 24px);
  border: 1px solid var(--page-line);
  border-radius: 10px;
  background: linear-gradient(145deg, var(--white), color-mix(in srgb, var(--soft) 50%, var(--white)));
}

.squad-glance-icon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 10%, var(--white));
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 900;
}

.squad-glance-item h2 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.squad-glance-item p {
  overflow-wrap: anywhere;
  margin: 8px 0 0;
  color: color-mix(in srgb, var(--ink) 78%, var(--blue-dark));
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.45;
}

.squad-entry-section {
  padding: clamp(58px, 7vw, 94px) 0;
  background: linear-gradient(180deg, var(--white), color-mix(in srgb, var(--soft) 34%, var(--white)));
}

.squad-entry-inner {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  width: min(100% - 48px, 1360px);
  margin-inline: auto;
  align-items: start;
}

.squad-steps,
.squad-explorer {
  min-width: 0;
}

.squad-steps h2,
.squad-explorer h2,
.squad-section-heading h2 {
  margin: 0;
  color: var(--blue-dark);
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  line-height: 1.08;
}

.squad-steps ol {
  display: grid;
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--page-line);
  list-style: none;
}

.squad-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--page-line);
}

.squad-steps li > span {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 999px;
  background: var(--aqua);
  color: var(--blue-dark);
  font-size: 0.9rem;
  font-weight: 900;
}

.squad-steps h3 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 1.02rem;
  line-height: 1.2;
}

.squad-steps p {
  margin: 6px 0 0;
  color: var(--page-muted);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.55;
}

.squad-explorer {
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid var(--page-line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--blue-dark) 9%, transparent);
}

.squad-explorer-head {
  margin-bottom: 20px;
}

.squad-pathway-groups {
  display: grid;
  gap: 26px;
}

.squad-pathway-group {
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid var(--page-line);
}

.squad-pathway-group h3 {
  margin: 0 0 12px;
  color: var(--blue-dark);
  font-size: 1.04rem;
  font-weight: 900;
  line-height: 1.25;
}

.squad-pathway-group--fitness {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--aqua) 55%, var(--page-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--aqua) 10%, var(--white));
}

.squad-pathway-group--fitness h3 {
  margin-bottom: 4px;
}

.squad-accordion-list {
  display: grid;
  gap: 8px;
}

.squad-accordion-item {
  min-width: 0;
  border: 1px solid var(--page-line);
  border-radius: 9px;
  background: var(--white);
}

.squad-accordion-item summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 15px;
  border-radius: inherit;
  color: var(--blue-dark);
  cursor: pointer;
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.35;
  list-style: none;
}

.squad-accordion-item summary::-webkit-details-marker {
  display: none;
}

.squad-accordion-item summary::after {
  content: '+';
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  border: 1px solid var(--page-line);
  border-radius: 50%;
  color: var(--blue-dark);
  font-size: 1.1rem;
  line-height: 1;
}

.squad-accordion-item[open] summary {
  border-bottom: 1px solid var(--page-line);
  border-radius: 9px 9px 0 0;
  background: color-mix(in srgb, var(--soft) 54%, var(--white));
}

.squad-accordion-item[open] summary::after {
  content: '−';
}

.squad-accordion-item summary:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
  position: relative;
  z-index: 1;
}

/* A squad's own weekly sessions, shown first when the squad is opened. */
.squad-sessions {
  margin: 0 15px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--page-line);
}

.squad-sessions h4 {
  margin: 0 0 8px;
  color: var(--blue-dark);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.squad-session-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.squad-session-list li {
  display: grid;
  grid-template-columns: 6.5rem 6.6rem minmax(0, 1fr);
  gap: 2px 12px;
  padding: 7px 0;
  color: var(--blue-dark);
  font-size: 0.9rem;
  line-height: 1.4;
}

.squad-session-day {
  font-weight: 800;
}

.squad-session-time {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.squad-session-venue {
  color: var(--page-muted);
}

@media (max-width: 520px) {
  .squad-session-list li {
    grid-template-columns: 6rem minmax(0, 1fr);
  }

  .squad-session-venue {
    grid-column: 2;
  }
}

/* The full squad week is optional reading, so it starts closed. */
.weekly-timetable-toggle > summary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border: 1px solid var(--page-line);
  border-radius: 999px;
  color: var(--blue-dark);
  cursor: pointer;
  font-weight: 850;
  list-style: none;
}

.weekly-timetable-toggle > summary::-webkit-details-marker {
  display: none;
}

.weekly-timetable-toggle > summary::after {
  content: '+';
  font-size: 1.1rem;
}

.weekly-timetable-toggle[open] > summary::after {
  content: '−';
}

.weekly-timetable-toggle > summary:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
}

.weekly-timetable-toggle[open] > .weekly-timetable {
  margin-top: 18px;
}

.squad-accordion-fields {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 15px 4px;
}

.squad-accordion-row {
  display: grid;
  gap: 4px;
  padding: 13px 0;
  border-bottom: 1px solid var(--page-line);
}

.squad-accordion-row:last-child {
  border-bottom: 0;
}

.squad-accordion-row dt {
  color: var(--blue-dark);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.squad-accordion-row dd {
  min-width: 0;
  margin: 0;
  color: color-mix(in srgb, var(--ink) 78%, var(--blue-dark));
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.55;
}

.squad-accordion-row dd p {
  margin: 0;
}

.squad-timetable-section {
  padding: clamp(58px, 7vw, 100px) 0;
  background: var(--white);
}

.squad-timetable-inner {
  width: min(100% - 48px, 1360px);
  margin-inline: auto;
}

.squad-section-heading {
  display: grid;
  gap: 18px;
  align-items: end;
  margin-bottom: 28px;
}

.squad-section-heading p {
  max-width: 740px;
  margin: 12px 0 0;
  color: var(--page-muted);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.65;
}

.squad-sample-note {
  display: inline-flex;
  width: fit-content;
  min-height: 36px;
  align-items: center;
  padding: 0 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--aqua) 16%, var(--white));
  color: var(--blue-dark);
  font-size: 0.78rem;
  font-weight: 900;
}

.squad-timetable-tabs {
  max-width: 760px;
  margin-bottom: 16px;
}

.squad-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--page-line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--blue-dark) 8%, transparent);
}

/* Days flow as balanced columns so short days (Thursday, Friday) do not
   stretch to match Wednesday and leave large empty cards. */
.weekly-timetable {
  column-count: 2;
  column-gap: 16px;
  padding: 18px;
}

.weekly-timetable-day {
  display: block;
  break-inside: avoid;
  margin: 0 0 16px;
  padding: 18px;
  border: 1px solid var(--page-line);
  border-radius: 8px;
  background: var(--white);
}

.weekly-timetable-day h3 {
  margin: 0 0 12px;
  color: var(--blue-dark);
  font-size: 1.1rem;
}

.weekly-timetable-day ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Session name with its venue underneath on the left; the time sits in a
   fixed right-hand column so every time lines up down the card. */
.weekly-timetable-session {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.6rem;
  gap: 2px 12px;
  padding: 11px 0;
  border-top: 1px solid var(--page-line);
}

.weekly-timetable-name {
  grid-column: 1;
  grid-row: 1;
  color: var(--blue-dark);
  font-weight: 800;
  line-height: 1.35;
}

.weekly-timetable-time {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  white-space: nowrap;
  text-align: right;
  color: var(--blue-dark);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.weekly-timetable-venue {
  grid-column: 1;
  grid-row: 2;
  color: var(--page-muted);
  font-size: 0.88rem;
}

.squad-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
}

.squad-table th,
.squad-table td {
  padding: 18px;
  border-bottom: 1px solid var(--page-line);
  text-align: left;
  vertical-align: middle;
}

.squad-table thead th {
  background: color-mix(in srgb, var(--blue-dark) 7%, var(--white));
  color: var(--blue-dark);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.squad-table tbody th {
  color: var(--blue);
  font-size: 0.92rem;
  font-weight: 900;
}

.squad-table td {
  color: color-mix(in srgb, var(--ink) 80%, var(--blue-dark));
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.45;
}

.squad-slot-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
  transition: color 0.15s, border-color 0.15s;
}

.squad-slot-link::after {
  content: "\2192";
  font-size: 0.8em;
  transition: transform 0.15s;
}

.squad-slot-link:hover,
.squad-slot-link:focus-visible {
  color: var(--blue-dark);
  border-bottom-color: var(--blue-dark);
}

.squad-slot-link:hover::after,
.squad-slot-link:focus-visible::after {
  transform: translateX(2px);
}

.squad-table tr:last-child th,
.squad-table tr:last-child td {
  border-bottom: 0;
}

.squad-table tr.is-muted th,
.squad-table tr.is-muted td {
  background: color-mix(in srgb, var(--soft) 28%, var(--white));
  color: color-mix(in srgb, var(--page-muted) 58%, var(--white));
}

.squad-table-note {
  margin: 16px 0 0;
  color: var(--page-muted);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.55;
}

@media (min-width: 820px) {
  .squad-glance-inner {
    grid-template-columns: 0.92fr 1.35fr 1fr 1fr;
  }

  .squad-entry-inner {
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  }

  .squad-section-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (max-width: 640px) {
  .squad-glance-inner,
  .squad-entry-inner,
  .squad-timetable-inner {
    width: min(100% - 32px, 1360px);
  }

}

@media (min-width: 720px) {
  .squad-pathway-groups {
    gap: 30px;
  }

  .squad-accordion-row {
    grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr);
    gap: 18px;
  }
}

/* ============================================================
   PARTNERS PAGE — professional partner showcase
   ============================================================ */

.ip-partner-section {
  background: var(--white);
  padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 64px);
}

.ip-partner-section-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.ip-partner-header {
  margin-bottom: clamp(36px, 5vw, 52px);
  max-width: 640px;
}

.ip-partner-header h2 {
  margin: 10px 0 14px;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--blue-dark);
}

.ip-partner-header h2 em {
  font-style: italic;
  font-family: var(--font-accent);
  font-weight: 400;
  color: var(--aqua);
}

.ip-partner-intro {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.72;
  color: rgba(20, 20, 20, 0.62);
}

/* Partner rows */

.ip-partner-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ip-partner-item {
  display: grid;
  grid-template-columns: 164px 1fr;
  gap: clamp(24px, 4.5vw, 60px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid rgba(7, 23, 95, 0.1);
  align-items: center;
}

.ip-partner-item:last-child {
  border-bottom: 1px solid rgba(7, 23, 95, 0.1);
}

/* Logo placeholder box */

.ip-partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  border-radius: 10px;
  background: var(--soft);
  border: 1px solid rgba(7, 23, 95, 0.09);
  flex-shrink: 0;
  overflow: hidden;
}

.ip-partner-logo img {
  max-width: 124px;
  max-height: 60px;
  object-fit: contain;
}

.ip-partner-logo-placeholder {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--blue-dark);
  opacity: 0.32;
}

/* Content */

.ip-partner-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 11px;
  border-radius: 10px;
  background: rgba(35, 219, 198, 0.11);
  border: 1px solid rgba(35, 219, 198, 0.38);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue-dark);
}

.ip-partner-name {
  margin: 0 0 11px;
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--blue-dark);
}

.ip-partner-desc {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.72;
  color: rgba(20, 20, 20, 0.66);
}

/* Community footnote */

.ip-partner-footer-note {
  margin-top: clamp(24px, 3.5vw, 36px);
  padding: 16px 20px;
  background: var(--soft);
  border-radius: 8px;
  border-left: 4px solid var(--aqua);
}

.ip-partner-footer-note p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(20, 20, 20, 0.68);
}

.ip-partner-footer-note a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}

.ip-partner-footer-note a:hover { text-decoration: underline; }

/* Mobile: stack logo above content */

@media (max-width: 560px) {
  .ip-partner-item {
    grid-template-columns: 1fr;
  }

  .ip-partner-logo {
    max-width: 140px;
    height: 74px;
  }
}

/* Partner logo-grid sections (funders / community partners) */

.ip-partner-grid-section {
  background: var(--soft);
  padding: clamp(48px, 7vw, 80px) clamp(20px, 5vw, 64px);
  border-top: 1px solid rgba(7, 23, 95, 0.08);
}

.ip-partner-grid-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.ip-partner-grid-header {
  margin-bottom: clamp(28px, 4vw, 40px);
}

.ip-partner-grid-header h2 {
  margin: 10px 0 0;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--blue-dark);
}

.ip-partner-grid-header h2 em {
  font-style: italic;
  font-family: var(--font-accent);
  font-weight: 400;
  color: var(--aqua);
}

.ip-partner-grid-category {
  margin-bottom: clamp(32px, 5vw, 48px);
}

.ip-partner-grid-category:last-child {
  margin-bottom: 0;
}

.ip-partner-grid-category-title {
  display: block;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(7, 23, 95, 0.12);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(7, 23, 95, 0.44);
}

.ip-partner-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ip-card-grid-intro {
  max-width: 760px;
  margin: 14px 0 28px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.ip-partner-logo-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 18px 14px;
  background: var(--white);
  border-radius: 8px;
  border: 1px solid rgba(7, 23, 95, 0.08);
  text-align: center;
  min-height: 96px;
}

.ip-partner-tile-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 36px;
}

.ip-partner-tile-mark img {
  max-width: 72px;
  max-height: 36px;
  object-fit: contain;
}

.ip-partner-tile-placeholder {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--blue-dark);
  opacity: 0.28;
  line-height: 1.2;
  text-align: center;
}

.ip-partner-tile-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--blue-dark);
  line-height: 1.3;
  opacity: 0.78;
}

/* ============================================================
   PARTNER CARD GRID — hover-reveal cards, grouped sections
   ============================================================ */

.ip-pcard-section {
  background: var(--soft);
  padding: clamp(48px, 7vw, 80px) clamp(20px, 5vw, 64px);
}

.ip-pcard-section--white {
  background: var(--white);
  border-top: 1px solid rgba(7, 23, 95, 0.07);
}

.ip-pcard-section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* Section header — label + h2 on left, optional controls on right */

.ip-pcard-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(24px, 4vw, 36px);
  flex-wrap: wrap;
}

.ip-pcard-section-head-copy {
  flex: 1;
  min-width: 0;
}

.ip-pcard-section-head h2 {
  margin: 8px 0 0;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.1;
  color: var(--blue-dark);
}

.ip-pcard-section-head h2 em {
  font-style: italic;
  font-family: var(--font-accent);
  font-weight: 400;
  color: var(--aqua);
}

.ip-pcard-section-intro {
  margin: 8px 0 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(20, 20, 20, 0.56);
}

/* Carousel arrow controls */

.ip-carousel-controls {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-self: flex-end;
  padding-bottom: 2px;
}

.ip-carousel-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(7, 23, 95, 0.18);
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, border-color 140ms ease;
  flex-shrink: 0;
}

.ip-pcard-section--white .ip-carousel-btn {
  background: var(--soft);
}

.ip-carousel-btn:hover {
  background: var(--blue);
  border-color: var(--blue);
}

.ip-carousel-btn:active {
  background: #1419b0;
  border-color: #1419b0;
}

.ip-carousel-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--blue-dark);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 140ms ease;
}

.ip-carousel-btn:hover svg {
  stroke: var(--white);
}

/* Featured grid (core partners — 3 col) */

.ip-pcard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 720px) {
  .weekly-timetable {
    column-count: 1;
    padding: 0;
  }

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

@media (max-width: 440px) {
  .ip-pcard-grid { grid-template-columns: 1fr; }
}

/* Carousel (funders / community — horizontal scroll) */

.ip-pcard-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: 0;
  scrollbar-width: none;
}

.ip-pcard-carousel::-webkit-scrollbar { display: none; }

.ip-pcard-carousel .ip-pcard {
  flex: 0 0 240px;
  scroll-snap-align: start;
}

@media (max-width: 600px) {
  .ip-pcard-carousel .ip-pcard { flex: 0 0 200px; }
  .ip-carousel-controls { display: none; }
}

/* Individual card — logo above, org name footer always visible */

.ip-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid rgba(7, 23, 95, 0.09);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.ip-pcard:hover {
  box-shadow: 0 8px 32px rgba(7, 23, 95, 0.16);
  transform: translateY(-2px);
}

.ip-pcard:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Logo area — fills most of the card, logo always visible */

.ip-pcard-logo-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px 22px;
  min-height: 190px;
}

.ip-pcard-logo-area img {
  max-width: 88%;
  max-height: 163px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.ip-pcard-placeholder {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--blue-dark);
  opacity: 0.22;
  text-align: center;
  line-height: 1.3;
}

/* Overlay wrapper — static footer, org name always visible */

.ip-pcard-overlay {
  position: static;
  background: var(--blue-dark);
  transform: none;
  transition: none;
  padding: 0;
  flex-shrink: 0;
}

/* Detail — full-card fade-in overlay on hover */

.ip-pcard-detail {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px;
  background: var(--blue-dark);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.ip-pcard:hover .ip-pcard-detail,
.ip-pcard:focus-visible .ip-pcard-detail {
  opacity: 1;
  pointer-events: auto;
}

.ip-pcard-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aqua);
}

.ip-pcard-overlay-name {
  font-size: clamp(0.92rem, 1.6vw, 1.1rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ip-pcard-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.ip-pcard-arrow {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--aqua);
  letter-spacing: 0.04em;
}

/* Name strip — always-visible org name footer */

.ip-pcard-name-strip {
  position: static;
  display: flex;
  align-items: center;
  padding: 13px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   PARTNER DETAIL PAGE — individual partner pages
   ============================================================ */

.ip-pdetail-body {
  background: var(--white);
  padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 64px);
}

.ip-pdetail-inner {
  max-width: 860px;
  margin: 0 auto;
}

.ip-pdetail-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(220px, 22vw, 320px);
  background: var(--soft);
  border-radius: 10px;
  margin-bottom: 52px;
  border: 1px solid rgba(7, 23, 95, 0.08);
  padding: 48px 72px;
}

.ip-pdetail-logo img {
  max-width: 100%;
  max-height: clamp(160px, 16vw, 240px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.ip-pdetail-logo-placeholder {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--blue-dark);
  opacity: 0.22;
}

.ip-pdetail-prose p {
  font-size: 1rem;
  line-height: 1.78;
  color: rgba(20, 20, 20, 0.74);
  margin: 0 0 18px;
}

.ip-pdetail-prose p:last-child { margin-bottom: 0; }

.ip-pdetail-prose strong { color: var(--blue-dark); font-weight: 700; }

.ip-pdetail-website {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  border: 2px solid var(--blue);
  border-radius: 8px;
  padding: 10px 20px;
  transition: background 150ms ease, color 150ms ease;
}

.ip-pdetail-website:hover {
  background: var(--blue);
  color: var(--white);
}

.ip-pdetail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(7, 23, 95, 0.1);
  width: 100%;
  color: rgba(20, 20, 20, 0.4);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 150ms ease;
}

.ip-pdetail-back:hover { color: var(--blue-dark); }

/* --------------------------------------------------------------------------
   COMMUNITY ACCESS PAGE
   -------------------------------------------------------------------------- */

.community-offer,
.community-work,
.community-why,
.community-barriers,
.community-promise,
.community-routes,
.community-final {
  padding: clamp(46px, 6vw, 86px) 0;
}

.community-hero-secondary {
  border-color: color-mix(in srgb, var(--white) 54%, transparent);
  color: var(--white);
}

.community-hero-secondary:hover {
  border-color: var(--white);
  background: color-mix(in srgb, var(--white) 12%, transparent);
}

.community-offer-inner,
.community-work-inner,
.community-why-inner,
.community-barriers-inner,
.community-promise-inner,
.community-routes-inner,
.community-final-inner {
  width: min(100% - 40px, 1380px);
  margin: 0 auto;
}

.community-offer {
  padding-top: clamp(30px, 4vw, 52px);
  padding-bottom: clamp(36px, 5vw, 68px);
  background: var(--white);
}

.community-offer-inner {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
}

.community-offer-statement {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.community-offer-statement h2,
.community-section-heading h2,
.community-why-copy h2,
.community-barriers h2,
.community-promise h2,
.community-final h2 {
  margin: 0;
  color: var(--blue-dark);
  font-size: clamp(1.5rem, 3vw, 2.92rem);
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}

.community-heading-accent {
  color: var(--aqua);
  font-family: "DM Serif Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.community-offer-statement p {
  max-width: 880px;
  margin: 20px auto 0;
  color: var(--page-muted);
  font-size: clamp(1rem, 1.2vw, 1.13rem);
  line-height: 1.72;
}

.community-offer-points {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--page-line);
  border-bottom: 1px solid var(--page-line);
}

.community-offer-points article {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: clamp(22px, 3vw, 34px) clamp(16px, 2vw, 28px);
  text-align: center;
}

.community-offer-points article + article {
  border-top: 1px solid var(--page-line);
}

.community-offer-points span,
.community-card-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--aqua);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.community-offer-points h3,
.community-work-card h3,
.community-route-grid strong {
  margin: 0 0 8px;
  color: var(--blue-dark);
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  line-height: 1.16;
}

.community-offer-points p,
.community-work-card p,
.community-route-grid span {
  margin: 0;
  color: var(--page-muted);
  font-size: 0.93rem;
  line-height: 1.58;
}

.community-work {
  background: color-mix(in srgb, var(--soft) 68%, var(--white));
}

.community-section-heading {
  display: grid;
  gap: 14px;
  max-width: 900px;
  margin-bottom: clamp(26px, 4vw, 44px);
}

.community-section-heading p {
  max-width: 780px;
  margin: 0;
  color: var(--page-muted);
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  line-height: 1.7;
}

.community-section-heading-compact h2 {
  max-width: 820px;
  font-size: clamp(1.5rem, 2.25vw, 2.36rem);
}

.community-section-heading-center {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.community-work-grid {
  display: grid;
  gap: 18px;
}

.community-work-card {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 260px;
  padding: clamp(22px, 2.5vw, 32px);
  border: 1px solid color-mix(in srgb, var(--blue-dark) 9%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--white) 90%, transparent);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--blue-dark) 7%, transparent);
}

.community-work-card--feature {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--aqua) 18%, var(--white)), var(--white));
  border-color: color-mix(in srgb, var(--aqua) 44%, transparent);
}

.community-work-card .ip-arrow-link {
  align-self: end;
  margin-top: 8px;
}

.community-why {
  background: var(--white);
}

.community-why-inner {
  display: grid;
  gap: clamp(30px, 6vw, 86px);
  align-items: center;
}

.community-why-copy {
  max-width: 610px;
}

.community-why-copy p {
  margin: 24px 0 0;
  color: var(--page-muted);
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  line-height: 1.75;
}

.community-why-copy::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin-top: 28px;
  background: var(--aqua);
}

.community-why-image,
.community-barriers-image,
.community-final-image {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in srgb, var(--soft) 70%, var(--white));
  box-shadow: var(--page-shadow);
}

.community-why-image {
  aspect-ratio: 1.55 / 1;
}

.community-barriers-image {
  aspect-ratio: 0.78 / 1;
}

.community-why-image img,
.community-barriers-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-barriers {
  background: var(--white);
  padding-top: clamp(20px, 3vw, 42px);
}

.community-barriers-inner {
  display: grid;
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}

.community-barriers h2 {
  max-width: 700px;
  margin-bottom: 30px;
}

.community-barrier-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-barrier-list li {
  position: relative;
  display: grid;
  gap: 5px;
  padding-left: 52px;
}

.community-barrier-list li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--aqua) 64%, var(--white));
  box-shadow: inset 0 0 0 7px color-mix(in srgb, var(--aqua) 26%, var(--white));
}

.community-barrier-list strong {
  color: var(--blue-dark);
  font-size: 0.98rem;
}

.community-barrier-list span {
  color: var(--page-muted);
  line-height: 1.58;
}

.community-promise {
  background: var(--blue-dark);
  color: var(--white);
}

.community-promise-inner {
  display: grid;
  gap: clamp(28px, 5vw, 66px);
  align-items: center;
}

.community-promise .ip-label,
.community-final .ip-label {
  color: var(--aqua);
}

.community-promise h2,
.community-final h2 {
  color: var(--white);
}

.community-promise-copy p {
  max-width: 620px;
  margin: 18px 0 0;
  color: color-mix(in srgb, var(--white) 82%, transparent);
  line-height: 1.72;
}

.community-promise-grid {
  display: grid;
  gap: 1px;
  background: color-mix(in srgb, var(--white) 22%, transparent);
}

.community-promise-grid article {
  display: grid;
  gap: 10px;
  padding: clamp(22px, 3vw, 34px);
  background: var(--blue-dark);
  text-align: center;
}

.community-promise-grid span {
  color: var(--white);
  font-weight: 800;
}

.community-promise-grid p {
  margin: 0;
  color: color-mix(in srgb, var(--white) 78%, transparent);
  line-height: 1.55;
}

.community-routes {
  background: var(--white);
}

.community-route-grid {
  display: grid;
  gap: 18px;
}

.community-route-grid a {
  display: grid;
  gap: 12px;
  min-height: 220px;
  padding: clamp(22px, 2.5vw, 32px);
  border: 1px solid color-mix(in srgb, var(--blue-dark) 8%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--soft) 50%, var(--white));
  color: inherit;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--blue-dark) 7%, transparent);
}

.community-route-grid a::after {
  content: ">";
  color: var(--aqua);
  font-weight: 800;
}

.community-final {
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(28px, 4vw, 56px);
  background: var(--white);
}

.community-final-inner {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  align-items: center;
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 10px;
  background: var(--blue-dark);
  color: var(--white);
}

.community-final h2 {
  font-size: clamp(1.35rem, 2.25vw, 2.4rem);
}

.community-final p {
  max-width: 580px;
  margin: 18px 0 0;
  color: color-mix(in srgb, var(--white) 82%, transparent);
  line-height: 1.7;
}

.community-final-image {
  aspect-ratio: 2.2 / 1;
  box-shadow: none;
}

.community-final-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.community-final .page-btn-secondary {
  border-color: color-mix(in srgb, var(--white) 34%, transparent);
  color: var(--white);
}

@media (min-width: 760px) {
  .community-offer-points,
  .community-work-grid,
  .community-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .community-offer-points article + article {
    border-top: 0;
  }

  .community-offer-points article:nth-child(even) {
    border-left: 1px solid var(--page-line);
  }

  .community-barrier-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(26px, 4vw, 58px);
  }

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

@media (min-width: 1040px) {
  .community-final-inner {
    grid-template-columns: minmax(280px, 0.38fr) minmax(0, 1fr) auto;
  }

  .community-why-inner,
  .community-barriers-inner,
  .community-promise-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.8fr);
  }

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

  .community-work-card--feature {
    grid-column: span 2;
  }

  .community-route-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .community-final-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .community-offer-statement h2,
  .community-section-heading h2,
  .community-why-copy h2,
  .community-barriers h2,
  .community-promise h2,
  .community-final h2 {
    line-height: 1.1;
  }

  .community-work-card,
  .community-route-grid a {
    min-height: 0;
  }

  .community-final-actions .page-btn {
    width: 100%;
  }
}

/* ── Community promise funders note ── */
.community-promise-funders {
  margin-top: 20px;
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--white) 70%, transparent);
  line-height: 1.6;
}
.community-promise-funders .ip-arrow-link {
  color: var(--aqua);
  margin-left: 4px;
}

/* ── Community single CTA (replaces routes grid + final dark band) ── */
.community-cta {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--soft);
}
.community-cta-inner {
  width: min(100% - 40px, 720px);
  margin: 0 auto;
  text-align: center;
}
.community-cta-inner .ip-label {
  color: var(--aqua);
}
.community-cta-inner h2 {
  margin: 10px 0 0;
  font-size: clamp(1.6rem, 3.2vw, 2.8rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--blue-dark);
  text-wrap: balance;
}
.community-cta-inner p {
  margin: 18px auto 0;
  max-width: 520px;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  color: #555;
  line-height: 1.72;
}
.community-cta-charity {
  margin: 16px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(7,23,95,0.45);
  text-transform: none;
}
.community-cta-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* ── News & Galas combined listing ── */
.ip-news-section {
  padding: clamp(40px,6vw,72px) clamp(20px,5vw,64px);
  background: var(--white);
}
.ip-news-inner { max-width: 1100px; margin: 0 auto; }

/* Editorial header — heading left, pills right */
.ip-news-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px,4vw,40px);
  flex-wrap: wrap;
}
.ip-news-header-copy { flex: 1; min-width: 200px; }
.ip-news-header-copy > img { display: block; max-width: 100%; height: auto; }
.ip-news-header-copy h2 {
  font-size: clamp(1.3rem,2.2vw,1.7rem);
  font-weight: 800;
  color: var(--blue-dark);
  letter-spacing: -0.025em;
  margin: 6px 0 0;
  line-height: 1.2;
}
.ip-news-header-copy h2 em { font-style: italic; color: var(--aqua); font-family: var(--font-accent); font-weight: 400; }

/* Filter pills — now inline in header */
.ip-news-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ip-news-bar-btn {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(7,23,95,0.16);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
  white-space: nowrap;
}
.ip-news-bar-btn:hover { border-color: var(--blue-dark); color: var(--blue-dark); }
.ip-news-bar-btn.is-active { background: var(--blue); border-color: var(--blue); color: var(--white); }
.ip-news-bar-btn.is-active:hover { background: #1419b0; border-color: #1419b0; color: var(--white); }

/* View more button */
.ip-news-more { display: flex; justify-content: center; margin-top: 36px; }
.ip-news-more-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; border-radius: 999px;
  border: 1.5px solid rgba(7,23,95,0.18);
  background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 700;
  color: var(--blue-dark); letter-spacing: 0.04em;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.ip-news-more-btn:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.ip-news-more-btn:active { background: #1419b0; border-color: #1419b0; color: var(--white); }
.ip-news-more-btn svg { width: 14px; height: 14px; transition: stroke 140ms; }
.ip-news-more-btn:hover svg,
.ip-news-more-btn:active svg { stroke: var(--white); }

/*
 * Projects and Galleries drop this grid straight into .ip-news-section with no
 * .ip-news-inner wrapper, so it inherited no width cap and stretched the full
 * viewport — on a 2480px screen that meant 766px cards with 430px images and a
 * 20px gutter between them. Cap and centre the grid itself so the cards stay a
 * normal size on every page that uses it, and let the gutter grow with the
 * viewport instead of staying pinned at 20px.
 */
.ip-news-grid {
  display: grid;
  max-width: 1100px;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 32px);
}

/*
 * On the News page these sit inside .ip-news-inner, which already centres them
 * at 1100px. Projects and Galleries have no such wrapper, so the child selector
 * gives just those two the same centred column — otherwise the heading and grid
 * hug the left edge while every other section on the page is centred.
 */
.ip-news-section > .ip-news-header,
.ip-news-section > .ip-news-grid {
  max-width: 1100px;
  margin-inline: auto;
}

/* Featured card — spans full width, two-column layout */
.ip-news-card.ip-news-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 10px;
  overflow: hidden;
  background: var(--blue-dark);
  text-decoration: none;
  transition: box-shadow 220ms ease;
  margin-bottom: 8px;
}
.ip-news-card.ip-news-card--featured:hover { box-shadow: 0 12px 48px rgba(7,23,95,0.24); }
.ip-news-card.ip-news-card--featured :is(.ip-nc-img, .ip-nc-image) { aspect-ratio: 16/10; overflow: hidden; }
.ip-news-card.ip-news-card--featured :is(.ip-nc-img, .ip-nc-image) img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 420ms ease;
}
.ip-news-card.ip-news-card--featured:hover :is(.ip-nc-img, .ip-nc-image) img { transform: scale(1.04); }
.ip-news-card.ip-news-card--featured .ip-nc-body {
  padding: clamp(28px,4vw,52px);
  display: flex; flex-direction: column; gap: 14px; justify-content: center;
}
.ip-news-card.ip-news-card--featured .ip-nc-meta { display: flex; align-items: center; gap: 10px; }
.ip-news-card.ip-news-card--featured .ip-nc-tag {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--aqua);
}
.ip-news-card.ip-news-card--featured .ip-nc-tag--gala { color: var(--orange); }
.ip-news-card.ip-news-card--featured .ip-nc-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.28); }
.ip-news-card.ip-news-card--featured .ip-nc-date { font-size: 0.7rem; color: rgba(255,255,255,0.38); }
.ip-news-card.ip-news-card--featured .ip-nc-title {
  font-size: clamp(1.25rem,2.4vw,1.85rem); font-weight: 800;
  color: var(--white); line-height: 1.2; letter-spacing: -0.025em;
}
.ip-news-card.ip-news-card--featured .ip-nc-excerpt {
  font-size: 0.875rem; color: rgba(255,255,255,0.58); line-height: 1.68;
}
.ip-news-card.ip-news-card--featured .ip-nc-link {
  font-size: 0.78rem; font-weight: 700; color: var(--aqua);
  letter-spacing: 0.06em; margin-top: 4px;
}

/* Standard grid card */
.ip-news-card {
  display: flex; flex-direction: column;
  border-radius: 8px; overflow: hidden;
  background: var(--white); border: 1px solid rgba(7,23,95,0.07);
  text-decoration: none;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.ip-news-card:hover { box-shadow: 0 6px 24px rgba(7,23,95,0.12); transform: translateY(-2px); }
.ip-news-card :is(.ip-nc-img, .ip-nc-image) { aspect-ratio: 16/9; overflow: hidden; }
.ip-news-card :is(.ip-nc-img, .ip-nc-image) img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 400ms ease;
}
.ip-news-card:hover :is(.ip-nc-img, .ip-nc-image) img { transform: scale(1.04); }
.ip-news-card .ip-nc-body {
  padding: 16px 18px 20px;
  display: flex; flex-direction: column; gap: 7px; flex: 1;
}
.ip-news-card .ip-nc-meta { display: flex; align-items: center; gap: 8px; }
.ip-news-card .ip-nc-tag {
  font-size: 0.65rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue);
}
.ip-news-card .ip-nc-tag--gala { color: var(--orange); }
.ip-news-card .ip-nc-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(20,20,20,0.18); }
.ip-news-card .ip-nc-date { font-size: 0.65rem; color: rgba(20,20,20,0.38); }
.ip-news-card .ip-nc-title {
  font-size: 0.94rem; font-weight: 700;
  color: var(--blue-dark); line-height: 1.35; letter-spacing: -0.015em; flex: 1;
}
.ip-news-card .ip-nc-link {
  font-size: 0.72rem; font-weight: 700; color: var(--blue);
  letter-spacing: 0.04em; margin-top: 4px;
}

.ip-news-card--hidden { display: none !important; }

.ip-news-empty {
  grid-column: 1 / -1; text-align: center;
  padding: 56px 20px; color: rgba(20,20,20,0.36);
  font-size: 0.88rem; display: none;
}
.ip-news-empty.is-visible { display: block; }

@media (max-width: 860px) {
  .ip-news-card--featured { grid-template-columns: 1fr; }
  .ip-news-card.ip-news-card--featured :is(.ip-nc-img, .ip-nc-image) { aspect-ratio: 16/9; }
  .ip-news-card.ip-news-card--featured .ip-nc-body { padding: 20px 22px; gap: 8px; }
  .ip-news-card.ip-news-card--featured .ip-nc-title { font-size: 1.1rem; }
  .ip-news-card.ip-news-card--featured .ip-nc-excerpt { display: none; }
  .ip-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .ip-news-grid { grid-template-columns: 1fr; }
}

/* ─── GALLERY GRID ──────────────────────────────────────────── */

.ip-gallery-section {
  padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 64px);
  background: var(--white);
}

.ip-gallery-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.ip-gallery-header {
  margin-bottom: clamp(24px, 3vw, 36px);
}

.ip-gallery-header h2 {
  margin: 6px 0 0;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 800;
  color: var(--blue-dark);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.ip-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ip-gallery-item {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--soft);
}

.ip-gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
  transition: transform 320ms ease;
}

.ip-gallery-item figcaption {
  padding: 10px 12px 12px;
  color: var(--blue-dark);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.ip-gallery-item:hover img {
  transform: scale(1.04);
}

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

@media (max-width: 440px) {
  .ip-gallery-grid { grid-template-columns: 1fr; }
}

/* ================================================
   JOIN SELECTOR — Interactive programme selector
   ================================================ */

.join-selector {
  padding: 96px 0;
  background: var(--white);
}

.join-selector-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

.join-selector-head {
  max-width: 640px;
  margin-bottom: 56px;
}

.join-selector-head h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 12px 0 16px;
  color: var(--blue-dark);
  line-height: 1.1;
}

.join-selector-head p {
  font-size: 1.0625rem;
  color: var(--page-muted);
  line-height: 1.6;
  margin: 0;
}

.join-selector-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: stretch;
  border: 1px solid var(--page-line);
  border-radius: 16px;
  overflow: hidden;
}

.join-selector-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--page-line);
  background: var(--soft);
}

.join-selector-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 28px 24px 28px 28px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--page-line);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background 200ms ease;
}

.join-selector-btn:last-child {
  border-bottom: none;
  flex: 1;
}

.join-selector-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  background: var(--aqua);
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: opacity 200ms ease;
}

.join-selector-btn.is-active {
  background: var(--white);
}

.join-selector-btn.is-active::before {
  opacity: 1;
}

.join-selector-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--blue-dark);
  line-height: 1.2;
}

.join-selector-tagline {
  font-size: 0.8125rem;
  color: var(--page-muted);
  line-height: 1.4;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}

.join-selector-arrow {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--page-line);
  transition: color 200ms ease, transform 200ms ease;
}

.join-selector-btn.is-active .join-selector-arrow {
  color: var(--aqua);
  transform: translateY(-50%) translateX(2px);
}

.join-selector-panels {
  background: var(--white);
}

.join-panel[hidden] {
  display: none;
}

.join-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.join-panel-img-wrap {
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.join-panel-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.join-panel-body {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.join-panel-body h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--blue-dark);
  line-height: 1.15;
  margin: 0;
}

.join-panel-details {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
}

.join-panel-details li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.join-panel-details strong {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--aqua);
  font-family: 'Montserrat', sans-serif;
}

.join-panel-details span {
  font-size: 0.875rem;
  color: var(--blue-dark);
  line-height: 1.5;
  font-family: 'Montserrat', sans-serif;
}

.join-panel-body .page-btn {
  align-self: flex-start;
  margin-top: 4px;
}

.join-panel-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}


@media (max-width: 800px) {
  .join-selector {
    padding: 64px 0;
  }

  .join-selector-inner {
    padding: 0 20px;
  }

  .join-selector-head {
    margin-bottom: 32px;
  }

  .join-selector-layout {
    grid-template-columns: 1fr;
    border-radius: 12px;
  }

  .join-selector-list {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--page-line);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .join-selector-list::-webkit-scrollbar {
    display: none;
  }

  .join-selector-btn {
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 180px;
    padding: 16px 20px;
    border-bottom: none;
    border-right: 1px solid var(--page-line);
  }

  .join-selector-btn:last-child {
    border-right: none;
    flex: 0 0 auto;
  }

  .join-selector-btn::before {
    top: auto;
    left: 20%;
    right: 20%;
    bottom: 0;
    width: auto;
    height: 3px;
    border-radius: 2px 2px 0 0;
  }

  .join-selector-arrow {
    display: none;
  }

  .join-panel-body {
    padding: 24px 20px;
  }

  .join-panel-details {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ── Timetable: mobile card view (≤ 720px) ─────────────────────────────────── */
@media (max-width: 720px) {
  .squad-table-wrap {
    overflow-x: visible;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .squad-table {
    min-width: 0;
    width: 100%;
  }

  .squad-table thead {
    display: none;
  }

  .squad-table,
  .squad-table tbody,
  .squad-table tr {
    display: block;
    width: 100%;
  }

  .squad-table tbody tr {
    margin-bottom: 14px;
    border: 1px solid var(--page-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--blue-dark) 6%, transparent);
  }

  /* Fully hide muted rows on mobile — cleaner than fading them out */
  .squad-table tr.is-muted {
    display: none;
  }

  .squad-table tbody th {
    display: block;
    padding: 13px 16px 12px;
    background: var(--blue-dark);
    color: var(--white);
    font-size: 0.92rem;
    font-weight: 900;
    border-bottom: none;
  }

  .squad-table td {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 10px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--page-line) 60%, transparent);
    font-size: 0.88rem;
  }

  .squad-table tr td:last-child {
    border-bottom: none;
  }

  .squad-table td::before {
    flex-shrink: 0;
    min-width: 60px;
    color: var(--page-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  /* td:nth-child counts include the th, so td is nth-child(2) onwards */
  .squad-table td:nth-child(2)::before { content: "Mon"; }
  .squad-table td:nth-child(3)::before { content: "Tue"; }
  .squad-table td:nth-child(4)::before { content: "Wed"; }
  .squad-table td:nth-child(5)::before { content: "Thu"; }
  .squad-table td:nth-child(6)::before { content: "Fri"; }
  .squad-table td:nth-child(7)::before { content: "Sun"; }
  .squad-table td:nth-child(8)::before { content: "Notes"; }
}

/* ================================================================
   SCROLLSPY PAGE LAYOUT
   Two-column layout: sticky left TOC + main content.
   Used on content-heavy inner pages (About, Learn to Swim, etc.)
   ================================================================ */

/* Wrapper that creates the grid on wide screens */
.ip-spy-wrap {
  width: min(100% - 48px, 1340px);
  margin-inline: auto;
  padding-block: clamp(56px, 7vw, 96px);
}

@media (min-width: 1060px) {
  .ip-spy-wrap {
    display: grid;
    grid-template-columns: 188px 1fr;
    gap: 0 clamp(40px, 4.5vw, 68px);
    align-items: start;
  }
}

/* — TOC column ————————————————————————————————————————————————— */

.ip-spy-toc {
  display: none;
}

@media (min-width: 1060px) {
  .ip-spy-toc {
    display: block;
    padding-top: 4px;
  }

  .ip-spy-toc-inner {
    position: sticky;
    top: 104px;
  }
}

.ip-spy-toc-label {
  display: block;
  margin: 0 0 16px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(7, 23, 95, 0.38);
}

.ip-spy-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ip-spy-toc-item + .ip-spy-toc-item {
  margin-top: 2px;
}

.ip-spy-toc-link {
  display: block;
  padding: 8px 0 8px 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(7, 23, 95, 0.32);
  text-decoration: none;
  border-left: 2px solid rgba(7, 23, 95, 0.1);
  transition: color 200ms ease, border-color 200ms ease, font-weight 0ms;
}

.ip-spy-toc-link:hover {
  color: rgba(7, 23, 95, 0.65);
  border-left-color: rgba(7, 23, 95, 0.22);
}

.ip-spy-toc-link.is-active {
  color: var(--blue-dark);
  font-weight: 650;
  border-left-color: var(--aqua);
}

/* — Content column ————————————————————————————————————————————— */

.ip-spy-content {
  min-width: 0;
}

/* Override section inner widths to fill the content column */
.ip-spy-content .ip-section-inner,
.ip-spy-content .ip-card-grid-inner,
.ip-spy-content .ip-text-inner,
.ip-spy-content .ip-accordion-inner,
.ip-spy-content .ip-people-inner {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* Remove padding added by section containers — wrap provides it */
.ip-spy-content .ip-section,
.ip-spy-content .ip-text-section,
.ip-spy-content .ip-card-grid-section,
.ip-spy-content .ip-accordion-section,
.ip-spy-content .ip-people-section {
  padding-inline: 0;
}

/* Neutralise full-bleed background alternation inside the column */
.ip-spy-content .ip-section.bg-cream,
.ip-spy-content .ip-section.bg-blue-tint,
.ip-spy-content .ip-section.bg-aqua,
.ip-spy-content .ip-card-grid-section.bg-blue-tint,
.ip-spy-content .ip-card-grid-section.bg-cream,
.ip-spy-content .ip-text-section.bg-cream,
.ip-spy-content .ip-text-section.bg-blue-tint,
.ip-spy-content .ip-text-section.bg-aqua {
  background: var(--white);
  border-top: 1px solid var(--page-line);
}

/* — Section anchors ——————————————————————————————————————————— */

.ip-spy-section {
  scroll-margin-top: 108px;
}

/* — Fix: ip-text-inner.is-left (class was placed on inner, not section) — */

.ip-text-inner.is-left {
  text-align: left;
  max-width: min(100%, 900px);
}

.ip-text-inner.is-left ~ .ip-text-actions,
.ip-text-section .ip-text-inner.is-left + .ip-text-actions {
  justify-content: flex-start;
}

/* Standalone fix for text-actions inside is-left inner */
.ip-text-inner.is-left .ip-text-actions {
  justify-content: flex-start;
}

/* Heading in left-aligned text sections */
.ip-text-section:has(.ip-text-inner.is-left) .ip-text-actions {
  justify-content: flex-start;
}

/* =============================================================
   MARGIN TOC — sticky left-gutter navigation
   Zero layout impact: height:0 sticky wrapper + absolute nav.
   Only renders at ≥1600px where left gutter is wide enough.
   ============================================================= */

.ip-margin-toc-wrap {
  position: relative;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.ip-margin-toc {
  display: none;
  pointer-events: auto;
}

/* Only show at 1800px+ where left margin is ~220px — enough to hold the TOC without overlapping content */
@media (min-width: 1800px) {
  .ip-margin-toc {
    display: block;
    position: absolute;
    top: 48px;
    left: max(20px, calc(50vw - 900px));
    width: 120px;
  }
}

.ip-margin-toc-label {
  display: block;
  margin: 0 0 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(7, 23, 95, 0.55);
}

.ip-margin-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ip-margin-toc-item + .ip-margin-toc-item {
  margin-top: 2px;
}

.ip-margin-toc-link {
  display: block;
  padding: 7px 0 7px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(7, 23, 95, 0.58);
  text-decoration: none;
  border-left: 2px solid rgba(7, 23, 95, 0.18);
  transition: color 200ms ease, border-color 200ms ease;
}

.ip-margin-toc-link:hover {
  color: rgba(7, 23, 95, 0.82);
  border-left-color: rgba(7, 23, 95, 0.32);
}

.ip-margin-toc-link.is-active {
  color: var(--blue-dark);
  font-weight: 650;
  border-left-color: var(--aqua);
}

.ip-margin-toc-section {
  scroll-margin-top: 108px;
}

/* =============================================================
   LEARN TO SWIM — "Stages, not rigid levels" section
   Desktop only. On mobile the page already runs long and the
   stage detail duplicates what the registration steps cover,
   so the whole band is hidden below 900px (content preserved).
   ============================================================= */

@media (max-width: 899px) {
  .ip-stages {
    display: none;
  }

  /* Keep the on-this-page TOC honest if it is ever shown at this width */
  .ip-margin-toc-item:has(> .ip-margin-toc-link[href="#stages"]) {
    display: none;
  }
}

/* =============================================================
   PARTNERS GRID — touch devices
   The card detail is a hover-only overlay, so on touch the cards
   showed a logo and a name with no context at all. Surface the
   category tag permanently instead and drop the dead overlay.
   ============================================================= */

@media (max-width: 899px) {
  .ip-pcard-overlay {
    display: flex;
    flex-direction: column;
  }

  .ip-pcard-name-strip {
    order: 1;
    padding-bottom: 8px;
    border-bottom: none;
  }

  .ip-pcard-detail {
    position: static;
    order: 2;
    inset: auto;
    gap: 0;
    padding: 0 18px 13px;
    opacity: 1;
    pointer-events: none;
  }

  /* Only the one-line category survives; the rest lives on the partner page */
  .ip-pcard-detail .ip-pcard-overlay-name,
  .ip-pcard-detail .ip-pcard-desc,
  .ip-pcard-detail .ip-pcard-arrow {
    display: none;
  }

  .ip-pcard-tag {
    font-size: 9.5px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* =============================================================
   JOIN US SELECTOR — horizontal scroll affordance
   The pathway tabs scroll sideways on mobile with the scrollbar
   hidden, so there was nothing to signal more options. These
   edge shadows are painted by the scroll container itself: they
   fade out when you reach either end, so they double as a
   position indicator.
   ============================================================= */

@media (max-width: 899px) {
  .join-selector-list {
    background-image:
      linear-gradient(to right, var(--soft) 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to left, var(--soft) 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to right, rgba(7, 23, 95, 0.18), rgba(7, 23, 95, 0)),
      linear-gradient(to left, rgba(7, 23, 95, 0.18), rgba(7, 23, 95, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 15px 100%, 15px 100%;
    background-attachment: local, local, scroll, scroll;
    scroll-snap-type: x proximity;
  }

  .join-selector-btn {
    scroll-snap-align: start;
  }
}

/* The Stages band (desktop only) carries the sole link to the squad
   timetable. This duplicate restores that route for mobile, where the
   band is hidden, and stays out of the way on desktop. */
.ip-timetable-link {
  display: none;
}

@media (max-width: 899px) {
  .ip-timetable-link {
    display: inline-flex;
  }
}

/* ── MOBILE FAQ TOGGLE ──────────────────────────────────────────────────────
   On mobile the entire FAQ accordion block is hidden behind a tap-to-reveal
   button injected by script.js. Desktop layout is unaffected.
   ─────────────────────────────────────────────────────────────────────────── */
.ip-faq-toggle {
  display: none; /* hidden on desktop; shown only inside the media query */
}

@media (max-width: 899px) {
  .ip-accordion-section:not(.faq-pro-section) {
    display: none;
  }

  .ip-accordion-section.is-faq-open {
    display: block;
  }

  .ip-faq-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 20px;
    border: 2px solid color-mix(in srgb, var(--blue) 18%, transparent);
    border-radius: 12px;
    background: var(--soft);
    color: var(--blue-dark);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-align: left;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
  }

  .ip-faq-toggle:hover {
    background: color-mix(in srgb, var(--soft) 60%, var(--blue) 10%);
    border-color: color-mix(in srgb, var(--blue) 35%, transparent);
  }

  .ip-faq-toggle::after {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-3px);
    transition: transform 250ms ease;
  }

  .ip-faq-toggle.is-faq-open {
    border-color: color-mix(in srgb, var(--blue) 35%, transparent);
  }

  .ip-faq-toggle.is-faq-open::after {
    transform: rotate(-135deg) translateY(-3px);
  }
}

/* ── Donate — bank transfer card ── */
.ip-donate-bank {
  margin: 22px 0 26px;
  border-radius: 8px;
  border: 1px solid rgba(7, 23, 95, 0.1);
  overflow: hidden;
}
.ip-donate-bank-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: #fff;
  border-bottom: 1px solid rgba(7, 23, 95, 0.07);
}
.ip-donate-bank-row:last-child { border-bottom: none; }
.ip-donate-bank-label {
  font-size: 0.8rem;
  color: rgba(7, 23, 95, 0.5);
  font-weight: 600;
}
.ip-donate-bank-value {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--blue-dark);
  letter-spacing: 0.03em;
  text-align: right;
}
.ip-donate-submit-btn {
  display: block;
  width: 100%;
  padding: 15px 24px;
  margin-top: 6px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms ease;
  text-align: center;
}
.ip-donate-submit-btn:hover { background: #1419b0; }
.ip-donate-widget-note {
  margin: 18px 0 0;
  font-size: 0.78rem;
  color: rgba(7, 23, 95, 0.45);
  line-height: 1.6;
}
.ip-donate-thankyou {
  display: none;
  text-align: center;
  padding: 44px 20px;
}
.ip-donate-thankyou-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--aqua) 20%, #fff);
  color: color-mix(in srgb, var(--aqua) 80%, var(--blue-dark));
}
.ip-donate-thankyou h3 {
  margin: 0 0 12px;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--blue-dark);
}
.ip-donate-thankyou p {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: rgba(7, 23, 95, 0.58);
  line-height: 1.65;
}
.ip-donate-widget-heading {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--blue-dark);
}
.ip-donate-widget-sub {
  margin: 0 0 4px;
  font-size: 0.88rem;
  color: rgba(7, 23, 95, 0.6);
  line-height: 1.55;
}

/* ============================================================
   INNER PAGE SCROLL ANIMATIONS
   ------------------------------------------------------------
   Inner pages previously had no motion at all: every selector in
   the reveal engine was a homepage class. These rules reuse the
   homepage's .reveal / .reveal-lines system (defined in
   styles.css) and add the contained-image "open" treatment.

   Everything is gated on .js-ready, which script.js only adds
   when prefers-reduced-motion is not set. With reduced motion,
   or with no JavaScript, content renders normally and visibly.
   ============================================================ */

/* Contained editorial images scale up from a point, matching the
   homepage who-story treatment so both feel like one site. */
.js-ready .ip-section-image.image-open,
.js-ready .ip-hero-figure.image-open {
  opacity: 0;
  transform: scale(0.05);
  transform-origin: center;
  transition:
    opacity 400ms ease-out,
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.js-ready .ip-section-image.image-open.is-open,
.js-ready .ip-hero-figure.image-open.is-open {
  opacity: 1;
  transform: scale(1);
}

.js-ready .ip-section-image.image-open.is-settled,
.js-ready .ip-hero-figure.image-open.is-settled {
  will-change: auto;
}

/* Full-bleed hero backdrops settle rather than pop — a 5% scale on
   a background image reads as broken, not deliberate. */
.js-ready .ip-hero-bg.hero-settle {
  transform: scale(1.06);
  transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.js-ready .ip-hero-bg.hero-settle.is-open {
  transform: scale(1);
}

.js-ready .ip-hero-bg.hero-settle.is-settled {
  will-change: auto;
}

/* Accordion rows and table rows use a shorter travel so long lists
   do not feel like they are sliding a long way. */
.js-ready .reveal.reveal-tight {
  transform: translateY(12px);
}

.js-ready .reveal.reveal-tight.is-revealed {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .ip-section-image.image-open,
  .js-ready .ip-hero-figure.image-open,
  .js-ready .ip-hero-bg.hero-settle,
  .js-ready .reveal.reveal-tight {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.ip-cta .ip-label {
  display: block;
  margin-bottom: 14px;
  color: var(--aqua);
}

/* Every image-beside-text block uses the About story's square frame, so the
   uploaded photo's own dimensions can never set the height. */
.ip-section-image,
.community-barriers-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
}

/* Community's wider column would otherwise make its frame larger than About's. */
.community-barriers-image {
  width: min(100%, 637px);
  justify-self: center;
}

.ip-section-image img,
.community-barriers-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Compact photographic CTA bands: text controls height, not image dimensions. */
.ip-floating-cta {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 400px;
  padding: clamp(24px, 4vw, 48px);
  background: var(--blue-dark);
}

.ip-floating-cta-bg,
.ip-floating-cta-overlay {
  position: absolute;
  grid-area: auto;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  z-index: -1;
}

.ip-floating-cta-bg {
  object-fit: cover;
}

.ip-floating-cta-overlay {
  background: color-mix(in srgb, var(--blue-dark) 65%, transparent);
}

.ip-floating-cta-card {
  align-self: center;
  justify-self: start;
  width: 100%;
  max-width: 640px;
  margin: 0;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 10px;
  background: var(--blue);
  color: var(--white);
}

.ip-floating-cta-card h2,
.ip-floating-cta-card p,
.ip-floating-cta-card .page-btn-secondary {
  color: var(--white);
}

@media (min-width: 861px) {
  .ip-floating-cta {
    min-height: 440px;
  }
}

[data-team-section="governance"] .ip-person-card-role {
  color: var(--blue-dark);
}


/* Testimonials: one heading and a responsive three-column quote grid. */
.ip-testimonials-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.ip-testimonial-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--page-line);
  border-top: 4px solid var(--blue);
  border-radius: 10px;
  background: var(--white);
  color: var(--blue-dark);
  overflow-wrap: anywhere;
}

.ip-testimonial-card blockquote {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  white-space: pre-line;
}

.ip-testimonial-card figcaption { display: grid; gap: 6px; font-size: 0.875rem; line-height: 1.5; }
.ip-testimonial-name { font-weight: 700; }
.ip-testimonial-role { color: var(--blue-dark); }

@media (min-width: 600px) {
  .ip-testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .ip-testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Day navigation replaces the vertically stacked week. */
.weekly-timetable[data-day-carousel] {
  display: block;
  padding: clamp(12px, 2vw, 18px);
}

.weekly-timetable-day[hidden],
.weekly-timetable-nav[hidden] { display: none !important; }

.weekly-timetable-nav {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.weekly-timetable-nav button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
}

.weekly-timetable-nav button:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 3px; }
.weekly-timetable-current { min-width: 0; text-align: center; }
.weekly-timetable-current h3 { margin: 0; color: var(--blue-dark); font-size: clamp(1.125rem, 3vw, 1.5rem); overflow-wrap: anywhere; }

.ip-testimonials-inner h2 em { color: var(--blue); }
.weekly-timetable-empty { margin: 0; color: var(--blue-dark); font-size: 0.875rem; line-height: 1.6; }

.ip-pdetail-long-bio { white-space: pre-line; }

/* News header photo sits beside the heading at a sensible size. */
.ip-news-header-copy > .ip-news-header-image {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  margin-top: 20px;
  object-fit: cover;
  border-radius: 10px;
}

/* Long partner names (National Lottery Community Fund) wrap onto a second
   line instead of being cut off with an ellipsis. */
.ip-pcard-name-strip {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Join Us routes from Sanity items: match the site's arrow links. */
.join-routes .cms-added-card a {
  display: inline-block;
  margin-top: 4px;
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}

.join-routes .cms-added-card a:hover,
.join-routes .cms-added-card a:focus-visible {
  text-decoration: underline;
}

/* Image-beside-text block with no photo: give the copy a single readable column. */
.ip-section-inner--text-only {
  grid-template-columns: minmax(0, 760px);
  justify-content: start;
}

/* Accent text is brand aqua on every background; see the matching block in
   styles.css. Muted grey text is dark enough for 4.5:1 on white. */
.ip-label,
.community-heading-accent,
.inner-page main h2 em,
.inner-page main .community-cta-inner .ip-label {
  color: var(--aqua);
}

/* Hero photos, the navy stats band and the brand-blue CTA card keep brand
   aqua, which already reads on dark backgrounds. */
.ip-hero-content .ip-label,
.inner-page main .ip-stats-section h2 em,
.inner-page main .ip-floating-cta-card h2 em {
  color: var(--aqua);
}

.ip-news-card .ip-nc-tag--gala {
  color: var(--orange-cta);
}

.ip-news-card.ip-news-card--featured .ip-nc-tag--gala {
  color: #ff7a45;
}

.ip-news-card .ip-nc-date,
.ip-doc-meta,
.ip-doc-info span,
.ip-pdetail-back,
.ip-pcard-section-intro,
.breadcrumbs span,
.article-meta-date {
  color: rgba(20, 20, 20, 0.62);
}

.ip-news-card.ip-news-card--featured .ip-nc-date {
  color: rgba(255, 255, 255, 0.65);
}

.ip-contact-col-label {
  color: rgba(7, 23, 95, 0.7);
}