/* =========================================================
   Kids' Conference
   Main Stylesheet
   ========================================================= */


/* =========================================================
   1. RESET / BASE
   ========================================================= */

:root {
  --kc-navy: #17324d;
  --kc-navy-deep: #0d243c;
  --kc-teal: #007c83;
  --kc-purple: #6c4ee3;
  --kc-purple-deep: #5738d4;
  --kc-yellow: #ffc83d;
  --kc-yellow-hover: #ffbb10;
  --kc-surface: #ffffff;
  --kc-canvas: #f4f7fb;
  --kc-border: #dfe3ec;
  --kc-ink: #18233a;
  --kc-muted: #667089;
  --kc-radius-hero: 36px;
  --kc-shadow-nav: 0 14px 36px rgba(23, 50, 77, 0.13);
  --kc-shadow-hero: 0 32px 78px rgba(23, 50, 77, 0.2);
  --kc-space-1: 4px;
  --kc-space-2: 8px;
  --kc-space-3: 12px;
  --kc-space-4: 16px;
  --kc-space-5: 24px;
  --kc-space-6: 32px;
  --kc-space-7: 48px;
  --kc-space-8: 64px;
  --kc-space-9: 80px;
  --kc-error: #b1382e;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Source Sans 3", Arial, sans-serif;
  color: #24314a;
  background: #ffffff;
  line-height: 1.6;
}

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

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

button,
input,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  font-family: "Nunito Sans", Arial, sans-serif;
  color: #18233a;
  line-height: 1.15;
}

p {
  margin-top: 0;
}


/* =========================================================
   2. GLOBAL CONTAINER
   ========================================================= */

.site-container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}


/* =========================================================
   3. BUTTONS
   ========================================================= */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;

  border-radius: 999px;
  border: 2px solid transparent;

  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;

  cursor: pointer;

  transition:
          transform 0.2s ease,
          box-shadow 0.2s ease,
          background 0.2s ease;
}

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

.button-primary {
  background: #6c4ee3;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(108, 78, 227, 0.24);
}

.button-primary:hover {
  background: #5738d4;
}

.button-secondary {
  border-color: #d9dced;
  background: #ffffff;
  color: #293550;
}

.button-secondary:hover {
  background: #f5f4ff;
  border-color: #6c4ee3;
}

.button-light {
  background: #ffffff;
  color: #5738d4;
}

.button-outline-light {
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

.button-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
}


/* =========================================================
   4. GENERAL SECTION STYLES
   ========================================================= */

.home-section {
  padding: 90px 0;
}

.section-heading {
  max-width: 700px;
  margin-bottom: 44px;
}

.section-heading h2,
.about-home-section h2,
.home-cta h2 {
  margin-bottom: 16px;

  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
}

.section-heading p {
  margin: 0;

  font-size: 1.1rem;
  color: #667089;
}

.section-heading-row {
  max-width: none;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.section-heading-row > div {
  max-width: 700px;
}

.section-kicker {
  display: inline-block;
  margin-bottom: 12px;

  color: #6c4ee3;

  font-family: "Nunito Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.text-link,
.card-link {
  color: #6c4ee3;
  font-weight: 800;
}

.text-link:hover,
.card-link:hover {
  text-decoration: underline;
}


/* =========================================================
   5. HERO
   ========================================================= */

.home-hero {
  position: relative;
  overflow: hidden;

  padding: 90px 0 110px;

  background:
          linear-gradient(
                  135deg,
                  #f5f2ff 0%,
                  #ffffff 45%,
                  #eef8ff 100%
          );
}

.hero-grid {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 70px;
}

.hero-copy {
  max-width: 680px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 18px;
  padding: 8px 14px;

  border: 1px solid #ddd6ff;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.72);

  color: #5f46cb;

  font-family: "Nunito Sans", sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
}

.eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;

  background: #ffc83d;
}

.hero-copy h1 {
  margin-bottom: 24px;

  font-size: clamp(3rem, 6vw, 5.1rem);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.hero-lead {
  max-width: 620px;
  margin-bottom: 32px;

  font-size: 1.22rem;
  color: #5f687e;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

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

.hero-visual img {
  width: 100%;
  max-width: 470px;
  max-height: 480px;

  object-fit: cover;

  border-radius: 36px;

  box-shadow:
          0 28px 70px rgba(64, 49, 123, 0.18);
}

.hero-placeholder {
  width: min(430px, 100%);
  aspect-ratio: 1 / 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 42% 58% 58% 42% / 52% 42% 58% 48%;

  background:
          linear-gradient(
                  135deg,
                  #ffd95a,
                  #ffb8c8 50%,
                  #9ad8ff
          );

  color: #342565;

  font-family: "Nunito Sans", sans-serif;
  font-size: 2rem;
  font-weight: 700;

  box-shadow: 0 28px 70px rgba(64, 49, 123, 0.16);
}

.hero-placeholder strong {
  font-size: 2.8rem;
  font-weight: 900;
}

.hero-decoration {
  position: absolute;

  border-radius: 50%;

  filter: blur(2px);

  opacity: 0.5;
}

.hero-decoration-one {
  width: 280px;
  height: 280px;

  top: -100px;
  left: -80px;

  background: #cfc2ff;
}

.hero-decoration-two {
  width: 340px;
  height: 340px;

  right: -160px;
  bottom: -140px;

  background: #bce8ff;
}


/* =========================================================
   7. UPCOMING CONFERENCES
   ========================================================= */

.status-pill {
  display: inline-flex;

  padding: 6px 11px;

  border-radius: 999px;

  background: #e9f9ef;

  color: #277649;

  font-size: 0.78rem;
  font-weight: 800;
}

.card-link {
  margin-top: auto;
}


/* =========================================================
   8. ABOUT
   ========================================================= */

.about-home-section {
  background: #ffffff;
}

.about-home-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
  gap: 90px;
}

.about-home-grid h2 {
  max-width: 520px;
}

.large-copy {
  margin-bottom: 25px;

  font-size: 1.3rem;
  line-height: 1.75;
  color: #5d667b;
}


/* =========================================================
   9. STUDENT PROJECTS
   ========================================================= */

.student-project-section {
  background:
          linear-gradient(
                  180deg,
                  #fffaf0,
                  #ffffff
          );
}

.project-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.project-placeholder-card {
  padding: 30px;

  border-radius: 22px;

  background: #ffffff;

  border: 1px solid #ede7d9;

  box-shadow: 0 10px 30px rgba(78, 65, 38, 0.06);
}

.project-placeholder-card span {
  display: inline-block;

  margin-bottom: 20px;
  padding: 7px 12px;

  border-radius: 999px;

  background: #fff2c7;

  color: #856712;

  font-size: 0.8rem;
  font-weight: 800;
}

.project-placeholder-card h3 {
  margin-bottom: 12px;

  font-size: 1.35rem;
  font-weight: 900;
}

.project-placeholder-card p {
  margin: 0;

  color: #6a7080;
}


/* =========================================================
   10. FINAL CTA
   ========================================================= */

.home-cta {
  padding: 70px 0;

  background:
          linear-gradient(
                  135deg,
                  #6041d7,
                  #7c5ce8
          );

  color: #ffffff;
}

.home-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.home-cta .section-kicker {
  color: #ffdd72;
}

.home-cta h2 {
  max-width: 700px;
  margin-bottom: 0;

  color: #ffffff;
}

.home-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  flex-shrink: 0;
}


/* =========================================================
   11. EMPTY STATE
   ========================================================= */

.empty-state {
  padding: 50px;

  border: 2px dashed #d7d9e5;
  border-radius: 22px;

  text-align: center;

  background: #ffffff;
}

.empty-state h3 {
  margin-bottom: 8px;

  font-size: 1.5rem;
}

.empty-state p {
  margin: 0;

  color: #6d7487;
}


/* =========================================================
   12. FOOTER
   ========================================================= */

.site-footer {
  padding: 50px 0 30px;

  background: #172038;

  color: #cbd1df;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
}

.site-footer strong {
  display: block;

  margin-bottom: 5px;

  color: #ffffff;

  font-family: "Nunito Sans", sans-serif;
  font-size: 1.15rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-links a:hover {
  color: #ffffff;
}

.footer-copy {
  grid-column: 1 / -1;

  margin: 20px 0 0;
  padding-top: 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.12);

  font-size: 0.9rem;
  color: #929bae;
}


/* =========================================================
   13. CONFERENCES LIST PAGE
   ========================================================= */

.conference-listing-page {
  padding: 80px 0 100px;

  background: #f8f9fc;
}

.conference-page-container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.conference-page-header {
  max-width: 760px;
  margin-bottom: 50px;
}


.conference-page-header h1 {
  margin-bottom: 16px;

  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 900;
}

.conference-page-intro {
  font-size: 1.15rem;
  color: #667089;
}

.conference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.conference-list-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius-card);
  background: var(--kc-surface);
  transition: transform 300ms var(--kc-ease-out), box-shadow 300ms var(--kc-ease-out);
}

.conference-list-card:hover,
.conference-list-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--kc-shadow-soft);
}

.conference-card-image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--kc-teal-soft);
}

.conference-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--kc-ease-out);
}

.conference-card-image--logo {
  display: grid;
  place-items: center;
  padding: clamp(var(--kc-space-5), 4vw, var(--kc-space-7));
  background: var(--kc-canvas);
}

.conference-card-image--logo img {
  object-fit: contain;
}

.conference-list-card:hover .conference-card-image img,
.conference-list-card:focus-within .conference-card-image img {
  transform: scale(1.045);
}

/* Image lightbox trigger: a real <button> layered above the card's
   stretched link (z-index 2 > 1, see .conference-card-link::after)
   so it stays independently clickable/tappable instead of being
   swallowed by the card-wide link underneath it. */
.conference-card-image-trigger {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

/* outline-offset is negative because .conference-card-image clips
   with overflow: hidden - a positive offset would be cut off. Paired
   white + navy rings so at least one clears 3:1 non-text contrast
   against whatever photo is underneath (a single ring color cannot
   be guaranteed to contrast with arbitrary image content). */
.conference-card-image-trigger:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px var(--kc-navy);
}

.conference-card-placeholder {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  background:
          radial-gradient(circle at 28% 28%, var(--kc-yellow) 0 14%, transparent 14.5%),
          linear-gradient(135deg, var(--kc-teal-soft), var(--kc-purple-soft));
}

.conference-card-placeholder img {
  width: 58%;
  max-height: 88%;
  object-fit: contain;
  object-position: bottom;
}

.conference-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.conference-card-image > .conference-status {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
  box-shadow: 0 3px 12px rgba(13, 36, 60, 0.11);
  pointer-events: none;
}

.conference-status--open {
  color: var(--kc-navy-deep);
  background: var(--kc-teal-soft);
  border-color: var(--kc-teal);
}

.conference-status--closed {
  color: var(--kc-surface);
  background: var(--kc-navy);
  border-color: var(--kc-navy);
}

.conference-status--coming-soon {
  color: var(--kc-navy-deep);
  background: var(--kc-yellow-soft);
  border-color: var(--kc-yellow);
}

.conference-status--tba {
  color: var(--kc-navy);
  background: var(--kc-canvas);
  border-color: var(--kc-border);
}

.conference-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 26px;
}

.conference-card-content h2 {
  margin: 0 0 12px;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.08;
}

/* Stretched link: a real <a> around the title is the card's only
   link, so assistive tech announces just the title text - never the
   summary or the detail list below it - while ::after covers the
   full <article> so a click/tap anywhere on the card activates it. */
.conference-card-link {
  color: var(--kc-navy);
}

.conference-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.conference-card-link:hover {
  color: var(--kc-purple-deep);
}

/* kc-yellow (the sitewide focus colour) is ~1.5:1 on this card's white
   surface - well under the 3:1 AA non-text contrast minimum - so this
   link keeps its own high-contrast ring instead of inheriting it. */
.conference-card-link:focus-visible {
  outline: 3px solid var(--kc-navy);
  outline-offset: 3px;
}

.conference-summary {
  margin-bottom: 20px;
  color: var(--kc-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.conference-details {
  display: grid;
  gap: 0;
  margin: auto 0 24px;
}

.conference-details div {
  display: grid;
  grid-template-columns: minmax(106px, 0.85fr) minmax(0, 1.15fr);
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--kc-border);
}

.conference-details dt {
  color: var(--kc-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.conference-details dd {
  min-width: 0;
  margin: 0;
  color: var(--kc-navy);
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Visual-only affordance, not a second control - the whole card is
   already the link (.conference-card-link). aria-hidden in the
   markup keeps this out of the accessibility tree. */
.conference-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
  color: var(--kc-purple);
  font-weight: 800;
}

.conference-list-card:hover .conference-card-cta,
.conference-list-card:focus-within .conference-card-cta {
  color: var(--kc-purple-deep);
}


/* =========================================================
   14. CONFERENCE DETAIL PAGE
   ========================================================= */

.conference-detail-hero {
  padding: 70px 0;

  background:
          linear-gradient(
                  135deg,
                  #f5f2ff,
                  #eef8ff
          );
}

.conference-back-link {
  display: inline-block;

  margin-bottom: 28px;

  color: #6c4ee3;

  font-weight: 800;
}

.conference-detail-hero h1 {
  max-width: 850px;

  margin: 18px 0;

  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 900;
}

.conference-detail-lead {
  max-width: 780px;

  margin: 0;

  font-size: 1.2rem;
  color: #657087;
}

.conference-detail-main {
  padding: 70px 0 100px;
}

.conference-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 55px;
  align-items: start;
}

.conference-detail-image {
  overflow: hidden;

  margin-bottom: 45px;

  border-radius: 24px;
}

.conference-detail-image img {
  width: 100%;
  max-height: 470px;

  object-fit: cover;
}

.conference-detail-image--logo {
  min-height: clamp(260px, 38vw, 420px);
  display: grid;
  place-items: center;
  padding: clamp(var(--kc-space-6), 7vw, var(--kc-space-9));
  background: var(--kc-canvas);
  border: 1px solid var(--kc-border);
}

.conference-detail-image--logo img {
  width: min(520px, 100%);
  max-height: 300px;
  object-fit: contain;
}

.conference-detail-image--fallback {
  min-height: clamp(280px, 42vw, 430px);
  display: grid;
  place-items: center;
  padding: clamp(28px, 6vw, 64px);
  background: var(--kc-teal-soft);
}

.conference-detail-image--fallback img {
  width: min(300px, 64%);
  max-height: none;
  object-fit: contain;
}

.conference-information-section {
  margin-bottom: 45px;
}

.conference-information-section h2 {
  margin-bottom: 18px;

  font-size: 1.75rem;
  font-weight: 900;
}

.conference-information-section div {
  color: #5f687e;

  font-size: 1.07rem;
}

.conference-information-card {
  position: sticky;
  top: 30px;

  padding: 30px;

  border: 1px solid #e2e4ed;
  border-radius: 24px;

  background: #ffffff;

  box-shadow: 0 15px 40px rgba(38, 45, 70, 0.09);
}

.conference-information-card h2 {
  margin-bottom: 25px;

  font-size: 1.4rem;
}

.conference-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;

  padding: 14px 0;

  border-bottom: 1px solid #eceef3;
}

.conference-info-item span {
  color: #7b8295;

  font-size: 0.82rem;
  font-weight: 700;
}

.conference-info-item strong {
  color: #263149;
}

.conference-register-button {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 28px;
  padding: 14px 20px;

  border-radius: 999px;

  background: #ffc83d;
  color: #2c2c38;

  font-weight: 900;
}

.conference-register-button:hover {
  background: #ffbb10;
}

.conference-registration-note {
  margin: 14px 0 0;

  font-size: 0.83rem;
  color: #747c8f;

  text-align: center;
}


/* =========================================================
   15. RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 960px) {

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

  .hero-copy {
    max-width: 760px;
  }

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

  .home-cta-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .conference-detail-layout {
    grid-template-columns: 1fr;
  }

  .conference-information-card {
    position: static;
  }

}


/* =========================================================
   16. RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 680px) {

  .site-container,
  .conference-page-container {
    width: min(100% - 30px, 1180px);
  }

  .home-hero {
    padding: 60px 0 75px;
  }

  .hero-grid {
    gap: 45px;
  }

  .hero-copy h1 {
    font-size: 2.85rem;
  }

  .hero-lead {
    font-size: 1.08rem;
  }

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

  .button {
    width: 100%;
  }

  .home-section {
    padding: 65px 0;
  }

  .section-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .home-cta {
    padding: 55px 0;
  }

  .home-cta-actions {
    width: 100%;
    flex-direction: column;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-copy {
    grid-column: auto;
  }

  .conference-listing-page {
    padding: 55px 0 75px;
  }

  .conference-detail-hero {
    padding: 50px 0;
  }

  .conference-detail-main {
    padding: 50px 0 75px;
  }

  .conference-information-card {
    padding: 24px;
  }

}


/* =========================================================
   17. ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--kc-yellow);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }


}

/* =========================================================
   SITE HEADER / NAVIGATION
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 14px 0 8px;
  background: linear-gradient(
          180deg,
          rgba(244, 247, 251, 0.98) 0%,
          rgba(244, 247, 251, 0.9) 72%,
          rgba(244, 247, 251, 0) 100%
  );
}

.nav-inner {
  position: relative;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kc-space-5);
  padding: var(--kc-space-2) 10px var(--kc-space-2) 18px;
  background: var(--kc-surface);
  border-radius: 999px;
  box-shadow: var(--kc-shadow-nav);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}

.site-logo-image {
  width: 190px;
  height: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--kc-space-1);
}

.main-nav > a {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 13px;
  border-radius: 999px;
  color: #3e485f;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  transition:
          color 0.2s ease,
          background 0.2s ease;
}

.main-nav > a:hover,
.main-nav > a.active {
  color: var(--kc-purple);
  background: rgba(108, 78, 227, 0.09);
}

.main-nav > a.active::after {
  display: none;
}

.main-nav .nav-contact {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--kc-yellow);
  color: var(--kc-navy);
}

.main-nav .nav-contact:hover {
  background: var(--kc-yellow-hover);
  color: var(--kc-navy);
}

.main-nav .nav-contact::after {
  display: none;
}


/* MOBILE NAV BUTTON */

.mobile-nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 10px;
  border: 0;
  border-radius: 50%;
  background: rgba(108, 78, 227, 0.09);
  cursor: pointer;
}

