/* ============================================================
   Echo — Core & Responsive Styles
   ============================================================ */

:root {
  --echo-orange: #F49B31;
  --echo-orange-light: #FFC37B;
  --echo-cream: #FEF5EA;
  --echo-white: #FFFFFF;
  --echo-black: #000000;

  --font-display: 'Poppins', sans-serif;
  --font-ui: 'Inter', sans-serif;
  --font-hand: 'Caveat', cursive;
}

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

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

body {
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background-color: var(--echo-cream);
}

html {
  scroll-behavior: smooth;
}

/* ============================================================
   Navigation
   ============================================================ */
.navbar {
  position: sticky;
  top: 24px;
  z-index: 1000; /* Keeps the floating nav above every content section (sections use z 100–102) */
  width: 100%;
  background: transparent;
}

.navbar__inner {
  width: min(1064px, calc(100% - 32px));
  height: 60px;
  align-items: center;
  margin: 0 auto;
  padding: 6.5px 12px 6.5px 16px;
  border: 1px solid rgba(36, 36, 36, 0.12);
  border-radius: 999px;
  background-color: var(--echo-white);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 0 0 1px #e9ebf1 inset;
}

.navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  flex-shrink: 0;
}

.navbar__logo-mark {
  height: 28px;
  display: inline-flex;
  width: 28px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.navbar__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.navbar__brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--echo-orange-light);
  white-space: nowrap;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  justify-content: center;
}

.navbar__link,
.navbar__overlay-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding-inline: 6px;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.09px;
  line-height: 23.8px;
  color: #060b13;
  white-space: nowrap;
}

.navbar__link:hover,
.navbar__overlay-link:hover {
  color: var(--echo-orange);
}

.navbar__link[aria-current="page"],
.navbar__overlay-link[aria-current="page"] {
  color: var(--echo-orange);
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.navbar__waitlist,
.navbar__overlay-waitlist {
  border: 0;
  border-radius: 30px;
  background: var(--echo-orange);
  color: var(--echo-white);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.18px;
  padding-inline: 20px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  line-height: 19.2px;
}

.navbar__hamburger {
  display: none;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.navbar__hamburger-icon {
  display: block;
  width: 20px;
  height: 14px;
  object-fit: contain;
}

.navbar__overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 100;
}

.navbar__overlay-panel {
  position: relative;
  width: min(520px, 50vw);
  min-width: 420px;
  max-width: 100%;
  height: 100%;
  margin-left: auto;
  padding: max(1.25rem, env(safe-area-inset-top)) 1.5rem 1.5rem;
  background-color: var(--echo-cream);
  box-shadow: -12px 0 32px rgba(126, 79, 22, 0.12);
  transform: translateX(24px);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
}

.navbar__overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.navbar__overlay.is-open .navbar__overlay-panel {
  transform: translateX(0);
}

.navbar__close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: 1rem;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.navbar__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: #111;
  border-radius: 1px;
}

.navbar__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.navbar__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.navbar__drawer-header {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(244, 155, 49, 0.28);
}

.navbar__drawer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--echo-orange-light);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.navbar__drawer-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.6875rem;
}

.navbar__drawer-logo-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.navbar__overlay-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-top: 1.5rem;
}

.navbar__overlay-link {
  width: 100%;
  justify-content: flex-start;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 500;
  padding: 0.9rem 0.75rem;
  border-bottom: 1px solid rgba(244, 155, 49, 0.24);
  color: #060b13;
  transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease;
}

.navbar__overlay-link:hover,
.navbar__overlay-link:focus-visible {
  padding-left: 1rem;
  color: var(--echo-orange);
  background-color: rgba(255, 195, 123, 0.2);
  outline: none;
}

.navbar__overlay-waitlist {
  margin-top: auto;
  width: 100%;
  min-width: 0;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(126, 79, 22, 0.16);
}

@media (max-width: 1090px) {
  .navbar__links { display: none; }
  .navbar__hamburger { display: flex; }
  .navbar__inner { height: 60px; }
}

@media (max-width: 639px) {
  .navbar__overlay-panel {
    width: 100vw;
    min-width: 0;
    padding-inline: 1.25rem;
  }

  .navbar__overlay-waitlist {
    width: 100%;
    min-width: 0;
    border-radius: 10px;
  }
}

@media (max-width: 768px) {
  .navbar { top: 12px; }
  .navbar__inner { width: calc(100% - 24px); height: 48px; padding: 4px 10px; }
  .navbar__logo-mark { width: 22px; height: 22px; }
  .navbar__brand-text { font-size: 20px; }
  .navbar__waitlist { height: 36px; font-size: 13px; padding-inline: 14px; }
}

/* ============================================================
   Hero Section
   ============================================================ */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(2rem, 5vw, 4rem);
  padding-inline: clamp(1rem, 4vw, 3rem);
  background-color: var(--echo-cream);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
  width: min(1050px, 100%);
  margin-top: clamp(4.5rem, 8vw, 7rem);
  margin-inline: auto;
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 4.5vw, 4.5rem);
  line-height: 1.18;
  text-align: center;
  color: var(--echo-orange);
  max-width: min(92%, 1050px);
}

.hero__subtext {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.45rem, 1.5vw, 1rem);
  line-height: 1.4;
  text-align: center;
  color: var(--echo-orange);
  max-width: min(67%, 579px);
}

.hero__cta {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: min(94%, 40rem);
}

.hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0%;
  min-width: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(0.50rem, 2.1vw, 1rem);
  line-height: 1.2;
  letter-spacing: -0.0113em;
  text-align: center;
  white-space: nowrap;
  border-radius: clamp(12px, 2vw, 20px);
  border: 1px solid var(--echo-orange);
  padding-inline: clamp(0.6rem, 2.4vw, 1.875rem);
  height: clamp(34px, 6vw, 47px);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.hero__button:focus-visible {
  outline: 3px solid var(--echo-orange-light);
  outline-offset: 2px;
}

.hero__button:active { transform: translateY(1px); }
.hero__button--primary { background-color: var(--echo-orange); color: var(--echo-white); }
.hero__button--primary:hover { background-color: #e08a1f; }
.hero__button--secondary { background-color: var(--echo-cream); color: var(--echo-orange); }
.hero__button--secondary:hover { background-color: #fbe7cd; }

.hero__visual {
  position: relative;
  width: min(1121px, 100%);
  margin-top: clamp(2rem, 6vw, 4rem);
  margin-inline: auto;
}

.split-view {
  position: relative;
  width: 100%;
  aspect-ratio: 1121 / 768;
  overflow: hidden;
  border-radius: 20px;
  -webkit-user-select: none;
  user-select: none;
}

.split-view__image { display: block; width: 100%; height: 100%; object-fit: contain; }
.split-view__panel--leader { position: absolute; inset: 0; overflow: hidden; }
.split-view__panel--leader .split-view__image { object-fit: contain; }

.split-view__panel--student {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}

.split-view__panel--student .split-view__image { object-fit: contain; }

.split-view__slider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 7vw, 82px);
  height: clamp(40px, 7vw, 82px);
  cursor: ew-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.split-view__slider-icon { display: block; width: 100%; height: 100%; }

.hero__drag-hint {
  position: absolute;
  left: calc(100% - 1.125rem);
  top: -16%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.hero__drag-hint-text {
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.5rem;
  letter-spacing: -0.0391em;
  text-align: center;
  color: var(--echo-orange);
  white-space: nowrap;
  width: 11.9375rem;
}

.hero__drag-hint-arrow { display: block; width: 7.0544rem; height: 11.4975rem; transform: none; }

@media (max-width: 1500px) {
  .hero__drag-hint {
    position: relative;
    left: auto;
    top: auto;
    flex-direction: row;
    align-items: right;
    justify-content: right;
    gap: clamp(1rem, 3vw, 2rem);
    margin-top: clamp(0.75rem, 2vw, 1.5rem);
    width: 100%;
  }

  .hero__drag-hint-text {
    order: 2;
    width: auto;
    max-width: 16rem;
    font-size: clamp(1.1rem, 2.6vw, 1.75rem);
    line-height: 1.25;
    text-align: left;
  }

  .hero__drag-hint-arrow {
    order: 1;
    width: clamp(2.5rem, 5vw, 4.5rem);
    height: auto;
    transform: rotate(90deg);
  }
}

/* ============================================================
   Problem Section
   ============================================================ */
.problem {
  position: relative;
  width: 100%;
  background-color: #000000;
  color: #ffffff;
  overflow-x: clip;
}

.problem__content {
  --problem-pre-sticky-offset: clamp(14rem, 25vh, 22rem);
  position: relative;
  width: min(100%, 1440px);
  aspect-ratio: 1440 / 6000;
  padding-top: var(--problem-pre-sticky-offset);
  margin: 0 auto;
}

.problem__heading-shell {
  position: sticky;
  top: 50vh;
  z-index: 5;
  width: min(100%, 1440px);
  margin: 0 auto;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.25s step-after;
}

.problem__eyebrow {
  margin: 0 auto 0.5rem;
  font-family: var(--font-ui);
  font-size: clamp(0.25rem, 0.85vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
}

.problem__heading {
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(0.5rem, 2.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  text-align: center;
  white-space: normal;
  padding-inline: 1rem;
}

.problem__bubbles { position: absolute; inset: 0; z-index: 6; pointer-events: none; }

.problem__bubble {
  position: absolute;
  display: block;
  height: auto;
  aspect-ratio: 566 / 282;
  object-fit: contain;
  transform-origin: center center;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.28));
}

/* ============================================================
   Problem Continuation
   ============================================================ */
.problem-continuation {
  position: relative;
  width: 100%;
  margin-top: -1px;
  background-color: #000000;
  color: #ffffff;
  overflow: hidden;
}

.problem-continuation__content {
  position: relative;
  width: min(100%, 1440px);
  aspect-ratio: 1440 / 2164;
  margin: 0 auto;
}

.problem-continuation__bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 4; }

.problem-continuation__bubble {
  position: absolute;
  display: block;
  height: auto;
  object-fit: contain;
  aspect-ratio: 566 / 282;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.3));
}

