/* ============================================================
   WinSkill — Main Stylesheet
   ============================================================
   Editorial design system for WinSkill, training arm of WinDNA
   Life Sciences. Voice: silent authority, scientific restraint,
   future-facing Indian healthcare institution.

   Palette
     Primary teal     #0F766E
     Deep teal        #0A5954
     Teal background  #EBF7F6
     Ivory            #F8F6F1
     Ivory deep       #F0EDE5
     Navy             #0B1729
     Gold accent      #C7A86D

   Type
     Display: Fraunces 400, italic for emphasis
     Body:    Inter 400 (500 for weighted emphasis)
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────── */
:root{
  /* Primary palette */
  --teal:       #107A4A;
  --teal-deep:  #0B5C38;
  --teal-light: #1FA05F;
  --teal-bg:    #EAF5EE;
  --teal-b2:    #CDE8D7;

  /* Surface */
  --ivory:      #F8F6F1;
  --ivory-deep: #F0EDE5;
  --white:      #FFFFFF;
  --grey:       #E8E5DF;
  --grey-l:     #F4F2EE;

  /* Text */
  --navy:       #0B1729;
  --txt:        #1A1A1A;
  --txt-mid:    #3D3D3D;
  --txt-light:  #6B6B6B;

  /* Accents (used sparingly) */
  --red:        #E05252;
  --red-bg:     #FDF0F0;
  --blue:       #4A90D9;
  --purple:     #9B7ACA;
  --sage:       #7A9B76;
  --gold:       #B98B2E;
  --orange:     #D86018;
  --orange-deep:#B84E12;

  /* Type */
  --fh: 'Fraunces', Georgia, serif;
  --fb: 'Inter', system-ui, sans-serif;

  /* Spacing */
  --container: 1200px;
  --gutter: 48px;
  /* Phase 4 warm palette additions */
  --sage-deep: #4F7549;
  --sage-bg: #EFF4ED;
  --terra: #C25F4D;
  --terra-deep: #9B4536;
  --terra-bg: #F8EDEA;
  --gold-deep: #A88A4F;
  --gold-bg: #F7F0DF;

}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--fb);
  background: var(--ivory);
  color: var(--txt);
  line-height: 1.7;
  font-size: 17px;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ── UTILITIES ──────────────────────────────────────── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 18px;
}
.eyebrow.muted { color: var(--txt-light); }

h1, h2, h3, h4 {
  font-family: var(--fh);
  font-weight: 400;
  color: var(--navy);
  letter-spacing: -0.022em;
  line-height: 1.12;
}

p { color: var(--txt-mid); }

em { font-style: italic; color: var(--teal); font-weight: 400; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--fb);
  transition: all 0.22s ease;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--orange);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--teal-deep);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal);
}
.btn-outline:hover {
  background: var(--teal-bg);
}
.arrow { transition: transform 0.22s ease; }
.btn:hover .arrow { transform: translateX(4px); }

.section { padding: 110px 0; }
.section-tight { padding: 90px 0; }

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-on {
  opacity: 1;
  transform: translateY(0);
}

/* ── NAV ────────────────────────────────────────────── */
nav.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: rgba(248, 246, 241, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(15, 118, 110, 0.08);
}
.logo {
  font-family: var(--fh);
  font-size: 22px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.logo span { color: var(--teal); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-size: 14px;
  font-weight: 400;
  color: var(--txt-mid);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--teal); }
.nav-cta {
  background: var(--teal);
  color: var(--white) !important;
  padding: 10px 20px;
  border-radius: 7px;
  font-weight: 500 !important;
}
.nav-cta:hover { background: var(--teal-deep); }
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
}
.burger span {
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
}
.mobile-menu {
  display: none;
  position: fixed;
  top: 72px; left: 0; right: 0;
  background: var(--ivory);
  border-bottom: 1px solid var(--grey);
  padding: 24px var(--gutter);
  z-index: 199;
  flex-direction: column;
  gap: 8px;
}
.mobile-menu a {
  padding: 14px 0;
  border-bottom: 1px solid var(--grey-l);
  font-size: 15px;
  color: var(--txt-mid);
}
.mobile-menu a:last-child {
  margin-top: 12px;
  background: var(--teal);
  color: var(--white);
  padding: 14px;
  border-radius: 8px;
  text-align: center;
  border: none;
}
.mobile-menu.open { display: flex; }

/* ── HERO BAND 1 ────────────────────────────────────── */
.hero1 {
  padding: 140px var(--gutter) 80px;
  background: linear-gradient(170deg, var(--ivory) 60%, var(--teal-bg) 100%);
  position: relative;
  overflow: hidden;
}
.hero1::before {
  content: '';
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15,118,110,0.05) 0%, transparent 70%);
  top: -180px; right: -180px;
  pointer-events: none;
}
.hero1-in {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 72px;
  align-items: center;
  position: relative;
}
.hero-badges {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 118, 110, 0.06);
  border: 1px solid rgba(15, 118, 110, 0.18);
  padding: 7px 16px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 28px;
}
.hero-dot {
  width: 6px; height: 6px;
  background: var(--teal);
  border-radius: 50%;
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.hero-h1 {
  font-size: clamp(34px, 4.2vw, 54px);
  margin-bottom: 26px;
  max-width: 620px;
}
.hero-h1 em {
  display: block;
  color: var(--teal);
  font-style: italic;
}
.hero-sub {
  font-size: 17px;
  line-height: 1.78;
  color: var(--txt-mid);
  max-width: 540px;
  margin-bottom: 36px;
}
.hero-sub strong {
  font-weight: 500;
  color: var(--navy);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}
.hero-trust {
  font-size: 12px;
  color: var(--txt-light);
  letter-spacing: 0.02em;
}
.hero-trust span { margin: 0 6px; }

/* Founder portrait placeholder */
.hero-portrait-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-portrait {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--ivory-deep) 0%, var(--teal-bg) 100%);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(11, 23, 41, 0.18);
}
.hero-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(15, 118, 110, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(122, 155, 118, 0.18) 0%, transparent 60%);
}
.hero-portrait-silhouette {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 70%;
  opacity: 0.18;
}
.hero-portrait-label {
  position: absolute;
  top: 16px; left: 16px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: rgba(255, 255, 255, 0.7);
  padding: 5px 10px;
  border-radius: 4px;
}
.hero-portrait-meta {
  margin-top: 18px;
  text-align: center;
}
.hero-portrait-meta .name {
  font-family: var(--fh);
  font-size: 20px;
  color: var(--navy);
  font-weight: 500;
}
.hero-portrait-meta .role {
  font-size: 13px;
  color: var(--txt-light);
  margin-top: 4px;
}
.hero-credentials {
  display: flex;
  gap: 8px;
  position: absolute;
  bottom: 16px; left: 16px; right: 16px;
  flex-wrap: wrap;
}
.cred-pill {
  background: rgba(255, 255, 255, 0.85);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

/* ── PARTNER STRIP ──────────────────────────────────── */
.partners {
  background: var(--teal-bg);
  padding: 44px 0;
  border-bottom: 1px solid rgba(15, 118, 110, 0.14);
}
.partners-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 20px;
}
.partner-mark {
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-mid);
  white-space: nowrap;
}

/* ── HERO BAND 2 ────────────────────────────────────── */
.hero2 {
  padding: 90px var(--gutter);
  background: var(--white);
  border-bottom: 1px solid var(--grey);
}
.hero2-in {
  max-width: 1080px;
  margin: 0 auto;
}
.hero2-statement {
  font-family: var(--fh);
  font-size: clamp(22px, 2.5vw, 30px);
  color: var(--navy);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.018em;
  margin-bottom: 56px;
  max-width: 800px;
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 60px;
}
.audience-line {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px 32px;
  background: var(--teal-bg);
  border: 1px solid rgba(15, 118, 110, 0.08);
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  min-height: 108px;
}
.audience-line:hover {
  background: var(--teal-b2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -10px rgba(11, 23, 41, 0.12);
}
.audience-num {
  font-family: var(--fh);
  font-size: 18px;
  color: var(--teal);
  font-weight: 500;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  padding-top: 2px;
  line-height: 1.2;
}
.audience-text {
  font-size: 16px;
  color: var(--navy);
  line-height: 1.55;
  font-weight: 400;
}
/* Synthesis tile: the sixth slot. Different visual register, ties the five paths into one thesis. */
.audience-synthesis {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
  background: linear-gradient(135deg, var(--teal-deep) 0%, var(--teal) 100%);
  border-radius: 10px;
  min-height: 108px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.audience-synthesis:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -10px rgba(10, 89, 84, 0.4);
}
.audience-synthesis::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(199, 168, 109, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.audience-synthesis-text {
  font-family: var(--fh);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--white);
  font-weight: 400;
  position: relative;
  z-index: 1;
  letter-spacing: -0.005em;
}
.audience-synthesis-mark {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.audience-synthesis-mark span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}
.audience-synthesis-mark span:nth-child(3) {
  background: var(--gold);
}
.hero2-question {
  font-family: var(--fh);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--teal);
  margin-bottom: 24px;
}
.hero2-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── WHY THIS FIELD ─────────────────────────────────── */
.why {
  padding: 120px 0;
  background: var(--ivory);
}
.why-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.why-h {
  font-size: clamp(28px, 3.2vw, 44px);
  margin-bottom: 24px;
}
.why-h em {
  display: inline;
  color: var(--teal);
  font-style: italic;
}
.why-p {
  font-size: 17px;
  line-height: 1.82;
  color: var(--txt-mid);
  max-width: 520px;
}





/* ── PROGRAMMES ─────────────────────────────────────── */
.programmes {
  padding: 120px 0;
  background: var(--white);
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.section-header-left h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  margin-bottom: 16px;
  max-width: 640px;
}
.section-header-left h2 em {
  display: inline;
  font-style: italic;
  color: var(--teal);
}
.section-header-left p {
  font-size: 17px;
  color: var(--txt-mid);
  line-height: 1.7;
  max-width: 580px;
}
.quiz-prompt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--teal-bg);
  border: 1px solid var(--teal-b2);
  border-radius: 8px;
  font-size: 14px;
  color: var(--teal-deep);
  font-weight: 500;
}
.quiz-prompt a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.programmes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.prog-card {
  background: var(--ivory);
  padding: 36px 32px;
  border-radius: 6px;
  border: 1px solid var(--grey);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
}
.prog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -16px rgba(11, 23, 41, 0.1);
  border-color: var(--teal-b2);
}
.prog-card.is-community {
  border-top: 3px solid var(--red);
}
.prog-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}
.prog-card.is-community .prog-tag { color: var(--red); }
.prog-card h3 {
  font-size: 24px;
  margin-bottom: 12px;
  line-height: 1.25;
}
.prog-card .prog-tagline {
  font-size: 15px;
  color: var(--txt-mid);
  line-height: 1.65;
  margin-bottom: 24px;
  flex-grow: 1;
}
.prog-meta {
  display: flex;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--grey);
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--txt-light);
}
.prog-meta .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--txt-light);
  margin-bottom: 4px;
}
.prog-meta .value {
  color: var(--navy);
  font-weight: 500;
  font-size: 13px;
}
.prog-cta {
  font-size: 14px;
  color: var(--teal);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease;
}
.prog-cta:hover { gap: 10px; }
.prog-card.is-community .prog-cta { color: var(--red); }

/* ── WHO YOU ARE ────────────────────────────────────── */
.who-you-are {
  padding: 120px 0;
  background: var(--ivory);
}
.role-paths {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--grey);
}
.role-path {
  display: grid;
  grid-template-columns: 80px 1fr 2fr 160px;
  align-items: center;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--grey);
  transition: padding-left 0.25s ease;
}
.role-path:hover {
  padding-left: 12px;
}
.role-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--teal-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.role-icon svg {
  width: 28px; height: 28px;
  stroke: var(--teal);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.role-name {
  font-family: var(--fh);
  font-size: 22px;
  color: var(--navy);
  font-weight: 500;
}
.role-q {
  font-size: 15px;
  color: var(--txt-mid);
  line-height: 1.6;
}
.role-cta {
  font-size: 13px;
  color: var(--teal);
  font-weight: 500;
  text-align: right;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}
.role-cta:hover { gap: 10px; }

/* ── QUIZ ──────────────────────────────────────────── */
.quiz-section {
  padding: 120px 0;
  background: var(--white);
}
.quiz-wrap {
  max-width: 800px;
  margin: 0 auto;
}
.quiz-header {
  text-align: center;
  margin-bottom: 56px;
}
.quiz-header h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  margin-bottom: 16px;
}
.quiz-header h2 em {
  font-style: italic;
  color: var(--teal);
}
.quiz-header p {
  font-size: 17px;
  color: var(--txt-mid);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto;
}
.quiz-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 40px;
}
.qp-dot {
  width: 28px; height: 4px;
  background: var(--grey);
  border-radius: 2px;
  transition: background 0.3s ease;
}
.qp-dot.is-active { background: var(--teal); }
.qp-dot.is-done { background: var(--teal-light); }
.quiz-card {
  background: var(--ivory);
  border-radius: 8px;
  padding: 48px;
  border: 1px solid var(--grey);
  display: none;
}
.quiz-card.is-active {
  display: block;
  animation: cardIn 0.4s ease;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.q-num {
  font-family: var(--fh);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 20px;
}
.q-text {
  font-family: var(--fh);
  font-size: clamp(22px, 2.3vw, 28px);
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 32px;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.q-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.q-option {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px;
  background: var(--white);
  border: 1.5px solid var(--grey);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
  font: inherit;
  color: var(--txt-mid);
}
.q-option:hover {
  border-color: var(--teal-light);
  background: var(--teal-bg);
}
.q-option.is-selected {
  border-color: var(--teal);
  background: var(--teal-bg);
}
.q-radio {
  width: 18px; height: 18px;
  border: 1.5px solid var(--txt-light);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
  transition: all 0.2s ease;
  position: relative;
}
.q-option.is-selected .q-radio {
  border-color: var(--teal);
}
.q-option.is-selected .q-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--teal);
  border-radius: 50%;
}
.q-opt-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--txt);
}
.q-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--grey);
}
.q-back {
  font-size: 14px;
  color: var(--txt-light);
  background: none;
  border: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.q-back:hover { color: var(--teal); }
.q-back:disabled { opacity: 0.4; cursor: not-allowed; }
.q-next {
  background: var(--teal);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.q-next:hover { background: var(--teal-deep); }
.q-next:disabled {
  background: var(--grey);
  color: var(--txt-light);
  cursor: not-allowed;
}

/* Quiz result */
.quiz-result {
  display: none;
  background: var(--ivory);
  border-radius: 8px;
  padding: 56px 48px;
  border: 1px solid var(--teal-b2);
  text-align: center;
}
.quiz-result.is-active {
  display: block;
  animation: cardIn 0.5s ease;
}
.result-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 16px;
}
.result-h {
  font-family: var(--fh);
  font-size: clamp(28px, 3.2vw, 38px);
  color: var(--navy);
  margin-bottom: 20px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.result-h em { font-style: italic; color: var(--teal); }
.result-p {
  font-size: 16px;
  color: var(--txt-mid);
  line-height: 1.75;
  max-width: 520px;
  margin: 0 auto 36px;
}
.result-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.result-restart {
  display: block;
  margin: 28px auto 0;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--txt-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── WHO BUILT THIS ─────────────────────────────────── */
.about, .who-built {
  padding: 120px 0;
  background: var(--ivory);
}
.about, .who-built-in {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 72px;
  align-items: center;
  margin-bottom: 80px;
}
.founders-photo {
  display: flex;
  gap: 16px;
}
.founder-card {
  flex: 1;
  background: linear-gradient(135deg, var(--ivory-deep) 0%, var(--teal-bg) 100%);
  aspect-ratio: 3/4;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
}
.founder-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(15, 118, 110, 0.08) 0%, transparent 50%);
}
.founder-label {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: rgba(255, 255, 255, 0.7);
  padding: 4px 8px;
  border-radius: 3px;
}
.founder-name {
  position: relative;
  z-index: 2;
  font-family: var(--fh);
  font-size: 16px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.92);
  padding: 8px 12px;
  border-radius: 4px;
  line-height: 1.3;
}
.founder-name span {
  display: block;
  font-size: 11px;
  color: var(--txt-light);
  font-family: var(--fb);
  font-weight: 400;
  margin-top: 2px;
}
.about, .who-built-copy h2 {
  font-size: clamp(26px, 3vw, 38px);
  margin-bottom: 20px;
}
.about, .who-built-copy h2 em {
  font-style: italic;
  color: var(--teal);
}
.about, .who-built-copy p {
  font-size: 16px;
  line-height: 1.78;
  color: var(--txt-mid);
  margin-bottom: 20px;
}

.recognition-strip {
  background: var(--white);
  padding: 36px 40px;
  border-radius: 6px;
  border: 1px solid var(--grey);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-bottom: 56px;
}
.rec-item {
  border-left: 2px solid var(--teal);
  padding-left: 20px;
}
.rec-eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 8px;
}
.rec-title {
  font-family: var(--fh);
  font-size: 16px;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 4px;
}
.rec-meta {
  font-size: 12px;
  color: var(--txt-light);
}

.cities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 48px;
  border-top: 1px solid var(--grey);
}
.city {
  padding: 0 8px;
}
.city-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-light);
  margin-bottom: 8px;
}
.city-name {
  font-family: var(--fh);
  font-size: 22px;
  color: var(--navy);
  margin-bottom: 6px;
}
.city-meta {
  font-size: 13px;
  color: var(--txt-mid);
  line-height: 1.5;
}
.city.is-future .city-name {
  color: var(--teal);
}
.city-tag {
  display: inline-block;
  font-size: 10px;
  background: var(--teal-bg);
  color: var(--teal-deep);
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-left: 8px;
  vertical-align: middle;
}

/* ── FACULTY ────────────────────────────────────────── */
.faculty {
  padding: 120px 0;
  background: var(--white);
}
.faculty-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.faculty-card {
  background: var(--ivory);
  border: 1px solid var(--grey);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.25s ease;
}
.faculty-card:hover { transform: translateY(-3px); }
.faculty-photo {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--ivory-deep) 0%, var(--teal-bg) 100%);
  position: relative;
}
.faculty-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(15, 118, 110, 0.1) 0%, transparent 55%);
}
.faculty-photo-label {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: rgba(255, 255, 255, 0.7);
  padding: 3px 7px;
  border-radius: 3px;
}
.faculty-body {
  padding: 16px;
}
.faculty-name {
  font-family: var(--fh);
  font-size: 15px;
  color: var(--navy);
  font-weight: 500;
  margin-bottom: 4px;
  line-height: 1.3;
}
.faculty-role {
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.faculty-bio {
  font-size: 12px;
  color: var(--txt-light);
  line-height: 1.55;
}

/* ── TESTIMONIALS ───────────────────────────────────── */
.testimonials {
  padding: 120px 0;
  background: var(--ivory);
}
.testi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.testi-card {
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: 6px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.testi-quote {
  font-family: var(--fh);
  font-size: 15px;
  color: var(--navy);
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}
.testi-quote::before {
  content: '"';
  font-size: 36px;
  color: var(--teal);
  line-height: 0;
  position: relative;
  top: 10px;
  margin-right: 4px;
}
.testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--grey-l);
}
.testi-photo {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ivory-deep) 0%, var(--teal-bg) 100%);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.testi-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(15, 118, 110, 0.1) 0%, transparent 55%);
}
.testi-name {
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.3;
}
.testi-role {
  font-size: 11px;
  color: var(--txt-light);
  margin-top: 2px;
}

/* ── WHAT NEXT ──────────────────────────────────────── */
.what-next {
  padding: 120px 0;
  background: var(--white);
  position: relative;
}
.next-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 100px;
}
.next-card {
  background: var(--ivory);
  border: 1px solid var(--grey);
  border-top: 3px solid var(--teal);
  border-radius: 6px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
}
.next-card:nth-child(1) { border-top-color: var(--teal); }
.next-card:nth-child(2) { border-top-color: var(--gold); }
.next-card:nth-child(3) { border-top-color: var(--red); }
.next-num {
  font-family: var(--fh);
  font-size: 28px;
  color: var(--navy);
  font-weight: 400;
  margin-bottom: 16px;
}
.next-eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-light);
  margin-bottom: 12px;
  font-weight: 600;
}
.next-text {
  font-size: 15px;
  color: var(--txt-mid);
  line-height: 1.7;
  margin-bottom: 24px;
  flex-grow: 1;
}
.next-cta {
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.next-card:nth-child(1) .next-cta { color: var(--teal); }
.next-card:nth-child(2) .next-cta { color: var(--gold); }
.next-card:nth-child(3) .next-cta { color: var(--red); }
.next-card:hover .next-cta .arrow { transform: translateX(4px); }

.closing-quote {
  text-align: center;
  font-family: var(--fh);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--teal);
  line-height: 1.45;
  max-width: 800px;
  margin: 0 auto;
  letter-spacing: -0.015em;
}

/* ── FOOTER ─────────────────────────────────────────── */
footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.7);
  padding: 80px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
.footer-brand .logo {
  color: white;
  margin-bottom: 16px;
  display: inline-block;
}
.footer-brand .logo span { color: var(--teal-light); }
.footer-brand p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  max-width: 280px;
}
.footer-col h4 {
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 12px; }
.footer-col a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--teal-light); }
.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-legal {
  display: flex;
  gap: 24px;
}
.footer-legal a { color: rgba(255, 255, 255, 0.5); }
.footer-legal a:hover { color: rgba(255, 255, 255, 0.85); }


/* ── LOGO IMAGES (real brand assets) ──────────────────── */
.logo img {
  height: 80px;
  width: auto;
  display: block;
}
.footer-brand .logo img {
  height: 52px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.partner-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid rgba(11, 23, 41, 0.06);
  border-radius: 6px;
  padding: 16px 24px;
  height: 76px;
  min-width: 140px;
  box-shadow: 0 1px 3px rgba(11, 23, 41, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.partner-mark:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(11, 23, 41, 0.08);
}
.partner-mark img {
  height: 44px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  opacity: 1;
}

/* ── HERO CANVAS (editorial placeholder for the hero) ── */
.hero-image-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}



.hc-glow-b {
  width: 260px; height: 260px;
  background: rgba(199, 168, 109, 0.18);
  bottom: -40px; right: -40px;
}

.hc-glyph {
  width: 110px;
  height: 110px;
  position: relative;
  z-index: 2;
  opacity: 0.95;
}

/* Real production photograph — landscape 3:2 with soft edge treatment */
.hero-photo {
  width: 100%;
  max-width: 680px;
  aspect-ratio: 3/2;
  border-radius: 12px;
  object-fit: cover;
  box-shadow:
    0 1px 2px rgba(11, 23, 41, 0.04),
    0 8px 24px -8px rgba(11, 23, 41, 0.12),
    0 40px 80px -24px rgba(11, 23, 41, 0.28);
  outline: 1px solid rgba(11, 23, 41, 0.05);
  outline-offset: -1px;
  display: block;
}