.mobile-nav-toggle span {
  display: block;

  width: 100%;
  height: 2px;

  margin: 5px 0;

  background: var(--kc-navy);
}


/* MOBILE NAV */

@media (max-width: 900px) {

  .site-header {
    padding: 10px 0 6px;
  }

  .nav-inner {
    min-height: 68px;
    padding: var(--kc-space-2) 10px var(--kc-space-2) var(--kc-space-4);
    border-radius: 22px;
  }

  .mobile-nav-toggle {
    display: block;
  }

  .main-nav {
    position: absolute;

    top: calc(100% + 10px);
    left: 0;
    right: 0;

    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;

    padding: var(--kc-space-3);
    border: 0;
    border-radius: 24px;
    background: var(--kc-surface);
    box-shadow: 0 20px 54px rgba(23, 50, 77, 0.18);
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav > a {
    min-height: 46px;
    padding: var(--kc-space-3) 14px;
    border-radius: 14px;
  }

  .main-nav > a:hover,
  .main-nav > a.active {
    background: rgba(108, 78, 227, 0.09);
  }

  .main-nav > a.active::after {
    display: none;
  }

  .main-nav .nav-contact {
    margin-top: 8px;

    text-align: center;
  }

  .site-logo-image {
    width: 180px;
  }

}

@media (max-width: 480px) {

  .nav-inner {
    min-height: 64px;
  }

  .site-logo-image {
    width: 160px;
  }

  .main-nav {
    top: calc(100% + 10px);
  }

}

/* =========================================================
   SHARED FORM FEEDBACK

   Hints, character counters and validation messages are worded
   and positioned the same way on every form, so the contact and
   registration pages share these rules rather than each growing
   their own near-copy.
   ========================================================= */

/* The "(required)" marker beside a label */

.form-required {
  margin-left: 4px;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  color: #7a8397;
}


/* Helper copy under a field */

.form-hint {
  margin: 0;

  font-family: "Source Sans 3", sans-serif;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--kc-muted);
}


/* Hint on the left, character count on the right */

.form-field-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;

  margin-top: 4px;
}

.form-field-foot .form-hint {
  flex: 1 1 auto;
}

.form-counter {
  flex: 0 0 auto;
  margin: 0;

  font-family: "Source Sans 3", sans-serif;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--kc-muted);
}

.form-counter.is-near-limit {
  color: var(--kc-error);
  font-weight: 600;
}


/* The message itself, and the state it puts the field into */

.form-error {
  margin: 4px 0 0;
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.88rem;
  color: var(--kc-error);
}

.contact-form .form-group.has-error input,
.contact-form .form-group.has-error select,
.contact-form .form-group.has-error textarea,
.registration-form .form-group.has-error input,
.registration-form .form-group.has-error select,
.registration-form .form-group.has-error textarea {
  border-color: var(--kc-error);
  background: #fdf5f5;
}

.contact-form .form-group.has-error input:focus,
.contact-form .form-group.has-error select:focus,
.contact-form .form-group.has-error textarea:focus,
.registration-form .form-group.has-error input:focus,
.registration-form .form-group.has-error select:focus,
.registration-form .form-group.has-error textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(177, 56, 46, 0.15);
}


/* =========================================================
   REGISTRATION PAGE
   ========================================================= */

.registration-page {
  padding: 80px 0 100px;
  background: #f8f9fc;
}

.registration-container {
  max-width: 900px;
}

.registration-header {
  max-width: 700px;
  margin-bottom: 42px;
}

.registration-header h1 {
  margin-bottom: 16px;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
}

.registration-header p {
  font-size: 1.1rem;
  color: #667089;
}

.registration-form {
  padding: 40px;
  border: 1px solid #e3e5ed;
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 15px 45px rgba(35, 42, 70, 0.08);
}

.form-section {
  margin-bottom: 42px;
}

.form-section h2 {
  margin-bottom: 22px;
  font-size: 1.45rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 800;
  color: #303a52;
}

.registration-form input,
.registration-form select,
.registration-form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #d9dce7;
  border-radius: 12px;
  background: #ffffff;
  color: #273149;
}

.registration-form input:focus,
.registration-form select:focus,
.registration-form textarea:focus {
  border-color: #6c4ee3;
  outline: 3px solid rgba(108, 78, 227, 0.12);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
}

.registration-errors {
  margin-bottom: 25px;
  padding: 20px 22px;
  border: 1px solid #f2b8b8;
  border-radius: 14px;
  background: #fff3f3;
  color: #8d3030;
}

.registration-success {
  padding: 45px;
  border-radius: 24px;
  background: #eefaf2;
  text-align: center;
}

@media (max-width: 680px) {

  .registration-page {
    padding: 55px 0 75px;
  }

  .registration-form {
    padding: 25px;
  }

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

  .form-actions .button {
    width: 100%;
  }

}

/* =========================================================
   RESOURCES
   ========================================================= */

.resources-page {
  padding: 80px 0 100px;
  background: #f8f9fc;
}

.resources-header {
  max-width: 760px;
  margin-bottom: 48px;
}

.resources-header h1 {
  margin-bottom: 16px;
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 900;
}

.resources-header p {
  font-size: 1.15rem;
  color: #667089;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.resource-card {
  display: flex;
  flex-direction: column;

  min-height: 300px;
  padding: 30px;

  border: 1px solid #e4e6ee;
  border-radius: 24px;

  background: #ffffff;

  box-shadow: 0 10px 30px rgba(34, 42, 70, 0.07);

  transition:
          transform 0.2s ease,
          box-shadow 0.2s ease;
}

.resource-card:hover {
  transform: translateY(-4px);

  box-shadow: 0 18px 42px rgba(34, 42, 70, 0.12);
}

.resource-card-top,
.resource-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin-bottom: 20px;
}

.resource-type,
.resource-audience {
  display: inline-flex;

  padding: 6px 11px;

  border-radius: 999px;

  font-size: 0.78rem;
  font-weight: 800;
}

.resource-type {
  background: #eee9ff;
  color: #5b42c6;
}

.resource-audience {
  background: #e9f8f0;
  color: #307050;
}

.resource-card h2 {
  margin-bottom: 14px;

  font-size: 1.5rem;
  overflow-wrap: anywhere;
}

.resource-card h2 a:hover,
.resource-card h2 a:focus-visible {
  color: var(--kc-purple-deep);
}

.resource-card p {
  color: #687188;
  overflow-wrap: anywhere;
}

.resource-card-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.resource-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;

  color: #6c4ee3;

  font-weight: 800;
  overflow-wrap: anywhere;
}

.resource-link:hover {
  text-decoration: underline;
}


/* RESOURCE DETAIL */

.resource-detail-hero {
  padding: 70px 0;

  background:
          linear-gradient(
                  135deg,
                  #f5f2ff,
                  #eef8ff
          );
}

.resource-back-link {
  display: inline-block;

  margin-bottom: 28px;

  color: #6c4ee3;

  font-weight: 800;
}

.resource-detail-hero h1 {
  max-width: 850px;

  margin: 18px 0;

  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 900;
}

.resource-detail-lead {
  max-width: 780px;

  font-size: 1.2rem;
  color: #657087;
}

.resource-detail-content {
  padding: 70px 0 100px;
}

.resource-detail-inner {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 55px;
  align-items: start;
}

.resource-detail-inner > div h2 {
  margin-bottom: 18px;
}

.resource-detail-inner > div p {
  font-size: 1.08rem;
  color: #5f687e;
}

.resource-download-card {
  padding: 28px;

  border: 1px solid #e2e4ed;
  border-radius: 22px;

  background: #ffffff;

  box-shadow: 0 15px 40px rgba(38, 45, 70, 0.09);
}

.resource-download-card h2 {
  margin-bottom: 15px;
}

.resource-download-card .button + p,
.resource-download-card p + .button {
  margin-top: 16px;
}

.resource-download-card p {
  margin-bottom: 20px;

  color: #687188;
}

@media (max-width: 820px) {

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

  .resource-detail-inner {
    grid-template-columns: 1fr;
  }

}


/* -----------------------------------------------------------
   Contact page
   Scoped palette:
     Deep Navy     #17324D  titles
     Conference    #007C83  primary action, links
     Clear Blue    #2767A8  secondary accents
     Sunshine      #F5C451  highlight
----------------------------------------------------------- */

.contact-page,
.contact-hero {
  --contact-navy:   #17324D;
  --contact-teal:   #007C83;
  --contact-teal-2: #005f65;
  --contact-blue:   #2767A8;
  --contact-yellow: #F5C451;
  --contact-border: #d9dce7;
  --contact-muted:  #4a5470;
  --contact-error:  #b1382e;
}

.contact-hero .hero-copy h1 {
  color: var(--contact-navy);
}

.contact-hero .eyebrow {
  color: var(--contact-teal);
}

.contact-hero .eyebrow-dot {
  background: var(--contact-yellow);
}

/* Single column, but the container keeps its full width.

   A max-width here would land on the same element as .site-container,
   whose `margin: 0 auto` then centres the narrower box - pushing the
   hero copy ~200px to the right of every section below it on the same
   page. .hero-copy already caps the line length, which is what the
   narrow variant is actually for. */

.hero-grid-narrow {
  grid-template-columns: 1fr;
}

.contact-page {
  padding-top: 30px;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 44px;
  align-items: start;
}

.contact-info-col .section-heading {
  margin-bottom: 24px;
}

.contact-page .section-kicker {
  color: var(--contact-teal);
}

.contact-page h2 {
  color: var(--contact-navy);
}

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-info-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;

  padding: 20px 22px;

  background: #ffffff;
  border: 1px solid var(--contact-border);
  border-radius: 14px;

  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.contact-info-card:hover {
  border-color: rgba(0, 124, 131, 0.35);
  box-shadow: 0 8px 24px rgba(23, 50, 77, 0.08);
  transform: translateY(-2px);
}

.contact-info-card > div {
  min-width: 0;
}

.contact-info-card strong {
  display: block;
  margin-bottom: 4px;

  font-family: "Nunito Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--contact-navy);
}

.contact-info-card p {
  margin: 0;
  font-family: "Source Sans 3", sans-serif;
  color: var(--contact-muted);
  line-height: 1.5;
}

.contact-info-card a {
  font-family: "Source Sans 3", sans-serif;
  color: var(--contact-teal);
  text-decoration: none;
  font-weight: 600;
  word-break: break-word;
}

.contact-info-card a:hover {
  text-decoration: underline;
}

.contact-info-icon {
  flex: 0 0 44px;
  height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 1.25rem;
  color: var(--contact-teal);

  background: rgba(0, 124, 131, 0.10);
  border-radius: 12px;
}


/* Form card */

.contact-form-card {
  padding: 36px;

  background: #ffffff;
  border: 1px solid var(--contact-border);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(23, 50, 77, 0.07);
}

.contact-form-card .section-heading {
  margin-bottom: 26px;
}

.contact-form-card .section-kicker {
  color: var(--contact-blue);
}

.contact-form-summary {
  margin-bottom: 20px;
  padding: 14px 18px;

  background: #fff3f3;
  border: 1px solid #f2b8b8;
  border-radius: 10px;

  font-family: "Source Sans 3", sans-serif;
  color: #8d3030;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form label {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--contact-navy);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;

  font-family: "Source Sans 3", sans-serif;
  font-size: 1rem;
  color: var(--contact-navy);

  background: #ffffff;
  border: 1px solid var(--contact-border);
  border-radius: 8px;

  transition: border-color .15s ease, box-shadow .15s ease;
}

.contact-form textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}

.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2317324D' d='M6 8 0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #9aa2b6;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--contact-teal);
  box-shadow: 0 0 0 3px rgba(0, 124, 131, 0.15);
}

/* Submit button - override .button-primary purple with contact teal */

.contact-form-actions {
  justify-content: flex-end;
  margin-top: 6px;
}

.contact-submit {
  padding: 12px 26px;
  border-radius: 10px;

  background: var(--contact-teal);
  border: 1px solid var(--contact-teal);
  color: #ffffff;

  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;

  transition: background-color .2s ease, border-color .2s ease, transform .1s ease, box-shadow .2s ease;
}

.contact-submit:hover {
  background: var(--contact-teal-2);
  border-color: var(--contact-teal-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 124, 131, 0.25);
}


/* Success panel */

.contact-success {
  padding: 34px;

  background: rgba(0, 124, 131, 0.08);
  border: 1px solid rgba(0, 124, 131, 0.25);
  border-radius: 14px;
}

.contact-success h2 {
  margin: 0 0 10px;
  color: var(--contact-navy);
}

.contact-success p {
  margin: 0;
  color: var(--contact-muted);
  line-height: 1.55;
}


@media (max-width: 900px) {

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-form-card {
    padding: 24px;
  }

  .contact-form-actions {
    justify-content: stretch;
  }

  .contact-submit {
    width: 100%;
  }

}

/* -----------------------------------------------------------
   Contact page - enquiry routing
----------------------------------------------------------- */

/* Step 1 of the form is the decision the whole form hangs on,
   so it gets its own weight instead of reading as one more field. */

.contact-enquiry-block {
  padding: 20px;
  margin-bottom: 4px;

  background: rgba(0, 124, 131, 0.05);
  border: 1px solid rgba(0, 124, 131, 0.22);
  border-left: 4px solid var(--contact-teal);
  border-radius: 12px;
}

.contact-enquiry-block.has-error {
  background: #fdf5f5;
  border-color: #e6b5b0;
  border-left-color: var(--contact-error);
}

.contact-enquiry-block label {
  font-size: 1.05rem;
}

.contact-form select.contact-enquiry-select {
  padding: 14px 40px 14px 16px;
  font-size: 1.02rem;
  font-weight: 600;
}


/* Blocks that appear once an enquiry type is chosen */

.contact-conditional[hidden] {
  display: none;
}

.contact-conditional.is-revealed {
  animation: contact-reveal .16s ease-out;
}

@keyframes contact-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.contact-form > .contact-conditional > .form-group {
  padding: 18px;

  background: #fbfcfe;
  border: 1px solid var(--contact-border);
  border-radius: 12px;
}


/* Urgent safeguarding route */

.contact-urgent-panel {
  display: flex;
  gap: 14px;

  padding: 18px 20px;

  background: #fffaef;
  border: 1px solid #ecd9a4;
  border-left: 5px solid var(--contact-yellow);
  border-radius: 12px;
}

.contact-success + .contact-urgent-panel {
  margin-top: 20px;
}

.contact-urgent-icon {
  flex-shrink: 0;

  font-size: 1.3rem;
  line-height: 1.3;
  color: #9a6b00;
}

.contact-urgent-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-urgent-body strong {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  color: var(--contact-navy);
}

.contact-urgent-body p {
  margin: 0;

  font-size: 0.94rem;
  line-height: 1.5;
  color: #5a4a24;
}