.problem-continuation__message {
  position: absolute;
  left: 50%;
  top: 21.1182994455%;
  transform: translateX(-50%);
  width: min(65.5%, 49rem);
  max-width: 49rem;
  font-size: clamp(0.5rem, 2.4vw, 2.2rem);
  z-index: 22;
  padding: 0;
  text-align: center;
}

.problem-continuation__headline {
  font-family: var(--font-display);
  font-size: inherit;
  font-weight: 700;
  line-height: 1.08;
  color: #ffffff;
}

.problem-continuation__headline-line { display: block; white-space: normal; }

.problem-continuation__highlight-wrap {
  display: inline-block;
  position: relative;
  margin-inline: 0.15em;
}

.problem-continuation__highlight { position: relative; z-index: 1; color: #ffffff; }

.problem-continuation__highlight-wrap::before {
  content: '';
  position: absolute;
  left: -0.42em;
  right: -0.42em;
  top: 50%;
  transform: translateY(-52%);
  height: 1.42em;
  background: url('assets/The Problem/highlight.svg') center / 100% 100% no-repeat;
  z-index: 0;
}

.problem-continuation__hook {
  position: absolute;
  left: 41.5%;
  top: 72.2%;
  width: 56%;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(0.42rem, 2.25vw, 3.05rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: #ffffff;
  z-index: 22;
}

.problem-continuation__hook-line { display: block; white-space: nowrap; }
.problem-continuation__hook-highlight { color: var(--echo-orange); }
.problem-continuation__funnel { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.problem-continuation__funnel-bubbles { position: absolute; inset: 0; }

.problem-continuation__funnel-bubble {
  position: absolute;
  display: block;
  height: auto;
  object-fit: contain;
  transition: opacity 0.2s linear;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
}

.problem-continuation__footer { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.problem-continuation__logo { position: absolute; width: 11.8055555556%; height: auto; left: 21.0416666667%; top: 79.8521256932%; z-index: 2; }

.problem-continuation__wave {
  position: absolute;
  left: 32.5%;
  top: 79.8983364140%;
  width: 135%;
  max-width: none;
  height: auto;
  object-fit: cover;
  object-position: left center;
  z-index: 1;
}

/* ============================================================
   Solution Section
   ============================================================ */
.solution {
  --solution-primary: #EFA13D;
  --solution-secondary: #F7C174;
  --solution-copy: #1f1f1f;
  --solution-card: #ffffff;
  width: 100%;
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 3.5vw, 2.75rem) clamp(3.75rem, 8vw, 7rem);
  background: var(--echo-cream);
  font-family: var(--font-display);
}

.solution__container { width: min(1368px, 100%); margin: 0 auto; }

.solution__desktop {
  display: grid;
  grid-template-columns: minmax(320px, 35%) minmax(0, 65%);
  column-gap: clamp(2.5rem, 4vw, 5rem);
  align-items: stretch;
}

.solution__left {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: clamp(0.35rem, 0.9vw, 0.8rem);
  min-width: 0;
}

.solution__eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(0.7rem, 0.85vw, 0.85rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--solution-primary);
  margin-bottom: clamp(0.4rem, 0.8vw, 0.75rem);
}

.solution__heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.3rem, 4.1vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--solution-primary);
}

.solution__heading-light { color: var(--echo-orange-light); }
.solution__heading-line { display: block; white-space: nowrap; }

.solution__tabs {
  display: flex;
  flex-direction: column;
  margin-top: clamp(2rem, 3.5vw, 4rem);
  min-width: 0;
}

.solution__tab-item {
  border-top: 1px solid rgba(227, 172, 105, 0.35);
  padding: clamp(0.65rem, 0.9vw, 0.85rem) 0;
  min-width: 0;
}

.solution__tab-item:first-child { border-top: 0; }

.solution__tab-button {
  width: 100%;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: clamp(0.5rem, 0.8vw, 0.85rem);
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.solution__tab-icon {
  width: clamp(1.8rem, 2.3vw, 2.6rem);
  height: clamp(1.8rem, 2.3vw, 2.6rem);
  flex-shrink: 0;
}

.solution__tab-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  min-width: 0;
}

.solution__tab-label-primary { color: var(--solution-primary); white-space: nowrap; }
.solution__tab-label-secondary { color: var(--solution-secondary); white-space: nowrap; }

.solution__tab-copy {
  display: none;
  margin-top: 0.45rem;
  margin-left: clamp(2.2rem, 3.1vw, 3.5rem);
  max-width: 100%;
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 0.9vw, 1.05rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--solution-copy);
  white-space: normal;
}

.solution__tab-item.is-active .solution__tab-copy { display: block; }
.solution__tab-item.is-active { border-color: rgba(227, 172, 105, 0.45); }

.solution__right {
  height: 100%;
  display: flex;
  align-items: center;
  min-height: 0;
}

.solution__player-frame {
  position: relative;
  width: 100%;
  /* Fallback so the stage keeps real height even before animation metadata
     arrives — never collapse to 0 (the JS refines this per-animation). */
  aspect-ratio: 4 / 3;
  border-radius: clamp(20px, 2.3vw, 28px);
  overflow: hidden;
  background: #f6ead8;
  box-shadow: 0 12px 40px rgba(126, 79, 22, 0.12);
}

.solution__player-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.solution__player-canvas,
.solution__player-stage > canvas,
.solution__player-stage > svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain !important;
}

.solution__marker-badge {
  position: absolute;
  right: clamp(0.85rem, 1.55vw, 1.45rem);
  bottom: clamp(0.8rem, 1.45vw, 1.35rem);
  width: clamp(3.8rem, 6vw, 5.2rem);
  height: auto;
  z-index: 4;
}

.solution__mobile { display: none; }

.solution-card {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(126, 79, 22, 0.1);
  background: var(--solution-card);
}

.solution-card__top {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.solution-card__header { display: flex; align-items: center; gap: 0.55rem; }

.solution-card__icon {
  width: clamp(1.4rem, 5vw, 2rem);
  height: clamp(1.4rem, 5vw, 2rem);
  flex-shrink: 0;
}

.solution-card__title {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 5vw, 1.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.solution-card__title-primary { color: var(--solution-primary); }
.solution-card__title-secondary { color: var(--solution-secondary); }

.solution-card__copy {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.75rem, 3.2vw, 1rem);
  line-height: 1.3;
  color: var(--solution-copy);
  margin-top: 0.4rem;
  white-space: normal;
  display: block;
}

.solution-card__player-wrap {
  position: relative;
  width: 100%;
  /* Fallback ratio so the stage never collapses to 0-height. */
  aspect-ratio: 4 / 3;
  background: #f6ead8;
  overflow: hidden;
}

.solution-card__player-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.solution-card__player-canvas,
.solution-card__player-stage > canvas,
.solution-card__player-stage > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}

.solution-card__marker-badge {
  position: absolute;
  right: clamp(0.7rem, 2.8vw, 1rem);
  bottom: clamp(0.7rem, 2.8vw, 1rem);
  width: clamp(3.2rem, 10vw, 4.5rem);
  height: auto;
  z-index: 4;
}

/* ============================================================
   Track Section (Desktop Grid & Perfect Alignment)
   ============================================================ */
.track {
  position: relative;
  width: 100%;
  background: var(--echo-cream);
  overflow: clip;
}

.track__desktop { display: block; }

.track__desktop-canvas {
  position: relative;
  width: min(100%, 1440px);
  aspect-ratio: 1440 / 2164;
  margin: 0 auto;
  padding-top: 260px;
}

.track__heading {
  z-index: 5;
  text-align: center;
  pointer-events: none;
}

.track__heading--desktop {
  position: sticky;
  top: 45vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(31%, 450px);
  margin: 0 auto;
  z-index: 5;
}

.track__heading h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.45vw, 4rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--echo-orange);
}

.track__heading p {
  margin-top: 0.15rem;
  font-family: var(--font-display);
  font-size: clamp(0.55rem, 1.12vw, 1rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--echo-black);
}