/* PARTNERS award row (the recognition line above the partner marks) */
.partners-award {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(15, 118, 110, 0.08);
}
.award-dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}
.award-text {
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--navy);
  text-align: center;
}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --gutter: 32px; }
  .hero1-in { grid-template-columns: 1fr; gap: 56px; }
  .hero-image-wrap { max-width: 620px; margin: 0 auto; }
  .why-in { grid-template-columns: 1fr; gap: 48px; }
  .about, .who-built-in { grid-template-columns: 1fr; gap: 56px; }
  .programmes-grid { grid-template-columns: repeat(2, 1fr); }
  .faculty-grid { grid-template-columns: repeat(3, 1fr); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --gutter: 24px; }
  body { font-size: 16px; }
  .nav-links { display: none; }
  .burger { display: flex; }
  .section, .why, .programmes, .who-you-are, .quiz-section, .about, .who-built, .faculty, .testimonials, .what-next { padding: 80px 0; }
  .hero1 { padding: 110px 24px 60px; }
  .hero2 { padding: 60px 24px; }
  .audience-grid { grid-template-columns: 1fr; gap: 12px; }
  .programmes-grid { grid-template-columns: 1fr; }
  .role-path {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: 12px 16px;
  }
  .role-path .role-icon { grid-row: 1 / 3; }
  .role-q { grid-column: 2; }
  .role-cta { grid-column: 2; text-align: left; justify-content: flex-start; padding-top: 8px; }
  .quiz-card { padding: 28px 22px; }
  .recognition-strip { grid-template-columns: 1fr; gap: 24px; }
  .cities { grid-template-columns: 1fr; gap: 24px; }
  .faculty-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: 1fr; }
  .next-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .section-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
  .hero2-cta-row { flex-direction: column; align-items: stretch; }
  .hero2-cta-row .btn { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PRODUCTION REFACTOR ADDITIONS (Phase 1)
   Adjustments for the modular static prototype. These override
   earlier preview-stage styles where needed.
   ============================================================ */

/* HERO CANVAS — landscape editorial placeholder.
   Pure CSS composition, no photograph. Matches the 3:2 aspect
   the production photography will occupy when delivered. */








/* FOUNDER CARDS — clean typographic state until real photos arrive.
   Hides empty visual slot, treats card as text-led until rebuilt
   in next phase with proper documentary photography + narrative copy. */
.founder-card::after {
  display: none;
}
.founder-card {
  padding-top: 28px;
  border-top: 2px solid var(--teal);
  text-align: left;
}
.founder-card .founder-name {
  margin-top: 0;
}


/* ============================================================
   TRUST HYGIENE PHASE 1.1
   Founders credit — text-led editorial layout.
   Replaces card-based placeholder. Pure typography, no photo
   slots. Production shoot will add documentary photographs in
   a subsequent phase.
   ============================================================ */
.founders-credit {
  border-top: 1px solid var(--teal);
  padding-top: 32px;
}
.founders-credit-label {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 28px;
}
.founder-entry {
  margin-bottom: 32px;
}
.founder-entry:last-child {
  margin-bottom: 0;
}
.founder-entry-name {
  font-family: var(--fh);
  font-size: 24px;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}
.founder-entry-role {
  font-size: 13px;
  color: var(--teal);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
}
.founder-entry-bio {
  font-size: 15px;
  color: var(--txt-mid);
  line-height: 1.55;
  margin: 0;
  max-width: 36rem;
}

/* Mobile: founders credit stacks naturally */
@media (max-width: 768px) {
  .founder-entry-name {
    font-size: 22px;
  }
  .founders-credit {
    padding-top: 24px;
  }
}

/* Dead-link pending state: marks links to pages not yet built.
   No visual change, but signals to future engineers what needs wiring up. */
a[data-pending] {
  /* Visible as normal until pages exist */
}


/* ============================================================
   TRUST HYGIENE PHASE 1.2
   Source attribution beneath statistical claims.
   ============================================================ */



/* ============================================================
   PRODUCTION REFINEMENT (Phase 1.4)
   Reserved founder portrait spaces — 4:5 aspect ratio,
   editorial neutral backgrounds. Production photographs will
   drop into these spaces within seven days.
   ============================================================ */
.founder-entry {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 36px;
}
.founder-entry:last-child {
  margin-bottom: 0;
}
.founder-portrait {
  width: 100px;
  aspect-ratio: 4/5;
  border-radius: 6px;
  background: var(--ivory-deep);
  position: relative;
  overflow: hidden;
  outline: 1px solid rgba(11, 23, 41, 0.06);
  outline-offset: -1px;
  box-shadow: 0 1px 2px rgba(11, 23, 41, 0.03);
}
.founder-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 30% 25%,
    rgba(15, 118, 110, 0.10) 0%,
    transparent 65%
  );
  pointer-events: none;
}
.founder-portrait-mark {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 18px;
  height: 1px;
  background: var(--gold);
}
.founder-entry-text {
  /* Inherits earlier .founder-entry-* type styles; no override needed */
}

/* Mobile tightening for founder entries — portraits stay visible but compact */
@media (max-width: 480px) {
  .founder-entry {
    grid-template-columns: 76px 1fr;
    gap: 18px;
    margin-bottom: 28px;
  }
  .founder-portrait {
    width: 76px;
  }
  .founder-entry-name {
    font-size: 20px;
  }
}

/* Mobile pass at 320px — ensure hero h1 and CTAs remain readable */
@media (max-width: 360px) {
  .hero-h1 {
    font-size: 30px;
    line-height: 1.18;
  }
  .hero-sub {
    font-size: 15px;
  }
  .btn {
    padding: 14px 20px;
    font-size: 14px;
  }
  .container,
  .hero1,
  .hero2,
  .why,
  .programmes,
  .who-you-are,
  .quiz-section,
  .about, .who-built,
  .what-next {
    padding-left: 18px;
    padding-right: 18px;
  }
}


/* ============================================================
   PROGRAMME PAGE — Nutrigenomics Diploma and other programmes
   Uses the homepage design system. Adds only what is new.
   ============================================================ */

/* Programme hero */
.pg-hero {
  padding: 88px 0 72px;
  background: var(--ivory);
  border-bottom: 1px solid rgba(11, 23, 41, 0.05);
}
.pg-breadcrumb {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--txt-light);
  margin-bottom: 28px;
}
.pg-breadcrumb a {
  color: var(--txt-mid);
  text-decoration: none;
  transition: color 0.2s;
}
.pg-breadcrumb a:hover { color: var(--teal); }
.pg-breadcrumb-sep { color: var(--grey); margin: 0 8px; }

.pg-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.pg-hero-eyebrow {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 20px;
}
.pg-hero-h1 {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 20px;
}
.pg-hero-h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}
.pg-hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--txt-mid);
  margin: 0 0 32px;
  max-width: 32rem;
}
.pg-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Hero canvas (reserved image space for programme photograph) */
.pg-hero-canvas {
  aspect-ratio: 3/2;
  background: var(--ivory-deep);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  outline: 1px solid rgba(11, 23, 41, 0.06);
  outline-offset: -1px;
}
.pg-hero-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(15, 118, 110, 0.10) 0%, transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(199, 168, 109, 0.06) 0%, transparent 55%);
  pointer-events: none;
}
.pg-hero-canvas-mark {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pg-hero-canvas-line {
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.pg-hero-canvas-text {
  font-family: var(--fh);
  font-size: 12px;
  font-style: italic;
  color: var(--txt-mid);
  letter-spacing: 0.02em;
}

/* Quick facts strip */
.pg-facts {
  padding: 28px 0;
  border-top: 1px solid rgba(11, 23, 41, 0.06);
  border-bottom: 1px solid rgba(11, 23, 41, 0.06);
}
.pg-facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.pg-fact-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-light);
  margin: 0 0 6px;
  font-weight: 500;
}
.pg-fact-value {
  font-family: var(--fh);
  font-size: 17px;
  color: var(--navy);
  margin: 0;
}

/* Generic programme section */
.pg-section {
  padding: 88px 0;
}
.pg-section--ivory {
  background: var(--ivory);
}
.pg-section--teal {
  background: var(--teal-bg);
}
.pg-section-header {
  max-width: 38rem;
  margin-bottom: 48px;
}
.pg-section-eyebrow {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}
.pg-section-h {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 18px;
}
.pg-section-h em {
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}
.pg-section-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--txt-mid);
  margin: 0;
}

/* Become grid (future identity outcomes) */
.become-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 48px;
}
.become-item {
  padding-left: 24px;
  border-left: 1px solid rgba(15, 118, 110, 0.25);
}
.become-num {
  font-family: var(--fh);
  font-size: 13px;
  color: var(--teal);
  font-weight: 500;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
.become-h {
  font-family: var(--fh);
  font-size: 19px;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.3;
  margin: 0 0 10px;
}
.become-p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--txt-mid);
  margin: 0;
}

/* Eligibility list */
.eligible-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.eligible-list li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--txt-mid);
}
.eligible-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 1px;
  background: var(--teal);
}
.eligible-note {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--ivory-deep);
  border-radius: 6px;
  border-left: 2px solid var(--teal);
  font-size: 14px;
  line-height: 1.6;
  color: var(--txt-mid);
  font-style: italic;
}

/* Curriculum modules */
.module-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.module {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(11, 23, 41, 0.08);
}
.module:first-child { border-top: 1px solid rgba(11, 23, 41, 0.08); }
.module-num {
  font-family: var(--fh);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--teal);
  font-weight: 500;
}
.module-h {
  font-family: var(--fh);
  font-size: 20px;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.3;
  margin: 0 0 10px;
}
.module-p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--txt-mid);
  margin: 0;
  max-width: 38rem;
}
.module-cert-note {
  margin-top: 36px;
  font-size: 14px;
  font-style: italic;
  color: var(--txt-light);
  line-height: 1.6;
}

/* How taught */
.how-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.how-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.how-list li {
  padding: 14px 0;
  border-bottom: 1px dashed rgba(11, 23, 41, 0.1);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  font-size: 15px;
}
.how-list li:last-child { border-bottom: 0; }
.how-list-label {
  color: var(--txt-light);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding-top: 2px;
}
.how-list-value {
  color: var(--txt-mid);
  line-height: 1.55;
}

/* Why / Outcomes plain prose section */
.pg-prose {
  max-width: 42rem;
}
.pg-prose p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--txt-mid);
  margin: 0 0 20px;
}
.pg-prose p:last-child { margin-bottom: 0; }

/* Outcomes — where graduates work */
.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.outcome-card {
  padding: 24px;
  background: var(--ivory);
  border-radius: 6px;
  border: 1px solid rgba(11, 23, 41, 0.06);
}
.outcome-card-label {
  font-family: var(--fh);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 8px;
}
.outcome-card-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--txt-mid);
  margin: 0;
}

/* Apply steps */
.apply-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}
.apply-step {
  padding-top: 20px;
  border-top: 2px solid var(--teal);
}
.apply-step-num {
  font-family: var(--fh);
  font-size: 32px;
  font-weight: 300;
  color: var(--teal);
  line-height: 1;
  margin: 0 0 12px;
}
.apply-step-h {
  font-family: var(--fh);
  font-size: 17px;
  font-weight: 400;
  color: var(--navy);
  margin: 0 0 8px;
}
.apply-step-p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--txt-mid);
  margin: 0;
}

.apply-final {
  margin-top: 56px;
  padding: 40px;
  background: var(--ivory-deep);
  border-radius: 8px;
  text-align: center;
}
.apply-final p {
  font-family: var(--fh);
  font-size: 19px;
  font-style: italic;
  color: var(--navy);
  font-weight: 300;
  margin: 0 0 24px;
  line-height: 1.5;
}

/* Programme page mobile */
@media (max-width: 900px) {
  .pg-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .pg-hero-h1 { font-size: 36px; }
  .pg-facts-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .become-grid { grid-template-columns: 1fr; gap: 28px; }
  .eligible-list { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: 1fr; gap: 32px; }
  .outcomes-grid { grid-template-columns: 1fr; gap: 16px; }
  .apply-steps { grid-template-columns: 1fr; gap: 24px; }
  .module { grid-template-columns: 60px 1fr; gap: 20px; padding: 24px 0; }
  .pg-section { padding: 64px 0; }
  .pg-section-h { font-size: 28px; }
}

@media (max-width: 480px) {
  .pg-hero { padding: 64px 0 48px; }
  .pg-hero-h1 { font-size: 30px; }
  .pg-hero-sub { font-size: 15px; }
  .pg-facts-grid { gap: 18px; }
  .pg-section { padding: 56px 0; }
  .pg-section-h { font-size: 24px; }
  .apply-final { padding: 28px 20px; }
  .apply-final p { font-size: 17px; }
}


/* ============================================================
   PHASE 2 FIXES
   Footer logo — invert dark logo for visibility on navy footer
   until a proper white-version logo file is supplied.
   ============================================================ */
footer .footer-brand .logo img {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.compare-soon {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  font-family: var(--fh);
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--teal);
  background: var(--teal-b2);
  border-radius: 999px;
}

/* Arogya Doot — red accent variant for the programme page */
.pg-hero--aarogya .pg-hero-eyebrow { color: var(--red); }
.pg-hero--aarogya .pg-hero-h1 em { color: var(--red); }
.pg-hero--aarogya .pg-section-eyebrow { color: var(--red); }
.pg-section--aarogya .pg-section-h em { color: var(--red); }
.pg-hero--aarogya .pg-hero-canvas-line { background: var(--red); }
.pg-hero--aarogya .pg-hero-canvas::before {
  background:
    radial-gradient(circle at 25% 30%, rgba(224, 82, 82, 0.08) 0%, transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(199, 168, 109, 0.06) 0%, transparent 55%);
}
.pg-section--aarogya .pg-section-eyebrow { color: var(--red); }
.pg-section--aarogya .become-item { border-left-color: rgba(224, 82, 82, 0.25); }
.pg-section--aarogya .become-num { color: var(--red); }
.pg-section--aarogya .module-num { color: var(--red); }
.pg-section--aarogya .outcome-card-label { color: var(--red); }
.pg-section--aarogya .apply-step { border-top-color: var(--red); }
.pg-section--aarogya .apply-step-num { color: var(--red); }
.pg-section--aarogya .eligible-list li::before { background: var(--red); }
.pg-section--aarogya .eligible-note { border-left-color: var(--red); }
.pg-section--aarogya .pg-section-h em { color: var(--red); }
.pg-hero--aarogya .btn-primary { background: var(--red); }
.pg-hero--aarogya .btn-primary:hover { background: #C44545; }
.pg-section--aarogya .btn-primary { background: var(--red); }

/* ============================================================
   PHASE 2 FIX — Quiz navigation buttons + focus state cleanup
   The nav container was being hidden by the .quiz-card rule.
   Also: distinguish keyboard focus from selected state visually.
   ============================================================ */
.quiz-nav-wrap {
  margin-top: 24px;
  padding: 24px 48px;
  background: transparent;
}
.quiz-nav-wrap .q-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* Distinguish focus state from selected state on quiz options.
   Selected: filled teal radio + teal background.
   Focus only: subtle teal outline (1px), no background change. */
.q-option:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  background: var(--ivory);
}
.q-option.is-selected:focus-visible {
  outline: 2px solid var(--teal-deep);
  outline-offset: 2px;
}
/* Remove the persistent focus styling that mimics selection */
.q-option:focus:not(:focus-visible) {
  outline: none;
}

@media (max-width: 768px) {
  .quiz-nav-wrap { padding: 20px 22px; }
  .quiz-nav-wrap .q-nav { gap: 12px; }
}


/* ============================================================
   PHASE 3 — VISUAL RICHNESS
   Quiz redesign, stats grid, shift infographic.
   ============================================================ */

/* --------------------------------------------------------
   STATS GRID — Why this field is changing
   -------------------------------------------------------- */
.why { background: var(--ivory); padding: 100px 0; position: relative; }
.why-header {
  max-width: 56rem;
  margin: 0 auto 56px;
  text-align: center;
}
.why-header h2 {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 16px 0 24px;
}
.why-header h2 em {
  font-style: italic;
  color: var(--teal);
  font-weight: 300;
}
.why-intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--txt-mid);
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 78rem;
  margin: 0 auto;
}
.stat-card {
  background: #fff;
  border: 1px solid rgba(11, 23, 41, 0.06);
  border-radius: 12px;
  padding: 36px 28px 28px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(11, 23, 41, 0.08);
}
.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  width: 40px;
  height: 3px;
  background: var(--teal);
  border-radius: 0 0 2px 2px;
}
.stat-num {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  color: var(--teal);
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}
.stat-num .stat-unit {
  font-size: 28px;
  font-weight: 400;
  margin-left: 6px;
  color: var(--teal-deep);
  letter-spacing: 0;
}
.stat-label {
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy);
  margin: 0 0 20px;
  font-weight: 500;
}
.stat-source {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--txt-light);
  font-style: italic;
  line-height: 1.5;
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(15, 118, 110, 0.18);
}

/* --------------------------------------------------------
   SHIFT INFOGRAPHIC
   -------------------------------------------------------- */
.shift {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--ivory) 0%, var(--teal-bg) 100%);
}
.shift-header {
  max-width: 56rem;
  margin: 0 auto 64px;
  text-align: center;
}
.shift-header h2 {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 16px 0 18px;
}
.shift-header h2 em {
  font-style: italic;
  color: var(--teal);
  font-weight: 300;
}
.shift-header p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--txt-mid);
  margin: 0;
}

.shift-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  max-width: 92rem;
  margin: 0 auto;
}
.shift-col {
  background: #fff;
  border-radius: 12px;
  padding: 36px 28px;
  border: 1px solid rgba(11, 23, 41, 0.06);
  position: relative;
}
.shift-col--past {
  background: var(--ivory-deep);
  opacity: 0.85;
}
.shift-col--past .shift-col-h { color: var(--txt-mid); }
.shift-col--past .shift-col-list li { color: var(--txt-light); }
.shift-col--now {
  background: #fff;
  box-shadow: 0 4px 24px rgba(15, 118, 110, 0.08);
  border-color: rgba(15, 118, 110, 0.15);
}
.shift-col--now .shift-col-tag { color: var(--teal); }
.shift-col--now .shift-col-h { color: var(--teal-deep); }
.shift-col--need {
  background: var(--teal-deep);
  color: #fff;
  border: 0;
}
.shift-col--need .shift-col-tag { color: var(--gold); }
.shift-col--need .shift-col-h { color: #fff; }
.shift-col--need .shift-col-list li {
  color: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.shift-col--need .shift-col-list li::before { background: var(--gold); }

.shift-col-tag {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-light);
  margin: 0 0 12px;
}
.shift-col-h {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 24px;
}
.shift-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shift-col-list li {
  padding: 12px 0 12px 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--txt-mid);
  border-bottom: 1px solid rgba(11, 23, 41, 0.06);
  position: relative;
}
.shift-col-list li:last-child { border-bottom: 0; }
.shift-col-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 10px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

.shift-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: var(--teal);
}

/* --------------------------------------------------------
   QUIZ REDESIGN — Two-column with prominent progress
   -------------------------------------------------------- */
.quiz-section {
  background: var(--ivory);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.quiz-bg-accent {
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle at center, rgba(15, 118, 110, 0.06) 0%, transparent 70%);
  pointer-events: none;
}
.quiz-header {
  max-width: 52rem;
  margin: 0 auto 56px;
  text-align: center;
}
.quiz-header h2 {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 16px 0 18px;
}
.quiz-header h2 em {
  font-style: italic;
  color: var(--teal);
  font-weight: 300;
}
.quiz-header p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--txt-mid);
  margin: 0;
}

.quiz-shell {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 32px;
  max-width: 84rem;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(11, 23, 41, 0.06);
  box-shadow: 0 8px 40px rgba(11, 23, 41, 0.04);
  overflow: hidden;
}

.quiz-aside {
  background: linear-gradient(160deg, var(--teal-deep) 0%, var(--teal) 100%);
  color: #fff;
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
.quiz-aside::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(199, 168, 109, 0.12) 0%, transparent 70%);
}