.contact-urgent-body a {
  font-weight: 700;
  color: var(--contact-teal);
  text-decoration: underline;
}

.contact-urgent-body a:hover {
  color: var(--contact-teal-2);
}


/* Routing reassurance card in the info column */

.contact-routing-card {
  background: rgba(39, 103, 168, 0.05);
  border-color: rgba(39, 103, 168, 0.25);
}

.contact-routing-card .contact-info-icon {
  color: var(--contact-blue);
}


/* Spam trap - hidden from people, still reachable by bots */

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


@media (max-width: 600px) {

  .contact-enquiry-block {
    padding: 16px;
  }

  .contact-form > .contact-conditional > .form-group {
    padding: 14px;
  }

  .contact-urgent-panel {
    padding: 16px;
  }

}


/* =========================================================
   STUDENT PROJECTS ARCHIVE
   Palette:
     Deep Navy     #17324D  titles
     Conference    #007C83  primary action, conference pills
     Clear Blue    #2767A8  secondary accents, year pills
     Sunshine      #F5C451  age tags, highlights
   ========================================================= */

.kidscloud-page,
.projects-hero,
.projects-page,
.project-detail-page {
  --project-navy:   #17324D;
  --project-teal:   #007C83;
  --project-teal-2: #005f65;
  --project-blue:   #2767A8;
  --project-yellow: #F5C451;
  --project-border: #dfe3ec;
  --project-muted:  #4a5470;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.projects-hero .hero-copy h1 {
  color: var(--project-navy);
}

.projects-hero .eyebrow {
  color: var(--project-teal);
}

.projects-hero .eyebrow-dot {
  background: var(--project-yellow);
}

.projects-page {
  padding-top: clamp(64px, 7vw, 88px);
}

.kidscloud-page .home-section { padding: clamp(64px, 7vw, 92px) 0; }
.kidscloud-container { max-width: 1120px; }
.kidscloud-section-heading,
.kidscloud-projects-heading { max-width: 760px; }
.kidscloud-section-heading h2,
.kidscloud-projects-heading h2,
.kidscloud-figshare-copy h2,
.kidscloud-figshare-copy h3 { max-width: 680px; line-height: 1.14; }
.kidscloud-about-section { background: #fff; border-bottom: 1px solid rgba(223, 227, 236, .7); }

.kidscloud-about-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.kidscloud-projects-heading { margin-bottom: 36px; }

.kidscloud-projects-heading p,
.projects-publish-section .section-heading p {
  max-width: 680px;
  margin: 12px 0 0;
  line-height: 1.65;
  color: var(--project-muted);
}

.kidscloud-empty-state {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  padding: 20px 22px;
  background: #f8f9fc;
  border: 1px solid var(--project-border);
  border-radius: 16px;
}

.kidscloud-empty-state p {
  margin: 0;
  color: var(--project-muted);
  line-height: 1.6;
}


/* ---------- Filter bar ---------- */

.project-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;

  padding: 22px;
  margin-bottom: 28px;

  background: #f7f9fb;
  border: 1px solid var(--project-border);
  border-radius: 16px;
}

.project-filter-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  flex: 1 1 auto;
}

.project-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;

  min-width: 165px;
  flex: 1 1 165px;
}

.project-filter-field label {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--project-navy);
}

.project-filter-field select {
  width: 100%;
  padding: 11px 38px 11px 14px;

  font-family: "Source Sans 3", sans-serif;
  font-size: 0.98rem;
  color: var(--project-navy);

  background: #ffffff;
  border: 1px solid var(--project-border);
  border-radius: 8px;

  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2317324D' d='M6 8 0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.project-filter-field select:focus {
  outline: none;
  border-color: var(--project-teal);
  box-shadow: 0 0 0 3px rgba(0, 124, 131, 0.15);
}

.project-filter-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.project-filter-submit {
  padding: 11px 22px;
  border-radius: 10px;

  background: var(--project-teal);
  border: 1px solid var(--project-teal);
  color: #ffffff;

  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;

  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease;
}

.project-filter-submit:hover {
  background: var(--project-teal-2);
  border-color: var(--project-teal-2);
  box-shadow: 0 8px 18px rgba(0, 124, 131, 0.22);
}

.project-filter-clear {
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--project-blue);
  text-decoration: underline;
}


/* ---------- Result summary ---------- */

.project-result-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;

  margin-bottom: 22px;
}

.project-result-count {
  margin: 0;

  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  color: var(--project-navy);
}

.project-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

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

.project-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 12px;

  background: rgba(39, 103, 168, 0.1);
  border: 1px solid rgba(39, 103, 168, 0.3);
  border-radius: 999px;

  font-family: "Source Sans 3", sans-serif;
  font-size: 0.88rem;
  color: var(--project-blue);
}

.project-filter-chip:hover {
  background: rgba(39, 103, 168, 0.18);
}


/* ---------- Project grid ---------- */

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.project-archive-card {
  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: #ffffff;
  border: 1px solid var(--project-border);
  border-radius: 20px;

  box-shadow: 0 8px 24px rgba(23, 50, 77, .05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.project-archive-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 124, 131, .45);
  box-shadow: 0 13px 30px rgba(23, 50, 77, .085);
}

.project-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #eef1f6;
}

.project-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 22px;
}

.project-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-pill {
  display: inline-block;
  padding: 5px 12px;

  border-radius: 999px;

  font-family: "Nunito Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.project-pill-conference {
  background: rgba(0, 124, 131, 0.12);
  color: var(--project-teal);
}

a.project-pill-conference:hover {
  background: rgba(0, 124, 131, 0.2);
}

.project-pill-year {
  background: rgba(39, 103, 168, 0.12);
  color: var(--project-blue);
}

.project-archive-card h2 {
  margin: 0;

  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--project-navy);
}

.project-archive-card h2 a:hover {
  color: var(--project-teal);
}

.project-card-summary {
  margin: 0;

  font-size: 1rem;
  line-height: 1.55;
  color: var(--project-muted);
}

.project-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.project-tag {
  padding: 4px 10px;

  background: #f1f3f8;
  border-radius: 8px;

  font-family: "Source Sans 3", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--project-navy);
}

.project-tag-age {
  background: rgba(245, 196, 81, 0.28);
  color: #7a5a06;
}

.project-card-link {
  margin-top: auto;
  padding-top: 4px;

  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  color: var(--project-teal);
}

.project-card-link:hover {
  color: var(--project-teal-2);
}


/* ---------- Figshare publication cards (inc/publication-cards.php) ---------- */

.publication-grid {
  margin-bottom: 28px;
  grid-template-columns: minmax(0, 780px);
}

.publication-card h3 {
  font-size: clamp(1.35rem, 2.8vw, 1.8rem);
  line-height: 1.3;
  margin-bottom: 18px;
  overflow-wrap: anywhere;
}

.publication-card .project-card-body {
  padding: 28px;
}

.publication-card .project-card-summary {
  max-width: 65ch;
}

.publication-card--illustrated {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  background: var(--kc-surface);
}

.publication-preview {
  margin: 0;
  min-width: 0;
}

.publication-preview a {
  display: block;
}

.publication-preview img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #f5efe6;
}

.publication-preview figcaption {
  padding: 10px 16px;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--kc-navy);
}

.publication-card--illustrated .project-card-body {
  padding: 24px 28px;
}

.publication-card--illustrated h3 {
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
}

.publication-card--illustrated .project-card-summary {
  font-size: 1rem;
  margin-bottom: 18px;
}

@media (max-width: 700px) {
  .publication-card--illustrated {
    grid-template-columns: minmax(0, 1fr);
  }

  .publication-card .project-card-body {
    padding: 22px;
  }
}


/* ---------- Detail page ---------- */

.project-detail-page {
  padding: 70px 0 90px;
}

.project-detail-container {
  max-width: 820px;
}

.project-preview-warning {
  margin-bottom: 24px;
  padding: 16px 20px;

  background: #fff3f3;
  border: 1px solid #f2b8b8;
  border-radius: 12px;

  font-family: "Source Sans 3", sans-serif;
  color: #8d3030;
}

.project-preview-warning strong {
  font-family: "Nunito Sans", sans-serif;
}

.project-preview-warning p {
  margin: 6px 0 0;
}

.project-back-link {
  display: inline-block;
  margin-bottom: 20px;

  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  color: var(--project-blue);
}

.project-back-link:hover {
  color: var(--project-teal);
}

.project-detail-header {
  display: flex;
  flex-direction: column;
  gap: 14px;

  margin-bottom: 28px;
}

.project-detail-header h1 {
  margin: 0;

  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  font-weight: 900;
  color: var(--project-navy);
}

.project-detail-image {
  margin-bottom: 28px;
  overflow: hidden;
  border-radius: 16px;
}

.project-detail-image img {
  width: 100%;
}

.project-detail-summary p {
  margin: 0 0 28px;

  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--project-muted);
}

.project-links h2 {
  margin: 0 0 14px;

  font-size: 1.35rem;
  color: var(--project-navy);
}

.project-link-list {
  display: grid;
  gap: 14px;
}

.project-link-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;

  padding: 18px 20px;

  background: #ffffff;
  border: 1px solid var(--project-border);
  border-radius: 14px;

  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.project-link-card:hover {
  transform: translateY(-2px);
  border-color: var(--project-teal);
  box-shadow: 0 12px 26px rgba(23, 50, 77, 0.1);
}

.project-link-icon {
  flex-shrink: 0;
  font-size: 1.2rem;
  color: var(--project-teal);
}

.project-link-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.project-link-body strong {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.02rem;
  color: var(--project-navy);
}

.project-link-body span {
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.94rem;
  color: var(--project-muted);
}

.project-link-note {
  color: #59647a;
}

.student-project-section .section-actions {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.project-detail-footer {
  margin-top: 36px;
}


@media (max-width: 700px) {

  .project-filter-bar {
    padding: 18px;
  }

  .project-filter-actions {
    width: 100%;
  }

  .project-filter-submit {
    flex: 1 1 auto;
  }

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

  .project-detail-page {
    padding: 46px 0 66px;
  }

}


/* Year badge over the card image */

.project-card-media {
  position: relative;
}

.project-pill-region {
  background: rgba(245, 196, 81, 0.3);
  color: #7a5a06;
}

.project-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 12px;
  text-align: right;
}

.project-card-actions a {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--project-blue);
}

.project-card-actions a:hover {
  color: var(--project-teal);
  text-decoration: underline;
}


/* Outbound publishing links */

.projects-publish-section {
  --project-navy:   #17324D;
  --project-teal:   #007C83;
  --project-border: #dfe3ec;
  --project-muted:  #4a5470;

  background: #f5f7fb;
  border-top: 1px solid rgba(223, 227, 236, .72);
  border-bottom: 1px solid rgba(223, 227, 236, .72);
}

.kidscloud-figshare-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  align-items: center;
  gap: clamp(36px, 6vw, 72px);
  padding: clamp(34px, 5vw, 56px);
  background: #fff;
  border: 1px solid var(--project-border);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(23, 50, 77, .055);
}

.kidscloud-figshare-copy p { max-width: 58ch; margin: 16px 0 0; line-height: 1.7; color: var(--project-muted); }
.kidscloud-figshare-action { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.kidscloud-figshare-action small { color: var(--project-muted); }

.kidscloud-page .home-cta { padding: clamp(58px, 6vw, 78px) 0; }
.kidscloud-page .home-cta h2 { font-size: clamp(1.85rem, 3.2vw, 2.65rem); }
.kidscloud-page .home-cta p { max-width: 52ch; margin: 12px 0 0; color: rgba(255,255,255,.78); line-height: 1.6; }

@media (max-width: 980px) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .kidscloud-page .home-section {
    padding: 58px 0;
  }

  .kidscloud-container {
    width: min(100% - 36px, 1120px);
  }

  .kidscloud-figshare-panel {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px;
  }

  .kidscloud-figshare-action {
    padding-top: 26px;
    border-top: 1px solid var(--project-border);
  }

  .kidscloud-page .home-cta-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 440px) {
  .kidscloud-figshare-action {
    align-items: stretch;
  }

  .kidscloud-figshare-action .button {
    width: 100%;
    text-align: center;
  }
}


/* Related projects on the detail page */

.project-related {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--project-border);
}

.project-related h2 {
  margin: 0 0 14px;

  font-size: 1.3rem;
  color: var(--project-navy);
}

.project-related-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  gap: 10px;
}

.project-related-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 14px 18px;

  background: #f7f9fb;
  border: 1px solid var(--project-border);
  border-radius: 12px;

  transition: border-color .18s ease, background-color .18s ease;
}

.project-related-item:hover {
  background: #ffffff;
  border-color: var(--project-teal);
}

.project-related-item strong {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  color: var(--project-navy);
}

.project-related-year {
  flex-shrink: 0;

  font-family: "Source Sans 3", sans-serif;
  font-size: 0.88rem;
  color: var(--project-muted);
}


@media (max-width: 700px) {

  .projects-page { padding-top: 52px; }
  .kidscloud-about-copy { grid-template-columns: 1fr; }

  .project-card-actions {
    justify-content: flex-start;
    text-align: left;
  }

}


/* =========================================================
   PRESENTER ARCHIVE
   ========================================================= */

.presenters-page,
.presenter-detail-page {
  --presenter-navy: #17324D;
  --presenter-teal: #007C83;
  --presenter-blue: #2767A8;
  --presenter-yellow: #F5C451;
  --presenter-muted: #4a5470;
  --presenter-border: #dfe3ec;
}

.presenters-hero .hero-copy h1 { color: var(--presenter-navy); }
.presenters-hero .eyebrow { color: var(--presenter-teal); }
.presenters-hero .eyebrow-dot { background: var(--presenter-yellow); }
.presenters-section-heading { max-width: 760px; }

.presenter-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 26px;
}

.presenter-profile-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--presenter-border);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(23, 50, 77, 0.08);
}

.presenter-profile-image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #eef1f6; }
.presenter-profile-image img { width: 100%; height: 100%; object-fit: cover; }
.presenter-profile-image--reserved,
.presenter-detail-image--reserved {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(23, 50, 77, 0.42);
  background:
    radial-gradient(circle at 28% 30%, rgba(245, 196, 81, 0.72) 0 14%, transparent 14.5%),
    linear-gradient(135deg, rgba(0, 124, 131, 0.16), rgba(39, 103, 168, 0.15));
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.presenter-role-group + .presenter-role-group { margin-top: 50px; }
.presenter-role-heading { margin: 0 0 20px; font-size: 1.5rem; color: var(--presenter-navy); }
.presenter-profile-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px; }

.presenter-type-tag {
  display: inline-flex;
  padding: 5px 10px;
  color: var(--presenter-teal);
  background: rgba(0, 124, 131, 0.11);
  border-radius: 999px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
}

.presenter-profile-card h3 { margin: 14px 0 5px; font-size: 1.35rem; color: var(--presenter-navy); }
.presenter-affiliation { margin: 0 0 15px; font-weight: 700; color: var(--presenter-blue); }
.presenter-excerpt { margin: 0 0 18px; line-height: 1.6; color: var(--presenter-muted); }

.presenter-conference-list,
.presenter-detail-conferences { display: grid; gap: 7px; margin: 0 0 20px; padding-left: 20px; color: var(--presenter-teal); }
.presenter-conference-list a,
.presenter-detail-conferences a { color: var(--presenter-blue); text-decoration: underline; text-underline-offset: 2px; }
.presenter-profile-link { margin-top: auto; }

.presenters-empty-note {
  margin: 0;
  padding: 17px 20px;
  color: var(--presenter-muted);
  background: #f7f9fb;
  border-left: 4px solid var(--presenter-teal);
  border-radius: 8px;
}

.presenter-detail { padding: 72px 0 90px; }
.presenter-detail-container { max-width: 1040px; }
.presenter-detail-layout { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); gap: 48px; align-items: start; }
.presenter-detail-image { overflow: hidden; border-radius: 18px; background: #eef1f6; }
.presenter-detail-image img { width: 100%; }
.presenter-detail-image--reserved { min-height: 360px; }
.presenter-detail-content h1 { margin: 14px 0 8px; font-size: clamp(2.1rem, 4.4vw, 3.2rem); color: var(--presenter-navy); }
.presenter-detail-affiliation { margin: 0 0 28px; font-size: 1.1rem; font-weight: 700; color: var(--presenter-blue); }
.presenter-detail-section { padding: 24px 0; border-top: 1px solid var(--presenter-border); }
.presenter-detail-section h2 { margin: 0 0 10px; font-size: 1.25rem; color: var(--presenter-navy); }
.presenter-detail-section p,
.presenter-bio { margin: 0; line-height: 1.7; color: var(--presenter-muted); }
.presenter-website-link { margin-top: 8px; }

@media (max-width: 760px) {
  .presenter-profile-grid { grid-template-columns: 1fr; }
  .presenter-detail { padding: 48px 0 66px; }
  .presenter-detail-layout { grid-template-columns: 1fr; gap: 30px; }
  .presenter-detail-image { max-width: 440px; }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-page {
  --about-navy: #17324D;
  --about-blue: #2767A8;
  --about-teal: #007C83;
  --about-border: #dfe3ec;
  --about-muted: #4a5470;
}

.about-container {
  max-width: 1100px;
}

.about-hero {
  padding: 80px 0 64px;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);
  border-bottom: 1px solid var(--about-border);
}

.about-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2.35rem, 5vw, 3.6rem);
  font-weight: 900;
  color: var(--about-navy);
}