.track__column {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.track__column--ping { left: 2%; width: 32%; }
.track__column--wave { right: 2%; width: 34%; }

.track__status-callout {
  position: absolute;
  top: 15.94%;
  width: 100%;
  height: 10.05%;
}

.track__status-label {
  position: absolute;
  top: 0;
  font-family: var(--font-hand);
  font-size: clamp(1.3rem, 3.34vw, 3rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--echo-orange);
  white-space: nowrap;
}

.track__status-arrow {
  position: absolute;
  top: 27.54%;
  width: 23.65%;
  height: auto;
  display: block;
}

.track__column--ping .track__status-label { left: 3.3%; }
.track__column--ping .track__status-arrow { left: 0.47%; }
.track__column--wave .track__status-label { right: 10.1%; }
.track__column--wave .track__status-arrow {
  right: -1.9%;
  width: 18.3%;
  height: 68.3%;
}

.track__column--wave .track__status-arrow {
  transform: scaleX(-1);
}

.track__timeline {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.track__asset,
.track__connector {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  object-fit: contain;
}

/* Ping Timeline Asset Alignments */
.track__asset--open { top: 24.08%; width: 50%; }
.track__connector--open-top3 { top: 28.2%; width: 8.7%; }
.track__asset--top3 { top: 31.08%; width: 50%; }
.track__connector--top3-acknowledged { top: 35.35%; width: 10.8%; }
.track__asset--acknowledged { top: 39.66%; width: 87%; }
.track__connector--acknowledged-resolved { top: 45.37%; width: 20.5%; }
.track__asset--resolved { top: 90.62%; width: 61.5%; }

/* Wave Timeline Asset Alignments */
.track__asset--proposed { top: 24.08%; width: 60%; }
.track__connector--proposed-community { top: 28.2%; width: 9.1%; }
.track__asset--community { top: 31.08%; width: 88.6%; }
.track__connector--community-review { top: 35.35%; width: 12.3%; }
.track__asset--review { top: 49.77%; width: 81.7%; }
.track__connector--review-approved { top: 55.23%; width: 10.3%; }
.track__asset--approved { top: 59.47%; width: 65%; }
.track__connector--approved-progress { top: 64.34%; width: 10.7%; }
.track__asset--progress { top: 68.69%; width: 67.5%; }
.track__connector--progress-completed { top: 73.61%; width: 10.2%; }
.track__asset--completed { top: 78.16%; width: 67.5%; }

.track__mobile { display: none; }

/* ============================================================
   Track Section (Mobile Horizontal Flow)
   ============================================================ */
@media (max-width: 768px) {
  .hero { padding-bottom: 0.9rem; }
  .hero__content { margin-top: clamp(2.5rem, 6vw, 3.5rem); gap: clamp(16px, 3.2vw, 28px); }
  .hero__visual { margin-top: clamp(1rem, 3.5vw, 1.75rem); }

  .problem__content { --problem-pre-sticky-offset: clamp(4rem, 14vw, 5.5rem); }
  .problem-continuation__message { width: min(88%, 34rem); max-width: 34rem; }
  .problem-continuation__headline-line { white-space: normal; }

  .solution { padding-top: clamp(2.3rem, 6vw, 3rem); padding-inline: 0.72rem; padding-bottom: 3.5rem; }
  .solution__desktop { display: none; }
  .solution__mobile { display: grid; gap: 1.5rem; }
  .solution__container { display: flex; flex-direction: column; gap: 1rem; }
  .solution__mobile-intro { text-align: center; margin-bottom: 0.5rem; padding-inline: 0.5rem; }

  .solution__mobile-eyebrow {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: clamp(0.7rem, 2.8vw, 0.85rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--solution-primary);
    margin-bottom: 0.35rem;
  }

  .solution__mobile-heading {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 8vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--solution-primary);
    word-break: break-word;
  }

  .solution-card__title { font-size: clamp(1.2rem, 5.2vw, 1.8rem); }
  .solution-card__copy { font-size: clamp(0.75rem, 3.2vw, 0.95rem); line-height: 1.3; }

  .track__desktop, .track__heading--desktop { display: none; }

  .track__mobile {
    position: relative;
    display: block;
    height: 406px;
  }

  .track__mobile-scroller {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x pan-y;
    scroll-snap-type: x proximity;
    padding-left: 0;
    box-sizing: border-box;
  }

  .track__mobile-scroller::-webkit-scrollbar { display: none; }

  .track__mobile-canvas {
    position: relative;
    width: calc(2980px + clamp(16px, 5vw, 32px));
    height: 406px;
  }

  .track__mobile-flow {
    position: absolute;
    left: clamp(20px, 6vw, 40px);
    display: flex;
    align-items: center;
    gap: 16px;
    height: 132px;
    padding: 10px;
    white-space: nowrap;
    scroll-snap-align: start;
    scroll-margin-left: clamp(20px, 6vw, 40px);
  }

  .track__mobile-flow--ping { top: 0; }
  .track__mobile-flow--wave { top: 214px; }

  .track__mobile-flow > img {
    display: block;
    width: auto;
    height: 60px;
    flex: 0 0 auto;
    scroll-snap-align: center;
    object-fit: contain;
  }

  .track__mobile-callout {
    position: relative;
    width: 140px;
    min-width: 160px;
    height: 90px;
    flex: 0 0 140px;
  }

  .track__mobile-callout span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-family: var(--font-hand);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.15;
    text-align: center;
    color: var(--echo-orange);
  }

  .track__mobile-callout img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 45px;
    height: auto;
    transform: rotate(-33deg);
    transform-origin: center;
  }

  .track__mobile-flow > .track__mobile-connector {
    width: auto;
    height: auto;
    transform: none;
    flex: 0 0 auto;
  }

  .track__mobile-flow > .track__mobile-connector--long {
    height: 100px;
    width: auto;
  }

  .track__heading--mobile {
    position: static;
    top: 50%;
    display: block;
    width: min(333px, calc(100% - 60px));
    margin: -244px auto 0;
    transform: translateY(-50%);
  }

  .track__heading--mobile h2 { font-size: 25px; line-height: 32px; }
  .track__heading--mobile p { margin-top: 0; font-size: 10px; line-height: 1.25; }
}

@media (max-width: 640px) {
  .hero__content {
    margin-top: clamp(4rem, 15vw, 6rem);
    gap: clamp(28px, 8vw, 42px);
  }

  .hero__headline {
    max-width: min(96%, 25rem);
    font-size: clamp(1.6rem, 7.2vw, 2.5rem);
  }

  .hero__subtext {
    max-width: min(90%, 24rem);
    font-size: clamp(0.7rem, 3.1vw, 0.95rem);
  }

  .hero__cta {
    flex-direction: column;
    gap: 0.875rem;
    width: min(92%, 24rem);
  }

  .hero__button {
    width: 100%;
    flex: 0 0 auto;
    min-height: 3rem;
    height: auto;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    white-space: normal;
  }
}

/* ============================================================
   Track Tooltip Mascot
   ============================================================ */
.mascot-tooltip {
  --mascot-size: clamp(7.75rem, 21.48vw, 16.11rem);
  --mascot-text-size: clamp(1.35rem, 3.75vw, 2.8125rem);
  --mascot-label-width: clamp(1.75rem, 4.58vw, 3.4375rem);
  --mascot-composition-width: calc(var(--mascot-size) + var(--mascot-label-width));
  position: relative;
  width: 100%;
  min-height: calc(var(--mascot-size) + clamp(3rem, 8vw, 3.125rem));
  padding: clamp(2rem, 4.17vw, 3.125rem) 0 0;
  background: var(--echo-cream);
  overflow: hidden;
}

.mascot-tooltip__inner {
  position: relative;
  width: 100%;
  min-height: 0;
  position: absolute;
  inset: 0;
}

.mascot-tooltip__trigger {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  width: var(--mascot-composition-width);
  height: var(--mascot-size);
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.mascot-tooltip__hi {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--mascot-label-width);
  flex: 0 0 var(--mascot-label-width);
  font-family: var(--font-hand);
  font-size: var(--mascot-text-size);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--echo-orange);
}

.mascot-tooltip__mascot {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: var(--mascot-size);
  height: auto;
}
/* Idle "alive" pulse — only in the Hi state; stops automatically on reveal */
@keyframes mascot-hi-pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.03); }
}

.mascot-tooltip:not(.is-revealed) .mascot-tooltip__mascot--hi {
  transform-origin: 85% 100%;
  animation: mascot-hi-pulse 2.25s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .mascot-tooltip:not(.is-revealed) .mascot-tooltip__mascot--hi {
    animation: none;
  }
}

/* Small handwritten "psst, tap me" nudge near the mascot's hand */
.mascot-tooltip__nudge {
  position: absolute;
  top: calc(var(--mascot-text-size) * 1.25);
  left: calc(var(--mascot-label-width) * -0.35);
  font-family: var(--font-hand);
  font-size: calc(var(--mascot-text-size) * 0.45);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--echo-orange);
  white-space: nowrap;
  transform: rotate(-4deg);
}


.mascot-tooltip__mascot--message { display: none; }