.quiz-aside-label {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
  position: relative;
  z-index: 1;
}
.quiz-progress-display {
  font-family: var(--fh);
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.quiz-q-num {
  font-size: 72px;
  font-weight: 300;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
}
.quiz-q-of {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
}
.quiz-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.quiz-progress-fill {
  display: block;
  height: 100%;
  width: 12.5%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.quiz-aside-mid {
  position: relative;
  z-index: 1;
}
.quiz-aside-text {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

.quiz-aside-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  z-index: 1;
}
.quiz-pill {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
}
.quiz-pill--red {
  border-color: rgba(224, 82, 82, 0.4);
  color: rgba(255, 184, 184, 0.95);
  background: rgba(224, 82, 82, 0.12);
}

.quiz-main {
  padding: 56px 56px 36px;
}
.quiz-card {
  display: none;
  animation: cardIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.quiz-card.is-active {
  display: block;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.q-text {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 32px;
}

.q-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.q-option {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  background: var(--ivory);
  border: 1px solid rgba(11, 23, 41, 0.08);
  border-radius: 10px;
  text-align: left;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--txt-dark);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.q-option:hover {
  background: #fff;
  border-color: var(--teal);
  transform: translateX(2px);
}
.q-letter {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--teal);
  width: 32px;
  height: 32px;
  border: 1px solid rgba(15, 118, 110, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.q-option:hover .q-letter {
  background: var(--teal-bg);
  border-color: var(--teal);
}
.q-opt-text {
  flex: 1;
}
.q-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.q-option.is-selected {
  background: var(--teal-bg);
  border-color: var(--teal);
  box-shadow: 0 2px 12px rgba(15, 118, 110, 0.12);
}
.q-option.is-selected .q-letter {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.q-option.is-selected .q-check {
  background: var(--teal);
  color: #fff;
}

.q-option:focus-visible {
  outline: 2px solid var(--teal-deep);
  outline-offset: 2px;
}
.q-option:focus:not(:focus-visible) {
  outline: none;
}

.quiz-nav-wrap {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(11, 23, 41, 0.08);
}
.quiz-nav-wrap .q-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.q-back, .q-next {
  font: inherit;
  font-family: var(--fb);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.q-back {
  background: transparent;
  color: var(--txt-mid);
  border-color: rgba(11, 23, 41, 0.18);
}
.q-back:hover:not(:disabled) {
  border-color: var(--teal);
  color: var(--teal);
}
.q-back:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.q-next {
  background: var(--teal);
  color: #fff;
}
.q-next:hover:not(:disabled) {
  background: var(--teal-deep);
  transform: translateX(2px);
}
.q-next:disabled {
  background: rgba(11, 23, 41, 0.1);
  color: rgba(11, 23, 41, 0.4);
  cursor: not-allowed;
}

/* --------------------------------------------------------
   RESPONSIVE — Mobile and tablet adaptations
   -------------------------------------------------------- */
@media (max-width: 980px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .shift-grid { grid-template-columns: 1fr; gap: 24px; }
  .shift-arrow {
    transform: rotate(90deg);
    margin: 0 auto;
    padding: 4px 0;
    opacity: 0.45;
  }
  .shift-arrow svg { width: 40px; height: 16px; }
  .quiz-shell { grid-template-columns: 1fr; }
  .quiz-aside { padding: 32px 28px; }
  .quiz-aside-pills { display: none; }
  .quiz-main { padding: 36px 28px; }
}

@media (max-width: 640px) {
  .why, .shift, .quiz-section { padding: 64px 0; }
  .why-header h2, .shift-header h2, .quiz-header h2 { font-size: 28px; }
  .stats-grid { grid-template-columns: 1fr; gap: 16px; }
  .stat-num { font-size: 48px; }
  .stat-num .stat-unit { font-size: 22px; }
  .shift-col { padding: 28px 22px; }
  .quiz-q-num { font-size: 56px; }
  .q-text { font-size: 20px; }
  .q-option { padding: 14px 16px; gap: 12px; grid-template-columns: 32px 1fr auto; }
  .q-letter { width: 28px; height: 28px; font-size: 12px; }
  .quiz-aside { padding: 28px 22px; gap: 24px; }
  .quiz-main { padding: 28px 22px; }
  .quiz-nav-wrap { margin-top: 24px; }
  .q-back, .q-next { padding: 12px 20px; font-size: 13px; }
}


/* ============================================================
   QUIZ COPY + VISUAL PUNCH (Phase 3.1)
   Question gets a real visual frame: teal accent, soft tint,
   larger size. Answer options get clearer interaction states.
   ============================================================ */

/* Question frame — gives the question itself real visual weight */
.q-frame {
  position: relative;
  padding: 24px 24px 24px 32px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.04) 0%, rgba(15, 118, 110, 0.01) 100%);
  border-left: 4px solid var(--teal);
  border-radius: 0 8px 8px 0;
  margin-bottom: 32px;
}
.q-frame::before {
  content: "Q";
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--fh);
  font-size: 56px;
  font-weight: 300;
  color: rgba(15, 118, 110, 0.10);
  line-height: 1;
  letter-spacing: -0.02em;
}

.q-text {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0;
  padding-right: 56px;
  position: relative;
  z-index: 1;
}

/* Make the answer options feel more clickable with a clearer hover lift */
.q-option {
  cursor: pointer;
  position: relative;
}
.q-option::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-right: 2px solid rgba(11, 23, 41, 0.18);
  border-bottom: 2px solid rgba(11, 23, 41, 0.18);
  transform: translateY(-50%) rotate(-45deg);
  opacity: 0;
  transition: all 0.2s ease;
}
.q-option:hover::after {
  opacity: 0.8;
  right: 12px;
  border-color: var(--teal);
}
.q-option.is-selected::after {
  display: none;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .q-frame {
    padding: 20px 20px 20px 24px;
    margin-bottom: 24px;
  }
  .q-frame::before {
    font-size: 40px;
    top: 12px;
    right: 16px;
  }
  .q-text {
    font-size: 22px;
    padding-right: 40px;
  }
}


/* ============================================================
   PHASE 4 — Customer-centric quiz + warmer brand palette
   Per-option colour accents make the four pathways visually
   distinct. Each colour also signals the programme category:
     A teal    → Nutrigenomics (clinical, scientific)
     B sage    → Integrative Health (wellness, balanced)
     C gold    → Lifestyle Wellness (career, growth)
     D terra   → Arogya Doot (community, warmth)
   ============================================================ */

/* Option base — slightly bolder visual to carry the colour */
.q-option {
  border-width: 1.5px;
}

/* Option A — Teal (clinical pathway) */
.qopt-teal .q-letter {
  border-color: rgba(15, 118, 110, 0.35);
  color: var(--teal);
  background: rgba(15, 118, 110, 0.04);
}
.qopt-teal:hover {
  border-color: var(--teal);
  background: rgba(15, 118, 110, 0.04);
}
.qopt-teal:hover .q-letter {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.qopt-teal.is-selected {
  background: rgba(15, 118, 110, 0.08);
  border-color: var(--teal);
  box-shadow: 0 2px 16px rgba(15, 118, 110, 0.12);
}
.qopt-teal.is-selected .q-letter {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.qopt-teal.is-selected .q-check {
  background: var(--teal);
  color: #fff;
}

/* Option B — Sage Green (integrative pathway) */
.qopt-sage .q-letter {
  border-color: rgba(111, 153, 104, 0.45);
  color: var(--sage-deep);
  background: rgba(111, 153, 104, 0.05);
}
.qopt-sage:hover {
  border-color: var(--sage);
  background: rgba(111, 153, 104, 0.05);
}
.qopt-sage:hover .q-letter {
  background: var(--sage);
  color: #fff;
  border-color: var(--sage);
}
.qopt-sage.is-selected {
  background: rgba(111, 153, 104, 0.10);
  border-color: var(--sage);
  box-shadow: 0 2px 16px rgba(111, 153, 104, 0.14);
}
.qopt-sage.is-selected .q-letter {
  background: var(--sage);
  color: #fff;
  border-color: var(--sage);
}
.qopt-sage.is-selected .q-check {
  background: var(--sage);
  color: #fff;
}

/* Option C — Gold (career pathway) */
.qopt-gold .q-letter {
  border-color: rgba(168, 138, 79, 0.50);
  color: var(--gold-deep);
  background: rgba(168, 138, 79, 0.06);
}
.qopt-gold:hover {
  border-color: var(--gold-deep);
  background: rgba(168, 138, 79, 0.06);
}
.qopt-gold:hover .q-letter {
  background: var(--gold-deep);
  color: #fff;
  border-color: var(--gold-deep);
}
.qopt-gold.is-selected {
  background: rgba(168, 138, 79, 0.10);
  border-color: var(--gold-deep);
  box-shadow: 0 2px 16px rgba(168, 138, 79, 0.16);
}
.qopt-gold.is-selected .q-letter {
  background: var(--gold-deep);
  color: #fff;
  border-color: var(--gold-deep);
}
.qopt-gold.is-selected .q-check {
  background: var(--gold-deep);
  color: #fff;
}

/* Option D — Terracotta (community pathway) */
.qopt-terra .q-letter {
  border-color: rgba(194, 95, 77, 0.45);
  color: var(--terra-deep);
  background: rgba(194, 95, 77, 0.05);
}
.qopt-terra:hover {
  border-color: var(--terra);
  background: rgba(194, 95, 77, 0.05);
}
.qopt-terra:hover .q-letter {
  background: var(--terra);
  color: #fff;
  border-color: var(--terra);
}
.qopt-terra.is-selected {
  background: rgba(194, 95, 77, 0.10);
  border-color: var(--terra);
  box-shadow: 0 2px 16px rgba(194, 95, 77, 0.16);
}
.qopt-terra.is-selected .q-letter {
  background: var(--terra);
  color: #fff;
  border-color: var(--terra);
}
.qopt-terra.is-selected .q-check {
  background: var(--terra);
  color: #fff;
}

/* Quiz aside pills — colour them to match the four pathways */
.quiz-aside-pills .quiz-pill:nth-child(1) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(199, 168, 109, 0.45);
  color: #fff;
}
.quiz-aside-pills .quiz-pill:nth-child(2) {
  background: rgba(111, 153, 104, 0.20);
  border-color: rgba(111, 153, 104, 0.50);
  color: rgba(220, 240, 215, 0.95);
}
.quiz-aside-pills .quiz-pill:nth-child(3) {
  background: rgba(199, 168, 109, 0.20);
  border-color: rgba(199, 168, 109, 0.50);
  color: rgba(245, 230, 200, 0.95);
}
.quiz-aside-pills .quiz-pill:nth-child(4) {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
}
.quiz-aside-pills .quiz-pill--red {
  background: rgba(194, 95, 77, 0.22) !important;
  border-color: rgba(194, 95, 77, 0.55) !important;
  color: rgba(255, 215, 205, 0.95) !important;
}

/* Stats grid — warmer multi-colour treatment */
.stats-grid .stat-card:nth-child(1)::before { background: var(--teal); }
.stats-grid .stat-card:nth-child(1) .stat-num { color: var(--teal); }
.stats-grid .stat-card:nth-child(1) .stat-num .stat-unit { color: var(--teal-deep); }

.stats-grid .stat-card:nth-child(2)::before { background: var(--sage); }
.stats-grid .stat-card:nth-child(2) .stat-num { color: var(--sage); }
.stats-grid .stat-card:nth-child(2) .stat-num .stat-unit { color: var(--sage-deep); }

.stats-grid .stat-card:nth-child(3)::before { background: var(--gold-deep); }
.stats-grid .stat-card:nth-child(3) .stat-num { color: var(--gold-deep); }
.stats-grid .stat-card:nth-child(3) .stat-num .stat-unit { color: #876c3a; }

.stats-grid .stat-card:nth-child(4)::before { background: var(--terra); }
.stats-grid .stat-card:nth-child(4) .stat-num { color: var(--terra); }
.stats-grid .stat-card:nth-child(4) .stat-num .stat-unit { color: var(--terra-deep); }

/* Programme cards — each programme gets its pathway colour as a top accent strip */
.programmes-grid .prog-card { position: relative; }
.programmes-grid .prog-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 56px;
  height: 3px;
  border-radius: 0 0 2px 2px;
}
.programmes-grid .prog-card:nth-child(1)::before { background: var(--teal); }
.programmes-grid .prog-card:nth-child(2)::before { background: var(--sage); }
.programmes-grid .prog-card:nth-child(3)::before { background: var(--gold-deep); }
.programmes-grid .prog-card:nth-child(4)::before { background: var(--teal-deep); }
.programmes-grid .prog-card:nth-child(5)::before { background: var(--terra); }


/* ============================================================
   PHASE 5 — Result moment redesign
   Real moment of arrival after the eight-question journey.
   ============================================================ */

.quiz-result {
  display: none;
  max-width: 84rem;
  margin: 0 auto;
}
.quiz-result.is-active {
  display: block;
  animation: cardIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.result-shell {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(11, 23, 41, 0.06);
  box-shadow: 0 12px 48px rgba(11, 23, 41, 0.06);
  padding: 56px;
  position: relative;
  overflow: hidden;
}
.result-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: var(--teal);
  transition: background 0.4s ease;
}

/* Pathway colour theming — set by JS via data-pathway */
.quiz-result[data-pathway="teal"] .result-shell::before { background: var(--teal); }
.quiz-result[data-pathway="teal"] .result-badge { background: rgba(15, 118, 110, 0.10); color: var(--teal-deep); }
.quiz-result[data-pathway="teal"] .result-h em { color: var(--teal); }
.quiz-result[data-pathway="teal"] .result-learn-list li::before { background: var(--teal); }

.quiz-result[data-pathway="sage"] .result-shell::before { background: var(--sage); }
.quiz-result[data-pathway="sage"] .result-badge { background: rgba(111, 153, 104, 0.14); color: var(--sage-deep); }
.quiz-result[data-pathway="sage"] .result-h em { color: var(--sage-deep); }
.quiz-result[data-pathway="sage"] .result-learn-list li::before { background: var(--sage); }

.quiz-result[data-pathway="gold"] .result-shell::before { background: var(--gold-deep); }
.quiz-result[data-pathway="gold"] .result-badge { background: rgba(168, 138, 79, 0.14); color: var(--gold-deep); }
.quiz-result[data-pathway="gold"] .result-h em { color: var(--gold-deep); }
.quiz-result[data-pathway="gold"] .result-learn-list li::before { background: var(--gold-deep); }

.quiz-result[data-pathway="terra"] .result-shell::before { background: var(--terra); }
.quiz-result[data-pathway="terra"] .result-badge { background: rgba(194, 95, 77, 0.14); color: var(--terra-deep); }
.quiz-result[data-pathway="terra"] .result-h em { color: var(--terra-deep); }
.quiz-result[data-pathway="terra"] .result-learn-list li::before { background: var(--terra); }

/* Header block */
.result-header { margin-bottom: 32px; }
.result-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 24px;
}
.result-eyebrow {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--txt-light);
  margin: 0 0 12px;
}
.result-h {
  font-family: var(--fh);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 10px;
}
.result-h em {
  font-style: italic;
  font-weight: 300;
}
.result-tag {
  font-size: 15px;
  color: var(--txt-mid);
  margin: 0;
  font-style: italic;
}

.result-message {
  font-size: 17px;
  line-height: 1.65;
  color: var(--txt-dark);
  margin: 0 0 36px;
  padding: 24px 0;
  border-top: 1px dashed rgba(11, 23, 41, 0.10);
  border-bottom: 1px dashed rgba(11, 23, 41, 0.10);
}

/* Meta strip — duration, mode, audience */
.result-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0 0 36px;
  padding: 24px;
  background: var(--ivory);
  border-radius: 10px;
}
.result-meta-item { text-align: left; }
.result-meta-label {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-light);
  margin: 0 0 6px;
}
.result-meta-value {
  font-family: var(--fh);
  font-size: 17px;
  font-weight: 400;
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
}

/* What you will learn */
.result-learn { margin-bottom: 40px; }
.result-learn-label {
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 16px;
}
.result-learn-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
}
.result-learn-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--txt-dark);
}
.result-learn-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}

/* CTAs */
.result-ctas {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.result-ctas .btn { flex: 0 1 auto; }

.result-restart {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--txt-light);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}
.result-restart:hover { color: var(--teal); }

/* Mobile */
@media (max-width: 640px) {
  .result-shell { padding: 32px 24px; }
  .result-h { font-size: 30px; }
  .result-meta { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .result-learn-list { grid-template-columns: 1fr; }
  .result-ctas { flex-direction: column; }
  .result-ctas .btn { width: 100%; text-align: center; }
}


/* ============================================================
   PHASE 6 — Wellness wheel in the hero
   Five-segment SVG emblem with the WinSkill logo at centre.
   Each segment links to its programme page.
   ============================================================ */

.hero-wheel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 8px;
}

.ww-svg {
  width: 100%;
  height: auto;
  max-width: 480px;
  display: block;
  filter: drop-shadow(0 24px 48px rgba(11, 23, 41, 0.08));
  animation: wheel-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes wheel-in {
  0% {
    opacity: 0;
    transform: scale(0.92) rotate(-6deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Segment interactions */
.ww-seg {
  cursor: pointer;
  outline: none;
}
.ww-seg-path {
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: 250px 250px;
}
.ww-seg:hover .ww-seg-path,
.ww-seg:focus-visible .ww-seg-path {
  opacity: 0.92;
  transform: scale(1.018);
}
.ww-seg:focus-visible .ww-seg-path {
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 2;
}

/* Curved label typography */
.ww-label {
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

/* Caption below the wheel */
.hero-wheel-caption {
  font-family: var(--fh);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--txt-mid);
  margin: 4px 0 0;
  letter-spacing: 0.01em;
  text-align: center;
  opacity: 0;
  animation: caption-in 0.7s ease 0.6s forwards;
}

@keyframes caption-in {
  to { opacity: 1; transform: translateY(0); }
  from { opacity: 0; transform: translateY(6px); }
}

/* Gentle continuous breathing animation on the wheel after entry */
@media (prefers-reduced-motion: no-preference) {
  .ww-svg {
    animation: wheel-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both,
               wheel-breathe 8s ease-in-out 1s infinite;
  }
  @keyframes wheel-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ww-svg, .hero-wheel-caption {
    animation: none;
    opacity: 1;
  }
}

/* Mobile adjustments */
@media (max-width: 980px) {
  .hero-wheel {
    max-width: 420px;
    margin-top: 20px;
  }
}

@media (max-width: 640px) {
  .hero-wheel {
    max-width: 320px;
  }
  .ww-label {
    font-size: 9px;
    letter-spacing: 0.06em;
  }
  .hero-wheel-caption {
    font-size: 14px;
  }
}


/* ============================================================
   PHASE 8 — PATHWAY DISCOVERY STUDIO
   Premium counselling-style quiz experience.
   ============================================================ */

/* Section header refinement */
.quiz-header h2 em { color: var(--gold-deep); }

/* Quiz shell — slightly wider aside for the journey list */
.quiz-shell {
  grid-template-columns: 380px 1fr;
}

/* ── Left aside: journey panel with DNA pattern ── */
.quiz-aside {
  padding: 0;
  position: relative;
  overflow: hidden;
}
.quiz-aside::before { display: none; } /* remove old radial gradient */

.quiz-aside-pattern {
  position: absolute;
  inset: 0;
  background-color: var(--teal-deep);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 0),
    radial-gradient(circle at 20px 30px, rgba(199, 168, 109, 0.06) 1.5px, transparent 0);
  background-size: 28px 28px, 60px 60px;
  background-position: 0 0, 14px 15px;
}
.quiz-aside-pattern::after {
  /* Subtle radial glow at the top */
  content: "";
  position: absolute;
  top: -120px;
  left: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(199, 168, 109, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

.quiz-aside-inner {
  position: relative;
  z-index: 1;
  padding: 44px 32px 44px 40px;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #fff;
}

.quiz-aside-label {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 28px;
}

/* ── Journey list ── */
.journey-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: js;
  flex: 1;
}
.journey-stage {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 10px 0;
  position: relative;
  transition: opacity 0.4s ease;
}
.journey-stage + .journey-stage::before {
  content: "";
  position: absolute;
  left: 20px;
  top: -10px;
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.10);
}

.js-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.js-text {
  display: flex;
  flex-direction: column;
  padding-top: 6px;
}
.js-name {
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.52);
  line-height: 1.25;
  margin-bottom: 2px;
  transition: color 0.35s ease;
}
.js-desc {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.32);
  letter-spacing: 0.01em;
  line-height: 1.4;
  transition: color 0.35s ease;
}

/* Done stage */
.journey-stage.is-done .js-num {
  background: rgba(199, 168, 109, 0.16);
  border-color: rgba(199, 168, 109, 0.45);
  color: var(--gold);
}
.journey-stage.is-done .js-name { color: rgba(255, 255, 255, 0.72); }
.journey-stage.is-done .js-desc { color: rgba(255, 255, 255, 0.35); }

/* Active stage — gentle gold glow */
.journey-stage.is-active .js-num {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--teal-deep);
  font-weight: 500;
  box-shadow:
    0 0 0 4px rgba(199, 168, 109, 0.16),
    0 0 24px rgba(199, 168, 109, 0.28);
}
.journey-stage.is-active .js-name {
  color: #fff;
  font-weight: 500;
}
.journey-stage.is-active .js-desc { color: rgba(255, 255, 255, 0.62); }

/* Final stage (Recommended Pathway) has its own treatment */
.journey-stage.is-final .js-num {
  border-style: dashed;
}

/* ── Right panel: warm counselling moment ── */
.quiz-main {
  background: var(--ivory);
  padding: 56px 56px 36px;
}

.quiz-card {
  display: none;
  animation: cardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.quiz-card.is-active { display: block; }

.q-label {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 18px;
}
.q-label-sep {
  margin: 0 8px;
  color: rgba(168, 138, 79, 0.5);
}
.q-label-stage {
  color: var(--txt-light);
  letter-spacing: 0.14em;
}

.q-frame { display: none; }  /* old frame removed */

.q-text {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin: 0 0 14px;
}
.q-helper {
  font-size: 14px;
  line-height: 1.55;
  color: var(--txt-mid);
  margin: 0 0 36px;
  font-style: italic;
  font-family: var(--fh);
}

/* ── Two-line answer options ── */
.q-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.q-option {
  display: grid;
  grid-template-columns: 44px 1fr 28px;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 24px;
  background: #fff;
  border: 1.5px solid rgba(11, 23, 41, 0.07);
  border-radius: 14px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 1px 2px rgba(11, 23, 41, 0.02);
}
.q-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(11, 23, 41, 0.06);
}
.q-option::after { display: none; }  /* old chevron removed */

.q-letter {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 500;
  flex-shrink: 0;
  transition: all 0.25s ease;
  margin-top: 2px;
}

.q-opt-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}
.q-opt-title {
  font-family: var(--fb);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
  letter-spacing: -0.005em;
}
.q-opt-sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--txt-mid);
  font-weight: 400;
}

.q-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  transition: all 0.25s ease;
}

/* Override pathway colour states to match new option layout */
.qopt-teal .q-letter   { border: 1px solid rgba(15, 118, 110, 0.35); color: var(--teal);      background: rgba(15, 118, 110, 0.04); }
.qopt-sage .q-letter   { border: 1px solid rgba(111, 153, 104, 0.45); color: var(--sage-deep); background: rgba(111, 153, 104, 0.05); }
.qopt-gold .q-letter   { border: 1px solid rgba(168, 138, 79, 0.50); color: var(--gold-deep); background: rgba(168, 138, 79, 0.06); }
.qopt-terra .q-letter  { border: 1px solid rgba(194, 95, 77, 0.45); color: var(--terra-deep); background: rgba(194, 95, 77, 0.05); }

.qopt-teal:hover  { border-color: var(--teal); }
.qopt-sage:hover  { border-color: var(--sage); }
.qopt-gold:hover  { border-color: var(--gold-deep); }
.qopt-terra:hover { border-color: var(--terra); }