.about-hero-lead {
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--about-muted);
}

.about-section {
  padding: 72px 0;
}

.about-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.about-card {
  padding: 32px;
  background: #ffffff;
  border: 1px solid var(--about-border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(23, 50, 77, 0.07);
}

.about-card h2 {
  margin: 0 0 12px;
  font-size: 1.5rem;
  color: var(--about-teal);
}

.about-card p,
.about-team-card p,
.about-timeline-content p {
  margin: 0;
  line-height: 1.65;
  color: var(--about-muted);
}

.about-video-section,
.about-timeline-section {
  background: #f7f9fb;
  border-top: 1px solid var(--about-border);
  border-bottom: 1px solid var(--about-border);
}

.about-video-frame,
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--about-navy, var(--kc-navy));
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(23, 50, 77, 0.14);
}

.about-video-frame iframe,
.video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.about-video-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--about-border);
  border-bottom: 1px solid var(--about-border);
}

.about-video-notice p {
  max-width: 58ch;
  margin: 0;
  color: var(--about-muted);
}

.about-video-notice .button {
  flex: 0 0 auto;
}

.about-timeline {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding-left: 34px;
  border-left: 2px solid #cfd6e2;
}

.about-timeline-item {
  position: relative;
  margin-bottom: 28px;
}

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

.about-timeline-badge {
  position: absolute;
  top: 16px;
  left: -58px;
  min-width: 48px;
  padding: 4px 9px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffffff;
  background: var(--about-teal);
  border: 3px solid #f7f9fb;
  border-radius: 999px;
}

.about-timeline-content {
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--about-border);
  border-radius: 14px;
}

.about-timeline-content h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  color: var(--about-navy);
}

/* UPDATED: Locked to 3-columns on desktop */
.about-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

/* UPDATED: Fixed size team cards with overflow control */
/* UPDATED: Equal fixed height for all unexpanded team cards */
.about-team-card {
  height: 320px; /* Adjust this value if you need more/less vertical space */
  box-sizing: border-box;
  padding: 32px 24px 24px;
  background: #ffffff;
  border: 1px solid var(--about-border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(23, 50, 77, 0.07);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: max-height 0.3s ease;
}

/* Push the Read More button cleanly to the bottom of every fixed-height card */
.about-team-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: auto; 
}

/* Allow card to grow freely when toggled */
.about-team-card.expanded {
  height: auto;
}

.about-team-card.expanded p {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  margin-bottom: 12px;
}

.about-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  margin: 0 auto 18px;
  font-size: 1.75rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, var(--about-teal), var(--about-blue));
  border-radius: 50%;
  flex-shrink: 0;
}

.about-team-card h3 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  color: var(--about-navy);
}

.about-role-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 11px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--about-blue);
  background: rgba(39, 103, 168, 0.1);
  border-radius: 999px;
}

/* NEW: Read More / Read Less button styling */
.about-team-toggle {
  margin-top: 4px;
  padding: 10px 0;
  background: transparent;
  border: none;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--about-blue);
  cursor: pointer;
}

.about-team-toggle:hover {
  text-decoration: underline;
  color: var(--about-teal);
}

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

@media (max-width: 700px) {

  .about-hero {
    padding: 56px 0 46px;
  }

  .about-section {
    padding: 50px 0;
  }

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

  .about-card,
  .about-team-card {
    padding: 24px;
  }

  .about-timeline {
    padding-left: 24px;
  }

  .about-timeline-badge {
    position: static;
    display: inline-block;
    margin: 0 0 8px -42px;
  }

  .about-video-notice {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .about-video-notice .button {
    width: 100%;
    justify-content: center;
  }

}

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

/* =========================================================
   FULL HOMEPAGE REDESIGN
   ========================================================= */

:root {
  --kc-radius-large: 28px;
  --kc-radius-card: 22px;

  /* Homepage overlay clearance: header padding plus the nav pill. */
  --kc-header-space: 92px;

  --kc-section-space: clamp(76px, 8vw, 124px);
  --kc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --kc-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --kc-shadow-soft: 0 18px 50px rgba(13, 36, 60, 0.11);
  --kc-teal-soft: #d9f1ef;
  --kc-purple-soft: #ebe6fb;
  --kc-yellow-soft: #fff0b8;
}

body {
  overflow-x: clip;
  background: var(--kc-surface);
}

[id] {
  scroll-margin-top: var(--kc-header-space);
}


/* -----------------------------------------------------------
   Floating navigation

   The sticky header remains in the document flow, so its real
   rendered height always clears page content at every breakpoint.
   The homepage alone pulls its hero behind the bar and keeps its
   own padding to hold the headline clear of the navigation.
----------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 12px 0;
  background: transparent;
}

.site-header.is-scrolled {
  padding-top: 12px;
}

#content {
  padding-top: 0;
}

#content > .home-redesign:first-child {
  margin-top: calc(var(--kc-header-h, var(--kc-header-space)) * -1);
}

.home-redesign {
  --section-heading-size: clamp(2.25rem, 4.6vw, 4.8rem);
  color: var(--kc-ink);
}

.home-redesign .section-kicker {
  margin: 0 0 16px;
  color: var(--kc-teal);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-redesign .button,
.home-redesign .text-link,
.home-closing-link {
  transition: transform 180ms ease, color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.home-redesign .button:hover,
.home-redesign .text-link:hover,
.home-closing-link:hover {
  transform: translateY(-2px);
}

.home-redesign .button:active,
.home-redesign .text-link:active,
.home-closing-link:active {
  transform: translateY(0) scale(0.98);
}

.home-redesign .text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--kc-navy);
  font-weight: 800;
}

.home-redesign .text-link span {
  transition: transform 180ms ease;
}

.home-redesign .text-link:hover span {
  transform: translateX(4px);
}

/* Scoped to .home-redesign on purpose: .home-hero and .home-section are
   shared with the contact and student project pages, which have their own
   light hero. Without the scope this hero's layout lands on them too. */

.home-redesign .home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  /* Shows through if the photo fails to load. */
  background: #18233a;
  isolation: isolate;
}

.home-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 62%;
}

/* Dark only where the copy sits (left) and a soft fade top/bottom.
   The right half - the kids applauding - keeps the photo's own warm
   colour instead of being washed into one flat navy. */
.home-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(14, 24, 44, 0.94) 0%, rgba(14, 24, 44, 0.82) 30%, rgba(14, 24, 44, 0.42) 58%, rgba(14, 24, 44, 0.08) 86%),
    linear-gradient(180deg, rgba(14, 24, 44, 0.5) 0%, rgba(14, 24, 44, 0) 24%, rgba(14, 24, 44, 0) 60%, rgba(14, 24, 44, 0.6) 100%);
}

.home-hero-title-area {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex: 1;
  padding-top: calc(var(--kc-header-space) + 56px);
  padding-bottom: 48px;
}

.home-hero-copy {
  max-width: 780px;
}

.home-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 8px 16px 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.home-hero-eyebrow-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kc-yellow);
  box-shadow: 0 0 0 4px rgba(255, 200, 61, 0.25);
}

.home-redesign .home-hero-title {
  max-width: none;
  margin: 0;
  color: #fff;
  font-size: clamp(3.1rem, 1.2rem + 6.6vw, 7.4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.96;
  text-shadow: 0 4px 30px rgba(6, 12, 26, 0.3);
}

/* Each line clips its words so the reveal can slide them up from below. */
.home-hero-title-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.home-hero-word {
  display: inline-block;
}

.home-hero-word--accent {
  color: var(--kc-yellow);
}

.home-hero-intro {
  max-width: 540px;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.55;
}

.home-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 30px;
  margin-top: 36px;
}

.home-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 62px;
  padding: 8px 8px 8px 28px;
  border-radius: 999px;
  background: #fff;
  color: var(--kc-ink);
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 16px 36px rgba(6, 12, 26, 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.home-hero-cta-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--kc-purple);
  color: #fff;
  transition: transform 220ms var(--kc-ease-out), background-color 180ms ease;
}

.home-hero-cta-icon svg {
  width: 20px;
  height: 20px;
}

.home-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(6, 12, 26, 0.34);
}

.home-hero-cta:hover .home-hero-cta-icon {
  background: var(--kc-purple-deep);
  transform: translateX(3px);
}

.home-hero-cta:active {
  transform: translateY(0) scale(0.98);
}

.home-hero-educator-link {
  padding-bottom: 4px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  transition: border-color 180ms ease;
}

.home-hero-educator-link:hover {
  border-bottom-color: var(--kc-yellow);
}

/* -----------------------------------------------------------
   Bottom strip: three brand-coloured cards that sit on the photo's
   bottom edge, aligned to the site container like the rest of the page.
----------------------------------------------------------- */

.home-hero-strip-wrap {
  position: relative;
  z-index: 2;
}

.home-hero-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -12px 40px rgba(6, 12, 26, 0.2);
}

.home-hero-strip-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 196px;
  padding: 28px 32px 30px;
  text-decoration: none;
  transition: background-color 200ms ease;
}

.home-hero-strip-label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
}

.home-hero-strip-heading {
  max-width: 19ch;
  margin: 0;
  font-size: clamp(1.2rem, 0.9rem + 0.7vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.home-hero-strip-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  font-weight: 800;
}

.home-hero-strip-link span {
  transition: transform 180ms ease;
}

a.home-hero-strip-col:hover .home-hero-strip-link span {
  transform: translateX(4px);
}

.home-hero-strip-presenters {
  padding-right: 190px;
  background: var(--kc-yellow);
  color: var(--kc-ink);
}

.home-hero-strip-presenters:hover {
  background: var(--kc-yellow-hover);
}

.home-hero-strip-mascot {
  position: absolute;
  right: 14px;
  bottom: -18px;
  width: 178px;
  height: auto;
  pointer-events: none;
  transition: transform 320ms var(--kc-ease-out);
}

.home-hero-strip-presenters:hover .home-hero-strip-mascot {
  transform: translateY(-6px) rotate(-4deg);
}

.home-hero-strip-conferences {
  background: #fff;
  color: var(--kc-ink);
}

.home-hero-strip-kidscloud {
  background: var(--kc-purple);
  color: #fff;
}

.home-hero-strip-kidscloud:hover {
  background: var(--kc-purple-deep);
}

/* --- Conference carousel (middle card) --- */

.home-hero-carousel {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.home-hero-carousel-track {
  position: relative;
  flex: 1;
}

.home-hero-carousel-slide {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 220ms ease, transform 220ms ease;
}

/* Outgoing slide leaves first, incoming waits for it - no overlapping titles. */
.home-hero-carousel-slide.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 420ms ease 220ms, transform 420ms var(--kc-ease-out) 220ms;
}

.home-hero-carousel-title {
  font-size: clamp(1.2rem, 0.9rem + 0.7vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.home-hero-carousel-slide:hover .home-hero-carousel-title {
  color: var(--kc-purple-deep);
}

.home-hero-carousel-status {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  background: #efeafd;
  color: var(--kc-purple-deep);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-hero-carousel-empty {
  margin: 0;
  color: var(--kc-muted);
  font-weight: 700;
}

.home-hero-carousel-dots {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* The button is a 24px tall touch target (WCAG 2.5.8); the visible 5px
   bar is drawn by ::before so it looks exactly as before. */
.home-hero-carousel-dot {
  position: relative;
  width: 22px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: width 300ms ease;
}

.home-hero-carousel-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 999px;
  background: var(--kc-border);
  transform: translateY(-50%);
  transition: background-color 300ms ease;
}

.home-hero-carousel-dot.is-active {
  width: 36px;
}

.home-hero-carousel-dot.is-active::before {
  background: var(--kc-purple);
}

@media (max-width: 1279px) {
  .home-hero-strip-presenters {
    padding-right: 150px;
  }

  .home-hero-strip-mascot {
    width: 140px;
  }
}

@media (max-width: 1023px) {
  .home-hero-strip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .home-hero-strip-presenters {
    grid-column: 1 / -1;
  }

  .home-hero-strip-col {
    min-height: 172px;
  }
}

@media (max-width: 700px) {
  .home-hero-overlay {
    background: linear-gradient(180deg, rgba(14, 24, 44, 0.62) 0%, rgba(14, 24, 44, 0.78) 45%, rgba(14, 24, 44, 0.9) 100%);
  }

  .home-hero-bg {
    object-position: 68% 55%;
  }

  .home-hero-title-area {
    padding-top: calc(var(--kc-header-space) + 36px);
    padding-bottom: 36px;
  }

  .home-hero-eyebrow {
    margin-bottom: 20px;
    font-size: 0.82rem;
  }

  .home-hero-cta-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-hero-cta {
    justify-content: space-between;
    width: 100%;
  }

  .home-hero-strip {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 22px 22px 0 0;
  }

  .home-hero-strip-col {
    min-height: 0;
    padding: 24px 22px 26px;
  }

  .home-hero-strip-presenters {
    grid-column: auto;
    min-height: 168px;
    padding-right: 140px;
  }

  .home-hero-strip-mascot {
    right: 6px;
    width: 132px;
  }

  .home-hero-carousel-track {
    min-height: 74px;
  }
}

/* -----------------------------------------------------------
   Hero entrance animation

   Content renders fully visible without any of this - the
   "hero-anim-ready" class only ever gets added by JS, and only once
   it has confirmed prefers-reduced-motion is off. A JS failure or a
   reduced-motion preference both simply skip straight to the normal,
   final layout.
----------------------------------------------------------- */

@keyframes kc-word-in {
  from { transform: translateY(100%); filter: blur(4px); opacity: 0; }
  to   { transform: translateY(0);    filter: blur(0);    opacity: 1; }
}

@keyframes kc-fade-up {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes kc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.hero-anim-ready .home-hero-word {
  animation: kc-word-in 700ms var(--kc-ease-reveal) both;
}

body.hero-anim-ready .home-hero-title-line:nth-child(1) .home-hero-word:nth-child(1) { animation-delay: 300ms; }
body.hero-anim-ready .home-hero-title-line:nth-child(1) .home-hero-word:nth-child(2) { animation-delay: 400ms; }
body.hero-anim-ready .home-hero-title-line:nth-child(2) .home-hero-word { animation-delay: 500ms; }

body.hero-anim-ready .home-hero-eyebrow {
  animation: kc-fade-up 600ms var(--kc-ease-reveal) both;
  animation-delay: 150ms;
}

body.hero-anim-ready .home-hero-intro {
  animation: kc-fade-up 600ms var(--kc-ease-reveal) both;
  animation-delay: 600ms;
}

body.hero-anim-ready .home-hero-cta-row {
  animation: kc-fade-up 600ms var(--kc-ease-reveal) both;
  animation-delay: 720ms;
}

body.hero-anim-ready .home-hero-strip-col:nth-child(1) { animation: kc-fade-up 600ms var(--kc-ease-reveal) both; animation-delay: 900ms; }
body.hero-anim-ready .home-hero-strip-col:nth-child(2) { animation: kc-fade-up 600ms var(--kc-ease-reveal) both; animation-delay: 1000ms; }
body.hero-anim-ready .home-hero-strip-col:nth-child(3) { animation: kc-fade-up 600ms var(--kc-ease-reveal) both; animation-delay: 1100ms; }

body.hero-anim-ready .nav-inner {
  animation: kc-fade-in 500ms ease both;
}

.home-philosophy {
  padding: var(--kc-section-space) 0;
  background: var(--kc-surface);
}

.home-philosophy-inner {
  max-width: 900px;
  text-align: center;
}

.home-philosophy h2 {
  margin: 0 auto 28px;
  color: var(--kc-navy);
  font-size: var(--section-heading-size);
  letter-spacing: -0.045em;
  line-height: 0.99;
  text-wrap: balance;
}

.home-philosophy-copy {
  max-width: 720px;
  margin: 0 auto 26px;
  color: var(--kc-muted);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.65;
}

.home-philosophy-copy > :last-child {
  margin-bottom: 0;
}

.home-philosophy--with-video {
  padding-bottom: clamp(32px, 4vw, 48px);
}

.home-video {
  padding: 0 0 var(--kc-section-space);
  background: var(--kc-surface);
}

.home-video-inner {
  max-width: 900px;
}

.home-video .home-section-heading {
  margin-bottom: 24px;
}

.home-video-fallback {
  margin: 18px 0 0;
  text-align: center;
}

.home-redesign .home-section {
  padding: var(--kc-section-space) 0;
}

.home-section-heading {
  margin-bottom: clamp(38px, 5vw, 66px);
}

.home-section-heading h2 {
  margin: 0;
  color: var(--kc-navy);
  font-size: clamp(2.2rem, 4.4vw, 4.35rem);
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}

.home-section-heading > p,
.home-section-heading-side p {
  color: var(--kc-muted);
  font-size: 1.1rem;
}

.home-section-heading-centred {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.home-section-heading-centred h2 {
  margin-bottom: 18px;
}

.home-section-heading-centred > p:last-child {
  max-width: 580px;
  margin: 0 auto;
}

.home-section-heading-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.55fr);
  align-items: end;
  gap: 70px;
}

.home-section-heading-side p {
  margin: 0 0 18px;
  line-height: 1.55;
}

.home-pathways {
  background: var(--kc-canvas);
}

.pathway-mosaic {
  display: grid;
  grid-template-areas:
    "educators visual partners"
    "presenters visual partners";
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.18fr) minmax(0, 0.95fr);
  grid-template-rows: repeat(2, minmax(220px, auto));
  gap: 16px;
}

.pathway-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 28px;
  overflow: hidden;
  color: var(--kc-navy);
  border: 1px solid rgba(23, 50, 77, 0.08);
  border-radius: var(--kc-radius-card);
  transition: transform 300ms var(--kc-ease-out), box-shadow 300ms var(--kc-ease-out);
}

.pathway-panel::after {
  position: absolute;
  inset: auto -28px -58px auto;
  width: 128px;
  height: 128px;
  border: 20px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  content: "";
  transition: transform 360ms var(--kc-ease-out);
}

.pathway-panel:hover,
.pathway-panel:focus-visible {
  z-index: 2;
  transform: translateY(-5px);
  box-shadow: var(--kc-shadow-soft);
}

.pathway-panel:hover::after,
.pathway-panel:focus-visible::after {
  transform: translate(-7px, -7px) scale(1.05);
}

.pathway-panel-educators {
  grid-area: educators;
  background: var(--kc-teal-soft);
}

.pathway-panel-presenters {
  grid-area: presenters;
  color: var(--kc-surface);
  background: var(--kc-purple);
}

.pathway-panel-partners {
  grid-area: partners;
  background: var(--kc-yellow);
}

.pathway-number {
  color: currentColor;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  opacity: 0.72;
}

.pathway-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  max-width: 30ch;
}

.pathway-copy strong {
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.05;
}

.pathway-copy > span {
  font-weight: 600;
  line-height: 1.48;
}

.pathway-arrow {
  position: absolute;
  top: 24px;
  right: 25px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 1.2rem;
  transition: transform 240ms var(--kc-ease-out), background-color 180ms ease;
}

.pathway-panel:hover .pathway-arrow,
.pathway-panel:focus-visible .pathway-arrow {
  transform: translate(3px, -3px);
  background: rgba(255, 255, 255, 0.34);
}

.pathway-visual {
  position: relative;
  grid-area: visual;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 456px;
  overflow: hidden;
  background: var(--kc-navy);
  border-radius: var(--kc-radius-card);
}

.pathway-visual::before,
.pathway-visual::after {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 50%;
  content: "";
}

.pathway-visual::before {
  width: 430px;
  height: 430px;
  top: -160px;
  left: -210px;
}

.pathway-visual::after {
  width: 260px;
  height: 260px;
  right: -130px;
  bottom: -90px;
}

.pathway-visual-disc {
  position: absolute;
  width: min(82%, 340px);
  aspect-ratio: 1;
  bottom: 35px;
  background: var(--kc-yellow);
  border-radius: 50%;
}

.pathway-visual img {
  position: relative;
  z-index: 1;
  width: min(84%, 350px);
  max-height: 92%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.19));
  transition: transform 500ms var(--kc-ease-out);
}