.mascot-tooltip__message {
  position: absolute;
  right: var(--mascot-composition-width);
  top: 50%;
  transform: translateY(-50%);
  display: none;
  width: min(46.5vw, 34.5rem);
  margin: 0;
  color: var(--echo-orange);
}

.mascot-tooltip__message p {
  font-family: var(--font-hand);
  font-size: var(--mascot-text-size);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--echo-orange);
}

.mascot-tooltip__message strong { font-weight: 400; }

.mascot-tooltip.is-revealed .mascot-tooltip__mascot--hi { display: none; }
.mascot-tooltip.is-revealed .mascot-tooltip__hi { display: none; }
.mascot-tooltip.is-revealed .mascot-tooltip__nudge { display: none; }
.mascot-tooltip.is-revealed .mascot-tooltip__mascot--message { display: block; }
.mascot-tooltip.is-revealed .mascot-tooltip__message { display: block; }

/* ============================================================
   Testimonial Sections
   (1) Rukevwe Agoreyo · (2) Dr. Azubuike Ezenwoke
   (3) Dr. Mayowa Agboola — per updated Figma layouts
   Photo + quote cards on white, Poppins + amber token
   ============================================================ */
.testimonial {
  position: relative; /* anchors the edge-bleed photos */
  width: 100%;
  background: var(--echo-white);
  box-sizing: border-box;
}

.testimonial__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 26rem;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: clamp(3.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
}

/* Rukevwe — content sits right of the left-bleeding image */
#testimonial-rukevwe .testimonial__inner {
  padding-left: clamp(21rem, 31vw, 27rem);
}

/* Ezenwoke — centered content clear of the right-bleeding portrait */
#executive-statement .testimonial__inner {
  padding-right: clamp(24rem, 32vw, 30rem);
  min-height: 33rem;
}

/* Agboola — left content clear of the right-bleeding landscape */
#partner-endorsement .testimonial__inner {
  padding-right: clamp(22rem, 33vw, 30rem);
}

.testimonial__photo {
  position: absolute;
  bottom: 0; /* flush against the bottom section divider */
  display: block;
  width: clamp(12rem, 26vw, 21.375rem); /* 342px desktop */
  aspect-ratio: 1 / 1;
  object-fit: cover; /* raw, borderless image render */
}
#testimonial-rukevwe .testimonial__photo { left: 0; }
#executive-statement .testimonial__photo,
#partner-endorsement .testimonial__photo { right: 0; }

.testimonial--portrait .testimonial__photo {
  width: clamp(24rem, 30vw, 34rem); /* larger hero portrait */
  aspect-ratio: 413 / 500;
}

.testimonial--landscape .testimonial__photo {
  width: clamp(11.5rem, 29vw, 28.125rem); /* 450px desktop */
  aspect-ratio: 450 / 390;
  object-position: 50% 10%; /* keep the full head/hairline in frame */
}

.testimonial__content {
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1vw, 0.875rem); /* 14px desktop */
}

.testimonial__quote-mark {
  display: block;
  width: clamp(1.75rem, 2.2vw, 2.25rem);
  height: auto;
}
/* Dr. Azu — quote marks scaled in step with the large statement */
#executive-statement .testimonial__quote-mark {
  width: clamp(1.5rem, 2.6vw, 2.4rem);
}
/* Closing mark flips (rotates) to face inward as a "99" */
.testimonial__quote-mark--close {
  transform: rotate(180deg);
}

.testimonial__quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 3.1vw, 2.8rem); /* 22 -> 44.8px */
  line-height: 1.28;
  letter-spacing: -0.0279em;
  color: #060b13;
  max-width: 34ch;
}

.testimonial__quote-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 0.7vw, 0.625rem); /* 10px desktop */
}

.testimonial__attribution {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 0.7vw, 0.625rem); /* 10px desktop */
}

.testimonial__name {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 2rem); /* 16 -> 32px */
  line-height: 1.3;
  letter-spacing: -0.0391em;
  color: var(--echo-orange);
  text-decoration: none;
}

.testimonial__name:hover {
  color: #e08a1f;
}

.testimonial__external {
  display: block;
  width: clamp(0.7rem, 1.5vw, 1.4rem); /* 11.25 -> 22.5px */
  height: auto;
}

.testimonial__role {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.75rem, 1.7vw, 1.5rem); /* 12 -> 24px */
  line-height: 1.35;
  letter-spacing: -0.0521em;
  color: #838383;
}

/* Centered variant (Dr. Azubuike Ezenwoke) */
.testimonial--center { text-align: center; }
.testimonial--center .testimonial__content,
.testimonial--center .testimonial__attribution { align-items: center; }
.testimonial--center .testimonial__quote {
  font-size: clamp(2rem, 4.4vw, 4rem); /* 32 -> 64px */
  line-height: 1.1;
  letter-spacing: -0.0195em;
  margin: 0;
  max-width: none;
}
.testimonial--center .testimonial__name { align-self: center; }

/* Dr. Azu — the "We need it." headline always stays on a single line */
#executive-statement .testimonial__quote {
  white-space: nowrap !important;
  word-break: keep-all;
}

/* Responsive — Tablet */
@media (max-width: 900px) {
  .testimonial__inner {
    padding: clamp(3rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2rem) clamp(2.25rem, 4vw, 3rem);
  }
  #testimonial-rukevwe .testimonial__inner { padding-left: clamp(17rem, 28vw, 22rem); }
  #executive-statement .testimonial__inner {
    padding-right: clamp(22rem, 55vw, 26rem);
    min-height: 32rem;
  }
  #partner-endorsement .testimonial__inner { padding-right: clamp(18rem, 29vw, 23rem); }

  .testimonial__photo { width: clamp(9rem, 26vw, 13rem); }
  .testimonial--landscape .testimonial__photo { width: clamp(10rem, 30vw, 14rem); }
  .testimonial--portrait .testimonial__photo { width: clamp(22rem, 55vw, 26rem); }
}

/* Responsive — Mobile (matches 393px Figma layouts) */
@media (max-width: 640px) {
  .testimonial__inner {
    min-height: 16rem;
    padding: clamp(2.25rem, 9vw, 3rem) clamp(1.25rem, 5vw, 1.75rem) clamp(2rem, 6vw, 2.5rem);
  }
  /* Clear each edge-bleeding photo so text never overlaps it */
  #testimonial-rukevwe .testimonial__inner { padding-left: clamp(7.5rem, 46vw, 11rem); }
  #executive-statement .testimonial__inner {
    padding-right: clamp(9rem, 42vw, 13rem);
    min-height: 24rem;
  }
  #partner-endorsement .testimonial__inner { padding-right: clamp(7rem, 50vw, 10.5rem); }

  /* Dr. Agboola stays anchored to the RIGHT edge on mobile */
  #testimonial-rukevwe .testimonial__photo { width: clamp(6.5rem, 42vw, 10.7rem); }
  #executive-statement .testimonial__photo { width: clamp(14rem, 56vw, 18rem); }
  #partner-endorsement .testimonial__photo { width: clamp(6rem, 46vw, 10rem); }

  .testimonial__quote {
    font-size: clamp(1.1rem, 5.6vw, 1.375rem); /* 22px */
    line-height: 1.3;
  }
  .testimonial--center .testimonial__quote {
    font-size: clamp(1.5rem, 8vw, 2rem); /* 32px */
  }
  .testimonial__name { font-size: clamp(0.9rem, 4vw, 1rem); } /* 16px */
  .testimonial__role { font-size: clamp(0.7rem, 3vw, 0.75rem); } /* 12px */
  .testimonial__quote-mark { width: clamp(1.1rem, 5vw, 1.5rem); }
}



/* ============================================================
   For Leaders Section
   ============================================================ */
.leaders {
  --leaders-primary: #f49b31;
  --leaders-copy: #000000;
  --leaders-card: #ffffff;
  width: 100%;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3.75rem, 8vw, 7rem);
  background: #f49b31;
  color: #ffffff;
  font-family: var(--font-display);
  overflow: hidden;
}

.leaders__container { width: auto; margin: 0 auto; }

.leaders__eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(0.7rem, 0.85vw, 0.875rem);
  letter-spacing: 0.01em;
  color: #fef5ea;
  margin-bottom: clamp(0.4rem, 0.8vw, 0.75rem);
  padding-inline: clamp(1.25rem, 4.9vw, 4.375rem);
}

.leaders__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 4rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #ffffff;
  max-width: min(90%, 1300px);
  margin-bottom: clamp(2rem, 3.5vw, 3.5rem);
  padding-inline: clamp(1.25rem, 4.9vw, 4.375rem);
}

.leaders__scroller {
  width: 100%;
  overflow-x: visible;
  overflow-y: hidden;
  cursor: grab;
  padding-block: clamp(0.75rem, 2vw, 1.5rem);
  margin-block: clamp(-0.75rem, -2vw, -1.5rem);
}

.leaders__scroller::-webkit-scrollbar { display: none; }
.leaders__scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.leaders__track {
  display: flex;
  gap: clamp(1.5rem, 2.75vw, 2.5rem);
  width: max-content;
  padding-inline: clamp(1.25rem, 4.9vw, 4.375rem);
}