.qopt-teal:hover .q-letter   { background: var(--teal);      color: #fff; border-color: var(--teal); }
.qopt-sage:hover .q-letter   { background: var(--sage);      color: #fff; border-color: var(--sage); }
.qopt-gold:hover .q-letter   { background: var(--gold-deep); color: #fff; border-color: var(--gold-deep); }
.qopt-terra:hover .q-letter  { background: var(--terra);     color: #fff; border-color: var(--terra); }

.qopt-teal.is-selected  { background: rgba(15, 118, 110, 0.05);  border-color: var(--teal);      box-shadow: 0 4px 18px rgba(15, 118, 110, 0.10); }
.qopt-sage.is-selected  { background: rgba(111, 153, 104, 0.07); border-color: var(--sage);      box-shadow: 0 4px 18px rgba(111, 153, 104, 0.12); }
.qopt-gold.is-selected  { background: rgba(168, 138, 79, 0.08);  border-color: var(--gold-deep); box-shadow: 0 4px 18px rgba(168, 138, 79, 0.14); }
.qopt-terra.is-selected { background: rgba(194, 95, 77, 0.07);   border-color: var(--terra);     box-shadow: 0 4px 18px rgba(194, 95, 77, 0.14); }

.qopt-teal.is-selected .q-letter   { background: var(--teal);      color: #fff; border-color: var(--teal); }
.qopt-sage.is-selected .q-letter   { background: var(--sage);      color: #fff; border-color: var(--sage); }
.qopt-gold.is-selected .q-letter   { background: var(--gold-deep); color: #fff; border-color: var(--gold-deep); }
.qopt-terra.is-selected .q-letter  { background: var(--terra);     color: #fff; border-color: var(--terra); }

.qopt-teal.is-selected .q-check   { background: var(--teal);      color: #fff; }
.qopt-sage.is-selected .q-check   { background: var(--sage);      color: #fff; }
.qopt-gold.is-selected .q-check   { background: var(--gold-deep); color: #fff; }
.qopt-terra.is-selected .q-check  { background: var(--terra);     color: #fff; }

/* ── Microcopy below options ── */
.q-microcopy {
  font-family: var(--fh);
  font-style: italic;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--txt-light);
  text-align: center;
  margin: 32px auto 0;
  max-width: 460px;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

/* ── Continue button ── */
.quiz-nav-wrap {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(11, 23, 41, 0.07);
}
.q-next {
  background: var(--teal);
  color: #fff;
  padding: 16px 32px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 0;
  box-shadow: 0 4px 16px rgba(15, 118, 110, 0.20);
  transition: all 0.25s ease;
}
.q-next:hover:not(:disabled) {
  background: var(--teal-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(15, 118, 110, 0.28);
}
.q-next:disabled {
  background: rgba(11, 23, 41, 0.08);
  color: rgba(11, 23, 41, 0.32);
  box-shadow: none;
}
.q-next .arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.2s ease;
}
.q-next:hover:not(:disabled) .arrow { transform: translateX(3px); }

.q-back {
  background: transparent;
  border: 1px solid rgba(11, 23, 41, 0.18);
  color: var(--txt-mid);
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
}
.q-back:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.q-back:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Result moment — quiet revelation ── */
.result-counsel {
  font-family: var(--fh);
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: var(--txt-mid);
  text-align: center;
  margin: 24px auto 20px;
  max-width: 600px;
  padding: 20px 24px;
  background: var(--ivory);
  border-radius: 10px;
  border: 1px dashed rgba(11, 23, 41, 0.10);
}

.result-h {
  font-size: 38px;
  line-height: 1.15;
}
.result-h em {
  display: block;
  margin-top: 8px;
  font-size: 32px;
}

/* ── Mobile ── */
@media (max-width: 980px) {
  .quiz-shell { grid-template-columns: 1fr; }
  .quiz-aside-inner { padding: 32px 24px; }

  /* On mobile, collapse journey to a horizontal step strip */
  .journey-list {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 4px 0;
    margin: 0 -4px;
  }
  .journey-stage {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0;
    min-width: 110px;
    flex-shrink: 0;
  }
  .journey-stage + .journey-stage::before { display: none; }
  .js-text { padding-top: 0; }
  .js-name { font-size: 13px; }
  .js-desc { display: none; }
}

@media (max-width: 640px) {
  .quiz-main { padding: 32px 22px; }
  .q-text { font-size: 22px; }
  .q-helper { font-size: 13px; margin-bottom: 24px; }
  .q-option { padding: 18px 18px; grid-template-columns: 36px 1fr 22px; gap: 14px; }
  .q-letter { width: 34px; height: 34px; font-size: 13px; }
  .q-opt-title { font-size: 14.5px; }
  .q-opt-sub { font-size: 12.5px; }
  .q-microcopy { font-size: 12.5px; margin-top: 24px; }
  .quiz-nav-wrap { margin-top: 24px; }
  .q-back, .q-next { padding: 12px 22px; font-size: 13px; }

  .result-h { font-size: 28px; }
  .result-h em { font-size: 22px; }
}


/* ============================================================
   PHASE 9 — AUDIENCE PAGES + WHO YOU ARE + WHY WINSKILL
   ============================================================ */

/* ── Breadcrumb ── */
.audience-breadcrumb {
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--txt-light);
  margin: 0 0 32px;
  text-transform: uppercase;
}
.audience-breadcrumb a {
  color: var(--txt-mid);
  text-decoration: none;
  transition: color 0.2s ease;
}
.audience-breadcrumb a:hover { color: var(--teal); }
.audience-breadcrumb-sep { margin: 0 10px; color: rgba(11, 23, 41, 0.25); }
.audience-breadcrumb-active { color: var(--navy); }

/* ── Audience hero ── */
.audience-hero {
  position: relative;
  background: var(--ivory);
  padding: 80px 0 72px;
  overflow: hidden;
}
.audience-hero-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15, 118, 110, 0.06) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.5;
}
.audience-hero .container { position: relative; z-index: 1; }

.audience-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 56rem;
}
.audience-hero-badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(15, 118, 110, 0.08);
  color: var(--teal-deep);
  border-radius: 999px;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}
.audience-hero-h1 {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--navy);
  margin: 0 0 24px;
}
.audience-hero-h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}
.audience-hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--txt-mid);
  margin: 0 0 36px;
  max-width: 48rem;
}
.audience-hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Per-audience pathway colour accents on hero badge and h1 em */
.audience-hero--sage .audience-hero-badge   { background: rgba(111, 153, 104, 0.10); color: var(--sage-deep); }
.audience-hero--sage .audience-hero-h1 em   { color: var(--sage-deep); }
.audience-hero--gold .audience-hero-badge   { background: rgba(168, 138, 79, 0.12);  color: var(--gold-deep); }
.audience-hero--gold .audience-hero-h1 em   { color: var(--gold-deep); }
.audience-hero--terra .audience-hero-badge  { background: rgba(194, 95, 77, 0.10);   color: var(--terra-deep); }
.audience-hero--terra .audience-hero-h1 em  { color: var(--terra-deep); }
.audience-hero--teal-deep .audience-hero-badge { background: rgba(10, 89, 84, 0.10); color: var(--teal-deep); }
.audience-hero--teal-deep .audience-hero-h1 em { color: var(--teal-deep); }

/* ── Audience section base ── */
.audience-section { padding: 72px 0; }
.audience-section:nth-child(even) { background: var(--ivory); }
.audience-section-header {
  max-width: 52rem;
  margin: 0 auto 48px;
  text-align: left;
}
.audience-section-header .eyebrow {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
}
.audience-section-header h2 {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin: 0 0 16px;
}
.audience-section-header h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}
.audience-section-header p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--txt-mid);
  margin: 0;
}

.audience-section-body {
  max-width: 52rem;
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--txt-dark);
}
.audience-section-body p { margin: 0 0 16px; }
.audience-section-body p:last-child { margin-bottom: 0; }

/* ── Pillars grid ── */
.audience-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.audience-pillar {
  background: #fff;
  border: 1px solid rgba(11, 23, 41, 0.06);
  border-radius: 12px;
  padding: 28px 28px 24px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.audience-pillar:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(11, 23, 41, 0.06);
}
.audience-pillar-num {
  display: inline-block;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--teal);
  padding: 4px 10px;
  background: rgba(15, 118, 110, 0.06);
  border-radius: 4px;
  margin-bottom: 14px;
}
.audience-pillar-h {
  font-family: var(--fh);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--navy);
  margin: 0 0 10px;
  line-height: 1.25;
}
.audience-pillar-p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--txt-mid);
  margin: 0;
}

/* ── Outcomes grid ── */
.audience-outcomes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 36px;
  margin-top: 8px;
}
.audience-outcome {
  padding: 4px 0 20px;
  border-bottom: 1px solid rgba(11, 23, 41, 0.07);
}
.audience-outcome:nth-last-child(-n+2) { border-bottom: 0; }
.audience-outcome-h {
  font-family: var(--fh);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.008em;
  color: var(--navy);
  margin: 0 0 8px;
}
.audience-outcome-p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--txt-mid);
  margin: 0;
}

/* ── Recommended programme block ── */
.audience-recommend {
  padding: 72px 0;
  background: linear-gradient(180deg, var(--ivory) 0%, var(--teal-bg) 100%);
}
.audience-recommend-shell {
  background: #fff;
  border-radius: 16px;
  padding: 48px 56px;
  border: 1px solid rgba(15, 118, 110, 0.10);
  box-shadow: 0 8px 32px rgba(11, 23, 41, 0.04);
  max-width: 56rem;
  margin: 0 auto;
}
.audience-recommend-label {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 16px;
}
.audience-recommend-h {
  font-family: var(--fh);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin: 0 0 12px;
  line-height: 1.15;
}
.audience-recommend-kicker {
  font-size: 17px;
  line-height: 1.55;
  color: var(--txt-mid);
  margin: 0 0 28px;
}
.audience-recommend-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Closing CTA ── */
.audience-close { padding: 80px 0; background: var(--ivory); }
.audience-close-shell {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}
.audience-close-eyebrow {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
}
.audience-close-h {
  font-family: var(--fh);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin: 0 0 18px;
  line-height: 1.15;
}
.audience-close-h em {
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}
.audience-close-p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--txt-mid);
  margin: 0 auto 28px;
  max-width: 44rem;
}
.audience-close-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── WHO YOU ARE LANDING ── */
.wya-hero { padding: 80px 0 64px; background: var(--ivory); position: relative; overflow: hidden; }
.wya-hero-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(15, 118, 110, 0.05) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.6;
}
.wya-hero .container { position: relative; z-index: 1; max-width: 64rem; }
.wya-hero-h1 {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 54px;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--navy);
  margin: 0 0 22px;
  max-width: 48rem;
}
.wya-hero-h1 em { font-style: italic; font-weight: 300; color: var(--teal); }
.wya-hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--txt-mid);
  margin: 0;
  max-width: 48rem;
}

.wya-cards { padding: 64px 0 32px; }
.wya-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 76rem;
  margin: 0 auto;
}
.aud-card {
  background: #fff;
  border: 1px solid rgba(11, 23, 41, 0.07);
  border-radius: 14px;
  padding: 36px 32px 32px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.aud-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--teal);
}
.aud-card--sage::before  { background: var(--sage); }
.aud-card--gold::before  { background: var(--gold-deep); }
.aud-card--terra::before { background: var(--terra); }
.aud-card--teal-deep::before { background: var(--teal-deep); }

.aud-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(11, 23, 41, 0.10);
  border-color: rgba(15, 118, 110, 0.20);
}
.aud-card-badge {
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--teal-deep);
  text-transform: uppercase;
}
.aud-card--sage .aud-card-badge { color: var(--sage-deep); }
.aud-card--gold .aud-card-badge { color: var(--gold-deep); }
.aud-card--terra .aud-card-badge { color: var(--terra-deep); }
.aud-card--teal-deep .aud-card-badge { color: var(--teal-deep); }

.aud-card-h {
  font-family: var(--fh);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--navy);
  margin: 0;
  line-height: 1.22;
}
.aud-card-p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--txt-mid);
  margin: 0;
  flex-grow: 1;
}
.aud-card-cta {
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 500;
  color: var(--teal);
  margin-top: 8px;
  letter-spacing: 0.01em;
}
.aud-card--sage .aud-card-cta { color: var(--sage-deep); }
.aud-card--gold .aud-card-cta { color: var(--gold-deep); }
.aud-card--terra .aud-card-cta { color: var(--terra-deep); }
.aud-card--teal-deep .aud-card-cta { color: var(--teal-deep); }
.aud-card-cta .arrow { display: inline-block; transition: transform 0.2s ease; margin-left: 4px; }
.aud-card:hover .aud-card-cta .arrow { transform: translateX(3px); }

.wya-quiz-nudge { padding: 56px 0 96px; }
.wya-quiz-nudge-shell {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
  padding: 48px 40px;
  background: var(--teal-deep);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
  background-size: 28px 28px;
  border-radius: 14px;
  color: #fff;
}
.wya-quiz-nudge-eyebrow {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}
.wya-quiz-nudge-h {
  font-family: var(--fh);
  font-size: 32px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.2;
}
.wya-quiz-nudge-h em { font-style: italic; font-weight: 300; color: var(--gold); }
.wya-quiz-nudge-p {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 28px;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* ── WHY WINSKILL ── */
.why-hero { padding: 80px 0 64px; background: var(--ivory); position: relative; overflow: hidden; }
.why-hero-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(15, 118, 110, 0.05) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.6;
}
.why-hero .container { position: relative; z-index: 1; max-width: 64rem; }
.why-hero-h1 {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--navy);
  margin: 0 0 22px;
}
.why-hero-h1 em { font-style: italic; font-weight: 300; color: var(--teal); }
.why-hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--txt-mid);
  margin: 0;
}

.why-thesis { padding: 72px 0; background: #fff; }
.why-thesis .container { max-width: 52rem; }
.why-thesis-h {
  font-family: var(--fh);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin: 16px 0 24px;
}
.why-thesis-h em { font-style: italic; font-weight: 300; color: var(--teal); }
.why-thesis-p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--txt-dark);
  margin: 0 0 18px;
}
.why-thesis-p:last-child { margin-bottom: 0; }

.why-teach { padding: 72px 0; background: var(--ivory); }
.why-teach .audience-pillars { grid-template-columns: repeat(3, 1fr); }

.why-founders { padding: 80px 0; background: #fff; }
.why-recognition { padding: 64px 0; background: var(--ivory); }
.why-recognition .eyebrow { text-align: center; margin: 0 auto 32px; display: block; }
.why-principles { padding: 80px 0; background: #fff; }
.why-cities { padding: 64px 0; background: var(--ivory); }
.why-cities .eyebrow { text-align: center; margin: 0 auto 32px; display: block; }

/* ── INSIGHTS ── */
.insights-hero { padding: 80px 0 56px; background: var(--ivory); position: relative; overflow: hidden; }
.insights-hero-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(168, 138, 79, 0.06) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.7;
}
.insights-hero .container { position: relative; z-index: 1; max-width: 60rem; }
.insights-hero-h1 {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: -0.020em;
  color: var(--navy);
  margin: 0 0 22px;
}
.insights-hero-h1 em { font-style: italic; font-weight: 300; color: var(--gold-deep); }
.insights-hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--txt-mid);
  margin: 0 0 18px;
}
.insights-hero-meta {
  font-family: var(--fb);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
  margin: 0;
  text-transform: uppercase;
  font-weight: 500;
}

.insights-topics { padding: 72px 0; background: #fff; }
.insight-topics-list {
  max-width: 60rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(11, 23, 41, 0.08);
}
.insight-topic {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid rgba(11, 23, 41, 0.08);
}
.insight-topic-num {
  font-family: var(--fh);
  font-size: 14px;
  color: var(--txt-light);
  letter-spacing: 0.04em;
}
.insight-topic-h {
  font-family: var(--fh);
  font-size: 19px;
  font-weight: 400;
  color: var(--navy);
  margin: 0 0 6px;
  letter-spacing: -0.008em;
}
.insight-topic-p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--txt-mid);
  margin: 0;
}
.insight-topic-status {
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
  background: rgba(168, 138, 79, 0.08);
  padding: 5px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Homepage About teaser link ── */
.about-readmore {
  margin: 18px 0 0;
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 500;
}
.about-readmore a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 118, 110, 0.30);
  padding-bottom: 2px;
  transition: all 0.2s ease;
}
.about-readmore a:hover {
  border-bottom-color: var(--teal);
  color: var(--teal-deep);
}
.about-readmore .arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.2s ease;
}
.about-readmore a:hover .arrow { transform: translateX(3px); }

/* ── Active nav state ── */
.nav-links .is-active {
  color: var(--teal);
  font-weight: 500;
}

/* ── Mobile adjustments ── */
@media (max-width: 980px) {
  .audience-hero-h1 { font-size: 38px; }
  .audience-pillars { grid-template-columns: 1fr; gap: 14px; }
  .audience-outcomes { grid-template-columns: 1fr; }
  .wya-cards-grid { grid-template-columns: 1fr; }
  .wya-hero-h1, .why-hero-h1 { font-size: 40px; }
  .why-teach .audience-pillars { grid-template-columns: 1fr; }
  .audience-recommend-shell { padding: 32px 28px; }
  .insights-hero-h1 { font-size: 36px; }
}

@media (max-width: 640px) {
  .audience-hero, .wya-hero, .why-hero, .insights-hero { padding: 56px 0 48px; }
  .audience-section, .audience-recommend, .audience-close,
  .why-thesis, .why-teach, .why-founders, .why-recognition,
  .why-principles, .why-cities, .insights-topics, .wya-cards, .wya-quiz-nudge {
    padding: 48px 0;
  }
  .audience-hero-h1, .wya-hero-h1, .why-hero-h1 { font-size: 32px; }
  .audience-section-header h2 { font-size: 28px; }
  .why-thesis-h, .audience-recommend-h, .audience-close-h, .wya-quiz-nudge-h { font-size: 26px; }
  .audience-pillar { padding: 24px 22px; }
  .insight-topic { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
  .insight-topic-status { justify-self: start; }
}


/* ============================================================
   PHASE 10 — Hero design richness around the wellness wheel
   ============================================================ */

/* Soft gradient backdrop on the hero section itself */
.hero1 {
  background: linear-gradient(
    135deg,
    var(--ivory) 0%,
    var(--ivory) 55%,
    rgba(235, 247, 246, 0.5) 100%
  );
  position: relative;
  overflow: hidden;
}

/* Hero image wrap becomes a positioned container for the decorative SVG */
.hero-image-wrap {
  position: relative;
}

/* Decorative SVG sits BEHIND the wheel */
.hero-decor {
  position: absolute;
  inset: -20px;
  z-index: 0;
  pointer-events: none;
}
.hero-decor-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* The wellness wheel itself must sit ABOVE the decor */
.hero-wheel {
  position: relative;
  z-index: 1;
}

/* Subtle ambient breathing on the floating orbs */
@media (prefers-reduced-motion: no-preference) {
  .hero-orb {
    animation: orb-breathe 6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .hero-orb--2 { animation-delay: 0.6s; animation-duration: 7s; }
  .hero-orb--3 { animation-delay: 1.2s; animation-duration: 8s; }
  .hero-orb--4 { animation-delay: 1.8s; animation-duration: 6.5s; }
  .hero-orb--5 { animation-delay: 0.3s; animation-duration: 5.5s; }
  .hero-orb--6 { animation-delay: 0.9s; animation-duration: 7.5s; }
  .hero-orb--7 { animation-delay: 1.5s; animation-duration: 6s; }
  .hero-orb--8 { animation-delay: 2.1s; animation-duration: 8.5s; }
  .hero-orb--9 { animation-delay: 0.4s; }
  .hero-orb--10 { animation-delay: 1.6s; }

  @keyframes orb-breathe {
    0%, 100% { transform: scale(1); opacity: var(--orb-opacity, 0.2); }
    50%      { transform: scale(1.18); opacity: calc(var(--orb-opacity, 0.2) * 1.4); }
  }
}

/* Hide the decor more aggressively on small screens where space is tight */
@media (max-width: 980px) {
  .hero-decor {
    inset: -10px;
    opacity: 0.7;
  }
}
@media (max-width: 640px) {
  .hero-decor {
    opacity: 0.5;
  }
}


/* ============================================================
   PHASE 11 — HERO POLISH
   Layout balance, headline fix, dimensional wheel labels,
   trust badge, lighter secondary CTA.
   ============================================================ */

/* Rebalance the hero grid — give the headline more breathing room */
.hero1-in {
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 64px;
}

/* Headline — tighter clamp so it never crops in the column,
   and slightly more line-height for the heavier serif weight */
.hero-h1 {
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.10;
  letter-spacing: -0.022em;
  margin-bottom: 26px;
  max-width: 640px;
}
.hero-h1 em {
  display: block;
  color: var(--teal);
  font-style: italic;
  font-weight: 300;
  margin-top: 4px;
}

/* Sub copy stays the same but slightly tighter max-width to feel intentional */
.hero-sub {
  max-width: 600px;
}

/* Wheel container — slightly smaller and aligned centre */
.hero-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-wheel {
  max-width: 460px;
}
.ww-svg {
  max-width: 440px;
}

/* Sharper label rendering on the wheel */
.ww-label {
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

/* Premium trust badge below the wheel */
.hero-wheel-trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 16px 8px 14px;
  background: rgba(11, 23, 41, 0.04);
  border: 1px solid rgba(199, 168, 109, 0.32);
  border-radius: 999px;
  font-family: var(--fb);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--txt-mid);
  opacity: 0;
  animation: trust-in 0.7s ease 0.8s forwards;
}
.hero-wheel-trust-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.hero-wheel-trust-text em {
  font-style: italic;
  font-family: var(--fh);
  color: var(--navy);
  font-weight: 400;
  margin-left: 2px;
}
@keyframes trust-in {
  to { opacity: 1; transform: translateY(0); }
  from { opacity: 0; transform: translateY(6px); }
}

/* Lighter, more elegant secondary CTA */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 24px;
  background: transparent;
  color: var(--navy);
  border: 1px solid rgba(11, 23, 41, 0.18);
  border-radius: 999px;
  font: inherit;
  font-family: var(--fb);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.22s ease;
}
.btn-ghost:hover {
  background: rgba(15, 118, 110, 0.04);
  border-color: var(--teal);
  color: var(--teal-deep);
}

/* Slightly tighter trust line (partner names) */
.hero-trust {
  font-size: 13px;
  line-height: 1.7;
  color: var(--txt-light);
  margin-top: 32px;
  max-width: 560px;
  letter-spacing: 0.005em;
}

/* Responsive — when the columns stack, recentre everything cleanly */
@media (max-width: 980px) {
  .hero1-in {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .hero-h1, .hero-sub, .hero-trust { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero-wheel { max-width: 380px; }
  .hero-wheel-trust { margin-left: auto; margin-right: auto; }
}

@media (max-width: 640px) {
  .hero1-in { padding-top: 32px; padding-bottom: 40px; gap: 36px; }
  .hero-h1 { font-size: 30px; }
  .hero-wheel { max-width: 300px; }
  .ww-label { font-size: 9.5px; letter-spacing: 0.08em; }
  .hero-wheel-trust { font-size: 11.5px; padding: 6px 12px; }
}


/* ============================================================
   PHASE 12 — CAPABILITY WHEEL polish
   ============================================================ */

/* Trust badge styles can stay defined but the element is now removed.
   No CSS deletion needed — dead styles do nothing. */

/* Refine label tracking — capability names are longer than course names */
.ww-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
}

/* The icons sit behind labels visually — keep them subtle, no animation */
.ww-icons { pointer-events: none; }
.ww-icon { transition: opacity 0.4s ease; }

/* The capability segments are no longer links — keep hover state but
   disable cursor:pointer */
.ww-seg { cursor: default; }
.ww-seg:hover .ww-seg-path,
.ww-seg:focus-visible .ww-seg-path {
  /* Very subtle hover — premium, not playful */
  filter: brightness(1.05);
  transform: none;
}

/* Mobile label scaling stays from Phase 11 */
@media (max-width: 640px) {
  .ww-label {
    font-size: 8.5px;
    letter-spacing: 0.06em;
  }
}


/* ============================================================
   PHASE 13 — HERO COPY + TYPOGRAPHIC HIERARCHY
   New emotional headline requires deliberate space, hierarchy
   and a distinct treatment for the call-to-purpose line.
   ============================================================ */

/* Rebalance the grid — slightly more room for the longer headline */
.hero1-in {
  grid-template-columns: 1.22fr 1fr;
  gap: 64px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 72px;
}

/* ── Main headline ── */
.hero-h1 {
  font-family: var(--fh);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--navy);
  max-width: 680px;
  margin: 0 0 24px;
  /* The lead span carries the main weight */
}
.hero-h1-lead {
  display: block;
}