.pathway-visual:hover img {
  transform: translateY(-6px) rotate(-1deg);
}

.home-conferences {
  background: var(--kc-surface);
}

.home-conference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.home-conference-grid:has(.home-conference-card:only-child) {
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
}

.home-conference-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--kc-surface);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius-card);
  box-shadow: 0 7px 22px rgba(13, 36, 60, 0.06);
  transition: transform 300ms var(--kc-ease-out), box-shadow 300ms var(--kc-ease-out);
}

.home-conference-card:hover,
.home-conference-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--kc-shadow-soft);
}

.home-conference-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--kc-teal-soft);
}

.home-conference-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--kc-ease-out);
}

.home-conference-card:hover .home-conference-media > img,
.home-conference-card:focus-within .home-conference-media > img {
  transform: scale(1.045);
}

.home-conference-placeholder {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 28% 28%, var(--kc-yellow) 0 14%, transparent 14.5%),
    linear-gradient(135deg, var(--kc-teal-soft), var(--kc-purple-soft));
}

.home-conference-placeholder img {
  width: 58%;
  max-height: 88%;
  object-fit: contain;
  object-position: bottom;
}

.home-conference-status-row {
  position: absolute;
  inset: 16px 16px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.home-conference-status-row:empty {
  display: none;
}

.home-conference-status-row .status-pill,
.home-conference-status-row .format-pill {
  padding: 6px 10px;
  color: var(--kc-navy-deep);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  box-shadow: 0 3px 12px rgba(13, 36, 60, 0.11);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
}

.home-conference-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 26px;
}

.home-conference-body h3 {
  margin: 0 0 12px;
  color: var(--kc-navy);
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 1.08;
}

.home-conference-body h3 a:hover {
  color: var(--kc-purple-deep);
}

.home-conference-body > p {
  margin: 0 0 20px;
  color: var(--kc-muted);
  line-height: 1.55;
}

.home-conference-details {
  display: grid;
  gap: 10px;
  margin: auto 0 24px;
}

.home-conference-details div {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--kc-border);
}

.home-conference-details dt {
  color: var(--kc-muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-conference-details dd {
  min-width: 0;
  margin: 0;
  color: var(--kc-navy);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.home-empty-state {
  padding: clamp(34px, 6vw, 66px);
  text-align: center;
  background: var(--kc-canvas);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius-card);
}

.home-empty-state h3 {
  margin-bottom: 10px;
  color: var(--kc-navy);
  font-size: 1.8rem;
}

.home-projects {
  background: var(--kc-canvas);
}

.project-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.project-panel {
  /* These are links now. Grid blockifies them anyway, but say so
     rather than depend on it. */
  display: block;

  position: relative;
  min-height: 390px;
  padding: 30px;
  overflow: hidden;
  color: var(--kc-navy);
  border-radius: var(--kc-radius-card);
  transition: transform 320ms var(--kc-ease-out), box-shadow 320ms var(--kc-ease-out);
}

.project-panel:hover {
  transform: translateY(-5px);
  box-shadow: var(--kc-shadow-soft);
}

.project-panel-science {
  background: var(--kc-yellow);
}

.project-panel-technology {
  color: var(--kc-surface);
  background: var(--kc-teal);
}

.project-panel-community {
  color: var(--kc-surface);
  background: var(--kc-purple);
}

.project-panel-label {
  margin: 150px 0 11px;
  font-size: 0.77rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.project-panel h3 {
  max-width: 9ch;
  margin: 0 0 13px;
  color: inherit;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  letter-spacing: -0.035em;
  line-height: 1;
}

.project-panel > p:last-child {
  max-width: 29ch;
  margin: 0;
  font-weight: 600;
  line-height: 1.5;
}

.project-panel-mark {
  position: absolute;
  inset: 30px 30px auto;
  display: flex;
  align-items: end;
  gap: 8px;
  height: 108px;
}

.project-panel-mark span {
  flex: 1;
  height: 42%;
  background: currentColor;
  border-radius: 999px 999px 4px 4px;
  opacity: 0.16;
  transform-origin: bottom;
  transition: transform 400ms var(--kc-ease-out);
}

.project-panel-mark span:nth-child(2) {
  height: 100%;
}

.project-panel-mark span:nth-child(3) {
  height: 70%;
}

.project-panel:hover .project-panel-mark span:first-child {
  transform: scaleY(1.7);
}

.project-panel:hover .project-panel-mark span:nth-child(3) {
  transform: scaleY(0.69);
}

.home-closing {
  padding: var(--kc-section-space) 0 28px;
  background: var(--kc-surface);
}

.home-closing-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.65fr);
  min-height: 490px;
  overflow: hidden;
  color: var(--kc-surface);
  background: var(--kc-navy);
  border-radius: var(--kc-radius-large);
}

.home-closing-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: clamp(40px, 6vw, 78px);
}

.home-closing .section-kicker {
  color: var(--kc-yellow);
}

.home-closing h2 {
  max-width: 13ch;
  margin: 0 0 32px;
  color: var(--kc-surface);
  font-size: clamp(2.4rem, 4.7vw, 4.8rem);
  letter-spacing: -0.047em;
  line-height: 0.98;
  text-wrap: balance;
}

.home-closing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.home-closing .button-on-dark {
  color: var(--kc-navy-deep);
  background: var(--kc-yellow);
}

.home-closing .button-on-dark:hover {
  background: var(--kc-yellow-hover);
}

.home-closing .button-outline-light {
  color: var(--kc-surface);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.62);
}

.home-closing .button-outline-light:hover {
  color: var(--kc-navy-deep);
  background: var(--kc-surface);
}

.home-closing-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px;
  color: var(--kc-surface);
  font-weight: 800;
}

.home-closing-art {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
}

.home-closing-art::before {
  position: absolute;
  width: 370px;
  aspect-ratio: 1;
  right: -30px;
  bottom: -80px;
  background: var(--kc-teal);
  border-radius: 50%;
  content: "";
}

.home-closing-art img {
  position: relative;
  z-index: 1;
  width: min(360px, 96%);
  max-height: 92%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.18));
}

.home-closing-orbit {
  position: absolute;
  z-index: 2;
  width: 96px;
  height: 96px;
  top: 52px;
  right: 42px;
  border: 18px solid var(--kc-yellow);
  border-radius: 50%;
}

.site-footer {
  position: relative;
  overflow: hidden;
  padding: 82px 0 28px;
  color: rgba(255, 255, 255, 0.78);
  background: var(--kc-navy-deep);
}

.footer-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(300px, 1.2fr);
  align-items: start;
  gap: 38px 80px;
}

.footer-brand a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.footer-brand img {
  width: auto;
  height: 52px;
  padding: 7px 10px;
  background: var(--kc-surface);
  border-radius: 12px;
}

.footer-brand strong {
  color: var(--kc-surface);
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: 1.25rem;
}

.footer-brand p {
  margin: 17px 0 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 22px;
}

.footer-links a {
  min-height: 44px;
  padding: 10px 0;
  color: var(--kc-surface);
  font-weight: 700;
  transition: color 180ms ease, transform 180ms ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--kc-yellow);
  transform: translateY(-2px);
}

.footer-copy {
  grid-column: 1 / -1;
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.9rem;
}

.footer-wordmark {
  grid-column: 1 / -1;
  margin: 4px 0 -0.16em;
  color: rgba(255, 255, 255, 0.075);
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: clamp(3rem, 10.8vw, 9.5rem);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.8;
  white-space: nowrap;
}

body.reveal-ready .home-redesign [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(34px);
  clip-path: inset(0 0 9% 0 round var(--kc-radius-card));
}

.home-redesign [data-reveal] {
  transition: opacity 720ms var(--kc-ease-out), transform 720ms var(--kc-ease-out), clip-path 720ms var(--kc-ease-out);
}

.home-redesign [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0 round 0);
}

/* Shared navigation markup aliases. */
.nav-inner {
  min-height: 58px;
  padding: 6px 8px 6px 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(223, 227, 236, 0.84);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(13, 36, 60, 0.1);
  backdrop-filter: blur(14px);
}

.site-logo-image {
  width: 172px;
}

.main-nav {
  gap: 3px;
}

.main-nav > a {
  min-height: 42px;
  flex: 0 0 auto;
  padding: 9px 13px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.main-nav > a:hover,
.main-nav > a:focus-visible,
.main-nav > a.active {
  color: var(--kc-navy);
  background: var(--kc-yellow-soft);
}

.main-nav > a:active {
  transform: scale(0.97);
}

.nav-more {
  position: relative;
  display: inline-flex;
}

.nav-more-toggle {
  min-height: 42px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border: 0;
  border-radius: 999px;
  color: #3e485f;
  background: transparent;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.nav-more-toggle:hover,
.nav-more-toggle:focus-visible,
.nav-more-toggle.active,
.nav-more-toggle[aria-expanded="true"] {
  color: var(--kc-navy);
  background: var(--kc-yellow-soft);
}

.nav-more-toggle:active {
  transform: scale(0.97);
}

.nav-more-plus {
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
  transition: transform 180ms ease;
}

.nav-more-toggle[aria-expanded="true"] .nav-more-plus {
  transform: rotate(45deg);
}

.nav-more-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  min-width: 184px;
  padding: 8px;
  border: 1px solid var(--kc-border);
  border-radius: 16px;
  background: var(--kc-surface);
  box-shadow: 0 18px 44px rgba(13, 36, 60, 0.17);
}

.nav-more-menu[hidden] {
  display: none;
}

.nav-more-menu a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  color: #3e485f;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
}

.nav-more-menu a:hover,
.nav-more-menu a:focus-visible,
.nav-more-menu a.active {
  color: var(--kc-navy);
  background: var(--kc-yellow-soft);
}

.main-nav .nav-contact {
  padding-inline: 18px;
  color: var(--kc-surface);
  background: var(--kc-navy);
}

.main-nav .nav-contact:hover,
.main-nav .nav-contact:focus-visible {
  color: var(--kc-navy-deep);
  background: var(--kc-yellow);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--kc-yellow);
  outline-offset: 3px;
}

@media (max-width: 1120px) {
  .site-logo-image {
    width: 168px;
  }

  .mobile-nav-toggle {
    display: block;
    min-width: 46px;
    min-height: 46px;
    background: var(--kc-yellow-soft);
  }

  .main-nav {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--kc-border);
    border-radius: 20px;
    background: var(--kc-surface);
    box-shadow: 0 18px 44px rgba(13, 36, 60, 0.17);
  }

  .main-nav.is-open {
    display: flex;
  }


  .main-nav > a{
    min-height: 46px;
    display: flex;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 0.95rem;
  }

  /* Every .nav-more dropdown (Conferences, Educators, Young Presenters,
     About) gets its mobile layout from the generic ".main-nav .nav-more"
     rules further down this file - that selector's two classes outrank
     the plain ".nav-more" this block used to set to "display: none", so
     there is nothing to override here per-dropdown. */

  .home-redesign .home-hero-image {
    object-position: 60% 40%;
  }

  .pathway-mosaic {
    grid-template-columns: minmax(0, 0.9fr) minmax(290px, 1.05fr) minmax(0, 0.9fr);
  }
}

@media (max-width: 900px) {
  :root {
    --kc-header-space: 86px;
    --kc-section-space: 86px;
  }

  .site-header {
    padding: 10px 0 6px;
  }

  .nav-inner {
    min-height: 62px;
    padding: 7px 9px 7px 16px;
    border-radius: 21px;
  }

  .site-logo-image {
    width: 168px;
  }

  .mobile-nav-toggle {
    display: block;
    min-width: 46px;
    min-height: 46px;
    background: var(--kc-yellow-soft);
  }

  .main-nav {
    top: calc(100% + 9px);
    padding: 10px;
    border: 1px solid var(--kc-border);
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(13, 36, 60, 0.17);
  }

  .main-nav > a {
    min-height: 46px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 0.95rem;
  }

  .main-nav .nav-contact {
    margin-top: 5px;
  }

  .home-section-heading-split {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.7fr);
    gap: 38px;
  }

  .pathway-mosaic {
    grid-template-areas:
      "educators visual"
      "presenters visual"
      "partners partners";
    grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
    grid-template-rows: auto auto auto;
  }

  .pathway-visual {
    min-height: 100%;
  }

  .pathway-panel-partners {
    min-height: 210px;
  }

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

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

  .project-panel-community {
    grid-column: 1 / -1;
    min-height: 330px;
  }

  .home-closing-panel {
    grid-template-columns: minmax(0, 1fr) 240px;
  }

  .home-closing-copy {
    padding: 54px 28px 54px 46px;
  }

  .home-closing-art::before {
    width: 290px;
  }

  .footer-inner {
    gap: 34px;
  }
}