.leaders-card {
  display: flex;
  flex-direction: column;
  width: clamp(550px, 45vw, 950px);
  flex: 0 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: var(--leaders-card);
  box-shadow: 0 14px 36px rgba(126, 79, 22, 0.1);
  scroll-snap-align: start;
}

.leaders-card__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
}

.leaders-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(0.9rem, 1.4vw, 1.4rem) clamp(1.25rem, 3.5vw, 3.5rem);
}

.leaders-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.1vw, 2.1rem);
  letter-spacing: -0.03em;
  color: var(--leaders-primary);
}

.leaders-card__copy {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  line-height: 1.5;
  color: var(--leaders-copy);
}

@media (max-width: 768px) {
  .leaders { padding: 2rem 0 3.5rem; }

  .leaders__eyebrow,
  .leaders__heading { padding-inline: clamp(1.25rem, 7.6vw, 1.875rem); }

  .leaders__heading {
    font-size: clamp(1.5rem, 6.5vw, 2rem);
    line-height: 1.4;
    max-width: 100%;
    margin-bottom: 1.8rem;
  }

  .leaders__scroller {
    overflow-x: visible;
    cursor: auto;
  }

  .leaders__track {
    flex-direction: column;
    width: 100%;
    padding-inline: clamp(1.25rem, 7.6vw, 1.875rem);
  }

  .leaders__track { gap: 1.25rem; }
  .leaders-card { width: 100%; border-radius: 10px; }
  .leaders-card__body { padding: 0.75rem 1.5rem 1.25rem; gap: 0.2rem; }
  .leaders-card__title { font-size: clamp(1rem, 4.4vw, 1.15rem); }
  .leaders-card__copy { font-size: clamp(0.6rem, 3vw, 0.9rem); }
}

/* ============================================================
   Why Us Section — Unified Stack Architecture
   ============================================================ */
.why-us {
  /* Layout Constants — Calibrated to global navigation bars */
  --why-us-nav-offset: calc(84px + 1rem); 
  --why-us-heading-height: 9rem;           
  --card-header-peek-height: 7.5rem;       
  --card-stack-gap: 1.25rem;
  --why-us-card-height: 37.5rem;
  --why-us-card-spacing: 25rem;

  width: 100%;
  background: var(--echo-cream);
  box-sizing: border-box;
  overflow: visible; /* Required for native browser position: sticky */
}

.why-us__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 5rem clamp(1.25rem, 5vw, 5rem) 5rem;
  box-sizing: border-box;
  overflow: visible;
}

.why-us__stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0;
  /* 
     YOUR FIX: Expanded runway to account for peek heights 
     so Card 4 can reach its destination perfectly before unpinning.
  */
  min-height: calc(var(--why-us-heading-height) + (var(--why-us-card-height) * 4) + (var(--card-header-peek-height) * 3));
}

/* Base Stacking Card Physics */
.why-us-card {
  --n: 0;
  position: sticky;
  width: 100%;
  height: var(--why-us-card-height);
  margin-bottom: var(--why-us-card-spacing);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  background: var(--echo-white);
  border: 5px solid var(--echo-orange);
  border-radius: 1.25rem;
  box-shadow: 0 14px 36px rgba(126, 79, 22, 0.12);
  padding: 2.5rem;
  box-sizing: border-box;
  overflow: hidden;
}

/* Card 0: Seamless Header Mask Layer */
.why-us-card--header-mask {
  position: sticky;
  top: var(--why-us-nav-offset);
  height: var(--why-us-heading-height);
  background: var(--echo-cream);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: calc(var(--why-us-card-spacing) + var(--card-header-peek-height) + var(--card-stack-gap) * 4); /* Retains space for the last card to complete its travel path */
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-us__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--echo-orange);
  text-align: center;
  margin: 0;
}

/* Sequential Desktop Matrix */
.why-us-card:nth-child(2) { 
  --n: 0; 
  z-index: 10; 
  margin-bottom: 0;
  top: calc(var(--why-us-nav-offset) + var(--why-us-heading-height) + var(--card-stack-gap));
}
.why-us-card:nth-child(3) { 
  --n: 1; 
  z-index: 20; 
  margin-bottom: 0;
  top: calc(var(--why-us-nav-offset) + var(--why-us-heading-height) + var(--card-stack-gap) + (var(--card-header-peek-height) * 1));
}
.why-us-card:nth-child(4) { 
  --n: 2; 
  z-index: 30; 
  margin-bottom: 0;
  top: calc(var(--why-us-nav-offset) + var(--why-us-heading-height) + var(--card-stack-gap) + (var(--card-header-peek-height) * 2));
}

/* Card 4 Terminal Release: Retains space so the browser can complete the travel path */
.why-us-card:nth-child(5) {
  --n: 3;
  z-index: 40;
  margin-bottom: 0; /* Let the parent container safely dictate the exit point */
  top: calc(var(--why-us-nav-offset) + var(--why-us-heading-height) + var(--card-stack-gap) + (var(--card-header-peek-height) * 3));
}

.why-us-card__header {
  display: flex;
  align-items: center;
  gap: 1.25rem; 
  width: 100%;
  height: calc(var(--card-header-peek-height) - 5rem);
  flex-shrink: 0;
}

.why-us-card__icon {
  flex: 0 0 auto;
  width: clamp(4.5rem, 9vw, 7.5rem); 
  height: clamp(4.5rem, 9vw, 7.5rem);
  object-fit: contain; 
}

.why-us-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4.7vw, 3.75rem); 
  line-height: 1.15;
  letter-spacing: -0.03em; 
  color: #454545;
}

.why-us-card__copy {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 2.8vw, 2.25rem); 
  line-height: 1.45;
  color: #7d7d7d;
}

/* ============================================================
   Why Us Responsive Mobile Viewport Implementation
   ============================================================ */
@media (max-width: 768px) {
  .why-us {
    --why-us-nav-offset: 72px; 
    --why-us-heading-height: 4rem;    
    --card-header-peek-height: 4.5rem; 
    --card-stack-gap: 1.25rem;
    --why-us-card-height: 20rem;       
    --why-us-card-spacing: 16rem; /* Enhanced spacing gives Card 4 a long, smooth travel path */
  }

  .why-us__container {
    padding: 2.5rem 1.875rem 4rem;
  }

  .why-us-card { 
    border-width: 3px; 
    border-radius: 0.875rem; 
    padding: 1.25rem; 
    gap: 1rem;
    height: var(--why-us-card-height);
    margin-bottom: 0;
  }

  .why-us-card--header-mask {
    height: var(--why-us-heading-height);
    margin-bottom: calc(var(--why-us-card-spacing) + var(--card-header-peek-height)); /* Retains space for the last card to complete its travel path */
  }

  .why-us__heading { 
    font-size: clamp(1.5rem, 6.5vw, 2.25rem); 
    height: 100%;
  }

  /* Calibrated Mobile Stacking Target Baselines */
  .why-us-card:nth-child(2) { 
    top: calc(var(--why-us-nav-offset) + var(--why-us-heading-height) + var(--card-stack-gap));
    margin-bottom: 0;
  }
  .why-us-card:nth-child(3) { 
    top: calc(var(--why-us-nav-offset) + var(--why-us-heading-height) + var(--card-stack-gap) + (var(--card-header-peek-height) * 1));
    margin-bottom: 0;
  }
  .why-us-card:nth-child(4) { 
    top: calc(var(--why-us-nav-offset) + var(--why-us-heading-height) + var(--card-stack-gap) + (var(--card-header-peek-height) * 2));
    margin-bottom: 0;
  }
  .why-us-card:nth-child(5) {
    margin-bottom: 0;
    top: calc(var(--why-us-nav-offset) + var(--why-us-heading-height) + var(--card-stack-gap) + (var(--card-header-peek-height) * 3));
  }

  .why-us__stack {
    padding-top: 0;
    /* 
       YOUR MOBILE FIX: Extends the rigid mobile canvas track identically 
       by the peek height factor to let Card 4 snap cleanly into position.
    */
    min-height: calc(var(--why-us-heading-height) + (var(--why-us-card-height) * 4) + (var(--card-header-peek-height) * 3));
  }

  .why-us-card__header {
    height: calc(var(--card-header-peek-height) - 2.5rem);
    gap: 0.75rem; 
  }

  .why-us-card__icon { 
    width: 2.5rem; 
    height: 2.5rem; 
  }

  .why-us-card__title { 
    font-size: clamp(1.2rem, 5vw, 1.5rem); 
  }

  .why-us-card__copy { 
    font-size: clamp(0.9rem, 3.8vw, 1.05rem); 
    line-height: 1.4;
  }
}

/* Keep the pinned card and its copy inside short browser viewports. */
@media (max-height: 700px) {
  .why-us {
    --why-us-nav-offset: 90px;
    --why-us-heading-height: 2rem;
    --card-header-peek-height: 3rem;
    --card-stack-gap: 0.5rem;
    --why-us-card-height: 15rem;
  }
}