/* ── Call-to-purpose line: "Become one of them." ── */
/* Specific class overrides the default .hero-h1 em styling */
.hero-h1 em.hero-h1-call {
  display: block;
  margin-top: 24px;
  font-family: var(--fh);
  font-style: italic;
  font-weight: 300;
  /* Slightly smaller than the main headline so it reads as the
     emotional response, not a competing heading */
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--teal);
  /* Subtle visual pause — a very thin gold rule */
  position: relative;
  padding-left: 0;
}
.hero-h1 em.hero-h1-call::before {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 14px;
  opacity: 0.85;
}

/* ── Supporting paragraph ── */
.hero-sub {
  font-family: var(--fb);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.70;
  color: var(--txt-mid);
  max-width: 560px;
  margin: 28px 0 36px;
}

/* ── Mobile + tablet tightening ── */
@media (max-width: 980px) {
  .hero1-in {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 48px;
    padding-bottom: 56px;
    text-align: center;
  }
  .hero-h1 { margin-left: auto; margin-right: auto; }
  .hero-h1 em.hero-h1-call {
    margin-top: 22px;
  }
  .hero-h1 em.hero-h1-call::before {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-sub { margin-left: auto; margin-right: auto; }
}

@media (max-width: 640px) {
  .hero-h1 {
    font-size: 28px;
    line-height: 1.18;
  }
  .hero-h1 em.hero-h1-call {
    font-size: 20px;
    margin-top: 18px;
  }
  .hero-h1 em.hero-h1-call::before {
    width: 28px;
    margin-bottom: 12px;
  }
  .hero-sub {
    font-size: 15.5px;
    margin: 22px 0 28px;
  }
}


/* ============================================================
   PHASE 14 — QUIZ STRUCTURAL COMPACTION
   Goal: entire quiz frame fits within one desktop viewport.
   Aesthetics unchanged. Only structure, spacing, composition.
   ============================================================ */

/* Tighten section padding — was 100px */
.quiz-section {
  padding: 56px 0 56px;
}

/* Tighten quiz header — was 56px margin-bottom */
.quiz-header {
  max-width: 52rem;
  margin: 0 auto 32px;
}
.quiz-header h2 {
  font-size: 32px;
  line-height: 1.18;
  margin: 12px 0 12px;
}
.quiz-header p {
  font-size: 15.5px;
  line-height: 1.55;
}

/* Shell — slightly narrower aside */
.quiz-shell {
  grid-template-columns: 340px 1fr;
  border-radius: 14px;
}

/* ── ASIDE: pathway journey panel ──
   Distribute the 8 stages evenly so the panel never feels empty
   regardless of the main column's content height */
.quiz-aside-inner {
  padding: 32px 26px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quiz-aside-label {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  margin: 0;
}

/* Journey list grows to fill the aside height; stages distribute evenly */
.journey-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 360px;
}
.journey-stage {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
  padding: 0;
}
/* Hide the inter-stage connector line (was needed with padding-based gaps) */
.journey-stage + .journey-stage::before {
  display: none;
}

.js-num {
  width: 32px;
  height: 32px;
  font-size: 11.5px;
}
.js-text { padding-top: 0; }
.js-name {
  font-size: 13.5px;
  margin-bottom: 1px;
  line-height: 1.2;
}
.js-desc {
  font-size: 10.5px;
  line-height: 1.35;
}

/* Hide the pathway pills section if present in old layouts — saves space */
.quiz-aside-pills, .quiz-aside-mid { display: none !important; }

/* ── MAIN: question + options + action row ──
   Flex column with action row pinned to the bottom of the main column */
.quiz-main {
  padding: 28px 36px 24px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
#quiz-container {
  flex: 0 0 auto;
}

/* Question header — compact */
.q-label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  margin: 0 0 10px;
}
.q-text {
  font-size: 22px;
  line-height: 1.22;
  margin: 0 0 6px;
  font-weight: 400;
}
.q-helper {
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 16px;
}

/* Answer options — slightly shorter, tighter gaps */
.q-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.q-option {
  display: grid;
  grid-template-columns: 36px 1fr 24px;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-radius: 11px;
}
.q-letter {
  width: 32px;
  height: 32px;
  font-size: 12.5px;
  margin-top: 0;
}
.q-opt-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 0;
}
.q-opt-title {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}
.q-opt-sub {
  font-size: 12.5px;
  line-height: 1.4;
}
.q-check {
  width: 22px;
  height: 22px;
  margin-top: 0;
}

/* ── BOTTOM ACTION ROW ──
   Microcopy + nav, pinned to bottom of main column */
.quiz-action-row {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(11, 23, 41, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quiz-action-row .q-microcopy {
  font-family: var(--fh);
  font-style: italic;
  font-size: 12px;
  line-height: 1.45;
  color: var(--txt-light);
  text-align: center;
  margin: 0 auto;
  max-width: 420px;
  /* No animations, no decoration — quiet line */
}
.quiz-action-row .q-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.quiz-action-row .q-back,
.quiz-action-row .q-next {
  padding: 11px 22px;
  font-size: 13px;
}

/* ── MOBILE — keep the existing stacked behaviour ── */
@media (max-width: 980px) {
  .quiz-shell { grid-template-columns: 1fr; }
  .quiz-aside-inner { padding: 24px 22px; gap: 16px; }
  .journey-list {
    flex-direction: row;
    overflow-x: auto;
    gap: 14px;
    min-height: 0;
    justify-content: flex-start;
    padding-bottom: 4px;
  }
  .journey-stage {
    grid-template-columns: 1fr;
    gap: 6px;
    min-width: 100px;
    flex-shrink: 0;
  }
  .js-desc { display: none; }
  .quiz-main { padding: 24px 22px; min-height: 0; }
}

@media (max-width: 640px) {
  .quiz-section { padding: 40px 0 44px; }
  .quiz-header h2 { font-size: 26px; }
  .q-text { font-size: 20px; }
  .q-helper { font-size: 12px; margin-bottom: 14px; }
  .q-option { padding: 12px 14px; grid-template-columns: 32px 1fr 20px; gap: 12px; }
  .q-letter { width: 28px; height: 28px; font-size: 11.5px; }
  .q-opt-title { font-size: 13.5px; }
  .q-opt-sub { font-size: 12px; }
  .quiz-action-row .q-microcopy { font-size: 11.5px; }
  .quiz-action-row .q-back, .quiz-action-row .q-next {
    padding: 10px 18px; font-size: 12.5px;
  }
}


/* ============================================================
   PHASE 15 — FINAL QUIZ UX REFINEMENT
   Navy heading, compact intro, centred pathway stack,
   action row lifted, narrower frame, progress indicator,
   richer selected-answer interaction.
   ============================================================ */

/* ── 1. Heading colours — navy, with em as quiet accent only ── */
.quiz-header h2 {
  color: var(--navy);
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -0.018em;
}
.quiz-header h2 em {
  /* Quiet italic, navy with a hint of darker tone, no green */
  color: var(--navy);
  font-style: italic;
  font-weight: 300;
  opacity: 0.78;
}
.q-text {
  color: var(--navy) !important;
  font-weight: 400;
}

/* ── 2. Compact intro area ── */
.quiz-section {
  padding: 44px 0 48px;
}
.quiz-header {
  max-width: 44rem;
  margin: 0 auto 24px;
  text-align: center;
}
.quiz-header .eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  margin: 0 0 10px;
}
.quiz-header h2 {
  margin: 0 0 10px;
}
.quiz-header p {
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 36rem;
  margin: 0 auto;
  color: var(--txt-mid);
}

/* ── 3. Narrow the frame so it feels focused ── */
.quiz-shell {
  max-width: 76rem;   /* was 84rem */
  border-radius: 14px;
}

/* ── 4. Aside: vertically centre, tighter stack ── */
.quiz-aside-inner {
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.quiz-aside-label {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  margin: 0;
  flex: 0 0 auto;
}
.journey-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;       /* centred vertically */
  gap: 10px;                     /* tighter step spacing */
  min-height: 0;
}
.journey-stage {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 11px;
  align-items: center;
  padding: 0;
}
.journey-stage + .journey-stage::before { display: none; }
.js-num {
  width: 30px;
  height: 30px;
  font-size: 11px;
}
.js-name {
  font-size: 13px;
  line-height: 1.2;
  margin-bottom: 1px;
}
.js-desc {
  font-size: 10px;               /* slightly smaller subtext */
  line-height: 1.32;
  opacity: 0.92;
}

/* ── 5. Main: reduced internal padding ── */
.quiz-main {
  padding: 22px 34px 22px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* ── 6. Progress indicator — text + faint gold fill bar ── */
.q-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(11, 23, 41, 0.06);
}
.q-progress-text {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-light);
  flex-shrink: 0;
}
.q-progress-text span {
  color: var(--navy);
  font-weight: 600;
}
.q-progress-track {
  flex: 1;
  height: 2px;
  background: rgba(11, 23, 41, 0.06);
  border-radius: 2px;
  overflow: hidden;
}
.q-progress-fill {
  display: block;
  height: 100%;
  width: 14.3%;  /* 1/7 initially */
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── 7. Question header: tighter ── */
.q-label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  margin: 0 0 8px;
  color: var(--gold-deep);
}
.q-label-num {
  color: var(--gold-deep);
}
.q-label-stage {
  color: var(--txt-light);
  letter-spacing: 0.14em;
}
.q-text {
  font-size: 22px;
  line-height: 1.22;
  margin: 0 0 4px;
}
.q-helper {
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 14px;
}

/* ── 8. Options: slightly tighter padding and gap ── */
.q-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.q-option {
  display: grid;
  grid-template-columns: 34px 1fr 22px;
  gap: 14px;
  align-items: center;
  padding: 11px 16px;
  border-radius: 11px;
  border: 1.5px solid rgba(11, 23, 41, 0.07);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.q-letter {
  width: 30px;
  height: 30px;
  font-size: 12px;
  margin-top: 0;
}
.q-opt-title {
  font-size: 13.5px;
  line-height: 1.3;
}
.q-opt-sub {
  font-size: 12px;
  line-height: 1.4;
}
.q-check {
  width: 20px;
  height: 20px;
  margin-top: 0;
}

/* ── 9. Selected-answer enhancement: stronger border, soft glow, lift ── */
.q-option.is-selected {
  transform: translateY(-1px);
  border-width: 2px;
  padding: 10px 15px;   /* compensate for the thicker border */
}
.qopt-teal.is-selected {
  border-color: var(--teal);
  background: rgba(15, 118, 110, 0.05);
  box-shadow:
    0 0 0 3px rgba(15, 118, 110, 0.08),
    0 8px 24px rgba(15, 118, 110, 0.16);
}
.qopt-sage.is-selected {
  border-color: var(--sage);
  background: rgba(111, 153, 104, 0.06);
  box-shadow:
    0 0 0 3px rgba(111, 153, 104, 0.10),
    0 8px 24px rgba(111, 153, 104, 0.18);
}
.qopt-gold.is-selected {
  border-color: var(--gold-deep);
  background: rgba(168, 138, 79, 0.06);
  box-shadow:
    0 0 0 3px rgba(168, 138, 79, 0.10),
    0 8px 24px rgba(168, 138, 79, 0.20);
}
.qopt-terra.is-selected {
  border-color: var(--terra);
  background: rgba(194, 95, 77, 0.06);
  box-shadow:
    0 0 0 3px rgba(194, 95, 77, 0.10),
    0 8px 24px rgba(194, 95, 77, 0.18);
}

/* Animated check mark when selected */
.q-option.is-selected .q-check {
  animation: check-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes check-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── 10. Action row lifted closer to options ── */
.quiz-action-row {
  margin-top: 18px;      /* was auto — now lifted */
  padding-top: 14px;
  border-top: 1px solid rgba(11, 23, 41, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quiz-action-row .q-microcopy {
  font-size: 11.5px;
  line-height: 1.45;
  margin: 0 auto;
  max-width: 380px;
}
.quiz-action-row .q-back,
.quiz-action-row .q-next {
  padding: 10px 20px;
  font-size: 12.5px;
}

/* ── Mobile preserved ── */
@media (max-width: 980px) {
  .quiz-shell { grid-template-columns: 1fr; }
  .journey-list {
    flex-direction: row;
    overflow-x: auto;
    gap: 14px;
    justify-content: flex-start;
    min-height: 0;
  }
  .journey-stage {
    grid-template-columns: 1fr;
    gap: 6px;
    min-width: 90px;
    flex-shrink: 0;
  }
  .js-desc { display: none; }
  .quiz-main { padding: 22px 22px 20px; }
  .q-progress { margin-bottom: 12px; padding-bottom: 10px; }
}

@media (max-width: 640px) {
  .quiz-section { padding: 32px 0 40px; }
  .quiz-header h2 { font-size: 24px; }
  .quiz-header p { font-size: 14px; }
  .q-text { font-size: 20px; }
  .q-progress-text { font-size: 10px; }
  .q-option { padding: 11px 14px; grid-template-columns: 28px 1fr 18px; gap: 12px; }
  .q-letter { width: 26px; height: 26px; font-size: 11px; }
  .quiz-action-row .q-microcopy { font-size: 11px; }
}


/* ============================================================
   PHASE 16 — QUIZ ARCHITECTURAL RESTRUCTURE
   No more dark teal sidebar. Horizontal stepper + single
   centred white question card. Mobile-first responsive.
   ============================================================ */

/* ── Section base ── */
.quiz-section {
  padding: 56px 0 64px;
  background: var(--ivory);
  background-image: radial-gradient(circle at 1px 1px, rgba(15, 118, 110, 0.04) 1px, transparent 0);
  background-size: 32px 32px;
}

/* Override Phase 14/15 dark backgrounds if present */
.quiz-section .container { position: relative; z-index: 1; }

/* ── Compact intro ── */
.quiz-intro {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto 32px;
}
.quiz-intro-eyebrow {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 10px;
}
.quiz-intro-h {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin: 0 0 10px;
}
.quiz-intro-h em {
  font-style: italic;
  font-weight: 300;
  color: var(--navy);
  opacity: 0.78;
}
.quiz-intro-sub {
  font-family: var(--fb);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--txt-mid);
  margin: 0 auto;
  max-width: 36rem;
}

/* ── Outer frame: holds stepper + card ── */
.quiz-frame {
  max-width: 920px;
  margin: 0 auto;
}

/* ── Horizontal pathway stepper ── */
.qps {
  margin: 0 0 22px;
  padding: 0 4px;
}
.qps-list {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
}
.qps .journey-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 0;
  padding-top: 0;
  /* Reset the old aside-stage grid styles */
  grid-template-columns: none;
  gap: 0;
}

/* Connecting lines between stages */
.qps .journey-stage::before,
.qps .journey-stage::after {
  content: "";
  position: absolute;
  top: 11px;
  width: calc(50% - 14px);
  height: 1.5px;
  background: rgba(11, 23, 41, 0.10);
  z-index: 0;
  transition: background 0.4s ease;
}
.qps .journey-stage::before { right: calc(50% + 14px); }
.qps .journey-stage::after  { left:  calc(50% + 14px); }
.qps .journey-stage:first-child::before { display: none; }
.qps .journey-stage:last-child::after { display: none; }

/* Colour: lines turn gold when traveled */
.qps .journey-stage.is-done::before,
.qps .journey-stage.is-active::before,
.qps .journey-stage.is-done::after {
  background: var(--gold);
}

/* Numbered circle */
.qps .journey-stage .qps-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(11, 23, 41, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--txt-light);
  position: relative;
  z-index: 1;
  transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  /* Reset old aside-stage circle dimensions */
  margin: 0;
}
.qps .journey-stage.is-done .qps-num {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.qps .journey-stage.is-active .qps-num {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(11, 23, 41, 0.08);
}

/* Stage name */
.qps .journey-stage .qps-name {
  display: block;
  margin-top: 9px;
  font-family: var(--fb);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--txt-light);
  line-height: 1.25;
  max-width: 110px;
  transition: color 0.3s ease;
}
.qps .journey-stage.is-active .qps-name {
  color: var(--navy);
  font-weight: 600;
}
.qps .journey-stage.is-done .qps-name {
  color: var(--txt-mid);
}

/* ── Single centred question card ── */
.qcard-frame {
  background: #fff;
  border: 1px solid rgba(11, 23, 41, 0.06);
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(11, 23, 41, 0.05);
  padding: 28px 36px 22px;
  max-width: 760px;
  margin: 0 auto;
}

/* Progress text + gold fill bar (kept from Phase 15, slightly refined) */
.qcard-frame .q-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(11, 23, 41, 0.06);
}
.qcard-frame .q-progress-text {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-light);
  flex-shrink: 0;
}
.qcard-frame .q-progress-text span {
  color: var(--navy);
  font-weight: 600;
}
.qcard-frame .q-progress-track {
  flex: 1;
  height: 2px;
  background: rgba(11, 23, 41, 0.06);
  border-radius: 2px;
  overflow: hidden;
}
.qcard-frame .q-progress-fill {
  display: block;
  height: 100%;
  width: 14.3%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

/* The actual quiz cards inside the frame — already styled from earlier phases.
   Just ensure nothing collides with the new container. */
.qcard-frame #quiz-container {
  /* No extra padding — the frame already provides it */
}

/* Tighter question header */
.qcard-frame .q-label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  margin: 0 0 8px;
  color: var(--gold-deep);
}
.qcard-frame .q-text {
  color: var(--navy) !important;
  font-size: 22px;
  line-height: 1.22;
  margin: 0 0 4px;
  font-weight: 400;
}
.qcard-frame .q-helper {
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 14px;
  color: var(--txt-mid);
}

/* Options — keep the existing dimensional styles but tighten */
.qcard-frame .q-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.qcard-frame .q-option {
  display: grid;
  grid-template-columns: 34px 1fr 22px;
  gap: 14px;
  align-items: center;
  padding: 11px 16px;
  border-radius: 11px;
  border: 1.5px solid rgba(11, 23, 41, 0.08);
  background: #fff;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
}

/* Selected enhancement preserved from Phase 15 */
.qcard-frame .q-option.is-selected {
  transform: translateY(-1px);
  border-width: 2px;
  padding: 10px 15px;
}

/* Action row */
.qcard-frame .quiz-action-row {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(11, 23, 41, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qcard-frame .quiz-action-row .q-microcopy {
  font-family: var(--fh);
  font-style: italic;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--txt-light);
  text-align: center;
  margin: 0 auto;
  max-width: 420px;
}
.qcard-frame .quiz-action-row .q-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* ============================================================
   MOBILE — first-class responsive
   ============================================================ */
@media (max-width: 768px) {
  .quiz-section { padding: 40px 0 48px; }
  .quiz-intro { margin-bottom: 24px; }
  .quiz-intro-h { font-size: 24px; }
  .quiz-intro-sub { font-size: 13.5px; }

  /* Hide the stage names on mobile — only numbered circles remain */
  .qps .journey-stage .qps-name { display: none; }
  .qps { margin-bottom: 18px; }
  .qps .journey-stage .qps-num {
    width: 20px;
    height: 20px;
    font-size: 9.5px;
  }
  .qps .journey-stage::before,
  .qps .journey-stage::after {
    top: 9px;
    width: calc(50% - 12px);
  }
  .qps .journey-stage::before { right: calc(50% + 12px); }
  .qps .journey-stage::after  { left:  calc(50% + 12px); }

  /* Card goes full-width with reduced padding */
  .qcard-frame {
    padding: 22px 20px 18px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(11, 23, 41, 0.05);
  }
  .qcard-frame .q-text { font-size: 19px; }
  .qcard-frame .q-helper { font-size: 12px; margin-bottom: 12px; }

  .qcard-frame .q-option {
    padding: 11px 14px;
    grid-template-columns: 30px 1fr 18px;
    gap: 12px;
  }
  .qcard-frame .q-option.is-selected {
    padding: 10px 13px;
  }
  .qcard-frame .q-letter { width: 28px; height: 28px; font-size: 11.5px; }
  .qcard-frame .q-opt-title { font-size: 13.5px; }
  .qcard-frame .q-opt-sub { font-size: 12px; }

  .qcard-frame .quiz-action-row .q-microcopy { font-size: 11px; }
  .qcard-frame .quiz-action-row .q-back,
  .qcard-frame .quiz-action-row .q-next {
    padding: 11px 18px;
    font-size: 12.5px;
  }
}

@media (max-width: 420px) {
  .quiz-section { padding: 32px 0 40px; }
  .quiz-intro-h { font-size: 22px; }
  .qcard-frame { padding: 20px 16px 16px; }
  .qcard-frame .q-options { gap: 6px; }
}

/* ============================================================
   Deprecated styles cleanup — the old aside no longer exists,
   so these styles do nothing, but clearing the dark backgrounds
   keeps the cascade clean in case any stragglers reference them.
   ============================================================ */
.quiz-aside, .quiz-aside-inner, .quiz-aside-pattern { display: none !important; }
.quiz-shell { display: block !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }
.quiz-main { display: block !important; padding: 0 !important; background: transparent !important; }


/* ============================================================
   PHASE 17 — ONE-SCREEN ANCHORING
   The action row is pinned to the bottom of a fixed min-height
   card so Continue is always visible regardless of which
   question is showing. Stepper and intro compacted further.
   ============================================================ */

/* Section padding shaved */
.quiz-section {
  padding: 44px 0 56px;
}

/* Intro: tighter, smaller H2 */
.quiz-intro {
  max-width: 42rem;
  margin: 0 auto 22px;
}
.quiz-intro-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.20em;
  margin: 0 0 8px;
}
.quiz-intro-h {
  font-size: 26px;
  margin: 0 0 8px;
  line-height: 1.18;
}
.quiz-intro-sub {
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 32rem;
}

/* Stepper compacted */
.qps {
  margin: 0 0 18px;
  padding: 0 8px;
}
.qps .journey-stage .qps-num {
  width: 22px;
  height: 22px;
  font-size: 10px;
  border-width: 1.5px;
}
.qps .journey-stage .qps-name {
  margin-top: 7px;
  font-size: 9.5px;
  letter-spacing: 0.03em;
  max-width: 100px;
}
.qps .journey-stage::before,
.qps .journey-stage::after {
  top: 10px;
  width: calc(50% - 13px);
}
.qps .journey-stage::before { right: calc(50% + 13px); }
.qps .journey-stage::after  { left:  calc(50% + 13px); }
.qps .journey-stage.is-active .qps-num {
  transform: scale(1.12);
  box-shadow: 0 0 0 4px rgba(11, 23, 41, 0.06);
}