@media (max-width: 700px) {
  :root {
    --kc-section-space: 72px;
    --kc-radius-large: 22px;
    --kc-radius-card: 18px;
  }

  .site-container {
    width: min(100% - 32px, 1180px);
  }

  .home-philosophy h2,
  .home-section-heading h2 {
    font-size: clamp(2.2rem, 11vw, 3.25rem);
  }

  .home-section-heading-split {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .home-section-heading {
    margin-bottom: 36px;
  }

  .pathway-mosaic {
    grid-template-areas:
      "educators"
      "visual"
      "presenters"
      "partners";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .pathway-panel {
    min-height: 230px;
    padding: 24px;
  }

  .pathway-visual {
    min-height: 420px;
  }

  .home-conference-grid,
  .project-panel-grid {
    grid-template-columns: 1fr;
  }

  .project-panel,
  .project-panel-community {
    grid-column: auto;
    min-height: 330px;
  }

  .project-panel-label {
    margin-top: 122px;
  }

  .home-closing {
    padding-bottom: 16px;
  }

  .home-closing-panel {
    grid-template-columns: 1fr;
  }

  .home-closing-copy {
    padding: 42px 24px 12px;
  }

  .home-closing h2 {
    font-size: clamp(2.35rem, 11vw, 3.35rem);
  }

  .home-closing-art {
    min-height: 310px;
  }

  .home-closing-art::before {
    right: 50%;
    bottom: -110px;
    width: 330px;
    transform: translateX(50%);
  }

  .home-closing-art img {
    width: min(280px, 76%);
  }

  .home-closing-orbit {
    top: 16px;
    right: 34px;
    width: 68px;
    height: 68px;
    border-width: 13px;
  }

  .site-footer {
    padding-top: 60px;
  }

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

  .footer-links {
    justify-content: flex-start;
  }

  .footer-copy,
  .footer-wordmark {
    grid-column: auto;
  }

  .footer-copy {
    margin-top: 12px;
  }

  .footer-wordmark {
    font-size: clamp(2.45rem, 15vw, 4rem);
    white-space: normal;
  }
}

@media (max-width: 360px) {
  :root {
    --kc-header-space: 80px;
  }

  .site-container {
    width: calc(100% - 24px);
  }

  .site-logo-image {
    width: 138px;
  }

  .home-closing-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .home-closing-actions .button {
    width: 100%;
  }

  .pathway-panel {
    min-height: 245px;
  }

  .pathway-visual {
    min-height: 370px;
  }

  .home-conference-body,
  .project-panel {
    padding: 22px;
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  body.reveal-ready .home-redesign [data-reveal]:not(.is-visible),
  .home-redesign [data-reveal] {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

/* =========================================================
   CONFERENCE SEARCH / FILTER
   ========================================================= */

.conference-filter-panel {
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius-card);
  background: var(--kc-surface);
}

.conference-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 14px 20px;
  color: var(--kc-navy);
  cursor: pointer;
  list-style: none;
  transition: background-color 180ms ease;
}

.conference-filter-toggle::-webkit-details-marker {
  display: none;
}

.conference-filter-toggle > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.conference-filter-toggle strong {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 800;
}

.conference-filter-toggle small {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--kc-purple-deep);
  background: var(--kc-purple-soft);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.conference-filter-toggle::after {
  width: 9px;
  height: 9px;
  margin-left: 18px;
  flex: 0 0 auto;
  border-right: 2px solid var(--kc-navy);
  border-bottom: 2px solid var(--kc-navy);
  content: "";
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}

.conference-filter-panel[open] .conference-filter-toggle::after {
  transform: translateY(3px) rotate(225deg);
}

.conference-filter-toggle:hover {
  background: var(--kc-canvas);
}

.conference-filter-toggle:focus-visible {
  outline: 3px solid var(--kc-yellow);
  outline-offset: -3px;
}

.conference-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-top: 1px solid var(--kc-border);
}

.conference-search-field,
.conference-filter-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.conference-search-field label,
.conference-filter-field label {
  color: var(--kc-navy);
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
}

.conference-search-field input,
.conference-filter-field select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--kc-border);
  border-radius: 12px;
  background-color: var(--kc-surface);
  color: var(--kc-navy);
  font-size: 1rem;
}

.conference-search-field input {
  padding: 12px 15px;
}

.conference-search-field input::placeholder {
  color: var(--kc-muted);
}

.conference-filter-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.conference-filter-field select {
  padding: 12px 42px 12px 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2317324D' d='M6 8 0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.conference-search-field input:focus,
.conference-filter-field select:focus {
  border-color: var(--kc-teal);
  outline: 3px solid var(--kc-yellow);
  outline-offset: 1px;
}

.conference-filter-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.conference-filter-submit {
  min-height: 48px;
  padding: 11px 24px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--kc-teal);
  color: var(--kc-surface);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease;
}

.conference-filter-submit:hover {
  background: var(--kc-navy);
  transform: translateY(-2px);
}

.conference-filter-submit:active {
  transform: scale(0.98);
}

.conference-filter-submit:focus-visible,
.conference-filter-clear:focus-visible {
  outline: 3px solid var(--kc-yellow);
  outline-offset: 3px;
}

.conference-filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--kc-purple-deep);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}

.conference-filter-clear:hover {
  text-decoration-color: currentColor;
}

.conference-results-summary {
  margin-bottom: 24px;
}

.conference-results-summary p {
  margin: 0;
  color: var(--kc-muted);
  font-size: 1rem;
}

.conference-results-summary strong {
  color: var(--kc-navy);
}

.conference-no-results h2 {
  margin-bottom: 8px;
  color: var(--kc-navy);
  font-size: clamp(1.45rem, 2vw, 2rem);
}

.conference-no-results .button {
  margin-top: 22px;
}

@media (max-width: 850px) {
  .conference-filter-fields {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .conference-filter-toggle {
    min-height: 56px;
    padding: 12px 16px;
  }

  .conference-filter-toggle > span {
    gap: 10px;
  }

  .conference-filter-bar {
    padding: 18px;
  }

  .conference-filter-fields {
    grid-template-columns: 1fr;
  }

  .conference-filter-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .conference-filter-submit,
  .conference-filter-clear {
    width: 100%;
  }
}


/* =========================================================
   EDUCATOR HUB
   ========================================================= */

.audience-hub-hero {
  padding: 90px 0 80px;
  background:
          linear-gradient(
                  135deg,
                  #eef9f9 0%,
                  #ffffff 55%,
                  #f5f2ff 100%
          );
}

/* No max-width here on purpose. This element also carries
   .site-container, whose `margin: 0 auto` centres any narrower box and
   pushes the hero copy in from the left of every section below it. The
   h1 and the lead are already capped individually, so the cap on the
   container was doing nothing except the damage. */

.audience-hub-hero h1 {
  max-width: 800px;
  margin-bottom: 22px;

  font-size: clamp(2.8rem, 5vw, 4.6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.audience-hub-lead {
  max-width: 720px;
  margin-bottom: 30px;

  font-size: 1.2rem;
  color: #5f687e;
}


/* HUB CARDS */

.audience-hub-section {
  background: #f8f9fc;
}

.audience-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.audience-hub-card {
  min-height: 270px;

  display: flex;
  flex-direction: column;

  padding: 30px;

  border: 1px solid #dfe3ec;
  border-radius: 24px;

  background: #ffffff;

  box-shadow: 0 12px 34px rgba(23, 50, 77, 0.07);

  transition:
          transform 0.2s ease,
          box-shadow 0.2s ease,
          border-color 0.2s ease;
}

.audience-hub-card:hover {
  transform: translateY(-4px);

  border-color: rgba(0, 124, 131, 0.35);

  box-shadow:
          0 18px 44px rgba(23, 50, 77, 0.12);
}

.audience-hub-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  margin-bottom: 24px;

  border-radius: 50%;

  background: rgba(0, 124, 131, 0.1);
  color: #007c83;

  font-family: "Nunito Sans", sans-serif;
  font-weight: 900;
}

.audience-hub-card h3 {
  margin-bottom: 12px;

  font-size: 1.55rem;
  font-weight: 900;
}

.audience-hub-card p {
  margin-bottom: 28px;

  color: #667089;
}

.audience-hub-link {
  margin-top: auto;

  color: #007c83;

  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
}


/* HOW IT WORKS */

.educator-steps-section {
  padding: 90px 0;

  background: #ffffff;
}

.educator-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.educator-step {
  position: relative;

  padding: 30px;

  border-radius: 22px;

  background: #f7f9fb;
  border: 1px solid #e1e5ec;
}

.educator-step > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  margin-bottom: 22px;

  border-radius: 50%;

  background: #ffc83d;
  color: #17324d;

  font-family: "Nunito Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
}

.educator-step h3 {
  margin-bottom: 12px;

  font-size: 1.35rem;
}

.educator-step p {
  margin: 0;

  color: #667089;
}


/* UPCOMING CONFERENCES */

.educator-upcoming-section {
  background: #f8f9fc;
}

.educator-conference-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.educator-conference-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  padding: 24px 26px;

  border: 1px solid #dfe3ec;
  border-radius: 18px;

  background: #ffffff;

  transition:
          transform 0.2s ease,
          box-shadow 0.2s ease;
}

.educator-conference-item:hover {
  transform: translateY(-2px);

  box-shadow:
          0 12px 30px rgba(23, 50, 77, 0.08);
}

.educator-conference-item h3 {
  margin: 6px 0 0;

  font-size: 1.25rem;
}

.educator-conference-item > div:first-child > span {
  color: #007c83;

  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.educator-conference-meta {
  display: flex;
  gap: 18px;

  flex-shrink: 0;

  color: #667089;
  font-weight: 700;
}


/* RESPONSIVE */

@media (max-width: 850px) {

  .audience-hub-grid {
    grid-template-columns: 1fr;
  }

  .educator-steps-grid {
    grid-template-columns: 1fr;
  }

  .educator-conference-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .educator-conference-meta {
    flex-wrap: wrap;
  }

}

@media (max-width: 600px) {

  .audience-hub-hero {
    padding: 60px 0;
  }

  .audience-hub-card,
  .educator-step {
    padding: 24px;
  }

}


/* =========================================================
   YOUNG PRESENTER HUB
   ========================================================= */

.presenter-hub-hero {
  padding: 90px 0 80px;

  background:
          linear-gradient(
                  135deg,
                  #fff8e8 0%,
                  #ffffff 52%,
                  #eef8ff 100%
          );
}

/* Same as .audience-hub-hero-inner: no max-width here, because it would
   centre against .site-container. The h1 and lead cap themselves. */

.presenter-hub-hero h1 {
  max-width: 780px;
  margin-bottom: 22px;

  font-size: clamp(2.8rem, 5vw, 4.6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.presenter-hub-lead {
  max-width: 720px;
  margin-bottom: 30px;

  font-size: 1.2rem;
  color: #5f687e;
}


/* MAIN PATHWAY */

.presenter-hub-section {
  background: #f8f9fc;
}

.presenter-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.presenter-hub-card {
  min-height: 270px;

  display: flex;
  flex-direction: column;

  padding: 30px;

  border: 1px solid #dfe3ec;
  border-radius: 24px;

  background: #ffffff;

  box-shadow: 0 12px 34px rgba(23, 50, 77, 0.07);

  transition:
          transform 0.2s ease,
          box-shadow 0.2s ease,
          border-color 0.2s ease;
}

.presenter-hub-card:hover {
  transform: translateY(-4px);

  border-color: rgba(108, 78, 227, 0.35);

  box-shadow:
          0 18px 44px rgba(23, 50, 77, 0.12);
}

.presenter-hub-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  margin-bottom: 24px;

  border-radius: 50%;

  background: rgba(108, 78, 227, 0.1);
  color: #6c4ee3;

  font-family: "Nunito Sans", sans-serif;
  font-weight: 900;
}

.presenter-hub-card h3 {
  margin-bottom: 12px;

  font-size: 1.55rem;
  font-weight: 900;
}

.presenter-hub-card p {
  margin-bottom: 28px;

  color: #667089;
}

.presenter-hub-link {
  margin-top: auto;

  color: #6c4ee3;

  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
}


/* HOW IT WORKS */

.presenter-steps-section {
  padding: 90px 0;

  background: #ffffff;
}

.presenter-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.presenter-step {
  padding: 30px;

  border: 1px solid #e4e6ee;
  border-radius: 22px;

  background: #fffdf7;
}

.presenter-step > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  margin-bottom: 22px;

  border-radius: 50%;

  background: #ffc83d;
  color: #17324d;

  font-family: "Nunito Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
}

.presenter-step h3 {
  margin-bottom: 12px;

  font-size: 1.35rem;
}

.presenter-step p {
  margin: 0;

  color: #667089;
}


/* STUDENT RESOURCES */

.presenter-resource-section {
  background: #f8f9fc;
}

.presenter-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.presenter-resource-card {
  min-height: 250px;

  display: flex;
  flex-direction: column;

  padding: 28px;

  border: 1px solid #dfe3ec;
  border-radius: 22px;

  background: #ffffff;

  box-shadow: 0 10px 30px rgba(23, 50, 77, 0.06);

  transition:
          transform 0.2s ease,
          box-shadow 0.2s ease;
}

.presenter-resource-card:hover {
  transform: translateY(-3px);

  box-shadow:
          0 16px 38px rgba(23, 50, 77, 0.1);
}

.presenter-resource-card .resource-type {
  align-self: flex-start;

  margin-bottom: 18px;
}

.presenter-resource-card h3 {
  margin-bottom: 12px;

  font-size: 1.35rem;
}

.presenter-resource-card p {
  margin-bottom: 24px;

  color: #667089;
}


/* REGISTRATION NOTE */

.presenter-registration-section {
  padding: 80px 0 100px;

  background: #ffffff;
}

.presenter-registration-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;

  padding: 45px;

  border-radius: 28px;

  background:
          linear-gradient(
                  135deg,
                  #f3efff,
                  #eef8ff
          );

  border: 1px solid #dddff0;
}

.presenter-registration-panel > div {
  max-width: 720px;
}

.presenter-registration-panel h2 {
  margin-bottom: 14px;

  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
}

.presenter-registration-panel p:last-child {
  margin-bottom: 0;

  color: #5f687e;
}


/* TABLET */

@media (max-width: 900px) {

  .presenter-resource-grid {
    grid-template-columns: 1fr 1fr;
  }

  .presenter-registration-panel {
    align-items: flex-start;
    flex-direction: column;
  }

}


/* SMALL TABLET */

@media (max-width: 760px) {

  .presenter-hub-grid,
  .presenter-steps-grid {
    grid-template-columns: 1fr;
  }

}


/* MOBILE */

@media (max-width: 600px) {

  .presenter-hub-hero {
    padding: 60px 0;
  }

  .presenter-hub-card,
  .presenter-step,
  .presenter-resource-card {
    padding: 24px;
  }

  .presenter-resource-grid {
    grid-template-columns: 1fr;
  }

  .presenter-registration-section {
    padding: 60px 0 75px;
  }

  .presenter-registration-panel {
    padding: 28px;
  }

  .presenter-registration-panel .button {
    width: 100%;
  }

}

/* =========================================================
   CONFERENCE FLYER
   ========================================================= */

.conference-flyer-block {
  margin-top: 22px;
  padding: 18px;

  border: 1px solid #e2e4ed;
  border-radius: 14px;

  background: #f8f9fc;
}

.conference-flyer-label {
  display: block;

  margin-bottom: 8px;

  color: #7b8295;

  font-size: 0.82rem;
  font-weight: 700;
}

.conference-flyer-link {
  display: inline-block;
  padding: 4px 0;
  color: #6c4ee3;

  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
}

.conference-flyer-link:hover {
  text-decoration: underline;
}


/* =========================================================
   DISABLED REGISTRATION
   ========================================================= */

.conference-register-disabled {
  background: #e6e8ee;
  color: #7a8192;

  cursor: default;
  pointer-events: none;
}

.conference-guide-section p {
  margin-bottom: 20px;
  color: #5f687e;
}

.conference-video-section p {
  margin-bottom: 20px;
  color: #5f687e;
}

.conference-inspiration-section p {
  margin-bottom: 20px;
  color: #5f687e;
}