@media (max-width: 1024px) and (max-height: 700px) {
  .why-us {
    --card-header-peek-height: 2.5rem;
    --why-us-card-height: 15rem;
  }
}

@media (max-width: 768px) and (max-height: 700px) {
  .why-us {
    --why-us-nav-offset: 68px;
  }
}

/* Give very narrow phones enough width and vertical rhythm for card copy. */
@media (max-width: 380px) {
  .why-us {
    --why-us-heading-height: 2.5rem;
  }

  .why-us__heading {
    height: auto;
    font-size: 1.35rem;
    line-height: 1.2;
  }

  .why-us-card {
    padding: 1rem;
    gap: 0.625rem;
  }

  .why-us-card__header {
    height: 2.25rem;
    gap: 0.5rem;
  }

  .why-us-card__icon {
    width: 2rem;
    height: 2rem;
  }

  .why-us-card__title {
    font-size: 0.95rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .why-us-card__copy {
    font-size: 0.8rem;
    line-height: 1.35;
  }
}



/* ============================================================
   Proof — "Proof, Not Promises" (follows Why Us)
   ============================================================ */
.proof {
  position: relative;
  z-index: 100; /* Sits above the Why Us sticky card stack */
  width: 100%;
  background: var(--echo-cream);
  overflow-x: clip;
  padding-block: clamp(10rem, 18vw, 20rem); /* Increased vertical padding to create healthy gap above/below waves */
  box-sizing: border-box;
}

/* Scaled wave background: extends beyond the viewport horizontally so the endpoints never crop */
.proof__wave {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 120vw; /* Bleeds wide enough that curve ends are pushed completely off-screen */
  min-width: 1440px;
  line-height: 0;
  pointer-events: none;
}

.proof__wave--top { 
  top: 0; 
}

.proof__wave--bottom { 
  bottom: 0; 
}

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

.proof__container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 1300px;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 5vw, 4.375rem);
  box-sizing: border-box;
}

.proof__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 1 45%;
  min-width: 0;
}

.proof__stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--echo-orange);
}

.proof__stat-copy {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.85rem, 1.3vw, 1.25rem);
  line-height: 1.35;
  color: #454545;
  margin-top: 0.75rem;
  max-width: 26rem;
}

.proof__message {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 0 1 50%;
  max-width: 38rem; /* Hard limit ensures title naturally wraps across exactly 3 lines */
  color: var(--echo-orange);
}

.proof__eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(0.7rem, 0.85vw, 0.875rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--echo-orange);
}

.proof__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--echo-orange);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .proof {
    padding-block: clamp(5rem, 15vw, 18rem);
  }

  .proof__wave {
    width: 140vw; /* Keeps ends hidden on mobile screens */
    min-width: 600px;
  }

  .proof__container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center; /* Changed from space-between to group them in the middle */
    gap: 1.5rem;             /* Explicitly controls the horizontal gap size */
    max-width: 1100px;       /* Tightened container width */
    margin: 0 auto;
    padding-inline: clamp(1.25rem, 5vw, 4.375rem);
    box-sizing: border-box;
  }

  .proof__stat {
    flex: 0 0 42%;
    align-items: center;
    text-align: center; /* Centers the stat content for better mobile presentation */
  }

  .proof__message {
    flex: 0 0 55%;
    max-width: 15rem; /* Maintains 3 line wrapping on smaller viewports */
  }

  .proof__stat-number {
    font-size: clamp(2rem, 8vw, 3.2rem);
    text-align: center; /* Centers the number for better mobile presentation */
  }

  .proof__stat-copy {
    font-size: clamp(0.55rem, 2.2vw, 0.75rem);
    margin-top: 0.25rem;
  }

  .proof__eyebrow {
    font-size: clamp(0.5rem, 2vw, 0.65rem);
  }

  .proof__heading {
    font-size: clamp(0.75rem, 3.2vw, 1.15rem);
    line-height: 1.25;
  }
}
/* ============================================================
   Dark Testimonial — "Honestly, we're early."
   ============================================================ */
.testimonial--dark {
  z-index: 101;
  background: var(--echo-black);
}

.testimonial--dark .testimonial__inner {
  --dark-photo-width: clamp(7rem, 19vw, 14rem);
  position: relative;
  display: grid;
  grid-template-columns: var(--dark-photo-width) minmax(0, 1fr);
  grid-template-rows: 1fr;
  column-gap: clamp(4rem, 6.5vw, 6rem);
  align-items: start;
  min-height: 500px;
  padding: 20px 70px 20px 16px;
}

.testimonial--dark .testimonial__heading {
  position: absolute;
  left: calc(16px - var(--dark-photo-width) * 0.175);
  bottom: calc(var(--dark-photo-width) * 1.55 + clamp(0.5rem, 1.5vw, 1rem));
  font-family: var(--font-hand);
  width: calc(var(--dark-photo-width) * 1.35);
  max-width: 100%;
  font-size: min(2.8125rem, calc(var(--dark-photo-width) * 0.16));
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--echo-orange);
  white-space: nowrap;
  overflow: visible;
  text-align: center;
}

.testimonial--dark .testimonial__heading span { display: block; }

.testimonial--dark .testimonial__content { grid-column: 2; grid-row: 1; align-self: center; justify-self: stretch; height: fit-content; gap: 20px; padding: 10px 0 30px; }
.testimonial--dark .testimonial__quote-mark { width: 34px; }
.testimonial--dark .testimonial__quote {
  color: var(--echo-white);
  max-width: none;
  font-weight: 600;
  font-size: 40px;
  line-height: 57.6px;
  letter-spacing: -0.5px;
}

.testimonial--dark .testimonial__quote strong { color: var(--echo-orange); }
.testimonial--dark .testimonial__quote-emphasis { font-style: italic; }

.testimonial--dark .testimonial__attribution { gap: 0; }
.testimonial--dark .testimonial__name { font-size: 32px; line-height: 57.6px; letter-spacing: -1.25px; }

.testimonial--dark .testimonial__photo {
  position: absolute;
  left: 16px;
  bottom: 0;
  width: var(--dark-photo-width);
  height: auto;
  aspect-ratio: 257 / 399;
  object-fit: contain;
  object-position: center bottom;
}

@media (max-width: 900px) {
  .testimonial--dark .testimonial__inner {
    --dark-photo-width: clamp(7rem, 23vw, 14rem);
    grid-template-columns: var(--dark-photo-width) minmax(0, 1fr);
    grid-template-rows: 1fr;
    column-gap: clamp(2rem, 5vw, 4.5rem);
    padding-left: 12px;
    padding-right: 1.5rem;
  }

  .testimonial--dark .testimonial__heading { left: calc(12px - var(--dark-photo-width) * 0.175); bottom: calc(var(--dark-photo-width) * 1.55 + clamp(0.5rem, 1.5vw, 1rem)); width: calc(var(--dark-photo-width) * 1.35); font-size: min(2.8125rem, calc(var(--dark-photo-width) * 0.16)); }
  .testimonial--dark .testimonial__photo { left: 12px; width: var(--dark-photo-width); }
  .testimonial--dark .testimonial__quote { font-size: clamp(1.15rem, 3.5vw, 2.25rem); line-height: 1.28; letter-spacing: -0.2px; }
  .testimonial--dark .testimonial__name { font-size: clamp(1.1rem, 3vw, 2rem); }
}

@media (max-width: 640px) {
  .testimonial--dark .testimonial__inner {
    --dark-photo-width: 31vw;
    grid-template-columns: var(--dark-photo-width) minmax(0, 1fr);
    grid-template-rows: 1fr;
    column-gap: clamp(1.25rem, 5vw, 2rem);
    min-height: 300px;
    padding: 1rem 1rem 1rem 8px;
  }

  .testimonial--dark .testimonial__heading { left: calc(8px - var(--dark-photo-width) * 0.175); bottom: calc(var(--dark-photo-width) * 1.55 + clamp(0.5rem, 1.5vw, 1rem)); width: calc(var(--dark-photo-width) * 1.35); font-size: min(2.8125rem, calc(var(--dark-photo-width) * 0.16)); line-height: 1.15; }
  .testimonial--dark .testimonial__photo { left: 8px; }
  .testimonial--dark .testimonial__content { gap: 0.75rem; padding: 1rem 0 1rem; }
  .testimonial--dark .testimonial__quote-mark { width: 1.5rem; }
  .testimonial--dark .testimonial__quote { font-size: clamp(1rem, 3.8vw, 1.55rem); letter-spacing: 0; }
}
/* ============================================================
   Clients — "Credibility & Backing" (follows Message)
   Light orange full-width band with client logo + label
   ============================================================ */
.clients {
  position: relative;
  z-index: 101;
  width: 100%;
  background: var(--echo-orange-light);
  color: var(--echo-black);
  box-sizing: border-box;
  padding: clamp(2.5rem, 6vw, 4.375rem) clamp(1.5rem, 7vw, 6.25rem); /* 40px 100px desktop */
}

.clients__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px; /* Design vertical gap between heading and logo group */
  max-width: 1240px; /* 1440px frame minus 2 × 100px padding */
  margin: 0 auto;
  text-align: center;
}