/* CARD — flex column with min-height so action row anchors at bottom */
.qcard-frame {
  display: flex !important;
  flex-direction: column !important;
  min-height: 500px;
  padding: 22px 32px 18px;
  border-radius: 14px;
  max-width: 760px;
  margin: 0 auto;
}

/* The quiz-container takes the available space; action row gets pushed down */
.qcard-frame #quiz-container {
  flex: 0 0 auto;
}

/* Tighten the progress block */
.qcard-frame .q-progress {
  margin-bottom: 12px;
  padding-bottom: 10px;
}

/* Tighten the question header */
.qcard-frame .q-label {
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
}
.qcard-frame .q-text {
  font-size: 21px;
  line-height: 1.22;
  margin: 0 0 4px;
}
.qcard-frame .q-helper {
  font-size: 12.5px;
  margin: 0 0 12px;
}

/* Slightly tighter options */
.qcard-frame .q-options {
  gap: 6px;
}
.qcard-frame .q-option {
  padding: 10px 16px;
}
.qcard-frame .q-option.is-selected {
  padding: 9px 15px;
}
.qcard-frame .q-letter {
  width: 28px;
  height: 28px;
  font-size: 11.5px;
}
.qcard-frame .q-opt-title {
  font-size: 13.5px;
  font-weight: 600;
}
.qcard-frame .q-opt-sub {
  font-size: 12px;
  line-height: 1.4;
}
.qcard-frame .q-check {
  width: 18px;
  height: 18px;
}

/* CRITICAL — the action row anchored at the bottom of the card */
.qcard-frame .quiz-action-row {
  margin-top: auto !important;
  padding-top: 14px;
  border-top: 1px solid rgba(11, 23, 41, 0.06);
  gap: 8px;
}
.qcard-frame .quiz-action-row .q-microcopy {
  font-size: 11.5px;
  margin: 0 auto 6px;
  max-width: 380px;
  line-height: 1.45;
}
.qcard-frame .quiz-action-row .q-back,
.qcard-frame .quiz-action-row .q-next {
  padding: 10px 20px;
  font-size: 12.5px;
}

/* ── Mobile, ensure card still anchors action row but min-height relaxes ── */
@media (max-width: 768px) {
  .quiz-section { padding: 36px 0 44px; }
  .quiz-intro { margin-bottom: 18px; }
  .quiz-intro-h { font-size: 22px; }
  .quiz-intro-sub { font-size: 13px; }

  .qps { margin-bottom: 16px; }
  .qps .journey-stage .qps-num {
    width: 18px;
    height: 18px;
    font-size: 9px;
  }
  .qps .journey-stage::before,
  .qps .journey-stage::after {
    top: 8px;
    width: calc(50% - 11px);
  }
  .qps .journey-stage::before { right: calc(50% + 11px); }
  .qps .journey-stage::after  { left:  calc(50% + 11px); }

  .qcard-frame {
    min-height: auto;
    padding: 20px 18px 16px;
  }
  .qcard-frame .q-text { font-size: 18px; }
  .qcard-frame .q-option { padding: 11px 14px; }
  .qcard-frame .quiz-action-row .q-back,
  .qcard-frame .quiz-action-row .q-next {
    padding: 10px 16px;
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  .quiz-intro-h { font-size: 20px; }
  .qcard-frame { padding: 18px 14px 14px; }
  .qcard-frame .q-text { font-size: 17px; }
  .qcard-frame .q-options { gap: 5px; }
}


/* ============================================================
   PHASE 18 — COMPOSITE TWO-COLUMN QUIZ (LIVE)
   Direct to staging. Uses full screen width.
   LEFT: editorial canvas (headline + fact + quote)
   RIGHT: progress ribbon + question card + 4 answer cards
   ============================================================ */

/* Section base with atmospheric backdrop */
.quiz-section {
  position: relative;
  padding: 56px 0 72px;
  background: var(--ivory);
  overflow: hidden;
}
.quiz-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 85% 15%, rgba(15, 118, 110, 0.07) 0%, transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(199, 168, 109, 0.08) 0%, transparent 48%),
    radial-gradient(ellipse at 50% 100%, rgba(11, 23, 41, 0.025) 0%, transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(11, 23, 41, 0.030) 1px, transparent 0);
  background-size: 100% 100%, 100% 100%, 100% 100%, 36px 36px;
  pointer-events: none;
}
.quiz-section .container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  padding-left: 56px;
  padding-right: 56px;
}

/* Hide the old journey list and any leftover intro */
.journey-list-hidden { display: none !important; }
.quiz-intro,
.qps,
.quiz-frame > .qcard-frame > .q-progress { display: none !important; }

/* The two-column grid */
.quiz-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: start;
}

/* ── LEFT COLUMN: editorial canvas ── */
.qleft { padding-top: 12px; }

.qhead-h {
  font-family: var(--fh);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.024em;
  color: var(--navy);
  margin: 0 0 20px;
}
.qhead-h em {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
  margin-top: 8px;
}
.qhead-sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--txt-mid);
  margin: 0 0 32px;
  max-width: 460px;
}

.qleft-divider {
  width: 48px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
  margin: 0 0 24px;
}

/* Fact block */
.qfact { margin: 0 0 32px; max-width: 460px; }
.qfact-label {
  font-family: var(--fh);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
}
.qfact-number {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 64px;
  line-height: 0.95;
  color: var(--navy);
  letter-spacing: -0.04em;
  display: block;
  margin: 0 0 12px;
}
.qfact-number sup {
  font-size: 32px;
  vertical-align: top;
  margin-left: 3px;
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}
.qfact-line {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--navy);
  margin: 0 0 10px;
  max-width: 380px;
}
.qfact-source {
  font-family: var(--fb);
  font-size: 11px;
  font-style: italic;
  color: var(--txt-light);
  margin: 0;
}

/* Quote block */
.qquote { max-width: 460px; position: relative; }
.qquote-mark {
  font-family: var(--fh);
  font-size: 64px;
  line-height: 0.6;
  color: var(--gold);
  opacity: 0.45;
  margin: 0 0 -16px;
  display: block;
}
.qquote-text {
  font-family: var(--fh);
  font-weight: 400;
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--navy);
  margin: 0 0 16px;
  max-width: 400px;
  letter-spacing: -0.005em;
}
.qquote-text strong {
  font-style: normal;
  font-weight: 500;
  color: var(--teal-deep);
}
.qquote-divider {
  width: 32px;
  height: 1px;
  background: var(--gold);
  margin: 0 0 12px;
  opacity: 0.5;
}
.qquote-cite {
  font-family: var(--fb);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 2px;
  letter-spacing: 0.01em;
}
.qquote-cite-role {
  font-family: var(--fb);
  font-size: 11px;
  color: var(--txt-light);
  font-style: italic;
  margin: 0;
}

/* ── RIGHT COLUMN: interaction zone ── */

/* Progress ribbon */
.qribbon { margin-bottom: 22px; }
.qribbon-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.qribbon-stage {
  font-family: var(--fh);
  font-size: 14px;
  color: var(--navy);
}
.qribbon-stage-num {
  color: var(--gold-deep);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.qribbon-stage-sep { color: rgba(11, 23, 41, 0.25); margin: 0 6px; }
.qribbon-stage-name { font-style: italic; }
.qribbon-count {
  font-family: var(--fb);
  font-size: 11.5px;
  color: var(--txt-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.qribbon-count strong { color: var(--navy); font-weight: 600; }
.qribbon-track-wrap { position: relative; height: 12px; }
.qribbon-track {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 3px;
  transform: translateY(-50%);
  background: rgba(11, 23, 41, 0.08);
  border-radius: 2px;
}
.qribbon-fill {
  height: 100%;
  width: 14.3%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 100%);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(199, 168, 109, 0.5);
  transition: width 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.qribbon-dots {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qribbon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1.5px solid rgba(11, 23, 41, 0.18);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.qribbon-dot.is-done {
  background: var(--gold);
  border-color: var(--gold-deep);
}
.qribbon-dot.is-active {
  width: 14px;
  height: 14px;
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: 0 0 0 5px rgba(11, 23, 41, 0.06), 0 2px 8px rgba(11, 23, 41, 0.2);
}

/* Question card */
.quiz-section .qcard {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, #fdfcf9 100%);
  border-radius: 18px;
  padding: 28px 34px 22px;
  display: flex;
  flex-direction: column;
  min-height: 460px;
  box-shadow:
    0 1px 2px rgba(11, 23, 41, 0.04),
    0 8px 24px rgba(11, 23, 41, 0.05),
    0 24px 56px rgba(11, 23, 41, 0.07);
  /* Override Phase 16/17 .qcard-frame styling collisions */
  max-width: none;
  margin: 0;
}
.quiz-section .qcard::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
  border-radius: 0 0 3px 3px;
  opacity: 0.7;
}

/* Question text inside card — make sure earlier phase styles don't conflict */
.quiz-section .qcard #quiz-container {
  flex: 0 0 auto;
}
.quiz-section .qcard .q-label {
  font-family: var(--fh);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 12px;
  display: block;
}
.quiz-section .qcard .q-label-num { color: var(--gold-deep); font-weight: 600; }
.quiz-section .qcard .q-label-sep { color: rgba(11, 23, 41, 0.25); margin: 0 4px; }
.quiz-section .qcard .q-label-stage { color: var(--gold-deep); }

.quiz-section .qcard .q-text {
  font-family: var(--fh) !important;
  font-weight: 400 !important;
  font-size: 23px !important;
  line-height: 1.22 !important;
  letter-spacing: -0.014em;
  color: var(--navy) !important;
  margin: 4px 0 6px !important;
  max-width: 500px;
}
.quiz-section .qcard .q-helper {
  font-family: var(--fh);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--txt-light);
  margin: 0 0 16px !important;
}

/* 4 answer options */
.quiz-section .qcard .q-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
}
.quiz-section .qcard .q-option {
  display: grid !important;
  grid-template-columns: 32px 1fr !important;
  gap: 14px !important;
  align-items: flex-start !important;
  padding: 12px 16px !important;
  background: rgba(248, 246, 241, 0.55);
  border-radius: 11px;
  border: 0 !important;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 0 0 1px rgba(11, 23, 41, 0.045);
}
.quiz-section .qcard .q-option:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(15, 118, 110, 0.18),
    0 4px 14px rgba(11, 23, 41, 0.04);
}

.quiz-section .qcard .q-letter {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-style: italic;
  font-size: 12px;
  font-weight: 500;
  color: var(--teal);
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.16);
  flex-shrink: 0;
  margin-top: 1px !important;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.quiz-section .qcard .qopt-sage .q-letter { color: var(--sage-deep); background: rgba(111, 153, 104, 0.08); border-color: rgba(111, 153, 104, 0.18); }
.quiz-section .qcard .qopt-gold .q-letter { color: var(--gold-deep); background: rgba(168, 138, 79, 0.10); border-color: rgba(168, 138, 79, 0.22); }
.quiz-section .qcard .qopt-terra .q-letter { color: var(--terra-deep); background: rgba(194, 95, 77, 0.08); border-color: rgba(194, 95, 77, 0.18); }

.quiz-section .qcard .q-opt-body { padding: 0 !important; }
.quiz-section .qcard .q-opt-title {
  display: block;
  font-family: var(--fb);
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  color: var(--navy);
  margin: 0 0 2px !important;
}
.quiz-section .qcard .q-opt-sub {
  display: block;
  font-family: var(--fb);
  font-weight: 400;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--txt-light);
  margin: 0;
}

/* Hide the empty radio circles — already used .q-check in earlier markup */
.quiz-section .qcard .q-check { display: none !important; }

/* Selected state */
.quiz-section .qcard .q-option.is-selected {
  background: #fff;
  transform: translateY(-2px);
}
.quiz-section .qcard .qopt-teal.is-selected {
  box-shadow:
    inset 0 0 0 2px var(--teal),
    0 0 0 4px rgba(15, 118, 110, 0.10),
    0 12px 28px rgba(15, 118, 110, 0.16) !important;
}
.quiz-section .qcard .qopt-sage.is-selected {
  box-shadow:
    inset 0 0 0 2px var(--sage),
    0 0 0 4px rgba(111, 153, 104, 0.10),
    0 12px 28px rgba(111, 153, 104, 0.16) !important;
}
.quiz-section .qcard .qopt-gold.is-selected {
  box-shadow:
    inset 0 0 0 2px var(--gold-deep),
    0 0 0 4px rgba(168, 138, 79, 0.12),
    0 12px 28px rgba(168, 138, 79, 0.18) !important;
}
.quiz-section .qcard .qopt-terra.is-selected {
  box-shadow:
    inset 0 0 0 2px var(--terra),
    0 0 0 4px rgba(194, 95, 77, 0.10),
    0 12px 28px rgba(194, 95, 77, 0.16) !important;
}
.quiz-section .qcard .qopt-teal.is-selected .q-letter   { background: var(--teal);      color: #fff; border-color: var(--teal); }
.quiz-section .qcard .qopt-sage.is-selected .q-letter   { background: var(--sage-deep); color: #fff; border-color: var(--sage-deep); }
.quiz-section .qcard .qopt-gold.is-selected .q-letter   { background: var(--gold-deep); color: #fff; border-color: var(--gold-deep); }
.quiz-section .qcard .qopt-terra.is-selected .q-letter  { background: var(--terra);     color: #fff; border-color: var(--terra); }

/* Action row anchored at bottom of card */
.quiz-section .qcard .quiz-action-row {
  margin-top: auto !important;
  padding-top: 12px;
  border-top: 1px solid rgba(11, 23, 41, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quiz-section .qcard .q-microcopy {
  font-family: var(--fh);
  font-style: italic;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--txt-light);
  text-align: center;
  margin: 0 auto;
  max-width: 420px;
}
.quiz-section .qcard .q-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.quiz-section .qcard .q-back,
.quiz-section .qcard .q-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--fb);
  font-size: 12.5px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  transition: all 0.22s ease;
}
.quiz-section .qcard .q-back {
  background: transparent;
  color: var(--txt-light);
}
.quiz-section .qcard .q-back:hover:not(:disabled) {
  color: var(--navy);
  background: rgba(11, 23, 41, 0.04);
}
.quiz-section .qcard .q-back:disabled { opacity: 0.35; cursor: not-allowed; }
.quiz-section .qcard .q-next {
  background: var(--teal);
  color: #fff;
}
.quiz-section .qcard .q-next:hover:not(:disabled) {
  background: var(--teal-deep);
  transform: translateX(2px);
}
.quiz-section .qcard .q-next:disabled {
  background: rgba(11, 23, 41, 0.1);
  color: var(--txt-light);
  cursor: not-allowed;
}

/* ── Mobile responsiveness ── */
@media (max-width: 980px) {
  .quiz-section { padding: 40px 0 56px; }
  .quiz-section .container { padding-left: 24px; padding-right: 24px; }
  .quiz-grid { grid-template-columns: 1fr; gap: 36px; }
  .qleft { padding-top: 0; }
  .qhead-h { font-size: 28px; }
  .qhead-sub { font-size: 15px; max-width: 100%; margin-bottom: 24px; }
  .qleft-divider { width: 36px; margin-bottom: 18px; }
  .qfact, .qquote { max-width: 100%; }
  .qfact-number { font-size: 52px; }
  .qfact { margin-bottom: 24px; }
  .qquote-text { font-size: 16px; max-width: 100%; }
  .quiz-section .qcard { padding: 22px 18px 16px; min-height: auto; }
  .quiz-section .qcard .q-text { font-size: 19px !important; }
  .quiz-section .qcard .q-option { padding: 11px 14px !important; }
}
@media (max-width: 480px) {
  .qhead-h { font-size: 25px; }
  .qfact-number { font-size: 44px; }
  .qquote-mark { font-size: 48px; }
  .qquote-text { font-size: 15px; }
  .quiz-section .qcard .q-options { gap: 6px; }
}


/* ============================================================
   PHASE 19 — CLOSING EXPERIENCE (LIVE)
   Three-act result reveal: recognition → reveal → thanks
   ============================================================ */

/* Result block — only visible when .is-active set */
.quiz-result { display: none; }
.quiz-result.is-active {
  display: block;
  animation: result-fade-in 0.6s ease both;
}
@keyframes result-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Acts: only the matching act is visible */
.result-act { display: none; }
.quiz-result[data-act="recognition"] .result-act--recognition { display: block; animation: act-in 0.5s ease both; }
.quiz-result[data-act="reveal"]      .result-act--reveal      { display: block; animation: act-in 0.6s ease both; }
.quiz-result[data-act="thanks"]      .result-act--thanks      { display: block; animation: act-in 0.6s ease both; }
@keyframes act-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── ACT 1: Recognition pause ── */
.result-recog-shell {
  max-width: 720px;
  margin: 32px auto 0;
  text-align: center;
  padding: 60px 32px;
}
.result-recog-loader {
  position: relative;
  height: 32px;
  margin: 0 auto 36px;
  max-width: 280px;
}
.result-recog-line {
  display: block;
  height: 1px;
  background: rgba(199, 168, 109, 0.25);
  margin-top: 15.5px;
  position: relative;
  overflow: hidden;
}
.result-recog-line::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: recog-sweep 1.6s ease-in-out infinite;
}
@keyframes recog-sweep {
  0%   { left: -30%; }
  100% { left: 100%; }
}
.result-recog-dots {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.result-recog-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.3;
  animation: recog-pulse 1.6s ease-in-out infinite;
}
.result-recog-dots span:nth-child(2) { animation-delay: 0.2s; }
.result-recog-dots span:nth-child(3) { animation-delay: 0.4s; }
.result-recog-dots span:nth-child(4) { animation-delay: 0.6s; }
.result-recog-dots span:nth-child(5) { animation-delay: 0.8s; }
.result-recog-dots span:nth-child(6) { animation-delay: 1.0s; }
.result-recog-dots span:nth-child(7) { animation-delay: 1.2s; }
@keyframes recog-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.4); }
}
.result-recog-text {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.005em;
}
.result-recog-text em {
  display: block;
  margin-top: 12px;
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}

/* ── ACT 2: Pathway reveal + Form ── */
.result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-top: 16px;
}

/* LEFT: pathway reveal */
.result-left { padding-top: 4px; }
.result-eyebrow {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 16px;
}
.result-h {
  font-family: var(--fh);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin: 0 0 16px;
}
.result-h em {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
  margin-top: 6px;
}
.result-tag-line {
  font-family: var(--fh);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--txt-mid);
  margin: 0 0 24px;
  max-width: 440px;
}

.result-divider {
  width: 48px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
  margin: 24px 0;
}

.result-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 480px;
}
.result-meta-cell { padding: 0; }
.result-meta-label {
  font-family: var(--fh);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 6px;
}
.result-meta-value {
  font-family: var(--fb);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  color: var(--navy);
  margin: 0;
}

.result-message {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--navy);
  margin: 0 0 20px;
  max-width: 440px;
}

.result-trust {
  font-family: var(--fb);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--txt-light);
  margin: 0;
  max-width: 440px;
  display: flex;
  gap: 8px;
}
.result-trust-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 8px;
}

/* Per-pathway colour theming on the reveal */
.quiz-result[data-pathway="sage"]  .result-h em,
.quiz-result[data-pathway="sage"]  .result-recog-text em { color: var(--sage-deep); }
.quiz-result[data-pathway="gold"]  .result-h em,
.quiz-result[data-pathway="gold"]  .result-recog-text em { color: var(--gold-deep); }
.quiz-result[data-pathway="terra"] .result-h em,
.quiz-result[data-pathway="terra"] .result-recog-text em { color: var(--terra-deep); }


/* RIGHT: form shell */
.result-form-shell {
  background: linear-gradient(180deg, #fff 0%, #fdfcf9 100%);
  border-radius: 18px;
  padding: 32px 34px 28px;
  box-shadow:
    0 1px 2px rgba(11, 23, 41, 0.04),
    0 8px 24px rgba(11, 23, 41, 0.05),
    0 24px 56px rgba(11, 23, 41, 0.07);
  position: relative;
}
.result-form-shell::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
  border-radius: 0 0 3px 3px;
  opacity: 0.7;
}
.result-form-eyebrow {
  font-family: var(--fh);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 10px;
}
.result-form-h {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 10px;
  letter-spacing: -0.012em;
}
.result-form-h em {
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}
.result-form-sub {
  font-family: var(--fb);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--txt-mid);
  margin: 0 0 22px;
}

.result-form { display: flex; flex-direction: column; gap: 12px; }
.result-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.result-field { display: flex; flex-direction: column; gap: 4px; }
.result-field label {
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--txt-mid);
  text-transform: uppercase;
}
.result-field input,
.result-field select {
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 400;
  color: var(--navy);
  background: #fff;
  border: 1px solid rgba(11, 23, 41, 0.12);
  border-radius: 8px;
  padding: 10px 12px;
  transition: all 0.22s ease;
  width: 100%;
}
.result-field input:focus,
.result-field select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.10);
}
.result-field input::placeholder { color: var(--txt-light); }

.result-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 24px;
  margin-top: 6px;
  background: var(--teal);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--fb);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.22s ease;
  position: relative;
}
.result-form-submit:hover:not(:disabled) {
  background: var(--teal-deep);
}
.result-form-submit:disabled { opacity: 0.7; cursor: wait; }
.result-form-submit .submit-loading { display: none; }
.result-form-submit.is-loading .submit-default { display: none; }
.result-form-submit.is-loading .submit-loading { display: inline; }

.result-form-reassure {
  font-family: var(--fh);
  font-size: 11.5px;
  text-align: center;
  margin: 6px 0 0;
  color: var(--txt-light);
}
.result-form-error {
  font-family: var(--fb);
  font-size: 12.5px;
  color: var(--terra-deep);
  background: rgba(194, 95, 77, 0.08);
  padding: 10px 14px;
  border-radius: 8px;
  margin: 8px 0 0;
}
.result-form-error a { color: var(--terra-deep); font-weight: 500; }

/* ── ACT 3: Thank you ── */
.result-thanks-shell {
  max-width: 580px;
  margin: 32px auto 0;
  text-align: center;
  padding: 32px;
}
.result-thanks-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  color: var(--teal);
  animation: thanks-mark-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.quiz-result[data-pathway="sage"]  .result-thanks-mark { color: var(--sage-deep); }
.quiz-result[data-pathway="gold"]  .result-thanks-mark { color: var(--gold-deep); }
.quiz-result[data-pathway="terra"] .result-thanks-mark { color: var(--terra-deep); }