/* -----------------------------------------------------------
   Conference detail - projects from this conference

   Reuses .conference-information-section for the outer spacing
   and heading, so this only styles the list itself.
----------------------------------------------------------- */

.conference-projects-section p {
  margin-bottom: 20px;
  color: #5f687e;
}

.conference-project-list {
  display: grid;
  gap: 12px;

  margin: 0 0 24px;
  padding: 0;

  list-style: none;
}

.conference-project-item {
  display: grid;
  gap: 7px;

  padding: 18px 20px;

  background: #ffffff;
  border: 1px solid #e4e6ee;
  border-radius: 14px;

  transition:
          transform 0.18s ease,
          border-color 0.18s ease,
          box-shadow 0.18s ease;
}

.conference-project-item:hover,
.conference-project-item:focus-visible {
  transform: translateY(-2px);
  border-color: #c9cfe0;
  box-shadow: 0 12px 28px rgba(34, 42, 70, 0.1);
}

.conference-project-item strong {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.3;
  color: #17324d;
}

.conference-project-summary {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #5f687e;
}

.conference-project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  margin-top: 3px;
}

.conference-project-year,
.conference-project-theme {
  padding: 4px 10px;

  border-radius: 999px;

  font-family: "Source Sans 3", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
}

.conference-project-year {
  color: #17324d;
  background: #f2f4f9;
}

.conference-project-theme {
  color: #005f65;
  background: #ddf0ef;
}

/* =========================================================
   404 PAGE
   ========================================================= */

.error-404-page {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(620px, 72vh, 780px);
  padding: clamp(76px, 9vw, 120px) 0;
  overflow: hidden;
  background: var(--kc-canvas);
}

.error-404-page::before {
  position: absolute;
  top: -180px;
  left: -150px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--kc-yellow);
  content: "";
  opacity: 0.34;
  pointer-events: none;
}

.error-404-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  align-items: center;
  gap: clamp(48px, 8vw, 104px);
}

.error-404-copy {
  max-width: 650px;
}