.clients__heading {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem); /* Up to 40px */
  line-height: 1.5; /* Spec 1.5em */
  letter-spacing: -0.03em;
  color: var(--echo-black);
}

.clients__logos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 6vw, 4.125rem); /* 66px desktop */
  margin: 0;
  padding: 0;
}

.clients__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.4vw, 0.625rem); /* 10px desktop */
}

.clients__logo {
  display: block;
  width: clamp(5rem, 16vw, 12.5rem); /* Up to 200px */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.clients__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.5rem); /* Up to 24px */
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--echo-black);
}

/* Tablet responsive adjustments */
@media (max-width: 900px) {
  .clients {
    padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 6vw, 3.5rem);
  }

  .clients__container {
    gap: 1.25rem;
  }

  .clients__heading {
    font-size: clamp(1.5rem, 5vw, 1.875rem);
  }

  .clients__logos {
    gap: clamp(1.25rem, 5vw, 3rem);
  }

  .clients__logo {
    width: clamp(4.5rem, 15vw, 7.5rem);
  }

  .clients__name {
    font-size: clamp(0.9rem, 3vw, 1.25rem);
  }
}

/* Mobile adjustments (mirrors the scaled 393px Figma frame) */
@media (max-width: 640px) {
  .clients {
    padding: clamp(1.25rem, 5vw, 2rem) clamp(1.25rem, 7vw, 3rem);
  }

  .clients__container {
    gap: clamp(0.85rem, 3vw, 1.25rem);
  }

  .clients__heading {
    font-size: clamp(1rem, 4.6vw, 1.375rem);
  }

  .clients__logos {
    gap: clamp(0.75rem, 5vw, 1.25rem);
  }

  .clients__item {
    gap: 0.4rem;
  }

  .clients__logo {
    width: clamp(3.5rem, 16vw, 5.5rem);
  }

  .clients__name {
    font-size: clamp(0.7rem, 3vw, 0.95rem);
  }
}
/* ============================================================
   CTA — "Join Echo" (follows Clients)
   Two stacked subsections: For Students (cream) & For Institutions (orange)
   ============================================================ */
.cta {
  position: relative;
  z-index: 101;
  width: 100%;
  box-sizing: border-box;
}

/* Shared inner layout */
.cta__students,
.cta__institutions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}

/* Subsection 1 — For Students (cream bg, orange text) */
.cta__students {
  background: var(--echo-cream);
  color: var(--echo-orange);
  padding: clamp(2.5rem, 6vw, 4.375rem) clamp(1.25rem, 5vw, 4.375rem); /* 40px 70px desktop */
  gap: clamp(1.5rem, 4vw, 2.5rem); /* 40px desktop */
}

/* Subsection 2 — For Institutions (orange bg, white text) */
.cta__institutions {
  background: var(--echo-orange);
  color: var(--echo-white);
  padding: clamp(2.5rem, 6vw, 4.375rem) clamp(1.25rem, 4vw, 3.5rem); /* 40px 31px desktop */
  gap: clamp(1.25rem, 3vw, 1.875rem); /* 30px desktop */
}

/* Eyebrow — matches the landing page's global eyebrow styling */
.cta__eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(0.75rem, 0.85vw, 0.875rem);
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: calc(clamp(0.25rem, 1vw, 0.5rem) - clamp(1.5rem, 4vw, 2.5rem)); /* shared 4–8px eyebrow↔headline gap minus Students' responsive flex gap */
}
.cta__eyebrow--accent { color: var(--echo-orange); }
.cta__eyebrow--light  { color: var(--echo-white); margin-bottom: calc(clamp(0.25rem, 1vw, 0.5rem) - clamp(1.25rem, 3vw, 1.875rem)); /* same shared 4–8px gap minus Institutions' responsive flex gap */ }

/* Headlines */
.cta__headline {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.cta__headline--students,
.cta__headline--institutions {
  max-width: 100% !important; /* Removes the 18ch boundary limit */
  text-align: center;
}
.cta__headline--students {
  font-size: clamp(2.5rem, 8vw, 9.5rem); /* Up to 120px */
  color: var(--echo-orange);
  text-transform: uppercase;
}
.cta__headline--institutions {
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 4rem); /* Up to 64px */
  letter-spacing: -0.0469em;
  line-height: 1;
  color: var(--echo-white);
}

/* Mascot (Uncle Sam) */
.cta__mascot {
  display: block;
  width: clamp(10rem, 40vw, 42.375rem); /* Up to 678px */
  height: auto;
  aspect-ratio: 678 / 729;
  object-fit: contain;
  margin-inline: auto;
}

/* Taglines */
.cta__tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 2.6vw, 2.25rem); /* Up to 36px */
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--echo-orange);
  max-width: 100% !important; /* Removes the 18ch boundary limit */
}
.cta__tagline--institutions {
  font-size: clamp(1.5rem, 1.5vw, 1.75rem);
  color: var(--echo-white);
}

/* Buttons */
.cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.5rem); /* Up to 24px */
  line-height: 1.2;
  letter-spacing: -0.0113em;
  text-align: center;
  white-space: nowrap;
  border-radius: 20px;
  border: 1.5px solid;
  padding: 1.0625rem 2.5rem; /* 17px 40px */
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
.cta__button:focus-visible {
  outline: 3px solid var(--echo-orange-light);
  outline-offset: 2px;
}
.cta__button:active { transform: translateY(1px); }

.cta__button--solid {
  background-color: var(--echo-orange);
  color: var(--echo-white);
  border-color: var(--echo-orange);
}
.cta__button--solid:hover { background-color: #e08a1f; }

.cta__button--outline {
  background-color: var(--echo-cream);
  color: var(--echo-orange);
  border-color: var(--echo-orange-light);
}
.cta__button--outline:hover { background-color: #fbe7cd; }

/* Responsive — ablet */
@media (max-width: 900px) {
  .cta__headline--students { font-size: clamp(2.5rem, 8vw, 4rem); }
  .cta__headline--institutions { font-size: clamp(1.75rem, 5vw, 3rem); }
  .cta__mascot { width: clamp(9rem, 44vw, 20rem); }
  .cta__tagline { font-size: clamp(1.5rem, 3vw, 1.75rem); }
}

/* Responsive adjustments — obile */
@media (max-width: 640px) {
  .cta__students,
  .cta__institutions { padding: clamp(1rem, 2vw, 3rem) clamp(1.5rem, 6vw, 2rem); }

  .cta__students { gap: clamp(1.125rem, 4vw, 1.5rem); }
  .cta__institutions { gap: 0.9rem; }

  .cta__eyebrow { font-size: clamp(0.6rem, 2.4vw, 0.7rem); letter-spacing: 0.10em; }

  /* Re-derive the eyebrow↔headline margins to match the mobile parent flex gaps below,
     keeping the same shared 4–8px gap in both blocks */
  .cta__eyebrow { margin-bottom: calc(clamp(0.25rem, 1vw, 0.5rem) - clamp(1.125rem, 4vw, 1.5rem)); }
  .cta__eyebrow--light { margin-bottom: calc(clamp(0.25rem, 1vw, 0.5rem) - 0.9rem); }

  .cta__headline--students { font-size: clamp(1.8rem, 10vw, 3.25rem); }
  .cta__headline--institutions { font-size: clamp(1.5rem, 6.4vw, 2.25rem); }

  .cta__mascot { width: min(12.5rem, 62vw); }

  .cta__tagline { font-size: clamp(1rem, 4vw, 1.25rem); line-height: 1.35; }
  .cta__tagline--institutions { font-size: clamp(1rem, 3.5vw, 1.25rem); }

  .cta__button { font-size: clamp(0.8rem, 3.6vw, 1rem); border-radius: 10px; border-width: 1px; padding: 0.625rem 1.25rem; }
}

/* ============================================================
   FAQ — "Echo FAQ's" (follows CTA)
   Accordion cards with a monochrome Echo logo watermark
   ============================================================ */
.faq {
  position: relative;
  z-index: 102; /* Sits above the CTA band */
  width: 100%;
  background: var(--echo-white);
  box-sizing: border-box;
  padding: clamp(3rem, 8vw, 4.375rem) clamp(1.25rem, 6vw, 6.25rem); /* 70px vertical desktop */
}

.faq__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 4.5vw, 2.5rem); /* 40px desktop */
  max-width: 880px; /* 1440px frame minus 2 x 280px container padding */
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* Header — eyebrow + heading */
.faq__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px; /* Design gap between eyebrow and heading */
  max-width: 554px; /* Design heading block width */
  width: 100%;
  text-align: center;
}

.faq__eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(0.7rem, 0.9vw, 0.875rem); /* 12px desktop */
  line-height: 1.7;
  letter-spacing: 0.0008em;
  color: var(--echo-orange);
}

.faq__heading {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 2.8125rem); /* up to 45px desktop */
  line-height: 1.3; /* 57.6px at ~44px font size */
  letter-spacing: -0.028em;
  color: #060b13;
}

/* List — vertical accordion with watermark behind cards */
.faq__list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px; /* Design gap between cards */
  width: 100%;
  box-sizing: border-box;
}