@keyframes thanks-mark-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.result-thanks-eyebrow {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
}
.result-thanks-h {
  font-family: var(--fh);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 22px;
}
.result-thanks-h em {
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}
.quiz-result[data-pathway="sage"]  .result-thanks-h em { color: var(--sage-deep); }
.quiz-result[data-pathway="gold"]  .result-thanks-h em { color: var(--gold-deep); }
.quiz-result[data-pathway="terra"] .result-thanks-h em { color: var(--terra-deep); }
.result-thanks-body {
  font-family: var(--fh);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--navy);
  margin: 0 0 28px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.result-thanks-body strong {
  font-weight: 500;
  color: var(--gold-deep);
}
.result-thanks-body em {
  font-style: italic;
  color: var(--teal);
}
.result-thanks-next {
  border-top: 1px solid rgba(11, 23, 41, 0.08);
  border-bottom: 1px solid rgba(11, 23, 41, 0.08);
  padding: 20px 0;
  margin: 28px 0 24px;
}
.result-thanks-next-label {
  font-family: var(--fh);
  font-size: 12px;
  font-style: italic;
  color: var(--txt-light);
  margin: 0 0 12px;
}
.result-thanks-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fh);
  font-style: italic;
  font-size: 18px;
  color: var(--teal);
  text-decoration: none;
  font-weight: 400;
  transition: all 0.22s ease;
}
.result-thanks-link:hover {
  color: var(--teal-deep);
  gap: 12px;
}
.result-thanks-meta {
  font-family: var(--fb);
  font-size: 11.5px;
  font-style: italic;
  color: var(--txt-light);
  margin: 0;
  line-height: 1.55;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Mobile responsive ── */
@media (max-width: 980px) {
  .result-grid { grid-template-columns: 1fr; gap: 32px; }
  .result-meta-grid { grid-template-columns: 1fr 1fr; }
  .result-form-shell { padding: 24px 22px 20px; }
  .result-field-row { grid-template-columns: 1fr; gap: 12px; }
  .result-recog-text { font-size: 18px; }
  .result-recog-shell { padding: 40px 20px; }
  .result-thanks-shell { padding: 20px; }
  .result-thanks-body { font-size: 15.5px; }
}
@media (max-width: 480px) {
  .result-meta-grid { grid-template-columns: 1fr; }
  .result-form-h { font-size: 20px; }
}


/* ============================================================
   PHASE 20 — REPAIR ABOUT SECTION
   Restores .who-built-in two-column grid that was missing.
   No HTML changes; pure CSS repair.
   ============================================================ */

/* The about section parent */
.about {
  padding: 80px 0 64px;
  background: var(--ivory);
}
.about .container {
  max-width: 1200px;
}

/* TWO-COLUMN GRID: founders left, about-copy right */
.who-built-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 72px;
  align-items: start;
  margin-bottom: 56px;
}

/* Founders column */
.who-built-in .founders-credit {
  /* Already has border-top + padding-top from earlier CSS */
}

/* The right column — about WinSkill copy */
.who-built-copy {
  padding-top: 32px;
  border-top: 1px solid var(--teal);
}
.who-built-copy .eyebrow {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 18px;
  display: block;
}
.who-built-copy h2 {
  font-family: var(--fh);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin: 0 0 24px;
}
.who-built-copy h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}
.who-built-copy p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--txt-mid);
  margin: 0 0 16px;
  max-width: 560px;
}
.who-built-copy p:last-child {
  margin-bottom: 0;
}

/* The "Read the full story" link styling (from Phase 9) */
.about-readmore {
  margin-top: 24px !important;
}

/* Founder portrait: ensure it has a defined dimension and placeholder look */
.who-built-in .founder-portrait {
  width: 100px;
  aspect-ratio: 4/5;
  border-radius: 6px;
  background: var(--ivory-deep);
  border: 1px solid rgba(11, 23, 41, 0.08);
  position: relative;
  overflow: hidden;
}
.who-built-in .founder-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(11, 23, 41, 0.04) 1px, transparent 0);
  background-size: 8px 8px;
}
.who-built-in .founder-portrait-mark {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 24px;
  height: 1.5px;
  background: var(--gold);
  opacity: 0.7;
}

/* Founder entry layout */
.who-built-in .founder-entry {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 36px;
}
.who-built-in .founder-entry:last-child {
  margin-bottom: 0;
}
.who-built-in .founder-entry-text {
  /* Already has typography styles defined elsewhere */
}
.who-built-in .founder-entry-name {
  font-family: var(--fh);
  font-style: normal !important;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 4px;
}
.who-built-in .founder-entry-role {
  font-family: var(--fb);
  font-style: normal !important;
  font-size: 12px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: 0.02em;
  margin: 0 0 10px;
}
.who-built-in .founder-entry-bio {
  font-family: var(--fb);
  font-style: normal !important;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--txt-mid);
  margin: 0;
  max-width: 100%;
}

/* Recognition strip — full width below the two-column grid */
.about .recognition-strip {
  margin-bottom: 48px;
}

/* Cities — full width below the recognition strip */
.about .cities {
  padding-top: 48px;
}

/* ── Mobile: stack the two columns ── */
@media (max-width: 980px) {
  .about { padding: 56px 0 48px; }
  .who-built-in {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 40px;
  }
  .who-built-copy {
    padding-top: 24px;
  }
  .who-built-copy h2 { font-size: 26px; }
  .who-built-copy p { font-size: 15px; }
  .who-built-in .founder-entry {
    grid-template-columns: 80px 1fr;
    gap: 20px;
  }
  .who-built-in .founder-portrait { width: 80px; }
  .who-built-in .founder-entry-name { font-size: 20px; }
  .about .recognition-strip {
    padding: 28px 24px;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .about .cities {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


/* ============================================================
   PHASE 21 — ABOUT SECTION RESTRUCTURED
   New order: thesis → recognition → cities → founder strip
   ============================================================ */

.about {
  padding: 80px 0 72px;
  background: var(--ivory);
}
.about .container {
  max-width: 1120px;
}

/* ── 1. About thesis — prominent, full width ── */
.about-thesis {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(11, 23, 41, 0.08);
}
.about-thesis .eyebrow {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 18px;
  display: block;
}
.about-thesis h2 {
  font-family: var(--fh);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.020em;
  color: var(--navy);
  margin: 0 0 28px;
}
.about-thesis h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}
.about-thesis-body {
  max-width: 600px;
  margin: 0 auto 24px;
  text-align: left;
}
.about-thesis-body p {
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.65;
  color: var(--txt-mid);
  margin: 0 0 16px;
}
.about-thesis-body p:last-child { margin-bottom: 0; }

.about-thesis .about-readmore {
  margin: 0;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 500;
}
.about-thesis .about-readmore a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 118, 110, 0.30);
  padding-bottom: 2px;
  transition: all 0.2s ease;
}
.about-thesis .about-readmore a:hover {
  color: var(--teal-deep);
  border-bottom-color: var(--teal);
}
.about-thesis .about-readmore .arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.2s ease;
}
.about-thesis .about-readmore a:hover .arrow {
  transform: translateX(3px);
}

/* ── 2. Recognition strip ── */
.about .recognition-strip {
  margin: 0 auto 48px;
  max-width: 1000px;
}

/* ── 3. Cities ── */
.about .cities {
  margin: 0 auto 64px;
  max-width: 1000px;
  padding-top: 0;
  border-top: 0;
}

/* ── 4. Compact founder strip at the bottom ── */
.founder-strip {
  border-top: 1px solid rgba(11, 23, 41, 0.08);
  padding-top: 40px;
  max-width: 980px;
  margin: 0 auto;
}
.founder-strip-label {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-align: center;
  margin: 0 0 32px;
}

.founder-strip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-bottom: 28px;
}

.founder-strip-entry {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  align-items: start;
}

.founder-strip-portrait {
  width: 64px;
  height: 80px;
  aspect-ratio: 4/5;
  border-radius: 6px;
  background: var(--ivory-deep);
  border: 1px solid rgba(11, 23, 41, 0.08);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.founder-strip-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(11, 23, 41, 0.04) 1px, transparent 0);
  background-size: 8px 8px;
}
.founder-strip-mark {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 18px;
  height: 1.5px;
  background: var(--gold);
  opacity: 0.7;
}

.founder-strip-text { padding-top: 2px; }
.founder-strip-name {
  font-family: var(--fh);
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--navy);
  margin: 0 0 3px;
}
.founder-strip-role {
  font-family: var(--fb);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: 0.02em;
  margin: 0 0 8px;
  text-transform: none;
}
.founder-strip-bio {
  font-family: var(--fb);
  font-style: normal;
  font-size: 13px;
  line-height: 1.5;
  color: var(--txt-mid);
  margin: 0;
}

.founder-strip-readmore {
  text-align: center;
  margin: 0;
  font-family: var(--fb);
  font-size: 12.5px;
}
.founder-strip-readmore a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}
.founder-strip-readmore a:hover {
  color: var(--teal-deep);
}
.founder-strip-readmore .arrow {
  display: inline-block;
  margin-left: 3px;
  transition: transform 0.2s ease;
}
.founder-strip-readmore a:hover .arrow {
  transform: translateX(3px);
}

/* ── Hide the old .who-built-in if it shows up anywhere ── */
.who-built-in { display: none !important; }

/* ── Mobile ── */
@media (max-width: 980px) {
  .about { padding: 56px 0 56px; }
  .about-thesis { margin-bottom: 48px; padding-bottom: 40px; }
  .about-thesis h2 { font-size: 26px; }
  .about-thesis-body p { font-size: 15px; }
  .about .recognition-strip { margin-bottom: 36px; }
  .about .cities { margin-bottom: 48px; }
  .founder-strip-grid { grid-template-columns: 1fr; gap: 32px; }
  .founder-strip-entry { grid-template-columns: 56px 1fr; gap: 16px; }
  .founder-strip-portrait { width: 56px; height: 70px; }
  .founder-strip-name { font-size: 16px; }
}
@media (max-width: 480px) {
  .about-thesis h2 { font-size: 22px; }
}


/* ============================================================
   PHASE 22 — WHY WINSKILL EXPANSION + HOMEPAGE ABOUT STRIP
   ============================================================ */

/* ── WHY WINSKILL: Story section ── */
.why-story {
  padding: 72px 0;
  background: #fff;
}
.why-story .container {
  max-width: 1120px;
}
.why-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: start;
}
.why-story-side .eyebrow {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 16px;
  display: block;
}
.why-story-h {
  font-family: var(--fh);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin: 0;
}
.why-story-h em {
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}
.why-story-body p {
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.7;
  color: var(--txt-mid);
  margin: 0 0 18px;
}
.why-story-body p:last-child { margin-bottom: 0; }

/* ── WHY WINSKILL: Global shift section ── */
.why-shift {
  padding: 72px 0;
  background: var(--ivory);
}
.why-shift .container {
  max-width: 1120px;
}
.why-shift-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: start;
}
.why-shift-side .eyebrow {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 16px;
  display: block;
}
.why-shift-h {
  font-family: var(--fh);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin: 0;
}
.why-shift-h em {
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}
.why-shift-body p {
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.7;
  color: var(--txt-mid);
  margin: 0 0 18px;
}
.why-shift-body p:last-child { margin-bottom: 0; }

/* ── WHY WINSKILL: Vision section ── */
.why-vision {
  padding: 80px 0;
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.why-vision::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 85% 15%, rgba(15, 118, 110, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 12% 88%, rgba(199, 168, 109, 0.12) 0%, transparent 48%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 0);
  background-size: 100% 100%, 100% 100%, 32px 32px;
  pointer-events: none;
}
.why-vision .container {
  max-width: 880px;
  position: relative;
  z-index: 1;
  text-align: center;
}
.why-vision-shell {
  padding: 0 24px;
}
.why-vision .eyebrow {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 20px;
  display: block;
}
.why-vision-h {
  font-family: var(--fh);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.020em;
  color: #fff;
  margin: 0 0 28px;
}
.why-vision-h em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}
.why-vision-body {
  font-family: var(--fh);
  font-style: italic;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 auto;
  max-width: 680px;
  font-weight: 400;
}

/* ── WHY WINSKILL: Founders section (WinDNA-style) ── */
.why-founders {
  padding: 96px 0;
  background: #fff;
}
.why-founders .container {
  max-width: 1120px;
}
.why-founders-head {
  text-align: center;
  margin: 0 0 64px;
}
.why-founders-eyebrow {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.why-founders-eyebrow::before,
.why-founders-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}
.why-founders-h {
  font-family: var(--fh);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--navy);
  margin: 0;
}
.why-founders-h em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-deep);
}

.why-founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.why-founder {
  text-align: center;
}

/* Circular gold-bordered portrait — WinDNA reference */
.why-founder-portrait {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  margin: 0 auto 28px;
  background: var(--ivory-deep);
  border: 2px solid var(--gold);
  padding: 8px;
  position: relative;
}
.why-founder-portrait-inner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--ivory);
  background-size: cover;
  background-repeat: no-repeat;
}

/* Per-founder photo binding */
.why-founder:nth-child(1) .why-founder-portrait-inner {
  background-image: url('../assets/founders/gourisankar.jpg');
  background-position: center 25%;
}
.why-founder:nth-child(2) .why-founder-portrait-inner {
  background-image: url('../assets/founders/rituparna.jpg');
  background-position: center 22%;
}

.why-founder-name {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--navy);
  margin: 0 0 8px;
}
.why-founder-role {
  font-family: var(--fb);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 22px;
}
.why-founder-bio {
  max-width: 380px;
  margin: 0 auto;
}
.why-founder-bio p {
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.65;
  color: var(--txt-mid);
  margin: 0;
}

/* ── Mobile responsive — Why WinSkill ── */
@media (max-width: 980px) {
  .why-story, .why-shift { padding: 56px 0; }
  .why-story-grid, .why-shift-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .why-vision { padding: 64px 0; }
  .why-founders { padding: 64px 0; }
  .why-founders-head { margin-bottom: 48px; }
  .why-founders-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .why-founder-portrait { width: 180px; height: 180px; }
}

/* ============================================================
   HOMEPAGE ABOUT — stripped to compact closing
   ============================================================ */
.about--compact {
  padding: 80px 0 72px;
  background: var(--ivory);
}
.about--compact .container {
  max-width: 1120px;
}
.about-compact-shell {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}
.about-compact-shell .eyebrow {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 18px;
  display: block;
}
.about-compact-h {
  font-family: var(--fh);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin: 0 0 20px;
}
.about-compact-h em {
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}
.about-compact-line {
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.65;
  color: var(--txt-mid);
  margin: 0 0 24px;
}
.about-compact-readmore {
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}
.about-compact-readmore a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 118, 110, 0.30);
  padding-bottom: 2px;
  transition: all 0.22s ease;
}
.about-compact-readmore a:hover {
  color: var(--teal-deep);
  border-bottom-color: var(--teal);
}
.about-compact-readmore .arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.22s ease;
}
.about-compact-readmore a:hover .arrow {
  transform: translateX(3px);
}

/* Credentials strip — single line, three items */
.about-credentials-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  max-width: 1040px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid rgba(11, 23, 41, 0.08);
  flex-wrap: wrap;
}
.cred-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 0;
}
.cred-label {
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.cred-text {
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.4;
}
.cred-divider {
  width: 1px;
  height: 32px;
  background: rgba(11, 23, 41, 0.12);
  flex-shrink: 0;
}

/* Hide the old About section structures completely */
.about-thesis, .founder-strip, .who-built-in {
  display: none !important;
}

/* Override .about base styles that conflict with .about--compact */
.about--compact .about-thesis,
.about--compact .recognition-strip,
.about--compact .cities,
.about--compact .founder-strip {
  display: none !important;
}

/* ── Mobile responsive — Homepage About ── */
@media (max-width: 768px) {
  .about--compact { padding: 56px 0 48px; }
  .about-compact-shell { margin-bottom: 40px; }
  .about-credentials-strip {
    flex-direction: column;
    gap: 24px;
    padding-top: 24px;
  }
  .cred-divider { display: none; }
}


/* ============================================================
   PHASE 23 — FACULTY SECTION on /why-winskill/
   ============================================================ */
.why-faculty {
  padding: 96px 0;
  background: var(--ivory);
}
.why-faculty .container {
  max-width: 1120px;
}
.why-faculty-head {
  text-align: center;
  margin: 0 0 56px;
}
.why-faculty-eyebrow {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.why-faculty-eyebrow::before,
.why-faculty-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}
.why-faculty-h {
  font-family: var(--fh);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin: 0 auto;
  max-width: 720px;
}
.why-faculty-h em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-deep);
}

/* 4-column grid */
.why-faculty-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

.why-fac {
  text-align: center;
}

/* Smaller than founder portraits — 180px (founders are 240px) */
.why-fac-portrait {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  margin: 0 auto 22px;
  background: var(--ivory-deep);
  border: 2px solid var(--gold);
  padding: 6px;
  position: relative;
}
.why-fac-portrait-inner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--ivory);
  background-size: cover;
  background-repeat: no-repeat;
}

.why-fac-name {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--navy);
  margin: 0 0 6px;
}
.why-fac-role {
  font-family: var(--fb);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
  line-height: 1.4;
}
.why-fac-bio {
  font-family: var(--fb);
  font-size: 13px;
  line-height: 1.55;
  color: var(--txt-mid);
  margin: 0;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}

/* Tablet */
@media (max-width: 1024px) {
  .why-faculty-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 56px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .why-faculty { padding: 64px 0; }
  .why-faculty-head { margin-bottom: 40px; }
  .why-faculty-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .why-fac-portrait { width: 160px; height: 160px; }
}


/* ============================================================
   PHASE 24 — Surgical fixes (footer label contrast + address flow)
   ============================================================ */

/* Footer column headings — brighter against dark navy */
.footer-col h4 {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Footer body links — slightly brighter too for readability */
.footer-col a {
  color: rgba(255, 255, 255, 0.85) !important;
}
.footer-col a:hover {
  color: var(--gold) !important;
}

/* Footer address — flowing block, comfortable line-height, no fragmentation */
.footer-address {
  line-height: 1.65 !important;
  max-width: 320px;
}


/* ============================================================
   PHASE 25 — Real fixes (footer logo, founder bio, faculty labels)
   ============================================================ */

/* Footer logo — REMOVE the brightness/invert filter that was masking
   the dark logo. The new winskill-logo-footer-white.png is already white
   on transparent, so it renders directly. */
.footer-brand .logo img,
footer .footer-brand .logo img {
  filter: none !important;
  opacity: 1 !important;
  height: 56px !important;
  width: auto !important;
}

/* Faculty role labels — reduce tracking, reserve 2-line minimum so the
   four columns align vertically even when role labels vary in length. */
.why-fac-role {
  letter-spacing: 0.10em !important;
  font-size: 9.5px !important;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 0 14px !important;
  line-height: 1.45 !important;
}

/* Faculty name — reserve consistent space so cards align even when names
   wrap (e.g., "Dr. Biswajit Mohapatra" is longer than "Dt. Nabiha Momin") */
.why-fac-name {
  min-height: 2.5em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
}

/* Founder portrait + content alignment — ensure the two columns stay
   visually balanced. Bios cap at the same readable width. */
.why-founder-bio {
  max-width: 400px !important;
}
.why-founder-bio p {
  text-align: center;
}


/* ============================================================
   PHASE 26 — Unified Why WinSkill rhythm
   Two-column for content blocks, left-aligned headings for grid sections
   ============================================================ */

/* ── THESIS: two-column (left: eyebrow + headline | right: body) ── */
.why-thesis {
  padding: 96px 0;
  background: #fff;
}
.why-thesis .container {
  max-width: 1120px;
}
.why-thesis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: start;
}
.why-thesis-side .eyebrow {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 16px;
  display: block;
}
.why-thesis-h {
  font-family: var(--fh);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px) !important;
  line-height: 1.10 !important;
  letter-spacing: -0.020em;
  color: var(--navy);
  margin: 0;
  text-align: left !important;
}
.why-thesis-h em {
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}
.why-thesis-body p {
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.7;
  color: var(--txt-mid);
  margin: 0 0 20px;
  max-width: 100% !important;
  text-align: left !important;
}
.why-thesis-body p:last-child {
  margin-bottom: 0;
}
.why-thesis-close {
  font-family: var(--fh) !important;
  font-style: italic;
  font-size: 18px !important;
  color: var(--navy) !important;
  margin-top: 8px !important;
}
.why-thesis-close strong {
  font-weight: 500;
  color: var(--teal-deep);
}

/* ── VISION: two-column on navy ── */
.why-vision .container {
  max-width: 1120px;
  text-align: left !important;
}
.why-vision-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: start;
}
.why-vision-side .eyebrow {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold) !important;
  margin: 0 0 16px;
  display: block;
}
.why-vision-h {
  font-family: var(--fh);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px) !important;
  line-height: 1.10 !important;
  letter-spacing: -0.020em;
  color: #fff !important;
  margin: 0 !important;
  text-align: left !important;
}
.why-vision-h em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold) !important;
}
.why-vision-body p {
  font-family: var(--fb);
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-style: normal !important;
  margin: 0 0 20px !important;
  max-width: 100% !important;
  text-align: left !important;
}
.why-vision-body p:last-child {
  margin-bottom: 0 !important;
}

/* ── FOUNDERS heading: left-aligned, full width ── */
.why-founders-head {
  text-align: left !important;
  margin-bottom: 56px !important;
  max-width: 720px;
}
.why-founders-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  text-align: left !important;
}
/* Remove the centred decorative rules (they were flanking it from both sides) */
.why-founders-eyebrow::before {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
  content: "";
}
.why-founders-eyebrow::after {
  display: none !important;
}
.why-founders-h {
  text-align: left !important;
  font-size: clamp(32px, 3.6vw, 44px) !important;
  margin: 12px 0 0 !important;
}

/* ── FACULTY heading: left-aligned, full width ── */
.why-faculty-head {
  text-align: left !important;
  margin-bottom: 56px !important;
  max-width: 720px;
}
.why-faculty-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  text-align: left !important;
}
.why-faculty-eyebrow::before {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
  content: "";
}
.why-faculty-eyebrow::after {
  display: none !important;
}
.why-faculty-h {
  text-align: left !important;
  font-size: clamp(28px, 2.8vw, 38px) !important;
  max-width: 720px !important;
  margin: 12px 0 0 !important;
}

/* ── Mobile: stack two-column sections ── */
@media (max-width: 980px) {
  .why-thesis { padding: 64px 0; }
  .why-thesis-grid,
  .why-vision-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .why-founders-head,
  .why-faculty-head {
    margin-bottom: 40px !important;
  }
}


/* ============================================================
   PHASE 27 — Two-tier faculty hierarchy
   Tier 1: Senior Faculty & Mentors (larger 220px portraits, 2 cards)
   Tier 2: Faculty (current 180px portraits, 3 cards)
   ============================================================ */

/* Wrapper for each tier */
.why-faculty-tier {
  margin-bottom: 64px;
}
.why-faculty-tier:last-child {
  margin-bottom: 0;
}