.error-404-copy h1 {
  max-width: 11ch;
  margin-bottom: 24px;
  color: var(--kc-navy);
  font-size: clamp(3.25rem, 6vw, 5.6rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.error-404-text {
  max-width: 54ch;
  margin: 0 0 34px;
  color: var(--kc-muted);
  font-size: clamp(1.08rem, 1.7vw, 1.25rem);
  line-height: 1.65;
}

.error-404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.error-404-visual {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  border-radius: var(--kc-radius-hero);
  background: var(--kc-navy);
  box-shadow: var(--kc-shadow-hero);
}

.error-404-code {
  position: absolute;
  top: 26px;
  left: 50%;
  color: var(--kc-yellow);
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: clamp(7.2rem, 13vw, 10.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  transform: translateX(-50%);
}

.error-404-mascot {
  position: absolute;
  bottom: -9%;
  left: 50%;
  z-index: 2;
  width: min(72%, 330px);
  max-height: 72%;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 26px rgba(13, 36, 60, 0.28));
}

.error-404-orbit {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.error-404-orbit-one {
  right: -54px;
  bottom: 72px;
  width: 168px;
  height: 168px;
  background: var(--kc-teal);
}

.error-404-orbit-two {
  bottom: -58px;
  left: -36px;
  width: 150px;
  height: 150px;
  border: 20px solid var(--kc-purple);
}

@media (max-width: 900px) {

  .error-404-page {
    min-height: auto;
  }

  .error-404-shell {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .error-404-copy {
    max-width: 700px;
  }

  .error-404-visual {
    width: min(100%, 560px);
    min-height: 390px;
  }
}

@media (max-width: 600px) {

  .error-404-page {
    padding: 64px 0 78px;
  }

  .error-404-page::before {
    top: -110px;
    left: -100px;
    width: 260px;
    height: 260px;
  }

  .error-404-copy h1 {
    font-size: clamp(2.75rem, 14vw, 4rem);
  }

  .error-404-actions {
    flex-direction: column;
  }

  .error-404-actions .button {
    width: 100%;
  }

  .error-404-visual {
    min-height: 310px;
    border-radius: 24px;
  }

  .error-404-code {
    top: 20px;
    font-size: clamp(6rem, 34vw, 8.5rem);
  }

  .error-404-mascot {
    width: min(70%, 260px);
  }
}

/* CMS-managed editorial copy shared by public landing pages. */
.cms-body-section {
  padding: clamp(56px, 7vw, 92px) 0;
  background: var(--kc-surface);
}

.cms-body-section--get-involved {
  background: var(--kc-canvas);
}

.cms-body {
  max-width: 780px;
  color: var(--kc-ink);
  font-family: "Source Sans 3", sans-serif;
  font-size: 1.08rem;
  line-height: 1.7;
}

.cms-body > :first-child {
  margin-top: 0;
}

.cms-body > :last-child {
  margin-bottom: 0;
}

.cms-body h2 {
  margin: 2.3rem 0 0.75rem;
  color: var(--kc-navy);
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.12;
}

.cms-body h3 {
  margin: 1.8rem 0 0.55rem;
  color: var(--kc-navy);
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.25rem;
  line-height: 1.25;
}

.cms-body p,
.cms-body ul,
.cms-body ol {
  margin: 0 0 1rem;
}

.cms-body a {
  color: var(--kc-purple-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cms-body a.button { text-decoration: none; }
.cms-body a.button-primary { color: #ffffff; }
.cms-body a.button-secondary { color: #293550; }

.cms-body--compact {
  max-width: 700px;
}

/* Demo brand asset and Showcase: preserve the existing colour and type system. */
.site-header .site-logo { gap: 10px; line-height: 1.15; }
.site-header .site-logo-image { width: 76px; height: 62px; object-fit: contain; }
.site-brand-name { font-family: "Nunito Sans", sans-serif; font-weight: 900; font-size: 1rem; color: var(--kc-navy); max-width: 110px; }
.content-image-caption { font-size: .8rem; line-height: 1.45; color: var(--kc-navy); margin: 12px 0; }
.home-conference-media--logo { background: #f4f7fa; }
.home-conference-media--logo img { object-fit: contain; padding: 30px; }

/* Shared archive presentation: Kids' Cloud, presenters and conference history. */
.kidscloud-page .site-container,
.presenters-page .site-container,
.presenter-detail-container,
.conference-history .site-container { max-width: 1120px; }
.kidscloud-page .projects-hero, .presenters-page .presenters-hero {
  min-height: 0; padding: 48px 0;
  background: #f5f4fa;
}
.kidscloud-page .hero-decoration, .presenters-page .hero-decoration { display: none; }
.kidscloud-page .hero-grid, .presenters-page .hero-grid { min-height: 0; padding-block: 0; }
.kidscloud-page .hero-copy, .presenters-page .hero-copy { max-width: 850px; }
.kidscloud-page .hero-copy h1, .presenters-page .hero-copy h1 { font-size: clamp(2.2rem, 4.5vw, 3.5rem); line-height: 1.12; margin-bottom: 18px; }
.archive-subtitle { font-size: clamp(1.15rem, 2.2vw, 1.55rem); color: var(--kc-navy); font-weight: 800; margin: 0 0 16px; }
.kidscloud-page .hero-lead, .presenters-page .hero-lead { max-width: 65ch; font-size: 1.1rem; }
.kidscloud-page .home-section, .presenters-listing, .conference-history { padding-block: clamp(36px, 5vw, 64px); }
.kidscloud-page .section-heading, .presenters-section-heading { margin-bottom: 28px; }
.kidscloud-about-copy p { margin: 0; max-width: 65ch; line-height: 1.75; color: var(--project-muted); }
.kidscloud-empty-state { display: block; max-width: 780px; padding: 26px 30px; background: #f5f7fa; border: 1px solid var(--project-border); border-left: 4px solid var(--project-teal); }
.kidscloud-empty-state h3 { margin: 0 0 12px; font-size: 1.35rem; }
.kidscloud-empty-state p + p { margin-top: 10px; }
.kidscloud-empty-state .text-link { display: inline-flex; margin-top: 16px; }
.project-archive-card h3 { margin: 0; font-size: 1.3rem; line-height: 1.3; color: var(--project-navy); }
.project-card-body { flex: 1; }
.project-card-meta { margin: 0; font-size: .85rem; color: var(--project-muted); }
.project-conference-link { font-size: .85rem; color: var(--project-teal); }
.project-source-label { margin-top: auto; padding-top: 8px; font-size: .8rem; font-weight: 700; color: #6741b5; }
.project-card-actions { justify-content: flex-start; gap: 8px 16px; }
.project-card-actions a { display: inline-flex; align-items: center; min-height: 44px; }
.project-archive-card, .presenter-profile-card, .conference-history-card { border-radius: 18px; box-shadow: 0 5px 16px rgba(23,50,77,.04); overflow-wrap: anywhere; }
.presenter-profile-card:hover, .conference-history-card:hover { border-color: #b8aad9; }
.presenter-profile-grid, .conference-history-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.presenter-profile-card h4 { margin: 14px 0 8px; font-size: 1.35rem; color: var(--presenter-navy); }
.presenter-profile-image--reserved, .presenter-detail-image--reserved { background: #eef0f5; color: #798399; }
.presenter-profile-image { aspect-ratio: 4 / 3; }
.presenter-detail { padding: 48px 0 64px; }
.presenter-detail-layout { grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); gap: 44px; }
.presenter-detail-content { min-width: 0; overflow-wrap: anywhere; }
.presenter-bio { max-width: 70ch; }
.presenter-detail-image--reserved { min-height: 0; aspect-ratio: 4 / 5; }
.project-detail-page { padding-top: 48px; }
.conference-history { background: #f5f4fa; }
.conference-history-card { display: flex; flex-direction: column; gap: 14px; padding: 26px; background: #fff; border: 1px solid var(--kc-border); }
.conference-history-card h3 { margin: 0; font-size: 1.35rem; line-height: 1.35; }
.conference-history-card p { margin: 0; }
.conference-history-card time { color: #007c83; font-size: .9rem; font-weight: 700; }
.conference-history-card .text-link { margin-top: auto; padding-top: 12px; }
#browse, #past-conferences { scroll-margin-top: calc(var(--kc-header-space, 100px) + 24px); }
.kidscloud-page .button { white-space: normal; text-align: center; }
.kidscloud-page .home-cta .button-primary { background: var(--kc-yellow); color: var(--kc-navy); box-shadow: none; }
/* The leftmost nav dropdown opens from its left edge instead of the
   default right-aligned menu, so it never overhangs the viewport. */
.nav-align-start .nav-more-menu { left: 0; right: auto; width: 280px; }
.nav-more-menu { box-shadow: 0 8px 22px rgba(13,36,60,.1); }
.nav-more-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-more-toggle:focus-visible, .nav-more-menu a:focus-visible { outline-color: #6c4ee3; }
@media (max-width: 1120px) {
  .main-nav.is-open { max-height: calc(100dvh - 115px); overflow-y: auto; }
  .main-nav .nav-more { display: flex; flex-direction: column; align-items: stretch; }
  .main-nav .nav-more-toggle { min-height: 46px; justify-content: space-between; padding: 11px 14px; border-radius: 12px; }
  .main-nav .nav-more-menu { position: static; width: auto; min-width: 0; margin: 4px 0 2px; padding: 6px 6px 6px 14px; border: 0; border-left: 3px solid var(--kc-yellow); border-radius: 0 12px 12px 0; box-shadow: none; }
  .nav-more-menu::before { display: none; }
}
@media (max-width: 980px) {
  .presenter-profile-grid, .conference-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .presenter-detail-layout { grid-template-columns: 1fr; gap: 28px; }
  .presenter-detail-image { width: min(100%, 320px); }
  .presenter-detail-image--reserved { width: 144px; aspect-ratio: 1; }
  .kidscloud-about-copy { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .site-header .site-logo-image { width: 64px; height: 52px; }
  .site-brand-name { font-size: .95rem; }
  .presenter-profile-grid, .conference-history-grid { grid-template-columns: minmax(0, 1fr); }
  .kidscloud-empty-state { padding: 24px; }
}

/* =========================================================
   GET INVOLVED: THREE INVOLVEMENT CARDS

   Appended for the Partners / Sponsors / Volunteers row.
   Three equal columns on desktop; collapses at the same
   850px breakpoint the base .audience-hub-grid uses.
   ========================================================= */

.get-involved-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 850px) {

  .get-involved-grid {
    grid-template-columns: 1fr;
  }

}

/* Curated conference retrospective. All content comes from conference pages. */
.conference-highlights-page { color: var(--kc-navy); }
.conference-highlights-page .site-container { max-width: 1120px; }
.highlights-hero { padding: clamp(44px, 6vw, 76px) 0 46px; background: #f5f4fa; }
.highlights-hero h1 { max-width: 850px; margin: 16px 0 24px; font-size: clamp(2.4rem, 4.8vw, 4rem); line-height: 1.08; letter-spacing: -.035em; }
.highlights-hero p { max-width: 62ch; margin: 0; color: #4a5470; font-size: 1.15rem; line-height: 1.65; }
.highlights-hero .highlights-hero-note { margin-top: 26px; padding-left: 16px; border-left: 3px solid var(--kc-yellow); color: #007c83; font-size: .9rem; font-weight: 700; }
.highlights-section { padding: clamp(36px, 5vw, 60px) 0; }
.highlights-section-heading { margin-bottom: 26px; }
.highlights-section h2 { margin: 10px 0 0; font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.2; letter-spacing: -.02em; }
.highlight-card { min-width: 0; overflow: hidden; border: 1px solid var(--kc-border); border-radius: 20px; background: #fff; display: flex; flex-direction: column; transition: border-color .18s ease; }
.highlight-card:hover { border-color: #b8aad9; }
.highlight-card--lead { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.highlight-card-media { background: #eef1f6; aspect-ratio: 16 / 10; overflow: hidden; }
.highlight-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.highlight-card--lead .highlight-card-media { aspect-ratio: auto; min-height: 340px; }
.highlight-card-media--logo { background: #f2f5f8; }
.highlight-card-media--logo img { object-fit: contain; padding: 36px; }
.highlight-card-art { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 30px; padding: clamp(30px, 4vw, 52px); color: var(--kc-navy); background: #eceaf5; border-bottom: 6px solid var(--kc-yellow); }
.highlight-card-art strong { font-family: 'Nunito Sans', sans-serif; font-weight: 900; font-size: clamp(4rem, 8vw, 7rem); line-height: 1; letter-spacing: -.06em; color: #6741b5; }
.highlight-card-art span { font-size: .95rem; line-height: 1.5; font-weight: 700; }
.highlight-card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 26px; min-width: 0; }
.highlight-card--lead .highlight-card-copy { padding: clamp(28px, 4vw, 46px); }
.highlight-card time { font-size: .82rem; letter-spacing: .035em; font-weight: 800; color: #007c83; }
.highlight-card h3 { margin: 14px 0; font-size: 1.4rem; line-height: 1.25; overflow-wrap: anywhere; }
.highlight-card--lead h3 { font-size: clamp(1.75rem, 2.7vw, 2.35rem); }
.highlight-card-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 18px; padding: 0; list-style: none; font-size: .9rem; line-height: 1.5; color: #4a5470; }
.highlight-card-meta li { overflow-wrap: anywhere; }
.highlight-card-summary { margin: 0 0 24px; max-width: 60ch; line-height: 1.65; color: #4a5470; }
.highlight-card-copy > .button { margin-top: auto; }
.highlight-card-resources { display: flex; flex-wrap: wrap; gap: 6px 20px; width: 100%; list-style: none; margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid var(--kc-border); }
.highlight-card-resources a { display: inline-flex; align-items: center; min-height: 44px; color: #6741b5; font-size: .92rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.highlight-card-resources a:hover { color: #007c83; }
.highlights-more { margin-top: clamp(36px, 5vw, 60px); }
.highlights-more h2 { margin-bottom: 24px; }
.highlight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.highlights-archive { background: #f5f7fa; border-block: 1px solid var(--kc-border); }
.highlights-archive-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px 56px; }
.highlights-archive-inner p { max-width: 62ch; margin: 16px 0 0; line-height: 1.65; color: #4a5470; }
.highlights-participate { background: #fff; }
.highlights-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.highlights-empty { max-width: 740px; padding: 26px 30px; background: #f5f7fa; border: 1px solid var(--kc-border); border-radius: 18px; }
.highlights-empty h3 { margin: 0 0 12px; font-size: 1.35rem; }
.highlights-empty p { margin: 0; line-height: 1.65; color: #4a5470; }
.conference-highlights-page .button { max-width: 100%; white-space: normal; text-align: center; }
@media (max-width: 980px) {
  .highlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .highlight-card--lead { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}
@media (max-width: 760px) {
  .highlight-card--lead { grid-template-columns: minmax(0, 1fr); }
  .highlight-card--lead .highlight-card-media { min-height: 0; aspect-ratio: 16 / 9; }
  .highlight-card-art { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
  .highlight-card-art strong { grid-column: 2; grid-row: 1 / 3; }
  .highlights-archive-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .highlights-archive-inner > .button { justify-self: start; }
}
@media (max-width: 600px) {
  .highlight-grid { grid-template-columns: minmax(0, 1fr); }
  .highlights-title-break { display: none; }
  .highlights-hero h1 { font-size: clamp(2.25rem, 9vw, 3rem); }
  .highlight-card-copy, .highlight-card--lead .highlight-card-copy { padding: 24px; }
}

/* Key Partners: an editorial, CMS-driven organisation directory. */
.key-partners-page { color: var(--kc-navy); }
.key-partners-page .site-container { max-width: 1120px; }
.partners-hero { padding: clamp(44px, 6vw, 76px) 0 48px; background: #f5f4fa; }
.partners-hero h1 { margin: 14px 0 18px; font-size: clamp(2.35rem, 5vw, 4rem); line-height: 1.08; letter-spacing: -.035em; }
.partners-hero p { max-width: 62ch; margin: 0; color: #4a5470; font-size: 1.1rem; line-height: 1.7; }
.partners-listing { padding: clamp(40px, 6vw, 72px) 0; }
.partners-listing > .site-container > .section-heading { max-width: 760px; margin-bottom: 46px; }
.partners-listing h2 { margin-top: 10px; font-size: clamp(1.7rem, 3vw, 2.45rem); line-height: 1.18; }
.partner-group + .partner-group { margin-top: 54px; }
.partner-group h3 { margin: 0 0 20px; font-size: 1.35rem; color: var(--kc-navy); }
.partner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.partner-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--kc-border); border-radius: 18px; background: #fff; transition: border-color .18s ease, transform .18s ease; }
.partner-card:hover { border-color: #b8aad9; transform: translateY(-2px); }
.partner-card-logo { display: flex; align-items: center; justify-content: center; min-height: 148px; padding: 24px; background: #f6f7fa; border-bottom: 1px solid var(--kc-border); }
.partner-card-logo img { display: block; width: 100%; height: 100px; object-fit: contain; }
.partner-card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px; }
.partner-card-type { color: #007c83; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.partner-card h4 { margin: 11px 0 0; font-size: 1.3rem; line-height: 1.3; overflow-wrap: anywhere; }
.partner-card p { margin: 14px 0 0; color: #4a5470; line-height: 1.6; }
.partner-card .text-link { margin-top: auto; padding-top: 20px; }
.partners-empty { max-width: 720px; padding: 26px 30px; border: 1px solid var(--kc-border); border-left: 4px solid var(--kc-teal); border-radius: 16px; background: #f5f7fa; }
.partners-empty h3 { margin: 0 0 10px; font-size: 1.3rem; }
.partners-empty p { margin: 0; color: #4a5470; line-height: 1.65; }
.partner-grid--single { max-width: 340px; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 980px) { .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .partner-grid { grid-template-columns: minmax(0, 1fr); }
  .partner-group + .partner-group { margin-top: 42px; }
  .partner-card-logo { min-height: 132px; }
}

/* =========================================================
   IMAGE LIGHTBOX

   One dialog shared by every [data-lightbox-trigger] button
   (see scripts/main.js). Markup is built and inserted by that
   script, not present in any template's PHP.

   The open/close motion is a plain CSS transition/animation, so
   the sitewide `@media (prefers-reduced-motion: reduce)` rule
   near the top of this file (which zeroes transition/animation
   duration everywhere) already neutralises it - no separate
   reduced-motion handling needed here or in the JS.
   ========================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.lightbox[hidden] {
  display: none;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 20, 34, 0.82);
}

.lightbox-body {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: min(1100px, 100%);
  max-height: 100%;
  animation: lightbox-in 220ms var(--kc-ease-out);
}

@keyframes lightbox-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.lightbox-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 96px);
  border-radius: 12px;
  background: var(--kc-surface);
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--kc-surface);
  color: var(--kc-navy);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(13, 36, 60, 0.28);
}

.lightbox-close:hover {
  background: var(--kc-yellow-soft);
}

.lightbox-close:focus-visible {
  outline: 3px solid var(--kc-navy);
  outline-offset: 3px;
}

body.lightbox-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .lightbox {
    padding: 16px;
  }
  .lightbox-close {
    top: 8px;
    right: 8px;
  }
}


/* =========================================================
   Shared dark page hero

   Every inner page opens the way the homepage does: a deep navy
   band that runs up behind the floating nav, a glass eyebrow pill,
   and a large tight white headline. Templates opt in with the
   "page-hero" class on their first section; the per-page hero
   classes still carry spacing quirks, this block owns the look.
   #content raises specificity over the older light-hero rules.
   ========================================================= */

#content .page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(var(--kc-header-h, var(--kc-header-space)) * -1);
  padding: calc(var(--kc-header-space) + clamp(52px, 6vw, 92px)) 0 clamp(60px, 7vw, 104px);
  border: 0;
  background:
    radial-gradient(48% 70% at 88% 8%, rgba(108, 78, 227, 0.42) 0%, rgba(108, 78, 227, 0) 70%),
    radial-gradient(40% 60% at 4% 108%, rgba(0, 124, 131, 0.38) 0%, rgba(0, 124, 131, 0) 72%),
    #18233a;
  color: #fff;
  text-align: left;
}

/* Fine dot texture, faded out towards the copy so it never sits under text. */
#content .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 42%, #000 82%);
  mask-image: linear-gradient(100deg, transparent 0%, transparent 42%, #000 82%);
}

/* Yellow ring - the same mark as the homepage closing card. */
#content .page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--kc-header-space) + 28px);
  right: max(24px, calc((100vw - 1180px) / 2 - 40px));
  width: clamp(72px, 9vw, 132px);
  aspect-ratio: 1;
  border: clamp(12px, 1.5vw, 20px) solid var(--kc-yellow);
  border-radius: 50%;
  opacity: 0.9;
}

#content .page-hero .hero-decoration {
  display: none;
}

#content .page-hero .hero-copy,
#content .page-hero .about-container {
  max-width: none;
}

#content .page-hero h1 {
  max-width: 17ch;
  margin: 0 0 22px;
  color: #fff;
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: clamp(2.6rem, 1.3rem + 4.2vw, 5.4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}

#content .page-hero p,
#content .page-hero .cms-body,
#content .page-hero .cms-body p {
  max-width: 600px;
  margin-left: 0;
  margin-right: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.22rem);
  line-height: 1.6;
}

#content .page-hero .cms-body a {
  color: #fff;
}

/* Kicker text and the older ".eyebrow" pills become the homepage's glass pill. */
#content .page-hero .section-kicker,
#content .page-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 8px 16px 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

#content .page-hero .section-kicker::before,
#content .page-hero .eyebrow-dot {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kc-yellow);
  box-shadow: 0 0 0 4px rgba(255, 200, 61, 0.25);
}

/* Back links and inline text links. */
#content .page-hero .conference-back-link,
#content .page-hero .resource-back-link,
#content .page-hero .text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  padding-bottom: 3px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transition: border-color 180ms ease, color 180ms ease;
}

#content .page-hero .text-link {
  margin: 8px 0 0;
}

#content .page-hero .conference-back-link:hover,
#content .page-hero .resource-back-link:hover,
#content .page-hero .text-link:hover {
  border-bottom-color: var(--kc-yellow);
}

#content .partners-hero.page-hero .text-link {
  display: flex;
  width: max-content;
  margin: 0 0 26px;
}

/* Status / type labels next to the back link. */
#content .page-hero .conference-status,
#content .page-hero .resource-type,
#content .page-hero .resource-audience {
  display: inline-flex;
  margin: 0 0 0 12px;
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 200, 61, 0.18);
  color: var(--kc-yellow);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#content .page-hero .resource-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

#content .page-hero .resource-labels > span {
  margin: 0;
}

/* Primary action: the homepage's white pill. */
#content .page-hero .button-primary {
  margin-top: 10px;
  border: 0;
  background: #fff;
  color: var(--kc-ink);
  box-shadow: 0 16px 36px rgba(6, 12, 26, 0.28);
}

#content .page-hero .button-primary:hover {
  background: var(--kc-yellow);
  color: var(--kc-ink);
  transform: translateY(-2px);
}

#content .conference-listing-hero .conference-page-header,
#content .resources-hero .resources-header {
  margin-bottom: 0;
}

/* Entrance: same easing and stagger language as the homepage hero.
   Only runs when the visitor has not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  #content .page-hero h1,
  #content .page-hero .section-kicker,
  #content .page-hero .eyebrow,
  #content .page-hero p,
  #content .page-hero .cms-body,
  #content .page-hero .button,
  #content .page-hero .text-link,
  #content .page-hero .conference-back-link,
  #content .page-hero .resource-back-link {
    animation: kc-fade-up 640ms var(--kc-ease-reveal) both;
  }

  #content .page-hero h1 { animation-delay: 90ms; }
  #content .page-hero p,
  #content .page-hero .cms-body { animation-delay: 180ms; }
  #content .page-hero .button,
  #content .page-hero .text-link { animation-delay: 260ms; }
}

@media (max-width: 700px) {
  #content .page-hero {
    padding-top: calc(var(--kc-header-space) + 40px);
    padding-bottom: 56px;
  }

  #content .page-hero::after {
    top: calc(var(--kc-header-space) + 18px);
    right: -28px;
    width: 88px;
    border-width: 12px;
    opacity: 0.55;
  }

  #content .page-hero h1 {
    max-width: none;
  }
}


/* =========================================================
   Glass navigation over dark heroes

   While the page sits at the top of a dark hero (homepage photo or
   an inner page-hero) the nav pill goes translucent so the image
   and colour read through it. Once scrolled it returns to the solid
   white pill. The mobile drop-down panel keeps its own white surface,
   so link colours only flip on the desktop bar.
   ========================================================= */

.nav-inner {
  transition: background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

body:has(.home-redesign, .page-hero) .site-header:not(.is-scrolled) .nav-inner {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

body:has(.home-redesign, .page-hero) .site-header:not(.is-scrolled) .site-brand-name {
  color: #fff;
}

body:has(.home-redesign, .page-hero) .site-header:not(.is-scrolled) .mobile-nav-toggle {
  background: rgba(255, 255, 255, 0.14);
}

body:has(.home-redesign, .page-hero) .site-header:not(.is-scrolled) .mobile-nav-toggle span {
  background: #fff;
}

@media (min-width: 1121px) {
  body:has(.home-redesign, .page-hero) .site-header:not(.is-scrolled) .main-nav > a,
  body:has(.home-redesign, .page-hero) .site-header:not(.is-scrolled) .nav-more-toggle {
    color: rgba(255, 255, 255, 0.92);
  }

  body:has(.home-redesign, .page-hero) .site-header:not(.is-scrolled) .main-nav > a:hover,
  body:has(.home-redesign, .page-hero) .site-header:not(.is-scrolled) .main-nav > a:focus-visible,
  body:has(.home-redesign, .page-hero) .site-header:not(.is-scrolled) .nav-more-toggle:hover,
  body:has(.home-redesign, .page-hero) .site-header:not(.is-scrolled) .nav-more-toggle:focus-visible,
  body:has(.home-redesign, .page-hero) .site-header:not(.is-scrolled) .nav-more-toggle[aria-expanded="true"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
  }

  body:has(.home-redesign, .page-hero) .site-header:not(.is-scrolled) .main-nav > a.active,
  body:has(.home-redesign, .page-hero) .site-header:not(.is-scrolled) .nav-more-toggle.active {
    color: var(--kc-ink);
    background: var(--kc-yellow);
  }
}


/* =========================================================
   Homepage hero: let the photo through

   The speaker stands left of centre in the photo, right behind the
   headline. A lighter overlay plus slightly translucent copy keeps
   the text readable while the presenter stays visible underneath.
   ========================================================= */

.home-hero-overlay {
  background:
    linear-gradient(90deg, rgba(14, 24, 44, 0.82) 0%, rgba(14, 24, 44, 0.6) 30%, rgba(14, 24, 44, 0.28) 56%, rgba(14, 24, 44, 0.04) 84%),
    linear-gradient(180deg, rgba(14, 24, 44, 0.5) 0%, rgba(14, 24, 44, 0) 22%, rgba(14, 24, 44, 0) 62%, rgba(14, 24, 44, 0.55) 100%);
}

.home-redesign .home-hero-title {
  color: #fff;
  font-size: clamp(3rem, 1.2rem + 5.6vw, 6.4rem);
  /* Tight contact shadow for edge definition plus a wide soft glow, so
     the headline lifts off the busy photo without looking embossed. */
  text-shadow: 0 2px 4px rgba(6, 12, 26, 0.45), 0 10px 36px rgba(6, 12, 26, 0.5);
}

.home-hero-word--accent {
  color: var(--kc-yellow);
}

.home-hero-educator-link {
  text-shadow: 0 1px 10px rgba(6, 12, 26, 0.6);
}

.home-hero-intro {
  max-width: 500px;
  color: rgba(255, 255, 255, 0.84);
  text-shadow: 0 1px 12px rgba(6, 12, 26, 0.55);
}

@media (max-width: 700px) {
  .home-hero-overlay {
    background: linear-gradient(180deg, rgba(14, 24, 44, 0.55) 0%, rgba(14, 24, 44, 0.5) 45%, rgba(14, 24, 44, 0.82) 100%);
  }
}


/* =========================================================
   Heading baseline

   Headings without their own weight fell back to 700 with default
   tracking, which read as a different typeface next to the 800/900
   display titles. Class rules that set weight or tracking still win.
   ========================================================= */

h1,
h2,
h3,
h4 {
  font-weight: 800;
  letter-spacing: -0.015em;
}


/* =========================================================
   Homepage section rhythm

   The alternating #f4f7fb canvas was too close to white to read as a
   change, so the page felt like one long white sheet. Pathways becomes
   a full-bleed navy band (echoing the hero and footer) and the
   projects band takes a soft lavender tint from the brand purple.
   ========================================================= */

.home-redesign .home-pathways {
  background: #18233a;
}

.home-redesign .home-pathways .section-kicker {
  color: var(--kc-yellow);
}

.home-redesign .home-pathways .home-section-heading h2 {
  color: #fff;
}

.home-redesign .home-pathways .home-section-heading > p {
  color: rgba(255, 255, 255, 0.72);
}

/* The mascot card was navy-on-white; on the navy band it becomes a
   glass panel so it still reads as its own tile. */
.home-redesign .home-pathways .pathway-visual {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.home-redesign .home-projects {
  background: #f3f0fb;
}

/* =========================================================
   BASIC PAGE TEMPLATE STYLES
   ========================================================= */

.basic-page-content {
  max-width: 820px;
  margin: 0 auto;
}

.basic-page-body {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #3e485f;
}

.basic-page-body h2,
.basic-page-body h3,
.basic-page-body h4 {
  margin-top: 1.8em;
  margin-bottom: 0.6em;
}

.basic-page-body img {
  width: 100%;
  height: auto;
  margin: 1.5rem 0;
  border-radius: 16px;
}

.basic-page-body iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 1.5rem 0;
  border: 0;
  border-radius: 16px;
}

.basic-page-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--kc-border);
}

.basic-page-gallery-item {
  margin: 0;
}

.basic-page-gallery-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(23, 50, 77, 0.08);
}

.basic-page-gallery-item figcaption {
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--kc-muted);
}

/* Repeater block spacing */
.page-blocks .block-item + .block-item {
  margin-top: 36px;
}

/* =========================================================
   CUSTOM PAGE TEMPLATE - VIDEO EMBED FIX
   Scoped specifically to .custom-page-content
   ========================================================= */

/* Outer block spacing for custom page only */
.custom-page-content .block-video {
  width: 100%;
  margin: 2rem 0;
}

/* 16:9 container restricted to custom page layout */
.custom-page-content .block-video .video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--kc-navy, #17324d);
  box-shadow: 0 12px 32px rgba(23, 50, 77, 0.12);
}

/* Embed sizing targeting only inside custom page container */
.custom-page-content .block-video .video-container iframe,
.custom-page-content .block-video .video-container object,
.custom-page-content .block-video .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  border: 0;
  object-fit: contain;
}