.faq__watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(10rem, 30vw, 25rem); /* ~400px desktop */
  height: auto;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
  -webkit-user-select: none;
  user-select: none;
}

/* Accordion card */
.faq__item {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Semi-transparent white (matches Figma card opacity ~0.9) so the Echo logo
     watermark behind the stack shows through, while the inner text/icons
     remain fully opaque (we use rgba() on the background, not element opacity). */
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e9ebf1;
  border-radius: 10px;
  /* White ring also kept slightly translucent so it doesn't fully mask the logo */
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
  overflow: hidden;
  text-align: left;
}

.faq__question-row {
  margin: 0;
}

/* Question trigger — spans the full card so the whole row is clickable */
.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.5rem 2rem; /* 32px desktop */
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

.faq__trigger:focus-visible {
  outline: 3px solid var(--echo-orange-light);
  outline-offset: -3px;
  border-radius: 10px;
}

.faq__question {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(1rem, 1.7vw, 1.028rem); /* ~16.45px desktop */
  line-height: 1.75; /* 28.8px at 16.45px */
  letter-spacing: -0.0158em;
  color: #060b13;
}

.faq__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.faq__chevron {
  display: block;
  width: 100%;
  height: 100%;
}

.faq__item.is-open .faq__icon {
  transform: rotate(180deg);
}

/* Answer panel — animates open/closed via grid rows */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.faq__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.faq__item.is-open .faq__panel {
  grid-template-rows: 1fr;
}

.faq__answer {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.6vw, 1.0625rem); /* ~17px desktop */
  line-height: 1.6;
  letter-spacing: -0.011em;
  color: #5a6472; /* Muted grey to sit comfortably under the dark question */
  max-width: 60ch;
  padding: 0.25rem 2rem 2rem; /* 32px horizontal/bottom, small top gap from question */
  box-sizing: border-box;
}

/* Responsive — tablet */
@media (max-width: 900px) {
  .faq__heading {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
  }

  .faq__trigger {
    padding: 1.25rem 1.5rem;
  }

  .faq__answer {
    padding: 0.25rem 1.5rem 1.5rem;
  }
}

/* Responsive — mobile */
@media (max-width: 640px) {
  .faq {
    padding: clamp(2.5rem, 12vw, 3.5rem) clamp(1.25rem, 6vw, 2rem);
  }

  .faq__container {
    gap: 1.5rem;
  }

  .faq__header {
    gap: 0.75rem;
  }

  .faq__heading {
    font-size: clamp(1.5rem, 7.5vw, 2rem);
    line-height: 1.25;
  }

  .faq__list {
    gap: 0.625rem;
  }

  .faq__item {
    border-radius: 10px;
  }

  .faq__trigger {
    padding: 1.125rem 1.25rem;
    gap: 0.75rem;
  }

  .faq__question {
    font-size: 1rem;
    line-height: 1.6;
  }

  .faq__icon {
    width: 20px;
    height: 20px;
  }

  .faq__answer {
    font-size: 0.95rem;
    line-height: 1.55;
    padding: 0.25rem 1.25rem 1.375rem;
  }
}

/* ============================================================
   Footer — semantic site navigation
   ============================================================ */
.site-footer {
  width: 100%;
  background: var(--echo-orange);
  color: var(--echo-white);
  padding: 2.5rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Full-width band: its left/right edges align exactly with the footer's
   padding box, so the ECHO wordmark spans border to border. */
.site-footer__content {
  width: 100%;
}

.site-footer__bottom {
  width: 100%;
  margin-inline: auto;
}

.site-footer__inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(260px, 455px) 1fr;
  gap: clamp(3rem, 8vw, 5.375rem);
  align-items: start;
  padding-bottom: 0;
}

.site-footer__brand-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.46875rem, 0.7vw + 0.25rem, 0.9375rem);
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-footer__logo {
  display: block;
  width: clamp(1.171875rem, 1.6vw + 0.55rem, 2.34375rem);
  height: auto;
  object-fit: contain;
}

.site-footer__social-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.15625rem, 0.35vw + 0.06rem, 0.3125rem);
}

.site-footer__social-block p {
  color: var(--echo-white);
  font-family: var(--font-ui);
  font-size: clamp(0.4375rem, 0.85vw + 0.14rem, 0.9125rem);
  font-weight: 500;
  line-height: 1.52;
}

.site-footer__socials {
  display: flex;
  align-items: center;
  gap: clamp(0.375rem, 0.7vw + 0.22rem, 0.75rem);
}

.site-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(1.5rem, 2vw + 0.65rem, 3rem);
  height: clamp(1.5rem, 2vw + 0.65rem, 3rem);
  border: 0;
  border-radius: 50%;
  background: var(--echo-white);
}

.site-footer__socials img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-footer__links {
  display: flex;
  /* Groups must always share one row — scale down instead of wrapping */
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: clamp(1.5rem, 5vw, 5.375rem);
  padding-top: 0.625rem;
}

.site-footer__links .site-footer__link-column {
  flex: 0 0 auto;
}

.site-footer__group-toggle {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-ui);
  font-size: clamp(0.45rem, 0.9vw + 0.12rem, 0.8125rem);
  font-weight: 500;
  line-height: 1.52;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
}

.site-footer__group-chevron {
  display: none;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-left: 0.5rem;
}

.site-footer__group-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.625rem, 0.8vw + 0.28rem, 1.25rem);
}

.site-footer__link-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer__link-column a {
  color: var(--echo-white);
  font-family: var(--font-ui);
  font-size: clamp(0.5rem, 1.05vw + 0.15rem, 0.875rem);
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer__link-column a:hover,
.site-footer__link-column a:focus-visible {
  color: var(--echo-orange-light);
}

.site-footer__wordmark {
  display: block;
  width: 100%;
  height: auto;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 195, 123, 0.8);
  margin-top: clamp(1.25rem, 3vw, 2rem);
  padding-top: 0.625rem;
  color: var(--echo-white);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1.5;
}

.site-footer__bottom span {
  margin-left: 0.15rem;
}

/* ============================================================
   Tablet — brand scales up beside a 2×2 link-group grid
   ============================================================ */
@media (max-width: 1090px) and (min-width: 641px) {
  .site-footer__inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: start; /* logo rests at the top-left of the footer */
    gap: clamp(1.5rem, 4vw, 3rem);
  }

  .site-footer__brand-column { gap: 1rem; }

  .site-footer__logo {
    width: clamp(2.25rem, 3vw + 1.2rem, 3rem);
    height: auto;
  }

  .site-footer__social-block { gap: 0.5rem; }
  .site-footer__social-block p { font-size: clamp(0.95rem, 1vw + 0.45rem, 1.15rem); }
  .site-footer__socials { gap: 0.875rem; }
  .site-footer__socials a {
    width: clamp(3rem, 2.6vw + 1.6rem, 3.75rem);
    height: clamp(3rem, 2.6vw + 1.6rem, 3.75rem);
  }

  /* Two rows of groups so nothing clips off the right edge */
  .site-footer__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-items: start;
    gap: 1.75rem clamp(2rem, 4vw, 3.5rem);
    padding-top: 0;
  }

  .site-footer__group-toggle { font-size: 0.95rem; }
  .site-footer__group-panel { margin-top: 0.75rem; gap: 0.75rem; }
  .site-footer__link-column a { font-size: 0.9rem; white-space: normal; }
}

/* ============================================================
   Mobile — vertical layout with collapsible group accordions
   ============================================================ */
@media (max-width: 640px) {
  .site-footer {
    padding: 1.5rem 1.25rem 1.25rem;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* Brand + socials on top, left aligned, comfortably readable */
  .site-footer__brand-column { gap: 0.75rem; }
  .site-footer__logo { width: 2rem; height: auto; }
  .site-footer__social-block { gap: 0.4rem; }
  .site-footer__social-block p,
  .site-footer__group-toggle {
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .site-footer__socials { gap: 0.625rem; }
  .site-footer__socials a { width: 2.25rem; height: 2.25rem; }

  /* Groups become full-width accordion rows */
  .site-footer__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
  }

  .site-footer__links .site-footer__link-column {
    flex: 1 1 auto;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  }

  .site-footer__group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: var(--echo-white);
    padding: 0.85rem 0;
  }

  .site-footer__group-chevron {
    display: block;
    width: 0.9rem;
    height: 0.9rem;
    transition: transform 0.18s ease;
  }

  .site-footer__link-column.is-open .site-footer__group-chevron {
    transform: rotate(180deg);
  }

  .site-footer__group-panel {
    display: none;
    gap: 0.55rem;
    padding: 0 0 0.95rem;
  }

  .site-footer__link-column.is-open .site-footer__group-panel {
    display: flex;
  }

  .site-footer__link-column a {
    font-size: 0.8125rem;
    white-space: normal;
  }

  .site-footer__wordmark {
    margin-top: 1.75rem;
  }

  .site-footer__bottom {
    margin-top: 1.1rem;
    padding-top: 0.5rem;
    font-size: 0.7rem;
    line-height: 1.5;
  }
}