/* Tier sub-eyebrow — uppercase gold label introducing each tier */
.why-faculty-tier-label {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 32px;
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.why-faculty-tier-label::before,
.why-faculty-tier-label::after {
  content: "";
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: var(--gold);
  opacity: 0.4;
}

/* Tier 1 grid — 2 cards, centred */
.why-faculty-grid--senior {
  grid-template-columns: repeat(2, minmax(0, 360px));
  justify-content: center;
  gap: 80px;
}

/* Tier 2 grid — 3 cards, full row */
.why-faculty-grid--core {
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

/* Tier 1 senior cards — bigger portraits, slightly larger name */
.why-fac--senior .why-fac-portrait {
  width: 220px !important;
  height: 220px !important;
  padding: 7px;
}
.why-fac--senior .why-fac-name {
  font-size: 21px !important;
  margin-bottom: 8px !important;
}
.why-fac--senior .why-fac-role {
  font-size: 10.5px !important;
  margin-bottom: 16px !important;
}
.why-fac--senior .why-fac-bio {
  max-width: 320px !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

/* ── Mobile ── */
@media (max-width: 1024px) {
  .why-faculty-grid--core {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
  }
}
@media (max-width: 640px) {
  .why-faculty-tier { margin-bottom: 48px; }
  .why-faculty-grid--senior,
  .why-faculty-grid--core {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .why-fac--senior .why-fac-portrait {
    width: 180px !important;
    height: 180px !important;
  }
}


/* ============================================================
   PHASE 28 — UNIFORM DEEPEN-ON-HOVER FOR ALL CARD GRIDS
   On hover: card → primary teal, number → gold, text → white.
   Deep teal (#0A5954) stays reserved for closing accent cells.
   ============================================================ */

/* ---- 1. AUDIENCE-LINE (homepage "prepares the people" grid) ---- */
.audience-line {
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
.audience-line:hover {
  background: var(--teal) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px -14px rgba(15, 118, 110, 0.45) !important;
}
.audience-line:hover .audience-num {
  color: var(--gold) !important;
}
.audience-line:hover .audience-text {
  color: #fff !important;
}

/* ---- 2. PROG-CARD (programme cards) ---- */
.prog-card {
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.prog-card:hover {
  background: var(--teal) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px -14px rgba(15, 118, 110, 0.45) !important;
  border-color: var(--teal) !important;
}
.prog-card:hover .prog-tag,
.prog-card:hover .prog-num { color: var(--gold) !important; }
.prog-card:hover .prog-title,
.prog-card:hover .prog-h,
.prog-card:hover .prog-desc,
.prog-card:hover .prog-meta,
.prog-card:hover p,
.prog-card:hover h3 { color: #fff !important; }
.prog-card:hover .prog-cta,
.prog-card:hover .prog-link { color: var(--gold) !important; }

/* ---- 3. OUTCOME-CARD (programme pages) ---- */
.outcome-card {
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
.outcome-card:hover {
  background: var(--teal) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px -14px rgba(15, 118, 110, 0.45) !important;
}
.outcome-card:hover .outcome-card-label { color: var(--gold) !important; }
.outcome-card:hover .outcome-card-text,
.outcome-card:hover p,
.outcome-card:hover h3,
.outcome-card:hover h4 { color: #fff !important; }

/* ---- 4. BECOME-ITEM (who-you-are "you become" cards) ---- */
.become-item {
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
.become-item:hover {
  background: var(--teal) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px -14px rgba(15, 118, 110, 0.45) !important;
}
.become-item:hover *,
.become-item:hover p,
.become-item:hover h3,
.become-item:hover h4,
.become-item:hover span { color: #fff !important; }
.become-item:hover .become-num,
.become-item:hover .become-label { color: var(--gold) !important; }

/* ---- 5. REC-ITEM (recognition cards) ---- */
.rec-item {
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
  border-radius: 10px;
  padding: 8px 12px;
  margin: -8px -12px;
}
.rec-item:hover {
  background: var(--teal) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px -14px rgba(15, 118, 110, 0.45) !important;
}
.rec-item:hover .rec-eyebrow { color: var(--gold) !important; }
.rec-item:hover .rec-title,
.rec-item:hover .rec-meta,
.rec-item:hover p { color: #fff !important; }

/* ---- 6. CRED-ITEM (homepage credentials strip) ---- */
.cred-item {
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
  border-radius: 10px;
  padding: 12px 16px;
}
.cred-item:hover {
  background: var(--teal) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px -14px rgba(15, 118, 110, 0.45) !important;
}
.cred-item:hover .cred-label { color: var(--gold) !important; }
.cred-item:hover .cred-text { color: #fff !important; }

/* ---- 7. STAT-CARD ---- */
.stat-card {
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
.stat-card:hover {
  background: var(--teal) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px -14px rgba(15, 118, 110, 0.45) !important;
}
.stat-card:hover * { color: #fff !important; }
.stat-card:hover .stat-num,
.stat-card:hover .stat-number { color: var(--gold) !important; }

/* ---- 8. NEXT-CARD (CTA cards) ---- */
.next-card {
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
.next-card:not(.next-card--dark):hover {
  background: var(--teal) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px -14px rgba(15, 118, 110, 0.45) !important;
}
.next-card:not(.next-card--dark):hover * { color: #fff !important; }
.next-card:not(.next-card--dark):hover .next-cta { color: var(--gold) !important; }

/* ---- 9. AUD-CARD (audience selector cards if present) ---- */
.aud-card,
.wya-card {
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
.aud-card:hover,
.wya-card:hover {
  background: var(--teal) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px -14px rgba(15, 118, 110, 0.45) !important;
}
.aud-card:hover .aud-card-badge,
.aud-card:hover .aud-card-cta,
.wya-card:hover .badge { color: var(--gold) !important; }
.aud-card:hover .aud-card-h,
.aud-card:hover .aud-card-p,
.aud-card:hover p,
.aud-card:hover h3,
.wya-card:hover * { color: #fff !important; }

/* ---- Accessibility: respect reduced-motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  .audience-line, .prog-card, .outcome-card, .become-item,
  .rec-item, .cred-item, .stat-card, .next-card, .aud-card, .wya-card {
    transition: background 0.2s ease !important;
  }
  .audience-line:hover, .prog-card:hover, .outcome-card:hover,
  .become-item:hover, .rec-item:hover, .cred-item:hover,
  .stat-card:hover, .next-card:hover, .aud-card:hover, .wya-card:hover {
    transform: none !important;
  }
}


/* ============================================================
   PHASE 29 — Programmes compare link (below the 6-card grid)
   ============================================================ */
.programmes-compare-row {
  margin-top: 40px;
  text-align: center;
}
.programmes-compare-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 500;
  color: var(--teal);
  padding: 14px 28px;
  border: 1px solid var(--teal-b2);
  border-radius: 8px;
  background: var(--teal-bg);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.programmes-compare-link:hover {
  background: var(--teal);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(15, 118, 110, 0.45);
}
.programmes-compare-link .arrow {
  transition: transform 0.3s ease;
}
.programmes-compare-link:hover .arrow {
  transform: translateX(4px);
}


/* ============================================================
   PHASE 29 — Programme comparison page (/programmes/compare/)
   ============================================================ */

/* Hero */
.cmp-hero {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 8px 0 8px;
}
.cmp-hero-h1 {
  font-family: var(--fh);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 16px 0 20px;
}
.cmp-hero-h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}
.cmp-hero-sub {
  font-family: var(--fb);
  font-size: 17px;
  line-height: 1.65;
  color: var(--txt-mid);
  margin: 0;
}

/* Table wrapper — horizontal scroll on small screens */
.cmp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding-bottom: 8px;
}

.cmp-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
}

.cmp-table th,
.cmp-table td {
  text-align: left;
  vertical-align: top;
  padding: 18px 18px;
  border-bottom: 1px solid var(--grey);
}

/* Column headers (programme names) */
.cmp-table thead th {
  background: var(--ivory);
  border-bottom: 2px solid var(--teal-b2);
  position: sticky;
  top: 0;
  z-index: 2;
}
.cmp-prog-name {
  display: block;
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 4px;
}
.cmp-prog-code {
  display: block;
  font-family: var(--fb);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}

/* Row labels (left column) */
.cmp-row-label {
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  white-space: nowrap;
  background: var(--ivory);
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 130px;
}

/* Body cells */
.cmp-table tbody td {
  font-family: var(--fb);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--txt-mid);
}

/* Zebra striping for readability */
.cmp-table tbody tr:nth-child(even) td,
.cmp-table tbody tr:nth-child(even) .cmp-row-label {
  background: rgba(235, 247, 246, 0.4);
}

/* Highlight the first programme column (CCNG, the entry point) subtly */
.cmp-table thead th:nth-child(2),
.cmp-table tbody td:nth-child(2) {
  background: rgba(235, 247, 246, 0.55);
}

/* CTA row */
.cmp-cta-row td {
  padding-top: 22px;
  padding-bottom: 22px;
}
.cmp-explore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  transition: gap 0.25s ease, color 0.25s ease;
}
.cmp-explore:hover {
  color: var(--teal-deep);
  gap: 10px;
}

.cmp-note {
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1.6;
  color: var(--txt-light);
  font-style: italic;
  max-width: 720px;
  margin: 32px auto 0;
  text-align: center;
}

/* Quiz CTA block */
.cmp-quiz-cta {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.cmp-quiz-sub {
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 16px 0 28px;
}

/* Scroll hint on mobile */
@media (max-width: 920px) {
  .cmp-table-wrap {
    position: relative;
  }
  .cmp-table-wrap::after {
    content: "Scroll to compare →";
    display: block;
    font-family: var(--fb);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal);
    text-align: right;
    padding: 8px 4px 0;
  }
}


/* ============================================================
   PHASE 30 — AUTHORITATIVE homepage About-compact layout
   Final word on this section. Overrides any earlier cascade conflict.
   Centred closing statement + centred 3-up credentials row.
   ============================================================ */

/* Section + container: full width, centred content */
section.about.about--compact { padding: 88px 0 80px !important; background: var(--ivory) !important; }
section.about.about--compact > .container { max-width: 1120px !important; margin: 0 auto !important; width: 100% !important; }

/* About shell: centred, comfortable measure */
section.about.about--compact .about-compact-shell {
  text-align: center !important;
  max-width: 720px !important;
  margin: 0 auto 64px !important;
  width: 100% !important;
  float: none !important;
}
section.about.about--compact .about-compact-shell .eyebrow {
  text-align: center !important;
  display: block !important;
}
section.about.about--compact .about-compact-h,
section.about.about--compact .about-compact-line {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
section.about.about--compact .about-compact-line { max-width: 600px !important; }
section.about.about--compact .about-compact-readmore { text-align: center !important; }

/* Credentials strip: ALWAYS a centred horizontal 3-up row on desktop */
section.about.about--compact .about-credentials-strip {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 0 !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  width: 100% !important;
  padding-top: 36px !important;
  border-top: 1px solid rgba(11, 23, 41, 0.08) !important;
}

/* Each credential: equal-width third, centred text */
section.about.about--compact .about-credentials-strip .cred-item {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  gap: 8px !important;
  padding: 4px 28px !important;
  min-width: 0 !important;
}

/* Dividers between the three (the vertical gold rules now sit BETWEEN items) */
section.about.about--compact .about-credentials-strip .cred-divider {
  display: block !important;
  width: 1px !important;
  height: auto !important;
  min-height: 48px !important;
  align-self: center !important;
  background: rgba(199, 168, 109, 0.45) !important;
  flex: 0 0 1px !important;
}

section.about.about--compact .cred-label {
  font-family: var(--fh) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--gold-deep) !important;
  line-height: 1.3 !important;
}
section.about.about--compact .cred-text {
  font-family: var(--fb) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--navy) !important;
  line-height: 1.45 !important;
}

/* Mobile: stack into a centred column, hide vertical dividers */
@media (max-width: 768px) {
  section.about.about--compact { padding: 60px 0 52px !important; }
  section.about.about--compact .about-compact-shell { margin-bottom: 44px !important; }
  section.about.about--compact .about-credentials-strip {
    flex-direction: column !important;
    gap: 28px !important;
    padding-top: 28px !important;
  }
  section.about.about--compact .about-credentials-strip .cred-item {
    padding: 0 !important;
  }
  section.about.about--compact .about-credentials-strip .cred-divider {
    display: none !important;
  }
}


/* ============================================================
   PHASE 31 — Homepage credentials, matched to 'cities' pattern
   Full-width three columns: label + bold headline + supporting text
   ============================================================ */
.about-creds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
  padding-top: 48px;
  border-top: 1px solid var(--grey);
}
.about-cred {
  padding: 0 8px;
  text-align: left;
}
.about-cred-label {
  font-family: var(--fb);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-light);
  margin: 0 0 8px;
}
.about-cred-name {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 8px;
}
.about-cred-meta {
  font-family: var(--fb);
  font-size: 13px;
  color: var(--txt-mid);
  line-height: 1.5;
  margin: 0;
}

/* Mobile: stack */
@media (max-width: 768px) {
  .about-creds {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 32px;
  }
}

/* ============================================================
   PHASE 32 — Unified footer (single canonical footer sitewide)
   Legal links row + tagline/copy classes introduced in the
   standardised footer. Headings reuse the styled .footer-col h4.
   ============================================================ */
.footer-tagline {
  margin: 0 0 14px;
}
.footer-address {
  font-size: 13px;
  line-height: 1.65 !important;
  max-width: 320px;
  color: rgba(255, 255, 255, 0.6);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
}
.footer-copy {
  margin: 0;
}
.footer-legal-links {
  margin: 0;
}
.footer-legal-links a {
  color: rgba(255, 255, 255, 0.7);
}
.footer-legal-links a:hover {
  color: var(--gold);
}
.footer-legal-links .sep {
  opacity: 0.4;
  margin: 0 4px;
}
@media (max-width: 600px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   PHASE 33 — Legal pages (Privacy Policy, Terms of Service)
   Single-column readable measure, brand type and colour.
   ============================================================ */
.legal-page {
  padding: 120px 0 96px;
  background: var(--ivory);
}
.legal-page .container { max-width: 820px; }
.legal-head {
  padding-bottom: 28px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--ivory-deep);
}
.legal-head .eyebrow {
  color: var(--gold-deep);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 12px;
}
.legal-head h1 {
  font-family: var(--fh);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 14px;
}
.legal-meta {
  color: var(--txt-light);
  font-size: 14px;
  margin: 0;
}
.legal-body { color: var(--txt-mid); }
.legal-body p {
  font-size: 16px;
  line-height: 1.72;
  margin: 0 0 18px;
  max-width: 68ch;
}
.legal-body h2 {
  font-family: var(--fh);
  font-weight: 500;
  font-size: 22px;
  color: var(--navy);
  margin: 40px 0 12px;
}
.legal-body a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-body a:hover { color: var(--teal-deep); }
.legal-foot-note {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--ivory-deep);
  font-size: 14px;
  color: var(--txt-light);
  font-style: italic;
}

/* ============================================================
   PHASE 34 — Form: consent checkbox + honeypot
   ============================================================ */
/* Honeypot: visually hidden, accessible, off-screen */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Consent row */
.result-field--consent {
  margin-top: 4px;
  margin-bottom: 8px;
}
.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--txt-mid);
  cursor: pointer;
}
.consent-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--teal);
  cursor: pointer;
}
.consent-label a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent-label a:hover { color: var(--teal-deep); }

/* ============================================================
   PHASE 35 — About-compact cascade fix
   The .about--compact section had a stale 2-column grid from when
   it held a founder photo on the right. Founders moved to
   /why-winskill/ so the right column is empty and the container
   gets squeezed into the left half. Reset to single-column block
   so the container behaves like every other .container on the
   site and the credentials strip below renders full width.
   ============================================================ */
.about.about--compact {
  display: block !important;
  grid-template-columns: none !important;
}
.about.about--compact > .container {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- Hero documentary photographs (Phase: real imagery) ---- */
.pg-hero-canvas.has-photo { background: var(--ivory-deep); }
.pg-hero-canvas.has-photo::before { display: none; }
.pg-hero-canvas-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit; display: block;
}
.pg-hero-canvas-scrim {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(to top, rgba(11,23,41,0.58) 0%, rgba(11,23,41,0.15) 32%, rgba(11,23,41,0) 56%);
}
.pg-hero-canvas.has-photo .pg-hero-canvas-mark { z-index: 2; }
.pg-hero-canvas.has-photo .pg-hero-canvas-text { color: #fff; }

/* Why-WinSkill in-page story photograph */
.why-story-figure { margin: 28px 0 0; }
.why-story-figure img { width: 100%; height: auto; display: block; border-radius: 10px; }
.why-story-figure figcaption { margin-top: 10px; font-family: var(--fh); font-style: italic; font-size: 13px; color: var(--txt-mid); }

/* ============================================================
   HOMEPAGE LIVE UPGRADE — full-bleed photo hero + photo cards
   Appended phase. Navy/teal/ivory/gold tokens only.
   ============================================================ */

/* ---- Full-bleed photo hero ---- */
.hero1--photo{
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0;
}
.hero1--photo .hero1-bg{
  position: absolute; inset: 0;
  background: url('../assets/images/hero-home.jpg') center/cover no-repeat;
  transform: scale(1.03);
  animation: heroKenBurns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroKenBurns{ from{transform:scale(1.03)} to{transform:scale(1.12)} }
.hero1--photo .hero1-scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8,18,32,0.82) 0%, rgba(8,18,32,0.40) 34%, rgba(8,18,32,0.05) 62%, rgba(8,18,32,0) 100%),
    linear-gradient(to right, rgba(8,18,32,0.45) 0%, rgba(8,18,32,0.10) 46%, rgba(8,18,32,0) 70%);
}
.hero1--photo .hero1-in{
  position: relative; z-index: 2;
  display: block;
  max-width: 1120px; margin: 0 auto; width: 100%;
  padding: 96px var(--gutter) 64px;
}
.hero1--photo .hero-left{ max-width: 640px; }
.hero1--photo .hero-h1{ color: #ffffff; }
.hero1--photo .hero-h1-lead{ color: #ffffff; }
.hero1--photo .hero-h1-call{ color: #F6B53D; }
.hero1--photo .hero-sub{ color: #e7ece9; max-width: 520px; }
.hero1--photo .hero-trust{ color: rgba(255,255,255,0.72); }
.hero1--photo .hero-ctas{ margin-top: 26px; }
.btn-ghost-light{
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.45);
  backdrop-filter: blur(4px);
}
.btn-ghost-light:hover{ background: rgba(255,255,255,0.20); }
.hero1-cap{
  position: absolute; right: 18px; bottom: 12px; z-index: 2;
  color: rgba(255,255,255,0.6); font-size: 11px; letter-spacing: .04em;
}

/* ---- Programme cards with photo ---- */
.prog-card{ overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.prog-card-photo{
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ivory-deep);
}
.prog-card-photo img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.prog-card:hover .prog-card-photo img{ transform: scale(1.06); }
.prog-card-photo .prog-tag{
  position: absolute; top: 12px; left: 12px; margin: 0;
  background: rgba(248,246,241,0.94);
  color: var(--teal-deep);
  backdrop-filter: blur(2px);
}
/* restore inner padding for the text body now that card padding is 0 */
.prog-card h3{ padding: 18px 22px 0; }
.prog-card .prog-tagline{ padding: 8px 22px 0; }
.prog-card .prog-meta{ padding: 16px 22px 0; }
.prog-card .prog-cta{ padding: 14px 22px 22px; margin-top: auto; }

@media (max-width: 900px){
  .hero1--photo{ min-height: 480px; }
  .hero1--photo .hero1-in{ padding: 84px 24px 48px; }
  .hero1--photo .hero1-scrim{
    background: linear-gradient(to top, rgba(8,18,32,0.86) 0%, rgba(8,18,32,0.62) 45%, rgba(8,18,32,0.45) 100%);
  }
  .hero1--photo .hero-left{ text-align: left; }
  .hero1--photo .hero-h1{ text-shadow: 0 1px 14px rgba(8,18,32,0.45); }
}

/* ============================================================
   HERO — split layout with real WinSkill photo (green palette)
   ============================================================ */
.hero1--split{ background: var(--ivory); padding: 0; }
.hero1-split-in{
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 50px;
  align-items: center; padding: 124px var(--gutter) 64px;
}
.hero-shot{
  position: relative; border-radius: 20px; overflow: hidden;
  aspect-ratio: 1 / 1.08;
  box-shadow: 0 30px 60px -32px rgba(20,40,30,0.42);
}
.hero-shot img{ width: 100%; height: 100%; object-fit: cover; object-position: 46% 30%; display: block; }
.hero1--split .hero-eyebrow{
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal-deep); font-weight: 600; margin: 0 0 14px;
}
.hero1--split .hero-h1{ color: var(--navy); }
.hero1--split .hero-h1-lead{ color: var(--navy); }
.hero1--split .hero-h1 em.hero-h1-call{ color: #D86018; }
.hero1--split .hero-sub{ color: #51606b; max-width: 500px; }
.hero1--split .hero-ctas{ margin-top: 26px; }
.hero1--split .hero-trust{ color: #8a94a0; max-width: 470px; margin-top: 24px; }
.btn-outline-green{ background: transparent; color: var(--teal-deep); border: 1.5px solid var(--teal-deep); }
.btn-outline-green:hover{ background: var(--teal-deep); color: #fff; }
@media (max-width: 860px){
  .hero1-split-in{ grid-template-columns: 1fr; gap: 24px; padding: 108px 24px 48px; }
  .hero-shot{ order: -1; aspect-ratio: 1 / 1; }
}


/* ============================================================
   AWARD / RECOGNITION BAND
   ============================================================ */
.award-band{ background: var(--ivory); padding: 72px 0; }
.award-inner{
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: center;
  background: linear-gradient(180deg,#FBF7EE,#F6EFDF);
  border: 1px solid #ECE2C8; border-radius: 22px; padding: 34px;
}
.award-shot{ border-radius: 16px; overflow: hidden; box-shadow: 0 24px 50px -28px rgba(60,45,12,0.4); }
.award-shot img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.award-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.award-eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--gold); }
.award-band h2{ font-family:var(--fh); font-weight:500; font-size:32px; line-height:1.16; color:var(--navy); margin:14px 0 12px; }
.award-band h2 em{ font-style:italic; color:var(--teal); }
.award-band .award-cap{ color:var(--txt-mid); font-size:15px; max-width:440px; }
.award-meta{ display:flex; gap:26px; margin-top:22px; flex-wrap:wrap; }
.award-meta .k{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-light); }
.award-meta .v{ font-size:14.5px; color:var(--navy); font-weight:500; margin-top:2px; }
@media (max-width: 820px){
  .award-inner{ grid-template-columns:1fr; gap:24px; padding:22px; }
  .award-band{ padding:48px 0; }
  .award-band h2{ font-size:25px; }
  .award-shot{ order:-1; }
}